@tamagui/toast 2.0.0-rc.9 → 2.0.0

package/dist/jsx/ToastComposable.native.js

@@ -4,33 +4,35 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var ToastComposable_exports = {};
 __export(ToastComposable_exports, {
   Toast: () => Toast,
@@ -38,326 +40,476 @@ __export(ToastComposable_exports, {
   useToasts: () => useToasts
 });
 module.exports = __toCommonJS(ToastComposable_exports);
-var import_jsx_runtime = require("react/jsx-runtime"),
-  import_animate_presence = require("@tamagui/animate-presence"),
-  import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_helpers = require("@tamagui/helpers"),
-  import_portal = require("@tamagui/portal"),
-  import_stacks = require("@tamagui/stacks"),
-  import_text = require("@tamagui/text"),
-  React = __toESM(require("react"), 1),
-  import_ToastState = require("./ToastState.native.js"),
-  import_useAnimatedDragGesture = require("./useAnimatedDragGesture.native.js"),
-  import_useToastAnimations = require("./useToastAnimations.native.js"),
-  import_useReducedMotion = require("./useReducedMotion.native.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_animate_presence = require("@tamagui/animate-presence");
+var import_constants = require("@tamagui/constants");
+var import_native = require("@tamagui/native");
+var import_core = require("@tamagui/core");
+var import_helpers = require("@tamagui/helpers");
+var import_portal = require("@tamagui/portal");
+var import_stacks = require("@tamagui/stacks");
+var import_text = require("@tamagui/text");
+var React = __toESM(require("react"), 1);
+var import_ToastState = require("./ToastState.native.js");
+var import_dispatchNativeToast = require("./dispatchNativeToast.native.js");
+var import_useAnimatedDragGesture = require("./useAnimatedDragGesture.native.js");
+var import_useToastAnimations = require("./useToastAnimations.native.js");
+var import_useReducedMotion = require("./useReducedMotion.native.js");
+var import_ToastItemFrame = require("./ToastItemFrame.native.js");
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
-  return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-var VISIBLE_TOASTS_AMOUNT = 4,
-  VIEWPORT_OFFSET = 24,
-  TOAST_GAP = 14,
-  TOAST_LIFETIME = 4e3,
-  TIME_BEFORE_UNMOUNT = 200,
-  ToastContext = (0, import_core.createStyledContext)({}, "Toast__"),
-  useToastContext = ToastContext.useStyledContext,
-  ToastItemContext = /* @__PURE__ */React.createContext(null);
+var VISIBLE_TOASTS_AMOUNT = 4;
+var VIEWPORT_OFFSET = 16;
+var TOAST_GAP = 14;
+var TOAST_LIFETIME = 4e3;
+var FIXED_TOAST_HEIGHT = 72;
+var TIME_BEFORE_UNMOUNT = 200;
+var DEFAULT_HOTKEY = ["altKey", "KeyT"];
+var ToastContext = (0, import_core.createStyledContext)({}, "Toast__");
+var useToastContext = ToastContext.useStyledContext;
+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");
+  if (!ctx) {
+    throw new Error("useToastItemContext must be used within Toast.Item or Toast.List");
+  }
   return ctx;
 }
-var DefaultSuccessIcon = function () {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-      size: "$5",
-      color: "$green10",
-      children: "\u2713"
-    });
-  },
-  DefaultErrorIcon = function () {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-      size: "$5",
-      color: "$red10",
-      children: "\u2715"
-    });
-  },
-  DefaultWarningIcon = function () {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-      size: "$5",
-      color: "$yellow10",
-      children: "\u26A0"
-    });
-  },
-  DefaultInfoIcon = function () {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-      size: "$5",
-      color: "$blue10",
-      children: "\u2139"
-    });
-  },
-  DefaultLoadingIcon = function () {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-      size: "$5",
-      color: "$color11",
-      children: "\u27F3"
-    });
-  },
-  DefaultCloseIcon = function () {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-      size: "$1",
-      color: "$color11",
-      children: "\u2715"
-    });
-  };
 function resolveSwipeDirection(direction, position) {
   if (direction !== "auto") return direction;
   var [yPosition, xPosition] = position.split("-");
-  return xPosition === "left" ? "left" : xPosition === "right" ? "right" : yPosition === "top" ? "up" : "down";
+  if (!import_constants.isWeb) {
+    return yPosition === "top" ? "up" : "down";
+  }
+  if (xPosition === "left") return "left";
+  if (xPosition === "right") return "right";
+  return "horizontal";
 }
-var ToastRoot = /* @__PURE__ */React.forwardRef(function (props, ref) {
-    var {
-        children,
-        position = "bottom-right",
-        duration = TOAST_LIFETIME,
-        gap = TOAST_GAP,
-        visibleToasts = VISIBLE_TOASTS_AMOUNT,
-        swipeDirection: swipeDirectionProp = "auto",
-        swipeThreshold = 50,
-        closeButton = !1,
-        theme: themeProp,
-        reducedMotion: reducedMotionProp,
-        icons
-      } = props,
-      reducedMotion = (0, import_useReducedMotion.useReducedMotion)(reducedMotionProp),
-      [toasts, setToasts] = React.useState([]),
-      [heights, setHeights] = React.useState([]),
-      [expanded, setExpanded] = React.useState(!1),
-      [interacting, setInteracting] = React.useState(!1);
-    React.useEffect(function () {
-      return import_ToastState.ToastState.subscribe(function (toast) {
-        if (toast.dismiss) {
-          setToasts(function (toasts2) {
-            return toasts2.map(function (t) {
-              return t.id === toast.id ? {
-                ...t,
-                delete: !0
-              } : t;
-            });
-          });
-          return;
-        }
+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 = (0, import_useReducedMotion.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 import_ToastState.ToastState.subscribe(function (toast) {
+      if (toast.dismiss) {
         setToasts(function (toasts2) {
-          var idx = toasts2.findIndex(function (t) {
-            return t.id === toast.id;
+          return toasts2.map(function (t) {
+            return t.id === toast.id ? {
+              ...t,
+              delete: true
+            } : t;
           });
-          return idx !== -1 ? [...toasts2.slice(0, idx), {
+        });
+        return;
+      }
+      if (native) {
+        var handled = (0, import_dispatchNativeToast.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)] : [toast, ...toasts2];
-        });
+          }, ...toasts2.slice(idx + 1)];
+        }
+        return [toast, ...toasts2];
       });
-    }, []), React.useEffect(function () {
-      toasts.length <= 1 && setExpanded(!1);
-    }, [toasts.length]);
-    var removeToast = React.useCallback(function (toastToRemove) {
-        setToasts(function (toasts2) {
-          var _toasts_find;
-          return !((_toasts_find = toasts2.find(function (t) {
-            return t.id === toastToRemove.id;
-          })) === null || _toasts_find === void 0) && _toasts_find.delete || import_ToastState.ToastState.dismiss(toastToRemove.id), toasts2.filter(function (param) {
-            var {
-              id
-            } = param;
-            return id !== toastToRemove.id;
-          });
-        });
-      }, []),
-      swipeDirection = resolveSwipeDirection(swipeDirectionProp, position),
-      currentTheme = (0, import_core.useThemeName)(),
-      resolvedTheme = themeProp === "system" || !themeProp ? currentTheme?.includes("dark") ? "dark" : "light" : themeProp,
-      contextValue = {
-        toasts,
-        heights,
-        setHeights,
-        expanded,
-        setExpanded,
-        interacting,
-        setInteracting,
-        removeToast,
-        position,
-        duration,
-        gap,
-        visibleToasts,
-        swipeDirection,
-        swipeThreshold,
-        closeButton,
-        reducedMotion,
-        icons
-      };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastContext.Provider, {
-      ...contextValue,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
-        name: resolvedTheme,
-        children
-      })
     });
-  }),
-  ToastViewportFrame = (0, import_core.styled)(import_core.View, {
-    name: "ToastViewport",
-    variants: {
-      unstyled: {
-        false: {
-          position: import_constants.isWeb ? "fixed" : "absolute",
-          zIndex: 1e5,
-          pointerEvents: "box-none",
-          maxWidth: "100%",
-          width: 356,
-          minHeight: 1
-        }
+  }, [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)) {
+        import_ToastState.ToastState.dismiss(toastToRemove.id);
+      }
+      return toasts2.filter(function (param) {
+        var {
+          id
+        } = param;
+        return id !== toastToRemove.id;
+      });
+    });
+  }, []);
+  var swipeDirection = resolveSwipeDirection(swipeDirectionProp, position);
+  var currentTheme = (0, import_core.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__ */(0, import_jsx_runtime.jsx)(ToastContext.Provider, {
+    ...contextValue,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
+      name: resolvedTheme,
+      children
+    })
+  });
+});
+var ToastViewportFrame = (0, import_core.styled)(import_core.View, {
+  name: "ToastViewport",
+  variants: {
+    unstyled: {
+      false: {
+        position: import_constants.isWeb ? "fixed" : "absolute",
+        zIndex: 1e5,
+        pointerEvents: "box-none",
+        maxWidth: "100%",
+        ...(import_constants.isWeb && {
+          width: 356
+        }),
+        minHeight: 1
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  ToastViewport = ToastViewportFrame.styleable(function (props, ref) {
-    var {
-        offset = VIEWPORT_OFFSET,
-        hotkey = ["altKey", "KeyT"],
-        label = "Notifications",
-        portalToRoot = !0,
-        children,
-        ...rest
-      } = props,
-      ctx = useToastContext(),
-      listRef = React.useRef(null),
-      hoverTimeoutRef = React.useRef(null),
-      hoverCooldownRef = React.useRef(!1),
-      [yPosition, xPosition] = ctx.position.split("-"),
-      offsetStyles = React.useMemo(function () {
-        var styles = {},
-          defaultOffset = typeof offset == "number" ? offset : VIEWPORT_OFFSET,
-          offsetObj = (typeof offset > "u" ? "undefined" : _type_of(offset)) === "object" ? offset : {
-            top: defaultOffset,
-            right: defaultOffset,
-            bottom: defaultOffset,
-            left: defaultOffset
-          },
-          _offsetObj_top,
-          _offsetObj_bottom;
-        yPosition === "top" ? styles.top = (_offsetObj_top = offsetObj.top) !== null && _offsetObj_top !== void 0 ? _offsetObj_top : defaultOffset : styles.bottom = (_offsetObj_bottom = offsetObj.bottom) !== null && _offsetObj_bottom !== void 0 ? _offsetObj_bottom : defaultOffset;
-        var _offsetObj_left, _offsetObj_right;
-        return xPosition === "left" ? styles.left = (_offsetObj_left = offsetObj.left) !== null && _offsetObj_left !== void 0 ? _offsetObj_left : defaultOffset : xPosition === "right" ? styles.right = (_offsetObj_right = offsetObj.right) !== null && _offsetObj_right !== void 0 ? _offsetObj_right : defaultOffset : (styles.left = "50%", styles.transform = "translateX(-50%)"), styles;
-      }, [offset, yPosition, xPosition]);
-    if (React.useEffect(function () {
-      if (import_constants.isWeb) {
-        var handleKeyDown = function (event) {
-          var isHotkeyPressed = hotkey.length > 0 && hotkey.every(function (key) {
-            return event[key] || event.code === key;
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "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();
+  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
+  } = (0, import_core.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 (import_constants.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 (!import_constants.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__ */(0, import_jsx_runtime.jsx)(ToastViewportFrame, {
+    ref: listRef,
+    "aria-label": `${label} ${hotkeyLabel}`,
+    tabIndex: -1,
+    "aria-live": "polite",
+    style: offsetStyles,
+    "data-y-position": yPosition,
+    "data-x-position": xPosition,
+    ...(import_constants.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;
           });
-          if (isHotkeyPressed) {
-            var _listRef_current;
-            ctx.setExpanded(!0), (_listRef_current = listRef.current) === null || _listRef_current === void 0 || _listRef_current.focus();
+        }
+      }
+    }),
+    ...(import_constants.isWeb && {
+      onFocus: function (event) {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          if (ctx.toasts.length > 1) {
+            ctx.setExpanded(true);
           }
-          event.code === "Escape" && ctx.setExpanded(!1);
-        };
-        return document.addEventListener("keydown", handleKeyDown), function () {
-          return document.removeEventListener("keydown", handleKeyDown);
-        };
+          ctx.setInteracting(true);
+        }
+      },
+      onBlur: function (event) {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          ctx.setInteracting(false);
+          if (!ctx.isInDismissCooldown()) {
+            ctx.setExpanded(false);
+          }
+        }
       }
-    }, [hotkey]), ctx.toasts.length === 0) return null;
-    var hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, ""),
-      content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastViewportFrame, {
-        ref: listRef,
-        "aria-label": `${label} ${hotkeyLabel}`,
-        tabIndex: -1,
-        "aria-live": "polite",
-        style: offsetStyles,
-        "data-y-position": yPosition,
-        "data-x-position": xPosition,
-        onMouseEnter: function () {
-          ctx.toasts.length > 1 && !ctx.interacting && !hoverCooldownRef.current && (hoverTimeoutRef.current = setTimeout(function () {
-            return ctx.setExpanded(!0);
-          }, 50));
-        },
-        onMouseLeave: function () {
-          hoverTimeoutRef.current && (clearTimeout(hoverTimeoutRef.current), hoverTimeoutRef.current = null), ctx.interacting || ctx.setExpanded(!1);
-        },
-        onPointerDown: function () {
-          hoverTimeoutRef.current && (clearTimeout(hoverTimeoutRef.current), hoverTimeoutRef.current = null), ctx.setInteracting(!0);
-        },
-        onPointerUp: function () {
-          return ctx.setInteracting(!1);
-        },
-        ...rest,
-        children
-      });
-    return portalToRoot && import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
-      children: content
-    }) : content;
+    }),
+    ...rest,
+    children
   });
+  if (portalToRoot) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
+      zIndex: portalZIndex,
+      children: content
+    });
+  }
+  return content;
+});
 function ToastList(param) {
   var {
-      renderItem
-    } = param,
-    ctx = useToastContext(),
-    getHeightBeforeMe = function (index) {
-      var heightIndex = ctx.heights.findIndex(function (h) {
-        var _ctx_toasts_index;
-        return h.toastId === ((_ctx_toasts_index = ctx.toasts[index]) === null || _ctx_toasts_index === void 0 ? void 0 : _ctx_toasts_index.id);
-      });
-      return heightIndex === -1 ? 0 : ctx.heights.reduce(function (prev, curr, i) {
-        return i >= heightIndex ? prev : prev + curr.height;
-      }, 0);
-    };
+    renderItem
+  } = param;
+  var ctx = useToastContext();
+  var maxRender = ctx.toasts.length;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
-    children: ctx.toasts.map(function (toast, index) {
+    children: ctx.toasts.slice(0, maxRender).map(function (toast, index) {
       var handleClose = function () {
-          var _toast_onDismiss;
-          toast.dismissible !== !1 && ((_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 || _toast_onDismiss.call(toast, toast), ctx.removeToast(toast));
-        },
-        itemContextValue = {
-          toast,
-          handleClose
-        };
-      return renderItem ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemContext.Provider, {
+        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__ */(0, import_jsx_runtime.jsx)(ToastItemContext.Provider, {
+          value: itemContextValue,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemInner, {
+            toast,
+            index,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultToastContent, {
+              toast
+            })
+          })
+        }, toast.id);
+      }
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemContext.Provider, {
         value: itemContextValue,
         children: renderItem({
           toast,
           index,
           handleClose
         })
-      }, toast.id) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemContext.Provider, {
-        value: itemContextValue,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemInner, {
-          toast,
-          index,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultToastContent, {
-            toast
-          })
-        })
       }, toast.id);
     })
   });
 }
 function DefaultToastContent(param) {
   var {
-      toast
-    } = param,
-    ctx = useToastContext(),
-    {
-      handleClose
-    } = useToastItemContext(),
-    _toast_type,
-    toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default",
-    title = typeof toast.title == "function" ? toast.title() : toast.title,
-    description = typeof toast.description == "function" ? toast.description() : toast.description;
+    toast
+  } = param;
+  var ctx = useToastContext();
+  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__ */(0, import_jsx_runtime.jsxs)(import_stacks.XStack, {
     alignItems: "flex-start",
     gap: "$3",
-    children: [toastType !== "default" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastIcon, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastIcon, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
       flex: 1,
       gap: "$1",
       children: [title && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastTitle, {
@@ -367,18 +519,19 @@ function DefaultToastContent(param) {
       }), (toast.action || toast.cancel) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_stacks.XStack, {
         gap: "$2",
         marginTop: "$2",
-        children: [toast.cancel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionFrame, {
+        children: [toast.cancel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.ToastActionFrame, {
           backgroundColor: "transparent",
           onPress: function (e) {
             var _toast_cancel_onClick, _toast_cancel;
-            (_toast_cancel = toast.cancel) === null || _toast_cancel === void 0 || (_toast_cancel_onClick = _toast_cancel.onClick) === null || _toast_cancel_onClick === void 0 || _toast_cancel_onClick.call(_toast_cancel, e), handleClose();
+            (_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__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
             size: "$2",
             color: "$color11",
             children: toast.cancel.label
           })
-        }), toast.action && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionFrame, {
+        }), toast.action && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.ToastActionFrame, {
           backgroundColor: "$color12",
           hoverStyle: {
             backgroundColor: "$color11"
@@ -388,7 +541,10 @@ function DefaultToastContent(param) {
           },
           onPress: function (e) {
             var _toast_action_onClick, _toast_action;
-            (_toast_action = toast.action) === null || _toast_action === void 0 || (_toast_action_onClick = _toast_action.onClick) === null || _toast_action_onClick === void 0 || _toast_action_onClick.call(_toast_action, e), e.defaultPrevented || handleClose();
+            (_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__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
             size: "$2",
@@ -398,74 +554,58 @@ function DefaultToastContent(param) {
           })
         })]
       })]
-    }), ctx.closeButton && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastClose, {})]
+    }), ctx.closeButton && dismissible && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastClose, {})]
   });
 }
-var ToastPositionWrapper = (0, import_core.styled)(import_stacks.YStack, {
-    name: "ToastPositionWrapper",
-    pointerEvents: "auto",
-    position: "absolute",
-    left: 0,
-    right: 0,
-    opacity: 1,
-    scale: 1,
-    y: 0,
-    x: 0
-  }),
-  ToastItemFrame = (0, import_core.styled)(import_stacks.YStack, {
-    name: "ToastItem",
-    userSelect: "none",
-    cursor: "grab",
-    focusable: !0,
-    variants: {
-      unstyled: {
-        false: {
-          backgroundColor: "$background",
-          borderRadius: "$4",
-          paddingHorizontal: "$4",
-          paddingVertical: "$3",
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          shadowColor: "rgba(0, 0, 0, 0.15)",
-          shadowOffset: {
-            width: 0,
-            height: 4
-          },
-          shadowRadius: 12,
-          focusVisibleStyle: {
-            outlineWidth: 2,
-            outlineColor: "$color8",
-            outlineStyle: "solid"
-          }
-        }
-      }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
-    }
-  });
 function DragWrapper(param) {
   var {
     animatedStyle,
     gestureHandlers,
+    gesture,
     AnimatedView,
     dragRef,
     children
   } = param;
-  return import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-    ref: dragRef,
-    style: {
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      userSelect: "none",
-      WebkitUserSelect: "none",
-      touchAction: "none",
-      cursor: "grab"
-    },
-    ...gestureHandlers,
-    children
-  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedView, {
+  if (import_constants.isWeb) {
+    return /* @__PURE__ */(0, import_jsx_runtime.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 = (0, import_native.getGestureHandler)();
+    var GestureDetector = gh.state.GestureDetector;
+    if (GestureDetector) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(GestureDetector, {
+        gesture,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+          style: {
+            flex: 1
+          },
+          ...{
+            collapsable: false
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedView, {
+            style: [{
+              flex: 1
+            }, animatedStyle],
+            children
+          })
+        })
+      });
+    }
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedView, {
     style: [{
       flex: 1
     }, animatedStyle],
@@ -473,376 +613,392 @@ function DragWrapper(param) {
     children
   });
 }
-var ToastItemInner = ToastItemFrame.styleable(function (props, ref) {
-    var _ctx_heights_,
-      {
-        toast,
-        index,
-        children,
-        ...rest
-      } = props,
-      ctx = useToastContext(),
-      [mounted, setMounted] = React.useState(!1),
-      [removed, setRemoved] = React.useState(!1),
-      [swipeOut, setSwipeOut] = React.useState(!1),
-      closeTimerRef = React.useRef(null),
-      closeTimerStartRef = React.useRef(0),
-      lastPauseTimeRef = React.useRef(0),
-      _toast_duration,
-      remainingTimeRef = React.useRef((_toast_duration = toast.duration) !== null && _toast_duration !== void 0 ? _toast_duration : ctx.duration),
-      isFront = index === 0,
-      isVisible = index < ctx.visibleToasts,
-      _toast_type,
-      toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default",
-      dismissible = toast.dismissible !== !1,
-      _toast_duration1,
-      duration = (_toast_duration1 = toast.duration) !== null && _toast_duration1 !== void 0 ? _toast_duration1 : ctx.duration,
-      [yPosition] = ctx.position.split("-"),
-      isTop = yPosition === "top",
-      heightIndex = React.useMemo(function () {
-        return ctx.heights.findIndex(function (h) {
-          return h.toastId === toast.id;
-        }) || 0;
-      }, [ctx.heights, toast.id]),
-      toastsHeightBefore = React.useMemo(function () {
-        return ctx.heights.reduce(function (prev, curr, i) {
-          return i >= heightIndex ? prev : prev + curr.height;
-        }, 0);
-      }, [ctx.heights, heightIndex]),
-      startTimer = React.useCallback(function () {
-        duration === Number.POSITIVE_INFINITY || toastType === "loading" || (closeTimerStartRef.current = Date.now(), closeTimerRef.current = setTimeout(function () {
-          var _toast_onAutoClose;
-          (_toast_onAutoClose = toast.onAutoClose) === null || _toast_onAutoClose === void 0 || _toast_onAutoClose.call(toast, toast), setRemoved(!0), setTimeout(function () {
-            return ctx.removeToast(toast);
-          }, TIME_BEFORE_UNMOUNT);
-        }, remainingTimeRef.current));
-      }, [duration, toastType, toast, ctx.removeToast]),
-      pauseTimer = (0, import_core.useEvent)(function () {
-        if (closeTimerRef.current && clearTimeout(closeTimerRef.current), lastPauseTimeRef.current < closeTimerStartRef.current) {
-          var elapsed = Date.now() - closeTimerStartRef.current;
-          remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
-        }
-        lastPauseTimeRef.current = Date.now();
-      }),
-      resumeTimer = (0, import_core.useEvent)(function () {
-        startTimer();
+var ToastItemInner = import_ToastItemFrame.ToastItemFrame.styleable(function ToastItem(props, ref) {
+  var {
+    toast,
+    index,
+    children,
+    ...rest
+  } = props;
+  var ctx = useToastContext();
+  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 = import_constants.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 = (0, import_core.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 = (0, import_core.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
+  } = (0, import_useToastAnimations.useToastAnimations)({
+    reducedMotion: ctx.reducedMotion,
+    swipeAxis: ctx.swipeDirection === "up" || ctx.swipeDirection === "down" || ctx.swipeDirection === "vertical" ? "vertical" : "horizontal"
+  });
+  var {
+    isDragging,
+    gestureHandlers,
+    gesture
+  } = (0, import_useAnimatedDragGesture.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();
       });
-    React.useEffect(function () {
-      setMounted(!0);
-    }, []), React.useEffect(function () {
-      toast.delete && (setRemoved(!0), setTimeout(function () {
-        ctx.removeToast(toast);
-      }, TIME_BEFORE_UNMOUNT));
-    }, [toast.delete, toast, ctx.removeToast]), React.useEffect(function () {
-      return ctx.expanded || ctx.interacting ? pauseTimer() : startTimer(), function () {
-        closeTimerRef.current && clearTimeout(closeTimerRef.current);
-      };
-    }, [ctx.expanded, ctx.interacting, startTimer]), React.useEffect(function () {
-      remainingTimeRef.current = duration;
-    }, [duration]);
+    }
+  });
+  var handleLayout = React.useCallback(function (event) {
+    if (!import_constants.isWeb) return;
+    if (removed) return;
+    if (!ctx.expanded && index !== 0) return;
     var {
-        setDragOffset,
-        springBack,
-        animateOut,
-        animatedStyle,
-        AnimatedView,
-        dragRef
-      } = (0, import_useToastAnimations.useToastAnimations)({
-        reducedMotion: ctx.reducedMotion
-      }),
-      {
-        isDragging,
-        gestureHandlers
-      } = (0, import_useAnimatedDragGesture.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;
-          setSwipeOut(!0), (_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 || _toast_onDismiss.call(toast, toast), setRemoved(!0), ctx.setHeights(function (prev) {
-            return prev.filter(function (h) {
-              return h.toastId !== toast.id;
-            });
-          }), animateOut(exitDirection, velocity, function () {
-            return ctx.removeToast(toast);
-          });
-        },
-        onCancel: function () {
-          springBack(function () {
-            resumeTimer();
-          });
+      height
+    } = event.nativeEvent.layout;
+    ctx.setToastHeight(toast.id, height);
+  }, [toast.id, ctx.setToastHeight, index, ctx.expanded, removed]);
+  React.useEffect(function () {
+    if (!import_constants.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 (import_constants.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;
         }
-      }),
-      handleLayout = React.useCallback(function (event) {
-        var {
-          height
-        } = event.nativeEvent.layout;
-        ctx.setHeights(function (prev) {
-          var exists = prev.find(function (h) {
-            return h.toastId === toast.id;
-          });
-          return exists ? prev.map(function (h) {
-            return h.toastId === toast.id ? {
-              ...h,
-              height
-            } : h;
-          }) : [{
-            toastId: toast.id,
-            height
-          }, ...prev];
-        });
-      }, [toast.id]);
-    React.useEffect(function () {
-      return function () {
-        ctx.setHeights(function (prev) {
-          return prev.filter(function (h) {
-            return h.toastId !== toast.id;
-          });
-        });
-      };
-    }, [toast.id]);
-    var handleClose = React.useCallback(function () {
-        var _toast_onDismiss;
-        dismissible && ((_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 || _toast_onDismiss.call(toast, toast), setRemoved(!0), setTimeout(function () {
-          return ctx.removeToast(toast);
-        }, TIME_BEFORE_UNMOUNT));
-      }, [dismissible, toast, ctx.removeToast]),
-      _ctx_heights__height,
-      frontToastHeight = ctx.heights.length > 0 && (_ctx_heights__height = (_ctx_heights_ = ctx.heights[0]) === null || _ctx_heights_ === void 0 ? void 0 : _ctx_heights_.height) !== null && _ctx_heights__height !== void 0 ? _ctx_heights__height : 55,
-      stackScale = !ctx.expanded && !isFront ? 1 - index * 0.05 : 1,
-      expandedOffset = toastsHeightBefore + index * ctx.gap,
-      peekVisible = 10,
-      stackY = ctx.expanded ? isTop ? expandedOffset : -expandedOffset : isFront ? 0 : isTop ? peekVisible * index : -peekVisible * index,
-      computedOpacity = index >= ctx.visibleToasts ? 0 : !ctx.expanded && index === ctx.visibleToasts - 1 ? 0.5 : 1,
-      computedZIndex = removed ? 0 : ctx.visibleToasts - index + 1,
-      computedHeight = !ctx.expanded && !isFront ? frontToastHeight : void 0,
-      computedPointerEvents = index >= ctx.visibleToasts ? "none" : "auto",
-      gapFillerHeight = ctx.expanded ? ctx.gap + 1 : 0,
-      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__ */(0, import_jsx_runtime.jsx)(ToastPositionWrapper, {
-      ref,
-      ...dataAttributes,
-      onLayout: handleLayout,
-      transition: isDragging || ctx.reducedMotion ? void 0 : "200ms",
-      y: stackY,
-      scale: stackScale,
-      opacity: computedOpacity,
-      zIndex: computedZIndex,
-      height: computedHeight,
-      overflow: computedHeight ? "hidden" : void 0,
-      pointerEvents: computedPointerEvents,
-      top: isTop ? 0 : void 0,
-      bottom: isTop ? void 0 : 0,
-      ...(import_constants.isWeb && !isFront && !ctx.expanded && {
-        style: {
-          transformOrigin: isTop ? "top center" : "bottom center"
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
         }
-      }),
-      enterStyle: ctx.reducedMotion ? {
-        opacity: 0
-      } : {
-        opacity: 0,
-        y: isTop ? -10 : 10,
-        scale: 0.95
-      },
-      exitStyle: ctx.reducedMotion ? {
-        opacity: 0
-      } : {
-        opacity: 0,
-        x: 0,
-        y: swipeOut ? 0 : isTop ? -10 : 10,
-        scale: swipeOut ? 1 : 0.95
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DragWrapper, {
-        animatedStyle,
-        gestureHandlers,
-        AnimatedView,
-        dragRef,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ToastItemFrame, {
-          role: "status",
-          "aria-live": "polite",
-          "aria-atomic": !0,
-          tabIndex: 0,
-          ...(import_constants.isWeb && {
-            onKeyDown: function (event) {
-              event.key === "Escape" && dismissible && handleClose();
-            }
-          }),
-          ...rest,
-          children: [/* gap filler to prevent hover flicker */
-          ctx.expanded && gapFillerHeight > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            height: gapFillerHeight,
-            pointerEvents: "auto",
-            ...(isTop ? {
-              top: "100%"
-            } : {
-              bottom: "100%"
-            })
-          }), children]
-        })
-      })
-    });
-  }),
-  ToastTitle = (0, import_core.styled)(import_text.SizableText, {
-    name: "ToastTitle",
-    variants: {
-      unstyled: {
-        false: {
-          color: "$color",
-          fontWeight: "600",
-          size: "$4"
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
         }
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  ToastDescription = (0, import_core.styled)(import_text.SizableText, {
-    name: "ToastDescription",
-    variants: {
-      unstyled: {
-        false: {
-          color: "$color11",
-          size: "$2"
-        }
+  }
+  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 = import_constants.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__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.ToastPositionWrapper, {
+    ref,
+    testID: rest.testID,
+    accessibilityLabel: rest.accessibilityLabel,
+    ...dataAttributes,
+    transition: isDragging || ctx.reducedMotion ? void 0 : removed ? "200ms" : "400ms",
+    animateOnly: import_constants.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,
+    ...(import_constants.isWeb && !isFront && {
+      style: {
+        transformOrigin: isTop ? "top center" : "bottom center"
       }
+    }),
+    enterStyle: ctx.reducedMotion ? {
+      opacity: 0
+    } : {
+      opacity: 0,
+      y: isTop ? -80 : 80
     },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
-    }
-  }),
-  ToastCloseFrame = (0, import_core.styled)(import_stacks.XStack, {
-    name: "ToastClose",
-    render: "button",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    variants: {
-      unstyled: {
-        false: {
-          width: 20,
-          height: 20,
-          borderRadius: "$10",
-          backgroundColor: "$color5",
-          hoverStyle: {
-            backgroundColor: "$color6"
-          },
-          pressStyle: {
-            backgroundColor: "$color7"
+    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__ */(0, import_jsx_runtime.jsx)(DragWrapper, {
+      animatedStyle,
+      gestureHandlers,
+      gesture,
+      AnimatedView,
+      dragRef,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_ToastItemFrame.ToastItemFrame, {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": true,
+        tabIndex: 0,
+        onLayout: handleLayout,
+        ...(import_constants.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__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          height: gapFillerHeight,
+          pointerEvents: "auto",
+          ...(isTop ? {
+            top: "100%"
+          } : {
+            bottom: "100%"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemContext.Provider, {
+          value: itemContextValue,
+          children
+        })]
+      })
+    })
+  });
+});
+var ToastTitle = (0, import_core.styled)(import_text.SizableText, {
+  name: "ToastTitle",
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color",
+        fontWeight: "600",
+        size: "$4"
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  ToastClose = ToastCloseFrame.styleable(function (props, ref) {
-    var _ctx_icons, handleClose;
-    try {
-      var itemCtx = useToastItemContext();
-      handleClose = itemCtx.handleClose;
-    } catch {}
-    var ctx = useToastContext(),
-      _props_children,
-      _ref;
-    return /* @__PURE__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.jsx)(DefaultCloseIcon, {})
-    });
-  }),
-  ToastActionFrame = (0, import_core.styled)(import_stacks.XStack, {
-    name: "ToastAction",
-    render: "button",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    variants: {
-      unstyled: {
-        false: {
-          borderRadius: "$2",
-          paddingHorizontal: "$2",
-          height: 24,
-          backgroundColor: "$color5",
-          hoverStyle: {
-            backgroundColor: "$color6"
-          },
-          pressStyle: {
-            backgroundColor: "$color7"
-          }
-        }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+var ToastDescription = (0, import_core.styled)(import_text.SizableText, {
+  name: "ToastDescription",
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color11",
+        size: "$2"
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  ToastAction = ToastActionFrame.styleable(function (props, ref) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionFrame, {
-      ref,
-      ...props
-    });
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+var ToastClose = import_ToastItemFrame.ToastCloseFrame.styleable(function ToastClose2(props, ref) {
+  var _ctx_icons;
+  var handleClose;
+  try {
+    var itemCtx = useToastItemContext();
+    handleClose = itemCtx.handleClose;
+  } catch (e) {}
+  var ctx = useToastContext();
+  var _props_children, _ref;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.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__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.DefaultCloseIcon, {})
   });
+});
+var ToastAction = import_ToastItemFrame.ToastActionFrame.styleable(function ToastAction2(props, ref) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.ToastActionFrame, {
+    ref,
+    ...props
+  });
+});
 function ToastIcon(props) {
-  var _ctx_icons,
-    _ctx_icons1,
-    _ctx_icons2,
-    _ctx_icons3,
-    _ctx_icons4,
-    ctx = useToastContext(),
-    toast;
+  var _ctx_icons;
+  var ctx = useToastContext();
+  var toast;
   try {
     var itemCtx = useToastItemContext();
     toast = itemCtx.toast;
-  } catch {
+  } catch (e) {
     return null;
   }
   if (!toast) return null;
-  if (toast.icon !== void 0) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
-    flexShrink: 0,
-    marginTop: "$0.5",
-    children: toast.icon
-  });
-  var _toast_type,
-    toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default",
-    _ctx_icons_success,
-    _ctx_icons_error,
-    _ctx_icons_warning,
-    _ctx_icons_info,
-    _ctx_icons_loading,
-    typeIcons = {
-      default: null,
-      success: (_ctx_icons_success = (_ctx_icons = ctx.icons) === null || _ctx_icons === void 0 ? void 0 : _ctx_icons.success) !== null && _ctx_icons_success !== void 0 ? _ctx_icons_success : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultSuccessIcon, {}),
-      error: (_ctx_icons_error = (_ctx_icons1 = ctx.icons) === null || _ctx_icons1 === void 0 ? void 0 : _ctx_icons1.error) !== null && _ctx_icons_error !== void 0 ? _ctx_icons_error : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultErrorIcon, {}),
-      warning: (_ctx_icons_warning = (_ctx_icons2 = ctx.icons) === null || _ctx_icons2 === void 0 ? void 0 : _ctx_icons2.warning) !== null && _ctx_icons_warning !== void 0 ? _ctx_icons_warning : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultWarningIcon, {}),
-      info: (_ctx_icons_info = (_ctx_icons3 = ctx.icons) === null || _ctx_icons3 === void 0 ? void 0 : _ctx_icons3.info) !== null && _ctx_icons_info !== void 0 ? _ctx_icons_info : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultInfoIcon, {}),
-      loading: (_ctx_icons_loading = (_ctx_icons4 = ctx.icons) === null || _ctx_icons4 === void 0 ? void 0 : _ctx_icons4.loading) !== null && _ctx_icons_loading !== void 0 ? _ctx_icons_loading : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultLoadingIcon, {})
-    },
-    icon = typeIcons[toastType];
-  return icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+  if (toast.icon !== void 0) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.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__ */(0, import_jsx_runtime.jsx)(import_core.View, {
     flexShrink: 0,
     marginTop: "$0.5",
     children: icon
-  }) : null;
+  });
 }
 function useToasts() {
   var ctx = useToastContext();
@@ -855,6 +1011,7 @@ function useToasts() {
 function useToastItem() {
   return useToastItemContext();
 }
+ToastRoot.displayName = "Toast";
 var Toast = (0, import_helpers.withStaticProperties)(ToastRoot, {
   Viewport: ToastViewport,
   List: ToastList,