@platform-blocks/ui 0.5.0 → 0.6.1

package/lib/esm/index.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useContext, useMemo, useEffect, useState, useRef, useCallback, forwardRef, memo, useReducer, isValidElement, cloneElement, useImperativeHandle } from 'react';
-import { Platform, Modal, StyleSheet, View, Pressable, I18nManager, Keyboard, Dimensions, Text as Text$1, AccessibilityInfo, findNodeHandle, Animated as Animated$1, Easing, AppState, useWindowDimensions, PanResponder, BackHandler, Appearance, PixelRatio, NativeModules, TextInput, ScrollView, KeyboardAvoidingView, TouchableOpacity, FlatList, Linking, Image as Image$1, InteractionManager, StatusBar as StatusBar$1, UIManager } from 'react-native';
+import { Platform, Modal, StyleSheet, View, Pressable, I18nManager, Keyboard, Dimensions, Text as Text$1, AccessibilityInfo, findNodeHandle, Animated as Animated$1, Easing, AppState, useWindowDimensions, PanResponder, BackHandler, Appearance, PixelRatio, NativeModules, TextInput, ScrollView, KeyboardAvoidingView, TouchableOpacity, FlatList, Linking, Image as Image$1, InteractionManager, StatusBar as StatusBar$1 } from 'react-native';
 import Animated, { useSharedValue, withRepeat, withTiming, cancelAnimation, useAnimatedStyle, interpolate, Extrapolation, withSpring, Easing as Easing$1, runOnJS, withSequence, withDelay, interpolateColor, useDerivedValue, ReduceMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets, SafeAreaInsetsContext, SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
 import Svg, { Path, Defs, LinearGradient, Stop, Circle, Line, G, Text as Text$2, Rect, RadialGradient, ClipPath } from 'react-native-svg';
@@ -706,16 +706,16 @@ const DARK_THEME = {
             '#F2F2F7'
         ],
         highlight: [
-            '#2A2313',
-            '#3D3320',
-            '#4F422D',
-            '#61523A',
-            '#736247',
-            '#FBBF24', // Keep same base as light mode for consistency
-            '#FCD34D',
-            '#FDE68A',
-            '#FEF3C7',
-            '#FFFBEB'
+            '#1E3A5F', // Deep blue
+            '#1E4976', // 
+            '#1D5A8F', // 
+            '#2563EB', // Bright blue
+            '#3B82F6', // Primary blue
+            '#60A5FA', // Light blue
+            '#93C5FD', // 
+            '#BFDBFE', // 
+            '#DBEAFE', // 
+            '#EFF6FF' // Very light blue
         ],
         pink: [
             '#831843', '#9D174D', '#BE185D', '#DB2777', '#EC4899',
@@ -771,9 +771,9 @@ const DARK_THEME = {
     },
     states: {
         focusRing: 'rgba(10,132,255,0.55)',
-        textSelection: 'rgba(251, 191, 36, 0.2)', // Slightly more subtle for dark mode
-        highlightText: '#FDE68A', // highlight[7] for good contrast on dark
-        highlightBackground: 'rgba(97, 82, 58, 0.8)' // Darker highlight[3] with more opacity
+        textSelection: 'rgba(10, 132, 255, 0.25)', // Primary blue for selection
+        highlightText: '#60A5FA', // primary[4] - bright blue for good contrast on dark
+        highlightBackground: 'rgba(59, 130, 246, 0.35)' // primary[5] with transparency
     },
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
     fontSizes: {
@@ -862,6 +862,8 @@ const DARK_THEME = {
 const optionalModuleCache = new Map();
 const isDev = typeof __DEV__ !== 'undefined' ? __DEV__ : process.env.NODE_ENV !== 'production';
 // Metro bundler requires static string literals for require; keep all optional modules here.
+// NOTE: Do NOT add react-syntax-highlighter here - it causes Metro to fail on native
+// when the package isn't installed. Instead, pass the loader dynamically from web-only code.
 const optionalModuleLoaders = {
     'react-native': () => require('react-native'),
     'expo-clipboard': () => require('expo-clipboard'),
@@ -870,21 +872,9 @@ const optionalModuleLoaders = {
     'expo-document-picker': () => require('expo-document-picker'),
     'react-native-webview': () => require('react-native-webview'),
     'lodash.debounce': () => require('lodash.debounce'),
-    'react-syntax-highlighter': () => require('react-syntax-highlighter'),
-    'react-syntax-highlighter/dist/esm/languages/prism/jsx': () => require('react-syntax-highlighter/dist/esm/languages/prism/jsx'),
-    'react-syntax-highlighter/dist/esm/languages/prism/tsx': () => require('react-syntax-highlighter/dist/esm/languages/prism/tsx'),
-    'react-syntax-highlighter/dist/esm/languages/prism/typescript': () => require('react-syntax-highlighter/dist/esm/languages/prism/typescript'),
-    'react-syntax-highlighter/dist/esm/languages/prism/javascript': () => require('react-syntax-highlighter/dist/esm/languages/prism/javascript'),
-    'react-syntax-highlighter/dist/esm/languages/prism/json': () => require('react-syntax-highlighter/dist/esm/languages/prism/json'),
-    'react-syntax-highlighter/dist/esm/languages/prism/bash': () => require('react-syntax-highlighter/dist/esm/languages/prism/bash'),
-    'react-syntax-highlighter/dist/esm/styles/prism/prism': () => require('react-syntax-highlighter/dist/esm/styles/prism/prism'),
-    'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus': () => require('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus'),
     'expo-audio': () => require('expo-audio'),
     'react-native-gesture-handler': () => require('react-native-gesture-handler'),
     'expo-status-bar': () => require('expo-status-bar'),
-    'lottie-react': () => require('lottie-react'),
-    '@lottiefiles/dotlottie-react': () => require('@lottiefiles/dotlottie-react'),
-    'lottie-react-native': () => require('lottie-react-native'),
     'expo-navigation-bar': () => require('expo-navigation-bar'),
 };
 /**
@@ -1164,25 +1154,50 @@ function OverlayRenderer({ style } = {}) {
         }) }));
 }
 function OverlayContent({ overlay, isTopmost, onBackdropPress }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     useTheme();
     const DEBUG = overlay.debug === true;
     if (DEBUG) {
         console.log('Rendering overlay content:');
         console.log('- anchor:', overlay.anchor);
+        console.log('- placement:', overlay.placement);
         console.log('- strategy:', overlay.strategy);
         console.log('- zIndex:', overlay.zIndex);
     }
+    // Check if this is a top-positioned overlay
+    const isTopPlacement = (_a = overlay.placement) === null || _a === void 0 ? void 0 : _a.startsWith('top');
+    // For top placements, we need to anchor from the bottom of the overlay
+    // The anchor.y represents where the bottom of the overlay should be (top of the trigger minus offset)
+    // So we use the estimated height to calculate where the top of the overlay would be
     const overlayStyle = {
         // Use fixed positioning on web for viewport-anchored overlays
         position: (Platform.OS === 'web' && overlay.strategy === 'fixed') ? 'fixed' : 'absolute',
-        top: ((_a = overlay.anchor) === null || _a === void 0 ? void 0 : _a.y) || 0,
         left: ((_b = overlay.anchor) === null || _b === void 0 ? void 0 : _b.x) || 0,
         zIndex: overlay.zIndex,
         width: overlay.width || (((_c = overlay.anchor) === null || _c === void 0 ? void 0 : _c.width) ? overlay.anchor.width : undefined),
         maxWidth: overlay.maxWidth,
         maxHeight: overlay.maxHeight,
     };
+    if (isTopPlacement && Platform.OS === 'web') {
+        // For top placements, position from the bottom of the overlay
+        // anchor.y is where the top of the overlay should be, but we want to anchor from the bottom
+        // so the overlay can grow upward naturally
+        // The "bottom" of the anchor point is: viewport.height - (anchor.y + estimatedHeight)
+        // But since we don't know actual height, use bottom anchoring relative to the trigger
+        // Actually, anchor.y already accounts for the estimated height, so:
+        // anchor.y = trigger.y - estimatedHeight - offset
+        // We want the overlay's bottom edge to be at: trigger.y - offset
+        // Which means: bottom = viewport.height - (trigger.y - offset) = viewport.height - anchor.y - estimatedHeight
+        // Simpler: just set top and let it render, but the issue is the estimate is wrong
+        // Better approach: use the anchor.y + anchor.height as the "bottom anchor point"
+        // This is where the bottom of the overlay should be
+        const bottomAnchorPoint = (((_d = overlay.anchor) === null || _d === void 0 ? void 0 : _d.y) || 0) + (((_e = overlay.anchor) === null || _e === void 0 ? void 0 : _e.height) || 0);
+        overlayStyle.top = undefined;
+        overlayStyle.bottom = `calc(100vh - ${bottomAnchorPoint}px)`;
+    }
+    else {
+        overlayStyle.top = ((_f = overlay.anchor) === null || _f === void 0 ? void 0 : _f.y) || 0;
+    }
     if (DEBUG) {
         console.log('- overlayStyle:', overlayStyle);
     }
@@ -1947,7 +1962,6 @@ function resolveComponentSize(value, scale, options = {}) {
     }
     const firstAvailable = allowed.find(key => scale[key] !== undefined);
     if (firstAvailable && scale[firstAvailable] !== undefined) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return scale[firstAvailable];
     }
     throw new Error('resolveComponentSize: no matching size found in provided scale.');
@@ -2309,18 +2323,17 @@ function extractSpacingProps(props) {
  *
  * @param props - The layout properties object
  * @param props.fullWidth - When true, sets width to 100%
- * @param props.w - Shorthand width property (overrides fullWidth)
- * @param props.width - Specific width value (overrides fullWidth and w)
- * @param props.height - Height value
- * @param props.maxWidth - Maximum width constraint
- * @param props.minWidth - Minimum width constraint
- * @param props.maxHeight - Maximum height constraint
- * @param props.minHeight - Minimum height constraint
+ * @param props.w - Width property (overrides fullWidth)
+ * @param props.h - Height value
+ * @param props.maxW - Maximum width constraint
+ * @param props.minW - Minimum width constraint
+ * @param props.maxH - Maximum height constraint
+ * @param props.minH - Minimum height constraint
  *
  * @returns A partial ViewStyle object containing the computed layout styles
  *
  * @remarks
- * Property precedence for width: width > w > fullWidth
+ * Property precedence for width: w > fullWidth
  * The function processes width properties in order of specificity, with more specific
  * properties overriding more general ones.
  */
@@ -2330,43 +2343,38 @@ function getLayoutStyles(props) {
     if (props.fullWidth) {
         styles.width = '100%';
     }
-    // Handle shorthand width prop first
+    // Handle width prop (overrides fullWidth)
     if (props.w !== undefined) {
         styles.width = props.w;
     }
-    // Handle specific dimensions (override fullWidth and w if specified)
-    if (props.width !== undefined) {
-        styles.width = props.width;
-    }
-    if (props.height !== undefined) {
-        styles.height = props.height;
+    if (props.h !== undefined) {
+        styles.height = props.h;
     }
-    if (props.maxWidth !== undefined) {
-        styles.maxWidth = props.maxWidth;
+    if (props.maxW !== undefined) {
+        styles.maxWidth = props.maxW;
     }
-    if (props.minWidth !== undefined) {
-        styles.minWidth = props.minWidth;
+    if (props.minW !== undefined) {
+        styles.minWidth = props.minW;
     }
-    if (props.maxHeight !== undefined) {
-        styles.maxHeight = props.maxHeight;
+    if (props.maxH !== undefined) {
+        styles.maxHeight = props.maxH;
     }
-    if (props.minHeight !== undefined) {
-        styles.minHeight = props.minHeight;
+    if (props.minH !== undefined) {
+        styles.minHeight = props.minH;
     }
     return styles;
 }
 // Helper to extract layout props from component props
 function extractLayoutProps(props) {
-    const { fullWidth, w, width, height, maxWidth, minWidth, maxHeight, minHeight, ...otherProps } = props;
+    const { fullWidth, w, h, maxW, minW, maxH, minH, ...otherProps } = props;
     const layoutProps = {
         fullWidth,
         w,
-        width,
-        height,
-        maxWidth,
-        minWidth,
-        maxHeight,
-        minHeight
+        h,
+        maxW,
+        minW,
+        maxH,
+        minH
     };
     return { layoutProps, otherProps };
 }
@@ -2635,7 +2643,7 @@ async function measureAsyncPerformance(name, fn) {
 const OVERLAY_CACHE_LIMIT = 200;
 const overlayPositionCache = new Map();
 const formatNumber = (value) => Number.isFinite(value) ? Math.round(value * 100) / 100 : 0;
-const createOverlayCacheKey = (anchorX, anchorY, anchorWidth, anchorHeight, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary) => {
+const createOverlayCacheKey = (anchorX, anchorY, anchorWidth, anchorHeight, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary, matchAnchorWidth) => {
     return [
         formatNumber(anchorX),
         formatNumber(anchorY),
@@ -2652,6 +2660,7 @@ const createOverlayCacheKey = (anchorX, anchorY, anchorWidth, anchorHeight, over
         flip ? '1' : '0',
         shift ? '1' : '0',
         formatNumber(boundary),
+        matchAnchorWidth ? '1' : '0',
         Platform.OS,
     ].join('|');
 };
@@ -2697,11 +2706,12 @@ registerViewportListeners();
  * Enhanced overlay positioning that prevents off-screen rendering with intelligent caching
  */
 function calculateOverlayPositionEnhanced(anchor, overlay, options = {}) {
-    const { placement = 'auto', offset = 8, viewport = getViewport(), strategy = 'fixed', flip = true, shift = true, boundary = 8, fallbackPlacements = ['bottom', 'top', 'right', 'left'] } = options;
+    const { placement = 'auto', offset = 8, viewport = getViewport(), strategy = 'fixed', flip = true, shift = true, boundary = 8, fallbackPlacements = ['bottom', 'top', 'right', 'left'], matchAnchorWidth = false, } = options;
     // If overlay height is unknown/small (pre-measure), use a heuristic height for decision-making
     // This helps avoid choosing "bottom" when near the bottom of the viewport.
     const heuristicHeight = Math.max(overlay.height || 0, 240);
-    const overlayWidth = overlay.width;
+    // When matchAnchorWidth is true, use anchor width for overlay width calculations
+    const overlayWidth = matchAnchorWidth ? anchor.width : overlay.width;
     const overlayHeight = overlay.height > 0 ? overlay.height : heuristicHeight;
     // Account for scroll if using absolute positioning
     const scrollX = (Platform.OS === 'web' && strategy === 'absolute')
@@ -2712,7 +2722,7 @@ function calculateOverlayPositionEnhanced(anchor, overlay, options = {}) {
     const anchorX = anchor.x + scrollX;
     const anchorY = anchor.y + scrollY;
     // Check cache first
-    const cacheKey = createOverlayCacheKey(anchorX, anchorY, anchor.width, anchor.height, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary);
+    const cacheKey = createOverlayCacheKey(anchorX, anchorY, anchor.width, anchor.height, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary, matchAnchorWidth);
     const cached = getCachedOverlayPosition(cacheKey);
     if (cached) {
         return cached;
@@ -2780,10 +2790,14 @@ function calculateOverlayPositionEnhanced(anchor, overlay, options = {}) {
     // If enforcement moved the overlay to the opposite vertical side to avoid covering the anchor,
     // reflect that in the returned placement so arrows/styles are consistent.
     const resolvedPlacement = adjustPlacementIfMoved(finalPlacement, result, anchorRect);
+    // When matchAnchorWidth is true, preserve anchor width without constraining to maxWidth
+    const computedFinalWidth = matchAnchorWidth
+        ? anchor.width
+        : Math.min(result.finalWidth || overlay.width, result.maxWidth || overlay.width);
     const finalResult = {
         ...result,
         placement: resolvedPlacement,
-        finalWidth: Math.min(result.finalWidth || overlay.width, result.maxWidth || overlay.width),
+        finalWidth: computedFinalWidth,
         finalHeight: Math.min(result.finalHeight || overlay.height, result.maxHeight || overlay.height),
     };
     // Cache the result
@@ -3540,9 +3554,14 @@ const Text = (allProps) => {
     }
     // Platform-specific rendering
     if (Platform.OS === 'web' && isHTMLVariant(htmlTag)) {
-        const webStyles = convertToWebStyles([textStyles, spacingStyles, style,
-            // make sure text is side to side
-            { display: 'inline' }
+        const styleArray = Array.isArray(style) ? style : [style];
+        const hasDisplayOverride = styleArray.some((item) => item && ((item.display !== undefined) || (item.whiteSpace !== undefined)));
+        const webStyles = convertToWebStyles([
+            textStyles,
+            spacingStyles,
+            style,
+            // default to inline unless caller explicitly requests display/whitespace behavior
+            ...(hasDisplayOverride ? [] : [{ display: 'inline' }]),
         ]);
         // Handle text selection for web
         if (!selectable) {
@@ -6153,31 +6172,29 @@ const Button = (allProps) => {
     const { getDuration } = useReducedMotion$1();
     const { announce } = useAnnouncer();
     const { ref: focusRef} = useFocus(`button-${title || 'button'}`);
+    // Track measured width for loading state preservation
+    const [measuredWidth, setMeasuredWidth] = useState(null);
+    const wasLoadingRef = useRef(loading);
+    // When loading starts, we want to preserve the current measured width
+    // When loading ends, clear the preserved width so it can resize naturally
+    useEffect(() => {
+        if (!loading && wasLoadingRef.current) {
+            // Loading just ended, allow width to be recalculated
+            setMeasuredWidth(null);
+        }
+        wasLoadingRef.current = loading;
+    }, [loading]);
+    const handleLayout = useCallback((event) => {
+        // Only update measured width when not loading, so we capture the natural content width
+        if (!loading) {
+            const { width } = event.nativeEvent.layout;
+            setMeasuredWidth(width);
+        }
+        // Call user's onLayout if provided
+        onLayout === null || onLayout === void 0 ? void 0 : onLayout(event);
+    }, [loading, onLayout]);
     // Determine button content - children takes precedence over title
     const buttonContent = children !== null && children !== void 0 ? children : title;
-    // Calculate minimum width for loading state based on content and size
-    const calculateMinWidth = () => {
-        if (!buttonContent || typeof buttonContent !== 'string')
-            return undefined;
-        // Base character width estimates based on size
-        const charWidthBySize = {
-            xs: 6,
-            sm: 7,
-            md: 8,
-            lg: 9,
-            xl: 10,
-            '2xl': 11,
-            '3xl': 12
-        };
-        const sizeKey = typeof size === 'string' ? size : 'md';
-        const charWidth = charWidthBySize[sizeKey] || 8;
-        const horizontalPadding = getSpacing(size) * 2; // Left + right padding
-        // Estimate content width: character count * average char width + padding
-        const contentWidth = buttonContent.length * charWidth + horizontalPadding;
-        // Add space for loader and gap when loading
-        const loaderWidth = getFontSize$1(size) + getSpacing(size) / 2; // Loader + margin
-        return Math.max(contentWidth, contentWidth + loaderWidth);
-    };
     // Determine what content to show based on loading state
     const displayContent = loading
         ? (loadingTitle !== undefined ? loadingTitle : '')
@@ -6216,12 +6233,12 @@ const Button = (allProps) => {
     const shadowStyles = getShadowStyles({ shadow: effectiveShadow }, theme, 'button');
     const spacingStyles = getSpacingStyles(spacingProps);
     const baseLayoutStyles = getLayoutStyles(layoutProps);
-    // Apply minimum width when loading to prevent size changes
-    const calculatedMinWidth = calculateMinWidth();
+    // Apply measured width when loading to prevent size changes
+    // Use the actual measured width instead of character-based estimates
     const layoutStyles = {
         ...baseLayoutStyles,
-        ...(loading && calculatedMinWidth && !layoutProps.width && !layoutProps.w && !layoutProps.fullWidth
-            ? { minWidth: calculatedMinWidth }
+        ...(loading && measuredWidth && !layoutProps.w && !layoutProps.fullWidth
+            ? { width: measuredWidth, minWidth: measuredWidth }
             : {})
     };
     const iconSpacing = getSpacing(size) / 2;
@@ -6414,7 +6431,7 @@ const Button = (allProps) => {
                         ...(Platform.OS !== 'web' ? { transform: [{ translateY: 1 }] } : {})
                     } : null,
                     style,
-                ], onPress: handleInternalPress, onLayout: onLayout, onPressIn: handlePressIn, onPressOut: handlePressOut, onHoverIn: onHoverIn, onHoverOut: onHoverOut, onLongPress: onLongPress, disabled: isInteractionDisabled, children: [variant === 'gradient' && hasLinearGradient$4 && (jsx(OptionalLinearGradient$6, { colors: resolvedCustomColor
+                ], onPress: handleInternalPress, onLayout: handleLayout, onPressIn: handlePressIn, onPressOut: handlePressOut, onHoverIn: onHoverIn, onHoverOut: onHoverOut, onLongPress: onLongPress, disabled: isInteractionDisabled, children: [variant === 'gradient' && hasLinearGradient$4 && (jsx(OptionalLinearGradient$6, { colors: resolvedCustomColor
                             ? [resolvedCustomColor, theme.colors.primary[7]]
                             : [theme.colors.primary[5], theme.colors.primary[7]], style: { position: 'absolute', zIndex: -1, top: 0, left: 0, right: 0, bottom: 0, borderRadius: radiusStyles.borderRadius }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 } })), loading ? (jsxs(Fragment, { children: [jsx(Loader, { size: size, color: getLoaderColor(), style: !isIconButton ? { marginRight: iconSpacing } : undefined }), !isIconButton && renderButtonContent(displayContent)] })) : isIconButton ? (
                     // Icon-only button
@@ -6654,18 +6671,22 @@ const useSafeSafeAreaInsets = () => {
         return { top: 0, bottom: 0, left: 0, right: 0 };
     }
 };
-function Dialog({ visible, variant = 'modal', title, children, closable = true, backdrop = true, backdropClosable = true, shouldClose = false, onClose, width, height, style, bottomSheetSwipeZone = 'container', }) {
+function Dialog({ visible, variant = 'modal', title, children, closable = true, backdrop = true, backdropClosable = true, shouldClose = false, onClose, w, h, radius, style, showHeader = true, bottomSheetSwipeZone = 'container', }) {
     const theme = useTheme();
     const { isRTL } = useDirection();
     const insets = useSafeSafeAreaInsets();
     const { width: screenWidth, height: screenHeight } = useWindowDimensions();
     const horizontalMargin = 32; // safety margin so dialog never touches edges
     const isNativePlatform = Platform.OS === 'ios' || Platform.OS === 'android';
-    const defaultModalMaxWidth = Math.min((width || 500), Math.max(200, screenWidth - horizontalMargin));
+    const defaultModalMaxWidth = Math.min((w || 500), Math.max(200, screenWidth - horizontalMargin));
     const modalEffectiveWidth = variant !== 'modal'
         ? undefined
         : Math.min(defaultModalMaxWidth, screenWidth - horizontalMargin);
-    const bottomSheetMaxWidth = Math.min(width ? width : (isNativePlatform ? 720 : Math.min(600, screenWidth - horizontalMargin)), screenWidth);
+    const bottomSheetMaxWidth = Math.min(w ? w : (isNativePlatform ? 720 : Math.min(600, screenWidth - horizontalMargin)), screenWidth);
+    const resolvedRadius = radius !== null && radius !== void 0 ? radius : (variant === 'bottomsheet' ? 20 : 16);
+    const resolvedMaxHeight = variant === 'bottomsheet'
+        ? (h !== null && h !== void 0 ? h : Math.max(200, screenHeight - insets.top - 24))
+        : (variant === 'fullscreen' ? '100%' : (h || '90%'));
     const invokeOnClose = useCallback(() => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [onClose]);
@@ -6721,20 +6742,12 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
                         event.preventDefault();
                     }
                 }
-                // Allow dragging in both directions but apply rubber band for upward movement
-                const dragDistance = gestureState.dy;
-                if (dragDistance >= 0) {
-                    // Downward movement - apply subtle resistance for better feel
-                    const resistance = 0.8;
-                    const resistedDistance = dragDistance * resistance + (dragDistance > 100 ? (dragDistance - 100) * 0.2 : 0);
-                    slideAnim.value = resistedDistance;
-                }
-                else {
-                    // Upward movement - apply rubber band effect
-                    const upwardResistance = 0.3;
-                    const rubberBandDistance = dragDistance * upwardResistance;
-                    slideAnim.value = rubberBandDistance;
-                }
+                // Only allow downward movement (dismiss gesture)
+                const dragDistance = Math.max(0, gestureState.dy);
+                // Downward movement - apply subtle resistance for better feel
+                const resistance = 0.8;
+                const resistedDistance = dragDistance * resistance + (dragDistance > 100 ? (dragDistance - 100) * 0.2 : 0);
+                slideAnim.value = resistedDistance;
             }
         },
         onPanResponderRelease: (_, gestureState) => {
@@ -6891,8 +6904,8 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     }, [shouldClose]);
     const isDark = theme.colorScheme === 'dark';
     const surfaceColor = isDark ? theme.backgrounds.surface : '#FFFFFF';
-    const borderColor = isDark ? theme.colors.gray[6] : '#E1E3E6';
-    const headerBg = isDark ? theme.backgrounds.subtle : surfaceColor;
+    isDark ? theme.colors.gray[6] : '#E1E3E6';
+    const headerBg = surfaceColor;
     const contentBg = surfaceColor;
     const dynamicStyles = StyleSheet.create({
         backdrop: {
@@ -6903,24 +6916,28 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
         }, // Allow backdropFilter on web
         modalContainer: {
             backgroundColor: contentBg,
-            borderRadius: variant === 'fullscreen' ? 0 : (variant === 'bottomsheet' ? 20 : 16),
-            borderBottomLeftRadius: variant === 'bottomsheet' ? 0 : undefined,
-            borderBottomRightRadius: variant === 'bottomsheet' ? 0 : undefined,
+            borderRadius: variant === 'fullscreen' ? 0 : resolvedRadius,
+            ...(variant === 'bottomsheet' ? {
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+            } : {}),
+            overflow: 'hidden', // Clip content to border radius
             // Clamp width to viewport (minus margins) while respecting provided width
             maxWidth: variant === 'fullscreen'
                 ? '100%'
                 : variant === 'bottomsheet'
                     ? bottomSheetMaxWidth
                     : defaultModalMaxWidth,
-            maxHeight: variant === 'fullscreen' ? '100%' : (height || '90%'),
+            maxHeight: resolvedMaxHeight,
             width: variant === 'fullscreen'
                 ? '100%'
                 : variant === 'modal'
                     ? modalEffectiveWidth || 'auto'
                     : '100%',
-            height: variant === 'fullscreen' ? '100%' : (variant === 'modal' ? undefined : undefined),
-            // For modal variant, remove flex to allow fit-content behavior
-            ...(variant === 'modal' ? {} : { flex: 1 }),
+            // Fullscreen uses 100% height, others auto-size to content
+            height: variant === 'fullscreen' ? '100%' : undefined,
+            // Only fullscreen should stretch to fill
+            ...(variant === 'fullscreen' ? { flex: 1 } : {}),
             // Ensure minWidth never exceeds viewport clamp
             minWidth: variant === 'modal' ? Math.min(300, Math.max(200, screenWidth - horizontalMargin)) : undefined,
             alignSelf: variant === 'bottomsheet' ? 'center' : 'center',
@@ -6946,24 +6963,27 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
                     }
                     : Platform.OS === 'android' && variant !== 'fullscreen'
                         ? { elevation: 16, }
-                        : {
-                            boxShadow: 'none',
-                            height: '100%',
-                            position: 'absolute',
-                        }),
+                        : variant === 'fullscreen'
+                            ? {
+                                boxShadow: 'none',
+                                height: '100%',
+                                position: 'absolute',
+                            }
+                            : { boxShadow: 'none' }),
         }, // Allow boxShadow on web
         header: {
             alignItems: 'center',
-            backgroundColor: headerBg,
-            borderBottomColor: borderColor,
-            borderBottomWidth: variant === 'fullscreen' ? 0 : 1,
+            backgroundColor: showHeader ? headerBg : 'transparent',
+            // borderBottomColor: showHeader ? borderColor : 'transparent',
+            // borderBottomWidth: showHeader && variant !== 'fullscreen' ? 1 : 0,
             flexDirection: isRTL ? 'row-reverse' : 'row',
             justifyContent: 'space-between',
             padding: 20,
+            paddingBottom: title ? 0 : 20,
         },
         content: {
-            // For modal variant, remove flex to allow fit-content behavior
-            ...(variant === 'modal' ? {} : { flex: 1 }),
+            // Only fullscreen content should stretch
+            ...(variant === 'fullscreen' ? { flex: 1 } : {}),
             alignSelf: 'stretch',
             backgroundColor: contentBg,
             padding: variant === 'fullscreen' ? 0 : 20,
@@ -7019,8 +7039,10 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     });
     const bottomSheetAnimatedStyle = useAnimatedStyle(() => {
         if (variant === 'bottomsheet') {
+            // Clamp to 0 minimum to prevent seeing "under" the sheet
+            const clampedY = Math.max(0, slideAnim.value);
             return {
-                transform: [{ translateY: slideAnim.value }],
+                transform: [{ translateY: clampedY }],
             };
         }
         return {};
@@ -7037,7 +7059,7 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
             animatedStyle = bottomSheetAnimatedStyle;
         }
         return (jsxs(Animated.View, { style: [dynamicStyles.modalContainer, animatedStyle], ...(variant === 'bottomsheet' && bottomSheetSwipeZone === 'container' && panHandlers ? panHandlers : {}), children: [variant === 'bottomsheet' && (jsx(View, { style: dynamicStyles.dragHandleContainer, ...(bottomSheetSwipeZone === 'handle' && panHandlers ? panHandlers : {}), children: jsx(View, { style: dynamicStyles.dragHandle }) })), (title !== null &&
-                    title && closable) && (jsxs(View, { style: dynamicStyles.header, children: [jsx(Text, { variant: "h3", color: "text", children: title || '' }), closable && (jsx(Button, { variant: "ghost", onPress: handleClose, style: dynamicStyles.closeButton, children: jsx(Icon, { name: "x", size: "md" }) }))] })), jsx(View, { style: [dynamicStyles.content, style], children: children })] }));
+                    title && closable) && (jsxs(View, { style: dynamicStyles.header, children: [jsx(Text, { variant: "h3", color: "text", children: title || '' }), closable && variant !== 'bottomsheet' && (jsx(Button, { variant: "ghost", onPress: handleClose, style: dynamicStyles.closeButton, children: jsx(Icon, { name: "x", size: "md" }) }))] })), jsx(View, { style: [dynamicStyles.content, style], children: children })] }));
     };
     return (jsx(Modal, { visible: visible, transparent: true, animationType: "none", statusBarTranslucent: variant === 'fullscreen', children: jsxs(Animated.View, { style: [
                 dynamicStyles.backdrop,
@@ -7246,7 +7268,7 @@ function DialogRenderer() {
         return null;
     // Render the topmost dialog
     const topDialog = dialogs[dialogs.length - 1];
-    return (jsx(Dialog, { visible: true, variant: topDialog.variant, title: topDialog.title, closable: topDialog.closable, backdrop: topDialog.backdrop, backdropClosable: topDialog.backdropClosable, shouldClose: topDialog.isClosing, onClose: () => removeDialog(topDialog.id), children: topDialog.content }));
+    return (jsx(Dialog, { visible: true, variant: topDialog.variant, title: topDialog.title, closable: topDialog.closable, backdrop: topDialog.backdrop, backdropClosable: topDialog.backdropClosable, shouldClose: topDialog.isClosing, onClose: () => removeDialog(topDialog.id), w: topDialog.w, h: topDialog.h, radius: topDialog.radius, style: topDialog.style, showHeader: topDialog.showHeader, children: topDialog.content }));
 }
 
 const Flex = factory((props, ref) => {
@@ -8331,7 +8353,14 @@ const getContrastPreference = () => {
         return 'less';
     return 'no-preference';
 };
-const getColorScheme = () => { var _a, _b; return (_b = (_a = Appearance === null || Appearance === void 0 ? void 0 : Appearance.getColorScheme) === null || _a === void 0 ? void 0 : _a.call(Appearance)) !== null && _b !== void 0 ? _b : 'no-preference'; };
+const getColorScheme = () => {
+    var _a;
+    const scheme = (_a = Appearance === null || Appearance === void 0 ? void 0 : Appearance.getColorScheme) === null || _a === void 0 ? void 0 : _a.call(Appearance);
+    // Handle 'unspecified' from newer React Native versions
+    if (scheme === 'light' || scheme === 'dark')
+        return scheme;
+    return 'no-preference';
+};
 const getReducedMotion = async () => {
     if (Platform.OS === 'web') {
         if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
@@ -8556,7 +8585,13 @@ function useDeviceInfo(options = {}) {
     useEffect(() => {
         var _a;
         const colorSubscription = (_a = Appearance === null || Appearance === void 0 ? void 0 : Appearance.addChangeListener) === null || _a === void 0 ? void 0 : _a.call(Appearance, ({ colorScheme: scheme }) => {
-            setColorScheme(scheme !== null && scheme !== void 0 ? scheme : 'no-preference');
+            // Handle 'unspecified' from newer React Native versions
+            if (scheme === 'light' || scheme === 'dark') {
+                setColorScheme(scheme);
+            }
+            else {
+                setColorScheme('no-preference');
+            }
         });
         const mediaListeners = [];
         let boldSubscription;
@@ -9101,7 +9136,7 @@ function SpotlightRoot({ query, onQueryChange, children, opened = false, onClose
     const targetWidth = Math.min(560, Math.max(280, screenWidth - horizontalMargin));
     // (Hotkey registration moved to main Spotlight component for access to store.toggle())
     const fullscreen = shouldUseModal;
-    return (jsx(Dialog, { visible: opened, onClose: onClose, variant: fullscreen ? 'fullscreen' : 'modal', backdrop: true, backdropClosable: true, width: fullscreen ? undefined : targetWidth, title: null, style: [
+    return (jsx(Dialog, { visible: opened, onClose: onClose, variant: fullscreen ? 'fullscreen' : 'modal', backdrop: true, backdropClosable: true, w: fullscreen ? undefined : targetWidth, title: null, style: [
             styles$e.spotlightModal,
             fullscreen && { width: '100%', height: '100%', maxHeight: '100%', borderRadius: 0, position: 'fixed', top: 0, left: 0 },
             !fullscreen && {
@@ -9663,6 +9698,23 @@ function generateUniversalCSS() {
         xl: '88em'
     };
     const universalCSS = `
+    /* Reset browser default input styles to prevent double borders */
+    input, textarea, select {
+      outline: none !important;
+      -webkit-appearance: none !important;
+      -moz-appearance: none !important;
+      appearance: none !important;
+    }
+
+    input:focus, textarea:focus, select:focus {
+      outline: none !important;
+    }
+
+    /* Ensure React Native Web focusable elements don't show browser outlines */
+    [data-focusable="true"]:focus {
+      outline: none !important;
+    }
+
     /* Color scheme based visibility */
     .platform-blocks-light-hidden {
       display: none !important;
@@ -9709,12 +9761,14 @@ function UniversalCSS() {
             return;
         }
         // Check if styles are already injected
-        const existingStyle = document.getElementById('platform-blocks-universal-css');
-        if (existingStyle) {
+        let styleElement = document.getElementById('platform-blocks-universal-css');
+        if (styleElement) {
+            // Update content if it exists (in case CSS changed)
+            styleElement.textContent = css;
             return;
         }
         // Create and inject styles
-        const styleElement = document.createElement('style');
+        styleElement = document.createElement('style');
         styleElement.id = 'platform-blocks-universal-css';
         styleElement.textContent = css;
         document.head.appendChild(styleElement);
@@ -9732,593 +9786,6 @@ function UniversalCSS() {
     return null;
 }
 
-/**
- * Core Ability class for managing permissions
- */
-class AbilityCore {
-    constructor(rules = []) {
-        this.rules = [];
-        this.cache = new Map();
-        this.rules = [...rules];
-    }
-    /**
-     * Check if action is allowed on subject
-     */
-    can(action, subject, field) {
-        return this.check(action, subject, field).allowed;
-    }
-    /**
-     * Check if action is forbidden on subject
-     */
-    cannot(action, subject, field) {
-        return !this.can(action, subject, field);
-    }
-    /**
-     * Get detailed permission check result
-     */
-    check(action, subject, field) {
-        const cacheKey = this.getCacheKey(action, subject, field);
-        if (this.cache.has(cacheKey)) {
-            return this.cache.get(cacheKey);
-        }
-        const result = this.performCheck(action, subject, field);
-        this.cache.set(cacheKey, result);
-        return result;
-    }
-    /**
-     * Update ability rules and clear cache
-     */
-    update(rules) {
-        this.rules = [...rules];
-        this.cache.clear();
-    }
-    /**
-     * Get all current rules
-     */
-    getRules() {
-        return [...this.rules];
-    }
-    /**
-     * Clear all rules and cache
-     */
-    clear() {
-        this.rules = [];
-        this.cache.clear();
-    }
-    /**
-     * Perform the actual permission check
-     */
-    performCheck(action, subject, field) {
-        // Start with denied by default
-        let result = {
-            allowed: false,
-            reason: 'No matching permission rule found'
-        };
-        // Check rules in order (later rules can override earlier ones)
-        for (const rule of this.rules) {
-            if (this.ruleMatches(rule, action, subject, field)) {
-                result = {
-                    allowed: !rule.inverted,
-                    reason: rule.reason || (rule.inverted ? 'Access denied by rule' : 'Access granted by rule'),
-                    rule
-                };
-            }
-        }
-        return result;
-    }
-    /**
-     * Check if a rule matches the current permission check
-     */
-    ruleMatches(rule, action, subject, field) {
-        // Check action match
-        const actions = Array.isArray(rule.action) ? rule.action : [rule.action];
-        if (!actions.includes(action) && !actions.includes('*')) {
-            return false;
-        }
-        // Check subject match
-        const subjects = Array.isArray(rule.subject) ? rule.subject : [rule.subject];
-        if (!this.subjectMatches(subjects, subject)) {
-            return false;
-        }
-        // Check field match (if specified)
-        if (field && rule.fields && !rule.fields.includes(field)) {
-            return false;
-        }
-        // Check conditions (if subject is an object)
-        if (rule.conditions && typeof subject === 'object' && subject !== null) {
-            return this.conditionsMatch(rule.conditions, subject);
-        }
-        return true;
-    }
-    /**
-     * Check if subject matches any of the rule subjects
-     */
-    subjectMatches(ruleSubjects, checkSubject) {
-        for (const ruleSubject of ruleSubjects) {
-            if (ruleSubject === '*')
-                return true;
-            if (ruleSubject === checkSubject)
-                return true;
-            // Handle class/constructor matching
-            if (typeof ruleSubject === 'function' && typeof checkSubject === 'object') {
-                if (checkSubject instanceof ruleSubject)
-                    return true;
-                if (checkSubject.constructor === ruleSubject)
-                    return true;
-            }
-            // Handle string matching for object types
-            if (typeof ruleSubject === 'string' && typeof checkSubject === 'object') {
-                if (checkSubject.__type === ruleSubject)
-                    return true;
-                if (checkSubject.type === ruleSubject)
-                    return true;
-                if (checkSubject.constructor.name === ruleSubject)
-                    return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Check if conditions match the subject object
-     */
-    conditionsMatch(conditions, subject) {
-        for (const [key, expectedValue] of Object.entries(conditions)) {
-            const actualValue = subject[key];
-            if (!this.valuesMatch(actualValue, expectedValue)) {
-                return false;
-            }
-        }
-        return true;
-    }
-    /**
-     * Check if two values match (handles various comparison types)
-     */
-    valuesMatch(actual, expected) {
-        // Exact match
-        if (actual === expected)
-            return true;
-        // Array contains check
-        if (Array.isArray(expected) && expected.includes(actual))
-            return true;
-        if (Array.isArray(actual) && actual.includes(expected))
-            return true;
-        // Function/predicate check
-        if (typeof expected === 'function') {
-            return expected(actual);
-        }
-        // Regex match for strings
-        if (expected instanceof RegExp && typeof actual === 'string') {
-            return expected.test(actual);
-        }
-        // Object comparison (shallow)
-        if (typeof expected === 'object' && typeof actual === 'object' && expected !== null && actual !== null) {
-            return Object.keys(expected).every(key => this.valuesMatch(actual[key], expected[key]));
-        }
-        return false;
-    }
-    /**
-     * Generate cache key for permission check
-     */
-    getCacheKey(action, subject, field) {
-        const subjectKey = typeof subject === 'object'
-            ? JSON.stringify(subject)
-            : String(subject);
-        return `${action}:${subjectKey}:${field || ''}`;
-    }
-}
-/**
- * Create a new Ability instance
- */
-function createAbility(rules = []) {
-    return new AbilityCore(rules);
-}
-
-/**
- * Permission Context
- */
-const PermissionContext = createContext(null);
-/**
- * Permission Provider Component
- */
-const PermissionProvider = ({ rules = [], user, children, dev = {} }) => {
-    const [ability] = useState(() => createAbility(rules));
-    const [currentUser, setCurrentUser] = useState(user);
-    const updateAbility = useCallback((newRules) => {
-        ability.update(newRules);
-    }, [ability]);
-    const can = useCallback((action, subject, field) => {
-        const result = ability.can(action, subject, field);
-        if (dev.logChecks) {
-            console.log(`[Permissions] Can ${action} ${subject}${field ? `.${field}` : ''}:`, result);
-        }
-        return result;
-    }, [ability, dev.logChecks]);
-    const cannot = useCallback((action, subject, field) => {
-        const result = ability.cannot(action, subject, field);
-        if (dev.logChecks) {
-            console.log(`[Permissions] Cannot ${action} ${subject}${field ? `.${field}` : ''}:`, result);
-        }
-        return result;
-    }, [ability, dev.logChecks]);
-    const setUser = useCallback((newUser) => {
-        setCurrentUser(newUser);
-    }, []);
-    const contextValue = useMemo(() => ({
-        ability,
-        updateAbility,
-        can,
-        cannot,
-        user: currentUser,
-        setUser
-    }), [ability, updateAbility, can, cannot, currentUser, setUser]);
-    return React__default.createElement(PermissionContext.Provider, { value: contextValue }, children);
-};
-/**
- * Hook to access permission context
- */
-const usePermissions = (options = {}) => {
-    const context = useContext(PermissionContext);
-    if (!context) {
-        if (options.required) {
-            throw new Error('usePermissions must be used within a PermissionProvider');
-        }
-        if (options.debug) {
-            console.warn('[Permissions] usePermissions called outside of PermissionProvider');
-        }
-        // Return a fallback context that allows everything
-        return {
-            ability: createAbility([{ action: '*', subject: '*' }]),
-            updateAbility: () => { },
-            can: () => true,
-            cannot: () => false,
-            user: null,
-            setUser: () => { }
-        };
-    }
-    return context;
-};
-/**
- * Hook to get the current ability instance
- */
-const useAbility = () => {
-    const { ability } = usePermissions();
-    return ability;
-};
-
-/**
- * Can Component - Renders children if permission is granted
- */
-const Can = ({ I: action, a: subject, field, children, fallback = null, ability: customAbility, style, testID, passthrough = false }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    // Development passthrough
-    if (passthrough && __DEV__) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    const hasPermission = subject
-        ? ability.can(action, subject, field)
-        : ability.can(action, '*', field);
-    if (hasPermission) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    return React__default.createElement(View, { style, testID }, fallback);
-};
-/**
- * Can Component with conditions - For object-level permissions
- */
-const CanWithConditions = ({ I: action, this: subject, field, children, fallback = null, ability: customAbility, style, testID, passthrough = false }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    // Development passthrough
-    if (passthrough && __DEV__) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    const hasPermission = ability.can(action, subject, field);
-    if (hasPermission) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    return React__default.createElement(View, { style, testID }, fallback);
-};
-/**
- * Cannot Component - Renders children if permission is NOT granted
- */
-const Cannot = ({ I: action, a: subject, field, children, fallback = null, ability: customAbility, style, testID, passthrough = false }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    // Development passthrough
-    if (passthrough && __DEV__) {
-        return React__default.createElement(View, { style, testID }, fallback);
-    }
-    const hasPermission = subject
-        ? ability.can(action, subject, field)
-        : ability.can(action, '*', field);
-    if (!hasPermission) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    return React__default.createElement(View, { style, testID }, fallback);
-};
-/**
- * Permission Gate - Requires ALL permissions to pass
- */
-const PermissionGate = ({ permissions, children, fallback = null, ability: customAbility, onUnauthorized }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    const allPermissionsGranted = permissions.every(({ action, subject, field }) => ability.can(action, subject, field));
-    React__default.useEffect(() => {
-        if (!allPermissionsGranted && onUnauthorized) {
-            onUnauthorized();
-        }
-    }, [allPermissionsGranted, onUnauthorized]);
-    if (allPermissionsGranted) {
-        return React__default.createElement(React__default.Fragment, null, children);
-    }
-    return React__default.createElement(React__default.Fragment, null, fallback);
-};
-/**
- * Higher-Order Component for permission checking
- */
-function withCan(action, subject, field) {
-    return function CanHOC(Component) {
-        const WrappedComponent = (props) => {
-            const { fallback, ...componentProps } = props;
-            return React__default.createElement(Can, { I: action, a: subject, field, fallback }, React__default.createElement(Component, componentProps));
-        };
-        WrappedComponent.displayName = `withCan(${Component.displayName || Component.name})`;
-        return WrappedComponent;
-    };
-}
-/**
- * Higher-Order Component for permission denial checking
- */
-function withCannot(action, subject, field) {
-    return function CannotHOC(Component) {
-        const WrappedComponent = (props) => {
-            const { fallback, ...componentProps } = props;
-            return React__default.createElement(Cannot, { I: action, a: subject, field, fallback }, React__default.createElement(Component, componentProps));
-        };
-        WrappedComponent.displayName = `withCannot(${Component.displayName || Component.name})`;
-        return WrappedComponent;
-    };
-}
-
-/**
- * Fluent API for building permissions
- */
-class PermissionBuilder {
-    constructor() {
-        this.rules = [];
-    }
-    /**
-     * Grant permission
-     */
-    allow(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: false
-        });
-        return this;
-    }
-    /**
-     * Deny permission
-     */
-    forbid(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: true
-        });
-        return this;
-    }
-    /**
-     * Conditional permission
-     */
-    allowIf(action, subject, conditions, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: false,
-            conditions
-        });
-        return this;
-    }
-    /**
-     * Conditional denial
-     */
-    forbidIf(action, subject, conditions, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: true,
-            conditions
-        });
-        return this;
-    }
-    /**
-     * Grant all actions on a subject
-     */
-    manage(subject) {
-        this.rules.push({
-            action: '*',
-            subject,
-            inverted: false
-        });
-        return this;
-    }
-    /**
-     * Forbid all actions on a subject
-     */
-    forbidAll(subject) {
-        this.rules.push({
-            action: '*',
-            subject,
-            inverted: true
-        });
-        return this;
-    }
-    /**
-     * Role-based permissions
-     */
-    role(roleName, callback) {
-        const roleBuilder = new RoleBuilder(roleName);
-        callback(roleBuilder);
-        this.rules.push(...roleBuilder.getRules());
-        return this;
-    }
-    /**
-     * Build the ability with all rules
-     */
-    build() {
-        return new AbilityCore(this.rules);
-    }
-    /**
-     * Get all rules
-     */
-    getRules() {
-        return [...this.rules];
-    }
-    /**
-     * Clear all rules
-     */
-    clear() {
-        this.rules = [];
-        return this;
-    }
-    /**
-     * Merge rules from another builder
-     */
-    merge(other) {
-        this.rules.push(...other.getRules());
-        return this;
-    }
-}
-/**
- * Role-specific permission builder
- */
-class RoleBuilder {
-    constructor(roleName) {
-        this.roleName = roleName;
-        this.rules = [];
-    }
-    /**
-     * Grant permission for this role
-     */
-    can(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: false,
-            conditions: { role: this.roleName }
-        });
-        return this;
-    }
-    /**
-     * Deny permission for this role
-     */
-    cannot(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: true,
-            conditions: { role: this.roleName }
-        });
-        return this;
-    }
-    /**
-     * Manage all actions on subject for this role
-     */
-    manage(subject) {
-        this.rules.push({
-            action: '*',
-            subject,
-            inverted: false,
-            conditions: { role: this.roleName }
-        });
-        return this;
-    }
-    /**
-     * Get all rules for this role
-     */
-    getRules() {
-        return [...this.rules];
-    }
-}
-/**
- * Common permission patterns
- */
-class PermissionPatterns {
-    /**
-     * Admin permissions - can do everything
-     */
-    static admin() {
-        return new PermissionBuilder()
-            .manage('*');
-    }
-    /**
-     * User permissions - basic CRUD on own resources
-     */
-    static user(userId) {
-        return new PermissionBuilder()
-            .allowIf('read', 'User', { id: userId })
-            .allowIf('update', 'User', { id: userId })
-            .allowIf('delete', 'User', { id: userId })
-            .allow('read', 'public');
-    }
-    /**
-     * Guest permissions - read-only public content
-     */
-    static guest() {
-        return new PermissionBuilder()
-            .allow('read', 'public');
-    }
-    /**
-     * Moderator permissions - manage content but not users
-     */
-    static moderator() {
-        return new PermissionBuilder()
-            .manage('Content')
-            .manage('Comment')
-            .allow('read', 'User')
-            .forbid('delete', 'User');
-    }
-    /**
-     * Owner permissions - full control over owned resources
-     */
-    static owner(ownerId) {
-        return new PermissionBuilder()
-            .allowIf('*', '*', { ownerId })
-            .allow('create', '*');
-    }
-}
-/**
- * Helper function to create a new permission builder
- */
-function permissions() {
-    return new PermissionBuilder();
-}
-/**
- * Helper function to create ability from rules array
- */
-function defineAbility(callback) {
-    const builder = new PermissionBuilder();
-    callback(builder);
-    return builder.build();
-}
-/**
- * Helper function to create common role-based abilities
- */
-function defineRoleAbility(role, callback) {
-    const roleBuilder = new RoleBuilder(role);
-    callback(roleBuilder);
-    return new AbilityCore(roleBuilder.getRules());
-}
-
 const ThemeModeContext = createContext(null);
 // Default persistence using localStorage (web only)
 const defaultPersistence = {
@@ -10448,7 +9915,6 @@ const OverlayBoundary = React__default.memo(function OverlayBoundary({ enabled,
 const I18nBoundary = React__default.memo(function I18nBoundary({ locale, fallbackLocale, resources, children }) {
     return (jsx(I18nProvider, { initial: { locale, fallbackLocale, resources }, children: children }));
 });
-const DEFAULT_PERMISSION_RULES = [{ action: '*', subject: '*' }];
 /**
  * Internal component that uses the enhanced theme mode when config is provided
  */
@@ -10486,30 +9952,20 @@ function PlatformBlocksContent({ children, theme, inherit = true, withCSSVariabl
             document.documentElement.setAttribute('data-platform-blocks-color-scheme', target);
         }
     }, [effectiveColorScheme, osColorScheme]);
-    const mainContent = (jsxs(ThemeBoundary, { theme: resolvedTheme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, withGlobalCSS: withGlobalCSS, children: [children, withSpotlight && jsx(SpotlightController, { config: spotlightConfig })] }));
-    return (jsx(OverlayBoundary, { enabled: withOverlays, children: mainContent }));
+    const mainContent = (jsx(ThemeBoundary, { theme: resolvedTheme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, withGlobalCSS: withGlobalCSS, children: jsxs(OverlayBoundary, { enabled: withOverlays, children: [children, withSpotlight && jsx(SpotlightController, { config: spotlightConfig })] }) }));
+    return mainContent;
 }
 /**
  * Main provider component for Platform Blocks library
  * Provides theme context and injects CSS variables
  */
-function PlatformBlocksProvider({ children, theme, inherit = true, withCSSVariables = true, cssVariablesSelector = ':root', colorSchemeMode = 'auto', withOverlays = true, withSpotlight = false, withGlobalCSS = true, themeModeConfig, spotlightConfig, locale = 'en', fallbackLocale = 'en', i18nResources, direction, haptics, permissions }) {
+function PlatformBlocksProvider({ children, theme, inherit = true, withCSSVariables = true, cssVariablesSelector = ':root', colorSchemeMode = 'auto', withOverlays = true, withSpotlight = false, withGlobalCSS = true, themeModeConfig, spotlightConfig, locale = 'en', fallbackLocale = 'en', i18nResources, direction, haptics }) {
     const i18nStore = useMemo(() => i18nResources || { en: { translation: {} } }, [i18nResources]);
     const content = (jsx(PlatformBlocksContent, { theme: theme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, colorSchemeMode: colorSchemeMode, withOverlays: withOverlays, withSpotlight: withSpotlight, withGlobalCSS: withGlobalCSS, spotlightConfig: spotlightConfig, themeModeConfig: themeModeConfig, children: children }));
     const themedTree = themeModeConfig ? (jsx(ThemeModeProvider, { config: themeModeConfig, children: content })) : (content);
     const directionConfig = direction === false ? null : (direction !== null && direction !== void 0 ? direction : {});
     const hapticsConfig = haptics === false ? null : (haptics !== null && haptics !== void 0 ? haptics : {});
-    const permissionConfig = permissions === false ? null : (() => {
-        const base = { ...(permissions !== null && permissions !== void 0 ? permissions : {}) };
-        if (base.rules === undefined) {
-            base.rules = DEFAULT_PERMISSION_RULES;
-        }
-        return base;
-    })();
     let enhancedTree = themedTree;
-    if (permissionConfig) {
-        enhancedTree = (jsx(PermissionProvider, { ...permissionConfig, children: enhancedTree }));
-    }
     if (hapticsConfig) {
         enhancedTree = (jsx(HapticsProvider, { ...hapticsConfig, children: enhancedTree }));
     }
@@ -10999,14 +10455,18 @@ function usePopoverPositioning(isOpen, options = {}) {
             // Get popover dimensions
             // Always use measureElement for robustness across platforms (RNW refs may not expose getBoundingClientRect)
             let popoverDimensions = { width: 200, height: 100 }; // sensible defaults for initial calculation
+            let hasMeasuredPopover = false;
             if (popoverRef.current) {
                 const popoverRect = await measureElement(popoverRef);
                 if (popoverRect.width > 0 && popoverRect.height > 0) {
                     popoverDimensions = { width: popoverRect.width, height: popoverRect.height };
+                    hasMeasuredPopover = true;
                 }
             }
             // Calculate optimal position
             const result = calculateOverlayPositionEnhanced(anchorRect, popoverDimensions, positioningOptionsRef.current);
+            // Mark whether this position is based on actual measurements
+            result._hasMeasuredPopover = hasMeasuredPopover;
             setPosition(result);
         }
         catch (error) {
@@ -12432,9 +11892,10 @@ const Row = ({ direction = 'row', gap = 'sm', ...props }) => {
 };
 /**
  * Column component - alias for Flex with direction="column"
+ * Defaults to fullWidth={true} since vertical layouts typically fill available width
  */
-const Column = ({ direction = 'column', gap = 'sm', ...props }) => {
-    return jsx(Flex, { direction: direction, gap: gap, ...props });
+const Column = ({ direction = 'column', gap = 'sm', fullWidth = true, ...props }) => {
+    return jsx(Flex, { direction: direction, gap: gap, fullWidth: fullWidth, ...props });
 };
 Row.displayName = 'Row';
 
@@ -14549,35 +14010,101 @@ function createNativeHighlighter(theme, isDark, variant = 'code', overrides) {
     };
 }
 
-// Prism light build for JSX/TSX (react-syntax-highlighter)
+// Syntax highlighter - only loaded on web, native uses built-in tokenizer
+// These are initialized lazily on first use to avoid Metro bundling issues
 let PrismSyntaxHighlighter = null;
 let prismLightTheme = null;
 let prismDarkTheme = null;
-if (Platform.OS === 'web') {
-    PrismSyntaxHighlighter = resolveOptionalModule('react-syntax-highlighter', {
-        accessor: (module) => module.PrismLight,
-        devWarning: 'react-syntax-highlighter not found, CodeBlock will use basic formatting',
-    });
-    if (PrismSyntaxHighlighter) {
-        const registerLanguage = (moduleId, name) => {
-            const languageModule = resolveOptionalModule(moduleId, { accessor: (mod) => mod.default });
-            if (languageModule) {
-                PrismSyntaxHighlighter.registerLanguage(name, languageModule);
+let syntaxHighlighterInitialized = false;
+// Use indirect require via new Function to prevent Metro from statically analyzing imports
+// Metro bundles ALL require() calls it finds, even in try-catch blocks
+// new Function() creates a runtime-evaluated require that Metro can't see
+const safeRequire = (() => {
+    try {
+        // This creates: function(moduleName) { return require(moduleName); }
+        // The string 'require' is not statically analyzable by Metro
+        return new Function('moduleName', 'return require(moduleName)');
+    }
+    catch (_a) {
+        return null;
+    }
+})();
+function initSyntaxHighlighter() {
+    if (syntaxHighlighterInitialized)
+        return;
+    syntaxHighlighterInitialized = true;
+    // Only attempt to load on web
+    if (Platform.OS !== 'web')
+        return;
+    if (!safeRequire)
+        return;
+    try {
+        const rsh = safeRequire('react-syntax-highlighter');
+        PrismSyntaxHighlighter = rsh.PrismLight;
+        if (PrismSyntaxHighlighter) {
+            // Register languages
+            try {
+                const jsx = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/jsx').default;
+                PrismSyntaxHighlighter.registerLanguage('jsx', jsx);
             }
-        };
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/jsx', 'jsx');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/tsx', 'tsx');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/typescript', 'typescript');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/javascript', 'javascript');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/json', 'json');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/bash', 'bash');
-        prismLightTheme = resolveOptionalModule('react-syntax-highlighter/dist/esm/styles/prism/prism', {
-            accessor: (mod) => mod.default,
-        });
-        prismDarkTheme = resolveOptionalModule('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus', {
-            accessor: (mod) => mod.default,
-            devWarning: 'Failed to load prism vsc-dark-plus theme, falling back to prism',
-        });
+            catch (_a) {
+                // Language not available
+            }
+            try {
+                const tsx = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/tsx').default;
+                PrismSyntaxHighlighter.registerLanguage('tsx', tsx);
+            }
+            catch (_b) {
+                // Language not available
+            }
+            try {
+                const ts = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/typescript').default;
+                PrismSyntaxHighlighter.registerLanguage('typescript', ts);
+            }
+            catch (_c) {
+                // Language not available
+            }
+            try {
+                const js = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/javascript').default;
+                PrismSyntaxHighlighter.registerLanguage('javascript', js);
+            }
+            catch (_d) {
+                // Language not available
+            }
+            try {
+                const json = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/json').default;
+                PrismSyntaxHighlighter.registerLanguage('json', json);
+            }
+            catch (_e) {
+                // Language not available
+            }
+            try {
+                const bash = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/bash').default;
+                PrismSyntaxHighlighter.registerLanguage('bash', bash);
+            }
+            catch (_f) {
+                // Language not available
+            }
+            // Load themes
+            try {
+                prismLightTheme = safeRequire('react-syntax-highlighter/dist/esm/styles/prism/prism').default;
+            }
+            catch (_g) {
+                // Theme not available
+            }
+            try {
+                prismDarkTheme = safeRequire('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus').default;
+            }
+            catch (_h) {
+                // Theme not available
+            }
+        }
+    }
+    catch (_j) {
+        // react-syntax-highlighter not installed, will use native fallback
+        if (__DEV__) {
+            console.warn('[platform-blocks] react-syntax-highlighter not found, CodeBlock will use basic formatting');
+        }
     }
 }
 const NO_HIGHLIGHTS = new Set();
@@ -14801,6 +14328,8 @@ const FloatingCopyControls = ({ visible, code, onCopy, topOffset, isWeb }) => (j
     }, children: jsx(CopyButton, { value: code, onCopy: onCopy, iconOnly: true, size: "sm", tooltip: "Copy code", tooltipPosition: "left", style: { minHeight: 32, minWidth: 32 } }) }));
 const CodeBlock = (props) => {
     var _a, _b, _c;
+    // Initialize syntax highlighter on first render (web only)
+    React__default.useMemo(() => initSyntaxHighlighter(), []);
     const { children, title, fileName, fileIcon, language = 'tsx', showLineNumbers = false, highlight = true, fullWidth = true, showCopyButton = true, onCopy, style, textStyle, titleStyle, highlightLines, spoiler = false, spoilerMaxHeight = 160, variant = 'code', promptSymbol = '$', githubUrl, fileHeader = false, colors, wrap = true, ...rest } = props;
     const { spacingProps, otherProps } = extractSpacingProps(rest);
     const spacingStyles = getSpacingStyles(spacingProps);
@@ -14815,6 +14344,7 @@ const CodeBlock = (props) => {
     const [hovered, setHovered] = React__default.useState(false);
     const [codeHeight, setCodeHeight] = React__default.useState(null);
     const isWeb = Platform.OS === 'web';
+    const webWhitespaceStyle = React__default.useMemo(() => (isWeb ? { whiteSpace: wrap ? 'pre-wrap' : 'pre', display: 'block' } : null), [isWeb, wrap]);
     const showFloatingCopy = showCopyButton && !title && !fileName;
     const showCopyVisible = !isWeb ? showFloatingCopy : showFloatingCopy && hovered;
     const codeData = React__default.useMemo(() => {
@@ -14848,6 +14378,7 @@ const CodeBlock = (props) => {
         boxSizing: 'border-box',
         paddingLeft: showLineNumbers ? 0 : 12,
         paddingRight: showLineNumbers ? 0 : 12,
+        whiteSpace: wrap ? 'pre-wrap' : 'pre',
     }), [showLineNumbers, wrap]);
     const highlightedLineStyle = React__default.useMemo(() => ({
         backgroundColor: highlightBackgroundColor,
@@ -14859,6 +14390,18 @@ const CodeBlock = (props) => {
     const tokenLines = React__default.useMemo(() => (highlight ? nativeHighlighter(codeData.transformed) : null), [highlight, nativeHighlighter, codeData.transformed]);
     const shouldVirtualizeNative = !isWeb && codeData.lineCount >= LONG_LIST_THRESHOLD;
     const lineHeight = (_c = styles.codeText.lineHeight) !== null && _c !== void 0 ? _c : 18;
+    const normalizeTokenText = React__default.useCallback((text, tokenIndex) => {
+        if (!isWeb || !text)
+            return text;
+        const replaceSpaces = (value) => value.replace(/\t/g, '  ').replace(/ /g, '\u00A0');
+        if (tokenIndex === 0) {
+            return text.replace(/^[\t ]+/, (match) => replaceSpaces(match));
+        }
+        if (text.trim().length === 0) {
+            return replaceSpaces(text);
+        }
+        return text;
+    }, [isWeb]);
     const buildNativeLine = React__default.useCallback((line, index, appendNewline, includeKey) => {
         var _a;
         const lineNumber = index + 1;
@@ -14867,13 +14410,14 @@ const CodeBlock = (props) => {
         const lineStyles = [
             styles.codeText,
             textStyle,
+            webWhitespaceStyle,
             wrap ? { flexWrap: 'wrap' } : { flexWrap: 'nowrap', width: 'auto' },
         ];
         if (isLineHighlighted) {
             lineStyles.push(styles.highlightedLine(isDark, highlightColors));
         }
-        return (jsxs(Text, { selectable: true, style: lineStyles, children: [showLineNumbers ? (jsx(Text, { style: { color: lineNumberColor, opacity: 0.7 }, children: `${String(lineNumber).padStart(lineNumberWidth, ' ')} | ` })) : null, tokens.map((token, tokenIdx) => (jsx(Text, { style: { color: token.color }, children: token.text || ' ' }, `${lineNumber}-${tokenIdx}`))), appendNewline ? '\n' : null] }, includeKey ? `line-${lineNumber}` : undefined));
-    }, [fallbackColor, highlightColors, highlightSet, isDark, lineNumberColor, lineNumberWidth, showLineNumbers, styles.codeText, styles.highlightedLine, textStyle, tokenLines, wrap]);
+        return (jsxs(Text, { selectable: true, style: lineStyles, children: [showLineNumbers ? (jsx(Text, { style: { color: lineNumberColor, opacity: 0.7 }, children: `${String(lineNumber).padStart(lineNumberWidth, ' ')} | ` })) : null, tokens.map((token, tokenIdx) => (jsx(Text, { style: { color: token.color }, children: normalizeTokenText(token.text || ' ', tokenIdx) }, `${lineNumber}-${tokenIdx}`))), appendNewline ? '\n' : null] }, includeKey ? `line-${lineNumber}` : undefined));
+    }, [fallbackColor, highlightColors, highlightSet, isDark, lineNumberColor, lineNumberWidth, normalizeTokenText, showLineNumbers, styles.codeText, styles.highlightedLine, textStyle, tokenLines, webWhitespaceStyle, wrap]);
     const renderWebCode = React__default.useMemo(() => {
         if (!(isWeb && highlight && PrismSyntaxHighlighter)) {
             return null;
@@ -14887,7 +14431,13 @@ const CodeBlock = (props) => {
                 lineHeight: '18px',
                 display: 'block',
                 width: '100%',
-            }, codeTagProps: { style: { fontFamily: styles.codeText.fontFamily } }, wrapLongLines: wrap, wrapLines: wrap, showLineNumbers: prismShowLineNumbers, lineNumberStyle: hideLineNumbersVisually
+                whiteSpace: wrap ? 'pre-wrap' : 'pre',
+            }, codeTagProps: {
+                style: {
+                    fontFamily: styles.codeText.fontFamily,
+                    whiteSpace: wrap ? 'pre-wrap' : 'pre',
+                },
+            }, wrapLongLines: wrap, wrapLines: wrap, showLineNumbers: prismShowLineNumbers, lineNumberStyle: hideLineNumbersVisually
                 ? { display: 'none' }
                 : { opacity: 0.55, paddingRight: 12, userSelect: 'none' }, lineProps: (lineNumber) => {
                 const style = { ...baseLineStyle };
@@ -14920,13 +14470,13 @@ const CodeBlock = (props) => {
     ]);
     const renderNativeCode = React__default.useMemo(() => {
         if (!codeData.lineCount) {
-            return (jsx(Text, { selectable: true, style: [styles.codeText, textStyle], children: ' ' }));
+            return (jsx(Text, { selectable: true, style: [styles.codeText, textStyle, webWhitespaceStyle], children: ' ' }));
         }
         if (shouldVirtualizeNative) {
             return (jsx(FlatList, { data: codeData.lines, keyExtractor: (_, index) => `line-${index}`, renderItem: ({ item, index }) => buildNativeLine(item, index, false, false), initialNumToRender: 20, maxToRenderPerBatch: 40, windowSize: 7, removeClippedSubviews: true, getItemLayout: (_, index) => ({ length: lineHeight, offset: lineHeight * index, index }) }));
         }
-        return (jsx(Text, { selectable: true, style: [styles.codeText, textStyle], children: codeData.lines.map((line, idx) => buildNativeLine(line, idx, idx < codeData.lineCount - 1, true)) }));
-    }, [buildNativeLine, codeData.lineCount, codeData.lines, lineHeight, shouldVirtualizeNative, styles.codeText, textStyle]);
+        return (jsx(Text, { selectable: true, style: [styles.codeText, textStyle, webWhitespaceStyle], children: codeData.lines.map((line, idx) => buildNativeLine(line, idx, idx < codeData.lineCount - 1, true)) }));
+    }, [buildNativeLine, codeData.lineCount, codeData.lines, lineHeight, shouldVirtualizeNative, styles.codeText, textStyle, webWhitespaceStyle]);
     const codeContent = renderWebCode !== null && renderWebCode !== void 0 ? renderWebCode : renderNativeCode;
     const scrollableCodeContent = wrap ? (codeContent) : (jsx(ScrollView, { horizontal: true, bounces: false, showsHorizontalScrollIndicator: true, showsVerticalScrollIndicator: false, contentContainerStyle: { flexGrow: 1 }, style: { width: '100%' }, children: jsx(View, { style: { flexGrow: 1 }, children: codeContent }) }));
     let wrappedCodeContent = scrollableCodeContent;
@@ -16531,11 +16081,13 @@ const BrandButton = (props) => {
                 return {
                     backgroundColor: 'transparent',
                     borderColor: brandConfig.borderColor || brandConfig.backgroundColor,
+                    paddingHorizontal: 16,
                 };
             case 'ghost':
                 return {
                     backgroundColor: 'transparent',
                     borderColor: 'transparent',
+                    paddingHorizontal: 16,
                 };
             case 'link':
                 return { backgroundColor: 'transparent', borderColor: 'transparent' };
@@ -16543,7 +16095,7 @@ const BrandButton = (props) => {
                 return {
                     backgroundColor: 'white',
                     borderColor: 'transparent',
-                    paddingHorizontal: 0,
+                    paddingHorizontal: 16,
                     minWidth: 0,
                     height: 'auto',
                     color: 'black'
@@ -16552,6 +16104,7 @@ const BrandButton = (props) => {
                 return {
                     backgroundColor: brandConfig.backgroundColor,
                     borderColor: brandConfig.borderColor || brandConfig.backgroundColor,
+                    paddingHorizontal: 16,
                 };
         }
     })();
@@ -17128,8 +16681,12 @@ const createInputStyles = (theme, isRTL = false) => {
                 // Remove any web-specific styling that could interfere
                 ...(typeof window !== 'undefined' && {
                     outlineWidth: 0,
+                    outlineStyle: 'none',
                     border: 'none',
+                    borderWidth: 0,
+                    boxShadow: 'none',
                     backgroundColor: 'transparent',
+                    boxSizing: 'border-box',
                 }),
             },
             inputContainer: {
@@ -17257,6 +16814,7 @@ const TextInputBase = factory((props, ref) => {
     const { value, onChangeText, onEnter, label, description, error, helperText, disabled, required, size = 'md', withAsterisk, placeholder, startSection, endSection, focused: focusedProp, accessibilityLabel, accessibilityHint, testID, textInputProps, style, radius, secureTextEntry, clearable, clearButtonLabel, onClear, inputRef, name, keyboardFocusId, ...rest } = otherProps;
     const renderDisclaimer = useDisclaimer(disclaimerData.disclaimer, disclaimerData.disclaimerProps);
     const [focused, setFocused] = useState(false);
+    const [cursorVisible, setCursorVisible] = useState(true);
     const theme = useTheme();
     const { isRTL } = useDirection();
     const internalInputRef = useRef(null);
@@ -17328,6 +16886,16 @@ const TextInputBase = factory((props, ref) => {
             return '';
         return '•'.repeat(length);
     }, [isSecureEntry, normalizedValue]);
+    // Blinking cursor for secure entry (simple interval toggle)
+    useEffect(() => {
+        if (focused && isSecureEntry) {
+            setCursorVisible(true);
+            const interval = setInterval(() => {
+                setCursorVisible(v => !v);
+            }, 530);
+            return () => clearInterval(interval);
+        }
+    }, [focused, isSecureEntry]);
     const textColor = (_a = flattenedInputStyle === null || flattenedInputStyle === void 0 ? void 0 : flattenedInputStyle.color) !== null && _a !== void 0 ? _a : (styleProps.disabled ? theme.text.disabled : theme.text.primary);
     const resolvedInputStyle = useMemo(() => {
         const base = [styles.input];
@@ -17429,7 +16997,12 @@ const TextInputBase = factory((props, ref) => {
         }
     }, [keyboardManager, pendingFocusTarget, focusTargetId]);
     const disclaimerNode = renderDisclaimer();
-    return (jsxs(View, { style: [styles.container, spacingStyles, layoutStyles, style], ...rest, children: [jsx(FieldHeader, { label: label, description: description, required: required, withAsterisk: withAsterisk, disabled: disabled, error: !!error, size: size }), jsxs(View, { style: styles.inputContainer, children: [startSection && (jsx(View, { style: styles.startSection, children: startSection })), jsxs(View, { style: { flex: 1, position: 'relative', justifyContent: 'center' }, children: [jsx(TextInput, { ref: assignInputRef, value: value, onChangeText: onChangeText, onFocus: handleFocus, onBlur: handleBlur, onSubmitEditing: handleSubmitEditing, editable: !disabled, placeholder: placeholder, placeholderTextColor: theme.text.muted, style: resolvedInputStyle, selectionColor: selectionColorProp !== null && selectionColorProp !== void 0 ? selectionColorProp : textColor, testID: testID, secureTextEntry: isSecureEntry, ...inputAccessibilityProps, ...restTextInputProps }), isSecureEntry && maskedValue.length > 0 && (jsx(Text$1, { pointerEvents: "none", accessible: false, style: overlayStyle, numberOfLines: 1, ellipsizeMode: "clip", children: maskedValue }))] }), (showClearButton || endSection) && (jsxs(View, { style: styles.endSection, children: [showClearButton && (jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error && (jsx(Text$1, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })), helperText && !error && (jsx(Text$1, { style: styles.helperText, children: helperText }))] }));
+    return (jsxs(View, { style: [styles.container, spacingStyles, layoutStyles, style], ...rest, children: [jsx(FieldHeader, { label: label, description: description, required: required, withAsterisk: withAsterisk, disabled: disabled, error: !!error, size: size }), jsxs(View, { style: styles.inputContainer, children: [startSection && (jsx(View, { style: styles.startSection, children: startSection })), jsxs(View, { style: { flex: 1, position: 'relative', justifyContent: 'center' }, children: [jsx(TextInput, { ref: assignInputRef, value: value, onChangeText: onChangeText, onFocus: handleFocus, onBlur: handleBlur, onSubmitEditing: handleSubmitEditing, editable: !disabled, placeholder: placeholder, placeholderTextColor: theme.text.muted, style: resolvedInputStyle, selectionColor: selectionColorProp !== null && selectionColorProp !== void 0 ? selectionColorProp : textColor, testID: testID, secureTextEntry: isSecureEntry, ...inputAccessibilityProps, ...restTextInputProps }), isSecureEntry && (jsxs(View, { pointerEvents: "none", style: [overlayStyle, { flexDirection: 'row', alignItems: 'center' }], children: [jsx(Text$1, { accessible: false, style: { color: textColor, fontSize: styles.input.fontSize, fontFamily: theme.fontFamily }, numberOfLines: 1, children: maskedValue }), focused && cursorVisible && (jsx(View, { style: {
+                                            width: 1,
+                                            height: styles.input.fontSize || 16,
+                                            backgroundColor: textColor,
+                                            marginLeft: 1,
+                                        } }))] }))] }), (showClearButton || endSection) && (jsxs(View, { style: styles.endSection, children: [showClearButton && (jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error && (jsx(Text$1, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })), helperText && !error && (jsx(Text$1, { style: styles.helperText, children: helperText }))] }));
 });
 
 const getInputTypeConfig = (type) => {
@@ -17987,18 +17560,19 @@ const useTextAreaStyles = (props) => {
                     ? theme.colors.error[5]
                     : styleProps.focused
                         ? theme.colors.primary[5]
-                        : styleProps.disabled
-                            ? theme.backgrounds.border
-                            : 'transparent',
+                        : theme.backgrounds.border,
                 borderRadius: DESIGN_TOKENS.radius.lg,
-                borderWidth: DESIGN_TOKENS.radius.xs,
+                borderWidth: 2,
                 paddingHorizontal: DESIGN_TOKENS.spacing.sm,
                 paddingVertical: DESIGN_TOKENS.spacing.xs,
+                // Match Input focus treatment on web
                 ...(styleProps.focused && !styleProps.disabled && Platform.OS === 'web' && {
                     boxShadow: `0 0 0 2px ${((_a = theme.states) === null || _a === void 0 ? void 0 : _a.focusRing) || theme.colors.primary[2]}`,
                 }),
+                // Light elevation similar to Input
                 ...(!styleProps.disabled && theme.colorScheme === 'light' && {
                     elevation: 1,
+                    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
                 }),
                 opacity: styleProps.disabled ? DESIGN_TOKENS.opacity.disabled : 1,
             },
@@ -18040,7 +17614,7 @@ const TextArea = factory((props, ref) => {
     const { spacingProps, otherProps: propsAfterSpacing } = extractSpacingProps(props);
     const { layoutProps, otherProps } = extractLayoutProps(propsAfterSpacing);
     const { value, defaultValue = '', onChangeText, label, disabled = false, required = false, placeholder, error, helperText, description, size = 'md', radius = 'md', rows = 3, minRows = 1, maxRows, autoResize = false, maxLength, showCharCounter = false, resize = 'none', textInputProps = {}, style, testID, clearable, clearButtonLabel, onClear, ...rest } = otherProps;
-    const { height } = layoutProps;
+    const { h } = layoutProps;
     const theme = useTheme();
     const { getTextAreaStyles } = useTextAreaStyles({ theme });
     const [focused, setFocused] = useState(false);
@@ -18104,11 +17678,11 @@ const TextArea = factory((props, ref) => {
     const inputContainerStyles = [
         styles.inputContainer,
         radiusStyles,
-        { height }
+        { height: h }
     ];
     const textInputStyles = [
         styles.textInput,
-        { height: height || (autoResize ? currentRows * 24 : rows * 24), // Approximate row height
+        { height: h || (autoResize ? currentRows * 24 : rows * 24), // Approximate row height
             textAlignVertical: resize === 'none' ? 'top' : undefined,
             // Disable resizing by user if resize is 'none'
             ...(resize === 'none' ? { resizeMode: 'none' } : {})
@@ -18136,7 +17710,7 @@ const TextArea = factory((props, ref) => {
     const clearLabel = clearButtonLabel || 'Clear input';
     return (jsxs(View, { style: containerStyles, testID: testID, children: [(label || description) && (jsx(FieldHeader, { label: label, description: description, required: required, disabled: disabled, error: !!error })), jsxs(View, { style: [inputContainerStyles, { position: 'relative' }], children: [jsx(TextInput, { ref: assignRef, 
                         // style={]}
-                        style: { height: height || (autoResize ? currentRows * 24 : rows * 24), // Approximate row height
+                        style: { height: h || (autoResize ? currentRows * 24 : rows * 24), // Approximate row height
                             ...textInputStyles.reduce((acc, style) => ({ ...acc, ...style }), {}),
                             textAlignVertical: resize === 'none' ? 'top' : undefined,
                             // Disable resizing by user if resize is 'none'
@@ -19680,7 +19254,7 @@ const useSwitchStyles = (props) => {
             ...(Platform.OS === 'web' && { userSelect: 'none' }),
         },
         labelContainer: {
-            flex: 1,
+            flexShrink: 1,
             justifyContent: 'center',
         },
         labelDisabled: {
@@ -19849,8 +19423,8 @@ const Switch = factory((rawProps, ref) => {
     const LayoutComponent = isVertical ? Column : Row;
     // For vertical layouts (top/bottom), we want tighter spacing and center alignment
     const layoutProps = isVertical
-        ? { gap: 'xs', style: { alignItems: 'center' } }
-        : { gap: 'sm', style: { alignItems: 'center' } };
+        ? { gap: 'xs', align: 'center' }
+        : { gap: 'sm', align: 'center' };
     const disclaimerNode = renderDisclaimer();
     return (jsxs(View, { style: spacingStyles, children: [jsxs(LayoutComponent, { ...layoutProps, children: [labelPosition === 'top' && labelElement, labelPosition === 'left' && labelElement, switchElement, labelPosition === 'right' && labelElement, labelPosition === 'bottom' && labelElement] }), disclaimerNode ? (jsx(View, { style: { width: '100%' }, children: disclaimerNode })) : null] }));
 });
@@ -24462,7 +24036,7 @@ 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, refocusAfterSelect, keyboardAvoidance = true, } = otherProps;
+    const { value: valueProp, defaultValue, onChange, options, placeholder = 'Select…', size = 'md', radius = 'md', disabled, label, helperText, description, error, renderOption, fullWidth, maxH = 260, closeOnSelect = true, clearable, clearButtonLabel, onClear, refocusAfterSelect, keyboardAvoidance = true, } = otherProps;
     const theme = useTheme();
     const { shouldUseModal, shouldUseOverlay } = useOverlayMode();
     const menuStyles = useMenuStyles();
@@ -24484,6 +24058,7 @@ const Select = factory((allProps, ref) => {
         keyboardAvoidance,
         closeOnClickOutside: true,
         closeOnEscape: true,
+        matchAnchorWidth: true,
         onClose: () => setOpen(false),
     });
     const hasMeasuredDropdownRef = useRef(false);
@@ -24617,11 +24192,11 @@ const Select = factory((allProps, ref) => {
     }, [position === null || position === void 0 ? void 0 : position.finalWidth, triggerWidth]);
     const resolvedDropdownMaxHeight = useMemo(() => {
         const keyboardMax = typeof (position === null || position === void 0 ? void 0 : position.maxHeight) === 'number' ? position.maxHeight : undefined;
-        if (typeof maxHeight === 'number') {
-            return keyboardMax ? Math.min(maxHeight, keyboardMax) : maxHeight;
+        if (typeof maxH === 'number') {
+            return keyboardMax ? Math.min(maxH, keyboardMax) : maxH;
         }
-        return keyboardMax !== null && keyboardMax !== void 0 ? keyboardMax : maxHeight;
-    }, [maxHeight, position === null || position === void 0 ? void 0 : position.maxHeight]);
+        return keyboardMax !== null && keyboardMax !== void 0 ? keyboardMax : maxH;
+    }, [maxH, position === null || position === void 0 ? void 0 : position.maxHeight]);
     const handleSelect = useCallback((opt) => {
         if (opt.disabled)
             return;
@@ -24643,7 +24218,7 @@ const Select = factory((allProps, ref) => {
             close();
         }
     }, [closeOnSelect, close, onChange, valueProp, refocusAfterSelect, keyboardManager, focusTrigger, blurTrigger]);
-    const listMaxHeight = resolvedDropdownMaxHeight !== null && resolvedDropdownMaxHeight !== void 0 ? resolvedDropdownMaxHeight : maxHeight;
+    const listMaxHeight = resolvedDropdownMaxHeight !== null && resolvedDropdownMaxHeight !== void 0 ? resolvedDropdownMaxHeight : maxH;
     const menu = useMemo(() => {
         const widthStyle = resolvedDropdownWidth && resolvedDropdownWidth > 0
             ? { width: resolvedDropdownWidth, minWidth: resolvedDropdownWidth }
@@ -24656,18 +24231,17 @@ const Select = factory((allProps, ref) => {
                     ...(maxHeightStyle !== null && maxHeightStyle !== void 0 ? maxHeightStyle : {}),
                     ...(widthStyle !== null && widthStyle !== void 0 ? widthStyle : {}),
                 }, children: jsx(FlatList, { data: options, keyExtractor: o => String(o.value), renderItem: ({ item }) => {
-                        var _a;
                         const selected = item.value === value;
                         if (renderOption) {
                             return jsx(View, { children: renderOption(item, false, selected) });
                         }
                         const primaryPalette = theme.colors.primary || [];
                         const highlightColor = theme.colorScheme === 'dark'
-                            ? primaryPalette[2] || primaryPalette[3] || theme.text.onPrimary || theme.text.primary
-                            : primaryPalette[6] || primaryPalette[5] || ((_a = theme.colors.secondary) === null || _a === void 0 ? void 0 : _a[6]) || '#6941C6';
+                            ? primaryPalette[5] || primaryPalette[4] || '#60A5FA'
+                            : primaryPalette[6] || primaryPalette[5] || '#3B82F6';
                         const baseTextColor = item.disabled ? theme.text.disabled : theme.text.primary;
-                        const accentTextColor = item.disabled ? theme.text.disabled : highlightColor;
-                        return (jsx(MenuItemButton, { onPress: () => handleSelect(item), disabled: !!item.disabled, active: selected, tone: selected ? 'primary' : 'default', hoverTone: "primary", activeTone: "primary", textColor: baseTextColor, hoverTextColor: accentTextColor, activeTextColor: accentTextColor, compact: true, rounded: false, style: { borderRadius: 0 }, children: item.label }));
+                        item.disabled ? theme.text.disabled : highlightColor;
+                        return (jsx(MenuItemButton, { onPress: () => handleSelect(item), disabled: !!item.disabled, active: false, tone: "default", hoverTone: "default", activeTone: "default", textColor: baseTextColor, hoverTextColor: baseTextColor, activeTextColor: baseTextColor, startIcon: selected ? jsx(Icon, { name: "check", size: 16, color: highlightColor }) : jsx(View, { style: { width: 16 } }), compact: true, rounded: false, style: { borderRadius: 0 }, children: item.label }));
                     }, ItemSeparatorComponent: renderOption ? undefined : ListGroupDivider, style: maxHeightStyle, bounces: false }) }) }));
     }, [resolvedDropdownWidth, listMaxHeight, menuStyles.dropdown, options, value, renderOption, theme.colors.primary, theme.colors.secondary, theme.colorScheme, theme.text.disabled, theme.text.primary, theme.text.onPrimary, handleSelect]);
     useEffect(() => {
@@ -24849,6 +24423,7 @@ const AutoComplete = factory((props, ref) => {
         offset,
         autoUpdate: autoReposition,
         fallbackPlacements,
+        matchAnchorWidth: true,
     });
     // Guard: remember last popover size to avoid re-triggering updatePosition on position-only changes
     const lastPopoverSizeRef = useRef(null);
@@ -24872,13 +24447,12 @@ const AutoComplete = factory((props, ref) => {
     }, radiusStyles), [inputStyleFactory, size, focused, error, disabled, showClearButton, radiusStyles]);
     const clearLabel = clearButtonLabel || 'Clear input';
     const menuHighlightColor = useMemo(() => {
-        var _a;
         const primaryPalette = theme.colors.primary || [];
         if (theme.colorScheme === 'dark') {
-            return primaryPalette[2] || primaryPalette[3] || theme.text.onPrimary || theme.text.primary;
+            return primaryPalette[5] || primaryPalette[4] || '#60A5FA';
         }
-        return primaryPalette[6] || primaryPalette[5] || ((_a = theme.colors.secondary) === null || _a === void 0 ? void 0 : _a[6]) || '#6941C6';
-    }, [theme.colors.primary, theme.colors.secondary, theme.colorScheme, theme.text.onPrimary, theme.text.primary]);
+        return primaryPalette[6] || primaryPalette[5] || '#3B82F6';
+    }, [theme.colors.primary, theme.colorScheme]);
     const selectedCount = (_a = selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) !== null && _a !== void 0 ? _a : 0;
     const hasSelectedValues = multiSelect && selectedCount > 0;
     const currentQueryRef = useRef(query);
@@ -25196,8 +24770,8 @@ const AutoComplete = factory((props, ref) => {
     const defaultRenderItem = useCallback((item, index, isSelected = false) => {
         const highlightQuery = highlightMatches ? currentQueryRef.current : undefined;
         const baseTextColor = item.disabled ? theme.text.disabled : theme.text.primary;
-        const accentTextColor = item.disabled ? theme.text.disabled : menuHighlightColor;
-        return (jsx(MenuItemButton, { onPress: () => handleSelectSuggestion(item), disabled: item.disabled, active: isSelected, tone: isSelected ? 'primary' : 'default', hoverTone: "primary", activeTone: "primary", textColor: baseTextColor, hoverTextColor: accentTextColor, activeTextColor: accentTextColor, compact: true, rounded: false, style: [styles.menuItemButton, suggestionItemStyle], ...(Platform.OS === 'web' ? {
+        item.disabled ? theme.text.disabled : menuHighlightColor;
+        return (jsx(MenuItemButton, { onPress: () => handleSelectSuggestion(item), disabled: item.disabled, active: false, tone: "default", hoverTone: "default", activeTone: "default", textColor: baseTextColor, hoverTextColor: baseTextColor, activeTextColor: baseTextColor, startIcon: isSelected ? jsx(Icon, { name: "check", size: 16, color: menuHighlightColor }) : jsx(View, { style: { width: 16 } }), compact: true, rounded: false, style: [styles.menuItemButton, suggestionItemStyle], ...(Platform.OS === 'web' ? {
                 onMouseDown: (event) => {
                     if (event === null || event === void 0 ? void 0 : event.preventDefault) {
                         event.preventDefault();
@@ -27464,7 +27038,7 @@ const MiniCalendar = ({ value, onChange, defaultValue, numberOfDays = 7, default
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(date);
     }, [isControlled, maxDate, minDate, onChange]);
-    return (jsxs(View, { children: [jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 16 }, children: [jsx(Pressable, { onPress: handlePrevious, style: ({ pressed }) => [
+    return (jsxs(View, { style: { alignSelf: 'flex-start' }, children: [jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 16 }, children: [jsx(Pressable, { onPress: handlePrevious, style: ({ pressed }) => [
                             {
                                 padding: 8,
                                 borderRadius: 6,
@@ -27476,7 +27050,7 @@ const MiniCalendar = ({ value, onChange, defaultValue, numberOfDays = 7, default
                                 borderRadius: 6,
                                 backgroundColor: pressed ? theme.colors.gray[2] : 'transparent',
                             },
-                        ], ...nextControlProps, children: jsx(Icon, { name: "chevron-right", size: 16, color: theme.colors.gray[6] }) })] }), jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: jsx(Flex, { direction: "row", gap: 4, children: days.map((date) => {
+                        ], ...nextControlProps, children: jsx(Icon, { name: "chevron-right", size: 16, color: theme.colors.gray[6] }) })] }), jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { flexGrow: 0 }, style: { flexGrow: 0 }, children: jsx(Flex, { direction: "row", gap: 4, children: days.map((date) => {
                         const isSelected = selectedDate ? dateUtils$1.isSameDay(date, selectedDate) : false;
                         const isToday = dateUtils$1.isToday(date);
                         const isWeekend = dateUtils$1.isWeekend(date);
@@ -27706,7 +27280,7 @@ const DatePickerInput = forwardRef(function DatePickerInputInner({ value, defaul
             } }));
     }
     if (dropdownType === 'modal') {
-        return (jsxs(View, { ref: ref, children: [renderInput(), jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, width: numberOfMonths > 1 ? Math.min(700, 380 * numberOfMonths + 40) : 400, title: type === 'range'
+        return (jsxs(View, { ref: ref, children: [renderInput(), jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, w: numberOfMonths > 1 ? Math.min(700, 380 * numberOfMonths + 40) : 400, title: type === 'range'
                         ? 'Select Date Range'
                         : type === 'multiple'
                             ? 'Select Dates'
@@ -27735,7 +27309,7 @@ const DatePickerInput = forwardRef(function DatePickerInputInner({ value, defaul
                                                         backgroundColor: pressed ? theme.colors.primary[6] : theme.colors.primary[5],
                                                     }), children: jsx(Text, { size: "sm", weight: "semibold", style: { color: 'white' }, children: "Done" }) })] })] }) }))] }) })] }));
     }
-    return (jsxs(View, { ref: ref, children: [renderInput(), jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, width: numberOfMonths > 1 ? Math.min(600, 320 * numberOfMonths + 40) : 350, children: jsxs(View, { ref: focusTrapRef, style: { padding: DESIGN_TOKENS.spacing.lg }, accessible: true, accessibilityLabel: type === 'range'
+    return (jsxs(View, { ref: ref, children: [renderInput(), jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, w: numberOfMonths > 1 ? Math.min(600, 320 * numberOfMonths + 40) : 350, children: jsxs(View, { ref: focusTrapRef, style: { padding: DESIGN_TOKENS.spacing.lg }, accessible: true, accessibilityLabel: type === 'range'
                         ? 'Date range picker dialog'
                         : type === 'multiple'
                             ? 'Multiple date picker dialog'
@@ -27830,7 +27404,7 @@ const MonthPickerInput = forwardRef(function MonthPickerInput({ value, defaultVa
                         pointerEvents: 'none',
                         accessible: false,
                         focusable: false,
-                    } }) }), jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, width: 360, children: jsx(View, { style: {
+                    } }) }), jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, w: 360, children: jsx(View, { style: {
                         padding: DESIGN_TOKENS.spacing.lg,
                     }, children: jsx(MonthPicker, { ...restMonthPickerProps, value: currentValue, onChange: handleMonthChange, locale: resolvedLocale, size: resolvedSize }) }) })] }));
 });
@@ -27893,7 +27467,7 @@ const YearPickerInput = forwardRef(function YearPickerInput({ value, defaultValu
                         pointerEvents: 'none',
                         accessible: false,
                         focusable: false,
-                    } }) }), jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, width: 360, children: jsx(View, { style: {
+                    } }) }), jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, w: 360, children: jsx(View, { style: {
                         padding: DESIGN_TOKENS.spacing.lg,
                     }, children: jsx(YearPicker, { ...restYearPickerProps, value: currentValue, onChange: handleYearChange, size: resolvedSize }) }) })] }));
 });
@@ -28058,7 +27632,7 @@ const TimePickerInput = ({ value, defaultValue, onChange, format = 24, withSecon
                         }
                     }, label: label, placeholder: is12h ? 'hh:mm AM' : 'hh:mm', endSection: jsx(Icon, { name: "clock", size: 16, color: disabled ? theme.text.disabled : theme.text.muted }), disabled: disabled, error: error, helperText: helperText, size: size, fullWidth: fullWidth, clearable: clearable && hasValue, clearButtonLabel: clearButtonLabel, onClear: clearValue }) }), jsx(Dialog, { visible: open, 
                 // variant="fullscreen"
-                onClose: handleClose, width: typeof computedPanelWidth === 'number' ? computedPanelWidth : 360, title: title || 'Select Time', children: jsxs(Pressable, { style: {
+                onClose: handleClose, w: typeof computedPanelWidth === 'number' ? computedPanelWidth : 360, title: title || 'Select Time', children: jsxs(Pressable, { style: {
                         flex: 1,
                         width: '100%',
                         justifyContent: 'center',
@@ -29010,303 +28584,6 @@ const EmojiPicker = factory((props, ref) => {
 });
 EmojiPicker.displayName = 'EmojiPicker';
 
-function useRichTextEditorStyles() {
-    const theme = useTheme();
-    return useMemo(() => StyleSheet.create({
-        characterCount: {
-            fontSize: 12,
-            marginTop: 4,
-            textAlign: 'right',
-        },
-        container: {
-            width: '100%',
-        },
-        disabled: {
-            opacity: 0.5,
-        },
-        editorContainer: {
-            backgroundColor: theme.backgrounds.surface,
-            borderColor: theme.backgrounds.border,
-            borderRadius: parseInt(theme.radii.md, 10),
-            borderWidth: 1,
-            overflow: 'hidden',
-        },
-        errorText: {
-            fontSize: 12,
-            marginTop: 4,
-        },
-        helperText: {
-            fontSize: 12,
-            marginTop: 4,
-        },
-        textInput: {
-            fontSize: 16,
-            lineHeight: 24,
-            padding: parseInt(theme.spacing.md, 10),
-        },
-        toolButton: {
-            alignItems: 'center',
-            backgroundColor: 'transparent',
-            borderColor: theme.backgrounds.border,
-            borderRadius: parseInt(theme.radii.sm, 10),
-            borderWidth: 1,
-            height: 32,
-            justifyContent: 'center',
-            width: 32,
-        },
-        toolSeparator: {
-            backgroundColor: theme.backgrounds.border,
-            height: 24,
-            marginHorizontal: 4,
-            width: 1,
-        },
-        toolbar: {
-            backgroundColor: theme.backgrounds.elevated,
-            borderBottomColor: theme.backgrounds.border,
-            borderBottomWidth: 1,
-        },
-        toolbarContent: {
-            alignItems: 'center',
-            flexDirection: 'row',
-            gap: 4,
-            paddingHorizontal: parseInt(theme.spacing.sm, 10),
-            paddingVertical: parseInt(theme.spacing.xs, 10),
-        },
-    }), [theme]);
-}
-
-// Default toolbar configuration
-const DEFAULT_TOOLBAR_TOOLS = [
-    'bold',
-    'italic',
-    'underline',
-    'separator',
-    'heading',
-    'separator',
-    'align',
-    'separator',
-    'list',
-    'separator',
-    'link',
-    'separator',
-    'color',
-];
-const RichTextEditor = React__default.memo(({ defaultValue, value, onChange, onSelectionChange, onFocus, onBlur, placeholder = 'Start typing...', readOnly = false, disabled = false, toolbar = {
-    enabled: true,
-    position: 'top',
-    tools: DEFAULT_TOOLBAR_TOOLS,
-}, formats = {
-    fontFamilies: ['Arial', 'Georgia', 'Times New Roman', 'Courier New'],
-    fontSizes: [12, 14, 16, 18, 20, 24, 28, 32],
-    colors: ['#000000', '#333333', '#666666', '#999999', '#CCCCCC', '#FF0000', '#00FF00', '#0000FF'],
-    headings: [1, 2, 3, 4, 5, 6],
-}, images = { enabled: true }, links = { enabled: true, openInNewTab: true }, plugins = [], autosave, spellCheck = true, maxLength, minHeight = 200, maxHeight = 600, className, theme: themeOverride = 'auto', error, helperText, style, ...props }) => {
-    const theme = useTheme();
-    const styles = useRichTextEditorStyles();
-    const [content, setContent] = useState(value || defaultValue || { html: '', text: '' });
-    const [selection, setSelection] = useState({
-        index: 0,
-        length: 0,
-    });
-    const [activeFormats, setActiveFormats] = useState({});
-    const [isFocused, setIsFocused] = useState(false);
-    const editorRef = useRef(null);
-    const autosaveTimerRef = useRef(null);
-    // Update content when value prop changes
-    useEffect(() => {
-        if (value && value !== content) {
-            setContent(value);
-        }
-    }, [value]);
-    // Autosave functionality
-    useEffect(() => {
-        if ((autosave === null || autosave === void 0 ? void 0 : autosave.enabled) && autosave.onSave) {
-            if (autosaveTimerRef.current) {
-                clearTimeout(autosaveTimerRef.current);
-            }
-            autosaveTimerRef.current = setTimeout(() => {
-                autosave.onSave(content);
-            }, autosave.interval || 5000);
-            return () => {
-                if (autosaveTimerRef.current) {
-                    clearTimeout(autosaveTimerRef.current);
-                }
-            };
-        }
-    }, [content, autosave]);
-    const handleContentChange = useCallback((text) => {
-        const newContent = {
-            text,
-            html: text, // For now, treating as plain text
-        };
-        setContent(newContent);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newContent);
-    }, [onChange]);
-    const handleSelectionChange = useCallback((selection) => {
-        const newSelection = {
-            index: selection.start,
-            length: selection.end - selection.start,
-            format: activeFormats,
-        };
-        setSelection(newSelection);
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelection);
-    }, [activeFormats, onSelectionChange]);
-    const handleFocus = useCallback(() => {
-        setIsFocused(true);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-    }, [onFocus]);
-    const handleBlur = useCallback(() => {
-        setIsFocused(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [onBlur]);
-    const applyFormat = useCallback((format) => {
-        if (readOnly || disabled)
-            return;
-        const newFormats = { ...activeFormats, ...format };
-        setActiveFormats(newFormats);
-        // In a real implementation, this would apply formatting to the selected text
-        // For this demo, we'll just track the format state
-    }, [activeFormats, readOnly, disabled]);
-    const toggleFormat = useCallback((formatKey) => {
-        if (readOnly || disabled)
-            return;
-        const currentValue = activeFormats[formatKey];
-        applyFormat({ [formatKey]: !currentValue });
-    }, [activeFormats, applyFormat, readOnly, disabled]);
-    const insertText = useCallback((text) => {
-        if (readOnly || disabled)
-            return;
-        const currentText = content.text;
-        const { index } = selection;
-        const newText = currentText.slice(0, index) + text + currentText.slice(index);
-        handleContentChange(newText);
-    }, [content.text, selection, handleContentChange, readOnly, disabled]);
-    const insertLink = useCallback(() => {
-        if (!(links === null || links === void 0 ? void 0 : links.enabled) || readOnly || disabled)
-            return;
-        // In a real implementation, this would show a link dialog
-        const url = prompt('Enter URL:');
-        if (url && (!links.validate || links.validate(url))) {
-            applyFormat({ link: url });
-        }
-    }, [links, applyFormat, readOnly, disabled]);
-    useCallback(async () => {
-        if (!(images === null || images === void 0 ? void 0 : images.enabled) || readOnly || disabled)
-            return;
-        // In a real implementation, this would show a file picker
-        // For now, we'll just insert a placeholder
-        insertText('[Image]');
-    }, [images, insertText, readOnly, disabled]);
-    useCallback((level) => {
-        applyFormat({ heading: level });
-    }, [applyFormat]);
-    const setAlignment = useCallback((align) => {
-        applyFormat({ align });
-    }, [applyFormat]);
-    const setList = useCallback((listType) => {
-        applyFormat({ list: listType });
-    }, [applyFormat]);
-    const getToolButtonStyle = useCallback((isActive) => [
-        styles.toolButton,
-        {
-            backgroundColor: isActive
-                ? (theme.colorScheme === 'dark' ? theme.colors.primary[7] : theme.colors.primary[1])
-                : 'transparent',
-            borderColor: isActive ? theme.colors.primary[4] : theme.backgrounds.border,
-        },
-        (disabled || readOnly) && styles.disabled,
-    ], [styles.toolButton, theme, disabled, readOnly]);
-    const renderToolButton = useCallback((tool, icon, onPress, isActive = false) => (jsx(TouchableOpacity, { onPress: onPress, disabled: disabled || readOnly, style: getToolButtonStyle(isActive), children: jsx(Icon, { name: icon, size: 16, color: isActive ? theme.colors.primary[5] : theme.text.secondary }) }, tool)), [theme, disabled, readOnly, getToolButtonStyle]);
-    const renderToolSeparator = useCallback((index) => (jsx(View, { style: styles.toolSeparator }, `separator-${index}`)), [styles.toolSeparator]);
-    const renderToolbar = useCallback(() => {
-        if (!(toolbar === null || toolbar === void 0 ? void 0 : toolbar.enabled))
-            return null;
-        const tools = toolbar.tools || DEFAULT_TOOLBAR_TOOLS;
-        return (jsx(View, { style: styles.toolbar, children: jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.toolbarContent, children: tools.map((tool, index) => {
-                    if (tool === 'separator') {
-                        return renderToolSeparator(index);
-                    }
-                    switch (tool) {
-                        case 'bold':
-                            return renderToolButton('bold', 'bold', () => toggleFormat('bold'), !!activeFormats.bold);
-                        case 'italic':
-                            return renderToolButton('italic', 'italic', () => toggleFormat('italic'), !!activeFormats.italic);
-                        case 'underline':
-                            return renderToolButton('underline', 'underline', () => toggleFormat('underline'), !!activeFormats.underline);
-                        case 'strikethrough':
-                            return renderToolButton('strikethrough', 'strikethrough', () => toggleFormat('strikethrough'), !!activeFormats.strikethrough);
-                        case 'heading':
-                            return renderToolButton('heading', 'heading', () => applyFormat({ heading: activeFormats.heading ? null : 2 }), !!activeFormats.heading);
-                        case 'align':
-                            return renderToolButton('align', 'alignLeft', // Default to left align icon, could be dynamic based on current align
-                            () => setAlignment(activeFormats.align === 'left' ? 'center' : 'left'), !!activeFormats.align);
-                        case 'list':
-                            return renderToolButton('list', 'listUnordered', // Default to unordered list icon, could be dynamic
-                            () => setList(activeFormats.list === 'unordered' ? 'ordered' : 'unordered'), !!activeFormats.list);
-                        case 'link':
-                            return renderToolButton('link', 'link', insertLink, !!activeFormats.link);
-                        case 'image':
-                            return renderToolButton('image', 'image', () => { }, // TODO: Implement image insertion
-                            false);
-                        case 'code':
-                            return renderToolButton('code', 'code', () => toggleFormat('code'), !!activeFormats.code);
-                        case 'quote':
-                            return renderToolButton('quote', 'quote', () => toggleFormat('quote'), !!activeFormats.quote);
-                        case 'color':
-                            return renderToolButton('color', 'color', () => { }, // TODO: Implement color picker
-                            !!activeFormats.color);
-                        default:
-                            return null;
-                    }
-                }) }) }));
-    }, [toolbar, theme, activeFormats, renderToolButton, renderToolSeparator, toggleFormat, insertLink, styles.toolbar, styles.toolbarContent]);
-    const renderEditor = useCallback(() => (jsx(View, { style: [
-            styles.editorContainer,
-            {
-                borderColor: isFocused ? theme.colors.primary[5] : theme.backgrounds.border,
-                minHeight,
-                maxHeight,
-            },
-            error && { borderColor: theme.colors.error[5] },
-            (disabled || readOnly) && styles.disabled,
-        ], children: jsx(TextInput, { ref: editorRef, value: content.text, onChangeText: handleContentChange, onSelectionChange: (event) => handleSelectionChange(event.nativeEvent.selection), onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder, placeholderTextColor: theme.text.muted, multiline: true, textAlignVertical: "top", editable: !disabled && !readOnly, spellCheck: spellCheck, maxLength: maxLength, style: [
-                styles.textInput,
-                Platform.OS === 'web' ? { outlineWidth: 0 } : null,
-                {
-                    color: theme.text.primary,
-                    fontSize: activeFormats.fontSize || 16,
-                    fontFamily: activeFormats.fontFamily || theme.fontFamily,
-                    fontWeight: activeFormats.bold ? 'bold' : 'normal',
-                    fontStyle: activeFormats.italic ? 'italic' : 'normal',
-                    textDecorationLine: activeFormats.underline ? 'underline' : 'none',
-                    textAlign: activeFormats.align || 'left',
-                },
-            ], ...props }) })), [
-        content.text,
-        handleContentChange,
-        handleSelectionChange,
-        handleFocus,
-        handleBlur,
-        placeholder,
-        disabled,
-        readOnly,
-        spellCheck,
-        maxLength,
-        isFocused,
-        theme,
-        minHeight,
-        maxHeight,
-        error,
-        activeFormats,
-        props,
-        styles.editorContainer,
-        styles.disabled,
-        styles.textInput,
-    ]);
-    return (jsxs(View, { style: [styles.container, style], children: [(toolbar === null || toolbar === void 0 ? void 0 : toolbar.position) === 'top' && renderToolbar(), renderEditor(), (toolbar === null || toolbar === void 0 ? void 0 : toolbar.position) === 'bottom' && renderToolbar(), maxLength && (jsxs(Text$1, { style: [styles.characterCount, { color: theme.text.secondary }], children: [content.text.length, "/", maxLength] })), error && (jsx(Text$1, { style: [styles.errorText, { color: theme.colors.error[5] }], children: error })), helperText && !error && (jsx(Text$1, { style: [styles.helperText, { color: theme.text.secondary }], children: helperText }))] }));
-});
-RichTextEditor.displayName = 'RichTextEditor';
-
 function RatingBase(rawProps, ref) {
     const { disclaimerProps: disclaimerData, otherProps: propsAfterDisclaimer } = extractDisclaimerProps(rawProps);
     const { spacingProps, otherProps: props } = extractSpacingProps(propsAfterDisclaimer);
@@ -30058,7 +29335,7 @@ function useMenuContext() {
     return context;
 }
 function MenuBase(props, ref) {
-    const { opened: controlledOpened, trigger = 'click', position = 'auto', offset = 4, closeOnClickOutside = true, closeOnEscape = true, onOpen, onClose, width = 'auto', maxHeight = 300, shadow = 'md', radius = 'md', children, testID, disabled = false, strategy = Platform.OS === 'web' ? 'fixed' : 'portal', ...spacingProps } = props;
+    const { opened: controlledOpened, trigger = 'click', position = 'auto', offset = 4, closeOnClickOutside = true, closeOnEscape = true, onOpen, onClose, w = 'auto', maxH = 300, shadow = 'md', radius = 'md', children, testID, disabled = false, strategy = Platform.OS === 'web' ? 'fixed' : 'portal', ...spacingProps } = props;
     const [internalOpened, setInternalOpened] = useState(false);
     // Derive menu dropdown items from children each render for reactivity
     const { menuItems, menuDropdownProps } = useMemo(() => {
@@ -30133,11 +29410,11 @@ function MenuBase(props, ref) {
         const listGroupStyle = {
             ...styles.dropdown,
             ...(dropdownSpacingStyles || {}),
-            maxHeight,
+            maxHeight: maxH,
             width: resolvedWidth,
         };
-        return (jsx(MenuContext.Provider, { value: menuContextValueOpened, children: jsx(ListGroup, { variant: "default", size: "sm", style: listGroupStyle, children: scrollable ? (jsx(ScrollView, { showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", style: { maxHeight }, children: jsx(ListGroupBody, { children: menuItems }) })) : (jsx(View, { style: { maxHeight, overflow: 'hidden' }, children: jsx(ListGroupBody, { children: menuItems }) })) }) }));
-    }, [menuItems, menuDropdownProps, styles.dropdown, dropdownSpacingStyles, maxHeight, menuContextValueOpened]);
+        return (jsx(MenuContext.Provider, { value: menuContextValueOpened, children: jsx(ListGroup, { variant: "default", size: "sm", style: listGroupStyle, children: scrollable ? (jsx(ScrollView, { showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", style: { maxHeight: maxH }, children: jsx(ListGroupBody, { children: menuItems }) })) : (jsx(View, { style: { maxHeight: maxH, overflow: 'hidden' }, children: jsx(ListGroupBody, { children: menuItems }) })) }) }));
+    }, [menuItems, menuDropdownProps, styles.dropdown, dropdownSpacingStyles, maxH, menuContextValueOpened]);
     const handleOpen = useCallback(async (opts) => {
         var _a, _b, _c, _d, _e, _f;
         // Use ref to avoid stale isOpened value after async close from backdrop click
@@ -30169,7 +29446,7 @@ function MenuBase(props, ref) {
             }
             // Calculate base overlay size
             const estimatedMenuHeight = 120; // Estimate for typical menu with 3-4 items
-            const resolvedWidth = width === 'target' ? triggerRect.width : (typeof width === 'number' ? width : (width === 'auto' ? 200 : 200));
+            const resolvedWidth = w === 'target' ? triggerRect.width : (typeof w === 'number' ? w : (w === 'auto' ? 200 : 200));
             const overlaySize = {
                 width: resolvedWidth,
                 height: estimatedMenuHeight,
@@ -30217,6 +29494,7 @@ function MenuBase(props, ref) {
             const overlayId = openOverlay({
                 content: menuDropdown,
                 anchor: { x: positionResult.x, y: positionResult.y, width: overlaySize.width, height: overlaySize.height },
+                placement: positionResult.placement || position,
                 closeOnClickOutside,
                 closeOnEscape,
                 strategy,
@@ -30236,7 +29514,7 @@ function MenuBase(props, ref) {
         catch (error) {
             console.warn('Failed to open menu:', error);
         }
-    }, [disabled, width, position, offset, strategy, closeOnClickOutside, closeOnEscape, onOpen, menuItems, trigger, buildMenuDropdown, onClose]);
+    }, [disabled, w, position, offset, strategy, closeOnClickOutside, closeOnEscape, onOpen, menuItems, trigger, buildMenuDropdown, onClose]);
     // When menu content changes while open, update overlay content in place
     useEffect(() => {
         var _a;
@@ -30248,14 +29526,14 @@ function MenuBase(props, ref) {
             return; // no structural change
         lastSignatureRef.current = menuItemsSignature;
         const currentId = overlayIdRef.current;
-        const resolvedWidth = (_a = lastResolvedWidthRef.current) !== null && _a !== void 0 ? _a : (typeof width === 'number' ? width : undefined);
+        const resolvedWidth = (_a = lastResolvedWidthRef.current) !== null && _a !== void 0 ? _a : (typeof w === 'number' ? w : undefined);
         const menuDropdown = buildMenuDropdown(resolvedWidth);
         if (!menuDropdown)
             return;
         updateOverlay(currentId, {
             content: menuDropdown,
         });
-    }, [menuItemsSignature, menuItems, updateOverlay, width, buildMenuDropdown]);
+    }, [menuItemsSignature, menuItems, updateOverlay, w, buildMenuDropdown]);
     const handleToggle = useCallback(() => {
         if (isOpenedRef.current) {
             handleClose();
@@ -32186,8 +31464,8 @@ function usePopoverContext(component) {
 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, keyboardAvoidance = true, fallbackPlacements, boundary, withRoles = true, id, withArrow = false, arrowSize = DEFAULT_ARROW_SIZE, arrowRadius = 0, arrowOffset = 5, arrowPosition = 'center', onPositionChange, testID, ...rest } = props;
+    const { children, opened: controlledOpened, defaultOpened = false, onChange, onOpen, onClose, onDismiss, trigger = 'click', disabled = false, closeOnClickOutside = true, closeOnEscape = true, clickOutsideEvents, // currently not implemented
+    trapFocus = false, keepMounted = false, returnFocus = false, withinPortal = true, withOverlay = false, overlayProps, w, minW, minH, maxW, maxH, radius, shadow, zIndex = 300, position = 'bottom', offset = 8, floatingStrategy = 'fixed', middlewares, preventPositionChangeWhenVisible = false, hideDetached = true, viewport, keyboardAvoidance = true, 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);
@@ -32198,9 +31476,18 @@ const PopoverBase = (props, ref) => {
     const openedRef = useRef(opened);
     const closingReasonRef = useRef(null);
     const anchorMeasurementsRef = useRef(null);
+    const hoverTimeoutRef = useRef(null);
     useEffect(() => {
         openedRef.current = opened;
     }, [opened]);
+    // Cleanup hover timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+            }
+        };
+    }, []);
     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
@@ -32213,7 +31500,7 @@ const PopoverBase = (props, ref) => {
             ? false
             : true;
     const resolvedStrategy = floatingStrategy !== null && floatingStrategy !== void 0 ? floatingStrategy : 'fixed';
-    const { position: positioningResult, anchorRef, popoverRef, showOverlay, hideOverlay, updatePosition } = useDropdownPositioning({
+    const { position: positioningResult, anchorRef, popoverRef, showOverlay, hideOverlay, updatePosition, isPositioning } = useDropdownPositioning({
         isOpen: opened && !disabled && !!dropdownState,
         placement: position,
         offset: resolvedOffset,
@@ -32225,9 +31512,20 @@ const PopoverBase = (props, ref) => {
         fallbackPlacements,
         viewport,
         onClose: () => handleOverlayClose('dismiss'),
-        closeOnClickOutside,
+        closeOnClickOutside: trigger === 'hover' ? false : closeOnClickOutside,
         closeOnEscape,
     });
+    // Track if we've done measurement-based positioning to avoid flicker
+    const hasPositionedRef = useRef(false);
+    useEffect(() => {
+        // Only mark as positioned when we have a measurement-based position
+        if (opened && positioningResult && positioningResult._hasMeasuredPopover) {
+            hasPositionedRef.current = true;
+        }
+        if (!opened) {
+            hasPositionedRef.current = false;
+        }
+    }, [opened, positioningResult]);
     const popoverStyles = useMemo(() => createPopoverStyles(theme)({
         radius,
         shadow,
@@ -32331,6 +31629,28 @@ const PopoverBase = (props, ref) => {
             openPopover();
         }
     }, [closePopover, openPopover]);
+    // Hover-specific handlers with delay to prevent glitching when moving between target and dropdown
+    const handleHoverOpen = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        openPopover();
+    }, [openPopover]);
+    const handleHoverClose = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+        }
+        hoverTimeoutRef.current = setTimeout(() => {
+            closePopover('programmatic');
+            hoverTimeoutRef.current = null;
+        }, 150); // Delay to allow mouse to move to dropdown
+    }, [closePopover]);
+    // Store hover handlers in refs to avoid causing re-renders in useEffect
+    const hoverHandlersRef = useRef({ open: handleHoverOpen, close: handleHoverClose });
+    useEffect(() => {
+        hoverHandlersRef.current = { open: handleHoverOpen, close: handleHoverClose };
+    }, [handleHoverOpen, handleHoverClose]);
     useEffect(() => {
         if (opened) {
             updateAnchorMeasurements();
@@ -32362,41 +31682,53 @@ const PopoverBase = (props, ref) => {
             : undefined;
         const widthOverride = (() => {
             var _a, _b;
-            if (typeof width === 'number')
-                return width;
-            if (width === 'target') {
+            if (typeof w === 'number')
+                return w;
+            if (w === '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;
+        if (typeof minW === 'number')
+            sizeStyles.minWidth = minW;
+        if (typeof minH === 'number')
+            sizeStyles.minHeight = minH;
+        if (typeof maxW === 'number')
+            sizeStyles.maxWidth = maxW;
         const computedMaxHeight = positioningResult.maxHeight;
         const resolvedMaxHeight = (() => {
-            if (typeof maxHeight === 'number') {
+            if (typeof maxH === 'number') {
                 if (typeof computedMaxHeight === 'number') {
-                    return Math.min(maxHeight, computedMaxHeight);
+                    return Math.min(maxH, computedMaxHeight);
                 }
-                return maxHeight;
+                return maxH;
             }
-            return typeof computedMaxHeight === 'number' ? computedMaxHeight : maxHeight;
+            return typeof computedMaxHeight === 'number' ? computedMaxHeight : maxH;
         })();
         if (typeof resolvedMaxHeight === 'number')
             sizeStyles.maxHeight = resolvedMaxHeight;
         const dropdownStyle = [popoverStyles.dropdown, dropdownState.style, sizeStyles];
-        const content = (jsxs(View, { ref: popoverRef, style: [popoverStyles.wrapper, widthOverride ? { width: widthOverride } : null], pointerEvents: dropdownState.trapFocus ? 'auto' : 'box-none', testID: dropdownState.testID, onLayout: handleDropdownLayout, ...dropdownState.containerProps, children: [jsx(View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsx(View, { style: getArrowStyle(positioningResult.placement, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme) }))] }));
+        // Hover handlers for the dropdown to keep it open when mouse moves from target to dropdown
+        const dropdownHoverHandlers = trigger === 'hover' && Platform.OS === 'web'
+            ? {
+                onMouseEnter: () => hoverHandlersRef.current.open(),
+                onMouseLeave: () => hoverHandlersRef.current.close(),
+            }
+            : {};
+        // Hide content until we have measurement-based positioning to prevent visual "snap"
+        const hasMeasuredPosition = (positioningResult === null || positioningResult === void 0 ? void 0 : positioningResult._hasMeasuredPopover) === true;
+        const visibilityStyle = !hasMeasuredPosition && Platform.OS === 'web'
+            ? { opacity: 0 }
+            : {};
+        const content = (jsxs(View, { ref: popoverRef, style: [popoverStyles.wrapper, widthOverride ? { width: widthOverride } : null, visibilityStyle], pointerEvents: trigger === 'hover' ? 'auto' : (dropdownState.trapFocus ? 'auto' : 'box-none'), testID: dropdownState.testID, onLayout: handleDropdownLayout, ...dropdownHoverHandlers, ...dropdownState.containerProps, children: [jsx(View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsx(View, { style: getArrowStyle(positioningResult.placement, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme) }))] }));
         showOverlay(content, {
             width: widthOverride,
             maxHeight: resolvedMaxHeight,
             zIndex,
         });
         onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(positioningResult.placement);
-    }, [opened, dropdownState, positioningResult, popoverRef, showOverlay, hideOverlay, popoverStyles.dropdown, popoverStyles.wrapper, width, maxHeight, minWidth, minHeight, maxWidth, withArrow, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme, zIndex, onPositionChange, schedulePositionUpdate]);
+    }, [opened, dropdownState, positioningResult, popoverRef, showOverlay, hideOverlay, popoverStyles.dropdown, popoverStyles.wrapper, w, maxH, minW, minH, maxW, withArrow, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme, zIndex, onPositionChange, schedulePositionUpdate, trigger, isPositioning]);
     useEffect(() => {
         return () => {
             hideOverlay();
@@ -32417,6 +31749,8 @@ const PopoverBase = (props, ref) => {
         open: openPopover,
         close: () => closePopover('programmatic'),
         toggle: togglePopover,
+        hoverOpen: handleHoverOpen,
+        hoverClose: handleHoverClose,
         registerDropdown,
         unregisterDropdown,
         anchorRef,
@@ -32425,7 +31759,8 @@ const PopoverBase = (props, ref) => {
         withRoles,
         disabled,
         returnFocus,
-    }), [opened, openPopover, closePopover, togglePopover, registerDropdown, unregisterDropdown, anchorRef, targetId, dropdownId, withRoles, disabled, returnFocus]);
+        trigger,
+    }), [opened, openPopover, closePopover, togglePopover, handleHoverOpen, handleHoverClose, registerDropdown, unregisterDropdown, anchorRef, targetId, dropdownId, withRoles, disabled, returnFocus, trigger]);
     const setContainerRef = useCallback((node) => {
         if (typeof ref === 'function') {
             ref(node);
@@ -32475,16 +31810,44 @@ const PopoverTargetBase = (props, ref) => {
         : { 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();
-    };
+    const wrapperHoverHandlers = {};
+    // Click trigger: toggle on press
+    if (context.trigger === 'click') {
+        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();
+        };
+    }
+    // Hover trigger: open/close on mouse enter/leave (web only)
+    // Applied to the wrapper View for reliable hover detection
+    if (context.trigger === 'hover' && Platform.OS === 'web') {
+        wrapperHoverHandlers.onMouseEnter = (...args) => {
+            const tgt = targetProps;
+            if (tgt && typeof tgt.onMouseEnter === 'function') {
+                tgt.onMouseEnter(...args);
+            }
+            if (typeof childProps.onMouseEnter === 'function') {
+                childProps.onMouseEnter(...args);
+            }
+            context.hoverOpen();
+        };
+        wrapperHoverHandlers.onMouseLeave = (...args) => {
+            const tgt = targetProps;
+            if (tgt && typeof tgt.onMouseLeave === 'function') {
+                tgt.onMouseLeave(...args);
+            }
+            if (typeof childProps.onMouseLeave === 'function') {
+                childProps.onMouseLeave(...args);
+            }
+            context.hoverClose();
+        };
+    }
     if (Platform.OS === 'web') {
         triggerHandlers.onKeyDown = (event) => {
             const tgt = targetProps;
@@ -32506,7 +31869,14 @@ const PopoverTargetBase = (props, ref) => {
         };
     }
     const dynamicRefProp = { [refProp]: composedRef };
-    delete sanitizedTargetProps.onPress;
+    // Remove handlers that we're overriding from sanitizedTargetProps
+    if (context.trigger === 'click') {
+        delete sanitizedTargetProps.onPress;
+    }
+    if (context.trigger === 'hover') {
+        delete sanitizedTargetProps.onMouseEnter;
+        delete sanitizedTargetProps.onMouseLeave;
+    }
     delete sanitizedTargetProps.onKeyDown;
     const mergedProps = {
         ...sanitizedTargetProps,
@@ -32518,7 +31888,7 @@ const PopoverTargetBase = (props, ref) => {
         mergedProps.disabled = true;
     }
     const anchorWrapperRef = mergeRefs(context.anchorRef, ref);
-    return (jsx(View, { ref: anchorWrapperRef, collapsable: false, children: cloneElement(children, mergedProps) }));
+    return (jsx(View, { ref: anchorWrapperRef, collapsable: false, ...wrapperHoverHandlers, children: cloneElement(children, mergedProps) }));
 };
 const PopoverDropdownBase = (props, _ref) => {
     const { children, trapFocus = false, keepMounted, style, testID, ...rest } = props;
@@ -32562,8 +31932,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
     const [side, alignment] = placement.split('-');
     switch (side) {
         case 'top':
+            // Arrow points down, hide the borders that overlap with content (top-left corner after rotation)
             return {
                 ...base,
+                borderTopWidth: 0,
+                borderLeftWidth: 0,
                 bottom: -arrowSize,
                 left: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -32573,8 +31946,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
                 marginLeft: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
             };
         case 'bottom':
+            // Arrow points up, hide the borders that overlap with content (bottom-right corner after rotation)
             return {
                 ...base,
+                borderBottomWidth: 0,
+                borderRightWidth: 0,
                 top: -arrowSize,
                 left: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -32584,8 +31960,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
                 marginLeft: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
             };
         case 'left':
+            // Arrow points right, hide the borders that overlap with content (bottom-left corner after rotation)
             return {
                 ...base,
+                borderBottomWidth: 0,
+                borderLeftWidth: 0,
                 right: -arrowSize,
                 top: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -32595,8 +31974,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
                 marginTop: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
             };
         case 'right':
+            // Arrow points left, hide the borders that overlap with content (top-right corner after rotation)
             return {
                 ...base,
+                borderTopWidth: 0,
+                borderRightWidth: 0,
                 left: -arrowSize,
                 top: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -32634,7 +32016,7 @@ const getSpacingValue = (spacing, theme) => {
 // Table Cell Components
 const TableTh = (allProps) => {
     const { spacingProps, otherProps } = extractSpacingProps(allProps);
-    const { children, w, align = 'left', minWidth, maxWidth, flex, widthStrategy = 'auto', style } = otherProps;
+    const { children, w, align = 'left', minW, maxW, flex, widthStrategy = 'auto', style } = otherProps;
     const theme = useTheme();
     const { isRTL } = useDirection();
     // Swap alignment in RTL
@@ -32665,10 +32047,10 @@ const TableTh = (allProps) => {
         else if (widthStrategy === 'auto') {
             widthStyle.flex = 1;
         }
-        if (minWidth)
-            widthStyle.minWidth = minWidth;
-        if (maxWidth)
-            widthStyle.maxWidth = maxWidth;
+        if (minW)
+            widthStyle.minWidth = minW;
+        if (maxW)
+            widthStyle.maxWidth = maxW;
         return widthStyle;
     };
     const cellStyle = [
@@ -32689,7 +32071,7 @@ const TableTh = (allProps) => {
 };
 const TableTd = (allProps) => {
     const { spacingProps, otherProps } = extractSpacingProps(allProps);
-    const { children, w, align = 'left', minWidth, maxWidth, flex, widthStrategy = 'auto', style } = otherProps;
+    const { children, w, align = 'left', minW, maxW, flex, widthStrategy = 'auto', style } = otherProps;
     const theme = useTheme();
     const { isRTL } = useDirection();
     // Swap alignment in RTL
@@ -32720,10 +32102,10 @@ const TableTd = (allProps) => {
         else if (widthStrategy === 'auto') {
             widthStyle.flex = 1;
         }
-        if (minWidth)
-            widthStyle.minWidth = minWidth;
-        if (maxWidth)
-            widthStyle.maxWidth = maxWidth;
+        if (minW)
+            widthStyle.minWidth = minW;
+        if (maxW)
+            widthStyle.maxWidth = maxW;
         return widthStyle;
     };
     const cellStyle = [
@@ -32802,16 +32184,16 @@ const TableCaption = (allProps) => {
 // Scroll Container Component
 const TableScrollContainer = (allProps) => {
     const { spacingProps, otherProps } = extractSpacingProps(allProps);
-    const { children, minWidth = 500, maxHeight, type = 'native', style } = otherProps;
+    const { children, minW = 500, maxH, type = 'native', style } = otherProps;
     const containerStyle = [
         {
             width: '100%',
-            maxHeight
+            maxHeight: maxH
         },
         getSpacingStyles(spacingProps),
         style
     ];
-    const scrollViewStyle = minWidth ? { minWidth } : undefined;
+    const scrollViewStyle = minW ? { minWidth: minW } : undefined;
     return (jsx(View, { style: containerStyle, children: jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: Platform.OS === 'web', contentContainerStyle: scrollViewStyle, children: jsx(ScrollView, { style: { flex: 1 }, showsVerticalScrollIndicator: Platform.OS === 'web', children: children }) }) }));
 };
 // Main Table Component
@@ -33749,7 +33131,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
             alignItems: 'center',
             marginBottom: DESIGN_TOKENS.spacing.md,
             paddingHorizontal: DESIGN_TOKENS.spacing.xs
-        }, children: [jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxs(Flex, { gap: 8, children: [jsxs(Text, { variant: "small", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 320, trapFocus: true, children: [jsx(Popover.Target, { children: jsxs(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsx(View, { style: {
+        }, children: [jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxs(Flex, { gap: 8, children: [jsxs(Text, { variant: "small", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, w: 320, trapFocus: true, children: [jsx(Popover.Target, { children: jsxs(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsx(View, { style: {
                                                 width: 6,
                                                 height: 6,
                                                 borderRadius: 3,
@@ -33779,7 +33161,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                                                     }) })), jsx(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: columns.filter(c => c.filterable).map(column => {
                                                         const currentFilter = getColumnFilter(column.key);
                                                         return (jsx(View, { children: renderFilterControl(column) }, `${column.key}-${(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) || 'no-filter'}`));
-                                                    }) })] }))] }) })] })), onEditModeChange && (jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 280, trapFocus: true, children: [jsx(Popover.Target, { children: jsx(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "eye", size: 14 }), children: "Columns" }) }), jsx(Popover.Dropdown, { children: jsxs(View, { style: { padding: 8, maxHeight: 300, width: 260 }, children: [jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxs(Row, { children: [jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsx(ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsx(Checkbox, { label: tempHeaderEdits[col.key] || col.header, onChange: () => {
+                                                    }) })] }))] }) })] })), onEditModeChange && (jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, w: 280, trapFocus: true, children: [jsx(Popover.Target, { children: jsx(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "eye", size: 14 }), children: "Columns" }) }), jsx(Popover.Dropdown, { children: jsxs(View, { style: { padding: 8, maxHeight: 300, width: 260 }, children: [jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxs(Row, { children: [jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsx(ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsx(Checkbox, { label: tempHeaderEdits[col.key] || col.header, onChange: () => {
                                                     if (hiddenColumns.includes(col.key)) {
                                                         setHiddenColumns(prev => prev.filter(h => h !== col.key));
                                                     }
@@ -34153,9 +33535,9 @@ const resolveTokenColor = (token, theme) => {
     return token; // assume raw color string
 };
 // Item
-const TimelineItem = forwardRef(({ children, title, bullet, colorVariant, lineVariant = 'solid', color, active, itemIndex = 0, isLastItem = false, itemAlign, ...rest }, ref) => {
+const TimelineItem = forwardRef(({ children, title, timestamp, bullet, colorVariant, lineVariant = 'solid', color, titleColor, descriptionColor, timestampColor, active, itemIndex = 0, isLastItem = false, itemAlign, ...rest }, ref) => {
     const theme = useTheme();
-    const { active: timelineActive, color: timelineColor, lineWidth, bulletSize: contextBulletSize, align, reverseActive, size, centerMode, metrics, } = useTimelineContext();
+    const { active: timelineActive, color: timelineColor, lineWidth, bulletSize: contextBulletSize, align, reverseActive, size, centerMode, metrics, titleColor: timelineTitleColor, descriptionColor: timelineDescriptionColor, timestampColor: timelineTimestampColor, } = useTimelineContext();
     const sizeConfig = metrics;
     const finalBulletSize = contextBulletSize || sizeConfig.bulletSize;
     const showAllColored = timelineActive === undefined;
@@ -34170,6 +33552,9 @@ const TimelineItem = forwardRef(({ children, title, bullet, colorVariant, lineVa
     const resolvedItemColor = color
         ? color
         : (colorVariant ? resolveTokenColor(colorVariant, theme) : timelineColor);
+    const resolvedTitleColor = titleColor !== null && titleColor !== void 0 ? titleColor : timelineTitleColor;
+    const resolvedDescriptionColor = descriptionColor !== null && descriptionColor !== void 0 ? descriptionColor : timelineDescriptionColor;
+    const resolvedTimestampColor = timestampColor !== null && timestampColor !== void 0 ? timestampColor : timelineTimestampColor;
     // Active logic
     const isActive = showAllColored
         ? true
@@ -34255,10 +33640,16 @@ const TimelineItem = forwardRef(({ children, title, bullet, colorVariant, lineVa
     const getTitleStyle = () => ({
         fontSize: sizeConfig.fontSize,
         fontWeight: '600',
-        color: theme.text.primary,
+        color: resolvedTitleColor !== null && resolvedTitleColor !== void 0 ? resolvedTitleColor : theme.text.primary,
         marginBottom: title && children ? 4 : 0,
         textAlign: effectiveAlign === 'right' ? 'right' : 'left',
     });
+    const getTimestampStyle = () => ({
+        fontSize: Math.max(10, Math.round(sizeConfig.fontSize * 0.8)),
+        color: resolvedTimestampColor !== null && resolvedTimestampColor !== void 0 ? resolvedTimestampColor : theme.text.secondary,
+        marginBottom: (title || children) ? 4 : 0,
+        textAlign: effectiveAlign === 'right' ? 'right' : 'left',
+    });
     const getItemWrapperStyle = () => {
         if (centerMode) {
             return {
@@ -34274,36 +33665,53 @@ const TimelineItem = forwardRef(({ children, title, bullet, colorVariant, lineVa
             alignItems: 'flex-start',
         };
     };
+    const applyTextStyle = (nodes, styleOverride) => {
+        if (!styleOverride)
+            return nodes;
+        return React__default.Children.map(nodes, (child) => {
+            var _a;
+            if (typeof child === 'string' || typeof child === 'number') {
+                return jsx(Text$1, { style: styleOverride, children: child });
+            }
+            if (!React__default.isValidElement(child))
+                return child;
+            const props = child.props || {};
+            const isTextLike = ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Text' || child.type === Text$1 || typeof props.children === 'string';
+            if (isTextLike) {
+                const mergedStyle = Array.isArray(props.style)
+                    ? [...props.style, styleOverride]
+                    : [props.style, styleOverride];
+                return React__default.cloneElement(child, { style: mergedStyle });
+            }
+            if (props.children) {
+                return React__default.cloneElement(child, { children: applyTextStyle(props.children, styleOverride) });
+            }
+            return child;
+        });
+    };
     if (centerMode) {
         // Three column layout: left content | bullet/line | right content
         const leftContent = effectiveAlign === 'left' && (title || children);
         const rightContent = effectiveAlign === 'right' && (title || children);
         // Helper to clone Text children with alignment
         const alignChildText = (nodes, side) => {
-            return React__default.Children.map(nodes, (child) => {
-                var _a;
-                if (!React__default.isValidElement(child))
-                    return child;
-                const props = child.props || {};
-                const isTextLike = ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Text' || (typeof props.children === 'string');
-                if (isTextLike) {
-                    const mergedStyle = Array.isArray(props.style)
-                        ? [...props.style, { textAlign: side }]
-                        : [props.style, { textAlign: side }];
-                    return React__default.cloneElement(child, { style: mergedStyle });
-                }
-                if (props.children) {
-                    return React__default.cloneElement(child, { children: alignChildText(props.children, side) });
-                }
-                return child;
-            });
+            const styleOverride = {
+                textAlign: side,
+                ...(resolvedDescriptionColor ? { color: resolvedDescriptionColor } : {}),
+            };
+            return applyTextStyle(nodes, styleOverride);
         };
-        return (jsxs(View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [jsx(View, { style: { flex: 1, paddingRight: sizeConfig.spacing, alignItems: 'flex-end' }, children: leftContent && (jsxs(View, { style: { width: '100%', alignItems: 'flex-end' }, children: [title && jsx(Text$1, { style: [getTitleStyle(), { textAlign: 'right' }], children: title }), alignChildText(children, 'right')] })) }), jsxs(View, { style: { width: finalBulletSize, alignItems: 'center', position: 'relative' }, children: [getLine(), jsx(View, { style: getBulletStyle(), children: bullet })] }), jsx(View, { style: { flex: 1, paddingLeft: sizeConfig.spacing, alignItems: 'flex-start' }, children: rightContent && (jsxs(View, { style: { width: '100%', alignItems: 'flex-start' }, children: [title && jsx(Text$1, { style: [getTitleStyle(), { textAlign: 'left' }], children: title }), alignChildText(children, 'left')] })) })] }));
+        return (jsxs(View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [jsx(View, { style: { flex: 1, paddingRight: sizeConfig.spacing, alignItems: 'flex-end' }, children: leftContent && (jsxs(View, { style: { width: '100%', alignItems: 'flex-end' }, children: [timestamp && (jsx(Text$1, { style: [getTimestampStyle(), { textAlign: 'right' }], children: timestamp })), title && jsx(Text$1, { style: [getTitleStyle(), { textAlign: 'right' }], children: title }), alignChildText(children, 'right')] })) }), jsxs(View, { style: { width: finalBulletSize, alignItems: 'center', position: 'relative' }, children: [getLine(), jsx(View, { style: getBulletStyle(), children: bullet })] }), jsx(View, { style: { flex: 1, paddingLeft: sizeConfig.spacing, alignItems: 'flex-start' }, children: rightContent && (jsxs(View, { style: { width: '100%', alignItems: 'flex-start' }, children: [timestamp && (jsx(Text$1, { style: [getTimestampStyle(), { textAlign: 'left' }], children: timestamp })), title && jsx(Text$1, { style: [getTitleStyle(), { textAlign: 'left' }], children: title }), alignChildText(children, 'left')] })) })] }));
     }
-    return (jsxs(View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [getLine(), jsx(View, { style: getBulletStyle(), children: bullet }), (title || children) && (jsxs(View, { style: getContentStyle(), children: [title && jsx(Text$1, { style: getTitleStyle(), children: title }), children] }))] }));
+    return (jsxs(View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [getLine(), jsx(View, { style: getBulletStyle(), children: bullet }), (title || children) && (jsxs(View, { style: getContentStyle(), children: [timestamp && jsx(Text$1, { style: getTimestampStyle(), children: timestamp }), title && jsx(Text$1, { style: getTitleStyle(), children: title }), resolvedDescriptionColor
+                        ? applyTextStyle(children, {
+                            color: resolvedDescriptionColor,
+                            textAlign: effectiveAlign === 'right' ? 'right' : 'left',
+                        })
+                        : children] }))] }));
 });
 // Root Timeline
-const Timeline = forwardRef(({ children, active, color, colorVariant, lineWidth, bulletSize, align = 'left', reverseActive = false, size = 'md', centerMode = false, ...rest }, ref) => {
+const Timeline = forwardRef(({ children, active, color, colorVariant, titleColor, descriptionColor, timestampColor, lineWidth, bulletSize, align = 'left', reverseActive = false, size = 'md', centerMode = false, ...rest }, ref) => {
     const theme = useTheme();
     const clampedSize = clampComponentSize(size, TIMELINE_ALLOWED_SIZES);
     const baseMetrics = resolveTimelineMetrics(clampedSize);
@@ -34325,6 +33733,9 @@ const Timeline = forwardRef(({ children, active, color, colorVariant, lineWidth,
         size: clampedSize,
         metrics,
         centerMode,
+        titleColor,
+        descriptionColor,
+        timestampColor,
     };
     const items = [];
     React__default.Children.forEach(children, (child, index) => {
@@ -35042,7 +34453,7 @@ const Notice = factory(NoticeBase);
 Notice.displayName = 'Notice';
 
 function SkeletonBase(props, ref) {
-    const { shape = 'rectangle', width, height, size = 'md', radius, animate = true, animationDuration = 1500, colors, style, testID, ...rest } = props;
+    const { shape = 'rectangle', w, h, size = 'md', radius, animate = true, animationDuration = 1500, colors, style, testID, ...rest } = props;
     const { spacingProps, otherProps } = extractSpacingProps(rest);
     const spacingStyles = getSpacingStyles(spacingProps);
     const theme = useTheme();
@@ -35063,36 +34474,36 @@ function SkeletonBase(props, ref) {
         switch (shape) {
             case 'text':
                 return {
-                    width: width || '100%',
-                    height: height || getSpacing('md')
+                    width: w || '100%',
+                    height: h || getSpacing('md')
                 };
             case 'chip':
                 return {
-                    width: width || (sizeValue * 3),
-                    height: height || sizeValue
+                    width: w || (sizeValue * 3),
+                    height: h || sizeValue
                 };
             case 'avatar':
             case 'circle':
                 return {
-                    width: width || sizeValue,
-                    height: height || sizeValue
+                    width: w || sizeValue,
+                    height: h || sizeValue
                 };
             case 'button':
                 return {
-                    width: width || (sizeValue * 4),
-                    height: height || sizeValue
+                    width: w || (sizeValue * 4),
+                    height: h || sizeValue
                 };
             case 'card':
                 return {
-                    width: width || '100%',
-                    height: height || (sizeValue * 6)
+                    width: w || '100%',
+                    height: h || (sizeValue * 6)
                 };
             case 'rectangle':
             case 'rounded':
             default:
                 return {
-                    width: width || '100%',
-                    height: height || sizeValue
+                    width: w || '100%',
+                    height: h || sizeValue
                 };
         }
     };
@@ -35731,104 +35142,6 @@ const Ring = factory((props, ref) => {
     return (jsxs(View, { ref: ref, style: [styles$8.container, spacingStyles, style], testID: testID, accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : `Ring value ${Math.round(percent)} percent`, accessibilityRole: "progressbar", accessibilityValue: { min, max, now: Math.round(clampedValue) }, ...otherProps, children: [jsxs(View, { style: [styles$8.ringWrapper, { width: size, height: size }, ringStyle], children: [jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [jsx(Circle, { cx: size / 2, cy: size / 2, r: radius, stroke: defaultTrackColor, strokeWidth: thickness, fill: "transparent" }), jsx(Circle, { cx: size / 2, cy: size / 2, r: radius, stroke: resolvedProgressColor, strokeWidth: thickness, strokeLinecap: roundedCaps ? 'round' : 'butt', strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: dashOffset, fill: "transparent", transform: `rotate(-90 ${size / 2} ${size / 2})` })] }), jsx(View, { pointerEvents: "none", style: [styles$8.centerContent, { width: size, height: size }, contentStyle], children: centerContent })] }), caption !== undefined && caption !== null ? (React__default.isValidElement(caption) ? (caption) : (jsx(Text, { variant: "span", size: "xs", color: captionTextColor, weight: "600", style: [{ marginTop: 6, letterSpacing: 1 }, captionStyle], children: caption }))) : null] }));
 }, { displayName: 'Ring' });
 
-const NAVIGATIONPROGRESS_DEFAULTS = {
-    size: 3,
-    color: 'primary',
-    zIndex: 9999,
-    overlay: true,
-    stepInterval: 500,
-    radius: 0,
-};
-
-let subscribers = new Set();
-let internalState = { value: 0, active: false };
-let interval = null;
-function broadcast() { subscribers.forEach(cb => cb({ ...internalState })); }
-function schedule(intervalMs) {
-    clearInterval(interval);
-    interval = setInterval(() => {
-        if (!internalState.active)
-            return;
-        const remain = 100 - internalState.value;
-        const inc = Math.max(0.1, remain * 0.03);
-        internalState.value = Math.min(99, internalState.value + inc);
-        broadcast();
-    }, intervalMs);
-}
-const navigationProgress = {
-    start() { if (internalState.active)
-        return; internalState.active = true; if (internalState.value >= 100)
-        internalState.value = 0; broadcast(); schedule(NAVIGATIONPROGRESS_DEFAULTS.stepInterval); },
-    stop() { internalState.active = false; broadcast(); },
-    complete() { internalState.active = true; internalState.value = 100; broadcast(); setTimeout(() => { internalState.active = false; internalState.value = 0; broadcast(); }, 400); },
-    reset() { internalState.value = 0; internalState.active = false; broadcast(); },
-    set(v) { internalState.value = Math.max(0, Math.min(100, v)); broadcast(); },
-    increment(delta = 5) { internalState.value = Math.min(100, internalState.value + delta); broadcast(); },
-    decrement(delta = 5) { internalState.value = Math.max(0, internalState.value - delta); broadcast(); },
-    isActive() { return internalState.active; }
-};
-const NavigationProgress = ({ value, size = NAVIGATIONPROGRESS_DEFAULTS.size, color = NAVIGATIONPROGRESS_DEFAULTS.color, zIndex = NAVIGATIONPROGRESS_DEFAULTS.zIndex, overlay = NAVIGATIONPROGRESS_DEFAULTS.overlay, stepInterval = NAVIGATIONPROGRESS_DEFAULTS.stepInterval, radius = NAVIGATIONPROGRESS_DEFAULTS.radius, active = true, style }) => {
-    const theme = useTheme();
-    const scheme = useColorScheme();
-    const isDark = scheme === 'dark';
-    const progress = useSharedValue(0);
-    const opacity = useSharedValue(0);
-    useEffect(() => {
-        const sub = (s) => {
-            if (value == null) {
-                progress.value = withTiming(s.value, { duration: stepInterval });
-                opacity.value = withTiming(s.active ? 1 : 0, { duration: 150 });
-            }
-        };
-        subscribers.add(sub);
-        broadcast();
-        return () => { subscribers.delete(sub); };
-    }, [value, stepInterval, progress, opacity]);
-    useEffect(() => {
-        if (value != null) {
-            progress.value = withTiming(value, { duration: stepInterval });
-            opacity.value = withTiming(active ? 1 : 0, { duration: 150 });
-        }
-    }, [value, active, stepInterval]);
-    let resolvedColor = color;
-    if (theme.colors[color]) {
-        const bucket = theme.colors[color];
-        resolvedColor = bucket[5] || bucket[4] || bucket[0];
-    }
-    const barStyle = useAnimatedStyle(() => ({ width: `${progress.value}%` }));
-    const containerStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
-    return (jsxs(Animated.View, { style: [
-            {
-                position: overlay ? 'absolute' : 'relative',
-                top: 0,
-                left: 0,
-                right: 0,
-                height: size,
-                backgroundColor: isDark ? theme.colors.gray[3] : theme.colors.gray[2],
-                overflow: 'hidden',
-                zIndex,
-                borderRadius: radius,
-                pointerEvents: 'none'
-            },
-            containerStyle,
-            style
-        ], children: [jsx(Animated.View, { style: [{
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0,
-                        left: 0,
-                        backgroundColor: resolvedColor,
-                        borderRadius: radius,
-                    }, barStyle] }), jsx(Animated.View, { style: [{
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0,
-                        right: 0,
-                        width: 80,
-                        backgroundColor: 'rgba(255,255,255,0.2)'
-                    }, barStyle] })] }));
-};
-
 const DEFAULT_OPACITY = 0.6;
 const HEX_COLOR_REGEX = /^#?[0-9a-f]{3,8}$/i;
 const clampOpacity = (value) => {
@@ -36021,270 +35334,6 @@ const LoadingOverlay = React__default.forwardRef((props, ref) => {
 });
 LoadingOverlay.displayName = 'LoadingOverlay';
 
-// A lightweight hover-activated floating panel similar to Mantine HoverCard
-function HoverCardBase(props, ref) {
-    const { children, target, position = 'top', offset = 8, openDelay = 100, closeDelay = 150, opened: controlledOpened, shadow = 'md', radius = 'md', withinPortal = true, width, withArrow = false, closeOnEscape = true, onOpen, onClose, disabled = false, style, testID, zIndex = 3000, keepMounted = false, trigger = 'hover', } = props;
-    const [opened, setOpened] = useState(false);
-    const openTimeout = useRef(null);
-    const closeTimeout = useRef(null);
-    const containerRef = useRef(null);
-    const targetRef = useRef(null);
-    const overlayIdRef = useRef(null);
-    const overlayContentRef = useRef(null);
-    const isHoveringTargetRef = useRef(false);
-    const isHoveringOverlayRef = useRef(false);
-    const theme = useTheme();
-    const { openOverlay, closeOverlay, updateOverlay } = useOverlay();
-    const isOpened = controlledOpened !== undefined ? controlledOpened : opened;
-    const clearTimers = () => {
-        if (openTimeout.current) {
-            clearTimeout(openTimeout.current);
-            openTimeout.current = null;
-        }
-        if (closeTimeout.current) {
-            clearTimeout(closeTimeout.current);
-            closeTimeout.current = null;
-        }
-    };
-    const doOpen = useCallback(() => {
-        if (disabled)
-            return;
-        setOpened(true);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    }, [disabled, onOpen]);
-    const doClose = useCallback(() => {
-        setOpened(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [onClose]);
-    const scheduleOpen = useCallback(() => {
-        clearTimers();
-        openTimeout.current = setTimeout(doOpen, openDelay);
-    }, [doOpen, openDelay]);
-    const scheduleClose = useCallback(() => {
-        clearTimers();
-        closeTimeout.current = setTimeout(() => {
-            // Only close if neither target nor overlay are hovered (web)
-            if (Platform.OS === 'web') {
-                if (isHoveringTargetRef.current || isHoveringOverlayRef.current)
-                    return;
-            }
-            doClose();
-        }, closeDelay);
-    }, [doClose, closeDelay]);
-    useEffect(() => () => clearTimers(), []);
-    // Escape key (web only)
-    useEffect(() => {
-        if (!closeOnEscape || Platform.OS !== 'web')
-            return;
-        const handler = (e) => { if (e.key === 'Escape')
-            doClose(); };
-        document.addEventListener('keydown', handler);
-        return () => document.removeEventListener('keydown', handler);
-    }, [closeOnEscape, doClose]);
-    const getInlinePositionStyle = () => {
-        const base = { position: 'absolute' };
-        switch (position) {
-            case 'top': return { ...base, bottom: '100%', left: 0, marginBottom: offset };
-            case 'bottom': return { ...base, top: '100%', left: 0, marginTop: offset };
-            case 'left': return { ...base, right: '100%', top: 0, marginRight: offset };
-            case 'right': return { ...base, left: '100%', top: 0, marginLeft: offset };
-            default: return { ...base, top: '100%', left: 0, marginTop: offset };
-        }
-    };
-    const shadowStyle = (() => {
-        switch (shadow) {
-            case 'sm':
-                return { boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', elevation: 2 };
-            case 'md':
-                return { boxShadow: '0 2px 4px rgba(0, 0, 0, 0.15)', elevation: 4 };
-            case 'lg':
-                return { boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', elevation: 8 };
-            default:
-                return {};
-        }
-    })();
-    const renderArrow = (placement) => {
-        if (!withArrow)
-            return null;
-        const base = { position: 'absolute', width: 0, height: 0 };
-        const color = theme.colors.gray[0];
-        const styles = {
-            top: { top: '100%', left: 12, borderLeftWidth: 6, borderRightWidth: 6, borderTopWidth: 6, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderTopColor: color },
-            bottom: { bottom: '100%', left: 12, borderLeftWidth: 6, borderRightWidth: 6, borderBottomWidth: 6, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: color },
-            left: { left: '100%', top: 12, borderTopWidth: 6, borderBottomWidth: 6, borderLeftWidth: 6, borderTopColor: 'transparent', borderBottomColor: 'transparent', borderLeftColor: color },
-            right: { right: '100%', top: 12, borderTopWidth: 6, borderBottomWidth: 6, borderRightWidth: 6, borderTopColor: 'transparent', borderBottomColor: 'transparent', borderRightColor: color },
-        };
-        const key = placement.split('-')[0];
-        return jsx(View, { style: { ...base, ...(styles[key] || styles.top) } });
-    };
-    const openPortal = useCallback(async () => {
-        if (!withinPortal || !isOpened || overlayIdRef.current)
-            return;
-        const rect = await measureElement(targetRef);
-        const estWidth = width || 240;
-        const estHeight = 160; // rough initial height
-        const pos = calculateOverlayPositionEnhanced(rect, { width: estWidth, height: estHeight }, {
-            placement: position,
-            offset,
-            viewport: getViewport(),
-            strategy: 'fixed'
-        });
-        const overlayContent = (jsxs(View, { ref: overlayContentRef, style: [
-                {
-                    backgroundColor: theme.colors.gray[0],
-                    borderRadius: getRadius$2(radius),
-                    paddingHorizontal: getSpacing('md'),
-                    paddingVertical: getSpacing('sm'),
-                    borderWidth: 1,
-                    borderColor: theme.colors.gray[3],
-                    minWidth: width || 160,
-                    maxWidth: width || 320,
-                },
-                shadowStyle,
-            ], ...(Platform.OS === 'web' && trigger === 'hover' ? {
-                onMouseEnter: () => { isHoveringOverlayRef.current = true; clearTimers(); },
-                onMouseLeave: () => { isHoveringOverlayRef.current = false; scheduleClose(); },
-            } : {}), children: [children, renderArrow(pos.placement)] }));
-        const id = openOverlay({
-            content: overlayContent,
-            anchor: { x: pos.x, y: pos.y, width: estWidth, height: estHeight },
-            trigger: trigger,
-            // For hover-triggered overlays, do NOT render a click-outside backdrop – it steals hover
-            // and immediately fires target onMouseLeave. We rely on pointer leave timers instead.
-            closeOnClickOutside: trigger !== 'hover',
-            closeOnEscape: closeOnEscape,
-            strategy: 'fixed',
-            onClose: () => { overlayIdRef.current = null; if (opened)
-                setOpened(false); onClose === null || onClose === void 0 ? void 0 : onClose(); },
-            zIndex
-        });
-        overlayIdRef.current = id;
-    }, [withinPortal, isOpened, overlayIdRef, position, offset, width, trigger, closeOnEscape, theme, radius, shadowStyle, children, opened, onClose, getSpacing, getRadius$2]);
-    const closePortal = useCallback(() => {
-        if (overlayIdRef.current) {
-            closeOverlay(overlayIdRef.current);
-            overlayIdRef.current = null;
-        }
-    }, [closeOverlay]);
-    useEffect(() => {
-        if (withinPortal) {
-            if (isOpened)
-                openPortal();
-            else
-                closePortal();
-        }
-        return () => { if (!isOpened)
-            closePortal(); };
-    }, [isOpened, withinPortal, openPortal, closePortal]);
-    useEffect(() => {
-        if (!withinPortal || Platform.OS !== 'web' || !isOpened || !overlayIdRef.current)
-            return;
-        const handler = () => {
-            Promise.all([measureElement(targetRef)]).then(([rect]) => {
-                var _a, _b;
-                const actualWidth = ((_a = overlayContentRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || width || 240;
-                const actualHeight = ((_b = overlayContentRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 160;
-                const pos = calculateOverlayPositionEnhanced(rect, { width: actualWidth, height: actualHeight }, {
-                    placement: position,
-                    offset,
-                    viewport: getViewport(),
-                    strategy: 'fixed'
-                });
-                updateOverlay(overlayIdRef.current, { anchor: { x: pos.x, y: pos.y, width: actualWidth, height: actualHeight } });
-            });
-        };
-        window.addEventListener('resize', handler);
-        window.addEventListener('scroll', handler, true);
-        return () => {
-            window.removeEventListener('resize', handler);
-            window.removeEventListener('scroll', handler, true);
-        };
-    }, [withinPortal, isOpened, position, offset, width, updateOverlay]);
-    // Smart sizing: after content mounts, measure actual size and reposition if changed
-    useEffect(() => {
-        if (!withinPortal || !isOpened || !overlayIdRef.current)
-            return;
-        let frame;
-        const attempt = () => {
-            Promise.all([
-                measureElement(targetRef),
-                measureElement({ current: overlayContentRef.current })
-            ]).then(([targetRect, contentRect]) => {
-                if (!targetRect.width || !contentRect.width)
-                    return; // skip invalid
-                const desiredWidth = width || contentRect.width;
-                const desiredHeight = contentRect.height;
-                // Recalculate with actual content size
-                const pos = calculateOverlayPositionEnhanced(targetRect, { width: desiredWidth, height: desiredHeight }, {
-                    placement: position,
-                    offset,
-                    viewport: getViewport(),
-                    strategy: 'fixed'
-                });
-                updateOverlay(overlayIdRef.current, { anchor: { x: pos.x, y: pos.y, width: desiredWidth, height: desiredHeight } });
-            });
-        };
-        // Delay a bit to allow layout
-        frame = setTimeout(attempt, 30);
-        return () => { if (frame)
-            clearTimeout(frame); };
-    }, [withinPortal, isOpened, position, offset, width, updateOverlay]);
-    const targetProps = {};
-    if (trigger === 'hover') {
-        if (Platform.OS === 'web') {
-            targetProps.onMouseEnter = () => { isHoveringTargetRef.current = true; scheduleOpen(); };
-            targetProps.onMouseLeave = () => { isHoveringTargetRef.current = false; scheduleClose(); };
-        }
-        else {
-            // fallback: tap to toggle on native
-            targetProps.onPress = () => {
-                if (isOpened) {
-                    doClose();
-                }
-                else {
-                    doOpen();
-                }
-            };
-        }
-    }
-    else if (trigger === 'click') {
-        targetProps.onPress = () => {
-            if (isOpened) {
-                doClose();
-            }
-            else {
-                doOpen();
-            }
-        };
-    }
-    const inlineContent = (isOpened || keepMounted) && !withinPortal ? (jsxs(View, { style: [
-            getInlinePositionStyle(),
-            {
-                backgroundColor: theme.colors.gray[0],
-                borderRadius: getRadius$2(radius),
-                paddingHorizontal: getSpacing('md'),
-                paddingVertical: getSpacing('sm'),
-                borderWidth: 1,
-                borderColor: theme.colors.gray[3],
-                minWidth: width,
-                zIndex,
-            },
-            shadowStyle,
-        ], pointerEvents: "auto", ...(Platform.OS === 'web' && trigger === 'hover' ? {
-            onMouseEnter: () => { isHoveringOverlayRef.current = true; clearTimers(); },
-            onMouseLeave: () => { isHoveringOverlayRef.current = false; scheduleClose(); },
-        } : {}), children: [children, renderArrow(position)] })) : null;
-    return (jsxs(View, { ref: ref, style: [{ position: 'relative', alignSelf: 'flex-start' }, style], testID: testID, children: [jsx(Pressable, { ref: (node) => { containerRef.current = node; targetRef.current = node; }, ...targetProps, style: ({ pressed }) => {
-                    var _a;
-                    return [
-                        { opacity: pressed ? 0.85 : 1 },
-                        (_a = target === null || target === void 0 ? void 0 : target.props) === null || _a === void 0 ? void 0 : _a.style,
-                    ];
-                }, children: target }), inlineContent] }));
-}
-const HoverCard = factory(HoverCardBase);
-HoverCard.displayName = 'HoverCard';
-
 const ContextMenu = ({ children, items, closeOnSelect = true, longPressDelay = 350, maxHeight = 280, onOpen, onClose, open: controlledOpen, position: controlledPosition, portalId, style, }) => {
     var _a, _b;
     const [internalOpen, setInternalOpen] = useState(false);
@@ -36522,7 +35571,7 @@ const styles$6 = StyleSheet.create({
     },
 });
 
-const WaveformSkeleton = ({ width = 300, height = 60, fullWidth = false, barsCount = 20, }) => {
+const WaveformSkeleton = ({ w = 300, h = 60, fullWidth = false, barsCount = 20, }) => {
     const theme = useTheme();
     const styles = StyleSheet.create({
         animatedBar: {
@@ -36538,18 +35587,18 @@ const WaveformSkeleton = ({ width = 300, height = 60, fullWidth = false, barsCou
             backgroundColor: theme.colors.gray[1],
             borderRadius: 4,
             flexDirection: 'row',
-            height,
+            height: h,
             justifyContent: 'space-between',
             paddingHorizontal: 4,
-            width: fullWidth ? '100%' : width,
+            width: fullWidth ? '100%' : w,
         },
     });
     // Generate random heights for skeleton bars
     const barHeights = Array.from({ length: barsCount }, () => Math.random() * 0.6 + 0.2 // Heights between 20% and 80% of container
     );
-    const barWidth = fullWidth ? 'auto' : Math.max(1, (width - 40) / barsCount - 2);
+    const barWidth = fullWidth ? 'auto' : Math.max(1, (w - 40) / barsCount - 2);
     return (jsx(View, { style: styles.container, children: barHeights.map((heightRatio, index) => {
-            const barHeight = height * heightRatio;
+            const barHeight = h * heightRatio;
             const isAnimated = index % 3 === 0; // Animate every 3rd bar for shimmer effect
             return (jsx(View, { style: [
                     styles.bar,
@@ -36564,7 +35613,7 @@ const WaveformSkeleton = ({ width = 300, height = 60, fullWidth = false, barsCou
         }) }));
 };
 
-const Waveform = React__default.memo(({ peaks, width = 300, height = 60, color = 'primary', barWidth = 2, barGap = 1, strokeWidth = 2, minBarHeight = 1, variant = 'bars', gradientColors, progress = 0, progressColor, interactive = false, normalize = false, fullWidth = false, onSeek, onDragStart, onDrag, onDragEnd, accessibilityLabel, accessibilityHint, style, maxVisibleBars, showProgressLine = false, progressLineStyle, showTimeStamps = false, duration, timeStampInterval, 
+const Waveform = React__default.memo(({ peaks, w = 300, h = 60, color = 'primary', barWidth = 2, barGap = 1, strokeWidth = 2, minBarHeight = 1, variant = 'bars', gradientColors, progress = 0, progressColor, interactive = false, normalize = false, fullWidth = false, onSeek, onDragStart, onDrag, onDragEnd, accessibilityLabel, accessibilityHint, style, maxVisibleBars, showProgressLine = false, progressLineStyle, showTimeStamps = false, duration, timeStampInterval, 
 // New features
 loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel = 1, zoomCenter = 0.5, onZoomChange, enableAnimations = true, showRMS = false, rmsData, markers = [], enablePerformanceMonitoring = false, onPerformanceMetrics, ...restProps }) => {
     const theme = useTheme();
@@ -36651,12 +35700,12 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             targetBars = maxVisibleBars || peaks.length;
         }
         else {
-            // For fixed width, calculate how many bars fit
-            const maxBars = Math.floor(width / totalBarSpace);
+            // For fixed w, calculate how many bars fit
+            const maxBars = Math.floor(w / totalBarSpace);
             targetBars = maxVisibleBars ? Math.min(maxBars, maxVisibleBars) : maxBars;
         }
         if (targetBars <= 0) {
-            console.warn('Waveform: Not enough width to render any bars');
+            console.warn('Waveform: Not enough w to render any bars');
             return [];
         }
         // If we have fewer peaks than target bars, return all peaks
@@ -36679,7 +35728,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             downsampled.push(maxValue);
         }
         return downsampled;
-    }, [peaks, width, barWidth, barGap, fullWidth, maxVisibleBars]);
+    }, [peaks, w, barWidth, barGap, fullWidth, maxVisibleBars]);
     // Normalize peaks if requested
     const normalizedPeaks = useMemo(() => {
         if (!normalize || processedPeaks.length === 0) {
@@ -36702,16 +35751,16 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         if (fullWidth) {
             return {
                 width: '100%',
-                height: height,
-                viewBox: `0 0 ${actualWaveformWidth} ${height}`,
+                height: h,
+                viewBox: `0 0 ${actualWaveformWidth} ${h}`,
                 preserveAspectRatio: 'none'
             };
         }
         return {
-            width: width,
-            height: height
+            width: w,
+            height: h
         };
-    }, [fullWidth, actualWaveformWidth, height, width]);
+    }, [fullWidth, actualWaveformWidth, h, w]);
     const handleLayout = useCallback((event) => {
         const { width: containerWidth, height: containerHeight } = event.nativeEvent.layout;
         setContainerDimensions({ width: containerWidth, height: containerHeight });
@@ -36726,7 +35775,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             }
             else {
                 // Fallback if container hasn't been measured yet
-                position = locationX / (width || 300);
+                position = locationX / (w || 300);
             }
         }
         else {
@@ -36734,7 +35783,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             position = Math.min(locationX, actualWaveformWidth) / actualWaveformWidth;
         }
         return Math.max(0, Math.min(1, position));
-    }, [fullWidth, containerDimensions.width, width, actualWaveformWidth]);
+    }, [fullWidth, containerDimensions.width, w, actualWaveformWidth]);
     const handleResponderGrant = useCallback((event) => {
         var _a, _b, _c;
         if (!interactive)
@@ -36821,8 +35870,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
     const renderBars = () => {
         return normalizedPeaks.map((peak, index) => {
             const x = index * (barWidth + barGap);
-            const barHeight = Math.max(minBarHeight, Math.abs(peak) * height * 0.8);
-            const y = (height - barHeight) / 2;
+            const barHeight = Math.max(minBarHeight, Math.abs(peak) * h * 0.8);
+            const y = (h - barHeight) / 2;
             const isProgress = x < progressX;
             const fillColor = isProgress ? actualProgressColor : waveformColor;
             return (jsx(Rect, { x: x, y: y, width: barWidth, height: barHeight, fill: fillColor, rx: variant === 'rounded' ? barWidth / 2 : 0 }, index));
@@ -36836,7 +35885,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         const stepX = actualWaveformWidth / (normalizedPeaks.length - 1);
         normalizedPeaks.forEach((peak, index) => {
             const x = index * stepX;
-            const y = height / 2 + (peak * height * 0.4);
+            const y = h / 2 + (peak * h * 0.4);
             const lineCommand = index === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`;
             pathData += lineCommand;
             // Build progress path up to the progress position
@@ -36850,8 +35899,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
     const renderGradient = () => {
         return (jsxs(Fragment, { children: [jsx(Defs, { children: jsx(LinearGradient, { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: resolvedGradientColors.map((color, index) => (jsx(Stop, { offset: `${(index / (resolvedGradientColors.length - 1 || 1)) * 100}%`, stopColor: color }, index))) }) }), normalizedPeaks.map((peak, index) => {
                     const x = index * (barWidth + barGap);
-                    const barHeight = Math.max(minBarHeight, Math.abs(peak) * height * 0.8);
-                    const y = (height - barHeight) / 2;
+                    const barHeight = Math.max(minBarHeight, Math.abs(peak) * h * 0.8);
+                    const y = (h - barHeight) / 2;
                     return (jsx(Rect, { x: x, y: y, width: barWidth, height: barHeight, fill: `url(#${gradientId})` }, index));
                 })] }));
     };
@@ -36861,8 +35910,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             return null;
         const clampedProgress = Math.max(0, Math.min(1, progress));
         const progressX = clampedProgress * actualWaveformWidth;
-        return (jsx(Line, { x1: progressX, y1: 0, x2: progressX, y2: height, stroke: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.color) || theme.colors.gray[7], strokeWidth: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.width) || 2, strokeOpacity: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.opacity) || 0.8 }));
-    }, [showProgressLine, progress, actualWaveformWidth, height, progressLineStyle, theme.colors.gray]);
+        return (jsx(Line, { x1: progressX, y1: 0, x2: progressX, y2: h, stroke: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.color) || theme.colors.gray[7], strokeWidth: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.width) || 2, strokeOpacity: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.opacity) || 0.8 }));
+    }, [showProgressLine, progress, actualWaveformWidth, h, progressLineStyle, theme.colors.gray]);
     // Timestamp markers component
     const TimeStamps = useMemo(() => {
         if (!showTimeStamps || !duration || !timeStampInterval)
@@ -36883,10 +35932,10 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 }
                 return `${mins}:${secs.toString().padStart(2, '0')}`;
             };
-            timestamps.push(jsxs(G, { children: [jsx(Line, { x1: x, y1: height - 10, x2: x, y2: height, stroke: theme.colors.gray[5], strokeWidth: 1, strokeOpacity: 0.6 }), jsx(Text$2, { x: x, y: height + 15, fill: theme.colors.gray[6], fontSize: 10, textAnchor: "middle", opacity: 0.8, children: formatTime(time) })] }, i));
+            timestamps.push(jsxs(G, { children: [jsx(Line, { x1: x, y1: h - 10, x2: x, y2: h, stroke: theme.colors.gray[5], strokeWidth: 1, strokeOpacity: 0.6 }), jsx(Text$2, { x: x, y: h + 15, fill: theme.colors.gray[6], fontSize: 10, textAnchor: "middle", opacity: 0.8, children: formatTime(time) })] }, i));
         }
         return jsx(G, { children: timestamps });
-    }, [showTimeStamps, duration, timeStampInterval, actualWaveformWidth, height, theme.colors]);
+    }, [showTimeStamps, duration, timeStampInterval, actualWaveformWidth, h, theme.colors]);
     // Selection overlay component
     const SelectionOverlay = useMemo(() => {
         if (!selection || selection[0] === selection[1])
@@ -36895,8 +35944,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         const startX = start * actualWaveformWidth;
         const endX = end * actualWaveformWidth;
         const selectionWidth = endX - startX;
-        return (jsx(Rect, { x: startX, y: 0, width: selectionWidth, height: height, fill: theme.colors.primary[3], opacity: 0.3, stroke: theme.colors.primary[5], strokeWidth: 1, strokeOpacity: 0.8 }));
-    }, [selection, actualWaveformWidth, height, theme.colors.primary]);
+        return (jsx(Rect, { x: startX, y: 0, width: selectionWidth, height: h, fill: theme.colors.primary[3], opacity: 0.3, stroke: theme.colors.primary[5], strokeWidth: 1, strokeOpacity: 0.8 }));
+    }, [selection, actualWaveformWidth, h, theme.colors.primary]);
     // Markers component
     const Markers = useMemo(() => {
         if (!markers || markers.length === 0)
@@ -36906,16 +35955,16 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 const markerColor = marker.color || theme.colors.warning[5];
                 switch (marker.type || 'line') {
                     case 'line':
-                        return (jsxs(G, { children: [jsx(Line, { x1: x, y1: 0, x2: x, y2: height, stroke: markerColor, strokeWidth: 2, strokeOpacity: 0.8 }), marker.label && (jsx(Text$2, { x: x, y: -5, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxs(G, { children: [jsx(Line, { x1: x, y1: 0, x2: x, y2: h, stroke: markerColor, strokeWidth: 2, strokeOpacity: 0.8 }), marker.label && (jsx(Text$2, { x: x, y: -5, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
                     case 'flag':
-                        return (jsxs(G, { children: [jsx(Line, { x1: x, y1: 0, x2: x, y2: height, stroke: markerColor, strokeWidth: 1, strokeOpacity: 0.6 }), jsx(Rect, { x: x + 2, y: 2, width: marker.label ? marker.label.length * 6 + 4 : 20, height: 14, fill: markerColor, rx: 2 }), marker.label && (jsx(Text$2, { x: x + 4, y: 12, fill: "white", fontSize: 9, fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxs(G, { children: [jsx(Line, { x1: x, y1: 0, x2: x, y2: h, stroke: markerColor, strokeWidth: 1, strokeOpacity: 0.6 }), jsx(Rect, { x: x + 2, y: 2, width: marker.label ? marker.label.length * 6 + 4 : 20, height: 14, fill: markerColor, rx: 2 }), marker.label && (jsx(Text$2, { x: x + 4, y: 12, fill: "white", fontSize: 9, fontWeight: "bold", children: marker.label }))] }, index));
                     case 'dot':
-                        return (jsxs(G, { children: [jsx("circle", { cx: x, cy: height / 2, r: 4, fill: markerColor, stroke: "white", strokeWidth: 1 }), marker.label && (jsx(Text$2, { x: x, y: height / 2 + 20, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxs(G, { children: [jsx("circle", { cx: x, cy: h / 2, r: 4, fill: markerColor, stroke: "white", strokeWidth: 1 }), marker.label && (jsx(Text$2, { x: x, y: h / 2 + 20, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
                     default:
                         return null;
                 }
             }) }));
-    }, [markers, actualWaveformWidth, height, theme.colors.warning]);
+    }, [markers, actualWaveformWidth, h, theme.colors.warning]);
     // RMS visualization component
     const RMSBars = useMemo(() => {
         if (!showRMS || !rmsData || rmsData.length === 0)
@@ -36923,11 +35972,11 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         const processedRMS = rmsData.slice(0, normalizedPeaks.length);
         return (jsx(G, { opacity: 0.5, children: processedRMS.map((rms, index) => {
                 const x = index * (barWidth + barGap);
-                const rmsHeight = Math.max(minBarHeight, Math.abs(rms) * height * 0.4); // RMS bars are shorter
-                const y = (height - rmsHeight) / 2;
+                const rmsHeight = Math.max(minBarHeight, Math.abs(rms) * h * 0.4); // RMS bars are shorter
+                const y = (h - rmsHeight) / 2;
                 return (jsx(Rect, { x: x, y: y, width: barWidth, height: rmsHeight, fill: theme.colors.gray[4], rx: variant === 'rounded' ? barWidth / 2 : 0 }, `rms-${index}`));
             }) }));
-    }, [showRMS, rmsData, normalizedPeaks, barWidth, barGap, minBarHeight, height, variant, theme.colors.gray]);
+    }, [showRMS, rmsData, normalizedPeaks, barWidth, barGap, minBarHeight, h, variant, theme.colors.gray]);
     const renderWaveform = () => {
         switch (variant) {
             case 'line':
@@ -36964,17 +36013,17 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         };
     // Early return for empty state
     if (normalizedPeaks.length === 0) {
-        return (jsx(View, { style: [style, fullWidth ? { width: '100%' } : { width }, { height, justifyContent: 'center', alignItems: 'center' }], accessibilityRole: "image", accessibilityLabel: accessibilityLabel || 'Empty waveform', ...restProps, children: jsx(Svg, { ...svgProps, children: jsx(Rect, { x: 0, y: height / 2 - 1, width: fullWidth ? '100%' : width, height: 2, fill: waveformColor, opacity: 0.3 }) }) }));
+        return (jsx(View, { style: [style, fullWidth ? { width: '100%' } : { width: w }, { height: h, justifyContent: 'center', alignItems: 'center' }], accessibilityRole: "image", accessibilityLabel: accessibilityLabel || 'Empty waveform', ...restProps, children: jsx(Svg, { ...svgProps, children: jsx(Rect, { x: 0, y: h / 2 - 1, width: fullWidth ? '100%' : w, height: 2, fill: waveformColor, opacity: 0.3 }) }) }));
     }
     if (loading) {
-        return (jsx(WaveformSkeleton, { width: width, height: height, fullWidth: fullWidth, barsCount: maxVisibleBars || 20 }));
+        return (jsx(WaveformSkeleton, { w: w, h: h, fullWidth: fullWidth, barsCount: maxVisibleBars || 20 }));
     }
     if (error) {
         return (jsx(View, { style: [
                 style,
-                fullWidth ? { width: '100%' } : { width },
+                fullWidth ? { width: '100%' } : { width: w },
                 {
-                    height,
+                    height: h,
                     justifyContent: 'center',
                     alignItems: 'center',
                     backgroundColor: theme.colors.error[1],
@@ -36984,7 +36033,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 }
             ], accessibilityRole: "alert", accessibilityLabel: `Waveform error: ${error}`, ...restProps, children: jsx(Text$1, { style: { color: theme.colors.error[7], fontSize: 12, textAlign: 'center' }, children: error }) }));
     }
-    return (jsx(WrapperComponent, { ref: containerRef, style: [style, fullWidth ? { width: '100%' } : { width }], accessible: true, focusable: interactive, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...wrapperProps, ...restProps, children: jsxs(Svg, { ...svgProps, children: [SelectionOverlay, RMSBars, renderWaveform(), ProgressLine, TimeStamps, Markers] }) }));
+    return (jsx(WrapperComponent, { ref: containerRef, style: [style, fullWidth ? { width: '100%' } : { width: w }], accessible: true, focusable: interactive, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...wrapperProps, ...restProps, children: jsxs(Svg, { ...svgProps, children: [SelectionOverlay, RMSBars, renderWaveform(), ProgressLine, TimeStamps, Markers] }) }));
 });
 Waveform.displayName = 'Waveform';
 
@@ -37006,7 +36055,7 @@ const AudioPlayer = forwardRef(({ source, peaks: providedPeaks, autoPlay = false
     channel: 'mix',
 }, showTime = true, timeFormat = 'mm:ss', showMetadata = false, metadata, showSpectrum = false, spectrumOptions, enableKeyboardShortcuts = true, enableGestures = true, onLoad, onPlaybackStateChange, onProgress, onEnd, onError, onBuffer, 
 // Waveform props
-width = 300, height = 60, color = 'primary', interactive = true, onSeek, style, ...waveformProps }, ref) => {
+w = 300, h = 60, color = 'primary', interactive = true, onSeek, style, ...waveformProps }, ref) => {
     const theme = useTheme();
     const { playSound } = useSound();
     // Refs
@@ -37353,7 +36402,7 @@ width = 300, height = 60, color = 'primary', interactive = true, onSeek, style,
                         alignSelf: 'flex-start',
                     }, children: jsx(Text$1, { style: { color: 'white', fontSize: DESIGN_TOKENS.typography.fontSize.sm }, children: "Retry" }) }))] }));
     }
-    return (jsxs(View, { style: [{ width: '100%' }, style], children: [controlsPosition === 'top' && renderMetadata(), controlsPosition === 'top' && renderControls(), controls.waveform && peaks.length > 0 && (jsx(View, { style: { marginVertical: DESIGN_TOKENS.spacing.sm }, children: jsx(Waveform, { peaks: peaks, width: width, height: height, color: color, progress: progress, interactive: interactive, onSeek: handleWaveformSeek, showProgressLine: true, progressLineStyle: {
+    return (jsxs(View, { style: [{ width: '100%' }, style], children: [controlsPosition === 'top' && renderMetadata(), controlsPosition === 'top' && renderControls(), controls.waveform && peaks.length > 0 && (jsx(View, { style: { marginVertical: DESIGN_TOKENS.spacing.sm }, children: jsx(Waveform, { peaks: peaks, w: w, h: h, color: color, progress: progress, interactive: interactive, onSeek: handleWaveformSeek, showProgressLine: true, progressLineStyle: {
                         color: theme.colors.primary[5],
                         width: 2,
                         opacity: 0.8,
@@ -38082,14 +37131,14 @@ const IMAGE_SIZES = {
     '2xl': 80,
     '3xl': 96,
 };
-function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', size, width, height, aspectRatio, borderWidth, borderColor, rounded, circle, fallback, loading, onLoad, onError, onLoadStart, onLoadEnd, containerStyle, imageStyle, testID, style, ...rest }) {
+function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', size, w, h, aspectRatio, borderWidth, borderColor, rounded, circle, fallback, loading, onLoad, onError, onLoadStart, onLoadEnd, containerStyle, imageStyle, testID, style, ...rest }) {
     const theme = useTheme();
     const [loadError, setLoadError] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
     const { spacingProps } = extractSpacingProps(rest);
     // Determine dimensions
-    let finalWidth = width;
-    let finalHeight = height;
+    let finalWidth = w;
+    let finalHeight = h;
     if (size && typeof size === 'string' && IMAGE_SIZES[size]) {
         finalWidth = finalWidth || IMAGE_SIZES[size];
         finalHeight = finalHeight || IMAGE_SIZES[size];
@@ -39874,11 +38923,14 @@ QRCodeSVG.displayName = 'QRCodeSVG';
  */
 function QRCode(props) {
     var _a;
+    const theme = useTheme();
     const { spacingProps, otherProps: propsAfterSpacing } = extractSpacingProps(props);
     const { layoutProps, otherProps } = extractLayoutProps(propsAfterSpacing);
-    const { value, size = 400, backgroundColor = 'transparent', color = '#000000', errorCorrectionLevel = 'M', quietZone = 4, logo, style, testID, accessibilityLabel, onError, onLoadStart, // deprecated noop
+    const { value, size = 400, backgroundColor = 'transparent', color, errorCorrectionLevel = 'M', quietZone = 4, logo, style, testID, accessibilityLabel, onError, onLoadStart, // deprecated noop
     onLoadEnd, // deprecated noop
     ...rest } = otherProps;
+    // Default color to theme's primary text color for dark mode support
+    const resolvedColor = color !== null && color !== void 0 ? color : theme.text.primary;
     const { copy } = useClipboard();
     const toast = useToast();
     const shouldCopyOnPress = !!otherProps.copyOnPress;
@@ -39894,7 +38946,7 @@ function QRCode(props) {
             });
         }
     }, [copy, copyValue, toast, otherProps.copyToastMessage, otherProps.copyToastTitle]);
-    const content = (jsxs(View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsx(QRCodeSVG, { value: value, size: size, maxWidth: '100%', backgroundColor: backgroundColor, color: color, errorCorrectionLevel: errorCorrectionLevel, quietZone: quietZone, logo: logo, style: style, testID: testID, accessibilityLabel: accessibilityLabel, onError: onError, ...spacingProps, ...layoutProps, ...rest }), otherProps.showCopyButton && (jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
+    const content = (jsxs(View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsx(QRCodeSVG, { value: value, size: size, maxW: '100%', backgroundColor: backgroundColor, color: resolvedColor, errorCorrectionLevel: errorCorrectionLevel, quietZone: quietZone, logo: logo, style: style, testID: testID, accessibilityLabel: accessibilityLabel, onError: onError, ...spacingProps, ...layoutProps, ...rest }), otherProps.showCopyButton && (jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
     if (shouldCopyOnPress) {
         return (jsx(Pressable, { onPress: handleCopy, accessibilityLabel: accessibilityLabel || 'QR code', children: content }));
     }
@@ -40544,111 +39596,6 @@ const styles$2 = StyleSheet.create({
     },
 });
 
-// Optional imports for web compatibility
-const LottieReact = Platform.OS === 'web'
-    ? resolveOptionalModule('lottie-react', {
-        accessor: mod => { var _a; return (_a = mod.default) !== null && _a !== void 0 ? _a : mod; },
-    })
-    : null;
-const DotLottieReact = Platform.OS === 'web'
-    ? resolveOptionalModule('@lottiefiles/dotlottie-react', {
-        accessor: mod => mod.DotLottieReact,
-    })
-    : null;
-let cachedNativeStatus = null;
-let nativeLottieComponent;
-let nativeModuleLoadWarningLogged = false;
-let nativeModuleConfigWarningLogged = false;
-const loadNativeLottieComponent = () => {
-    if (nativeLottieComponent !== undefined) {
-        return nativeLottieComponent;
-    }
-    const module = resolveOptionalModule('lottie-react-native', {
-        accessor: mod => { var _a; return (_a = mod === null || mod === void 0 ? void 0 : mod.default) !== null && _a !== void 0 ? _a : mod; },
-    });
-    if (!module && !nativeModuleLoadWarningLogged && __DEV__) {
-        console.warn('[Lottie] Failed to load lottie-react-native module. Rendering fallback instead.');
-        nativeModuleLoadWarningLogged = true;
-    }
-    nativeLottieComponent = module !== null && module !== void 0 ? module : null;
-    return nativeLottieComponent;
-};
-const getNativeLottieStatus = () => {
-    var _a, _b, _c;
-    if (cachedNativeStatus) {
-        return cachedNativeStatus;
-    }
-    if (Platform.OS === 'web') {
-        cachedNativeStatus = { component: null, available: false };
-        return cachedNativeStatus;
-    }
-    const component = loadNativeLottieComponent();
-    if (!component) {
-        cachedNativeStatus = { component: null, available: false };
-        return cachedNativeStatus;
-    }
-    let viewManagerAvailable = false;
-    try {
-        const viewManager = (_c = (_b = (_a = UIManager === null || UIManager === void 0 ? void 0 : UIManager.getViewManagerConfig) === null || _a === void 0 ? void 0 : _a.call(UIManager, 'LottieAnimationView')) !== null && _b !== void 0 ? _b : UIManager === null || UIManager === void 0 ? void 0 : UIManager.LottieAnimationView) !== null && _c !== void 0 ? _c : NativeModules === null || NativeModules === void 0 ? void 0 : NativeModules.LottieAnimationView;
-        viewManagerAvailable = !!viewManager;
-    }
-    catch (error) {
-        viewManagerAvailable = false;
-    }
-    if (!viewManagerAvailable && !nativeModuleConfigWarningLogged && __DEV__) {
-        console.warn('[Lottie] Native LottieAnimationView is unavailable. Run `npx expo install lottie-react-native` and rebuild to enable animations.');
-        nativeModuleConfigWarningLogged = true;
-    }
-    cachedNativeStatus = {
-        component,
-        available: viewManagerAvailable,
-    };
-    return cachedNativeStatus;
-};
-/**
- * Lottie component with safe fallback when native module not present or on unsupported platforms.
- */
-const Lottie = forwardRef(function LottieCmp(props, ref) {
-    const { source, autoPlay = true, loop = true, progress, speed = 1, style, testID, paused, resizeMode = 'contain', onAnimationFinish } = props;
-    const internalRef = useRef(null);
-    const nativeStatus = getNativeLottieStatus();
-    const NativeLottieView = nativeStatus.component;
-    useImperativeHandle(ref, () => ({
-        play: (...args) => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.play) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
-        pause: () => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.pause) === null || _b === void 0 ? void 0 : _b.call(_a); },
-        reset: () => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.reset) === null || _b === void 0 ? void 0 : _b.call(_a); },
-        setProgress: (p) => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.setProgress) === null || _b === void 0 ? void 0 : _b.call(_a, p); },
-    }), []);
-    useEffect(() => {
-        var _a;
-        if (progress != null && ((_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.setProgress)) {
-            internalRef.current.setProgress(progress);
-        }
-    }, [progress]);
-    // Web implementation
-    if (Platform.OS === 'web') {
-        // Check if source is a string (URL) and ends with .lottie
-        const isLottieFile = typeof source === 'string' && source.endsWith('.lottie');
-        if (isLottieFile && DotLottieReact) {
-            // Use DotLottieReact for .lottie files
-            return (jsx(DotLottieReact, { src: source, autoplay: autoPlay, loop: loop, speed: speed, style: style, "data-testid": testID }));
-        }
-        else if (LottieReact) {
-            // Use lottie-react for standard Lottie JSON
-            return (jsx(LottieReact, { animationData: source, autoplay: autoPlay, loop: loop, style: style, "data-testid": testID }));
-        }
-        else {
-            return jsx(Text, { children: "Lottie not available on web" });
-        }
-    }
-    // Native implementation using lottie-react-native
-    if (!nativeStatus.available || !NativeLottieView) {
-        return (jsx(View, { style: [{ justifyContent: 'center', alignItems: 'center' }, style], testID: testID, children: jsx(Text, { style: { textAlign: 'center', opacity: 0.7 }, children: "Lottie animations require the native `lottie-react-native` module. Install it and rebuild the app, or view this example on the web." }) }));
-    }
-    return (jsx(NativeLottieView, { ref: internalRef, source: source, autoPlay: autoPlay, loop: loop, speed: speed, progress: progress, style: style, testID: testID, resizeMode: resizeMode, onAnimationFinish: onAnimationFinish, ...(paused != null ? { paused } : {}) }));
-});
-Lottie.displayName = 'Lottie';
-
 const PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
 function formatTime(seconds) {
     const hours = Math.floor(seconds / 3600);
@@ -41596,7 +40543,7 @@ const DEFAULT_CONTROLS = {
     autoHide: true,
     autoHideTimeout: 3000,
 };
-const Video = forwardRef(({ source, width, height, aspectRatio = 16 / 9, poster, autoPlay = false, loop = false, muted = false, volume = 1, playbackRate = 1, quality = 'auto', controls = true, timeline = [], youtubeOptions, onPlay, onPause, onSeek, onTimeUpdate, onDurationChange, onVolumeChange, onPlaybackRateChange, onQualityChange, onFullscreenChange, onError, onLoad, onLoadStart, onBuffer, onTimelineEvent, style, videoStyle, controlsStyle, accessibilityLabel, testID, ...rest }, ref) => {
+const Video = forwardRef(({ source, w, h, aspectRatio = 16 / 9, poster, autoPlay = false, loop = false, muted = false, volume = 1, playbackRate = 1, quality = 'auto', controls = true, timeline = [], youtubeOptions, onPlay, onPause, onSeek, onTimeUpdate, onDurationChange, onVolumeChange, onPlaybackRateChange, onQualityChange, onFullscreenChange, onError, onLoad, onLoadStart, onBuffer, onTimelineEvent, style, videoStyle, controlsStyle, accessibilityLabel, testID, ...rest }, ref) => {
     const theme = useTheme();
     const { spacingProps } = extractSpacingProps(rest);
     // Internal state
@@ -41846,24 +40793,24 @@ const Video = forwardRef(({ source, width, height, aspectRatio = 16 / 9, poster,
             // overflow: 'hidden',
             // position: 'relative',
         };
-        if (width && height) {
-            baseStyle.width = width;
-            baseStyle.height = height;
+        if (w && h) {
+            baseStyle.width = w;
+            baseStyle.height = h;
         }
-        else if (width) {
-            baseStyle.width = width;
-            baseStyle.height = typeof width === 'number' ? width / aspectRatio : '100%';
+        else if (w) {
+            baseStyle.width = w;
+            baseStyle.height = typeof w === 'number' ? w / aspectRatio : '100%';
         }
-        else if (height) {
-            baseStyle.height = height;
-            baseStyle.width = typeof height === 'number' ? height * aspectRatio : '100%';
+        else if (h) {
+            baseStyle.height = h;
+            baseStyle.width = typeof h === 'number' ? h * aspectRatio : '100%';
         }
         else {
             baseStyle.width = '100%';
             baseStyle.aspectRatio = aspectRatio;
         }
         return baseStyle;
-    }, [theme.colors.surface, width, height, aspectRatio]);
+    }, [theme.colors.surface, w, h, aspectRatio]);
     // Handle touch events for control visibility
     const handleContainerPress = useCallback(() => {
         if (controlsConfig && controlsConfig.autoHide) {
@@ -41967,5 +40914,5 @@ function withPressAnimation(Component, animationProps) {
  */
 const AnimatedPressable = PressAnimation;
 
-export { AbilityCore, AccessibilityProvider, Accordion, AmazonAppstoreBadge, AmazonAppstoreButton, AmazonMusicListenBadge, AmazonPrimeVideoBadge, AmazonStoreBadge, AnimatedPressable, AppLayoutProvider, AppLayoutRenderer, AppShell, AppShellAside, AppShellBottomNav, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AppStoreBadge, AppStoreButton, AppStoreDownloadBadge, AppleAppStoreButton, AppleMusicListenBadge, ApplePodcastsListenBadge, AutoComplete, Avatar, AvatarGroup, Badge, Block, Blockquote, Bold, BottomAppBar, BrandButton, BrandIcon, Breadcrumbs, Button, COMPONENT_SIZES$1 as COMPONENT_SIZES, COMPONENT_SIZE_ORDER, Calendar, Can, CanWithConditions, Cannot, Card, Carousel, Checkbox, Chip, ChromeWebStoreBadge, Cite, Code, CodeBlock, Collapse, ColorPicker, ColorSwatch, Column, ComponentWithDisclaimer, ContextMenu, CopyButton, DARK_THEME, DEFAULT_BREAKPOINTS, DEFAULT_COMPONENT_SIZE, DEFAULT_SOUND_IDS, DEFAULT_THEME, DataTable, DatePicker, DatePickerInput, Day, Dialog, DialogProvider, DialogRenderer, DirectionProvider, Disclaimer, DiscordJoinBadge, Divider, EmojiPicker, Emphasis, FDroidButton, FileInput, Flex, FloatingActions, Form, GalaxyStoreDownloadBadge, Gallery, Gauge, GitHubViewBadge, GooglePlayButton, GooglePlayDownloadBadge, Grid, GridItem, H1, H2, H3, H4, H5, H6, HapticsProvider, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlight, HoverCard, HuaweiAppGalleryBadge, I18nProvider, Icon, IconButton, Image, Indicator, Input, Italic, Kbd, KeyCap, KeyboardAwareLayout, KeyboardManagerProvider, Knob, Link, ListGroup, ListGroupBody, ListGroupDivider, ListGroupItem, Loader, LoadingOverlay, Lottie, MacAppStoreButton, Mark, Markdown, Masonry, Menu, MenuDivider, MenuDropdown, MenuItem, MenuItemButton, MenuLabel, MicrosoftStoreButton, MicrosoftStoreDownloadBadge, MiniCalendar, Month, MonthPicker, MonthPickerInput, NavigationProgress, Notice, NumberInput, Overlay, OverlayProvider, P, Pagination, PasswordInput, PermissionBuilder, PermissionGate, PermissionPatterns, PermissionProvider, PhoneInput, PinInput, PlatformBlocksProvider, Popover, PressAnimation, Progress, QRCode, Radio, RadioGroup, RangeSlider, Rating, RedditJoinBadge, RichTextEditor, Ring, RoleBuilder, Row, SIZE_SCALES, Search, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Small, SoundCloudListenBadge, SoundProvider, Space, Spoiler, SpotifyListenBadge, Spotlight, SpotlightProvider, StatusBarManager, StepperWithSubComponents as Stepper, Strong, Sub, Sup, Switch, Table, TableOfContents, Tabs, Text, TextArea, TextInputBase, ThemeModeProvider, TikTokWatchBadge, TimePickerInput as TimePicker, TimePickerInput, TimelineWithItems as Timeline, Title, TitleRegistryProvider, Toast, ToastProvider, ToggleBar, ToggleButton, ToggleGroup, Tooltip, Tree, TwitchWatchBadge, Underline, Video, Waveform, YearPicker, YearPickerInput, YouTubeMusicListenBadge, YouTubeWatchBadge, calculateOverlayPositionEnhanced, clampComponentSize, clearOverlayPositionCache, createSound, createSpotlightStore, createTheme, debounce$1 as debounce, defineAbility, defineAppLayout, defineRoleAbility, directSpotlight, extractDisclaimerProps, factory, getAllSounds, getColor, getFontSize, getHeight, getIconSize$1 as getIconSize, getLineHeight, getRadius$1 as getRadius, getScrollPosition, getShadow$1 as getShadow, getSize, getSoundsByCategory, getSpacing, getViewport, globalHotkeys, measureAsyncPerformance, measureElement, measurePerformance, navigationProgress, onDialogsRequested, onSpotlightRequested, onToastsRequested, permissions, pointInRect, polymorphicFactory, px, rem, resolveComponentSize, resolveResponsiveProp, resolveResponsiveValue, resolveSize, spotlight, throttle, useAbility, useAccessibility, useAppLayoutContext, useAppShell, useAppShellApi, useAppShellLayout, useBreakpoint, useColorScheme, useDialog, useDialogApi, useDialogs, useDirectSpotlightState, useDirection, useDirectionSafe, useDisclaimer, useDropdownPositioning, useEscapeKey, useFormContext, useGlobalHotkeys, useHaptics, useHapticsSettings, useHotkeys, useI18n, useKeyboardManager, useKeyboardManagerOptional, useNavbarHover, useOptionalFormContext, useOverlay, useOverlayApi, useOverlays, usePermissions, usePopoverPositioning, useSimpleDialog, useSound, useSpotlightStore, useSpotlightStoreInstance, useSpotlightToggle, useTheme, useThemeMode, useTitleRegistry, useTitleRegistryOptional, useToast, useToastApi, useToggleColorScheme, useTooltipPositioning, withCan, withCannot, withDisclaimer, withPressAnimation };
+export { AccessibilityProvider, Accordion, AmazonAppstoreBadge, AmazonAppstoreButton, AmazonMusicListenBadge, AmazonPrimeVideoBadge, AmazonStoreBadge, AnimatedPressable, AppLayoutProvider, AppLayoutRenderer, AppShell, AppShellAside, AppShellBottomNav, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AppStoreBadge, AppStoreButton, AppStoreDownloadBadge, AppleAppStoreButton, AppleMusicListenBadge, ApplePodcastsListenBadge, AutoComplete, Avatar, AvatarGroup, Badge, Block, Blockquote, Bold, BottomAppBar, BrandButton, BrandIcon, Breadcrumbs, Button, COMPONENT_SIZES$1 as COMPONENT_SIZES, COMPONENT_SIZE_ORDER, Calendar, Card, Carousel, Checkbox, Chip, ChromeWebStoreBadge, Cite, Code, CodeBlock, Collapse, ColorPicker, ColorSwatch, Column, ComponentWithDisclaimer, ContextMenu, CopyButton, DARK_THEME, DEFAULT_BREAKPOINTS, DEFAULT_COMPONENT_SIZE, DEFAULT_SOUND_IDS, DEFAULT_THEME, DataTable, DatePicker, DatePickerInput, Day, Dialog, DialogProvider, DialogRenderer, DirectionProvider, Disclaimer, DiscordJoinBadge, Divider, EmojiPicker, Emphasis, FDroidButton, FileInput, Flex, FloatingActions, Form, GalaxyStoreDownloadBadge, Gallery, Gauge, GitHubViewBadge, GooglePlayButton, GooglePlayDownloadBadge, Grid, GridItem, H1, H2, H3, H4, H5, H6, HapticsProvider, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlight, HuaweiAppGalleryBadge, I18nProvider, Icon, IconButton, Image, Indicator, Input, Italic, Kbd, KeyCap, KeyboardAwareLayout, KeyboardManagerProvider, Knob, Link, ListGroup, ListGroupBody, ListGroupDivider, ListGroupItem, Loader, LoadingOverlay, MacAppStoreButton, Mark, Markdown, Masonry, Menu, MenuDivider, MenuDropdown, MenuItem, MenuItemButton, MenuLabel, MicrosoftStoreButton, MicrosoftStoreDownloadBadge, MiniCalendar, Month, MonthPicker, MonthPickerInput, Notice, NumberInput, Overlay, OverlayProvider, P, Pagination, PasswordInput, PhoneInput, PinInput, PlatformBlocksProvider, Popover, PressAnimation, Progress, QRCode, Radio, RadioGroup, RangeSlider, Rating, RedditJoinBadge, Ring, Row, SIZE_SCALES, Search, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Small, SoundCloudListenBadge, SoundProvider, Space, Spoiler, SpotifyListenBadge, Spotlight, SpotlightProvider, StatusBarManager, StepperWithSubComponents as Stepper, Strong, Sub, Sup, Switch, Table, TableOfContents, Tabs, Text, TextArea, TextInputBase, ThemeModeProvider, TikTokWatchBadge, TimePickerInput as TimePicker, TimePickerInput, TimelineWithItems as Timeline, Title, TitleRegistryProvider, Toast, ToastProvider, ToggleBar, ToggleButton, ToggleGroup, Tooltip, Tree, TwitchWatchBadge, Underline, Video, Waveform, YearPicker, YearPickerInput, YouTubeMusicListenBadge, YouTubeWatchBadge, calculateOverlayPositionEnhanced, clampComponentSize, clearOverlayPositionCache, createSound, createSpotlightStore, createTheme, debounce$1 as debounce, defineAppLayout, directSpotlight, extractDisclaimerProps, factory, getAllSounds, getColor, getFontSize, getHeight, getIconSize$1 as getIconSize, getLineHeight, getRadius$1 as getRadius, getScrollPosition, getShadow$1 as getShadow, getSize, getSoundsByCategory, getSpacing, getViewport, globalHotkeys, measureAsyncPerformance, measureElement, measurePerformance, onDialogsRequested, onSpotlightRequested, onToastsRequested, pointInRect, polymorphicFactory, px, rem, resolveComponentSize, resolveResponsiveProp, resolveResponsiveValue, resolveSize, spotlight, throttle, useAccessibility, useAppLayoutContext, useAppShell, useAppShellApi, useAppShellLayout, useBreakpoint, useColorScheme, useDialog, useDialogApi, useDialogs, useDirectSpotlightState, useDirection, useDirectionSafe, useDisclaimer, useDropdownPositioning, useEscapeKey, useFormContext, useGlobalHotkeys, useHaptics, useHapticsSettings, useHotkeys, useI18n, useKeyboardManager, useKeyboardManagerOptional, useNavbarHover, useOptionalFormContext, useOverlay, useOverlayApi, useOverlays, usePopoverPositioning, useSimpleDialog, useSound, useSpotlightStore, useSpotlightStoreInstance, useSpotlightToggle, useTheme, useThemeMode, useTitleRegistry, useTitleRegistryOptional, useToast, useToastApi, useToggleColorScheme, useTooltipPositioning, withDisclaimer, withPressAnimation };
 //# sourceMappingURL=index.js.map