@tanstack/query-devtools 5.24.0 → 5.27.0

package/build/Devtools/{36BZFNWK.jsx → ZI3HPF3S.jsx}

@@ -50,7 +50,7 @@ import {
   use,
   useContext,
   useTransition
-} from "../chunk/LJVATCV2.jsx";
+} from "../chunk/4MX274MJ.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);
@@ -10539,11 +10540,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;
         }
@@ -10594,8 +10595,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(() => {
@@ -10644,7 +10646,7 @@ var Devtools = (props) => {
     /></PiPPanel></Portal></Show>
     <div
       class={clsx(
-        u`
+        css`
             & .tsqd-panel-transition-exit-active,
             & .tsqd-panel-transition-enter-active {
               transition:
@@ -10699,19 +10701,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])};
     `;
@@ -10744,7 +10747,7 @@ var PiPPanel = (props) => {
       styles().panel,
       getPanelDynamicStyles(),
       {
-        [u`
+        [css`
             min-width: min-content;
           `]: panelWidth() < thirdBreakpoint
       },
@@ -10754,8 +10757,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(
@@ -10844,12 +10848,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])};
     `;
@@ -10860,7 +10864,7 @@ var DevtoolsPanel = (props) => {
       styles()[`panel-position-${position()}`],
       getPanelDynamicStyles(),
       {
-        [u`
+        [css`
             min-width: min-content;
           `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
       },
@@ -10901,8 +10905,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(
@@ -10987,11 +10992,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%;
             `,
@@ -11370,8 +11375,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;
@@ -11412,12 +11418,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]
@@ -11445,8 +11451,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;
@@ -11485,12 +11492,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]
@@ -11548,8 +11555,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")}
@@ -11595,8 +11603,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")}
@@ -11609,8 +11618,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;
@@ -11640,7 +11650,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]};
@@ -11660,7 +11670,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};
@@ -11678,7 +11688,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]
@@ -11692,8 +11702,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;
@@ -11768,13 +11779,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])};
@@ -11814,7 +11825,7 @@ var QueryDetails = () => {
     >
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.blue[600], colors.blue[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11824,7 +11835,7 @@ var QueryDetails = () => {
         disabled={statusLabel() === "fetching"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.blue[600], colors.blue[400])};
               `}
         />
@@ -11832,7 +11843,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.yellow[600], colors.yellow[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11842,7 +11853,7 @@ var QueryDetails = () => {
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.yellow[600], colors.yellow[400])};
               `}
         />
@@ -11850,7 +11861,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.gray[600], colors.gray[300])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11860,7 +11871,7 @@ var QueryDetails = () => {
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.gray[600], colors.gray[400])};
               `}
         />
@@ -11868,7 +11879,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.pink[500], colors.pink[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11881,7 +11892,7 @@ var QueryDetails = () => {
         disabled={statusLabel() === "fetching"}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.pink[500], colors.pink[400])};
               `}
         />
@@ -11889,7 +11900,7 @@ var QueryDetails = () => {
       </button>
       <button
         class={clsx(
-          u`
+          css`
                 color: ${t2(colors.cyan[500], colors.cyan[400])};
               `,
           "tsqd-query-details-actions-btn",
@@ -11925,7 +11936,7 @@ var QueryDetails = () => {
         }}
       >
         <span
-          class={u`
+          class={css`
                 background-color: ${t2(colors.cyan[500], colors.cyan[400])};
               `}
         />
@@ -11934,7 +11945,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",
@@ -11950,7 +11961,7 @@ var QueryDetails = () => {
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={u`
+          class={css`
                   background-color: ${t2(colors.red[500], colors.red[400])};
                 `}
         />
@@ -11967,7 +11978,7 @@ var QueryDetails = () => {
         )}
       >
         <span
-          class={u`
+          class={css`
                   background-color: ${tokens.colors.red[400]};
                 `}
         />
@@ -12015,8 +12026,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;
@@ -12050,13 +12062,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])};
@@ -12216,11 +12228,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;
@@ -12274,7 +12286,7 @@ var stylesFactory2 = (theme) => {
         }
       }
     `,
-    panel: u`
+    panel: css`
       position: fixed;
       z-index: 9999;
       display: flex;
@@ -12300,26 +12312,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;
@@ -12327,7 +12339,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;
@@ -12335,21 +12347,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;
@@ -12370,7 +12382,7 @@ var stylesFactory2 = (theme) => {
         height: ${size2[2]};
       }
     `,
-    "closeBtn-position-top": u`
+    "closeBtn-position-top": css`
       bottom: 0;
       right: ${size2[2]};
       transform: translate(0, 100%);
@@ -12394,7 +12406,7 @@ var stylesFactory2 = (theme) => {
         transform: rotate(180deg);
       }
     `,
-    "closeBtn-position-bottom": u`
+    "closeBtn-position-bottom": css`
       top: 0;
       right: ${size2[2]};
       transform: translate(0, -100%);
@@ -12414,7 +12426,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);
@@ -12437,7 +12449,7 @@ var stylesFactory2 = (theme) => {
         transform: rotate(-90deg);
       }
     `,
-    "closeBtn-position-left": u`
+    "closeBtn-position-left": css`
       bottom: ${size2[2]};
       right: 0;
       transform: translate(100%, 0);
@@ -12460,7 +12472,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;
@@ -12469,7 +12481,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 {
@@ -12477,31 +12489,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;
@@ -12518,12 +12530,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;
@@ -12540,14 +12552,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(
@@ -12560,12 +12572,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;
@@ -12586,10 +12598,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;
@@ -12601,7 +12613,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])};
@@ -12641,7 +12653,7 @@ var stylesFactory2 = (theme) => {
         border-width: 7px;
       }
     `,
-    filtersContainer: u`
+    filtersContainer: css`
       display: flex;
       gap: ${tokens.size[2]};
       & > button {
@@ -12670,7 +12682,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])};
@@ -12709,7 +12721,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])};
@@ -12743,11 +12755,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])};
@@ -12774,13 +12786,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 {
@@ -12788,7 +12800,7 @@ var stylesFactory2 = (theme) => {
         flex-direction: column;
       }
     `,
-    queryRow: u`
+    queryRow: css`
       display: flex;
       align-items: center;
       padding: 0;
@@ -12850,10 +12862,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])};
@@ -12864,7 +12876,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;
@@ -12876,7 +12888,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;
@@ -12910,13 +12922,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;
@@ -12956,7 +12968,7 @@ var stylesFactory2 = (theme) => {
         }
       }
     `,
-    actionsSelect: u`
+    actionsSelect: css`
       font-size: ${font.size.xs};
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
       display: flex;
@@ -13005,7 +13017,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;
@@ -13021,7 +13033,7 @@ var stylesFactory2 = (theme) => {
       min-width: 120px;
       padding: ${size2[0.5]};
     `,
-    settingsSubTrigger: u`
+    settingsSubTrigger: css`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -13049,14 +13061,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;
@@ -13078,7 +13090,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 {
@@ -13088,7 +13100,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])};
@@ -13140,8 +13152,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
 };