@tanstack/query-devtools 5.23.0 → 5.27.0

package/build/Devtools/{T73WTYCS.jsx → MZG6MFIN.jsx}

@@ -11,6 +11,7 @@ import {
   Switch,
   batch,
   children,
+  clearDelegatedEvents,
   convertRemToPixels,
   createComponent,
   createComputed,
@@ -49,7 +50,7 @@ import {
   use,
   useContext,
   useTransition
-} from "../chunk/PQZZ5Z2E.jsx";
+} from "../chunk/HLOIZPIT.jsx";
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.11.8/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -9979,7 +9980,8 @@ var QueryDevtoolsContext = createContext({
   client: void 0,
   onlineManager: void 0,
   queryFlavor: "",
-  version: ""
+  version: "",
+  shadowDOMTarget: void 0
 });
 function useQueryDevtoolsContext() {
   return useContext(QueryDevtoolsContext);
@@ -10467,15 +10469,23 @@ var PiPProvider = (props) => {
     if (pipWindow() != null) {
       return;
     }
-    const pip = window.open("", "", `width=${width},height=${height},popup`);
+    const pip = window.open(
+      "",
+      "TSQD-Devtools-Panel",
+      `width=${width},height=${height},popup`
+    );
     if (!pip) {
       throw new Error(
         "Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode."
       );
     }
+    pip.document.head.innerHTML = "";
+    pip.document.body.innerHTML = "";
+    clearDelegatedEvents(pip.document);
     pip.document.title = "TanStack Query Devtools";
     pip.document.body.style.margin = "0";
     pip.addEventListener("pagehide", () => {
+      props.setLocalStore("pip_open", "false");
       setPipWindow(null);
     });
     [...document.styleSheets].forEach((styleSheet) => {
@@ -10518,23 +10528,24 @@ var PiPProvider = (props) => {
       ],
       pip.document
     );
+    props.setLocalStore("pip_open", "true");
     setPipWindow(pip);
   };
   createEffect(() => {
-    const closePipWindowOnUnload = () => {
-      closePipWindow();
-    };
-    window.addEventListener("beforeunload", closePipWindowOnUnload);
-    onCleanup(() => {
-      window.removeEventListener("beforeunload", closePipWindowOnUnload);
-    });
+    const pip_open = props.localStore.pip_open ?? "false";
+    if (pip_open === "true") {
+      requestPipWindow(
+        Number(window.innerWidth),
+        Number(props.localStore.height || DEFAULT_HEIGHT)
+      );
+    }
   });
   createEffect(() => {
-    const gooberStyles = document.getElementById("_goober");
+    const gooberStyles = (useQueryDevtoolsContext().shadowDOMTarget || document).querySelector("#_goober");
     const w = pipWindow();
     if (gooberStyles && w) {
       const observer = new MutationObserver(() => {
-        const pip_style = w.document.getElementById("_goober");
+        const pip_style = (useQueryDevtoolsContext().shadowDOMTarget || w.document).querySelector("#_goober");
         if (pip_style) {
           pip_style.textContent = gooberStyles.textContent;
         }
@@ -10580,13 +10591,14 @@ var DevtoolsComponent = (props) => {
       return preference;
     return colorScheme();
   });
-  return <QueryDevtoolsContext.Provider value={props}><PiPProvider><ThemeContext.Provider value={theme}><Devtools localStore={localStore} setLocalStore={setLocalStore} /></ThemeContext.Provider></PiPProvider></QueryDevtoolsContext.Provider>;
+  return <QueryDevtoolsContext.Provider value={props}><PiPProvider localStore={localStore} setLocalStore={setLocalStore}><ThemeContext.Provider value={theme}><Devtools localStore={localStore} setLocalStore={setLocalStore} /></ThemeContext.Provider></PiPProvider></QueryDevtoolsContext.Provider>;
 };
 var Devtools_default = DevtoolsComponent;
 var Devtools = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles2 : lightStyles2;
+    return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   const pip = usePiPWindow();
   const buttonPosition = createMemo(() => {
@@ -10625,14 +10637,17 @@ var Devtools = (props) => {
       window.removeEventListener("focus", onFocus);
     });
   });
+  const pip_open = createMemo(
+    () => props.localStore.pip_open ?? "false"
+  );
   return <>
-    <Show when={pip().pipWindow}><Portal mount={pip().pipWindow?.document.body}><PiPPanel><ContentView
+    <Show when={pip().pipWindow && pip_open() == "true"}><Portal mount={pip().pipWindow?.document.body}><PiPPanel><ContentView
       localStore={props.localStore}
       setLocalStore={props.setLocalStore}
     /></PiPPanel></Portal></Show>
     <div
       class={clsx(
-        u`
+        css`
             & .tsqd-panel-transition-exit-active,
             & .tsqd-panel-transition-enter-active {
               transition:
@@ -10663,7 +10678,7 @@ var Devtools = (props) => {
       )}
       ref={transitionsContainerRef}
     >
-      <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen() && !pip().pipWindow}><DevtoolsPanel
+      <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen() && !pip().pipWindow && pip_open() == "false"}><DevtoolsPanel
         localStore={props.localStore}
         setLocalStore={props.setLocalStore}
       /></Show></TransitionGroup>
@@ -10687,19 +10702,20 @@ var Devtools = (props) => {
 var PiPPanel = (props) => {
   const pip = usePiPWindow();
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles2 : lightStyles2;
+    return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   const getPanelDynamicStyles = () => {
     const { colors } = tokens;
     const t2 = (light, dark) => theme() === "dark" ? dark : light;
     if (panelWidth() < secondBreakpoint) {
-      return u`
+      return css`
         flex-direction: column;
         background-color: ${t2(colors.gray[300], colors.gray[600])};
       `;
     }
-    return u`
+    return css`
       flex-direction: row;
       background-color: ${t2(colors.gray[200], colors.darkGray[900])};
     `;
@@ -10713,6 +10729,7 @@ var PiPPanel = (props) => {
     };
     if (win) {
       win.addEventListener("resize", resizeCB);
+      resizeCB();
     }
     onCleanup(() => {
       if (win) {
@@ -10731,7 +10748,7 @@ var PiPPanel = (props) => {
       styles().panel,
       getPanelDynamicStyles(),
       {
-        [u`
+        [css`
             min-width: min-content;
           `]: panelWidth() < thirdBreakpoint
       },
@@ -10741,8 +10758,9 @@ var PiPPanel = (props) => {
 };
 var DevtoolsPanel = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles2 : lightStyles2;
+    return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   const [isResizing, setIsResizing] = createSignal(false);
   const position = createMemo(
@@ -10831,12 +10849,12 @@ var DevtoolsPanel = (props) => {
     const { colors } = tokens;
     const t2 = (light, dark) => theme() === "dark" ? dark : light;
     if (panelWidth() < secondBreakpoint) {
-      return u`
+      return css`
         flex-direction: column;
         background-color: ${t2(colors.gray[300], colors.gray[600])};
       `;
     }
-    return u`
+    return css`
       flex-direction: row;
       background-color: ${t2(colors.gray[200], colors.darkGray[900])};
     `;
@@ -10847,7 +10865,7 @@ var DevtoolsPanel = (props) => {
       styles()[`panel-position-${position()}`],
       getPanelDynamicStyles(),
       {
-        [u`
+        [css`
             min-width: min-content;
           `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
       },
@@ -10888,8 +10906,9 @@ var ContentView = (props) => {
   setupMutationCacheSubscription();
   let containerRef;
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles2 : lightStyles2;
+    return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   const pip = usePiPWindow();
   const [selectedView, setSelectedView] = createSignal(
@@ -10974,11 +10993,11 @@ var ContentView = (props) => {
     <div
       class={clsx(
         styles().queriesContainer,
-        panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
+        panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && css`
               height: 50%;
               max-height: 50%;
             `,
-        panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+        panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && css`
               height: 100%;
               max-height: 100%;
             `,
@@ -11357,8 +11376,9 @@ var ContentView = (props) => {
 };
 var QueryRow = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles2 : lightStyles2;
+    return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   const { colors, alpha } = tokens;
   const t2 = (light, dark) => theme() === "dark" ? dark : light;
@@ -11399,12 +11419,12 @@ var QueryRow = (props) => {
   );
   const getObserverCountColorStyles = () => {
     if (color() === "gray") {
-      return u`
+      return css`
         background-color: ${t2(colors[color()][200], colors[color()][700])};
         color: ${t2(colors[color()][700], colors[color()][300])};
       `;
     }
-    return u`
+    return css`
       background-color: ${t2(
       colors[color()][200] + alpha[80],
       colors[color()][900]
@@ -11432,8 +11452,9 @@ var QueryRow = (props) => {
 };
 var MutationRow = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles2 : lightStyles2;
+    return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   const { colors, alpha } = tokens;
   const t2 = (light, dark) => theme() === "dark" ? dark : light;
@@ -11472,12 +11493,12 @@ var MutationRow = (props) => {
   );
   const getObserverCountColorStyles = () => {
     if (color() === "gray") {
-      return u`
+      return css`
         background-color: ${t2(colors[color()][200], colors[color()][700])};
         color: ${t2(colors[color()][700], colors[color()][300])};
       `;
     }
-    return u`
+    return css`
       background-color: ${t2(
       colors[color()][200] + alpha[80],
       colors[color()][900]
@@ -11535,8 +11556,9 @@ var QueryStatusCount = () => {
     (queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length
   );
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles2 : lightStyles2;
+    return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   return <div
     class={clsx(styles().queryStatusContainer, "tsqd-query-status-container")}
@@ -11582,8 +11604,9 @@ var MutationStatusCount = () => {
     ).length
   );
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles2 : lightStyles2;
+    return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   return <div
     class={clsx(styles().queryStatusContainer, "tsqd-query-status-container")}
@@ -11596,8 +11619,9 @@ var MutationStatusCount = () => {
 };
 var QueryStatus = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles2 : lightStyles2;
+    return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   const { colors, alpha } = tokens;
   const t2 = (light, dark) => theme() === "dark" ? dark : light;
@@ -11627,7 +11651,7 @@ var QueryStatus = (props) => {
     ref={tagRef}
     class={clsx(
       styles().queryStatusTag,
-      !showLabel() && u`
+      !showLabel() && css`
             cursor: pointer;
             &:hover {
               background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
@@ -11647,7 +11671,7 @@ var QueryStatus = (props) => {
     >{props.label}</div></Show>
     <span
       class={clsx(
-        u`
+        css`
             width: ${tokens.size[1.5]};
             height: ${tokens.size[1.5]};
             border-radius: ${tokens.border.radius.full};
@@ -11665,7 +11689,7 @@ var QueryStatus = (props) => {
     <span
       class={clsx(
         styles().queryStatusCount,
-        props.count > 0 && props.color !== "gray" && u`
+        props.count > 0 && props.color !== "gray" && css`
               background-color: ${t2(
           colors[props.color][100],
           colors[props.color][900]
@@ -11679,8 +11703,9 @@ var QueryStatus = (props) => {
 };
 var QueryDetails = () => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles2 : lightStyles2;
+    return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   const { colors } = tokens;
   const t2 = (light, dark) => theme() === "dark" ? dark : light;
@@ -11755,13 +11780,13 @@ var QueryDetails = () => {
   });
   const getQueryStatusColors = () => {
     if (color() === "gray") {
-      return u`
+      return css`
         background-color: ${t2(colors[color()][200], colors[color()][700])};
         color: ${t2(colors[color()][700], colors[color()][300])};
         border-color: ${t2(colors[color()][400], colors[color()][600])};
       `;
     }
-    return u`
+    return css`
       background-color: ${t2(colors[color()][100], colors[color()][900])};
       color: ${t2(colors[color()][700], colors[color()][300])};
       border-color: ${t2(colors[color()][400], colors[color()][600])};
@@ -11801,7 +11826,7 @@ var QueryDetails = () => {
     >
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.blue[600], colors.blue[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11811,7 +11836,7 @@ var QueryDetails = () => {
         disabled={statusLabel() === "fetching"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.blue[600], colors.blue[400])};
               `}
         />
@@ -11819,7 +11844,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.yellow[600], colors.yellow[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11829,7 +11854,7 @@ var QueryDetails = () => {
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.yellow[600], colors.yellow[400])};
               `}
         />
@@ -11837,7 +11862,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.gray[600], colors.gray[300])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11847,7 +11872,7 @@ var QueryDetails = () => {
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.gray[600], colors.gray[400])};
               `}
         />
@@ -11855,7 +11880,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.pink[500], colors.pink[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11868,7 +11893,7 @@ var QueryDetails = () => {
         disabled={statusLabel() === "fetching"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.pink[500], colors.pink[400])};
               `}
         />
@@ -11876,7 +11901,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.cyan[500], colors.cyan[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11912,7 +11937,7 @@ var QueryDetails = () => {
         }}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.cyan[500], colors.cyan[400])};
               `}
         />
@@ -11921,7 +11946,7 @@ var QueryDetails = () => {
       </button>
       <Show when={errorTypes().length === 0 || queryStatus() === "error"}><button
         class={clsx(
-          u`
+          css`
                   color: ${t2(colors.red[500], colors.red[400])};
                 `,
           "tsqd-query-details-actions-btn",
@@ -11937,7 +11962,7 @@ var QueryDetails = () => {
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={u`
+          class={css`
                   background-color: ${t2(colors.red[500], colors.red[400])};
                 `}
         />
@@ -11954,7 +11979,7 @@ var QueryDetails = () => {
         )}
       >
         <span
-          class={u`
+          class={css`
                   background-color: ${tokens.colors.red[400]};
                 `}
         />
@@ -12002,8 +12027,9 @@ var QueryDetails = () => {
 };
 var MutationDetails = () => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles2 : lightStyles2;
+    return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   const { colors } = tokens;
   const t2 = (light, dark) => theme() === "dark" ? dark : light;
@@ -12037,13 +12063,13 @@ var MutationDetails = () => {
   );
   const getQueryStatusColors = () => {
     if (color() === "gray") {
-      return u`
+      return css`
         background-color: ${t2(colors[color()][200], colors[color()][700])};
         color: ${t2(colors[color()][700], colors[color()][300])};
         border-color: ${t2(colors[color()][400], colors[color()][600])};
       `;
     }
-    return u`
+    return css`
       background-color: ${t2(colors[color()][100], colors[color()][900])};
       color: ${t2(colors[color()][700], colors[color()][300])};
       border-color: ${t2(colors[color()][400], colors[color()][600])};
@@ -12203,11 +12229,11 @@ var createSubscribeToMutationCacheBatcher = (callback, equalityCheck = true) =>
   });
   return value;
 };
-var stylesFactory2 = (theme) => {
+var stylesFactory2 = (theme, css) => {
   const { colors, font, size: size2, alpha, shadow, border } = tokens;
   const t2 = (light, dark) => theme === "light" ? light : dark;
   return {
-    devtoolsBtn: u`
+    devtoolsBtn: css`
       z-index: 100000;
       position: fixed;
       padding: 4px;
@@ -12261,7 +12287,7 @@ var stylesFactory2 = (theme) => {
         }
       }
     `,
-    panel: u`
+    panel: css`
       position: fixed;
       z-index: 9999;
       display: flex;
@@ -12287,26 +12313,26 @@ var stylesFactory2 = (theme) => {
         background: ${t2(colors.gray[400], colors.darkGray[300])};
       }
     `,
-    "devtoolsBtn-position-bottom-right": u`
+    "devtoolsBtn-position-bottom-right": css`
       bottom: 12px;
       right: 12px;
     `,
-    "devtoolsBtn-position-bottom-left": u`
+    "devtoolsBtn-position-bottom-left": css`
       bottom: 12px;
       left: 12px;
     `,
-    "devtoolsBtn-position-top-left": u`
+    "devtoolsBtn-position-top-left": css`
       top: 12px;
       left: 12px;
     `,
-    "devtoolsBtn-position-top-right": u`
+    "devtoolsBtn-position-top-right": css`
       top: 12px;
       right: 12px;
     `,
-    "devtoolsBtn-position-relative": u`
+    "devtoolsBtn-position-relative": css`
       position: relative;
     `,
-    "panel-position-top": u`
+    "panel-position-top": css`
       top: 0;
       right: 0;
       left: 0;
@@ -12314,7 +12340,7 @@ var stylesFactory2 = (theme) => {
       min-height: ${size2[14]};
       border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
-    "panel-position-bottom": u`
+    "panel-position-bottom": css`
       bottom: 0;
       right: 0;
       left: 0;
@@ -12322,21 +12348,21 @@ var stylesFactory2 = (theme) => {
       min-height: ${size2[14]};
       border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
-    "panel-position-right": u`
+    "panel-position-right": css`
       bottom: 0;
       right: 0;
       top: 0;
       border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       max-width: 90%;
     `,
-    "panel-position-left": u`
+    "panel-position-left": css`
       bottom: 0;
       left: 0;
       top: 0;
       border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       max-width: 90%;
     `,
-    closeBtn: u`
+    closeBtn: css`
       position: absolute;
       cursor: pointer;
       z-index: 5;
@@ -12357,7 +12383,7 @@ var stylesFactory2 = (theme) => {
         height: ${size2[2]};
       }
     `,
-    "closeBtn-position-top": u`
+    "closeBtn-position-top": css`
       bottom: 0;
       right: ${size2[2]};
       transform: translate(0, 100%);
@@ -12381,7 +12407,7 @@ var stylesFactory2 = (theme) => {
         transform: rotate(180deg);
       }
     `,
-    "closeBtn-position-bottom": u`
+    "closeBtn-position-bottom": css`
       top: 0;
       right: ${size2[2]};
       transform: translate(0, -100%);
@@ -12401,7 +12427,7 @@ var stylesFactory2 = (theme) => {
         width: calc(100% + ${size2[5]});
       }
     `,
-    "closeBtn-position-right": u`
+    "closeBtn-position-right": css`
       bottom: ${size2[2]};
       left: 0;
       transform: translate(-100%, 0);
@@ -12424,7 +12450,7 @@ var stylesFactory2 = (theme) => {
         transform: rotate(-90deg);
       }
     `,
-    "closeBtn-position-left": u`
+    "closeBtn-position-left": css`
       bottom: ${size2[2]};
       right: 0;
       transform: translate(100%, 0);
@@ -12447,7 +12473,7 @@ var stylesFactory2 = (theme) => {
         transform: rotate(90deg);
       }
     `,
-    queriesContainer: u`
+    queriesContainer: css`
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       display: flex;
@@ -12456,7 +12482,7 @@ var stylesFactory2 = (theme) => {
         font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
-    dragHandle: u`
+    dragHandle: css`
       position: absolute;
       transition: background-color 0.125s ease;
       &:hover {
@@ -12464,31 +12490,31 @@ var stylesFactory2 = (theme) => {
       }
       z-index: 4;
     `,
-    "dragHandle-position-top": u`
+    "dragHandle-position-top": css`
       bottom: 0;
       width: 100%;
       height: 3px;
       cursor: ns-resize;
     `,
-    "dragHandle-position-bottom": u`
+    "dragHandle-position-bottom": css`
       top: 0;
       width: 100%;
       height: 3px;
       cursor: ns-resize;
     `,
-    "dragHandle-position-right": u`
+    "dragHandle-position-right": css`
       left: 0;
       width: 3px;
       height: 100%;
       cursor: ew-resize;
     `,
-    "dragHandle-position-left": u`
+    "dragHandle-position-left": css`
       right: 0;
       width: 3px;
       height: 100%;
       cursor: ew-resize;
     `,
-    row: u`
+    row: css`
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -12505,12 +12531,12 @@ var stylesFactory2 = (theme) => {
         flex-direction: column;
       }
     `,
-    logoAndToggleContainer: u`
+    logoAndToggleContainer: css`
       display: flex;
       gap: ${tokens.size[3]};
       align-items: center;
     `,
-    logo: u`
+    logo: css`
       cursor: pointer;
       display: flex;
       flex-direction: column;
@@ -12527,14 +12553,14 @@ var stylesFactory2 = (theme) => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    tanstackLogo: u`
+    tanstackLogo: css`
       font-size: ${font.size.md};
       font-weight: ${font.weight.bold};
       line-height: ${font.lineHeight.xs};
       white-space: nowrap;
       color: ${t2(colors.gray[600], colors.gray[300])};
     `,
-    queryFlavorLogo: u`
+    queryFlavorLogo: css`
       font-weight: ${font.weight.semibold};
       font-size: ${font.size.xs};
       background: linear-gradient(
@@ -12547,12 +12573,12 @@ var stylesFactory2 = (theme) => {
       -webkit-text-fill-color: transparent;
       white-space: nowrap;
     `,
-    queryStatusContainer: u`
+    queryStatusContainer: css`
       display: flex;
       gap: ${tokens.size[2]};
       height: min-content;
     `,
-    queryStatusTag: u`
+    queryStatusTag: css`
       display: flex;
       gap: ${tokens.size[1.5]};
       box-sizing: border-box;
@@ -12573,10 +12599,10 @@ var stylesFactory2 = (theme) => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    queryStatusTagLabel: u`
+    queryStatusTagLabel: css`
       font-size: ${font.size.xs};
     `,
-    queryStatusCount: u`
+    queryStatusCount: css`
       font-size: ${font.size.xs};
       padding: 0 5px;
       display: flex;
@@ -12588,7 +12614,7 @@ var stylesFactory2 = (theme) => {
       font-variant-numeric: tabular-nums;
       height: ${tokens.size[4.5]};
     `,
-    statusTooltip: u`
+    statusTooltip: css`
       position: absolute;
       z-index: 1;
       background-color: ${t2(colors.gray[50], colors.darkGray[500])};
@@ -12628,7 +12654,7 @@ var stylesFactory2 = (theme) => {
         border-width: 7px;
       }
     `,
-    filtersContainer: u`
+    filtersContainer: css`
       display: flex;
       gap: ${tokens.size[2]};
       & > button {
@@ -12657,7 +12683,7 @@ var stylesFactory2 = (theme) => {
         }
       }
     `,
-    filterInput: u`
+    filterInput: css`
       padding: ${size2[0.5]} ${size2[2]};
       border-radius: ${tokens.border.radius.sm};
       background-color: ${t2(colors.gray[100], colors.darkGray[400])};
@@ -12696,7 +12722,7 @@ var stylesFactory2 = (theme) => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    filterSelect: u`
+    filterSelect: css`
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
       border-radius: ${tokens.border.radius.sm};
       background-color: ${t2(colors.gray[100], colors.darkGray[400])};
@@ -12730,11 +12756,11 @@ var stylesFactory2 = (theme) => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    actionsContainer: u`
+    actionsContainer: css`
       display: flex;
       gap: ${tokens.size[2]};
     `,
-    actionsBtn: u`
+    actionsBtn: css`
       border-radius: ${tokens.border.radius.sm};
       background-color: ${t2(colors.gray[100], colors.darkGray[400])};
       border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
@@ -12761,13 +12787,13 @@ var stylesFactory2 = (theme) => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    actionsBtnOffline: u`
+    actionsBtnOffline: css`
       & svg {
         stroke: ${t2(colors.yellow[700], colors.yellow[500])};
         fill: ${t2(colors.yellow[700], colors.yellow[500])};
       }
     `,
-    overflowQueryContainer: u`
+    overflowQueryContainer: css`
       flex: 1;
       overflow-y: auto;
       & > div {
@@ -12775,7 +12801,7 @@ var stylesFactory2 = (theme) => {
         flex-direction: column;
       }
     `,
-    queryRow: u`
+    queryRow: css`
       display: flex;
       align-items: center;
       padding: 0;
@@ -12837,10 +12863,10 @@ var stylesFactory2 = (theme) => {
         font-size: ${font.size.xs};
       }
     `,
-    selectedQueryRow: u`
+    selectedQueryRow: css`
       background-color: ${t2(colors.gray[200], colors.darkGray[500])};
     `,
-    detailsContainer: u`
+    detailsContainer: css`
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       color: ${t2(colors.gray[700], colors.gray[300])};
@@ -12851,7 +12877,7 @@ var stylesFactory2 = (theme) => {
       display: flex;
       text-align: left;
     `,
-    detailsHeader: u`
+    detailsHeader: css`
       font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
@@ -12863,7 +12889,7 @@ var stylesFactory2 = (theme) => {
       line-height: ${font.lineHeight.xs};
       text-align: left;
     `,
-    detailsBody: u`
+    detailsBody: css`
       margin: ${tokens.size[1.5]} 0px ${tokens.size[2]} 0px;
       & > div {
         display: flex;
@@ -12897,13 +12923,13 @@ var stylesFactory2 = (theme) => {
         align-items: center;
       }
     `,
-    queryDetailsStatus: u`
+    queryDetailsStatus: css`
       border: 1px solid ${colors.darkGray[200]};
       border-radius: ${tokens.border.radius.sm};
       font-weight: ${font.weight.medium};
       padding: ${tokens.size[1]} ${tokens.size[2.5]};
     `,
-    actionsBody: u`
+    actionsBody: css`
       flex-wrap: wrap;
       margin: ${tokens.size[2]} 0px ${tokens.size[2]} 0px;
       display: flex;
@@ -12943,7 +12969,7 @@ var stylesFactory2 = (theme) => {
         }
       }
     `,
-    actionsSelect: u`
+    actionsSelect: css`
       font-size: ${font.size.xs};
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
       display: flex;
@@ -12992,7 +13018,7 @@ var stylesFactory2 = (theme) => {
         height: ${tokens.size[2]};
       }
     `,
-    settingsMenu: u`
+    settingsMenu: css`
       display: flex;
       & * {
         font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
@@ -13008,7 +13034,7 @@ var stylesFactory2 = (theme) => {
       min-width: 120px;
       padding: ${size2[0.5]};
     `,
-    settingsSubTrigger: u`
+    settingsSubTrigger: css`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -13036,14 +13062,14 @@ var stylesFactory2 = (theme) => {
         cursor: not-allowed;
       }
     `,
-    settingsMenuHeader: u`
+    settingsMenuHeader: css`
       padding: ${tokens.size[1]} ${tokens.size[1]};
       font-weight: ${font.weight.medium};
       border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
       color: ${t2(colors.gray[500], colors.gray[400])};
       font-size: ${font.size["xs"]};
     `,
-    settingsSubButton: u`
+    settingsSubButton: css`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -13065,7 +13091,7 @@ var stylesFactory2 = (theme) => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    themeSelectedButton: u`
+    themeSelectedButton: css`
       background-color: ${t2(colors.purple[100], colors.purple[900])};
       color: ${t2(colors.purple[700], colors.purple[300])};
       & svg {
@@ -13075,7 +13101,7 @@ var stylesFactory2 = (theme) => {
         background-color: ${t2(colors.purple[100], colors.purple[900])};
       }
     `,
-    viewToggle: u`
+    viewToggle: css`
       border-radius: ${tokens.border.radius.sm};
       background-color: ${t2(colors.gray[200], colors.darkGray[600])};
       border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
@@ -13127,8 +13153,8 @@ var stylesFactory2 = (theme) => {
     `
   };
 };
-var lightStyles2 = stylesFactory2("light");
-var darkStyles2 = stylesFactory2("dark");
+var lightStyles2 = (css) => stylesFactory2("light", css);
+var darkStyles2 = (css) => stylesFactory2("dark", css);
 export {
   Devtools_default as default
 };