@tanstack/query-devtools 5.24.0 → 5.27.0

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

@@ -50,7 +50,7 @@ import {
   use,
   useContext,
   useTransition
-} from "../chunk/IQDKCOXE.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 = {
@@ -9980,7 +9980,8 @@ var QueryDevtoolsContext = createContext({
   client: void 0,
   onlineManager: void 0,
   queryFlavor: "",
-  version: ""
+  version: "",
+  shadowDOMTarget: void 0
 });
 function useQueryDevtoolsContext() {
   return useContext(QueryDevtoolsContext);
@@ -10540,11 +10541,11 @@ var PiPProvider = (props) => {
     }
   });
   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;
         }
@@ -10595,8 +10596,9 @@ var DevtoolsComponent = (props) => {
 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(() => {
@@ -10645,7 +10647,7 @@ var Devtools = (props) => {
     /></PiPPanel></Portal></Show>
     <div
       class={clsx(
-        u`
+        css`
             & .tsqd-panel-transition-exit-active,
             & .tsqd-panel-transition-enter-active {
               transition:
@@ -10700,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])};
     `;
@@ -10745,7 +10748,7 @@ var PiPPanel = (props) => {
       styles().panel,
       getPanelDynamicStyles(),
       {
-        [u`
+        [css`
             min-width: min-content;
           `]: panelWidth() < thirdBreakpoint
       },
@@ -10755,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(
@@ -10845,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])};
     `;
@@ -10861,7 +10865,7 @@ var DevtoolsPanel = (props) => {
       styles()[`panel-position-${position()}`],
       getPanelDynamicStyles(),
       {
-        [u`
+        [css`
             min-width: min-content;
           `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
       },
@@ -10902,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(
@@ -10988,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%;
             `,
@@ -11371,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;
@@ -11413,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]
@@ -11446,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;
@@ -11486,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]
@@ -11549,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")}
@@ -11596,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")}
@@ -11610,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;
@@ -11641,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]};
@@ -11661,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};
@@ -11679,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]
@@ -11693,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;
@@ -11769,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])};
@@ -11815,7 +11826,7 @@ var QueryDetails = () => {
     >
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.blue[600], colors.blue[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11825,7 +11836,7 @@ var QueryDetails = () => {
         disabled={statusLabel() === "fetching"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.blue[600], colors.blue[400])};
               `}
         />
@@ -11833,7 +11844,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.yellow[600], colors.yellow[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11843,7 +11854,7 @@ var QueryDetails = () => {
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.yellow[600], colors.yellow[400])};
               `}
         />
@@ -11851,7 +11862,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.gray[600], colors.gray[300])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11861,7 +11872,7 @@ var QueryDetails = () => {
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.gray[600], colors.gray[400])};
               `}
         />
@@ -11869,7 +11880,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.pink[500], colors.pink[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11882,7 +11893,7 @@ var QueryDetails = () => {
         disabled={statusLabel() === "fetching"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.pink[500], colors.pink[400])};
               `}
         />
@@ -11890,7 +11901,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.cyan[500], colors.cyan[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11926,7 +11937,7 @@ var QueryDetails = () => {
         }}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.cyan[500], colors.cyan[400])};
               `}
         />
@@ -11935,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",
@@ -11951,7 +11962,7 @@ var QueryDetails = () => {
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={u`
+          class={css`
                   background-color: ${t2(colors.red[500], colors.red[400])};
                 `}
         />
@@ -11968,7 +11979,7 @@ var QueryDetails = () => {
         )}
       >
         <span
-          class={u`
+          class={css`
                   background-color: ${tokens.colors.red[400]};
                 `}
         />
@@ -12016,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;
@@ -12051,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])};
@@ -12217,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;
@@ -12275,7 +12287,7 @@ var stylesFactory2 = (theme) => {
         }
       }
     `,
-    panel: u`
+    panel: css`
       position: fixed;
       z-index: 9999;
       display: flex;
@@ -12301,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;
@@ -12328,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;
@@ -12336,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;
@@ -12371,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%);
@@ -12395,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%);
@@ -12415,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);
@@ -12438,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);
@@ -12461,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;
@@ -12470,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 {
@@ -12478,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;
@@ -12519,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;
@@ -12541,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(
@@ -12561,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;
@@ -12587,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;
@@ -12602,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])};
@@ -12642,7 +12654,7 @@ var stylesFactory2 = (theme) => {
         border-width: 7px;
       }
     `,
-    filtersContainer: u`
+    filtersContainer: css`
       display: flex;
       gap: ${tokens.size[2]};
       & > button {
@@ -12671,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])};
@@ -12710,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])};
@@ -12744,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])};
@@ -12775,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 {
@@ -12789,7 +12801,7 @@ var stylesFactory2 = (theme) => {
         flex-direction: column;
       }
     `,
-    queryRow: u`
+    queryRow: css`
       display: flex;
       align-items: center;
       padding: 0;
@@ -12851,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])};
@@ -12865,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;
@@ -12877,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;
@@ -12911,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;
@@ -12957,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;
@@ -13006,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;
@@ -13022,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;
@@ -13050,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;
@@ -13079,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 {
@@ -13089,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])};
@@ -13141,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
 };