@radix-ui/react-toast 0.1.2-rc.49 → 0.1.2-rc.51

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react/toast/src/packages/react/toast/src/Toast.tsx","packages/react/toast/src/packages/react/toast/src/index.ts","packages/react/toast/src/index.ts"],"sourcesContent":[null,null,"export * from './Toast';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
+{"mappings":"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","sources":["packages/react/toast/src/packages/react/toast/src/Toast.tsx","packages/react/toast/src/packages/react/toast/src/index.ts","packages/react/toast/src/index.ts"],"sourcesContent":[null,null,"export {\n  createToastScope,\n  //\n  ToastProvider,\n  ToastViewport,\n  Toast,\n  ToastTitle,\n  ToastDescription,\n  ToastAction,\n  ToastClose,\n  //\n  Provider,\n  Viewport,\n  Root,\n  Title,\n  Description,\n  Action,\n  Close,\n} from './Toast';\nexport type {\n  ToastProviderProps,\n  ToastViewportProps,\n  ToastProps,\n  ToastTitleProps,\n  ToastDescriptionProps,\n  ToastActionProps,\n  ToastCloseProps,\n} from './Toast';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js

@@ -3,6 +3,7 @@ var $iTyic$react = require("react");
 var $iTyic$reactdom = require("react-dom");
 var $iTyic$radixuiprimitive = require("@radix-ui/primitive");
 var $iTyic$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
+var $iTyic$radixuireactcollection = require("@radix-ui/react-collection");
 var $iTyic$radixuireactcontext = require("@radix-ui/react-context");
 var $iTyic$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-layer");
 var $iTyic$radixuireactpresence = require("@radix-ui/react-presence");
@@ -13,45 +14,29 @@ var $iTyic$radixuireactusecontrollablestate = require("@radix-ui/react-use-contr
 var $iTyic$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
 var $iTyic$radixuireactvisuallyhidden = require("@radix-ui/react-visually-hidden");
 
-function $parcel$exportWildcard(dest, source) {
-  Object.keys(source).forEach(function(key) {
-    if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
-      return;
-    }
-
-    Object.defineProperty(dest, key, {
-      enumerable: true,
-      get: function get() {
-        return source[key];
-      }
-    });
-  });
-
-  return dest;
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-var $9208a85b3e79d33f$exports = {};
 
-$parcel$export($9208a85b3e79d33f$exports, "createToastScope", () => $9208a85b3e79d33f$export$8a359da18fbc9073);
-$parcel$export($9208a85b3e79d33f$exports, "ToastProvider", () => $9208a85b3e79d33f$export$f5d03d415824e0e);
-$parcel$export($9208a85b3e79d33f$exports, "ToastViewport", () => $9208a85b3e79d33f$export$6192c2425ecfd989);
-$parcel$export($9208a85b3e79d33f$exports, "Toast", () => $9208a85b3e79d33f$export$8d8dc7d5f743331b);
-$parcel$export($9208a85b3e79d33f$exports, "ToastTitle", () => $9208a85b3e79d33f$export$16d42d7c29b95a4);
-$parcel$export($9208a85b3e79d33f$exports, "ToastDescription", () => $9208a85b3e79d33f$export$ecddd96c53621d9a);
-$parcel$export($9208a85b3e79d33f$exports, "ToastAction", () => $9208a85b3e79d33f$export$3019feecfda683d2);
-$parcel$export($9208a85b3e79d33f$exports, "ToastClose", () => $9208a85b3e79d33f$export$811e70f61c205839);
-$parcel$export($9208a85b3e79d33f$exports, "Provider", () => $9208a85b3e79d33f$export$2881499e37b75b9a);
-$parcel$export($9208a85b3e79d33f$exports, "Viewport", () => $9208a85b3e79d33f$export$d5c6c08dc2d3ca7);
-$parcel$export($9208a85b3e79d33f$exports, "Root", () => $9208a85b3e79d33f$export$be92b6f5f03c0fe9);
-$parcel$export($9208a85b3e79d33f$exports, "Title", () => $9208a85b3e79d33f$export$f99233281efd08a0);
-$parcel$export($9208a85b3e79d33f$exports, "Description", () => $9208a85b3e79d33f$export$393edc798c47379d);
-$parcel$export($9208a85b3e79d33f$exports, "Action", () => $9208a85b3e79d33f$export$e19cd5f9376f8cee);
-$parcel$export($9208a85b3e79d33f$exports, "Close", () => $9208a85b3e79d33f$export$f39c2d165cd861fe);
+$parcel$export(module.exports, "createToastScope", () => $9208a85b3e79d33f$export$8a359da18fbc9073);
+$parcel$export(module.exports, "ToastProvider", () => $9208a85b3e79d33f$export$f5d03d415824e0e);
+$parcel$export(module.exports, "ToastViewport", () => $9208a85b3e79d33f$export$6192c2425ecfd989);
+$parcel$export(module.exports, "Toast", () => $9208a85b3e79d33f$export$8d8dc7d5f743331b);
+$parcel$export(module.exports, "ToastTitle", () => $9208a85b3e79d33f$export$16d42d7c29b95a4);
+$parcel$export(module.exports, "ToastDescription", () => $9208a85b3e79d33f$export$ecddd96c53621d9a);
+$parcel$export(module.exports, "ToastAction", () => $9208a85b3e79d33f$export$3019feecfda683d2);
+$parcel$export(module.exports, "ToastClose", () => $9208a85b3e79d33f$export$811e70f61c205839);
+$parcel$export(module.exports, "Provider", () => $9208a85b3e79d33f$export$2881499e37b75b9a);
+$parcel$export(module.exports, "Viewport", () => $9208a85b3e79d33f$export$d5c6c08dc2d3ca7);
+$parcel$export(module.exports, "Root", () => $9208a85b3e79d33f$export$be92b6f5f03c0fe9);
+$parcel$export(module.exports, "Title", () => $9208a85b3e79d33f$export$f99233281efd08a0);
+$parcel$export(module.exports, "Description", () => $9208a85b3e79d33f$export$393edc798c47379d);
+$parcel$export(module.exports, "Action", () => $9208a85b3e79d33f$export$e19cd5f9376f8cee);
+$parcel$export(module.exports, "Close", () => $9208a85b3e79d33f$export$f39c2d165cd861fe);
+
 
 
 
@@ -69,7 +54,10 @@ $parcel$export($9208a85b3e79d33f$exports, "Close", () => $9208a85b3e79d33f$expor
 /* -------------------------------------------------------------------------------------------------
  * ToastProvider
  * -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$PROVIDER_NAME = 'ToastProvider';
-const [$9208a85b3e79d33f$var$createToastContext, $9208a85b3e79d33f$export$8a359da18fbc9073] = $iTyic$radixuireactcontext.createContextScope('Toast');
+const [$9208a85b3e79d33f$var$Collection, $9208a85b3e79d33f$var$useCollection, $9208a85b3e79d33f$var$createCollectionScope] = $iTyic$radixuireactcollection.createCollection('Toast');
+const [$9208a85b3e79d33f$var$createToastContext, $9208a85b3e79d33f$export$8a359da18fbc9073] = $iTyic$radixuireactcontext.createContextScope('Toast', [
+    $9208a85b3e79d33f$var$createCollectionScope
+]);
 const [$9208a85b3e79d33f$var$ToastProviderProvider, $9208a85b3e79d33f$var$useToastProviderContext] = $9208a85b3e79d33f$var$createToastContext($9208a85b3e79d33f$var$PROVIDER_NAME);
 const $9208a85b3e79d33f$export$f5d03d415824e0e = (props)=>{
     const { __scopeToast: __scopeToast , label: label = 'Notification' , duration: duration = 5000 , swipeDirection: swipeDirection = 'right' , swipeThreshold: swipeThreshold = 50 , children: children  } = props;
@@ -77,7 +65,9 @@ const $9208a85b3e79d33f$export$f5d03d415824e0e = (props)=>{
     const [toastCount, setToastCount] = $iTyic$react.useState(0);
     const isFocusedToastEscapeKeyDownRef = $iTyic$react.useRef(false);
     const isClosePausedRef = $iTyic$react.useRef(false);
-    return /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$ToastProviderProvider, {
+    return /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$Collection.Provider, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$ToastProviderProvider, {
         scope: __scopeToast,
         label: label,
         duration: duration,
@@ -94,7 +84,7 @@ const $9208a85b3e79d33f$export$f5d03d415824e0e = (props)=>{
         , []),
         isFocusedToastEscapeKeyDownRef: isFocusedToastEscapeKeyDownRef,
         isClosePausedRef: isClosePausedRef
-    }, children);
+    }, children));
 };
 $9208a85b3e79d33f$export$f5d03d415824e0e.propTypes = {
     label (props) {
@@ -119,10 +109,14 @@ const $9208a85b3e79d33f$var$VIEWPORT_RESUME = 'toast.viewportResume';
 const $9208a85b3e79d33f$export$6192c2425ecfd989 = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{
     const { __scopeToast: __scopeToast , hotkey: hotkey = $9208a85b3e79d33f$var$VIEWPORT_DEFAULT_HOTKEY , label: label = 'Notifications ({hotkey})' , ...viewportProps } = props;
     const context = $9208a85b3e79d33f$var$useToastProviderContext($9208a85b3e79d33f$var$VIEWPORT_NAME, __scopeToast);
+    const getItems = $9208a85b3e79d33f$var$useCollection(__scopeToast);
     const wrapperRef = $iTyic$react.useRef(null);
+    const headFocusProxyRef = $iTyic$react.useRef(null);
+    const tailFocusProxyRef = $iTyic$react.useRef(null);
     const ref = $iTyic$react.useRef(null);
     const composedRefs = $iTyic$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, context.onViewportChange);
     const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
+    const hasToasts = context.toastCount > 0;
     $iTyic$react.useEffect(()=>{
         const handleKeyDown = (event)=>{
             var _ref$current;
@@ -170,33 +164,62 @@ const $9208a85b3e79d33f$export$6192c2425ecfd989 = /*#__PURE__*/ $iTyic$react.for
     }, [
         context.isClosePausedRef
     ]);
+    const getSortedTabbableCandidates = $iTyic$react.useCallback(({ tabbingDirection: tabbingDirection  })=>{
+        const toastItems = getItems();
+        const tabbableCandidates = toastItems.map((toastItem)=>{
+            const toastNode = toastItem.ref.current;
+            const toastTabbableCandidates = [
+                toastNode,
+                ...$9208a85b3e79d33f$var$getTabbableCandidates(toastNode)
+            ];
+            return tabbingDirection === 'forwards' ? toastTabbableCandidates : toastTabbableCandidates.reverse();
+        });
+        return (tabbingDirection === 'forwards' ? tabbableCandidates.reverse() : tabbableCandidates).flat();
+    }, [
+        getItems
+    ]);
     $iTyic$react.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 ($9208a85b3e79d33f$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__*/ $iTyic$react.createElement($iTyic$radixuireactdismissablelayer.Branch, {
         ref: wrapperRef,
         role: "region",
@@ -205,17 +228,59 @@ const $9208a85b3e79d33f$export$6192c2425ecfd989 = /*#__PURE__*/ $iTyic$react.for
         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__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$FocusProxy, {
+        ref: headFocusProxyRef,
+        onFocusFromOutsideViewport: ()=>{
+            const tabbableCandidates = getSortedTabbableCandidates({
+                tabbingDirection: 'forwards'
+            });
+            $9208a85b3e79d33f$var$focusFirst(tabbableCandidates);
+        }
+    }), /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$Collection.Slot, {
+        scope: __scopeToast
     }, /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactprimitive.Primitive.ol, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({
         tabIndex: -1
     }, viewportProps, {
         ref: composedRefs
-    })));
+    }))), hasToasts && /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$FocusProxy, {
+        ref: tailFocusProxyRef,
+        onFocusFromOutsideViewport: ()=>{
+            const tabbableCandidates = getSortedTabbableCandidates({
+                tabbingDirection: 'backwards'
+            });
+            $9208a85b3e79d33f$var$focusFirst(tabbableCandidates);
+        }
+    }));
 });
 /*#__PURE__*/ Object.assign($9208a85b3e79d33f$export$6192c2425ecfd989, {
     displayName: $9208a85b3e79d33f$var$VIEWPORT_NAME
 });
+/* -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$FOCUS_PROXY_NAME = 'ToastFocusProxy';
+const $9208a85b3e79d33f$var$FocusProxy = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , onFocusFromOutsideViewport: onFocusFromOutsideViewport , ...proxyProps } = props;
+    const context = $9208a85b3e79d33f$var$useToastProviderContext($9208a85b3e79d33f$var$FOCUS_PROXY_NAME, __scopeToast);
+    return /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactvisuallyhidden.VisuallyHidden, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({
+        "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($9208a85b3e79d33f$var$FocusProxy, {
+    displayName: $9208a85b3e79d33f$var$FOCUS_PROXY_NAME
+});
 /* -------------------------------------------------------------------------------------------------
  * Toast
  * -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$TOAST_NAME = 'Toast';
@@ -286,11 +351,11 @@ const $9208a85b3e79d33f$var$ToastImpl = /*#__PURE__*/ $iTyic$react.forwardRef((p
     const [renderLabel, setRenderLabel] = $iTyic$react.useState(false);
     const { onToastAdd: onToastAdd , onToastRemove: onToastRemove  } = context;
     const handleClose = $iTyic$radixuireactusecallbackref.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 = $iTyic$react.useCallback((duration)=>{
@@ -349,7 +414,9 @@ const $9208a85b3e79d33f$var$ToastImpl = /*#__PURE__*/ $iTyic$react.forwardRef((p
         scope: __scopeToast,
         isInteractive: true,
         onClose: handleClose
-    }, /*#__PURE__*/ $iTyic$reactdom.createPortal(/*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactdismissablelayer.Root, {
+    }, /*#__PURE__*/ $iTyic$reactdom.createPortal(/*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$Collection.ItemSlot, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactdismissablelayer.Root, {
         asChild: true,
         onEscapeKeyDown: $iTyic$radixuiprimitive.composeEventHandlers(onEscapeKeyDown, ()=>{
             if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
@@ -450,7 +517,7 @@ const $9208a85b3e79d33f$var$ToastImpl = /*#__PURE__*/ $iTyic$react.forwardRef((p
                 });
             }
         })
-    }), /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactvisuallyhidden.VisuallyHidden, null, renderLabel && context.label), /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactslot.Slottable, null, children))), context.viewport)));
+    }), /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactvisuallyhidden.VisuallyHidden, null, renderLabel && context.label), /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactslot.Slottable, null, children)))), context.viewport)));
 });
 $9208a85b3e79d33f$var$ToastImpl.propTypes = {
     type (props) {
@@ -559,6 +626,39 @@ function $9208a85b3e79d33f$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 $9208a85b3e79d33f$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 $9208a85b3e79d33f$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 $9208a85b3e79d33f$export$2881499e37b75b9a = $9208a85b3e79d33f$export$f5d03d415824e0e;
 const $9208a85b3e79d33f$export$d5c6c08dc2d3ca7 = $9208a85b3e79d33f$export$6192c2425ecfd989;
 const $9208a85b3e79d33f$export$be92b6f5f03c0fe9 = $9208a85b3e79d33f$export$8d8dc7d5f743331b;
@@ -568,7 +668,6 @@ const $9208a85b3e79d33f$export$e19cd5f9376f8cee = $9208a85b3e79d33f$export$3019f
 const $9208a85b3e79d33f$export$f39c2d165cd861fe = $9208a85b3e79d33f$export$811e70f61c205839;
 
 
-$parcel$exportWildcard(module.exports, $9208a85b3e79d33f$exports);
 
 
 //# sourceMappingURL=index.js.map