@tamagui/toast 2.7.7 → 3.0.0-beta.643.1

package/dist/jsx/ToastComposable.mjs

@@ -1,7 +1,7 @@
+import { Theme, View, createRefComponent, createStyledContext, createStyledHOC, styled, useConfiguration, useEvent, useThemeName } from "@tamagui/core";
 import { AnimatePresence } from "@tamagui/animate-presence";
 import { isWeb } from "@tamagui/constants";
 import { getGestureHandler } from "@tamagui/native";
-import { createStyledContext, styled, Theme, useConfiguration, useEvent, useThemeName, View } from "@tamagui/core";
 import { withStaticProperties } from "@tamagui/helpers";
 import { Portal } from "@tamagui/portal";
 import { XStack, YStack } from "@tamagui/stacks";
@@ -14,6 +14,7 @@ import { useToastAnimations } from "./useToastAnimations.mjs";
 import { useReducedMotion } from "./useReducedMotion.mjs";
 import { DefaultCloseIcon, ToastActionFrame, ToastCloseFrame, ToastItemFrame, ToastPositionWrapper } from "./ToastItemFrame.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+
 const VISIBLE_TOASTS_AMOUNT = 4;
 const VIEWPORT_OFFSET = 16;
 const TOAST_GAP = 14;
@@ -24,885 +25,782 @@ const DEFAULT_HOTKEY = ["altKey", "KeyT"];
 const ToastContext = createStyledContext({}, "Toast__");
 const useToastContextValue = ToastContext.useStyledContext;
 function hasToastContext(ctx) {
-  return !!ctx && Array.isArray(ctx.toasts) && typeof ctx.setToastHeight === "function" && typeof ctx.removeToast === "function";
+	return !!ctx && Array.isArray(ctx.toasts) && typeof ctx.setToastHeight === "function" && typeof ctx.removeToast === "function";
 }
 function useToastContext(consumerName) {
-  const ctx = useToastContextValue();
-  if (!hasToastContext(ctx)) {
-    throw new Error(`\`${consumerName}\` must be used within \`Toast\``);
-  }
-  return ctx;
+	const ctx = useToastContextValue();
+	if (!hasToastContext(ctx)) {
+		throw new Error(`\`${consumerName}\` must be used within \`Toast\``);
+	}
+	return ctx;
 }
 const ToastItemContext = React.createContext(null);
 function useToastItemContext() {
-  const ctx = React.useContext(ToastItemContext);
-  if (!ctx) {
-    throw new Error("useToastItemContext must be used within Toast.Item or Toast.List");
-  }
-  return ctx;
+	const ctx = React.useContext(ToastItemContext);
+	if (!ctx) {
+		throw new Error("useToastItemContext must be used within Toast.Item or Toast.List");
+	}
+	return ctx;
 }
 function resolveSwipeDirection(direction, position) {
-  if (direction !== "auto") return direction;
-  const [yPosition, xPosition] = position.split("-");
-  if (!isWeb) {
-    return yPosition === "top" ? "up" : "down";
-  }
-  if (xPosition === "left") return "left";
-  if (xPosition === "right") return "right";
-  return "horizontal";
+	if (direction !== "auto") return direction;
+	const [yPosition, xPosition] = position.split("-");
+	if (!isWeb) {
+		return yPosition === "top" ? "up" : "down";
+	}
+	if (xPosition === "left") return "left";
+	if (xPosition === "right") return "right";
+	return "horizontal";
 }
-const ToastRoot = React.forwardRef(function ToastRoot2(props, _ref) {
-  const {
-    children,
-    position = "bottom-right",
-    duration = TOAST_LIFETIME,
-    gap = TOAST_GAP,
-    visibleToasts = VISIBLE_TOASTS_AMOUNT,
-    swipeDirection: swipeDirectionProp = "auto",
-    swipeThreshold = 50,
-    toastHeight = FIXED_TOAST_HEIGHT,
-    closeButton = false,
-    expand = false,
-    theme: themeProp,
-    reducedMotion: reducedMotionProp,
-    native = false,
-    burntOptions,
-    notificationOptions,
-    icons
-  } = props;
-  const reducedMotion = useReducedMotion(reducedMotionProp);
-  const [toasts, setToasts] = React.useState([]);
-  const [heights, setHeights] = React.useState({});
-  const [localExpanded, setExpanded] = React.useState(false);
-  const expanded = expand || localExpanded;
-  const [interacting, setInteracting] = React.useState(false);
-  const heightsLockedRef = React.useRef(false);
-  const prevExpandedRef = React.useRef(expanded);
-  React.useLayoutEffect(() => {
-    if (prevExpandedRef.current !== expanded) {
-      heightsLockedRef.current = true;
-      prevExpandedRef.current = expanded;
-    }
-    const timer = setTimeout(() => {
-      heightsLockedRef.current = false;
-    }, 350);
-    return () => clearTimeout(timer);
-  }, [expanded]);
-  const setToastHeight = React.useCallback((toastId, height) => {
-    if (heightsLockedRef.current) return;
-    const rounded = Math.round(height);
-    setHeights(prev => {
-      const existing = prev[toastId];
-      if (existing != null && Math.abs(existing - rounded) <= 2) return prev;
-      return {
-        ...prev,
-        [toastId]: rounded
-      };
-    });
-  }, []);
-  const removeToastHeight = React.useCallback(toastId => {
-    setHeights(prev => {
-      if (!(toastId in prev)) return prev;
-      const next = {
-        ...prev
-      };
-      delete next[toastId];
-      return next;
-    });
-  }, []);
-  const dismissCooldownRef = React.useRef(false);
-  const dismissCooldownTimerRef = React.useRef(null);
-  const triggerDismissCooldown = React.useCallback(() => {
-    dismissCooldownRef.current = true;
-    if (dismissCooldownTimerRef.current) {
-      clearTimeout(dismissCooldownTimerRef.current);
-    }
-    dismissCooldownTimerRef.current = setTimeout(() => {
-      dismissCooldownRef.current = false;
-    }, 800);
-  }, []);
-  const isInDismissCooldown = React.useCallback(() => dismissCooldownRef.current, []);
-  const burntOptionsRef = React.useRef(burntOptions);
-  const notificationOptionsRef = React.useRef(notificationOptions);
-  React.useEffect(() => {
-    burntOptionsRef.current = burntOptions;
-  }, [burntOptions]);
-  React.useEffect(() => {
-    notificationOptionsRef.current = notificationOptions;
-  }, [notificationOptions]);
-  React.useEffect(() => {
-    return ToastState.subscribe(toast => {
-      if (toast.dismiss) {
-        setToasts(toasts2 => toasts2.map(t => t.id === toast.id ? {
-          ...t,
-          delete: true
-        } : t));
-        return;
-      }
-      if (native) {
-        const handled = dispatchNativeToast(toast, {
-          duration,
-          burntOptions: burntOptionsRef.current,
-          notificationOptions: notificationOptionsRef.current
-        });
-        if (handled) return;
-      }
-      setToasts(toasts2 => {
-        const idx = toasts2.findIndex(t => t.id === toast.id);
-        if (idx !== -1) {
-          return [...toasts2.slice(0, idx), {
-            ...toasts2[idx],
-            ...toast
-          }, ...toasts2.slice(idx + 1)];
-        }
-        return [toast, ...toasts2];
-      });
-    });
-  }, [native, duration]);
-  const prevToastCountRef = React.useRef(toasts.length);
-  React.useEffect(() => {
-    const prevCount = prevToastCountRef.current;
-    prevToastCountRef.current = toasts.length;
-    if (toasts.length <= 1 && !dismissCooldownRef.current) {
-      setExpanded(false);
-    } else if (toasts.length > prevCount && expanded) {
-      setExpanded(false);
-    }
-  }, [toasts.length, expanded]);
-  const removeToast = React.useCallback(toastToRemove => {
-    setToasts(toasts2 => {
-      if (!toasts2.find(t => t.id === toastToRemove.id)?.delete) {
-        ToastState.dismiss(toastToRemove.id);
-      }
-      return toasts2.filter(({
-        id
-      }) => id !== toastToRemove.id);
-    });
-  }, []);
-  const swipeDirection = resolveSwipeDirection(swipeDirectionProp, position);
-  const currentTheme = useThemeName();
-  const resolvedTheme = themeProp === "system" || !themeProp ? currentTheme?.includes("dark") ? "dark" : "light" : themeProp;
-  const contextValue = {
-    toasts,
-    heights,
-    setToastHeight,
-    removeToastHeight,
-    expanded,
-    setExpanded,
-    interacting,
-    setInteracting,
-    triggerDismissCooldown,
-    isInDismissCooldown,
-    removeToast,
-    position,
-    duration,
-    gap,
-    visibleToasts,
-    swipeDirection,
-    swipeThreshold,
-    toastHeight,
-    closeButton,
-    reducedMotion,
-    native,
-    burntOptions,
-    notificationOptions,
-    icons
-  };
-  return /* @__PURE__ */jsx(ToastContext.Provider, {
-    ...contextValue,
-    children: /* @__PURE__ */jsx(Theme, {
-      name: resolvedTheme,
-      children
-    })
-  });
+const ToastRoot = createRefComponent(function ToastRoot2(props, _ref) {
+	const { children, toasterId, position = "bottom-right", duration = TOAST_LIFETIME, gap = TOAST_GAP, visibleToasts = VISIBLE_TOASTS_AMOUNT, swipeDirection: swipeDirectionProp = "auto", swipeThreshold = 50, toastHeight = FIXED_TOAST_HEIGHT, closeButton = false, expand = false, theme: themeProp, reducedMotion: reducedMotionProp, native = false, burntOptions, notificationOptions, icons } = props;
+	const reducedMotion = useReducedMotion(reducedMotionProp);
+	const [toasts, setToasts] = React.useState([]);
+	const [heights, setHeights] = React.useState({});
+	const [localExpanded, setExpanded] = React.useState(false);
+	const expanded = expand || localExpanded;
+	const [interacting, setInteracting] = React.useState(false);
+	const heightsLockedRef = React.useRef(false);
+	const prevExpandedRef = React.useRef(expanded);
+	React.useLayoutEffect(() => {
+		if (prevExpandedRef.current !== expanded) {
+			heightsLockedRef.current = true;
+			prevExpandedRef.current = expanded;
+		}
+		const timer = setTimeout(() => {
+			heightsLockedRef.current = false;
+		}, 350);
+		return () => clearTimeout(timer);
+	}, [expanded]);
+	const setToastHeight = React.useCallback((toastId, height) => {
+		if (heightsLockedRef.current) return;
+		const rounded = Math.round(height);
+		setHeights((prev) => {
+			const existing = prev[toastId];
+			if (existing != null && Math.abs(existing - rounded) <= 2) return prev;
+			return {
+				...prev,
+				[toastId]: rounded
+			};
+		});
+	}, []);
+	const removeToastHeight = React.useCallback((toastId) => {
+		setHeights((prev) => {
+			if (!(toastId in prev)) return prev;
+			const next = { ...prev };
+			delete next[toastId];
+			return next;
+		});
+	}, []);
+	const dismissCooldownRef = React.useRef(false);
+	const dismissCooldownTimerRef = React.useRef(null);
+	const triggerDismissCooldown = React.useCallback(() => {
+		dismissCooldownRef.current = true;
+		if (dismissCooldownTimerRef.current) {
+			clearTimeout(dismissCooldownTimerRef.current);
+		}
+		dismissCooldownTimerRef.current = setTimeout(() => {
+			dismissCooldownRef.current = false;
+		}, 800);
+	}, []);
+	const isInDismissCooldown = React.useCallback(() => dismissCooldownRef.current, []);
+	const burntOptionsRef = React.useRef(burntOptions);
+	const notificationOptionsRef = React.useRef(notificationOptions);
+	React.useEffect(() => {
+		burntOptionsRef.current = burntOptions;
+	}, [burntOptions]);
+	React.useEffect(() => {
+		notificationOptionsRef.current = notificationOptions;
+	}, [notificationOptions]);
+	React.useEffect(() => {
+		return ToastState.subscribe((toast) => {
+			if (toast.dismiss) {
+				setToasts((toasts2) => toasts2.map((t) => t.id === toast.id ? {
+					...t,
+					delete: true
+				} : t));
+				return;
+			}
+			if (toast.toasterId !== toasterId) {
+				return;
+			}
+			if (native) {
+				const handled = dispatchNativeToast(toast, {
+					duration,
+					burntOptions: burntOptionsRef.current,
+					notificationOptions: notificationOptionsRef.current
+				});
+				if (handled) return;
+			}
+			setToasts((toasts2) => {
+				const idx = toasts2.findIndex((t) => t.id === toast.id);
+				if (idx !== -1) {
+					return [
+						...toasts2.slice(0, idx),
+						{
+							...toasts2[idx],
+							...toast
+						},
+						...toasts2.slice(idx + 1)
+					];
+				}
+				return [toast, ...toasts2];
+			});
+		});
+	}, [
+		native,
+		duration,
+		toasterId
+	]);
+	const prevToastCountRef = React.useRef(toasts.length);
+	React.useEffect(() => {
+		const prevCount = prevToastCountRef.current;
+		prevToastCountRef.current = toasts.length;
+		if (toasts.length <= 1 && !dismissCooldownRef.current) {
+			setExpanded(false);
+		} else if (toasts.length > prevCount && expanded) {
+			setExpanded(false);
+		}
+	}, [toasts.length, expanded]);
+	const removeToast = React.useCallback((toastToRemove) => {
+		setToasts((toasts2) => {
+			if (!toasts2.find((t) => t.id === toastToRemove.id)?.delete) {
+				ToastState.dismiss(toastToRemove.id);
+			}
+			return toasts2.filter(({ id }) => id !== toastToRemove.id);
+		});
+	}, []);
+	const swipeDirection = resolveSwipeDirection(swipeDirectionProp, position);
+	const currentTheme = useThemeName();
+	const resolvedTheme = themeProp === "system" || !themeProp ? currentTheme?.includes("dark") ? "dark" : "light" : themeProp;
+	const contextValue = {
+		toasts,
+		heights,
+		setToastHeight,
+		removeToastHeight,
+		expanded,
+		setExpanded,
+		interacting,
+		setInteracting,
+		triggerDismissCooldown,
+		isInDismissCooldown,
+		removeToast,
+		position,
+		duration,
+		gap,
+		visibleToasts,
+		swipeDirection,
+		swipeThreshold,
+		toastHeight,
+		closeButton,
+		reducedMotion,
+		native,
+		burntOptions,
+		notificationOptions,
+		icons
+	};
+	return /* @__PURE__ */ jsx(ToastContext.Provider, {
+		...contextValue,
+		children: /* @__PURE__ */ jsx(Theme, {
+			name: resolvedTheme,
+			children
+		})
+	});
 });
 const ToastViewportFrame = styled(View, {
-  name: "ToastViewport",
-  variants: {
-    unstyled: {
-      false: {
-        position: isWeb ? "fixed" : "absolute",
-        zIndex: 1e5,
-        pointerEvents: "box-none",
-        maxWidth: "100%",
-        ...(isWeb && {
-          width: 356
-        }),
-        minHeight: 1
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "ToastViewport",
+	position: isWeb ? "fixed" : "absolute",
+	zIndex: 1e5,
+	pointerEvents: "box-none",
+	maxWidth: "100%",
+	...isWeb && { width: 356 },
+	minHeight: 1
 });
-const ToastViewport = ToastViewportFrame.styleable(function ToastViewport2(props, ref) {
-  const {
-    offset = VIEWPORT_OFFSET,
-    hotkey = DEFAULT_HOTKEY,
-    label = "Notifications",
-    portalToRoot = true,
-    portalZIndex = Number.MAX_SAFE_INTEGER,
-    children,
-    ...rest
-  } = props;
-  const ctx = useToastContext("Toast.Viewport");
-  const listRef = React.useRef(null);
-  const hoverTimeoutRef = React.useRef(null);
-  const hoverCooldownRef = React.useRef(false);
-  const deferredCollapseRef = React.useRef(null);
-  const mouseInsideRef = React.useRef(false);
-  const [yPosition, xPosition] = ctx.position.split("-");
-  const {
-    insets: safeInsets
-  } = useConfiguration();
-  const offsetStyles = React.useMemo(() => {
-    const styles = {};
-    const defaultOffset = typeof offset === "number" ? offset : VIEWPORT_OFFSET;
-    const offsetObj = typeof offset === "object" ? offset : {
-      top: defaultOffset,
-      right: defaultOffset,
-      bottom: defaultOffset,
-      left: defaultOffset
-    };
-    const safeTop = safeInsets?.top ?? 0;
-    const safeBottom = safeInsets?.bottom ?? 0;
-    const topOffset = safeTop > 0 ? safeTop : offsetObj.top ?? defaultOffset;
-    const bottomOffset = safeBottom > 0 ? safeBottom : offsetObj.bottom ?? defaultOffset;
-    if (yPosition === "top") styles.top = topOffset;else styles.bottom = bottomOffset;
-    if (isWeb) {
-      if (xPosition === "left") styles.left = offsetObj.left ?? defaultOffset;else if (xPosition === "right") styles.right = offsetObj.right ?? defaultOffset;else {
-        styles.left = "50%";
-        styles.transform = "translateX(-50%)";
-      }
-    } else {
-      styles.left = offsetObj.left ?? defaultOffset;
-      styles.right = offsetObj.right ?? defaultOffset;
-    }
-    return styles;
-  }, [offset, yPosition, xPosition]);
-  React.useEffect(() => {
-    if (!isWeb) return;
-    const handleKeyDown = event => {
-      const isHotkeyPressed = hotkey.length > 0 && hotkey.every(key => event[key] || event.code === key);
-      if (isHotkeyPressed) {
-        ctx.setExpanded(true);
-        listRef.current?.focus();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [hotkey]);
-  if (ctx.toasts.length === 0) return null;
-  const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
-  const content = /* @__PURE__ */jsx(ToastViewportFrame, {
-    ref: listRef,
-    "aria-label": `${label} ${hotkeyLabel}`,
-    tabIndex: -1,
-    "aria-live": "polite",
-    style: offsetStyles,
-    "data-y-position": yPosition,
-    "data-x-position": xPosition,
-    ...(isWeb ? {
-      onMouseEnter: () => {
-        mouseInsideRef.current = true;
-        if (deferredCollapseRef.current) {
-          clearTimeout(deferredCollapseRef.current);
-          deferredCollapseRef.current = null;
-        }
-        if (ctx.toasts.length > 1 && !ctx.interacting && !hoverCooldownRef.current) {
-          hoverTimeoutRef.current = setTimeout(() => ctx.setExpanded(true), 50);
-        }
-      },
-      onMouseLeave: () => {
-        mouseInsideRef.current = false;
-        if (hoverTimeoutRef.current) {
-          clearTimeout(hoverTimeoutRef.current);
-          hoverTimeoutRef.current = null;
-        }
-        if (!ctx.interacting && !ctx.isInDismissCooldown()) {
-          ctx.setExpanded(false);
-        } else if (ctx.isInDismissCooldown()) {
-          if (deferredCollapseRef.current) {
-            clearTimeout(deferredCollapseRef.current);
-          }
-          deferredCollapseRef.current = setTimeout(() => {
-            deferredCollapseRef.current = null;
-            if (!mouseInsideRef.current) {
-              ctx.setExpanded(false);
-            }
-          }, 1200);
-        }
-      },
-      onPointerDown: () => {
-        if (hoverTimeoutRef.current) {
-          clearTimeout(hoverTimeoutRef.current);
-          hoverTimeoutRef.current = null;
-        }
-        ctx.setInteracting(true);
-      },
-      onPointerUp: () => ctx.setInteracting(false),
-      onPointerCancel: () => ctx.setInteracting(false)
-    } : {
-      onPress: () => {
-        if (ctx.toasts.length > 1) {
-          ctx.setExpanded(prev => !prev);
-        }
-      }
-    }),
-    ...(isWeb && {
-      onFocus: event => {
-        if (!event.currentTarget.contains(event.relatedTarget)) {
-          if (ctx.toasts.length > 1) {
-            ctx.setExpanded(true);
-          }
-          ctx.setInteracting(true);
-        }
-      },
-      onBlur: event => {
-        if (!event.currentTarget.contains(event.relatedTarget)) {
-          ctx.setInteracting(false);
-          if (!ctx.isInDismissCooldown()) {
-            ctx.setExpanded(false);
-          }
-        }
-      }
-    }),
-    ...rest,
-    children
-  });
-  if (portalToRoot) {
-    return /* @__PURE__ */jsx(Portal, {
-      zIndex: portalZIndex,
-      children: /* @__PURE__ */jsx(ToastContext.Provider, {
-        ...ctx,
-        children: content
-      })
-    });
-  }
-  return content;
+const ToastViewport = createStyledHOC(ToastViewportFrame, function ToastViewport2(props, ref) {
+	const { offset = VIEWPORT_OFFSET, hotkey = DEFAULT_HOTKEY, label = "Notifications", portalToRoot = true, portalZIndex = Number.MAX_SAFE_INTEGER, children, ...rest } = props;
+	const ctx = useToastContext("Toast.Viewport");
+	const listRef = React.useRef(null);
+	const hoverTimeoutRef = React.useRef(null);
+	const hoverCooldownRef = React.useRef(false);
+	const deferredCollapseRef = React.useRef(null);
+	const mouseInsideRef = React.useRef(false);
+	const [yPosition, xPosition] = ctx.position.split("-");
+	const { insets: safeInsets } = useConfiguration();
+	const offsetStyles = React.useMemo(() => {
+		const styles = {};
+		const defaultOffset = typeof offset === "number" ? offset : VIEWPORT_OFFSET;
+		const offsetObj = typeof offset === "object" ? offset : {
+			top: defaultOffset,
+			right: defaultOffset,
+			bottom: defaultOffset,
+			left: defaultOffset
+		};
+		const safeTop = safeInsets?.top ?? 0;
+		const safeBottom = safeInsets?.bottom ?? 0;
+		const topOffset = safeTop > 0 ? safeTop : offsetObj.top ?? defaultOffset;
+		const bottomOffset = safeBottom > 0 ? safeBottom : offsetObj.bottom ?? defaultOffset;
+		if (yPosition === "top") styles.top = topOffset;
+		else styles.bottom = bottomOffset;
+		if (isWeb) {
+			if (xPosition === "left") styles.left = offsetObj.left ?? defaultOffset;
+			else if (xPosition === "right") styles.right = offsetObj.right ?? defaultOffset;
+			else {
+				styles.left = "50%";
+				styles.transform = "translateX(-50%)";
+			}
+		} else {
+			styles.left = offsetObj.left ?? defaultOffset;
+			styles.right = offsetObj.right ?? defaultOffset;
+		}
+		return styles;
+	}, [
+		offset,
+		yPosition,
+		xPosition
+	]);
+	React.useEffect(() => {
+		if (!isWeb) return;
+		const handleKeyDown = (event) => {
+			const isHotkeyPressed = hotkey.length > 0 && hotkey.every((key) => event[key] || event.code === key);
+			if (isHotkeyPressed) {
+				ctx.setExpanded(true);
+				listRef.current?.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [hotkey]);
+	if (ctx.toasts.length === 0) return null;
+	const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+	const content = /* @__PURE__ */ jsx(ToastViewportFrame, {
+		ref: listRef,
+		"aria-label": `${label} ${hotkeyLabel}`,
+		tabIndex: -1,
+		"aria-live": "polite",
+		style: offsetStyles,
+		"data-y-position": yPosition,
+		"data-x-position": xPosition,
+		...isWeb ? {
+			onMouseEnter: () => {
+				mouseInsideRef.current = true;
+				if (deferredCollapseRef.current) {
+					clearTimeout(deferredCollapseRef.current);
+					deferredCollapseRef.current = null;
+				}
+				if (ctx.toasts.length > 1 && !ctx.interacting && !hoverCooldownRef.current) {
+					hoverTimeoutRef.current = setTimeout(() => ctx.setExpanded(true), 50);
+				}
+			},
+			onMouseLeave: () => {
+				mouseInsideRef.current = false;
+				if (hoverTimeoutRef.current) {
+					clearTimeout(hoverTimeoutRef.current);
+					hoverTimeoutRef.current = null;
+				}
+				if (!ctx.interacting && !ctx.isInDismissCooldown()) {
+					ctx.setExpanded(false);
+				} else if (ctx.isInDismissCooldown()) {
+					if (deferredCollapseRef.current) {
+						clearTimeout(deferredCollapseRef.current);
+					}
+					deferredCollapseRef.current = setTimeout(() => {
+						deferredCollapseRef.current = null;
+						if (!mouseInsideRef.current) {
+							ctx.setExpanded(false);
+						}
+					}, 1200);
+				}
+			},
+			onPointerDown: () => {
+				if (hoverTimeoutRef.current) {
+					clearTimeout(hoverTimeoutRef.current);
+					hoverTimeoutRef.current = null;
+				}
+				ctx.setInteracting(true);
+			},
+			onPointerUp: () => ctx.setInteracting(false),
+			onPointerCancel: () => ctx.setInteracting(false)
+		} : { onPress: () => {
+			if (ctx.toasts.length > 1) {
+				ctx.setExpanded((prev) => !prev);
+			}
+		} },
+		...isWeb && {
+			onFocus: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) {
+					if (ctx.toasts.length > 1) {
+						ctx.setExpanded(true);
+					}
+					ctx.setInteracting(true);
+				}
+			},
+			onBlur: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) {
+					ctx.setInteracting(false);
+					if (!ctx.isInDismissCooldown()) {
+						ctx.setExpanded(false);
+					}
+				}
+			}
+		},
+		...rest,
+		children
+	});
+	if (portalToRoot) {
+		return /* @__PURE__ */ jsx(Portal, {
+			zIndex: portalZIndex,
+			children: /* @__PURE__ */ jsx(ToastContext.Provider, {
+				...ctx,
+				children: content
+			})
+		});
+	}
+	return content;
 });
-function ToastList({
-  renderItem
-}) {
-  const ctx = useToastContext("Toast.List");
-  const maxRender = ctx.toasts.length;
-  return /* @__PURE__ */jsx(AnimatePresence, {
-    children: ctx.toasts.slice(0, maxRender).map((toast, index) => {
-      const handleClose = () => {
-        if (toast.dismissible === false) return;
-        toast.onDismiss?.(toast);
-        ctx.removeToast(toast);
-      };
-      const itemContextValue = {
-        toast,
-        handleClose
-      };
-      if (!renderItem) {
-        return /* @__PURE__ */jsx(ToastItemContext.Provider, {
-          value: itemContextValue,
-          children: /* @__PURE__ */jsx(ToastItemInner, {
-            toast,
-            index,
-            children: /* @__PURE__ */jsx(DefaultToastContent, {
-              toast
-            })
-          })
-        }, toast.id);
-      }
-      return /* @__PURE__ */jsx(ToastItemContext.Provider, {
-        value: itemContextValue,
-        children: renderItem({
-          toast,
-          index,
-          handleClose
-        })
-      }, toast.id);
-    })
-  });
+function ToastList({ renderItem }) {
+	const ctx = useToastContext("Toast.List");
+	const maxRender = ctx.toasts.length;
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: ctx.toasts.slice(0, maxRender).map((toast, index) => {
+		const handleClose = () => {
+			if (toast.dismissible === false) return;
+			toast.onDismiss?.(toast);
+			ctx.removeToast(toast);
+		};
+		const itemContextValue = {
+			toast,
+			handleClose
+		};
+		if (!renderItem) {
+			return /* @__PURE__ */ jsx(ToastItemContext.Provider, {
+				value: itemContextValue,
+				children: /* @__PURE__ */ jsx(ToastItemInner, {
+					toast,
+					index,
+					children: /* @__PURE__ */ jsx(DefaultToastContent, { toast })
+				})
+			}, toast.id);
+		}
+		return /* @__PURE__ */ jsx(ToastItemContext.Provider, {
+			value: itemContextValue,
+			children: renderItem({
+				toast,
+				index,
+				handleClose
+			})
+		}, toast.id);
+	}) });
 }
-function DefaultToastContent({
-  toast
-}) {
-  const ctx = useToastContext("Toast.Item");
-  const {
-    handleClose
-  } = useToastItemContext();
-  const toastType = toast.type ?? "default";
-  const dismissible = toast.dismissible !== false;
-  const title = typeof toast.title === "function" ? toast.title() : toast.title;
-  const description = typeof toast.description === "function" ? toast.description() : toast.description;
-  return /* @__PURE__ */jsxs(XStack, {
-    alignItems: "flex-start",
-    gap: "$3",
-    children: [/* @__PURE__ */jsx(ToastIcon, {}), /* @__PURE__ */jsxs(YStack, {
-      flex: 1,
-      gap: "$1",
-      children: [title && /* @__PURE__ */jsx(ToastTitle, {
-        children: title
-      }), description && /* @__PURE__ */jsx(ToastDescription, {
-        children: description
-      }), (toast.action || toast.cancel) && /* @__PURE__ */jsxs(XStack, {
-        gap: "$2",
-        marginTop: "$2",
-        children: [toast.cancel && /* @__PURE__ */jsx(ToastActionFrame, {
-          backgroundColor: "transparent",
-          onPress: e => {
-            toast.cancel?.onClick?.(e);
-            handleClose();
-          },
-          children: /* @__PURE__ */jsx(SizableText, {
-            size: "$2",
-            color: "$color11",
-            children: toast.cancel.label
-          })
-        }), toast.action && /* @__PURE__ */jsx(ToastActionFrame, {
-          backgroundColor: "$color12",
-          hoverStyle: {
-            backgroundColor: "$color11"
-          },
-          pressStyle: {
-            backgroundColor: "$color10"
-          },
-          onPress: e => {
-            toast.action?.onClick?.(e);
-            if (!e.defaultPrevented) {
-              handleClose();
-            }
-          },
-          children: /* @__PURE__ */jsx(SizableText, {
-            size: "$2",
-            fontWeight: "600",
-            color: "$background",
-            children: toast.action.label
-          })
-        })]
-      })]
-    }), ctx.closeButton && dismissible && /* @__PURE__ */jsx(ToastClose, {})]
-  });
+function DefaultToastContent({ toast }) {
+	const ctx = useToastContext("Toast.Item");
+	const { handleClose } = useToastItemContext();
+	const toastType = toast.type ?? "default";
+	const dismissible = toast.dismissible !== false;
+	const title = typeof toast.title === "function" ? toast.title() : toast.title;
+	const description = typeof toast.description === "function" ? toast.description() : toast.description;
+	return /* @__PURE__ */ jsxs(XStack, {
+		alignItems: "flex-start",
+		gap: "3",
+		children: [
+			/* @__PURE__ */ jsx(ToastIcon, {}),
+			/* @__PURE__ */ jsxs(YStack, {
+				flex: 1,
+				gap: "1",
+				children: [
+					title && /* @__PURE__ */ jsx(ToastTitle, { children: title }),
+					description && /* @__PURE__ */ jsx(ToastDescription, { children: description }),
+					(toast.action || toast.cancel) && /* @__PURE__ */ jsxs(XStack, {
+						gap: "2",
+						marginTop: "2",
+						children: [toast.cancel && /* @__PURE__ */ jsx(ToastActionFrame, {
+							onPress: (e) => {
+								toast.cancel?.onClick?.(e);
+								handleClose();
+							},
+							children: /* @__PURE__ */ jsx(SizableText, {
+								size: "2",
+								children: toast.cancel.label
+							})
+						}), toast.action && /* @__PURE__ */ jsx(ToastActionFrame, {
+							onPress: (e) => {
+								toast.action?.onClick?.(e);
+								if (!e.defaultPrevented) {
+									handleClose();
+								}
+							},
+							children: /* @__PURE__ */ jsx(SizableText, {
+								size: "2",
+								children: toast.action.label
+							})
+						})]
+					})
+				]
+			}),
+			ctx.closeButton && dismissible && /* @__PURE__ */ jsx(ToastClose, {})
+		]
+	});
 }
-function DragWrapper({
-  animatedStyle,
-  gestureHandlers,
-  gesture,
-  AnimatedView,
-  dragRef,
-  children
-}) {
-  if (isWeb) {
-    return /* @__PURE__ */jsx("div", {
-      ref: dragRef,
-      style: {
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        userSelect: "none",
-        WebkitUserSelect: "none",
-        touchAction: "none",
-        cursor: "default"
-      },
-      ...gestureHandlers,
-      children
-    });
-  }
-  if (gesture) {
-    const gh = getGestureHandler();
-    const GestureDetector = gh.state.GestureDetector;
-    if (GestureDetector) {
-      return /* @__PURE__ */jsx(GestureDetector, {
-        gesture,
-        children: /* @__PURE__ */jsx(View, {
-          style: {
-            flex: 1
-          },
-          ...{
-            collapsable: false
-          },
-          children: /* @__PURE__ */jsx(AnimatedView, {
-            style: [{
-              flex: 1
-            }, animatedStyle],
-            children
-          })
-        })
-      });
-    }
-  }
-  return /* @__PURE__ */jsx(AnimatedView, {
-    style: [{
-      flex: 1
-    }, animatedStyle],
-    ...gestureHandlers,
-    children
-  });
+function DragWrapper({ animatedStyle, gestureHandlers, gesture, AnimatedView, dragRef, children }) {
+	if (isWeb) {
+		return /* @__PURE__ */ jsx("div", {
+			ref: dragRef,
+			style: {
+				flex: 1,
+				display: "flex",
+				flexDirection: "column",
+				userSelect: "none",
+				WebkitUserSelect: "none",
+				touchAction: "none",
+				cursor: "default"
+			},
+			...gestureHandlers,
+			children
+		});
+	}
+	if (gesture) {
+		const gh = getGestureHandler();
+		const GestureDetector = gh.state.GestureDetector;
+		if (GestureDetector) {
+			return /* @__PURE__ */ jsx(GestureDetector, {
+				gesture,
+				children: /* @__PURE__ */ jsx(View, {
+					style: { flex: 1 },
+					...{ collapsable: false },
+					children: /* @__PURE__ */ jsx(AnimatedView, {
+						style: [{ flex: 1 }, animatedStyle],
+						children
+					})
+				})
+			});
+		}
+	}
+	return /* @__PURE__ */ jsx(AnimatedView, {
+		style: [{ flex: 1 }, animatedStyle],
+		...gestureHandlers,
+		children
+	});
 }
-const ToastItemInner = ToastItemFrame.styleable(function ToastItem(props, ref) {
-  const {
-    toast,
-    index,
-    children,
-    ...rest
-  } = props;
-  const ctx = useToastContext("Toast.Item");
-  const [mounted, setMounted] = React.useState(false);
-  const [removed, setRemoved] = React.useState(false);
-  const [swipeOut, setSwipeOut] = React.useState(false);
-  const [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);
-  const swipeExitYRef = React.useRef(null);
-  const closeTimerRef = React.useRef(null);
-  const closeTimerStartRef = React.useRef(0);
-  const lastPauseTimeRef = React.useRef(0);
-  const remainingTimeRef = React.useRef(toast.duration ?? ctx.duration);
-  const isFront = index === 0;
-  const isVisible = index < ctx.visibleToasts;
-  const toastType = toast.type ?? "default";
-  const dismissible = toast.dismissible !== false;
-  const duration = toast.duration ?? ctx.duration;
-  const [yPosition] = ctx.position.split("-");
-  const isTop = yPosition === "top";
-  const expandedOffset = isWeb ? (() => {
-    let totalHeight = 0;
-    let activeCount = 0;
-    for (let i = 0; i < index; i++) {
-      const toastId = ctx.toasts[i]?.id;
-      if (toastId == null) continue;
-      const h = ctx.heights[toastId];
-      if (h === 0) continue;
-      totalHeight += h ?? ctx.toastHeight;
-      activeCount++;
-    }
-    return totalHeight + activeCount * ctx.gap;
-  })() : index * (ctx.toastHeight + ctx.gap);
-  const expandedOffsetRef = React.useRef(expandedOffset);
-  expandedOffsetRef.current = expandedOffset;
-  const isExpandedRef = React.useRef(ctx.expanded);
-  isExpandedRef.current = ctx.expanded;
-  const startTimer = React.useCallback(() => {
-    if (duration === Number.POSITIVE_INFINITY || toastType === "loading") return;
-    closeTimerStartRef.current = Date.now();
-    closeTimerRef.current = setTimeout(() => {
-      toast.onAutoClose?.(toast);
-      setRemoved(true);
-      setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
-    }, remainingTimeRef.current);
-  }, [duration, toastType, toast, ctx.removeToast]);
-  const pauseTimer = useEvent(() => {
-    if (closeTimerRef.current) {
-      clearTimeout(closeTimerRef.current);
-    }
-    if (lastPauseTimeRef.current < closeTimerStartRef.current) {
-      const elapsed = Date.now() - closeTimerStartRef.current;
-      remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
-    }
-    lastPauseTimeRef.current = Date.now();
-  });
-  const resumeTimer = useEvent(() => {
-    if (ctx.expanded || ctx.interacting) return;
-    remainingTimeRef.current = duration;
-    startTimer();
-  });
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-  React.useEffect(() => {
-    if (toast.delete) {
-      setRemoved(true);
-      if (isExpandedRef.current) {
-        setOffsetBeforeRemove(expandedOffsetRef.current);
-      }
-      setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
-    }
-  }, [toast.delete, toast, ctx.removeToast]);
-  React.useEffect(() => {
-    if (ctx.expanded || ctx.interacting) {
-      pauseTimer();
-    } else {
-      startTimer();
-    }
-    return () => {
-      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
-    };
-  }, [ctx.expanded, ctx.interacting, startTimer]);
-  React.useEffect(() => {
-    remainingTimeRef.current = duration;
-  }, [duration]);
-  const {
-    setDragOffset,
-    springBack,
-    animateOut,
-    animatedStyle,
-    AnimatedView,
-    dragRef
-  } = useToastAnimations({
-    reducedMotion: ctx.reducedMotion,
-    swipeAxis: ctx.swipeDirection === "up" || ctx.swipeDirection === "down" || ctx.swipeDirection === "vertical" ? "vertical" : "horizontal"
-  });
-  const {
-    isDragging,
-    gestureHandlers,
-    gesture
-  } = useAnimatedDragGesture({
-    direction: ctx.swipeDirection,
-    threshold: ctx.swipeThreshold,
-    disabled: !dismissible || toastType === "loading",
-    expanded: ctx.expanded,
-    onDragStart: pauseTimer,
-    onDragMove: setDragOffset,
-    onDismiss: (exitDirection, velocity) => {
-      ctx.triggerDismissCooldown();
-      setSwipeOut(true);
-      toast.onDismiss?.(toast);
-      swipeExitYRef.current = isExpandedRef.current ? isTop ? expandedOffsetRef.current : -expandedOffsetRef.current : isFront ? 0 : isTop ? ctx.gap * index : -ctx.gap * index;
-      setRemoved(true);
-      ctx.removeToast(toast);
-      animateOut(exitDirection, velocity);
-    },
-    onCancel: () => {
-      springBack(() => {
-        resumeTimer();
-      });
-    }
-  });
-  const handleLayout = React.useCallback(event => {
-    if (!isWeb) return;
-    if (removed) return;
-    if (!ctx.expanded && index !== 0) return;
-    const {
-      height
-    } = event.nativeEvent.layout;
-    ctx.setToastHeight(toast.id, height);
-  }, [toast.id, ctx.setToastHeight, index, ctx.expanded, removed]);
-  React.useEffect(() => {
-    if (!isWeb) return;
-    return () => {
-      ctx.removeToastHeight(toast.id);
-    };
-  }, [toast.id, ctx.removeToastHeight]);
-  const handleClose = React.useCallback(() => {
-    if (!dismissible) return;
-    ctx.triggerDismissCooldown();
-    toast.onDismiss?.(toast);
-    setRemoved(true);
-    if (isExpandedRef.current) {
-      setOffsetBeforeRemove(expandedOffsetRef.current);
-    }
-    setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
-  }, [dismissible, toast, ctx.removeToast, ctx.triggerDismissCooldown]);
-  const itemContextValue = React.useMemo(() => ({
-    toast,
-    handleClose
-  }), [toast, handleClose]);
-  let frontToastHeight = -1;
-  if (isWeb) {
-    for (const t of ctx.toasts) {
-      const h = ctx.heights[t.id];
-      if (h != null && h > 0) {
-        frontToastHeight = h;
-        break;
-      }
-    }
-  }
-  const stackScale = !ctx.expanded && !isFront ? 1 - index * 0.05 : 1;
-  const activeExpandedOffset = removed ? offsetBeforeRemove : expandedOffset;
-  const stackY = ctx.expanded ? isTop ? activeExpandedOffset : -activeExpandedOffset : isFront ? 0 : isTop ? ctx.gap * index : -ctx.gap * index;
-  const computedOpacity = removed && !swipeOut ? 0 : index >= ctx.visibleToasts ? 0 : 1;
-  const computedZIndex = removed ? 0 : ctx.visibleToasts - index + 1;
-  const computedHeight = isWeb ? ctx.expanded ? ctx.heights[toast.id] || void 0 : !isFront && frontToastHeight > 0 ? frontToastHeight : void 0 : void 0;
-  const computedPointerEvents = index >= ctx.visibleToasts ? "none" : "auto";
-  const gapFillerHeight = ctx.expanded ? ctx.gap + 1 : 0;
-  const dataAttributes = {
-    "data-mounted": mounted ? "true" : "false",
-    "data-removed": removed ? "true" : "false",
-    "data-swipe-out": swipeOut ? "true" : "false",
-    "data-visible": isVisible ? "true" : "false",
-    "data-front": isFront ? "true" : "false",
-    "data-index": String(index),
-    "data-type": toastType,
-    "data-expanded": ctx.expanded ? "true" : "false"
-  };
-  return /* @__PURE__ */jsx(ToastPositionWrapper, {
-    ref,
-    testID: rest.testID,
-    accessibilityLabel: rest.accessibilityLabel,
-    ...dataAttributes,
-    transition: isDragging || ctx.reducedMotion ? void 0 : removed ? "200ms" : "400ms",
-    animateOnly: isWeb ? ["transform", "opacity", "height"] : ["transform", "opacity"],
-    y: stackY,
-    scale: stackScale,
-    opacity: computedOpacity,
-    zIndex: computedZIndex,
-    height: computedHeight,
-    overflow: "visible",
-    pointerEvents: computedPointerEvents,
-    top: isTop ? 0 : void 0,
-    bottom: isTop ? void 0 : 0,
-    ...(isWeb && !isFront && {
-      style: {
-        transformOrigin: isTop ? "top center" : "bottom center"
-      }
-    }),
-    enterStyle: ctx.reducedMotion ? {
-      opacity: 0
-    } : {
-      opacity: 0,
-      y: isTop ? -80 : 80
-    },
-    exitStyle: ctx.reducedMotion ? {
-      opacity: 0
-    } : swipeOut ? {
-      opacity: 0,
-      y: swipeExitYRef.current ?? stackY,
-      scale: stackScale
-    } : {
-      opacity: 0,
-      y: stackY,
-      scale: stackScale
-    },
-    children: /* @__PURE__ */jsx(DragWrapper, {
-      animatedStyle,
-      gestureHandlers,
-      gesture,
-      AnimatedView,
-      dragRef,
-      children: /* @__PURE__ */jsxs(ToastItemFrame, {
-        role: "status",
-        "aria-live": "polite",
-        "aria-atomic": true,
-        tabIndex: 0,
-        onLayout: handleLayout,
-        ...(isWeb && {
-          onKeyDown: event => {
-            if (event.key === "Escape" && dismissible) {
-              const current = event.currentTarget;
-              const container = current.closest("[aria-label]");
-              if (container) {
-                const focusables = container.querySelectorAll('[tabindex="0"]');
-                const arr = Array.from(focusables);
-                const idx = arr.indexOf(current);
-                const next = arr[idx + 1] || arr[idx - 1];
-                next?.focus();
-              }
-              handleClose();
-            }
-          }
-        }),
-        ...rest,
-        children: [ctx.expanded && gapFillerHeight > 0 && /* @__PURE__ */jsx(View, {
-          position: "absolute",
-          left: 0,
-          right: 0,
-          height: gapFillerHeight,
-          pointerEvents: "auto",
-          ...(isTop ? {
-            top: "100%"
-          } : {
-            bottom: "100%"
-          })
-        }), /* @__PURE__ */jsx(ToastItemContext.Provider, {
-          value: itemContextValue,
-          children
-        })]
-      })
-    })
-  });
+const ToastItemInner = createStyledHOC(ToastItemFrame, function ToastItem(props, ref) {
+	const { toast, index, children, ...rest } = props;
+	const ctx = useToastContext("Toast.Item");
+	const [mounted, setMounted] = React.useState(false);
+	const [removed, setRemoved] = React.useState(false);
+	const [swipeOut, setSwipeOut] = React.useState(false);
+	const [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);
+	const swipeExitYRef = React.useRef(null);
+	const closeTimerRef = React.useRef(null);
+	const closeTimerStartRef = React.useRef(0);
+	const lastPauseTimeRef = React.useRef(0);
+	const remainingTimeRef = React.useRef(toast.duration ?? ctx.duration);
+	const isFront = index === 0;
+	const isVisible = index < ctx.visibleToasts;
+	const toastType = toast.type ?? "default";
+	const dismissible = toast.dismissible !== false;
+	const duration = toast.duration ?? ctx.duration;
+	const [yPosition] = ctx.position.split("-");
+	const isTop = yPosition === "top";
+	const expandedOffset = isWeb ? (() => {
+		let totalHeight = 0;
+		let activeCount = 0;
+		for (let i = 0; i < index; i++) {
+			const toastId = ctx.toasts[i]?.id;
+			if (toastId == null) continue;
+			const h = ctx.heights[toastId];
+			if (h === 0) continue;
+			totalHeight += h ?? ctx.toastHeight;
+			activeCount++;
+		}
+		return totalHeight + activeCount * ctx.gap;
+	})() : index * (ctx.toastHeight + ctx.gap);
+	const expandedOffsetRef = React.useRef(expandedOffset);
+	expandedOffsetRef.current = expandedOffset;
+	const isExpandedRef = React.useRef(ctx.expanded);
+	isExpandedRef.current = ctx.expanded;
+	const startTimer = React.useCallback(() => {
+		if (duration === Number.POSITIVE_INFINITY || toastType === "loading") return;
+		closeTimerStartRef.current = Date.now();
+		closeTimerRef.current = setTimeout(() => {
+			toast.onAutoClose?.(toast);
+			setRemoved(true);
+			setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
+		}, remainingTimeRef.current);
+	}, [
+		duration,
+		toastType,
+		toast,
+		ctx.removeToast
+	]);
+	const pauseTimer = useEvent(() => {
+		if (closeTimerRef.current) {
+			clearTimeout(closeTimerRef.current);
+		}
+		if (lastPauseTimeRef.current < closeTimerStartRef.current) {
+			const elapsed = Date.now() - closeTimerStartRef.current;
+			remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+		}
+		lastPauseTimeRef.current = Date.now();
+	});
+	const resumeTimer = useEvent(() => {
+		if (ctx.expanded || ctx.interacting) return;
+		remainingTimeRef.current = duration;
+		startTimer();
+	});
+	React.useEffect(() => {
+		setMounted(true);
+	}, []);
+	React.useEffect(() => {
+		if (toast.delete) {
+			setRemoved(true);
+			if (isExpandedRef.current) {
+				setOffsetBeforeRemove(expandedOffsetRef.current);
+			}
+			setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
+		}
+	}, [
+		toast.delete,
+		toast,
+		ctx.removeToast
+	]);
+	React.useEffect(() => {
+		if (ctx.expanded || ctx.interacting) {
+			pauseTimer();
+		} else {
+			startTimer();
+		}
+		return () => {
+			if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+		};
+	}, [
+		ctx.expanded,
+		ctx.interacting,
+		startTimer
+	]);
+	React.useEffect(() => {
+		remainingTimeRef.current = duration;
+	}, [duration]);
+	const { setDragOffset, springBack, animateOut, animatedStyle, AnimatedView, dragRef } = useToastAnimations({ reducedMotion: ctx.reducedMotion });
+	const { isDragging, gestureHandlers, gesture } = useAnimatedDragGesture({
+		direction: ctx.swipeDirection,
+		threshold: ctx.swipeThreshold,
+		disabled: !dismissible || toastType === "loading",
+		expanded: ctx.expanded,
+		onDragStart: pauseTimer,
+		onDragMove: setDragOffset,
+		onDismiss: (exitDirection, velocity) => {
+			ctx.triggerDismissCooldown();
+			setSwipeOut(true);
+			toast.onDismiss?.(toast);
+			swipeExitYRef.current = isExpandedRef.current ? isTop ? expandedOffsetRef.current : -expandedOffsetRef.current : isFront ? 0 : isTop ? ctx.gap * index : -ctx.gap * index;
+			setRemoved(true);
+			ctx.removeToast(toast);
+			animateOut(exitDirection, velocity);
+		},
+		onCancel: () => {
+			springBack(() => {
+				resumeTimer();
+			});
+		}
+	});
+	const handleLayout = React.useCallback((event) => {
+		if (!isWeb) return;
+		if (removed) return;
+		if (!ctx.expanded && index !== 0) return;
+		const { height } = event.nativeEvent.layout;
+		ctx.setToastHeight(toast.id, height);
+	}, [
+		toast.id,
+		ctx.setToastHeight,
+		index,
+		ctx.expanded,
+		removed
+	]);
+	React.useEffect(() => {
+		if (!isWeb) return;
+		return () => {
+			ctx.removeToastHeight(toast.id);
+		};
+	}, [toast.id, ctx.removeToastHeight]);
+	const handleClose = React.useCallback(() => {
+		if (!dismissible) return;
+		ctx.triggerDismissCooldown();
+		toast.onDismiss?.(toast);
+		setRemoved(true);
+		if (isExpandedRef.current) {
+			setOffsetBeforeRemove(expandedOffsetRef.current);
+		}
+		setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
+	}, [
+		dismissible,
+		toast,
+		ctx.removeToast,
+		ctx.triggerDismissCooldown
+	]);
+	const itemContextValue = React.useMemo(() => ({
+		toast,
+		handleClose
+	}), [toast, handleClose]);
+	let frontToastHeight = -1;
+	if (isWeb) {
+		for (const t of ctx.toasts) {
+			const h = ctx.heights[t.id];
+			if (h != null && h > 0) {
+				frontToastHeight = h;
+				break;
+			}
+		}
+	}
+	const stackScale = !ctx.expanded && !isFront ? 1 - index * .05 : 1;
+	const activeExpandedOffset = removed ? offsetBeforeRemove : expandedOffset;
+	const stackY = ctx.expanded ? isTop ? activeExpandedOffset : -activeExpandedOffset : isFront ? 0 : isTop ? ctx.gap * index : -ctx.gap * index;
+	const computedOpacity = removed && !swipeOut ? 0 : index >= ctx.visibleToasts ? 0 : 1;
+	const computedZIndex = removed ? 0 : ctx.visibleToasts - index + 1;
+	const computedHeight = isWeb ? ctx.expanded ? ctx.heights[toast.id] || void 0 : !isFront && frontToastHeight > 0 ? frontToastHeight : void 0 : void 0;
+	const computedPointerEvents = index >= ctx.visibleToasts ? "none" : "auto";
+	const gapFillerHeight = ctx.expanded ? ctx.gap + 1 : 0;
+	const dataAttributes = {
+		"data-mounted": mounted ? "true" : "false",
+		"data-removed": removed ? "true" : "false",
+		"data-swipe-out": swipeOut ? "true" : "false",
+		"data-visible": isVisible ? "true" : "false",
+		"data-front": isFront ? "true" : "false",
+		"data-index": String(index),
+		"data-type": toastType,
+		"data-expanded": ctx.expanded ? "true" : "false"
+	};
+	return /* @__PURE__ */ jsx(ToastPositionWrapper, {
+		ref,
+		testID: rest.testID,
+		"aria-label": rest["aria-label"],
+		...dataAttributes,
+		transition: isDragging || ctx.reducedMotion ? void 0 : removed ? "200ms" : "400ms",
+		y: ctx.reducedMotion ? stackY : `${stackY} enter:${isTop ? -80 : 80}px exit:${swipeOut ? swipeExitYRef.current ?? stackY : stackY}px`,
+		scale: stackScale,
+		opacity: `${computedOpacity} enter:0 exit:0`,
+		zIndex: computedZIndex,
+		height: computedHeight,
+		overflow: "visible",
+		pointerEvents: computedPointerEvents,
+		top: isTop ? 0 : void 0,
+		bottom: isTop ? void 0 : 0,
+		...isWeb && !isFront && { style: { transformOrigin: isTop ? "top center" : "bottom center" } },
+		animateOnly: isWeb ? [
+			"transform",
+			"opacity",
+			"height"
+		] : ["transform", "opacity"],
+		children: /* @__PURE__ */ jsx(DragWrapper, {
+			animatedStyle,
+			gestureHandlers,
+			gesture,
+			AnimatedView,
+			dragRef,
+			children: /* @__PURE__ */ jsxs(ToastItemFrame, {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": true,
+				tabIndex: 0,
+				onLayout: handleLayout,
+				...isWeb && { onKeyDown: (event) => {
+					if (event.key === "Escape" && dismissible) {
+						const current = event.currentTarget;
+						const container = current.closest("[aria-label]");
+						if (container) {
+							const focusables = container.querySelectorAll("[tabindex=\"0\"]");
+							const arr = Array.from(focusables);
+							const idx = arr.indexOf(current);
+							const next = arr[idx + 1] || arr[idx - 1];
+							next?.focus();
+						}
+						handleClose();
+					}
+				} },
+				...rest,
+				children: [ctx.expanded && gapFillerHeight > 0 && /* @__PURE__ */ jsx(View, {
+					position: "absolute",
+					left: 0,
+					right: 0,
+					height: gapFillerHeight,
+					pointerEvents: "auto",
+					...isTop ? { top: "100%" } : { bottom: "100%" }
+				}), /* @__PURE__ */ jsx(ToastItemContext.Provider, {
+					value: itemContextValue,
+					children
+				})]
+			})
+		})
+	});
 });
-const ToastTitle = styled(SizableText, {
-  name: "ToastTitle",
-  variants: {
-    unstyled: {
-      false: {
-        color: "$color",
-        fontWeight: "600",
-        size: "$4"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+const ToastTitle = styled(SizableText, { displayName: "ToastTitle" });
+const ToastDescription = styled(SizableText, { displayName: "ToastDescription" });
+const ToastClose = createStyledHOC(ToastCloseFrame, function ToastClose2(props, ref) {
+	let handleClose;
+	try {
+		const itemCtx = useToastItemContext();
+		handleClose = itemCtx.handleClose;
+	} catch {}
+	const ctx = useToastContext("Toast.Close");
+	return /* @__PURE__ */ jsx(ToastCloseFrame, {
+		ref,
+		"aria-label": "Close toast",
+		onPress: handleClose,
+		...props,
+		children: props.children ?? ctx.icons?.close ?? /* @__PURE__ */ jsx(DefaultCloseIcon, {})
+	});
 });
-const ToastDescription = styled(SizableText, {
-  name: "ToastDescription",
-  variants: {
-    unstyled: {
-      false: {
-        color: "$color11",
-        size: "$2"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-});
-const ToastClose = ToastCloseFrame.styleable(function ToastClose2(props, ref) {
-  let handleClose;
-  try {
-    const itemCtx = useToastItemContext();
-    handleClose = itemCtx.handleClose;
-  } catch {}
-  const ctx = useToastContext("Toast.Close");
-  return /* @__PURE__ */jsx(ToastCloseFrame, {
-    ref,
-    "aria-label": "Close toast",
-    onPress: handleClose,
-    ...props,
-    children: props.children ?? ctx.icons?.close ?? /* @__PURE__ */jsx(DefaultCloseIcon, {})
-  });
-});
-const ToastAction = ToastActionFrame.styleable(function ToastAction2(props, ref) {
-  return /* @__PURE__ */jsx(ToastActionFrame, {
-    ref,
-    ...props
-  });
+const ToastAction = createStyledHOC(ToastActionFrame, function ToastAction2(props, ref) {
+	return /* @__PURE__ */ jsx(ToastActionFrame, {
+		ref,
+		...props
+	});
 });
 function ToastIcon(props) {
-  const ctx = useToastContext("Toast.Icon");
-  let toast;
-  try {
-    const itemCtx = useToastItemContext();
-    toast = itemCtx.toast;
-  } catch {
-    return null;
-  }
-  if (!toast) return null;
-  if (toast.icon !== void 0) {
-    return /* @__PURE__ */jsx(View, {
-      flexShrink: 0,
-      marginTop: "$0.5",
-      children: toast.icon
-    });
-  }
-  const toastType = toast.type ?? "default";
-  const icon = ctx.icons?.[toastType] ?? null;
-  if (!icon) return null;
-  return /* @__PURE__ */jsx(View, {
-    flexShrink: 0,
-    marginTop: "$0.5",
-    children: icon
-  });
+	const ctx = useToastContext("Toast.Icon");
+	let toast;
+	try {
+		const itemCtx = useToastItemContext();
+		toast = itemCtx.toast;
+	} catch {
+		return null;
+	}
+	if (!toast) return null;
+	if (toast.icon !== void 0) {
+		return /* @__PURE__ */ jsx(View, {
+			flexShrink: 0,
+			marginTop: "0-5",
+			children: toast.icon
+		});
+	}
+	const toastType = toast.type ?? "default";
+	const icon = ctx.icons?.[toastType] ?? null;
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx(View, {
+		flexShrink: 0,
+		marginTop: "0-5",
+		children: icon
+	});
 }
 function useToasts() {
-  const ctx = useToastContext("useToasts");
-  return {
-    toasts: ctx.toasts,
-    expanded: ctx.expanded,
-    position: ctx.position
-  };
+	const ctx = useToastContext("useToasts");
+	return {
+		toasts: ctx.toasts,
+		expanded: ctx.expanded,
+		position: ctx.position,
+		closeButton: ctx.closeButton
+	};
 }
 function useToastItem() {
-  return useToastItemContext();
+	return useToastItemContext();
 }
 ToastRoot.displayName = "Toast";
 const Toast = withStaticProperties(ToastRoot, {
-  Viewport: ToastViewport,
-  List: ToastList,
-  Item: ToastItemInner,
-  Title: ToastTitle,
-  Description: ToastDescription,
-  Close: ToastClose,
-  Action: ToastAction,
-  Icon: ToastIcon
+	Viewport: ToastViewport,
+	List: ToastList,
+	Item: ToastItemInner,
+	Title: ToastTitle,
+	Description: ToastDescription,
+	Close: ToastClose,
+	Action: ToastAction,
+	Icon: ToastIcon
 });
+
 export { Toast, useToastItem, useToasts };
 //# sourceMappingURL=ToastComposable.mjs.map