@tanstack/query-devtools 5.0.0-rc.10 → 5.0.0-rc.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { createContext, delegateEvents, createSignal, createComponent, createMemo, createEffect, insert, Show, createRenderEffect, className, on, onMount, setAttribute, spread, mergeProps, For, onCleanup, isServer, $PROXY, $TRACK, getListener, batch, useContext, Index, template, use, untrack, useTransition, createRoot, splitProps, createUniqueId, Portal, addEventListener, Switch, Match, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/7MNJIXJ6.js';
1
+ import { createContext, delegateEvents, createSignal, createMemo, createComponent, createEffect, insert, Show, createRenderEffect, className, on, onMount, setAttribute, spread, mergeProps, For, onCleanup, isServer, $PROXY, $TRACK, getListener, batch, useContext, Index, template, use, untrack, useTransition, createRoot, splitProps, createUniqueId, Portal, addEventListener, Switch, Match, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/7MNJIXJ6.js';
2
2
 
3
3
  // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
4
4
  var characterMap = {
@@ -9244,6 +9244,19 @@ var sortFns = {
9244
9244
  var convertRemToPixels = (rem) => {
9245
9245
  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
9246
9246
  };
9247
+ var getPreferredColorScheme = () => {
9248
+ const [colorScheme, setColorScheme] = createSignal("dark");
9249
+ onMount(() => {
9250
+ const query = window.matchMedia("(prefers-color-scheme: dark)");
9251
+ setColorScheme(query.matches ? "dark" : "light");
9252
+ const listener = (e2) => {
9253
+ setColorScheme(e2.matches ? "dark" : "light");
9254
+ };
9255
+ query.addEventListener("change", listener);
9256
+ onCleanup(() => query.removeEventListener("change", listener));
9257
+ });
9258
+ return colorScheme;
9259
+ };
9247
9260
  var updateNestedDataByPath = (oldData, updatePath2, value) => {
9248
9261
  if (updatePath2.length === 0) {
9249
9262
  return value;
@@ -9326,21 +9339,23 @@ var deleteNestedDataByPath = (oldData, deletePath) => {
9326
9339
  };
9327
9340
 
9328
9341
  // src/icons/index.tsx
9329
- var _tmpl$ = /* @__PURE__ */ template(`<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 13L9.00007 9M10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9330
- var _tmpl$2 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5" stroke="#d0d5dd" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9331
- var _tmpl$3 = /* @__PURE__ */ template(`<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9332
- var _tmpl$4 = /* @__PURE__ */ template(`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 13.3333V2.66667M8 2.66667L4 6.66667M8 2.66667L12 6.66667" stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9333
- var _tmpl$5 = /* @__PURE__ */ template(`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333" stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9334
- var _tmpl$6 = /* @__PURE__ */ template(`<svg stroke="#d0d5dd" fill="#d0d5dd" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.237 4.237 0 00-6 0zm-4-4l2 2a7.074 7.074 0 0110 0l2-2C15.14 9.14 8.87 9.14 5 13z">`);
9335
- var _tmpl$7 = /* @__PURE__ */ template(`<svg stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z"></path><path d="M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4a9.793 9.793 0 00-4.49-2.56l3.53 3.53.96-.97zM2 3.05L5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24A9.684 9.684 0 005 13v.01L6.99 15a7.042 7.042 0 014.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3a4.237 4.237 0 00-6 0z">`);
9336
- var _tmpl$8 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.3951 19.3711L9.97955 20.6856C10.1533 21.0768 10.4368 21.4093 10.7958 21.6426C11.1547 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8488 21.8759 13.2078 21.6426C13.5667 21.4093 13.8503 21.0768 14.024 20.6856L14.6084 19.3711C14.8165 18.9047 15.1664 18.5159 15.6084 18.26C16.0532 18.0034 16.5678 17.8941 17.0784 17.9478L18.5084 18.1C18.9341 18.145 19.3637 18.0656 19.7451 17.8713C20.1265 17.6771 20.4434 17.3763 20.6573 17.0056C20.8715 16.635 20.9735 16.2103 20.9511 15.7829C20.9286 15.3555 20.7825 14.9438 20.5307 14.5978L19.684 13.4344C19.3825 13.0171 19.2214 12.5148 19.224 12C19.2239 11.4866 19.3865 10.9864 19.6884 10.5711L20.5351 9.40778C20.787 9.06175 20.933 8.65007 20.9555 8.22267C20.978 7.79528 20.8759 7.37054 20.6618 7C20.4479 6.62923 20.131 6.32849 19.7496 6.13423C19.3681 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5722 6.11141 16.0577 6.00212 15.6129 5.74556C15.17 5.48825 14.82 5.09736 14.6129 4.62889L14.024 3.31444C13.8503 2.92317 13.5667 2.59072 13.2078 2.3574C12.8488 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1547 2.12408 10.7958 2.3574C10.4368 2.59072 10.1533 2.92317 9.97955 3.31444L9.3951 4.62889C9.18803 5.09736 8.83798 5.48825 8.3951 5.74556C7.95032 6.00212 7.43577 6.11141 6.9251 6.05778L5.49066 5.90556C5.06499 5.86053 4.6354 5.93997 4.25397 6.13423C3.87255 6.32849 3.55567 6.62923 3.34177 7C3.12759 7.37054 3.02555 7.79528 3.04804 8.22267C3.07052 8.65007 3.21656 9.06175 3.46844 9.40778L4.3151 10.5711C4.61704 10.9864 4.77964 11.4866 4.77955 12C4.77964 12.5134 4.61704 13.0137 4.3151 13.4289L3.46844 14.5922C3.21656 14.9382 3.07052 15.3499 3.04804 15.7773C3.02555 16.2047 3.12759 16.6295 3.34177 17C3.55589 17.3706 3.8728 17.6712 4.25417 17.8654C4.63554 18.0596 5.06502 18.1392 5.49066 18.0944L6.92066 17.9422C7.43133 17.8886 7.94587 17.9979 8.39066 18.2544C8.83519 18.511 9.18687 18.902 9.3951 19.3711Z" stroke="#d0d5dd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15C13.6568 15 15 13.6569 15 12C15 10.3431 13.6568 9 12 9C10.3431 9 8.99998 10.3431 8.99998 12C8.99998 13.6569 10.3431 15 12 15Z" stroke="#d0d5dd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9337
- var _tmpl$9 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="copier" d="M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="#98A2B3">`);
9338
- var _tmpl$10 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke="#12B76A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9339
- var _tmpl$11 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke="#F04438" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9340
- var _tmpl$12 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><rect class="list" width="20" height="20" y="2" x="2" rx="2"></rect><line class="list-item" y1="7" y2="7" x1="6" x2="18"></line><line class="list-item" y2="12" y1="12" x1="6" x2="18"></line><line class="list-item" y1="17" y2="17" x1="6" x2="18">`);
9341
- var _tmpl$13 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="2" class="check">`);
9342
- var _tmpl$14 = /* @__PURE__ */ template(`<svg><g><line transform="rotate(45 7.18873 14.6316)" x1="3.56453" y1="14.63158" x2="10.81294" y2="14.63158" class="check"></line><line transform="rotate(-45 13.9674 11.5826)" x1="6.02012" y1="11.58263" x2="21.91469" y2="11.58263" class="check"></svg>`, false, true);
9343
- var _tmpl$15 = /* @__PURE__ */ template(`<svg version="1.0" viewBox="0 0 633 633"><linearGradient id="a" x1="-666.45" x2="-666.45" y1="163.28" y2="163.99" gradientTransform="matrix(633 0 0 633 422177 -103358)" gradientUnits="userSpaceOnUse"><stop stop-color="#6BDAFF" offset="0"></stop><stop stop-color="#F9FFB5" offset=".32"></stop><stop stop-color="#FFA770" offset=".71"></stop><stop stop-color="#FF7373" offset="1"></stop></linearGradient><circle cx="316.5" cy="316.5" r="316.5" fill="url(#a)"></circle><defs><filter id="am" x="-137.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="b" x="-137.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#am)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#b)"><ellipse cx="89.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ah" x="316.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="k" x="316.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ah)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#k)"><ellipse cx="543.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ae" x="-137.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="j" x="-137.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ae)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#j)"><ellipse cx="89.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="ai" x="316.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="i" x="316.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ai)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#i)"><ellipse cx="543.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="aj" x="-137.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="h" x="-137.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#aj)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#h)"><ellipse cx="89.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="ag" x="316.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="g" x="316.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ag)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#g)"><ellipse cx="543.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="af" x="272.2" y="308" width="176.9" height="129.3" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="f" x="272.2" y="308" width="176.9" height="129.3" maskUnits="userSpaceOnUse"><g filter="url(#af)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#f)"><line x1="436" x2="431" y1="403.2" y2="431.8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="291" x2="280" y1="341.5" y2="403.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="332.9" x2="328.6" y1="384.1" y2="411.2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><linearGradient id="m" x1="-670.75" x2="-671.59" y1="164.4" y2="164.49" gradientTransform="matrix(-184.16 -32.472 -11.461 64.997 -121359 -32126)" gradientUnits="userSpaceOnUse"><stop stop-color="#EE2700" offset="0"></stop><stop stop-color="#FF008E" offset="1"></stop></linearGradient><path d="m344.1 363 97.7 17.2c5.8 2.1 8.2 6.1 7.1 12.1s-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1 0.8-12.8s8.3-4.4 13.7-2.1l55.2 53.6z" clip-rule="evenodd" fill="url(#m)" fill-rule="evenodd"></path><line x1="428.2" x2="429.1" y1="384.5" y2="378" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="395.2" x2="396.1" y1="379.5" y2="373" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="362.2" x2="363.1" y1="373.5" y2="367.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="324.2" x2="328.4" y1="351.3" y2="347.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="303.2" x2="307.4" y1="331.3" y2="327.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line></g><defs><filter id="ak" x="73.2" y="113.8" width="280.6" height="317.4" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="e" x="73.2" y="113.8" width="280.6" height="317.4" maskUnits="userSpaceOnUse"><g filter="url(#ak)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#e)"><linearGradient id="n" x1="-672.16" x2="-672.16" y1="165.03" y2="166.03" gradientTransform="matrix(-100.18 48.861 97.976 200.88 -83342 -93.059)" gradientUnits="userSpaceOnUse"><stop stop-color="#A17500" offset="0"></stop><stop stop-color="#5D2100" offset="1"></stop></linearGradient><path d="m192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.1-3 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6s-10.8-51.9-22.1-99.6l-25.3 4.6" clip-rule="evenodd" fill="url(#n)" fill-rule="evenodd"></path><g stroke="#2F8A00"><linearGradient id="r" x1="-660.23" x2="-660.23" y1="166.72" y2="167.72" gradientTransform="matrix(92.683 4.8573 -2.0259 38.657 61680 -3088.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z" clip-rule="evenodd" fill="url(#r)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="s" x1="-661.36" x2="-661.36" y1="164.18" y2="165.18" gradientTransform="matrix(110 5.7648 -6.3599 121.35 73933 -15933)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.4 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20.2 49.6-53.2 49.6-53.2z" clip-rule="evenodd" fill="url(#s)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="q" x1="-656.79" x2="-656.79" y1="165.15" y2="166.15" gradientTransform="matrix(62.954 3.2993 -3.5023 66.828 42156 -8754.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9c-0.8-21.9 6-38 20.6-48.2s29.8-15.4 45.5-15.3c-6.1 21.4-14.5 35.8-25.2 43.4s-24.4 14.2-40.9 20.1z" clip-rule="evenodd" fill="url(#q)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="p" x1="-663.07" x2="-663.07" y1="165.44" y2="166.44" gradientTransform="matrix(152.47 7.9907 -3.0936 59.029 101884 -4318.7)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c31.9-30 64.1-39.7 96.7-29s50.8 30.4 54.6 59.1c-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z" clip-rule="evenodd" fill="url(#p)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="o" x1="-662.57" x2="-662.57" y1="164.44" y2="165.44" gradientTransform="matrix(136.46 7.1517 -5.2163 99.533 91536 -11442)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c35.8-7.6 65.6-0.2 89.2 22s37.7 49 42.3 80.3c-39.8-9.7-68.3-23.8-85.5-42.4s-32.5-38.5-46-59.9z" clip-rule="evenodd" fill="url(#o)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="l" x1="-656.43" x2="-656.43" y1="163.86" y2="164.86" gradientTransform="matrix(60.866 3.1899 -8.7773 167.48 41560 -25168)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6s-3.6 63.1 8.7 99.6c27.4-40.3 43.2-69.6 47.4-88s5.6-44.1 4-77.2z" clip-rule="evenodd" fill="url(#l)" fill-rule="evenodd" stroke-width="13"></path><path d="m196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4s-9.5 33-11.1 45.1" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m194.9 185.7c-24.4 1.7-43.8 9-58.1 21.8s-24.7 25.4-31.3 37.8" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m204.5 176.4c29.7-6.7 52-8.4 67-5.1s26.9 8.6 35.8 15.9" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m196.5 181.4c20.3 9.9 38.2 20.5 53.9 31.9s27.4 22.1 35.1 32" fill="none" stroke-linecap="round" stroke-width="8"></path></g></g><defs><filter id="al" x="50.5" y="399" width="532" height="633" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="d" x="50.5" y="399" width="532" height="633" maskUnits="userSpaceOnUse"><g filter="url(#al)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#d)"><linearGradient id="u" x1="-666.06" x2="-666.23" y1="163.36" y2="163.75" gradientTransform="matrix(532 0 0 633 354760 -102959)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF400" offset="0"></stop><stop stop-color="#3C8700" offset="1"></stop></linearGradient><ellipse cx="316.5" cy="715.5" rx="266" ry="316.5" fill="url(#u)"></ellipse></g><defs><filter id="ad" x="391" y="-24" width="288" height="283" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="c" x="391" y="-24" width="288" height="283" maskUnits="userSpaceOnUse"><g filter="url(#ad)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#c)"><linearGradient id="t" x1="-664.56" x2="-664.56" y1="163.79" y2="164.79" gradientTransform="matrix(227 0 0 227 151421 -37204)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDF00" offset="0"></stop><stop stop-color="#FF9D00" offset="1"></stop></linearGradient><circle cx="565.5" cy="89.5" r="113.5" fill="url(#t)"></circle><linearGradient id="v" x1="-644.5" x2="-645.77" y1="342" y2="342" gradientTransform="matrix(30 0 0 1 19770 -253)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="427" x2="397" y1="89" y2="89" fill="none" stroke="url(#v)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="aa" x1="-641.56" x2="-642.83" y1="196.02" y2="196.07" gradientTransform="matrix(26.5 0 0 5.5 17439 -1025.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="430.5" x2="404" y1="55.5" y2="50" fill="none" stroke="url(#aa)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="w" x1="-643.73" x2="-645" y1="185.83" y2="185.9" gradientTransform="matrix(29 0 0 8 19107 -1361)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="431" x2="402" y1="122" y2="130" fill="none" stroke="url(#w)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ac" x1="-638.94" x2="-640.22" y1="177.09" y2="177.39" gradientTransform="matrix(24 0 0 13 15783 -2145)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="442" x2="418" y1="153" y2="166" fill="none" stroke="url(#ac)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ab" x1="-633.42" x2="-634.7" y1="172.41" y2="173.31" gradientTransform="matrix(20 0 0 19 13137 -3096)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="464" x2="444" y1="180" y2="199" fill="none" stroke="url(#ab)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="y" x1="-619.05" x2="-619.52" y1="170.82" y2="171.82" gradientTransform="matrix(13.83 0 0 22.85 9050 -3703.4)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="491.4" x2="477.5" y1="203" y2="225.9" fill="none" stroke="url(#y)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="x" x1="-578.5" x2="-578.63" y1="170.31" y2="171.31" gradientTransform="matrix(7.5 0 0 24.5 4860 -3953)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="524.5" x2="517" y1="219.5" y2="244" fill="none" stroke="url(#x)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="z" x1="666.5" x2="666.5" y1="170.31" y2="171.31" gradientTransform="matrix(.5 0 0 24.5 231.5 -3944)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="564.5" x2="565" y1="228.5" y2="253" fill="none" stroke="url(#z)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12">`);
9342
+ var _tmpl$ = /* @__PURE__ */ template(`<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 13L9.00007 9M10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9343
+ var _tmpl$2 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9344
+ var _tmpl$3 = /* @__PURE__ */ template(`<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9345
+ var _tmpl$4 = /* @__PURE__ */ template(`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 13.3333V2.66667M8 2.66667L4 6.66667M8 2.66667L12 6.66667" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9346
+ var _tmpl$5 = /* @__PURE__ */ template(`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9347
+ var _tmpl$6 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="12" width="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2v2m0 16v2M4 12H2m4.314-5.686L4.9 4.9m12.786 1.414L19.1 4.9M6.314 17.69 4.9 19.104m12.786-1.414 1.414 1.414M22 12h-2m-3 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9348
+ var _tmpl$7 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="12" width="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 15.844a10.424 10.424 0 0 1-4.306.925c-5.779 0-10.463-4.684-10.463-10.462 0-1.536.33-2.994.925-4.307A10.464 10.464 0 0 0 2 11.538C2 17.316 6.684 22 12.462 22c4.243 0 7.896-2.526 9.538-6.156Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9349
+ var _tmpl$8 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="12" width="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 21h8m-4-4v4m-5.2-4h10.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C22 14.72 22 13.88 22 12.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C19.72 3 18.88 3 17.2 3H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 5.28 2 6.12 2 7.8v4.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 17 5.12 17 6.8 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9350
+ var _tmpl$9 = /* @__PURE__ */ template(`<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.237 4.237 0 00-6 0zm-4-4l2 2a7.074 7.074 0 0110 0l2-2C15.14 9.14 8.87 9.14 5 13z">`);
9351
+ var _tmpl$10 = /* @__PURE__ */ template(`<svg stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z"></path><path d="M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4a9.793 9.793 0 00-4.49-2.56l3.53 3.53.96-.97zM2 3.05L5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24A9.684 9.684 0 005 13v.01L6.99 15a7.042 7.042 0 014.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3a4.237 4.237 0 00-6 0z">`);
9352
+ var _tmpl$11 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.3951 19.3711L9.97955 20.6856C10.1533 21.0768 10.4368 21.4093 10.7958 21.6426C11.1547 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8488 21.8759 13.2078 21.6426C13.5667 21.4093 13.8503 21.0768 14.024 20.6856L14.6084 19.3711C14.8165 18.9047 15.1664 18.5159 15.6084 18.26C16.0532 18.0034 16.5678 17.8941 17.0784 17.9478L18.5084 18.1C18.9341 18.145 19.3637 18.0656 19.7451 17.8713C20.1265 17.6771 20.4434 17.3763 20.6573 17.0056C20.8715 16.635 20.9735 16.2103 20.9511 15.7829C20.9286 15.3555 20.7825 14.9438 20.5307 14.5978L19.684 13.4344C19.3825 13.0171 19.2214 12.5148 19.224 12C19.2239 11.4866 19.3865 10.9864 19.6884 10.5711L20.5351 9.40778C20.787 9.06175 20.933 8.65007 20.9555 8.22267C20.978 7.79528 20.8759 7.37054 20.6618 7C20.4479 6.62923 20.131 6.32849 19.7496 6.13423C19.3681 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5722 6.11141 16.0577 6.00212 15.6129 5.74556C15.17 5.48825 14.82 5.09736 14.6129 4.62889L14.024 3.31444C13.8503 2.92317 13.5667 2.59072 13.2078 2.3574C12.8488 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1547 2.12408 10.7958 2.3574C10.4368 2.59072 10.1533 2.92317 9.97955 3.31444L9.3951 4.62889C9.18803 5.09736 8.83798 5.48825 8.3951 5.74556C7.95032 6.00212 7.43577 6.11141 6.9251 6.05778L5.49066 5.90556C5.06499 5.86053 4.6354 5.93997 4.25397 6.13423C3.87255 6.32849 3.55567 6.62923 3.34177 7C3.12759 7.37054 3.02555 7.79528 3.04804 8.22267C3.07052 8.65007 3.21656 9.06175 3.46844 9.40778L4.3151 10.5711C4.61704 10.9864 4.77964 11.4866 4.77955 12C4.77964 12.5134 4.61704 13.0137 4.3151 13.4289L3.46844 14.5922C3.21656 14.9382 3.07052 15.3499 3.04804 15.7773C3.02555 16.2047 3.12759 16.6295 3.34177 17C3.55589 17.3706 3.8728 17.6712 4.25417 17.8654C4.63554 18.0596 5.06502 18.1392 5.49066 18.0944L6.92066 17.9422C7.43133 17.8886 7.94587 17.9979 8.39066 18.2544C8.83519 18.511 9.18687 18.902 9.3951 19.3711Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15C13.6568 15 15 13.6569 15 12C15 10.3431 13.6568 9 12 9C10.3431 9 8.99998 10.3431 8.99998 12C8.99998 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9353
+ var _tmpl$12 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="copier" d="M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor">`);
9354
+ var _tmpl$13 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9355
+ var _tmpl$14 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke="#F04438" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9356
+ var _tmpl$15 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><rect class="list" width="20" height="20" y="2" x="2" rx="2"></rect><line class="list-item" y1="7" y2="7" x1="6" x2="18"></line><line class="list-item" y2="12" y1="12" x1="6" x2="18"></line><line class="list-item" y1="17" y2="17" x1="6" x2="18">`);
9357
+ var _tmpl$16 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="20" width="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9358
+ var _tmpl$17 = /* @__PURE__ */ template(`<svg version="1.0" viewBox="0 0 633 633"><linearGradient id="a" x1="-666.45" x2="-666.45" y1="163.28" y2="163.99" gradientTransform="matrix(633 0 0 633 422177 -103358)" gradientUnits="userSpaceOnUse"><stop stop-color="#6BDAFF" offset="0"></stop><stop stop-color="#F9FFB5" offset=".32"></stop><stop stop-color="#FFA770" offset=".71"></stop><stop stop-color="#FF7373" offset="1"></stop></linearGradient><circle cx="316.5" cy="316.5" r="316.5" fill="url(#a)"></circle><defs><filter id="am" x="-137.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="b" x="-137.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#am)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#b)"><ellipse cx="89.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ah" x="316.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="k" x="316.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ah)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#k)"><ellipse cx="543.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ae" x="-137.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="j" x="-137.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ae)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#j)"><ellipse cx="89.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="ai" x="316.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="i" x="316.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ai)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#i)"><ellipse cx="543.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="aj" x="-137.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="h" x="-137.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#aj)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#h)"><ellipse cx="89.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="ag" x="316.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="g" x="316.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ag)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#g)"><ellipse cx="543.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="af" x="272.2" y="308" width="176.9" height="129.3" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="f" x="272.2" y="308" width="176.9" height="129.3" maskUnits="userSpaceOnUse"><g filter="url(#af)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#f)"><line x1="436" x2="431" y1="403.2" y2="431.8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="291" x2="280" y1="341.5" y2="403.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="332.9" x2="328.6" y1="384.1" y2="411.2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><linearGradient id="m" x1="-670.75" x2="-671.59" y1="164.4" y2="164.49" gradientTransform="matrix(-184.16 -32.472 -11.461 64.997 -121359 -32126)" gradientUnits="userSpaceOnUse"><stop stop-color="#EE2700" offset="0"></stop><stop stop-color="#FF008E" offset="1"></stop></linearGradient><path d="m344.1 363 97.7 17.2c5.8 2.1 8.2 6.1 7.1 12.1s-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1 0.8-12.8s8.3-4.4 13.7-2.1l55.2 53.6z" clip-rule="evenodd" fill="url(#m)" fill-rule="evenodd"></path><line x1="428.2" x2="429.1" y1="384.5" y2="378" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="395.2" x2="396.1" y1="379.5" y2="373" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="362.2" x2="363.1" y1="373.5" y2="367.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="324.2" x2="328.4" y1="351.3" y2="347.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="303.2" x2="307.4" y1="331.3" y2="327.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line></g><defs><filter id="ak" x="73.2" y="113.8" width="280.6" height="317.4" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="e" x="73.2" y="113.8" width="280.6" height="317.4" maskUnits="userSpaceOnUse"><g filter="url(#ak)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#e)"><linearGradient id="n" x1="-672.16" x2="-672.16" y1="165.03" y2="166.03" gradientTransform="matrix(-100.18 48.861 97.976 200.88 -83342 -93.059)" gradientUnits="userSpaceOnUse"><stop stop-color="#A17500" offset="0"></stop><stop stop-color="#5D2100" offset="1"></stop></linearGradient><path d="m192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.1-3 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6s-10.8-51.9-22.1-99.6l-25.3 4.6" clip-rule="evenodd" fill="url(#n)" fill-rule="evenodd"></path><g stroke="#2F8A00"><linearGradient id="r" x1="-660.23" x2="-660.23" y1="166.72" y2="167.72" gradientTransform="matrix(92.683 4.8573 -2.0259 38.657 61680 -3088.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z" clip-rule="evenodd" fill="url(#r)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="s" x1="-661.36" x2="-661.36" y1="164.18" y2="165.18" gradientTransform="matrix(110 5.7648 -6.3599 121.35 73933 -15933)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.4 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20.2 49.6-53.2 49.6-53.2z" clip-rule="evenodd" fill="url(#s)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="q" x1="-656.79" x2="-656.79" y1="165.15" y2="166.15" gradientTransform="matrix(62.954 3.2993 -3.5023 66.828 42156 -8754.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9c-0.8-21.9 6-38 20.6-48.2s29.8-15.4 45.5-15.3c-6.1 21.4-14.5 35.8-25.2 43.4s-24.4 14.2-40.9 20.1z" clip-rule="evenodd" fill="url(#q)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="p" x1="-663.07" x2="-663.07" y1="165.44" y2="166.44" gradientTransform="matrix(152.47 7.9907 -3.0936 59.029 101884 -4318.7)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c31.9-30 64.1-39.7 96.7-29s50.8 30.4 54.6 59.1c-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z" clip-rule="evenodd" fill="url(#p)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="o" x1="-662.57" x2="-662.57" y1="164.44" y2="165.44" gradientTransform="matrix(136.46 7.1517 -5.2163 99.533 91536 -11442)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c35.8-7.6 65.6-0.2 89.2 22s37.7 49 42.3 80.3c-39.8-9.7-68.3-23.8-85.5-42.4s-32.5-38.5-46-59.9z" clip-rule="evenodd" fill="url(#o)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="l" x1="-656.43" x2="-656.43" y1="163.86" y2="164.86" gradientTransform="matrix(60.866 3.1899 -8.7773 167.48 41560 -25168)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6s-3.6 63.1 8.7 99.6c27.4-40.3 43.2-69.6 47.4-88s5.6-44.1 4-77.2z" clip-rule="evenodd" fill="url(#l)" fill-rule="evenodd" stroke-width="13"></path><path d="m196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4s-9.5 33-11.1 45.1" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m194.9 185.7c-24.4 1.7-43.8 9-58.1 21.8s-24.7 25.4-31.3 37.8" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m204.5 176.4c29.7-6.7 52-8.4 67-5.1s26.9 8.6 35.8 15.9" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m196.5 181.4c20.3 9.9 38.2 20.5 53.9 31.9s27.4 22.1 35.1 32" fill="none" stroke-linecap="round" stroke-width="8"></path></g></g><defs><filter id="al" x="50.5" y="399" width="532" height="633" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="d" x="50.5" y="399" width="532" height="633" maskUnits="userSpaceOnUse"><g filter="url(#al)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#d)"><linearGradient id="u" x1="-666.06" x2="-666.23" y1="163.36" y2="163.75" gradientTransform="matrix(532 0 0 633 354760 -102959)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF400" offset="0"></stop><stop stop-color="#3C8700" offset="1"></stop></linearGradient><ellipse cx="316.5" cy="715.5" rx="266" ry="316.5" fill="url(#u)"></ellipse></g><defs><filter id="ad" x="391" y="-24" width="288" height="283" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="c" x="391" y="-24" width="288" height="283" maskUnits="userSpaceOnUse"><g filter="url(#ad)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#c)"><linearGradient id="t" x1="-664.56" x2="-664.56" y1="163.79" y2="164.79" gradientTransform="matrix(227 0 0 227 151421 -37204)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDF00" offset="0"></stop><stop stop-color="#FF9D00" offset="1"></stop></linearGradient><circle cx="565.5" cy="89.5" r="113.5" fill="url(#t)"></circle><linearGradient id="v" x1="-644.5" x2="-645.77" y1="342" y2="342" gradientTransform="matrix(30 0 0 1 19770 -253)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="427" x2="397" y1="89" y2="89" fill="none" stroke="url(#v)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="aa" x1="-641.56" x2="-642.83" y1="196.02" y2="196.07" gradientTransform="matrix(26.5 0 0 5.5 17439 -1025.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="430.5" x2="404" y1="55.5" y2="50" fill="none" stroke="url(#aa)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="w" x1="-643.73" x2="-645" y1="185.83" y2="185.9" gradientTransform="matrix(29 0 0 8 19107 -1361)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="431" x2="402" y1="122" y2="130" fill="none" stroke="url(#w)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ac" x1="-638.94" x2="-640.22" y1="177.09" y2="177.39" gradientTransform="matrix(24 0 0 13 15783 -2145)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="442" x2="418" y1="153" y2="166" fill="none" stroke="url(#ac)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ab" x1="-633.42" x2="-634.7" y1="172.41" y2="173.31" gradientTransform="matrix(20 0 0 19 13137 -3096)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="464" x2="444" y1="180" y2="199" fill="none" stroke="url(#ab)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="y" x1="-619.05" x2="-619.52" y1="170.82" y2="171.82" gradientTransform="matrix(13.83 0 0 22.85 9050 -3703.4)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="491.4" x2="477.5" y1="203" y2="225.9" fill="none" stroke="url(#y)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="x" x1="-578.5" x2="-578.63" y1="170.31" y2="171.31" gradientTransform="matrix(7.5 0 0 24.5 4860 -3953)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="524.5" x2="517" y1="219.5" y2="244" fill="none" stroke="url(#x)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="z" x1="666.5" x2="666.5" y1="170.31" y2="171.31" gradientTransform="matrix(.5 0 0 24.5 231.5 -3944)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="564.5" x2="565" y1="228.5" y2="253" fill="none" stroke="url(#z)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12">`);
9344
9359
  function Search() {
9345
9360
  return _tmpl$();
9346
9361
  }
@@ -9370,52 +9385,64 @@ function ArrowRight() {
9370
9385
  return _el$7;
9371
9386
  })();
9372
9387
  }
9373
- function Wifi() {
9388
+ function Sun() {
9374
9389
  return _tmpl$6();
9375
9390
  }
9376
- function Offline() {
9377
- return (() => {
9378
- const _el$9 = _tmpl$7();
9379
- createRenderEffect((_p$) => {
9380
- const _v$ = tokens.colors.yellow[500], _v$2 = tokens.colors.yellow[500];
9381
- _v$ !== _p$._v$ && setAttribute(_el$9, "stroke", _p$._v$ = _v$);
9382
- _v$2 !== _p$._v$2 && setAttribute(_el$9, "fill", _p$._v$2 = _v$2);
9383
- return _p$;
9384
- }, {
9385
- _v$: void 0,
9386
- _v$2: void 0
9387
- });
9388
- return _el$9;
9389
- })();
9391
+ function Moon() {
9392
+ return _tmpl$7();
9390
9393
  }
9391
- function Settings() {
9394
+ function Monitor() {
9392
9395
  return _tmpl$8();
9393
9396
  }
9394
- function Copier() {
9397
+ function Wifi() {
9395
9398
  return _tmpl$9();
9396
9399
  }
9397
- function CopiedCopier() {
9400
+ function Offline() {
9398
9401
  return _tmpl$10();
9399
9402
  }
9400
- function ErrorCopier() {
9403
+ function Settings() {
9401
9404
  return _tmpl$11();
9402
9405
  }
9403
- function List() {
9406
+ function Copier() {
9404
9407
  return _tmpl$12();
9405
9408
  }
9406
- function Check(props) {
9409
+ function CopiedCopier(props) {
9407
9410
  return (() => {
9408
- const _el$15 = _tmpl$13(); _el$15.firstChild;
9409
- insert(_el$15, (() => {
9410
- const _c$ = createMemo(() => !!props.checked);
9411
- return () => _c$() && _tmpl$14();
9412
- })(), null);
9411
+ const _el$15 = _tmpl$13(), _el$16 = _el$15.firstChild;
9412
+ createRenderEffect(() => setAttribute(_el$16, "stroke", props.theme === "dark" ? "#12B76A" : "#027A48"));
9413
9413
  return _el$15;
9414
9414
  })();
9415
9415
  }
9416
- function TanstackLogo() {
9416
+ function ErrorCopier() {
9417
+ return _tmpl$14();
9418
+ }
9419
+ function List() {
9417
9420
  return _tmpl$15();
9418
9421
  }
9422
+ function Check(props) {
9423
+ return [createComponent(Show, {
9424
+ get when() {
9425
+ return props.checked;
9426
+ },
9427
+ get children() {
9428
+ const _el$19 = _tmpl$13(), _el$20 = _el$19.firstChild;
9429
+ createRenderEffect(() => setAttribute(_el$20, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
9430
+ return _el$19;
9431
+ }
9432
+ }), createComponent(Show, {
9433
+ get when() {
9434
+ return !props.checked;
9435
+ },
9436
+ get children() {
9437
+ const _el$21 = _tmpl$16(), _el$22 = _el$21.firstChild;
9438
+ createRenderEffect(() => setAttribute(_el$22, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
9439
+ return _el$21;
9440
+ }
9441
+ })];
9442
+ }
9443
+ function TanstackLogo() {
9444
+ return _tmpl$17();
9445
+ }
9419
9446
 
9420
9447
  // src/Context.ts
9421
9448
  var QueryDevtoolsContext = createContext({
@@ -9427,9 +9454,15 @@ var QueryDevtoolsContext = createContext({
9427
9454
  function useQueryDevtoolsContext() {
9428
9455
  return useContext(QueryDevtoolsContext);
9429
9456
  }
9457
+ var ThemeContext = createContext(
9458
+ () => "dark"
9459
+ );
9460
+ function useTheme() {
9461
+ return useContext(ThemeContext);
9462
+ }
9430
9463
 
9431
9464
  // src/Explorer.tsx
9432
- var _tmpl$16 = /* @__PURE__ */ template(`<span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9465
+ var _tmpl$18 = /* @__PURE__ */ template(`<span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9433
9466
  var _tmpl$22 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
9434
9467
  var _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items" aria-label="Remove all items">`);
9435
9468
  var _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item" aria-label="Delete item">`);
@@ -9452,10 +9485,13 @@ function chunkArray(array, size2) {
9452
9485
  return result;
9453
9486
  }
9454
9487
  var Expander = (props) => {
9455
- const styles = getStyles();
9488
+ const theme = useTheme();
9489
+ const styles = createMemo(() => {
9490
+ return theme() === "dark" ? darkStyles : lightStyles;
9491
+ });
9456
9492
  return (() => {
9457
- const _el$ = _tmpl$16();
9458
- createRenderEffect(() => className(_el$, clsx(styles.expander, u`
9493
+ const _el$ = _tmpl$18();
9494
+ createRenderEffect(() => className(_el$, clsx(styles().expander, u`
9459
9495
  transform: rotate(${props.expanded ? 90 : 0}deg);
9460
9496
  `, props.expanded && u`
9461
9497
  & svg {
@@ -9466,7 +9502,10 @@ var Expander = (props) => {
9466
9502
  })();
9467
9503
  };
9468
9504
  var CopyButton = (props) => {
9469
- const styles = getStyles();
9505
+ const theme = useTheme();
9506
+ const styles = createMemo(() => {
9507
+ return theme() === "dark" ? darkStyles : lightStyles;
9508
+ });
9470
9509
  const [copyState, setCopyState] = createSignal("NoCopy");
9471
9510
  return (() => {
9472
9511
  const _el$2 = _tmpl$22();
@@ -9497,7 +9536,11 @@ var CopyButton = (props) => {
9497
9536
  return copyState() === "SuccessCopy";
9498
9537
  },
9499
9538
  get children() {
9500
- return createComponent(CopiedCopier, {});
9539
+ return createComponent(CopiedCopier, {
9540
+ get theme() {
9541
+ return theme();
9542
+ }
9543
+ });
9501
9544
  }
9502
9545
  }), createComponent(Match, {
9503
9546
  get when() {
@@ -9510,7 +9553,7 @@ var CopyButton = (props) => {
9510
9553
  }
9511
9554
  }));
9512
9555
  createRenderEffect((_p$) => {
9513
- const _v$ = styles.actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
9556
+ const _v$ = styles().actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
9514
9557
  _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
9515
9558
  _v$2 !== _p$._v$2 && setAttribute(_el$2, "aria-label", _p$._v$2 = _v$2);
9516
9559
  return _p$;
@@ -9522,7 +9565,10 @@ var CopyButton = (props) => {
9522
9565
  })();
9523
9566
  };
9524
9567
  var ClearArrayButton = (props) => {
9525
- const styles = getStyles();
9568
+ const theme = useTheme();
9569
+ const styles = createMemo(() => {
9570
+ return theme() === "dark" ? darkStyles : lightStyles;
9571
+ });
9526
9572
  const queryClient = useQueryDevtoolsContext().client;
9527
9573
  return (() => {
9528
9574
  const _el$3 = _tmpl$32();
@@ -9532,12 +9578,15 @@ var ClearArrayButton = (props) => {
9532
9578
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
9533
9579
  };
9534
9580
  insert(_el$3, createComponent(List, {}));
9535
- createRenderEffect(() => className(_el$3, styles.actionButton));
9581
+ createRenderEffect(() => className(_el$3, styles().actionButton));
9536
9582
  return _el$3;
9537
9583
  })();
9538
9584
  };
9539
9585
  var DeleteItemButton = (props) => {
9540
- const styles = getStyles();
9586
+ const theme = useTheme();
9587
+ const styles = createMemo(() => {
9588
+ return theme() === "dark" ? darkStyles : lightStyles;
9589
+ });
9541
9590
  const queryClient = useQueryDevtoolsContext().client;
9542
9591
  return (() => {
9543
9592
  const _el$4 = _tmpl$42();
@@ -9547,12 +9596,15 @@ var DeleteItemButton = (props) => {
9547
9596
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
9548
9597
  };
9549
9598
  insert(_el$4, createComponent(Trash, {}));
9550
- createRenderEffect(() => className(_el$4, clsx(styles.actionButton)));
9599
+ createRenderEffect(() => className(_el$4, clsx(styles().actionButton)));
9551
9600
  return _el$4;
9552
9601
  })();
9553
9602
  };
9554
9603
  var ToggleValueButton = (props) => {
9555
- const styles = getStyles();
9604
+ const theme = useTheme();
9605
+ const styles = createMemo(() => {
9606
+ return theme() === "dark" ? darkStyles : lightStyles;
9607
+ });
9556
9608
  const queryClient = useQueryDevtoolsContext().client;
9557
9609
  return (() => {
9558
9610
  const _el$5 = _tmpl$52();
@@ -9562,11 +9614,17 @@ var ToggleValueButton = (props) => {
9562
9614
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
9563
9615
  };
9564
9616
  insert(_el$5, createComponent(Check, {
9617
+ get theme() {
9618
+ return theme();
9619
+ },
9565
9620
  get checked() {
9566
9621
  return props.value;
9567
9622
  }
9568
9623
  }));
9569
- createRenderEffect(() => className(_el$5, clsx(styles.actionButton)));
9624
+ createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
9625
+ width: ${tokens.size[3.5]};
9626
+ height: ${tokens.size[3.5]};
9627
+ `)));
9570
9628
  return _el$5;
9571
9629
  })();
9572
9630
  };
@@ -9574,7 +9632,10 @@ function isIterable(x) {
9574
9632
  return Symbol.iterator in x;
9575
9633
  }
9576
9634
  function Explorer(props) {
9577
- const styles = getStyles();
9635
+ const theme = useTheme();
9636
+ const styles = createMemo(() => {
9637
+ return theme() === "dark" ? darkStyles : lightStyles;
9638
+ });
9578
9639
  const queryClient = useQueryDevtoolsContext().client;
9579
9640
  const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
9580
9641
  const toggleExpanded = () => setExpanded((old) => !old);
@@ -9672,12 +9733,12 @@ function Explorer(props) {
9672
9733
  });
9673
9734
  }
9674
9735
  }), null);
9675
- createRenderEffect(() => className(_el$14, styles.actions));
9736
+ createRenderEffect(() => className(_el$14, styles().actions));
9676
9737
  return _el$14;
9677
9738
  }
9678
9739
  }), null);
9679
9740
  createRenderEffect((_p$) => {
9680
- const _v$3 = styles.expanderButtonContainer, _v$4 = styles.expanderButton, _v$5 = styles.info;
9741
+ const _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
9681
9742
  _v$3 !== _p$._v$3 && className(_el$7, _p$._v$3 = _v$3);
9682
9743
  _v$4 !== _p$._v$4 && className(_el$8, _p$._v$4 = _v$4);
9683
9744
  _v$5 !== _p$._v$5 && className(_el$12, _p$._v$5 = _v$5);
@@ -9730,7 +9791,7 @@ function Explorer(props) {
9730
9791
  });
9731
9792
  }
9732
9793
  }));
9733
- createRenderEffect(() => className(_el$15, styles.subEntry));
9794
+ createRenderEffect(() => className(_el$15, styles().subEntry));
9734
9795
  return _el$15;
9735
9796
  }
9736
9797
  }), createComponent(Show, {
@@ -9785,12 +9846,12 @@ function Explorer(props) {
9785
9846
  }
9786
9847
  })
9787
9848
  }));
9788
- createRenderEffect(() => className(_el$31, styles.subEntry));
9849
+ createRenderEffect(() => className(_el$31, styles().subEntry));
9789
9850
  return _el$31;
9790
9851
  }
9791
9852
  }), null);
9792
9853
  createRenderEffect((_p$) => {
9793
- const _v$10 = styles.entry, _v$11 = styles.expanderButton;
9854
+ const _v$10 = styles().entry, _v$11 = styles().expanderButton;
9794
9855
  _v$10 !== _p$._v$10 && className(_el$23, _p$._v$10 = _v$10);
9795
9856
  _v$11 !== _p$._v$11 && className(_el$24, _p$._v$11 = _v$11);
9796
9857
  return _p$;
@@ -9801,7 +9862,7 @@ function Explorer(props) {
9801
9862
  return _el$22;
9802
9863
  })()
9803
9864
  }));
9804
- createRenderEffect(() => className(_el$16, styles.subEntry));
9865
+ createRenderEffect(() => className(_el$16, styles().subEntry));
9805
9866
  return _el$16;
9806
9867
  }
9807
9868
  })];
@@ -9824,7 +9885,7 @@ function Explorer(props) {
9824
9885
  return (() => {
9825
9886
  const _el$32 = _tmpl$92();
9826
9887
  insert(_el$32, () => displayValue(props.value));
9827
- createRenderEffect(() => className(_el$32, styles.value));
9888
+ createRenderEffect(() => className(_el$32, styles().value));
9828
9889
  return _el$32;
9829
9890
  })();
9830
9891
  },
@@ -9841,7 +9902,7 @@ function Explorer(props) {
9841
9902
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
9842
9903
  });
9843
9904
  createRenderEffect((_p$) => {
9844
- const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles.value, styles.editableInput);
9905
+ const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles().value, styles().editableInput);
9845
9906
  _v$6 !== _p$._v$6 && setAttribute(_el$20, "type", _p$._v$6 = _v$6);
9846
9907
  _v$7 !== _p$._v$7 && className(_el$20, _p$._v$7 = _v$7);
9847
9908
  return _p$;
@@ -9868,7 +9929,7 @@ function Explorer(props) {
9868
9929
  }
9869
9930
  }), null);
9870
9931
  insert(_el$21, () => displayValue(props.value), null);
9871
- createRenderEffect(() => className(_el$21, clsx(styles.value, styles.actions, styles.editableInput)));
9932
+ createRenderEffect(() => className(_el$21, clsx(styles().value, styles().actions, styles().editableInput)));
9872
9933
  return _el$21;
9873
9934
  }
9874
9935
  })];
@@ -9888,7 +9949,7 @@ function Explorer(props) {
9888
9949
  }
9889
9950
  }), null);
9890
9951
  createRenderEffect((_p$) => {
9891
- const _v$8 = styles.row, _v$9 = styles.label;
9952
+ const _v$8 = styles().row, _v$9 = styles().label;
9892
9953
  _v$8 !== _p$._v$8 && className(_el$17, _p$._v$8 = _v$8);
9893
9954
  _v$9 !== _p$._v$9 && className(_el$18, _p$._v$9 = _v$9);
9894
9955
  return _p$;
@@ -9899,17 +9960,18 @@ function Explorer(props) {
9899
9960
  return _el$17;
9900
9961
  }
9901
9962
  }), null);
9902
- createRenderEffect(() => className(_el$6, styles.entry));
9963
+ createRenderEffect(() => className(_el$6, styles().entry));
9903
9964
  return _el$6;
9904
9965
  })();
9905
9966
  }
9906
- var getStyles = () => {
9967
+ var stylesFactory = (theme) => {
9907
9968
  const {
9908
9969
  colors,
9909
9970
  font,
9910
9971
  size: size2,
9911
9972
  border
9912
9973
  } = tokens;
9974
+ const t2 = (light, dark) => theme === "light" ? light : dark;
9913
9975
  return {
9914
9976
  entry: u`
9915
9977
  & * {
@@ -9923,7 +9985,7 @@ var getStyles = () => {
9923
9985
  subEntry: u`
9924
9986
  margin: 0 0 0 0.5em;
9925
9987
  padding-left: 0.75em;
9926
- border-left: 2px solid ${colors.darkGray[400]};
9988
+ border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
9927
9989
  /* outline: 1px solid ${colors.teal[400]}; */
9928
9990
  `,
9929
9991
  expander: u`
@@ -9972,16 +10034,16 @@ var getStyles = () => {
9972
10034
  }
9973
10035
  `,
9974
10036
  info: u`
9975
- color: ${colors.gray[500]};
10037
+ color: ${t2(colors.gray[500], colors.gray[500])};
9976
10038
  font-size: ${font.size.xs};
9977
10039
  margin-left: ${size2[1]};
9978
10040
  /* outline: 1px solid ${colors.yellow[400]}; */
9979
10041
  `,
9980
10042
  label: u`
9981
- color: ${colors.gray[300]};
10043
+ color: ${t2(colors.gray[700], colors.gray[300])};
9982
10044
  `,
9983
10045
  value: u`
9984
- color: ${colors.purple[400]};
10046
+ color: ${t2(colors.purple[600], colors.purple[400])};
9985
10047
  flex-grow: 1;
9986
10048
  `,
9987
10049
  actions: u`
@@ -9999,16 +10061,18 @@ var getStyles = () => {
9999
10061
  `,
10000
10062
  editableInput: u`
10001
10063
  border: none;
10002
- padding: ${size2[0.5]} ${size2[1]};
10064
+ padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
10003
10065
  flex-grow: 1;
10004
- background-color: ${colors.gray[900]};
10066
+ border-radius: ${border.radius.xs};
10067
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
10005
10068
 
10006
10069
  &:hover {
10007
- background-color: ${colors.gray[800]};
10070
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
10008
10071
  }
10009
10072
  `,
10010
10073
  actionButton: u`
10011
10074
  background-color: transparent;
10075
+ color: ${t2(colors.gray[500], colors.gray[500])};
10012
10076
  border: none;
10013
10077
  display: inline-flex;
10014
10078
  padding: 0px;
@@ -10021,15 +10085,7 @@ var getStyles = () => {
10021
10085
  z-index: 1;
10022
10086
 
10023
10087
  &:hover svg {
10024
- .copier,
10025
- .check,
10026
- .list {
10027
- stroke: ${colors.gray[500]} !important;
10028
- }
10029
-
10030
- .list-item {
10031
- stroke: ${colors.gray[700]};
10032
- }
10088
+ color: ${t2(colors.gray[600], colors.gray[400])};
10033
10089
  }
10034
10090
 
10035
10091
  &:focus-visible {
@@ -10040,6 +10096,8 @@ var getStyles = () => {
10040
10096
  `
10041
10097
  };
10042
10098
  };
10099
+ var lightStyles = stylesFactory("light");
10100
+ var darkStyles = stylesFactory("dark");
10043
10101
  delegateEvents(["click"]);
10044
10102
 
10045
10103
  // src/fonts.ts
@@ -10051,7 +10109,7 @@ var loadFonts = () => {
10051
10109
  };
10052
10110
 
10053
10111
  // src/Devtools.tsx
10054
- var _tmpl$17 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
10112
+ var _tmpl$19 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
10055
10113
  var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
10056
10114
  var _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
10057
10115
  var _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
@@ -10061,22 +10119,27 @@ var _tmpl$73 = /* @__PURE__ */ template(`<span>Top`);
10061
10119
  var _tmpl$83 = /* @__PURE__ */ template(`<span>Bottom`);
10062
10120
  var _tmpl$93 = /* @__PURE__ */ template(`<span>Left`);
10063
10121
  var _tmpl$103 = /* @__PURE__ */ template(`<span>Right`);
10064
- var _tmpl$113 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools"></button><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div><div><div><div><input aria-label="Filter queries by query key" type="text" placeholder="Filter" class="tsqd-query-filter-textfield"></div><div><select></select></div><button class="tsqd-query-filter-sort-order-btn"></button></div><div><button aria-label="Clear query cache" title="Clear query cache"></button><button></button></div></div><div><div class="tsqd-queries-container">`);
10065
- var _tmpl$122 = /* @__PURE__ */ template(`<option>Sort by `);
10066
- var _tmpl$132 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
10067
- var _tmpl$142 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
10068
- var _tmpl$152 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
10069
- var _tmpl$162 = /* @__PURE__ */ template(`<span>`);
10070
- var _tmpl$172 = /* @__PURE__ */ template(`<button><span></span><span>`);
10071
- var _tmpl$18 = /* @__PURE__ */ template(`<button><span></span> Error`);
10072
- var _tmpl$19 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
10073
- var _tmpl$20 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class="tsqd-query-details-summary"><pre><code></code></pre><span></span></div><div class="tsqd-query-details-observers-count"><span>Observers:</span><span></span></div><div class="tsqd-query-details-last-updated"><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
10074
- var _tmpl$21 = /* @__PURE__ */ template(`<option>`);
10122
+ var _tmpl$113 = /* @__PURE__ */ template(`<span>Theme`);
10123
+ var _tmpl$122 = /* @__PURE__ */ template(`<span>Light`);
10124
+ var _tmpl$132 = /* @__PURE__ */ template(`<span>Dark`);
10125
+ var _tmpl$142 = /* @__PURE__ */ template(`<span>System`);
10126
+ var _tmpl$152 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools"></button><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div><div><div><div><input aria-label="Filter queries by query key" type="text" placeholder="Filter" class="tsqd-query-filter-textfield"></div><div><select></select></div><button class="tsqd-query-filter-sort-order-btn"></button></div><div><button aria-label="Clear query cache" title="Clear query cache"></button><button></button></div></div><div><div class="tsqd-queries-container">`);
10127
+ var _tmpl$162 = /* @__PURE__ */ template(`<option>Sort by `);
10128
+ var _tmpl$172 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
10129
+ var _tmpl$182 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
10130
+ var _tmpl$192 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
10131
+ var _tmpl$20 = /* @__PURE__ */ template(`<span>`);
10132
+ var _tmpl$21 = /* @__PURE__ */ template(`<button><span></span><span>`);
10133
+ var _tmpl$222 = /* @__PURE__ */ template(`<button><span></span> Error`);
10134
+ var _tmpl$232 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
10135
+ var _tmpl$24 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class="tsqd-query-details-summary"><pre><code></code></pre><span></span></div><div class="tsqd-query-details-observers-count"><span>Observers:</span><span></span></div><div class="tsqd-query-details-last-updated"><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
10136
+ var _tmpl$25 = /* @__PURE__ */ template(`<option>`);
10075
10137
  var firstBreakpoint = 1024;
10076
10138
  var secondBreakpoint = 796;
10077
10139
  var thirdBreakpoint = 700;
10078
10140
  var BUTTON_POSITION = "bottom-right";
10079
10141
  var POSITION = "bottom";
10142
+ var THEME_PREFERENCE = "system";
10080
10143
  var INITIAL_IS_OPEN = false;
10081
10144
  var DEFAULT_HEIGHT = 500;
10082
10145
  var DEFAULT_WIDTH = 500;
@@ -10085,33 +10148,51 @@ var DEFAULT_SORT_ORDER = 1;
10085
10148
  var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
10086
10149
  var [panelWidth, setPanelWidth] = createSignal(0);
10087
10150
  var DevtoolsComponent = (props) => {
10151
+ const [localStore, setLocalStore] = createLocalStorage({
10152
+ prefix: "TanstackQueryDevtools"
10153
+ });
10154
+ const colorScheme = getPreferredColorScheme();
10155
+ const theme = createMemo(() => {
10156
+ const preference = localStore.theme_preference || THEME_PREFERENCE;
10157
+ if (preference !== "system")
10158
+ return preference;
10159
+ return colorScheme();
10160
+ });
10088
10161
  return createComponent(QueryDevtoolsContext.Provider, {
10089
10162
  value: props,
10090
10163
  get children() {
10091
- return createComponent(Devtools, {});
10164
+ return createComponent(ThemeContext.Provider, {
10165
+ value: theme,
10166
+ get children() {
10167
+ return createComponent(Devtools, {
10168
+ localStore,
10169
+ setLocalStore
10170
+ });
10171
+ }
10172
+ });
10092
10173
  }
10093
10174
  });
10094
10175
  };
10095
10176
  var Devtools_default = DevtoolsComponent;
10096
- var Devtools = () => {
10177
+ var Devtools = (props) => {
10097
10178
  loadFonts();
10098
- const styles = getStyles2();
10099
- const [localStore, setLocalStore] = createLocalStorage({
10100
- prefix: "TanstackQueryDevtools"
10179
+ const theme = useTheme();
10180
+ const styles = createMemo(() => {
10181
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10101
10182
  });
10102
10183
  const buttonPosition = createMemo(() => {
10103
10184
  return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
10104
10185
  });
10105
10186
  const isOpen = createMemo(() => {
10106
- return localStore.open === "true" ? true : localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
10187
+ return props.localStore.open === "true" ? true : props.localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
10107
10188
  });
10108
10189
  const position = createMemo(() => {
10109
- return localStore.position || useQueryDevtoolsContext().position || POSITION;
10190
+ return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
10110
10191
  });
10111
10192
  createEffect(() => {
10112
10193
  const root = document.querySelector(".tsqd-parent-container");
10113
- const height = localStore.height || DEFAULT_HEIGHT;
10114
- const width = localStore.width || DEFAULT_WIDTH;
10194
+ const height = props.localStore.height || DEFAULT_HEIGHT;
10195
+ const width = props.localStore.width || DEFAULT_WIDTH;
10115
10196
  const panelPosition = position();
10116
10197
  root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
10117
10198
  root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
@@ -10127,8 +10208,12 @@ var Devtools = () => {
10127
10208
  },
10128
10209
  get children() {
10129
10210
  return createComponent(DevtoolsPanel, {
10130
- localStore,
10131
- setLocalStore
10211
+ get localStore() {
10212
+ return props.localStore;
10213
+ },
10214
+ get setLocalStore() {
10215
+ return props.setLocalStore;
10216
+ }
10132
10217
  });
10133
10218
  }
10134
10219
  });
@@ -10142,11 +10227,11 @@ var Devtools = () => {
10142
10227
  return !isOpen();
10143
10228
  },
10144
10229
  get children() {
10145
- const _el$2 = _tmpl$17(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
10230
+ const _el$2 = _tmpl$19(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
10146
10231
  insert(_el$3, createComponent(TanstackLogo, {}));
10147
- _el$4.$$click = () => setLocalStore("open", "true");
10232
+ _el$4.$$click = () => props.setLocalStore("open", "true");
10148
10233
  insert(_el$4, createComponent(TanstackLogo, {}));
10149
- createRenderEffect(() => className(_el$2, clsx(styles.devtoolsBtn, styles[`devtoolsBtn-position-${buttonPosition()}`])));
10234
+ createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
10150
10235
  return _el$2;
10151
10236
  }
10152
10237
  });
@@ -10177,7 +10262,10 @@ var Devtools = () => {
10177
10262
  })();
10178
10263
  };
10179
10264
  var DevtoolsPanel = (props) => {
10180
- const styles = getStyles2();
10265
+ const theme = useTheme();
10266
+ const styles = createMemo(() => {
10267
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10268
+ });
10181
10269
  const [isResizing, setIsResizing] = createSignal(false);
10182
10270
  const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
10183
10271
  const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
@@ -10286,8 +10374,24 @@ var DevtoolsPanel = (props) => {
10286
10374
  });
10287
10375
  });
10288
10376
  });
10377
+ const getPanelDynamicStyles = () => {
10378
+ const {
10379
+ colors
10380
+ } = tokens;
10381
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10382
+ if (panelWidth() < secondBreakpoint) {
10383
+ return u`
10384
+ flex-direction: column;
10385
+ background-color: ${t2(colors.gray[300], colors.gray[600])};
10386
+ `;
10387
+ }
10388
+ return u`
10389
+ flex-direction: row;
10390
+ background-color: ${t2(colors.gray[200], colors.darkGray[900])};
10391
+ `;
10392
+ };
10289
10393
  return (() => {
10290
- const _el$5 = _tmpl$113(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$9.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$23 = _el$15.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$32 = _el$14.nextSibling, _el$33 = _el$32.firstChild;
10394
+ const _el$5 = _tmpl$152(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$9.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$23 = _el$15.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$36 = _el$14.nextSibling, _el$37 = _el$36.firstChild;
10291
10395
  const _ref$ = panelRef;
10292
10396
  typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
10293
10397
  _el$6.$$mousedown = handleDragStart;
@@ -10303,10 +10407,10 @@ var DevtoolsPanel = (props) => {
10303
10407
  _el$17.$$input = (e2) => props.setLocalStore("filter", e2.currentTarget.value);
10304
10408
  _el$19.addEventListener("change", (e2) => props.setLocalStore("sort", e2.currentTarget.value));
10305
10409
  insert(_el$19, () => Object.keys(sortFns).map((key) => (() => {
10306
- const _el$34 = _tmpl$122(); _el$34.firstChild;
10307
- _el$34.value = key;
10308
- insert(_el$34, key, null);
10309
- return _el$34;
10410
+ const _el$38 = _tmpl$162(); _el$38.firstChild;
10411
+ _el$38.value = key;
10412
+ insert(_el$38, key, null);
10413
+ return _el$38;
10310
10414
  })()));
10311
10415
  insert(_el$18, createComponent(ChevronDown, {}), null);
10312
10416
  _el$20.$$click = () => {
@@ -10350,7 +10454,7 @@ var DevtoolsPanel = (props) => {
10350
10454
  get children() {
10351
10455
  return [createComponent(index$d.Trigger, {
10352
10456
  get ["class"]() {
10353
- return clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
10457
+ return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
10354
10458
  },
10355
10459
  get children() {
10356
10460
  return createComponent(Settings, {});
@@ -10359,12 +10463,12 @@ var DevtoolsPanel = (props) => {
10359
10463
  get children() {
10360
10464
  return createComponent(index$d.Content, {
10361
10465
  get ["class"]() {
10362
- return clsx(styles.settingsMenu, "tsqd-settings-menu");
10466
+ return clsx(styles().settingsMenu, "tsqd-settings-menu");
10363
10467
  },
10364
10468
  get children() {
10365
10469
  return [(() => {
10366
10470
  const _el$26 = _tmpl$53();
10367
- createRenderEffect(() => className(_el$26, clsx(styles.settingsMenuHeader, "tsqd-settings-menu-header")));
10471
+ createRenderEffect(() => className(_el$26, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
10368
10472
  return _el$26;
10369
10473
  })(), createComponent(index$d.Sub, {
10370
10474
  overlap: true,
@@ -10373,7 +10477,7 @@ var DevtoolsPanel = (props) => {
10373
10477
  get children() {
10374
10478
  return [createComponent(index$d.SubTrigger, {
10375
10479
  get ["class"]() {
10376
- return clsx(styles.settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10480
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10377
10481
  },
10378
10482
  get children() {
10379
10483
  return [_tmpl$63(), createComponent(ChevronDown, {})];
@@ -10382,7 +10486,7 @@ var DevtoolsPanel = (props) => {
10382
10486
  get children() {
10383
10487
  return createComponent(index$d.SubContent, {
10384
10488
  get ["class"]() {
10385
- return clsx(styles.settingsMenu, "tsqd-settings-submenu");
10489
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
10386
10490
  },
10387
10491
  get children() {
10388
10492
  return [createComponent(index$d.Item, {
@@ -10391,7 +10495,7 @@ var DevtoolsPanel = (props) => {
10391
10495
  },
10392
10496
  as: "button",
10393
10497
  get ["class"]() {
10394
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10498
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10395
10499
  },
10396
10500
  get children() {
10397
10501
  return [_tmpl$73(), createComponent(ArrowUp, {})];
@@ -10402,7 +10506,7 @@ var DevtoolsPanel = (props) => {
10402
10506
  },
10403
10507
  as: "button",
10404
10508
  get ["class"]() {
10405
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10509
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10406
10510
  },
10407
10511
  get children() {
10408
10512
  return [_tmpl$83(), createComponent(ArrowDown, {})];
@@ -10413,7 +10517,7 @@ var DevtoolsPanel = (props) => {
10413
10517
  },
10414
10518
  as: "button",
10415
10519
  get ["class"]() {
10416
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10520
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10417
10521
  },
10418
10522
  get children() {
10419
10523
  return [_tmpl$93(), createComponent(ArrowLeft, {})];
@@ -10424,7 +10528,7 @@ var DevtoolsPanel = (props) => {
10424
10528
  },
10425
10529
  as: "button",
10426
10530
  get ["class"]() {
10427
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
10531
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
10428
10532
  },
10429
10533
  get children() {
10430
10534
  return [_tmpl$103(), createComponent(ArrowRight, {})];
@@ -10435,6 +10539,64 @@ var DevtoolsPanel = (props) => {
10435
10539
  }
10436
10540
  })];
10437
10541
  }
10542
+ }), createComponent(index$d.Sub, {
10543
+ overlap: true,
10544
+ gutter: 8,
10545
+ shift: -4,
10546
+ get children() {
10547
+ return [createComponent(index$d.SubTrigger, {
10548
+ get ["class"]() {
10549
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10550
+ },
10551
+ get children() {
10552
+ return [_tmpl$113(), createComponent(ChevronDown, {})];
10553
+ }
10554
+ }), createComponent(index$d.Portal, {
10555
+ get children() {
10556
+ return createComponent(index$d.SubContent, {
10557
+ get ["class"]() {
10558
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
10559
+ },
10560
+ get children() {
10561
+ return [createComponent(index$d.Item, {
10562
+ onSelect: () => {
10563
+ props.setLocalStore("theme_preference", "light");
10564
+ },
10565
+ as: "button",
10566
+ get ["class"]() {
10567
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10568
+ },
10569
+ get children() {
10570
+ return [_tmpl$122(), createComponent(Sun, {})];
10571
+ }
10572
+ }), createComponent(index$d.Item, {
10573
+ onSelect: () => {
10574
+ props.setLocalStore("theme_preference", "dark");
10575
+ },
10576
+ as: "button",
10577
+ get ["class"]() {
10578
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10579
+ },
10580
+ get children() {
10581
+ return [_tmpl$132(), createComponent(Moon, {})];
10582
+ }
10583
+ }), createComponent(index$d.Item, {
10584
+ onSelect: () => {
10585
+ props.setLocalStore("theme_preference", "system");
10586
+ },
10587
+ as: "button",
10588
+ get ["class"]() {
10589
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10590
+ },
10591
+ get children() {
10592
+ return [_tmpl$142(), createComponent(Monitor, {})];
10593
+ }
10594
+ })];
10595
+ }
10596
+ });
10597
+ }
10598
+ })];
10599
+ }
10438
10600
  })];
10439
10601
  }
10440
10602
  });
@@ -10442,7 +10604,7 @@ var DevtoolsPanel = (props) => {
10442
10604
  })];
10443
10605
  }
10444
10606
  }), null);
10445
- insert(_el$33, createComponent(Key, {
10607
+ insert(_el$37, createComponent(Key, {
10446
10608
  by: (q) => q.queryHash,
10447
10609
  get each() {
10448
10610
  return queries();
@@ -10462,19 +10624,16 @@ var DevtoolsPanel = (props) => {
10462
10624
  }
10463
10625
  }), null);
10464
10626
  createRenderEffect((_p$) => {
10465
- const _v$ = clsx(styles.panel, styles[`panel-position-${position()}`], u`
10466
- flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
10467
- background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
10468
- `, {
10627
+ const _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
10469
10628
  [u`
10470
10629
  min-width: min-content;
10471
10630
  `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
10472
- }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles.dragHandle, styles[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles.closeBtn, styles[`closeBtn-position-${position()}`], "tsqd-minimize-btn"), _v$6 = clsx(styles.queriesContainer, panelWidth() < secondBreakpoint && selectedQueryHash() && u`
10631
+ }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn"), _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && selectedQueryHash() && u`
10473
10632
  height: 50%;
10474
10633
  max-height: 50%;
10475
- `, "tsqd-queries-container"), _v$7 = clsx(styles.row, "tsqd-header"), _v$8 = clsx(styles.logo, "tsqd-text-logo-container"), _v$9 = clsx(styles.tanstackLogo, "tsqd-text-logo-tanstack"), _v$10 = clsx(styles.queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$11 = clsx(styles.row, u`
10634
+ `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = clsx(styles().logo, "tsqd-text-logo-container"), _v$9 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$10 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$11 = clsx(styles().row, u`
10476
10635
  gap: ${tokens.size[2.5]};
10477
- `, "tsqd-filters-actions-container"), _v$12 = clsx(styles.filtersContainer, "tsqd-filters-container"), _v$13 = clsx(styles.filterInput, "tsqd-query-filter-textfield-container"), _v$14 = clsx(styles.filterSelect, "tsqd-query-filter-sort-container"), _v$15 = `Sort order ${sortOrder() === -1 ? "descending" : "ascending"}`, _v$16 = sortOrder() === -1, _v$17 = clsx(styles.actionsContainer, "tsqd-actions-container"), _v$18 = clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$19 = clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$20 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$21 = offline(), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = clsx(styles.overflowQueryContainer, "tsqd-queries-overflow-container");
10636
+ `, "tsqd-filters-actions-container"), _v$12 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$13 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$14 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$15 = `Sort order ${sortOrder() === -1 ? "descending" : "ascending"}`, _v$16 = sortOrder() === -1, _v$17 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$18 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$19 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$20 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$21 = offline(), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = clsx(styles().overflowQueryContainer, "tsqd-queries-overflow-container");
10478
10637
  _v$ !== _p$._v$ && className(_el$5, _p$._v$ = _v$);
10479
10638
  _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$5.style.setProperty("height", _v$2) : _el$5.style.removeProperty("height"));
10480
10639
  _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$5.style.setProperty("width", _v$3) : _el$5.style.removeProperty("width"));
@@ -10497,7 +10656,7 @@ var DevtoolsPanel = (props) => {
10497
10656
  _v$20 !== _p$._v$20 && setAttribute(_el$25, "aria-label", _p$._v$20 = _v$20);
10498
10657
  _v$21 !== _p$._v$21 && setAttribute(_el$25, "aria-pressed", _p$._v$21 = _v$21);
10499
10658
  _v$22 !== _p$._v$22 && setAttribute(_el$25, "title", _p$._v$22 = _v$22);
10500
- _v$23 !== _p$._v$23 && className(_el$32, _p$._v$23 = _v$23);
10659
+ _v$23 !== _p$._v$23 && className(_el$36, _p$._v$23 = _v$23);
10501
10660
  return _p$;
10502
10661
  }, {
10503
10662
  _v$: void 0,
@@ -10530,7 +10689,15 @@ var DevtoolsPanel = (props) => {
10530
10689
  })();
10531
10690
  };
10532
10691
  var QueryRow = (props) => {
10533
- const styles = getStyles2();
10692
+ const theme = useTheme();
10693
+ const styles = createMemo(() => {
10694
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10695
+ });
10696
+ const {
10697
+ colors,
10698
+ alpha
10699
+ } = tokens;
10700
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10534
10701
  const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
10535
10702
  queryKey: props.query.queryKey
10536
10703
  })?.state);
@@ -10548,41 +10715,47 @@ var QueryRow = (props) => {
10548
10715
  observerCount: observers(),
10549
10716
  isStale: isStale()
10550
10717
  }));
10718
+ const getObserverCountColorStyles = () => {
10719
+ if (color() === "gray") {
10720
+ return u`
10721
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
10722
+ color: ${t2(colors[color()][700], colors[color()][300])};
10723
+ `;
10724
+ }
10725
+ return u`
10726
+ background-color: ${t2(colors[color()][200] + alpha[80], colors[color()][900])};
10727
+ color: ${t2(colors[color()][800], colors[color()][300])};
10728
+ `;
10729
+ };
10551
10730
  return createComponent(Show, {
10552
10731
  get when() {
10553
10732
  return queryState();
10554
10733
  },
10555
10734
  get children() {
10556
- const _el$36 = _tmpl$142(), _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
10557
- _el$36.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
10558
- insert(_el$37, observers);
10559
- insert(_el$38, () => props.query.queryHash);
10560
- insert(_el$36, createComponent(Show, {
10735
+ const _el$40 = _tmpl$182(), _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling;
10736
+ _el$40.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
10737
+ insert(_el$41, observers);
10738
+ insert(_el$42, () => props.query.queryHash);
10739
+ insert(_el$40, createComponent(Show, {
10561
10740
  get when() {
10562
10741
  return isDisabled();
10563
10742
  },
10564
10743
  get children() {
10565
- return _tmpl$132();
10744
+ return _tmpl$172();
10566
10745
  }
10567
10746
  }), null);
10568
10747
  createRenderEffect((_p$) => {
10569
- const _v$24 = clsx(styles.queryRow, selectedQueryHash() === props.query.queryHash && styles.selectedQueryRow, "tsqd-query-row"), _v$25 = `Query key ${props.query.queryHash}`, _v$26 = clsx(color() === "gray" ? u`
10570
- background-color: ${tokens.colors[color()][700]};
10571
- color: ${tokens.colors[color()][300]};
10572
- ` : u`
10573
- background-color: ${tokens.colors[color()][900]};
10574
- color: ${tokens.colors[color()][300]};
10575
- `, "tsqd-query-observer-count");
10576
- _v$24 !== _p$._v$24 && className(_el$36, _p$._v$24 = _v$24);
10577
- _v$25 !== _p$._v$25 && setAttribute(_el$36, "aria-label", _p$._v$25 = _v$25);
10578
- _v$26 !== _p$._v$26 && className(_el$37, _p$._v$26 = _v$26);
10748
+ const _v$24 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$25 = `Query key ${props.query.queryHash}`, _v$26 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
10749
+ _v$24 !== _p$._v$24 && className(_el$40, _p$._v$24 = _v$24);
10750
+ _v$25 !== _p$._v$25 && setAttribute(_el$40, "aria-label", _p$._v$25 = _v$25);
10751
+ _v$26 !== _p$._v$26 && className(_el$41, _p$._v$26 = _v$26);
10579
10752
  return _p$;
10580
10753
  }, {
10581
10754
  _v$24: void 0,
10582
10755
  _v$25: void 0,
10583
10756
  _v$26: void 0
10584
10757
  });
10585
- return _el$36;
10758
+ return _el$40;
10586
10759
  }
10587
10760
  });
10588
10761
  };
@@ -10592,50 +10765,61 @@ var QueryStatusCount = () => {
10592
10765
  const fetching = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "fetching").length);
10593
10766
  const paused = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "paused").length);
10594
10767
  const inactive = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length);
10595
- const styles = getStyles2();
10768
+ const theme = useTheme();
10769
+ const styles = createMemo(() => {
10770
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10771
+ });
10596
10772
  return (() => {
10597
- const _el$40 = _tmpl$23();
10598
- insert(_el$40, createComponent(QueryStatus, {
10773
+ const _el$44 = _tmpl$23();
10774
+ insert(_el$44, createComponent(QueryStatus, {
10599
10775
  label: "Fresh",
10600
10776
  color: "green",
10601
10777
  get count() {
10602
10778
  return fresh();
10603
10779
  }
10604
10780
  }), null);
10605
- insert(_el$40, createComponent(QueryStatus, {
10781
+ insert(_el$44, createComponent(QueryStatus, {
10606
10782
  label: "Fetching",
10607
10783
  color: "blue",
10608
10784
  get count() {
10609
10785
  return fetching();
10610
10786
  }
10611
10787
  }), null);
10612
- insert(_el$40, createComponent(QueryStatus, {
10788
+ insert(_el$44, createComponent(QueryStatus, {
10613
10789
  label: "Paused",
10614
10790
  color: "purple",
10615
10791
  get count() {
10616
10792
  return paused();
10617
10793
  }
10618
10794
  }), null);
10619
- insert(_el$40, createComponent(QueryStatus, {
10795
+ insert(_el$44, createComponent(QueryStatus, {
10620
10796
  label: "Stale",
10621
10797
  color: "yellow",
10622
10798
  get count() {
10623
10799
  return stale();
10624
10800
  }
10625
10801
  }), null);
10626
- insert(_el$40, createComponent(QueryStatus, {
10802
+ insert(_el$44, createComponent(QueryStatus, {
10627
10803
  label: "Inactive",
10628
10804
  color: "gray",
10629
10805
  get count() {
10630
10806
  return inactive();
10631
10807
  }
10632
10808
  }), null);
10633
- createRenderEffect(() => className(_el$40, clsx(styles.queryStatusContainer, "tsqd-query-status-container")));
10634
- return _el$40;
10809
+ createRenderEffect(() => className(_el$44, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
10810
+ return _el$44;
10635
10811
  })();
10636
10812
  };
10637
10813
  var QueryStatus = (props) => {
10638
- const styles = getStyles2();
10814
+ const theme = useTheme();
10815
+ const styles = createMemo(() => {
10816
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10817
+ });
10818
+ const {
10819
+ colors,
10820
+ alpha
10821
+ } = tokens;
10822
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10639
10823
  let tagRef;
10640
10824
  const [mouseOver, setMouseOver] = createSignal(false);
10641
10825
  const [focused, setFocused] = createSignal(false);
@@ -10651,78 +10835,83 @@ var QueryStatus = (props) => {
10651
10835
  return true;
10652
10836
  });
10653
10837
  return (() => {
10654
- const _el$41 = _tmpl$172(), _el$43 = _el$41.firstChild, _el$45 = _el$43.nextSibling;
10838
+ const _el$45 = _tmpl$21(), _el$47 = _el$45.firstChild, _el$49 = _el$47.nextSibling;
10655
10839
  const _ref$3 = tagRef;
10656
- typeof _ref$3 === "function" ? use(_ref$3, _el$41) : tagRef = _el$41;
10657
- _el$41.addEventListener("mouseleave", () => {
10840
+ typeof _ref$3 === "function" ? use(_ref$3, _el$45) : tagRef = _el$45;
10841
+ _el$45.addEventListener("mouseleave", () => {
10658
10842
  setMouseOver(false);
10659
10843
  setFocused(false);
10660
10844
  });
10661
- _el$41.addEventListener("mouseenter", () => setMouseOver(true));
10662
- _el$41.addEventListener("blur", () => setFocused(false));
10663
- _el$41.addEventListener("focus", () => setFocused(true));
10664
- spread(_el$41, mergeProps({
10845
+ _el$45.addEventListener("mouseenter", () => setMouseOver(true));
10846
+ _el$45.addEventListener("blur", () => setFocused(false));
10847
+ _el$45.addEventListener("focus", () => setFocused(true));
10848
+ spread(_el$45, mergeProps({
10665
10849
  get disabled() {
10666
10850
  return showLabel();
10667
10851
  },
10668
10852
  get ["class"]() {
10669
- return clsx(styles.queryStatusTag, !showLabel() && u`
10853
+ return clsx(styles().queryStatusTag, !showLabel() && u`
10670
10854
  cursor: pointer;
10671
10855
  &:hover {
10672
- background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
10856
+ background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
10673
10857
  }
10674
10858
  `, "tsqd-query-status-tag", `tsqd-query-status-tag-${props.label.toLowerCase()}`);
10675
10859
  }
10676
10860
  }, () => mouseOver() || focused() ? {
10677
10861
  "aria-describedby": "tsqd-status-tooltip"
10678
10862
  } : {}), false, true);
10679
- insert(_el$41, createComponent(Show, {
10863
+ insert(_el$45, createComponent(Show, {
10680
10864
  get when() {
10681
10865
  return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
10682
10866
  },
10683
10867
  get children() {
10684
- const _el$42 = _tmpl$152();
10685
- insert(_el$42, () => props.label);
10686
- createRenderEffect(() => className(_el$42, clsx(styles.statusTooltip, "tsqd-query-status-tooltip")));
10687
- return _el$42;
10868
+ const _el$46 = _tmpl$192();
10869
+ insert(_el$46, () => props.label);
10870
+ createRenderEffect(() => className(_el$46, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
10871
+ return _el$46;
10688
10872
  }
10689
- }), _el$43);
10690
- insert(_el$41, createComponent(Show, {
10873
+ }), _el$47);
10874
+ insert(_el$45, createComponent(Show, {
10691
10875
  get when() {
10692
10876
  return showLabel();
10693
10877
  },
10694
10878
  get children() {
10695
- const _el$44 = _tmpl$162();
10696
- insert(_el$44, () => props.label);
10697
- createRenderEffect(() => className(_el$44, clsx(styles.queryStatusTagLabel, "tsqd-query-status-tag-label")));
10698
- return _el$44;
10879
+ const _el$48 = _tmpl$20();
10880
+ insert(_el$48, () => props.label);
10881
+ createRenderEffect(() => className(_el$48, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
10882
+ return _el$48;
10699
10883
  }
10700
- }), _el$45);
10701
- insert(_el$45, () => props.count);
10884
+ }), _el$49);
10885
+ insert(_el$49, () => props.count);
10702
10886
  createRenderEffect((_p$) => {
10703
10887
  const _v$27 = clsx(u`
10704
10888
  width: ${tokens.size[1.5]};
10705
10889
  height: ${tokens.size[1.5]};
10706
10890
  border-radius: ${tokens.border.radius.full};
10707
10891
  background-color: ${tokens.colors[props.color][500]};
10708
- `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles.queryStatusCount, props.count > 0 && props.color !== "gray" ? u`
10709
- background-color: ${tokens.colors[props.color][900]};
10710
- color: ${tokens.colors[props.color][300]};
10711
- ` : u`
10712
- color: ${tokens.colors["gray"][400]};
10713
- `, "tsqd-query-status-tag-count");
10714
- _v$27 !== _p$._v$27 && className(_el$43, _p$._v$27 = _v$27);
10715
- _v$28 !== _p$._v$28 && className(_el$45, _p$._v$28 = _v$28);
10892
+ `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && u`
10893
+ background-color: ${t2(colors[props.color][100], colors[props.color][900])};
10894
+ color: ${t2(colors[props.color][700], colors[props.color][300])};
10895
+ `, "tsqd-query-status-tag-count");
10896
+ _v$27 !== _p$._v$27 && className(_el$47, _p$._v$27 = _v$27);
10897
+ _v$28 !== _p$._v$28 && className(_el$49, _p$._v$28 = _v$28);
10716
10898
  return _p$;
10717
10899
  }, {
10718
10900
  _v$27: void 0,
10719
10901
  _v$28: void 0
10720
10902
  });
10721
- return _el$41;
10903
+ return _el$45;
10722
10904
  })();
10723
10905
  };
10724
10906
  var QueryDetails = () => {
10725
- const styles = getStyles2();
10907
+ const theme = useTheme();
10908
+ const styles = createMemo(() => {
10909
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10910
+ });
10911
+ const {
10912
+ colors
10913
+ } = tokens;
10914
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10726
10915
  const queryClient = useQueryDevtoolsContext().client;
10727
10916
  const [restoringLoading, setRestoringLoading] = createSignal(false);
10728
10917
  const errorTypes = createMemo(() => {
@@ -10779,24 +10968,38 @@ var QueryDetails = () => {
10779
10968
  setRestoringLoading(false);
10780
10969
  }
10781
10970
  });
10971
+ const getQueryStatusColors = () => {
10972
+ if (color() === "gray") {
10973
+ return u`
10974
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
10975
+ color: ${t2(colors[color()][700], colors[color()][300])};
10976
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
10977
+ `;
10978
+ }
10979
+ return u`
10980
+ background-color: ${t2(colors[color()][100], colors[color()][900])};
10981
+ color: ${t2(colors[color()][700], colors[color()][300])};
10982
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
10983
+ `;
10984
+ };
10782
10985
  return createComponent(Show, {
10783
10986
  get when() {
10784
10987
  return createMemo(() => !!activeQuery())() && activeQueryState();
10785
10988
  },
10786
10989
  get children() {
10787
- const _el$46 = _tmpl$20(), _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling, _el$49 = _el$48.firstChild, _el$50 = _el$49.firstChild, _el$51 = _el$50.firstChild, _el$52 = _el$50.nextSibling, _el$53 = _el$49.nextSibling, _el$54 = _el$53.firstChild, _el$55 = _el$54.nextSibling, _el$56 = _el$53.nextSibling, _el$57 = _el$56.firstChild, _el$58 = _el$57.nextSibling, _el$59 = _el$48.nextSibling, _el$60 = _el$59.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$61.firstChild, _el$63 = _el$61.nextSibling, _el$64 = _el$63.firstChild, _el$65 = _el$63.nextSibling, _el$66 = _el$65.firstChild, _el$67 = _el$65.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$67.nextSibling, _el$70 = _el$69.firstChild, _el$71 = _el$70.nextSibling, _el$80 = _el$60.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling;
10788
- insert(_el$51, () => displayValue(activeQuery().queryKey, true));
10789
- insert(_el$52, statusLabel);
10790
- insert(_el$55, observerCount);
10791
- insert(_el$58, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
10792
- _el$61.$$click = handleRefetch;
10793
- _el$63.$$click = () => queryClient.invalidateQueries(activeQuery());
10794
- _el$65.$$click = () => queryClient.resetQueries(activeQuery());
10795
- _el$67.$$click = () => {
10990
+ const _el$50 = _tmpl$24(), _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$53.firstChild, _el$55 = _el$54.firstChild, _el$56 = _el$54.nextSibling, _el$57 = _el$53.nextSibling, _el$58 = _el$57.firstChild, _el$59 = _el$58.nextSibling, _el$60 = _el$57.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling, _el$63 = _el$52.nextSibling, _el$64 = _el$63.nextSibling, _el$65 = _el$64.firstChild, _el$66 = _el$65.firstChild, _el$67 = _el$65.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$67.nextSibling, _el$70 = _el$69.firstChild, _el$71 = _el$69.nextSibling, _el$72 = _el$71.firstChild, _el$73 = _el$71.nextSibling, _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling, _el$84 = _el$64.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling;
10991
+ insert(_el$55, () => displayValue(activeQuery().queryKey, true));
10992
+ insert(_el$56, statusLabel);
10993
+ insert(_el$59, observerCount);
10994
+ insert(_el$62, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
10995
+ _el$65.$$click = handleRefetch;
10996
+ _el$67.$$click = () => queryClient.invalidateQueries(activeQuery());
10997
+ _el$69.$$click = () => queryClient.resetQueries(activeQuery());
10998
+ _el$71.$$click = () => {
10796
10999
  queryClient.removeQueries(activeQuery());
10797
11000
  setSelectedQueryHash(null);
10798
11001
  };
10799
- _el$69.$$click = () => {
11002
+ _el$73.$$click = () => {
10800
11003
  if (activeQuery()?.state.data === void 0) {
10801
11004
  setRestoringLoading(true);
10802
11005
  restoreQueryAfterLoadingOrError();
@@ -10824,79 +11027,79 @@ var QueryDetails = () => {
10824
11027
  });
10825
11028
  }
10826
11029
  };
10827
- insert(_el$69, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$71);
10828
- insert(_el$60, createComponent(Show, {
11030
+ insert(_el$73, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$75);
11031
+ insert(_el$64, createComponent(Show, {
10829
11032
  get when() {
10830
11033
  return errorTypes().length === 0 || queryStatus() === "error";
10831
11034
  },
10832
11035
  get children() {
10833
- const _el$72 = _tmpl$18(), _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling;
10834
- _el$72.$$click = () => {
11036
+ const _el$76 = _tmpl$222(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
11037
+ _el$76.$$click = () => {
10835
11038
  if (!activeQuery().state.error) {
10836
11039
  triggerError();
10837
11040
  } else {
10838
11041
  queryClient.resetQueries(activeQuery());
10839
11042
  }
10840
11043
  };
10841
- insert(_el$72, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$74);
11044
+ insert(_el$76, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$78);
10842
11045
  createRenderEffect((_p$) => {
10843
11046
  const _v$29 = clsx(u`
10844
- color: ${tokens.colors.red[400]};
11047
+ color: ${t2(colors.red[500], colors.red[400])};
10845
11048
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$30 = queryStatus() === "pending", _v$31 = u`
10846
- background-color: ${tokens.colors.red[400]};
11049
+ background-color: ${t2(colors.red[500], colors.red[400])};
10847
11050
  `;
10848
- _v$29 !== _p$._v$29 && className(_el$72, _p$._v$29 = _v$29);
10849
- _v$30 !== _p$._v$30 && (_el$72.disabled = _p$._v$30 = _v$30);
10850
- _v$31 !== _p$._v$31 && className(_el$73, _p$._v$31 = _v$31);
11051
+ _v$29 !== _p$._v$29 && className(_el$76, _p$._v$29 = _v$29);
11052
+ _v$30 !== _p$._v$30 && (_el$76.disabled = _p$._v$30 = _v$30);
11053
+ _v$31 !== _p$._v$31 && className(_el$77, _p$._v$31 = _v$31);
10851
11054
  return _p$;
10852
11055
  }, {
10853
11056
  _v$29: void 0,
10854
11057
  _v$30: void 0,
10855
11058
  _v$31: void 0
10856
11059
  });
10857
- return _el$72;
11060
+ return _el$76;
10858
11061
  }
10859
11062
  }), null);
10860
- insert(_el$60, createComponent(Show, {
11063
+ insert(_el$64, createComponent(Show, {
10861
11064
  get when() {
10862
11065
  return !(errorTypes().length === 0 || queryStatus() === "error");
10863
11066
  },
10864
11067
  get children() {
10865
- const _el$75 = _tmpl$19(), _el$76 = _el$75.firstChild, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling; _el$78.firstChild;
10866
- _el$78.addEventListener("change", (e2) => {
10867
- const errorType = errorTypes().find((t2) => t2.name === e2.currentTarget.value);
11068
+ const _el$79 = _tmpl$232(), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling; _el$82.firstChild;
11069
+ _el$82.addEventListener("change", (e2) => {
11070
+ const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
10868
11071
  triggerError(errorType);
10869
11072
  });
10870
- insert(_el$78, createComponent(For, {
11073
+ insert(_el$82, createComponent(For, {
10871
11074
  get each() {
10872
11075
  return errorTypes();
10873
11076
  },
10874
11077
  children: (errorType) => (() => {
10875
- const _el$84 = _tmpl$21();
10876
- insert(_el$84, () => errorType.name);
10877
- createRenderEffect(() => _el$84.value = errorType.name);
10878
- return _el$84;
11078
+ const _el$88 = _tmpl$25();
11079
+ insert(_el$88, () => errorType.name);
11080
+ createRenderEffect(() => _el$88.value = errorType.name);
11081
+ return _el$88;
10879
11082
  })()
10880
11083
  }), null);
10881
- insert(_el$75, createComponent(ChevronDown, {}), null);
11084
+ insert(_el$79, createComponent(ChevronDown, {}), null);
10882
11085
  createRenderEffect((_p$) => {
10883
- const _v$32 = clsx(styles.actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
11086
+ const _v$32 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
10884
11087
  background-color: ${tokens.colors.red[400]};
10885
11088
  `, _v$34 = queryStatus() === "pending";
10886
- _v$32 !== _p$._v$32 && className(_el$75, _p$._v$32 = _v$32);
10887
- _v$33 !== _p$._v$33 && className(_el$76, _p$._v$33 = _v$33);
10888
- _v$34 !== _p$._v$34 && (_el$78.disabled = _p$._v$34 = _v$34);
11089
+ _v$32 !== _p$._v$32 && className(_el$79, _p$._v$32 = _v$32);
11090
+ _v$33 !== _p$._v$33 && className(_el$80, _p$._v$33 = _v$33);
11091
+ _v$34 !== _p$._v$34 && (_el$82.disabled = _p$._v$34 = _v$34);
10889
11092
  return _p$;
10890
11093
  }, {
10891
11094
  _v$32: void 0,
10892
11095
  _v$33: void 0,
10893
11096
  _v$34: void 0
10894
11097
  });
10895
- return _el$75;
11098
+ return _el$79;
10896
11099
  }
10897
11100
  }), null);
10898
- _el$81.style.setProperty("padding", "0.5rem");
10899
- insert(_el$81, createComponent(Explorer, {
11101
+ _el$85.style.setProperty("padding", "0.5rem");
11102
+ insert(_el$85, createComponent(Explorer, {
10900
11103
  label: "Data",
10901
11104
  defaultExpanded: ["Data"],
10902
11105
  get value() {
@@ -10907,8 +11110,8 @@ var QueryDetails = () => {
10907
11110
  return activeQuery();
10908
11111
  }
10909
11112
  }));
10910
- _el$83.style.setProperty("padding", "0.5rem");
10911
- insert(_el$83, createComponent(Explorer, {
11113
+ _el$87.style.setProperty("padding", "0.5rem");
11114
+ insert(_el$87, createComponent(Explorer, {
10912
11115
  label: "Query",
10913
11116
  defaultExpanded: ["Query", "queryKey"],
10914
11117
  get value() {
@@ -10916,58 +11119,50 @@ var QueryDetails = () => {
10916
11119
  }
10917
11120
  }));
10918
11121
  createRenderEffect((_p$) => {
10919
- const _v$35 = clsx(styles.detailsContainer, "tsqd-query-details-container"), _v$36 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$37 = clsx(styles.detailsBody, "tsqd-query-details-summary-container"), _v$38 = clsx(styles.queryDetailsStatus, color() === "gray" ? u`
10920
- background-color: ${tokens.colors[color()][700]};
10921
- color: ${tokens.colors[color()][300]};
10922
- border-color: ${tokens.colors[color()][600]};
10923
- ` : u`
10924
- background-color: ${tokens.colors[color()][900]};
10925
- color: ${tokens.colors[color()][300]};
10926
- border-color: ${tokens.colors[color()][600]};
10927
- `), _v$39 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles.actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
10928
- color: ${tokens.colors.blue[400]};
11122
+ const _v$35 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$36 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$37 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$38 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$39 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
11123
+ color: ${t2(colors.blue[600], colors.blue[400])};
10929
11124
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$42 = statusLabel() === "fetching", _v$43 = u`
10930
- background-color: ${tokens.colors.blue[400]};
11125
+ background-color: ${t2(colors.blue[600], colors.blue[400])};
10931
11126
  `, _v$44 = clsx(u`
10932
- color: ${tokens.colors.yellow[400]};
11127
+ color: ${t2(colors.yellow[600], colors.yellow[400])};
10933
11128
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$45 = queryStatus() === "pending", _v$46 = u`
10934
- background-color: ${tokens.colors.yellow[400]};
11129
+ background-color: ${t2(colors.yellow[600], colors.yellow[400])};
10935
11130
  `, _v$47 = clsx(u`
10936
- color: ${tokens.colors.gray[300]};
11131
+ color: ${t2(colors.gray[600], colors.gray[300])};
10937
11132
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$48 = queryStatus() === "pending", _v$49 = u`
10938
- background-color: ${tokens.colors.gray[400]};
11133
+ background-color: ${t2(colors.gray[600], colors.gray[400])};
10939
11134
  `, _v$50 = clsx(u`
10940
- color: ${tokens.colors.pink[400]};
11135
+ color: ${t2(colors.pink[500], colors.pink[400])};
10941
11136
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$51 = statusLabel() === "fetching", _v$52 = u`
10942
- background-color: ${tokens.colors.pink[400]};
11137
+ background-color: ${t2(colors.pink[500], colors.pink[400])};
10943
11138
  `, _v$53 = clsx(u`
10944
- color: ${tokens.colors.cyan[400]};
11139
+ color: ${t2(colors.cyan[500], colors.cyan[400])};
10945
11140
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$54 = restoringLoading(), _v$55 = u`
10946
- background-color: ${tokens.colors.cyan[400]};
10947
- `, _v$56 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles.detailsHeader, "tsqd-query-details-header");
10948
- _v$35 !== _p$._v$35 && className(_el$46, _p$._v$35 = _v$35);
10949
- _v$36 !== _p$._v$36 && className(_el$47, _p$._v$36 = _v$36);
10950
- _v$37 !== _p$._v$37 && className(_el$48, _p$._v$37 = _v$37);
10951
- _v$38 !== _p$._v$38 && className(_el$52, _p$._v$38 = _v$38);
10952
- _v$39 !== _p$._v$39 && className(_el$59, _p$._v$39 = _v$39);
10953
- _v$40 !== _p$._v$40 && className(_el$60, _p$._v$40 = _v$40);
10954
- _v$41 !== _p$._v$41 && className(_el$61, _p$._v$41 = _v$41);
10955
- _v$42 !== _p$._v$42 && (_el$61.disabled = _p$._v$42 = _v$42);
10956
- _v$43 !== _p$._v$43 && className(_el$62, _p$._v$43 = _v$43);
10957
- _v$44 !== _p$._v$44 && className(_el$63, _p$._v$44 = _v$44);
10958
- _v$45 !== _p$._v$45 && (_el$63.disabled = _p$._v$45 = _v$45);
10959
- _v$46 !== _p$._v$46 && className(_el$64, _p$._v$46 = _v$46);
10960
- _v$47 !== _p$._v$47 && className(_el$65, _p$._v$47 = _v$47);
10961
- _v$48 !== _p$._v$48 && (_el$65.disabled = _p$._v$48 = _v$48);
10962
- _v$49 !== _p$._v$49 && className(_el$66, _p$._v$49 = _v$49);
10963
- _v$50 !== _p$._v$50 && className(_el$67, _p$._v$50 = _v$50);
10964
- _v$51 !== _p$._v$51 && (_el$67.disabled = _p$._v$51 = _v$51);
10965
- _v$52 !== _p$._v$52 && className(_el$68, _p$._v$52 = _v$52);
10966
- _v$53 !== _p$._v$53 && className(_el$69, _p$._v$53 = _v$53);
10967
- _v$54 !== _p$._v$54 && (_el$69.disabled = _p$._v$54 = _v$54);
10968
- _v$55 !== _p$._v$55 && className(_el$70, _p$._v$55 = _v$55);
10969
- _v$56 !== _p$._v$56 && className(_el$80, _p$._v$56 = _v$56);
10970
- _v$57 !== _p$._v$57 && className(_el$82, _p$._v$57 = _v$57);
11141
+ background-color: ${t2(colors.cyan[500], colors.cyan[400])};
11142
+ `, _v$56 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles().detailsHeader, "tsqd-query-details-header");
11143
+ _v$35 !== _p$._v$35 && className(_el$50, _p$._v$35 = _v$35);
11144
+ _v$36 !== _p$._v$36 && className(_el$51, _p$._v$36 = _v$36);
11145
+ _v$37 !== _p$._v$37 && className(_el$52, _p$._v$37 = _v$37);
11146
+ _v$38 !== _p$._v$38 && className(_el$56, _p$._v$38 = _v$38);
11147
+ _v$39 !== _p$._v$39 && className(_el$63, _p$._v$39 = _v$39);
11148
+ _v$40 !== _p$._v$40 && className(_el$64, _p$._v$40 = _v$40);
11149
+ _v$41 !== _p$._v$41 && className(_el$65, _p$._v$41 = _v$41);
11150
+ _v$42 !== _p$._v$42 && (_el$65.disabled = _p$._v$42 = _v$42);
11151
+ _v$43 !== _p$._v$43 && className(_el$66, _p$._v$43 = _v$43);
11152
+ _v$44 !== _p$._v$44 && className(_el$67, _p$._v$44 = _v$44);
11153
+ _v$45 !== _p$._v$45 && (_el$67.disabled = _p$._v$45 = _v$45);
11154
+ _v$46 !== _p$._v$46 && className(_el$68, _p$._v$46 = _v$46);
11155
+ _v$47 !== _p$._v$47 && className(_el$69, _p$._v$47 = _v$47);
11156
+ _v$48 !== _p$._v$48 && (_el$69.disabled = _p$._v$48 = _v$48);
11157
+ _v$49 !== _p$._v$49 && className(_el$70, _p$._v$49 = _v$49);
11158
+ _v$50 !== _p$._v$50 && className(_el$71, _p$._v$50 = _v$50);
11159
+ _v$51 !== _p$._v$51 && (_el$71.disabled = _p$._v$51 = _v$51);
11160
+ _v$52 !== _p$._v$52 && className(_el$72, _p$._v$52 = _v$52);
11161
+ _v$53 !== _p$._v$53 && className(_el$73, _p$._v$53 = _v$53);
11162
+ _v$54 !== _p$._v$54 && (_el$73.disabled = _p$._v$54 = _v$54);
11163
+ _v$55 !== _p$._v$55 && className(_el$74, _p$._v$55 = _v$55);
11164
+ _v$56 !== _p$._v$56 && className(_el$84, _p$._v$56 = _v$56);
11165
+ _v$57 !== _p$._v$57 && className(_el$86, _p$._v$57 = _v$57);
10971
11166
  return _p$;
10972
11167
  }, {
10973
11168
  _v$35: void 0,
@@ -10994,7 +11189,7 @@ var QueryDetails = () => {
10994
11189
  _v$56: void 0,
10995
11190
  _v$57: void 0
10996
11191
  });
10997
- return _el$46;
11192
+ return _el$50;
10998
11193
  }
10999
11194
  });
11000
11195
  };
@@ -11034,7 +11229,7 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
11034
11229
  });
11035
11230
  return value;
11036
11231
  };
11037
- var getStyles2 = () => {
11232
+ var stylesFactory2 = (theme) => {
11038
11233
  const {
11039
11234
  colors,
11040
11235
  font,
@@ -11043,6 +11238,7 @@ var getStyles2 = () => {
11043
11238
  shadow,
11044
11239
  border
11045
11240
  } = tokens;
11241
+ const t2 = (light, dark) => theme === "light" ? light : dark;
11046
11242
  return {
11047
11243
  devtoolsBtn: u`
11048
11244
  z-index: 100000;
@@ -11104,8 +11300,6 @@ var getStyles2 = () => {
11104
11300
  display: flex;
11105
11301
  gap: ${tokens.size[0.5]};
11106
11302
  & * {
11107
- font-family: 'Inter', sans-serif;
11108
- color: ${colors.gray[300]};
11109
11303
  box-sizing: border-box;
11110
11304
  text-transform: none;
11111
11305
  }
@@ -11132,7 +11326,7 @@ var getStyles2 = () => {
11132
11326
  left: 0;
11133
11327
  max-height: 90%;
11134
11328
  min-height: 3.5rem;
11135
- border-bottom: ${colors.darkGray[300]} 1px solid;
11329
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11136
11330
  `,
11137
11331
  "panel-position-bottom": u`
11138
11332
  bottom: 0;
@@ -11140,20 +11334,20 @@ var getStyles2 = () => {
11140
11334
  left: 0;
11141
11335
  max-height: 90%;
11142
11336
  min-height: 3.5rem;
11143
- border-top: ${colors.darkGray[300]} 1px solid;
11337
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11144
11338
  `,
11145
11339
  "panel-position-right": u`
11146
11340
  bottom: 0;
11147
11341
  right: 0;
11148
11342
  top: 0;
11149
- border-left: ${colors.darkGray[300]} 1px solid;
11343
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11150
11344
  max-width: 90%;
11151
11345
  `,
11152
11346
  "panel-position-left": u`
11153
11347
  bottom: 0;
11154
11348
  left: 0;
11155
11349
  top: 0;
11156
- border-right: ${colors.darkGray[300]} 1px solid;
11350
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11157
11351
  max-width: 90%;
11158
11352
  `,
11159
11353
  closeBtn: u`
@@ -11164,13 +11358,15 @@ var getStyles2 = () => {
11164
11358
  align-items: center;
11165
11359
  justify-content: center;
11166
11360
  outline: none;
11361
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11167
11362
  &:hover {
11168
- background-color: ${colors.darkGray[500]};
11363
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11169
11364
  }
11170
11365
  &:focus-visible {
11171
11366
  outline: 2px solid ${colors.blue[600]};
11172
11367
  }
11173
11368
  & svg {
11369
+ color: ${t2(colors.gray[600], colors.gray[400])};
11174
11370
  width: ${size2[2]};
11175
11371
  height: ${size2[2]};
11176
11372
  }
@@ -11179,11 +11375,10 @@ var getStyles2 = () => {
11179
11375
  bottom: 0;
11180
11376
  right: ${size2[2]};
11181
11377
  transform: translate(0, 100%);
11182
- background-color: ${colors.darkGray[700]};
11183
- border-right: ${colors.darkGray[300]} 1px solid;
11184
- border-left: ${colors.darkGray[300]} 1px solid;
11378
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11379
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11185
11380
  border-top: none;
11186
- border-bottom: ${colors.darkGray[300]} 1px solid;
11381
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11187
11382
  border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
11188
11383
  padding: ${size2[0.5]} ${size2[1.5]} ${size2[1]} ${size2[1.5]};
11189
11384
 
@@ -11204,10 +11399,9 @@ var getStyles2 = () => {
11204
11399
  top: 0;
11205
11400
  right: ${size2[2]};
11206
11401
  transform: translate(0, -100%);
11207
- background-color: ${colors.darkGray[700]};
11208
- border-right: ${colors.darkGray[300]} 1px solid;
11209
- border-left: ${colors.darkGray[300]} 1px solid;
11210
- border-top: ${colors.darkGray[300]} 1px solid;
11402
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11403
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11404
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11211
11405
  border-bottom: none;
11212
11406
  border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
11213
11407
  padding: ${size2[1]} ${size2[1.5]} ${size2[0.5]} ${size2[1.5]};
@@ -11225,11 +11419,10 @@ var getStyles2 = () => {
11225
11419
  bottom: ${size2[2]};
11226
11420
  left: 0;
11227
11421
  transform: translate(-100%, 0);
11228
- background-color: ${colors.darkGray[700]};
11229
11422
  border-right: none;
11230
- border-left: ${colors.darkGray[300]} 1px solid;
11231
- border-top: ${colors.darkGray[300]} 1px solid;
11232
- border-bottom: ${colors.darkGray[300]} 1px solid;
11423
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11424
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11425
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11233
11426
  border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
11234
11427
  padding: ${size2[1.5]} ${size2[0.5]} ${size2[1.5]} ${size2[1]};
11235
11428
 
@@ -11249,11 +11442,10 @@ var getStyles2 = () => {
11249
11442
  bottom: ${size2[2]};
11250
11443
  right: 0;
11251
11444
  transform: translate(100%, 0);
11252
- background-color: ${colors.darkGray[700]};
11253
11445
  border-left: none;
11254
- border-right: ${colors.darkGray[300]} 1px solid;
11255
- border-top: ${colors.darkGray[300]} 1px solid;
11256
- border-bottom: ${colors.darkGray[300]} 1px solid;
11446
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11447
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11448
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11257
11449
  border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
11258
11450
  padding: ${size2[1.5]} ${size2[1]} ${size2[1.5]} ${size2[0.5]};
11259
11451
 
@@ -11271,15 +11463,18 @@ var getStyles2 = () => {
11271
11463
  `,
11272
11464
  queriesContainer: u`
11273
11465
  flex: 1 1 700px;
11274
- background-color: ${colors.darkGray[700]};
11466
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11275
11467
  display: flex;
11276
11468
  flex-direction: column;
11469
+ & * {
11470
+ font-family: 'Inter', sans-serif;
11471
+ }
11277
11472
  `,
11278
11473
  dragHandle: u`
11279
11474
  position: absolute;
11280
11475
  transition: background-color 0.125s ease;
11281
11476
  &:hover {
11282
- background-color: ${colors.purple[400]}${alpha[90]};
11477
+ background-color: ${colors.purple[400]}${t2("", alpha[90])};
11283
11478
  }
11284
11479
  z-index: 4;
11285
11480
  `,
@@ -11313,7 +11508,7 @@ var getStyles2 = () => {
11313
11508
  align-items: center;
11314
11509
  padding: ${tokens.size[2]} ${tokens.size[2.5]};
11315
11510
  gap: ${tokens.size[3]};
11316
- border-bottom: ${colors.darkGray[500]} 1px solid;
11511
+ border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
11317
11512
  align-items: center;
11318
11513
  & > button {
11319
11514
  padding: 0;
@@ -11340,11 +11535,15 @@ var getStyles2 = () => {
11340
11535
  font-weight: ${font.weight.bold};
11341
11536
  line-height: ${font.lineHeight.xs};
11342
11537
  white-space: nowrap;
11538
+ color: ${t2(colors.gray[600], colors.gray[300])};
11343
11539
  `,
11344
11540
  queryFlavorLogo: u`
11345
11541
  font-weight: ${font.weight.semibold};
11346
11542
  font-size: ${font.size.xs};
11347
- background: linear-gradient(to right, #dd524b, #e9a03b);
11543
+ background: linear-gradient(
11544
+ to right,
11545
+ ${t2("#ea4037, #ff9b11", "#dd524b, #e9a03b")}
11546
+ );
11348
11547
  background-clip: text;
11349
11548
  -webkit-background-clip: text;
11350
11549
  line-height: 1;
@@ -11359,14 +11558,17 @@ var getStyles2 = () => {
11359
11558
  queryStatusTag: u`
11360
11559
  display: flex;
11361
11560
  gap: ${tokens.size[1.5]};
11362
- background: ${colors.darkGray[500]};
11561
+ box-sizing: border-box;
11562
+ height: ${tokens.size[6.5]};
11563
+ background: ${t2(colors.gray[50], colors.darkGray[500])};
11564
+ color: ${t2(colors.gray[700], colors.gray[300])};
11363
11565
  border-radius: ${tokens.border.radius.sm};
11364
11566
  font-size: ${font.size.sm};
11365
11567
  padding: ${tokens.size[1]};
11366
- padding-left: ${tokens.size[2]};
11568
+ padding-left: ${tokens.size[1.5]};
11367
11569
  align-items: center;
11368
11570
  font-weight: ${font.weight.medium};
11369
- border: none;
11571
+ border: ${t2("1px solid " + colors.gray[300], "1px solid transparent")};
11370
11572
  user-select: none;
11371
11573
  position: relative;
11372
11574
  &:focus-visible {
@@ -11383,8 +11585,8 @@ var getStyles2 = () => {
11383
11585
  display: flex;
11384
11586
  align-items: center;
11385
11587
  justify-content: center;
11386
- color: ${colors.gray[400]};
11387
- background-color: ${colors.darkGray[300]};
11588
+ color: ${t2(colors.gray[500], colors.gray[400])};
11589
+ background-color: ${t2(colors.gray[200], colors.darkGray[300])};
11388
11590
  border-radius: 2px;
11389
11591
  font-variant-numeric: tabular-nums;
11390
11592
  height: ${tokens.size[4.5]};
@@ -11392,15 +11594,15 @@ var getStyles2 = () => {
11392
11594
  statusTooltip: u`
11393
11595
  position: absolute;
11394
11596
  z-index: 1;
11395
- background-color: ${colors.darkGray[500]};
11597
+ background-color: ${t2(colors.gray[50], colors.darkGray[500])};
11396
11598
  top: 100%;
11397
11599
  left: 50%;
11398
11600
  transform: translate(-50%, calc(${tokens.size[2]}));
11399
11601
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11400
- border-radius: ${tokens.border.radius.md};
11602
+ border-radius: ${tokens.border.radius.sm};
11401
11603
  font-size: ${font.size.xs};
11402
- border: 1px solid ${colors.gray[600]};
11403
- color: ${tokens.colors["gray"][300]};
11604
+ border: 1px solid ${t2(colors.gray[400], colors.gray[600])};
11605
+ color: ${t2(colors["gray"][600], colors["gray"][300])};
11404
11606
 
11405
11607
  &::before {
11406
11608
  top: 0px;
@@ -11409,7 +11611,8 @@ var getStyles2 = () => {
11409
11611
  left: 50%;
11410
11612
  transform: translate(-50%, -100%);
11411
11613
  position: absolute;
11412
- border-color: transparent transparent ${colors.gray[600]} transparent;
11614
+ border-color: transparent transparent
11615
+ ${t2(colors.gray[400], colors.gray[600])} transparent;
11413
11616
  border-style: solid;
11414
11617
  border-width: 7px;
11415
11618
  /* transform: rotate(180deg); */
@@ -11420,17 +11623,14 @@ var getStyles2 = () => {
11420
11623
  content: ' ';
11421
11624
  display: block;
11422
11625
  left: 50%;
11423
- transform: translate(-50%, calc(-100% + 2.5px));
11626
+ transform: translate(-50%, calc(-100% + 2px));
11424
11627
  position: absolute;
11425
- border-color: transparent transparent ${colors.darkGray[500]}
11426
- transparent;
11628
+ border-color: transparent transparent
11629
+ ${t2(colors.gray[100], colors.darkGray[500])} transparent;
11427
11630
  border-style: solid;
11428
11631
  border-width: 7px;
11429
11632
  }
11430
11633
  `,
11431
- selectedQueryRow: u`
11432
- background-color: ${colors.darkGray[500]};
11433
- `,
11434
11634
  filtersContainer: u`
11435
11635
  display: flex;
11436
11636
  gap: ${tokens.size[2]};
@@ -11439,47 +11639,52 @@ var getStyles2 = () => {
11439
11639
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11440
11640
  padding-right: ${tokens.size[1.5]};
11441
11641
  border-radius: ${tokens.border.radius.sm};
11442
- background-color: ${colors.darkGray[400]};
11642
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11643
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11644
+ color: ${t2(colors.gray[700], colors.gray[300])};
11443
11645
  font-size: ${font.size.xs};
11444
11646
  display: flex;
11445
11647
  align-items: center;
11446
11648
  line-height: ${font.lineHeight.sm};
11447
11649
  gap: ${tokens.size[1.5]};
11448
11650
  max-width: 160px;
11449
- border: 1px solid ${colors.darkGray[200]};
11450
11651
  &:focus-visible {
11451
11652
  outline-offset: 2px;
11452
11653
  border-radius: ${border.radius.xs};
11453
11654
  outline: 2px solid ${colors.blue[800]};
11454
11655
  }
11656
+ & svg {
11657
+ color: ${t2(colors.gray[500], colors.gray[400])};
11658
+ }
11455
11659
  }
11456
11660
  `,
11457
11661
  filterInput: u`
11458
- padding: ${tokens.size[0.5]} ${tokens.size[2]};
11662
+ padding: ${size2[0.5]} ${size2[2]};
11459
11663
  border-radius: ${tokens.border.radius.sm};
11460
- background-color: ${colors.darkGray[400]};
11664
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11461
11665
  display: flex;
11462
11666
  box-sizing: content-box;
11463
11667
  align-items: center;
11464
11668
  gap: ${tokens.size[1.5]};
11465
11669
  max-width: 160px;
11466
11670
  min-width: 100px;
11467
- border: 1px solid ${colors.darkGray[200]};
11671
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11468
11672
  height: min-content;
11673
+ color: ${t2(colors.gray[600], colors.gray[400])};
11469
11674
  & > svg {
11470
- width: ${tokens.size[3]};
11471
- height: ${tokens.size[3]};
11675
+ width: ${size2[3]};
11676
+ height: ${size2[3]};
11472
11677
  }
11473
11678
  & input {
11474
11679
  font-size: ${font.size.xs};
11475
11680
  width: 100%;
11476
- background-color: ${colors.darkGray[400]};
11681
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11477
11682
  border: none;
11478
11683
  padding: 0;
11479
11684
  line-height: ${font.lineHeight.sm};
11480
- color: ${colors.gray[300]};
11685
+ color: ${t2(colors.gray[700], colors.gray[300])};
11481
11686
  &::placeholder {
11482
- color: ${colors.gray[300]};
11687
+ color: ${t2(colors.gray[700], colors.gray[300])};
11483
11688
  }
11484
11689
  &:focus {
11485
11690
  outline: none;
@@ -11495,24 +11700,26 @@ var getStyles2 = () => {
11495
11700
  filterSelect: u`
11496
11701
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11497
11702
  border-radius: ${tokens.border.radius.sm};
11498
- background-color: ${colors.darkGray[400]};
11703
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11499
11704
  display: flex;
11500
11705
  align-items: center;
11501
11706
  gap: ${tokens.size[1.5]};
11502
11707
  box-sizing: content-box;
11503
11708
  max-width: 160px;
11504
- border: 1px solid ${colors.darkGray[200]};
11709
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11505
11710
  height: min-content;
11506
11711
  & > svg {
11712
+ color: ${t2(colors.gray[600], colors.gray[400])};
11507
11713
  width: ${tokens.size[2]};
11508
11714
  height: ${tokens.size[2]};
11509
11715
  }
11510
11716
  & > select {
11511
11717
  appearance: none;
11718
+ color: ${t2(colors.gray[700], colors.gray[300])};
11512
11719
  min-width: 100px;
11513
11720
  line-height: ${font.lineHeight.sm};
11514
11721
  font-size: ${font.size.xs};
11515
- background-color: ${colors.darkGray[400]};
11722
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11516
11723
  border: none;
11517
11724
  &:focus {
11518
11725
  outline: none;
@@ -11530,7 +11737,8 @@ var getStyles2 = () => {
11530
11737
  `,
11531
11738
  actionsBtn: u`
11532
11739
  border-radius: ${tokens.border.radius.sm};
11533
- background-color: ${colors.darkGray[400]};
11740
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11741
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11534
11742
  width: 1.625rem;
11535
11743
  height: 1.625rem;
11536
11744
  justify-content: center;
@@ -11538,13 +11746,13 @@ var getStyles2 = () => {
11538
11746
  align-items: center;
11539
11747
  gap: ${tokens.size[1.5]};
11540
11748
  max-width: 160px;
11541
- border: 1px solid ${colors.darkGray[200]};
11542
11749
  cursor: pointer;
11543
11750
  padding: 0;
11544
11751
  &:hover {
11545
- background-color: ${colors.darkGray[500]};
11752
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11546
11753
  }
11547
11754
  & svg {
11755
+ color: ${t2(colors.gray[700], colors.gray[300])};
11548
11756
  width: ${tokens.size[3]};
11549
11757
  height: ${tokens.size[3]};
11550
11758
  }
@@ -11554,6 +11762,12 @@ var getStyles2 = () => {
11554
11762
  outline: 2px solid ${colors.blue[800]};
11555
11763
  }
11556
11764
  `,
11765
+ actionsBtnOffline: u`
11766
+ & svg {
11767
+ stroke: ${t2(colors.yellow[700], colors.yellow[500])};
11768
+ fill: ${t2(colors.yellow[700], colors.yellow[500])};
11769
+ }
11770
+ `,
11557
11771
  overflowQueryContainer: u`
11558
11772
  flex: 1;
11559
11773
  overflow-y: auto;
@@ -11566,9 +11780,11 @@ var getStyles2 = () => {
11566
11780
  display: flex;
11567
11781
  align-items: center;
11568
11782
  padding: 0;
11569
- background-color: inherit;
11570
11783
  border: none;
11571
11784
  cursor: pointer;
11785
+ color: ${t2(colors.gray[700], colors.gray[300])};
11786
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11787
+ line-height: 1;
11572
11788
  &:focus {
11573
11789
  outline: none;
11574
11790
  }
@@ -11578,7 +11794,7 @@ var getStyles2 = () => {
11578
11794
  outline: 2px solid ${colors.blue[800]};
11579
11795
  }
11580
11796
  &:hover .tsqd-query-hash {
11581
- background-color: ${colors.darkGray[600]};
11797
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
11582
11798
  }
11583
11799
 
11584
11800
  & .tsqd-query-observer-count {
@@ -11593,7 +11809,7 @@ var getStyles2 = () => {
11593
11809
  font-weight: ${font.weight.medium};
11594
11810
  border-bottom-width: 1px;
11595
11811
  border-bottom-style: solid;
11596
- border-bottom: 1px solid ${colors.darkGray[700]};
11812
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[700])};
11597
11813
  }
11598
11814
  & .tsqd-query-hash {
11599
11815
  user-select: text;
@@ -11604,7 +11820,7 @@ var getStyles2 = () => {
11604
11820
  flex: 1;
11605
11821
  padding: ${tokens.size[1]} ${tokens.size[2]};
11606
11822
  font-family: 'Menlo', 'Fira Code', monospace;
11607
- border-bottom: 1px solid ${colors.darkGray[400]};
11823
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11608
11824
  text-align: left;
11609
11825
  text-overflow: clip;
11610
11826
  word-break: break-word;
@@ -11615,15 +11831,20 @@ var getStyles2 = () => {
11615
11831
  display: flex;
11616
11832
  align-items: center;
11617
11833
  padding: 0 ${tokens.size[2]};
11618
- color: ${colors.gray[300]};
11619
- background-color: ${colors.darkGray[600]};
11620
- border-bottom: 1px solid ${colors.darkGray[400]};
11834
+ color: ${t2(colors.gray[800], colors.gray[300])};
11835
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
11836
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11621
11837
  font-size: ${font.size.xs};
11622
11838
  }
11623
11839
  `,
11840
+ selectedQueryRow: u`
11841
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11842
+ `,
11624
11843
  detailsContainer: u`
11625
11844
  flex: 1 1 700px;
11626
- background-color: ${colors.darkGray[700]};
11845
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11846
+ color: ${t2(colors.gray[700], colors.gray[300])};
11847
+ font-family: 'Inter', sans-serif;
11627
11848
  display: flex;
11628
11849
  flex-direction: column;
11629
11850
  overflow-y: auto;
@@ -11631,10 +11852,11 @@ var getStyles2 = () => {
11631
11852
  text-align: left;
11632
11853
  `,
11633
11854
  detailsHeader: u`
11855
+ font-family: 'Inter', sans-serif;
11634
11856
  position: sticky;
11635
11857
  top: 0;
11636
11858
  z-index: 2;
11637
- background-color: ${colors.darkGray[600]};
11859
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
11638
11860
  padding: ${tokens.size[1.5]} ${tokens.size[2]};
11639
11861
  font-weight: ${font.weight.medium};
11640
11862
  font-size: ${font.size.xs};
@@ -11667,6 +11889,10 @@ var getStyles2 = () => {
11667
11889
  font-size: ${font.size.xs};
11668
11890
  line-height: ${font.lineHeight.xs};
11669
11891
  }
11892
+
11893
+ & pre {
11894
+ margin: 0;
11895
+ }
11670
11896
  `,
11671
11897
  queryDetailsStatus: u`
11672
11898
  border: 1px solid ${colors.darkGray[200]};
@@ -11681,12 +11907,13 @@ var getStyles2 = () => {
11681
11907
  gap: ${tokens.size[2]};
11682
11908
  padding: 0px ${tokens.size[2]};
11683
11909
  & > button {
11910
+ font-family: 'Inter', sans-serif;
11684
11911
  font-size: ${font.size.xs};
11685
11912
  padding: ${tokens.size[1]} ${tokens.size[2]};
11686
11913
  display: flex;
11687
11914
  border-radius: ${tokens.border.radius.sm};
11688
- border: 1px solid ${colors.darkGray[400]};
11689
- background-color: ${colors.darkGray[600]};
11915
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
11916
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11690
11917
  align-items: center;
11691
11918
  gap: ${tokens.size[2]};
11692
11919
  font-weight: ${font.weight.medium};
@@ -11698,7 +11925,7 @@ var getStyles2 = () => {
11698
11925
  outline: 2px solid ${colors.blue[800]};
11699
11926
  }
11700
11927
  &:hover {
11701
- background-color: ${colors.darkGray[500]};
11928
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11702
11929
  }
11703
11930
 
11704
11931
  &:disabled {
@@ -11719,17 +11946,17 @@ var getStyles2 = () => {
11719
11946
  display: flex;
11720
11947
  border-radius: ${tokens.border.radius.sm};
11721
11948
  overflow: hidden;
11722
- border: 1px solid ${colors.darkGray[400]};
11723
- background-color: ${colors.darkGray[600]};
11949
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
11950
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11724
11951
  align-items: center;
11725
11952
  gap: ${tokens.size[2]};
11726
11953
  font-weight: ${font.weight.medium};
11727
11954
  line-height: ${font.lineHeight.sm};
11728
- color: ${tokens.colors.red[400]};
11955
+ color: ${t2(colors.red[500], colors.red[400])};
11729
11956
  cursor: pointer;
11730
11957
  position: relative;
11731
11958
  &:hover {
11732
- background-color: ${colors.darkGray[500]};
11959
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11733
11960
  }
11734
11961
  & > span {
11735
11962
  width: ${size2[1.5]};
@@ -11770,10 +11997,10 @@ var getStyles2 = () => {
11770
11997
  flex-direction: column;
11771
11998
  gap: ${size2[0.5]};
11772
11999
  border-radius: ${tokens.border.radius.sm};
11773
- border: 1px solid ${colors.gray[700]};
11774
- background-color: ${colors.darkGray[600]};
12000
+ border: 1px solid ${t2(colors.gray[300], colors.gray[700])};
12001
+ background-color: ${t2(colors.gray[50], colors.darkGray[600])};
11775
12002
  font-size: ${font.size.xs};
11776
- color: ${colors.gray[300]};
12003
+ color: ${t2(colors.gray[700], colors.gray[300])};
11777
12004
  z-index: 99999;
11778
12005
  min-width: 120px;
11779
12006
  padding: ${size2[0.5]};
@@ -11783,17 +12010,19 @@ var getStyles2 = () => {
11783
12010
  align-items: center;
11784
12011
  justify-content: space-between;
11785
12012
  border-radius: ${tokens.border.radius.xs};
11786
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12013
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11787
12014
  cursor: pointer;
11788
12015
  background-color: transparent;
11789
12016
  border: none;
12017
+ color: ${t2(colors.gray[700], colors.gray[300])};
11790
12018
  & svg {
12019
+ color: ${t2(colors.gray[600], colors.gray[400])};
11791
12020
  transform: rotate(-90deg);
11792
12021
  width: ${tokens.size[2]};
11793
12022
  height: ${tokens.size[2]};
11794
12023
  }
11795
12024
  &:hover {
11796
- background-color: ${colors.darkGray[500]};
12025
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11797
12026
  }
11798
12027
  &:focus-visible {
11799
12028
  outline-offset: 2px;
@@ -11805,33 +12034,48 @@ var getStyles2 = () => {
11805
12034
  }
11806
12035
  `,
11807
12036
  settingsMenuHeader: u`
11808
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12037
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11809
12038
  font-weight: ${font.weight.medium};
11810
- border-bottom: 1px solid ${colors.darkGray[400]};
11811
- color: ${colors.gray[400]};
12039
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
12040
+ color: ${t2(colors.gray[500], colors.gray[400])};
11812
12041
  font-size: ${font.size["xs"]};
11813
12042
  `,
11814
12043
  settingsSubButton: u`
11815
12044
  display: flex;
11816
12045
  align-items: center;
11817
12046
  justify-content: space-between;
11818
- color: ${colors.gray[300]};
12047
+ color: ${t2(colors.gray[700], colors.gray[300])};
11819
12048
  font-size: ${font.size["xs"]};
11820
12049
  border-radius: ${tokens.border.radius.xs};
11821
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12050
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11822
12051
  cursor: pointer;
11823
12052
  background-color: transparent;
11824
12053
  border: none;
12054
+ & svg {
12055
+ color: ${t2(colors.gray[600], colors.gray[400])};
12056
+ }
11825
12057
  &:hover {
11826
- background-color: ${colors.darkGray[500]};
12058
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11827
12059
  }
11828
12060
  &:focus-visible {
11829
12061
  outline-offset: 2px;
11830
12062
  outline: 2px solid ${colors.blue[800]};
11831
12063
  }
12064
+ `,
12065
+ themeSelectedButton: u`
12066
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
12067
+ color: ${t2(colors.purple[700], colors.purple[300])};
12068
+ & svg {
12069
+ color: ${t2(colors.purple[700], colors.purple[300])};
12070
+ }
12071
+ &:hover {
12072
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
12073
+ }
11832
12074
  `
11833
12075
  };
11834
12076
  };
12077
+ var lightStyles2 = stylesFactory2("light");
12078
+ var darkStyles2 = stylesFactory2("dark");
11835
12079
  delegateEvents(["click", "mousedown", "input"]);
11836
12080
  /*! Bundled license information:
11837
12081