@tamagui/toast 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/ToastComposable.native.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+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,10 +14,10 @@ import { useAnimatedDragGesture } from "./useAnimatedDragGesture.native.js";
 import { useToastAnimations } from "./useToastAnimations.native.js";
 import { useReducedMotion } from "./useReducedMotion.native.js";
 import { DefaultCloseIcon, ToastActionFrame, ToastCloseFrame, ToastItemFrame, ToastPositionWrapper } from "./ToastItemFrame.native.js";
-function _type_of(obj) {
-  "@swc/helpers - typeof";
 
-  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+function _type_of(obj) {
+	"@swc/helpers - typeof";
+	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 var VISIBLE_TOASTS_AMOUNT = 4;
 var VIEWPORT_OFFSET = 16;
@@ -29,969 +29,863 @@ var DEFAULT_HOTKEY = ["altKey", "KeyT"];
 var ToastContext = createStyledContext({}, "Toast__");
 var 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) {
-  var ctx = useToastContextValue();
-  if (!hasToastContext(ctx)) {
-    throw new Error(`\`${consumerName}\` must be used within \`Toast\``);
-  }
-  return ctx;
+	var ctx = useToastContextValue();
+	if (!hasToastContext(ctx)) {
+		throw new Error(`\`${consumerName}\` must be used within \`Toast\``);
+	}
+	return ctx;
 }
-var ToastItemContext = /* @__PURE__ */React.createContext(null);
+var ToastItemContext = /* @__PURE__ */ React.createContext(null);
 function useToastItemContext() {
-  var ctx = React.useContext(ToastItemContext);
-  if (!ctx) {
-    throw new Error("useToastItemContext must be used within Toast.Item or Toast.List");
-  }
-  return ctx;
+	var 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;
-  var [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;
+	var [yPosition, xPosition] = position.split("-");
+	if (!isWeb) {
+		return yPosition === "top" ? "up" : "down";
+	}
+	if (xPosition === "left") return "left";
+	if (xPosition === "right") return "right";
+	return "horizontal";
 }
-var ToastRoot = /* @__PURE__ */React.forwardRef(function ToastRoot2(props, _ref) {
-  var {
-    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;
-  var reducedMotion = useReducedMotion(reducedMotionProp);
-  var [toasts, setToasts] = React.useState([]);
-  var [heights, setHeights] = React.useState({});
-  var [localExpanded, setExpanded] = React.useState(false);
-  var expanded = expand || localExpanded;
-  var [interacting, setInteracting] = React.useState(false);
-  var heightsLockedRef = React.useRef(false);
-  var prevExpandedRef = React.useRef(expanded);
-  React.useLayoutEffect(function () {
-    if (prevExpandedRef.current !== expanded) {
-      heightsLockedRef.current = true;
-      prevExpandedRef.current = expanded;
-    }
-    var timer = setTimeout(function () {
-      heightsLockedRef.current = false;
-    }, 350);
-    return function () {
-      return clearTimeout(timer);
-    };
-  }, [expanded]);
-  var setToastHeight = React.useCallback(function (toastId, height) {
-    if (heightsLockedRef.current) return;
-    var rounded = Math.round(height);
-    setHeights(function (prev) {
-      var existing = prev[toastId];
-      if (existing != null && Math.abs(existing - rounded) <= 2) return prev;
-      return {
-        ...prev,
-        [toastId]: rounded
-      };
-    });
-  }, []);
-  var removeToastHeight = React.useCallback(function (toastId) {
-    setHeights(function (prev) {
-      if (!(toastId in prev)) return prev;
-      var next = {
-        ...prev
-      };
-      delete next[toastId];
-      return next;
-    });
-  }, []);
-  var dismissCooldownRef = React.useRef(false);
-  var dismissCooldownTimerRef = React.useRef(null);
-  var triggerDismissCooldown = React.useCallback(function () {
-    dismissCooldownRef.current = true;
-    if (dismissCooldownTimerRef.current) {
-      clearTimeout(dismissCooldownTimerRef.current);
-    }
-    dismissCooldownTimerRef.current = setTimeout(function () {
-      dismissCooldownRef.current = false;
-    }, 800);
-  }, []);
-  var isInDismissCooldown = React.useCallback(function () {
-    return dismissCooldownRef.current;
-  }, []);
-  var burntOptionsRef = React.useRef(burntOptions);
-  var notificationOptionsRef = React.useRef(notificationOptions);
-  React.useEffect(function () {
-    burntOptionsRef.current = burntOptions;
-  }, [burntOptions]);
-  React.useEffect(function () {
-    notificationOptionsRef.current = notificationOptions;
-  }, [notificationOptions]);
-  React.useEffect(function () {
-    return ToastState.subscribe(function (toast) {
-      if (toast.dismiss) {
-        setToasts(function (toasts2) {
-          return toasts2.map(function (t) {
-            return t.id === toast.id ? {
-              ...t,
-              delete: true
-            } : t;
-          });
-        });
-        return;
-      }
-      if (native) {
-        var handled = dispatchNativeToast(toast, {
-          duration,
-          burntOptions: burntOptionsRef.current,
-          notificationOptions: notificationOptionsRef.current
-        });
-        if (handled) return;
-      }
-      setToasts(function (toasts2) {
-        var idx = toasts2.findIndex(function (t) {
-          return t.id === toast.id;
-        });
-        if (idx !== -1) {
-          return [...toasts2.slice(0, idx), {
-            ...toasts2[idx],
-            ...toast
-          }, ...toasts2.slice(idx + 1)];
-        }
-        return [toast, ...toasts2];
-      });
-    });
-  }, [native, duration]);
-  var prevToastCountRef = React.useRef(toasts.length);
-  React.useEffect(function () {
-    var 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]);
-  var removeToast = React.useCallback(function (toastToRemove) {
-    setToasts(function (toasts2) {
-      var _toasts_find;
-      if (!((_toasts_find = toasts2.find(function (t) {
-        return t.id === toastToRemove.id;
-      })) === null || _toasts_find === void 0 ? void 0 : _toasts_find.delete)) {
-        ToastState.dismiss(toastToRemove.id);
-      }
-      return toasts2.filter(function (param) {
-        var {
-          id
-        } = param;
-        return id !== toastToRemove.id;
-      });
-    });
-  }, []);
-  var swipeDirection = resolveSwipeDirection(swipeDirectionProp, position);
-  var currentTheme = useThemeName();
-  var resolvedTheme = themeProp === "system" || !themeProp ? (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.includes("dark")) ? "dark" : "light" : themeProp;
-  var 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
-    })
-  });
+var ToastRoot = createRefComponent(function ToastRoot2(props, _ref) {
+	var { 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;
+	var reducedMotion = useReducedMotion(reducedMotionProp);
+	var [toasts, setToasts] = React.useState([]);
+	var [heights, setHeights] = React.useState({});
+	var [localExpanded, setExpanded] = React.useState(false);
+	var expanded = expand || localExpanded;
+	var [interacting, setInteracting] = React.useState(false);
+	var heightsLockedRef = React.useRef(false);
+	var prevExpandedRef = React.useRef(expanded);
+	React.useLayoutEffect(function() {
+		if (prevExpandedRef.current !== expanded) {
+			heightsLockedRef.current = true;
+			prevExpandedRef.current = expanded;
+		}
+		var timer = setTimeout(function() {
+			heightsLockedRef.current = false;
+		}, 350);
+		return function() {
+			return clearTimeout(timer);
+		};
+	}, [expanded]);
+	var setToastHeight = React.useCallback(function(toastId, height) {
+		if (heightsLockedRef.current) return;
+		var rounded = Math.round(height);
+		setHeights(function(prev) {
+			var existing = prev[toastId];
+			if (existing != null && Math.abs(existing - rounded) <= 2) return prev;
+			return {
+				...prev,
+				[toastId]: rounded
+			};
+		});
+	}, []);
+	var removeToastHeight = React.useCallback(function(toastId) {
+		setHeights(function(prev) {
+			if (!(toastId in prev)) return prev;
+			var next = { ...prev };
+			delete next[toastId];
+			return next;
+		});
+	}, []);
+	var dismissCooldownRef = React.useRef(false);
+	var dismissCooldownTimerRef = React.useRef(null);
+	var triggerDismissCooldown = React.useCallback(function() {
+		dismissCooldownRef.current = true;
+		if (dismissCooldownTimerRef.current) {
+			clearTimeout(dismissCooldownTimerRef.current);
+		}
+		dismissCooldownTimerRef.current = setTimeout(function() {
+			dismissCooldownRef.current = false;
+		}, 800);
+	}, []);
+	var isInDismissCooldown = React.useCallback(function() {
+		return dismissCooldownRef.current;
+	}, []);
+	var burntOptionsRef = React.useRef(burntOptions);
+	var notificationOptionsRef = React.useRef(notificationOptions);
+	React.useEffect(function() {
+		burntOptionsRef.current = burntOptions;
+	}, [burntOptions]);
+	React.useEffect(function() {
+		notificationOptionsRef.current = notificationOptions;
+	}, [notificationOptions]);
+	React.useEffect(function() {
+		return ToastState.subscribe(function(toast) {
+			if (toast.dismiss) {
+				setToasts(function(toasts2) {
+					return toasts2.map(function(t) {
+						return t.id === toast.id ? {
+							...t,
+							delete: true
+						} : t;
+					});
+				});
+				return;
+			}
+			if (toast.toasterId !== toasterId) {
+				return;
+			}
+			if (native) {
+				var handled = dispatchNativeToast(toast, {
+					duration,
+					burntOptions: burntOptionsRef.current,
+					notificationOptions: notificationOptionsRef.current
+				});
+				if (handled) return;
+			}
+			setToasts(function(toasts2) {
+				var idx = toasts2.findIndex(function(t) {
+					return 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
+	]);
+	var prevToastCountRef = React.useRef(toasts.length);
+	React.useEffect(function() {
+		var 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]);
+	var removeToast = React.useCallback(function(toastToRemove) {
+		setToasts(function(toasts2) {
+			var _toasts_find;
+			if (!((_toasts_find = toasts2.find(function(t) {
+				return t.id === toastToRemove.id;
+			})) === null || _toasts_find === void 0 ? void 0 : _toasts_find.delete)) {
+				ToastState.dismiss(toastToRemove.id);
+			}
+			return toasts2.filter(function(param) {
+				var { id } = param;
+				return id !== toastToRemove.id;
+			});
+		});
+	}, []);
+	var swipeDirection = resolveSwipeDirection(swipeDirectionProp, position);
+	var currentTheme = useThemeName();
+	var resolvedTheme = themeProp === "system" || !themeProp ? (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.includes("dark")) ? "dark" : "light" : themeProp;
+	var 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
+		})
+	});
 });
 var 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
 });
-var ToastViewport = ToastViewportFrame.styleable(function ToastViewport2(props, ref) {
-  var {
-    offset = VIEWPORT_OFFSET,
-    hotkey = DEFAULT_HOTKEY,
-    label = "Notifications",
-    portalToRoot = true,
-    portalZIndex = Number.MAX_SAFE_INTEGER,
-    children,
-    ...rest
-  } = props;
-  var ctx = useToastContext("Toast.Viewport");
-  var listRef = React.useRef(null);
-  var hoverTimeoutRef = React.useRef(null);
-  var hoverCooldownRef = React.useRef(false);
-  var deferredCollapseRef = React.useRef(null);
-  var mouseInsideRef = React.useRef(false);
-  var [yPosition, xPosition] = ctx.position.split("-");
-  var {
-    insets: safeInsets
-  } = useConfiguration();
-  var offsetStyles = React.useMemo(function () {
-    var styles = {};
-    var defaultOffset = typeof offset === "number" ? offset : VIEWPORT_OFFSET;
-    var offsetObj = (typeof offset === "undefined" ? "undefined" : _type_of(offset)) === "object" ? offset : {
-      top: defaultOffset,
-      right: defaultOffset,
-      bottom: defaultOffset,
-      left: defaultOffset
-    };
-    var _safeInsets_top;
-    var safeTop = (_safeInsets_top = safeInsets === null || safeInsets === void 0 ? void 0 : safeInsets.top) !== null && _safeInsets_top !== void 0 ? _safeInsets_top : 0;
-    var _safeInsets_bottom;
-    var safeBottom = (_safeInsets_bottom = safeInsets === null || safeInsets === void 0 ? void 0 : safeInsets.bottom) !== null && _safeInsets_bottom !== void 0 ? _safeInsets_bottom : 0;
-    var _offsetObj_top;
-    var topOffset = safeTop > 0 ? safeTop : (_offsetObj_top = offsetObj.top) !== null && _offsetObj_top !== void 0 ? _offsetObj_top : defaultOffset;
-    var _offsetObj_bottom;
-    var bottomOffset = safeBottom > 0 ? safeBottom : (_offsetObj_bottom = offsetObj.bottom) !== null && _offsetObj_bottom !== void 0 ? _offsetObj_bottom : defaultOffset;
-    if (yPosition === "top") styles.top = topOffset;else styles.bottom = bottomOffset;
-    if (isWeb) {
-      var _offsetObj_left, _offsetObj_right;
-      if (xPosition === "left") styles.left = (_offsetObj_left = offsetObj.left) !== null && _offsetObj_left !== void 0 ? _offsetObj_left : defaultOffset;else if (xPosition === "right") styles.right = (_offsetObj_right = offsetObj.right) !== null && _offsetObj_right !== void 0 ? _offsetObj_right : defaultOffset;else {
-        styles.left = "50%";
-        styles.transform = "translateX(-50%)";
-      }
-    } else {
-      var _offsetObj_left1;
-      styles.left = (_offsetObj_left1 = offsetObj.left) !== null && _offsetObj_left1 !== void 0 ? _offsetObj_left1 : defaultOffset;
-      var _offsetObj_right1;
-      styles.right = (_offsetObj_right1 = offsetObj.right) !== null && _offsetObj_right1 !== void 0 ? _offsetObj_right1 : defaultOffset;
-    }
-    return styles;
-  }, [offset, yPosition, xPosition]);
-  React.useEffect(function () {
-    if (!isWeb) return;
-    var handleKeyDown = function (event) {
-      var isHotkeyPressed = hotkey.length > 0 && hotkey.every(function (key) {
-        return event[key] || event.code === key;
-      });
-      if (isHotkeyPressed) {
-        var _listRef_current;
-        ctx.setExpanded(true);
-        (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.focus();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return function () {
-      return document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [hotkey]);
-  if (ctx.toasts.length === 0) return null;
-  var hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
-  var 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: function () {
-        mouseInsideRef.current = true;
-        if (deferredCollapseRef.current) {
-          clearTimeout(deferredCollapseRef.current);
-          deferredCollapseRef.current = null;
-        }
-        if (ctx.toasts.length > 1 && !ctx.interacting && !hoverCooldownRef.current) {
-          hoverTimeoutRef.current = setTimeout(function () {
-            return ctx.setExpanded(true);
-          }, 50);
-        }
-      },
-      onMouseLeave: function () {
-        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(function () {
-            deferredCollapseRef.current = null;
-            if (!mouseInsideRef.current) {
-              ctx.setExpanded(false);
-            }
-          }, 1200);
-        }
-      },
-      onPointerDown: function () {
-        if (hoverTimeoutRef.current) {
-          clearTimeout(hoverTimeoutRef.current);
-          hoverTimeoutRef.current = null;
-        }
-        ctx.setInteracting(true);
-      },
-      onPointerUp: function () {
-        return ctx.setInteracting(false);
-      },
-      onPointerCancel: function () {
-        return ctx.setInteracting(false);
-      }
-    } : {
-      onPress: function () {
-        if (ctx.toasts.length > 1) {
-          ctx.setExpanded(function (prev) {
-            return !prev;
-          });
-        }
-      }
-    }),
-    ...(isWeb && {
-      onFocus: function (event) {
-        if (!event.currentTarget.contains(event.relatedTarget)) {
-          if (ctx.toasts.length > 1) {
-            ctx.setExpanded(true);
-          }
-          ctx.setInteracting(true);
-        }
-      },
-      onBlur: function (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;
+var ToastViewport = createStyledHOC(ToastViewportFrame, function ToastViewport2(props, ref) {
+	var { offset = VIEWPORT_OFFSET, hotkey = DEFAULT_HOTKEY, label = "Notifications", portalToRoot = true, portalZIndex = Number.MAX_SAFE_INTEGER, children, ...rest } = props;
+	var ctx = useToastContext("Toast.Viewport");
+	var listRef = React.useRef(null);
+	var hoverTimeoutRef = React.useRef(null);
+	var hoverCooldownRef = React.useRef(false);
+	var deferredCollapseRef = React.useRef(null);
+	var mouseInsideRef = React.useRef(false);
+	var [yPosition, xPosition] = ctx.position.split("-");
+	var { insets: safeInsets } = useConfiguration();
+	var offsetStyles = React.useMemo(function() {
+		var styles = {};
+		var defaultOffset = typeof offset === "number" ? offset : VIEWPORT_OFFSET;
+		var offsetObj = (typeof offset === "undefined" ? "undefined" : _type_of(offset)) === "object" ? offset : {
+			top: defaultOffset,
+			right: defaultOffset,
+			bottom: defaultOffset,
+			left: defaultOffset
+		};
+		var _safeInsets_top;
+		var safeTop = (_safeInsets_top = safeInsets === null || safeInsets === void 0 ? void 0 : safeInsets.top) !== null && _safeInsets_top !== void 0 ? _safeInsets_top : 0;
+		var _safeInsets_bottom;
+		var safeBottom = (_safeInsets_bottom = safeInsets === null || safeInsets === void 0 ? void 0 : safeInsets.bottom) !== null && _safeInsets_bottom !== void 0 ? _safeInsets_bottom : 0;
+		var _offsetObj_top;
+		var topOffset = safeTop > 0 ? safeTop : (_offsetObj_top = offsetObj.top) !== null && _offsetObj_top !== void 0 ? _offsetObj_top : defaultOffset;
+		var _offsetObj_bottom;
+		var bottomOffset = safeBottom > 0 ? safeBottom : (_offsetObj_bottom = offsetObj.bottom) !== null && _offsetObj_bottom !== void 0 ? _offsetObj_bottom : defaultOffset;
+		if (yPosition === "top") styles.top = topOffset;
+		else styles.bottom = bottomOffset;
+		if (isWeb) {
+			var _offsetObj_left, _offsetObj_right;
+			if (xPosition === "left") styles.left = (_offsetObj_left = offsetObj.left) !== null && _offsetObj_left !== void 0 ? _offsetObj_left : defaultOffset;
+			else if (xPosition === "right") styles.right = (_offsetObj_right = offsetObj.right) !== null && _offsetObj_right !== void 0 ? _offsetObj_right : defaultOffset;
+			else {
+				styles.left = "50%";
+				styles.transform = "translateX(-50%)";
+			}
+		} else {
+			var _offsetObj_left1;
+			styles.left = (_offsetObj_left1 = offsetObj.left) !== null && _offsetObj_left1 !== void 0 ? _offsetObj_left1 : defaultOffset;
+			var _offsetObj_right1;
+			styles.right = (_offsetObj_right1 = offsetObj.right) !== null && _offsetObj_right1 !== void 0 ? _offsetObj_right1 : defaultOffset;
+		}
+		return styles;
+	}, [
+		offset,
+		yPosition,
+		xPosition
+	]);
+	React.useEffect(function() {
+		if (!isWeb) return;
+		var handleKeyDown = function(event) {
+			var isHotkeyPressed = hotkey.length > 0 && hotkey.every(function(key) {
+				return event[key] || event.code === key;
+			});
+			if (isHotkeyPressed) {
+				var _listRef_current;
+				ctx.setExpanded(true);
+				(_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return function() {
+			return document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [hotkey]);
+	if (ctx.toasts.length === 0) return null;
+	var hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+	var 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: function() {
+				mouseInsideRef.current = true;
+				if (deferredCollapseRef.current) {
+					clearTimeout(deferredCollapseRef.current);
+					deferredCollapseRef.current = null;
+				}
+				if (ctx.toasts.length > 1 && !ctx.interacting && !hoverCooldownRef.current) {
+					hoverTimeoutRef.current = setTimeout(function() {
+						return ctx.setExpanded(true);
+					}, 50);
+				}
+			},
+			onMouseLeave: function() {
+				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(function() {
+						deferredCollapseRef.current = null;
+						if (!mouseInsideRef.current) {
+							ctx.setExpanded(false);
+						}
+					}, 1200);
+				}
+			},
+			onPointerDown: function() {
+				if (hoverTimeoutRef.current) {
+					clearTimeout(hoverTimeoutRef.current);
+					hoverTimeoutRef.current = null;
+				}
+				ctx.setInteracting(true);
+			},
+			onPointerUp: function() {
+				return ctx.setInteracting(false);
+			},
+			onPointerCancel: function() {
+				return ctx.setInteracting(false);
+			}
+		} : { onPress: function() {
+			if (ctx.toasts.length > 1) {
+				ctx.setExpanded(function(prev) {
+					return !prev;
+				});
+			}
+		} },
+		...isWeb && {
+			onFocus: function(event) {
+				if (!event.currentTarget.contains(event.relatedTarget)) {
+					if (ctx.toasts.length > 1) {
+						ctx.setExpanded(true);
+					}
+					ctx.setInteracting(true);
+				}
+			},
+			onBlur: function(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(param) {
-  var {
-    renderItem
-  } = param;
-  var ctx = useToastContext("Toast.List");
-  var maxRender = ctx.toasts.length;
-  return /* @__PURE__ */_jsx(AnimatePresence, {
-    children: ctx.toasts.slice(0, maxRender).map(function (toast, index) {
-      var handleClose = function () {
-        var _toast_onDismiss;
-        if (toast.dismissible === false) return;
-        (_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 ? void 0 : _toast_onDismiss.call(toast, toast);
-        ctx.removeToast(toast);
-      };
-      var 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);
-    })
-  });
+	var { renderItem } = param;
+	var ctx = useToastContext("Toast.List");
+	var maxRender = ctx.toasts.length;
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: ctx.toasts.slice(0, maxRender).map(function(toast, index) {
+		var handleClose = function() {
+			var _toast_onDismiss;
+			if (toast.dismissible === false) return;
+			(_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 ? void 0 : _toast_onDismiss.call(toast, toast);
+			ctx.removeToast(toast);
+		};
+		var 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(param) {
-  var {
-    toast
-  } = param;
-  var ctx = useToastContext("Toast.Item");
-  var {
-    handleClose
-  } = useToastItemContext();
-  var _toast_type;
-  var toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default";
-  var dismissible = toast.dismissible !== false;
-  var title = typeof toast.title === "function" ? toast.title() : toast.title;
-  var 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: function (e) {
-            var _toast_cancel_onClick, _toast_cancel;
-            (_toast_cancel = toast.cancel) === null || _toast_cancel === void 0 ? void 0 : (_toast_cancel_onClick = _toast_cancel.onClick) === null || _toast_cancel_onClick === void 0 ? void 0 : _toast_cancel_onClick.call(_toast_cancel, 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: function (e) {
-            var _toast_action_onClick, _toast_action;
-            (_toast_action = toast.action) === null || _toast_action === void 0 ? void 0 : (_toast_action_onClick = _toast_action.onClick) === null || _toast_action_onClick === void 0 ? void 0 : _toast_action_onClick.call(_toast_action, 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, {})]
-  });
+	var { toast } = param;
+	var ctx = useToastContext("Toast.Item");
+	var { handleClose } = useToastItemContext();
+	var _toast_type;
+	var toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default";
+	var dismissible = toast.dismissible !== false;
+	var title = typeof toast.title === "function" ? toast.title() : toast.title;
+	var 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: function(e) {
+								var _toast_cancel_onClick, _toast_cancel;
+								(_toast_cancel = toast.cancel) === null || _toast_cancel === void 0 ? void 0 : (_toast_cancel_onClick = _toast_cancel.onClick) === null || _toast_cancel_onClick === void 0 ? void 0 : _toast_cancel_onClick.call(_toast_cancel, e);
+								handleClose();
+							},
+							children: /* @__PURE__ */ jsx(SizableText, {
+								size: "2",
+								children: toast.cancel.label
+							})
+						}), toast.action && /* @__PURE__ */ jsx(ToastActionFrame, {
+							onPress: function(e) {
+								var _toast_action_onClick, _toast_action;
+								(_toast_action = toast.action) === null || _toast_action === void 0 ? void 0 : (_toast_action_onClick = _toast_action.onClick) === null || _toast_action_onClick === void 0 ? void 0 : _toast_action_onClick.call(_toast_action, e);
+								if (!e.defaultPrevented) {
+									handleClose();
+								}
+							},
+							children: /* @__PURE__ */ jsx(SizableText, {
+								size: "2",
+								children: toast.action.label
+							})
+						})]
+					})
+				]
+			}),
+			ctx.closeButton && dismissible && /* @__PURE__ */ jsx(ToastClose, {})
+		]
+	});
 }
 function DragWrapper(param) {
-  var {
-    animatedStyle,
-    gestureHandlers,
-    gesture,
-    AnimatedView,
-    dragRef,
-    children
-  } = param;
-  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) {
-    var gh = getGestureHandler();
-    var 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
-  });
+	var { animatedStyle, gestureHandlers, gesture, AnimatedView, dragRef, children } = param;
+	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) {
+		var gh = getGestureHandler();
+		var 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
+	});
 }
-var ToastItemInner = ToastItemFrame.styleable(function ToastItem(props, ref) {
-  var {
-    toast,
-    index,
-    children,
-    ...rest
-  } = props;
-  var ctx = useToastContext("Toast.Item");
-  var [mounted, setMounted] = React.useState(false);
-  var [removed, setRemoved] = React.useState(false);
-  var [swipeOut, setSwipeOut] = React.useState(false);
-  var [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);
-  var swipeExitYRef = React.useRef(null);
-  var closeTimerRef = React.useRef(null);
-  var closeTimerStartRef = React.useRef(0);
-  var lastPauseTimeRef = React.useRef(0);
-  var _toast_duration;
-  var remainingTimeRef = React.useRef((_toast_duration = toast.duration) !== null && _toast_duration !== void 0 ? _toast_duration : ctx.duration);
-  var isFront = index === 0;
-  var isVisible = index < ctx.visibleToasts;
-  var _toast_type;
-  var toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default";
-  var dismissible = toast.dismissible !== false;
-  var _toast_duration1;
-  var duration = (_toast_duration1 = toast.duration) !== null && _toast_duration1 !== void 0 ? _toast_duration1 : ctx.duration;
-  var [yPosition] = ctx.position.split("-");
-  var isTop = yPosition === "top";
-  var expandedOffset = isWeb ? function () {
-    var totalHeight = 0;
-    var activeCount = 0;
-    for (var i = 0; i < index; i++) {
-      var _ctx_toasts_i;
-      var toastId = (_ctx_toasts_i = ctx.toasts[i]) === null || _ctx_toasts_i === void 0 ? void 0 : _ctx_toasts_i.id;
-      if (toastId == null) continue;
-      var h2 = ctx.heights[toastId];
-      if (h2 === 0) continue;
-      totalHeight += h2 !== null && h2 !== void 0 ? h2 : ctx.toastHeight;
-      activeCount++;
-    }
-    return totalHeight + activeCount * ctx.gap;
-  }() : index * (ctx.toastHeight + ctx.gap);
-  var expandedOffsetRef = React.useRef(expandedOffset);
-  expandedOffsetRef.current = expandedOffset;
-  var isExpandedRef = React.useRef(ctx.expanded);
-  isExpandedRef.current = ctx.expanded;
-  var startTimer = React.useCallback(function () {
-    if (duration === Number.POSITIVE_INFINITY || toastType === "loading") return;
-    closeTimerStartRef.current = Date.now();
-    closeTimerRef.current = setTimeout(function () {
-      var _toast_onAutoClose;
-      (_toast_onAutoClose = toast.onAutoClose) === null || _toast_onAutoClose === void 0 ? void 0 : _toast_onAutoClose.call(toast, toast);
-      setRemoved(true);
-      setTimeout(function () {
-        return ctx.removeToast(toast);
-      }, TIME_BEFORE_UNMOUNT);
-    }, remainingTimeRef.current);
-  }, [duration, toastType, toast, ctx.removeToast]);
-  var pauseTimer = useEvent(function () {
-    if (closeTimerRef.current) {
-      clearTimeout(closeTimerRef.current);
-    }
-    if (lastPauseTimeRef.current < closeTimerStartRef.current) {
-      var elapsed = Date.now() - closeTimerStartRef.current;
-      remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
-    }
-    lastPauseTimeRef.current = Date.now();
-  });
-  var resumeTimer = useEvent(function () {
-    if (ctx.expanded || ctx.interacting) return;
-    remainingTimeRef.current = duration;
-    startTimer();
-  });
-  React.useEffect(function () {
-    setMounted(true);
-  }, []);
-  React.useEffect(function () {
-    if (toast.delete) {
-      setRemoved(true);
-      if (isExpandedRef.current) {
-        setOffsetBeforeRemove(expandedOffsetRef.current);
-      }
-      setTimeout(function () {
-        return ctx.removeToast(toast);
-      }, TIME_BEFORE_UNMOUNT);
-    }
-  }, [toast.delete, toast, ctx.removeToast]);
-  React.useEffect(function () {
-    if (ctx.expanded || ctx.interacting) {
-      pauseTimer();
-    } else {
-      startTimer();
-    }
-    return function () {
-      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
-    };
-  }, [ctx.expanded, ctx.interacting, startTimer]);
-  React.useEffect(function () {
-    remainingTimeRef.current = duration;
-  }, [duration]);
-  var {
-    setDragOffset,
-    springBack,
-    animateOut,
-    animatedStyle,
-    AnimatedView,
-    dragRef
-  } = useToastAnimations({
-    reducedMotion: ctx.reducedMotion,
-    swipeAxis: ctx.swipeDirection === "up" || ctx.swipeDirection === "down" || ctx.swipeDirection === "vertical" ? "vertical" : "horizontal"
-  });
-  var {
-    isDragging,
-    gestureHandlers,
-    gesture
-  } = useAnimatedDragGesture({
-    direction: ctx.swipeDirection,
-    threshold: ctx.swipeThreshold,
-    disabled: !dismissible || toastType === "loading",
-    expanded: ctx.expanded,
-    onDragStart: pauseTimer,
-    onDragMove: setDragOffset,
-    onDismiss: function (exitDirection, velocity) {
-      var _toast_onDismiss;
-      ctx.triggerDismissCooldown();
-      setSwipeOut(true);
-      (_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 ? void 0 : _toast_onDismiss.call(toast, 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: function () {
-      springBack(function () {
-        resumeTimer();
-      });
-    }
-  });
-  var handleLayout = React.useCallback(function (event) {
-    if (!isWeb) return;
-    if (removed) return;
-    if (!ctx.expanded && index !== 0) return;
-    var {
-      height
-    } = event.nativeEvent.layout;
-    ctx.setToastHeight(toast.id, height);
-  }, [toast.id, ctx.setToastHeight, index, ctx.expanded, removed]);
-  React.useEffect(function () {
-    if (!isWeb) return;
-    return function () {
-      ctx.removeToastHeight(toast.id);
-    };
-  }, [toast.id, ctx.removeToastHeight]);
-  var handleClose = React.useCallback(function () {
-    var _toast_onDismiss;
-    if (!dismissible) return;
-    ctx.triggerDismissCooldown();
-    (_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 ? void 0 : _toast_onDismiss.call(toast, toast);
-    setRemoved(true);
-    if (isExpandedRef.current) {
-      setOffsetBeforeRemove(expandedOffsetRef.current);
-    }
-    setTimeout(function () {
-      return ctx.removeToast(toast);
-    }, TIME_BEFORE_UNMOUNT);
-  }, [dismissible, toast, ctx.removeToast, ctx.triggerDismissCooldown]);
-  var itemContextValue = React.useMemo(function () {
-    return {
-      toast,
-      handleClose
-    };
-  }, [toast, handleClose]);
-  var frontToastHeight = -1;
-  if (isWeb) {
-    var _iteratorNormalCompletion = true,
-      _didIteratorError = false,
-      _iteratorError = void 0;
-    try {
-      for (var _iterator = ctx.toasts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var t = _step.value;
-        var h = ctx.heights[t.id];
-        if (h != null && h > 0) {
-          frontToastHeight = h;
-          break;
-        }
-      }
-    } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion && _iterator.return != null) {
-          _iterator.return();
-        }
-      } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
-        }
-      }
-    }
-  }
-  var stackScale = !ctx.expanded && !isFront ? 1 - index * 0.05 : 1;
-  var activeExpandedOffset = removed ? offsetBeforeRemove : expandedOffset;
-  var stackY = ctx.expanded ? isTop ? activeExpandedOffset : -activeExpandedOffset : isFront ? 0 : isTop ? ctx.gap * index : -ctx.gap * index;
-  var computedOpacity = removed && !swipeOut ? 0 : index >= ctx.visibleToasts ? 0 : 1;
-  var computedZIndex = removed ? 0 : ctx.visibleToasts - index + 1;
-  var computedHeight = isWeb ? ctx.expanded ? ctx.heights[toast.id] || void 0 : !isFront && frontToastHeight > 0 ? frontToastHeight : void 0 : void 0;
-  var computedPointerEvents = index >= ctx.visibleToasts ? "none" : "auto";
-  var gapFillerHeight = ctx.expanded ? ctx.gap + 1 : 0;
-  var 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"
-  };
-  var _swipeExitYRef_current;
-  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 = swipeExitYRef.current) !== null && _swipeExitYRef_current !== void 0 ? _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: function (event) {
-            if (event.key === "Escape" && dismissible) {
-              var current = event.currentTarget;
-              var container = current.closest("[aria-label]");
-              if (container) {
-                var focusables = container.querySelectorAll('[tabindex="0"]');
-                var arr = Array.from(focusables);
-                var idx = arr.indexOf(current);
-                var next = arr[idx + 1] || arr[idx - 1];
-                next === null || next === void 0 ? void 0 : next.focus();
-              }
-              handleClose();
-            }
-          }
-        }),
-        ...rest,
-        children: [/* gap filler to prevent hover flicker */
-        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
-        })]
-      })
-    })
-  });
-});
-var ToastTitle = styled(SizableText, {
-  name: "ToastTitle",
-  variants: {
-    unstyled: {
-      false: {
-        color: "$color",
-        fontWeight: "600",
-        size: "$4"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+var ToastItemInner = createStyledHOC(ToastItemFrame, function ToastItem(props, ref) {
+	var { toast, index, children, ...rest } = props;
+	var ctx = useToastContext("Toast.Item");
+	var [mounted, setMounted] = React.useState(false);
+	var [removed, setRemoved] = React.useState(false);
+	var [swipeOut, setSwipeOut] = React.useState(false);
+	var [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);
+	var swipeExitYRef = React.useRef(null);
+	var closeTimerRef = React.useRef(null);
+	var closeTimerStartRef = React.useRef(0);
+	var lastPauseTimeRef = React.useRef(0);
+	var _toast_duration;
+	var remainingTimeRef = React.useRef((_toast_duration = toast.duration) !== null && _toast_duration !== void 0 ? _toast_duration : ctx.duration);
+	var isFront = index === 0;
+	var isVisible = index < ctx.visibleToasts;
+	var _toast_type;
+	var toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default";
+	var dismissible = toast.dismissible !== false;
+	var _toast_duration1;
+	var duration = (_toast_duration1 = toast.duration) !== null && _toast_duration1 !== void 0 ? _toast_duration1 : ctx.duration;
+	var [yPosition] = ctx.position.split("-");
+	var isTop = yPosition === "top";
+	var expandedOffset = isWeb ? (function() {
+		var totalHeight = 0;
+		var activeCount = 0;
+		for (var i = 0; i < index; i++) {
+			var _ctx_toasts_i;
+			var toastId = (_ctx_toasts_i = ctx.toasts[i]) === null || _ctx_toasts_i === void 0 ? void 0 : _ctx_toasts_i.id;
+			if (toastId == null) continue;
+			var h2 = ctx.heights[toastId];
+			if (h2 === 0) continue;
+			totalHeight += h2 !== null && h2 !== void 0 ? h2 : ctx.toastHeight;
+			activeCount++;
+		}
+		return totalHeight + activeCount * ctx.gap;
+	})() : index * (ctx.toastHeight + ctx.gap);
+	var expandedOffsetRef = React.useRef(expandedOffset);
+	expandedOffsetRef.current = expandedOffset;
+	var isExpandedRef = React.useRef(ctx.expanded);
+	isExpandedRef.current = ctx.expanded;
+	var startTimer = React.useCallback(function() {
+		if (duration === Number.POSITIVE_INFINITY || toastType === "loading") return;
+		closeTimerStartRef.current = Date.now();
+		closeTimerRef.current = setTimeout(function() {
+			var _toast_onAutoClose;
+			(_toast_onAutoClose = toast.onAutoClose) === null || _toast_onAutoClose === void 0 ? void 0 : _toast_onAutoClose.call(toast, toast);
+			setRemoved(true);
+			setTimeout(function() {
+				return ctx.removeToast(toast);
+			}, TIME_BEFORE_UNMOUNT);
+		}, remainingTimeRef.current);
+	}, [
+		duration,
+		toastType,
+		toast,
+		ctx.removeToast
+	]);
+	var pauseTimer = useEvent(function() {
+		if (closeTimerRef.current) {
+			clearTimeout(closeTimerRef.current);
+		}
+		if (lastPauseTimeRef.current < closeTimerStartRef.current) {
+			var elapsed = Date.now() - closeTimerStartRef.current;
+			remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+		}
+		lastPauseTimeRef.current = Date.now();
+	});
+	var resumeTimer = useEvent(function() {
+		if (ctx.expanded || ctx.interacting) return;
+		remainingTimeRef.current = duration;
+		startTimer();
+	});
+	React.useEffect(function() {
+		setMounted(true);
+	}, []);
+	React.useEffect(function() {
+		if (toast.delete) {
+			setRemoved(true);
+			if (isExpandedRef.current) {
+				setOffsetBeforeRemove(expandedOffsetRef.current);
+			}
+			setTimeout(function() {
+				return ctx.removeToast(toast);
+			}, TIME_BEFORE_UNMOUNT);
+		}
+	}, [
+		toast.delete,
+		toast,
+		ctx.removeToast
+	]);
+	React.useEffect(function() {
+		if (ctx.expanded || ctx.interacting) {
+			pauseTimer();
+		} else {
+			startTimer();
+		}
+		return function() {
+			if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+		};
+	}, [
+		ctx.expanded,
+		ctx.interacting,
+		startTimer
+	]);
+	React.useEffect(function() {
+		remainingTimeRef.current = duration;
+	}, [duration]);
+	var { setDragOffset, springBack, animateOut, animatedStyle, AnimatedView, dragRef } = useToastAnimations({ reducedMotion: ctx.reducedMotion });
+	var { isDragging, gestureHandlers, gesture } = useAnimatedDragGesture({
+		direction: ctx.swipeDirection,
+		threshold: ctx.swipeThreshold,
+		disabled: !dismissible || toastType === "loading",
+		expanded: ctx.expanded,
+		onDragStart: pauseTimer,
+		onDragMove: setDragOffset,
+		onDismiss: function(exitDirection, velocity) {
+			var _toast_onDismiss;
+			ctx.triggerDismissCooldown();
+			setSwipeOut(true);
+			(_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 ? void 0 : _toast_onDismiss.call(toast, 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: function() {
+			springBack(function() {
+				resumeTimer();
+			});
+		}
+	});
+	var handleLayout = React.useCallback(function(event) {
+		if (!isWeb) return;
+		if (removed) return;
+		if (!ctx.expanded && index !== 0) return;
+		var { height } = event.nativeEvent.layout;
+		ctx.setToastHeight(toast.id, height);
+	}, [
+		toast.id,
+		ctx.setToastHeight,
+		index,
+		ctx.expanded,
+		removed
+	]);
+	React.useEffect(function() {
+		if (!isWeb) return;
+		return function() {
+			ctx.removeToastHeight(toast.id);
+		};
+	}, [toast.id, ctx.removeToastHeight]);
+	var handleClose = React.useCallback(function() {
+		var _toast_onDismiss;
+		if (!dismissible) return;
+		ctx.triggerDismissCooldown();
+		(_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 ? void 0 : _toast_onDismiss.call(toast, toast);
+		setRemoved(true);
+		if (isExpandedRef.current) {
+			setOffsetBeforeRemove(expandedOffsetRef.current);
+		}
+		setTimeout(function() {
+			return ctx.removeToast(toast);
+		}, TIME_BEFORE_UNMOUNT);
+	}, [
+		dismissible,
+		toast,
+		ctx.removeToast,
+		ctx.triggerDismissCooldown
+	]);
+	var itemContextValue = React.useMemo(function() {
+		return {
+			toast,
+			handleClose
+		};
+	}, [toast, handleClose]);
+	var frontToastHeight = -1;
+	if (isWeb) {
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = ctx.toasts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var t = _step.value;
+				var h = ctx.heights[t.id];
+				if (h != null && h > 0) {
+					frontToastHeight = h;
+					break;
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+	}
+	var stackScale = !ctx.expanded && !isFront ? 1 - index * .05 : 1;
+	var activeExpandedOffset = removed ? offsetBeforeRemove : expandedOffset;
+	var stackY = ctx.expanded ? isTop ? activeExpandedOffset : -activeExpandedOffset : isFront ? 0 : isTop ? ctx.gap * index : -ctx.gap * index;
+	var computedOpacity = removed && !swipeOut ? 0 : index >= ctx.visibleToasts ? 0 : 1;
+	var computedZIndex = removed ? 0 : ctx.visibleToasts - index + 1;
+	var computedHeight = isWeb ? ctx.expanded ? ctx.heights[toast.id] || void 0 : !isFront && frontToastHeight > 0 ? frontToastHeight : void 0 : void 0;
+	var computedPointerEvents = index >= ctx.visibleToasts ? "none" : "auto";
+	var gapFillerHeight = ctx.expanded ? ctx.gap + 1 : 0;
+	var 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"
+	};
+	var _swipeExitYRef_current;
+	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 = swipeExitYRef.current) !== null && _swipeExitYRef_current !== void 0 ? _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: function(event) {
+					if (event.key === "Escape" && dismissible) {
+						var current = event.currentTarget;
+						var container = current.closest("[aria-label]");
+						if (container) {
+							var focusables = container.querySelectorAll("[tabindex=\"0\"]");
+							var arr = Array.from(focusables);
+							var idx = arr.indexOf(current);
+							var next = arr[idx + 1] || arr[idx - 1];
+							next === null || next === void 0 ? void 0 : 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
+				})]
+			})
+		})
+	});
 });
-var ToastDescription = styled(SizableText, {
-  name: "ToastDescription",
-  variants: {
-    unstyled: {
-      false: {
-        color: "$color11",
-        size: "$2"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+var ToastTitle = styled(SizableText, { displayName: "ToastTitle" });
+var ToastDescription = styled(SizableText, { displayName: "ToastDescription" });
+var ToastClose = createStyledHOC(ToastCloseFrame, function ToastClose2(props, ref) {
+	var _ctx_icons;
+	var handleClose;
+	try {
+		var itemCtx = useToastItemContext();
+		handleClose = itemCtx.handleClose;
+	} catch (e) {}
+	var ctx = useToastContext("Toast.Close");
+	var _props_children, _ref;
+	return /* @__PURE__ */ jsx(ToastCloseFrame, {
+		ref,
+		"aria-label": "Close toast",
+		onPress: handleClose,
+		...props,
+		children: (_ref = (_props_children = props.children) !== null && _props_children !== void 0 ? _props_children : (_ctx_icons = ctx.icons) === null || _ctx_icons === void 0 ? void 0 : _ctx_icons.close) !== null && _ref !== void 0 ? _ref : /* @__PURE__ */ jsx(DefaultCloseIcon, {})
+	});
 });
-var ToastClose = ToastCloseFrame.styleable(function ToastClose2(props, ref) {
-  var _ctx_icons;
-  var handleClose;
-  try {
-    var itemCtx = useToastItemContext();
-    handleClose = itemCtx.handleClose;
-  } catch (e) {}
-  var ctx = useToastContext("Toast.Close");
-  var _props_children, _ref;
-  return /* @__PURE__ */_jsx(ToastCloseFrame, {
-    ref,
-    "aria-label": "Close toast",
-    onPress: handleClose,
-    ...props,
-    children: (_ref = (_props_children = props.children) !== null && _props_children !== void 0 ? _props_children : (_ctx_icons = ctx.icons) === null || _ctx_icons === void 0 ? void 0 : _ctx_icons.close) !== null && _ref !== void 0 ? _ref : /* @__PURE__ */_jsx(DefaultCloseIcon, {})
-  });
-});
-var ToastAction = ToastActionFrame.styleable(function ToastAction2(props, ref) {
-  return /* @__PURE__ */_jsx(ToastActionFrame, {
-    ref,
-    ...props
-  });
+var ToastAction = createStyledHOC(ToastActionFrame, function ToastAction2(props, ref) {
+	return /* @__PURE__ */ jsx(ToastActionFrame, {
+		ref,
+		...props
+	});
 });
 function ToastIcon(props) {
-  var _ctx_icons;
-  var ctx = useToastContext("Toast.Icon");
-  var toast;
-  try {
-    var itemCtx = useToastItemContext();
-    toast = itemCtx.toast;
-  } catch (e) {
-    return null;
-  }
-  if (!toast) return null;
-  if (toast.icon !== void 0) {
-    return /* @__PURE__ */_jsx(View, {
-      flexShrink: 0,
-      marginTop: "$0.5",
-      children: toast.icon
-    });
-  }
-  var _toast_type;
-  var toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default";
-  var _ctx_icons_toastType;
-  var icon = (_ctx_icons_toastType = (_ctx_icons = ctx.icons) === null || _ctx_icons === void 0 ? void 0 : _ctx_icons[toastType]) !== null && _ctx_icons_toastType !== void 0 ? _ctx_icons_toastType : null;
-  if (!icon) return null;
-  return /* @__PURE__ */_jsx(View, {
-    flexShrink: 0,
-    marginTop: "$0.5",
-    children: icon
-  });
+	var _ctx_icons;
+	var ctx = useToastContext("Toast.Icon");
+	var toast;
+	try {
+		var itemCtx = useToastItemContext();
+		toast = itemCtx.toast;
+	} catch (e) {
+		return null;
+	}
+	if (!toast) return null;
+	if (toast.icon !== void 0) {
+		return /* @__PURE__ */ jsx(View, {
+			flexShrink: 0,
+			marginTop: "0-5",
+			children: toast.icon
+		});
+	}
+	var _toast_type;
+	var toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default";
+	var _ctx_icons_toastType;
+	var icon = (_ctx_icons_toastType = (_ctx_icons = ctx.icons) === null || _ctx_icons === void 0 ? void 0 : _ctx_icons[toastType]) !== null && _ctx_icons_toastType !== void 0 ? _ctx_icons_toastType : null;
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx(View, {
+		flexShrink: 0,
+		marginTop: "0-5",
+		children: icon
+	});
 }
 function useToasts() {
-  var ctx = useToastContext("useToasts");
-  return {
-    toasts: ctx.toasts,
-    expanded: ctx.expanded,
-    position: ctx.position
-  };
+	var 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";
 var 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.native.js.map