@wix/site-ui 1.185.0 → 1.187.0

package/dist/Toast/index.js

@@ -0,0 +1,1204 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Close } from "@wix/wix-ui-icons-common/on-stage";
+import clsx from "clsx";
+import { useRefWithInit, useRenderElement, esm_formatErrorMessage } from "../8272.js";
+import { Timeout, useTimeout } from "../42.js";
+import { getTarget, contains, activeElement } from "../4549.js";
+import { ownerDocument } from "../9829.js";
+import { getWindow } from "../3829.js";
+import { addEventListener } from "../4723.js";
+import { matchesFocusVisible } from "../8758.js";
+import { mergeCleanups } from "../4495.js";
+import { FocusGuard_FocusGuard, LEGACY_SWIPE_IGNORE_SELECTOR, BASE_UI_SWIPE_IGNORE_SELECTOR } from "../487.js";
+import { visuallyHidden } from "../8225.js";
+import { transitionStatusMapping, useOpenChangeComplete } from "../9369.js";
+import { useStableCallback } from "../7541.js";
+import { useIsoLayoutEffect } from "../6499.js";
+import { getDisplacement, getElementTransform } from "../1763.js";
+import { inertValue } from "../167.js";
+import { useId } from "../2205.js";
+import { useButton } from "../9189.js";
+import { ReactStore, createSelector } from "../2445.js";
+import { useOnMount } from "../2861.js";
+import { FloatingPortalLite_FloatingPortalLite } from "../8960.js";
+import * as __rspack_external_react from "react";
+import * as __rspack_external_react_dom_7136dc57 from "react-dom";
+const ToastContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) ToastContext.displayName = "ToastContext";
+function useToastProviderContext() {
+    const context = __rspack_external_react.useContext(ToastContext);
+    if (!context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: useToastManager must be used within <Toast.Provider>.' : esm_formatErrorMessage(73));
+    return context;
+}
+let ToastViewportCssVars_ToastViewportCssVars = /*#__PURE__*/ function(ToastViewportCssVars) {
+    ToastViewportCssVars["frontmostHeight"] = "--toast-frontmost-height";
+    return ToastViewportCssVars;
+}({});
+const ToastViewport_ToastViewport = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, children, ...elementProps } = componentProps;
+    const store = useToastProviderContext();
+    const windowFocusTimeout = useTimeout();
+    const handlingFocusGuardRef = __rspack_external_react.useRef(false);
+    const markedReadyForMouseLeaveRef = __rspack_external_react.useRef(false);
+    const touchActiveRef = __rspack_external_react.useRef(false);
+    const isEmpty = store.useState('isEmpty');
+    const toasts = store.useState('toasts');
+    const focused = store.useState('focused');
+    const expanded = store.useState('expanded');
+    const prevFocusElement = store.useState('prevFocusElement');
+    const frontmostHeight = toasts[0]?.height ?? 0;
+    const hasTransitioningToasts = __rspack_external_react.useMemo(()=>toasts.some((toast)=>'ending' === toast.transitionStatus), [
+        toasts
+    ]);
+    const highPriorityToasts = __rspack_external_react.useMemo(()=>toasts.filter((toast)=>'high' === toast.priority), [
+        toasts
+    ]);
+    __rspack_external_react.useEffect(()=>{
+        const viewport = store.state.viewport;
+        if (!viewport) return;
+        function handleGlobalKeyDown(event) {
+            if (isEmpty) return;
+            if ('F6' === event.key && getTarget(event) !== viewport) {
+                event.preventDefault();
+                store.setPrevFocusElement(activeElement(ownerDocument(viewport)));
+                viewport?.focus({
+                    preventScroll: true
+                });
+                store.pauseTimers();
+                store.setFocused(true);
+            }
+        }
+        const win = getWindow(viewport);
+        return addEventListener(win, 'keydown', handleGlobalKeyDown);
+    }, [
+        store,
+        isEmpty
+    ]);
+    __rspack_external_react.useEffect(()=>{
+        const viewport = store.state.viewport;
+        if (!viewport || isEmpty) return;
+        const win = getWindow(viewport);
+        function handleWindowBlur(event) {
+            if (getTarget(event) !== win) return;
+            store.setIsWindowFocused(false);
+            store.pauseTimers();
+        }
+        function handleWindowFocus(event) {
+            if (event.relatedTarget) return;
+            const target = getTarget(event);
+            const activeEl = activeElement(ownerDocument(viewport));
+            if (target === win || !contains(viewport, target) || !matchesFocusVisible(activeEl)) store.resumeTimers();
+            windowFocusTimeout.start(0, ()=>store.setIsWindowFocused(true));
+        }
+        return mergeCleanups(addEventListener(win, 'blur', handleWindowBlur, true), addEventListener(win, 'focus', handleWindowFocus, true));
+    }, [
+        store,
+        windowFocusTimeout,
+        isEmpty
+    ]);
+    __rspack_external_react.useEffect(()=>{
+        const viewport = store.state.viewport;
+        if (!viewport || isEmpty) return;
+        const doc = ownerDocument(viewport);
+        return addEventListener(doc, 'pointerdown', store.handleDocumentPointerDown, true);
+    }, [
+        isEmpty,
+        store
+    ]);
+    function handleFocusGuard(event) {
+        const viewport = store.state.viewport;
+        if (!viewport) return;
+        handlingFocusGuardRef.current = true;
+        if (event.relatedTarget === viewport) toasts[0]?.ref?.current?.focus();
+        else store.restoreFocusToPrevElement();
+    }
+    function handleKeyDown(event) {
+        if ('Tab' === event.key && event.shiftKey && getTarget(event.nativeEvent) === store.state.viewport) {
+            event.preventDefault();
+            store.restoreFocusToPrevElement();
+            store.resumeTimers();
+        }
+    }
+    function flushMouseLeave() {
+        const hasEndingToasts = store.state.toasts.some((toast)=>'ending' === toast.transitionStatus);
+        if (!store.state.isWindowFocused || hasEndingToasts || touchActiveRef.current || !markedReadyForMouseLeaveRef.current) return;
+        store.resumeTimers();
+        store.setHovering(false);
+        markedReadyForMouseLeaveRef.current = false;
+    }
+    __rspack_external_react.useEffect(flushMouseLeave, [
+        hasTransitioningToasts,
+        store
+    ]);
+    function handleMouseEnter() {
+        store.pauseTimers();
+        store.setHovering(true);
+        markedReadyForMouseLeaveRef.current = false;
+    }
+    function handleMouseLeave() {
+        if (hasTransitioningToasts || touchActiveRef.current) markedReadyForMouseLeaveRef.current = true;
+        else {
+            store.resumeTimers();
+            store.setHovering(false);
+        }
+    }
+    function handlePointerDown(event) {
+        if ('touch' === event.pointerType) touchActiveRef.current = true;
+    }
+    function handlePointerEnd(event) {
+        if ('touch' !== event.pointerType) return;
+        touchActiveRef.current = false;
+        flushMouseLeave();
+    }
+    function handleFocus() {
+        if (handlingFocusGuardRef.current) {
+            handlingFocusGuardRef.current = false;
+            return;
+        }
+        if (focused) return;
+        if (matchesFocusVisible(activeElement(ownerDocument(store.state.viewport)))) {
+            store.setFocused(true);
+            store.pauseTimers();
+        }
+    }
+    function handleBlur(event) {
+        if (!focused || contains(store.state.viewport, event.relatedTarget)) return;
+        store.setFocused(false);
+        store.resumeTimers();
+    }
+    const defaultProps = {
+        tabIndex: -1,
+        role: 'region',
+        'aria-live': 'polite',
+        'aria-atomic': false,
+        'aria-relevant': 'additions text',
+        'aria-label': 'Notifications',
+        onMouseEnter: handleMouseEnter,
+        onMouseMove: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onClick: handleFocus,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerEnd,
+        onPointerCancel: handlePointerEnd
+    };
+    const state = {
+        expanded
+    };
+    const element = useRenderElement('div', componentProps, {
+        ref: [
+            forwardedRef,
+            store.setViewport
+        ],
+        state,
+        props: [
+            defaultProps,
+            {
+                style: {
+                    [ToastViewportCssVars_ToastViewportCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : void 0
+                }
+            },
+            elementProps,
+            {
+                children: /*#__PURE__*/ jsxs(__rspack_external_react.Fragment, {
+                    children: [
+                        !isEmpty && prevFocusElement && /*#__PURE__*/ jsx(FocusGuard_FocusGuard, {
+                            onFocus: handleFocusGuard
+                        }),
+                        children,
+                        !isEmpty && prevFocusElement && /*#__PURE__*/ jsx(FocusGuard_FocusGuard, {
+                            onFocus: handleFocusGuard
+                        })
+                    ]
+                })
+            }
+        ]
+    });
+    return /*#__PURE__*/ jsxs(__rspack_external_react.Fragment, {
+        children: [
+            !isEmpty && prevFocusElement && /*#__PURE__*/ jsx(FocusGuard_FocusGuard, {
+                onFocus: handleFocusGuard
+            }),
+            element,
+            !focused && highPriorityToasts.length > 0 && /*#__PURE__*/ jsx("div", {
+                style: visuallyHidden,
+                children: highPriorityToasts.map((toast)=>/*#__PURE__*/ jsxs("div", {
+                        role: "alert",
+                        "aria-atomic": true,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                children: toast.title
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                children: toast.description
+                            })
+                        ]
+                    }, toast.id))
+            })
+        ]
+    });
+});
+if ("production" !== process.env.NODE_ENV) ToastViewport_ToastViewport.displayName = "ToastViewport";
+const ToastRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) ToastRootContext.displayName = "ToastRootContext";
+function useToastRootContext() {
+    const context = __rspack_external_react.useContext(ToastRootContext);
+    if (!context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: ToastRootContext is missing. Toast parts must be used within <Toast.Root>.' : esm_formatErrorMessage(66));
+    return context;
+}
+let ToastRootCssVars_ToastRootCssVars = /*#__PURE__*/ function(ToastRootCssVars) {
+    ToastRootCssVars["index"] = "--toast-index";
+    ToastRootCssVars["offsetY"] = "--toast-offset-y";
+    ToastRootCssVars["height"] = "--toast-height";
+    ToastRootCssVars["swipeMovementX"] = "--toast-swipe-movement-x";
+    ToastRootCssVars["swipeMovementY"] = "--toast-swipe-movement-y";
+    return ToastRootCssVars;
+}({});
+const stateAttributesMapping = {
+    ...transitionStatusMapping,
+    swipeDirection (value) {
+        return value ? {
+            'data-swipe-direction': value
+        } : null;
+    }
+};
+const SWIPE_THRESHOLD = 40;
+const REVERSE_CANCEL_THRESHOLD = 10;
+const OPPOSITE_DIRECTION_DAMPING_FACTOR = 0.5;
+const MIN_DRAG_THRESHOLD = 1;
+const TOAST_SWIPE_IGNORE_SELECTOR = `${BASE_UI_SWIPE_IGNORE_SELECTOR},${LEGACY_SWIPE_IGNORE_SELECTOR}`;
+const ToastRoot_ToastRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { toast, render, className, swipeDirection = [
+        'down',
+        'right'
+    ], style, ...elementProps } = componentProps;
+    const isAnchored = toast.positionerProps?.anchor !== void 0;
+    let swipeDirections = [];
+    if (!isAnchored) swipeDirections = Array.isArray(swipeDirection) ? swipeDirection : [
+        swipeDirection
+    ];
+    const swipeEnabled = swipeDirections.length > 0;
+    const store = useToastProviderContext();
+    const [currentSwipeDirection, setCurrentSwipeDirection] = __rspack_external_react.useState(void 0);
+    const [isSwiping, setIsSwiping] = __rspack_external_react.useState(false);
+    const [isRealSwipe, setIsRealSwipe] = __rspack_external_react.useState(false);
+    const [dragDismissed, setDragDismissed] = __rspack_external_react.useState(false);
+    const [dragOffset, setDragOffset] = __rspack_external_react.useState({
+        x: 0,
+        y: 0
+    });
+    const [initialTransform, setInitialTransform] = __rspack_external_react.useState({
+        x: 0,
+        y: 0,
+        scale: 1
+    });
+    const [titleId, setTitleId] = __rspack_external_react.useState();
+    const [descriptionId, setDescriptionId] = __rspack_external_react.useState();
+    const [lockedDirection, setLockedDirection] = __rspack_external_react.useState(null);
+    const rootRef = __rspack_external_react.useRef(null);
+    const dragStartPosRef = __rspack_external_react.useRef({
+        x: 0,
+        y: 0
+    });
+    const initialTransformRef = __rspack_external_react.useRef({
+        x: 0,
+        y: 0,
+        scale: 1
+    });
+    const intendedSwipeDirectionRef = __rspack_external_react.useRef(void 0);
+    const maxSwipeDisplacementRef = __rspack_external_react.useRef(0);
+    const cancelledSwipeRef = __rspack_external_react.useRef(false);
+    const swipeCancelBaselineRef = __rspack_external_react.useRef({
+        x: 0,
+        y: 0
+    });
+    const isFirstPointerMoveRef = __rspack_external_react.useRef(false);
+    const dragOffsetRef = __rspack_external_react.useRef({
+        x: 0,
+        y: 0
+    });
+    const activePointerIdRef = __rspack_external_react.useRef(null);
+    const dragAbortControllerRef = __rspack_external_react.useRef(null);
+    const domIndex = store.useState('toastIndex', toast.id);
+    const visibleIndex = store.useState('toastVisibleIndex', toast.id);
+    const offsetY = store.useState('toastOffsetY', toast.id);
+    const focused = store.useState('focused');
+    const expanded = store.useState('expanded');
+    useOpenChangeComplete({
+        open: 'ending' !== toast.transitionStatus,
+        ref: rootRef,
+        onComplete () {
+            if ('ending' === toast.transitionStatus) store.removeToast(toast.id);
+        }
+    });
+    const recalculateHeight = useStableCallback((flushSync = false)=>{
+        const element = rootRef.current;
+        if (!element) return;
+        const previousHeight = element.style.height;
+        element.style.height = 'auto';
+        const height = element.offsetHeight;
+        element.style.height = previousHeight;
+        function update() {
+            store.updateToastInternal(toast.id, {
+                ref: rootRef,
+                height,
+                ...'starting' === toast.transitionStatus ? {
+                    transitionStatus: void 0
+                } : {}
+            });
+        }
+        if (flushSync) __rspack_external_react_dom_7136dc57.flushSync(update);
+        else update();
+    });
+    useIsoLayoutEffect(recalculateHeight, [
+        recalculateHeight
+    ]);
+    function setResolvedDragOffset(nextDragOffset) {
+        dragOffsetRef.current = nextDragOffset;
+        setDragOffset(nextDragOffset);
+    }
+    useIsoLayoutEffect(()=>()=>{
+            dragAbortControllerRef.current?.abort();
+        }, []);
+    function applyDirectionalDamping(deltaX, deltaY) {
+        let newDeltaX = deltaX;
+        let newDeltaY = deltaY;
+        if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
+            if (!swipeDirections.includes('right') && deltaX > 0) newDeltaX = deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
+            if (!swipeDirections.includes('left') && deltaX < 0) newDeltaX = -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+        } else newDeltaX = deltaX > 0 ? deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+        if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
+            if (!swipeDirections.includes('down') && deltaY > 0) newDeltaY = deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
+            if (!swipeDirections.includes('up') && deltaY < 0) newDeltaY = -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+        } else newDeltaY = deltaY > 0 ? deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+        return {
+            x: newDeltaX,
+            y: newDeltaY
+        };
+    }
+    const handleSwipeEnd = useStableCallback((event)=>{
+        if (event.pointerId !== activePointerIdRef.current) return;
+        activePointerIdRef.current = null;
+        dragAbortControllerRef.current?.abort();
+        dragAbortControllerRef.current = null;
+        setIsSwiping(false);
+        setIsRealSwipe(false);
+        setLockedDirection(null);
+        const resolvedInitialTransform = initialTransformRef.current;
+        if ('pointercancel' === event.type || cancelledSwipeRef.current) {
+            setResolvedDragOffset({
+                x: resolvedInitialTransform.x,
+                y: resolvedInitialTransform.y
+            });
+            setCurrentSwipeDirection(void 0);
+            return;
+        }
+        let shouldClose = false;
+        const resolvedDragOffset = dragOffsetRef.current;
+        const deltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
+        const deltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
+        let dismissDirection;
+        for (const direction of swipeDirections){
+            switch(direction){
+                case 'right':
+                    if (deltaX > SWIPE_THRESHOLD) {
+                        shouldClose = true;
+                        dismissDirection = 'right';
+                    }
+                    break;
+                case 'left':
+                    if (deltaX < -SWIPE_THRESHOLD) {
+                        shouldClose = true;
+                        dismissDirection = 'left';
+                    }
+                    break;
+                case 'down':
+                    if (deltaY > SWIPE_THRESHOLD) {
+                        shouldClose = true;
+                        dismissDirection = 'down';
+                    }
+                    break;
+                case 'up':
+                    if (deltaY < -SWIPE_THRESHOLD) {
+                        shouldClose = true;
+                        dismissDirection = 'up';
+                    }
+                    break;
+                default:
+                    break;
+            }
+            if (shouldClose) break;
+        }
+        if (shouldClose) {
+            setCurrentSwipeDirection(dismissDirection);
+            setDragDismissed(true);
+            store.closeToast(toast.id);
+        } else {
+            setResolvedDragOffset({
+                x: resolvedInitialTransform.x,
+                y: resolvedInitialTransform.y
+            });
+            setCurrentSwipeDirection(void 0);
+        }
+    });
+    function handlePointerDown(event) {
+        if (0 !== event.button) return;
+        if ('touch' === event.pointerType) store.pauseTimers();
+        const target = getTarget(event.nativeEvent);
+        const isInteractiveElement = target ? target.closest(`button,a,input,textarea,[role="button"],${TOAST_SWIPE_IGNORE_SELECTOR}`) : false;
+        if (isInteractiveElement) return;
+        cancelledSwipeRef.current = false;
+        intendedSwipeDirectionRef.current = void 0;
+        maxSwipeDisplacementRef.current = 0;
+        activePointerIdRef.current = event.pointerId;
+        dragStartPosRef.current = {
+            x: event.clientX,
+            y: event.clientY
+        };
+        swipeCancelBaselineRef.current = dragStartPosRef.current;
+        if (rootRef.current) {
+            const transform = getElementTransform(rootRef.current);
+            initialTransformRef.current = transform;
+            setInitialTransform(transform);
+            setResolvedDragOffset({
+                x: transform.x,
+                y: transform.y
+            });
+        }
+        store.setHovering(true);
+        setIsSwiping(true);
+        setIsRealSwipe(false);
+        setLockedDirection(null);
+        isFirstPointerMoveRef.current = true;
+        const element = rootRef.current;
+        if (element) {
+            dragAbortControllerRef.current?.abort();
+            const dragAbortController = new AbortController();
+            dragAbortControllerRef.current = dragAbortController;
+            const doc = ownerDocument(element);
+            doc.addEventListener('pointerup', handleSwipeEnd, {
+                signal: dragAbortController.signal
+            });
+            doc.addEventListener('pointercancel', handleSwipeEnd, {
+                signal: dragAbortController.signal
+            });
+            element.setPointerCapture?.(event.pointerId);
+        }
+    }
+    function handlePointerMove(event) {
+        if (event.pointerId !== activePointerIdRef.current) return;
+        event.preventDefault();
+        if (isFirstPointerMoveRef.current) {
+            dragStartPosRef.current = {
+                x: event.clientX,
+                y: event.clientY
+            };
+            isFirstPointerMoveRef.current = false;
+        }
+        const { clientY, clientX, movementX, movementY } = event;
+        if (movementY < 0 && clientY > swipeCancelBaselineRef.current.y || movementY > 0 && clientY < swipeCancelBaselineRef.current.y) swipeCancelBaselineRef.current = {
+            x: swipeCancelBaselineRef.current.x,
+            y: clientY
+        };
+        if (movementX < 0 && clientX > swipeCancelBaselineRef.current.x || movementX > 0 && clientX < swipeCancelBaselineRef.current.x) swipeCancelBaselineRef.current = {
+            x: clientX,
+            y: swipeCancelBaselineRef.current.y
+        };
+        const deltaX = clientX - dragStartPosRef.current.x;
+        const deltaY = clientY - dragStartPosRef.current.y;
+        const cancelDeltaY = clientY - swipeCancelBaselineRef.current.y;
+        const cancelDeltaX = clientX - swipeCancelBaselineRef.current.x;
+        if (!isRealSwipe) {
+            const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            if (movementDistance >= MIN_DRAG_THRESHOLD) {
+                setIsRealSwipe(true);
+                if (null === lockedDirection) {
+                    const hasHorizontal = swipeDirections.includes('left') || swipeDirections.includes('right');
+                    const hasVertical = swipeDirections.includes('up') || swipeDirections.includes('down');
+                    if (hasHorizontal && hasVertical) {
+                        const absX = Math.abs(deltaX);
+                        const absY = Math.abs(deltaY);
+                        setLockedDirection(absX > absY ? 'horizontal' : 'vertical');
+                    }
+                }
+            }
+        }
+        let candidate;
+        if (intendedSwipeDirectionRef.current) {
+            const direction = intendedSwipeDirectionRef.current;
+            const currentDisplacement = getDisplacement(direction, cancelDeltaX, cancelDeltaY);
+            if (currentDisplacement > SWIPE_THRESHOLD) {
+                cancelledSwipeRef.current = false;
+                setCurrentSwipeDirection(direction);
+            } else if (!(swipeDirections.includes('left') && swipeDirections.includes('right')) && !(swipeDirections.includes('up') && swipeDirections.includes('down')) && maxSwipeDisplacementRef.current - currentDisplacement >= REVERSE_CANCEL_THRESHOLD) cancelledSwipeRef.current = true;
+        } else {
+            if ('vertical' === lockedDirection) {
+                if (deltaY > 0) candidate = 'down';
+                else if (deltaY < 0) candidate = 'up';
+            } else if ('horizontal' === lockedDirection) {
+                if (deltaX > 0) candidate = 'right';
+                else if (deltaX < 0) candidate = 'left';
+            } else candidate = Math.abs(deltaX) >= Math.abs(deltaY) ? deltaX > 0 ? 'right' : 'left' : deltaY > 0 ? 'down' : 'up';
+            if (candidate && swipeDirections.includes(candidate)) {
+                intendedSwipeDirectionRef.current = candidate;
+                maxSwipeDisplacementRef.current = getDisplacement(candidate, deltaX, deltaY);
+                setCurrentSwipeDirection(candidate);
+            }
+        }
+        const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
+        let newOffsetX = initialTransformRef.current.x;
+        let newOffsetY = initialTransformRef.current.y;
+        if ('horizontal' === lockedDirection) {
+            if (swipeDirections.includes('left') || swipeDirections.includes('right')) newOffsetX += dampedDelta.x;
+        } else if ('vertical' === lockedDirection) {
+            if (swipeDirections.includes('up') || swipeDirections.includes('down')) newOffsetY += dampedDelta.y;
+        } else {
+            if (swipeDirections.includes('left') || swipeDirections.includes('right')) newOffsetX += dampedDelta.x;
+            if (swipeDirections.includes('up') || swipeDirections.includes('down')) newOffsetY += dampedDelta.y;
+        }
+        setResolvedDragOffset({
+            x: newOffsetX,
+            y: newOffsetY
+        });
+    }
+    function handleKeyDown(event) {
+        if ('Escape' === event.key) {
+            if (!rootRef.current || !contains(rootRef.current, activeElement(ownerDocument(rootRef.current)))) return;
+            store.closeToast(toast.id);
+        }
+    }
+    __rspack_external_react.useEffect(()=>{
+        if (!swipeEnabled) return;
+        const element = rootRef.current;
+        if (!element) return;
+        function preventDefaultTouchStart(event) {
+            if (contains(element, getTarget(event))) event.preventDefault();
+        }
+        return addEventListener(element, 'touchmove', preventDefaultTouchStart, {
+            passive: false
+        });
+    }, [
+        swipeEnabled
+    ]);
+    function getDragStyles() {
+        if (!isSwiping && dragOffset.x === initialTransform.x && dragOffset.y === initialTransform.y && !dragDismissed) return {
+            [ToastRootCssVars_ToastRootCssVars.swipeMovementX]: '0px',
+            [ToastRootCssVars_ToastRootCssVars.swipeMovementY]: '0px'
+        };
+        const deltaX = dragOffset.x - initialTransform.x;
+        const deltaY = dragOffset.y - initialTransform.y;
+        return {
+            transition: isSwiping ? 'none' : void 0,
+            transform: isSwiping ? `translateX(${dragOffset.x}px) translateY(${dragOffset.y}px) scale(${initialTransform.scale})` : void 0,
+            [ToastRootCssVars_ToastRootCssVars.swipeMovementX]: `${deltaX}px`,
+            [ToastRootCssVars_ToastRootCssVars.swipeMovementY]: `${deltaY}px`
+        };
+    }
+    const isHighPriority = 'high' === toast.priority;
+    const defaultProps = {
+        role: isHighPriority ? 'alertdialog' : 'dialog',
+        tabIndex: 0,
+        'aria-modal': false,
+        'aria-labelledby': titleId,
+        'aria-describedby': descriptionId,
+        'aria-hidden': isHighPriority && !focused ? true : void 0,
+        onPointerDown: swipeEnabled ? handlePointerDown : void 0,
+        onPointerMove: swipeEnabled ? handlePointerMove : void 0,
+        onPointerUp: swipeEnabled ? handleSwipeEnd : void 0,
+        onPointerCancel: swipeEnabled ? handleSwipeEnd : void 0,
+        onKeyDown: handleKeyDown,
+        inert: inertValue(toast.limited),
+        style: {
+            ...getDragStyles(),
+            [ToastRootCssVars_ToastRootCssVars.index]: 'ending' === toast.transitionStatus ? domIndex : visibleIndex,
+            [ToastRootCssVars_ToastRootCssVars.offsetY]: `${offsetY}px`,
+            [ToastRootCssVars_ToastRootCssVars.height]: toast.height ? `${toast.height}px` : void 0
+        }
+    };
+    const toastRoot = __rspack_external_react.useMemo(()=>({
+            rootRef,
+            toast,
+            titleId,
+            setTitleId,
+            descriptionId,
+            setDescriptionId,
+            swiping: isSwiping,
+            swipeDirection: currentSwipeDirection,
+            recalculateHeight,
+            index: domIndex,
+            visibleIndex,
+            expanded
+        }), [
+        toast,
+        titleId,
+        descriptionId,
+        isSwiping,
+        currentSwipeDirection,
+        recalculateHeight,
+        domIndex,
+        visibleIndex,
+        expanded
+    ]);
+    const state = {
+        transitionStatus: toast.transitionStatus,
+        expanded,
+        limited: toast.limited || false,
+        type: toast.type,
+        swiping: toastRoot.swiping,
+        swipeDirection: toastRoot.swipeDirection
+    };
+    const element = useRenderElement('div', componentProps, {
+        ref: [
+            forwardedRef,
+            toastRoot.rootRef
+        ],
+        state,
+        stateAttributesMapping: stateAttributesMapping,
+        props: [
+            defaultProps,
+            elementProps
+        ]
+    });
+    return /*#__PURE__*/ jsx(ToastRootContext.Provider, {
+        value: toastRoot,
+        children: element
+    });
+});
+if ("production" !== process.env.NODE_ENV) ToastRoot_ToastRoot.displayName = "ToastRoot";
+const ToastTitle_ToastTitle = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, id: idProp, children: childrenProp, ...elementProps } = componentProps;
+    const { toast, setTitleId } = useToastRootContext();
+    const children = childrenProp ?? toast.title;
+    const shouldRender = Boolean(children);
+    const id = useId(idProp);
+    useIsoLayoutEffect(()=>{
+        if (!shouldRender) return;
+        setTitleId(id);
+        return ()=>{
+            setTitleId(void 0);
+        };
+    }, [
+        shouldRender,
+        id,
+        setTitleId
+    ]);
+    const state = {
+        type: toast.type
+    };
+    const element = useRenderElement('h2', componentProps, {
+        ref: forwardedRef,
+        state,
+        props: {
+            ...elementProps,
+            id,
+            children
+        }
+    });
+    if (!shouldRender) return null;
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) ToastTitle_ToastTitle.displayName = "ToastTitle";
+const ToastClose_ToastClose = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, disabled, nativeButton = true, ...elementProps } = componentProps;
+    const store = useToastProviderContext();
+    const { toast } = useToastRootContext();
+    const expanded = store.useState('expanded');
+    const [hasFocus, setHasFocus] = __rspack_external_react.useState(false);
+    const { getButtonProps, buttonRef } = useButton({
+        disabled,
+        native: nativeButton
+    });
+    const state = {
+        type: toast.type
+    };
+    const element = useRenderElement('button', componentProps, {
+        ref: [
+            forwardedRef,
+            buttonRef
+        ],
+        state,
+        props: [
+            {
+                'aria-hidden': !expanded && !hasFocus,
+                onClick () {
+                    store.closeToast(toast.id);
+                },
+                onFocus () {
+                    setHasFocus(true);
+                },
+                onBlur () {
+                    setHasFocus(false);
+                }
+            },
+            elementProps,
+            getButtonProps
+        ]
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) ToastClose_ToastClose.displayName = "ToastClose";
+let counter = 0;
+function generateId(prefix) {
+    counter += 1;
+    return `${prefix}-${Math.random().toString(36).slice(2, 6)}-${counter}`;
+}
+function resolvePromiseOptions(options, result) {
+    if ('string' == typeof options) return {
+        description: options
+    };
+    if ('function' == typeof options) {
+        const resolvedOptions = options(result);
+        return 'string' == typeof resolvedOptions ? {
+            description: resolvedOptions
+        } : resolvedOptions;
+    }
+    return options;
+}
+function createToastMetadata(toasts) {
+    const metadata = new Map();
+    let visibleIndex = 0;
+    let offsetY = 0;
+    toasts.forEach((toast, toastIndex)=>{
+        const isEnding = 'ending' === toast.transitionStatus;
+        metadata.set(toast.id, {
+            value: toast,
+            domIndex: toastIndex,
+            visibleIndex: isEnding ? -1 : visibleIndex,
+            offsetY
+        });
+        offsetY += toast.height || 0;
+        if (!isEnding) visibleIndex += 1;
+    });
+    return metadata;
+}
+const toastMetadataSelector = (state)=>state.toastMetadata;
+const selectors = {
+    toasts: createSelector((state)=>state.toasts),
+    isEmpty: createSelector((state)=>0 === state.toasts.length),
+    toast: createSelector(toastMetadataSelector, (toastMetadata, id)=>toastMetadata.get(id)?.value),
+    toastIndex: createSelector(toastMetadataSelector, (toastMetadata, id)=>toastMetadata.get(id)?.domIndex ?? -1),
+    toastOffsetY: createSelector(toastMetadataSelector, (toastMetadata, id)=>toastMetadata.get(id)?.offsetY ?? 0),
+    toastVisibleIndex: createSelector(toastMetadataSelector, (toastMetadata, id)=>toastMetadata.get(id)?.visibleIndex ?? -1),
+    hovering: createSelector((state)=>state.hovering),
+    focused: createSelector((state)=>state.focused),
+    expanded: createSelector((state)=>state.hovering || state.focused),
+    expandedOrOutOfFocus: createSelector((state)=>state.hovering || state.focused || !state.isWindowFocused),
+    prevFocusElement: createSelector((state)=>state.prevFocusElement)
+};
+class ToastStore extends ReactStore {
+    timers = new Map();
+    areTimersPaused = false;
+    constructor(initialState){
+        super({
+            ...initialState,
+            toastMetadata: createToastMetadata(initialState.toasts)
+        }, {}, selectors);
+    }
+    setFocused(focused) {
+        this.set('focused', focused);
+    }
+    setHovering(hovering) {
+        this.set('hovering', hovering);
+    }
+    setIsWindowFocused(isWindowFocused) {
+        this.set('isWindowFocused', isWindowFocused);
+    }
+    setPrevFocusElement(prevFocusElement) {
+        this.set('prevFocusElement', prevFocusElement);
+    }
+    setViewport = (viewport)=>{
+        this.set('viewport', viewport);
+    };
+    disposeEffect = ()=>()=>{
+            this.timers.forEach((timer)=>{
+                timer.timeout?.clear();
+            });
+            this.timers.clear();
+        };
+    removeToast(toastId, behavior = {}) {
+        const index = selectors.toastIndex(this.state, toastId);
+        if (-1 === index) return;
+        const toast = this.state.toasts[index];
+        if (!behavior.skipOnRemove) toast?.onRemove?.();
+        const newToasts = [
+            ...this.state.toasts
+        ];
+        newToasts.splice(index, 1);
+        this.setToasts(newToasts);
+    }
+    addToast = (toast)=>{
+        const { timeout, limit } = this.state;
+        const id = toast.id || generateId('toast');
+        if (toast.id) {
+            const existingToast = selectors.toast(this.state, toast.id);
+            if (existingToast) if ('ending' === existingToast.transitionStatus) this.removeToast(toast.id, {
+                skipOnRemove: true
+            });
+            else {
+                const { id: ignoredId, transitionStatus: ignoredTransitionStatus, ...updates } = toast;
+                this.updateToastInternal(toast.id, updates, {
+                    resetTimer: true,
+                    markUpdated: true
+                });
+                return toast.id;
+            }
+        }
+        const toastToAdd = {
+            ...toast,
+            id,
+            updateKey: 0,
+            transitionStatus: 'starting'
+        };
+        const updatedToasts = [
+            toastToAdd,
+            ...this.state.toasts
+        ];
+        const activeToasts = updatedToasts.filter((t)=>'ending' !== t.transitionStatus);
+        if (activeToasts.length > limit) {
+            const excessCount = activeToasts.length - limit;
+            const oldestActiveToasts = activeToasts.slice(-excessCount);
+            const limitedIds = new Set(oldestActiveToasts.map((t)=>t.id));
+            this.setToasts(updatedToasts.map((t)=>{
+                const limited = limitedIds.has(t.id);
+                if (t.limited !== limited) return {
+                    ...t,
+                    limited
+                };
+                return t;
+            }));
+        } else this.setToasts(updatedToasts.map((t)=>t.limited ? {
+                ...t,
+                limited: false
+            } : t));
+        const duration = toastToAdd.timeout ?? timeout;
+        if ('loading' !== toastToAdd.type && duration > 0) this.scheduleTimer(id, duration, ()=>this.closeToast(id));
+        if (selectors.expandedOrOutOfFocus(this.state)) this.pauseTimers();
+        return id;
+    };
+    updateToast = (id, updates)=>{
+        this.updateToastInternal(id, updates, {
+            markUpdated: true
+        });
+    };
+    updateToastInternal = (id, updates, behavior = {})=>{
+        const { timeout, toasts } = this.state;
+        const prevToast = selectors.toast(this.state, id) ?? null;
+        if (!prevToast) return;
+        if ('ending' === prevToast.transitionStatus) return;
+        const nextToast = {
+            ...prevToast,
+            ...updates,
+            ...behavior.markUpdated && {
+                updateKey: (prevToast.updateKey ?? 0) + 1
+            }
+        };
+        this.setToasts(toasts.map((toast)=>toast.id === id ? nextToast : toast));
+        const nextTimeout = nextToast.timeout ?? timeout;
+        const prevTimeout = prevToast?.timeout ?? timeout;
+        const timeoutUpdated = Object.hasOwn(updates, 'timeout');
+        const shouldHaveTimer = 'ending' !== nextToast.transitionStatus && 'loading' !== nextToast.type && nextTimeout > 0;
+        const hasTimer = this.timers.has(id);
+        const timeoutChanged = prevTimeout !== nextTimeout;
+        const wasLoading = prevToast?.type === 'loading';
+        if (!shouldHaveTimer && hasTimer) {
+            const timer = this.timers.get(id);
+            timer?.timeout?.clear();
+            this.timers.delete(id);
+            return;
+        }
+        if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading || behavior.resetTimer)) {
+            const timer = this.timers.get(id);
+            if (timer) {
+                timer.timeout?.clear();
+                this.timers.delete(id);
+            }
+            this.scheduleTimer(id, nextTimeout, ()=>this.closeToast(id));
+            if (selectors.expandedOrOutOfFocus(this.state)) this.pauseTimers();
+        }
+    };
+    closeToast = (toastId)=>{
+        const closeAll = void 0 === toastId;
+        const { limit, toasts } = this.state;
+        let toastsToClose;
+        if (closeAll) {
+            toastsToClose = toasts;
+            this.timers.forEach((timer)=>{
+                timer.timeout?.clear();
+            });
+            this.timers.clear();
+        } else {
+            const toast = selectors.toast(this.state, toastId);
+            if (!toast) return;
+            toastsToClose = [
+                toast
+            ];
+            const timer = this.timers.get(toastId);
+            if (timer?.timeout) {
+                timer.timeout.clear();
+                this.timers.delete(toastId);
+            }
+        }
+        let activeIndex = 0;
+        const newToasts = toasts.map((item)=>{
+            if (closeAll || item.id === toastId) return {
+                ...item,
+                transitionStatus: 'ending',
+                height: 0
+            };
+            if ('ending' === item.transitionStatus) return item;
+            const isLimited = activeIndex >= limit;
+            activeIndex += 1;
+            return item.limited !== isLimited ? {
+                ...item,
+                limited: isLimited
+            } : item;
+        });
+        const updates = {
+            toasts: newToasts,
+            toastMetadata: createToastMetadata(newToasts)
+        };
+        if (closeAll || 1 === toasts.length) {
+            updates.hovering = false;
+            updates.focused = false;
+        }
+        this.update(updates);
+        toastsToClose.forEach((toast)=>{
+            if ('ending' !== toast.transitionStatus) toast.onClose?.();
+        });
+        this.handleFocusManagement(toastId);
+    };
+    promiseToast = (promiseValue, options)=>{
+        const loadingOptions = resolvePromiseOptions(options.loading);
+        const id = this.addToast({
+            ...loadingOptions,
+            type: 'loading'
+        });
+        const handledPromise = promiseValue.then((result)=>{
+            const successOptions = resolvePromiseOptions(options.success, result);
+            this.updateToast(id, {
+                ...successOptions,
+                type: 'success',
+                timeout: successOptions.timeout
+            });
+            return result;
+        }).catch((error)=>{
+            const errorOptions = resolvePromiseOptions(options.error, error);
+            this.updateToast(id, {
+                ...errorOptions,
+                type: 'error',
+                timeout: errorOptions.timeout
+            });
+            return Promise.reject(error);
+        });
+        if (({}).hasOwnProperty.call(options, 'setPromise')) options.setPromise(handledPromise);
+        return handledPromise;
+    };
+    pauseTimers() {
+        if (this.areTimersPaused) return;
+        this.areTimersPaused = true;
+        this.timers.forEach((timer)=>{
+            if (timer.timeout) {
+                timer.timeout.clear();
+                const elapsed = Date.now() - timer.start;
+                const remaining = timer.delay - elapsed;
+                timer.remaining = remaining > 0 ? remaining : 0;
+            }
+        });
+    }
+    resumeTimers() {
+        if (!this.areTimersPaused) return;
+        this.areTimersPaused = false;
+        this.timers.forEach((timer, id)=>{
+            timer.remaining = timer.remaining > 0 ? timer.remaining : timer.delay;
+            timer.timeout ??= Timeout.create();
+            timer.timeout.start(timer.remaining, ()=>{
+                this.timers.delete(id);
+                timer.callback();
+            });
+            timer.start = Date.now();
+        });
+    }
+    restoreFocusToPrevElement() {
+        this.state.prevFocusElement?.focus({
+            preventScroll: true
+        });
+    }
+    handleDocumentPointerDown = (event)=>{
+        if ('touch' !== event.pointerType) return;
+        const target = getTarget(event);
+        if (contains(this.state.viewport, target)) return;
+        this.resumeTimers();
+        this.update({
+            hovering: false,
+            focused: false
+        });
+    };
+    scheduleTimer(id, delay, callback) {
+        const start = Date.now();
+        const shouldStartActive = !selectors.expandedOrOutOfFocus(this.state);
+        const currentTimeout = shouldStartActive ? Timeout.create() : void 0;
+        currentTimeout?.start(delay, ()=>{
+            this.timers.delete(id);
+            callback();
+        });
+        this.timers.set(id, {
+            timeout: currentTimeout,
+            start: shouldStartActive ? start : 0,
+            delay,
+            remaining: delay,
+            callback
+        });
+    }
+    setToasts(newToasts) {
+        const updates = {
+            toasts: newToasts,
+            toastMetadata: createToastMetadata(newToasts)
+        };
+        if (0 === newToasts.length) {
+            updates.hovering = false;
+            updates.focused = false;
+        }
+        this.update(updates);
+    }
+    handleFocusManagement(toastId) {
+        const activeEl = activeElement(ownerDocument(this.state.viewport));
+        if (!this.state.viewport || !contains(this.state.viewport, activeEl) || !matchesFocusVisible(activeEl)) return;
+        if (void 0 === toastId) return void this.restoreFocusToPrevElement();
+        const toasts = selectors.toasts(this.state);
+        const currentIndex = selectors.toastIndex(this.state, toastId);
+        let nextToast = null;
+        let index = currentIndex + 1;
+        while(index < toasts.length){
+            if ('ending' !== toasts[index].transitionStatus) {
+                nextToast = toasts[index];
+                break;
+            }
+            index += 1;
+        }
+        if (!nextToast) {
+            index = currentIndex - 1;
+            while(index >= 0){
+                if ('ending' !== toasts[index].transitionStatus) {
+                    nextToast = toasts[index];
+                    break;
+                }
+                index -= 1;
+            }
+        }
+        if (nextToast) nextToast.ref?.current?.focus();
+        else this.restoreFocusToPrevElement();
+    }
+}
+const ToastProvider_ToastProvider = function(props) {
+    const { children, timeout = 5000, limit = 3, toastManager } = props;
+    const store = useRefWithInit(()=>new ToastStore({
+            timeout,
+            limit,
+            viewport: null,
+            toasts: [],
+            hovering: false,
+            focused: false,
+            isWindowFocused: true,
+            prevFocusElement: null
+        })).current;
+    useOnMount(store.disposeEffect);
+    __rspack_external_react.useEffect(function() {
+        if (!toastManager) return;
+        const unsubscribe = toastManager[' subscribe'](({ action, options })=>{
+            const id = options.id;
+            if ('promise' === action && options.promise) store.promiseToast(options.promise, options);
+            else if ('update' === action && id) store.updateToast(id, options);
+            else if ('close' === action) store.closeToast(id);
+            else store.addToast(options);
+        });
+        return unsubscribe;
+    }, [
+        store,
+        toastManager
+    ]);
+    store.useSyncedValues({
+        timeout,
+        limit
+    });
+    return /*#__PURE__*/ jsx(ToastContext.Provider, {
+        value: store,
+        children: children
+    });
+};
+if ("production" !== process.env.NODE_ENV) ToastProvider_ToastProvider.displayName = "ToastProvider";
+const ToastPortal = FloatingPortalLite_FloatingPortalLite;
+function useToastManager() {
+    const store = __rspack_external_react.useContext(ToastContext);
+    if (!store) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: useToastManager must be used within <Toast.Provider>.' : esm_formatErrorMessage(73));
+    const toasts = store.useState('toasts');
+    return __rspack_external_react.useMemo(()=>({
+            toasts,
+            add: store.addToast,
+            close: store.closeToast,
+            update: store.updateToast,
+            promise: store.promiseToast
+        }), [
+        toasts,
+        store
+    ]);
+}
+const Toast_module = {
+    viewport: "viewport-Wd6ktK",
+    root: "root-TfN4xI",
+    status: "status-O_LUHn",
+    success: "success-tUs5Op",
+    error: "error-clgmW0",
+    preview: "preview-HUjSkl",
+    title: "title-ECAZRW",
+    close: "close-GX8r1b"
+};
+function getSkinClassName(skin) {
+    switch(skin){
+        case 'success':
+            return Toast_module.success;
+        case 'error':
+            return Toast_module.error;
+        case 'preview':
+            return Toast_module.preview;
+        case 'status':
+        default:
+            return Toast_module.status;
+    }
+}
+const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToastViewport_ToastViewport, {
+        ref: ref,
+        className: clsx(Toast_module.viewport, 'theme-vars', className),
+        ...props
+    }));
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, skin, swipeDirection = [], toast, ...props }, ref)=>/*#__PURE__*/ jsx(ToastRoot_ToastRoot, {
+        ref: ref,
+        toast: toast,
+        className: clsx(Toast_module.root, getSkinClassName(skin), className),
+        swipeDirection: swipeDirection,
+        ...props
+    }));
+const Title = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToastTitle_ToastTitle, {
+        ref: ref,
+        className: clsx(Toast_module.title, className),
+        ...props
+    }));
+const CloseButton = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToastClose_ToastClose, {
+        ref: ref,
+        className: clsx(Toast_module.close, className),
+        ...props,
+        children: /*#__PURE__*/ jsx(Close, {
+            "aria-hidden": "true"
+        })
+    }));
+const Toast = {
+    Provider: ToastProvider_ToastProvider,
+    Portal: ToastPortal,
+    Viewport: Viewport,
+    Root: Root,
+    Title: Title,
+    Close: CloseButton,
+    useToastManager: useToastManager
+};
+export { Toast };