@platform-blocks/ui 0.5.0 → 0.6.1

package/lib/cjs/index.js

@@ -726,16 +726,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',
@@ -791,9 +791,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: {
@@ -882,6 +882,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'),
@@ -890,21 +892,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'),
 };
 /**
@@ -1184,25 +1174,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: (reactNative.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 && reactNative.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);
     }
@@ -1967,7 +1982,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.');
@@ -2329,18 +2343,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.
  */
@@ -2350,43 +2363,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 };
 }
@@ -2655,7 +2663,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),
@@ -2672,6 +2680,7 @@ const createOverlayCacheKey = (anchorX, anchorY, anchorWidth, anchorHeight, over
         flip ? '1' : '0',
         shift ? '1' : '0',
         formatNumber(boundary),
+        matchAnchorWidth ? '1' : '0',
         reactNative.Platform.OS,
     ].join('|');
 };
@@ -2717,11 +2726,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 = (reactNative.Platform.OS === 'web' && strategy === 'absolute')
@@ -2732,7 +2742,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;
@@ -2800,10 +2810,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
@@ -3560,9 +3574,14 @@ const Text = (allProps) => {
     }
     // Platform-specific rendering
     if (reactNative.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) {
@@ -6173,31 +6192,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] = React.useState(null);
+    const wasLoadingRef = React.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
+    React.useEffect(() => {
+        if (!loading && wasLoadingRef.current) {
+            // Loading just ended, allow width to be recalculated
+            setMeasuredWidth(null);
+        }
+        wasLoadingRef.current = loading;
+    }, [loading]);
+    const handleLayout = React.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 : '')
@@ -6236,12 +6253,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;
@@ -6434,7 +6451,7 @@ const Button = (allProps) => {
                         ...(reactNative.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 && (jsxRuntime.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 && (jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Loader, { size: size, color: getLoaderColor(), style: !isIconButton ? { marginRight: iconSpacing } : undefined }), !isIconButton && renderButtonContent(displayContent)] })) : isIconButton ? (
                     // Icon-only button
@@ -6674,18 +6691,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 } = reactNative.useWindowDimensions();
     const horizontalMargin = 32; // safety margin so dialog never touches edges
     const isNativePlatform = reactNative.Platform.OS === 'ios' || reactNative.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 = React.useCallback(() => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [onClose]);
@@ -6741,20 +6762,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) => {
@@ -6911,8 +6924,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 = reactNative.StyleSheet.create({
         backdrop: {
@@ -6923,24 +6936,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',
@@ -6966,24 +6983,27 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
                     }
                     : reactNative.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,
@@ -7039,8 +7059,10 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     });
     const bottomSheetAnimatedStyle = Animated.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 {};
@@ -7057,7 +7079,7 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
             animatedStyle = bottomSheetAnimatedStyle;
         }
         return (jsxRuntime.jsxs(Animated.View, { style: [dynamicStyles.modalContainer, animatedStyle], ...(variant === 'bottomsheet' && bottomSheetSwipeZone === 'container' && panHandlers ? panHandlers : {}), children: [variant === 'bottomsheet' && (jsxRuntime.jsx(reactNative.View, { style: dynamicStyles.dragHandleContainer, ...(bottomSheetSwipeZone === 'handle' && panHandlers ? panHandlers : {}), children: jsxRuntime.jsx(reactNative.View, { style: dynamicStyles.dragHandle }) })), (title !== null &&
-                    title && closable) && (jsxRuntime.jsxs(reactNative.View, { style: dynamicStyles.header, children: [jsxRuntime.jsx(Text, { variant: "h3", color: "text", children: title || '' }), closable && (jsxRuntime.jsx(Button, { variant: "ghost", onPress: handleClose, style: dynamicStyles.closeButton, children: jsxRuntime.jsx(Icon, { name: "x", size: "md" }) }))] })), jsxRuntime.jsx(reactNative.View, { style: [dynamicStyles.content, style], children: children })] }));
+                    title && closable) && (jsxRuntime.jsxs(reactNative.View, { style: dynamicStyles.header, children: [jsxRuntime.jsx(Text, { variant: "h3", color: "text", children: title || '' }), closable && variant !== 'bottomsheet' && (jsxRuntime.jsx(Button, { variant: "ghost", onPress: handleClose, style: dynamicStyles.closeButton, children: jsxRuntime.jsx(Icon, { name: "x", size: "md" }) }))] })), jsxRuntime.jsx(reactNative.View, { style: [dynamicStyles.content, style], children: children })] }));
     };
     return (jsxRuntime.jsx(reactNative.Modal, { visible: visible, transparent: true, animationType: "none", statusBarTranslucent: variant === 'fullscreen', children: jsxRuntime.jsxs(Animated.View, { style: [
                 dynamicStyles.backdrop,
@@ -7266,7 +7288,7 @@ function DialogRenderer() {
         return null;
     // Render the topmost dialog
     const topDialog = dialogs[dialogs.length - 1];
-    return (jsxRuntime.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 (jsxRuntime.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) => {
@@ -8351,7 +8373,14 @@ const getContrastPreference = () => {
         return 'less';
     return 'no-preference';
 };
-const getColorScheme = () => { var _a, _b; return (_b = (_a = reactNative.Appearance === null || reactNative.Appearance === void 0 ? void 0 : reactNative.Appearance.getColorScheme) === null || _a === void 0 ? void 0 : _a.call(reactNative.Appearance)) !== null && _b !== void 0 ? _b : 'no-preference'; };
+const getColorScheme = () => {
+    var _a;
+    const scheme = (_a = reactNative.Appearance === null || reactNative.Appearance === void 0 ? void 0 : reactNative.Appearance.getColorScheme) === null || _a === void 0 ? void 0 : _a.call(reactNative.Appearance);
+    // Handle 'unspecified' from newer React Native versions
+    if (scheme === 'light' || scheme === 'dark')
+        return scheme;
+    return 'no-preference';
+};
 const getReducedMotion = async () => {
     if (reactNative.Platform.OS === 'web') {
         if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
@@ -8576,7 +8605,13 @@ function useDeviceInfo(options = {}) {
     React.useEffect(() => {
         var _a;
         const colorSubscription = (_a = reactNative.Appearance === null || reactNative.Appearance === void 0 ? void 0 : reactNative.Appearance.addChangeListener) === null || _a === void 0 ? void 0 : _a.call(reactNative.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;
@@ -9121,7 +9156,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 (jsxRuntime.jsx(Dialog, { visible: opened, onClose: onClose, variant: fullscreen ? 'fullscreen' : 'modal', backdrop: true, backdropClosable: true, width: fullscreen ? undefined : targetWidth, title: null, style: [
+    return (jsxRuntime.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 && {
@@ -9683,6 +9718,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;
@@ -9729,12 +9781,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);
@@ -9752,593 +9806,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 = React.createContext(null);
-/**
- * Permission Provider Component
- */
-const PermissionProvider = ({ rules = [], user, children, dev = {} }) => {
-    const [ability] = React.useState(() => createAbility(rules));
-    const [currentUser, setCurrentUser] = React.useState(user);
-    const updateAbility = React.useCallback((newRules) => {
-        ability.update(newRules);
-    }, [ability]);
-    const can = React.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 = React.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 = React.useCallback((newUser) => {
-        setCurrentUser(newUser);
-    }, []);
-    const contextValue = React.useMemo(() => ({
-        ability,
-        updateAbility,
-        can,
-        cannot,
-        user: currentUser,
-        setUser
-    }), [ability, updateAbility, can, cannot, currentUser, setUser]);
-    return React.createElement(PermissionContext.Provider, { value: contextValue }, children);
-};
-/**
- * Hook to access permission context
- */
-const usePermissions = (options = {}) => {
-    const context = React.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.createElement(reactNative.View, { style, testID }, children);
-    }
-    const hasPermission = subject
-        ? ability.can(action, subject, field)
-        : ability.can(action, '*', field);
-    if (hasPermission) {
-        return React.createElement(reactNative.View, { style, testID }, children);
-    }
-    return React.createElement(reactNative.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.createElement(reactNative.View, { style, testID }, children);
-    }
-    const hasPermission = ability.can(action, subject, field);
-    if (hasPermission) {
-        return React.createElement(reactNative.View, { style, testID }, children);
-    }
-    return React.createElement(reactNative.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.createElement(reactNative.View, { style, testID }, fallback);
-    }
-    const hasPermission = subject
-        ? ability.can(action, subject, field)
-        : ability.can(action, '*', field);
-    if (!hasPermission) {
-        return React.createElement(reactNative.View, { style, testID }, children);
-    }
-    return React.createElement(reactNative.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.useEffect(() => {
-        if (!allPermissionsGranted && onUnauthorized) {
-            onUnauthorized();
-        }
-    }, [allPermissionsGranted, onUnauthorized]);
-    if (allPermissionsGranted) {
-        return React.createElement(React.Fragment, null, children);
-    }
-    return React.createElement(React.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.createElement(Can, { I: action, a: subject, field, fallback }, React.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.createElement(Cannot, { I: action, a: subject, field, fallback }, React.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 = React.createContext(null);
 // Default persistence using localStorage (web only)
 const defaultPersistence = {
@@ -10468,7 +9935,6 @@ const OverlayBoundary = React.memo(function OverlayBoundary({ enabled, children
 const I18nBoundary = React.memo(function I18nBoundary({ locale, fallbackLocale, resources, children }) {
     return (jsxRuntime.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
  */
@@ -10506,30 +9972,20 @@ function PlatformBlocksContent({ children, theme, inherit = true, withCSSVariabl
             document.documentElement.setAttribute('data-platform-blocks-color-scheme', target);
         }
     }, [effectiveColorScheme, osColorScheme]);
-    const mainContent = (jsxRuntime.jsxs(ThemeBoundary, { theme: resolvedTheme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, withGlobalCSS: withGlobalCSS, children: [children, withSpotlight && jsxRuntime.jsx(SpotlightController, { config: spotlightConfig })] }));
-    return (jsxRuntime.jsx(OverlayBoundary, { enabled: withOverlays, children: mainContent }));
+    const mainContent = (jsxRuntime.jsx(ThemeBoundary, { theme: resolvedTheme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, withGlobalCSS: withGlobalCSS, children: jsxRuntime.jsxs(OverlayBoundary, { enabled: withOverlays, children: [children, withSpotlight && jsxRuntime.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 = React.useMemo(() => i18nResources || { en: { translation: {} } }, [i18nResources]);
     const content = (jsxRuntime.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 ? (jsxRuntime.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 = (jsxRuntime.jsx(PermissionProvider, { ...permissionConfig, children: enhancedTree }));
-    }
     if (hapticsConfig) {
         enhancedTree = (jsxRuntime.jsx(HapticsProvider, { ...hapticsConfig, children: enhancedTree }));
     }
@@ -11019,14 +10475,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) {
@@ -12452,9 +11912,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 jsxRuntime.jsx(Flex, { direction: direction, gap: gap, ...props });
+const Column = ({ direction = 'column', gap = 'sm', fullWidth = true, ...props }) => {
+    return jsxRuntime.jsx(Flex, { direction: direction, gap: gap, fullWidth: fullWidth, ...props });
 };
 Row.displayName = 'Row';
 
@@ -14569,35 +14030,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 (reactNative.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 (reactNative.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();
@@ -14821,6 +14348,8 @@ const FloatingCopyControls = ({ visible, code, onCopy, topOffset, isWeb }) => (j
     }, children: jsxRuntime.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.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);
@@ -14835,6 +14364,7 @@ const CodeBlock = (props) => {
     const [hovered, setHovered] = React.useState(false);
     const [codeHeight, setCodeHeight] = React.useState(null);
     const isWeb = reactNative.Platform.OS === 'web';
+    const webWhitespaceStyle = React.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.useMemo(() => {
@@ -14868,6 +14398,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.useMemo(() => ({
         backgroundColor: highlightBackgroundColor,
@@ -14879,6 +14410,18 @@ const CodeBlock = (props) => {
     const tokenLines = React.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.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.useCallback((line, index, appendNewline, includeKey) => {
         var _a;
         const lineNumber = index + 1;
@@ -14887,13 +14430,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 (jsxRuntime.jsxs(Text, { selectable: true, style: lineStyles, children: [showLineNumbers ? (jsxRuntime.jsx(Text, { style: { color: lineNumberColor, opacity: 0.7 }, children: `${String(lineNumber).padStart(lineNumberWidth, ' ')} | ` })) : null, tokens.map((token, tokenIdx) => (jsxRuntime.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 (jsxRuntime.jsxs(Text, { selectable: true, style: lineStyles, children: [showLineNumbers ? (jsxRuntime.jsx(Text, { style: { color: lineNumberColor, opacity: 0.7 }, children: `${String(lineNumber).padStart(lineNumberWidth, ' ')} | ` })) : null, tokens.map((token, tokenIdx) => (jsxRuntime.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.useMemo(() => {
         if (!(isWeb && highlight && PrismSyntaxHighlighter)) {
             return null;
@@ -14907,7 +14451,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 };
@@ -14940,13 +14490,13 @@ const CodeBlock = (props) => {
     ]);
     const renderNativeCode = React.useMemo(() => {
         if (!codeData.lineCount) {
-            return (jsxRuntime.jsx(Text, { selectable: true, style: [styles.codeText, textStyle], children: ' ' }));
+            return (jsxRuntime.jsx(Text, { selectable: true, style: [styles.codeText, textStyle, webWhitespaceStyle], children: ' ' }));
         }
         if (shouldVirtualizeNative) {
             return (jsxRuntime.jsx(reactNative.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 (jsxRuntime.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 (jsxRuntime.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) : (jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, bounces: false, showsHorizontalScrollIndicator: true, showsVerticalScrollIndicator: false, contentContainerStyle: { flexGrow: 1 }, style: { width: '100%' }, children: jsxRuntime.jsx(reactNative.View, { style: { flexGrow: 1 }, children: codeContent }) }));
     let wrappedCodeContent = scrollableCodeContent;
@@ -16551,11 +16101,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' };
@@ -16563,7 +16115,7 @@ const BrandButton = (props) => {
                 return {
                     backgroundColor: 'white',
                     borderColor: 'transparent',
-                    paddingHorizontal: 0,
+                    paddingHorizontal: 16,
                     minWidth: 0,
                     height: 'auto',
                     color: 'black'
@@ -16572,6 +16124,7 @@ const BrandButton = (props) => {
                 return {
                     backgroundColor: brandConfig.backgroundColor,
                     borderColor: brandConfig.borderColor || brandConfig.backgroundColor,
+                    paddingHorizontal: 16,
                 };
         }
     })();
@@ -17148,8 +16701,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: {
@@ -17277,6 +16834,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] = React.useState(false);
+    const [cursorVisible, setCursorVisible] = React.useState(true);
     const theme = useTheme();
     const { isRTL } = useDirection();
     const internalInputRef = React.useRef(null);
@@ -17348,6 +16906,16 @@ const TextInputBase = factory((props, ref) => {
             return '';
         return '•'.repeat(length);
     }, [isSecureEntry, normalizedValue]);
+    // Blinking cursor for secure entry (simple interval toggle)
+    React.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 = React.useMemo(() => {
         const base = [styles.input];
@@ -17449,7 +17017,12 @@ const TextInputBase = factory((props, ref) => {
         }
     }, [keyboardManager, pendingFocusTarget, focusTargetId]);
     const disclaimerNode = renderDisclaimer();
-    return (jsxRuntime.jsxs(reactNative.View, { style: [styles.container, spacingStyles, layoutStyles, style], ...rest, children: [jsxRuntime.jsx(FieldHeader, { label: label, description: description, required: required, withAsterisk: withAsterisk, disabled: disabled, error: !!error, size: size }), jsxRuntime.jsxs(reactNative.View, { style: styles.inputContainer, children: [startSection && (jsxRuntime.jsx(reactNative.View, { style: styles.startSection, children: startSection })), jsxRuntime.jsxs(reactNative.View, { style: { flex: 1, position: 'relative', justifyContent: 'center' }, children: [jsxRuntime.jsx(reactNative.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 && (jsxRuntime.jsx(reactNative.Text, { pointerEvents: "none", accessible: false, style: overlayStyle, numberOfLines: 1, ellipsizeMode: "clip", children: maskedValue }))] }), (showClearButton || endSection) && (jsxRuntime.jsxs(reactNative.View, { style: styles.endSection, children: [showClearButton && (jsxRuntime.jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error && (jsxRuntime.jsx(reactNative.Text, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })), helperText && !error && (jsxRuntime.jsx(reactNative.Text, { style: styles.helperText, children: helperText }))] }));
+    return (jsxRuntime.jsxs(reactNative.View, { style: [styles.container, spacingStyles, layoutStyles, style], ...rest, children: [jsxRuntime.jsx(FieldHeader, { label: label, description: description, required: required, withAsterisk: withAsterisk, disabled: disabled, error: !!error, size: size }), jsxRuntime.jsxs(reactNative.View, { style: styles.inputContainer, children: [startSection && (jsxRuntime.jsx(reactNative.View, { style: styles.startSection, children: startSection })), jsxRuntime.jsxs(reactNative.View, { style: { flex: 1, position: 'relative', justifyContent: 'center' }, children: [jsxRuntime.jsx(reactNative.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 && (jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: [overlayStyle, { flexDirection: 'row', alignItems: 'center' }], children: [jsxRuntime.jsx(reactNative.Text, { accessible: false, style: { color: textColor, fontSize: styles.input.fontSize, fontFamily: theme.fontFamily }, numberOfLines: 1, children: maskedValue }), focused && cursorVisible && (jsxRuntime.jsx(reactNative.View, { style: {
+                                            width: 1,
+                                            height: styles.input.fontSize || 16,
+                                            backgroundColor: textColor,
+                                            marginLeft: 1,
+                                        } }))] }))] }), (showClearButton || endSection) && (jsxRuntime.jsxs(reactNative.View, { style: styles.endSection, children: [showClearButton && (jsxRuntime.jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error && (jsxRuntime.jsx(reactNative.Text, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })), helperText && !error && (jsxRuntime.jsx(reactNative.Text, { style: styles.helperText, children: helperText }))] }));
 });
 
 const getInputTypeConfig = (type) => {
@@ -18007,18 +17580,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 && reactNative.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,
             },
@@ -18060,7 +17634,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] = React.useState(false);
@@ -18124,11 +17698,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' } : {})
@@ -18156,7 +17730,7 @@ const TextArea = factory((props, ref) => {
     const clearLabel = clearButtonLabel || 'Clear input';
     return (jsxRuntime.jsxs(reactNative.View, { style: containerStyles, testID: testID, children: [(label || description) && (jsxRuntime.jsx(FieldHeader, { label: label, description: description, required: required, disabled: disabled, error: !!error })), jsxRuntime.jsxs(reactNative.View, { style: [inputContainerStyles, { position: 'relative' }], children: [jsxRuntime.jsx(reactNative.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'
@@ -19700,7 +19274,7 @@ const useSwitchStyles = (props) => {
             ...(reactNative.Platform.OS === 'web' && { userSelect: 'none' }),
         },
         labelContainer: {
-            flex: 1,
+            flexShrink: 1,
             justifyContent: 'center',
         },
         labelDisabled: {
@@ -19869,8 +19443,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 (jsxRuntime.jsxs(reactNative.View, { style: spacingStyles, children: [jsxRuntime.jsxs(LayoutComponent, { ...layoutProps, children: [labelPosition === 'top' && labelElement, labelPosition === 'left' && labelElement, switchElement, labelPosition === 'right' && labelElement, labelPosition === 'bottom' && labelElement] }), disclaimerNode ? (jsxRuntime.jsx(reactNative.View, { style: { width: '100%' }, children: disclaimerNode })) : null] }));
 });
@@ -24482,7 +24056,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();
@@ -24504,6 +24078,7 @@ const Select = factory((allProps, ref) => {
         keyboardAvoidance,
         closeOnClickOutside: true,
         closeOnEscape: true,
+        matchAnchorWidth: true,
         onClose: () => setOpen(false),
     });
     const hasMeasuredDropdownRef = React.useRef(false);
@@ -24637,11 +24212,11 @@ const Select = factory((allProps, ref) => {
     }, [position === null || position === void 0 ? void 0 : position.finalWidth, triggerWidth]);
     const resolvedDropdownMaxHeight = React.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 = React.useCallback((opt) => {
         if (opt.disabled)
             return;
@@ -24663,7 +24238,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 = React.useMemo(() => {
         const widthStyle = resolvedDropdownWidth && resolvedDropdownWidth > 0
             ? { width: resolvedDropdownWidth, minWidth: resolvedDropdownWidth }
@@ -24676,18 +24251,17 @@ const Select = factory((allProps, ref) => {
                     ...(maxHeightStyle !== null && maxHeightStyle !== void 0 ? maxHeightStyle : {}),
                     ...(widthStyle !== null && widthStyle !== void 0 ? widthStyle : {}),
                 }, children: jsxRuntime.jsx(reactNative.FlatList, { data: options, keyExtractor: o => String(o.value), renderItem: ({ item }) => {
-                        var _a;
                         const selected = item.value === value;
                         if (renderOption) {
                             return jsxRuntime.jsx(reactNative.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 (jsxRuntime.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 (jsxRuntime.jsx(MenuItemButton, { onPress: () => handleSelect(item), disabled: !!item.disabled, active: false, tone: "default", hoverTone: "default", activeTone: "default", textColor: baseTextColor, hoverTextColor: baseTextColor, activeTextColor: baseTextColor, startIcon: selected ? jsxRuntime.jsx(Icon, { name: "check", size: 16, color: highlightColor }) : jsxRuntime.jsx(reactNative.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]);
     React.useEffect(() => {
@@ -24869,6 +24443,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 = React.useRef(null);
@@ -24892,13 +24467,12 @@ const AutoComplete = factory((props, ref) => {
     }, radiusStyles), [inputStyleFactory, size, focused, error, disabled, showClearButton, radiusStyles]);
     const clearLabel = clearButtonLabel || 'Clear input';
     const menuHighlightColor = React.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 = React.useRef(query);
@@ -25216,8 +24790,8 @@ const AutoComplete = factory((props, ref) => {
     const defaultRenderItem = React.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 (jsxRuntime.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], ...(reactNative.Platform.OS === 'web' ? {
+        item.disabled ? theme.text.disabled : menuHighlightColor;
+        return (jsxRuntime.jsx(MenuItemButton, { onPress: () => handleSelectSuggestion(item), disabled: item.disabled, active: false, tone: "default", hoverTone: "default", activeTone: "default", textColor: baseTextColor, hoverTextColor: baseTextColor, activeTextColor: baseTextColor, startIcon: isSelected ? jsxRuntime.jsx(Icon, { name: "check", size: 16, color: menuHighlightColor }) : jsxRuntime.jsx(reactNative.View, { style: { width: 16 } }), compact: true, rounded: false, style: [styles.menuItemButton, suggestionItemStyle], ...(reactNative.Platform.OS === 'web' ? {
                 onMouseDown: (event) => {
                     if (event === null || event === void 0 ? void 0 : event.preventDefault) {
                         event.preventDefault();
@@ -27484,7 +27058,7 @@ const MiniCalendar = ({ value, onChange, defaultValue, numberOfDays = 7, default
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(date);
     }, [isControlled, maxDate, minDate, onChange]);
-    return (jsxRuntime.jsxs(reactNative.View, { children: [jsxRuntime.jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 16 }, children: [jsxRuntime.jsx(reactNative.Pressable, { onPress: handlePrevious, style: ({ pressed }) => [
+    return (jsxRuntime.jsxs(reactNative.View, { style: { alignSelf: 'flex-start' }, children: [jsxRuntime.jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 16 }, children: [jsxRuntime.jsx(reactNative.Pressable, { onPress: handlePrevious, style: ({ pressed }) => [
                             {
                                 padding: 8,
                                 borderRadius: 6,
@@ -27496,7 +27070,7 @@ const MiniCalendar = ({ value, onChange, defaultValue, numberOfDays = 7, default
                                 borderRadius: 6,
                                 backgroundColor: pressed ? theme.colors.gray[2] : 'transparent',
                             },
-                        ], ...nextControlProps, children: jsxRuntime.jsx(Icon, { name: "chevron-right", size: 16, color: theme.colors.gray[6] }) })] }), jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: jsxRuntime.jsx(Flex, { direction: "row", gap: 4, children: days.map((date) => {
+                        ], ...nextControlProps, children: jsxRuntime.jsx(Icon, { name: "chevron-right", size: 16, color: theme.colors.gray[6] }) })] }), jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { flexGrow: 0 }, style: { flexGrow: 0 }, children: jsxRuntime.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);
@@ -27726,7 +27300,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInputInner({ value,
             } }));
     }
     if (dropdownType === 'modal') {
-        return (jsxRuntime.jsxs(reactNative.View, { ref: ref, children: [renderInput(), jsxRuntime.jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, width: numberOfMonths > 1 ? Math.min(700, 380 * numberOfMonths + 40) : 400, title: type === 'range'
+        return (jsxRuntime.jsxs(reactNative.View, { ref: ref, children: [renderInput(), jsxRuntime.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'
@@ -27755,7 +27329,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInputInner({ value,
                                                         backgroundColor: pressed ? theme.colors.primary[6] : theme.colors.primary[5],
                                                     }), children: jsxRuntime.jsx(Text, { size: "sm", weight: "semibold", style: { color: 'white' }, children: "Done" }) })] })] }) }))] }) })] }));
     }
-    return (jsxRuntime.jsxs(reactNative.View, { ref: ref, children: [renderInput(), jsxRuntime.jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, width: numberOfMonths > 1 ? Math.min(600, 320 * numberOfMonths + 40) : 350, children: jsxRuntime.jsxs(reactNative.View, { ref: focusTrapRef, style: { padding: DESIGN_TOKENS.spacing.lg }, accessible: true, accessibilityLabel: type === 'range'
+    return (jsxRuntime.jsxs(reactNative.View, { ref: ref, children: [renderInput(), jsxRuntime.jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, w: numberOfMonths > 1 ? Math.min(600, 320 * numberOfMonths + 40) : 350, children: jsxRuntime.jsxs(reactNative.View, { ref: focusTrapRef, style: { padding: DESIGN_TOKENS.spacing.lg }, accessible: true, accessibilityLabel: type === 'range'
                         ? 'Date range picker dialog'
                         : type === 'multiple'
                             ? 'Multiple date picker dialog'
@@ -27850,7 +27424,7 @@ const MonthPickerInput = React.forwardRef(function MonthPickerInput({ value, def
                         pointerEvents: 'none',
                         accessible: false,
                         focusable: false,
-                    } }) }), jsxRuntime.jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, width: 360, children: jsxRuntime.jsx(reactNative.View, { style: {
+                    } }) }), jsxRuntime.jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, w: 360, children: jsxRuntime.jsx(reactNative.View, { style: {
                         padding: DESIGN_TOKENS.spacing.lg,
                     }, children: jsxRuntime.jsx(MonthPicker, { ...restMonthPickerProps, value: currentValue, onChange: handleMonthChange, locale: resolvedLocale, size: resolvedSize }) }) })] }));
 });
@@ -27913,7 +27487,7 @@ const YearPickerInput = React.forwardRef(function YearPickerInput({ value, defau
                         pointerEvents: 'none',
                         accessible: false,
                         focusable: false,
-                    } }) }), jsxRuntime.jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, width: 360, children: jsxRuntime.jsx(reactNative.View, { style: {
+                    } }) }), jsxRuntime.jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, w: 360, children: jsxRuntime.jsx(reactNative.View, { style: {
                         padding: DESIGN_TOKENS.spacing.lg,
                     }, children: jsxRuntime.jsx(YearPicker, { ...restYearPickerProps, value: currentValue, onChange: handleYearChange, size: resolvedSize }) }) })] }));
 });
@@ -28078,7 +27652,7 @@ const TimePickerInput = ({ value, defaultValue, onChange, format = 24, withSecon
                         }
                     }, label: label, placeholder: is12h ? 'hh:mm AM' : 'hh:mm', endSection: jsxRuntime.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 }) }), jsxRuntime.jsx(Dialog, { visible: open, 
                 // variant="fullscreen"
-                onClose: handleClose, width: typeof computedPanelWidth === 'number' ? computedPanelWidth : 360, title: title || 'Select Time', children: jsxRuntime.jsxs(reactNative.Pressable, { style: {
+                onClose: handleClose, w: typeof computedPanelWidth === 'number' ? computedPanelWidth : 360, title: title || 'Select Time', children: jsxRuntime.jsxs(reactNative.Pressable, { style: {
                         flex: 1,
                         width: '100%',
                         justifyContent: 'center',
@@ -29030,303 +28604,6 @@ const EmojiPicker = factory((props, ref) => {
 });
 EmojiPicker.displayName = 'EmojiPicker';
 
-function useRichTextEditorStyles() {
-    const theme = useTheme();
-    return React.useMemo(() => reactNative.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.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] = React.useState(value || defaultValue || { html: '', text: '' });
-    const [selection, setSelection] = React.useState({
-        index: 0,
-        length: 0,
-    });
-    const [activeFormats, setActiveFormats] = React.useState({});
-    const [isFocused, setIsFocused] = React.useState(false);
-    const editorRef = React.useRef(null);
-    const autosaveTimerRef = React.useRef(null);
-    // Update content when value prop changes
-    React.useEffect(() => {
-        if (value && value !== content) {
-            setContent(value);
-        }
-    }, [value]);
-    // Autosave functionality
-    React.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 = React.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 = React.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 = React.useCallback(() => {
-        setIsFocused(true);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-    }, [onFocus]);
-    const handleBlur = React.useCallback(() => {
-        setIsFocused(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [onBlur]);
-    const applyFormat = React.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 = React.useCallback((formatKey) => {
-        if (readOnly || disabled)
-            return;
-        const currentValue = activeFormats[formatKey];
-        applyFormat({ [formatKey]: !currentValue });
-    }, [activeFormats, applyFormat, readOnly, disabled]);
-    const insertText = React.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 = React.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]);
-    React.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]);
-    React.useCallback((level) => {
-        applyFormat({ heading: level });
-    }, [applyFormat]);
-    const setAlignment = React.useCallback((align) => {
-        applyFormat({ align });
-    }, [applyFormat]);
-    const setList = React.useCallback((listType) => {
-        applyFormat({ list: listType });
-    }, [applyFormat]);
-    const getToolButtonStyle = React.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 = React.useCallback((tool, icon, onPress, isActive = false) => (jsxRuntime.jsx(reactNative.TouchableOpacity, { onPress: onPress, disabled: disabled || readOnly, style: getToolButtonStyle(isActive), children: jsxRuntime.jsx(Icon, { name: icon, size: 16, color: isActive ? theme.colors.primary[5] : theme.text.secondary }) }, tool)), [theme, disabled, readOnly, getToolButtonStyle]);
-    const renderToolSeparator = React.useCallback((index) => (jsxRuntime.jsx(reactNative.View, { style: styles.toolSeparator }, `separator-${index}`)), [styles.toolSeparator]);
-    const renderToolbar = React.useCallback(() => {
-        if (!(toolbar === null || toolbar === void 0 ? void 0 : toolbar.enabled))
-            return null;
-        const tools = toolbar.tools || DEFAULT_TOOLBAR_TOOLS;
-        return (jsxRuntime.jsx(reactNative.View, { style: styles.toolbar, children: jsxRuntime.jsx(reactNative.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 = React.useCallback(() => (jsxRuntime.jsx(reactNative.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: jsxRuntime.jsx(reactNative.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,
-                reactNative.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 (jsxRuntime.jsxs(reactNative.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 && (jsxRuntime.jsxs(reactNative.Text, { style: [styles.characterCount, { color: theme.text.secondary }], children: [content.text.length, "/", maxLength] })), error && (jsxRuntime.jsx(reactNative.Text, { style: [styles.errorText, { color: theme.colors.error[5] }], children: error })), helperText && !error && (jsxRuntime.jsx(reactNative.Text, { 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);
@@ -30078,7 +29355,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 = reactNative.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 = reactNative.Platform.OS === 'web' ? 'fixed' : 'portal', ...spacingProps } = props;
     const [internalOpened, setInternalOpened] = React.useState(false);
     // Derive menu dropdown items from children each render for reactivity
     const { menuItems, menuDropdownProps } = React.useMemo(() => {
@@ -30153,11 +29430,11 @@ function MenuBase(props, ref) {
         const listGroupStyle = {
             ...styles.dropdown,
             ...(dropdownSpacingStyles || {}),
-            maxHeight,
+            maxHeight: maxH,
             width: resolvedWidth,
         };
-        return (jsxRuntime.jsx(MenuContext.Provider, { value: menuContextValueOpened, children: jsxRuntime.jsx(ListGroup, { variant: "default", size: "sm", style: listGroupStyle, children: scrollable ? (jsxRuntime.jsx(reactNative.ScrollView, { showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", style: { maxHeight }, children: jsxRuntime.jsx(ListGroupBody, { children: menuItems }) })) : (jsxRuntime.jsx(reactNative.View, { style: { maxHeight, overflow: 'hidden' }, children: jsxRuntime.jsx(ListGroupBody, { children: menuItems }) })) }) }));
-    }, [menuItems, menuDropdownProps, styles.dropdown, dropdownSpacingStyles, maxHeight, menuContextValueOpened]);
+        return (jsxRuntime.jsx(MenuContext.Provider, { value: menuContextValueOpened, children: jsxRuntime.jsx(ListGroup, { variant: "default", size: "sm", style: listGroupStyle, children: scrollable ? (jsxRuntime.jsx(reactNative.ScrollView, { showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", style: { maxHeight: maxH }, children: jsxRuntime.jsx(ListGroupBody, { children: menuItems }) })) : (jsxRuntime.jsx(reactNative.View, { style: { maxHeight: maxH, overflow: 'hidden' }, children: jsxRuntime.jsx(ListGroupBody, { children: menuItems }) })) }) }));
+    }, [menuItems, menuDropdownProps, styles.dropdown, dropdownSpacingStyles, maxH, menuContextValueOpened]);
     const handleOpen = React.useCallback(async (opts) => {
         var _a, _b, _c, _d, _e, _f;
         // Use ref to avoid stale isOpened value after async close from backdrop click
@@ -30189,7 +29466,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,
@@ -30237,6 +29514,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,
@@ -30256,7 +29534,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
     React.useEffect(() => {
         var _a;
@@ -30268,14 +29546,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 = React.useCallback(() => {
         if (isOpenedRef.current) {
             handleClose();
@@ -32206,8 +31484,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);
@@ -32218,9 +31496,18 @@ const PopoverBase = (props, ref) => {
     const openedRef = React.useRef(opened);
     const closingReasonRef = React.useRef(null);
     const anchorMeasurementsRef = React.useRef(null);
+    const hoverTimeoutRef = React.useRef(null);
     React.useEffect(() => {
         openedRef.current = opened;
     }, [opened]);
+    // Cleanup hover timeout on unmount
+    React.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
@@ -32233,7 +31520,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,
@@ -32245,9 +31532,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 = React.useRef(false);
+    React.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 = React.useMemo(() => createPopoverStyles(theme)({
         radius,
         shadow,
@@ -32351,6 +31649,28 @@ const PopoverBase = (props, ref) => {
             openPopover();
         }
     }, [closePopover, openPopover]);
+    // Hover-specific handlers with delay to prevent glitching when moving between target and dropdown
+    const handleHoverOpen = React.useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        openPopover();
+    }, [openPopover]);
+    const handleHoverClose = React.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 = React.useRef({ open: handleHoverOpen, close: handleHoverClose });
+    React.useEffect(() => {
+        hoverHandlersRef.current = { open: handleHoverOpen, close: handleHoverClose };
+    }, [handleHoverOpen, handleHoverClose]);
     React.useEffect(() => {
         if (opened) {
             updateAnchorMeasurements();
@@ -32382,41 +31702,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 = (jsxRuntime.jsxs(reactNative.View, { ref: popoverRef, style: [popoverStyles.wrapper, widthOverride ? { width: widthOverride } : null], pointerEvents: dropdownState.trapFocus ? 'auto' : 'box-none', testID: dropdownState.testID, onLayout: handleDropdownLayout, ...dropdownState.containerProps, children: [jsxRuntime.jsx(reactNative.View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsxRuntime.jsx(reactNative.View, { style: getArrowStyle(positioningResult.placement, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme) }))] }));
+        // Hover handlers for the dropdown to keep it open when mouse moves from target to dropdown
+        const dropdownHoverHandlers = trigger === 'hover' && reactNative.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 && reactNative.Platform.OS === 'web'
+            ? { opacity: 0 }
+            : {};
+        const content = (jsxRuntime.jsxs(reactNative.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: [jsxRuntime.jsx(reactNative.View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsxRuntime.jsx(reactNative.View, { style: getArrowStyle(positioningResult.placement, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme) }))] }));
         showOverlay(content, {
             width: widthOverride,
             maxHeight: resolvedMaxHeight,
             zIndex,
         });
         onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(positioningResult.placement);
-    }, [opened, dropdownState, positioningResult, popoverRef, showOverlay, hideOverlay, popoverStyles.dropdown, popoverStyles.wrapper, width, maxHeight, minWidth, minHeight, maxWidth, withArrow, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme, zIndex, onPositionChange, schedulePositionUpdate]);
+    }, [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]);
     React.useEffect(() => {
         return () => {
             hideOverlay();
@@ -32437,6 +31769,8 @@ const PopoverBase = (props, ref) => {
         open: openPopover,
         close: () => closePopover('programmatic'),
         toggle: togglePopover,
+        hoverOpen: handleHoverOpen,
+        hoverClose: handleHoverClose,
         registerDropdown,
         unregisterDropdown,
         anchorRef,
@@ -32445,7 +31779,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 = React.useCallback((node) => {
         if (typeof ref === 'function') {
             ref(node);
@@ -32495,16 +31830,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' && reactNative.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 (reactNative.Platform.OS === 'web') {
         triggerHandlers.onKeyDown = (event) => {
             const tgt = targetProps;
@@ -32526,7 +31889,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,
@@ -32538,7 +31908,7 @@ const PopoverTargetBase = (props, ref) => {
         mergedProps.disabled = true;
     }
     const anchorWrapperRef = mergeRefs(context.anchorRef, ref);
-    return (jsxRuntime.jsx(reactNative.View, { ref: anchorWrapperRef, collapsable: false, children: React.cloneElement(children, mergedProps) }));
+    return (jsxRuntime.jsx(reactNative.View, { ref: anchorWrapperRef, collapsable: false, ...wrapperHoverHandlers, children: React.cloneElement(children, mergedProps) }));
 };
 const PopoverDropdownBase = (props, _ref) => {
     const { children, trapFocus = false, keepMounted, style, testID, ...rest } = props;
@@ -32582,8 +31952,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)`
@@ -32593,8 +31966,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)`
@@ -32604,8 +31980,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)`
@@ -32615,8 +31994,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)`
@@ -32654,7 +32036,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
@@ -32685,10 +32067,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 = [
@@ -32709,7 +32091,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
@@ -32740,10 +32122,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 = [
@@ -32822,16 +32204,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 (jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: reactNative.Platform.OS === 'web', contentContainerStyle: scrollViewStyle, children: jsxRuntime.jsx(reactNative.ScrollView, { style: { flex: 1 }, showsVerticalScrollIndicator: reactNative.Platform.OS === 'web', children: children }) }) }));
 };
 // Main Table Component
@@ -33769,7 +33151,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
             alignItems: 'center',
             marginBottom: DESIGN_TOKENS.spacing.md,
             paddingHorizontal: DESIGN_TOKENS.spacing.xs
-        }, children: [jsxRuntime.jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxRuntime.jsxs(Flex, { gap: 8, children: [jsxRuntime.jsxs(Text, { variant: "small", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxRuntime.jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxRuntime.jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 320, trapFocus: true, children: [jsxRuntime.jsx(Popover.Target, { children: jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsxRuntime.jsx(reactNative.View, { style: {
+        }, children: [jsxRuntime.jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxRuntime.jsxs(Flex, { gap: 8, children: [jsxRuntime.jsxs(Text, { variant: "small", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxRuntime.jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxRuntime.jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, w: 320, trapFocus: true, children: [jsxRuntime.jsx(Popover.Target, { children: jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsxRuntime.jsx(reactNative.View, { style: {
                                                 width: 6,
                                                 height: 6,
                                                 borderRadius: 3,
@@ -33799,7 +33181,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                                                     }) })), jsxRuntime.jsx(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: columns.filter(c => c.filterable).map(column => {
                                                         const currentFilter = getColumnFilter(column.key);
                                                         return (jsxRuntime.jsx(reactNative.View, { children: renderFilterControl(column) }, `${column.key}-${(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) || 'no-filter'}`));
-                                                    }) })] }))] }) })] })), onEditModeChange && (jsxRuntime.jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxRuntime.jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 280, trapFocus: true, children: [jsxRuntime.jsx(Popover.Target, { children: jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "eye", size: 14 }), children: "Columns" }) }), jsxRuntime.jsx(Popover.Dropdown, { children: jsxRuntime.jsxs(reactNative.View, { style: { padding: 8, maxHeight: 300, width: 260 }, children: [jsxRuntime.jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxRuntime.jsxs(Row, { children: [jsxRuntime.jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsxRuntime.jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsxRuntime.jsx(reactNative.ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsxRuntime.jsx(Checkbox, { label: tempHeaderEdits[col.key] || col.header, onChange: () => {
+                                                    }) })] }))] }) })] })), onEditModeChange && (jsxRuntime.jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxRuntime.jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, w: 280, trapFocus: true, children: [jsxRuntime.jsx(Popover.Target, { children: jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "eye", size: 14 }), children: "Columns" }) }), jsxRuntime.jsx(Popover.Dropdown, { children: jsxRuntime.jsxs(reactNative.View, { style: { padding: 8, maxHeight: 300, width: 260 }, children: [jsxRuntime.jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxRuntime.jsxs(Row, { children: [jsxRuntime.jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsxRuntime.jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsxRuntime.jsx(reactNative.ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsxRuntime.jsx(Checkbox, { label: tempHeaderEdits[col.key] || col.header, onChange: () => {
                                                     if (hiddenColumns.includes(col.key)) {
                                                         setHiddenColumns(prev => prev.filter(h => h !== col.key));
                                                     }
@@ -34173,9 +33555,9 @@ const resolveTokenColor = (token, theme) => {
     return token; // assume raw color string
 };
 // Item
-const TimelineItem = React.forwardRef(({ children, title, bullet, colorVariant, lineVariant = 'solid', color, active, itemIndex = 0, isLastItem = false, itemAlign, ...rest }, ref) => {
+const TimelineItem = React.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;
@@ -34190,6 +33572,9 @@ const TimelineItem = React.forwardRef(({ children, title, bullet, colorVariant,
     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
@@ -34275,10 +33660,16 @@ const TimelineItem = React.forwardRef(({ children, title, bullet, colorVariant,
     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 {
@@ -34294,36 +33685,53 @@ const TimelineItem = React.forwardRef(({ children, title, bullet, colorVariant,
             alignItems: 'flex-start',
         };
     };
+    const applyTextStyle = (nodes, styleOverride) => {
+        if (!styleOverride)
+            return nodes;
+        return React.Children.map(nodes, (child) => {
+            var _a;
+            if (typeof child === 'string' || typeof child === 'number') {
+                return jsxRuntime.jsx(reactNative.Text, { style: styleOverride, children: child });
+            }
+            if (!React.isValidElement(child))
+                return child;
+            const props = child.props || {};
+            const isTextLike = ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Text' || child.type === reactNative.Text || typeof props.children === 'string';
+            if (isTextLike) {
+                const mergedStyle = Array.isArray(props.style)
+                    ? [...props.style, styleOverride]
+                    : [props.style, styleOverride];
+                return React.cloneElement(child, { style: mergedStyle });
+            }
+            if (props.children) {
+                return React.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.Children.map(nodes, (child) => {
-                var _a;
-                if (!React.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.cloneElement(child, { style: mergedStyle });
-                }
-                if (props.children) {
-                    return React.cloneElement(child, { children: alignChildText(props.children, side) });
-                }
-                return child;
-            });
+            const styleOverride = {
+                textAlign: side,
+                ...(resolvedDescriptionColor ? { color: resolvedDescriptionColor } : {}),
+            };
+            return applyTextStyle(nodes, styleOverride);
         };
-        return (jsxRuntime.jsxs(reactNative.View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [jsxRuntime.jsx(reactNative.View, { style: { flex: 1, paddingRight: sizeConfig.spacing, alignItems: 'flex-end' }, children: leftContent && (jsxRuntime.jsxs(reactNative.View, { style: { width: '100%', alignItems: 'flex-end' }, children: [title && jsxRuntime.jsx(reactNative.Text, { style: [getTitleStyle(), { textAlign: 'right' }], children: title }), alignChildText(children, 'right')] })) }), jsxRuntime.jsxs(reactNative.View, { style: { width: finalBulletSize, alignItems: 'center', position: 'relative' }, children: [getLine(), jsxRuntime.jsx(reactNative.View, { style: getBulletStyle(), children: bullet })] }), jsxRuntime.jsx(reactNative.View, { style: { flex: 1, paddingLeft: sizeConfig.spacing, alignItems: 'flex-start' }, children: rightContent && (jsxRuntime.jsxs(reactNative.View, { style: { width: '100%', alignItems: 'flex-start' }, children: [title && jsxRuntime.jsx(reactNative.Text, { style: [getTitleStyle(), { textAlign: 'left' }], children: title }), alignChildText(children, 'left')] })) })] }));
+        return (jsxRuntime.jsxs(reactNative.View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [jsxRuntime.jsx(reactNative.View, { style: { flex: 1, paddingRight: sizeConfig.spacing, alignItems: 'flex-end' }, children: leftContent && (jsxRuntime.jsxs(reactNative.View, { style: { width: '100%', alignItems: 'flex-end' }, children: [timestamp && (jsxRuntime.jsx(reactNative.Text, { style: [getTimestampStyle(), { textAlign: 'right' }], children: timestamp })), title && jsxRuntime.jsx(reactNative.Text, { style: [getTitleStyle(), { textAlign: 'right' }], children: title }), alignChildText(children, 'right')] })) }), jsxRuntime.jsxs(reactNative.View, { style: { width: finalBulletSize, alignItems: 'center', position: 'relative' }, children: [getLine(), jsxRuntime.jsx(reactNative.View, { style: getBulletStyle(), children: bullet })] }), jsxRuntime.jsx(reactNative.View, { style: { flex: 1, paddingLeft: sizeConfig.spacing, alignItems: 'flex-start' }, children: rightContent && (jsxRuntime.jsxs(reactNative.View, { style: { width: '100%', alignItems: 'flex-start' }, children: [timestamp && (jsxRuntime.jsx(reactNative.Text, { style: [getTimestampStyle(), { textAlign: 'left' }], children: timestamp })), title && jsxRuntime.jsx(reactNative.Text, { style: [getTitleStyle(), { textAlign: 'left' }], children: title }), alignChildText(children, 'left')] })) })] }));
     }
-    return (jsxRuntime.jsxs(reactNative.View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [getLine(), jsxRuntime.jsx(reactNative.View, { style: getBulletStyle(), children: bullet }), (title || children) && (jsxRuntime.jsxs(reactNative.View, { style: getContentStyle(), children: [title && jsxRuntime.jsx(reactNative.Text, { style: getTitleStyle(), children: title }), children] }))] }));
+    return (jsxRuntime.jsxs(reactNative.View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [getLine(), jsxRuntime.jsx(reactNative.View, { style: getBulletStyle(), children: bullet }), (title || children) && (jsxRuntime.jsxs(reactNative.View, { style: getContentStyle(), children: [timestamp && jsxRuntime.jsx(reactNative.Text, { style: getTimestampStyle(), children: timestamp }), title && jsxRuntime.jsx(reactNative.Text, { style: getTitleStyle(), children: title }), resolvedDescriptionColor
+                        ? applyTextStyle(children, {
+                            color: resolvedDescriptionColor,
+                            textAlign: effectiveAlign === 'right' ? 'right' : 'left',
+                        })
+                        : children] }))] }));
 });
 // Root Timeline
-const Timeline = React.forwardRef(({ children, active, color, colorVariant, lineWidth, bulletSize, align = 'left', reverseActive = false, size = 'md', centerMode = false, ...rest }, ref) => {
+const Timeline = React.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);
@@ -34345,6 +33753,9 @@ const Timeline = React.forwardRef(({ children, active, color, colorVariant, line
         size: clampedSize,
         metrics,
         centerMode,
+        titleColor,
+        descriptionColor,
+        timestampColor,
     };
     const items = [];
     React.Children.forEach(children, (child, index) => {
@@ -35062,7 +34473,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();
@@ -35083,36 +34494,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
                 };
         }
     };
@@ -35751,104 +35162,6 @@ const Ring = factory((props, ref) => {
     return (jsxRuntime.jsxs(reactNative.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: [jsxRuntime.jsxs(reactNative.View, { style: [styles$8.ringWrapper, { width: size, height: size }, ringStyle], children: [jsxRuntime.jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [jsxRuntime.jsx(Svg.Circle, { cx: size / 2, cy: size / 2, r: radius, stroke: defaultTrackColor, strokeWidth: thickness, fill: "transparent" }), jsxRuntime.jsx(Svg.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})` })] }), jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: [styles$8.centerContent, { width: size, height: size }, contentStyle], children: centerContent })] }), caption !== undefined && caption !== null ? (React.isValidElement(caption) ? (caption) : (jsxRuntime.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 = Animated.useSharedValue(0);
-    const opacity = Animated.useSharedValue(0);
-    React.useEffect(() => {
-        const sub = (s) => {
-            if (value == null) {
-                progress.value = Animated.withTiming(s.value, { duration: stepInterval });
-                opacity.value = Animated.withTiming(s.active ? 1 : 0, { duration: 150 });
-            }
-        };
-        subscribers.add(sub);
-        broadcast();
-        return () => { subscribers.delete(sub); };
-    }, [value, stepInterval, progress, opacity]);
-    React.useEffect(() => {
-        if (value != null) {
-            progress.value = Animated.withTiming(value, { duration: stepInterval });
-            opacity.value = Animated.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 = Animated.useAnimatedStyle(() => ({ width: `${progress.value}%` }));
-    const containerStyle = Animated.useAnimatedStyle(() => ({ opacity: opacity.value }));
-    return (jsxRuntime.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: [jsxRuntime.jsx(Animated.View, { style: [{
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0,
-                        left: 0,
-                        backgroundColor: resolvedColor,
-                        borderRadius: radius,
-                    }, barStyle] }), jsxRuntime.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) => {
@@ -36041,270 +35354,6 @@ const LoadingOverlay = React.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] = React.useState(false);
-    const openTimeout = React.useRef(null);
-    const closeTimeout = React.useRef(null);
-    const containerRef = React.useRef(null);
-    const targetRef = React.useRef(null);
-    const overlayIdRef = React.useRef(null);
-    const overlayContentRef = React.useRef(null);
-    const isHoveringTargetRef = React.useRef(false);
-    const isHoveringOverlayRef = React.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 = React.useCallback(() => {
-        if (disabled)
-            return;
-        setOpened(true);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    }, [disabled, onOpen]);
-    const doClose = React.useCallback(() => {
-        setOpened(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [onClose]);
-    const scheduleOpen = React.useCallback(() => {
-        clearTimers();
-        openTimeout.current = setTimeout(doOpen, openDelay);
-    }, [doOpen, openDelay]);
-    const scheduleClose = React.useCallback(() => {
-        clearTimers();
-        closeTimeout.current = setTimeout(() => {
-            // Only close if neither target nor overlay are hovered (web)
-            if (reactNative.Platform.OS === 'web') {
-                if (isHoveringTargetRef.current || isHoveringOverlayRef.current)
-                    return;
-            }
-            doClose();
-        }, closeDelay);
-    }, [doClose, closeDelay]);
-    React.useEffect(() => () => clearTimers(), []);
-    // Escape key (web only)
-    React.useEffect(() => {
-        if (!closeOnEscape || reactNative.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 jsxRuntime.jsx(reactNative.View, { style: { ...base, ...(styles[key] || styles.top) } });
-    };
-    const openPortal = React.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 = (jsxRuntime.jsxs(reactNative.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,
-            ], ...(reactNative.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 = React.useCallback(() => {
-        if (overlayIdRef.current) {
-            closeOverlay(overlayIdRef.current);
-            overlayIdRef.current = null;
-        }
-    }, [closeOverlay]);
-    React.useEffect(() => {
-        if (withinPortal) {
-            if (isOpened)
-                openPortal();
-            else
-                closePortal();
-        }
-        return () => { if (!isOpened)
-            closePortal(); };
-    }, [isOpened, withinPortal, openPortal, closePortal]);
-    React.useEffect(() => {
-        if (!withinPortal || reactNative.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
-    React.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 (reactNative.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 ? (jsxRuntime.jsxs(reactNative.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", ...(reactNative.Platform.OS === 'web' && trigger === 'hover' ? {
-            onMouseEnter: () => { isHoveringOverlayRef.current = true; clearTimers(); },
-            onMouseLeave: () => { isHoveringOverlayRef.current = false; scheduleClose(); },
-        } : {}), children: [children, renderArrow(position)] })) : null;
-    return (jsxRuntime.jsxs(reactNative.View, { ref: ref, style: [{ position: 'relative', alignSelf: 'flex-start' }, style], testID: testID, children: [jsxRuntime.jsx(reactNative.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] = React.useState(false);
@@ -36542,7 +35591,7 @@ const styles$6 = reactNative.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 = reactNative.StyleSheet.create({
         animatedBar: {
@@ -36558,18 +35607,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 (jsxRuntime.jsx(reactNative.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 (jsxRuntime.jsx(reactNative.View, { style: [
                     styles.bar,
@@ -36584,7 +35633,7 @@ const WaveformSkeleton = ({ width = 300, height = 60, fullWidth = false, barsCou
         }) }));
 };
 
-const Waveform = React.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.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();
@@ -36671,12 +35720,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
@@ -36699,7 +35748,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 = React.useMemo(() => {
         if (!normalize || processedPeaks.length === 0) {
@@ -36722,16 +35771,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 = React.useCallback((event) => {
         const { width: containerWidth, height: containerHeight } = event.nativeEvent.layout;
         setContainerDimensions({ width: containerWidth, height: containerHeight });
@@ -36746,7 +35795,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 {
@@ -36754,7 +35803,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 = React.useCallback((event) => {
         var _a, _b, _c;
         if (!interactive)
@@ -36841,8 +35890,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 (jsxRuntime.jsx(Svg.Rect, { x: x, y: y, width: barWidth, height: barHeight, fill: fillColor, rx: variant === 'rounded' ? barWidth / 2 : 0 }, index));
@@ -36856,7 +35905,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
@@ -36870,8 +35919,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
     const renderGradient = () => {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Svg.Defs, { children: jsxRuntime.jsx(Svg.LinearGradient, { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: resolvedGradientColors.map((color, index) => (jsxRuntime.jsx(Svg.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 (jsxRuntime.jsx(Svg.Rect, { x: x, y: y, width: barWidth, height: barHeight, fill: `url(#${gradientId})` }, index));
                 })] }));
     };
@@ -36881,8 +35930,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             return null;
         const clampedProgress = Math.max(0, Math.min(1, progress));
         const progressX = clampedProgress * actualWaveformWidth;
-        return (jsxRuntime.jsx(Svg.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 (jsxRuntime.jsx(Svg.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 = React.useMemo(() => {
         if (!showTimeStamps || !duration || !timeStampInterval)
@@ -36903,10 +35952,10 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 }
                 return `${mins}:${secs.toString().padStart(2, '0')}`;
             };
-            timestamps.push(jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: height - 10, x2: x, y2: height, stroke: theme.colors.gray[5], strokeWidth: 1, strokeOpacity: 0.6 }), jsxRuntime.jsx(Svg.Text, { x: x, y: height + 15, fill: theme.colors.gray[6], fontSize: 10, textAnchor: "middle", opacity: 0.8, children: formatTime(time) })] }, i));
+            timestamps.push(jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: h - 10, x2: x, y2: h, stroke: theme.colors.gray[5], strokeWidth: 1, strokeOpacity: 0.6 }), jsxRuntime.jsx(Svg.Text, { x: x, y: h + 15, fill: theme.colors.gray[6], fontSize: 10, textAnchor: "middle", opacity: 0.8, children: formatTime(time) })] }, i));
         }
         return jsxRuntime.jsx(Svg.G, { children: timestamps });
-    }, [showTimeStamps, duration, timeStampInterval, actualWaveformWidth, height, theme.colors]);
+    }, [showTimeStamps, duration, timeStampInterval, actualWaveformWidth, h, theme.colors]);
     // Selection overlay component
     const SelectionOverlay = React.useMemo(() => {
         if (!selection || selection[0] === selection[1])
@@ -36915,8 +35964,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         const startX = start * actualWaveformWidth;
         const endX = end * actualWaveformWidth;
         const selectionWidth = endX - startX;
-        return (jsxRuntime.jsx(Svg.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 (jsxRuntime.jsx(Svg.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 = React.useMemo(() => {
         if (!markers || markers.length === 0)
@@ -36926,16 +35975,16 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 const markerColor = marker.color || theme.colors.warning[5];
                 switch (marker.type || 'line') {
                     case 'line':
-                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: 0, x2: x, y2: height, stroke: markerColor, strokeWidth: 2, strokeOpacity: 0.8 }), marker.label && (jsxRuntime.jsx(Svg.Text, { x: x, y: -5, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: 0, x2: x, y2: h, stroke: markerColor, strokeWidth: 2, strokeOpacity: 0.8 }), marker.label && (jsxRuntime.jsx(Svg.Text, { x: x, y: -5, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
                     case 'flag':
-                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: 0, x2: x, y2: height, stroke: markerColor, strokeWidth: 1, strokeOpacity: 0.6 }), jsxRuntime.jsx(Svg.Rect, { x: x + 2, y: 2, width: marker.label ? marker.label.length * 6 + 4 : 20, height: 14, fill: markerColor, rx: 2 }), marker.label && (jsxRuntime.jsx(Svg.Text, { x: x + 4, y: 12, fill: "white", fontSize: 9, fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: 0, x2: x, y2: h, stroke: markerColor, strokeWidth: 1, strokeOpacity: 0.6 }), jsxRuntime.jsx(Svg.Rect, { x: x + 2, y: 2, width: marker.label ? marker.label.length * 6 + 4 : 20, height: 14, fill: markerColor, rx: 2 }), marker.label && (jsxRuntime.jsx(Svg.Text, { x: x + 4, y: 12, fill: "white", fontSize: 9, fontWeight: "bold", children: marker.label }))] }, index));
                     case 'dot':
-                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx("circle", { cx: x, cy: height / 2, r: 4, fill: markerColor, stroke: "white", strokeWidth: 1 }), marker.label && (jsxRuntime.jsx(Svg.Text, { x: x, y: height / 2 + 20, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx("circle", { cx: x, cy: h / 2, r: 4, fill: markerColor, stroke: "white", strokeWidth: 1 }), marker.label && (jsxRuntime.jsx(Svg.Text, { 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 = React.useMemo(() => {
         if (!showRMS || !rmsData || rmsData.length === 0)
@@ -36943,11 +35992,11 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         const processedRMS = rmsData.slice(0, normalizedPeaks.length);
         return (jsxRuntime.jsx(Svg.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 (jsxRuntime.jsx(Svg.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':
@@ -36984,17 +36033,17 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         };
     // Early return for empty state
     if (normalizedPeaks.length === 0) {
-        return (jsxRuntime.jsx(reactNative.View, { style: [style, fullWidth ? { width: '100%' } : { width }, { height, justifyContent: 'center', alignItems: 'center' }], accessibilityRole: "image", accessibilityLabel: accessibilityLabel || 'Empty waveform', ...restProps, children: jsxRuntime.jsx(Svg, { ...svgProps, children: jsxRuntime.jsx(Svg.Rect, { x: 0, y: height / 2 - 1, width: fullWidth ? '100%' : width, height: 2, fill: waveformColor, opacity: 0.3 }) }) }));
+        return (jsxRuntime.jsx(reactNative.View, { style: [style, fullWidth ? { width: '100%' } : { width: w }, { height: h, justifyContent: 'center', alignItems: 'center' }], accessibilityRole: "image", accessibilityLabel: accessibilityLabel || 'Empty waveform', ...restProps, children: jsxRuntime.jsx(Svg, { ...svgProps, children: jsxRuntime.jsx(Svg.Rect, { x: 0, y: h / 2 - 1, width: fullWidth ? '100%' : w, height: 2, fill: waveformColor, opacity: 0.3 }) }) }));
     }
     if (loading) {
-        return (jsxRuntime.jsx(WaveformSkeleton, { width: width, height: height, fullWidth: fullWidth, barsCount: maxVisibleBars || 20 }));
+        return (jsxRuntime.jsx(WaveformSkeleton, { w: w, h: h, fullWidth: fullWidth, barsCount: maxVisibleBars || 20 }));
     }
     if (error) {
         return (jsxRuntime.jsx(reactNative.View, { style: [
                 style,
-                fullWidth ? { width: '100%' } : { width },
+                fullWidth ? { width: '100%' } : { width: w },
                 {
-                    height,
+                    height: h,
                     justifyContent: 'center',
                     alignItems: 'center',
                     backgroundColor: theme.colors.error[1],
@@ -37004,7 +36053,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 }
             ], accessibilityRole: "alert", accessibilityLabel: `Waveform error: ${error}`, ...restProps, children: jsxRuntime.jsx(reactNative.Text, { style: { color: theme.colors.error[7], fontSize: 12, textAlign: 'center' }, children: error }) }));
     }
-    return (jsxRuntime.jsx(WrapperComponent, { ref: containerRef, style: [style, fullWidth ? { width: '100%' } : { width }], accessible: true, focusable: interactive, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...wrapperProps, ...restProps, children: jsxRuntime.jsxs(Svg, { ...svgProps, children: [SelectionOverlay, RMSBars, renderWaveform(), ProgressLine, TimeStamps, Markers] }) }));
+    return (jsxRuntime.jsx(WrapperComponent, { ref: containerRef, style: [style, fullWidth ? { width: '100%' } : { width: w }], accessible: true, focusable: interactive, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...wrapperProps, ...restProps, children: jsxRuntime.jsxs(Svg, { ...svgProps, children: [SelectionOverlay, RMSBars, renderWaveform(), ProgressLine, TimeStamps, Markers] }) }));
 });
 Waveform.displayName = 'Waveform';
 
@@ -37026,7 +36075,7 @@ const AudioPlayer = React.forwardRef(({ source, peaks: providedPeaks, autoPlay =
     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
@@ -37373,7 +36422,7 @@ width = 300, height = 60, color = 'primary', interactive = true, onSeek, style,
                         alignSelf: 'flex-start',
                     }, children: jsxRuntime.jsx(reactNative.Text, { style: { color: 'white', fontSize: DESIGN_TOKENS.typography.fontSize.sm }, children: "Retry" }) }))] }));
     }
-    return (jsxRuntime.jsxs(reactNative.View, { style: [{ width: '100%' }, style], children: [controlsPosition === 'top' && renderMetadata(), controlsPosition === 'top' && renderControls(), controls.waveform && peaks.length > 0 && (jsxRuntime.jsx(reactNative.View, { style: { marginVertical: DESIGN_TOKENS.spacing.sm }, children: jsxRuntime.jsx(Waveform, { peaks: peaks, width: width, height: height, color: color, progress: progress, interactive: interactive, onSeek: handleWaveformSeek, showProgressLine: true, progressLineStyle: {
+    return (jsxRuntime.jsxs(reactNative.View, { style: [{ width: '100%' }, style], children: [controlsPosition === 'top' && renderMetadata(), controlsPosition === 'top' && renderControls(), controls.waveform && peaks.length > 0 && (jsxRuntime.jsx(reactNative.View, { style: { marginVertical: DESIGN_TOKENS.spacing.sm }, children: jsxRuntime.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,
@@ -38102,14 +37151,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] = React.useState(false);
     const [isLoading, setIsLoading] = React.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];
@@ -39894,11 +38943,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;
@@ -39914,7 +38966,7 @@ function QRCode(props) {
             });
         }
     }, [copy, copyValue, toast, otherProps.copyToastMessage, otherProps.copyToastTitle]);
-    const content = (jsxRuntime.jsxs(reactNative.View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsxRuntime.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 && (jsxRuntime.jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
+    const content = (jsxRuntime.jsxs(reactNative.View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsxRuntime.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 && (jsxRuntime.jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
     if (shouldCopyOnPress) {
         return (jsxRuntime.jsx(reactNative.Pressable, { onPress: handleCopy, accessibilityLabel: accessibilityLabel || 'QR code', children: content }));
     }
@@ -40564,111 +39616,6 @@ const styles$2 = reactNative.StyleSheet.create({
     },
 });
 
-// Optional imports for web compatibility
-const LottieReact = reactNative.Platform.OS === 'web'
-    ? resolveOptionalModule('lottie-react', {
-        accessor: mod => { var _a; return (_a = mod.default) !== null && _a !== void 0 ? _a : mod; },
-    })
-    : null;
-const DotLottieReact = reactNative.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 (reactNative.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 = reactNative.UIManager === null || reactNative.UIManager === void 0 ? void 0 : reactNative.UIManager.getViewManagerConfig) === null || _a === void 0 ? void 0 : _a.call(reactNative.UIManager, 'LottieAnimationView')) !== null && _b !== void 0 ? _b : reactNative.UIManager === null || reactNative.UIManager === void 0 ? void 0 : reactNative.UIManager.LottieAnimationView) !== null && _c !== void 0 ? _c : reactNative.NativeModules === null || reactNative.NativeModules === void 0 ? void 0 : reactNative.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 = React.forwardRef(function LottieCmp(props, ref) {
-    const { source, autoPlay = true, loop = true, progress, speed = 1, style, testID, paused, resizeMode = 'contain', onAnimationFinish } = props;
-    const internalRef = React.useRef(null);
-    const nativeStatus = getNativeLottieStatus();
-    const NativeLottieView = nativeStatus.component;
-    React.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); },
-    }), []);
-    React.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 (reactNative.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 (jsxRuntime.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 (jsxRuntime.jsx(LottieReact, { animationData: source, autoplay: autoPlay, loop: loop, style: style, "data-testid": testID }));
-        }
-        else {
-            return jsxRuntime.jsx(Text, { children: "Lottie not available on web" });
-        }
-    }
-    // Native implementation using lottie-react-native
-    if (!nativeStatus.available || !NativeLottieView) {
-        return (jsxRuntime.jsx(reactNative.View, { style: [{ justifyContent: 'center', alignItems: 'center' }, style], testID: testID, children: jsxRuntime.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 (jsxRuntime.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);
@@ -41616,7 +40563,7 @@ const DEFAULT_CONTROLS = {
     autoHide: true,
     autoHideTimeout: 3000,
 };
-const Video = React.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 = React.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
@@ -41866,24 +40813,24 @@ const Video = React.forwardRef(({ source, width, height, aspectRatio = 16 / 9, p
             // 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 = React.useCallback(() => {
         if (controlsConfig && controlsConfig.autoHide) {
@@ -41987,7 +40934,6 @@ function withPressAnimation(Component, animationProps) {
  */
 const AnimatedPressable = PressAnimation;
 
-exports.AbilityCore = AbilityCore;
 exports.AccessibilityProvider = AccessibilityProvider;
 exports.Accordion = Accordion;
 exports.AmazonAppstoreBadge = AmazonAppstoreBadge;
@@ -42027,9 +40973,6 @@ exports.Button = Button;
 exports.COMPONENT_SIZES = COMPONENT_SIZES$1;
 exports.COMPONENT_SIZE_ORDER = COMPONENT_SIZE_ORDER;
 exports.Calendar = Calendar;
-exports.Can = Can;
-exports.CanWithConditions = CanWithConditions;
-exports.Cannot = Cannot;
 exports.Card = Card;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
@@ -42090,7 +41033,6 @@ exports.Heading4 = Heading4;
 exports.Heading5 = Heading5;
 exports.Heading6 = Heading6;
 exports.Highlight = Highlight;
-exports.HoverCard = HoverCard;
 exports.HuaweiAppGalleryBadge = HuaweiAppGalleryBadge;
 exports.I18nProvider = I18nProvider;
 exports.Icon = Icon;
@@ -42111,7 +41053,6 @@ exports.ListGroupDivider = ListGroupDivider;
 exports.ListGroupItem = ListGroupItem;
 exports.Loader = Loader;
 exports.LoadingOverlay = LoadingOverlay;
-exports.Lottie = Lottie;
 exports.MacAppStoreButton = MacAppStoreButton;
 exports.Mark = Mark;
 exports.Markdown = Markdown;
@@ -42128,7 +41069,6 @@ exports.MiniCalendar = MiniCalendar;
 exports.Month = Month;
 exports.MonthPicker = MonthPicker;
 exports.MonthPickerInput = MonthPickerInput;
-exports.NavigationProgress = NavigationProgress;
 exports.Notice = Notice;
 exports.NumberInput = NumberInput;
 exports.Overlay = Overlay;
@@ -42136,10 +41076,6 @@ exports.OverlayProvider = OverlayProvider;
 exports.P = P;
 exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
-exports.PermissionBuilder = PermissionBuilder;
-exports.PermissionGate = PermissionGate;
-exports.PermissionPatterns = PermissionPatterns;
-exports.PermissionProvider = PermissionProvider;
 exports.PhoneInput = PhoneInput;
 exports.PinInput = PinInput;
 exports.PlatformBlocksProvider = PlatformBlocksProvider;
@@ -42152,9 +41088,7 @@ exports.RadioGroup = RadioGroup;
 exports.RangeSlider = RangeSlider;
 exports.Rating = Rating;
 exports.RedditJoinBadge = RedditJoinBadge;
-exports.RichTextEditor = RichTextEditor;
 exports.Ring = Ring;
-exports.RoleBuilder = RoleBuilder;
 exports.Row = Row;
 exports.SIZE_SCALES = SIZE_SCALES;
 exports.Search = Search;
@@ -42212,9 +41146,7 @@ exports.createSound = createSound;
 exports.createSpotlightStore = createSpotlightStore;
 exports.createTheme = createTheme;
 exports.debounce = debounce$1;
-exports.defineAbility = defineAbility;
 exports.defineAppLayout = defineAppLayout;
-exports.defineRoleAbility = defineRoleAbility;
 exports.directSpotlight = directSpotlight;
 exports.extractDisclaimerProps = extractDisclaimerProps;
 exports.factory = factory;
@@ -42235,11 +41167,9 @@ exports.globalHotkeys = globalHotkeys;
 exports.measureAsyncPerformance = measureAsyncPerformance;
 exports.measureElement = measureElement;
 exports.measurePerformance = measurePerformance;
-exports.navigationProgress = navigationProgress;
 exports.onDialogsRequested = onDialogsRequested;
 exports.onSpotlightRequested = onSpotlightRequested;
 exports.onToastsRequested = onToastsRequested;
-exports.permissions = permissions;
 exports.pointInRect = pointInRect;
 exports.polymorphicFactory = polymorphicFactory;
 exports.px = px;
@@ -42250,7 +41180,6 @@ exports.resolveResponsiveValue = resolveResponsiveValue;
 exports.resolveSize = resolveSize;
 exports.spotlight = spotlight;
 exports.throttle = throttle;
-exports.useAbility = useAbility;
 exports.useAccessibility = useAccessibility;
 exports.useAppLayoutContext = useAppLayoutContext;
 exports.useAppShell = useAppShell;
@@ -42280,7 +41209,6 @@ exports.useOptionalFormContext = useOptionalFormContext;
 exports.useOverlay = useOverlay;
 exports.useOverlayApi = useOverlayApi;
 exports.useOverlays = useOverlays;
-exports.usePermissions = usePermissions;
 exports.usePopoverPositioning = usePopoverPositioning;
 exports.useSimpleDialog = useSimpleDialog;
 exports.useSound = useSound;
@@ -42295,8 +41223,6 @@ exports.useToast = useToast;
 exports.useToastApi = useToastApi;
 exports.useToggleColorScheme = useToggleColorScheme;
 exports.useTooltipPositioning = useTooltipPositioning;
-exports.withCan = withCan;
-exports.withCannot = withCannot;
 exports.withDisclaimer = withDisclaimer;
 exports.withPressAnimation = withPressAnimation;
 //# sourceMappingURL=index.js.map