@vellira-ui/react-native 2.57.0 → 2.58.0

package/dist/index.js

@@ -1,6 +1,7 @@
 import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Check, ChevronDown, Close, Search } from "@vellira-ui/icons";
 import { AccessibilityInfo, ActivityIndicator, Animated, BackHandler, Dimensions, Easing, FlatList, Modal as Modal$1, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, findNodeHandle, useWindowDimensions } from "react-native";
+import { createConsoleOverlayDiagnostics, createOverlayZIndexPolicy, resolveOverlayZIndex } from "@vellira-ui/core";
 import { darkTheme, highContrastTheme, lightTheme } from "@vellira-ui/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/theme/fontWeight.ts
@@ -23,306 +24,254 @@ function toNativeFontWeight(weight) {
 	return normalizedWeight;
 }
 //#endregion
-//#region src/managers/FloatingManager/computeFloatingPosition.ts
-function clamp(value, min, max) {
-	return Math.min(Math.max(value, min), Math.max(min, max));
-}
-function parsePlacement(placement) {
-	const [side, align = "center"] = placement.split("-");
-	return {
-		side,
-		align
-	};
-}
-function createPlacement(side, align) {
-	return align === "center" ? side : `${side}-${align}`;
-}
-function getOppositeSide(side) {
-	switch (side) {
-		case "top": return "bottom";
-		case "right": return "left";
-		case "bottom": return "top";
-		case "left": return "right";
-	}
-}
-function computeBasePosition({ reference, floating, side, align, offset }) {
-	const referenceCenterX = reference.x + reference.width / 2;
-	const referenceCenterY = reference.y + reference.height / 2;
-	const alignedLeft = align === "start" ? reference.x : align === "end" ? reference.x + reference.width - floating.width : referenceCenterX - floating.width / 2;
-	const alignedTop = align === "start" ? reference.y : align === "end" ? reference.y + reference.height - floating.height : referenceCenterY - floating.height / 2;
-	switch (side) {
-		case "top": return {
-			top: reference.y - floating.height - offset,
-			left: alignedLeft
-		};
-		case "right": return {
-			top: alignedTop,
-			left: reference.x + reference.width + offset
-		};
-		case "bottom": return {
-			top: reference.y + reference.height + offset,
-			left: alignedLeft
-		};
-		case "left": return {
-			top: alignedTop,
-			left: reference.x - floating.width - offset
-		};
-	}
-}
-function getMainAxisOverflow({ side, position, floating, boundary, padding }) {
-	switch (side) {
-		case "top": return padding - position.top;
-		case "right": return position.left + floating.width + padding - boundary.width;
-		case "bottom": return position.top + floating.height + padding - boundary.height;
-		case "left": return padding - position.left;
-	}
-}
-function computeFloatingPosition({ reference, floating, boundary, placement, offset = 8, padding = 12, arrowPadding = 16, flip = true, shift = true }) {
-	const parsed = parsePlacement(placement);
-	let resolvedSide = parsed.side;
-	let position = computeBasePosition({
-		reference,
-		floating,
-		side: resolvedSide,
-		align: parsed.align,
-		offset
-	});
-	if (flip && getMainAxisOverflow({
-		side: resolvedSide,
-		position,
-		floating,
-		boundary,
-		padding
-	}) > 0) {
-		const oppositeSide = getOppositeSide(resolvedSide);
-		const oppositePosition = computeBasePosition({
-			reference,
-			floating,
-			side: oppositeSide,
-			align: parsed.align,
-			offset
-		});
-		if (getMainAxisOverflow({
-			side: oppositeSide,
-			position: oppositePosition,
-			floating,
-			boundary,
-			padding
-		}) <= 0) {
-			resolvedSide = oppositeSide;
-			position = oppositePosition;
-		}
-	}
-	if (shift) position = {
-		top: clamp(position.top, padding, boundary.height - floating.height - padding),
-		left: clamp(position.left, padding, boundary.width - floating.width - padding)
-	};
-	const referenceCenterX = reference.x + reference.width / 2;
-	const referenceCenterY = reference.y + reference.height / 2;
-	const arrowPosition = resolvedSide === "top" || resolvedSide === "bottom" ? { left: clamp(referenceCenterX - position.left, arrowPadding, floating.width - arrowPadding) } : { top: clamp(referenceCenterY - position.top, arrowPadding, floating.height - arrowPadding) };
+//#region src/managers/OverlayManager/NativeOverlayManager.ts
+const nativeOverlayZIndexPolicy = createOverlayZIndexPolicy({
+	defaultLevel: "modal",
+	levels: { modal: lightTheme.tokens.zIndex.modal }
+});
+const nativeOverlayDiagnostics = createConsoleOverlayDiagnostics("NativeOverlayManager");
+const createNativeOverlayManager = () => {
+	let stack = [];
+	const dismissHandlers = /* @__PURE__ */ new Map();
+	const outsidePressHandlers = /* @__PURE__ */ new Map();
 	return {
-		position,
-		arrowPosition,
-		placement: createPlacement(resolvedSide, parsed.align)
-	};
-}
-//#endregion
-//#region src/managers/FloatingManager/useNativeFloatingPosition.ts
-function useNativeFloatingPosition(placement = "top", offset = 8) {
-	const [result, setResult] = useState({
-		position: {
-			top: 0,
-			left: 0
+		register(id) {
+			if (stack.some((item) => item.id === id)) nativeOverlayDiagnostics.duplicateRegistration?.(id);
+			stack = stack.filter((item) => item.id !== id);
+			const entry = {
+				id,
+				zIndex: resolveOverlayZIndex({
+					level: nativeOverlayZIndexPolicy.defaultLevel,
+					order: stack.length,
+					policy: nativeOverlayZIndexPolicy
+				})
+			};
+			stack.push(entry);
+			return entry;
 		},
-		arrowPosition: {},
-		placement
-	});
-	const floatingSizeRef = useRef({
-		width: 0,
-		height: 0
-	});
-	const lastTriggerRef = useRef(null);
-	const lastContainerRef = useRef(null);
-	const updatePosition = useCallback((triggerRef, containerRef, measuredSize = floatingSizeRef.current) => {
-		lastTriggerRef.current = triggerRef;
-		lastContainerRef.current = containerRef ?? null;
-		const triggerNode = triggerRef.current;
-		const containerNode = containerRef?.current;
-		if (!triggerNode || typeof triggerNode.measureInWindow !== "function") {
-			setResult((current) => ({
-				...current,
-				position: {
-					top: 0,
-					left: 0
-				}
-			}));
-			return;
-		}
-		triggerNode.measureInWindow((x, y, width, height) => {
-			const commitPosition = (containerX, containerY, containerWidth, containerHeight) => {
-				const nextResult = computeFloatingPosition({
-					reference: {
-						x: x - containerX,
-						y: y - containerY,
-						width,
-						height
-					},
-					floating: measuredSize,
-					boundary: {
-						width: containerWidth,
-						height: containerHeight
-					},
-					placement,
-					offset
-				});
-				setResult(nextResult);
+		unregister(id) {
+			if (!stack.some((item) => item.id === id)) nativeOverlayDiagnostics.unknownUnregister?.(id);
+			dismissHandlers.delete(id);
+			outsidePressHandlers.delete(id);
+			stack = stack.filter((item) => item.id !== id);
+		},
+		isTop(id) {
+			return stack.at(-1)?.id === id;
+		},
+		getTop() {
+			return stack.at(-1);
+		},
+		getZIndex(id) {
+			return stack.find((item) => item.id === id)?.zIndex ?? nativeOverlayZIndexPolicy.levels[nativeOverlayZIndexPolicy.defaultLevel];
+		},
+		registerDismissHandler(id, handler) {
+			dismissHandlers.set(id, handler);
+			return () => {
+				if (dismissHandlers.get(id) !== handler) return;
+				dismissHandlers.delete(id);
 			};
-			if (!containerNode || typeof containerNode.measureInWindow !== "function") {
-				const window = Dimensions.get("window");
-				commitPosition(0, 0, window.width, window.height);
-				return;
-			}
-			containerNode.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
-				commitPosition(containerX, containerY, containerWidth, containerHeight);
-			});
-		});
-	}, [placement, offset]);
-	const onFloatingLayout = useCallback((event) => {
-		const { width, height } = event.nativeEvent.layout;
-		const nextSize = {
-			width,
-			height
-		};
-		floatingSizeRef.current = nextSize;
-		if (lastTriggerRef.current) updatePosition(lastTriggerRef.current, lastContainerRef.current ?? void 0, nextSize);
-	}, [updatePosition]);
-	return {
-		position: result.position,
-		arrowPosition: result.arrowPosition,
-		placement: result.placement,
-		updatePosition,
-		onFloatingLayout
+		},
+		registerOutsidePressHandler(id, handler) {
+			outsidePressHandlers.set(id, handler);
+			return () => {
+				if (outsidePressHandlers.get(id) !== handler) return;
+				outsidePressHandlers.delete(id);
+			};
+		},
+		dispatchTopDismiss() {
+			const top = this.getTop();
+			if (!top) return false;
+			const handler = dismissHandlers.get(top.id);
+			if (!handler) return false;
+			return handler();
+		},
+		dispatchTopOutsidePress() {
+			const top = this.getTop();
+			if (!top) return false;
+			const handler = outsidePressHandlers.get(top.id);
+			if (!handler) return false;
+			return handler();
+		},
+		clear() {
+			stack = [];
+			dismissHandlers.clear();
+			outsidePressHandlers.clear();
+		}
 	};
-}
-//#endregion
-//#region src/managers/OverlayManager/NativeOverlayManager.ts
-const BASE_LAYER = 1e3;
-const LAYER_STEP = 10;
-let stack = [];
-const nativeOverlayManager = {
-	register(id) {
-		stack = stack.filter((item) => item.id !== id);
-		const entry = {
-			id,
-			layer: BASE_LAYER + stack.length * LAYER_STEP
-		};
-		stack.push(entry);
-		return entry;
-	},
-	unregister(id) {
-		stack = stack.filter((item) => item.id !== id);
-	},
-	isTop(id) {
-		return stack.at(-1)?.id === id;
-	},
-	getTop() {
-		return stack.at(-1);
-	},
-	getLayer(id) {
-		return stack.find((item) => item.id === id)?.layer ?? BASE_LAYER;
-	}
 };
+const nativeOverlayManager = createNativeOverlayManager();
 //#endregion
-//#region src/managers/OverlayManager/useNativeOverlayRegistration.ts
-const useNativeOverlayRegistration = ({ id, visible }) => {
-	const [layer, setLayer] = useState(() => nativeOverlayManager.getLayer(id));
+//#region src/managers/OverlayManager/OverlayManagerProvider.tsx
+const NativeOverlayManagerContext = createContext(null);
+const useNativeOverlayManager = () => useContext(NativeOverlayManagerContext) ?? nativeOverlayManager;
+//#endregion
+//#region src/hooks/behavior/overlay/useOverlayRegistration.ts
+const useOverlayRegistration = ({ active, id }) => {
+	const nativeOverlayManager = useNativeOverlayManager();
+	const [zIndex, setZIndex] = useState(() => nativeOverlayManager.getZIndex(id));
 	useEffect(() => {
-		if (!visible) return;
+		if (!active) return;
 		const entry = nativeOverlayManager.register(id);
-		setLayer(entry.layer);
+		setZIndex(entry.zIndex);
 		return () => {
 			nativeOverlayManager.unregister(id);
 		};
-	}, [id, visible]);
+	}, [
+		active,
+		id,
+		nativeOverlayManager
+	]);
 	return {
-		layer,
-		isTopOverlay: useCallback(() => nativeOverlayManager.isTop(id), [id])
+		zIndex,
+		isTopOverlay: useCallback(() => nativeOverlayManager.isTop(id), [id, nativeOverlayManager])
 	};
 };
 //#endregion
-//#region src/hooks/behavior/overlay/useOverlayStack.ts
-const useOverlayStack = ({ active, id }) => useNativeOverlayRegistration({
-	id,
-	visible: active
-});
-//#endregion
 //#region src/hooks/behavior/overlay/useOverlayDismiss.ts
-const useOverlayDismiss = ({ active, closeOnEscape = true, closeOnOutsidePress = true, id, requestClose }) => {
-	const { isTopOverlay } = useOverlayStack({
+const dismissListeners = /* @__PURE__ */ new Map();
+function attachDismissListener(manager) {
+	if (dismissListeners.has(manager)) return;
+	if (Platform.OS === "web") {
+		const handleKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			manager.dispatchTopDismiss();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		dismissListeners.set(manager, {
+			count: 0,
+			detach: () => {
+				document.removeEventListener("keydown", handleKeyDown);
+				dismissListeners.delete(manager);
+			}
+		});
+		return;
+	}
+	const subscription = BackHandler.addEventListener("hardwareBackPress", () => manager.dispatchTopDismiss());
+	dismissListeners.set(manager, {
+		count: 0,
+		detach: () => {
+			subscription.remove();
+			dismissListeners.delete(manager);
+		}
+	});
+}
+function retainDismissListener(manager) {
+	attachDismissListener(manager);
+	const retained = dismissListeners.get(manager);
+	if (!retained) return () => void 0;
+	retained.count += 1;
+	return () => {
+		const current = dismissListeners.get(manager);
+		if (!current) return;
+		current.count = Math.max(0, current.count - 1);
+		if (current.count > 0) return;
+		current.detach();
+	};
+}
+const useOverlayDismiss = ({ active, closeOnEscape = true, closeOnOutsidePress = true, id, requestClose, requestOutsideClose }) => {
+	const nativeOverlayManager = useNativeOverlayManager();
+	const registration = useOverlayRegistration({
 		active,
 		id
 	});
+	const { isTopOverlay } = registration;
 	const requestTopClose = useCallback(() => {
 		if (!isTopOverlay()) return;
 		requestClose();
 	}, [isTopOverlay, requestClose]);
-	const requestOutsideClose = useCallback(() => {
-		if (!closeOnOutsidePress) return;
-		requestTopClose();
-	}, [closeOnOutsidePress, requestTopClose]);
+	const requestOutsideTopClose = useCallback(() => {
+		nativeOverlayManager.dispatchTopOutsidePress();
+	}, [nativeOverlayManager]);
 	useEffect(() => {
-		if (!active || !closeOnEscape) return;
-		if (Platform.OS === "web") {
-			const handleKeyDown = (event) => {
-				if (event.key !== "Escape") return;
-				requestTopClose();
-			};
-			document.addEventListener("keydown", handleKeyDown);
-			return () => {
-				document.removeEventListener("keydown", handleKeyDown);
-			};
-		}
-		const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+		if (!active) return;
+		return nativeOverlayManager.registerOutsidePressHandler(id, () => {
+			if (!closeOnOutsidePress) return false;
 			if (!isTopOverlay()) return false;
+			if (requestOutsideClose) {
+				requestOutsideClose();
+				return true;
+			}
 			requestClose();
 			return true;
 		});
+	}, [
+		active,
+		closeOnOutsidePress,
+		id,
+		isTopOverlay,
+		nativeOverlayManager,
+		requestClose,
+		requestOutsideClose
+	]);
+	useEffect(() => {
+		if (!active) return;
+		const releaseDismissListener = retainDismissListener(nativeOverlayManager);
+		const unregisterDismissHandler = nativeOverlayManager.registerDismissHandler(id, () => {
+			if (!closeOnEscape) return false;
+			requestTopClose();
+			return true;
+		});
 		return () => {
-			subscription.remove();
+			unregisterDismissHandler();
+			releaseDismissListener();
 		};
 	}, [
 		active,
 		closeOnEscape,
-		isTopOverlay,
-		requestClose,
+		id,
+		nativeOverlayManager,
 		requestTopClose
 	]);
 	return {
+		zIndex: registration.zIndex,
 		isTopOverlay,
 		requestClose: requestTopClose,
-		requestOutsideClose
+		requestOutsideClose: requestOutsideTopClose
 	};
 };
 //#endregion
 //#region src/hooks/behavior/overlay/useOverlayFocusRestore.ts
-const useOverlayFocusRestore = ({ enabled = true, triggerRef }) => {
+function isFocusableWebNode(node) {
+	return typeof node === "object" && node !== null && "focus" in node && typeof node.focus === "function";
+}
+const useOverlayFocusRestore = ({ active = false, enabled = true, finalFocus, triggerRef }) => {
+	const previouslyFocusedRef = useRef(null);
+	const saveFocusSnapshot = useCallback(() => {
+		if (Platform.OS !== "web" || typeof document === "undefined") return;
+		previouslyFocusedRef.current = document.activeElement;
+	}, []);
 	const restoreFocus = useCallback(() => {
 		if (!enabled) return;
 		if (Platform.OS === "web") {
-			const triggerNode = triggerRef.current;
-			if (triggerNode && typeof triggerNode === "object" && "focus" in triggerNode && typeof triggerNode.focus === "function") triggerNode.focus();
+			const preferredNode = finalFocus?.current ?? triggerRef.current;
+			if (isFocusableWebNode(preferredNode)) {
+				preferredNode.focus();
+				return;
+			}
+			const previouslyFocused = previouslyFocusedRef.current;
+			if (previouslyFocused instanceof HTMLElement && previouslyFocused.isConnected) previouslyFocused.focus();
 			return;
 		}
 		if (typeof findNodeHandle !== "function") return;
-		const handle = findNodeHandle(triggerRef.current);
+		const handle = findNodeHandle(finalFocus?.current ?? triggerRef.current);
 		if (handle && AccessibilityInfo.setAccessibilityFocus) AccessibilityInfo.setAccessibilityFocus(handle);
-	}, [enabled, triggerRef]);
+	}, [
+		enabled,
+		finalFocus,
+		triggerRef
+	]);
+	const restoreFocusAfterClose = useCallback(() => {
+		if (!enabled) return;
+		requestAnimationFrame(restoreFocus);
+	}, [enabled, restoreFocus]);
+	useEffect(() => {
+		if (!active) return;
+		saveFocusSnapshot();
+	}, [active, saveFocusSnapshot]);
 	return {
 		restoreFocus,
-		restoreFocusAfterClose: useCallback(() => {
-			if (!enabled) return;
-			requestAnimationFrame(restoreFocus);
-		}, [enabled, restoreFocus])
+		restoreFocusAfterClose,
+		saveFocusSnapshot
 	};
 };
 //#endregion
@@ -764,6 +713,16 @@ function useThemeStyles(createStyles) {
 	return useMemo(() => createStyles(theme), [createStyles, theme]);
 }
 //#endregion
+//#region src/components/Dropdown/internal/DropdownContext.tsx
+const DropdownContext = createContext(null);
+const DropdownProvider = DropdownContext.Provider;
+const useDropdownContext = () => {
+	const context = useContext(DropdownContext);
+	if (!context) throw new Error("Dropdown components must be used inside Dropdown");
+	return context;
+};
+DropdownContext.displayName = "DropdownContext";
+//#endregion
 //#region src/components/Dropdown/Content/DropdownContent.styles.ts
 const createStyles$21 = (theme) => StyleSheet.create({
 	modalRoot: { flex: 1 },
@@ -848,13 +807,14 @@ const createStyles$21 = (theme) => StyleSheet.create({
 //#region src/components/Dropdown/Content/DropdownContent.tsx
 const nativePointerEventsBoxNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
 const webPointerEventsBoxNone$1 = Platform.OS === "web" ? { pointerEvents: "box-none" } : void 0;
-function DropdownContent({ isOpen, children, onClose, color = "primary", contentStyle, accessibilityLabel, presentation, position, onFloatingLayout, searchable = false, searchValue = "", searchPlaceholder = "Search actions...", searchAccessibilityLabel, onSearchChange }) {
+function DropdownContent({ children, contentStyle, accessibilityLabel }) {
+	const { open, color, presentation, zIndex, position, searchable, searchValue, searchPlaceholder, searchAccessibilityLabel, requestClose, requestOutsideClose, onSearchChange, onFloatingLayout } = useDropdownContext();
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$21);
 	const colorPalette = theme.components.dropdown[color];
 	const isSheet = presentation === "sheet";
 	const isPopover = presentation === "popover";
-	const animation = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+	const animation = useRef(new Animated.Value(open ? 1 : 0)).current;
 	const [reduceMotion, setReduceMotion] = useState(false);
 	useEffect(() => {
 		AccessibilityInfo.isReduceMotionEnabled?.().then(setReduceMotion);
@@ -864,7 +824,7 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 		};
 	}, []);
 	useEffect(() => {
-		if (!isOpen) {
+		if (!open) {
 			animation.setValue(0);
 			return;
 		}
@@ -880,7 +840,7 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 		}).start();
 	}, [
 		animation,
-		isOpen,
+		open,
 		isSheet,
 		reduceMotion
 	]);
@@ -904,11 +864,15 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 	}, [animation, isSheet]);
 	return /* @__PURE__ */ jsx(Modal$1, {
 		transparent: true,
-		visible: isOpen,
+		visible: open,
 		animationType: "none",
-		onRequestClose: onClose,
+		onRequestClose: requestClose,
 		children: /* @__PURE__ */ jsxs(View, {
-			style: [styles.modalRoot, styles[presentation]],
+			style: [
+				styles.modalRoot,
+				styles[presentation],
+				Platform.OS === "web" && { zIndex }
+			],
 			children: [/* @__PURE__ */ jsx(Animated.View, {
 				...nativePointerEventsBoxNone$1,
 				style: [
@@ -920,7 +884,7 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 					accessibilityRole: "button",
 					accessibilityLabel: "Close menu",
 					style: StyleSheet.absoluteFill,
-					onPress: onClose
+					onPress: requestOutsideClose
 				})
 			}), /* @__PURE__ */ jsxs(Animated.View, {
 				accessibilityRole: "menu",
@@ -1068,6 +1032,279 @@ function getItemLabel(children) {
 	return labelParts.join("").trim();
 }
 //#endregion
+//#region src/hooks/behavior/dropdown/useDropdownAccessibility.ts
+const useDropdownAccessibility = ({ accessibilityLabel, label, open }) => {
+	const menuAccessibilityLabel = useMemo(() => {
+		if (accessibilityLabel) return accessibilityLabel;
+		return typeof label === "string" ? label : "Menu";
+	}, [accessibilityLabel, label]);
+	useEffect(() => {
+		if (!open) return;
+		AccessibilityInfo.announceForAccessibility(`${menuAccessibilityLabel} opened`);
+	}, [menuAccessibilityLabel, open]);
+	return { menuAccessibilityLabel };
+};
+//#endregion
+//#region src/hooks/behavior/dropdown/useDropdownEntries.ts
+const useDropdownEntries = ({ parsed, filteredParsed, loading, loadingText, isSearchable, empty }) => {
+	return {
+		navigableItems: useMemo(() => parsed.items.map((item) => ({
+			disabled: item.disabled,
+			label: item.label,
+			value: item.id
+		})), [parsed.items]),
+		data: useMemo(() => {
+			if (loading) return [{
+				type: "loading",
+				id: "loading",
+				props: { children: loadingText }
+			}];
+			if (isSearchable && filteredParsed.items.length === 0) return [{
+				type: "empty",
+				id: "empty",
+				props: { children: empty ?? "No actions found" }
+			}];
+			return filteredParsed.entries;
+		}, [
+			empty,
+			filteredParsed.entries,
+			filteredParsed.items.length,
+			isSearchable,
+			loading,
+			loadingText
+		])
+	};
+};
+//#endregion
+//#region src/components/Dropdown/internal/DropdownUtils.ts
+function createDropdownSelectEvent() {
+	let defaultPrevented = false;
+	return {
+		preventDefault: () => {
+			defaultPrevented = true;
+		},
+		get defaultPrevented() {
+			return defaultPrevented;
+		}
+	};
+}
+function filterDropdownEntries(parsed, searchValue) {
+	const normalizedSearch = searchValue.trim().toLocaleLowerCase();
+	const matchedItems = new Set(parsed.items.filter((item) => item.label.toLocaleLowerCase().includes(normalizedSearch)).map((item) => item.id));
+	return {
+		...parsed,
+		items: parsed.items.filter((item) => matchedItems.has(item.id)),
+		entries: parsed.entries.filter((entry) => entry.type !== "item" || matchedItems.has(entry.id))
+	};
+}
+//#endregion
+//#region src/hooks/behavior/dropdown/useDropdownSearch.ts
+const useDropdownSearch = ({ parsed, searchable, command, searchValue, defaultSearchValue, onSearch }) => {
+	const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
+	const resolvedSearchValue = searchValue ?? uncontrolledSearchValue;
+	const contentCommand = parsed.contentProps?.command ?? false;
+	const isSearchable = searchable || command || contentCommand || Boolean(parsed.searchProps);
+	return {
+		contentCommand,
+		filteredParsed: useMemo(() => {
+			if (!isSearchable || !resolvedSearchValue.trim()) return parsed;
+			return filterDropdownEntries(parsed, resolvedSearchValue);
+		}, [
+			isSearchable,
+			parsed,
+			resolvedSearchValue
+		]),
+		handleSearchChange: useCallback((value) => {
+			if (searchValue === void 0) setUncontrolledSearchValue(value);
+			onSearch?.(value);
+		}, [onSearch, searchValue]),
+		isSearchable,
+		resolvedSearchValue
+	};
+};
+//#endregion
+//#region src/managers/FloatingManager/computeFloatingPosition.ts
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function parsePlacement(placement) {
+	const [side, align = "center"] = placement.split("-");
+	return {
+		side,
+		align
+	};
+}
+function createPlacement(side, align) {
+	return align === "center" ? side : `${side}-${align}`;
+}
+function getOppositeSide(side) {
+	switch (side) {
+		case "top": return "bottom";
+		case "right": return "left";
+		case "bottom": return "top";
+		case "left": return "right";
+	}
+}
+function computeBasePosition({ reference, floating, side, align, offset }) {
+	const referenceCenterX = reference.x + reference.width / 2;
+	const referenceCenterY = reference.y + reference.height / 2;
+	const alignedLeft = align === "start" ? reference.x : align === "end" ? reference.x + reference.width - floating.width : referenceCenterX - floating.width / 2;
+	const alignedTop = align === "start" ? reference.y : align === "end" ? reference.y + reference.height - floating.height : referenceCenterY - floating.height / 2;
+	switch (side) {
+		case "top": return {
+			top: reference.y - floating.height - offset,
+			left: alignedLeft
+		};
+		case "right": return {
+			top: alignedTop,
+			left: reference.x + reference.width + offset
+		};
+		case "bottom": return {
+			top: reference.y + reference.height + offset,
+			left: alignedLeft
+		};
+		case "left": return {
+			top: alignedTop,
+			left: reference.x - floating.width - offset
+		};
+	}
+}
+function getMainAxisOverflow({ side, position, floating, boundary, padding }) {
+	switch (side) {
+		case "top": return padding - position.top;
+		case "right": return position.left + floating.width + padding - boundary.width;
+		case "bottom": return position.top + floating.height + padding - boundary.height;
+		case "left": return padding - position.left;
+	}
+}
+function computeFloatingPosition({ reference, floating, boundary, placement, offset = 8, padding = 12, arrowPadding = 16, flip = true, shift = true }) {
+	const parsed = parsePlacement(placement);
+	let resolvedSide = parsed.side;
+	let position = computeBasePosition({
+		reference,
+		floating,
+		side: resolvedSide,
+		align: parsed.align,
+		offset
+	});
+	if (flip && getMainAxisOverflow({
+		side: resolvedSide,
+		position,
+		floating,
+		boundary,
+		padding
+	}) > 0) {
+		const oppositeSide = getOppositeSide(resolvedSide);
+		const oppositePosition = computeBasePosition({
+			reference,
+			floating,
+			side: oppositeSide,
+			align: parsed.align,
+			offset
+		});
+		if (getMainAxisOverflow({
+			side: oppositeSide,
+			position: oppositePosition,
+			floating,
+			boundary,
+			padding
+		}) <= 0) {
+			resolvedSide = oppositeSide;
+			position = oppositePosition;
+		}
+	}
+	if (shift) position = {
+		top: clamp(position.top, padding, boundary.height - floating.height - padding),
+		left: clamp(position.left, padding, boundary.width - floating.width - padding)
+	};
+	const referenceCenterX = reference.x + reference.width / 2;
+	const referenceCenterY = reference.y + reference.height / 2;
+	const arrowPosition = resolvedSide === "top" || resolvedSide === "bottom" ? { left: clamp(referenceCenterX - position.left, arrowPadding, floating.width - arrowPadding) } : { top: clamp(referenceCenterY - position.top, arrowPadding, floating.height - arrowPadding) };
+	return {
+		position,
+		arrowPosition,
+		placement: createPlacement(resolvedSide, parsed.align)
+	};
+}
+//#endregion
+//#region src/managers/FloatingManager/useNativeFloatingPosition.ts
+function useNativeFloatingPosition(placement = "top", offset = 8) {
+	const [result, setResult] = useState({
+		position: {
+			top: 0,
+			left: 0
+		},
+		arrowPosition: {},
+		placement
+	});
+	const floatingSizeRef = useRef({
+		width: 0,
+		height: 0
+	});
+	const lastTriggerRef = useRef(null);
+	const lastContainerRef = useRef(null);
+	const updatePosition = useCallback((triggerRef, containerRef, measuredSize = floatingSizeRef.current) => {
+		lastTriggerRef.current = triggerRef;
+		lastContainerRef.current = containerRef ?? null;
+		const triggerNode = triggerRef.current;
+		const containerNode = containerRef?.current;
+		if (!triggerNode || typeof triggerNode.measureInWindow !== "function") {
+			setResult((current) => ({
+				...current,
+				position: {
+					top: 0,
+					left: 0
+				}
+			}));
+			return;
+		}
+		triggerNode.measureInWindow((x, y, width, height) => {
+			const commitPosition = (containerX, containerY, containerWidth, containerHeight) => {
+				const nextResult = computeFloatingPosition({
+					reference: {
+						x: x - containerX,
+						y: y - containerY,
+						width,
+						height
+					},
+					floating: measuredSize,
+					boundary: {
+						width: containerWidth,
+						height: containerHeight
+					},
+					placement,
+					offset
+				});
+				setResult(nextResult);
+			};
+			if (!containerNode || typeof containerNode.measureInWindow !== "function") {
+				const window = Dimensions.get("window");
+				commitPosition(0, 0, window.width, window.height);
+				return;
+			}
+			containerNode.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
+				commitPosition(containerX, containerY, containerWidth, containerHeight);
+			});
+		});
+	}, [placement, offset]);
+	const onFloatingLayout = useCallback((event) => {
+		const { width, height } = event.nativeEvent.layout;
+		const nextSize = {
+			width,
+			height
+		};
+		floatingSizeRef.current = nextSize;
+		if (lastTriggerRef.current) updatePosition(lastTriggerRef.current, lastContainerRef.current ?? void 0, nextSize);
+	}, [updatePosition]);
+	return {
+		position: result.position,
+		arrowPosition: result.arrowPosition,
+		placement: result.placement,
+		updatePosition,
+		onFloatingLayout
+	};
+}
+//#endregion
 //#region src/components/Dropdown/Dropdown.styles.ts
 const createStyles$20 = (theme) => StyleSheet.create({
 	root: { alignSelf: "flex-start" },
@@ -1103,28 +1340,6 @@ function DropdownGroup({ label }) {
 }
 DropdownGroup.displayName = "DropdownGroup";
 //#endregion
-//#region src/components/Dropdown/internal/DropdownUtils.ts
-function createDropdownSelectEvent() {
-	let defaultPrevented = false;
-	return {
-		preventDefault: () => {
-			defaultPrevented = true;
-		},
-		get defaultPrevented() {
-			return defaultPrevented;
-		}
-	};
-}
-function filterDropdownEntries(parsed, searchValue) {
-	const normalizedSearch = searchValue.trim().toLocaleLowerCase();
-	const matchedItems = new Set(parsed.items.filter((item) => item.label.toLocaleLowerCase().includes(normalizedSearch)).map((item) => item.id));
-	return {
-		...parsed,
-		items: parsed.items.filter((item) => matchedItems.has(item.id)),
-		entries: parsed.entries.filter((entry) => entry.type !== "item" || matchedItems.has(entry.id))
-	};
-}
-//#endregion
 //#region src/components/Dropdown/Item/DropdownItem.styles.ts
 const createStyles$18 = (theme) => StyleSheet.create({
 	item: {
@@ -1149,7 +1364,8 @@ const createStyles$18 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Item/DropdownItem.tsx
-function DropdownItem({ label, value, rootColor = "primary", color = "default", icon, disabled = false, textWrap = "truncate", itemStyle, textStyle, onSelect }) {
+function DropdownItem({ label, value, color = "default", icon, disabled = false, textWrap = "truncate", onSelect }) {
+	const { color: rootColor, itemStyle, textStyle } = useDropdownContext();
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$18);
 	const rootColorPalette = theme.components.dropdown[rootColor];
@@ -1303,7 +1519,8 @@ const createStyles$16 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Trigger/DropdownTrigger.tsx
-function DropdownTrigger({ asChild = false, label, trigger, children, icon, arrowIcon, showArrow = true, color = "primary", size = "md", disabled = false, isOpen, triggerStyle, triggerRef, accessibilityLabel, accessibilityHint, onPress }) {
+function DropdownTrigger({ asChild = false, label, trigger, children, icon, arrowIcon, showArrow = true, triggerStyle, triggerRef, accessibilityLabel, accessibilityHint }) {
+	const { open, color, disabled, size, toggle } = useDropdownContext();
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$16);
 	const colorPalette = theme.components.dropdown[color];
@@ -1320,14 +1537,14 @@ function DropdownTrigger({ asChild = false, label, trigger, children, icon, arro
 	const hasIcon = Boolean(icon);
 	const isIconOnly = !trigger && hasIcon && !showArrow;
 	const [isPressed, setIsPressed] = useState(false);
-	const rotateAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+	const rotateAnim = useRef(new Animated.Value(open ? 1 : 0)).current;
 	useEffect(() => {
 		Animated.timing(rotateAnim, {
-			toValue: isOpen ? 1 : 0,
+			toValue: open ? 1 : 0,
 			duration: 180,
 			useNativeDriver: Platform.OS !== "web"
 		}).start();
-	}, [isOpen, rotateAnim]);
+	}, [open, rotateAnim]);
 	const arrowRotate = rotateAnim.interpolate({
 		inputRange: [0, 1],
 		outputRange: ["0deg", "180deg"]
@@ -1363,12 +1580,12 @@ function DropdownTrigger({ asChild = false, label, trigger, children, icon, arro
 			accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
 			accessibilityHint,
 			accessibilityState: {
-				expanded: isOpen,
+				expanded: open,
 				disabled: isChildDisabled
 			},
 			onPress: () => {
 				child.props.onPress?.();
-				if (!isChildDisabled) onPress();
+				if (!isChildDisabled) toggle();
 			}
 		});
 	}
@@ -1379,10 +1596,10 @@ function DropdownTrigger({ asChild = false, label, trigger, children, icon, arro
 		accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
 		accessibilityHint,
 		accessibilityState: {
-			expanded: isOpen,
+			expanded: open,
 			disabled
 		},
-		onPress,
+		onPress: toggle,
 		onPressIn: () => setIsPressed(true),
 		onPressOut: () => setIsPressed(false),
 		style: [
@@ -1429,8 +1646,6 @@ DropdownTrigger.displayName = "DropdownTrigger";
 function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, showArrow = true, open, defaultOpen = false, onOpenChange, presentation = "auto", placement = "bottom-start", offset = 8, closeOnSelect = true, color = "primary", disabled = false, loading = false, loadingText = "Loading actions...", searchable = false, command = false, searchValue, defaultSearchValue = "", searchPlaceholder, onSearch, empty, size = "md", style, triggerStyle, contentStyle, itemStyle, textStyle, accessibilityLabel, accessibilityHint }) {
 	const styles = useThemeStyles(createStyles$20);
 	const overlayId = useId();
-	const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
-	const resolvedSearchValue = searchValue ?? uncontrolledSearchValue;
 	const triggerRef = useRef(null);
 	const setTriggerRef = useCallback((node) => {
 		if (node && typeof node === "object" && "measureInWindow" in node && typeof node.measureInWindow === "function") {
@@ -1440,29 +1655,26 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		triggerRef.current = null;
 	}, []);
 	const parsed = useMemo(() => parseDropdownChildren(children), [children]);
-	const contentCommand = parsed.contentProps?.command ?? false;
-	const isSearchable = searchable || command || contentCommand || !!parsed.searchProps;
+	const { contentCommand, filteredParsed, handleSearchChange, isSearchable, resolvedSearchValue } = useDropdownSearch({
+		parsed,
+		searchable,
+		command,
+		searchValue,
+		defaultSearchValue,
+		onSearch
+	});
+	const { navigableItems, data } = useDropdownEntries({
+		parsed,
+		filteredParsed,
+		loading,
+		loadingText,
+		isSearchable,
+		empty
+	});
 	const resolvedPresentation = useOverlayPresentation(presentation);
 	const contentStyleFromSlot = parsed.contentProps?.style;
 	const contentPresentation = (parsed.contentProps?.presentation === "auto" ? void 0 : parsed.contentProps?.presentation) ?? resolvedPresentation;
 	const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
-	const menuAccessibilityLabel = useMemo(() => {
-		if (accessibilityLabel) return accessibilityLabel;
-		return typeof label === "string" ? label : "Menu";
-	}, [accessibilityLabel, label]);
-	const navigableItems = useMemo(() => parsed.items.map((item) => ({
-		disabled: item.disabled,
-		label: item.label,
-		value: item.id
-	})), [parsed.items]);
-	const filteredParsed = useMemo(() => {
-		if (!isSearchable || !resolvedSearchValue.trim()) return parsed;
-		return filterDropdownEntries(parsed, resolvedSearchValue);
-	}, [
-		isSearchable,
-		parsed,
-		resolvedSearchValue
-	]);
 	const { isOpen, closeDropdown, toggleDropdown } = useDropdown({
 		items: navigableItems,
 		open,
@@ -1472,6 +1684,11 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		getItemValue: (item) => item.value,
 		getItemText: (item) => typeof item.label === "string" ? item.label : item.value
 	});
+	const { menuAccessibilityLabel } = useDropdownAccessibility({
+		accessibilityLabel,
+		label,
+		open: isOpen
+	});
 	useEffect(() => {
 		if (!isOpen || contentPresentation !== "popover") return;
 		updatePosition(triggerRef);
@@ -1480,11 +1697,10 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		contentPresentation,
 		updatePosition
 	]);
-	useEffect(() => {
-		if (!isOpen) return;
-		AccessibilityInfo.announceForAccessibility(`${menuAccessibilityLabel} opened`);
-	}, [isOpen, menuAccessibilityLabel]);
-	const { restoreFocusAfterClose } = useOverlayFocusRestore({ triggerRef });
+	const { restoreFocusAfterClose } = useOverlayFocusRestore({
+		active: isOpen,
+		triggerRef
+	});
 	const closeAndFocusTrigger = useCallback(() => {
 		closeDropdown();
 		restoreFocusAfterClose();
@@ -1508,10 +1724,6 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 	const handleTriggerPress = useCallback(() => {
 		toggleDropdown();
 	}, [toggleDropdown]);
-	const handleSearchChange = useCallback((value) => {
-		if (searchValue === void 0) setUncontrolledSearchValue(value);
-		onSearch?.(value);
-	}, [onSearch, searchValue]);
 	const renderEntry = useCallback(({ item }) => {
 		if (item.type === "label") return /* @__PURE__ */ jsx(DropdownGroup, { label: item.props.children });
 		if (item.type === "separator") return /* @__PURE__ */ jsx(DropdownSeparator, {});
@@ -1526,71 +1738,82 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		return /* @__PURE__ */ jsx(DropdownItem, {
 			label: item.props.children,
 			value: item.props.value ?? item.id,
-			rootColor: color,
 			color: item.props.color,
 			icon: item.props.icon,
 			disabled: item.props.disabled,
 			textWrap: item.props.textWrap,
-			itemStyle,
-			textStyle,
 			onSelect: () => handleSelect(item)
 		});
-	}, [
-		color,
-		handleSelect,
-		itemStyle,
-		styles.emptyText,
-		textStyle
-	]);
-	const data = loading ? [{
-		type: "loading",
-		id: "loading",
-		props: { children: loadingText }
-	}] : isSearchable && filteredParsed.items.length === 0 ? [{
-		type: "empty",
-		id: "empty",
-		props: { children: empty ?? "No actions found" }
-	}] : filteredParsed.entries;
-	return /* @__PURE__ */ jsxs(View, {
-		style: [styles.root, style],
-		children: [/* @__PURE__ */ jsx(DropdownTrigger, {
-			asChild: Boolean(parsed.trigger),
-			label,
-			trigger: trigger ?? parsed.trigger,
-			icon,
-			arrowIcon,
-			showArrow,
+	}, [handleSelect, styles.emptyText]);
+	const resolvedSearchPlaceholder = parsed.searchProps?.placeholder ?? searchPlaceholder ?? (command || contentCommand ? "Type a command..." : "Search actions...");
+	const searchAccessibilityLabel = parsed.searchProps?.accessibilityLabel;
+	return /* @__PURE__ */ jsx(DropdownProvider, {
+		value: useMemo(() => ({
+			open: isOpen,
+			disabled,
+			loading,
 			color,
-			disabled: disabled || parsed.triggerProps?.disabled,
-			isOpen,
 			size,
-			triggerRef: setTriggerRef,
-			triggerStyle,
-			accessibilityLabel,
-			accessibilityHint,
-			onPress: handleTriggerPress
-		}), /* @__PURE__ */ jsx(DropdownContent, {
-			isOpen,
-			onClose: dismiss.requestClose,
-			color,
-			contentStyle: [contentStyle, contentStyleFromSlot],
-			accessibilityLabel: menuAccessibilityLabel,
 			presentation: contentPresentation,
 			position,
-			onFloatingLayout,
+			zIndex: dismiss.zIndex,
 			searchable: isSearchable,
 			searchValue: resolvedSearchValue,
-			searchPlaceholder: parsed.searchProps?.placeholder ?? searchPlaceholder ?? (command || contentCommand ? "Type a command..." : "Search actions..."),
-			searchAccessibilityLabel: parsed.searchProps?.accessibilityLabel,
+			searchPlaceholder: resolvedSearchPlaceholder,
+			searchAccessibilityLabel,
+			itemStyle,
+			textStyle,
+			requestClose: dismiss.requestClose,
+			requestOutsideClose: dismiss.requestOutsideClose,
+			toggle: handleTriggerPress,
 			onSearchChange: handleSearchChange,
-			children: /* @__PURE__ */ jsx(FlatList, {
-				data,
-				keyExtractor: (item) => item.id,
-				renderItem: renderEntry,
-				keyboardShouldPersistTaps: "handled",
-				removeClippedSubviews: data.length > 24
-			})
-		})]
+			onFloatingLayout
+		}), [
+			color,
+			contentPresentation,
+			disabled,
+			dismiss.zIndex,
+			dismiss.requestClose,
+			dismiss.requestOutsideClose,
+			handleSearchChange,
+			handleTriggerPress,
+			isOpen,
+			isSearchable,
+			itemStyle,
+			loading,
+			onFloatingLayout,
+			position,
+			resolvedSearchPlaceholder,
+			resolvedSearchValue,
+			searchAccessibilityLabel,
+			size,
+			textStyle
+		]),
+		children: /* @__PURE__ */ jsxs(View, {
+			style: [styles.root, style],
+			children: [/* @__PURE__ */ jsx(DropdownTrigger, {
+				asChild: Boolean(parsed.trigger),
+				label,
+				trigger: trigger ?? parsed.trigger,
+				icon,
+				arrowIcon,
+				showArrow,
+				triggerRef: setTriggerRef,
+				triggerStyle,
+				accessibilityLabel,
+				accessibilityHint
+			}), /* @__PURE__ */ jsx(DropdownContent, {
+				contentStyle: [contentStyle, contentStyleFromSlot],
+				accessibilityLabel: menuAccessibilityLabel,
+				children: /* @__PURE__ */ jsx(FlatList, {
+					data,
+					keyExtractor: (item) => item.id,
+					renderItem: renderEntry,
+					keyboardShouldPersistTaps: "handled",
+					removeClippedSubviews: data.length > 24
+				})
+			})]
+		})
 	});
 }
 DropdownRoot.displayName = "Dropdown";
@@ -1682,13 +1905,14 @@ const createStyles$14 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Modal/internal/ModalContext.tsx
-const ModalContext = createContext(void 0);
-ModalContext.displayName = "ModalContext";
+const ModalContext = createContext(null);
+const ModalProvider = ModalContext.Provider;
 const useModalContext = () => {
 	const context = useContext(ModalContext);
 	if (!context) throw new Error("Modal compound components must be used inside Modal");
 	return context;
 };
+ModalContext.displayName = "ModalContext";
 //#endregion
 //#region src/components/Modal/Close/ModalClose.tsx
 const ModalClose = ({ children, accessibilityLabel, style }) => {
@@ -1818,7 +2042,7 @@ const createStyles$11 = (theme) => StyleSheet.create({
 //#region src/components/Modal/Overlay/ModalOverlay.tsx
 const ModalOverlay = ({ children, overlayStyle }) => {
 	const styles = useThemeStyles(createStyles$11);
-	const { animation, animationProgress, closeOnOutsidePress, onClose, onOutsideClose, shouldRender } = useModalContext();
+	const { animation, animationProgress, closeOnOutsidePress, zIndex, onClose, onOutsideClose, shouldRender } = useModalContext();
 	const backdropStyle = animation === "none" ? void 0 : { opacity: animationProgress };
 	return /* @__PURE__ */ jsx(Modal$1, {
 		visible: shouldRender,
@@ -1826,7 +2050,11 @@ const ModalOverlay = ({ children, overlayStyle }) => {
 		animationType: "none",
 		onRequestClose: onClose,
 		children: /* @__PURE__ */ jsxs(View, {
-			style: [styles.overlay, overlayStyle],
+			style: [
+				styles.overlay,
+				Platform.OS === "web" && { zIndex },
+				overlayStyle
+			],
 			children: [/* @__PURE__ */ jsx(Animated.View, {
 				style: [styles.backdrop, backdropStyle],
 				children: /* @__PURE__ */ jsx(Pressable, {
@@ -1865,6 +2093,7 @@ const resolveDuration = (duration) => {
 const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale", duration, easing = "standard", closeOnOutsidePress = true, children }) => {
 	const initialOpen = open ?? defaultOpen;
 	const animationProgress = useRef(new Animated.Value(initialOpen ? 1 : 0));
+	const triggerRef = useRef(null);
 	const [shouldRender, setShouldRender] = useState(initialOpen);
 	const [reduceMotion, setReduceMotion] = useState(false);
 	const modal = useModal({
@@ -1873,6 +2102,15 @@ const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale
 		onOpenChange,
 		closeOnOutsidePress
 	});
+	const { restoreFocusAfterClose } = useOverlayFocusRestore({
+		active: modal.open,
+		triggerRef
+	});
+	const previousOpenRef = useRef(modal.open);
+	useEffect(() => {
+		if (previousOpenRef.current && !modal.open) restoreFocusAfterClose();
+		previousOpenRef.current = modal.open;
+	}, [modal.open, restoreFocusAfterClose]);
 	const dismiss = useOverlayDismiss({
 		id: modal.contentId,
 		active: modal.open,
@@ -1925,16 +2163,18 @@ const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale
 		modal.open,
 		shouldAnimate
 	]);
-	return /* @__PURE__ */ jsx(ModalContext.Provider, {
+	return /* @__PURE__ */ jsx(ModalProvider, {
 		value: {
 			animation,
 			animationProgress: animationProgress.current,
 			closeOnOutsidePress: modal.closeOnOutsidePress,
+			zIndex: dismiss.zIndex,
 			onClose: dismiss.requestClose,
 			onOutsideClose: dismiss.requestOutsideClose,
 			open: modal.open,
 			setOpen: modal.setOpen,
-			shouldRender
+			shouldRender,
+			triggerRef
 		},
 		children
 	});
@@ -1942,15 +2182,26 @@ const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale
 ModalRoot.displayName = "ModalRoot";
 //#endregion
 //#region src/components/Modal/Trigger/ModalTrigger.tsx
+const composeRefs = (...refs) => (node) => {
+	for (const ref of refs) {
+		if (typeof ref === "function") {
+			ref(node);
+			continue;
+		}
+		if (ref) ref.current = node;
+	}
+};
 const ModalTrigger = ({ children, asChild = false, disabled = false, accessibilityLabel, style, testID }) => {
 	const root = useModalContext();
 	const child = asChild && isValidElement(children) ? children : void 0;
+	const composedTriggerRef = child ? composeRefs(root.triggerRef, child.props.ref) : root.triggerRef;
 	const handlePress = (event) => {
 		if (disabled || child?.props.disabled) return;
 		child?.props.onPress?.(event);
 		root.setOpen(true);
 	};
 	if (child) return cloneElement(child, {
+		ref: composedTriggerRef,
 		onPress: handlePress,
 		accessibilityRole: child.props.accessibilityRole ?? "button",
 		accessibilityState: {
@@ -1963,6 +2214,7 @@ const ModalTrigger = ({ children, asChild = false, disabled = false, accessibili
 		style: child.props.style
 	});
 	return /* @__PURE__ */ jsx(Pressable, {
+		ref: root.triggerRef,
 		accessibilityRole: "button",
 		accessibilityState: {
 			expanded: root.open,
@@ -2132,7 +2384,7 @@ PortalProvider.displayName = "PortalProvider";
 //#endregion
 //#region src/components/Popover/Content/PopoverContent.styles.ts
 const styles = StyleSheet.create({
-	layer: { flex: 1 },
+	root: { flex: 1 },
 	backdrop: StyleSheet.absoluteFill,
 	content: { position: "absolute" }
 });
@@ -2164,7 +2416,7 @@ function PopoverContent({ children, style, ...contentProps }) {
 	const { theme } = useTheme();
 	const layerRef = useRef(null);
 	const themedStyles = useMemo(() => createPopoverContentStyles(theme), [theme]);
-	const { open, position, onFloatingLayout, updatePosition, setOpen, closeOnOutsidePress } = usePopoverContext("Popover.Content");
+	const { open, zIndex, position, onFloatingLayout, updatePosition, requestClose, requestOutsideClose, closeOnOutsidePress } = usePopoverContext("Popover.Content");
 	useEffect(() => {
 		if (!open) return;
 		requestAnimationFrame(() => {
@@ -2173,20 +2425,16 @@ function PopoverContent({ children, style, ...contentProps }) {
 	}, [open, updatePosition]);
 	return /* @__PURE__ */ jsx(Portal, {
 		visible: open,
-		onRequestClose: () => {
-			setOpen(false, { reason: "escape-key" });
-		},
+		onRequestClose: requestClose,
 		children: /* @__PURE__ */ jsxs(View, {
 			ref: layerRef,
 			pointerEvents: "box-none",
-			style: styles.layer,
+			style: [styles.root, { zIndex }],
 			children: [/* @__PURE__ */ jsx(Pressable, {
 				testID: "popover-backdrop",
 				accessibilityLabel: closeOnOutsidePress ? "Close popover" : void 0,
 				accessibilityRole: closeOnOutsidePress ? "button" : void 0,
-				onPress: closeOnOutsidePress ? () => {
-					setOpen(false, { reason: "outside-press" });
-				} : void 0,
+				onPress: closeOnOutsidePress ? requestOutsideClose : void 0,
 				style: styles.backdrop
 			}), /* @__PURE__ */ jsx(View, {
 				...contentProps,
@@ -2232,6 +2480,7 @@ function getNativePlacement(side, align) {
 function PopoverRoot({ children, open: openProp, defaultOpen = false, onOpenChange, side = "bottom", align = "center", sideOffset = 8, closeOnOutsidePress = true }) {
 	const triggerRef = useRef(null);
 	const anchorRef = useRef(null);
+	const overlayId = useId();
 	const getReferenceRef = useCallback(() => anchorRef.current ? anchorRef : triggerRef, []);
 	const openChangeDetailsRef = useRef({ reason: "programmatic" });
 	const [open, setOpenState] = useControllableState({
@@ -2241,11 +2490,30 @@ function PopoverRoot({ children, open: openProp, defaultOpen = false, onOpenChan
 			onOpenChange?.(nextOpen, openChangeDetailsRef.current);
 		}
 	});
+	const { restoreFocusAfterClose } = useOverlayFocusRestore({
+		active: open,
+		triggerRef
+	});
 	const { position, arrowPosition, placement, updatePosition: updateFloatingPosition, onFloatingLayout } = useNativeFloatingPosition(getNativePlacement(side, align), sideOffset);
 	const setOpen = useCallback((nextOpen, details) => {
 		openChangeDetailsRef.current = details;
 		setOpenState(nextOpen);
-	}, [setOpenState]);
+		if (!nextOpen) restoreFocusAfterClose();
+	}, [restoreFocusAfterClose, setOpenState]);
+	const dismiss = useOverlayDismiss({
+		id: overlayId,
+		active: open,
+		closeOnOutsidePress,
+		requestClose: () => {
+			setOpen(false, { reason: "escape-key" });
+		},
+		requestOutsideClose: () => {
+			setOpen(false, { reason: "outside-press" });
+		}
+	});
+	const updatePosition = useCallback((containerRef) => {
+		updateFloatingPosition(getReferenceRef(), containerRef);
+	}, [getReferenceRef, updateFloatingPosition]);
 	return /* @__PURE__ */ jsx(PopoverProvider, {
 		value: {
 			open,
@@ -2255,12 +2523,13 @@ function PopoverRoot({ children, open: openProp, defaultOpen = false, onOpenChan
 			side,
 			align,
 			placement,
+			zIndex: dismiss.zIndex,
 			position,
 			arrowPosition,
+			requestClose: dismiss.requestClose,
+			requestOutsideClose: dismiss.requestOutsideClose,
 			onFloatingLayout,
-			updatePosition: useCallback((containerRef) => {
-				updateFloatingPosition(getReferenceRef(), containerRef);
-			}, [getReferenceRef, updateFloatingPosition]),
+			updatePosition,
 			setOpen
 		},
 		children
@@ -2384,8 +2653,8 @@ const createStyles$10 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/primitives/Radio/Radio.tsx
-const nativePointerEventsNone$4 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
-const webPointerEventsNone$4 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
+const nativePointerEventsNone$3 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
+const webPointerEventsNone$3 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: disabledProp = false, required: requiredProp = false, size: sizeProp, color: colorProp, onCheckedChange, label, description, icon, error, accessibilityLabel, accessibilityHint, containerStyle, labelStyle, descriptionStyle, errorStyle, style, ...rest }, ref) => {
 	const { theme } = useTheme();
 	const styles = createStyles$10(theme);
@@ -2444,10 +2713,10 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 			onPress: handlePress,
 			style: resolvePressableStyle,
 			children: (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(View, {
-				...nativePointerEventsNone$4,
+				...nativePointerEventsNone$3,
 				style: [
 					styles.control,
-					webPointerEventsNone$4,
+					webPointerEventsNone$3,
 					{
 						width: radioSize.controlSize,
 						height: radioSize.controlSize,
@@ -2476,8 +2745,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					resolvedDisabled && styles.indicatorDisabled
 				] }))
 			}), (label || description) && /* @__PURE__ */ jsxs(View, {
-				...nativePointerEventsNone$4,
-				style: [styles.content, webPointerEventsNone$4],
+				...nativePointerEventsNone$3,
+				style: [styles.content, webPointerEventsNone$3],
 				children: [label && (typeof label === "string" ? /* @__PURE__ */ jsx(Text, {
 					style: [
 						styles.label,
@@ -2890,6 +3159,78 @@ RadioGroupRoot.displayName = "RadioGroup.Root";
 const RadioGroup = Object.assign(RadioGroupRoot, { Item: RadioGroupItem });
 RadioGroup.displayName = "RadioGroup";
 //#endregion
+//#region src/components/Select/Content/SelectContent.styles.ts
+const createContentStyles = (theme) => StyleSheet.create({
+	toolbar: {
+		minHeight: 52,
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		paddingHorizontal: theme.tokens.spacing[4],
+		borderBottomColor: theme.components.select.dropdown.separator.bg,
+		borderBottomWidth: 1
+	},
+	title: {
+		flex: 1,
+		marginHorizontal: theme.tokens.spacing[3],
+		color: theme.components.select.dropdown.fg,
+		fontFamily: theme.tokens.typography.family.medium,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md,
+		textAlign: "center"
+	},
+	toolbarAction: {
+		minWidth: 64,
+		minHeight: 44,
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	cancelText: {
+		color: theme.components.select.trigger.placeholder.fg,
+		fontFamily: theme.tokens.typography.family.medium,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md
+	},
+	doneText: {
+		color: theme.semantic.text.interactive,
+		fontFamily: theme.tokens.typography.family.medium,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md
+	},
+	list: { maxHeight: 420 },
+	listContent: {
+		paddingHorizontal: theme.tokens.spacing[2],
+		paddingVertical: theme.tokens.spacing[2]
+	},
+	empty: {
+		minHeight: 72,
+		alignItems: "center",
+		justifyContent: "center",
+		padding: theme.tokens.spacing[4]
+	},
+	emptyText: {
+		color: theme.components.select.dropdown.empty.fg,
+		fontFamily: theme.tokens.typography.family.regular,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md,
+		textAlign: "center"
+	},
+	loading: {
+		minHeight: 72,
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: theme.tokens.spacing[2],
+		padding: theme.tokens.spacing[4]
+	},
+	loadingText: {
+		color: theme.components.select.dropdown.fg,
+		fontFamily: theme.tokens.typography.family.regular,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md
+	}
+});
+//#endregion
 //#region src/components/Select/internal/types.ts
 const selectSlotName = Symbol("VelliraNativeSelectSlot");
 //#endregion
@@ -3017,6 +3358,33 @@ const parseSelectChildren = (children) => {
 	};
 };
 //#endregion
+//#region src/components/Select/internal/SelectContext.tsx
+const SelectContext = createContext(null);
+const useSelectContext = () => {
+	const context = useContext(SelectContext);
+	if (!context) throw new Error("Select compound components must be used inside Select");
+	return context;
+};
+//#endregion
+//#region src/components/Select/Empty/SelectEmpty.tsx
+const renderText$1 = (node, style) => {
+	if (typeof node === "string" || typeof node === "number") return /* @__PURE__ */ jsx(Text, {
+		style,
+		children: node
+	});
+	return node;
+};
+const SelectEmpty = createSelectSlot("empty", "Select.Empty");
+const SelectEmptyState = () => {
+	const styles = useThemeStyles(createContentStyles);
+	const { empty } = useSelectContext();
+	return /* @__PURE__ */ jsx(View, {
+		style: styles.empty,
+		children: renderText$1(empty, styles.emptyText)
+	});
+};
+SelectEmptyState.displayName = "Select.EmptyState";
+//#endregion
 //#region src/components/Select/Group/SelectGroup.styles.ts
 const createGroupStyles = (theme) => StyleSheet.create({
 	groupLabel: {
@@ -3100,24 +3468,6 @@ const SelectGroupActionRow = ({ label, selectLabel, selectedCount, itemCount, on
 SelectGroupLabelRow.displayName = "Select.GroupLabelRow";
 SelectGroupActionRow.displayName = "Select.GroupActionRow";
 //#endregion
-//#region src/components/Select/Group/SelectLabel.tsx
-const SelectLabel = createSelectSlot("label", "Select.Label");
-//#endregion
-//#region src/components/Select/Group/SelectSeparator.tsx
-const SelectSeparator = createSelectSlot("separator", "Select.Separator");
-const SelectSeparatorRow = () => {
-	return /* @__PURE__ */ jsx(View, { style: useThemeStyles(createGroupStyles).separator });
-};
-SelectSeparatorRow.displayName = "Select.SeparatorRow";
-//#endregion
-//#region src/components/Select/internal/SelectContext.tsx
-const SelectContext = createContext(null);
-const useSelectContext = () => {
-	const context = useContext(SelectContext);
-	if (!context) throw new Error("Select compound components must be used inside Select");
-	return context;
-};
-//#endregion
 //#region src/components/Select/Item/SelectItem.styles.ts
 const createItemStyles = (theme) => StyleSheet.create({
 	option: {
@@ -3269,14 +3619,29 @@ const SelectItemRow = ({ option, isSelected, isDisabled, optionStyle, onSelect }
 };
 SelectItemRow.displayName = "Select.ItemRow";
 //#endregion
-//#region src/components/Select/Item/SelectItemBadge.tsx
-const SelectItemBadge = createSelectSlot("itemBadge", "Select.ItemBadge");
-//#endregion
-//#region src/components/Select/Item/SelectItemDescription.tsx
-const SelectItemDescription = createSelectSlot("itemDescription", "Select.ItemDescription");
-//#endregion
-//#region src/components/Select/Item/SelectItemIcon.tsx
-const SelectItemIcon = createSelectSlot("itemIcon", "Select.ItemIcon");
+//#region src/components/Select/Loading/SelectLoading.tsx
+const renderText = (node, style) => {
+	if (typeof node === "string" || typeof node === "number") return /* @__PURE__ */ jsx(Text, {
+		style,
+		children: node
+	});
+	return node;
+};
+const SelectLoading = createSelectSlot("loading", "Select.Loading");
+const SelectLoadingState = () => {
+	const { theme } = useTheme();
+	const styles = useThemeStyles(createContentStyles);
+	const { loadingContent } = useSelectContext();
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles.loading,
+		children: [/* @__PURE__ */ jsx(ActivityIndicator, {
+			testID: "select-content-loading-indicator",
+			size: "small",
+			color: theme.components.select.dropdown.fg
+		}), renderText(loadingContent, styles.loadingText)]
+	});
+};
+SelectLoadingState.displayName = "Select.LoadingState";
 //#endregion
 //#region src/components/Select/Presentation/SelectPresentation.styles.ts
 const createPresentationStyles = (theme) => StyleSheet.create({
@@ -3350,7 +3715,7 @@ const SelectHandle = () => {
 SelectHandle.displayName = "Select.Handle";
 //#endregion
 //#region src/components/Select/Presentation/SelectModal.tsx
-const SelectModal = ({ visible, onClose, dismissOnBackdropPress, contentStyle, children }) => {
+const SelectModal = ({ visible, onClose, dismissOnBackdropPress, zIndex, contentStyle, children }) => {
 	const styles = useThemeStyles(createPresentationStyles);
 	return /* @__PURE__ */ jsx(Modal$1, {
 		transparent: true,
@@ -3358,7 +3723,11 @@ const SelectModal = ({ visible, onClose, dismissOnBackdropPress, contentStyle, c
 		animationType: "slide",
 		onRequestClose: onClose,
 		children: /* @__PURE__ */ jsxs(View, {
-			style: [styles.modalRoot, styles.modalPresentationRoot],
+			style: [
+				styles.modalRoot,
+				styles.modalPresentationRoot,
+				Platform.OS === "web" && { zIndex }
+			],
 			testID: "select-content-root",
 			children: [/* @__PURE__ */ jsx(SelectBackdrop, {
 				onClose,
@@ -3369,193 +3738,82 @@ const SelectModal = ({ visible, onClose, dismissOnBackdropPress, contentStyle, c
 					styles.modalPresentation,
 					contentStyle
 				],
-				testID: "select-modal",
-				children
-			})]
-		})
-	});
-};
-SelectModal.displayName = "Select.Modal";
-//#endregion
-//#region src/components/Select/Presentation/SelectPopover.tsx
-const SelectPopover = ({ visible, onClose, dismissOnBackdropPress, position, onFloatingLayout, matchTriggerWidth, triggerWidth, contentStyle, children }) => {
-	const styles = useThemeStyles(createPresentationStyles);
-	return /* @__PURE__ */ jsx(Modal$1, {
-		transparent: true,
-		visible,
-		animationType: "fade",
-		onRequestClose: onClose,
-		children: /* @__PURE__ */ jsxs(View, {
-			style: styles.modalRoot,
-			testID: "select-content-root",
-			children: [/* @__PURE__ */ jsx(SelectBackdrop, {
-				onClose,
-				dismissOnBackdropPress
-			}), /* @__PURE__ */ jsx(View, {
-				onLayout: onFloatingLayout,
-				style: [
-					styles.content,
-					styles.popover,
-					{
-						position: "absolute",
-						top: position.top,
-						left: position.left
-					},
-					matchTriggerWidth && triggerWidth ? { width: triggerWidth } : null,
-					contentStyle
-				],
-				testID: "select-popover",
-				children
-			})]
-		})
-	});
-};
-SelectPopover.displayName = "Select.Popover";
-//#endregion
-//#region src/components/Select/Presentation/SelectSheet.tsx
-const SelectSheet = ({ visible, onClose, dismissOnBackdropPress, contentStyle, children }) => {
-	const styles = useThemeStyles(createPresentationStyles);
-	return /* @__PURE__ */ jsx(Modal$1, {
-		transparent: true,
-		visible,
-		animationType: "slide",
-		onRequestClose: onClose,
-		children: /* @__PURE__ */ jsxs(View, {
-			style: [styles.modalRoot, styles.sheetRoot],
-			testID: "select-content-root",
-			children: [/* @__PURE__ */ jsx(SelectBackdrop, {
-				onClose,
-				dismissOnBackdropPress
-			}), /* @__PURE__ */ jsxs(View, {
-				style: [
-					styles.content,
-					styles.sheet,
-					contentStyle
-				],
-				testID: "select-sheet",
-				children: [/* @__PURE__ */ jsx(SelectHandle, {}), children]
-			})]
-		})
-	});
-};
-SelectSheet.displayName = "Select.Sheet";
-//#endregion
-//#region src/components/Select/Content/SelectContent.styles.ts
-const createContentStyles = (theme) => StyleSheet.create({
-	toolbar: {
-		minHeight: 52,
-		flexDirection: "row",
-		alignItems: "center",
-		justifyContent: "space-between",
-		paddingHorizontal: theme.tokens.spacing[4],
-		borderBottomColor: theme.components.select.dropdown.separator.bg,
-		borderBottomWidth: 1
-	},
-	title: {
-		flex: 1,
-		marginHorizontal: theme.tokens.spacing[3],
-		color: theme.components.select.dropdown.fg,
-		fontFamily: theme.tokens.typography.family.medium,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md,
-		textAlign: "center"
-	},
-	toolbarAction: {
-		minWidth: 64,
-		minHeight: 44,
-		alignItems: "center",
-		justifyContent: "center"
-	},
-	cancelText: {
-		color: theme.components.select.trigger.placeholder.fg,
-		fontFamily: theme.tokens.typography.family.medium,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md
-	},
-	doneText: {
-		color: theme.semantic.text.interactive,
-		fontFamily: theme.tokens.typography.family.medium,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md
-	},
-	list: { maxHeight: 420 },
-	listContent: {
-		paddingHorizontal: theme.tokens.spacing[2],
-		paddingVertical: theme.tokens.spacing[2]
-	},
-	empty: {
-		minHeight: 72,
-		alignItems: "center",
-		justifyContent: "center",
-		padding: theme.tokens.spacing[4]
-	},
-	emptyText: {
-		color: theme.components.select.dropdown.empty.fg,
-		fontFamily: theme.tokens.typography.family.regular,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md,
-		textAlign: "center"
-	},
-	loading: {
-		minHeight: 72,
-		flexDirection: "row",
-		alignItems: "center",
-		justifyContent: "center",
-		gap: theme.tokens.spacing[2],
-		padding: theme.tokens.spacing[4]
-	},
-	loadingText: {
-		color: theme.components.select.dropdown.fg,
-		fontFamily: theme.tokens.typography.family.regular,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md
-	}
-});
-//#endregion
-//#region src/components/Select/Content/SelectEmpty.tsx
-const renderText$1 = (node, style) => {
-	if (typeof node === "string" || typeof node === "number") return /* @__PURE__ */ jsx(Text, {
-		style,
-		children: node
-	});
-	return node;
-};
-const SelectEmpty = createSelectSlot("empty", "Select.Empty");
-const SelectEmptyState = () => {
-	const styles = useThemeStyles(createContentStyles);
-	const { empty } = useSelectContext();
-	return /* @__PURE__ */ jsx(View, {
-		style: styles.empty,
-		children: renderText$1(empty, styles.emptyText)
+				testID: "select-modal",
+				children
+			})]
+		})
 	});
 };
-SelectEmptyState.displayName = "Select.EmptyState";
+SelectModal.displayName = "Select.Modal";
 //#endregion
-//#region src/components/Select/Content/SelectLoading.tsx
-const renderText = (node, style) => {
-	if (typeof node === "string" || typeof node === "number") return /* @__PURE__ */ jsx(Text, {
-		style,
-		children: node
+//#region src/components/Select/Presentation/SelectPopover.tsx
+const SelectPopover = ({ visible, onClose, dismissOnBackdropPress, zIndex, position, onFloatingLayout, matchTriggerWidth, triggerWidth, contentStyle, children }) => {
+	const styles = useThemeStyles(createPresentationStyles);
+	return /* @__PURE__ */ jsx(Modal$1, {
+		transparent: true,
+		visible,
+		animationType: "fade",
+		onRequestClose: onClose,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: [styles.modalRoot, Platform.OS === "web" && { zIndex }],
+			testID: "select-content-root",
+			children: [/* @__PURE__ */ jsx(SelectBackdrop, {
+				onClose,
+				dismissOnBackdropPress
+			}), /* @__PURE__ */ jsx(View, {
+				onLayout: onFloatingLayout,
+				style: [
+					styles.content,
+					styles.popover,
+					{
+						position: "absolute",
+						top: position.top,
+						left: position.left
+					},
+					matchTriggerWidth && triggerWidth ? { width: triggerWidth } : null,
+					contentStyle
+				],
+				testID: "select-popover",
+				children
+			})]
+		})
 	});
-	return node;
 };
-const SelectLoading = createSelectSlot("loading", "Select.Loading");
-const SelectLoadingState = () => {
-	const { theme } = useTheme();
-	const styles = useThemeStyles(createContentStyles);
-	const { loadingContent } = useSelectContext();
-	return /* @__PURE__ */ jsxs(View, {
-		style: styles.loading,
-		children: [/* @__PURE__ */ jsx(ActivityIndicator, {
-			testID: "select-content-loading-indicator",
-			size: "small",
-			color: theme.components.select.dropdown.fg
-		}), renderText(loadingContent, styles.loadingText)]
+SelectPopover.displayName = "Select.Popover";
+//#endregion
+//#region src/components/Select/Presentation/SelectSheet.tsx
+const SelectSheet = ({ visible, onClose, dismissOnBackdropPress, zIndex, contentStyle, children }) => {
+	const styles = useThemeStyles(createPresentationStyles);
+	return /* @__PURE__ */ jsx(Modal$1, {
+		transparent: true,
+		visible,
+		animationType: "slide",
+		onRequestClose: onClose,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: [
+				styles.modalRoot,
+				styles.sheetRoot,
+				Platform.OS === "web" && { zIndex }
+			],
+			testID: "select-content-root",
+			children: [/* @__PURE__ */ jsx(SelectBackdrop, {
+				onClose,
+				dismissOnBackdropPress
+			}), /* @__PURE__ */ jsxs(View, {
+				style: [
+					styles.content,
+					styles.sheet,
+					contentStyle
+				],
+				testID: "select-sheet",
+				children: [/* @__PURE__ */ jsx(SelectHandle, {}), children]
+			})]
+		})
 	});
 };
-SelectLoadingState.displayName = "Select.LoadingState";
+SelectSheet.displayName = "Select.Sheet";
 //#endregion
-//#region src/components/Select/Content/SelectSearch.styles.ts
+//#region src/components/Select/Search/SelectSearch.styles.ts
 const createSearchStyles = (theme) => StyleSheet.create({
 	searchWrap: {
 		flexDirection: "row",
@@ -3597,7 +3855,7 @@ const createSearchStyles = (theme) => StyleSheet.create({
 	}
 });
 //#endregion
-//#region src/components/Select/Content/SelectSearch.tsx
+//#region src/components/Select/Search/SelectSearch.tsx
 const SelectSearch = createSelectSlot("search", "Select.Search");
 const SelectSearchField = () => {
 	const { theme } = useTheme();
@@ -3652,6 +3910,13 @@ const SelectSearchField = () => {
 };
 SelectSearchField.displayName = "Select.SearchField";
 //#endregion
+//#region src/components/Select/Separator/SelectSeparator.tsx
+const SelectSeparator = createSelectSlot("separator", "Select.Separator");
+const SelectSeparatorRow = () => {
+	return /* @__PURE__ */ jsx(View, { style: useThemeStyles(createGroupStyles).separator });
+};
+SelectSeparatorRow.displayName = "Select.SeparatorRow";
+//#endregion
 //#region src/components/Select/Content/SelectContent.tsx
 const SelectContent = createSelectSlot("content", "Select.Content");
 const SelectContentSurface = () => {
@@ -3659,7 +3924,7 @@ const SelectContentSurface = () => {
 	const wasOpenRef = useRef(false);
 	const [openCycle, setOpenCycle] = useState(0);
 	const context = useSelectContext();
-	const { isOpen, resolvedPresentation, position, onFloatingLayout, dismissOnBackdropPress, contentStyle, matchTriggerWidth, triggerWidth, resolvedLabel, closeContent, searchable, loading, filteredRows, selectedValues, selectedOptions, maxSelected, optionStyle, selectOption, selectGroup, itemHeight, selectedRowIndex, query } = context;
+	const { isOpen, resolvedPresentation, zIndex, position, onFloatingLayout, dismissOnBackdropPress, contentStyle, matchTriggerWidth, triggerWidth, resolvedLabel, closeContent, searchable, loading, filteredRows, selectedValues, selectedOptions, maxSelected, optionStyle, selectOption, selectGroup, itemHeight, selectedRowIndex, query } = context;
 	const initialScrollIndex = Boolean(context.virtual) && selectedRowIndex > 0 && query === "" ? selectedRowIndex : void 0;
 	useEffect(() => {
 		if (isOpen && !wasOpenRef.current) setOpenCycle((cycle) => cycle + 1);
@@ -3750,6 +4015,7 @@ const SelectContentSurface = () => {
 		visible: isOpen,
 		onClose: closeContent,
 		dismissOnBackdropPress,
+		zIndex,
 		contentStyle,
 		children: body
 	});
@@ -3758,6 +4024,7 @@ const SelectContentSurface = () => {
 		onClose: closeContent,
 		dismissOnBackdropPress,
 		position,
+		zIndex,
 		onFloatingLayout,
 		matchTriggerWidth,
 		triggerWidth,
@@ -3768,26 +4035,29 @@ const SelectContentSurface = () => {
 		visible: isOpen,
 		onClose: closeContent,
 		dismissOnBackdropPress,
+		zIndex,
 		contentStyle,
 		children: body
 	});
 };
 SelectContentSurface.displayName = "Select.ContentSurface";
 //#endregion
-//#region src/components/Select/internal/useSelectAccessibility.ts
-const useSelectAccessibility = ({ accessibilityLabel, accessibilityHint, label, description, error, invalid, placeholder, selectedLabel, hasFieldContext, fieldDescribedBy }) => {
-	const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : void 0;
-	const errorText = typeof error === "string" || typeof error === "number" ? String(error) : void 0;
-	return {
-		resolvedLabel: accessibilityLabel ?? label ?? selectedLabel ?? placeholder ?? "Select",
-		resolvedHint: accessibilityHint ?? (invalid && errorText ? errorText : descriptionText ? descriptionText : hasFieldContext && fieldDescribedBy ? "Opens a list of options" : void 0),
-		announce: (message) => {
-			AccessibilityInfo.announceForAccessibility?.(message);
-		}
-	};
-};
+//#region src/components/Select/Icon/SelectIcon.tsx
+const SelectIcon = createSelectSlot("icon", "Select.Icon");
+//#endregion
+//#region src/components/Select/ItemBadge/SelectItemBadge.tsx
+const SelectItemBadge = createSelectSlot("itemBadge", "Select.ItemBadge");
+//#endregion
+//#region src/components/Select/ItemDescription/SelectItemDescription.tsx
+const SelectItemDescription = createSelectSlot("itemDescription", "Select.ItemDescription");
+//#endregion
+//#region src/components/Select/ItemIcon/SelectItemIcon.tsx
+const SelectItemIcon = createSelectSlot("itemIcon", "Select.ItemIcon");
+//#endregion
+//#region src/components/Select/Label/SelectLabel.tsx
+const SelectLabel = createSelectSlot("label", "Select.Label");
 //#endregion
-//#region src/components/Select/internal/useSelectCollection.ts
+//#region src/hooks/behavior/select/useSelectCollection.ts
 const useSelectCollection = (children, optionsProp) => {
 	const parsedChildren = useMemo(() => parseSelectChildren(children), [children]);
 	const options = useMemo(() => [...optionsProp ?? [], ...parsedChildren.options], [optionsProp, parsedChildren.options]);
@@ -3808,7 +4078,7 @@ const useSelectCollection = (children, optionsProp) => {
 	};
 };
 //#endregion
-//#region src/components/Select/internal/useSelectSearch.ts
+//#region src/hooks/behavior/select/useSelectSearch.ts
 const useSelectSearch = ({ rows, isOpen, searchable, searchableFromChildren, onSearch, filterOptions, filter = defaultSelectFilter }) => {
 	const [query, setQuery] = useState("");
 	const shouldSearch = searchable ?? searchableFromChildren ?? Boolean(onSearch);
@@ -3863,8 +4133,18 @@ const useSelectSearch = ({ rows, isOpen, searchable, searchableFromChildren, onS
 	};
 };
 //#endregion
-//#region src/components/Select/Trigger/SelectIcon.tsx
-const SelectIcon = createSelectSlot("icon", "Select.Icon");
+//#region src/components/Select/internal/resolveSelectAccessibility.ts
+const resolveSelectAccessibility = ({ accessibilityLabel, accessibilityHint, label, description, error, invalid, placeholder, selectedLabel, hasFieldContext, fieldDescribedBy }) => {
+	const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : void 0;
+	const errorText = typeof error === "string" || typeof error === "number" ? String(error) : void 0;
+	return {
+		resolvedLabel: accessibilityLabel ?? label ?? selectedLabel ?? placeholder ?? "Select",
+		resolvedHint: accessibilityHint ?? (invalid && errorText ? errorText : descriptionText ? descriptionText : hasFieldContext && fieldDescribedBy ? "Opens a list of options" : void 0),
+		announce: (message) => {
+			AccessibilityInfo.announceForAccessibility?.(message);
+		}
+	};
+};
 //#endregion
 //#region src/components/Select/Trigger/SelectTrigger.styles.ts
 const createTriggerStyles = (theme) => StyleSheet.create({
@@ -3961,9 +4241,9 @@ const createTriggerStyles = (theme) => StyleSheet.create({
 //#endregion
 //#region src/components/Select/Trigger/SelectTrigger.tsx
 const SelectTriggerSlot = createSelectSlot("trigger", "Select.Trigger");
-const nativePointerEventsNone$3 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
+const nativePointerEventsNone$2 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
 const nativePointerEventsBoxNone = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
-const webPointerEventsNone$3 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
+const webPointerEventsNone$2 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const webPointerEventsBoxNone = Platform.OS === "web" ? { pointerEvents: "box-none" } : void 0;
 function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color = "primary", variant = "outline", disabled = false, required = false, hasError = false, hasValue = false, loading = false, clearable = false, startIcon, endIcon, prefix, suffix, accessibilityLabel, accessibilityHint, nativeID, accessibilityLabelledBy, ariaDescribedBy, triggerStyle, textStyle, onPress, onClear }) {
 	const { theme } = useTheme();
@@ -4058,8 +4338,8 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 			],
 			children: [
 				startIcon && /* @__PURE__ */ jsx(View, {
-					...nativePointerEventsNone$3,
-					style: [styles.startIcon, webPointerEventsNone$3],
+					...nativePointerEventsNone$2,
+					style: [styles.startIcon, webPointerEventsNone$2],
 					accessibilityElementsHidden: true,
 					importantForAccessibility: "no",
 					children: renderIcon(startIcon)
@@ -4081,8 +4361,8 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 					size: "small",
 					color: iconColor
 				}) : showClearButton ? null : endIcon ? /* @__PURE__ */ jsx(View, {
-					...nativePointerEventsNone$3,
-					style: [styles.endIcon, webPointerEventsNone$3],
+					...nativePointerEventsNone$2,
+					style: [styles.endIcon, webPointerEventsNone$2],
 					accessibilityElementsHidden: true,
 					importantForAccessibility: "no",
 					children: renderIcon(endIcon)
@@ -4121,9 +4401,6 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 }
 SelectTrigger.displayName = "SelectTrigger";
 //#endregion
-//#region src/components/Select/Trigger/SelectValue.tsx
-const SelectValue = createSelectSlot("value", "Select.Value");
-//#endregion
 //#region src/components/Select/Root/SelectRoot.tsx
 function SelectRoot(props) {
 	const { label, description, error, invalid = false, required = false, disabled = false, placeholder = "Select...", color = "primary", variant = "outline", size, open, defaultOpen, onOpenChange, clearable = false, searchable: searchableProp, searchPlaceholder, loading = false, loadingText = "Loading...", onSearch, filterOptions, filter, empty, startIcon, endIcon, prefix, suffix, renderValue, renderOption, closeOnSelect, maxSelected, presentation = "auto", placement = "bottom-start", offset = 8, matchTriggerWidth = false, dismissOnBackdropPress = true, virtual, options: optionsProp, children, style, triggerStyle, textStyle, contentStyle, optionStyle, searchStyle, accessibilityLabel, accessibilityHint, testID } = props;
@@ -4132,7 +4409,7 @@ function SelectRoot(props) {
 	const hasOwnField = Boolean(label || description || error);
 	const [triggerWidth, setTriggerWidth] = useState();
 	const triggerRef = useRef(null);
-	const { position, placement: resolvedPlacement, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
+	const { position, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
 	const searchInputRef = useRef(null);
 	const selectedFocusValueRef = useRef(void 0);
 	const resolvedPresentation = useOverlayPresentation(presentation);
@@ -4160,7 +4437,18 @@ function SelectRoot(props) {
 		defaultOpen,
 		onOpenChange
 	});
-	const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue ? [selectedValue] : [];
+	const { restoreFocusAfterClose } = useOverlayFocusRestore({
+		active: isOpen,
+		triggerRef
+	});
+	const closeAndFocusTrigger = useCallback(() => {
+		closeDropdown();
+		restoreFocusAfterClose();
+	}, [closeDropdown, restoreFocusAfterClose]);
+	const selectedValues = useMemo(() => {
+		if (props.multiple) return Array.isArray(selectedValue) ? selectedValue : [];
+		return typeof selectedValue === "string" && selectedValue ? [selectedValue] : [];
+	}, [props.multiple, selectedValue]);
 	const selectedOption = options.find((option) => selectedValues.includes(option.value));
 	const selectedOptions = options.filter((option) => selectedValues.includes(option.value));
 	const optionsByValue = useMemo(() => new Map(options.filter((option) => !option.disabled).map((option) => [option.value, option])), [options]);
@@ -4193,7 +4481,7 @@ function SelectRoot(props) {
 		selectedOption,
 		selectedOptions
 	]);
-	const { resolvedLabel, resolvedHint, announce } = useSelectAccessibility({
+	const { resolvedLabel, resolvedHint, announce } = resolveSelectAccessibility({
 		accessibilityLabel,
 		accessibilityHint,
 		label: !hasOwnField ? void 0 : label,
@@ -4210,22 +4498,28 @@ function SelectRoot(props) {
 		id: overlayId,
 		active: isOpen,
 		closeOnOutsidePress: dismissOnBackdropPress,
-		requestClose: closeDropdown
+		requestClose: closeAndFocusTrigger
 	});
 	const clearValue = () => {
 		selectedFocusValueRef.current = void 0;
 		selectValue("");
 		announce("Selection cleared");
 	};
-	const selectOption = (option) => {
+	const selectOption = useCallback((option) => {
 		if (option.disabled) return;
 		const selectedBefore = selectedValues.includes(option.value);
 		if (Boolean(props.multiple) && !selectedBefore && typeof maxSelected === "number" && selectedValues.length >= maxSelected) return;
 		selectedFocusValueRef.current = option.value;
 		selectValue(option.value);
 		announce(`${option.label} selected`);
-	};
-	const selectGroup = (values) => {
+	}, [
+		announce,
+		maxSelected,
+		props.multiple,
+		selectValue,
+		selectedValues
+	]);
+	const selectGroup = useCallback((values) => {
 		if (!props.multiple || values.length === 0) return;
 		const enabledValues = values.filter((value) => optionsByValue.has(value));
 		const selectedGroupValues = enabledValues.filter((value) => selectedValues.includes(value));
@@ -4246,32 +4540,32 @@ function SelectRoot(props) {
 		setSelectedValue(nextValues);
 		selectedFocusValueRef.current = nextValues.at(-1);
 		announce("Group selected");
-		if (closeOnSelect) closeDropdown();
-	};
-	const openContent = () => {
-		updatePosition(triggerRef);
-		openDropdown();
-	};
-	const contextValue = {
-		label,
-		description,
-		error,
-		placeholder,
+		if (closeOnSelect) closeAndFocusTrigger();
+	}, [
+		announce,
+		closeAndFocusTrigger,
+		closeOnSelect,
+		maxSelected,
+		optionsByValue,
+		props.multiple,
+		selectedValues,
+		setSelectedValue
+	]);
+	const resolvedSearchPlaceholder = searchPlaceholder ?? searchPlaceholderFromChildren ?? "Search...";
+	const resolvedEmpty = empty ?? emptyFromChildren ?? "Nothing found";
+	const resolvedLoadingContent = loadingFromChildren ?? loadingText;
+	const contextValue = useMemo(() => ({
 		color,
 		variant,
-		size: resolvedSize,
 		isOpen,
-		hasValue,
 		loading,
-		clearable,
 		searchable: shouldSearch,
 		multiple: Boolean(props.multiple),
 		maxSelected,
 		virtual,
 		resolvedLabel,
-		resolvedHint,
 		resolvedPresentation,
-		placement: resolvedPlacement,
+		zIndex: dismiss.zIndex,
 		position,
 		onFloatingLayout,
 		dismissOnBackdropPress,
@@ -4280,36 +4574,59 @@ function SelectRoot(props) {
 		selectedValues,
 		selectedOptions,
 		optionsByValue,
-		rows,
 		filteredRows,
 		selectedRowIndex,
 		itemHeight,
 		query,
-		searchPlaceholder: searchPlaceholder ?? searchPlaceholderFromChildren ?? "Search...",
+		searchPlaceholder: resolvedSearchPlaceholder,
 		searchInputRef,
-		empty: empty ?? emptyFromChildren ?? "Nothing found",
-		loadingContent: loadingFromChildren ?? loadingText,
+		empty: resolvedEmpty,
+		loadingContent: resolvedLoadingContent,
 		closeContent: dismiss.requestClose,
-		openContent,
-		clearValue,
 		selectOption,
 		selectGroup,
 		setQuery,
-		renderValue,
 		renderOption,
-		startIcon,
-		endIcon,
-		prefix,
-		suffix,
-		triggerStyle,
-		textStyle,
 		contentStyle,
 		optionStyle,
-		searchStyle,
-		fieldControlId: !hasOwnField ? field?.controlId : void 0,
-		fieldLabelId: !hasOwnField ? field?.labelId : void 0,
-		fieldDescribedBy: !hasOwnField ? field?.ariaDescribedBy : void 0
-	};
+		searchStyle
+	}), [
+		color,
+		variant,
+		isOpen,
+		loading,
+		shouldSearch,
+		props.multiple,
+		maxSelected,
+		virtual,
+		resolvedLabel,
+		resolvedPresentation,
+		dismiss.zIndex,
+		position,
+		onFloatingLayout,
+		dismissOnBackdropPress,
+		matchTriggerWidth,
+		triggerWidth,
+		selectedValues,
+		selectedOptions,
+		optionsByValue,
+		filteredRows,
+		selectedRowIndex,
+		itemHeight,
+		query,
+		resolvedSearchPlaceholder,
+		searchInputRef,
+		resolvedEmpty,
+		resolvedLoadingContent,
+		dismiss.requestClose,
+		selectOption,
+		selectGroup,
+		setQuery,
+		renderOption,
+		contentStyle,
+		optionStyle,
+		searchStyle
+	]);
 	const control = /* @__PURE__ */ jsx(SelectContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs(View, {
@@ -4360,6 +4677,9 @@ function SelectRoot(props) {
 }
 SelectRoot.displayName = "Select";
 //#endregion
+//#region src/components/Select/Value/SelectValue.tsx
+const SelectValue = createSelectSlot("value", "Select.Value");
+//#endregion
 //#region src/components/Select/Select.tsx
 const Select = Object.assign(SelectRoot, {
 	Trigger: SelectTriggerSlot,
@@ -4378,7 +4698,7 @@ const Select = Object.assign(SelectRoot, {
 	Loading: SelectLoading
 });
 //#endregion
-//#region src/components/Tabs/TabsContext.tsx
+//#region src/components/Tabs/internal/TabsContext.tsx
 const TabsContext = createContext(null);
 const TabsProvider = TabsContext.Provider;
 const useTabs = () => {
@@ -4441,8 +4761,8 @@ const COLLAPSED_SIZE = 8;
 const LINE_ANIMATION_DURATION = 360;
 const SURFACE_ANIMATION_DURATION = 220;
 const easing = Easing?.bezier?.(.22, 1, .36, 1) ?? ((value) => value);
-const nativePointerEventsNone$2 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
-const webPointerEventsNone$2 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
+const nativePointerEventsNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
+const webPointerEventsNone$1 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const animateValue = (value, toValue, duration) => Animated.timing(value, {
 	toValue,
 	duration,
@@ -4645,8 +4965,8 @@ const TabsIndicator = ({ children, style }) => {
 	return /* @__PURE__ */ jsx(Animated.View, {
 		accessibilityElementsHidden: true,
 		importantForAccessibility: "no-hide-descendants",
-		...nativePointerEventsNone$2,
-		style: [indicatorStyle, webPointerEventsNone$2],
+		...nativePointerEventsNone$1,
+		style: [indicatorStyle, webPointerEventsNone$1],
 		children
 	});
 };
@@ -5148,13 +5468,45 @@ const useTooltipContext = () => {
 };
 TooltipContext.displayName = "TooltipContext";
 //#endregion
+//#region src/components/Tooltip/Arrow/TooltipArrow.tsx
+function TooltipArrow() {
+	const { theme } = useTheme();
+	const tooltip = useTooltipContext();
+	const size = theme.components.tooltip.arrow.size;
+	const side = tooltip.placement.split("-")[0];
+	const staticSide = {
+		top: "bottom",
+		right: "left",
+		bottom: "top",
+		left: "right"
+	}[side];
+	const crossAxisStyle = side === "left" || side === "right" ? {
+		top: tooltip.arrowPosition.top ?? 0,
+		marginTop: -size / 2
+	} : {
+		left: tooltip.arrowPosition.left ?? 0,
+		marginLeft: -size / 2
+	};
+	return /* @__PURE__ */ jsx(View, {
+		pointerEvents: "none",
+		style: {
+			position: "absolute",
+			width: size,
+			height: size,
+			backgroundColor: theme.components.tooltip.arrow.bg,
+			transform: [{ rotate: "45deg" }],
+			[staticSide]: -size / 2,
+			...crossAxisStyle
+		}
+	});
+}
+//#endregion
 //#region src/components/Tooltip/Tooltip.styles.ts
 const createStyles$3 = (theme) => StyleSheet.create({
 	root: { alignSelf: "flex-start" },
 	overlay: { ...StyleSheet.absoluteFill },
 	bubble: {
 		position: "absolute",
-		zIndex: 1e3,
 		maxWidth: theme.components.tooltip.content.maxWidth,
 		paddingHorizontal: theme.components.tooltip.content.paddingX,
 		paddingVertical: theme.components.tooltip.content.paddingY,
@@ -5187,8 +5539,6 @@ const createStyles$3 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Tooltip/Content/TooltipContent.tsx
-const nativePointerEventsNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
-const webPointerEventsNone$1 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const TooltipContent = ({ children, forceMount = false, withArrow = false, style, textStyle }) => {
 	const styles = useThemeStyles(createStyles$3);
 	const tooltip = useTooltipContext();
@@ -5196,13 +5546,13 @@ const TooltipContent = ({ children, forceMount = false, withArrow = false, style
 	if (!forceMount && !visible) return null;
 	const bubble = /* @__PURE__ */ jsxs(View, {
 		nativeID: tooltip.contentId,
-		...nativePointerEventsNone$1,
+		pointerEvents: "none",
 		style: [
 			styles.bubble,
-			webPointerEventsNone$1,
 			{
 				top: tooltip.position.top,
-				left: tooltip.position.left
+				left: tooltip.position.left,
+				zIndex: tooltip.zIndex
 			},
 			!visible && { display: "none" },
 			style
@@ -5211,7 +5561,7 @@ const TooltipContent = ({ children, forceMount = false, withArrow = false, style
 		children: [Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx(Text, {
 			style: [styles.text, textStyle],
 			children: child
-		}) : child), withArrow && /* @__PURE__ */ jsx(InternalArrow, {})]
+		}) : child), withArrow && /* @__PURE__ */ jsx(TooltipArrow, {})]
 	});
 	if (!visible) return bubble;
 	return /* @__PURE__ */ jsx(Modal$1, {
@@ -5227,39 +5577,8 @@ const TooltipContent = ({ children, forceMount = false, withArrow = false, style
 	});
 };
 TooltipContent.displayName = "Tooltip.Content";
-function InternalArrow() {
-	const { theme } = useTheme();
-	const tooltip = useTooltipContext();
-	const size = theme.components.tooltip.arrow.size;
-	const side = tooltip.placement.split("-")[0];
-	const staticSide = {
-		top: "bottom",
-		right: "left",
-		bottom: "top",
-		left: "right"
-	}[side];
-	const crossAxisStyle = side === "left" || side === "right" ? {
-		top: tooltip.arrowPosition.top ?? 0,
-		marginTop: -size / 2
-	} : {
-		left: tooltip.arrowPosition.left ?? 0,
-		marginLeft: -size / 2
-	};
-	return /* @__PURE__ */ jsx(View, {
-		...nativePointerEventsNone$1,
-		style: [{
-			position: "absolute",
-			width: size,
-			height: size,
-			backgroundColor: theme.components.tooltip.arrow.bg,
-			transform: [{ rotate: "45deg" }],
-			[staticSide]: -size / 2,
-			...crossAxisStyle
-		}, webPointerEventsNone$1]
-	});
-}
 //#endregion
-//#region src/components/Tooltip/internal/useTooltipDelay.ts
+//#region src/components/Tooltip/internal/resolveTooltipDelay.ts
 const resolveTooltipDelay = (delay) => {
 	if (typeof delay === "number") return {
 		open: delay,
@@ -5348,6 +5667,7 @@ const TooltipRoot = ({ children, open: openProp, defaultOpen = false, onOpenChan
 			setOpen,
 			show,
 			hide,
+			zIndex: dismiss.zIndex,
 			requestClose: dismiss.requestClose,
 			requestOutsideClose: dismiss.requestOutsideClose,
 			onFloatingLayout
@@ -5355,6 +5675,7 @@ const TooltipRoot = ({ children, open: openProp, defaultOpen = false, onOpenChan
 			arrowPosition,
 			contentId,
 			disabled,
+			dismiss.zIndex,
 			dismiss.requestClose,
 			dismiss.requestOutsideClose,
 			hide,