@tanstack/query-devtools 5.27.0 → 5.27.6

package/build/Devtools/{ZI3HPF3S.jsx → 3GD3OJ5X.jsx}

@@ -10007,16 +10007,17 @@ function chunkArray(array, size2) {
 }
 var Expander = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   return <span
     class={clsx(
       styles().expander,
-      u`
+      css`
           transform: rotate(${props.expanded ? 90 : 0}deg);
         `,
-      props.expanded && u`
+      props.expanded && css`
             & svg {
               top: -1px;
             }
@@ -10037,8 +10038,9 @@ var Expander = (props) => {
 };
 var CopyButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const [copyState, setCopyState] = createSignal("NoCopy");
   return <button
@@ -10069,8 +10071,9 @@ var CopyButton = (props) => {
 };
 var ClearArrayButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return <button
@@ -10086,8 +10089,9 @@ var ClearArrayButton = (props) => {
 };
 var DeleteItemButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return <button
@@ -10103,14 +10107,15 @@ var DeleteItemButton = (props) => {
 };
 var ToggleValueButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return <button
     class={clsx(
       styles().actionButton,
-      u`
+      css`
           width: ${tokens.size[3.5]};
           height: ${tokens.size[3.5]};
         `
@@ -10133,8 +10138,9 @@ function isIterable(x) {
 }
 function Explorer(props) {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   const [expanded, setExpanded] = createSignal(
@@ -10300,11 +10306,11 @@ function Explorer(props) {
     </div></Show>
   </div>;
 }
-var stylesFactory = (theme) => {
+var stylesFactory = (theme, css) => {
   const { colors, font, size: size2, border } = tokens;
   const t2 = (light, dark) => theme === "light" ? light : dark;
   return {
-    entry: u`
+    entry: css`
       & * {
         font-size: ${font.size.xs};
         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -10314,13 +10320,13 @@ var stylesFactory = (theme) => {
       outline: none;
       word-break: break-word;
     `,
-    subEntry: u`
+    subEntry: css`
       margin: 0 0 0 0.5em;
       padding-left: 0.75em;
       border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
       /* outline: 1px solid ${colors.teal[400]}; */
     `,
-    expander: u`
+    expander: css`
       & path {
         stroke: ${colors.gray[400]};
       }
@@ -10333,14 +10339,14 @@ var stylesFactory = (theme) => {
       transition: all 0.1s ease;
       /* outline: 1px solid ${colors.blue[400]}; */
     `,
-    expanderButtonContainer: u`
+    expanderButtonContainer: css`
       display: flex;
       align-items: center;
       line-height: ${size2[4]};
       min-height: ${size2[4]};
       gap: ${size2[2]};
     `,
-    expanderButton: u`
+    expanderButton: css`
       cursor: pointer;
       color: inherit;
       font: inherit;
@@ -10365,26 +10371,26 @@ var stylesFactory = (theme) => {
         left: 1px;
       }
     `,
-    info: u`
+    info: css`
       color: ${t2(colors.gray[500], colors.gray[500])};
       font-size: ${font.size.xs};
       margin-left: ${size2[1]};
       /* outline: 1px solid ${colors.yellow[400]}; */
     `,
-    label: u`
+    label: css`
       color: ${t2(colors.gray[700], colors.gray[300])};
       white-space: nowrap;
     `,
-    value: u`
+    value: css`
       color: ${t2(colors.purple[600], colors.purple[400])};
       flex-grow: 1;
     `,
-    actions: u`
+    actions: css`
       display: inline-flex;
       gap: ${size2[2]};
       align-items: center;
     `,
-    row: u`
+    row: css`
       display: inline-flex;
       gap: ${size2[2]};
       width: 100%;
@@ -10392,7 +10398,7 @@ var stylesFactory = (theme) => {
       line-height: ${size2[4.5]};
       align-items: center;
     `,
-    editableInput: u`
+    editableInput: css`
       border: none;
       padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
       flex-grow: 1;
@@ -10403,7 +10409,7 @@ var stylesFactory = (theme) => {
         background-color: ${t2(colors.gray[300], colors.darkGray[600])};
       }
     `,
-    actionButton: u`
+    actionButton: css`
       background-color: transparent;
       color: ${t2(colors.gray[500], colors.gray[500])};
       border: none;
@@ -10429,8 +10435,8 @@ var stylesFactory = (theme) => {
     `
   };
 };
-var lightStyles = stylesFactory("light");
-var darkStyles = stylesFactory("dark");
+var lightStyles = (css) => stylesFactory("light", css);
+var darkStyles = (css) => stylesFactory("dark", css);
 
 // src/Devtools.tsx
 var firstBreakpoint = 1024;

package/build/Devtools/{DBFR2OSQ.js → DNNKSY26.js}

@@ -8874,14 +8874,17 @@ function chunkArray(array, size2) {
 }
 var Expander = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   return (() => {
     const _el$ = _tmpl$23();
-    createRenderEffect(() => className(_el$, clsx(styles().expander, u`
+    createRenderEffect(() => className(_el$, clsx(styles().expander, css`
           transform: rotate(${props.expanded ? 90 : 0}deg);
-        `, props.expanded && u`
+        `, props.expanded && css`
             & svg {
               top: -1px;
             }
@@ -8891,8 +8894,11 @@ var Expander = (props) => {
 };
 var CopyButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const [copyState, setCopyState] = createSignal("NoCopy");
   return (() => {
@@ -8954,8 +8960,11 @@ var CopyButton = (props) => {
 };
 var ClearArrayButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return (() => {
@@ -8972,8 +8981,11 @@ var ClearArrayButton = (props) => {
 };
 var DeleteItemButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return (() => {
@@ -8990,8 +9002,11 @@ var DeleteItemButton = (props) => {
 };
 var ToggleValueButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return (() => {
@@ -9009,7 +9024,7 @@ var ToggleValueButton = (props) => {
         return props.value;
       }
     }));
-    createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
+    createRenderEffect(() => className(_el$5, clsx(styles().actionButton, css`
           width: ${tokens.size[3.5]};
           height: ${tokens.size[3.5]};
         `)));
@@ -9021,8 +9036,11 @@ function isIterable(x) {
 }
 function Explorer(props) {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
@@ -9352,7 +9370,7 @@ function Explorer(props) {
     return _el$6;
   })();
 }
-var stylesFactory = (theme) => {
+var stylesFactory = (theme, css) => {
   const {
     colors,
     font,
@@ -9361,7 +9379,7 @@ var stylesFactory = (theme) => {
   } = tokens;
   const t2 = (light, dark) => theme === "light" ? light : dark;
   return {
-    entry: u`
+    entry: css`
       & * {
         font-size: ${font.size.xs};
         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -9371,13 +9389,13 @@ var stylesFactory = (theme) => {
       outline: none;
       word-break: break-word;
     `,
-    subEntry: u`
+    subEntry: css`
       margin: 0 0 0 0.5em;
       padding-left: 0.75em;
       border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
       /* outline: 1px solid ${colors.teal[400]}; */
     `,
-    expander: u`
+    expander: css`
       & path {
         stroke: ${colors.gray[400]};
       }
@@ -9390,14 +9408,14 @@ var stylesFactory = (theme) => {
       transition: all 0.1s ease;
       /* outline: 1px solid ${colors.blue[400]}; */
     `,
-    expanderButtonContainer: u`
+    expanderButtonContainer: css`
       display: flex;
       align-items: center;
       line-height: ${size2[4]};
       min-height: ${size2[4]};
       gap: ${size2[2]};
     `,
-    expanderButton: u`
+    expanderButton: css`
       cursor: pointer;
       color: inherit;
       font: inherit;
@@ -9422,26 +9440,26 @@ var stylesFactory = (theme) => {
         left: 1px;
       }
     `,
-    info: u`
+    info: css`
       color: ${t2(colors.gray[500], colors.gray[500])};
       font-size: ${font.size.xs};
       margin-left: ${size2[1]};
       /* outline: 1px solid ${colors.yellow[400]}; */
     `,
-    label: u`
+    label: css`
       color: ${t2(colors.gray[700], colors.gray[300])};
       white-space: nowrap;
     `,
-    value: u`
+    value: css`
       color: ${t2(colors.purple[600], colors.purple[400])};
       flex-grow: 1;
     `,
-    actions: u`
+    actions: css`
       display: inline-flex;
       gap: ${size2[2]};
       align-items: center;
     `,
-    row: u`
+    row: css`
       display: inline-flex;
       gap: ${size2[2]};
       width: 100%;
@@ -9449,7 +9467,7 @@ var stylesFactory = (theme) => {
       line-height: ${size2[4.5]};
       align-items: center;
     `,
-    editableInput: u`
+    editableInput: css`
       border: none;
       padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
       flex-grow: 1;
@@ -9460,7 +9478,7 @@ var stylesFactory = (theme) => {
         background-color: ${t2(colors.gray[300], colors.darkGray[600])};
       }
     `,
-    actionButton: u`
+    actionButton: css`
       background-color: transparent;
       color: ${t2(colors.gray[500], colors.gray[500])};
       border: none;
@@ -9486,8 +9504,8 @@ var stylesFactory = (theme) => {
     `
   };
 };
-var lightStyles = stylesFactory("light");
-var darkStyles = stylesFactory("dark");
+var lightStyles = (css) => stylesFactory("light", css);
+var darkStyles = (css) => stylesFactory("dark", css);
 delegateEvents(["click"]);
 
 // src/Devtools.tsx

package/build/Devtools/{UXHVNKJK.js → TSTTTWSP.js}

@@ -8874,14 +8874,17 @@ function chunkArray(array, size2) {
 }
 var Expander = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   return (() => {
     const _el$ = _tmpl$23();
-    createRenderEffect(() => className(_el$, clsx(styles().expander, u`
+    createRenderEffect(() => className(_el$, clsx(styles().expander, css`
           transform: rotate(${props.expanded ? 90 : 0}deg);
-        `, props.expanded && u`
+        `, props.expanded && css`
             & svg {
               top: -1px;
             }
@@ -8891,8 +8894,11 @@ var Expander = (props) => {
 };
 var CopyButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const [copyState, setCopyState] = createSignal("NoCopy");
   return (() => {
@@ -8955,8 +8961,11 @@ var CopyButton = (props) => {
 };
 var ClearArrayButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return (() => {
@@ -8973,8 +8982,11 @@ var ClearArrayButton = (props) => {
 };
 var DeleteItemButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return (() => {
@@ -8991,8 +9003,11 @@ var DeleteItemButton = (props) => {
 };
 var ToggleValueButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return (() => {
@@ -9010,7 +9025,7 @@ var ToggleValueButton = (props) => {
         return props.value;
       }
     }));
-    createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
+    createRenderEffect(() => className(_el$5, clsx(styles().actionButton, css`
           width: ${tokens.size[3.5]};
           height: ${tokens.size[3.5]};
         `)));
@@ -9022,8 +9037,11 @@ function isIterable(x) {
 }
 function Explorer(props) {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
@@ -9353,7 +9371,7 @@ function Explorer(props) {
     return _el$6;
   })();
 }
-var stylesFactory = (theme) => {
+var stylesFactory = (theme, css) => {
   const {
     colors,
     font,
@@ -9362,7 +9380,7 @@ var stylesFactory = (theme) => {
   } = tokens;
   const t2 = (light, dark) => theme === "light" ? light : dark;
   return {
-    entry: u`
+    entry: css`
       & * {
         font-size: ${font.size.xs};
         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -9372,13 +9390,13 @@ var stylesFactory = (theme) => {
       outline: none;
       word-break: break-word;
     `,
-    subEntry: u`
+    subEntry: css`
       margin: 0 0 0 0.5em;
       padding-left: 0.75em;
       border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
       /* outline: 1px solid ${colors.teal[400]}; */
     `,
-    expander: u`
+    expander: css`
       & path {
         stroke: ${colors.gray[400]};
       }
@@ -9391,14 +9409,14 @@ var stylesFactory = (theme) => {
       transition: all 0.1s ease;
       /* outline: 1px solid ${colors.blue[400]}; */
     `,
-    expanderButtonContainer: u`
+    expanderButtonContainer: css`
       display: flex;
       align-items: center;
       line-height: ${size2[4]};
       min-height: ${size2[4]};
       gap: ${size2[2]};
     `,
-    expanderButton: u`
+    expanderButton: css`
       cursor: pointer;
       color: inherit;
       font: inherit;
@@ -9423,26 +9441,26 @@ var stylesFactory = (theme) => {
         left: 1px;
       }
     `,
-    info: u`
+    info: css`
       color: ${t2(colors.gray[500], colors.gray[500])};
       font-size: ${font.size.xs};
       margin-left: ${size2[1]};
       /* outline: 1px solid ${colors.yellow[400]}; */
     `,
-    label: u`
+    label: css`
       color: ${t2(colors.gray[700], colors.gray[300])};
       white-space: nowrap;
     `,
-    value: u`
+    value: css`
       color: ${t2(colors.purple[600], colors.purple[400])};
       flex-grow: 1;
     `,
-    actions: u`
+    actions: css`
       display: inline-flex;
       gap: ${size2[2]};
       align-items: center;
     `,
-    row: u`
+    row: css`
       display: inline-flex;
       gap: ${size2[2]};
       width: 100%;
@@ -9450,7 +9468,7 @@ var stylesFactory = (theme) => {
       line-height: ${size2[4.5]};
       align-items: center;
     `,
-    editableInput: u`
+    editableInput: css`
       border: none;
       padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
       flex-grow: 1;
@@ -9461,7 +9479,7 @@ var stylesFactory = (theme) => {
         background-color: ${t2(colors.gray[300], colors.darkGray[600])};
       }
     `,
-    actionButton: u`
+    actionButton: css`
       background-color: transparent;
       color: ${t2(colors.gray[500], colors.gray[500])};
       border: none;
@@ -9487,8 +9505,8 @@ var stylesFactory = (theme) => {
     `
   };
 };
-var lightStyles = stylesFactory("light");
-var darkStyles = stylesFactory("dark");
+var lightStyles = (css) => stylesFactory("light", css);
+var darkStyles = (css) => stylesFactory("dark", css);
 delegateEvents(["click"]);
 
 // src/Devtools.tsx