@tanstack/react-query-devtools 4.0.11-beta.5 → 4.2.3

package/build/cjs/packages/react-query-devtools/src/utils.js

@@ -0,0 +1,113 @@
+/**
+ * react-query-devtools
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var theme = require('./theme.js');
+var useMediaQuery = require('./useMediaQuery.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const isServer = typeof window === 'undefined';
+function getQueryStatusColor({
+  queryState,
+  observerCount,
+  isStale,
+  theme
+}) {
+  return queryState.fetchStatus === 'fetching' ? theme.active : !observerCount ? theme.gray : queryState.fetchStatus === 'paused' ? theme.paused : isStale ? theme.warning : theme.success;
+}
+function getQueryStatusLabel(query) {
+  return query.state.fetchStatus === 'fetching' ? 'fetching' : !query.getObserversCount() ? 'inactive' : query.state.fetchStatus === 'paused' ? 'paused' : query.isStale() ? 'stale' : 'fresh';
+}
+function styled(type, newStyles, queries = {}) {
+  return /*#__PURE__*/React__namespace.forwardRef(({
+    style,
+    ...rest
+  }, ref) => {
+    const theme$1 = theme.useTheme();
+    const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      return useMediaQuery["default"](key) ? { ...current,
+        ...(typeof value === 'function' ? value(rest, theme$1) : value)
+      } : current;
+    }, {});
+    return /*#__PURE__*/React__namespace.createElement(type, { ...rest,
+      style: { ...(typeof newStyles === 'function' ? newStyles(rest, theme$1) : newStyles),
+        ...style,
+        ...mediaStyles
+      },
+      ref
+    });
+  });
+}
+function useIsMounted() {
+  const mountedRef = React__namespace.useRef(false);
+  const isMounted = React__namespace.useCallback(() => mountedRef.current, []);
+  React__namespace[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  return isMounted;
+}
+/**
+ * Displays a string regardless the type of the data
+ * @param {unknown} value Value to be stringified
+ */
+
+const displayValue = value => {
+  const name = Object.getOwnPropertyNames(Object(value));
+  const newValue = typeof value === 'bigint' ? value.toString() + "n" : value;
+  return JSON.stringify(newValue, name);
+};
+
+const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
+
+const sortFns = {
+  'Status > Last Updated': (a, b) => {
+    var _sortFns$LastUpdated;
+
+    return getStatusRank(a) === getStatusRank(b) ? (_sortFns$LastUpdated = sortFns['Last Updated']) == null ? void 0 : _sortFns$LastUpdated.call(sortFns, a, b) : getStatusRank(a) > getStatusRank(b) ? 1 : -1;
+  },
+  'Query Hash': (a, b) => a.queryHash > b.queryHash ? 1 : -1,
+  'Last Updated': (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1
+};
+
+exports.displayValue = displayValue;
+exports.getQueryStatusColor = getQueryStatusColor;
+exports.getQueryStatusLabel = getQueryStatusLabel;
+exports.isServer = isServer;
+exports.sortFns = sortFns;
+exports.styled = styled;
+exports.useIsMounted = useIsMounted;
+//# sourceMappingURL=utils.js.map

package/build/cjs/packages/react-query-devtools/src/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\nimport type { Query } from '@tanstack/react-query'\n\nimport { Theme, useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n  ? React.DetailedHTMLProps<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      HTMLButtonElement\n    >\n  : T extends 'input'\n  ? React.DetailedHTMLProps<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      HTMLInputElement\n    >\n  : T extends 'select'\n  ? React.DetailedHTMLProps<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      HTMLSelectElement\n    >\n  : T extends keyof HTMLElementTagNameMap\n  ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n  : never\n\nexport function getQueryStatusColor({\n  queryState,\n  observerCount,\n  isStale,\n  theme,\n}: {\n  queryState: Query['state']\n  observerCount: number\n  isStale: boolean\n  theme: Theme\n}) {\n  return queryState.fetchStatus === 'fetching'\n    ? theme.active\n    : !observerCount\n    ? theme.gray\n    : queryState.fetchStatus === 'paused'\n    ? theme.paused\n    : isStale\n    ? theme.warning\n    : theme.success\n}\n\nexport function getQueryStatusLabel(query: Query) {\n  return query.state.fetchStatus === 'fetching'\n    ? 'fetching'\n    : !query.getObserversCount()\n    ? 'inactive'\n    : query.state.fetchStatus === 'paused'\n    ? 'paused'\n    : query.isStale()\n    ? 'stale'\n    : 'fresh'\n}\n\ntype Styles =\n  | React.CSSProperties\n  | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n  type: T,\n  newStyles: Styles,\n  queries: Record<string, Styles> = {},\n) {\n  return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n    ({ style, ...rest }, ref) => {\n      const theme = useTheme()\n\n      const mediaStyles = Object.entries(queries).reduce(\n        (current, [key, value]) => {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          return useMediaQuery(key)\n            ? {\n                ...current,\n                ...(typeof value === 'function' ? value(rest, theme) : value),\n              }\n            : current\n        },\n        {},\n      )\n\n      return React.createElement(type, {\n        ...rest,\n        style: {\n          ...(typeof newStyles === 'function'\n            ? newStyles(rest, theme)\n            : newStyles),\n          ...style,\n          ...mediaStyles,\n        },\n        ref,\n      })\n    },\n  )\n}\n\nexport function useIsMounted() {\n  const mountedRef = React.useRef(false)\n  const isMounted = React.useCallback(() => mountedRef.current, [])\n\n  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n    mountedRef.current = true\n    return () => {\n      mountedRef.current = false\n    }\n  }, [])\n\n  return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n */\nexport const displayValue = (value: unknown) => {\n  const name = Object.getOwnPropertyNames(Object(value))\n  const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value\n\n  return JSON.stringify(newValue, name)\n}\n\nconst getStatusRank = (q: Query) =>\n  q.state.fetchStatus !== 'idle'\n    ? 0\n    : !q.getObserversCount()\n    ? 3\n    : q.isStale()\n    ? 2\n    : 1\n\nexport const sortFns: Record<string, (a: Query, b: Query) => number> = {\n  'Status > Last Updated': (a, b) =>\n    getStatusRank(a) === getStatusRank(b)\n      ? (sortFns['Last Updated']?.(a, b) as number)\n      : getStatusRank(a) > getStatusRank(b)\n      ? 1\n      : -1,\n  'Query Hash': (a, b) => (a.queryHash > b.queryHash ? 1 : -1),\n  'Last Updated': (a, b) =>\n    a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1,\n}\n"],"names":["isServer","window","getQueryStatusColor","queryState","observerCount","isStale","theme","fetchStatus","active","gray","paused","warning","success","getQueryStatusLabel","query","state","getObserversCount","styled","type","newStyles","queries","React","forwardRef","style","rest","ref","useTheme","mediaStyles","Object","entries","reduce","current","key","value","useMediaQuery","createElement","useIsMounted","mountedRef","useRef","isMounted","useCallback","displayValue","name","getOwnPropertyNames","newValue","toString","JSON","stringify","getStatusRank","q","sortFns","a","b","queryHash","dataUpdatedAt"],"mappings":"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"}

package/build/{lib/index.mjs → esm/index.js}

@@ -9,7 +9,7 @@
  * @license MIT
  */
 import * as React from 'react';
-import React__default from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useQueryClient, notifyManager, onlineManager } from '@tanstack/react-query';
 
 function _extends() {
@@ -29,285 +29,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var shim = {exports: {}};
-
-var useSyncExternalStoreShim_production_min = {};
-
-/**
- * @license React
- * use-sync-external-store-shim.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredUseSyncExternalStoreShim_production_min;
-
-function requireUseSyncExternalStoreShim_production_min () {
-	if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
-	hasRequiredUseSyncExternalStoreShim_production_min = 1;
-var e=React__default;function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c});},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c});})},[a]);p(d);return d}
-	function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return !k(a,d)}catch(f){return !0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;useSyncExternalStoreShim_production_min.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;
-	return useSyncExternalStoreShim_production_min;
-}
-
-var useSyncExternalStoreShim_development = {};
-
-/**
- * @license React
- * use-sync-external-store-shim.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredUseSyncExternalStoreShim_development;
-
-function requireUseSyncExternalStoreShim_development () {
-	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
-	hasRequiredUseSyncExternalStoreShim_development = 1;
-
-	if (process.env.NODE_ENV !== "production") {
-	  (function() {
-
-	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-	if (
-	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
-	    'function'
-	) {
-	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-	}
-	          var React = React__default;
-
-	var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-	function error(format) {
-	  {
-	    {
-	      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-	        args[_key2 - 1] = arguments[_key2];
-	      }
-
-	      printWarning('error', format, args);
-	    }
-	  }
-	}
-
-	function printWarning(level, format, args) {
-	  // When changing this logic, you might want to also
-	  // update consoleWithStackDev.www.js as well.
-	  {
-	    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-	    var stack = ReactDebugCurrentFrame.getStackAddendum();
-
-	    if (stack !== '') {
-	      format += '%s';
-	      args = args.concat([stack]);
-	    } // eslint-disable-next-line react-internal/safe-string-coercion
-
-
-	    var argsWithFormat = args.map(function (item) {
-	      return String(item);
-	    }); // Careful: RN currently depends on this prefix
-
-	    argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
-	    // breaks IE9: https://github.com/facebook/react/issues/13610
-	    // eslint-disable-next-line react-internal/no-production-logging
-
-	    Function.prototype.apply.call(console[level], console, argsWithFormat);
-	  }
-	}
-
-	/**
-	 * inlined Object.is polyfill to avoid requiring consumers ship their own
-	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-	 */
-	function is(x, y) {
-	  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-	  ;
-	}
-
-	var objectIs = typeof Object.is === 'function' ? Object.is : is;
-
-	// dispatch for CommonJS interop named imports.
-
-	var useState = React.useState,
-	    useEffect = React.useEffect,
-	    useLayoutEffect = React.useLayoutEffect,
-	    useDebugValue = React.useDebugValue;
-	var didWarnOld18Alpha = false;
-	var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
-	// because of a very particular set of implementation details and assumptions
-	// -- change any one of them and it will break. The most important assumption
-	// is that updates are always synchronous, because concurrent rendering is
-	// only available in versions of React that also have a built-in
-	// useSyncExternalStore API. And we only use this shim when the built-in API
-	// does not exist.
-	//
-	// Do not assume that the clever hacks used by this hook also work in general.
-	// The point of this shim is to replace the need for hacks by other libraries.
-
-	function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
-	// React do not expose a way to check if we're hydrating. So users of the shim
-	// will need to track that themselves and return the correct value
-	// from `getSnapshot`.
-	getServerSnapshot) {
-	  {
-	    if (!didWarnOld18Alpha) {
-	      if (React.startTransition !== undefined) {
-	        didWarnOld18Alpha = true;
-
-	        error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.');
-	      }
-	    }
-	  } // Read the current snapshot from the store on every render. Again, this
-	  // breaks the rules of React, and only works here because of specific
-	  // implementation details, most importantly that updates are
-	  // always synchronous.
-
-
-	  var value = getSnapshot();
-
-	  {
-	    if (!didWarnUncachedGetSnapshot) {
-	      var cachedValue = getSnapshot();
-
-	      if (!objectIs(value, cachedValue)) {
-	        error('The result of getSnapshot should be cached to avoid an infinite loop');
-
-	        didWarnUncachedGetSnapshot = true;
-	      }
-	    }
-	  } // Because updates are synchronous, we don't queue them. Instead we force a
-	  // re-render whenever the subscribed state changes by updating an some
-	  // arbitrary useState hook. Then, during render, we call getSnapshot to read
-	  // the current value.
-	  //
-	  // Because we don't actually use the state returned by the useState hook, we
-	  // can save a bit of memory by storing other stuff in that slot.
-	  //
-	  // To implement the early bailout, we need to track some things on a mutable
-	  // object. Usually, we would put that in a useRef hook, but we can stash it in
-	  // our useState hook instead.
-	  //
-	  // To force a re-render, we call forceUpdate({inst}). That works because the
-	  // new object always fails an equality check.
-
-
-	  var _useState = useState({
-	    inst: {
-	      value: value,
-	      getSnapshot: getSnapshot
-	    }
-	  }),
-	      inst = _useState[0].inst,
-	      forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
-	  // in the layout phase so we can access it during the tearing check that
-	  // happens on subscribe.
-
-
-	  useLayoutEffect(function () {
-	    inst.value = value;
-	    inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
-	    // commit phase if there was an interleaved mutation. In concurrent mode
-	    // this can happen all the time, but even in synchronous mode, an earlier
-	    // effect may have mutated the store.
-
-	    if (checkIfSnapshotChanged(inst)) {
-	      // Force a re-render.
-	      forceUpdate({
-	        inst: inst
-	      });
-	    }
-	  }, [subscribe, value, getSnapshot]);
-	  useEffect(function () {
-	    // Check for changes right before subscribing. Subsequent changes will be
-	    // detected in the subscription handler.
-	    if (checkIfSnapshotChanged(inst)) {
-	      // Force a re-render.
-	      forceUpdate({
-	        inst: inst
-	      });
-	    }
-
-	    var handleStoreChange = function () {
-	      // TODO: Because there is no cross-renderer API for batching updates, it's
-	      // up to the consumer of this library to wrap their subscription event
-	      // with unstable_batchedUpdates. Should we try to detect when this isn't
-	      // the case and print a warning in development?
-	      // The store changed. Check if the snapshot changed since the last time we
-	      // read from the store.
-	      if (checkIfSnapshotChanged(inst)) {
-	        // Force a re-render.
-	        forceUpdate({
-	          inst: inst
-	        });
-	      }
-	    }; // Subscribe to the store and return a clean-up function.
-
-
-	    return subscribe(handleStoreChange);
-	  }, [subscribe]);
-	  useDebugValue(value);
-	  return value;
-	}
-
-	function checkIfSnapshotChanged(inst) {
-	  var latestGetSnapshot = inst.getSnapshot;
-	  var prevValue = inst.value;
-
-	  try {
-	    var nextValue = latestGetSnapshot();
-	    return !objectIs(prevValue, nextValue);
-	  } catch (error) {
-	    return true;
-	  }
-	}
-
-	function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
-	  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
-	  // React do not expose a way to check if we're hydrating. So users of the shim
-	  // will need to track that themselves and return the correct value
-	  // from `getSnapshot`.
-	  return getSnapshot();
-	}
-
-	var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
-
-	var isServerEnvironment = !canUseDOM;
-
-	var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
-	var useSyncExternalStore$2 = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim;
-
-	useSyncExternalStoreShim_development.useSyncExternalStore = useSyncExternalStore$2;
-	          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-	if (
-	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
-	    'function'
-	) {
-	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-	}
-	        
-	  })();
-	}
-	return useSyncExternalStoreShim_development;
-}
-
-(function (module) {
-
-	if (process.env.NODE_ENV === 'production') {
-	  module.exports = requireUseSyncExternalStoreShim_production_min();
-	} else {
-	  module.exports = requireUseSyncExternalStoreShim_development();
-	}
-} (shim));
-
 /**
  * match-sorter-utils
  *
@@ -1212,6 +933,19 @@ const sortFns = {
   'Last Updated': (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1
 };
 
+function ScreenReader({
+  text
+}) {
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: 'absolute',
+      width: '0.1px',
+      height: '0.1px',
+      overflow: 'hidden'
+    }
+  }, text);
+}
+
 const Panel = styled('div', (_props, theme) => ({
   fontSize: 'clamp(12px, 1.5vw, 14px)',
   fontFamily: "sans-serif",
@@ -1729,11 +1463,13 @@ function ReactQueryDevtools$1({
     }
   }), /*#__PURE__*/React.createElement(Logo, {
     "aria-hidden": true
+  }), /*#__PURE__*/React.createElement(ScreenReader, {
+    text: "Open React Query Devtools"
   })) : null);
 }
 
 const useSubscribeToQueryCache = (queryCache, getSnapshot) => {
-  return shim.exports.useSyncExternalStore(React.useCallback(onStoreChange => queryCache.subscribe(notifyManager.batchCalls(onStoreChange)), [queryCache]), getSnapshot, getSnapshot);
+  return useSyncExternalStore(React.useCallback(onStoreChange => queryCache.subscribe(notifyManager.batchCalls(onStoreChange)), [queryCache]), getSnapshot, getSnapshot);
 };
 
 const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQueryDevtoolsPanel(props, ref) {
@@ -1832,6 +1568,8 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
     }
   }, /*#__PURE__*/React.createElement(Logo, {
     "aria-hidden": true
+  }), /*#__PURE__*/React.createElement(ScreenReader, {
+    text: "Close React Query Devtools"
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -1936,7 +1674,9 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
     d: "M6.343 12.343a8 8 0 0 1 11.314 0"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0"
-  }))))) : null))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement(ScreenReader, {
+    text: isMockOffline ? 'Restore offline mock' : 'Mock offline behavior'
+  }))) : null))), /*#__PURE__*/React.createElement("div", {
     style: {
       overflowY: 'auto',
       flex: '1'
@@ -2256,4 +1996,4 @@ const ReactQueryDevtoolsPanel = process.env.NODE_ENV !== 'development' ? functio
 } : ReactQueryDevtoolsPanel$1;
 
 export { ReactQueryDevtools, ReactQueryDevtoolsPanel };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map