@arc-ui/components 12.0.0-beta7 → 12.1.0

package/lib/Toast/Toast.mjs

@@ -0,0 +1,1000 @@
+'use client';
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { useEffect, forwardRef, useContext, useState, createElement, useRef, createContext, useCallback, useMemo, Fragment } from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { g as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, d as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, e as $e42e1063c40fb3ef$export$b9ecd428b558ff10, h as $8927f6f2acc4f386$export$6d1a0317bde7de7f, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, f as $71cd76cc60e0454e$export$6f32135080cb4c3, c as $9f79659886946c16$export$e5c5a5f917a5871c } from '../_shared/esm/index-DXHprNQ6.mjs';
+import ReactDOM__default, { createPortal } from 'react-dom';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2, a as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from '../_shared/esm/index-6HtUz28p.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-B0n6cKRb.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/Surface-C69KVzkY.mjs';
+
+/**
+ * Listens for when the escape key is down
+ */ function $addc16e1bbe58fd0$export$3a72a57244d6e765(onEscapeKeyDownProp, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
+    const onEscapeKeyDown = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEscapeKeyDownProp);
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if (event.key === 'Escape') onEscapeKeyDown(event);
+        };
+        ownerDocument.addEventListener('keydown', handleKeyDown);
+        return ()=>ownerDocument.removeEventListener('keydown', handleKeyDown)
+        ;
+    }, [
+        onEscapeKeyDown,
+        ownerDocument
+    ]);
+}
+
+const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
+const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
+const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
+let $5cb92bef7577960e$var$originalBodyPointerEvents;
+const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ createContext({
+    layers: new Set(),
+    layersWithOutsidePointerEventsDisabled: new Set(),
+    branches: new Set()
+});
+const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    var _node$ownerDocument;
+    const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
+    const context = useContext($5cb92bef7577960e$var$DismissableLayerContext);
+    const [node1, setNode] = useState(null);
+    const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
+    const [, force] = useState({});
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setNode(node)
+    );
+    const layers = Array.from(context.layers);
+    const [highestLayerWithOutsidePointerEventsDisabled] = [
+        ...context.layersWithOutsidePointerEventsDisabled
+    ].slice(-1); // prettier-ignore
+    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
+    const index = node1 ? layers.indexOf(node1) : -1;
+    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+    const pointerDownOutside = $5cb92bef7577960e$var$usePointerDownOutside((event)=>{
+        const target = event.target;
+        const isPointerDownOnBranch = [
+            ...context.branches
+        ].some((branch)=>branch.contains(target)
+        );
+        if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+        onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event);
+        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
+        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
+    }, ownerDocument);
+    const focusOutside = $5cb92bef7577960e$var$useFocusOutside((event)=>{
+        const target = event.target;
+        const isFocusInBranch = [
+            ...context.branches
+        ].some((branch)=>branch.contains(target)
+        );
+        if (isFocusInBranch) return;
+        onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event);
+        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
+        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
+    }, ownerDocument);
+    $addc16e1bbe58fd0$export$3a72a57244d6e765((event)=>{
+        const isHighestLayer = index === context.layers.size - 1;
+        if (!isHighestLayer) return;
+        onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
+        if (!event.defaultPrevented && onDismiss) {
+            event.preventDefault();
+            onDismiss();
+        }
+    }, ownerDocument);
+    useEffect(()=>{
+        if (!node1) return;
+        if (disableOutsidePointerEvents) {
+            if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+                $5cb92bef7577960e$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+                ownerDocument.body.style.pointerEvents = 'none';
+            }
+            context.layersWithOutsidePointerEventsDisabled.add(node1);
+        }
+        context.layers.add(node1);
+        $5cb92bef7577960e$var$dispatchUpdate();
+        return ()=>{
+            if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents;
+        };
+    }, [
+        node1,
+        ownerDocument,
+        disableOutsidePointerEvents,
+        context
+    ]);
+    /**
+   * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
+   * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
+   * and add it to the end again so the layering order wouldn't be _creation order_.
+   * We only want them to be removed from context stacks when unmounted.
+   */ useEffect(()=>{
+        return ()=>{
+            if (!node1) return;
+            context.layers.delete(node1);
+            context.layersWithOutsidePointerEventsDisabled.delete(node1);
+            $5cb92bef7577960e$var$dispatchUpdate();
+        };
+    }, [
+        node1,
+        context
+    ]);
+    useEffect(()=>{
+        const handleUpdate = ()=>force({})
+        ;
+        document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate);
+        return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate)
+        ;
+    }, []);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, layerProps, {
+        ref: composedRefs,
+        style: {
+            pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
+            ...props.style
+        },
+        onFocusCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusCapture, focusOutside.onFocusCapture),
+        onBlurCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlurCapture, focusOutside.onBlurCapture),
+        onPointerDownCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
+    }));
+});
+const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const context = useContext($5cb92bef7577960e$var$DismissableLayerContext);
+    const ref = useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
+    useEffect(()=>{
+        const node = ref.current;
+        if (node) {
+            context.branches.add(node);
+            return ()=>{
+                context.branches.delete(node);
+            };
+        }
+    }, [
+        context.branches
+    ]);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, props, {
+        ref: composedRefs
+    }));
+});
+/* -----------------------------------------------------------------------------------------------*/ /**
+ * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
+ * to mimic layer dismissing behaviour present in OS.
+ * Returns props to pass to the node we want to check for outside events.
+ */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
+    const handlePointerDownOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onPointerDownOutside);
+    const isPointerInsideReactTreeRef = useRef(false);
+    const handleClickRef = useRef(()=>{});
+    useEffect(()=>{
+        const handlePointerDown = (event)=>{
+            if (event.target && !isPointerInsideReactTreeRef.current) {
+                const eventDetail = {
+                    originalEvent: event
+                };
+                function handleAndDispatchPointerDownOutsideEvent() {
+                    $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
+                        discrete: true
+                    });
+                }
+                /**
+         * On touch devices, we need to wait for a click event because browsers implement
+         * a ~350ms delay between the time the user stops touching the display and when the
+         * browser executres events. We need to ensure we don't reactivate pointer-events within
+         * this timeframe otherwise the browser may execute events that should have been prevented.
+         *
+         * Additionally, this also lets us deal automatically with cancellations when a click event
+         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
+         *
+         * This is why we also continuously remove the previous listener, because we cannot be
+         * certain that it was raised, and therefore cleaned-up.
+         */ if (event.pointerType === 'touch') {
+                    ownerDocument.removeEventListener('click', handleClickRef.current);
+                    handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
+                    ownerDocument.addEventListener('click', handleClickRef.current, {
+                        once: true
+                    });
+                } else handleAndDispatchPointerDownOutsideEvent();
+            }
+            isPointerInsideReactTreeRef.current = false;
+        };
+        /**
+     * if this hook executes in a component that mounts via a `pointerdown` event, the event
+     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
+     * this by delaying the event listener registration on the document.
+     * This is not React specific, but rather how the DOM works, ie:
+     * ```
+     * button.addEventListener('pointerdown', () => {
+     *   console.log('I will log');
+     *   document.addEventListener('pointerdown', () => {
+     *     console.log('I will also log');
+     *   })
+     * });
+     */ const timerId = window.setTimeout(()=>{
+            ownerDocument.addEventListener('pointerdown', handlePointerDown);
+        }, 0);
+        return ()=>{
+            window.clearTimeout(timerId);
+            ownerDocument.removeEventListener('pointerdown', handlePointerDown);
+            ownerDocument.removeEventListener('click', handleClickRef.current);
+        };
+    }, [
+        ownerDocument,
+        handlePointerDownOutside
+    ]);
+    return {
+        // ensures we check React component tree (not just DOM tree)
+        onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true
+    };
+}
+/**
+ * Listens for when focus happens outside a react subtree.
+ * Returns props to pass to the root (node) of the subtree we want to check.
+ */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
+    const handleFocusOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onFocusOutside);
+    const isFocusInsideReactTreeRef = useRef(false);
+    useEffect(()=>{
+        const handleFocus = (event)=>{
+            if (event.target && !isFocusInsideReactTreeRef.current) {
+                const eventDetail = {
+                    originalEvent: event
+                };
+                $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+                    discrete: false
+                });
+            }
+        };
+        ownerDocument.addEventListener('focusin', handleFocus);
+        return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
+        ;
+    }, [
+        ownerDocument,
+        handleFocusOutside
+    ]);
+    return {
+        onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true
+        ,
+        onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false
+    };
+}
+function $5cb92bef7577960e$var$dispatchUpdate() {
+    const event = new CustomEvent($5cb92bef7577960e$var$CONTEXT_UPDATE);
+    document.dispatchEvent(event);
+}
+function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete  }) {
+    const target = detail.originalEvent.target;
+    const event = new CustomEvent(name, {
+        bubbles: false,
+        cancelable: true,
+        detail: detail
+    });
+    if (handler) target.addEventListener(name, handler, {
+        once: true
+    });
+    if (discrete) $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event);
+    else target.dispatchEvent(event);
+}
+const $5cb92bef7577960e$export$be92b6f5f03c0fe9 = $5cb92bef7577960e$export$177fb62ff3ec1f22;
+const $5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$4d5eb2109db14228;
+
+const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    var _globalThis$document;
+    const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
+    return container ? /*#__PURE__*/ ReactDOM__default.createPortal(/*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, portalProps, {
+        ref: forwardedRef
+    })), container) : null;
+});
+
+const $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({}, props, {
+        ref: forwardedRef,
+        style: {
+            // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
+            position: 'absolute',
+            border: 0,
+            width: 1,
+            height: 1,
+            padding: 0,
+            margin: -1,
+            overflow: 'hidden',
+            clip: 'rect(0, 0, 0, 0)',
+            whiteSpace: 'nowrap',
+            wordWrap: 'normal',
+            ...props.style
+        }
+    }));
+});
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastProvider
+ * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$PROVIDER_NAME = 'ToastProvider';
+const [$054eb8030ebde76e$var$Collection, $054eb8030ebde76e$var$useCollection, $054eb8030ebde76e$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2('Toast');
+const [$054eb8030ebde76e$var$createToastContext, $054eb8030ebde76e$export$8a359da18fbc9073] = $c512c27ab02ef895$export$50c7b4e9d9f19c1('Toast', [
+    $054eb8030ebde76e$var$createCollectionScope
+]);
+const [$054eb8030ebde76e$var$ToastProviderProvider, $054eb8030ebde76e$var$useToastProviderContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$PROVIDER_NAME);
+const $054eb8030ebde76e$export$f5d03d415824e0e = (props)=>{
+    const { __scopeToast: __scopeToast , label: label = 'Notification' , duration: duration = 5000 , swipeDirection: swipeDirection = 'right' , swipeThreshold: swipeThreshold = 50 , children: children  } = props;
+    const [viewport, setViewport] = useState(null);
+    const [toastCount, setToastCount] = useState(0);
+    const isFocusedToastEscapeKeyDownRef = useRef(false);
+    const isClosePausedRef = useRef(false);
+    return /*#__PURE__*/ createElement($054eb8030ebde76e$var$Collection.Provider, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastProviderProvider, {
+        scope: __scopeToast,
+        label: label,
+        duration: duration,
+        swipeDirection: swipeDirection,
+        swipeThreshold: swipeThreshold,
+        toastCount: toastCount,
+        viewport: viewport,
+        onViewportChange: setViewport,
+        onToastAdd: useCallback(()=>setToastCount((prevCount)=>prevCount + 1
+            )
+        , []),
+        onToastRemove: useCallback(()=>setToastCount((prevCount)=>prevCount - 1
+            )
+        , []),
+        isFocusedToastEscapeKeyDownRef: isFocusedToastEscapeKeyDownRef,
+        isClosePausedRef: isClosePausedRef
+    }, children));
+};
+$054eb8030ebde76e$export$f5d03d415824e0e.propTypes = {
+    label (props) {
+        if (props.label && typeof props.label === 'string' && !props.label.trim()) {
+            const error = `Invalid prop \`label\` supplied to \`${$054eb8030ebde76e$var$PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
+            return new Error(error);
+        }
+        return null;
+    }
+};
+/* -------------------------------------------------------------------------------------------------
+ * ToastViewport
+ * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$VIEWPORT_NAME = 'ToastViewport';
+const $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY = [
+    'F8'
+];
+const $054eb8030ebde76e$var$VIEWPORT_PAUSE = 'toast.viewportPause';
+const $054eb8030ebde76e$var$VIEWPORT_RESUME = 'toast.viewportResume';
+const $054eb8030ebde76e$export$6192c2425ecfd989 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , hotkey: hotkey = $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY , label: label = 'Notifications ({hotkey})' , ...viewportProps } = props;
+    const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$VIEWPORT_NAME, __scopeToast);
+    const getItems = $054eb8030ebde76e$var$useCollection(__scopeToast);
+    const wrapperRef = useRef(null);
+    const headFocusProxyRef = useRef(null);
+    const tailFocusProxyRef = useRef(null);
+    const ref = useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref, context.onViewportChange);
+    const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
+    const hasToasts = context.toastCount > 0;
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            var _ref$current;
+            // we use `event.code` as it is consistent regardless of meta keys that were pressed.
+            // for example, `event.key` for `Control+Alt+t` is `†` and `t !== †`
+            const isHotkeyPressed = hotkey.every((key)=>event[key] || event.code === key
+            );
+            if (isHotkeyPressed) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown)
+        ;
+    }, [
+        hotkey
+    ]);
+    useEffect(()=>{
+        const wrapper = wrapperRef.current;
+        const viewport = ref.current;
+        if (hasToasts && wrapper && viewport) {
+            const handlePause = ()=>{
+                if (!context.isClosePausedRef.current) {
+                    const pauseEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_PAUSE);
+                    viewport.dispatchEvent(pauseEvent);
+                    context.isClosePausedRef.current = true;
+                }
+            };
+            const handleResume = ()=>{
+                if (context.isClosePausedRef.current) {
+                    const resumeEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_RESUME);
+                    viewport.dispatchEvent(resumeEvent);
+                    context.isClosePausedRef.current = false;
+                }
+            };
+            const handleFocusOutResume = (event)=>{
+                const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
+                if (isFocusMovingOutside) handleResume();
+            };
+            const handlePointerLeaveResume = ()=>{
+                const isFocusInside = wrapper.contains(document.activeElement);
+                if (!isFocusInside) handleResume();
+            }; // Toasts are not in the viewport React tree so we need to bind DOM events
+            wrapper.addEventListener('focusin', handlePause);
+            wrapper.addEventListener('focusout', handleFocusOutResume);
+            wrapper.addEventListener('pointermove', handlePause);
+            wrapper.addEventListener('pointerleave', handlePointerLeaveResume);
+            window.addEventListener('blur', handlePause);
+            window.addEventListener('focus', handleResume);
+            return ()=>{
+                wrapper.removeEventListener('focusin', handlePause);
+                wrapper.removeEventListener('focusout', handleFocusOutResume);
+                wrapper.removeEventListener('pointermove', handlePause);
+                wrapper.removeEventListener('pointerleave', handlePointerLeaveResume);
+                window.removeEventListener('blur', handlePause);
+                window.removeEventListener('focus', handleResume);
+            };
+        }
+    }, [
+        hasToasts,
+        context.isClosePausedRef
+    ]);
+    const getSortedTabbableCandidates = useCallback(({ tabbingDirection: tabbingDirection  })=>{
+        const toastItems = getItems();
+        const tabbableCandidates = toastItems.map((toastItem)=>{
+            const toastNode = toastItem.ref.current;
+            const toastTabbableCandidates = [
+                toastNode,
+                ...$054eb8030ebde76e$var$getTabbableCandidates(toastNode)
+            ];
+            return tabbingDirection === 'forwards' ? toastTabbableCandidates : toastTabbableCandidates.reverse();
+        });
+        return (tabbingDirection === 'forwards' ? tabbableCandidates.reverse() : tabbableCandidates).flat();
+    }, [
+        getItems
+    ]);
+    useEffect(()=>{
+        const viewport = ref.current; // We programmatically manage tabbing as we are unable to influence
+        // the source order with portals, this allows us to reverse the
+        // tab order so that it runs from most recent toast to least
+        if (viewport) {
+            const handleKeyDown = (event)=>{
+                const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+                const isTabKey = event.key === 'Tab' && !isMetaKey;
+                if (isTabKey) {
+                    const focusedElement = document.activeElement;
+                    const isTabbingBackwards = event.shiftKey;
+                    const targetIsViewport = event.target === viewport; // If we're back tabbing after jumping to the viewport then we simply
+                    // proxy focus out to the preceding document
+                    if (targetIsViewport && isTabbingBackwards) {
+                        var _headFocusProxyRef$cu;
+                        (_headFocusProxyRef$cu = headFocusProxyRef.current) === null || _headFocusProxyRef$cu === void 0 || _headFocusProxyRef$cu.focus();
+                        return;
+                    }
+                    const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards';
+                    const sortedCandidates = getSortedTabbableCandidates({
+                        tabbingDirection: tabbingDirection
+                    });
+                    const index = sortedCandidates.findIndex((candidate)=>candidate === focusedElement
+                    );
+                    if ($054eb8030ebde76e$var$focusFirst(sortedCandidates.slice(index + 1))) event.preventDefault();
+                    else {
+                        var _headFocusProxyRef$cu2, _tailFocusProxyRef$cu;
+                        // If we can't focus that means we're at the edges so we
+                        // proxy to the corresponding exit point and let the browser handle
+                        // tab/shift+tab keypress and implicitly pass focus to the next valid element in the document
+                        isTabbingBackwards ? (_headFocusProxyRef$cu2 = headFocusProxyRef.current) === null || _headFocusProxyRef$cu2 === void 0 || _headFocusProxyRef$cu2.focus() : (_tailFocusProxyRef$cu = tailFocusProxyRef.current) === null || _tailFocusProxyRef$cu === void 0 || _tailFocusProxyRef$cu.focus();
+                    }
+                }
+            }; // Toasts are not in the viewport React tree so we need to bind DOM events
+            viewport.addEventListener('keydown', handleKeyDown);
+            return ()=>viewport.removeEventListener('keydown', handleKeyDown)
+            ;
+        }
+    }, [
+        getItems,
+        getSortedTabbableCandidates
+    ]);
+    return /*#__PURE__*/ createElement($5cb92bef7577960e$export$aecb2ddcb55c95be, {
+        ref: wrapperRef,
+        role: "region",
+        "aria-label": label.replace('{hotkey}', hotkeyLabel) // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume
+        ,
+        tabIndex: -1 // incase list has size when empty (e.g. padding), we remove pointer events so
+        ,
+        style: {
+            pointerEvents: hasToasts ? undefined : 'none'
+        }
+    }, hasToasts && /*#__PURE__*/ createElement($054eb8030ebde76e$var$FocusProxy, {
+        ref: headFocusProxyRef,
+        onFocusFromOutsideViewport: ()=>{
+            const tabbableCandidates = getSortedTabbableCandidates({
+                tabbingDirection: 'forwards'
+            });
+            $054eb8030ebde76e$var$focusFirst(tabbableCandidates);
+        }
+    }), /*#__PURE__*/ createElement($054eb8030ebde76e$var$Collection.Slot, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.ol, _extends({
+        tabIndex: -1
+    }, viewportProps, {
+        ref: composedRefs
+    }))), hasToasts && /*#__PURE__*/ createElement($054eb8030ebde76e$var$FocusProxy, {
+        ref: tailFocusProxyRef,
+        onFocusFromOutsideViewport: ()=>{
+            const tabbableCandidates = getSortedTabbableCandidates({
+                tabbingDirection: 'backwards'
+            });
+            $054eb8030ebde76e$var$focusFirst(tabbableCandidates);
+        }
+    }));
+});
+/* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$FOCUS_PROXY_NAME = 'ToastFocusProxy';
+const $054eb8030ebde76e$var$FocusProxy = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , onFocusFromOutsideViewport: onFocusFromOutsideViewport , ...proxyProps } = props;
+    const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$FOCUS_PROXY_NAME, __scopeToast);
+    return /*#__PURE__*/ createElement($ea1ef594cf570d83$export$439d29a4e110a164, _extends({
+        "aria-hidden": true,
+        tabIndex: 0
+    }, proxyProps, {
+        ref: forwardedRef // Avoid page scrolling when focus is on the focus proxy
+        ,
+        style: {
+            position: 'fixed'
+        },
+        onFocus: (event)=>{
+            var _context$viewport;
+            const prevFocusedElement = event.relatedTarget;
+            const isFocusFromOutsideViewport = !((_context$viewport = context.viewport) !== null && _context$viewport !== void 0 && _context$viewport.contains(prevFocusedElement));
+            if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
+        }
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * Toast
+ * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$TOAST_NAME = 'Toast';
+const $054eb8030ebde76e$var$TOAST_SWIPE_START = 'toast.swipeStart';
+const $054eb8030ebde76e$var$TOAST_SWIPE_MOVE = 'toast.swipeMove';
+const $054eb8030ebde76e$var$TOAST_SWIPE_CANCEL = 'toast.swipeCancel';
+const $054eb8030ebde76e$var$TOAST_SWIPE_END = 'toast.swipeEnd';
+const $054eb8030ebde76e$export$8d8dc7d5f743331b = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { forceMount: forceMount , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , ...toastProps } = props;
+    const [open = true, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3({
+        prop: openProp,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange
+    });
+    return /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
+        present: forceMount || open
+    }, /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastImpl, _extends({
+        open: open
+    }, toastProps, {
+        ref: forwardedRef,
+        onClose: ()=>setOpen(false)
+        ,
+        onPause: $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(props.onPause),
+        onResume: $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(props.onResume),
+        onSwipeStart: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onSwipeStart, (event)=>{
+            event.currentTarget.setAttribute('data-swipe', 'start');
+        }),
+        onSwipeMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onSwipeMove, (event)=>{
+            const { x: x , y: y  } = event.detail.delta;
+            event.currentTarget.setAttribute('data-swipe', 'move');
+            event.currentTarget.style.setProperty('--radix-toast-swipe-move-x', `${x}px`);
+            event.currentTarget.style.setProperty('--radix-toast-swipe-move-y', `${y}px`);
+        }),
+        onSwipeCancel: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onSwipeCancel, (event)=>{
+            event.currentTarget.setAttribute('data-swipe', 'cancel');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-end-x');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-end-y');
+        }),
+        onSwipeEnd: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onSwipeEnd, (event)=>{
+            const { x: x , y: y  } = event.detail.delta;
+            event.currentTarget.setAttribute('data-swipe', 'end');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');
+            event.currentTarget.style.setProperty('--radix-toast-swipe-end-x', `${x}px`);
+            event.currentTarget.style.setProperty('--radix-toast-swipe-end-y', `${y}px`);
+            setOpen(false);
+        })
+    })));
+});
+/* -----------------------------------------------------------------------------------------------*/ const [$054eb8030ebde76e$var$ToastInteractiveProvider, $054eb8030ebde76e$var$useToastInteractiveContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$TOAST_NAME, {
+    onClose () {}
+});
+const $054eb8030ebde76e$var$ToastImpl = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , type: type = 'foreground' , duration: durationProp , open: open , onClose: onClose , onEscapeKeyDown: onEscapeKeyDown , onPause: onPause , onResume: onResume , onSwipeStart: onSwipeStart , onSwipeMove: onSwipeMove , onSwipeCancel: onSwipeCancel , onSwipeEnd: onSwipeEnd , ...toastProps } = props;
+    const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast);
+    const [node1, setNode] = useState(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setNode(node)
+    );
+    const pointerStartRef = useRef(null);
+    const swipeDeltaRef = useRef(null);
+    const duration1 = durationProp || context.duration;
+    const closeTimerStartTimeRef = useRef(0);
+    const closeTimerRemainingTimeRef = useRef(duration1);
+    const closeTimerRef = useRef(0);
+    const { onToastAdd: onToastAdd , onToastRemove: onToastRemove  } = context;
+    const handleClose = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(()=>{
+        var _context$viewport2;
+        // focus viewport if focus is within toast to read the remaining toast
+        // count to SR users and ensure focus isn't lost
+        const isFocusInToast = node1 === null || node1 === void 0 ? void 0 : node1.contains(document.activeElement);
+        if (isFocusInToast) (_context$viewport2 = context.viewport) === null || _context$viewport2 === void 0 || _context$viewport2.focus();
+        onClose();
+    });
+    const startTimer = useCallback((duration)=>{
+        if (!duration || duration === Infinity) return;
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerStartTimeRef.current = new Date().getTime();
+        closeTimerRef.current = window.setTimeout(handleClose, duration);
+    }, [
+        handleClose
+    ]);
+    useEffect(()=>{
+        const viewport = context.viewport;
+        if (viewport) {
+            const handleResume = ()=>{
+                startTimer(closeTimerRemainingTimeRef.current);
+                onResume === null || onResume === void 0 || onResume();
+            };
+            const handlePause = ()=>{
+                const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;
+                closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
+                window.clearTimeout(closeTimerRef.current);
+                onPause === null || onPause === void 0 || onPause();
+            };
+            viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause);
+            viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume);
+            return ()=>{
+                viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause);
+                viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume);
+            };
+        }
+    }, [
+        context.viewport,
+        duration1,
+        onPause,
+        onResume,
+        startTimer
+    ]); // start timer when toast opens or duration changes.
+    // we include `open` in deps because closed !== unmounted when animating
+    // so it could reopen before being completely unmounted
+    useEffect(()=>{
+        if (open && !context.isClosePausedRef.current) startTimer(duration1);
+    }, [
+        open,
+        duration1,
+        context.isClosePausedRef,
+        startTimer
+    ]);
+    useEffect(()=>{
+        onToastAdd();
+        return ()=>onToastRemove()
+        ;
+    }, [
+        onToastAdd,
+        onToastRemove
+    ]);
+    const announceTextContent = useMemo(()=>{
+        return node1 ? $054eb8030ebde76e$var$getAnnounceTextContent(node1) : null;
+    }, [
+        node1
+    ]);
+    if (!context.viewport) return null;
+    return /*#__PURE__*/ createElement(Fragment, null, announceTextContent && /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastAnnounce, {
+        __scopeToast: __scopeToast // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
+        ,
+        role: "status",
+        "aria-live": type === 'foreground' ? 'assertive' : 'polite',
+        "aria-atomic": true
+    }, announceTextContent), /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastInteractiveProvider, {
+        scope: __scopeToast,
+        onClose: handleClose
+    }, /*#__PURE__*/ createPortal(/*#__PURE__*/ createElement($054eb8030ebde76e$var$Collection.ItemSlot, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ createElement($5cb92bef7577960e$export$be92b6f5f03c0fe9, {
+        asChild: true,
+        onEscapeKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(onEscapeKeyDown, ()=>{
+            if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
+            context.isFocusedToastEscapeKeyDownRef.current = false;
+        })
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.li, _extends({
+        // Ensure toasts are announced as status list or status when focused
+        role: "status",
+        "aria-live": "off",
+        "aria-atomic": true,
+        tabIndex: 0,
+        "data-state": open ? 'open' : 'closed',
+        "data-swipe-direction": context.swipeDirection
+    }, toastProps, {
+        ref: composedRefs,
+        style: {
+            userSelect: 'none',
+            touchAction: 'none',
+            ...props.style
+        },
+        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
+            if (event.key !== 'Escape') return;
+            onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event.nativeEvent);
+            if (!event.nativeEvent.defaultPrevented) {
+                context.isFocusedToastEscapeKeyDownRef.current = true;
+                handleClose();
+            }
+        }),
+        onPointerDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDown, (event)=>{
+            if (event.button !== 0) return;
+            pointerStartRef.current = {
+                x: event.clientX,
+                y: event.clientY
+            };
+        }),
+        onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, (event)=>{
+            if (!pointerStartRef.current) return;
+            const x = event.clientX - pointerStartRef.current.x;
+            const y = event.clientY - pointerStartRef.current.y;
+            const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
+            const isHorizontalSwipe = [
+                'left',
+                'right'
+            ].includes(context.swipeDirection);
+            const clamp = [
+                'left',
+                'up'
+            ].includes(context.swipeDirection) ? Math.min : Math.max;
+            const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
+            const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;
+            const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2;
+            const delta = {
+                x: clampedX,
+                y: clampedY
+            };
+            const eventDetail = {
+                originalEvent: event,
+                delta: delta
+            };
+            if (hasSwipeMoveStarted) {
+                swipeDeltaRef.current = delta;
+                $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
+                    discrete: false
+                });
+            } else if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
+                swipeDeltaRef.current = delta;
+                $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_START, onSwipeStart, eventDetail, {
+                    discrete: false
+                });
+                event.target.setPointerCapture(event.pointerId);
+            } else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) // User is swiping in wrong direction so we disable swipe gesture
+            // for the current pointer down interaction
+            pointerStartRef.current = null;
+        }),
+        onPointerUp: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerUp, (event1)=>{
+            const delta = swipeDeltaRef.current;
+            const target = event1.target;
+            if (target.hasPointerCapture(event1.pointerId)) target.releasePointerCapture(event1.pointerId);
+            swipeDeltaRef.current = null;
+            pointerStartRef.current = null;
+            if (delta) {
+                const toast = event1.currentTarget;
+                const eventDetail = {
+                    originalEvent: event1,
+                    delta: delta
+                };
+                if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
+                    discrete: true
+                });
+                else $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_CANCEL, onSwipeCancel, eventDetail, {
+                    discrete: true
+                });
+                 // Prevent click event from triggering on items within the toast when
+                // pointer up is part of a swipe gesture
+                toast.addEventListener('click', (event)=>event.preventDefault()
+                , {
+                    once: true
+                });
+            }
+        })
+    })))), context.viewport)));
+});
+$054eb8030ebde76e$var$ToastImpl.propTypes = {
+    type (props) {
+        if (props.type && ![
+            'foreground',
+            'background'
+        ].includes(props.type)) {
+            const error = `Invalid prop \`type\` supplied to \`${$054eb8030ebde76e$var$TOAST_NAME}\`. Expected \`foreground | background\`.`;
+            return new Error(error);
+        }
+        return null;
+    }
+};
+/* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ToastAnnounce = (props)=>{
+    const { __scopeToast: __scopeToast , children: children , ...announceProps } = props;
+    const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast);
+    const [renderAnnounceText, setRenderAnnounceText] = useState(false);
+    const [isAnnounced, setIsAnnounced] = useState(false); // render text content in the next frame to ensure toast is announced in NVDA
+    $054eb8030ebde76e$var$useNextFrame(()=>setRenderAnnounceText(true)
+    ); // cleanup after announcing
+    useEffect(()=>{
+        const timer = window.setTimeout(()=>setIsAnnounced(true)
+        , 1000);
+        return ()=>window.clearTimeout(timer)
+        ;
+    }, []);
+    return isAnnounced ? null : /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c, {
+        asChild: true
+    }, /*#__PURE__*/ createElement($ea1ef594cf570d83$export$439d29a4e110a164, announceProps, renderAnnounceText && /*#__PURE__*/ createElement(Fragment, null, context.label, " ", children)));
+};
+const $054eb8030ebde76e$export$16d42d7c29b95a4 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , ...titleProps } = props;
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, titleProps, {
+        ref: forwardedRef
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * ToastAction
+ * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ACTION_NAME = 'ToastAction';
+const $054eb8030ebde76e$export$3019feecfda683d2 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { altText: altText , ...actionProps } = props;
+    if (!altText) return null;
+    return /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastAnnounceExclude, {
+        altText: altText,
+        asChild: true
+    }, /*#__PURE__*/ createElement($054eb8030ebde76e$export$811e70f61c205839, _extends({}, actionProps, {
+        ref: forwardedRef
+    })));
+});
+$054eb8030ebde76e$export$3019feecfda683d2.propTypes = {
+    altText (props) {
+        if (!props.altText) return new Error(`Missing prop \`altText\` expected on \`${$054eb8030ebde76e$var$ACTION_NAME}\``);
+        return null;
+    }
+};
+/* -------------------------------------------------------------------------------------------------
+ * ToastClose
+ * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$CLOSE_NAME = 'ToastClose';
+const $054eb8030ebde76e$export$811e70f61c205839 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , ...closeProps } = props;
+    const interactiveContext = $054eb8030ebde76e$var$useToastInteractiveContext($054eb8030ebde76e$var$CLOSE_NAME, __scopeToast);
+    return /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastAnnounceExclude, {
+        asChild: true
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
+        type: "button"
+    }, closeProps, {
+        ref: forwardedRef,
+        onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, interactiveContext.onClose)
+    })));
+});
+/* ---------------------------------------------------------------------------------------------- */ const $054eb8030ebde76e$var$ToastAnnounceExclude = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , altText: altText , ...announceExcludeProps } = props;
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
+        "data-radix-toast-announce-exclude": "",
+        "data-radix-toast-announce-alt": altText || undefined
+    }, announceExcludeProps, {
+        ref: forwardedRef
+    }));
+});
+function $054eb8030ebde76e$var$getAnnounceTextContent(container) {
+    const textContent = [];
+    const childNodes = Array.from(container.childNodes);
+    childNodes.forEach((node)=>{
+        if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent);
+        if ($054eb8030ebde76e$var$isHTMLElement(node)) {
+            const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none';
+            const isExcluded = node.dataset.radixToastAnnounceExclude === '';
+            if (!isHidden) {
+                if (isExcluded) {
+                    const altText = node.dataset.radixToastAnnounceAlt;
+                    if (altText) textContent.push(altText);
+                } else textContent.push(...$054eb8030ebde76e$var$getAnnounceTextContent(node));
+            }
+        }
+    }); // We return a collection of text rather than a single concatenated string.
+    // This allows SR VO to naturally pause break between nodes while announcing.
+    return textContent;
+}
+/* ---------------------------------------------------------------------------------------------- */ function $054eb8030ebde76e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete  }) {
+    const currentTarget = detail.originalEvent.currentTarget;
+    const event = new CustomEvent(name, {
+        bubbles: true,
+        cancelable: true,
+        detail: detail
+    });
+    if (handler) currentTarget.addEventListener(name, handler, {
+        once: true
+    });
+    if (discrete) $8927f6f2acc4f386$export$6d1a0317bde7de7f(currentTarget, event);
+    else currentTarget.dispatchEvent(event);
+}
+const $054eb8030ebde76e$var$isDeltaInDirection = (delta, direction, threshold = 0)=>{
+    const deltaX = Math.abs(delta.x);
+    const deltaY = Math.abs(delta.y);
+    const isDeltaX = deltaX > deltaY;
+    if (direction === 'left' || direction === 'right') return isDeltaX && deltaX > threshold;
+    else return !isDeltaX && deltaY > threshold;
+};
+function $054eb8030ebde76e$var$useNextFrame(callback = ()=>{}) {
+    const fn = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        let raf1 = 0;
+        let raf2 = 0;
+        raf1 = window.requestAnimationFrame(()=>raf2 = window.requestAnimationFrame(fn)
+        );
+        return ()=>{
+            window.cancelAnimationFrame(raf1);
+            window.cancelAnimationFrame(raf2);
+        };
+    }, [
+        fn
+    ]);
+}
+function $054eb8030ebde76e$var$isHTMLElement(node) {
+    return node.nodeType === node.ELEMENT_NODE;
+}
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */ function $054eb8030ebde76e$var$getTabbableCandidates(container) {
+    const nodes = [];
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node)=>{
+            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
+            if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+            // runtime's understanding of tabbability, so this automatically accounts
+            // for any kind of element that could be tabbed to.
+            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        }
+    });
+    while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
+    // hinders accessibility to have tab order different from visual order.
+    return nodes;
+}
+function $054eb8030ebde76e$var$focusFirst(candidates) {
+    const previouslyFocusedElement = document.activeElement;
+    return candidates.some((candidate)=>{
+        // if focus is already where we want to go, we don't want to keep going through the candidates
+        if (candidate === previouslyFocusedElement) return true;
+        candidate.focus();
+        return document.activeElement !== previouslyFocusedElement;
+    });
+}
+const $054eb8030ebde76e$export$2881499e37b75b9a = $054eb8030ebde76e$export$f5d03d415824e0e;
+const $054eb8030ebde76e$export$d5c6c08dc2d3ca7 = $054eb8030ebde76e$export$6192c2425ecfd989;
+const $054eb8030ebde76e$export$be92b6f5f03c0fe9 = $054eb8030ebde76e$export$8d8dc7d5f743331b;
+const $054eb8030ebde76e$export$f99233281efd08a0 = $054eb8030ebde76e$export$16d42d7c29b95a4;
+const $054eb8030ebde76e$export$e19cd5f9376f8cee = $054eb8030ebde76e$export$3019feecfda683d2;
+const $054eb8030ebde76e$export$f39c2d165cd861fe = $054eb8030ebde76e$export$811e70f61c205839;
+
+/** Use `Toast` to display temporary messages at the bottom of the screen. */
+var Toast = function (_a) {
+    var children = _a.children, _b = _a.colorScheme, colorScheme = _b === void 0 ? "default" : _b, _c = _a.onDarkSurface, onDarkSurface = _c === void 0 ? false : _c, props = __rest(_a, ["children", "colorScheme", "onDarkSurface"]);
+    return (React__default.createElement($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", duration: 6000 },
+        React__default.createElement($054eb8030ebde76e$export$d5c6c08dc2d3ca7, { asChild: true, className: "arc-Toast-viewport" },
+            React__default.createElement("div", __assign({ className: classNames("arc-Toast-pathway--".concat(colorScheme), {
+                    "arc-Toast--onDarkSurface": onDarkSurface,
+                }) }, filterAttrs(props)), children))));
+};
+
+/** Use `ToastNotification` to display brief, non-intrusive messages that inform users about system events, actions, or feedback. */
+var ToastNotification = function (_a) {
+    var link = _a.link, title = _a.title, isOpen = _a.isOpen, onOpenChange = _a.onOpenChange, _b = _a.isStatusIconVisible, isStatusIconVisible = _b === void 0 ? true : _b, _c = _a.isCloseButtonVisible, isCloseButtonVisible = _c === void 0 ? true : _c, _d = _a.status, status = _d === void 0 ? "general" : _d, props = __rest(_a, ["link", "title", "isOpen", "onOpenChange", "isStatusIconVisible", "isCloseButtonVisible", "status"]);
+    var statusIcons = {
+        general: "toastGeneral",
+        error: "toastError",
+        warning: "toastWarning",
+        success: "toastSuccess",
+    };
+    var handleLinkClick = function (handler) { return function (event) {
+        event.preventDefault();
+        handler();
+    }; };
+    return (React__default.createElement($054eb8030ebde76e$export$be92b6f5f03c0fe9, __assign({ className: "arc-Toast-root", open: isOpen, onOpenChange: onOpenChange }, filterAttrs(props)),
+        React__default.createElement("div", { "data-testid": "toast-notification-wrapper", className: classNames("arc-Toast", "arc-Toast-status--".concat(status)) },
+            isStatusIconVisible && (React__default.createElement("div", { "data-testid": "status-icon", className: "arc-Toast-icon" },
+                React__default.createElement(ThemeIcon, { size: 24, icon: statusIcons[status] }))),
+            React__default.createElement($054eb8030ebde76e$export$f99233281efd08a0, { className: "arc-Toast-title" },
+                React__default.createElement("span", null, title)),
+            link && (React__default.createElement($054eb8030ebde76e$export$e19cd5f9376f8cee, { className: "arc-Toast-action", asChild: true, altText: link.text },
+                React__default.createElement("a", __assign({ className: "arc-Toast-link", href: link.href, "aria-label": link.ariaLabel }, (link.onClick && { onClick: handleLinkClick(link.onClick) })), link.text))),
+            isCloseButtonVisible && !link && (React__default.createElement($054eb8030ebde76e$export$f39c2d165cd861fe, { className: "arc-Toast-dismiss", "aria-label": "Close" },
+                React__default.createElement(ThemeIcon, { icon: "toastDismiss", size: 24 }))))));
+};
+
+export { Toast, ToastNotification };