@platform-blocks/ui 0.6.0 → 0.7.0

package/lib/esm/index.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useContext, useMemo, useEffect, useState, useRef, useCallback, forwardRef, memo, useReducer, isValidElement, cloneElement, useImperativeHandle } from 'react';
-import { Platform, Modal, StyleSheet, View, Pressable, I18nManager, Keyboard, Dimensions, Text as Text$1, AccessibilityInfo, findNodeHandle, Animated as Animated$1, Easing, AppState, useWindowDimensions, PanResponder, BackHandler, Appearance, PixelRatio, NativeModules, TextInput, ScrollView, KeyboardAvoidingView, TouchableOpacity, FlatList, Linking, Image as Image$1, InteractionManager, StatusBar as StatusBar$1, UIManager } from 'react-native';
+import { Platform, Modal, StyleSheet, View, Pressable, I18nManager, Keyboard, Dimensions, Text as Text$1, AccessibilityInfo, findNodeHandle, Animated as Animated$1, Easing, AppState, useWindowDimensions, PanResponder, BackHandler, Appearance, PixelRatio, NativeModules, TextInput, ScrollView, KeyboardAvoidingView, TouchableOpacity, FlatList, Linking, Image as Image$1, InteractionManager, StatusBar as StatusBar$1 } from 'react-native';
 import Animated, { useSharedValue, withRepeat, withTiming, cancelAnimation, useAnimatedStyle, interpolate, Extrapolation, withSpring, Easing as Easing$1, runOnJS, withSequence, withDelay, interpolateColor, useDerivedValue, ReduceMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets, SafeAreaInsetsContext, SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
 import Svg, { Path, Defs, LinearGradient, Stop, Circle, Line, G, Text as Text$2, Rect, RadialGradient, ClipPath } from 'react-native-svg';
@@ -706,16 +706,16 @@ const DARK_THEME = {
             '#F2F2F7'
         ],
         highlight: [
-            '#2A2313',
-            '#3D3320',
-            '#4F422D',
-            '#61523A',
-            '#736247',
-            '#FBBF24', // Keep same base as light mode for consistency
-            '#FCD34D',
-            '#FDE68A',
-            '#FEF3C7',
-            '#FFFBEB'
+            '#1E3A5F', // Deep blue
+            '#1E4976', // 
+            '#1D5A8F', // 
+            '#2563EB', // Bright blue
+            '#3B82F6', // Primary blue
+            '#60A5FA', // Light blue
+            '#93C5FD', // 
+            '#BFDBFE', // 
+            '#DBEAFE', // 
+            '#EFF6FF' // Very light blue
         ],
         pink: [
             '#831843', '#9D174D', '#BE185D', '#DB2777', '#EC4899',
@@ -771,9 +771,9 @@ const DARK_THEME = {
     },
     states: {
         focusRing: 'rgba(10,132,255,0.55)',
-        textSelection: 'rgba(251, 191, 36, 0.2)', // Slightly more subtle for dark mode
-        highlightText: '#FDE68A', // highlight[7] for good contrast on dark
-        highlightBackground: 'rgba(97, 82, 58, 0.8)' // Darker highlight[3] with more opacity
+        textSelection: 'rgba(10, 132, 255, 0.25)', // Primary blue for selection
+        highlightText: '#60A5FA', // primary[4] - bright blue for good contrast on dark
+        highlightBackground: 'rgba(59, 130, 246, 0.35)' // primary[5] with transparency
     },
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
     fontSizes: {
@@ -862,6 +862,8 @@ const DARK_THEME = {
 const optionalModuleCache = new Map();
 const isDev = typeof __DEV__ !== 'undefined' ? __DEV__ : process.env.NODE_ENV !== 'production';
 // Metro bundler requires static string literals for require; keep all optional modules here.
+// NOTE: Do NOT add react-syntax-highlighter here - it causes Metro to fail on native
+// when the package isn't installed. Instead, pass the loader dynamically from web-only code.
 const optionalModuleLoaders = {
     'react-native': () => require('react-native'),
     'expo-clipboard': () => require('expo-clipboard'),
@@ -870,21 +872,9 @@ const optionalModuleLoaders = {
     'expo-document-picker': () => require('expo-document-picker'),
     'react-native-webview': () => require('react-native-webview'),
     'lodash.debounce': () => require('lodash.debounce'),
-    'react-syntax-highlighter': () => require('react-syntax-highlighter'),
-    'react-syntax-highlighter/dist/esm/languages/prism/jsx': () => require('react-syntax-highlighter/dist/esm/languages/prism/jsx'),
-    'react-syntax-highlighter/dist/esm/languages/prism/tsx': () => require('react-syntax-highlighter/dist/esm/languages/prism/tsx'),
-    'react-syntax-highlighter/dist/esm/languages/prism/typescript': () => require('react-syntax-highlighter/dist/esm/languages/prism/typescript'),
-    'react-syntax-highlighter/dist/esm/languages/prism/javascript': () => require('react-syntax-highlighter/dist/esm/languages/prism/javascript'),
-    'react-syntax-highlighter/dist/esm/languages/prism/json': () => require('react-syntax-highlighter/dist/esm/languages/prism/json'),
-    'react-syntax-highlighter/dist/esm/languages/prism/bash': () => require('react-syntax-highlighter/dist/esm/languages/prism/bash'),
-    'react-syntax-highlighter/dist/esm/styles/prism/prism': () => require('react-syntax-highlighter/dist/esm/styles/prism/prism'),
-    'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus': () => require('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus'),
     'expo-audio': () => require('expo-audio'),
     'react-native-gesture-handler': () => require('react-native-gesture-handler'),
     'expo-status-bar': () => require('expo-status-bar'),
-    'lottie-react': () => require('lottie-react'),
-    '@lottiefiles/dotlottie-react': () => require('@lottiefiles/dotlottie-react'),
-    'lottie-react-native': () => require('lottie-react-native'),
     'expo-navigation-bar': () => require('expo-navigation-bar'),
 };
 /**
@@ -1972,7 +1962,6 @@ function resolveComponentSize(value, scale, options = {}) {
     }
     const firstAvailable = allowed.find(key => scale[key] !== undefined);
     if (firstAvailable && scale[firstAvailable] !== undefined) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return scale[firstAvailable];
     }
     throw new Error('resolveComponentSize: no matching size found in provided scale.');
@@ -2334,18 +2323,17 @@ function extractSpacingProps(props) {
  *
  * @param props - The layout properties object
  * @param props.fullWidth - When true, sets width to 100%
- * @param props.w - Shorthand width property (overrides fullWidth)
- * @param props.width - Specific width value (overrides fullWidth and w)
- * @param props.height - Height value
- * @param props.maxWidth - Maximum width constraint
- * @param props.minWidth - Minimum width constraint
- * @param props.maxHeight - Maximum height constraint
- * @param props.minHeight - Minimum height constraint
+ * @param props.w - Width property (overrides fullWidth)
+ * @param props.h - Height value
+ * @param props.maxW - Maximum width constraint
+ * @param props.minW - Minimum width constraint
+ * @param props.maxH - Maximum height constraint
+ * @param props.minH - Minimum height constraint
  *
  * @returns A partial ViewStyle object containing the computed layout styles
  *
  * @remarks
- * Property precedence for width: width > w > fullWidth
+ * Property precedence for width: w > fullWidth
  * The function processes width properties in order of specificity, with more specific
  * properties overriding more general ones.
  */
@@ -2355,43 +2343,38 @@ function getLayoutStyles(props) {
     if (props.fullWidth) {
         styles.width = '100%';
     }
-    // Handle shorthand width prop first
+    // Handle width prop (overrides fullWidth)
     if (props.w !== undefined) {
         styles.width = props.w;
     }
-    // Handle specific dimensions (override fullWidth and w if specified)
-    if (props.width !== undefined) {
-        styles.width = props.width;
-    }
-    if (props.height !== undefined) {
-        styles.height = props.height;
+    if (props.h !== undefined) {
+        styles.height = props.h;
     }
-    if (props.maxWidth !== undefined) {
-        styles.maxWidth = props.maxWidth;
+    if (props.maxW !== undefined) {
+        styles.maxWidth = props.maxW;
     }
-    if (props.minWidth !== undefined) {
-        styles.minWidth = props.minWidth;
+    if (props.minW !== undefined) {
+        styles.minWidth = props.minW;
     }
-    if (props.maxHeight !== undefined) {
-        styles.maxHeight = props.maxHeight;
+    if (props.maxH !== undefined) {
+        styles.maxHeight = props.maxH;
     }
-    if (props.minHeight !== undefined) {
-        styles.minHeight = props.minHeight;
+    if (props.minH !== undefined) {
+        styles.minHeight = props.minH;
     }
     return styles;
 }
 // Helper to extract layout props from component props
 function extractLayoutProps(props) {
-    const { fullWidth, w, width, height, maxWidth, minWidth, maxHeight, minHeight, ...otherProps } = props;
+    const { fullWidth, w, h, maxW, minW, maxH, minH, ...otherProps } = props;
     const layoutProps = {
         fullWidth,
         w,
-        width,
-        height,
-        maxWidth,
-        minWidth,
-        maxHeight,
-        minHeight
+        h,
+        maxW,
+        minW,
+        maxH,
+        minH
     };
     return { layoutProps, otherProps };
 }
@@ -2660,7 +2643,7 @@ async function measureAsyncPerformance(name, fn) {
 const OVERLAY_CACHE_LIMIT = 200;
 const overlayPositionCache = new Map();
 const formatNumber = (value) => Number.isFinite(value) ? Math.round(value * 100) / 100 : 0;
-const createOverlayCacheKey = (anchorX, anchorY, anchorWidth, anchorHeight, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary) => {
+const createOverlayCacheKey = (anchorX, anchorY, anchorWidth, anchorHeight, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary, matchAnchorWidth) => {
     return [
         formatNumber(anchorX),
         formatNumber(anchorY),
@@ -2677,6 +2660,7 @@ const createOverlayCacheKey = (anchorX, anchorY, anchorWidth, anchorHeight, over
         flip ? '1' : '0',
         shift ? '1' : '0',
         formatNumber(boundary),
+        matchAnchorWidth ? '1' : '0',
         Platform.OS,
     ].join('|');
 };
@@ -2722,11 +2706,12 @@ registerViewportListeners();
  * Enhanced overlay positioning that prevents off-screen rendering with intelligent caching
  */
 function calculateOverlayPositionEnhanced(anchor, overlay, options = {}) {
-    const { placement = 'auto', offset = 8, viewport = getViewport(), strategy = 'fixed', flip = true, shift = true, boundary = 8, fallbackPlacements = ['bottom', 'top', 'right', 'left'] } = options;
+    const { placement = 'auto', offset = 8, viewport = getViewport(), strategy = 'fixed', flip = true, shift = true, boundary = 8, fallbackPlacements = ['bottom', 'top', 'right', 'left'], matchAnchorWidth = false, } = options;
     // If overlay height is unknown/small (pre-measure), use a heuristic height for decision-making
     // This helps avoid choosing "bottom" when near the bottom of the viewport.
     const heuristicHeight = Math.max(overlay.height || 0, 240);
-    const overlayWidth = overlay.width;
+    // When matchAnchorWidth is true, use anchor width for overlay width calculations
+    const overlayWidth = matchAnchorWidth ? anchor.width : overlay.width;
     const overlayHeight = overlay.height > 0 ? overlay.height : heuristicHeight;
     // Account for scroll if using absolute positioning
     const scrollX = (Platform.OS === 'web' && strategy === 'absolute')
@@ -2737,7 +2722,7 @@ function calculateOverlayPositionEnhanced(anchor, overlay, options = {}) {
     const anchorX = anchor.x + scrollX;
     const anchorY = anchor.y + scrollY;
     // Check cache first
-    const cacheKey = createOverlayCacheKey(anchorX, anchorY, anchor.width, anchor.height, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary);
+    const cacheKey = createOverlayCacheKey(anchorX, anchorY, anchor.width, anchor.height, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary, matchAnchorWidth);
     const cached = getCachedOverlayPosition(cacheKey);
     if (cached) {
         return cached;
@@ -2805,10 +2790,14 @@ function calculateOverlayPositionEnhanced(anchor, overlay, options = {}) {
     // If enforcement moved the overlay to the opposite vertical side to avoid covering the anchor,
     // reflect that in the returned placement so arrows/styles are consistent.
     const resolvedPlacement = adjustPlacementIfMoved(finalPlacement, result, anchorRect);
+    // When matchAnchorWidth is true, preserve anchor width without constraining to maxWidth
+    const computedFinalWidth = matchAnchorWidth
+        ? anchor.width
+        : Math.min(result.finalWidth || overlay.width, result.maxWidth || overlay.width);
     const finalResult = {
         ...result,
         placement: resolvedPlacement,
-        finalWidth: Math.min(result.finalWidth || overlay.width, result.maxWidth || overlay.width),
+        finalWidth: computedFinalWidth,
         finalHeight: Math.min(result.finalHeight || overlay.height, result.maxHeight || overlay.height),
     };
     // Cache the result
@@ -3565,9 +3554,14 @@ const Text = (allProps) => {
     }
     // Platform-specific rendering
     if (Platform.OS === 'web' && isHTMLVariant(htmlTag)) {
-        const webStyles = convertToWebStyles([textStyles, spacingStyles, style,
-            // make sure text is side to side
-            { display: 'inline' }
+        const styleArray = Array.isArray(style) ? style : [style];
+        const hasDisplayOverride = styleArray.some((item) => item && ((item.display !== undefined) || (item.whiteSpace !== undefined)));
+        const webStyles = convertToWebStyles([
+            textStyles,
+            spacingStyles,
+            style,
+            // default to inline unless caller explicitly requests display/whitespace behavior
+            ...(hasDisplayOverride ? [] : [{ display: 'inline' }]),
         ]);
         // Handle text selection for web
         if (!selectable) {
@@ -6243,7 +6237,7 @@ const Button = (allProps) => {
     // Use the actual measured width instead of character-based estimates
     const layoutStyles = {
         ...baseLayoutStyles,
-        ...(loading && measuredWidth && !layoutProps.width && !layoutProps.w && !layoutProps.fullWidth
+        ...(loading && measuredWidth && !layoutProps.w && !layoutProps.fullWidth
             ? { width: measuredWidth, minWidth: measuredWidth }
             : {})
     };
@@ -6677,18 +6671,22 @@ const useSafeSafeAreaInsets = () => {
         return { top: 0, bottom: 0, left: 0, right: 0 };
     }
 };
-function Dialog({ visible, variant = 'modal', title, children, closable = true, backdrop = true, backdropClosable = true, shouldClose = false, onClose, width, height, style, bottomSheetSwipeZone = 'container', }) {
+function Dialog({ visible, variant = 'modal', title, children, closable = true, backdrop = true, backdropClosable = true, shouldClose = false, onClose, w, h, radius, style, showHeader = true, bottomSheetSwipeZone = 'container', }) {
     const theme = useTheme();
     const { isRTL } = useDirection();
     const insets = useSafeSafeAreaInsets();
     const { width: screenWidth, height: screenHeight } = useWindowDimensions();
     const horizontalMargin = 32; // safety margin so dialog never touches edges
     const isNativePlatform = Platform.OS === 'ios' || Platform.OS === 'android';
-    const defaultModalMaxWidth = Math.min((width || 500), Math.max(200, screenWidth - horizontalMargin));
+    const defaultModalMaxWidth = Math.min((w || 500), Math.max(200, screenWidth - horizontalMargin));
     const modalEffectiveWidth = variant !== 'modal'
         ? undefined
         : Math.min(defaultModalMaxWidth, screenWidth - horizontalMargin);
-    const bottomSheetMaxWidth = Math.min(width ? width : (isNativePlatform ? 720 : Math.min(600, screenWidth - horizontalMargin)), screenWidth);
+    const bottomSheetMaxWidth = Math.min(w ? w : (isNativePlatform ? 720 : Math.min(600, screenWidth - horizontalMargin)), screenWidth);
+    const resolvedRadius = radius !== null && radius !== void 0 ? radius : (variant === 'bottomsheet' ? 20 : 16);
+    const resolvedMaxHeight = variant === 'bottomsheet'
+        ? (h !== null && h !== void 0 ? h : Math.max(200, screenHeight - insets.top - 24))
+        : (variant === 'fullscreen' ? '100%' : (h || '90%'));
     const invokeOnClose = useCallback(() => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [onClose]);
@@ -6704,23 +6702,25 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     }, visible && closable);
     // Pan responder for bottomsheet swipe-to-dismiss
     const panResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponderCapture: () => {
+            // Never capture on touch start — let events reach children (buttons) first
+            return false;
+        },
         onStartShouldSetPanResponder: () => {
-            // Only allow responder when swipe gestures are enabled for bottom sheet
+            // Claim in bubble phase (after children had their chance to claim).
+            // If a Button/Pressable already claimed the touch, this won't fire.
+            // If nothing claimed (e.g. drag handle, empty space), we take over for swipe tracking.
             return variant === 'bottomsheet' && bottomSheetSwipeZone !== 'none';
         },
-        onStartShouldSetPanResponderCapture: () => {
-            // Capture immediately for bottom sheet to ensure gesture responsiveness on native
-            return variant === 'bottomsheet' && bottomSheetSwipeZone !== 'none';
+        onMoveShouldSetPanResponderCapture: () => {
+            // Never capture moves — let children handle their own gestures
+            return false;
         },
         onMoveShouldSetPanResponder: (_, gestureState) => {
-            // Allow movement in any direction but prioritize downward movement
+            // Claim the gesture when there's a clear vertical swipe movement
             return variant === 'bottomsheet' && bottomSheetSwipeZone !== 'none' && (Math.abs(gestureState.dy) > Math.abs(gestureState.dx) &&
                 Math.abs(gestureState.dy) > 2);
         },
-        onMoveShouldSetPanResponderCapture: () => {
-            // Already captured on start; keep returning true for consistency
-            return variant === 'bottomsheet' && bottomSheetSwipeZone !== 'none';
-        },
         onPanResponderGrant: (evt) => {
             // Prevent default browser behavior (text selection, etc.) on web
             if (Platform.OS === 'web') {
@@ -6744,20 +6744,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) => {
@@ -6914,8 +6906,8 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     }, [shouldClose]);
     const isDark = theme.colorScheme === 'dark';
     const surfaceColor = isDark ? theme.backgrounds.surface : '#FFFFFF';
-    const borderColor = isDark ? theme.colors.gray[6] : '#E1E3E6';
-    const headerBg = isDark ? theme.backgrounds.subtle : surfaceColor;
+    isDark ? theme.colors.gray[6] : '#E1E3E6';
+    const headerBg = surfaceColor;
     const contentBg = surfaceColor;
     const dynamicStyles = StyleSheet.create({
         backdrop: {
@@ -6926,24 +6918,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',
@@ -6969,24 +6965,27 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
                     }
                     : Platform.OS === 'android' && variant !== 'fullscreen'
                         ? { elevation: 16, }
-                        : {
-                            boxShadow: 'none',
-                            height: '100%',
-                            position: 'absolute',
-                        }),
+                        : variant === 'fullscreen'
+                            ? {
+                                boxShadow: 'none',
+                                height: '100%',
+                                position: 'absolute',
+                            }
+                            : { boxShadow: 'none' }),
         }, // Allow boxShadow on web
         header: {
             alignItems: 'center',
-            backgroundColor: headerBg,
-            borderBottomColor: borderColor,
-            borderBottomWidth: variant === 'fullscreen' ? 0 : 1,
+            backgroundColor: showHeader ? headerBg : 'transparent',
+            // borderBottomColor: showHeader ? borderColor : 'transparent',
+            // borderBottomWidth: showHeader && variant !== 'fullscreen' ? 1 : 0,
             flexDirection: isRTL ? 'row-reverse' : 'row',
             justifyContent: 'space-between',
             padding: 20,
+            paddingBottom: title ? 0 : 20,
         },
         content: {
-            // For modal variant, remove flex to allow fit-content behavior
-            ...(variant === 'modal' ? {} : { flex: 1 }),
+            // Only fullscreen content should stretch
+            ...(variant === 'fullscreen' ? { flex: 1 } : {}),
             alignSelf: 'stretch',
             backgroundColor: contentBg,
             padding: variant === 'fullscreen' ? 0 : 20,
@@ -7042,8 +7041,10 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     });
     const bottomSheetAnimatedStyle = useAnimatedStyle(() => {
         if (variant === 'bottomsheet') {
+            // Clamp to 0 minimum to prevent seeing "under" the sheet
+            const clampedY = Math.max(0, slideAnim.value);
             return {
-                transform: [{ translateY: slideAnim.value }],
+                transform: [{ translateY: clampedY }],
             };
         }
         return {};
@@ -7060,7 +7061,7 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
             animatedStyle = bottomSheetAnimatedStyle;
         }
         return (jsxs(Animated.View, { style: [dynamicStyles.modalContainer, animatedStyle], ...(variant === 'bottomsheet' && bottomSheetSwipeZone === 'container' && panHandlers ? panHandlers : {}), children: [variant === 'bottomsheet' && (jsx(View, { style: dynamicStyles.dragHandleContainer, ...(bottomSheetSwipeZone === 'handle' && panHandlers ? panHandlers : {}), children: jsx(View, { style: dynamicStyles.dragHandle }) })), (title !== null &&
-                    title && closable) && (jsxs(View, { style: dynamicStyles.header, children: [jsx(Text, { variant: "h3", color: "text", children: title || '' }), closable && (jsx(Button, { variant: "ghost", onPress: handleClose, style: dynamicStyles.closeButton, children: jsx(Icon, { name: "x", size: "md" }) }))] })), jsx(View, { style: [dynamicStyles.content, style], children: children })] }));
+                    title && closable) && (jsxs(View, { style: dynamicStyles.header, children: [jsx(Text, { variant: "h3", color: "text", children: title || '' }), closable && variant !== 'bottomsheet' && (jsx(Button, { variant: "ghost", onPress: handleClose, style: dynamicStyles.closeButton, children: jsx(Icon, { name: "x", size: "md" }) }))] })), jsx(View, { style: [dynamicStyles.content, style], children: children })] }));
     };
     return (jsx(Modal, { visible: visible, transparent: true, animationType: "none", statusBarTranslucent: variant === 'fullscreen', children: jsxs(Animated.View, { style: [
                 dynamicStyles.backdrop,
@@ -7269,7 +7270,7 @@ function DialogRenderer() {
         return null;
     // Render the topmost dialog
     const topDialog = dialogs[dialogs.length - 1];
-    return (jsx(Dialog, { visible: true, variant: topDialog.variant, title: topDialog.title, closable: topDialog.closable, backdrop: topDialog.backdrop, backdropClosable: topDialog.backdropClosable, shouldClose: topDialog.isClosing, onClose: () => removeDialog(topDialog.id), children: topDialog.content }));
+    return (jsx(Dialog, { visible: true, variant: topDialog.variant, title: topDialog.title, closable: topDialog.closable, backdrop: topDialog.backdrop, backdropClosable: topDialog.backdropClosable, shouldClose: topDialog.isClosing, onClose: () => removeDialog(topDialog.id), w: topDialog.w, h: topDialog.h, radius: topDialog.radius, style: topDialog.style, showHeader: topDialog.showHeader, children: topDialog.content }));
 }
 
 const Flex = factory((props, ref) => {
@@ -8354,7 +8355,14 @@ const getContrastPreference = () => {
         return 'less';
     return 'no-preference';
 };
-const getColorScheme = () => { var _a, _b; return (_b = (_a = Appearance === null || Appearance === void 0 ? void 0 : Appearance.getColorScheme) === null || _a === void 0 ? void 0 : _a.call(Appearance)) !== null && _b !== void 0 ? _b : 'no-preference'; };
+const getColorScheme = () => {
+    var _a;
+    const scheme = (_a = Appearance === null || Appearance === void 0 ? void 0 : Appearance.getColorScheme) === null || _a === void 0 ? void 0 : _a.call(Appearance);
+    // Handle 'unspecified' from newer React Native versions
+    if (scheme === 'light' || scheme === 'dark')
+        return scheme;
+    return 'no-preference';
+};
 const getReducedMotion = async () => {
     if (Platform.OS === 'web') {
         if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
@@ -8579,7 +8587,13 @@ function useDeviceInfo(options = {}) {
     useEffect(() => {
         var _a;
         const colorSubscription = (_a = Appearance === null || Appearance === void 0 ? void 0 : Appearance.addChangeListener) === null || _a === void 0 ? void 0 : _a.call(Appearance, ({ colorScheme: scheme }) => {
-            setColorScheme(scheme !== null && scheme !== void 0 ? scheme : 'no-preference');
+            // Handle 'unspecified' from newer React Native versions
+            if (scheme === 'light' || scheme === 'dark') {
+                setColorScheme(scheme);
+            }
+            else {
+                setColorScheme('no-preference');
+            }
         });
         const mediaListeners = [];
         let boldSubscription;
@@ -9124,7 +9138,7 @@ function SpotlightRoot({ query, onQueryChange, children, opened = false, onClose
     const targetWidth = Math.min(560, Math.max(280, screenWidth - horizontalMargin));
     // (Hotkey registration moved to main Spotlight component for access to store.toggle())
     const fullscreen = shouldUseModal;
-    return (jsx(Dialog, { visible: opened, onClose: onClose, variant: fullscreen ? 'fullscreen' : 'modal', backdrop: true, backdropClosable: true, width: fullscreen ? undefined : targetWidth, title: null, style: [
+    return (jsx(Dialog, { visible: opened, onClose: onClose, variant: fullscreen ? 'fullscreen' : 'modal', backdrop: true, backdropClosable: true, w: fullscreen ? undefined : targetWidth, title: null, style: [
             styles$e.spotlightModal,
             fullscreen && { width: '100%', height: '100%', maxHeight: '100%', borderRadius: 0, position: 'fixed', top: 0, left: 0 },
             !fullscreen && {
@@ -9686,6 +9700,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;
@@ -9732,12 +9763,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);
@@ -10791,7 +10824,7 @@ const Masonry = factory((props, ref) => {
     };
     const containerStyle = {
         ...spacingStyle,
-        ...style,
+        ...StyleSheet.flatten(style),
     };
     // Show loading state
     if (loading) {
@@ -11861,9 +11894,10 @@ const Row = ({ direction = 'row', gap = 'sm', ...props }) => {
 };
 /**
  * Column component - alias for Flex with direction="column"
+ * Defaults to fullWidth={true} since vertical layouts typically fill available width
  */
-const Column = ({ direction = 'column', gap = 'sm', ...props }) => {
-    return jsx(Flex, { direction: direction, gap: gap, ...props });
+const Column = ({ direction = 'column', gap = 'sm', fullWidth = true, ...props }) => {
+    return jsx(Flex, { direction: direction, gap: gap, fullWidth: fullWidth, ...props });
 };
 Row.displayName = 'Row';
 
@@ -13978,35 +14012,101 @@ function createNativeHighlighter(theme, isDark, variant = 'code', overrides) {
     };
 }
 
-// Prism light build for JSX/TSX (react-syntax-highlighter)
+// Syntax highlighter - only loaded on web, native uses built-in tokenizer
+// These are initialized lazily on first use to avoid Metro bundling issues
 let PrismSyntaxHighlighter = null;
 let prismLightTheme = null;
 let prismDarkTheme = null;
-if (Platform.OS === 'web') {
-    PrismSyntaxHighlighter = resolveOptionalModule('react-syntax-highlighter', {
-        accessor: (module) => module.PrismLight,
-        devWarning: 'react-syntax-highlighter not found, CodeBlock will use basic formatting',
-    });
-    if (PrismSyntaxHighlighter) {
-        const registerLanguage = (moduleId, name) => {
-            const languageModule = resolveOptionalModule(moduleId, { accessor: (mod) => mod.default });
-            if (languageModule) {
-                PrismSyntaxHighlighter.registerLanguage(name, languageModule);
+let syntaxHighlighterInitialized = false;
+// Use indirect require via new Function to prevent Metro from statically analyzing imports
+// Metro bundles ALL require() calls it finds, even in try-catch blocks
+// new Function() creates a runtime-evaluated require that Metro can't see
+const safeRequire = (() => {
+    try {
+        // This creates: function(moduleName) { return require(moduleName); }
+        // The string 'require' is not statically analyzable by Metro
+        return new Function('moduleName', 'return require(moduleName)');
+    }
+    catch (_a) {
+        return null;
+    }
+})();
+function initSyntaxHighlighter() {
+    if (syntaxHighlighterInitialized)
+        return;
+    syntaxHighlighterInitialized = true;
+    // Only attempt to load on web
+    if (Platform.OS !== 'web')
+        return;
+    if (!safeRequire)
+        return;
+    try {
+        const rsh = safeRequire('react-syntax-highlighter');
+        PrismSyntaxHighlighter = rsh.PrismLight;
+        if (PrismSyntaxHighlighter) {
+            // Register languages
+            try {
+                const jsx = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/jsx').default;
+                PrismSyntaxHighlighter.registerLanguage('jsx', jsx);
             }
-        };
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/jsx', 'jsx');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/tsx', 'tsx');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/typescript', 'typescript');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/javascript', 'javascript');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/json', 'json');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/bash', 'bash');
-        prismLightTheme = resolveOptionalModule('react-syntax-highlighter/dist/esm/styles/prism/prism', {
-            accessor: (mod) => mod.default,
-        });
-        prismDarkTheme = resolveOptionalModule('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus', {
-            accessor: (mod) => mod.default,
-            devWarning: 'Failed to load prism vsc-dark-plus theme, falling back to prism',
-        });
+            catch (_a) {
+                // Language not available
+            }
+            try {
+                const tsx = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/tsx').default;
+                PrismSyntaxHighlighter.registerLanguage('tsx', tsx);
+            }
+            catch (_b) {
+                // Language not available
+            }
+            try {
+                const ts = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/typescript').default;
+                PrismSyntaxHighlighter.registerLanguage('typescript', ts);
+            }
+            catch (_c) {
+                // Language not available
+            }
+            try {
+                const js = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/javascript').default;
+                PrismSyntaxHighlighter.registerLanguage('javascript', js);
+            }
+            catch (_d) {
+                // Language not available
+            }
+            try {
+                const json = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/json').default;
+                PrismSyntaxHighlighter.registerLanguage('json', json);
+            }
+            catch (_e) {
+                // Language not available
+            }
+            try {
+                const bash = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/bash').default;
+                PrismSyntaxHighlighter.registerLanguage('bash', bash);
+            }
+            catch (_f) {
+                // Language not available
+            }
+            // Load themes
+            try {
+                prismLightTheme = safeRequire('react-syntax-highlighter/dist/esm/styles/prism/prism').default;
+            }
+            catch (_g) {
+                // Theme not available
+            }
+            try {
+                prismDarkTheme = safeRequire('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus').default;
+            }
+            catch (_h) {
+                // Theme not available
+            }
+        }
+    }
+    catch (_j) {
+        // react-syntax-highlighter not installed, will use native fallback
+        if (__DEV__) {
+            console.warn('[platform-blocks] react-syntax-highlighter not found, CodeBlock will use basic formatting');
+        }
     }
 }
 const NO_HIGHLIGHTS = new Set();
@@ -14230,6 +14330,8 @@ const FloatingCopyControls = ({ visible, code, onCopy, topOffset, isWeb }) => (j
     }, children: jsx(CopyButton, { value: code, onCopy: onCopy, iconOnly: true, size: "sm", tooltip: "Copy code", tooltipPosition: "left", style: { minHeight: 32, minWidth: 32 } }) }));
 const CodeBlock = (props) => {
     var _a, _b, _c;
+    // Initialize syntax highlighter on first render (web only)
+    React__default.useMemo(() => initSyntaxHighlighter(), []);
     const { children, title, fileName, fileIcon, language = 'tsx', showLineNumbers = false, highlight = true, fullWidth = true, showCopyButton = true, onCopy, style, textStyle, titleStyle, highlightLines, spoiler = false, spoilerMaxHeight = 160, variant = 'code', promptSymbol = '$', githubUrl, fileHeader = false, colors, wrap = true, ...rest } = props;
     const { spacingProps, otherProps } = extractSpacingProps(rest);
     const spacingStyles = getSpacingStyles(spacingProps);
@@ -14244,6 +14346,7 @@ const CodeBlock = (props) => {
     const [hovered, setHovered] = React__default.useState(false);
     const [codeHeight, setCodeHeight] = React__default.useState(null);
     const isWeb = Platform.OS === 'web';
+    const webWhitespaceStyle = React__default.useMemo(() => (isWeb ? { whiteSpace: wrap ? 'pre-wrap' : 'pre', display: 'block' } : null), [isWeb, wrap]);
     const showFloatingCopy = showCopyButton && !title && !fileName;
     const showCopyVisible = !isWeb ? showFloatingCopy : showFloatingCopy && hovered;
     const codeData = React__default.useMemo(() => {
@@ -14277,6 +14380,7 @@ const CodeBlock = (props) => {
         boxSizing: 'border-box',
         paddingLeft: showLineNumbers ? 0 : 12,
         paddingRight: showLineNumbers ? 0 : 12,
+        whiteSpace: wrap ? 'pre-wrap' : 'pre',
     }), [showLineNumbers, wrap]);
     const highlightedLineStyle = React__default.useMemo(() => ({
         backgroundColor: highlightBackgroundColor,
@@ -14288,6 +14392,18 @@ const CodeBlock = (props) => {
     const tokenLines = React__default.useMemo(() => (highlight ? nativeHighlighter(codeData.transformed) : null), [highlight, nativeHighlighter, codeData.transformed]);
     const shouldVirtualizeNative = !isWeb && codeData.lineCount >= LONG_LIST_THRESHOLD;
     const lineHeight = (_c = styles.codeText.lineHeight) !== null && _c !== void 0 ? _c : 18;
+    const normalizeTokenText = React__default.useCallback((text, tokenIndex) => {
+        if (!isWeb || !text)
+            return text;
+        const replaceSpaces = (value) => value.replace(/\t/g, '  ').replace(/ /g, '\u00A0');
+        if (tokenIndex === 0) {
+            return text.replace(/^[\t ]+/, (match) => replaceSpaces(match));
+        }
+        if (text.trim().length === 0) {
+            return replaceSpaces(text);
+        }
+        return text;
+    }, [isWeb]);
     const buildNativeLine = React__default.useCallback((line, index, appendNewline, includeKey) => {
         var _a;
         const lineNumber = index + 1;
@@ -14296,13 +14412,14 @@ const CodeBlock = (props) => {
         const lineStyles = [
             styles.codeText,
             textStyle,
+            webWhitespaceStyle,
             wrap ? { flexWrap: 'wrap' } : { flexWrap: 'nowrap', width: 'auto' },
         ];
         if (isLineHighlighted) {
             lineStyles.push(styles.highlightedLine(isDark, highlightColors));
         }
-        return (jsxs(Text, { selectable: true, style: lineStyles, children: [showLineNumbers ? (jsx(Text, { style: { color: lineNumberColor, opacity: 0.7 }, children: `${String(lineNumber).padStart(lineNumberWidth, ' ')} | ` })) : null, tokens.map((token, tokenIdx) => (jsx(Text, { style: { color: token.color }, children: token.text || ' ' }, `${lineNumber}-${tokenIdx}`))), appendNewline ? '\n' : null] }, includeKey ? `line-${lineNumber}` : undefined));
-    }, [fallbackColor, highlightColors, highlightSet, isDark, lineNumberColor, lineNumberWidth, showLineNumbers, styles.codeText, styles.highlightedLine, textStyle, tokenLines, wrap]);
+        return (jsxs(Text, { selectable: true, style: lineStyles, children: [showLineNumbers ? (jsx(Text, { style: { color: lineNumberColor, opacity: 0.7 }, children: `${String(lineNumber).padStart(lineNumberWidth, ' ')} | ` })) : null, tokens.map((token, tokenIdx) => (jsx(Text, { style: { color: token.color }, children: normalizeTokenText(token.text || ' ', tokenIdx) }, `${lineNumber}-${tokenIdx}`))), appendNewline ? '\n' : null] }, includeKey ? `line-${lineNumber}` : undefined));
+    }, [fallbackColor, highlightColors, highlightSet, isDark, lineNumberColor, lineNumberWidth, normalizeTokenText, showLineNumbers, styles.codeText, styles.highlightedLine, textStyle, tokenLines, webWhitespaceStyle, wrap]);
     const renderWebCode = React__default.useMemo(() => {
         if (!(isWeb && highlight && PrismSyntaxHighlighter)) {
             return null;
@@ -14316,7 +14433,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 };
@@ -14349,20 +14472,21 @@ const CodeBlock = (props) => {
     ]);
     const renderNativeCode = React__default.useMemo(() => {
         if (!codeData.lineCount) {
-            return (jsx(Text, { selectable: true, style: [styles.codeText, textStyle], children: ' ' }));
+            return (jsx(Text, { selectable: true, style: [styles.codeText, textStyle, webWhitespaceStyle], children: ' ' }));
         }
         if (shouldVirtualizeNative) {
             return (jsx(FlatList, { data: codeData.lines, keyExtractor: (_, index) => `line-${index}`, renderItem: ({ item, index }) => buildNativeLine(item, index, false, false), initialNumToRender: 20, maxToRenderPerBatch: 40, windowSize: 7, removeClippedSubviews: true, getItemLayout: (_, index) => ({ length: lineHeight, offset: lineHeight * index, index }) }));
         }
-        return (jsx(Text, { selectable: true, style: [styles.codeText, textStyle], children: codeData.lines.map((line, idx) => buildNativeLine(line, idx, idx < codeData.lineCount - 1, true)) }));
-    }, [buildNativeLine, codeData.lineCount, codeData.lines, lineHeight, shouldVirtualizeNative, styles.codeText, textStyle]);
+        return (jsx(Text, { selectable: true, style: [styles.codeText, textStyle, webWhitespaceStyle], children: codeData.lines.map((line, idx) => buildNativeLine(line, idx, idx < codeData.lineCount - 1, true)) }));
+    }, [buildNativeLine, codeData.lineCount, codeData.lines, lineHeight, shouldVirtualizeNative, styles.codeText, textStyle, webWhitespaceStyle]);
     const codeContent = renderWebCode !== null && renderWebCode !== void 0 ? renderWebCode : renderNativeCode;
     const scrollableCodeContent = wrap ? (codeContent) : (jsx(ScrollView, { horizontal: true, bounces: false, showsHorizontalScrollIndicator: true, showsVerticalScrollIndicator: false, contentContainerStyle: { flexGrow: 1 }, style: { width: '100%' }, children: jsx(View, { style: { flexGrow: 1 }, children: codeContent }) }));
     let wrappedCodeContent = scrollableCodeContent;
     if (spoiler) {
         wrappedCodeContent = (jsx(Spoiler, { maxHeight: spoilerMaxHeight, children: scrollableCodeContent }));
     }
-    const userHasWidth = Boolean(style && (style.width !== undefined || style.flex !== undefined));
+    const flatStyle = StyleSheet.flatten(style);
+    const userHasWidth = Boolean(flatStyle && (flatStyle.width !== undefined || flatStyle.flex !== undefined));
     const containerStyle = userHasWidth ? [{ marginBottom: 20 }, style, spacingStyles] : [styles.container, spacingStyles, style];
     const showHeaderBar = fileHeader && fileName && variant !== 'terminal';
     const inlineTitleVisible = variant === 'code' && (title || fileName);
@@ -15960,11 +16084,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' };
@@ -15972,7 +16098,7 @@ const BrandButton = (props) => {
                 return {
                     backgroundColor: 'white',
                     borderColor: 'transparent',
-                    paddingHorizontal: 0,
+                    paddingHorizontal: 16,
                     minWidth: 0,
                     height: 'auto',
                     color: 'black'
@@ -15981,6 +16107,7 @@ const BrandButton = (props) => {
                 return {
                     backgroundColor: brandConfig.backgroundColor,
                     borderColor: brandConfig.borderColor || brandConfig.backgroundColor,
+                    paddingHorizontal: 16,
                 };
         }
     })();
@@ -16557,8 +16684,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: {
@@ -17486,7 +17617,7 @@ const TextArea = factory((props, ref) => {
     const { spacingProps, otherProps: propsAfterSpacing } = extractSpacingProps(props);
     const { layoutProps, otherProps } = extractLayoutProps(propsAfterSpacing);
     const { value, defaultValue = '', onChangeText, label, disabled = false, required = false, placeholder, error, helperText, description, size = 'md', radius = 'md', rows = 3, minRows = 1, maxRows, autoResize = false, maxLength, showCharCounter = false, resize = 'none', textInputProps = {}, style, testID, clearable, clearButtonLabel, onClear, ...rest } = otherProps;
-    const { height } = layoutProps;
+    const { h } = layoutProps;
     const theme = useTheme();
     const { getTextAreaStyles } = useTextAreaStyles({ theme });
     const [focused, setFocused] = useState(false);
@@ -17550,11 +17681,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' } : {})
@@ -17582,7 +17713,7 @@ const TextArea = factory((props, ref) => {
     const clearLabel = clearButtonLabel || 'Clear input';
     return (jsxs(View, { style: containerStyles, testID: testID, children: [(label || description) && (jsx(FieldHeader, { label: label, description: description, required: required, disabled: disabled, error: !!error })), jsxs(View, { style: [inputContainerStyles, { position: 'relative' }], children: [jsx(TextInput, { ref: assignRef, 
                         // style={]}
-                        style: { height: height || (autoResize ? currentRows * 24 : rows * 24), // Approximate row height
+                        style: { height: h || (autoResize ? currentRows * 24 : rows * 24), // Approximate row height
                             ...textInputStyles.reduce((acc, style) => ({ ...acc, ...style }), {}),
                             textAlignVertical: resize === 'none' ? 'top' : undefined,
                             // Disable resizing by user if resize is 'none'
@@ -23908,7 +24039,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();
@@ -23930,6 +24061,7 @@ const Select = factory((allProps, ref) => {
         keyboardAvoidance,
         closeOnClickOutside: true,
         closeOnEscape: true,
+        matchAnchorWidth: true,
         onClose: () => setOpen(false),
     });
     const hasMeasuredDropdownRef = useRef(false);
@@ -24063,11 +24195,11 @@ const Select = factory((allProps, ref) => {
     }, [position === null || position === void 0 ? void 0 : position.finalWidth, triggerWidth]);
     const resolvedDropdownMaxHeight = useMemo(() => {
         const keyboardMax = typeof (position === null || position === void 0 ? void 0 : position.maxHeight) === 'number' ? position.maxHeight : undefined;
-        if (typeof maxHeight === 'number') {
-            return keyboardMax ? Math.min(maxHeight, keyboardMax) : maxHeight;
+        if (typeof maxH === 'number') {
+            return keyboardMax ? Math.min(maxH, keyboardMax) : maxH;
         }
-        return keyboardMax !== null && keyboardMax !== void 0 ? keyboardMax : maxHeight;
-    }, [maxHeight, position === null || position === void 0 ? void 0 : position.maxHeight]);
+        return keyboardMax !== null && keyboardMax !== void 0 ? keyboardMax : maxH;
+    }, [maxH, position === null || position === void 0 ? void 0 : position.maxHeight]);
     const handleSelect = useCallback((opt) => {
         if (opt.disabled)
             return;
@@ -24089,7 +24221,7 @@ const Select = factory((allProps, ref) => {
             close();
         }
     }, [closeOnSelect, close, onChange, valueProp, refocusAfterSelect, keyboardManager, focusTrigger, blurTrigger]);
-    const listMaxHeight = resolvedDropdownMaxHeight !== null && resolvedDropdownMaxHeight !== void 0 ? resolvedDropdownMaxHeight : maxHeight;
+    const listMaxHeight = resolvedDropdownMaxHeight !== null && resolvedDropdownMaxHeight !== void 0 ? resolvedDropdownMaxHeight : maxH;
     const menu = useMemo(() => {
         const widthStyle = resolvedDropdownWidth && resolvedDropdownWidth > 0
             ? { width: resolvedDropdownWidth, minWidth: resolvedDropdownWidth }
@@ -24102,18 +24234,17 @@ const Select = factory((allProps, ref) => {
                     ...(maxHeightStyle !== null && maxHeightStyle !== void 0 ? maxHeightStyle : {}),
                     ...(widthStyle !== null && widthStyle !== void 0 ? widthStyle : {}),
                 }, children: jsx(FlatList, { data: options, keyExtractor: o => String(o.value), renderItem: ({ item }) => {
-                        var _a;
                         const selected = item.value === value;
                         if (renderOption) {
                             return jsx(View, { children: renderOption(item, false, selected) });
                         }
                         const primaryPalette = theme.colors.primary || [];
                         const highlightColor = theme.colorScheme === 'dark'
-                            ? primaryPalette[2] || primaryPalette[3] || theme.text.onPrimary || theme.text.primary
-                            : primaryPalette[6] || primaryPalette[5] || ((_a = theme.colors.secondary) === null || _a === void 0 ? void 0 : _a[6]) || '#6941C6';
+                            ? primaryPalette[5] || primaryPalette[4] || '#60A5FA'
+                            : primaryPalette[6] || primaryPalette[5] || '#3B82F6';
                         const baseTextColor = item.disabled ? theme.text.disabled : theme.text.primary;
-                        const accentTextColor = item.disabled ? theme.text.disabled : highlightColor;
-                        return (jsx(MenuItemButton, { onPress: () => handleSelect(item), disabled: !!item.disabled, active: selected, tone: selected ? 'primary' : 'default', hoverTone: "primary", activeTone: "primary", textColor: baseTextColor, hoverTextColor: accentTextColor, activeTextColor: accentTextColor, compact: true, rounded: false, style: { borderRadius: 0 }, children: item.label }));
+                        item.disabled ? theme.text.disabled : highlightColor;
+                        return (jsx(MenuItemButton, { onPress: () => handleSelect(item), disabled: !!item.disabled, active: false, tone: "default", hoverTone: "default", activeTone: "default", textColor: baseTextColor, hoverTextColor: baseTextColor, activeTextColor: baseTextColor, startIcon: selected ? jsx(Icon, { name: "check", size: 16, color: highlightColor }) : jsx(View, { style: { width: 16 } }), compact: true, rounded: false, style: { borderRadius: 0 }, children: item.label }));
                     }, ItemSeparatorComponent: renderOption ? undefined : ListGroupDivider, style: maxHeightStyle, bounces: false }) }) }));
     }, [resolvedDropdownWidth, listMaxHeight, menuStyles.dropdown, options, value, renderOption, theme.colors.primary, theme.colors.secondary, theme.colorScheme, theme.text.disabled, theme.text.primary, theme.text.onPrimary, handleSelect]);
     useEffect(() => {
@@ -24295,6 +24426,7 @@ const AutoComplete = factory((props, ref) => {
         offset,
         autoUpdate: autoReposition,
         fallbackPlacements,
+        matchAnchorWidth: true,
     });
     // Guard: remember last popover size to avoid re-triggering updatePosition on position-only changes
     const lastPopoverSizeRef = useRef(null);
@@ -24318,13 +24450,12 @@ const AutoComplete = factory((props, ref) => {
     }, radiusStyles), [inputStyleFactory, size, focused, error, disabled, showClearButton, radiusStyles]);
     const clearLabel = clearButtonLabel || 'Clear input';
     const menuHighlightColor = useMemo(() => {
-        var _a;
         const primaryPalette = theme.colors.primary || [];
         if (theme.colorScheme === 'dark') {
-            return primaryPalette[2] || primaryPalette[3] || theme.text.onPrimary || theme.text.primary;
+            return primaryPalette[5] || primaryPalette[4] || '#60A5FA';
         }
-        return primaryPalette[6] || primaryPalette[5] || ((_a = theme.colors.secondary) === null || _a === void 0 ? void 0 : _a[6]) || '#6941C6';
-    }, [theme.colors.primary, theme.colors.secondary, theme.colorScheme, theme.text.onPrimary, theme.text.primary]);
+        return primaryPalette[6] || primaryPalette[5] || '#3B82F6';
+    }, [theme.colors.primary, theme.colorScheme]);
     const selectedCount = (_a = selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) !== null && _a !== void 0 ? _a : 0;
     const hasSelectedValues = multiSelect && selectedCount > 0;
     const currentQueryRef = useRef(query);
@@ -24642,8 +24773,8 @@ const AutoComplete = factory((props, ref) => {
     const defaultRenderItem = useCallback((item, index, isSelected = false) => {
         const highlightQuery = highlightMatches ? currentQueryRef.current : undefined;
         const baseTextColor = item.disabled ? theme.text.disabled : theme.text.primary;
-        const accentTextColor = item.disabled ? theme.text.disabled : menuHighlightColor;
-        return (jsx(MenuItemButton, { onPress: () => handleSelectSuggestion(item), disabled: item.disabled, active: isSelected, tone: isSelected ? 'primary' : 'default', hoverTone: "primary", activeTone: "primary", textColor: baseTextColor, hoverTextColor: accentTextColor, activeTextColor: accentTextColor, compact: true, rounded: false, style: [styles.menuItemButton, suggestionItemStyle], ...(Platform.OS === 'web' ? {
+        item.disabled ? theme.text.disabled : menuHighlightColor;
+        return (jsx(MenuItemButton, { onPress: () => handleSelectSuggestion(item), disabled: item.disabled, active: false, tone: "default", hoverTone: "default", activeTone: "default", textColor: baseTextColor, hoverTextColor: baseTextColor, activeTextColor: baseTextColor, startIcon: isSelected ? jsx(Icon, { name: "check", size: 16, color: menuHighlightColor }) : jsx(View, { style: { width: 16 } }), compact: true, rounded: false, style: [styles.menuItemButton, suggestionItemStyle], ...(Platform.OS === 'web' ? {
                 onMouseDown: (event) => {
                     if (event === null || event === void 0 ? void 0 : event.preventDefault) {
                         event.preventDefault();
@@ -27152,7 +27283,7 @@ const DatePickerInput = forwardRef(function DatePickerInputInner({ value, defaul
             } }));
     }
     if (dropdownType === 'modal') {
-        return (jsxs(View, { ref: ref, children: [renderInput(), jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, width: numberOfMonths > 1 ? Math.min(700, 380 * numberOfMonths + 40) : 400, title: type === 'range'
+        return (jsxs(View, { ref: ref, children: [renderInput(), jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, w: numberOfMonths > 1 ? Math.min(700, 380 * numberOfMonths + 40) : 400, title: type === 'range'
                         ? 'Select Date Range'
                         : type === 'multiple'
                             ? 'Select Dates'
@@ -27181,7 +27312,7 @@ const DatePickerInput = forwardRef(function DatePickerInputInner({ value, defaul
                                                         backgroundColor: pressed ? theme.colors.primary[6] : theme.colors.primary[5],
                                                     }), children: jsx(Text, { size: "sm", weight: "semibold", style: { color: 'white' }, children: "Done" }) })] })] }) }))] }) })] }));
     }
-    return (jsxs(View, { ref: ref, children: [renderInput(), jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, width: numberOfMonths > 1 ? Math.min(600, 320 * numberOfMonths + 40) : 350, children: jsxs(View, { ref: focusTrapRef, style: { padding: DESIGN_TOKENS.spacing.lg }, accessible: true, accessibilityLabel: type === 'range'
+    return (jsxs(View, { ref: ref, children: [renderInput(), jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, w: numberOfMonths > 1 ? Math.min(600, 320 * numberOfMonths + 40) : 350, children: jsxs(View, { ref: focusTrapRef, style: { padding: DESIGN_TOKENS.spacing.lg }, accessible: true, accessibilityLabel: type === 'range'
                         ? 'Date range picker dialog'
                         : type === 'multiple'
                             ? 'Multiple date picker dialog'
@@ -27276,7 +27407,7 @@ const MonthPickerInput = forwardRef(function MonthPickerInput({ value, defaultVa
                         pointerEvents: 'none',
                         accessible: false,
                         focusable: false,
-                    } }) }), jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, width: 360, children: jsx(View, { style: {
+                    } }) }), jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, w: 360, children: jsx(View, { style: {
                         padding: DESIGN_TOKENS.spacing.lg,
                     }, children: jsx(MonthPicker, { ...restMonthPickerProps, value: currentValue, onChange: handleMonthChange, locale: resolvedLocale, size: resolvedSize }) }) })] }));
 });
@@ -27339,7 +27470,7 @@ const YearPickerInput = forwardRef(function YearPickerInput({ value, defaultValu
                         pointerEvents: 'none',
                         accessible: false,
                         focusable: false,
-                    } }) }), jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, width: 360, children: jsx(View, { style: {
+                    } }) }), jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, w: 360, children: jsx(View, { style: {
                         padding: DESIGN_TOKENS.spacing.lg,
                     }, children: jsx(YearPicker, { ...restYearPickerProps, value: currentValue, onChange: handleYearChange, size: resolvedSize }) }) })] }));
 });
@@ -27504,7 +27635,7 @@ const TimePickerInput = ({ value, defaultValue, onChange, format = 24, withSecon
                         }
                     }, label: label, placeholder: is12h ? 'hh:mm AM' : 'hh:mm', endSection: jsx(Icon, { name: "clock", size: 16, color: disabled ? theme.text.disabled : theme.text.muted }), disabled: disabled, error: error, helperText: helperText, size: size, fullWidth: fullWidth, clearable: clearable && hasValue, clearButtonLabel: clearButtonLabel, onClear: clearValue }) }), jsx(Dialog, { visible: open, 
                 // variant="fullscreen"
-                onClose: handleClose, width: typeof computedPanelWidth === 'number' ? computedPanelWidth : 360, title: title || 'Select Time', children: jsxs(Pressable, { style: {
+                onClose: handleClose, w: typeof computedPanelWidth === 'number' ? computedPanelWidth : 360, title: title || 'Select Time', children: jsxs(Pressable, { style: {
                         flex: 1,
                         width: '100%',
                         justifyContent: 'center',
@@ -28456,303 +28587,6 @@ const EmojiPicker = factory((props, ref) => {
 });
 EmojiPicker.displayName = 'EmojiPicker';
 
-function useRichTextEditorStyles() {
-    const theme = useTheme();
-    return useMemo(() => StyleSheet.create({
-        characterCount: {
-            fontSize: 12,
-            marginTop: 4,
-            textAlign: 'right',
-        },
-        container: {
-            width: '100%',
-        },
-        disabled: {
-            opacity: 0.5,
-        },
-        editorContainer: {
-            backgroundColor: theme.backgrounds.surface,
-            borderColor: theme.backgrounds.border,
-            borderRadius: parseInt(theme.radii.md, 10),
-            borderWidth: 1,
-            overflow: 'hidden',
-        },
-        errorText: {
-            fontSize: 12,
-            marginTop: 4,
-        },
-        helperText: {
-            fontSize: 12,
-            marginTop: 4,
-        },
-        textInput: {
-            fontSize: 16,
-            lineHeight: 24,
-            padding: parseInt(theme.spacing.md, 10),
-        },
-        toolButton: {
-            alignItems: 'center',
-            backgroundColor: 'transparent',
-            borderColor: theme.backgrounds.border,
-            borderRadius: parseInt(theme.radii.sm, 10),
-            borderWidth: 1,
-            height: 32,
-            justifyContent: 'center',
-            width: 32,
-        },
-        toolSeparator: {
-            backgroundColor: theme.backgrounds.border,
-            height: 24,
-            marginHorizontal: 4,
-            width: 1,
-        },
-        toolbar: {
-            backgroundColor: theme.backgrounds.elevated,
-            borderBottomColor: theme.backgrounds.border,
-            borderBottomWidth: 1,
-        },
-        toolbarContent: {
-            alignItems: 'center',
-            flexDirection: 'row',
-            gap: 4,
-            paddingHorizontal: parseInt(theme.spacing.sm, 10),
-            paddingVertical: parseInt(theme.spacing.xs, 10),
-        },
-    }), [theme]);
-}
-
-// Default toolbar configuration
-const DEFAULT_TOOLBAR_TOOLS = [
-    'bold',
-    'italic',
-    'underline',
-    'separator',
-    'heading',
-    'separator',
-    'align',
-    'separator',
-    'list',
-    'separator',
-    'link',
-    'separator',
-    'color',
-];
-const RichTextEditor = React__default.memo(({ defaultValue, value, onChange, onSelectionChange, onFocus, onBlur, placeholder = 'Start typing...', readOnly = false, disabled = false, toolbar = {
-    enabled: true,
-    position: 'top',
-    tools: DEFAULT_TOOLBAR_TOOLS,
-}, formats = {
-    fontFamilies: ['Arial', 'Georgia', 'Times New Roman', 'Courier New'],
-    fontSizes: [12, 14, 16, 18, 20, 24, 28, 32],
-    colors: ['#000000', '#333333', '#666666', '#999999', '#CCCCCC', '#FF0000', '#00FF00', '#0000FF'],
-    headings: [1, 2, 3, 4, 5, 6],
-}, images = { enabled: true }, links = { enabled: true, openInNewTab: true }, plugins = [], autosave, spellCheck = true, maxLength, minHeight = 200, maxHeight = 600, className, theme: themeOverride = 'auto', error, helperText, style, ...props }) => {
-    const theme = useTheme();
-    const styles = useRichTextEditorStyles();
-    const [content, setContent] = useState(value || defaultValue || { html: '', text: '' });
-    const [selection, setSelection] = useState({
-        index: 0,
-        length: 0,
-    });
-    const [activeFormats, setActiveFormats] = useState({});
-    const [isFocused, setIsFocused] = useState(false);
-    const editorRef = useRef(null);
-    const autosaveTimerRef = useRef(null);
-    // Update content when value prop changes
-    useEffect(() => {
-        if (value && value !== content) {
-            setContent(value);
-        }
-    }, [value]);
-    // Autosave functionality
-    useEffect(() => {
-        if ((autosave === null || autosave === void 0 ? void 0 : autosave.enabled) && autosave.onSave) {
-            if (autosaveTimerRef.current) {
-                clearTimeout(autosaveTimerRef.current);
-            }
-            autosaveTimerRef.current = setTimeout(() => {
-                autosave.onSave(content);
-            }, autosave.interval || 5000);
-            return () => {
-                if (autosaveTimerRef.current) {
-                    clearTimeout(autosaveTimerRef.current);
-                }
-            };
-        }
-    }, [content, autosave]);
-    const handleContentChange = useCallback((text) => {
-        const newContent = {
-            text,
-            html: text, // For now, treating as plain text
-        };
-        setContent(newContent);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newContent);
-    }, [onChange]);
-    const handleSelectionChange = useCallback((selection) => {
-        const newSelection = {
-            index: selection.start,
-            length: selection.end - selection.start,
-            format: activeFormats,
-        };
-        setSelection(newSelection);
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelection);
-    }, [activeFormats, onSelectionChange]);
-    const handleFocus = useCallback(() => {
-        setIsFocused(true);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-    }, [onFocus]);
-    const handleBlur = useCallback(() => {
-        setIsFocused(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [onBlur]);
-    const applyFormat = useCallback((format) => {
-        if (readOnly || disabled)
-            return;
-        const newFormats = { ...activeFormats, ...format };
-        setActiveFormats(newFormats);
-        // In a real implementation, this would apply formatting to the selected text
-        // For this demo, we'll just track the format state
-    }, [activeFormats, readOnly, disabled]);
-    const toggleFormat = useCallback((formatKey) => {
-        if (readOnly || disabled)
-            return;
-        const currentValue = activeFormats[formatKey];
-        applyFormat({ [formatKey]: !currentValue });
-    }, [activeFormats, applyFormat, readOnly, disabled]);
-    const insertText = useCallback((text) => {
-        if (readOnly || disabled)
-            return;
-        const currentText = content.text;
-        const { index } = selection;
-        const newText = currentText.slice(0, index) + text + currentText.slice(index);
-        handleContentChange(newText);
-    }, [content.text, selection, handleContentChange, readOnly, disabled]);
-    const insertLink = useCallback(() => {
-        if (!(links === null || links === void 0 ? void 0 : links.enabled) || readOnly || disabled)
-            return;
-        // In a real implementation, this would show a link dialog
-        const url = prompt('Enter URL:');
-        if (url && (!links.validate || links.validate(url))) {
-            applyFormat({ link: url });
-        }
-    }, [links, applyFormat, readOnly, disabled]);
-    useCallback(async () => {
-        if (!(images === null || images === void 0 ? void 0 : images.enabled) || readOnly || disabled)
-            return;
-        // In a real implementation, this would show a file picker
-        // For now, we'll just insert a placeholder
-        insertText('[Image]');
-    }, [images, insertText, readOnly, disabled]);
-    useCallback((level) => {
-        applyFormat({ heading: level });
-    }, [applyFormat]);
-    const setAlignment = useCallback((align) => {
-        applyFormat({ align });
-    }, [applyFormat]);
-    const setList = useCallback((listType) => {
-        applyFormat({ list: listType });
-    }, [applyFormat]);
-    const getToolButtonStyle = useCallback((isActive) => [
-        styles.toolButton,
-        {
-            backgroundColor: isActive
-                ? (theme.colorScheme === 'dark' ? theme.colors.primary[7] : theme.colors.primary[1])
-                : 'transparent',
-            borderColor: isActive ? theme.colors.primary[4] : theme.backgrounds.border,
-        },
-        (disabled || readOnly) && styles.disabled,
-    ], [styles.toolButton, theme, disabled, readOnly]);
-    const renderToolButton = useCallback((tool, icon, onPress, isActive = false) => (jsx(TouchableOpacity, { onPress: onPress, disabled: disabled || readOnly, style: getToolButtonStyle(isActive), children: jsx(Icon, { name: icon, size: 16, color: isActive ? theme.colors.primary[5] : theme.text.secondary }) }, tool)), [theme, disabled, readOnly, getToolButtonStyle]);
-    const renderToolSeparator = useCallback((index) => (jsx(View, { style: styles.toolSeparator }, `separator-${index}`)), [styles.toolSeparator]);
-    const renderToolbar = useCallback(() => {
-        if (!(toolbar === null || toolbar === void 0 ? void 0 : toolbar.enabled))
-            return null;
-        const tools = toolbar.tools || DEFAULT_TOOLBAR_TOOLS;
-        return (jsx(View, { style: styles.toolbar, children: jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.toolbarContent, children: tools.map((tool, index) => {
-                    if (tool === 'separator') {
-                        return renderToolSeparator(index);
-                    }
-                    switch (tool) {
-                        case 'bold':
-                            return renderToolButton('bold', 'bold', () => toggleFormat('bold'), !!activeFormats.bold);
-                        case 'italic':
-                            return renderToolButton('italic', 'italic', () => toggleFormat('italic'), !!activeFormats.italic);
-                        case 'underline':
-                            return renderToolButton('underline', 'underline', () => toggleFormat('underline'), !!activeFormats.underline);
-                        case 'strikethrough':
-                            return renderToolButton('strikethrough', 'strikethrough', () => toggleFormat('strikethrough'), !!activeFormats.strikethrough);
-                        case 'heading':
-                            return renderToolButton('heading', 'heading', () => applyFormat({ heading: activeFormats.heading ? null : 2 }), !!activeFormats.heading);
-                        case 'align':
-                            return renderToolButton('align', 'alignLeft', // Default to left align icon, could be dynamic based on current align
-                            () => setAlignment(activeFormats.align === 'left' ? 'center' : 'left'), !!activeFormats.align);
-                        case 'list':
-                            return renderToolButton('list', 'listUnordered', // Default to unordered list icon, could be dynamic
-                            () => setList(activeFormats.list === 'unordered' ? 'ordered' : 'unordered'), !!activeFormats.list);
-                        case 'link':
-                            return renderToolButton('link', 'link', insertLink, !!activeFormats.link);
-                        case 'image':
-                            return renderToolButton('image', 'image', () => { }, // TODO: Implement image insertion
-                            false);
-                        case 'code':
-                            return renderToolButton('code', 'code', () => toggleFormat('code'), !!activeFormats.code);
-                        case 'quote':
-                            return renderToolButton('quote', 'quote', () => toggleFormat('quote'), !!activeFormats.quote);
-                        case 'color':
-                            return renderToolButton('color', 'color', () => { }, // TODO: Implement color picker
-                            !!activeFormats.color);
-                        default:
-                            return null;
-                    }
-                }) }) }));
-    }, [toolbar, theme, activeFormats, renderToolButton, renderToolSeparator, toggleFormat, insertLink, styles.toolbar, styles.toolbarContent]);
-    const renderEditor = useCallback(() => (jsx(View, { style: [
-            styles.editorContainer,
-            {
-                borderColor: isFocused ? theme.colors.primary[5] : theme.backgrounds.border,
-                minHeight,
-                maxHeight,
-            },
-            error && { borderColor: theme.colors.error[5] },
-            (disabled || readOnly) && styles.disabled,
-        ], children: jsx(TextInput, { ref: editorRef, value: content.text, onChangeText: handleContentChange, onSelectionChange: (event) => handleSelectionChange(event.nativeEvent.selection), onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder, placeholderTextColor: theme.text.muted, multiline: true, textAlignVertical: "top", editable: !disabled && !readOnly, spellCheck: spellCheck, maxLength: maxLength, style: [
-                styles.textInput,
-                Platform.OS === 'web' ? { outlineWidth: 0 } : null,
-                {
-                    color: theme.text.primary,
-                    fontSize: activeFormats.fontSize || 16,
-                    fontFamily: activeFormats.fontFamily || theme.fontFamily,
-                    fontWeight: activeFormats.bold ? 'bold' : 'normal',
-                    fontStyle: activeFormats.italic ? 'italic' : 'normal',
-                    textDecorationLine: activeFormats.underline ? 'underline' : 'none',
-                    textAlign: activeFormats.align || 'left',
-                },
-            ], ...props }) })), [
-        content.text,
-        handleContentChange,
-        handleSelectionChange,
-        handleFocus,
-        handleBlur,
-        placeholder,
-        disabled,
-        readOnly,
-        spellCheck,
-        maxLength,
-        isFocused,
-        theme,
-        minHeight,
-        maxHeight,
-        error,
-        activeFormats,
-        props,
-        styles.editorContainer,
-        styles.disabled,
-        styles.textInput,
-    ]);
-    return (jsxs(View, { style: [styles.container, style], children: [(toolbar === null || toolbar === void 0 ? void 0 : toolbar.position) === 'top' && renderToolbar(), renderEditor(), (toolbar === null || toolbar === void 0 ? void 0 : toolbar.position) === 'bottom' && renderToolbar(), maxLength && (jsxs(Text$1, { style: [styles.characterCount, { color: theme.text.secondary }], children: [content.text.length, "/", maxLength] })), error && (jsx(Text$1, { style: [styles.errorText, { color: theme.colors.error[5] }], children: error })), helperText && !error && (jsx(Text$1, { style: [styles.helperText, { color: theme.text.secondary }], children: helperText }))] }));
-});
-RichTextEditor.displayName = 'RichTextEditor';
-
 function RatingBase(rawProps, ref) {
     const { disclaimerProps: disclaimerData, otherProps: propsAfterDisclaimer } = extractDisclaimerProps(rawProps);
     const { spacingProps, otherProps: props } = extractSpacingProps(propsAfterDisclaimer);
@@ -29504,7 +29338,7 @@ function useMenuContext() {
     return context;
 }
 function MenuBase(props, ref) {
-    const { opened: controlledOpened, trigger = 'click', position = 'auto', offset = 4, closeOnClickOutside = true, closeOnEscape = true, onOpen, onClose, width = 'auto', maxHeight = 300, shadow = 'md', radius = 'md', children, testID, disabled = false, strategy = Platform.OS === 'web' ? 'fixed' : 'portal', ...spacingProps } = props;
+    const { opened: controlledOpened, trigger = 'click', position = 'auto', offset = 4, closeOnClickOutside = true, closeOnEscape = true, onOpen, onClose, w = 'auto', maxH = 300, shadow = 'md', radius = 'md', children, testID, disabled = false, strategy = Platform.OS === 'web' ? 'fixed' : 'portal', ...spacingProps } = props;
     const [internalOpened, setInternalOpened] = useState(false);
     // Derive menu dropdown items from children each render for reactivity
     const { menuItems, menuDropdownProps } = useMemo(() => {
@@ -29579,11 +29413,11 @@ function MenuBase(props, ref) {
         const listGroupStyle = {
             ...styles.dropdown,
             ...(dropdownSpacingStyles || {}),
-            maxHeight,
+            maxHeight: maxH,
             width: resolvedWidth,
         };
-        return (jsx(MenuContext.Provider, { value: menuContextValueOpened, children: jsx(ListGroup, { variant: "default", size: "sm", style: listGroupStyle, children: scrollable ? (jsx(ScrollView, { showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", style: { maxHeight }, children: jsx(ListGroupBody, { children: menuItems }) })) : (jsx(View, { style: { maxHeight, overflow: 'hidden' }, children: jsx(ListGroupBody, { children: menuItems }) })) }) }));
-    }, [menuItems, menuDropdownProps, styles.dropdown, dropdownSpacingStyles, maxHeight, menuContextValueOpened]);
+        return (jsx(MenuContext.Provider, { value: menuContextValueOpened, children: jsx(ListGroup, { variant: "default", size: "sm", style: listGroupStyle, children: scrollable ? (jsx(ScrollView, { showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", style: { maxHeight: maxH }, children: jsx(ListGroupBody, { children: menuItems }) })) : (jsx(View, { style: { maxHeight: maxH, overflow: 'hidden' }, children: jsx(ListGroupBody, { children: menuItems }) })) }) }));
+    }, [menuItems, menuDropdownProps, styles.dropdown, dropdownSpacingStyles, maxH, menuContextValueOpened]);
     const handleOpen = useCallback(async (opts) => {
         var _a, _b, _c, _d, _e, _f;
         // Use ref to avoid stale isOpened value after async close from backdrop click
@@ -29615,7 +29449,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,
@@ -29683,7 +29517,7 @@ function MenuBase(props, ref) {
         catch (error) {
             console.warn('Failed to open menu:', error);
         }
-    }, [disabled, width, position, offset, strategy, closeOnClickOutside, closeOnEscape, onOpen, menuItems, trigger, buildMenuDropdown, onClose]);
+    }, [disabled, w, position, offset, strategy, closeOnClickOutside, closeOnEscape, onOpen, menuItems, trigger, buildMenuDropdown, onClose]);
     // When menu content changes while open, update overlay content in place
     useEffect(() => {
         var _a;
@@ -29695,14 +29529,14 @@ function MenuBase(props, ref) {
             return; // no structural change
         lastSignatureRef.current = menuItemsSignature;
         const currentId = overlayIdRef.current;
-        const resolvedWidth = (_a = lastResolvedWidthRef.current) !== null && _a !== void 0 ? _a : (typeof width === 'number' ? width : undefined);
+        const resolvedWidth = (_a = lastResolvedWidthRef.current) !== null && _a !== void 0 ? _a : (typeof w === 'number' ? w : undefined);
         const menuDropdown = buildMenuDropdown(resolvedWidth);
         if (!menuDropdown)
             return;
         updateOverlay(currentId, {
             content: menuDropdown,
         });
-    }, [menuItemsSignature, menuItems, updateOverlay, width, buildMenuDropdown]);
+    }, [menuItemsSignature, menuItems, updateOverlay, w, buildMenuDropdown]);
     const handleToggle = useCallback(() => {
         if (isOpenedRef.current) {
             handleClose();
@@ -31125,7 +30959,7 @@ function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'whit
     };
     const containerStyle = {
         position: 'relative',
-        ...style,
+        ...StyleSheet.flatten(style),
     };
     const content = (jsxs(View, { style: containerStyle, children: [jsx(View, { style: avatarStyle, children: src ? (jsx(Image$1, { source: { uri: src }, style: {
                         width: avatarSize,
@@ -31146,7 +30980,7 @@ function AvatarGroup({ children, limit, spacing = -8, style, size, bordered = tr
     const containerStyle = {
         flexDirection: 'row',
         alignItems: 'center',
-        ...style,
+        ...StyleSheet.flatten(style),
     };
     const avatarWrapperStyle = (index) => ({
         marginLeft: index > 0 ? spacing : 0,
@@ -31634,7 +31468,7 @@ const DEFAULT_ARROW_SIZE = 7;
 const PopoverBase = (props, ref) => {
     var _a;
     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, 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;
+    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);
@@ -31851,29 +31685,29 @@ 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;
@@ -31897,7 +31731,7 @@ const PopoverBase = (props, ref) => {
             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, trigger, isPositioning]);
+    }, [opened, dropdownState, positioningResult, popoverRef, showOverlay, hideOverlay, popoverStyles.dropdown, popoverStyles.wrapper, w, maxH, minW, minH, maxW, withArrow, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme, zIndex, onPositionChange, schedulePositionUpdate, trigger, isPositioning]);
     useEffect(() => {
         return () => {
             hideOverlay();
@@ -32185,7 +32019,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
@@ -32216,10 +32050,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 = [
@@ -32240,7 +32074,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
@@ -32271,10 +32105,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 = [
@@ -32353,16 +32187,16 @@ const TableCaption = (allProps) => {
 // Scroll Container Component
 const TableScrollContainer = (allProps) => {
     const { spacingProps, otherProps } = extractSpacingProps(allProps);
-    const { children, minWidth = 500, maxHeight, type = 'native', style } = otherProps;
+    const { children, minW = 500, maxH, type = 'native', style } = otherProps;
     const containerStyle = [
         {
             width: '100%',
-            maxHeight
+            maxHeight: maxH
         },
         getSpacingStyles(spacingProps),
         style
     ];
-    const scrollViewStyle = minWidth ? { minWidth } : undefined;
+    const scrollViewStyle = minW ? { minWidth: minW } : undefined;
     return (jsx(View, { style: containerStyle, children: jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: Platform.OS === 'web', contentContainerStyle: scrollViewStyle, children: jsx(ScrollView, { style: { flex: 1 }, showsVerticalScrollIndicator: Platform.OS === 'web', children: children }) }) }));
 };
 // Main Table Component
@@ -33300,7 +33134,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
             alignItems: 'center',
             marginBottom: DESIGN_TOKENS.spacing.md,
             paddingHorizontal: DESIGN_TOKENS.spacing.xs
-        }, children: [jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxs(Flex, { gap: 8, children: [jsxs(Text, { variant: "small", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 320, trapFocus: true, children: [jsx(Popover.Target, { children: jsxs(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsx(View, { style: {
+        }, children: [jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxs(Flex, { gap: 8, children: [jsxs(Text, { variant: "small", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, w: 320, trapFocus: true, children: [jsx(Popover.Target, { children: jsxs(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsx(View, { style: {
                                                 width: 6,
                                                 height: 6,
                                                 borderRadius: 3,
@@ -33330,7 +33164,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                                                     }) })), jsx(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: columns.filter(c => c.filterable).map(column => {
                                                         const currentFilter = getColumnFilter(column.key);
                                                         return (jsx(View, { children: renderFilterControl(column) }, `${column.key}-${(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) || 'no-filter'}`));
-                                                    }) })] }))] }) })] })), onEditModeChange && (jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 280, trapFocus: true, children: [jsx(Popover.Target, { children: jsx(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "eye", size: 14 }), children: "Columns" }) }), jsx(Popover.Dropdown, { children: jsxs(View, { style: { padding: 8, maxHeight: 300, width: 260 }, children: [jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxs(Row, { children: [jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsx(ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsx(Checkbox, { label: tempHeaderEdits[col.key] || col.header, onChange: () => {
+                                                    }) })] }))] }) })] })), onEditModeChange && (jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, w: 280, trapFocus: true, children: [jsx(Popover.Target, { children: jsx(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "eye", size: 14 }), children: "Columns" }) }), jsx(Popover.Dropdown, { children: jsxs(View, { style: { padding: 8, maxHeight: 300, width: 260 }, children: [jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxs(Row, { children: [jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsx(ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsx(Checkbox, { label: tempHeaderEdits[col.key] || col.header, onChange: () => {
                                                     if (hiddenColumns.includes(col.key)) {
                                                         setHiddenColumns(prev => prev.filter(h => h !== col.key));
                                                     }
@@ -33704,9 +33538,9 @@ const resolveTokenColor = (token, theme) => {
     return token; // assume raw color string
 };
 // Item
-const TimelineItem = forwardRef(({ children, title, bullet, colorVariant, lineVariant = 'solid', color, active, itemIndex = 0, isLastItem = false, itemAlign, ...rest }, ref) => {
+const TimelineItem = forwardRef(({ children, title, timestamp, bullet, colorVariant, lineVariant = 'solid', color, titleColor, descriptionColor, timestampColor, active, itemIndex = 0, isLastItem = false, itemAlign, ...rest }, ref) => {
     const theme = useTheme();
-    const { active: timelineActive, color: timelineColor, lineWidth, bulletSize: contextBulletSize, align, reverseActive, size, centerMode, metrics, } = useTimelineContext();
+    const { active: timelineActive, color: timelineColor, lineWidth, bulletSize: contextBulletSize, align, reverseActive, size, centerMode, metrics, titleColor: timelineTitleColor, descriptionColor: timelineDescriptionColor, timestampColor: timelineTimestampColor, } = useTimelineContext();
     const sizeConfig = metrics;
     const finalBulletSize = contextBulletSize || sizeConfig.bulletSize;
     const showAllColored = timelineActive === undefined;
@@ -33721,6 +33555,9 @@ const TimelineItem = forwardRef(({ children, title, bullet, colorVariant, lineVa
     const resolvedItemColor = color
         ? color
         : (colorVariant ? resolveTokenColor(colorVariant, theme) : timelineColor);
+    const resolvedTitleColor = titleColor !== null && titleColor !== void 0 ? titleColor : timelineTitleColor;
+    const resolvedDescriptionColor = descriptionColor !== null && descriptionColor !== void 0 ? descriptionColor : timelineDescriptionColor;
+    const resolvedTimestampColor = timestampColor !== null && timestampColor !== void 0 ? timestampColor : timelineTimestampColor;
     // Active logic
     const isActive = showAllColored
         ? true
@@ -33806,10 +33643,16 @@ const TimelineItem = forwardRef(({ children, title, bullet, colorVariant, lineVa
     const getTitleStyle = () => ({
         fontSize: sizeConfig.fontSize,
         fontWeight: '600',
-        color: theme.text.primary,
+        color: resolvedTitleColor !== null && resolvedTitleColor !== void 0 ? resolvedTitleColor : theme.text.primary,
         marginBottom: title && children ? 4 : 0,
         textAlign: effectiveAlign === 'right' ? 'right' : 'left',
     });
+    const getTimestampStyle = () => ({
+        fontSize: Math.max(10, Math.round(sizeConfig.fontSize * 0.8)),
+        color: resolvedTimestampColor !== null && resolvedTimestampColor !== void 0 ? resolvedTimestampColor : theme.text.secondary,
+        marginBottom: (title || children) ? 4 : 0,
+        textAlign: effectiveAlign === 'right' ? 'right' : 'left',
+    });
     const getItemWrapperStyle = () => {
         if (centerMode) {
             return {
@@ -33825,36 +33668,53 @@ const TimelineItem = forwardRef(({ children, title, bullet, colorVariant, lineVa
             alignItems: 'flex-start',
         };
     };
+    const applyTextStyle = (nodes, styleOverride) => {
+        if (!styleOverride)
+            return nodes;
+        return React__default.Children.map(nodes, (child) => {
+            var _a;
+            if (typeof child === 'string' || typeof child === 'number') {
+                return jsx(Text$1, { style: styleOverride, children: child });
+            }
+            if (!React__default.isValidElement(child))
+                return child;
+            const props = child.props || {};
+            const isTextLike = ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Text' || child.type === Text$1 || typeof props.children === 'string';
+            if (isTextLike) {
+                const mergedStyle = Array.isArray(props.style)
+                    ? [...props.style, styleOverride]
+                    : [props.style, styleOverride];
+                return React__default.cloneElement(child, { style: mergedStyle });
+            }
+            if (props.children) {
+                return React__default.cloneElement(child, { children: applyTextStyle(props.children, styleOverride) });
+            }
+            return child;
+        });
+    };
     if (centerMode) {
         // Three column layout: left content | bullet/line | right content
         const leftContent = effectiveAlign === 'left' && (title || children);
         const rightContent = effectiveAlign === 'right' && (title || children);
         // Helper to clone Text children with alignment
         const alignChildText = (nodes, side) => {
-            return React__default.Children.map(nodes, (child) => {
-                var _a;
-                if (!React__default.isValidElement(child))
-                    return child;
-                const props = child.props || {};
-                const isTextLike = ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Text' || (typeof props.children === 'string');
-                if (isTextLike) {
-                    const mergedStyle = Array.isArray(props.style)
-                        ? [...props.style, { textAlign: side }]
-                        : [props.style, { textAlign: side }];
-                    return React__default.cloneElement(child, { style: mergedStyle });
-                }
-                if (props.children) {
-                    return React__default.cloneElement(child, { children: alignChildText(props.children, side) });
-                }
-                return child;
-            });
+            const styleOverride = {
+                textAlign: side,
+                ...(resolvedDescriptionColor ? { color: resolvedDescriptionColor } : {}),
+            };
+            return applyTextStyle(nodes, styleOverride);
         };
-        return (jsxs(View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [jsx(View, { style: { flex: 1, paddingRight: sizeConfig.spacing, alignItems: 'flex-end' }, children: leftContent && (jsxs(View, { style: { width: '100%', alignItems: 'flex-end' }, children: [title && jsx(Text$1, { style: [getTitleStyle(), { textAlign: 'right' }], children: title }), alignChildText(children, 'right')] })) }), jsxs(View, { style: { width: finalBulletSize, alignItems: 'center', position: 'relative' }, children: [getLine(), jsx(View, { style: getBulletStyle(), children: bullet })] }), jsx(View, { style: { flex: 1, paddingLeft: sizeConfig.spacing, alignItems: 'flex-start' }, children: rightContent && (jsxs(View, { style: { width: '100%', alignItems: 'flex-start' }, children: [title && jsx(Text$1, { style: [getTitleStyle(), { textAlign: 'left' }], children: title }), alignChildText(children, 'left')] })) })] }));
+        return (jsxs(View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [jsx(View, { style: { flex: 1, paddingRight: sizeConfig.spacing, alignItems: 'flex-end' }, children: leftContent && (jsxs(View, { style: { width: '100%', alignItems: 'flex-end' }, children: [timestamp && (jsx(Text$1, { style: [getTimestampStyle(), { textAlign: 'right' }], children: timestamp })), title && jsx(Text$1, { style: [getTitleStyle(), { textAlign: 'right' }], children: title }), alignChildText(children, 'right')] })) }), jsxs(View, { style: { width: finalBulletSize, alignItems: 'center', position: 'relative' }, children: [getLine(), jsx(View, { style: getBulletStyle(), children: bullet })] }), jsx(View, { style: { flex: 1, paddingLeft: sizeConfig.spacing, alignItems: 'flex-start' }, children: rightContent && (jsxs(View, { style: { width: '100%', alignItems: 'flex-start' }, children: [timestamp && (jsx(Text$1, { style: [getTimestampStyle(), { textAlign: 'left' }], children: timestamp })), title && jsx(Text$1, { style: [getTitleStyle(), { textAlign: 'left' }], children: title }), alignChildText(children, 'left')] })) })] }));
     }
-    return (jsxs(View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [getLine(), jsx(View, { style: getBulletStyle(), children: bullet }), (title || children) && (jsxs(View, { style: getContentStyle(), children: [title && jsx(Text$1, { style: getTitleStyle(), children: title }), children] }))] }));
+    return (jsxs(View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [getLine(), jsx(View, { style: getBulletStyle(), children: bullet }), (title || children) && (jsxs(View, { style: getContentStyle(), children: [timestamp && jsx(Text$1, { style: getTimestampStyle(), children: timestamp }), title && jsx(Text$1, { style: getTitleStyle(), children: title }), resolvedDescriptionColor
+                        ? applyTextStyle(children, {
+                            color: resolvedDescriptionColor,
+                            textAlign: effectiveAlign === 'right' ? 'right' : 'left',
+                        })
+                        : children] }))] }));
 });
 // Root Timeline
-const Timeline = forwardRef(({ children, active, color, colorVariant, lineWidth, bulletSize, align = 'left', reverseActive = false, size = 'md', centerMode = false, ...rest }, ref) => {
+const Timeline = forwardRef(({ children, active, color, colorVariant, titleColor, descriptionColor, timestampColor, lineWidth, bulletSize, align = 'left', reverseActive = false, size = 'md', centerMode = false, ...rest }, ref) => {
     const theme = useTheme();
     const clampedSize = clampComponentSize(size, TIMELINE_ALLOWED_SIZES);
     const baseMetrics = resolveTimelineMetrics(clampedSize);
@@ -33876,6 +33736,9 @@ const Timeline = forwardRef(({ children, active, color, colorVariant, lineWidth,
         size: clampedSize,
         metrics,
         centerMode,
+        titleColor,
+        descriptionColor,
+        timestampColor,
     };
     const items = [];
     React__default.Children.forEach(children, (child, index) => {
@@ -34593,7 +34456,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();
@@ -34614,36 +34477,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
                 };
         }
     };
@@ -35711,7 +35574,7 @@ const styles$6 = StyleSheet.create({
     },
 });
 
-const WaveformSkeleton = ({ width = 300, height = 60, fullWidth = false, barsCount = 20, }) => {
+const WaveformSkeleton = ({ w = 300, h = 60, fullWidth = false, barsCount = 20, }) => {
     const theme = useTheme();
     const styles = StyleSheet.create({
         animatedBar: {
@@ -35727,18 +35590,18 @@ const WaveformSkeleton = ({ width = 300, height = 60, fullWidth = false, barsCou
             backgroundColor: theme.colors.gray[1],
             borderRadius: 4,
             flexDirection: 'row',
-            height,
+            height: h,
             justifyContent: 'space-between',
             paddingHorizontal: 4,
-            width: fullWidth ? '100%' : width,
+            width: fullWidth ? '100%' : w,
         },
     });
     // Generate random heights for skeleton bars
     const barHeights = Array.from({ length: barsCount }, () => Math.random() * 0.6 + 0.2 // Heights between 20% and 80% of container
     );
-    const barWidth = fullWidth ? 'auto' : Math.max(1, (width - 40) / barsCount - 2);
+    const barWidth = fullWidth ? 'auto' : Math.max(1, (w - 40) / barsCount - 2);
     return (jsx(View, { style: styles.container, children: barHeights.map((heightRatio, index) => {
-            const barHeight = height * heightRatio;
+            const barHeight = h * heightRatio;
             const isAnimated = index % 3 === 0; // Animate every 3rd bar for shimmer effect
             return (jsx(View, { style: [
                     styles.bar,
@@ -35753,7 +35616,7 @@ const WaveformSkeleton = ({ width = 300, height = 60, fullWidth = false, barsCou
         }) }));
 };
 
-const Waveform = React__default.memo(({ peaks, width = 300, height = 60, color = 'primary', barWidth = 2, barGap = 1, strokeWidth = 2, minBarHeight = 1, variant = 'bars', gradientColors, progress = 0, progressColor, interactive = false, normalize = false, fullWidth = false, onSeek, onDragStart, onDrag, onDragEnd, accessibilityLabel, accessibilityHint, style, maxVisibleBars, showProgressLine = false, progressLineStyle, showTimeStamps = false, duration, timeStampInterval, 
+const Waveform = React__default.memo(({ peaks, w = 300, h = 60, color = 'primary', barWidth = 2, barGap = 1, strokeWidth = 2, minBarHeight = 1, variant = 'bars', gradientColors, progress = 0, progressColor, interactive = false, normalize = false, fullWidth = false, onSeek, onDragStart, onDrag, onDragEnd, accessibilityLabel, accessibilityHint, style, maxVisibleBars, showProgressLine = false, progressLineStyle, showTimeStamps = false, duration, timeStampInterval, 
 // New features
 loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel = 1, zoomCenter = 0.5, onZoomChange, enableAnimations = true, showRMS = false, rmsData, markers = [], enablePerformanceMonitoring = false, onPerformanceMetrics, ...restProps }) => {
     const theme = useTheme();
@@ -35840,12 +35703,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
@@ -35868,7 +35731,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             downsampled.push(maxValue);
         }
         return downsampled;
-    }, [peaks, width, barWidth, barGap, fullWidth, maxVisibleBars]);
+    }, [peaks, w, barWidth, barGap, fullWidth, maxVisibleBars]);
     // Normalize peaks if requested
     const normalizedPeaks = useMemo(() => {
         if (!normalize || processedPeaks.length === 0) {
@@ -35891,16 +35754,16 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         if (fullWidth) {
             return {
                 width: '100%',
-                height: height,
-                viewBox: `0 0 ${actualWaveformWidth} ${height}`,
+                height: h,
+                viewBox: `0 0 ${actualWaveformWidth} ${h}`,
                 preserveAspectRatio: 'none'
             };
         }
         return {
-            width: width,
-            height: height
+            width: w,
+            height: h
         };
-    }, [fullWidth, actualWaveformWidth, height, width]);
+    }, [fullWidth, actualWaveformWidth, h, w]);
     const handleLayout = useCallback((event) => {
         const { width: containerWidth, height: containerHeight } = event.nativeEvent.layout;
         setContainerDimensions({ width: containerWidth, height: containerHeight });
@@ -35915,7 +35778,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 {
@@ -35923,7 +35786,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             position = Math.min(locationX, actualWaveformWidth) / actualWaveformWidth;
         }
         return Math.max(0, Math.min(1, position));
-    }, [fullWidth, containerDimensions.width, width, actualWaveformWidth]);
+    }, [fullWidth, containerDimensions.width, w, actualWaveformWidth]);
     const handleResponderGrant = useCallback((event) => {
         var _a, _b, _c;
         if (!interactive)
@@ -36010,8 +35873,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
     const renderBars = () => {
         return normalizedPeaks.map((peak, index) => {
             const x = index * (barWidth + barGap);
-            const barHeight = Math.max(minBarHeight, Math.abs(peak) * height * 0.8);
-            const y = (height - barHeight) / 2;
+            const barHeight = Math.max(minBarHeight, Math.abs(peak) * h * 0.8);
+            const y = (h - barHeight) / 2;
             const isProgress = x < progressX;
             const fillColor = isProgress ? actualProgressColor : waveformColor;
             return (jsx(Rect, { x: x, y: y, width: barWidth, height: barHeight, fill: fillColor, rx: variant === 'rounded' ? barWidth / 2 : 0 }, index));
@@ -36025,7 +35888,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
@@ -36039,8 +35902,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
     const renderGradient = () => {
         return (jsxs(Fragment, { children: [jsx(Defs, { children: jsx(LinearGradient, { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: resolvedGradientColors.map((color, index) => (jsx(Stop, { offset: `${(index / (resolvedGradientColors.length - 1 || 1)) * 100}%`, stopColor: color }, index))) }) }), normalizedPeaks.map((peak, index) => {
                     const x = index * (barWidth + barGap);
-                    const barHeight = Math.max(minBarHeight, Math.abs(peak) * height * 0.8);
-                    const y = (height - barHeight) / 2;
+                    const barHeight = Math.max(minBarHeight, Math.abs(peak) * h * 0.8);
+                    const y = (h - barHeight) / 2;
                     return (jsx(Rect, { x: x, y: y, width: barWidth, height: barHeight, fill: `url(#${gradientId})` }, index));
                 })] }));
     };
@@ -36050,8 +35913,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             return null;
         const clampedProgress = Math.max(0, Math.min(1, progress));
         const progressX = clampedProgress * actualWaveformWidth;
-        return (jsx(Line, { x1: progressX, y1: 0, x2: progressX, y2: height, stroke: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.color) || theme.colors.gray[7], strokeWidth: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.width) || 2, strokeOpacity: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.opacity) || 0.8 }));
-    }, [showProgressLine, progress, actualWaveformWidth, height, progressLineStyle, theme.colors.gray]);
+        return (jsx(Line, { x1: progressX, y1: 0, x2: progressX, y2: h, stroke: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.color) || theme.colors.gray[7], strokeWidth: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.width) || 2, strokeOpacity: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.opacity) || 0.8 }));
+    }, [showProgressLine, progress, actualWaveformWidth, h, progressLineStyle, theme.colors.gray]);
     // Timestamp markers component
     const TimeStamps = useMemo(() => {
         if (!showTimeStamps || !duration || !timeStampInterval)
@@ -36072,10 +35935,10 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 }
                 return `${mins}:${secs.toString().padStart(2, '0')}`;
             };
-            timestamps.push(jsxs(G, { children: [jsx(Line, { x1: x, y1: height - 10, x2: x, y2: height, stroke: theme.colors.gray[5], strokeWidth: 1, strokeOpacity: 0.6 }), jsx(Text$2, { x: x, y: height + 15, fill: theme.colors.gray[6], fontSize: 10, textAnchor: "middle", opacity: 0.8, children: formatTime(time) })] }, i));
+            timestamps.push(jsxs(G, { children: [jsx(Line, { x1: x, y1: h - 10, x2: x, y2: h, stroke: theme.colors.gray[5], strokeWidth: 1, strokeOpacity: 0.6 }), jsx(Text$2, { x: x, y: h + 15, fill: theme.colors.gray[6], fontSize: 10, textAnchor: "middle", opacity: 0.8, children: formatTime(time) })] }, i));
         }
         return jsx(G, { children: timestamps });
-    }, [showTimeStamps, duration, timeStampInterval, actualWaveformWidth, height, theme.colors]);
+    }, [showTimeStamps, duration, timeStampInterval, actualWaveformWidth, h, theme.colors]);
     // Selection overlay component
     const SelectionOverlay = useMemo(() => {
         if (!selection || selection[0] === selection[1])
@@ -36084,8 +35947,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         const startX = start * actualWaveformWidth;
         const endX = end * actualWaveformWidth;
         const selectionWidth = endX - startX;
-        return (jsx(Rect, { x: startX, y: 0, width: selectionWidth, height: height, fill: theme.colors.primary[3], opacity: 0.3, stroke: theme.colors.primary[5], strokeWidth: 1, strokeOpacity: 0.8 }));
-    }, [selection, actualWaveformWidth, height, theme.colors.primary]);
+        return (jsx(Rect, { x: startX, y: 0, width: selectionWidth, height: h, fill: theme.colors.primary[3], opacity: 0.3, stroke: theme.colors.primary[5], strokeWidth: 1, strokeOpacity: 0.8 }));
+    }, [selection, actualWaveformWidth, h, theme.colors.primary]);
     // Markers component
     const Markers = useMemo(() => {
         if (!markers || markers.length === 0)
@@ -36095,16 +35958,16 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 const markerColor = marker.color || theme.colors.warning[5];
                 switch (marker.type || 'line') {
                     case 'line':
-                        return (jsxs(G, { children: [jsx(Line, { x1: x, y1: 0, x2: x, y2: height, stroke: markerColor, strokeWidth: 2, strokeOpacity: 0.8 }), marker.label && (jsx(Text$2, { x: x, y: -5, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxs(G, { children: [jsx(Line, { x1: x, y1: 0, x2: x, y2: h, stroke: markerColor, strokeWidth: 2, strokeOpacity: 0.8 }), marker.label && (jsx(Text$2, { x: x, y: -5, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
                     case 'flag':
-                        return (jsxs(G, { children: [jsx(Line, { x1: x, y1: 0, x2: x, y2: height, stroke: markerColor, strokeWidth: 1, strokeOpacity: 0.6 }), jsx(Rect, { x: x + 2, y: 2, width: marker.label ? marker.label.length * 6 + 4 : 20, height: 14, fill: markerColor, rx: 2 }), marker.label && (jsx(Text$2, { x: x + 4, y: 12, fill: "white", fontSize: 9, fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxs(G, { children: [jsx(Line, { x1: x, y1: 0, x2: x, y2: h, stroke: markerColor, strokeWidth: 1, strokeOpacity: 0.6 }), jsx(Rect, { x: x + 2, y: 2, width: marker.label ? marker.label.length * 6 + 4 : 20, height: 14, fill: markerColor, rx: 2 }), marker.label && (jsx(Text$2, { x: x + 4, y: 12, fill: "white", fontSize: 9, fontWeight: "bold", children: marker.label }))] }, index));
                     case 'dot':
-                        return (jsxs(G, { children: [jsx("circle", { cx: x, cy: height / 2, r: 4, fill: markerColor, stroke: "white", strokeWidth: 1 }), marker.label && (jsx(Text$2, { x: x, y: height / 2 + 20, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxs(G, { children: [jsx("circle", { cx: x, cy: h / 2, r: 4, fill: markerColor, stroke: "white", strokeWidth: 1 }), marker.label && (jsx(Text$2, { x: x, y: h / 2 + 20, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
                     default:
                         return null;
                 }
             }) }));
-    }, [markers, actualWaveformWidth, height, theme.colors.warning]);
+    }, [markers, actualWaveformWidth, h, theme.colors.warning]);
     // RMS visualization component
     const RMSBars = useMemo(() => {
         if (!showRMS || !rmsData || rmsData.length === 0)
@@ -36112,11 +35975,11 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         const processedRMS = rmsData.slice(0, normalizedPeaks.length);
         return (jsx(G, { opacity: 0.5, children: processedRMS.map((rms, index) => {
                 const x = index * (barWidth + barGap);
-                const rmsHeight = Math.max(minBarHeight, Math.abs(rms) * height * 0.4); // RMS bars are shorter
-                const y = (height - rmsHeight) / 2;
+                const rmsHeight = Math.max(minBarHeight, Math.abs(rms) * h * 0.4); // RMS bars are shorter
+                const y = (h - rmsHeight) / 2;
                 return (jsx(Rect, { x: x, y: y, width: barWidth, height: rmsHeight, fill: theme.colors.gray[4], rx: variant === 'rounded' ? barWidth / 2 : 0 }, `rms-${index}`));
             }) }));
-    }, [showRMS, rmsData, normalizedPeaks, barWidth, barGap, minBarHeight, height, variant, theme.colors.gray]);
+    }, [showRMS, rmsData, normalizedPeaks, barWidth, barGap, minBarHeight, h, variant, theme.colors.gray]);
     const renderWaveform = () => {
         switch (variant) {
             case 'line':
@@ -36153,17 +36016,17 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         };
     // Early return for empty state
     if (normalizedPeaks.length === 0) {
-        return (jsx(View, { style: [style, fullWidth ? { width: '100%' } : { width }, { height, justifyContent: 'center', alignItems: 'center' }], accessibilityRole: "image", accessibilityLabel: accessibilityLabel || 'Empty waveform', ...restProps, children: jsx(Svg, { ...svgProps, children: jsx(Rect, { x: 0, y: height / 2 - 1, width: fullWidth ? '100%' : width, height: 2, fill: waveformColor, opacity: 0.3 }) }) }));
+        return (jsx(View, { style: [style, fullWidth ? { width: '100%' } : { width: w }, { height: h, justifyContent: 'center', alignItems: 'center' }], accessibilityRole: "image", accessibilityLabel: accessibilityLabel || 'Empty waveform', ...restProps, children: jsx(Svg, { ...svgProps, children: jsx(Rect, { x: 0, y: h / 2 - 1, width: fullWidth ? '100%' : w, height: 2, fill: waveformColor, opacity: 0.3 }) }) }));
     }
     if (loading) {
-        return (jsx(WaveformSkeleton, { width: width, height: height, fullWidth: fullWidth, barsCount: maxVisibleBars || 20 }));
+        return (jsx(WaveformSkeleton, { w: w, h: h, fullWidth: fullWidth, barsCount: maxVisibleBars || 20 }));
     }
     if (error) {
         return (jsx(View, { style: [
                 style,
-                fullWidth ? { width: '100%' } : { width },
+                fullWidth ? { width: '100%' } : { width: w },
                 {
-                    height,
+                    height: h,
                     justifyContent: 'center',
                     alignItems: 'center',
                     backgroundColor: theme.colors.error[1],
@@ -36173,7 +36036,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 }
             ], accessibilityRole: "alert", accessibilityLabel: `Waveform error: ${error}`, ...restProps, children: jsx(Text$1, { style: { color: theme.colors.error[7], fontSize: 12, textAlign: 'center' }, children: error }) }));
     }
-    return (jsx(WrapperComponent, { ref: containerRef, style: [style, fullWidth ? { width: '100%' } : { width }], accessible: true, focusable: interactive, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...wrapperProps, ...restProps, children: jsxs(Svg, { ...svgProps, children: [SelectionOverlay, RMSBars, renderWaveform(), ProgressLine, TimeStamps, Markers] }) }));
+    return (jsx(WrapperComponent, { ref: containerRef, style: [style, fullWidth ? { width: '100%' } : { width: w }], accessible: true, focusable: interactive, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...wrapperProps, ...restProps, children: jsxs(Svg, { ...svgProps, children: [SelectionOverlay, RMSBars, renderWaveform(), ProgressLine, TimeStamps, Markers] }) }));
 });
 Waveform.displayName = 'Waveform';
 
@@ -36195,7 +36058,7 @@ const AudioPlayer = forwardRef(({ source, peaks: providedPeaks, autoPlay = false
     channel: 'mix',
 }, showTime = true, timeFormat = 'mm:ss', showMetadata = false, metadata, showSpectrum = false, spectrumOptions, enableKeyboardShortcuts = true, enableGestures = true, onLoad, onPlaybackStateChange, onProgress, onEnd, onError, onBuffer, 
 // Waveform props
-width = 300, height = 60, color = 'primary', interactive = true, onSeek, style, ...waveformProps }, ref) => {
+w = 300, h = 60, color = 'primary', interactive = true, onSeek, style, ...waveformProps }, ref) => {
     const theme = useTheme();
     const { playSound } = useSound();
     // Refs
@@ -36542,7 +36405,7 @@ width = 300, height = 60, color = 'primary', interactive = true, onSeek, style,
                         alignSelf: 'flex-start',
                     }, children: jsx(Text$1, { style: { color: 'white', fontSize: DESIGN_TOKENS.typography.fontSize.sm }, children: "Retry" }) }))] }));
     }
-    return (jsxs(View, { style: [{ width: '100%' }, style], children: [controlsPosition === 'top' && renderMetadata(), controlsPosition === 'top' && renderControls(), controls.waveform && peaks.length > 0 && (jsx(View, { style: { marginVertical: DESIGN_TOKENS.spacing.sm }, children: jsx(Waveform, { peaks: peaks, width: width, height: height, color: color, progress: progress, interactive: interactive, onSeek: handleWaveformSeek, showProgressLine: true, progressLineStyle: {
+    return (jsxs(View, { style: [{ width: '100%' }, style], children: [controlsPosition === 'top' && renderMetadata(), controlsPosition === 'top' && renderControls(), controls.waveform && peaks.length > 0 && (jsx(View, { style: { marginVertical: DESIGN_TOKENS.spacing.sm }, children: jsx(Waveform, { peaks: peaks, w: w, h: h, color: color, progress: progress, interactive: interactive, onSeek: handleWaveformSeek, showProgressLine: true, progressLineStyle: {
                         color: theme.colors.primary[5],
                         width: 2,
                         opacity: 0.8,
@@ -37271,14 +37134,14 @@ const IMAGE_SIZES = {
     '2xl': 80,
     '3xl': 96,
 };
-function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', size, width, height, aspectRatio, borderWidth, borderColor, rounded, circle, fallback, loading, onLoad, onError, onLoadStart, onLoadEnd, containerStyle, imageStyle, testID, style, ...rest }) {
+function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', size, w, h, aspectRatio, borderWidth, borderColor, rounded, circle, fallback, loading, onLoad, onError, onLoadStart, onLoadEnd, containerStyle, imageStyle, testID, style, ...rest }) {
     const theme = useTheme();
     const [loadError, setLoadError] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
     const { spacingProps } = extractSpacingProps(rest);
     // Determine dimensions
-    let finalWidth = width;
-    let finalHeight = height;
+    let finalWidth = w;
+    let finalHeight = h;
     if (size && typeof size === 'string' && IMAGE_SIZES[size]) {
         finalWidth = finalWidth || IMAGE_SIZES[size];
         finalHeight = finalHeight || IMAGE_SIZES[size];
@@ -37303,7 +37166,7 @@ function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', siz
     const spacingStyles = getSpacingStyles(spacingProps);
     const containerStyles = {
         ...spacingStyles,
-        ...containerStyle,
+        ...StyleSheet.flatten(containerStyle),
     };
     const imageStyles = {
         width: finalWidth,
@@ -37312,7 +37175,7 @@ function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', siz
         borderWidth,
         borderColor: borderColor || theme.colors.gray[3],
         borderRadius,
-        ...imageStyle,
+        ...StyleSheet.flatten(imageStyle),
     };
     if (finalWidth !== undefined) {
         containerStyles.width = finalWidth;
@@ -39086,7 +38949,7 @@ function QRCode(props) {
             });
         }
     }, [copy, copyValue, toast, otherProps.copyToastMessage, otherProps.copyToastTitle]);
-    const content = (jsxs(View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsx(QRCodeSVG, { value: value, size: size, maxWidth: '100%', backgroundColor: backgroundColor, color: resolvedColor, errorCorrectionLevel: errorCorrectionLevel, quietZone: quietZone, logo: logo, style: style, testID: testID, accessibilityLabel: accessibilityLabel, onError: onError, ...spacingProps, ...layoutProps, ...rest }), otherProps.showCopyButton && (jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
+    const content = (jsxs(View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsx(QRCodeSVG, { value: value, size: size, maxW: '100%', backgroundColor: backgroundColor, color: resolvedColor, errorCorrectionLevel: errorCorrectionLevel, quietZone: quietZone, logo: logo, style: style, testID: testID, accessibilityLabel: accessibilityLabel, onError: onError, ...spacingProps, ...layoutProps, ...rest }), otherProps.showCopyButton && (jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
     if (shouldCopyOnPress) {
         return (jsx(Pressable, { onPress: handleCopy, accessibilityLabel: accessibilityLabel || 'QR code', children: content }));
     }
@@ -39736,111 +39599,6 @@ const styles$2 = StyleSheet.create({
     },
 });
 
-// Optional imports for web compatibility
-const LottieReact = Platform.OS === 'web'
-    ? resolveOptionalModule('lottie-react', {
-        accessor: mod => { var _a; return (_a = mod.default) !== null && _a !== void 0 ? _a : mod; },
-    })
-    : null;
-const DotLottieReact = Platform.OS === 'web'
-    ? resolveOptionalModule('@lottiefiles/dotlottie-react', {
-        accessor: mod => mod.DotLottieReact,
-    })
-    : null;
-let cachedNativeStatus = null;
-let nativeLottieComponent;
-let nativeModuleLoadWarningLogged = false;
-let nativeModuleConfigWarningLogged = false;
-const loadNativeLottieComponent = () => {
-    if (nativeLottieComponent !== undefined) {
-        return nativeLottieComponent;
-    }
-    const module = resolveOptionalModule('lottie-react-native', {
-        accessor: mod => { var _a; return (_a = mod === null || mod === void 0 ? void 0 : mod.default) !== null && _a !== void 0 ? _a : mod; },
-    });
-    if (!module && !nativeModuleLoadWarningLogged && __DEV__) {
-        console.warn('[Lottie] Failed to load lottie-react-native module. Rendering fallback instead.');
-        nativeModuleLoadWarningLogged = true;
-    }
-    nativeLottieComponent = module !== null && module !== void 0 ? module : null;
-    return nativeLottieComponent;
-};
-const getNativeLottieStatus = () => {
-    var _a, _b, _c;
-    if (cachedNativeStatus) {
-        return cachedNativeStatus;
-    }
-    if (Platform.OS === 'web') {
-        cachedNativeStatus = { component: null, available: false };
-        return cachedNativeStatus;
-    }
-    const component = loadNativeLottieComponent();
-    if (!component) {
-        cachedNativeStatus = { component: null, available: false };
-        return cachedNativeStatus;
-    }
-    let viewManagerAvailable = false;
-    try {
-        const viewManager = (_c = (_b = (_a = UIManager === null || UIManager === void 0 ? void 0 : UIManager.getViewManagerConfig) === null || _a === void 0 ? void 0 : _a.call(UIManager, 'LottieAnimationView')) !== null && _b !== void 0 ? _b : UIManager === null || UIManager === void 0 ? void 0 : UIManager.LottieAnimationView) !== null && _c !== void 0 ? _c : NativeModules === null || NativeModules === void 0 ? void 0 : NativeModules.LottieAnimationView;
-        viewManagerAvailable = !!viewManager;
-    }
-    catch (error) {
-        viewManagerAvailable = false;
-    }
-    if (!viewManagerAvailable && !nativeModuleConfigWarningLogged && __DEV__) {
-        console.warn('[Lottie] Native LottieAnimationView is unavailable. Run `npx expo install lottie-react-native` and rebuild to enable animations.');
-        nativeModuleConfigWarningLogged = true;
-    }
-    cachedNativeStatus = {
-        component,
-        available: viewManagerAvailable,
-    };
-    return cachedNativeStatus;
-};
-/**
- * Lottie component with safe fallback when native module not present or on unsupported platforms.
- */
-const Lottie = forwardRef(function LottieCmp(props, ref) {
-    const { source, autoPlay = true, loop = true, progress, speed = 1, style, testID, paused, resizeMode = 'contain', onAnimationFinish } = props;
-    const internalRef = useRef(null);
-    const nativeStatus = getNativeLottieStatus();
-    const NativeLottieView = nativeStatus.component;
-    useImperativeHandle(ref, () => ({
-        play: (...args) => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.play) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
-        pause: () => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.pause) === null || _b === void 0 ? void 0 : _b.call(_a); },
-        reset: () => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.reset) === null || _b === void 0 ? void 0 : _b.call(_a); },
-        setProgress: (p) => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.setProgress) === null || _b === void 0 ? void 0 : _b.call(_a, p); },
-    }), []);
-    useEffect(() => {
-        var _a;
-        if (progress != null && ((_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.setProgress)) {
-            internalRef.current.setProgress(progress);
-        }
-    }, [progress]);
-    // Web implementation
-    if (Platform.OS === 'web') {
-        // Check if source is a string (URL) and ends with .lottie
-        const isLottieFile = typeof source === 'string' && source.endsWith('.lottie');
-        if (isLottieFile && DotLottieReact) {
-            // Use DotLottieReact for .lottie files
-            return (jsx(DotLottieReact, { src: source, autoplay: autoPlay, loop: loop, speed: speed, style: style, "data-testid": testID }));
-        }
-        else if (LottieReact) {
-            // Use lottie-react for standard Lottie JSON
-            return (jsx(LottieReact, { animationData: source, autoplay: autoPlay, loop: loop, style: style, "data-testid": testID }));
-        }
-        else {
-            return jsx(Text, { children: "Lottie not available on web" });
-        }
-    }
-    // Native implementation using lottie-react-native
-    if (!nativeStatus.available || !NativeLottieView) {
-        return (jsx(View, { style: [{ justifyContent: 'center', alignItems: 'center' }, style], testID: testID, children: jsx(Text, { style: { textAlign: 'center', opacity: 0.7 }, children: "Lottie animations require the native `lottie-react-native` module. Install it and rebuild the app, or view this example on the web." }) }));
-    }
-    return (jsx(NativeLottieView, { ref: internalRef, source: source, autoPlay: autoPlay, loop: loop, speed: speed, progress: progress, style: style, testID: testID, resizeMode: resizeMode, onAnimationFinish: onAnimationFinish, ...(paused != null ? { paused } : {}) }));
-});
-Lottie.displayName = 'Lottie';
-
 const PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
 function formatTime(seconds) {
     const hours = Math.floor(seconds / 3600);
@@ -40788,7 +40546,7 @@ const DEFAULT_CONTROLS = {
     autoHide: true,
     autoHideTimeout: 3000,
 };
-const Video = forwardRef(({ source, width, height, aspectRatio = 16 / 9, poster, autoPlay = false, loop = false, muted = false, volume = 1, playbackRate = 1, quality = 'auto', controls = true, timeline = [], youtubeOptions, onPlay, onPause, onSeek, onTimeUpdate, onDurationChange, onVolumeChange, onPlaybackRateChange, onQualityChange, onFullscreenChange, onError, onLoad, onLoadStart, onBuffer, onTimelineEvent, style, videoStyle, controlsStyle, accessibilityLabel, testID, ...rest }, ref) => {
+const Video = forwardRef(({ source, w, h, aspectRatio = 16 / 9, poster, autoPlay = false, loop = false, muted = false, volume = 1, playbackRate = 1, quality = 'auto', controls = true, timeline = [], youtubeOptions, onPlay, onPause, onSeek, onTimeUpdate, onDurationChange, onVolumeChange, onPlaybackRateChange, onQualityChange, onFullscreenChange, onError, onLoad, onLoadStart, onBuffer, onTimelineEvent, style, videoStyle, controlsStyle, accessibilityLabel, testID, ...rest }, ref) => {
     const theme = useTheme();
     const { spacingProps } = extractSpacingProps(rest);
     // Internal state
@@ -41038,24 +40796,24 @@ const Video = forwardRef(({ source, width, height, aspectRatio = 16 / 9, poster,
             // overflow: 'hidden',
             // position: 'relative',
         };
-        if (width && height) {
-            baseStyle.width = width;
-            baseStyle.height = height;
+        if (w && h) {
+            baseStyle.width = w;
+            baseStyle.height = h;
         }
-        else if (width) {
-            baseStyle.width = width;
-            baseStyle.height = typeof width === 'number' ? width / aspectRatio : '100%';
+        else if (w) {
+            baseStyle.width = w;
+            baseStyle.height = typeof w === 'number' ? w / aspectRatio : '100%';
         }
-        else if (height) {
-            baseStyle.height = height;
-            baseStyle.width = typeof height === 'number' ? height * aspectRatio : '100%';
+        else if (h) {
+            baseStyle.height = h;
+            baseStyle.width = typeof h === 'number' ? h * aspectRatio : '100%';
         }
         else {
             baseStyle.width = '100%';
             baseStyle.aspectRatio = aspectRatio;
         }
         return baseStyle;
-    }, [theme.colors.surface, width, height, aspectRatio]);
+    }, [theme.colors.surface, w, h, aspectRatio]);
     // Handle touch events for control visibility
     const handleContainerPress = useCallback(() => {
         if (controlsConfig && controlsConfig.autoHide) {
@@ -41159,5 +40917,5 @@ function withPressAnimation(Component, animationProps) {
  */
 const AnimatedPressable = PressAnimation;
 
-export { AccessibilityProvider, Accordion, AmazonAppstoreBadge, AmazonAppstoreButton, AmazonMusicListenBadge, AmazonPrimeVideoBadge, AmazonStoreBadge, AnimatedPressable, AppLayoutProvider, AppLayoutRenderer, AppShell, AppShellAside, AppShellBottomNav, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AppStoreBadge, AppStoreButton, AppStoreDownloadBadge, AppleAppStoreButton, AppleMusicListenBadge, ApplePodcastsListenBadge, AutoComplete, Avatar, AvatarGroup, Badge, Block, Blockquote, Bold, BottomAppBar, BrandButton, BrandIcon, Breadcrumbs, Button, COMPONENT_SIZES$1 as COMPONENT_SIZES, COMPONENT_SIZE_ORDER, Calendar, Card, Carousel, Checkbox, Chip, ChromeWebStoreBadge, Cite, Code, CodeBlock, Collapse, ColorPicker, ColorSwatch, Column, ComponentWithDisclaimer, ContextMenu, CopyButton, DARK_THEME, DEFAULT_BREAKPOINTS, DEFAULT_COMPONENT_SIZE, DEFAULT_SOUND_IDS, DEFAULT_THEME, DataTable, DatePicker, DatePickerInput, Day, Dialog, DialogProvider, DialogRenderer, DirectionProvider, Disclaimer, DiscordJoinBadge, Divider, EmojiPicker, Emphasis, FDroidButton, FileInput, Flex, FloatingActions, Form, GalaxyStoreDownloadBadge, Gallery, Gauge, GitHubViewBadge, GooglePlayButton, GooglePlayDownloadBadge, Grid, GridItem, H1, H2, H3, H4, H5, H6, HapticsProvider, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlight, HuaweiAppGalleryBadge, I18nProvider, Icon, IconButton, Image, Indicator, Input, Italic, Kbd, KeyCap, KeyboardAwareLayout, KeyboardManagerProvider, Knob, Link, ListGroup, ListGroupBody, ListGroupDivider, ListGroupItem, Loader, LoadingOverlay, Lottie, MacAppStoreButton, Mark, Markdown, Masonry, Menu, MenuDivider, MenuDropdown, MenuItem, MenuItemButton, MenuLabel, MicrosoftStoreButton, MicrosoftStoreDownloadBadge, MiniCalendar, Month, MonthPicker, MonthPickerInput, Notice, NumberInput, Overlay, OverlayProvider, P, Pagination, PasswordInput, PhoneInput, PinInput, PlatformBlocksProvider, Popover, PressAnimation, Progress, QRCode, Radio, RadioGroup, RangeSlider, Rating, RedditJoinBadge, RichTextEditor, Ring, Row, SIZE_SCALES, Search, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Small, SoundCloudListenBadge, SoundProvider, Space, Spoiler, SpotifyListenBadge, Spotlight, SpotlightProvider, StatusBarManager, StepperWithSubComponents as Stepper, Strong, Sub, Sup, Switch, Table, TableOfContents, Tabs, Text, TextArea, TextInputBase, ThemeModeProvider, TikTokWatchBadge, TimePickerInput as TimePicker, TimePickerInput, TimelineWithItems as Timeline, Title, TitleRegistryProvider, Toast, ToastProvider, ToggleBar, ToggleButton, ToggleGroup, Tooltip, Tree, TwitchWatchBadge, Underline, Video, Waveform, YearPicker, YearPickerInput, YouTubeMusicListenBadge, YouTubeWatchBadge, calculateOverlayPositionEnhanced, clampComponentSize, clearOverlayPositionCache, createSound, createSpotlightStore, createTheme, debounce$1 as debounce, defineAppLayout, directSpotlight, extractDisclaimerProps, factory, getAllSounds, getColor, getFontSize, getHeight, getIconSize$1 as getIconSize, getLineHeight, getRadius$1 as getRadius, getScrollPosition, getShadow$1 as getShadow, getSize, getSoundsByCategory, getSpacing, getViewport, globalHotkeys, measureAsyncPerformance, measureElement, measurePerformance, onDialogsRequested, onSpotlightRequested, onToastsRequested, pointInRect, polymorphicFactory, px, rem, resolveComponentSize, resolveResponsiveProp, resolveResponsiveValue, resolveSize, spotlight, throttle, useAccessibility, useAppLayoutContext, useAppShell, useAppShellApi, useAppShellLayout, useBreakpoint, useColorScheme, useDialog, useDialogApi, useDialogs, useDirectSpotlightState, useDirection, useDirectionSafe, useDisclaimer, useDropdownPositioning, useEscapeKey, useFormContext, useGlobalHotkeys, useHaptics, useHapticsSettings, useHotkeys, useI18n, useKeyboardManager, useKeyboardManagerOptional, useNavbarHover, useOptionalFormContext, useOverlay, useOverlayApi, useOverlays, usePopoverPositioning, useSimpleDialog, useSound, useSpotlightStore, useSpotlightStoreInstance, useSpotlightToggle, useTheme, useThemeMode, useTitleRegistry, useTitleRegistryOptional, useToast, useToastApi, useToggleColorScheme, useTooltipPositioning, withDisclaimer, withPressAnimation };
+export { AccessibilityProvider, Accordion, AmazonAppstoreBadge, AmazonAppstoreButton, AmazonMusicListenBadge, AmazonPrimeVideoBadge, AmazonStoreBadge, AnimatedPressable, AppLayoutProvider, AppLayoutRenderer, AppShell, AppShellAside, AppShellBottomNav, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AppStoreBadge, AppStoreButton, AppStoreDownloadBadge, AppleAppStoreButton, AppleMusicListenBadge, ApplePodcastsListenBadge, AutoComplete, Avatar, AvatarGroup, Badge, Block, Blockquote, Bold, BottomAppBar, BrandButton, BrandIcon, Breadcrumbs, Button, COMPONENT_SIZES$1 as COMPONENT_SIZES, COMPONENT_SIZE_ORDER, Calendar, Card, Carousel, Checkbox, Chip, ChromeWebStoreBadge, Cite, Code, CodeBlock, Collapse, ColorPicker, ColorSwatch, Column, ComponentWithDisclaimer, ContextMenu, CopyButton, DARK_THEME, DEFAULT_BREAKPOINTS, DEFAULT_COMPONENT_SIZE, DEFAULT_SOUND_IDS, DEFAULT_THEME, DataTable, DatePicker, DatePickerInput, Day, Dialog, DialogProvider, DialogRenderer, DirectionProvider, Disclaimer, DiscordJoinBadge, Divider, EmojiPicker, Emphasis, FDroidButton, FileInput, Flex, FloatingActions, Form, GalaxyStoreDownloadBadge, Gallery, Gauge, GitHubViewBadge, GooglePlayButton, GooglePlayDownloadBadge, Grid, GridItem, H1, H2, H3, H4, H5, H6, HapticsProvider, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlight, HuaweiAppGalleryBadge, I18nProvider, Icon, IconButton, Image, Indicator, Input, Italic, Kbd, KeyCap, KeyboardAwareLayout, KeyboardManagerProvider, Knob, Link, ListGroup, ListGroupBody, ListGroupDivider, ListGroupItem, Loader, LoadingOverlay, MacAppStoreButton, Mark, Markdown, Masonry, Menu, MenuDivider, MenuDropdown, MenuItem, MenuItemButton, MenuLabel, MicrosoftStoreButton, MicrosoftStoreDownloadBadge, MiniCalendar, Month, MonthPicker, MonthPickerInput, Notice, NumberInput, Overlay, OverlayProvider, P, Pagination, PasswordInput, PhoneInput, PinInput, PlatformBlocksProvider, Popover, PressAnimation, Progress, QRCode, Radio, RadioGroup, RangeSlider, Rating, RedditJoinBadge, Ring, Row, SIZE_SCALES, Search, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Small, SoundCloudListenBadge, SoundProvider, Space, Spoiler, SpotifyListenBadge, Spotlight, SpotlightProvider, StatusBarManager, StepperWithSubComponents as Stepper, Strong, Sub, Sup, Switch, Table, TableOfContents, Tabs, Text, TextArea, TextInputBase, ThemeModeProvider, TikTokWatchBadge, TimePickerInput as TimePicker, TimePickerInput, TimelineWithItems as Timeline, Title, TitleRegistryProvider, Toast, ToastProvider, ToggleBar, ToggleButton, ToggleGroup, Tooltip, Tree, TwitchWatchBadge, Underline, Video, Waveform, YearPicker, YearPickerInput, YouTubeMusicListenBadge, YouTubeWatchBadge, calculateOverlayPositionEnhanced, clampComponentSize, clearOverlayPositionCache, createSound, createSpotlightStore, createTheme, debounce$1 as debounce, defineAppLayout, directSpotlight, extractDisclaimerProps, factory, getAllSounds, getColor, getFontSize, getHeight, getIconSize$1 as getIconSize, getLineHeight, getRadius$1 as getRadius, getScrollPosition, getShadow$1 as getShadow, getSize, getSoundsByCategory, getSpacing, getViewport, globalHotkeys, measureAsyncPerformance, measureElement, measurePerformance, onDialogsRequested, onSpotlightRequested, onToastsRequested, pointInRect, polymorphicFactory, px, rem, resolveComponentSize, resolveResponsiveProp, resolveResponsiveValue, resolveSize, spotlight, throttle, useAccessibility, useAppLayoutContext, useAppShell, useAppShellApi, useAppShellLayout, useBreakpoint, useColorScheme, useDialog, useDialogApi, useDialogs, useDirectSpotlightState, useDirection, useDirectionSafe, useDisclaimer, useDropdownPositioning, useEscapeKey, useFormContext, useGlobalHotkeys, useHaptics, useHapticsSettings, useHotkeys, useI18n, useKeyboardManager, useKeyboardManagerOptional, useNavbarHover, useOptionalFormContext, useOverlay, useOverlayApi, useOverlays, usePopoverPositioning, useSimpleDialog, useSound, useSpotlightStore, useSpotlightStoreInstance, useSpotlightToggle, useTheme, useThemeMode, useTitleRegistry, useTitleRegistryOptional, useToast, useToastApi, useToggleColorScheme, useTooltipPositioning, withDisclaimer, withPressAnimation };
 //# sourceMappingURL=index.js.map