@platform-blocks/ui 0.6.0 → 0.7.0

package/lib/cjs/index.js

@@ -726,16 +726,16 @@ const DARK_THEME = {
             '#F2F2F7'
         ],
         highlight: [
-            '#2A2313',
-            '#3D3320',
-            '#4F422D',
-            '#61523A',
-            '#736247',
-            '#FBBF24', // Keep same base as light mode for consistency
-            '#FCD34D',
-            '#FDE68A',
-            '#FEF3C7',
-            '#FFFBEB'
+            '#1E3A5F', // Deep blue
+            '#1E4976', // 
+            '#1D5A8F', // 
+            '#2563EB', // Bright blue
+            '#3B82F6', // Primary blue
+            '#60A5FA', // Light blue
+            '#93C5FD', // 
+            '#BFDBFE', // 
+            '#DBEAFE', // 
+            '#EFF6FF' // Very light blue
         ],
         pink: [
             '#831843', '#9D174D', '#BE185D', '#DB2777', '#EC4899',
@@ -791,9 +791,9 @@ const DARK_THEME = {
     },
     states: {
         focusRing: 'rgba(10,132,255,0.55)',
-        textSelection: 'rgba(251, 191, 36, 0.2)', // Slightly more subtle for dark mode
-        highlightText: '#FDE68A', // highlight[7] for good contrast on dark
-        highlightBackground: 'rgba(97, 82, 58, 0.8)' // Darker highlight[3] with more opacity
+        textSelection: 'rgba(10, 132, 255, 0.25)', // Primary blue for selection
+        highlightText: '#60A5FA', // primary[4] - bright blue for good contrast on dark
+        highlightBackground: 'rgba(59, 130, 246, 0.35)' // primary[5] with transparency
     },
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
     fontSizes: {
@@ -882,6 +882,8 @@ const DARK_THEME = {
 const optionalModuleCache = new Map();
 const isDev = typeof __DEV__ !== 'undefined' ? __DEV__ : process.env.NODE_ENV !== 'production';
 // Metro bundler requires static string literals for require; keep all optional modules here.
+// NOTE: Do NOT add react-syntax-highlighter here - it causes Metro to fail on native
+// when the package isn't installed. Instead, pass the loader dynamically from web-only code.
 const optionalModuleLoaders = {
     'react-native': () => require('react-native'),
     'expo-clipboard': () => require('expo-clipboard'),
@@ -890,21 +892,9 @@ const optionalModuleLoaders = {
     'expo-document-picker': () => require('expo-document-picker'),
     'react-native-webview': () => require('react-native-webview'),
     'lodash.debounce': () => require('lodash.debounce'),
-    'react-syntax-highlighter': () => require('react-syntax-highlighter'),
-    'react-syntax-highlighter/dist/esm/languages/prism/jsx': () => require('react-syntax-highlighter/dist/esm/languages/prism/jsx'),
-    'react-syntax-highlighter/dist/esm/languages/prism/tsx': () => require('react-syntax-highlighter/dist/esm/languages/prism/tsx'),
-    'react-syntax-highlighter/dist/esm/languages/prism/typescript': () => require('react-syntax-highlighter/dist/esm/languages/prism/typescript'),
-    'react-syntax-highlighter/dist/esm/languages/prism/javascript': () => require('react-syntax-highlighter/dist/esm/languages/prism/javascript'),
-    'react-syntax-highlighter/dist/esm/languages/prism/json': () => require('react-syntax-highlighter/dist/esm/languages/prism/json'),
-    'react-syntax-highlighter/dist/esm/languages/prism/bash': () => require('react-syntax-highlighter/dist/esm/languages/prism/bash'),
-    'react-syntax-highlighter/dist/esm/styles/prism/prism': () => require('react-syntax-highlighter/dist/esm/styles/prism/prism'),
-    'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus': () => require('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus'),
     'expo-audio': () => require('expo-audio'),
     'react-native-gesture-handler': () => require('react-native-gesture-handler'),
     'expo-status-bar': () => require('expo-status-bar'),
-    'lottie-react': () => require('lottie-react'),
-    '@lottiefiles/dotlottie-react': () => require('@lottiefiles/dotlottie-react'),
-    'lottie-react-native': () => require('lottie-react-native'),
     'expo-navigation-bar': () => require('expo-navigation-bar'),
 };
 /**
@@ -1992,7 +1982,6 @@ function resolveComponentSize(value, scale, options = {}) {
     }
     const firstAvailable = allowed.find(key => scale[key] !== undefined);
     if (firstAvailable && scale[firstAvailable] !== undefined) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return scale[firstAvailable];
     }
     throw new Error('resolveComponentSize: no matching size found in provided scale.');
@@ -2354,18 +2343,17 @@ function extractSpacingProps(props) {
  *
  * @param props - The layout properties object
  * @param props.fullWidth - When true, sets width to 100%
- * @param props.w - Shorthand width property (overrides fullWidth)
- * @param props.width - Specific width value (overrides fullWidth and w)
- * @param props.height - Height value
- * @param props.maxWidth - Maximum width constraint
- * @param props.minWidth - Minimum width constraint
- * @param props.maxHeight - Maximum height constraint
- * @param props.minHeight - Minimum height constraint
+ * @param props.w - Width property (overrides fullWidth)
+ * @param props.h - Height value
+ * @param props.maxW - Maximum width constraint
+ * @param props.minW - Minimum width constraint
+ * @param props.maxH - Maximum height constraint
+ * @param props.minH - Minimum height constraint
  *
  * @returns A partial ViewStyle object containing the computed layout styles
  *
  * @remarks
- * Property precedence for width: width > w > fullWidth
+ * Property precedence for width: w > fullWidth
  * The function processes width properties in order of specificity, with more specific
  * properties overriding more general ones.
  */
@@ -2375,43 +2363,38 @@ function getLayoutStyles(props) {
     if (props.fullWidth) {
         styles.width = '100%';
     }
-    // Handle shorthand width prop first
+    // Handle width prop (overrides fullWidth)
     if (props.w !== undefined) {
         styles.width = props.w;
     }
-    // Handle specific dimensions (override fullWidth and w if specified)
-    if (props.width !== undefined) {
-        styles.width = props.width;
-    }
-    if (props.height !== undefined) {
-        styles.height = props.height;
+    if (props.h !== undefined) {
+        styles.height = props.h;
     }
-    if (props.maxWidth !== undefined) {
-        styles.maxWidth = props.maxWidth;
+    if (props.maxW !== undefined) {
+        styles.maxWidth = props.maxW;
     }
-    if (props.minWidth !== undefined) {
-        styles.minWidth = props.minWidth;
+    if (props.minW !== undefined) {
+        styles.minWidth = props.minW;
     }
-    if (props.maxHeight !== undefined) {
-        styles.maxHeight = props.maxHeight;
+    if (props.maxH !== undefined) {
+        styles.maxHeight = props.maxH;
     }
-    if (props.minHeight !== undefined) {
-        styles.minHeight = props.minHeight;
+    if (props.minH !== undefined) {
+        styles.minHeight = props.minH;
     }
     return styles;
 }
 // Helper to extract layout props from component props
 function extractLayoutProps(props) {
-    const { fullWidth, w, width, height, maxWidth, minWidth, maxHeight, minHeight, ...otherProps } = props;
+    const { fullWidth, w, h, maxW, minW, maxH, minH, ...otherProps } = props;
     const layoutProps = {
         fullWidth,
         w,
-        width,
-        height,
-        maxWidth,
-        minWidth,
-        maxHeight,
-        minHeight
+        h,
+        maxW,
+        minW,
+        maxH,
+        minH
     };
     return { layoutProps, otherProps };
 }
@@ -2680,7 +2663,7 @@ async function measureAsyncPerformance(name, fn) {
 const OVERLAY_CACHE_LIMIT = 200;
 const overlayPositionCache = new Map();
 const formatNumber = (value) => Number.isFinite(value) ? Math.round(value * 100) / 100 : 0;
-const createOverlayCacheKey = (anchorX, anchorY, anchorWidth, anchorHeight, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary) => {
+const createOverlayCacheKey = (anchorX, anchorY, anchorWidth, anchorHeight, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary, matchAnchorWidth) => {
     return [
         formatNumber(anchorX),
         formatNumber(anchorY),
@@ -2697,6 +2680,7 @@ const createOverlayCacheKey = (anchorX, anchorY, anchorWidth, anchorHeight, over
         flip ? '1' : '0',
         shift ? '1' : '0',
         formatNumber(boundary),
+        matchAnchorWidth ? '1' : '0',
         reactNative.Platform.OS,
     ].join('|');
 };
@@ -2742,11 +2726,12 @@ registerViewportListeners();
  * Enhanced overlay positioning that prevents off-screen rendering with intelligent caching
  */
 function calculateOverlayPositionEnhanced(anchor, overlay, options = {}) {
-    const { placement = 'auto', offset = 8, viewport = getViewport(), strategy = 'fixed', flip = true, shift = true, boundary = 8, fallbackPlacements = ['bottom', 'top', 'right', 'left'] } = options;
+    const { placement = 'auto', offset = 8, viewport = getViewport(), strategy = 'fixed', flip = true, shift = true, boundary = 8, fallbackPlacements = ['bottom', 'top', 'right', 'left'], matchAnchorWidth = false, } = options;
     // If overlay height is unknown/small (pre-measure), use a heuristic height for decision-making
     // This helps avoid choosing "bottom" when near the bottom of the viewport.
     const heuristicHeight = Math.max(overlay.height || 0, 240);
-    const overlayWidth = overlay.width;
+    // When matchAnchorWidth is true, use anchor width for overlay width calculations
+    const overlayWidth = matchAnchorWidth ? anchor.width : overlay.width;
     const overlayHeight = overlay.height > 0 ? overlay.height : heuristicHeight;
     // Account for scroll if using absolute positioning
     const scrollX = (reactNative.Platform.OS === 'web' && strategy === 'absolute')
@@ -2757,7 +2742,7 @@ function calculateOverlayPositionEnhanced(anchor, overlay, options = {}) {
     const anchorX = anchor.x + scrollX;
     const anchorY = anchor.y + scrollY;
     // Check cache first
-    const cacheKey = createOverlayCacheKey(anchorX, anchorY, anchor.width, anchor.height, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary);
+    const cacheKey = createOverlayCacheKey(anchorX, anchorY, anchor.width, anchor.height, overlayWidth, overlayHeight, placement, offset, viewport, strategy, flip, shift, boundary, matchAnchorWidth);
     const cached = getCachedOverlayPosition(cacheKey);
     if (cached) {
         return cached;
@@ -2825,10 +2810,14 @@ function calculateOverlayPositionEnhanced(anchor, overlay, options = {}) {
     // If enforcement moved the overlay to the opposite vertical side to avoid covering the anchor,
     // reflect that in the returned placement so arrows/styles are consistent.
     const resolvedPlacement = adjustPlacementIfMoved(finalPlacement, result, anchorRect);
+    // When matchAnchorWidth is true, preserve anchor width without constraining to maxWidth
+    const computedFinalWidth = matchAnchorWidth
+        ? anchor.width
+        : Math.min(result.finalWidth || overlay.width, result.maxWidth || overlay.width);
     const finalResult = {
         ...result,
         placement: resolvedPlacement,
-        finalWidth: Math.min(result.finalWidth || overlay.width, result.maxWidth || overlay.width),
+        finalWidth: computedFinalWidth,
         finalHeight: Math.min(result.finalHeight || overlay.height, result.maxHeight || overlay.height),
     };
     // Cache the result
@@ -3585,9 +3574,14 @@ const Text = (allProps) => {
     }
     // Platform-specific rendering
     if (reactNative.Platform.OS === 'web' && isHTMLVariant(htmlTag)) {
-        const webStyles = convertToWebStyles([textStyles, spacingStyles, style,
-            // make sure text is side to side
-            { display: 'inline' }
+        const styleArray = Array.isArray(style) ? style : [style];
+        const hasDisplayOverride = styleArray.some((item) => item && ((item.display !== undefined) || (item.whiteSpace !== undefined)));
+        const webStyles = convertToWebStyles([
+            textStyles,
+            spacingStyles,
+            style,
+            // default to inline unless caller explicitly requests display/whitespace behavior
+            ...(hasDisplayOverride ? [] : [{ display: 'inline' }]),
         ]);
         // Handle text selection for web
         if (!selectable) {
@@ -6263,7 +6257,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 }
             : {})
     };
@@ -6697,18 +6691,22 @@ const useSafeSafeAreaInsets = () => {
         return { top: 0, bottom: 0, left: 0, right: 0 };
     }
 };
-function Dialog({ visible, variant = 'modal', title, children, closable = true, backdrop = true, backdropClosable = true, shouldClose = false, onClose, width, height, style, bottomSheetSwipeZone = 'container', }) {
+function Dialog({ visible, variant = 'modal', title, children, closable = true, backdrop = true, backdropClosable = true, shouldClose = false, onClose, w, h, radius, style, showHeader = true, bottomSheetSwipeZone = 'container', }) {
     const theme = useTheme();
     const { isRTL } = useDirection();
     const insets = useSafeSafeAreaInsets();
     const { width: screenWidth, height: screenHeight } = reactNative.useWindowDimensions();
     const horizontalMargin = 32; // safety margin so dialog never touches edges
     const isNativePlatform = reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android';
-    const defaultModalMaxWidth = Math.min((width || 500), Math.max(200, screenWidth - horizontalMargin));
+    const defaultModalMaxWidth = Math.min((w || 500), Math.max(200, screenWidth - horizontalMargin));
     const modalEffectiveWidth = variant !== 'modal'
         ? undefined
         : Math.min(defaultModalMaxWidth, screenWidth - horizontalMargin);
-    const bottomSheetMaxWidth = Math.min(width ? width : (isNativePlatform ? 720 : Math.min(600, screenWidth - horizontalMargin)), screenWidth);
+    const bottomSheetMaxWidth = Math.min(w ? w : (isNativePlatform ? 720 : Math.min(600, screenWidth - horizontalMargin)), screenWidth);
+    const resolvedRadius = radius !== null && radius !== void 0 ? radius : (variant === 'bottomsheet' ? 20 : 16);
+    const resolvedMaxHeight = variant === 'bottomsheet'
+        ? (h !== null && h !== void 0 ? h : Math.max(200, screenHeight - insets.top - 24))
+        : (variant === 'fullscreen' ? '100%' : (h || '90%'));
     const invokeOnClose = React.useCallback(() => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [onClose]);
@@ -6724,23 +6722,25 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     }, visible && closable);
     // Pan responder for bottomsheet swipe-to-dismiss
     const panResponder = React.useRef(reactNative.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 (reactNative.Platform.OS === 'web') {
@@ -6764,20 +6764,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) => {
@@ -6934,8 +6926,8 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     }, [shouldClose]);
     const isDark = theme.colorScheme === 'dark';
     const surfaceColor = isDark ? theme.backgrounds.surface : '#FFFFFF';
-    const borderColor = isDark ? theme.colors.gray[6] : '#E1E3E6';
-    const headerBg = isDark ? theme.backgrounds.subtle : surfaceColor;
+    isDark ? theme.colors.gray[6] : '#E1E3E6';
+    const headerBg = surfaceColor;
     const contentBg = surfaceColor;
     const dynamicStyles = reactNative.StyleSheet.create({
         backdrop: {
@@ -6946,24 +6938,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',
@@ -6989,24 +6985,27 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
                     }
                     : reactNative.Platform.OS === 'android' && variant !== 'fullscreen'
                         ? { elevation: 16, }
-                        : {
-                            boxShadow: 'none',
-                            height: '100%',
-                            position: 'absolute',
-                        }),
+                        : variant === 'fullscreen'
+                            ? {
+                                boxShadow: 'none',
+                                height: '100%',
+                                position: 'absolute',
+                            }
+                            : { boxShadow: 'none' }),
         }, // Allow boxShadow on web
         header: {
             alignItems: 'center',
-            backgroundColor: headerBg,
-            borderBottomColor: borderColor,
-            borderBottomWidth: variant === 'fullscreen' ? 0 : 1,
+            backgroundColor: showHeader ? headerBg : 'transparent',
+            // borderBottomColor: showHeader ? borderColor : 'transparent',
+            // borderBottomWidth: showHeader && variant !== 'fullscreen' ? 1 : 0,
             flexDirection: isRTL ? 'row-reverse' : 'row',
             justifyContent: 'space-between',
             padding: 20,
+            paddingBottom: title ? 0 : 20,
         },
         content: {
-            // For modal variant, remove flex to allow fit-content behavior
-            ...(variant === 'modal' ? {} : { flex: 1 }),
+            // Only fullscreen content should stretch
+            ...(variant === 'fullscreen' ? { flex: 1 } : {}),
             alignSelf: 'stretch',
             backgroundColor: contentBg,
             padding: variant === 'fullscreen' ? 0 : 20,
@@ -7062,8 +7061,10 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     });
     const bottomSheetAnimatedStyle = Animated.useAnimatedStyle(() => {
         if (variant === 'bottomsheet') {
+            // Clamp to 0 minimum to prevent seeing "under" the sheet
+            const clampedY = Math.max(0, slideAnim.value);
             return {
-                transform: [{ translateY: slideAnim.value }],
+                transform: [{ translateY: clampedY }],
             };
         }
         return {};
@@ -7080,7 +7081,7 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
             animatedStyle = bottomSheetAnimatedStyle;
         }
         return (jsxRuntime.jsxs(Animated.View, { style: [dynamicStyles.modalContainer, animatedStyle], ...(variant === 'bottomsheet' && bottomSheetSwipeZone === 'container' && panHandlers ? panHandlers : {}), children: [variant === 'bottomsheet' && (jsxRuntime.jsx(reactNative.View, { style: dynamicStyles.dragHandleContainer, ...(bottomSheetSwipeZone === 'handle' && panHandlers ? panHandlers : {}), children: jsxRuntime.jsx(reactNative.View, { style: dynamicStyles.dragHandle }) })), (title !== null &&
-                    title && closable) && (jsxRuntime.jsxs(reactNative.View, { style: dynamicStyles.header, children: [jsxRuntime.jsx(Text, { variant: "h3", color: "text", children: title || '' }), closable && (jsxRuntime.jsx(Button, { variant: "ghost", onPress: handleClose, style: dynamicStyles.closeButton, children: jsxRuntime.jsx(Icon, { name: "x", size: "md" }) }))] })), jsxRuntime.jsx(reactNative.View, { style: [dynamicStyles.content, style], children: children })] }));
+                    title && closable) && (jsxRuntime.jsxs(reactNative.View, { style: dynamicStyles.header, children: [jsxRuntime.jsx(Text, { variant: "h3", color: "text", children: title || '' }), closable && variant !== 'bottomsheet' && (jsxRuntime.jsx(Button, { variant: "ghost", onPress: handleClose, style: dynamicStyles.closeButton, children: jsxRuntime.jsx(Icon, { name: "x", size: "md" }) }))] })), jsxRuntime.jsx(reactNative.View, { style: [dynamicStyles.content, style], children: children })] }));
     };
     return (jsxRuntime.jsx(reactNative.Modal, { visible: visible, transparent: true, animationType: "none", statusBarTranslucent: variant === 'fullscreen', children: jsxRuntime.jsxs(Animated.View, { style: [
                 dynamicStyles.backdrop,
@@ -7289,7 +7290,7 @@ function DialogRenderer() {
         return null;
     // Render the topmost dialog
     const topDialog = dialogs[dialogs.length - 1];
-    return (jsxRuntime.jsx(Dialog, { visible: true, variant: topDialog.variant, title: topDialog.title, closable: topDialog.closable, backdrop: topDialog.backdrop, backdropClosable: topDialog.backdropClosable, shouldClose: topDialog.isClosing, onClose: () => removeDialog(topDialog.id), children: topDialog.content }));
+    return (jsxRuntime.jsx(Dialog, { visible: true, variant: topDialog.variant, title: topDialog.title, closable: topDialog.closable, backdrop: topDialog.backdrop, backdropClosable: topDialog.backdropClosable, shouldClose: topDialog.isClosing, onClose: () => removeDialog(topDialog.id), w: topDialog.w, h: topDialog.h, radius: topDialog.radius, style: topDialog.style, showHeader: topDialog.showHeader, children: topDialog.content }));
 }
 
 const Flex = factory((props, ref) => {
@@ -8374,7 +8375,14 @@ const getContrastPreference = () => {
         return 'less';
     return 'no-preference';
 };
-const getColorScheme = () => { var _a, _b; return (_b = (_a = reactNative.Appearance === null || reactNative.Appearance === void 0 ? void 0 : reactNative.Appearance.getColorScheme) === null || _a === void 0 ? void 0 : _a.call(reactNative.Appearance)) !== null && _b !== void 0 ? _b : 'no-preference'; };
+const getColorScheme = () => {
+    var _a;
+    const scheme = (_a = reactNative.Appearance === null || reactNative.Appearance === void 0 ? void 0 : reactNative.Appearance.getColorScheme) === null || _a === void 0 ? void 0 : _a.call(reactNative.Appearance);
+    // Handle 'unspecified' from newer React Native versions
+    if (scheme === 'light' || scheme === 'dark')
+        return scheme;
+    return 'no-preference';
+};
 const getReducedMotion = async () => {
     if (reactNative.Platform.OS === 'web') {
         if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
@@ -8599,7 +8607,13 @@ function useDeviceInfo(options = {}) {
     React.useEffect(() => {
         var _a;
         const colorSubscription = (_a = reactNative.Appearance === null || reactNative.Appearance === void 0 ? void 0 : reactNative.Appearance.addChangeListener) === null || _a === void 0 ? void 0 : _a.call(reactNative.Appearance, ({ colorScheme: scheme }) => {
-            setColorScheme(scheme !== null && scheme !== void 0 ? scheme : 'no-preference');
+            // Handle 'unspecified' from newer React Native versions
+            if (scheme === 'light' || scheme === 'dark') {
+                setColorScheme(scheme);
+            }
+            else {
+                setColorScheme('no-preference');
+            }
         });
         const mediaListeners = [];
         let boldSubscription;
@@ -9144,7 +9158,7 @@ function SpotlightRoot({ query, onQueryChange, children, opened = false, onClose
     const targetWidth = Math.min(560, Math.max(280, screenWidth - horizontalMargin));
     // (Hotkey registration moved to main Spotlight component for access to store.toggle())
     const fullscreen = shouldUseModal;
-    return (jsxRuntime.jsx(Dialog, { visible: opened, onClose: onClose, variant: fullscreen ? 'fullscreen' : 'modal', backdrop: true, backdropClosable: true, width: fullscreen ? undefined : targetWidth, title: null, style: [
+    return (jsxRuntime.jsx(Dialog, { visible: opened, onClose: onClose, variant: fullscreen ? 'fullscreen' : 'modal', backdrop: true, backdropClosable: true, w: fullscreen ? undefined : targetWidth, title: null, style: [
             styles$e.spotlightModal,
             fullscreen && { width: '100%', height: '100%', maxHeight: '100%', borderRadius: 0, position: 'fixed', top: 0, left: 0 },
             !fullscreen && {
@@ -9706,6 +9720,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;
@@ -9752,12 +9783,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);
@@ -10811,7 +10844,7 @@ const Masonry = factory((props, ref) => {
     };
     const containerStyle = {
         ...spacingStyle,
-        ...style,
+        ...reactNative.StyleSheet.flatten(style),
     };
     // Show loading state
     if (loading) {
@@ -11881,9 +11914,10 @@ const Row = ({ direction = 'row', gap = 'sm', ...props }) => {
 };
 /**
  * Column component - alias for Flex with direction="column"
+ * Defaults to fullWidth={true} since vertical layouts typically fill available width
  */
-const Column = ({ direction = 'column', gap = 'sm', ...props }) => {
-    return jsxRuntime.jsx(Flex, { direction: direction, gap: gap, ...props });
+const Column = ({ direction = 'column', gap = 'sm', fullWidth = true, ...props }) => {
+    return jsxRuntime.jsx(Flex, { direction: direction, gap: gap, fullWidth: fullWidth, ...props });
 };
 Row.displayName = 'Row';
 
@@ -13998,35 +14032,101 @@ function createNativeHighlighter(theme, isDark, variant = 'code', overrides) {
     };
 }
 
-// Prism light build for JSX/TSX (react-syntax-highlighter)
+// Syntax highlighter - only loaded on web, native uses built-in tokenizer
+// These are initialized lazily on first use to avoid Metro bundling issues
 let PrismSyntaxHighlighter = null;
 let prismLightTheme = null;
 let prismDarkTheme = null;
-if (reactNative.Platform.OS === 'web') {
-    PrismSyntaxHighlighter = resolveOptionalModule('react-syntax-highlighter', {
-        accessor: (module) => module.PrismLight,
-        devWarning: 'react-syntax-highlighter not found, CodeBlock will use basic formatting',
-    });
-    if (PrismSyntaxHighlighter) {
-        const registerLanguage = (moduleId, name) => {
-            const languageModule = resolveOptionalModule(moduleId, { accessor: (mod) => mod.default });
-            if (languageModule) {
-                PrismSyntaxHighlighter.registerLanguage(name, languageModule);
+let syntaxHighlighterInitialized = false;
+// Use indirect require via new Function to prevent Metro from statically analyzing imports
+// Metro bundles ALL require() calls it finds, even in try-catch blocks
+// new Function() creates a runtime-evaluated require that Metro can't see
+const safeRequire = (() => {
+    try {
+        // This creates: function(moduleName) { return require(moduleName); }
+        // The string 'require' is not statically analyzable by Metro
+        return new Function('moduleName', 'return require(moduleName)');
+    }
+    catch (_a) {
+        return null;
+    }
+})();
+function initSyntaxHighlighter() {
+    if (syntaxHighlighterInitialized)
+        return;
+    syntaxHighlighterInitialized = true;
+    // Only attempt to load on web
+    if (reactNative.Platform.OS !== 'web')
+        return;
+    if (!safeRequire)
+        return;
+    try {
+        const rsh = safeRequire('react-syntax-highlighter');
+        PrismSyntaxHighlighter = rsh.PrismLight;
+        if (PrismSyntaxHighlighter) {
+            // Register languages
+            try {
+                const jsx = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/jsx').default;
+                PrismSyntaxHighlighter.registerLanguage('jsx', jsx);
             }
-        };
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/jsx', 'jsx');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/tsx', 'tsx');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/typescript', 'typescript');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/javascript', 'javascript');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/json', 'json');
-        registerLanguage('react-syntax-highlighter/dist/esm/languages/prism/bash', 'bash');
-        prismLightTheme = resolveOptionalModule('react-syntax-highlighter/dist/esm/styles/prism/prism', {
-            accessor: (mod) => mod.default,
-        });
-        prismDarkTheme = resolveOptionalModule('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus', {
-            accessor: (mod) => mod.default,
-            devWarning: 'Failed to load prism vsc-dark-plus theme, falling back to prism',
-        });
+            catch (_a) {
+                // Language not available
+            }
+            try {
+                const tsx = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/tsx').default;
+                PrismSyntaxHighlighter.registerLanguage('tsx', tsx);
+            }
+            catch (_b) {
+                // Language not available
+            }
+            try {
+                const ts = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/typescript').default;
+                PrismSyntaxHighlighter.registerLanguage('typescript', ts);
+            }
+            catch (_c) {
+                // Language not available
+            }
+            try {
+                const js = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/javascript').default;
+                PrismSyntaxHighlighter.registerLanguage('javascript', js);
+            }
+            catch (_d) {
+                // Language not available
+            }
+            try {
+                const json = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/json').default;
+                PrismSyntaxHighlighter.registerLanguage('json', json);
+            }
+            catch (_e) {
+                // Language not available
+            }
+            try {
+                const bash = safeRequire('react-syntax-highlighter/dist/esm/languages/prism/bash').default;
+                PrismSyntaxHighlighter.registerLanguage('bash', bash);
+            }
+            catch (_f) {
+                // Language not available
+            }
+            // Load themes
+            try {
+                prismLightTheme = safeRequire('react-syntax-highlighter/dist/esm/styles/prism/prism').default;
+            }
+            catch (_g) {
+                // Theme not available
+            }
+            try {
+                prismDarkTheme = safeRequire('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus').default;
+            }
+            catch (_h) {
+                // Theme not available
+            }
+        }
+    }
+    catch (_j) {
+        // react-syntax-highlighter not installed, will use native fallback
+        if (__DEV__) {
+            console.warn('[platform-blocks] react-syntax-highlighter not found, CodeBlock will use basic formatting');
+        }
     }
 }
 const NO_HIGHLIGHTS = new Set();
@@ -14250,6 +14350,8 @@ const FloatingCopyControls = ({ visible, code, onCopy, topOffset, isWeb }) => (j
     }, children: jsxRuntime.jsx(CopyButton, { value: code, onCopy: onCopy, iconOnly: true, size: "sm", tooltip: "Copy code", tooltipPosition: "left", style: { minHeight: 32, minWidth: 32 } }) }));
 const CodeBlock = (props) => {
     var _a, _b, _c;
+    // Initialize syntax highlighter on first render (web only)
+    React.useMemo(() => initSyntaxHighlighter(), []);
     const { children, title, fileName, fileIcon, language = 'tsx', showLineNumbers = false, highlight = true, fullWidth = true, showCopyButton = true, onCopy, style, textStyle, titleStyle, highlightLines, spoiler = false, spoilerMaxHeight = 160, variant = 'code', promptSymbol = '$', githubUrl, fileHeader = false, colors, wrap = true, ...rest } = props;
     const { spacingProps, otherProps } = extractSpacingProps(rest);
     const spacingStyles = getSpacingStyles(spacingProps);
@@ -14264,6 +14366,7 @@ const CodeBlock = (props) => {
     const [hovered, setHovered] = React.useState(false);
     const [codeHeight, setCodeHeight] = React.useState(null);
     const isWeb = reactNative.Platform.OS === 'web';
+    const webWhitespaceStyle = React.useMemo(() => (isWeb ? { whiteSpace: wrap ? 'pre-wrap' : 'pre', display: 'block' } : null), [isWeb, wrap]);
     const showFloatingCopy = showCopyButton && !title && !fileName;
     const showCopyVisible = !isWeb ? showFloatingCopy : showFloatingCopy && hovered;
     const codeData = React.useMemo(() => {
@@ -14297,6 +14400,7 @@ const CodeBlock = (props) => {
         boxSizing: 'border-box',
         paddingLeft: showLineNumbers ? 0 : 12,
         paddingRight: showLineNumbers ? 0 : 12,
+        whiteSpace: wrap ? 'pre-wrap' : 'pre',
     }), [showLineNumbers, wrap]);
     const highlightedLineStyle = React.useMemo(() => ({
         backgroundColor: highlightBackgroundColor,
@@ -14308,6 +14412,18 @@ const CodeBlock = (props) => {
     const tokenLines = React.useMemo(() => (highlight ? nativeHighlighter(codeData.transformed) : null), [highlight, nativeHighlighter, codeData.transformed]);
     const shouldVirtualizeNative = !isWeb && codeData.lineCount >= LONG_LIST_THRESHOLD;
     const lineHeight = (_c = styles.codeText.lineHeight) !== null && _c !== void 0 ? _c : 18;
+    const normalizeTokenText = React.useCallback((text, tokenIndex) => {
+        if (!isWeb || !text)
+            return text;
+        const replaceSpaces = (value) => value.replace(/\t/g, '  ').replace(/ /g, '\u00A0');
+        if (tokenIndex === 0) {
+            return text.replace(/^[\t ]+/, (match) => replaceSpaces(match));
+        }
+        if (text.trim().length === 0) {
+            return replaceSpaces(text);
+        }
+        return text;
+    }, [isWeb]);
     const buildNativeLine = React.useCallback((line, index, appendNewline, includeKey) => {
         var _a;
         const lineNumber = index + 1;
@@ -14316,13 +14432,14 @@ const CodeBlock = (props) => {
         const lineStyles = [
             styles.codeText,
             textStyle,
+            webWhitespaceStyle,
             wrap ? { flexWrap: 'wrap' } : { flexWrap: 'nowrap', width: 'auto' },
         ];
         if (isLineHighlighted) {
             lineStyles.push(styles.highlightedLine(isDark, highlightColors));
         }
-        return (jsxRuntime.jsxs(Text, { selectable: true, style: lineStyles, children: [showLineNumbers ? (jsxRuntime.jsx(Text, { style: { color: lineNumberColor, opacity: 0.7 }, children: `${String(lineNumber).padStart(lineNumberWidth, ' ')} | ` })) : null, tokens.map((token, tokenIdx) => (jsxRuntime.jsx(Text, { style: { color: token.color }, children: token.text || ' ' }, `${lineNumber}-${tokenIdx}`))), appendNewline ? '\n' : null] }, includeKey ? `line-${lineNumber}` : undefined));
-    }, [fallbackColor, highlightColors, highlightSet, isDark, lineNumberColor, lineNumberWidth, showLineNumbers, styles.codeText, styles.highlightedLine, textStyle, tokenLines, wrap]);
+        return (jsxRuntime.jsxs(Text, { selectable: true, style: lineStyles, children: [showLineNumbers ? (jsxRuntime.jsx(Text, { style: { color: lineNumberColor, opacity: 0.7 }, children: `${String(lineNumber).padStart(lineNumberWidth, ' ')} | ` })) : null, tokens.map((token, tokenIdx) => (jsxRuntime.jsx(Text, { style: { color: token.color }, children: normalizeTokenText(token.text || ' ', tokenIdx) }, `${lineNumber}-${tokenIdx}`))), appendNewline ? '\n' : null] }, includeKey ? `line-${lineNumber}` : undefined));
+    }, [fallbackColor, highlightColors, highlightSet, isDark, lineNumberColor, lineNumberWidth, normalizeTokenText, showLineNumbers, styles.codeText, styles.highlightedLine, textStyle, tokenLines, webWhitespaceStyle, wrap]);
     const renderWebCode = React.useMemo(() => {
         if (!(isWeb && highlight && PrismSyntaxHighlighter)) {
             return null;
@@ -14336,7 +14453,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 };
@@ -14369,20 +14492,21 @@ const CodeBlock = (props) => {
     ]);
     const renderNativeCode = React.useMemo(() => {
         if (!codeData.lineCount) {
-            return (jsxRuntime.jsx(Text, { selectable: true, style: [styles.codeText, textStyle], children: ' ' }));
+            return (jsxRuntime.jsx(Text, { selectable: true, style: [styles.codeText, textStyle, webWhitespaceStyle], children: ' ' }));
         }
         if (shouldVirtualizeNative) {
             return (jsxRuntime.jsx(reactNative.FlatList, { data: codeData.lines, keyExtractor: (_, index) => `line-${index}`, renderItem: ({ item, index }) => buildNativeLine(item, index, false, false), initialNumToRender: 20, maxToRenderPerBatch: 40, windowSize: 7, removeClippedSubviews: true, getItemLayout: (_, index) => ({ length: lineHeight, offset: lineHeight * index, index }) }));
         }
-        return (jsxRuntime.jsx(Text, { selectable: true, style: [styles.codeText, textStyle], children: codeData.lines.map((line, idx) => buildNativeLine(line, idx, idx < codeData.lineCount - 1, true)) }));
-    }, [buildNativeLine, codeData.lineCount, codeData.lines, lineHeight, shouldVirtualizeNative, styles.codeText, textStyle]);
+        return (jsxRuntime.jsx(Text, { selectable: true, style: [styles.codeText, textStyle, webWhitespaceStyle], children: codeData.lines.map((line, idx) => buildNativeLine(line, idx, idx < codeData.lineCount - 1, true)) }));
+    }, [buildNativeLine, codeData.lineCount, codeData.lines, lineHeight, shouldVirtualizeNative, styles.codeText, textStyle, webWhitespaceStyle]);
     const codeContent = renderWebCode !== null && renderWebCode !== void 0 ? renderWebCode : renderNativeCode;
     const scrollableCodeContent = wrap ? (codeContent) : (jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, bounces: false, showsHorizontalScrollIndicator: true, showsVerticalScrollIndicator: false, contentContainerStyle: { flexGrow: 1 }, style: { width: '100%' }, children: jsxRuntime.jsx(reactNative.View, { style: { flexGrow: 1 }, children: codeContent }) }));
     let wrappedCodeContent = scrollableCodeContent;
     if (spoiler) {
         wrappedCodeContent = (jsxRuntime.jsx(Spoiler, { maxHeight: spoilerMaxHeight, children: scrollableCodeContent }));
     }
-    const userHasWidth = Boolean(style && (style.width !== undefined || style.flex !== undefined));
+    const flatStyle = reactNative.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);
@@ -15980,11 +16104,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' };
@@ -15992,7 +16118,7 @@ const BrandButton = (props) => {
                 return {
                     backgroundColor: 'white',
                     borderColor: 'transparent',
-                    paddingHorizontal: 0,
+                    paddingHorizontal: 16,
                     minWidth: 0,
                     height: 'auto',
                     color: 'black'
@@ -16001,6 +16127,7 @@ const BrandButton = (props) => {
                 return {
                     backgroundColor: brandConfig.backgroundColor,
                     borderColor: brandConfig.borderColor || brandConfig.backgroundColor,
+                    paddingHorizontal: 16,
                 };
         }
     })();
@@ -16577,8 +16704,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: {
@@ -17506,7 +17637,7 @@ const TextArea = factory((props, ref) => {
     const { spacingProps, otherProps: propsAfterSpacing } = extractSpacingProps(props);
     const { layoutProps, otherProps } = extractLayoutProps(propsAfterSpacing);
     const { value, defaultValue = '', onChangeText, label, disabled = false, required = false, placeholder, error, helperText, description, size = 'md', radius = 'md', rows = 3, minRows = 1, maxRows, autoResize = false, maxLength, showCharCounter = false, resize = 'none', textInputProps = {}, style, testID, clearable, clearButtonLabel, onClear, ...rest } = otherProps;
-    const { height } = layoutProps;
+    const { h } = layoutProps;
     const theme = useTheme();
     const { getTextAreaStyles } = useTextAreaStyles({ theme });
     const [focused, setFocused] = React.useState(false);
@@ -17570,11 +17701,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' } : {})
@@ -17602,7 +17733,7 @@ const TextArea = factory((props, ref) => {
     const clearLabel = clearButtonLabel || 'Clear input';
     return (jsxRuntime.jsxs(reactNative.View, { style: containerStyles, testID: testID, children: [(label || description) && (jsxRuntime.jsx(FieldHeader, { label: label, description: description, required: required, disabled: disabled, error: !!error })), jsxRuntime.jsxs(reactNative.View, { style: [inputContainerStyles, { position: 'relative' }], children: [jsxRuntime.jsx(reactNative.TextInput, { ref: assignRef, 
                         // style={]}
-                        style: { height: height || (autoResize ? currentRows * 24 : rows * 24), // Approximate row height
+                        style: { height: h || (autoResize ? currentRows * 24 : rows * 24), // Approximate row height
                             ...textInputStyles.reduce((acc, style) => ({ ...acc, ...style }), {}),
                             textAlignVertical: resize === 'none' ? 'top' : undefined,
                             // Disable resizing by user if resize is 'none'
@@ -23928,7 +24059,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();
@@ -23950,6 +24081,7 @@ const Select = factory((allProps, ref) => {
         keyboardAvoidance,
         closeOnClickOutside: true,
         closeOnEscape: true,
+        matchAnchorWidth: true,
         onClose: () => setOpen(false),
     });
     const hasMeasuredDropdownRef = React.useRef(false);
@@ -24083,11 +24215,11 @@ const Select = factory((allProps, ref) => {
     }, [position === null || position === void 0 ? void 0 : position.finalWidth, triggerWidth]);
     const resolvedDropdownMaxHeight = React.useMemo(() => {
         const keyboardMax = typeof (position === null || position === void 0 ? void 0 : position.maxHeight) === 'number' ? position.maxHeight : undefined;
-        if (typeof maxHeight === 'number') {
-            return keyboardMax ? Math.min(maxHeight, keyboardMax) : maxHeight;
+        if (typeof maxH === 'number') {
+            return keyboardMax ? Math.min(maxH, keyboardMax) : maxH;
         }
-        return keyboardMax !== null && keyboardMax !== void 0 ? keyboardMax : maxHeight;
-    }, [maxHeight, position === null || position === void 0 ? void 0 : position.maxHeight]);
+        return keyboardMax !== null && keyboardMax !== void 0 ? keyboardMax : maxH;
+    }, [maxH, position === null || position === void 0 ? void 0 : position.maxHeight]);
     const handleSelect = React.useCallback((opt) => {
         if (opt.disabled)
             return;
@@ -24109,7 +24241,7 @@ const Select = factory((allProps, ref) => {
             close();
         }
     }, [closeOnSelect, close, onChange, valueProp, refocusAfterSelect, keyboardManager, focusTrigger, blurTrigger]);
-    const listMaxHeight = resolvedDropdownMaxHeight !== null && resolvedDropdownMaxHeight !== void 0 ? resolvedDropdownMaxHeight : maxHeight;
+    const listMaxHeight = resolvedDropdownMaxHeight !== null && resolvedDropdownMaxHeight !== void 0 ? resolvedDropdownMaxHeight : maxH;
     const menu = React.useMemo(() => {
         const widthStyle = resolvedDropdownWidth && resolvedDropdownWidth > 0
             ? { width: resolvedDropdownWidth, minWidth: resolvedDropdownWidth }
@@ -24122,18 +24254,17 @@ const Select = factory((allProps, ref) => {
                     ...(maxHeightStyle !== null && maxHeightStyle !== void 0 ? maxHeightStyle : {}),
                     ...(widthStyle !== null && widthStyle !== void 0 ? widthStyle : {}),
                 }, children: jsxRuntime.jsx(reactNative.FlatList, { data: options, keyExtractor: o => String(o.value), renderItem: ({ item }) => {
-                        var _a;
                         const selected = item.value === value;
                         if (renderOption) {
                             return jsxRuntime.jsx(reactNative.View, { children: renderOption(item, false, selected) });
                         }
                         const primaryPalette = theme.colors.primary || [];
                         const highlightColor = theme.colorScheme === 'dark'
-                            ? primaryPalette[2] || primaryPalette[3] || theme.text.onPrimary || theme.text.primary
-                            : primaryPalette[6] || primaryPalette[5] || ((_a = theme.colors.secondary) === null || _a === void 0 ? void 0 : _a[6]) || '#6941C6';
+                            ? primaryPalette[5] || primaryPalette[4] || '#60A5FA'
+                            : primaryPalette[6] || primaryPalette[5] || '#3B82F6';
                         const baseTextColor = item.disabled ? theme.text.disabled : theme.text.primary;
-                        const accentTextColor = item.disabled ? theme.text.disabled : highlightColor;
-                        return (jsxRuntime.jsx(MenuItemButton, { onPress: () => handleSelect(item), disabled: !!item.disabled, active: selected, tone: selected ? 'primary' : 'default', hoverTone: "primary", activeTone: "primary", textColor: baseTextColor, hoverTextColor: accentTextColor, activeTextColor: accentTextColor, compact: true, rounded: false, style: { borderRadius: 0 }, children: item.label }));
+                        item.disabled ? theme.text.disabled : highlightColor;
+                        return (jsxRuntime.jsx(MenuItemButton, { onPress: () => handleSelect(item), disabled: !!item.disabled, active: false, tone: "default", hoverTone: "default", activeTone: "default", textColor: baseTextColor, hoverTextColor: baseTextColor, activeTextColor: baseTextColor, startIcon: selected ? jsxRuntime.jsx(Icon, { name: "check", size: 16, color: highlightColor }) : jsxRuntime.jsx(reactNative.View, { style: { width: 16 } }), compact: true, rounded: false, style: { borderRadius: 0 }, children: item.label }));
                     }, ItemSeparatorComponent: renderOption ? undefined : ListGroupDivider, style: maxHeightStyle, bounces: false }) }) }));
     }, [resolvedDropdownWidth, listMaxHeight, menuStyles.dropdown, options, value, renderOption, theme.colors.primary, theme.colors.secondary, theme.colorScheme, theme.text.disabled, theme.text.primary, theme.text.onPrimary, handleSelect]);
     React.useEffect(() => {
@@ -24315,6 +24446,7 @@ const AutoComplete = factory((props, ref) => {
         offset,
         autoUpdate: autoReposition,
         fallbackPlacements,
+        matchAnchorWidth: true,
     });
     // Guard: remember last popover size to avoid re-triggering updatePosition on position-only changes
     const lastPopoverSizeRef = React.useRef(null);
@@ -24338,13 +24470,12 @@ const AutoComplete = factory((props, ref) => {
     }, radiusStyles), [inputStyleFactory, size, focused, error, disabled, showClearButton, radiusStyles]);
     const clearLabel = clearButtonLabel || 'Clear input';
     const menuHighlightColor = React.useMemo(() => {
-        var _a;
         const primaryPalette = theme.colors.primary || [];
         if (theme.colorScheme === 'dark') {
-            return primaryPalette[2] || primaryPalette[3] || theme.text.onPrimary || theme.text.primary;
+            return primaryPalette[5] || primaryPalette[4] || '#60A5FA';
         }
-        return primaryPalette[6] || primaryPalette[5] || ((_a = theme.colors.secondary) === null || _a === void 0 ? void 0 : _a[6]) || '#6941C6';
-    }, [theme.colors.primary, theme.colors.secondary, theme.colorScheme, theme.text.onPrimary, theme.text.primary]);
+        return primaryPalette[6] || primaryPalette[5] || '#3B82F6';
+    }, [theme.colors.primary, theme.colorScheme]);
     const selectedCount = (_a = selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) !== null && _a !== void 0 ? _a : 0;
     const hasSelectedValues = multiSelect && selectedCount > 0;
     const currentQueryRef = React.useRef(query);
@@ -24662,8 +24793,8 @@ const AutoComplete = factory((props, ref) => {
     const defaultRenderItem = React.useCallback((item, index, isSelected = false) => {
         const highlightQuery = highlightMatches ? currentQueryRef.current : undefined;
         const baseTextColor = item.disabled ? theme.text.disabled : theme.text.primary;
-        const accentTextColor = item.disabled ? theme.text.disabled : menuHighlightColor;
-        return (jsxRuntime.jsx(MenuItemButton, { onPress: () => handleSelectSuggestion(item), disabled: item.disabled, active: isSelected, tone: isSelected ? 'primary' : 'default', hoverTone: "primary", activeTone: "primary", textColor: baseTextColor, hoverTextColor: accentTextColor, activeTextColor: accentTextColor, compact: true, rounded: false, style: [styles.menuItemButton, suggestionItemStyle], ...(reactNative.Platform.OS === 'web' ? {
+        item.disabled ? theme.text.disabled : menuHighlightColor;
+        return (jsxRuntime.jsx(MenuItemButton, { onPress: () => handleSelectSuggestion(item), disabled: item.disabled, active: false, tone: "default", hoverTone: "default", activeTone: "default", textColor: baseTextColor, hoverTextColor: baseTextColor, activeTextColor: baseTextColor, startIcon: isSelected ? jsxRuntime.jsx(Icon, { name: "check", size: 16, color: menuHighlightColor }) : jsxRuntime.jsx(reactNative.View, { style: { width: 16 } }), compact: true, rounded: false, style: [styles.menuItemButton, suggestionItemStyle], ...(reactNative.Platform.OS === 'web' ? {
                 onMouseDown: (event) => {
                     if (event === null || event === void 0 ? void 0 : event.preventDefault) {
                         event.preventDefault();
@@ -27172,7 +27303,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInputInner({ value,
             } }));
     }
     if (dropdownType === 'modal') {
-        return (jsxRuntime.jsxs(reactNative.View, { ref: ref, children: [renderInput(), jsxRuntime.jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, width: numberOfMonths > 1 ? Math.min(700, 380 * numberOfMonths + 40) : 400, title: type === 'range'
+        return (jsxRuntime.jsxs(reactNative.View, { ref: ref, children: [renderInput(), jsxRuntime.jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, w: numberOfMonths > 1 ? Math.min(700, 380 * numberOfMonths + 40) : 400, title: type === 'range'
                         ? 'Select Date Range'
                         : type === 'multiple'
                             ? 'Select Dates'
@@ -27201,7 +27332,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInputInner({ value,
                                                         backgroundColor: pressed ? theme.colors.primary[6] : theme.colors.primary[5],
                                                     }), children: jsxRuntime.jsx(Text, { size: "sm", weight: "semibold", style: { color: 'white' }, children: "Done" }) })] })] }) }))] }) })] }));
     }
-    return (jsxRuntime.jsxs(reactNative.View, { ref: ref, children: [renderInput(), jsxRuntime.jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, width: numberOfMonths > 1 ? Math.min(600, 320 * numberOfMonths + 40) : 350, children: jsxRuntime.jsxs(reactNative.View, { ref: focusTrapRef, style: { padding: DESIGN_TOKENS.spacing.lg }, accessible: true, accessibilityLabel: type === 'range'
+    return (jsxRuntime.jsxs(reactNative.View, { ref: ref, children: [renderInput(), jsxRuntime.jsx(Dialog, { visible: isOpen, variant: "modal", onClose: handleClose, w: numberOfMonths > 1 ? Math.min(600, 320 * numberOfMonths + 40) : 350, children: jsxRuntime.jsxs(reactNative.View, { ref: focusTrapRef, style: { padding: DESIGN_TOKENS.spacing.lg }, accessible: true, accessibilityLabel: type === 'range'
                         ? 'Date range picker dialog'
                         : type === 'multiple'
                             ? 'Multiple date picker dialog'
@@ -27296,7 +27427,7 @@ const MonthPickerInput = React.forwardRef(function MonthPickerInput({ value, def
                         pointerEvents: 'none',
                         accessible: false,
                         focusable: false,
-                    } }) }), jsxRuntime.jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, width: 360, children: jsxRuntime.jsx(reactNative.View, { style: {
+                    } }) }), jsxRuntime.jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, w: 360, children: jsxRuntime.jsx(reactNative.View, { style: {
                         padding: DESIGN_TOKENS.spacing.lg,
                     }, children: jsxRuntime.jsx(MonthPicker, { ...restMonthPickerProps, value: currentValue, onChange: handleMonthChange, locale: resolvedLocale, size: resolvedSize }) }) })] }));
 });
@@ -27359,7 +27490,7 @@ const YearPickerInput = React.forwardRef(function YearPickerInput({ value, defau
                         pointerEvents: 'none',
                         accessible: false,
                         focusable: false,
-                    } }) }), jsxRuntime.jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, width: 360, children: jsxRuntime.jsx(reactNative.View, { style: {
+                    } }) }), jsxRuntime.jsx(Dialog, { visible: opened, variant: "modal", onClose: handleClose, title: modalTitle, w: 360, children: jsxRuntime.jsx(reactNative.View, { style: {
                         padding: DESIGN_TOKENS.spacing.lg,
                     }, children: jsxRuntime.jsx(YearPicker, { ...restYearPickerProps, value: currentValue, onChange: handleYearChange, size: resolvedSize }) }) })] }));
 });
@@ -27524,7 +27655,7 @@ const TimePickerInput = ({ value, defaultValue, onChange, format = 24, withSecon
                         }
                     }, label: label, placeholder: is12h ? 'hh:mm AM' : 'hh:mm', endSection: jsxRuntime.jsx(Icon, { name: "clock", size: 16, color: disabled ? theme.text.disabled : theme.text.muted }), disabled: disabled, error: error, helperText: helperText, size: size, fullWidth: fullWidth, clearable: clearable && hasValue, clearButtonLabel: clearButtonLabel, onClear: clearValue }) }), jsxRuntime.jsx(Dialog, { visible: open, 
                 // variant="fullscreen"
-                onClose: handleClose, width: typeof computedPanelWidth === 'number' ? computedPanelWidth : 360, title: title || 'Select Time', children: jsxRuntime.jsxs(reactNative.Pressable, { style: {
+                onClose: handleClose, w: typeof computedPanelWidth === 'number' ? computedPanelWidth : 360, title: title || 'Select Time', children: jsxRuntime.jsxs(reactNative.Pressable, { style: {
                         flex: 1,
                         width: '100%',
                         justifyContent: 'center',
@@ -28476,303 +28607,6 @@ const EmojiPicker = factory((props, ref) => {
 });
 EmojiPicker.displayName = 'EmojiPicker';
 
-function useRichTextEditorStyles() {
-    const theme = useTheme();
-    return React.useMemo(() => reactNative.StyleSheet.create({
-        characterCount: {
-            fontSize: 12,
-            marginTop: 4,
-            textAlign: 'right',
-        },
-        container: {
-            width: '100%',
-        },
-        disabled: {
-            opacity: 0.5,
-        },
-        editorContainer: {
-            backgroundColor: theme.backgrounds.surface,
-            borderColor: theme.backgrounds.border,
-            borderRadius: parseInt(theme.radii.md, 10),
-            borderWidth: 1,
-            overflow: 'hidden',
-        },
-        errorText: {
-            fontSize: 12,
-            marginTop: 4,
-        },
-        helperText: {
-            fontSize: 12,
-            marginTop: 4,
-        },
-        textInput: {
-            fontSize: 16,
-            lineHeight: 24,
-            padding: parseInt(theme.spacing.md, 10),
-        },
-        toolButton: {
-            alignItems: 'center',
-            backgroundColor: 'transparent',
-            borderColor: theme.backgrounds.border,
-            borderRadius: parseInt(theme.radii.sm, 10),
-            borderWidth: 1,
-            height: 32,
-            justifyContent: 'center',
-            width: 32,
-        },
-        toolSeparator: {
-            backgroundColor: theme.backgrounds.border,
-            height: 24,
-            marginHorizontal: 4,
-            width: 1,
-        },
-        toolbar: {
-            backgroundColor: theme.backgrounds.elevated,
-            borderBottomColor: theme.backgrounds.border,
-            borderBottomWidth: 1,
-        },
-        toolbarContent: {
-            alignItems: 'center',
-            flexDirection: 'row',
-            gap: 4,
-            paddingHorizontal: parseInt(theme.spacing.sm, 10),
-            paddingVertical: parseInt(theme.spacing.xs, 10),
-        },
-    }), [theme]);
-}
-
-// Default toolbar configuration
-const DEFAULT_TOOLBAR_TOOLS = [
-    'bold',
-    'italic',
-    'underline',
-    'separator',
-    'heading',
-    'separator',
-    'align',
-    'separator',
-    'list',
-    'separator',
-    'link',
-    'separator',
-    'color',
-];
-const RichTextEditor = React.memo(({ defaultValue, value, onChange, onSelectionChange, onFocus, onBlur, placeholder = 'Start typing...', readOnly = false, disabled = false, toolbar = {
-    enabled: true,
-    position: 'top',
-    tools: DEFAULT_TOOLBAR_TOOLS,
-}, formats = {
-    fontFamilies: ['Arial', 'Georgia', 'Times New Roman', 'Courier New'],
-    fontSizes: [12, 14, 16, 18, 20, 24, 28, 32],
-    colors: ['#000000', '#333333', '#666666', '#999999', '#CCCCCC', '#FF0000', '#00FF00', '#0000FF'],
-    headings: [1, 2, 3, 4, 5, 6],
-}, images = { enabled: true }, links = { enabled: true, openInNewTab: true }, plugins = [], autosave, spellCheck = true, maxLength, minHeight = 200, maxHeight = 600, className, theme: themeOverride = 'auto', error, helperText, style, ...props }) => {
-    const theme = useTheme();
-    const styles = useRichTextEditorStyles();
-    const [content, setContent] = React.useState(value || defaultValue || { html: '', text: '' });
-    const [selection, setSelection] = React.useState({
-        index: 0,
-        length: 0,
-    });
-    const [activeFormats, setActiveFormats] = React.useState({});
-    const [isFocused, setIsFocused] = React.useState(false);
-    const editorRef = React.useRef(null);
-    const autosaveTimerRef = React.useRef(null);
-    // Update content when value prop changes
-    React.useEffect(() => {
-        if (value && value !== content) {
-            setContent(value);
-        }
-    }, [value]);
-    // Autosave functionality
-    React.useEffect(() => {
-        if ((autosave === null || autosave === void 0 ? void 0 : autosave.enabled) && autosave.onSave) {
-            if (autosaveTimerRef.current) {
-                clearTimeout(autosaveTimerRef.current);
-            }
-            autosaveTimerRef.current = setTimeout(() => {
-                autosave.onSave(content);
-            }, autosave.interval || 5000);
-            return () => {
-                if (autosaveTimerRef.current) {
-                    clearTimeout(autosaveTimerRef.current);
-                }
-            };
-        }
-    }, [content, autosave]);
-    const handleContentChange = React.useCallback((text) => {
-        const newContent = {
-            text,
-            html: text, // For now, treating as plain text
-        };
-        setContent(newContent);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newContent);
-    }, [onChange]);
-    const handleSelectionChange = React.useCallback((selection) => {
-        const newSelection = {
-            index: selection.start,
-            length: selection.end - selection.start,
-            format: activeFormats,
-        };
-        setSelection(newSelection);
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelection);
-    }, [activeFormats, onSelectionChange]);
-    const handleFocus = React.useCallback(() => {
-        setIsFocused(true);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-    }, [onFocus]);
-    const handleBlur = React.useCallback(() => {
-        setIsFocused(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [onBlur]);
-    const applyFormat = React.useCallback((format) => {
-        if (readOnly || disabled)
-            return;
-        const newFormats = { ...activeFormats, ...format };
-        setActiveFormats(newFormats);
-        // In a real implementation, this would apply formatting to the selected text
-        // For this demo, we'll just track the format state
-    }, [activeFormats, readOnly, disabled]);
-    const toggleFormat = React.useCallback((formatKey) => {
-        if (readOnly || disabled)
-            return;
-        const currentValue = activeFormats[formatKey];
-        applyFormat({ [formatKey]: !currentValue });
-    }, [activeFormats, applyFormat, readOnly, disabled]);
-    const insertText = React.useCallback((text) => {
-        if (readOnly || disabled)
-            return;
-        const currentText = content.text;
-        const { index } = selection;
-        const newText = currentText.slice(0, index) + text + currentText.slice(index);
-        handleContentChange(newText);
-    }, [content.text, selection, handleContentChange, readOnly, disabled]);
-    const insertLink = React.useCallback(() => {
-        if (!(links === null || links === void 0 ? void 0 : links.enabled) || readOnly || disabled)
-            return;
-        // In a real implementation, this would show a link dialog
-        const url = prompt('Enter URL:');
-        if (url && (!links.validate || links.validate(url))) {
-            applyFormat({ link: url });
-        }
-    }, [links, applyFormat, readOnly, disabled]);
-    React.useCallback(async () => {
-        if (!(images === null || images === void 0 ? void 0 : images.enabled) || readOnly || disabled)
-            return;
-        // In a real implementation, this would show a file picker
-        // For now, we'll just insert a placeholder
-        insertText('[Image]');
-    }, [images, insertText, readOnly, disabled]);
-    React.useCallback((level) => {
-        applyFormat({ heading: level });
-    }, [applyFormat]);
-    const setAlignment = React.useCallback((align) => {
-        applyFormat({ align });
-    }, [applyFormat]);
-    const setList = React.useCallback((listType) => {
-        applyFormat({ list: listType });
-    }, [applyFormat]);
-    const getToolButtonStyle = React.useCallback((isActive) => [
-        styles.toolButton,
-        {
-            backgroundColor: isActive
-                ? (theme.colorScheme === 'dark' ? theme.colors.primary[7] : theme.colors.primary[1])
-                : 'transparent',
-            borderColor: isActive ? theme.colors.primary[4] : theme.backgrounds.border,
-        },
-        (disabled || readOnly) && styles.disabled,
-    ], [styles.toolButton, theme, disabled, readOnly]);
-    const renderToolButton = React.useCallback((tool, icon, onPress, isActive = false) => (jsxRuntime.jsx(reactNative.TouchableOpacity, { onPress: onPress, disabled: disabled || readOnly, style: getToolButtonStyle(isActive), children: jsxRuntime.jsx(Icon, { name: icon, size: 16, color: isActive ? theme.colors.primary[5] : theme.text.secondary }) }, tool)), [theme, disabled, readOnly, getToolButtonStyle]);
-    const renderToolSeparator = React.useCallback((index) => (jsxRuntime.jsx(reactNative.View, { style: styles.toolSeparator }, `separator-${index}`)), [styles.toolSeparator]);
-    const renderToolbar = React.useCallback(() => {
-        if (!(toolbar === null || toolbar === void 0 ? void 0 : toolbar.enabled))
-            return null;
-        const tools = toolbar.tools || DEFAULT_TOOLBAR_TOOLS;
-        return (jsxRuntime.jsx(reactNative.View, { style: styles.toolbar, children: jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.toolbarContent, children: tools.map((tool, index) => {
-                    if (tool === 'separator') {
-                        return renderToolSeparator(index);
-                    }
-                    switch (tool) {
-                        case 'bold':
-                            return renderToolButton('bold', 'bold', () => toggleFormat('bold'), !!activeFormats.bold);
-                        case 'italic':
-                            return renderToolButton('italic', 'italic', () => toggleFormat('italic'), !!activeFormats.italic);
-                        case 'underline':
-                            return renderToolButton('underline', 'underline', () => toggleFormat('underline'), !!activeFormats.underline);
-                        case 'strikethrough':
-                            return renderToolButton('strikethrough', 'strikethrough', () => toggleFormat('strikethrough'), !!activeFormats.strikethrough);
-                        case 'heading':
-                            return renderToolButton('heading', 'heading', () => applyFormat({ heading: activeFormats.heading ? null : 2 }), !!activeFormats.heading);
-                        case 'align':
-                            return renderToolButton('align', 'alignLeft', // Default to left align icon, could be dynamic based on current align
-                            () => setAlignment(activeFormats.align === 'left' ? 'center' : 'left'), !!activeFormats.align);
-                        case 'list':
-                            return renderToolButton('list', 'listUnordered', // Default to unordered list icon, could be dynamic
-                            () => setList(activeFormats.list === 'unordered' ? 'ordered' : 'unordered'), !!activeFormats.list);
-                        case 'link':
-                            return renderToolButton('link', 'link', insertLink, !!activeFormats.link);
-                        case 'image':
-                            return renderToolButton('image', 'image', () => { }, // TODO: Implement image insertion
-                            false);
-                        case 'code':
-                            return renderToolButton('code', 'code', () => toggleFormat('code'), !!activeFormats.code);
-                        case 'quote':
-                            return renderToolButton('quote', 'quote', () => toggleFormat('quote'), !!activeFormats.quote);
-                        case 'color':
-                            return renderToolButton('color', 'color', () => { }, // TODO: Implement color picker
-                            !!activeFormats.color);
-                        default:
-                            return null;
-                    }
-                }) }) }));
-    }, [toolbar, theme, activeFormats, renderToolButton, renderToolSeparator, toggleFormat, insertLink, styles.toolbar, styles.toolbarContent]);
-    const renderEditor = React.useCallback(() => (jsxRuntime.jsx(reactNative.View, { style: [
-            styles.editorContainer,
-            {
-                borderColor: isFocused ? theme.colors.primary[5] : theme.backgrounds.border,
-                minHeight,
-                maxHeight,
-            },
-            error && { borderColor: theme.colors.error[5] },
-            (disabled || readOnly) && styles.disabled,
-        ], children: jsxRuntime.jsx(reactNative.TextInput, { ref: editorRef, value: content.text, onChangeText: handleContentChange, onSelectionChange: (event) => handleSelectionChange(event.nativeEvent.selection), onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder, placeholderTextColor: theme.text.muted, multiline: true, textAlignVertical: "top", editable: !disabled && !readOnly, spellCheck: spellCheck, maxLength: maxLength, style: [
-                styles.textInput,
-                reactNative.Platform.OS === 'web' ? { outlineWidth: 0 } : null,
-                {
-                    color: theme.text.primary,
-                    fontSize: activeFormats.fontSize || 16,
-                    fontFamily: activeFormats.fontFamily || theme.fontFamily,
-                    fontWeight: activeFormats.bold ? 'bold' : 'normal',
-                    fontStyle: activeFormats.italic ? 'italic' : 'normal',
-                    textDecorationLine: activeFormats.underline ? 'underline' : 'none',
-                    textAlign: activeFormats.align || 'left',
-                },
-            ], ...props }) })), [
-        content.text,
-        handleContentChange,
-        handleSelectionChange,
-        handleFocus,
-        handleBlur,
-        placeholder,
-        disabled,
-        readOnly,
-        spellCheck,
-        maxLength,
-        isFocused,
-        theme,
-        minHeight,
-        maxHeight,
-        error,
-        activeFormats,
-        props,
-        styles.editorContainer,
-        styles.disabled,
-        styles.textInput,
-    ]);
-    return (jsxRuntime.jsxs(reactNative.View, { style: [styles.container, style], children: [(toolbar === null || toolbar === void 0 ? void 0 : toolbar.position) === 'top' && renderToolbar(), renderEditor(), (toolbar === null || toolbar === void 0 ? void 0 : toolbar.position) === 'bottom' && renderToolbar(), maxLength && (jsxRuntime.jsxs(reactNative.Text, { style: [styles.characterCount, { color: theme.text.secondary }], children: [content.text.length, "/", maxLength] })), error && (jsxRuntime.jsx(reactNative.Text, { style: [styles.errorText, { color: theme.colors.error[5] }], children: error })), helperText && !error && (jsxRuntime.jsx(reactNative.Text, { style: [styles.helperText, { color: theme.text.secondary }], children: helperText }))] }));
-});
-RichTextEditor.displayName = 'RichTextEditor';
-
 function RatingBase(rawProps, ref) {
     const { disclaimerProps: disclaimerData, otherProps: propsAfterDisclaimer } = extractDisclaimerProps(rawProps);
     const { spacingProps, otherProps: props } = extractSpacingProps(propsAfterDisclaimer);
@@ -29524,7 +29358,7 @@ function useMenuContext() {
     return context;
 }
 function MenuBase(props, ref) {
-    const { opened: controlledOpened, trigger = 'click', position = 'auto', offset = 4, closeOnClickOutside = true, closeOnEscape = true, onOpen, onClose, width = 'auto', maxHeight = 300, shadow = 'md', radius = 'md', children, testID, disabled = false, strategy = reactNative.Platform.OS === 'web' ? 'fixed' : 'portal', ...spacingProps } = props;
+    const { opened: controlledOpened, trigger = 'click', position = 'auto', offset = 4, closeOnClickOutside = true, closeOnEscape = true, onOpen, onClose, w = 'auto', maxH = 300, shadow = 'md', radius = 'md', children, testID, disabled = false, strategy = reactNative.Platform.OS === 'web' ? 'fixed' : 'portal', ...spacingProps } = props;
     const [internalOpened, setInternalOpened] = React.useState(false);
     // Derive menu dropdown items from children each render for reactivity
     const { menuItems, menuDropdownProps } = React.useMemo(() => {
@@ -29599,11 +29433,11 @@ function MenuBase(props, ref) {
         const listGroupStyle = {
             ...styles.dropdown,
             ...(dropdownSpacingStyles || {}),
-            maxHeight,
+            maxHeight: maxH,
             width: resolvedWidth,
         };
-        return (jsxRuntime.jsx(MenuContext.Provider, { value: menuContextValueOpened, children: jsxRuntime.jsx(ListGroup, { variant: "default", size: "sm", style: listGroupStyle, children: scrollable ? (jsxRuntime.jsx(reactNative.ScrollView, { showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", style: { maxHeight }, children: jsxRuntime.jsx(ListGroupBody, { children: menuItems }) })) : (jsxRuntime.jsx(reactNative.View, { style: { maxHeight, overflow: 'hidden' }, children: jsxRuntime.jsx(ListGroupBody, { children: menuItems }) })) }) }));
-    }, [menuItems, menuDropdownProps, styles.dropdown, dropdownSpacingStyles, maxHeight, menuContextValueOpened]);
+        return (jsxRuntime.jsx(MenuContext.Provider, { value: menuContextValueOpened, children: jsxRuntime.jsx(ListGroup, { variant: "default", size: "sm", style: listGroupStyle, children: scrollable ? (jsxRuntime.jsx(reactNative.ScrollView, { showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", style: { maxHeight: maxH }, children: jsxRuntime.jsx(ListGroupBody, { children: menuItems }) })) : (jsxRuntime.jsx(reactNative.View, { style: { maxHeight: maxH, overflow: 'hidden' }, children: jsxRuntime.jsx(ListGroupBody, { children: menuItems }) })) }) }));
+    }, [menuItems, menuDropdownProps, styles.dropdown, dropdownSpacingStyles, maxH, menuContextValueOpened]);
     const handleOpen = React.useCallback(async (opts) => {
         var _a, _b, _c, _d, _e, _f;
         // Use ref to avoid stale isOpened value after async close from backdrop click
@@ -29635,7 +29469,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,
@@ -29703,7 +29537,7 @@ function MenuBase(props, ref) {
         catch (error) {
             console.warn('Failed to open menu:', error);
         }
-    }, [disabled, width, position, offset, strategy, closeOnClickOutside, closeOnEscape, onOpen, menuItems, trigger, buildMenuDropdown, onClose]);
+    }, [disabled, w, position, offset, strategy, closeOnClickOutside, closeOnEscape, onOpen, menuItems, trigger, buildMenuDropdown, onClose]);
     // When menu content changes while open, update overlay content in place
     React.useEffect(() => {
         var _a;
@@ -29715,14 +29549,14 @@ function MenuBase(props, ref) {
             return; // no structural change
         lastSignatureRef.current = menuItemsSignature;
         const currentId = overlayIdRef.current;
-        const resolvedWidth = (_a = lastResolvedWidthRef.current) !== null && _a !== void 0 ? _a : (typeof width === 'number' ? width : undefined);
+        const resolvedWidth = (_a = lastResolvedWidthRef.current) !== null && _a !== void 0 ? _a : (typeof w === 'number' ? w : undefined);
         const menuDropdown = buildMenuDropdown(resolvedWidth);
         if (!menuDropdown)
             return;
         updateOverlay(currentId, {
             content: menuDropdown,
         });
-    }, [menuItemsSignature, menuItems, updateOverlay, width, buildMenuDropdown]);
+    }, [menuItemsSignature, menuItems, updateOverlay, w, buildMenuDropdown]);
     const handleToggle = React.useCallback(() => {
         if (isOpenedRef.current) {
             handleClose();
@@ -31145,7 +30979,7 @@ function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'whit
     };
     const containerStyle = {
         position: 'relative',
-        ...style,
+        ...reactNative.StyleSheet.flatten(style),
     };
     const content = (jsxRuntime.jsxs(reactNative.View, { style: containerStyle, children: [jsxRuntime.jsx(reactNative.View, { style: avatarStyle, children: src ? (jsxRuntime.jsx(reactNative.Image, { source: { uri: src }, style: {
                         width: avatarSize,
@@ -31166,7 +31000,7 @@ function AvatarGroup({ children, limit, spacing = -8, style, size, bordered = tr
     const containerStyle = {
         flexDirection: 'row',
         alignItems: 'center',
-        ...style,
+        ...reactNative.StyleSheet.flatten(style),
     };
     const avatarWrapperStyle = (index) => ({
         marginLeft: index > 0 ? spacing : 0,
@@ -31654,7 +31488,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);
@@ -31871,29 +31705,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;
@@ -31917,7 +31751,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]);
     React.useEffect(() => {
         return () => {
             hideOverlay();
@@ -32205,7 +32039,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
@@ -32236,10 +32070,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 = [
@@ -32260,7 +32094,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
@@ -32291,10 +32125,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 = [
@@ -32373,16 +32207,16 @@ const TableCaption = (allProps) => {
 // Scroll Container Component
 const TableScrollContainer = (allProps) => {
     const { spacingProps, otherProps } = extractSpacingProps(allProps);
-    const { children, minWidth = 500, maxHeight, type = 'native', style } = otherProps;
+    const { children, minW = 500, maxH, type = 'native', style } = otherProps;
     const containerStyle = [
         {
             width: '100%',
-            maxHeight
+            maxHeight: maxH
         },
         getSpacingStyles(spacingProps),
         style
     ];
-    const scrollViewStyle = minWidth ? { minWidth } : undefined;
+    const scrollViewStyle = minW ? { minWidth: minW } : undefined;
     return (jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: reactNative.Platform.OS === 'web', contentContainerStyle: scrollViewStyle, children: jsxRuntime.jsx(reactNative.ScrollView, { style: { flex: 1 }, showsVerticalScrollIndicator: reactNative.Platform.OS === 'web', children: children }) }) }));
 };
 // Main Table Component
@@ -33320,7 +33154,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
             alignItems: 'center',
             marginBottom: DESIGN_TOKENS.spacing.md,
             paddingHorizontal: DESIGN_TOKENS.spacing.xs
-        }, children: [jsxRuntime.jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxRuntime.jsxs(Flex, { gap: 8, children: [jsxRuntime.jsxs(Text, { variant: "small", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxRuntime.jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxRuntime.jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 320, trapFocus: true, children: [jsxRuntime.jsx(Popover.Target, { children: jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsxRuntime.jsx(reactNative.View, { style: {
+        }, children: [jsxRuntime.jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxRuntime.jsxs(Flex, { gap: 8, children: [jsxRuntime.jsxs(Text, { variant: "small", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxRuntime.jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxRuntime.jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, w: 320, trapFocus: true, children: [jsxRuntime.jsx(Popover.Target, { children: jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsxRuntime.jsx(reactNative.View, { style: {
                                                 width: 6,
                                                 height: 6,
                                                 borderRadius: 3,
@@ -33350,7 +33184,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                                                     }) })), jsxRuntime.jsx(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: columns.filter(c => c.filterable).map(column => {
                                                         const currentFilter = getColumnFilter(column.key);
                                                         return (jsxRuntime.jsx(reactNative.View, { children: renderFilterControl(column) }, `${column.key}-${(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) || 'no-filter'}`));
-                                                    }) })] }))] }) })] })), onEditModeChange && (jsxRuntime.jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxRuntime.jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 280, trapFocus: true, children: [jsxRuntime.jsx(Popover.Target, { children: jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "eye", size: 14 }), children: "Columns" }) }), jsxRuntime.jsx(Popover.Dropdown, { children: jsxRuntime.jsxs(reactNative.View, { style: { padding: 8, maxHeight: 300, width: 260 }, children: [jsxRuntime.jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxRuntime.jsxs(Row, { children: [jsxRuntime.jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsxRuntime.jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsxRuntime.jsx(reactNative.ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsxRuntime.jsx(Checkbox, { label: tempHeaderEdits[col.key] || col.header, onChange: () => {
+                                                    }) })] }))] }) })] })), onEditModeChange && (jsxRuntime.jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxRuntime.jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, w: 280, trapFocus: true, children: [jsxRuntime.jsx(Popover.Target, { children: jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "eye", size: 14 }), children: "Columns" }) }), jsxRuntime.jsx(Popover.Dropdown, { children: jsxRuntime.jsxs(reactNative.View, { style: { padding: 8, maxHeight: 300, width: 260 }, children: [jsxRuntime.jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxRuntime.jsxs(Row, { children: [jsxRuntime.jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsxRuntime.jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsxRuntime.jsx(reactNative.ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsxRuntime.jsx(Checkbox, { label: tempHeaderEdits[col.key] || col.header, onChange: () => {
                                                     if (hiddenColumns.includes(col.key)) {
                                                         setHiddenColumns(prev => prev.filter(h => h !== col.key));
                                                     }
@@ -33724,9 +33558,9 @@ const resolveTokenColor = (token, theme) => {
     return token; // assume raw color string
 };
 // Item
-const TimelineItem = React.forwardRef(({ children, title, bullet, colorVariant, lineVariant = 'solid', color, active, itemIndex = 0, isLastItem = false, itemAlign, ...rest }, ref) => {
+const TimelineItem = React.forwardRef(({ children, title, timestamp, bullet, colorVariant, lineVariant = 'solid', color, titleColor, descriptionColor, timestampColor, active, itemIndex = 0, isLastItem = false, itemAlign, ...rest }, ref) => {
     const theme = useTheme();
-    const { active: timelineActive, color: timelineColor, lineWidth, bulletSize: contextBulletSize, align, reverseActive, size, centerMode, metrics, } = useTimelineContext();
+    const { active: timelineActive, color: timelineColor, lineWidth, bulletSize: contextBulletSize, align, reverseActive, size, centerMode, metrics, titleColor: timelineTitleColor, descriptionColor: timelineDescriptionColor, timestampColor: timelineTimestampColor, } = useTimelineContext();
     const sizeConfig = metrics;
     const finalBulletSize = contextBulletSize || sizeConfig.bulletSize;
     const showAllColored = timelineActive === undefined;
@@ -33741,6 +33575,9 @@ const TimelineItem = React.forwardRef(({ children, title, bullet, colorVariant,
     const resolvedItemColor = color
         ? color
         : (colorVariant ? resolveTokenColor(colorVariant, theme) : timelineColor);
+    const resolvedTitleColor = titleColor !== null && titleColor !== void 0 ? titleColor : timelineTitleColor;
+    const resolvedDescriptionColor = descriptionColor !== null && descriptionColor !== void 0 ? descriptionColor : timelineDescriptionColor;
+    const resolvedTimestampColor = timestampColor !== null && timestampColor !== void 0 ? timestampColor : timelineTimestampColor;
     // Active logic
     const isActive = showAllColored
         ? true
@@ -33826,10 +33663,16 @@ const TimelineItem = React.forwardRef(({ children, title, bullet, colorVariant,
     const getTitleStyle = () => ({
         fontSize: sizeConfig.fontSize,
         fontWeight: '600',
-        color: theme.text.primary,
+        color: resolvedTitleColor !== null && resolvedTitleColor !== void 0 ? resolvedTitleColor : theme.text.primary,
         marginBottom: title && children ? 4 : 0,
         textAlign: effectiveAlign === 'right' ? 'right' : 'left',
     });
+    const getTimestampStyle = () => ({
+        fontSize: Math.max(10, Math.round(sizeConfig.fontSize * 0.8)),
+        color: resolvedTimestampColor !== null && resolvedTimestampColor !== void 0 ? resolvedTimestampColor : theme.text.secondary,
+        marginBottom: (title || children) ? 4 : 0,
+        textAlign: effectiveAlign === 'right' ? 'right' : 'left',
+    });
     const getItemWrapperStyle = () => {
         if (centerMode) {
             return {
@@ -33845,36 +33688,53 @@ const TimelineItem = React.forwardRef(({ children, title, bullet, colorVariant,
             alignItems: 'flex-start',
         };
     };
+    const applyTextStyle = (nodes, styleOverride) => {
+        if (!styleOverride)
+            return nodes;
+        return React.Children.map(nodes, (child) => {
+            var _a;
+            if (typeof child === 'string' || typeof child === 'number') {
+                return jsxRuntime.jsx(reactNative.Text, { style: styleOverride, children: child });
+            }
+            if (!React.isValidElement(child))
+                return child;
+            const props = child.props || {};
+            const isTextLike = ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Text' || child.type === reactNative.Text || typeof props.children === 'string';
+            if (isTextLike) {
+                const mergedStyle = Array.isArray(props.style)
+                    ? [...props.style, styleOverride]
+                    : [props.style, styleOverride];
+                return React.cloneElement(child, { style: mergedStyle });
+            }
+            if (props.children) {
+                return React.cloneElement(child, { children: applyTextStyle(props.children, styleOverride) });
+            }
+            return child;
+        });
+    };
     if (centerMode) {
         // Three column layout: left content | bullet/line | right content
         const leftContent = effectiveAlign === 'left' && (title || children);
         const rightContent = effectiveAlign === 'right' && (title || children);
         // Helper to clone Text children with alignment
         const alignChildText = (nodes, side) => {
-            return React.Children.map(nodes, (child) => {
-                var _a;
-                if (!React.isValidElement(child))
-                    return child;
-                const props = child.props || {};
-                const isTextLike = ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Text' || (typeof props.children === 'string');
-                if (isTextLike) {
-                    const mergedStyle = Array.isArray(props.style)
-                        ? [...props.style, { textAlign: side }]
-                        : [props.style, { textAlign: side }];
-                    return React.cloneElement(child, { style: mergedStyle });
-                }
-                if (props.children) {
-                    return React.cloneElement(child, { children: alignChildText(props.children, side) });
-                }
-                return child;
-            });
+            const styleOverride = {
+                textAlign: side,
+                ...(resolvedDescriptionColor ? { color: resolvedDescriptionColor } : {}),
+            };
+            return applyTextStyle(nodes, styleOverride);
         };
-        return (jsxRuntime.jsxs(reactNative.View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [jsxRuntime.jsx(reactNative.View, { style: { flex: 1, paddingRight: sizeConfig.spacing, alignItems: 'flex-end' }, children: leftContent && (jsxRuntime.jsxs(reactNative.View, { style: { width: '100%', alignItems: 'flex-end' }, children: [title && jsxRuntime.jsx(reactNative.Text, { style: [getTitleStyle(), { textAlign: 'right' }], children: title }), alignChildText(children, 'right')] })) }), jsxRuntime.jsxs(reactNative.View, { style: { width: finalBulletSize, alignItems: 'center', position: 'relative' }, children: [getLine(), jsxRuntime.jsx(reactNative.View, { style: getBulletStyle(), children: bullet })] }), jsxRuntime.jsx(reactNative.View, { style: { flex: 1, paddingLeft: sizeConfig.spacing, alignItems: 'flex-start' }, children: rightContent && (jsxRuntime.jsxs(reactNative.View, { style: { width: '100%', alignItems: 'flex-start' }, children: [title && jsxRuntime.jsx(reactNative.Text, { style: [getTitleStyle(), { textAlign: 'left' }], children: title }), alignChildText(children, 'left')] })) })] }));
+        return (jsxRuntime.jsxs(reactNative.View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [jsxRuntime.jsx(reactNative.View, { style: { flex: 1, paddingRight: sizeConfig.spacing, alignItems: 'flex-end' }, children: leftContent && (jsxRuntime.jsxs(reactNative.View, { style: { width: '100%', alignItems: 'flex-end' }, children: [timestamp && (jsxRuntime.jsx(reactNative.Text, { style: [getTimestampStyle(), { textAlign: 'right' }], children: timestamp })), title && jsxRuntime.jsx(reactNative.Text, { style: [getTitleStyle(), { textAlign: 'right' }], children: title }), alignChildText(children, 'right')] })) }), jsxRuntime.jsxs(reactNative.View, { style: { width: finalBulletSize, alignItems: 'center', position: 'relative' }, children: [getLine(), jsxRuntime.jsx(reactNative.View, { style: getBulletStyle(), children: bullet })] }), jsxRuntime.jsx(reactNative.View, { style: { flex: 1, paddingLeft: sizeConfig.spacing, alignItems: 'flex-start' }, children: rightContent && (jsxRuntime.jsxs(reactNative.View, { style: { width: '100%', alignItems: 'flex-start' }, children: [timestamp && (jsxRuntime.jsx(reactNative.Text, { style: [getTimestampStyle(), { textAlign: 'left' }], children: timestamp })), title && jsxRuntime.jsx(reactNative.Text, { style: [getTitleStyle(), { textAlign: 'left' }], children: title }), alignChildText(children, 'left')] })) })] }));
     }
-    return (jsxRuntime.jsxs(reactNative.View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [getLine(), jsxRuntime.jsx(reactNative.View, { style: getBulletStyle(), children: bullet }), (title || children) && (jsxRuntime.jsxs(reactNative.View, { style: getContentStyle(), children: [title && jsxRuntime.jsx(reactNative.Text, { style: getTitleStyle(), children: title }), children] }))] }));
+    return (jsxRuntime.jsxs(reactNative.View, { ref: ref, style: getItemWrapperStyle(), ...rest, children: [getLine(), jsxRuntime.jsx(reactNative.View, { style: getBulletStyle(), children: bullet }), (title || children) && (jsxRuntime.jsxs(reactNative.View, { style: getContentStyle(), children: [timestamp && jsxRuntime.jsx(reactNative.Text, { style: getTimestampStyle(), children: timestamp }), title && jsxRuntime.jsx(reactNative.Text, { style: getTitleStyle(), children: title }), resolvedDescriptionColor
+                        ? applyTextStyle(children, {
+                            color: resolvedDescriptionColor,
+                            textAlign: effectiveAlign === 'right' ? 'right' : 'left',
+                        })
+                        : children] }))] }));
 });
 // Root Timeline
-const Timeline = React.forwardRef(({ children, active, color, colorVariant, lineWidth, bulletSize, align = 'left', reverseActive = false, size = 'md', centerMode = false, ...rest }, ref) => {
+const Timeline = React.forwardRef(({ children, active, color, colorVariant, titleColor, descriptionColor, timestampColor, lineWidth, bulletSize, align = 'left', reverseActive = false, size = 'md', centerMode = false, ...rest }, ref) => {
     const theme = useTheme();
     const clampedSize = clampComponentSize(size, TIMELINE_ALLOWED_SIZES);
     const baseMetrics = resolveTimelineMetrics(clampedSize);
@@ -33896,6 +33756,9 @@ const Timeline = React.forwardRef(({ children, active, color, colorVariant, line
         size: clampedSize,
         metrics,
         centerMode,
+        titleColor,
+        descriptionColor,
+        timestampColor,
     };
     const items = [];
     React.Children.forEach(children, (child, index) => {
@@ -34613,7 +34476,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();
@@ -34634,36 +34497,36 @@ function SkeletonBase(props, ref) {
         switch (shape) {
             case 'text':
                 return {
-                    width: width || '100%',
-                    height: height || getSpacing('md')
+                    width: w || '100%',
+                    height: h || getSpacing('md')
                 };
             case 'chip':
                 return {
-                    width: width || (sizeValue * 3),
-                    height: height || sizeValue
+                    width: w || (sizeValue * 3),
+                    height: h || sizeValue
                 };
             case 'avatar':
             case 'circle':
                 return {
-                    width: width || sizeValue,
-                    height: height || sizeValue
+                    width: w || sizeValue,
+                    height: h || sizeValue
                 };
             case 'button':
                 return {
-                    width: width || (sizeValue * 4),
-                    height: height || sizeValue
+                    width: w || (sizeValue * 4),
+                    height: h || sizeValue
                 };
             case 'card':
                 return {
-                    width: width || '100%',
-                    height: height || (sizeValue * 6)
+                    width: w || '100%',
+                    height: h || (sizeValue * 6)
                 };
             case 'rectangle':
             case 'rounded':
             default:
                 return {
-                    width: width || '100%',
-                    height: height || sizeValue
+                    width: w || '100%',
+                    height: h || sizeValue
                 };
         }
     };
@@ -35731,7 +35594,7 @@ const styles$6 = reactNative.StyleSheet.create({
     },
 });
 
-const WaveformSkeleton = ({ width = 300, height = 60, fullWidth = false, barsCount = 20, }) => {
+const WaveformSkeleton = ({ w = 300, h = 60, fullWidth = false, barsCount = 20, }) => {
     const theme = useTheme();
     const styles = reactNative.StyleSheet.create({
         animatedBar: {
@@ -35747,18 +35610,18 @@ const WaveformSkeleton = ({ width = 300, height = 60, fullWidth = false, barsCou
             backgroundColor: theme.colors.gray[1],
             borderRadius: 4,
             flexDirection: 'row',
-            height,
+            height: h,
             justifyContent: 'space-between',
             paddingHorizontal: 4,
-            width: fullWidth ? '100%' : width,
+            width: fullWidth ? '100%' : w,
         },
     });
     // Generate random heights for skeleton bars
     const barHeights = Array.from({ length: barsCount }, () => Math.random() * 0.6 + 0.2 // Heights between 20% and 80% of container
     );
-    const barWidth = fullWidth ? 'auto' : Math.max(1, (width - 40) / barsCount - 2);
+    const barWidth = fullWidth ? 'auto' : Math.max(1, (w - 40) / barsCount - 2);
     return (jsxRuntime.jsx(reactNative.View, { style: styles.container, children: barHeights.map((heightRatio, index) => {
-            const barHeight = height * heightRatio;
+            const barHeight = h * heightRatio;
             const isAnimated = index % 3 === 0; // Animate every 3rd bar for shimmer effect
             return (jsxRuntime.jsx(reactNative.View, { style: [
                     styles.bar,
@@ -35773,7 +35636,7 @@ const WaveformSkeleton = ({ width = 300, height = 60, fullWidth = false, barsCou
         }) }));
 };
 
-const Waveform = React.memo(({ peaks, width = 300, height = 60, color = 'primary', barWidth = 2, barGap = 1, strokeWidth = 2, minBarHeight = 1, variant = 'bars', gradientColors, progress = 0, progressColor, interactive = false, normalize = false, fullWidth = false, onSeek, onDragStart, onDrag, onDragEnd, accessibilityLabel, accessibilityHint, style, maxVisibleBars, showProgressLine = false, progressLineStyle, showTimeStamps = false, duration, timeStampInterval, 
+const Waveform = React.memo(({ peaks, w = 300, h = 60, color = 'primary', barWidth = 2, barGap = 1, strokeWidth = 2, minBarHeight = 1, variant = 'bars', gradientColors, progress = 0, progressColor, interactive = false, normalize = false, fullWidth = false, onSeek, onDragStart, onDrag, onDragEnd, accessibilityLabel, accessibilityHint, style, maxVisibleBars, showProgressLine = false, progressLineStyle, showTimeStamps = false, duration, timeStampInterval, 
 // New features
 loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel = 1, zoomCenter = 0.5, onZoomChange, enableAnimations = true, showRMS = false, rmsData, markers = [], enablePerformanceMonitoring = false, onPerformanceMetrics, ...restProps }) => {
     const theme = useTheme();
@@ -35860,12 +35723,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
@@ -35888,7 +35751,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             downsampled.push(maxValue);
         }
         return downsampled;
-    }, [peaks, width, barWidth, barGap, fullWidth, maxVisibleBars]);
+    }, [peaks, w, barWidth, barGap, fullWidth, maxVisibleBars]);
     // Normalize peaks if requested
     const normalizedPeaks = React.useMemo(() => {
         if (!normalize || processedPeaks.length === 0) {
@@ -35911,16 +35774,16 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         if (fullWidth) {
             return {
                 width: '100%',
-                height: height,
-                viewBox: `0 0 ${actualWaveformWidth} ${height}`,
+                height: h,
+                viewBox: `0 0 ${actualWaveformWidth} ${h}`,
                 preserveAspectRatio: 'none'
             };
         }
         return {
-            width: width,
-            height: height
+            width: w,
+            height: h
         };
-    }, [fullWidth, actualWaveformWidth, height, width]);
+    }, [fullWidth, actualWaveformWidth, h, w]);
     const handleLayout = React.useCallback((event) => {
         const { width: containerWidth, height: containerHeight } = event.nativeEvent.layout;
         setContainerDimensions({ width: containerWidth, height: containerHeight });
@@ -35935,7 +35798,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 {
@@ -35943,7 +35806,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             position = Math.min(locationX, actualWaveformWidth) / actualWaveformWidth;
         }
         return Math.max(0, Math.min(1, position));
-    }, [fullWidth, containerDimensions.width, width, actualWaveformWidth]);
+    }, [fullWidth, containerDimensions.width, w, actualWaveformWidth]);
     const handleResponderGrant = React.useCallback((event) => {
         var _a, _b, _c;
         if (!interactive)
@@ -36030,8 +35893,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
     const renderBars = () => {
         return normalizedPeaks.map((peak, index) => {
             const x = index * (barWidth + barGap);
-            const barHeight = Math.max(minBarHeight, Math.abs(peak) * height * 0.8);
-            const y = (height - barHeight) / 2;
+            const barHeight = Math.max(minBarHeight, Math.abs(peak) * h * 0.8);
+            const y = (h - barHeight) / 2;
             const isProgress = x < progressX;
             const fillColor = isProgress ? actualProgressColor : waveformColor;
             return (jsxRuntime.jsx(Svg.Rect, { x: x, y: y, width: barWidth, height: barHeight, fill: fillColor, rx: variant === 'rounded' ? barWidth / 2 : 0 }, index));
@@ -36045,7 +35908,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
@@ -36059,8 +35922,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
     const renderGradient = () => {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Svg.Defs, { children: jsxRuntime.jsx(Svg.LinearGradient, { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: resolvedGradientColors.map((color, index) => (jsxRuntime.jsx(Svg.Stop, { offset: `${(index / (resolvedGradientColors.length - 1 || 1)) * 100}%`, stopColor: color }, index))) }) }), normalizedPeaks.map((peak, index) => {
                     const x = index * (barWidth + barGap);
-                    const barHeight = Math.max(minBarHeight, Math.abs(peak) * height * 0.8);
-                    const y = (height - barHeight) / 2;
+                    const barHeight = Math.max(minBarHeight, Math.abs(peak) * h * 0.8);
+                    const y = (h - barHeight) / 2;
                     return (jsxRuntime.jsx(Svg.Rect, { x: x, y: y, width: barWidth, height: barHeight, fill: `url(#${gradientId})` }, index));
                 })] }));
     };
@@ -36070,8 +35933,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
             return null;
         const clampedProgress = Math.max(0, Math.min(1, progress));
         const progressX = clampedProgress * actualWaveformWidth;
-        return (jsxRuntime.jsx(Svg.Line, { x1: progressX, y1: 0, x2: progressX, y2: height, stroke: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.color) || theme.colors.gray[7], strokeWidth: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.width) || 2, strokeOpacity: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.opacity) || 0.8 }));
-    }, [showProgressLine, progress, actualWaveformWidth, height, progressLineStyle, theme.colors.gray]);
+        return (jsxRuntime.jsx(Svg.Line, { x1: progressX, y1: 0, x2: progressX, y2: h, stroke: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.color) || theme.colors.gray[7], strokeWidth: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.width) || 2, strokeOpacity: (progressLineStyle === null || progressLineStyle === void 0 ? void 0 : progressLineStyle.opacity) || 0.8 }));
+    }, [showProgressLine, progress, actualWaveformWidth, h, progressLineStyle, theme.colors.gray]);
     // Timestamp markers component
     const TimeStamps = React.useMemo(() => {
         if (!showTimeStamps || !duration || !timeStampInterval)
@@ -36092,10 +35955,10 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 }
                 return `${mins}:${secs.toString().padStart(2, '0')}`;
             };
-            timestamps.push(jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: height - 10, x2: x, y2: height, stroke: theme.colors.gray[5], strokeWidth: 1, strokeOpacity: 0.6 }), jsxRuntime.jsx(Svg.Text, { x: x, y: height + 15, fill: theme.colors.gray[6], fontSize: 10, textAnchor: "middle", opacity: 0.8, children: formatTime(time) })] }, i));
+            timestamps.push(jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: h - 10, x2: x, y2: h, stroke: theme.colors.gray[5], strokeWidth: 1, strokeOpacity: 0.6 }), jsxRuntime.jsx(Svg.Text, { x: x, y: h + 15, fill: theme.colors.gray[6], fontSize: 10, textAnchor: "middle", opacity: 0.8, children: formatTime(time) })] }, i));
         }
         return jsxRuntime.jsx(Svg.G, { children: timestamps });
-    }, [showTimeStamps, duration, timeStampInterval, actualWaveformWidth, height, theme.colors]);
+    }, [showTimeStamps, duration, timeStampInterval, actualWaveformWidth, h, theme.colors]);
     // Selection overlay component
     const SelectionOverlay = React.useMemo(() => {
         if (!selection || selection[0] === selection[1])
@@ -36104,8 +35967,8 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         const startX = start * actualWaveformWidth;
         const endX = end * actualWaveformWidth;
         const selectionWidth = endX - startX;
-        return (jsxRuntime.jsx(Svg.Rect, { x: startX, y: 0, width: selectionWidth, height: height, fill: theme.colors.primary[3], opacity: 0.3, stroke: theme.colors.primary[5], strokeWidth: 1, strokeOpacity: 0.8 }));
-    }, [selection, actualWaveformWidth, height, theme.colors.primary]);
+        return (jsxRuntime.jsx(Svg.Rect, { x: startX, y: 0, width: selectionWidth, height: h, fill: theme.colors.primary[3], opacity: 0.3, stroke: theme.colors.primary[5], strokeWidth: 1, strokeOpacity: 0.8 }));
+    }, [selection, actualWaveformWidth, h, theme.colors.primary]);
     // Markers component
     const Markers = React.useMemo(() => {
         if (!markers || markers.length === 0)
@@ -36115,16 +35978,16 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 const markerColor = marker.color || theme.colors.warning[5];
                 switch (marker.type || 'line') {
                     case 'line':
-                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: 0, x2: x, y2: height, stroke: markerColor, strokeWidth: 2, strokeOpacity: 0.8 }), marker.label && (jsxRuntime.jsx(Svg.Text, { x: x, y: -5, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: 0, x2: x, y2: h, stroke: markerColor, strokeWidth: 2, strokeOpacity: 0.8 }), marker.label && (jsxRuntime.jsx(Svg.Text, { x: x, y: -5, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
                     case 'flag':
-                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: 0, x2: x, y2: height, stroke: markerColor, strokeWidth: 1, strokeOpacity: 0.6 }), jsxRuntime.jsx(Svg.Rect, { x: x + 2, y: 2, width: marker.label ? marker.label.length * 6 + 4 : 20, height: 14, fill: markerColor, rx: 2 }), marker.label && (jsxRuntime.jsx(Svg.Text, { x: x + 4, y: 12, fill: "white", fontSize: 9, fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx(Svg.Line, { x1: x, y1: 0, x2: x, y2: h, stroke: markerColor, strokeWidth: 1, strokeOpacity: 0.6 }), jsxRuntime.jsx(Svg.Rect, { x: x + 2, y: 2, width: marker.label ? marker.label.length * 6 + 4 : 20, height: 14, fill: markerColor, rx: 2 }), marker.label && (jsxRuntime.jsx(Svg.Text, { x: x + 4, y: 12, fill: "white", fontSize: 9, fontWeight: "bold", children: marker.label }))] }, index));
                     case 'dot':
-                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx("circle", { cx: x, cy: height / 2, r: 4, fill: markerColor, stroke: "white", strokeWidth: 1 }), marker.label && (jsxRuntime.jsx(Svg.Text, { x: x, y: height / 2 + 20, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
+                        return (jsxRuntime.jsxs(Svg.G, { children: [jsxRuntime.jsx("circle", { cx: x, cy: h / 2, r: 4, fill: markerColor, stroke: "white", strokeWidth: 1 }), marker.label && (jsxRuntime.jsx(Svg.Text, { x: x, y: h / 2 + 20, fill: markerColor, fontSize: 10, textAnchor: "middle", fontWeight: "bold", children: marker.label }))] }, index));
                     default:
                         return null;
                 }
             }) }));
-    }, [markers, actualWaveformWidth, height, theme.colors.warning]);
+    }, [markers, actualWaveformWidth, h, theme.colors.warning]);
     // RMS visualization component
     const RMSBars = React.useMemo(() => {
         if (!showRMS || !rmsData || rmsData.length === 0)
@@ -36132,11 +35995,11 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         const processedRMS = rmsData.slice(0, normalizedPeaks.length);
         return (jsxRuntime.jsx(Svg.G, { opacity: 0.5, children: processedRMS.map((rms, index) => {
                 const x = index * (barWidth + barGap);
-                const rmsHeight = Math.max(minBarHeight, Math.abs(rms) * height * 0.4); // RMS bars are shorter
-                const y = (height - rmsHeight) / 2;
+                const rmsHeight = Math.max(minBarHeight, Math.abs(rms) * h * 0.4); // RMS bars are shorter
+                const y = (h - rmsHeight) / 2;
                 return (jsxRuntime.jsx(Svg.Rect, { x: x, y: y, width: barWidth, height: rmsHeight, fill: theme.colors.gray[4], rx: variant === 'rounded' ? barWidth / 2 : 0 }, `rms-${index}`));
             }) }));
-    }, [showRMS, rmsData, normalizedPeaks, barWidth, barGap, minBarHeight, height, variant, theme.colors.gray]);
+    }, [showRMS, rmsData, normalizedPeaks, barWidth, barGap, minBarHeight, h, variant, theme.colors.gray]);
     const renderWaveform = () => {
         switch (variant) {
             case 'line':
@@ -36173,17 +36036,17 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
         };
     // Early return for empty state
     if (normalizedPeaks.length === 0) {
-        return (jsxRuntime.jsx(reactNative.View, { style: [style, fullWidth ? { width: '100%' } : { width }, { height, justifyContent: 'center', alignItems: 'center' }], accessibilityRole: "image", accessibilityLabel: accessibilityLabel || 'Empty waveform', ...restProps, children: jsxRuntime.jsx(Svg, { ...svgProps, children: jsxRuntime.jsx(Svg.Rect, { x: 0, y: height / 2 - 1, width: fullWidth ? '100%' : width, height: 2, fill: waveformColor, opacity: 0.3 }) }) }));
+        return (jsxRuntime.jsx(reactNative.View, { style: [style, fullWidth ? { width: '100%' } : { width: w }, { height: h, justifyContent: 'center', alignItems: 'center' }], accessibilityRole: "image", accessibilityLabel: accessibilityLabel || 'Empty waveform', ...restProps, children: jsxRuntime.jsx(Svg, { ...svgProps, children: jsxRuntime.jsx(Svg.Rect, { x: 0, y: h / 2 - 1, width: fullWidth ? '100%' : w, height: 2, fill: waveformColor, opacity: 0.3 }) }) }));
     }
     if (loading) {
-        return (jsxRuntime.jsx(WaveformSkeleton, { width: width, height: height, fullWidth: fullWidth, barsCount: maxVisibleBars || 20 }));
+        return (jsxRuntime.jsx(WaveformSkeleton, { w: w, h: h, fullWidth: fullWidth, barsCount: maxVisibleBars || 20 }));
     }
     if (error) {
         return (jsxRuntime.jsx(reactNative.View, { style: [
                 style,
-                fullWidth ? { width: '100%' } : { width },
+                fullWidth ? { width: '100%' } : { width: w },
                 {
-                    height,
+                    height: h,
                     justifyContent: 'center',
                     alignItems: 'center',
                     backgroundColor: theme.colors.error[1],
@@ -36193,7 +36056,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
                 }
             ], accessibilityRole: "alert", accessibilityLabel: `Waveform error: ${error}`, ...restProps, children: jsxRuntime.jsx(reactNative.Text, { style: { color: theme.colors.error[7], fontSize: 12, textAlign: 'center' }, children: error }) }));
     }
-    return (jsxRuntime.jsx(WrapperComponent, { ref: containerRef, style: [style, fullWidth ? { width: '100%' } : { width }], accessible: true, focusable: interactive, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...wrapperProps, ...restProps, children: jsxRuntime.jsxs(Svg, { ...svgProps, children: [SelectionOverlay, RMSBars, renderWaveform(), ProgressLine, TimeStamps, Markers] }) }));
+    return (jsxRuntime.jsx(WrapperComponent, { ref: containerRef, style: [style, fullWidth ? { width: '100%' } : { width: w }], accessible: true, focusable: interactive, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...wrapperProps, ...restProps, children: jsxRuntime.jsxs(Svg, { ...svgProps, children: [SelectionOverlay, RMSBars, renderWaveform(), ProgressLine, TimeStamps, Markers] }) }));
 });
 Waveform.displayName = 'Waveform';
 
@@ -36215,7 +36078,7 @@ const AudioPlayer = React.forwardRef(({ source, peaks: providedPeaks, autoPlay =
     channel: 'mix',
 }, showTime = true, timeFormat = 'mm:ss', showMetadata = false, metadata, showSpectrum = false, spectrumOptions, enableKeyboardShortcuts = true, enableGestures = true, onLoad, onPlaybackStateChange, onProgress, onEnd, onError, onBuffer, 
 // Waveform props
-width = 300, height = 60, color = 'primary', interactive = true, onSeek, style, ...waveformProps }, ref) => {
+w = 300, h = 60, color = 'primary', interactive = true, onSeek, style, ...waveformProps }, ref) => {
     const theme = useTheme();
     const { playSound } = useSound();
     // Refs
@@ -36562,7 +36425,7 @@ width = 300, height = 60, color = 'primary', interactive = true, onSeek, style,
                         alignSelf: 'flex-start',
                     }, children: jsxRuntime.jsx(reactNative.Text, { style: { color: 'white', fontSize: DESIGN_TOKENS.typography.fontSize.sm }, children: "Retry" }) }))] }));
     }
-    return (jsxRuntime.jsxs(reactNative.View, { style: [{ width: '100%' }, style], children: [controlsPosition === 'top' && renderMetadata(), controlsPosition === 'top' && renderControls(), controls.waveform && peaks.length > 0 && (jsxRuntime.jsx(reactNative.View, { style: { marginVertical: DESIGN_TOKENS.spacing.sm }, children: jsxRuntime.jsx(Waveform, { peaks: peaks, width: width, height: height, color: color, progress: progress, interactive: interactive, onSeek: handleWaveformSeek, showProgressLine: true, progressLineStyle: {
+    return (jsxRuntime.jsxs(reactNative.View, { style: [{ width: '100%' }, style], children: [controlsPosition === 'top' && renderMetadata(), controlsPosition === 'top' && renderControls(), controls.waveform && peaks.length > 0 && (jsxRuntime.jsx(reactNative.View, { style: { marginVertical: DESIGN_TOKENS.spacing.sm }, children: jsxRuntime.jsx(Waveform, { peaks: peaks, w: w, h: h, color: color, progress: progress, interactive: interactive, onSeek: handleWaveformSeek, showProgressLine: true, progressLineStyle: {
                         color: theme.colors.primary[5],
                         width: 2,
                         opacity: 0.8,
@@ -37291,14 +37154,14 @@ const IMAGE_SIZES = {
     '2xl': 80,
     '3xl': 96,
 };
-function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', size, width, height, aspectRatio, borderWidth, borderColor, rounded, circle, fallback, loading, onLoad, onError, onLoadStart, onLoadEnd, containerStyle, imageStyle, testID, style, ...rest }) {
+function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', size, w, h, aspectRatio, borderWidth, borderColor, rounded, circle, fallback, loading, onLoad, onError, onLoadStart, onLoadEnd, containerStyle, imageStyle, testID, style, ...rest }) {
     const theme = useTheme();
     const [loadError, setLoadError] = React.useState(false);
     const [isLoading, setIsLoading] = React.useState(true);
     const { spacingProps } = extractSpacingProps(rest);
     // Determine dimensions
-    let finalWidth = width;
-    let finalHeight = height;
+    let finalWidth = w;
+    let finalHeight = h;
     if (size && typeof size === 'string' && IMAGE_SIZES[size]) {
         finalWidth = finalWidth || IMAGE_SIZES[size];
         finalHeight = finalHeight || IMAGE_SIZES[size];
@@ -37323,7 +37186,7 @@ function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', siz
     const spacingStyles = getSpacingStyles(spacingProps);
     const containerStyles = {
         ...spacingStyles,
-        ...containerStyle,
+        ...reactNative.StyleSheet.flatten(containerStyle),
     };
     const imageStyles = {
         width: finalWidth,
@@ -37332,7 +37195,7 @@ function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', siz
         borderWidth,
         borderColor: borderColor || theme.colors.gray[3],
         borderRadius,
-        ...imageStyle,
+        ...reactNative.StyleSheet.flatten(imageStyle),
     };
     if (finalWidth !== undefined) {
         containerStyles.width = finalWidth;
@@ -39106,7 +38969,7 @@ function QRCode(props) {
             });
         }
     }, [copy, copyValue, toast, otherProps.copyToastMessage, otherProps.copyToastTitle]);
-    const content = (jsxRuntime.jsxs(reactNative.View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsxRuntime.jsx(QRCodeSVG, { value: value, size: size, maxWidth: '100%', backgroundColor: backgroundColor, color: resolvedColor, errorCorrectionLevel: errorCorrectionLevel, quietZone: quietZone, logo: logo, style: style, testID: testID, accessibilityLabel: accessibilityLabel, onError: onError, ...spacingProps, ...layoutProps, ...rest }), otherProps.showCopyButton && (jsxRuntime.jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
+    const content = (jsxRuntime.jsxs(reactNative.View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsxRuntime.jsx(QRCodeSVG, { value: value, size: size, maxW: '100%', backgroundColor: backgroundColor, color: resolvedColor, errorCorrectionLevel: errorCorrectionLevel, quietZone: quietZone, logo: logo, style: style, testID: testID, accessibilityLabel: accessibilityLabel, onError: onError, ...spacingProps, ...layoutProps, ...rest }), otherProps.showCopyButton && (jsxRuntime.jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
     if (shouldCopyOnPress) {
         return (jsxRuntime.jsx(reactNative.Pressable, { onPress: handleCopy, accessibilityLabel: accessibilityLabel || 'QR code', children: content }));
     }
@@ -39756,111 +39619,6 @@ const styles$2 = reactNative.StyleSheet.create({
     },
 });
 
-// Optional imports for web compatibility
-const LottieReact = reactNative.Platform.OS === 'web'
-    ? resolveOptionalModule('lottie-react', {
-        accessor: mod => { var _a; return (_a = mod.default) !== null && _a !== void 0 ? _a : mod; },
-    })
-    : null;
-const DotLottieReact = reactNative.Platform.OS === 'web'
-    ? resolveOptionalModule('@lottiefiles/dotlottie-react', {
-        accessor: mod => mod.DotLottieReact,
-    })
-    : null;
-let cachedNativeStatus = null;
-let nativeLottieComponent;
-let nativeModuleLoadWarningLogged = false;
-let nativeModuleConfigWarningLogged = false;
-const loadNativeLottieComponent = () => {
-    if (nativeLottieComponent !== undefined) {
-        return nativeLottieComponent;
-    }
-    const module = resolveOptionalModule('lottie-react-native', {
-        accessor: mod => { var _a; return (_a = mod === null || mod === void 0 ? void 0 : mod.default) !== null && _a !== void 0 ? _a : mod; },
-    });
-    if (!module && !nativeModuleLoadWarningLogged && __DEV__) {
-        console.warn('[Lottie] Failed to load lottie-react-native module. Rendering fallback instead.');
-        nativeModuleLoadWarningLogged = true;
-    }
-    nativeLottieComponent = module !== null && module !== void 0 ? module : null;
-    return nativeLottieComponent;
-};
-const getNativeLottieStatus = () => {
-    var _a, _b, _c;
-    if (cachedNativeStatus) {
-        return cachedNativeStatus;
-    }
-    if (reactNative.Platform.OS === 'web') {
-        cachedNativeStatus = { component: null, available: false };
-        return cachedNativeStatus;
-    }
-    const component = loadNativeLottieComponent();
-    if (!component) {
-        cachedNativeStatus = { component: null, available: false };
-        return cachedNativeStatus;
-    }
-    let viewManagerAvailable = false;
-    try {
-        const viewManager = (_c = (_b = (_a = reactNative.UIManager === null || reactNative.UIManager === void 0 ? void 0 : reactNative.UIManager.getViewManagerConfig) === null || _a === void 0 ? void 0 : _a.call(reactNative.UIManager, 'LottieAnimationView')) !== null && _b !== void 0 ? _b : reactNative.UIManager === null || reactNative.UIManager === void 0 ? void 0 : reactNative.UIManager.LottieAnimationView) !== null && _c !== void 0 ? _c : reactNative.NativeModules === null || reactNative.NativeModules === void 0 ? void 0 : reactNative.NativeModules.LottieAnimationView;
-        viewManagerAvailable = !!viewManager;
-    }
-    catch (error) {
-        viewManagerAvailable = false;
-    }
-    if (!viewManagerAvailable && !nativeModuleConfigWarningLogged && __DEV__) {
-        console.warn('[Lottie] Native LottieAnimationView is unavailable. Run `npx expo install lottie-react-native` and rebuild to enable animations.');
-        nativeModuleConfigWarningLogged = true;
-    }
-    cachedNativeStatus = {
-        component,
-        available: viewManagerAvailable,
-    };
-    return cachedNativeStatus;
-};
-/**
- * Lottie component with safe fallback when native module not present or on unsupported platforms.
- */
-const Lottie = React.forwardRef(function LottieCmp(props, ref) {
-    const { source, autoPlay = true, loop = true, progress, speed = 1, style, testID, paused, resizeMode = 'contain', onAnimationFinish } = props;
-    const internalRef = React.useRef(null);
-    const nativeStatus = getNativeLottieStatus();
-    const NativeLottieView = nativeStatus.component;
-    React.useImperativeHandle(ref, () => ({
-        play: (...args) => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.play) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
-        pause: () => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.pause) === null || _b === void 0 ? void 0 : _b.call(_a); },
-        reset: () => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.reset) === null || _b === void 0 ? void 0 : _b.call(_a); },
-        setProgress: (p) => { var _a, _b; return (_b = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.setProgress) === null || _b === void 0 ? void 0 : _b.call(_a, p); },
-    }), []);
-    React.useEffect(() => {
-        var _a;
-        if (progress != null && ((_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.setProgress)) {
-            internalRef.current.setProgress(progress);
-        }
-    }, [progress]);
-    // Web implementation
-    if (reactNative.Platform.OS === 'web') {
-        // Check if source is a string (URL) and ends with .lottie
-        const isLottieFile = typeof source === 'string' && source.endsWith('.lottie');
-        if (isLottieFile && DotLottieReact) {
-            // Use DotLottieReact for .lottie files
-            return (jsxRuntime.jsx(DotLottieReact, { src: source, autoplay: autoPlay, loop: loop, speed: speed, style: style, "data-testid": testID }));
-        }
-        else if (LottieReact) {
-            // Use lottie-react for standard Lottie JSON
-            return (jsxRuntime.jsx(LottieReact, { animationData: source, autoplay: autoPlay, loop: loop, style: style, "data-testid": testID }));
-        }
-        else {
-            return jsxRuntime.jsx(Text, { children: "Lottie not available on web" });
-        }
-    }
-    // Native implementation using lottie-react-native
-    if (!nativeStatus.available || !NativeLottieView) {
-        return (jsxRuntime.jsx(reactNative.View, { style: [{ justifyContent: 'center', alignItems: 'center' }, style], testID: testID, children: jsxRuntime.jsx(Text, { style: { textAlign: 'center', opacity: 0.7 }, children: "Lottie animations require the native `lottie-react-native` module. Install it and rebuild the app, or view this example on the web." }) }));
-    }
-    return (jsxRuntime.jsx(NativeLottieView, { ref: internalRef, source: source, autoPlay: autoPlay, loop: loop, speed: speed, progress: progress, style: style, testID: testID, resizeMode: resizeMode, onAnimationFinish: onAnimationFinish, ...(paused != null ? { paused } : {}) }));
-});
-Lottie.displayName = 'Lottie';
-
 const PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
 function formatTime(seconds) {
     const hours = Math.floor(seconds / 3600);
@@ -40808,7 +40566,7 @@ const DEFAULT_CONTROLS = {
     autoHide: true,
     autoHideTimeout: 3000,
 };
-const Video = React.forwardRef(({ source, width, height, aspectRatio = 16 / 9, poster, autoPlay = false, loop = false, muted = false, volume = 1, playbackRate = 1, quality = 'auto', controls = true, timeline = [], youtubeOptions, onPlay, onPause, onSeek, onTimeUpdate, onDurationChange, onVolumeChange, onPlaybackRateChange, onQualityChange, onFullscreenChange, onError, onLoad, onLoadStart, onBuffer, onTimelineEvent, style, videoStyle, controlsStyle, accessibilityLabel, testID, ...rest }, ref) => {
+const Video = React.forwardRef(({ source, w, h, aspectRatio = 16 / 9, poster, autoPlay = false, loop = false, muted = false, volume = 1, playbackRate = 1, quality = 'auto', controls = true, timeline = [], youtubeOptions, onPlay, onPause, onSeek, onTimeUpdate, onDurationChange, onVolumeChange, onPlaybackRateChange, onQualityChange, onFullscreenChange, onError, onLoad, onLoadStart, onBuffer, onTimelineEvent, style, videoStyle, controlsStyle, accessibilityLabel, testID, ...rest }, ref) => {
     const theme = useTheme();
     const { spacingProps } = extractSpacingProps(rest);
     // Internal state
@@ -41058,24 +40816,24 @@ const Video = React.forwardRef(({ source, width, height, aspectRatio = 16 / 9, p
             // overflow: 'hidden',
             // position: 'relative',
         };
-        if (width && height) {
-            baseStyle.width = width;
-            baseStyle.height = height;
+        if (w && h) {
+            baseStyle.width = w;
+            baseStyle.height = h;
         }
-        else if (width) {
-            baseStyle.width = width;
-            baseStyle.height = typeof width === 'number' ? width / aspectRatio : '100%';
+        else if (w) {
+            baseStyle.width = w;
+            baseStyle.height = typeof w === 'number' ? w / aspectRatio : '100%';
         }
-        else if (height) {
-            baseStyle.height = height;
-            baseStyle.width = typeof height === 'number' ? height * aspectRatio : '100%';
+        else if (h) {
+            baseStyle.height = h;
+            baseStyle.width = typeof h === 'number' ? h * aspectRatio : '100%';
         }
         else {
             baseStyle.width = '100%';
             baseStyle.aspectRatio = aspectRatio;
         }
         return baseStyle;
-    }, [theme.colors.surface, width, height, aspectRatio]);
+    }, [theme.colors.surface, w, h, aspectRatio]);
     // Handle touch events for control visibility
     const handleContainerPress = React.useCallback(() => {
         if (controlsConfig && controlsConfig.autoHide) {
@@ -41298,7 +41056,6 @@ exports.ListGroupDivider = ListGroupDivider;
 exports.ListGroupItem = ListGroupItem;
 exports.Loader = Loader;
 exports.LoadingOverlay = LoadingOverlay;
-exports.Lottie = Lottie;
 exports.MacAppStoreButton = MacAppStoreButton;
 exports.Mark = Mark;
 exports.Markdown = Markdown;
@@ -41334,7 +41091,6 @@ exports.RadioGroup = RadioGroup;
 exports.RangeSlider = RangeSlider;
 exports.Rating = Rating;
 exports.RedditJoinBadge = RedditJoinBadge;
-exports.RichTextEditor = RichTextEditor;
 exports.Ring = Ring;
 exports.Row = Row;
 exports.SIZE_SCALES = SIZE_SCALES;