@tanstack/react-query-devtools 5.0.0-alpha.2 → 5.0.0-alpha.23

package/build/lib/styledComponents.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ActiveQueryPanel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Button: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>;

package/build/lib/styledComponents.esm.js

@@ -16,6 +16,7 @@ const Panel = styled('div', (_props, theme) => ({
   }
 });
 
+Panel.displayName = 'Panel';
 const ActiveQueryPanel = styled('div', () => ({
   flex: '1 1 500px',
   display: 'flex',
@@ -27,6 +28,7 @@ const ActiveQueryPanel = styled('div', () => ({
     borderTop: `2px solid ${theme.gray}`
   })
 });
+ActiveQueryPanel.displayName = 'ActiveQueryPanel';
 const Button = styled('button', (props, theme) => ({
   appearance: 'none',
   fontSize: '.9em',
@@ -39,10 +41,14 @@ const Button = styled('button', (props, theme) => ({
   opacity: props.disabled ? '.5' : undefined,
   cursor: 'pointer'
 }));
+Button.displayName = 'Button';
 const QueryKeys = styled('span', {
-  display: 'inline-block',
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '0.5em',
   fontSize: '0.9em'
 });
+QueryKeys.displayName = 'QueryKeys';
 const QueryKey = styled('span', {
   display: 'inline-flex',
   alignItems: 'center',
@@ -51,11 +57,13 @@ const QueryKey = styled('span', {
   textShadow: '0 0 10px black',
   borderRadius: '.2em'
 });
+QueryKey.displayName = 'QueryKey';
 const Code = styled('code', {
   fontSize: '.9em',
   color: 'inherit',
   background: 'inherit'
 });
+Code.displayName = 'Code';
 const Input = styled('input', (_props, theme) => ({
   backgroundColor: theme.inputBackgroundColor,
   border: 0,
@@ -65,6 +73,7 @@ const Input = styled('input', (_props, theme) => ({
   lineHeight: `1.3`,
   padding: '.3em .4em'
 }));
+Input.displayName = 'Input';
 const Select = styled('select', (_props, theme) => ({
   display: `inline-block`,
   fontSize: `.9em`,
@@ -88,6 +97,7 @@ const Select = styled('select', (_props, theme) => ({
     display: 'none'
   }
 });
+Select.displayName = 'Select';
 
 export { ActiveQueryPanel, Button, Code, Input, Panel, QueryKey, QueryKeys, Select };
 //# sourceMappingURL=styledComponents.esm.js.map

package/build/lib/styledComponents.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styledComponents.esm.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n  'div',\n  (_props, theme) => ({\n    fontSize: 'clamp(12px, 1.5vw, 14px)',\n    fontFamily: `sans-serif`,\n    display: 'flex',\n    backgroundColor: theme.background,\n    color: theme.foreground,\n  }),\n  {\n    '(max-width: 700px)': {\n      flexDirection: 'column',\n    },\n    '(max-width: 600px)': {\n      fontSize: '.9em',\n      // flexDirection: 'column',\n    },\n  },\n)\n\nexport const ActiveQueryPanel = styled(\n  'div',\n  () => ({\n    flex: '1 1 500px',\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'auto',\n    height: '100%',\n  }),\n  {\n    '(max-width: 700px)': (_props, theme) => ({\n      borderTop: `2px solid ${theme.gray}`,\n    }),\n  },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n  appearance: 'none',\n  fontSize: '.9em',\n  fontWeight: 'bold',\n  background: theme.gray,\n  border: '0',\n  borderRadius: '.3em',\n  color: 'white',\n  padding: '.5em',\n  opacity: props.disabled ? '.5' : undefined,\n  cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n  display: 'inline-block',\n  fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  padding: '.2em .4em',\n  fontWeight: 'bold',\n  textShadow: '0 0 10px black',\n  borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n  fontSize: '.9em',\n  color: 'inherit',\n  background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n  backgroundColor: theme.inputBackgroundColor,\n  border: 0,\n  borderRadius: '.2em',\n  color: theme.inputTextColor,\n  fontSize: '.9em',\n  lineHeight: `1.3`,\n  padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n  'select',\n  (_props, theme) => ({\n    display: `inline-block`,\n    fontSize: `.9em`,\n    fontFamily: `sans-serif`,\n    fontWeight: 'normal',\n    lineHeight: `1.3`,\n    padding: `.3em 1.5em .3em .5em`,\n    height: 'auto',\n    border: 0,\n    borderRadius: `.2em`,\n    appearance: `none`,\n    WebkitAppearance: 'none',\n    backgroundColor: theme.inputBackgroundColor,\n    backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n    backgroundRepeat: `no-repeat`,\n    backgroundPosition: `right .55em center`,\n    backgroundSize: `.65em auto, 100%`,\n    color: theme.inputTextColor,\n  }),\n  {\n    '(max-width: 500px)': {\n      display: 'none',\n    },\n  },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}
+{"version":3,"file":"styledComponents.esm.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n  'div',\n  (_props, theme) => ({\n    fontSize: 'clamp(12px, 1.5vw, 14px)',\n    fontFamily: `sans-serif`,\n    display: 'flex',\n    backgroundColor: theme.background,\n    color: theme.foreground,\n  }),\n  {\n    '(max-width: 700px)': {\n      flexDirection: 'column',\n    },\n    '(max-width: 600px)': {\n      fontSize: '.9em',\n      // flexDirection: 'column',\n    },\n  },\n)\n\nPanel.displayName = 'Panel'\n\nexport const ActiveQueryPanel = styled(\n  'div',\n  () => ({\n    flex: '1 1 500px',\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'auto',\n    height: '100%',\n  }),\n  {\n    '(max-width: 700px)': (_props, theme) => ({\n      borderTop: `2px solid ${theme.gray}`,\n    }),\n  },\n)\n\nActiveQueryPanel.displayName = 'ActiveQueryPanel'\n\nexport const Button = styled('button', (props, theme) => ({\n  appearance: 'none',\n  fontSize: '.9em',\n  fontWeight: 'bold',\n  background: theme.gray,\n  border: '0',\n  borderRadius: '.3em',\n  color: 'white',\n  padding: '.5em',\n  opacity: props.disabled ? '.5' : undefined,\n  cursor: 'pointer',\n}))\n\nButton.displayName = 'Button'\n\nexport const QueryKeys = styled('span', {\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '0.5em',\n  fontSize: '0.9em',\n})\n\nQueryKeys.displayName = 'QueryKeys'\n\nexport const QueryKey = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  padding: '.2em .4em',\n  fontWeight: 'bold',\n  textShadow: '0 0 10px black',\n  borderRadius: '.2em',\n})\n\nQueryKey.displayName = 'QueryKey'\n\nexport const Code = styled('code', {\n  fontSize: '.9em',\n  color: 'inherit',\n  background: 'inherit',\n})\n\nCode.displayName = 'Code'\n\nexport const Input = styled('input', (_props, theme) => ({\n  backgroundColor: theme.inputBackgroundColor,\n  border: 0,\n  borderRadius: '.2em',\n  color: theme.inputTextColor,\n  fontSize: '.9em',\n  lineHeight: `1.3`,\n  padding: '.3em .4em',\n}))\n\nInput.displayName = 'Input'\n\nexport const Select = styled(\n  'select',\n  (_props, theme) => ({\n    display: `inline-block`,\n    fontSize: `.9em`,\n    fontFamily: `sans-serif`,\n    fontWeight: 'normal',\n    lineHeight: `1.3`,\n    padding: `.3em 1.5em .3em .5em`,\n    height: 'auto',\n    border: 0,\n    borderRadius: `.2em`,\n    appearance: `none`,\n    WebkitAppearance: 'none',\n    backgroundColor: theme.inputBackgroundColor,\n    backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n    backgroundRepeat: `no-repeat`,\n    backgroundPosition: `right .55em center`,\n    backgroundSize: `.65em auto, 100%`,\n    color: theme.inputTextColor,\n  }),\n  {\n    '(max-width: 500px)': {\n      display: 'none',\n    },\n  },\n)\n\nSelect.displayName = 'Select'\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","displayName","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","flexWrap","gap","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}

package/build/lib/styledComponents.js

@@ -18,6 +18,7 @@ const Panel = utils.styled('div', (_props, theme) => ({
   }
 });
 
+Panel.displayName = 'Panel';
 const ActiveQueryPanel = utils.styled('div', () => ({
   flex: '1 1 500px',
   display: 'flex',
@@ -29,6 +30,7 @@ const ActiveQueryPanel = utils.styled('div', () => ({
     borderTop: `2px solid ${theme.gray}`
   })
 });
+ActiveQueryPanel.displayName = 'ActiveQueryPanel';
 const Button = utils.styled('button', (props, theme) => ({
   appearance: 'none',
   fontSize: '.9em',
@@ -41,10 +43,14 @@ const Button = utils.styled('button', (props, theme) => ({
   opacity: props.disabled ? '.5' : undefined,
   cursor: 'pointer'
 }));
+Button.displayName = 'Button';
 const QueryKeys = utils.styled('span', {
-  display: 'inline-block',
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '0.5em',
   fontSize: '0.9em'
 });
+QueryKeys.displayName = 'QueryKeys';
 const QueryKey = utils.styled('span', {
   display: 'inline-flex',
   alignItems: 'center',
@@ -53,11 +59,13 @@ const QueryKey = utils.styled('span', {
   textShadow: '0 0 10px black',
   borderRadius: '.2em'
 });
+QueryKey.displayName = 'QueryKey';
 const Code = utils.styled('code', {
   fontSize: '.9em',
   color: 'inherit',
   background: 'inherit'
 });
+Code.displayName = 'Code';
 const Input = utils.styled('input', (_props, theme) => ({
   backgroundColor: theme.inputBackgroundColor,
   border: 0,
@@ -67,6 +75,7 @@ const Input = utils.styled('input', (_props, theme) => ({
   lineHeight: `1.3`,
   padding: '.3em .4em'
 }));
+Input.displayName = 'Input';
 const Select = utils.styled('select', (_props, theme) => ({
   display: `inline-block`,
   fontSize: `.9em`,
@@ -90,6 +99,7 @@ const Select = utils.styled('select', (_props, theme) => ({
     display: 'none'
   }
 });
+Select.displayName = 'Select';
 
 exports.ActiveQueryPanel = ActiveQueryPanel;
 exports.Button = Button;

package/build/lib/styledComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"styledComponents.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n  'div',\n  (_props, theme) => ({\n    fontSize: 'clamp(12px, 1.5vw, 14px)',\n    fontFamily: `sans-serif`,\n    display: 'flex',\n    backgroundColor: theme.background,\n    color: theme.foreground,\n  }),\n  {\n    '(max-width: 700px)': {\n      flexDirection: 'column',\n    },\n    '(max-width: 600px)': {\n      fontSize: '.9em',\n      // flexDirection: 'column',\n    },\n  },\n)\n\nexport const ActiveQueryPanel = styled(\n  'div',\n  () => ({\n    flex: '1 1 500px',\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'auto',\n    height: '100%',\n  }),\n  {\n    '(max-width: 700px)': (_props, theme) => ({\n      borderTop: `2px solid ${theme.gray}`,\n    }),\n  },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n  appearance: 'none',\n  fontSize: '.9em',\n  fontWeight: 'bold',\n  background: theme.gray,\n  border: '0',\n  borderRadius: '.3em',\n  color: 'white',\n  padding: '.5em',\n  opacity: props.disabled ? '.5' : undefined,\n  cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n  display: 'inline-block',\n  fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  padding: '.2em .4em',\n  fontWeight: 'bold',\n  textShadow: '0 0 10px black',\n  borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n  fontSize: '.9em',\n  color: 'inherit',\n  background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n  backgroundColor: theme.inputBackgroundColor,\n  border: 0,\n  borderRadius: '.2em',\n  color: theme.inputTextColor,\n  fontSize: '.9em',\n  lineHeight: `1.3`,\n  padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n  'select',\n  (_props, theme) => ({\n    display: `inline-block`,\n    fontSize: `.9em`,\n    fontFamily: `sans-serif`,\n    fontWeight: 'normal',\n    lineHeight: `1.3`,\n    padding: `.3em 1.5em .3em .5em`,\n    height: 'auto',\n    border: 0,\n    borderRadius: `.2em`,\n    appearance: `none`,\n    WebkitAppearance: 'none',\n    backgroundColor: theme.inputBackgroundColor,\n    backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n    backgroundRepeat: `no-repeat`,\n    backgroundPosition: `right .55em center`,\n    backgroundSize: `.65em auto, 100%`,\n    color: theme.inputTextColor,\n  }),\n  {\n    '(max-width: 500px)': {\n      display: 'none',\n    },\n  },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}
+{"version":3,"file":"styledComponents.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n  'div',\n  (_props, theme) => ({\n    fontSize: 'clamp(12px, 1.5vw, 14px)',\n    fontFamily: `sans-serif`,\n    display: 'flex',\n    backgroundColor: theme.background,\n    color: theme.foreground,\n  }),\n  {\n    '(max-width: 700px)': {\n      flexDirection: 'column',\n    },\n    '(max-width: 600px)': {\n      fontSize: '.9em',\n      // flexDirection: 'column',\n    },\n  },\n)\n\nPanel.displayName = 'Panel'\n\nexport const ActiveQueryPanel = styled(\n  'div',\n  () => ({\n    flex: '1 1 500px',\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'auto',\n    height: '100%',\n  }),\n  {\n    '(max-width: 700px)': (_props, theme) => ({\n      borderTop: `2px solid ${theme.gray}`,\n    }),\n  },\n)\n\nActiveQueryPanel.displayName = 'ActiveQueryPanel'\n\nexport const Button = styled('button', (props, theme) => ({\n  appearance: 'none',\n  fontSize: '.9em',\n  fontWeight: 'bold',\n  background: theme.gray,\n  border: '0',\n  borderRadius: '.3em',\n  color: 'white',\n  padding: '.5em',\n  opacity: props.disabled ? '.5' : undefined,\n  cursor: 'pointer',\n}))\n\nButton.displayName = 'Button'\n\nexport const QueryKeys = styled('span', {\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '0.5em',\n  fontSize: '0.9em',\n})\n\nQueryKeys.displayName = 'QueryKeys'\n\nexport const QueryKey = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  padding: '.2em .4em',\n  fontWeight: 'bold',\n  textShadow: '0 0 10px black',\n  borderRadius: '.2em',\n})\n\nQueryKey.displayName = 'QueryKey'\n\nexport const Code = styled('code', {\n  fontSize: '.9em',\n  color: 'inherit',\n  background: 'inherit',\n})\n\nCode.displayName = 'Code'\n\nexport const Input = styled('input', (_props, theme) => ({\n  backgroundColor: theme.inputBackgroundColor,\n  border: 0,\n  borderRadius: '.2em',\n  color: theme.inputTextColor,\n  fontSize: '.9em',\n  lineHeight: `1.3`,\n  padding: '.3em .4em',\n}))\n\nInput.displayName = 'Input'\n\nexport const Select = styled(\n  'select',\n  (_props, theme) => ({\n    display: `inline-block`,\n    fontSize: `.9em`,\n    fontFamily: `sans-serif`,\n    fontWeight: 'normal',\n    lineHeight: `1.3`,\n    padding: `.3em 1.5em .3em .5em`,\n    height: 'auto',\n    border: 0,\n    borderRadius: `.2em`,\n    appearance: `none`,\n    WebkitAppearance: 'none',\n    backgroundColor: theme.inputBackgroundColor,\n    backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n    backgroundRepeat: `no-repeat`,\n    backgroundPosition: `right .55em center`,\n    backgroundSize: `.65em auto, 100%`,\n    color: theme.inputTextColor,\n  }),\n  {\n    '(max-width: 500px)': {\n      display: 'none',\n    },\n  },\n)\n\nSelect.displayName = 'Select'\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","displayName","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","flexWrap","gap","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}

package/build/lib/styledComponents.mjs

@@ -16,6 +16,7 @@ const Panel = styled('div', (_props, theme) => ({
   }
 });
 
+Panel.displayName = 'Panel';
 const ActiveQueryPanel = styled('div', () => ({
   flex: '1 1 500px',
   display: 'flex',
@@ -27,6 +28,7 @@ const ActiveQueryPanel = styled('div', () => ({
     borderTop: `2px solid ${theme.gray}`
   })
 });
+ActiveQueryPanel.displayName = 'ActiveQueryPanel';
 const Button = styled('button', (props, theme) => ({
   appearance: 'none',
   fontSize: '.9em',
@@ -39,10 +41,14 @@ const Button = styled('button', (props, theme) => ({
   opacity: props.disabled ? '.5' : undefined,
   cursor: 'pointer'
 }));
+Button.displayName = 'Button';
 const QueryKeys = styled('span', {
-  display: 'inline-block',
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '0.5em',
   fontSize: '0.9em'
 });
+QueryKeys.displayName = 'QueryKeys';
 const QueryKey = styled('span', {
   display: 'inline-flex',
   alignItems: 'center',
@@ -51,11 +57,13 @@ const QueryKey = styled('span', {
   textShadow: '0 0 10px black',
   borderRadius: '.2em'
 });
+QueryKey.displayName = 'QueryKey';
 const Code = styled('code', {
   fontSize: '.9em',
   color: 'inherit',
   background: 'inherit'
 });
+Code.displayName = 'Code';
 const Input = styled('input', (_props, theme) => ({
   backgroundColor: theme.inputBackgroundColor,
   border: 0,
@@ -65,6 +73,7 @@ const Input = styled('input', (_props, theme) => ({
   lineHeight: `1.3`,
   padding: '.3em .4em'
 }));
+Input.displayName = 'Input';
 const Select = styled('select', (_props, theme) => ({
   display: `inline-block`,
   fontSize: `.9em`,
@@ -88,6 +97,7 @@ const Select = styled('select', (_props, theme) => ({
     display: 'none'
   }
 });
+Select.displayName = 'Select';
 
 export { ActiveQueryPanel, Button, Code, Input, Panel, QueryKey, QueryKeys, Select };
 //# sourceMappingURL=styledComponents.mjs.map

package/build/lib/styledComponents.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styledComponents.mjs","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n  'div',\n  (_props, theme) => ({\n    fontSize: 'clamp(12px, 1.5vw, 14px)',\n    fontFamily: `sans-serif`,\n    display: 'flex',\n    backgroundColor: theme.background,\n    color: theme.foreground,\n  }),\n  {\n    '(max-width: 700px)': {\n      flexDirection: 'column',\n    },\n    '(max-width: 600px)': {\n      fontSize: '.9em',\n      // flexDirection: 'column',\n    },\n  },\n)\n\nexport const ActiveQueryPanel = styled(\n  'div',\n  () => ({\n    flex: '1 1 500px',\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'auto',\n    height: '100%',\n  }),\n  {\n    '(max-width: 700px)': (_props, theme) => ({\n      borderTop: `2px solid ${theme.gray}`,\n    }),\n  },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n  appearance: 'none',\n  fontSize: '.9em',\n  fontWeight: 'bold',\n  background: theme.gray,\n  border: '0',\n  borderRadius: '.3em',\n  color: 'white',\n  padding: '.5em',\n  opacity: props.disabled ? '.5' : undefined,\n  cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n  display: 'inline-block',\n  fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  padding: '.2em .4em',\n  fontWeight: 'bold',\n  textShadow: '0 0 10px black',\n  borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n  fontSize: '.9em',\n  color: 'inherit',\n  background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n  backgroundColor: theme.inputBackgroundColor,\n  border: 0,\n  borderRadius: '.2em',\n  color: theme.inputTextColor,\n  fontSize: '.9em',\n  lineHeight: `1.3`,\n  padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n  'select',\n  (_props, theme) => ({\n    display: `inline-block`,\n    fontSize: `.9em`,\n    fontFamily: `sans-serif`,\n    fontWeight: 'normal',\n    lineHeight: `1.3`,\n    padding: `.3em 1.5em .3em .5em`,\n    height: 'auto',\n    border: 0,\n    borderRadius: `.2em`,\n    appearance: `none`,\n    WebkitAppearance: 'none',\n    backgroundColor: theme.inputBackgroundColor,\n    backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n    backgroundRepeat: `no-repeat`,\n    backgroundPosition: `right .55em center`,\n    backgroundSize: `.65em auto, 100%`,\n    color: theme.inputTextColor,\n  }),\n  {\n    '(max-width: 500px)': {\n      display: 'none',\n    },\n  },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}
+{"version":3,"file":"styledComponents.mjs","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n  'div',\n  (_props, theme) => ({\n    fontSize: 'clamp(12px, 1.5vw, 14px)',\n    fontFamily: `sans-serif`,\n    display: 'flex',\n    backgroundColor: theme.background,\n    color: theme.foreground,\n  }),\n  {\n    '(max-width: 700px)': {\n      flexDirection: 'column',\n    },\n    '(max-width: 600px)': {\n      fontSize: '.9em',\n      // flexDirection: 'column',\n    },\n  },\n)\n\nPanel.displayName = 'Panel'\n\nexport const ActiveQueryPanel = styled(\n  'div',\n  () => ({\n    flex: '1 1 500px',\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'auto',\n    height: '100%',\n  }),\n  {\n    '(max-width: 700px)': (_props, theme) => ({\n      borderTop: `2px solid ${theme.gray}`,\n    }),\n  },\n)\n\nActiveQueryPanel.displayName = 'ActiveQueryPanel'\n\nexport const Button = styled('button', (props, theme) => ({\n  appearance: 'none',\n  fontSize: '.9em',\n  fontWeight: 'bold',\n  background: theme.gray,\n  border: '0',\n  borderRadius: '.3em',\n  color: 'white',\n  padding: '.5em',\n  opacity: props.disabled ? '.5' : undefined,\n  cursor: 'pointer',\n}))\n\nButton.displayName = 'Button'\n\nexport const QueryKeys = styled('span', {\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '0.5em',\n  fontSize: '0.9em',\n})\n\nQueryKeys.displayName = 'QueryKeys'\n\nexport const QueryKey = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  padding: '.2em .4em',\n  fontWeight: 'bold',\n  textShadow: '0 0 10px black',\n  borderRadius: '.2em',\n})\n\nQueryKey.displayName = 'QueryKey'\n\nexport const Code = styled('code', {\n  fontSize: '.9em',\n  color: 'inherit',\n  background: 'inherit',\n})\n\nCode.displayName = 'Code'\n\nexport const Input = styled('input', (_props, theme) => ({\n  backgroundColor: theme.inputBackgroundColor,\n  border: 0,\n  borderRadius: '.2em',\n  color: theme.inputTextColor,\n  fontSize: '.9em',\n  lineHeight: `1.3`,\n  padding: '.3em .4em',\n}))\n\nInput.displayName = 'Input'\n\nexport const Select = styled(\n  'select',\n  (_props, theme) => ({\n    display: `inline-block`,\n    fontSize: `.9em`,\n    fontFamily: `sans-serif`,\n    fontWeight: 'normal',\n    lineHeight: `1.3`,\n    padding: `.3em 1.5em .3em .5em`,\n    height: 'auto',\n    border: 0,\n    borderRadius: `.2em`,\n    appearance: `none`,\n    WebkitAppearance: 'none',\n    backgroundColor: theme.inputBackgroundColor,\n    backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n    backgroundRepeat: `no-repeat`,\n    backgroundPosition: `right .55em center`,\n    backgroundSize: `.65em auto, 100%`,\n    color: theme.inputTextColor,\n  }),\n  {\n    '(max-width: 500px)': {\n      display: 'none',\n    },\n  },\n)\n\nSelect.displayName = 'Select'\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","displayName","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","flexWrap","gap","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}

package/build/lib/theme.esm.js

@@ -1,3 +1,4 @@
+'use client';
 import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.esm.js';
 import * as React from 'react';
 

package/build/lib/theme.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.esm.js","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n  background: '#0b1521',\n  backgroundAlt: '#132337',\n  foreground: 'white',\n  gray: '#3f4e60',\n  grayAlt: '#222e3e',\n  inputBackgroundColor: '#fff',\n  inputTextColor: '#000',\n  success: '#00ab52',\n  danger: '#ff0085',\n  active: '#006bff',\n  paused: '#8c49eb',\n  warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n  theme: Theme\n  children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n  return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n  return React.useContext(ThemeContext)\n}\n"],"names":["defaultTheme","background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning","ThemeContext","React","createContext","ThemeProvider","theme","rest","useTheme","useContext"],"mappings":";;;AAGO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,SAAS;AACrBC,EAAAA,aAAa,EAAE,SAAS;AACxBC,EAAAA,UAAU,EAAE,OAAO;AACnBC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,oBAAoB,EAAE,MAAM;AAC5BC,EAAAA,cAAc,EAAE,MAAM;AACtBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAQV,MAAMC,YAAY,gBAAGC,KAAK,CAACC,aAAa,CAACf,YAAY,CAAC,CAAA;AAE/C,SAASgB,aAAa,CAAC;EAAEC,KAAK;EAAE,GAAGC,IAAAA;AAAoB,CAAC,EAAE;EAC/D,oBAAO,KAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,QAAA,CAAA;AAAC,IAAA,KAAK,EAAED,KAAAA;AAAM,GAAA,EAAKC,IAAI,CAAI,CAAA,CAAA;AAC1D,CAAA;AAEO,SAASC,QAAQ,GAAG;AACzB,EAAA,OAAOL,KAAK,CAACM,UAAU,CAACP,YAAY,CAAC,CAAA;AACvC;;;;"}
+{"version":3,"file":"theme.esm.js","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n  background: '#0b1521',\n  backgroundAlt: '#132337',\n  foreground: 'white',\n  gray: '#3f4e60',\n  grayAlt: '#222e3e',\n  inputBackgroundColor: '#fff',\n  inputTextColor: '#000',\n  success: '#00ab52',\n  danger: '#ff0085',\n  active: '#006bff',\n  paused: '#8c49eb',\n  warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n  theme: Theme\n  children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n  return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n  return React.useContext(ThemeContext)\n}\n"],"names":["background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning"],"mappings":";;;;AAGO;AACLA;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACF;AAQA;AAEO;;;AAAuD;;AAC9B;AAAa;AAC7C;AAEO;AACL;AACF;;"}

package/build/lib/theme.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');

package/build/lib/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n  background: '#0b1521',\n  backgroundAlt: '#132337',\n  foreground: 'white',\n  gray: '#3f4e60',\n  grayAlt: '#222e3e',\n  inputBackgroundColor: '#fff',\n  inputTextColor: '#000',\n  success: '#00ab52',\n  danger: '#ff0085',\n  active: '#006bff',\n  paused: '#8c49eb',\n  warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n  theme: Theme\n  children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n  return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n  return React.useContext(ThemeContext)\n}\n"],"names":["defaultTheme","background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning","ThemeContext","React","createContext","ThemeProvider","theme","rest","_extends","useTheme","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,SAAS;AACrBC,EAAAA,aAAa,EAAE,SAAS;AACxBC,EAAAA,UAAU,EAAE,OAAO;AACnBC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,oBAAoB,EAAE,MAAM;AAC5BC,EAAAA,cAAc,EAAE,MAAM;AACtBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAQV,MAAMC,YAAY,gBAAGC,gBAAK,CAACC,aAAa,CAACf,YAAY,CAAC,CAAA;AAE/C,SAASgB,aAAa,CAAC;EAAEC,KAAK;EAAE,GAAGC,IAAAA;AAAoB,CAAC,EAAE;EAC/D,oBAAOJ,gBAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAAK,iCAAA,CAAA;AAAC,IAAA,KAAK,EAAEF,KAAAA;AAAM,GAAA,EAAKC,IAAI,CAAI,CAAA,CAAA;AAC1D,CAAA;AAEO,SAASE,QAAQ,GAAG;AACzB,EAAA,OAAON,gBAAK,CAACO,UAAU,CAACR,YAAY,CAAC,CAAA;AACvC;;;;;;"}
+{"version":3,"file":"theme.js","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n  background: '#0b1521',\n  backgroundAlt: '#132337',\n  foreground: 'white',\n  gray: '#3f4e60',\n  grayAlt: '#222e3e',\n  inputBackgroundColor: '#fff',\n  inputTextColor: '#000',\n  success: '#00ab52',\n  danger: '#ff0085',\n  active: '#006bff',\n  paused: '#8c49eb',\n  warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n  theme: Theme\n  children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n  return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n  return React.useContext(ThemeContext)\n}\n"],"names":["background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAGO;AACLA;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACF;AAQA;AAEO;;;AAAuD;;AAC9B;AAAa;AAC7C;AAEO;AACL;AACF;;;;"}

package/build/lib/theme.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.mjs';
 import * as React from 'react';
 

package/build/lib/theme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme.mjs","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n  background: '#0b1521',\n  backgroundAlt: '#132337',\n  foreground: 'white',\n  gray: '#3f4e60',\n  grayAlt: '#222e3e',\n  inputBackgroundColor: '#fff',\n  inputTextColor: '#000',\n  success: '#00ab52',\n  danger: '#ff0085',\n  active: '#006bff',\n  paused: '#8c49eb',\n  warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n  theme: Theme\n  children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n  return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n  return React.useContext(ThemeContext)\n}\n"],"names":["defaultTheme","background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning","ThemeContext","React","createContext","ThemeProvider","theme","rest","useTheme","useContext"],"mappings":";;;AAGO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,SAAS;AACrBC,EAAAA,aAAa,EAAE,SAAS;AACxBC,EAAAA,UAAU,EAAE,OAAO;AACnBC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,oBAAoB,EAAE,MAAM;AAC5BC,EAAAA,cAAc,EAAE,MAAM;AACtBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,MAAM,EAAE,SAAS;AACjBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAQV,MAAMC,YAAY,gBAAGC,KAAK,CAACC,aAAa,CAACf,YAAY,CAAC,CAAA;AAE/C,SAASgB,aAAa,CAAC;EAAEC,KAAK;EAAE,GAAGC,IAAAA;AAAoB,CAAC,EAAE;EAC/D,oBAAO,KAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,QAAA,CAAA;AAAC,IAAA,KAAK,EAAED,KAAAA;AAAM,GAAA,EAAKC,IAAI,CAAI,CAAA,CAAA;AAC1D,CAAA;AAEO,SAASC,QAAQ,GAAG;AACzB,EAAA,OAAOL,KAAK,CAACM,UAAU,CAACP,YAAY,CAAC,CAAA;AACvC;;;;"}
+{"version":3,"file":"theme.mjs","sources":["../../src/theme.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nexport const defaultTheme = {\n  background: '#0b1521',\n  backgroundAlt: '#132337',\n  foreground: 'white',\n  gray: '#3f4e60',\n  grayAlt: '#222e3e',\n  inputBackgroundColor: '#fff',\n  inputTextColor: '#000',\n  success: '#00ab52',\n  danger: '#ff0085',\n  active: '#006bff',\n  paused: '#8c49eb',\n  warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n  theme: Theme\n  children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n  return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n  return React.useContext(ThemeContext)\n}\n"],"names":["background","backgroundAlt","foreground","gray","grayAlt","inputBackgroundColor","inputTextColor","success","danger","active","paused","warning"],"mappings":";;;;AAGO;AACLA;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACF;AAQA;AAEO;;;AAAuD;;AAC9B;AAAa;AAC7C;AAEO;AACL;AACF;;"}

package/build/lib/types.d.ts

@@ -0,0 +1,11 @@
+import type { Query, DefaultError } from '@tanstack/react-query';
+export interface DevToolsErrorType {
+    /**
+     * The name of the error.
+     */
+    name: string;
+    /**
+     * How the error is initialized.
+     */
+    initializer: (query: Query) => DefaultError;
+}

package/build/lib/useSubscribeToQueryCache.d.ts

@@ -0,0 +1,3 @@
+import type { QueryCache } from '@tanstack/react-query';
+declare const useSubscribeToQueryCache: <T>(queryCache: QueryCache, getSnapshot: () => T, skip?: boolean) => T;
+export default useSubscribeToQueryCache;

package/build/lib/useSubscribeToQueryCache.esm.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { notifyManager } from '@tanstack/react-query';
+
+const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
+  return React__default.useSyncExternalStore(React__default.useCallback(onStoreChange => {
+    if (!skip) return queryCache.subscribe(notifyManager.batchCalls(onStoreChange));
+    return () => {
+      return;
+    };
+  }, [queryCache, skip]), getSnapshot, getSnapshot);
+};
+var useSubscribeToQueryCache$1 = useSubscribeToQueryCache;
+
+export { useSubscribeToQueryCache$1 as default };
+//# sourceMappingURL=useSubscribeToQueryCache.esm.js.map

package/build/lib/useSubscribeToQueryCache.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubscribeToQueryCache.esm.js","sources":["../../src/useSubscribeToQueryCache.ts"],"sourcesContent":["import React from 'react'\nimport type { QueryCache } from '@tanstack/react-query'\nimport { notifyManager } from '@tanstack/react-query'\n\nconst useSubscribeToQueryCache = <T>(\n  queryCache: QueryCache,\n  getSnapshot: () => T,\n  skip: boolean = false,\n): T => {\n  return React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) => {\n        if (!skip)\n          return queryCache.subscribe(notifyManager.batchCalls(onStoreChange))\n        return () => {\n          return\n        }\n      },\n      [queryCache, skip],\n    ),\n    getSnapshot,\n    getSnapshot,\n  )\n}\n\nexport default useSubscribeToQueryCache\n"],"names":["useSubscribeToQueryCache","queryCache","getSnapshot","skip","React","useSyncExternalStore","useCallback","onStoreChange","subscribe","notifyManager","batchCalls"],"mappings":";;;AAIA,MAAMA,wBAAwB,GAAG,CAC/BC,UAAsB,EACtBC,WAAoB,EACpBC,IAAa,GAAG,KAAK,KACf;EACN,OAAOC,cAAK,CAACC,oBAAoB,CAC/BD,cAAK,CAACE,WAAW,CACdC,aAAa,IAAK;AACjB,IAAA,IAAI,CAACJ,IAAI,EACP,OAAOF,UAAU,CAACO,SAAS,CAACC,aAAa,CAACC,UAAU,CAACH,aAAa,CAAC,CAAC,CAAA;AACtE,IAAA,OAAO,MAAM;AACX,MAAA,OAAA;KACD,CAAA;GACF,EACD,CAACN,UAAU,EAAEE,IAAI,CAAC,CACnB,EACDD,WAAW,EACXA,WAAW,CACZ,CAAA;AACH,CAAC,CAAA;AAED,iCAAeF,wBAAwB;;;;"}

package/build/lib/useSubscribeToQueryCache.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactQuery = require('@tanstack/react-query');
+
+const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
+  return React.useSyncExternalStore(React.useCallback(onStoreChange => {
+    if (!skip) return queryCache.subscribe(reactQuery.notifyManager.batchCalls(onStoreChange));
+    return () => {
+      return;
+    };
+  }, [queryCache, skip]), getSnapshot, getSnapshot);
+};
+var useSubscribeToQueryCache$1 = useSubscribeToQueryCache;
+
+exports.default = useSubscribeToQueryCache$1;
+//# sourceMappingURL=useSubscribeToQueryCache.js.map

package/build/lib/useSubscribeToQueryCache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubscribeToQueryCache.js","sources":["../../src/useSubscribeToQueryCache.ts"],"sourcesContent":["import React from 'react'\nimport type { QueryCache } from '@tanstack/react-query'\nimport { notifyManager } from '@tanstack/react-query'\n\nconst useSubscribeToQueryCache = <T>(\n  queryCache: QueryCache,\n  getSnapshot: () => T,\n  skip: boolean = false,\n): T => {\n  return React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) => {\n        if (!skip)\n          return queryCache.subscribe(notifyManager.batchCalls(onStoreChange))\n        return () => {\n          return\n        }\n      },\n      [queryCache, skip],\n    ),\n    getSnapshot,\n    getSnapshot,\n  )\n}\n\nexport default useSubscribeToQueryCache\n"],"names":["useSubscribeToQueryCache","queryCache","getSnapshot","skip","React","useSyncExternalStore","useCallback","onStoreChange","subscribe","notifyManager","batchCalls"],"mappings":";;;;;;;AAIA,MAAMA,wBAAwB,GAAG,CAC/BC,UAAsB,EACtBC,WAAoB,EACpBC,IAAa,GAAG,KAAK,KACf;EACN,OAAOC,KAAK,CAACC,oBAAoB,CAC/BD,KAAK,CAACE,WAAW,CACdC,aAAa,IAAK;AACjB,IAAA,IAAI,CAACJ,IAAI,EACP,OAAOF,UAAU,CAACO,SAAS,CAACC,wBAAa,CAACC,UAAU,CAACH,aAAa,CAAC,CAAC,CAAA;AACtE,IAAA,OAAO,MAAM;AACX,MAAA,OAAA;KACD,CAAA;GACF,EACD,CAACN,UAAU,EAAEE,IAAI,CAAC,CACnB,EACDD,WAAW,EACXA,WAAW,CACZ,CAAA;AACH,CAAC,CAAA;AAED,iCAAeF,wBAAwB;;;;"}

package/build/lib/useSubscribeToQueryCache.mjs

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { notifyManager } from '@tanstack/react-query';
+
+const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
+  return React__default.useSyncExternalStore(React__default.useCallback(onStoreChange => {
+    if (!skip) return queryCache.subscribe(notifyManager.batchCalls(onStoreChange));
+    return () => {
+      return;
+    };
+  }, [queryCache, skip]), getSnapshot, getSnapshot);
+};
+var useSubscribeToQueryCache$1 = useSubscribeToQueryCache;
+
+export { useSubscribeToQueryCache$1 as default };
+//# sourceMappingURL=useSubscribeToQueryCache.mjs.map

package/build/lib/useSubscribeToQueryCache.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubscribeToQueryCache.mjs","sources":["../../src/useSubscribeToQueryCache.ts"],"sourcesContent":["import React from 'react'\nimport type { QueryCache } from '@tanstack/react-query'\nimport { notifyManager } from '@tanstack/react-query'\n\nconst useSubscribeToQueryCache = <T>(\n  queryCache: QueryCache,\n  getSnapshot: () => T,\n  skip: boolean = false,\n): T => {\n  return React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) => {\n        if (!skip)\n          return queryCache.subscribe(notifyManager.batchCalls(onStoreChange))\n        return () => {\n          return\n        }\n      },\n      [queryCache, skip],\n    ),\n    getSnapshot,\n    getSnapshot,\n  )\n}\n\nexport default useSubscribeToQueryCache\n"],"names":["useSubscribeToQueryCache","queryCache","getSnapshot","skip","React","useSyncExternalStore","useCallback","onStoreChange","subscribe","notifyManager","batchCalls"],"mappings":";;;AAIA,MAAMA,wBAAwB,GAAG,CAC/BC,UAAsB,EACtBC,WAAoB,EACpBC,IAAa,GAAG,KAAK,KACf;EACN,OAAOC,cAAK,CAACC,oBAAoB,CAC/BD,cAAK,CAACE,WAAW,CACdC,aAAa,IAAK;AACjB,IAAA,IAAI,CAACJ,IAAI,EACP,OAAOF,UAAU,CAACO,SAAS,CAACC,aAAa,CAACC,UAAU,CAACH,aAAa,CAAC,CAAC,CAAA;AACtE,IAAA,OAAO,MAAM;AACX,MAAA,OAAA;KACD,CAAA;GACF,EACD,CAACN,UAAU,EAAEE,IAAI,CAAC,CACnB,EACDD,WAAW,EACXA,WAAW,CACZ,CAAA;AACH,CAAC,CAAA;AAED,iCAAeF,wBAAwB;;;;"}