infinity-ui-elements 1.14.5 → 1.14.7

package/dist/index.js

@@ -1431,102 +1431,12 @@ const Divider = React__namespace.forwardRef(({ className, orientation = "horizon
 });
 Divider.displayName = "Divider";
 
-// Detect iOS
-const isIOS = () => {
-    if (typeof window === "undefined" || typeof navigator === "undefined")
-        return false;
-    return /iPad|iPhone|iPod/.test(navigator.userAgent) ||
-        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
-};
-// Detect Android
-const isAndroid = () => {
-    if (typeof navigator === "undefined")
-        return false;
-    return /Android/.test(navigator.userAgent);
-};
-// Get visual viewport height (accounts for keyboard)
-const getVisualViewportHeight = () => {
-    if (typeof window === "undefined")
-        return 0;
-    // Use visualViewport API if available (better keyboard detection)
-    if (window.visualViewport) {
-        return window.visualViewport.height;
-    }
-    return window.innerHeight;
-};
-// Get safe area inset bottom (for devices with home indicator)
-const getSafeAreaInsetBottom = () => {
-    if (typeof window === "undefined" || typeof document === "undefined")
-        return 0;
-    const root = document.documentElement;
-    const safeAreaInset = getComputedStyle(root).getPropertyValue("--safe-area-inset-bottom");
-    if (safeAreaInset) {
-        return parseInt(safeAreaInset, 10) || 0;
-    }
-    // Fallback: try to read env() value
-    const testDiv = document.createElement("div");
-    testDiv.style.paddingBottom = "env(safe-area-inset-bottom, 0px)";
-    document.body.appendChild(testDiv);
-    const paddingBottom = parseInt(getComputedStyle(testDiv).paddingBottom, 10) || 0;
-    document.body.removeChild(testDiv);
-    return paddingBottom;
-};
-const BottomSheet = React__namespace.forwardRef(({ isOpen, onClose, title, description, footer, children, variant = "default", showCloseButton = true, showDragHandle = true, closeOnOverlayClick = true, closeOnEscape = true, closeOnSwipeDown = true, maxHeight = "90vh", className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, adjustForKeyboard = true, scrollToFocusedInput = true, stickyContent, stickyContentClassName, }, ref) => {
+const BottomSheet = React__namespace.forwardRef(({ isOpen, onClose, title, description, footer, children, variant = "default", showCloseButton = true, showDragHandle = true, closeOnOverlayClick = true, closeOnEscape = true, closeOnSwipeDown = true, maxHeight = "90vh", className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, }, ref) => {
     const sheetRef = React__namespace.useRef(null);
     const contentRef = ref || sheetRef;
-    const bodyRef = React__namespace.useRef(null);
-    const dragHandleRef = React__namespace.useRef(null);
-    const overlayRef = React__namespace.useRef(null);
     const [isClosing, setIsClosing] = React__namespace.useState(false);
     const [touchStart, setTouchStart] = React__namespace.useState(null);
     const [touchEnd, setTouchEnd] = React__namespace.useState(null);
-    const [touchStartX, setTouchStartX] = React__namespace.useState(null);
-    const [isSwipeGesture, setIsSwipeGesture] = React__namespace.useState(false);
-    const [keyboardHeight, setKeyboardHeight] = React__namespace.useState(0);
-    const [viewportHeight, setViewportHeight] = React__namespace.useState(typeof window !== "undefined" ? window.innerHeight : 0);
-    const [safeAreaBottom, setSafeAreaBottom] = React__namespace.useState(0);
-    // Track if user started dragging from the drag handle
-    const isDraggingFromHandle = React__namespace.useRef(false);
-    // Store original body styles for restoration
-    const originalBodyStyles = React__namespace.useRef(null);
-    // Track scroll position before locking
-    const scrollPosition = React__namespace.useRef(0);
-    // Initialize safe area inset
-    React__namespace.useEffect(() => {
-        setSafeAreaBottom(getSafeAreaInsetBottom());
-    }, []);
-    // Handle Visual Viewport API for keyboard detection
-    React__namespace.useEffect(() => {
-        if (!isOpen || !adjustForKeyboard)
-            return;
-        if (typeof window === "undefined")
-            return;
-        const updateViewport = () => {
-            const newHeight = getVisualViewportHeight();
-            const fullHeight = window.innerHeight;
-            const newKeyboardHeight = Math.max(0, fullHeight - newHeight);
-            setViewportHeight(newHeight);
-            setKeyboardHeight(newKeyboardHeight);
-        };
-        // Use visualViewport API if available
-        if (window.visualViewport) {
-            window.visualViewport.addEventListener("resize", updateViewport);
-            window.visualViewport.addEventListener("scroll", updateViewport);
-            updateViewport();
-            return () => {
-                window.visualViewport?.removeEventListener("resize", updateViewport);
-                window.visualViewport?.removeEventListener("scroll", updateViewport);
-            };
-        }
-        else {
-            // Fallback for browsers without visualViewport API
-            window.addEventListener("resize", updateViewport);
-            updateViewport();
-            return () => {
-                window.removeEventListener("resize", updateViewport);
-            };
-        }
-    }, [isOpen, adjustForKeyboard]);
     // Handle escape key
     React__namespace.useEffect(() => {
         if (!isOpen || !closeOnEscape || !onClose)
@@ -1539,297 +1449,69 @@ const BottomSheet = React__namespace.forwardRef(({ isOpen, onClose, title, descr
         document.addEventListener("keydown", handleEscape);
         return () => document.removeEventListener("keydown", handleEscape);
     }, [isOpen, closeOnEscape, onClose]);
-    // Robust body scroll lock for iOS and Android
+    // Prevent body scroll when bottom sheet is open
     React__namespace.useEffect(() => {
-        if (!isOpen)
-            return;
-        const iOS = isIOS();
-        // Store current scroll position
-        scrollPosition.current = window.pageYOffset || document.documentElement.scrollTop;
-        // Store original styles
-        originalBodyStyles.current = {
-            overflow: document.body.style.overflow,
-            position: document.body.style.position,
-            top: document.body.style.top,
-            left: document.body.style.left,
-            right: document.body.style.right,
-            width: document.body.style.width,
-            height: document.body.style.height,
-        };
-        // Apply scroll lock
-        document.body.style.overflow = "hidden";
-        // iOS requires position fixed to prevent background scroll
-        if (iOS) {
-            document.body.style.position = "fixed";
-            document.body.style.top = `-${scrollPosition.current}px`;
-            document.body.style.left = "0";
-            document.body.style.right = "0";
-            document.body.style.width = "100%";
-        }
-        // Track touch position for scroll boundary detection
-        let lastTouchY = 0;
-        const handleTouchStartForScroll = (e) => {
-            lastTouchY = e.touches[0].clientY;
-        };
-        // Prevent touchmove on overlay to stop iOS rubber-banding
-        // But always allow scrolling inside body content
-        const preventTouchMove = (e) => {
-            const target = e.target;
-            const currentTouchY = e.touches[0].clientY;
-            const touchDelta = currentTouchY - lastTouchY;
-            lastTouchY = currentTouchY;
-            // Always allow scrolling inside the body content
-            if (bodyRef.current?.contains(target)) {
-                const scrollTop = bodyRef.current.scrollTop;
-                const scrollHeight = bodyRef.current.scrollHeight;
-                const clientHeight = bodyRef.current.clientHeight;
-                const canScroll = scrollHeight > clientHeight;
-                // If content is scrollable, allow normal scrolling
-                if (canScroll) {
-                    const isAtTop = scrollTop <= 0;
-                    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
-                    const isScrollingDown = touchDelta > 0; // finger moving down = scrolling up
-                    const isScrollingUp = touchDelta < 0; // finger moving up = scrolling down
-                    // Only prevent at boundaries when trying to scroll beyond
-                    if ((isAtTop && isScrollingDown) || (isAtBottom && isScrollingUp)) {
-                        // At boundary, prevent overscroll but allow swipe-to-close from drag handle
-                        if (isDraggingFromHandle.current) {
-                            return; // Allow swipe gesture
-                        }
-                        e.preventDefault();
-                    }
-                    // Otherwise, allow normal scrolling
-                    return;
-                }
-                // Content not scrollable, allow touch events to pass through
-                return;
-            }
-            // Also allow scrolling in sticky content area
-            if (target.closest('[data-sticky-content]')) {
-                return;
-            }
-            // Prevent scroll on overlay and other areas (to prevent background scroll)
-            e.preventDefault();
-        };
-        document.addEventListener("touchstart", handleTouchStartForScroll, { passive: true });
-        document.addEventListener("touchmove", preventTouchMove, { passive: false });
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
         return () => {
-            document.removeEventListener("touchstart", handleTouchStartForScroll);
-            document.removeEventListener("touchmove", preventTouchMove);
-            // Restore original styles
-            if (originalBodyStyles.current) {
-                document.body.style.overflow = originalBodyStyles.current.overflow;
-                document.body.style.position = originalBodyStyles.current.position;
-                document.body.style.top = originalBodyStyles.current.top;
-                document.body.style.left = originalBodyStyles.current.left;
-                document.body.style.right = originalBodyStyles.current.right;
-                document.body.style.width = originalBodyStyles.current.width;
-            }
-            // Restore scroll position for iOS
-            if (iOS) {
-                window.scrollTo(0, scrollPosition.current);
-            }
+            document.body.style.overflow = "";
         };
     }, [isOpen]);
-    // Reset closing state and scroll position when opening
+    // Reset closing state when opening
     React__namespace.useEffect(() => {
         if (isOpen) {
             setIsClosing(false);
-            setKeyboardHeight(0);
-            // Reset scroll to top when opening - use multiple timeouts for iOS reliability
-            const resetScroll = () => {
-                if (bodyRef.current) {
-                    bodyRef.current.scrollTop = 0;
-                }
-            };
-            // Immediate reset
-            resetScroll();
-            // After animation starts
-            requestAnimationFrame(resetScroll);
-            // After animation completes
-            const timer = setTimeout(resetScroll, 350);
-            return () => clearTimeout(timer);
         }
     }, [isOpen]);
-    // Scroll focused input into view when keyboard opens
-    React__namespace.useEffect(() => {
-        if (!isOpen || !scrollToFocusedInput || !adjustForKeyboard)
-            return;
-        const handleFocusIn = (e) => {
-            const target = e.target;
-            if (!target || !bodyRef.current)
-                return;
-            // Check if target is an input/textarea inside the body
-            if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") &&
-                bodyRef.current.contains(target)) {
-                // Wait for keyboard to open
-                setTimeout(() => {
-                    // Scroll the input into view within the body container
-                    const targetRect = target.getBoundingClientRect();
-                    const bodyRect = bodyRef.current?.getBoundingClientRect();
-                    if (!bodyRect)
-                        return;
-                    // Calculate if input is below visible area (considering keyboard)
-                    const visibleBottom = viewportHeight - keyboardHeight - 20; // 20px buffer
-                    if (targetRect.bottom > visibleBottom) {
-                        // Scroll to bring input into view
-                        const scrollAmount = targetRect.bottom - visibleBottom + 40;
-                        bodyRef.current?.scrollBy({
-                            top: scrollAmount,
-                            behavior: "smooth",
-                        });
-                    }
-                }, 100);
-            }
-        };
-        document.addEventListener("focusin", handleFocusIn);
-        return () => document.removeEventListener("focusin", handleFocusIn);
-    }, [isOpen, scrollToFocusedInput, adjustForKeyboard, viewportHeight, keyboardHeight]);
-    // Reset scroll to top when content changes (for filtered results)
-    // This ensures empty states and filtered results are always visible
-    React__namespace.useEffect(() => {
-        if (!isOpen || !bodyRef.current)
-            return;
-        // Use requestAnimationFrame to ensure DOM has updated
-        requestAnimationFrame(() => {
-            if (bodyRef.current) {
-                // Always scroll to top to show content (including empty states)
-                bodyRef.current.scrollTop = 0;
-                // If keyboard is open, ensure content is in visible area
-                if (keyboardHeight > 0) {
-                    // Force a re-render of the scroll position
-                    bodyRef.current.style.scrollBehavior = 'auto';
-                    bodyRef.current.scrollTop = 0;
-                    bodyRef.current.style.scrollBehavior = '';
-                }
-            }
-        });
-    }, [children, isOpen, keyboardHeight]);
     // Handle close with animation
-    const handleClose = React__namespace.useCallback(() => {
+    const handleClose = () => {
         if (!onClose)
             return;
-        // Blur any focused input to dismiss keyboard
-        if (document.activeElement instanceof HTMLElement) {
-            document.activeElement.blur();
-        }
         setIsClosing(true);
         // Wait for animation to complete before calling onClose
         setTimeout(() => {
             onClose();
             setIsClosing(false);
         }, 300); // Match animation duration
-    }, [onClose]);
+    };
     // Handle overlay click
     const handleOverlayClick = (e) => {
         if (closeOnOverlayClick && e.target === e.currentTarget) {
             handleClose();
         }
     };
-    // Touch handling for swipe-to-close (only from drag handle or when scrolled to top)
+    // Handle touch events for swipe down
     const handleTouchStart = (e) => {
         if (!closeOnSwipeDown)
             return;
-        const touch = e.targetTouches[0];
         setTouchEnd(null);
-        setTouchStart(touch.clientY);
-        setTouchStartX(touch.clientX);
-        setIsSwipeGesture(false);
-        // Check if drag started from the drag handle
-        isDraggingFromHandle.current = dragHandleRef.current?.contains(e.target) || false;
+        setTouchStart(e.targetTouches[0].clientY);
     };
     const handleTouchMove = (e) => {
-        if (!closeOnSwipeDown || touchStart === null)
+        if (!closeOnSwipeDown)
             return;
-        const touch = e.targetTouches[0];
-        const currentY = touch.clientY;
-        const currentX = touch.clientX;
-        setTouchEnd(currentY);
-        // Determine if this is a vertical swipe gesture (vs horizontal scroll)
-        if (!isSwipeGesture && touchStartX !== null) {
-            const deltaY = Math.abs(currentY - touchStart);
-            const deltaX = Math.abs(currentX - touchStartX);
-            // If vertical movement is greater, it's a swipe gesture
-            if (deltaY > 10 || deltaX > 10) {
-                setIsSwipeGesture(deltaY > deltaX);
-            }
-        }
+        setTouchEnd(e.targetTouches[0].clientY);
     };
     const handleTouchEnd = () => {
-        if (!closeOnSwipeDown || touchStart === null || touchEnd === null) {
-            resetTouchState();
+        if (!closeOnSwipeDown || !touchStart || !touchEnd)
             return;
-        }
         const distance = touchEnd - touchStart;
-        const isSwipeDown = distance > 80; // Minimum swipe distance
-        // Only close if:
-        // 1. Swiped from drag handle, OR
-        // 2. Body is scrolled to top and user swiped down
-        const bodyScrolledToTop = (bodyRef.current?.scrollTop || 0) <= 0;
-        const shouldClose = isSwipeDown && isSwipeGesture && (isDraggingFromHandle.current || bodyScrolledToTop);
-        if (shouldClose) {
+        const isSwipeDown = distance > 100; // Minimum swipe distance
+        if (isSwipeDown) {
             handleClose();
         }
-        resetTouchState();
-    };
-    const resetTouchState = () => {
         setTouchStart(null);
         setTouchEnd(null);
-        setTouchStartX(null);
-        setIsSwipeGesture(false);
-        isDraggingFromHandle.current = false;
     };
-    // Handle Android back button
-    React__namespace.useEffect(() => {
-        if (!isOpen || !isAndroid())
-            return;
-        const handlePopState = (e) => {
-            e.preventDefault();
-            handleClose();
-        };
-        // Push a dummy state so back button can be caught
-        window.history.pushState({ bottomSheet: true }, "");
-        window.addEventListener("popstate", handlePopState);
-        return () => {
-            window.removeEventListener("popstate", handlePopState);
-            // Clean up the dummy state if still present
-            if (window.history.state?.bottomSheet) {
-                window.history.back();
-            }
-        };
-    }, [isOpen, handleClose]);
     // Don't render if not open and not closing
     if (!isOpen && !isClosing)
         return null;
     const hasHeader = title || description;
-    // Calculate dynamic max height based on keyboard
-    // When keyboard is open, limit height to fit in visible viewport above keyboard
-    const dynamicMaxHeight = keyboardHeight > 0
-        ? `${Math.min(viewportHeight - 20, viewportHeight * 0.9)}px`
-        : maxHeight;
-    return (jsxRuntime.jsxs("div", { className: cn("fixed z-9999 flex items-end justify-center", 
-        // Always position at bottom, container height adjusts for keyboard
-        className), style: {
-            // Position container to fill visible viewport (above keyboard)
-            top: 0,
-            left: 0,
-            right: 0,
-            // Use visual viewport height when keyboard is open to stay above keyboard
-            height: keyboardHeight > 0 ? `${viewportHeight}px` : "100%",
-            // On iOS, also set bottom to ensure proper positioning
-            ...(keyboardHeight === 0 && { bottom: 0 }),
-        }, role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsxRuntime.jsx("div", { ref: overlayRef, className: cn("absolute inset-0 z-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300", isClosing ? "opacity-0" : "opacity-100", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { ref: contentRef, className: cn("relative z-10 w-full transition-transform duration-300", "flex flex-col overflow-hidden", variant === "default" && "bg-white rounded-t-2xl shadow-xl", isClosing ? "animate-slide-out-bottom" : "animate-slide-in-bottom", 
-                // Always position at bottom of container
-                "mt-auto", contentClassName), style: {
-                    maxHeight: dynamicMaxHeight,
-                    // Add safe area padding at the bottom for devices with home indicator
-                    paddingBottom: footer ? 0 : `max(env(safe-area-inset-bottom, 0px), ${safeAreaBottom}px)`,
-                }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [showDragHandle && variant === "default" && (jsxRuntime.jsx("div", { ref: dragHandleRef, className: "flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing touch-none", children: jsxRuntime.jsx("div", { className: "w-10 h-1 bg-neutral-300 rounded-full" }) })), hasHeader && (jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4 shrink-0", variant === "default" && "px-6", variant === "default" && !showDragHandle && "pt-6", variant === "default" && showDragHandle && "pt-2", variant === "default" && !description && "pb-4", variant === "default" && description && "pb-2", headerClassName), children: [jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [title && (jsxRuntime.jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsxRuntime.jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsxRuntime.jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsxRuntime.jsx("div", { className: cn("absolute z-10", variant === "default" && "top-4 right-4"), children: jsxRuntime.jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet" }) })), stickyContent && (jsxRuntime.jsx("div", { className: cn("shrink-0", variant === "default" && "px-6 pb-4", variant === "default" && !hasHeader && !showDragHandle && "pt-4", variant === "default" && !hasHeader && showDragHandle && "pt-2", stickyContentClassName), children: stickyContent })), jsxRuntime.jsx("div", { ref: bodyRef, className: cn("flex-1 min-h-0 overflow-y-auto overscroll-contain", 
-                        // Smooth scrolling and momentum scroll for iOS
-                        "-webkit-overflow-scrolling-touch", variant === "default" && "px-6", variant === "default" && hasHeader && !stickyContent && "py-4", variant === "default" && hasHeader && stickyContent && "pb-4", variant === "default" && !hasHeader && !showDragHandle && !stickyContent && "pt-6 pb-4", variant === "default" && !hasHeader && showDragHandle && !stickyContent && "pt-2 pb-4", variant === "default" && stickyContent && "pt-0 pb-4", variant === "default" && !footer && "pb-6", bodyClassName), children: children }), footer && (jsxRuntime.jsxs("div", { className: "flex flex-col shrink-0", style: {
-                            // Add safe area padding to footer
-                            paddingBottom: `max(env(safe-area-inset-bottom, 0px), ${safeAreaBottom}px)`,
-                        }, children: [variant === "default" && (jsxRuntime.jsx(Divider, { thickness: "thin", variant: "muted" })), jsxRuntime.jsx("div", { className: cn("flex items-center justify-end gap-3", variant === "default" && "px-6 py-4", footerClassName), children: footer })] }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: cn("fixed inset-0 z-9999 flex items-end justify-center", className), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300", isClosing ? "opacity-0" : "opacity-100", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { ref: contentRef, className: cn("relative z-10 w-full transition-transform duration-300", "flex flex-col overflow-hidden", variant === "default" && "bg-white rounded-t-2xl shadow-xl", isClosing ? "animate-slide-out-bottom" : "animate-slide-in-bottom", contentClassName), style: { maxHeight }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [showDragHandle && variant === "default" && (jsxRuntime.jsx("div", { className: "flex justify-center pt-3 pb-2", children: jsxRuntime.jsx("div", { className: "w-10 h-1 bg-neutral-300 rounded-full" }) })), hasHeader && (jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4", variant === "default" && "px-6", variant === "default" && !showDragHandle && "pt-6", variant === "default" && showDragHandle && "pt-2", variant === "default" && !description && "pb-4", variant === "default" && description && "pb-2", headerClassName), children: [jsxRuntime.jsxs("div", { className: "flex-1", children: [title && (jsxRuntime.jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsxRuntime.jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsxRuntime.jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsxRuntime.jsx("div", { className: cn("absolute z-10", variant === "default" && "top-4 right-4"), children: jsxRuntime.jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet" }) })), jsxRuntime.jsx("div", { className: cn("flex-1 overflow-y-auto", variant === "default" && "px-6", variant === "default" && hasHeader && "py-4", variant === "default" && !hasHeader && !showDragHandle && "pt-6 pb-4", variant === "default" && !hasHeader && showDragHandle && "pt-2 pb-4", variant === "default" && !footer && "pb-6", bodyClassName), children: children }), footer && (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [variant === "default" && (jsxRuntime.jsx(Divider, { thickness: "thin", variant: "muted" })), jsxRuntime.jsx("div", { className: cn("flex items-center justify-end gap-3", variant === "default" && "px-6 py-4", footerClassName), children: footer })] }))] })] }));
 });
 BottomSheet.displayName = "BottomSheet";
 
@@ -4937,16 +4619,11 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
     });
     const showDropdown = isOpen && searchValue.length >= minSearchLength;
     // Render dropdown menu content
-    const renderDropdownContent = () => (jsxRuntime.jsx(DropdownMenu, { items: itemsWithHandlers, sectionHeading: isMobile ? undefined : sectionHeading, isLoading: isLoading, isEmpty: itemsWithAddNew.length === 0 && !showAddNew, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: (primaryButtonText || secondaryButtonText) && !disableFooter
+    const renderDropdownContent = () => (jsxRuntime.jsx(DropdownMenu, { items: itemsWithHandlers, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: itemsWithAddNew.length === 0 && !showAddNew, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: (primaryButtonText || secondaryButtonText) && !disableFooter
             ? true
-            : false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: isMobile ? "full" : (dropdownWidth === "full" ? "full" : "auto"), 
-        // On mobile, let BottomSheet body handle scrolling; on desktop use calculated maxHeight
-        maxHeight: isMobile ? "none" : `${position.maxHeight}px`, unstyled: isMobile }));
-    // Search field component for mobile BottomSheet
-    // Note: No autoFocus - keyboard only appears when user taps the field
-    const mobileSearchField = (jsxRuntime.jsx(TextField, { value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, containerClassName: "mb-0", placeholder: textFieldProps.placeholder || "Search...", ...textFieldProps }));
+            : false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: isMobile ? "full" : (dropdownWidth === "full" ? "full" : "auto"), maxHeight: `${position.maxHeight}px`, unstyled: isMobile }));
     // Mobile: BottomSheet, Desktop: Regular Dropdown
-    const dropdownMenu = showDropdown && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: () => setIsOpen(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, adjustForKeyboard: true, scrollToFocusedInput: true, maxHeight: "85vh", stickyContent: mobileSearchField, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: menuRef, style: {
+    const dropdownMenu = showDropdown && (isMobile ? (jsxRuntime.jsxs(BottomSheet, { isOpen: isOpen, onClose: () => setIsOpen(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: [jsxRuntime.jsx("div", { className: "mb-4", children: jsxRuntime.jsx(TextField, { value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, containerClassName: "mb-0", placeholder: textFieldProps.placeholder || "Search...", ...textFieldProps }) }), renderDropdownContent()] })) : (jsxRuntime.jsx("div", { ref: menuRef, style: {
             position: "fixed",
             ...(position.top !== undefined && { top: `${position.top}px` }),
             ...(position.bottom !== undefined && {