@tanstack/query-devtools 5.21.3 → 5.21.5

package/build/Devtools/{SUV2KM2F.js → MY47IRH5.js}

@@ -9359,7 +9359,8 @@ var stylesFactory = (theme) => {
     entry: u`
       & * {
         font-size: ${font.size.xs};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
       }
       position: relative;
       outline: none;
@@ -9485,7 +9486,7 @@ var darkStyles = stylesFactory("dark");
 delegateEvents(["click"]);
 
 // src/Devtools.tsx
-var _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
+var _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
 var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
 var _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
@@ -9629,7 +9630,7 @@ var Devtools = (props) => {
             insert(_el$3, createComponent(TanstackLogo, {}));
             _el$4.$$click = () => props.setLocalStore("open", "true");
             insert(_el$4, createComponent(TanstackLogo, {}));
-            createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
+            createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`], "tsqd-open-btn-container")));
             return _el$2;
           }
         });
@@ -11421,7 +11422,7 @@ var stylesFactory2 = (theme) => {
       display: flex;
       flex-direction: column;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
     dragHandle: u`
@@ -11786,7 +11787,8 @@ var stylesFactory2 = (theme) => {
         min-height: ${tokens.size[6]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
@@ -11811,7 +11813,7 @@ var stylesFactory2 = (theme) => {
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       color: ${t2(colors.gray[700], colors.gray[300])};
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -11819,7 +11821,7 @@ var stylesFactory2 = (theme) => {
       text-align: left;
     `,
     detailsHeader: u`
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
@@ -11851,7 +11853,8 @@ var stylesFactory2 = (theme) => {
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
@@ -11876,7 +11879,7 @@ var stylesFactory2 = (theme) => {
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
@@ -11961,7 +11964,7 @@ var stylesFactory2 = (theme) => {
     settingsMenu: u`
       display: flex;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
       flex-direction: column;
       gap: ${size2[0.5]};

package/build/Devtools/{VAJS2OS4.jsx → OQR5HZUS.jsx}

@@ -10290,7 +10290,8 @@ var stylesFactory = (theme) => {
     entry: u`
       & * {
         font-size: ${font.size.xs};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
       }
       position: relative;
       outline: none;
@@ -10529,13 +10530,15 @@ var Devtools = (props) => {
     <TransitionGroup name="tsqd-button-transition"><Show when={!isOpen()}><div
       class={clsx(
         styles().devtoolsBtn,
-        styles()[`devtoolsBtn-position-${buttonPosition()}`]
+        styles()[`devtoolsBtn-position-${buttonPosition()}`],
+        "tsqd-open-btn-container"
       )}
     >
       <div aria-hidden="true"><TanstackLogo /></div>
       <button
         aria-label="Open Tanstack query devtools"
         onClick={() => props.setLocalStore("open", "true")}
+        class="tsqd-open-btn"
       ><TanstackLogo /></button>
     </div></Show></TransitionGroup>
   </div>;
@@ -12231,7 +12234,7 @@ var stylesFactory2 = (theme) => {
       display: flex;
       flex-direction: column;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
     dragHandle: u`
@@ -12596,7 +12599,8 @@ var stylesFactory2 = (theme) => {
         min-height: ${tokens.size[6]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
@@ -12621,7 +12625,7 @@ var stylesFactory2 = (theme) => {
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       color: ${t2(colors.gray[700], colors.gray[300])};
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -12629,7 +12633,7 @@ var stylesFactory2 = (theme) => {
       text-align: left;
     `,
     detailsHeader: u`
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
@@ -12661,7 +12665,8 @@ var stylesFactory2 = (theme) => {
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
@@ -12686,7 +12691,7 @@ var stylesFactory2 = (theme) => {
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
@@ -12771,7 +12776,7 @@ var stylesFactory2 = (theme) => {
     settingsMenu: u`
       display: flex;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
       flex-direction: column;
       gap: ${size2[0.5]};

package/build/Devtools/{PZY6I5TR.js → OWP7E64P.js}

@@ -9360,7 +9360,8 @@ var stylesFactory = (theme) => {
     entry: u`
       & * {
         font-size: ${font.size.xs};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
       }
       position: relative;
       outline: none;
@@ -9486,7 +9487,7 @@ var darkStyles = stylesFactory("dark");
 delegateEvents(["click"]);
 
 // src/Devtools.tsx
-var _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
+var _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
 var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
 var _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
@@ -9630,7 +9631,7 @@ var Devtools = (props) => {
             insert(_el$3, createComponent(TanstackLogo, {}));
             _el$4.$$click = () => props.setLocalStore("open", "true");
             insert(_el$4, createComponent(TanstackLogo, {}));
-            createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
+            createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`], "tsqd-open-btn-container")));
             return _el$2;
           }
         });
@@ -11422,7 +11423,7 @@ var stylesFactory2 = (theme) => {
       display: flex;
       flex-direction: column;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
     dragHandle: u`
@@ -11787,7 +11788,8 @@ var stylesFactory2 = (theme) => {
         min-height: ${tokens.size[6]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
@@ -11812,7 +11814,7 @@ var stylesFactory2 = (theme) => {
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       color: ${t2(colors.gray[700], colors.gray[300])};
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -11820,7 +11822,7 @@ var stylesFactory2 = (theme) => {
       text-align: left;
     `,
     detailsHeader: u`
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
@@ -11852,7 +11854,8 @@ var stylesFactory2 = (theme) => {
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
@@ -11877,7 +11880,7 @@ var stylesFactory2 = (theme) => {
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
@@ -11962,7 +11965,7 @@ var stylesFactory2 = (theme) => {
     settingsMenu: u`
       display: flex;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
       flex-direction: column;
       gap: ${size2[0.5]};

package/build/Devtools/{Z62CHOQ7.jsx → TETPQZKA.jsx}

@@ -10291,7 +10291,8 @@ var stylesFactory = (theme) => {
     entry: u`
       & * {
         font-size: ${font.size.xs};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
       }
       position: relative;
       outline: none;
@@ -10530,13 +10531,15 @@ var Devtools = (props) => {
     <TransitionGroup name="tsqd-button-transition"><Show when={!isOpen()}><div
       class={clsx(
         styles().devtoolsBtn,
-        styles()[`devtoolsBtn-position-${buttonPosition()}`]
+        styles()[`devtoolsBtn-position-${buttonPosition()}`],
+        "tsqd-open-btn-container"
       )}
     >
       <div aria-hidden="true"><TanstackLogo /></div>
       <button
         aria-label="Open Tanstack query devtools"
         onClick={() => props.setLocalStore("open", "true")}
+        class="tsqd-open-btn"
       ><TanstackLogo /></button>
     </div></Show></TransitionGroup>
   </div>;
@@ -12232,7 +12235,7 @@ var stylesFactory2 = (theme) => {
       display: flex;
       flex-direction: column;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
     dragHandle: u`
@@ -12597,7 +12600,8 @@ var stylesFactory2 = (theme) => {
         min-height: ${tokens.size[6]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
@@ -12622,7 +12626,7 @@ var stylesFactory2 = (theme) => {
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       color: ${t2(colors.gray[700], colors.gray[300])};
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -12630,7 +12634,7 @@ var stylesFactory2 = (theme) => {
       text-align: left;
     `,
     detailsHeader: u`
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
@@ -12662,7 +12666,8 @@ var stylesFactory2 = (theme) => {
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
@@ -12687,7 +12692,7 @@ var stylesFactory2 = (theme) => {
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
@@ -12772,7 +12777,7 @@ var stylesFactory2 = (theme) => {
     settingsMenu: u`
       display: flex;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
       flex-direction: column;
       gap: ${size2[0.5]};

package/build/dev.cjs

@@ -12743,7 +12743,8 @@ var init_Explorer = __esm({
         entry: u`
       & * {
         font-size: ${font.size.xs};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
       }
       position: relative;
       outline: none;
@@ -12903,7 +12904,7 @@ var init_Devtools = __esm({
     init_icons();
     init_Explorer();
     init_Context();
-    _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
+    _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
     _tmpl$25 = /* @__PURE__ */ template(`<div>`);
     _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
     _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
@@ -13047,7 +13048,7 @@ var init_Devtools = __esm({
                 insert(_el$3, createComponent(TanstackLogo, {}));
                 _el$4.$$click = () => props.setLocalStore("open", "true");
                 insert(_el$4, createComponent(TanstackLogo, {}));
-                createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
+                createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`], "tsqd-open-btn-container")));
                 return _el$2;
               }
             });
@@ -14839,7 +14840,7 @@ var init_Devtools = __esm({
       display: flex;
       flex-direction: column;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
         dragHandle: u`
@@ -15204,7 +15205,8 @@ var init_Devtools = __esm({
         min-height: ${tokens.size[6]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
@@ -15229,7 +15231,7 @@ var init_Devtools = __esm({
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       color: ${t2(colors.gray[700], colors.gray[300])};
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -15237,7 +15239,7 @@ var init_Devtools = __esm({
       text-align: left;
     `,
         detailsHeader: u`
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
@@ -15269,7 +15271,8 @@ var init_Devtools = __esm({
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
@@ -15294,7 +15297,7 @@ var init_Devtools = __esm({
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
@@ -15379,7 +15382,7 @@ var init_Devtools = __esm({
         settingsMenu: u`
       display: flex;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
       flex-direction: column;
       gap: ${size2[0.5]};

package/build/dev.js

@@ -66,7 +66,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/PZY6I5TR.js'));
+        Devtools = lazy(() => import('./Devtools/OWP7E64P.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/dev.jsx

@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/Z62CHOQ7.jsx"));
+        Devtools = lazy(() => import("./Devtools/TETPQZKA.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.cjs

@@ -12741,7 +12741,8 @@ var init_Explorer = __esm({
         entry: u`
       & * {
         font-size: ${font.size.xs};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
       }
       position: relative;
       outline: none;
@@ -12901,7 +12902,7 @@ var init_Devtools = __esm({
     init_icons();
     init_Explorer();
     init_Context();
-    _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
+    _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
     _tmpl$25 = /* @__PURE__ */ template(`<div>`);
     _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
     _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
@@ -13045,7 +13046,7 @@ var init_Devtools = __esm({
                 insert(_el$3, createComponent(TanstackLogo, {}));
                 _el$4.$$click = () => props.setLocalStore("open", "true");
                 insert(_el$4, createComponent(TanstackLogo, {}));
-                createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
+                createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`], "tsqd-open-btn-container")));
                 return _el$2;
               }
             });
@@ -14837,7 +14838,7 @@ var init_Devtools = __esm({
       display: flex;
       flex-direction: column;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
         dragHandle: u`
@@ -15202,7 +15203,8 @@ var init_Devtools = __esm({
         min-height: ${tokens.size[6]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
@@ -15227,7 +15229,7 @@ var init_Devtools = __esm({
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       color: ${t2(colors.gray[700], colors.gray[300])};
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -15235,7 +15237,7 @@ var init_Devtools = __esm({
       text-align: left;
     `,
         detailsHeader: u`
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
@@ -15267,7 +15269,8 @@ var init_Devtools = __esm({
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
@@ -15292,7 +15295,7 @@ var init_Devtools = __esm({
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
@@ -15377,7 +15380,7 @@ var init_Devtools = __esm({
         settingsMenu: u`
       display: flex;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
       flex-direction: column;
       gap: ${size2[0.5]};

package/build/index.js

@@ -66,7 +66,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/SUV2KM2F.js'));
+        Devtools = lazy(() => import('./Devtools/MY47IRH5.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.jsx

@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/VAJS2OS4.jsx"));
+        Devtools = lazy(() => import("./Devtools/OQR5HZUS.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.21.3",
+  "version": "5.21.5",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "superjson": "^1.13.3",
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.9.1",
-    "@tanstack/query-core": "5.21.2"
+    "@tanstack/query-core": "5.21.4"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Devtools.tsx

@@ -252,6 +252,7 @@ const Devtools: Component<DevtoolsPanelProps> = (props) => {
             class={cx(
               styles().devtoolsBtn,
               styles()[`devtoolsBtn-position-${buttonPosition()}`],
+              'tsqd-open-btn-container',
             )}
           >
             <div aria-hidden="true">
@@ -260,6 +261,7 @@ const Devtools: Component<DevtoolsPanelProps> = (props) => {
             <button
               aria-label="Open Tanstack query devtools"
               onClick={() => props.setLocalStore('open', 'true')}
+              class="tsqd-open-btn"
             >
               <TanstackLogo />
             </button>
@@ -2420,7 +2422,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       display: flex;
       flex-direction: column;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
     dragHandle: css`
@@ -2785,7 +2787,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
         min-height: ${tokens.size[6]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         border-bottom: 1px solid ${t(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
@@ -2810,7 +2813,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       flex: 1 1 700px;
       background-color: ${t(colors.gray[50], colors.darkGray[700])};
       color: ${t(colors.gray[700], colors.gray[300])};
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -2818,7 +2821,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       text-align: left;
     `,
     detailsHeader: css`
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
@@ -2850,7 +2853,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
@@ -2875,7 +2879,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
@@ -2960,7 +2964,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
     settingsMenu: css`
       display: flex;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
       flex-direction: column;
       gap: ${size[0.5]};

package/src/Explorer.tsx

@@ -489,7 +489,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
     entry: css`
       & * {
         font-size: ${font.size.xs};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
       }
       position: relative;
       outline: none;