@radix-ui/react-toast 0.1.2-rc.48 → 0.1.2-rc.50

package/dist/index.module.js

@@ -3,11 +3,12 @@ import {useState as $eyrYI$useState, useRef as $eyrYI$useRef, createElement as $
 import {createPortal as $eyrYI$createPortal} from "react-dom";
 import {composeEventHandlers as $eyrYI$composeEventHandlers} from "@radix-ui/primitive";
 import {useComposedRefs as $eyrYI$useComposedRefs} from "@radix-ui/react-compose-refs";
+import {createCollection as $eyrYI$createCollection} from "@radix-ui/react-collection";
 import {createContextScope as $eyrYI$createContextScope} from "@radix-ui/react-context";
 import {Branch as $eyrYI$Branch, Root as $eyrYI$Root} from "@radix-ui/react-dismissable-layer";
-import {Portal as $eyrYI$Portal} from "@radix-ui/react-portal";
 import {Presence as $eyrYI$Presence} from "@radix-ui/react-presence";
 import {Primitive as $eyrYI$Primitive, dispatchDiscreteCustomEvent as $eyrYI$dispatchDiscreteCustomEvent} from "@radix-ui/react-primitive";
+import {Slottable as $eyrYI$Slottable} from "@radix-ui/react-slot";
 import {useCallbackRef as $eyrYI$useCallbackRef} from "@radix-ui/react-use-callback-ref";
 import {useControllableState as $eyrYI$useControllableState} from "@radix-ui/react-use-controllable-state";
 import {useLayoutEffect as $eyrYI$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
@@ -47,10 +48,14 @@ $parcel$export($054eb8030ebde76e$exports, "Close", () => $054eb8030ebde76e$expor
 
 
 
+
 /* -------------------------------------------------------------------------------------------------
  * ToastProvider
  * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$PROVIDER_NAME = 'ToastProvider';
-const [$054eb8030ebde76e$var$createToastContext, $054eb8030ebde76e$export$8a359da18fbc9073] = $eyrYI$createContextScope('Toast');
+const [$054eb8030ebde76e$var$Collection, $054eb8030ebde76e$var$useCollection, $054eb8030ebde76e$var$createCollectionScope] = $eyrYI$createCollection('Toast');
+const [$054eb8030ebde76e$var$createToastContext, $054eb8030ebde76e$export$8a359da18fbc9073] = $eyrYI$createContextScope('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;
@@ -58,7 +63,9 @@ const $054eb8030ebde76e$export$f5d03d415824e0e = (props)=>{
     const [toastCount, setToastCount] = $eyrYI$useState(0);
     const isFocusedToastEscapeKeyDownRef = $eyrYI$useRef(false);
     const isClosePausedRef = $eyrYI$useRef(false);
-    return /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastProviderProvider, {
+    return /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$Collection.Provider, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastProviderProvider, {
         scope: __scopeToast,
         label: label,
         duration: duration,
@@ -75,7 +82,16 @@ const $054eb8030ebde76e$export$f5d03d415824e0e = (props)=>{
         , []),
         isFocusedToastEscapeKeyDownRef: isFocusedToastEscapeKeyDownRef,
         isClosePausedRef: isClosePausedRef
-    }, children);
+    }, 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;
+    }
 };
 /*#__PURE__*/ Object.assign($054eb8030ebde76e$export$f5d03d415824e0e, {
     displayName: $054eb8030ebde76e$var$PROVIDER_NAME
@@ -91,10 +107,14 @@ const $054eb8030ebde76e$var$VIEWPORT_RESUME = 'toast.viewportResume';
 const $054eb8030ebde76e$export$6192c2425ecfd989 = /*#__PURE__*/ $eyrYI$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 = $eyrYI$useRef(null);
+    const headFocusProxyRef = $eyrYI$useRef(null);
+    const tailFocusProxyRef = $eyrYI$useRef(null);
     const ref = $eyrYI$useRef(null);
     const composedRefs = $eyrYI$useComposedRefs(forwardedRef, ref, context.onViewportChange);
     const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
+    const hasToasts = context.toastCount > 0;
     $eyrYI$useEffect(()=>{
         const handleKeyDown = (event)=>{
             var _ref$current;
@@ -142,33 +162,62 @@ const $054eb8030ebde76e$export$6192c2425ecfd989 = /*#__PURE__*/ $eyrYI$forwardRe
     }, [
         context.isClosePausedRef
     ]);
+    const getSortedTabbableCandidates = $eyrYI$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
+    ]);
     $eyrYI$useEffect(()=>{
-        const viewport = ref.current; // Re-order DOM so most recent toasts are at top of DOM structure to improve tab order
+        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 prepended = new Set();
-            const observer = new MutationObserver((mutations)=>{
-                const addedNodes = mutations.map((mutation)=>Array.from(mutation.addedNodes)
-                ).reduce((a, b)=>a.concat(b)
-                );
-                addedNodes.forEach((node)=>{
-                    // mutation will immediately fire again when we prepend so we only prepend if
-                    // it hasn't just prepended.
-                    if (!prepended.has(node)) {
-                        viewport.prepend(node);
-                        prepended.add(node);
-                    } else // this else catches the case where the mutation fires immediately after prepend.
-                    // we remove from cache after it prepends to allow observer to catch future updates
-                    // to DOM order, e.g. if `key` changes for a toast and is reportalled to bottom.
-                    prepended.delete(node);
-                });
-            });
-            observer.observe(viewport, {
-                childList: true
-            });
-            return ()=>observer.disconnect()
+            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__*/ $eyrYI$createElement($eyrYI$Branch, {
         ref: wrapperRef,
         role: "region",
@@ -177,17 +226,59 @@ const $054eb8030ebde76e$export$6192c2425ecfd989 = /*#__PURE__*/ $eyrYI$forwardRe
         tabIndex: -1 // incase list has size when empty (e.g. padding), we remove pointer events so
         ,
         style: {
-            pointerEvents: context.toastCount > 0 ? undefined : 'none'
+            pointerEvents: hasToasts ? undefined : 'none'
+        }
+    }, hasToasts && /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$FocusProxy, {
+        ref: headFocusProxyRef,
+        onFocusFromOutsideViewport: ()=>{
+            const tabbableCandidates = getSortedTabbableCandidates({
+                tabbingDirection: 'forwards'
+            });
+            $054eb8030ebde76e$var$focusFirst(tabbableCandidates);
         }
+    }), /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$Collection.Slot, {
+        scope: __scopeToast
     }, /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.ol, $eyrYI$babelruntimehelpersesmextends({
         tabIndex: -1
     }, viewportProps, {
         ref: composedRefs
-    })));
+    }))), hasToasts && /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$FocusProxy, {
+        ref: tailFocusProxyRef,
+        onFocusFromOutsideViewport: ()=>{
+            const tabbableCandidates = getSortedTabbableCandidates({
+                tabbingDirection: 'backwards'
+            });
+            $054eb8030ebde76e$var$focusFirst(tabbableCandidates);
+        }
+    }));
 });
 /*#__PURE__*/ Object.assign($054eb8030ebde76e$export$6192c2425ecfd989, {
     displayName: $054eb8030ebde76e$var$VIEWPORT_NAME
 });
+/* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$FOCUS_PROXY_NAME = 'ToastFocusProxy';
+const $054eb8030ebde76e$var$FocusProxy = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , onFocusFromOutsideViewport: onFocusFromOutsideViewport , ...proxyProps } = props;
+    const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$FOCUS_PROXY_NAME, __scopeToast);
+    return /*#__PURE__*/ $eyrYI$createElement($eyrYI$VisuallyHidden, $eyrYI$babelruntimehelpersesmextends({
+        "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();
+        }
+    }));
+});
+/*#__PURE__*/ Object.assign($054eb8030ebde76e$var$FocusProxy, {
+    displayName: $054eb8030ebde76e$var$FOCUS_PROXY_NAME
+});
 /* -------------------------------------------------------------------------------------------------
  * Toast
  * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$TOAST_NAME = 'Toast';
@@ -245,7 +336,7 @@ const $054eb8030ebde76e$export$8d8dc7d5f743331b = /*#__PURE__*/ $eyrYI$forwardRe
     onClose () {}
 });
 const $054eb8030ebde76e$var$ToastImpl = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
-    const { __scopeToast: __scopeToast , type: type = 'foreground' , duration: durationProp , open: open , onClose: onClose , onEscapeKeyDown: onEscapeKeyDown , onSwipeStart: onSwipeStart , onSwipeMove: onSwipeMove , onSwipeCancel: onSwipeCancel , onSwipeEnd: onSwipeEnd , ...toastProps } = props;
+    const { __scopeToast: __scopeToast , children: children , type: type = 'foreground' , duration: durationProp , open: open , onClose: onClose , onEscapeKeyDown: onEscapeKeyDown , onSwipeStart: onSwipeStart , onSwipeMove: onSwipeMove , onSwipeCancel: onSwipeCancel , onSwipeEnd: onSwipeEnd , ...toastProps } = props;
     const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast);
     const ref = $eyrYI$useRef(null);
     const composedRefs = $eyrYI$useComposedRefs(forwardedRef, ref);
@@ -255,13 +346,14 @@ const $054eb8030ebde76e$var$ToastImpl = /*#__PURE__*/ $eyrYI$forwardRef((props,
     const closeTimerStartTimeRef = $eyrYI$useRef(0);
     const closeTimerRemainingTimeRef = $eyrYI$useRef(duration1);
     const closeTimerRef = $eyrYI$useRef(0);
+    const [renderLabel, setRenderLabel] = $eyrYI$useState(false);
     const { onToastAdd: onToastAdd , onToastRemove: onToastRemove  } = context;
     const handleClose = $eyrYI$useCallbackRef(()=>{
-        var _ref$current2, _context$viewport;
+        var _ref$current2, _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 = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.contains(document.activeElement);
-        if (isFocusInToast) (_context$viewport = context.viewport) === null || _context$viewport === void 0 || _context$viewport.focus();
+        if (isFocusInToast) (_context$viewport2 = context.viewport) === null || _context$viewport2 === void 0 || _context$viewport2.focus();
         onClose();
     });
     const startTimer = $eyrYI$useCallback((duration)=>{
@@ -312,19 +404,17 @@ const $054eb8030ebde76e$var$ToastImpl = /*#__PURE__*/ $eyrYI$forwardRef((props,
     }, [
         onToastAdd,
         onToastRemove
-    ]);
+    ]); // render label in the next frame to trigger toast announcement in NVDA
+    $054eb8030ebde76e$var$useNextFrame(()=>setRenderLabel(true)
+    );
     if (!context.viewport) return null;
-    return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Fragment, null, /*#__PURE__*/ $eyrYI$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
-    }, props.children), /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastInteractiveProvider, {
+    return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Fragment, null, /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastInteractiveProvider, {
         scope: __scopeToast,
         isInteractive: true,
         onClose: handleClose
-    }, /*#__PURE__*/ $eyrYI$createPortal(/*#__PURE__*/ $eyrYI$createElement($eyrYI$Root, {
+    }, /*#__PURE__*/ $eyrYI$createPortal(/*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$Collection.ItemSlot, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ $eyrYI$createElement($eyrYI$Root, {
         asChild: true,
         onEscapeKeyDown: $eyrYI$composeEventHandlers(onEscapeKeyDown, ()=>{
             if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
@@ -332,8 +422,10 @@ const $054eb8030ebde76e$var$ToastImpl = /*#__PURE__*/ $eyrYI$forwardRef((props,
         })
     }, /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.li, $eyrYI$babelruntimehelpersesmextends({
         role: "status",
-        "aria-live": "off",
-        "aria-atomic": true,
+        "aria-live": type === 'foreground' ? 'assertive' : 'polite',
+        "aria-atomic": true // Prevent voice over from announcing before the label is rendered
+        ,
+        "aria-hidden": !renderLabel || undefined,
         tabIndex: 0,
         "data-state": open ? 'open' : 'closed',
         "data-swipe-direction": context.swipeDirection
@@ -423,7 +515,7 @@ const $054eb8030ebde76e$var$ToastImpl = /*#__PURE__*/ $eyrYI$forwardRef((props,
                 });
             }
         })
-    }))), context.viewport)));
+    }), /*#__PURE__*/ $eyrYI$createElement($eyrYI$VisuallyHidden, null, renderLabel && context.label), /*#__PURE__*/ $eyrYI$createElement($eyrYI$Slottable, null, children)))), context.viewport)));
 });
 $054eb8030ebde76e$var$ToastImpl.propTypes = {
     type (props) {
@@ -432,30 +524,11 @@ $054eb8030ebde76e$var$ToastImpl.propTypes = {
             'background'
         ].includes(props.type)) {
             const error = `Invalid prop \`type\` supplied to \`${$054eb8030ebde76e$var$TOAST_NAME}\`. Expected \`foreground | background\`.`;
-            throw new Error(error);
+            return new Error(error);
         }
         return null;
     }
 };
-/* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ToastAnnounce = (props)=>{
-    const { __scopeToast: __scopeToast , ...announceProps } = props;
-    const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast);
-    const [renderChildren, setRenderChildren] = $eyrYI$useState(false);
-    const [isAnnounced, setIsAnnounced] = $eyrYI$useState(false); // render children in the next frame to ensure toast is announced in NVDA
-    $054eb8030ebde76e$var$useNextFrame(()=>setRenderChildren(true)
-    );
-    $eyrYI$useEffect(()=>{
-        const timer = window.setTimeout(()=>setIsAnnounced(true)
-        , 1000);
-        return ()=>window.clearTimeout(timer)
-        ;
-    }, []);
-    return isAnnounced ? null : /*#__PURE__*/ $eyrYI$createElement($eyrYI$Portal, {
-        asChild: true
-    }, /*#__PURE__*/ $eyrYI$createElement($eyrYI$VisuallyHidden, {
-        asChild: true
-    }, /*#__PURE__*/ $eyrYI$createElement("div", announceProps, renderChildren && /*#__PURE__*/ $eyrYI$createElement($eyrYI$Fragment, null, context.label, " ", props.children))));
-};
 /* -------------------------------------------------------------------------------------------------
  * ToastTitle
  * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$TITLE_NAME = 'ToastTitle';
@@ -493,7 +566,7 @@ const $054eb8030ebde76e$export$3019feecfda683d2 = /*#__PURE__*/ $eyrYI$forwardRe
 });
 $054eb8030ebde76e$export$3019feecfda683d2.propTypes = {
     altText (props) {
-        if (!props.altText) throw new Error(`Missing prop \`altText\` expected on \`${$054eb8030ebde76e$var$ACTION_NAME}\``);
+        if (!props.altText) return new Error(`Missing prop \`altText\` expected on \`${$054eb8030ebde76e$var$ACTION_NAME}\``);
         return null;
     }
 };
@@ -551,6 +624,39 @@ function $054eb8030ebde76e$var$useNextFrame(callback = ()=>{}) {
         fn
     ]);
 }
+/**
+ * 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;