@tanstack/query-devtools 5.13.3 → 5.14.5

package/build/Devtools/{XEIAQO4C.js → 47NOZC6N.js}

@@ -9492,14 +9492,6 @@ var lightStyles = stylesFactory("light");
 var darkStyles = stylesFactory("dark");
 delegateEvents(["click"]);
 
-// src/fonts.ts
-var loadFonts = () => {
-  const link = document.createElement("link");
-  link.href = "https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap";
-  link.rel = "stylesheet";
-  document.head.appendChild(link);
-};
-
 // src/Devtools.tsx
 var _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
 var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
@@ -9574,7 +9566,6 @@ var DevtoolsComponent = (props) => {
 };
 var Devtools_default = DevtoolsComponent;
 var Devtools = (props) => {
-  loadFonts();
   const theme = useTheme();
   const styles = createMemo(() => {
     return theme() === "dark" ? darkStyles2 : lightStyles2;
@@ -10235,6 +10226,9 @@ var ContentView = (props) => {
       const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
       _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
       _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -11251,6 +11245,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/Devtools/{HI6IFUTD.jsx → QLPNQ352.jsx}

@@ -10422,14 +10422,6 @@ var stylesFactory = (theme) => {
 var lightStyles = stylesFactory("light");
 var darkStyles = stylesFactory("dark");
 
-// src/fonts.ts
-var loadFonts = () => {
-  const link = document.createElement("link");
-  link.href = "https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap";
-  link.rel = "stylesheet";
-  document.head.appendChild(link);
-};
-
 // src/Devtools.tsx
 var firstBreakpoint = 1024;
 var secondBreakpoint = 796;
@@ -10465,7 +10457,6 @@ var DevtoolsComponent = (props) => {
 };
 var Devtools_default = DevtoolsComponent;
 var Devtools = (props) => {
-  loadFonts();
   const theme = useTheme();
   const styles = createMemo(() => {
     return theme() === "dark" ? darkStyles2 : lightStyles2;
@@ -10793,6 +10784,10 @@ var ContentView = (props) => {
               height: 50%;
               max-height: 50%;
             `,
+        panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
+            `,
         "tsqd-queries-container"
       )}
       ref={containerRef}
@@ -12058,6 +12053,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/Devtools/{EN5OW4QY.jsx → SEFWYCLN.jsx}

@@ -10423,14 +10423,6 @@ var stylesFactory = (theme) => {
 var lightStyles = stylesFactory("light");
 var darkStyles = stylesFactory("dark");
 
-// src/fonts.ts
-var loadFonts = () => {
-  const link = document.createElement("link");
-  link.href = "https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap";
-  link.rel = "stylesheet";
-  document.head.appendChild(link);
-};
-
 // src/Devtools.tsx
 var firstBreakpoint = 1024;
 var secondBreakpoint = 796;
@@ -10466,7 +10458,6 @@ var DevtoolsComponent = (props) => {
 };
 var Devtools_default = DevtoolsComponent;
 var Devtools = (props) => {
-  loadFonts();
   const theme = useTheme();
   const styles = createMemo(() => {
     return theme() === "dark" ? darkStyles2 : lightStyles2;
@@ -10794,6 +10785,10 @@ var ContentView = (props) => {
               height: 50%;
               max-height: 50%;
             `,
+        panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
+            `,
         "tsqd-queries-container"
       )}
       ref={containerRef}
@@ -12059,6 +12054,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/Devtools/{VWYHBKXD.js → TB2FSY4I.js}

@@ -9493,14 +9493,6 @@ var lightStyles = stylesFactory("light");
 var darkStyles = stylesFactory("dark");
 delegateEvents(["click"]);
 
-// src/fonts.ts
-var loadFonts = () => {
-  const link = document.createElement("link");
-  link.href = "https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap";
-  link.rel = "stylesheet";
-  document.head.appendChild(link);
-};
-
 // src/Devtools.tsx
 var _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
 var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
@@ -9575,7 +9567,6 @@ var DevtoolsComponent = (props) => {
 };
 var Devtools_default = DevtoolsComponent;
 var Devtools = (props) => {
-  loadFonts();
   const theme = useTheme();
   const styles = createMemo(() => {
     return theme() === "dark" ? darkStyles2 : lightStyles2;
@@ -10236,6 +10227,9 @@ var ContentView = (props) => {
       const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
       _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
       _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -11252,6 +11246,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/dev.cjs

@@ -12978,19 +12978,6 @@ var init_Explorer = __esm({
   }
 });
 
-// src/fonts.ts
-var loadFonts;
-var init_fonts = __esm({
-  "src/fonts.ts"() {
-    loadFonts = () => {
-      const link = document.createElement("link");
-      link.href = "https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap";
-      link.rel = "stylesheet";
-      document.head.appendChild(link);
-    };
-  }
-});
-
 // src/Devtools.tsx
 var Devtools_exports = {};
 __export(Devtools_exports, {
@@ -13024,7 +13011,6 @@ var init_Devtools = __esm({
     init_icons();
     init_Explorer();
     init_Context();
-    init_fonts();
     _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
     _tmpl$25 = /* @__PURE__ */ template(`<div>`);
     _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
@@ -13098,7 +13084,6 @@ var init_Devtools = __esm({
     };
     Devtools_default = DevtoolsComponent;
     Devtools = (props) => {
-      loadFonts();
       const theme = useTheme();
       const styles = createMemo(() => {
         return theme() === "dark" ? darkStyles2 : lightStyles2;
@@ -13759,6 +13744,9 @@ var init_Devtools = __esm({
           const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
           _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
           _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -14775,6 +14763,22 @@ var init_Devtools = __esm({
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
         "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/dev.js

@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/VWYHBKXD.js'));
+        Devtools = lazy(() => import('./Devtools/TB2FSY4I.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/EN5OW4QY.jsx"));
+        Devtools = lazy(() => import("./Devtools/SEFWYCLN.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.cjs

@@ -12976,19 +12976,6 @@ var init_Explorer = __esm({
   }
 });
 
-// src/fonts.ts
-var loadFonts;
-var init_fonts = __esm({
-  "src/fonts.ts"() {
-    loadFonts = () => {
-      const link = document.createElement("link");
-      link.href = "https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap";
-      link.rel = "stylesheet";
-      document.head.appendChild(link);
-    };
-  }
-});
-
 // src/Devtools.tsx
 var Devtools_exports = {};
 __export(Devtools_exports, {
@@ -13022,7 +13009,6 @@ var init_Devtools = __esm({
     init_icons();
     init_Explorer();
     init_Context();
-    init_fonts();
     _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
     _tmpl$25 = /* @__PURE__ */ template(`<div>`);
     _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
@@ -13096,7 +13082,6 @@ var init_Devtools = __esm({
     };
     Devtools_default = DevtoolsComponent;
     Devtools = (props) => {
-      loadFonts();
       const theme = useTheme();
       const styles = createMemo(() => {
         return theme() === "dark" ? darkStyles2 : lightStyles2;
@@ -13757,6 +13742,9 @@ var init_Devtools = __esm({
           const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
           _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
           _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -14773,6 +14761,22 @@ var init_Devtools = __esm({
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
         "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/index.js

@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/XEIAQO4C.js'));
+        Devtools = lazy(() => import('./Devtools/47NOZC6N.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/HI6IFUTD.jsx"));
+        Devtools = lazy(() => import("./Devtools/QLPNQ352.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.13.3",
+  "version": "5.14.5",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "superjson": "^1.12.4",
     "tsup-preset-solid": "^2.1.0",
     "vite-plugin-solid": "^2.7.2",
-    "@tanstack/query-core": "5.12.1"
+    "@tanstack/query-core": "5.14.2"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Devtools.tsx

@@ -57,7 +57,6 @@ import {
   useQueryDevtoolsContext,
   useTheme,
 } from './Context'
-import { loadFonts } from './fonts'
 import type {
   DevToolsErrorType,
   DevtoolsButtonPosition,
@@ -138,8 +137,6 @@ const DevtoolsComponent: DevtoolsComponentType = (props) => {
 export default DevtoolsComponent
 
 const Devtools: Component<DevtoolsPanelProps> = (props) => {
-  loadFonts()
-
   const theme = useTheme()
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles : lightStyles
@@ -601,6 +598,12 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
               height: 50%;
               max-height: 50%;
             `,
+          panelWidth() < secondBreakpoint &&
+            !(selectedQueryHash() || selectedMutationId()) &&
+            css`
+              height: 100%;
+              max-height: 100%;
+            `,
           'tsqd-queries-container',
         )}
         ref={containerRef}
@@ -2233,6 +2236,22 @@ const stylesFactory = (theme: 'light' | 'dark') => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     'devtoolsBtn-position-bottom-right': css`
       bottom: 12px;

package/src/fonts.ts

@@ -1,7 +0,0 @@
-export const loadFonts = () => {
-  const link = document.createElement('link')
-  link.href =
-    'https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap'
-  link.rel = 'stylesheet'
-  document.head.appendChild(link)
-}