@tanstack/query-devtools 5.0.0-rc.9 → 5.0.3

package/build/Devtools/{CIR3WCBJ.js → B2H37NSB.js}

@@ -1,4 +1,4 @@
-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';
+import { createContext, delegateEvents, createSignal, createMemo, createComponent, createEffect, insert, Show, createRenderEffect, className, on, onMount, setAttribute, spread, mergeProps, For, onCleanup, isServer, $PROXY, $TRACK, getListener, batch, createUniqueId, useContext, Index, template, use, untrack, useTransition, createRoot, splitProps, Portal, addEventListener, Switch, Match, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/Z53XT47W.js';
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -675,7 +675,7 @@ function clsx() {
   return n2;
 }
 
-// ../../node_modules/.pnpm/@solid-primitives+transition-group@1.0.2_solid-js@1.7.8/node_modules/@solid-primitives/transition-group/dist/index.js
+// ../../node_modules/.pnpm/@solid-primitives+transition-group@1.0.3_solid-js@1.8.1/node_modules/@solid-primitives/transition-group/dist/index.js
 var noop = () => {
 };
 function createListTransition(source, options) {
@@ -743,9 +743,12 @@ function createListTransition(source, options) {
   );
 }
 
-// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.1_solid-js@1.7.8/node_modules/@solid-primitives/utils/dist/chunk/R5675YMU.js
+// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.1_solid-js@1.8.1/node_modules/@solid-primitives/utils/dist/chunk/R5675YMU.js
 var isClient = !isServer;
 var isDev = isClient && !!DEV;
+var noop2 = () => void 0;
+var isNonNullable = (i2) => i2 != null;
+var filterNonNullable = (arr) => arr.filter(isNonNullable);
 function chain(callbacks) {
   return (...args) => {
     for (const callback of callbacks)
@@ -766,8 +769,42 @@ function accessWith(valueOrFn, ...args) {
   return typeof valueOrFn === "function" ? valueOrFn(...args) : valueOrFn;
 }
 var tryOnCleanup = isDev ? (fn) => getOwner() ? onCleanup(fn) : fn : onCleanup;
+function handleDiffArray(current, prev, handleAdded, handleRemoved) {
+  const currLength = current.length;
+  const prevLength = prev.length;
+  let i2 = 0;
+  if (!prevLength) {
+    for (; i2 < currLength; i2++)
+      handleAdded(current[i2]);
+    return;
+  }
+  if (!currLength) {
+    for (; i2 < prevLength; i2++)
+      handleRemoved(prev[i2]);
+    return;
+  }
+  for (; i2 < prevLength; i2++) {
+    if (prev[i2] !== current[i2])
+      break;
+  }
+  let prevEl;
+  let currEl;
+  prev = prev.slice(i2);
+  current = current.slice(i2);
+  for (prevEl of prev) {
+    if (!current.includes(prevEl))
+      handleRemoved(prevEl);
+  }
+  for (currEl of current) {
+    if (!prev.includes(currEl))
+      handleAdded(currEl);
+  }
+}
 
-// ../../node_modules/.pnpm/@solid-primitives+refs@1.0.4_solid-js@1.7.8/node_modules/@solid-primitives/refs/dist/index.js
+// ../../node_modules/.pnpm/@solid-primitives+refs@1.0.5_solid-js@1.8.1/node_modules/@solid-primitives/refs/dist/index.js
+function mergeRefs(...refs) {
+  return chain(refs);
+}
 var defaultElementPredicate = isServer ? (item) => item != null && typeof item === "object" && "t" in item : (item) => item instanceof Element;
 function getResolvedElements(value, predicate) {
   if (predicate(value))
@@ -797,7 +834,7 @@ function resolveElements(fn, predicate = defaultElementPredicate, serverPredicat
   return memo;
 }
 
-// ../../node_modules/.pnpm/solid-transition-group@0.2.2_solid-js@1.7.8/node_modules/solid-transition-group/dist/index.js
+// ../../node_modules/.pnpm/solid-transition-group@0.2.2_solid-js@1.8.1/node_modules/solid-transition-group/dist/index.js
 function createClassnames(props) {
   return createMemo(() => {
     const name = props.name || "s";
@@ -919,7 +956,7 @@ var TransitionGroup = (props) => {
   });
 };
 
-// ../../node_modules/.pnpm/@solid-primitives+keyed@1.2.0_solid-js@1.7.8/node_modules/@solid-primitives/keyed/dist/index.js
+// ../../node_modules/.pnpm/@solid-primitives+keyed@1.2.0_solid-js@1.8.1/node_modules/@solid-primitives/keyed/dist/index.js
 var FALLBACK = Symbol("fallback");
 function dispose(list) {
   for (const o2 of list)
@@ -1017,45 +1054,7 @@ function Key(props) {
   );
 }
 
-// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.0_solid-js@1.7.8/node_modules/@solid-primitives/utils/dist/chunk/APG4HSEJ.js
-var noop3 = () => void 0;
-var isNonNullable2 = (i2) => i2 != null;
-var filterNonNullable2 = (arr) => arr.filter(isNonNullable2);
-var access2 = (v) => typeof v === "function" && !v.length ? v() : v;
-var asArray2 = (value) => Array.isArray(value) ? value : value ? [value] : [];
-function handleDiffArray2(current, prev, handleAdded, handleRemoved) {
-  const currLength = current.length;
-  const prevLength = prev.length;
-  let i2 = 0;
-  if (!prevLength) {
-    for (; i2 < currLength; i2++)
-      handleAdded(current[i2]);
-    return;
-  }
-  if (!currLength) {
-    for (; i2 < prevLength; i2++)
-      handleRemoved(prev[i2]);
-    return;
-  }
-  for (; i2 < prevLength; i2++) {
-    if (prev[i2] !== current[i2])
-      break;
-  }
-  let prevEl;
-  let currEl;
-  prev = prev.slice(i2);
-  current = current.slice(i2);
-  for (prevEl of prev) {
-    if (!current.includes(prevEl))
-      handleRemoved(prevEl);
-  }
-  for (currEl of current) {
-    if (!prev.includes(currEl))
-      handleAdded(currEl);
-  }
-}
-
-// ../../node_modules/.pnpm/@solid-primitives+storage@1.3.11_solid-js@1.7.8/node_modules/@solid-primitives/storage/dist/index.js
+// ../../node_modules/.pnpm/@solid-primitives+storage@1.3.11_solid-js@1.8.1/node_modules/@solid-primitives/storage/dist/index.js
 function createStorage(props) {
   const [error, setError] = createSignal();
   const handleError = props?.throw ? (err, fallback) => {
@@ -1274,10 +1273,30 @@ var cookieStorage = addClearMethod({
   }
 });
 
-// ../../node_modules/.pnpm/@solid-primitives+resize-observer@2.0.18_solid-js@1.7.8/node_modules/@solid-primitives/resize-observer/dist/index.js
+// ../../node_modules/.pnpm/@solid-primitives+event-listener@2.3.0_solid-js@1.8.1/node_modules/@solid-primitives/event-listener/dist/index.js
+function makeEventListener(target, type, handler, options) {
+  target.addEventListener(type, handler, options);
+  return tryOnCleanup(target.removeEventListener.bind(target, type, handler, options));
+}
+function createEventListener(targets, type, handler, options) {
+  if (isServer)
+    return;
+  const attachListeners = () => {
+    asArray(access(targets)).forEach((el) => {
+      if (el)
+        asArray(access(type)).forEach((type2) => makeEventListener(el, type2, handler, options));
+    });
+  };
+  if (typeof targets === "function")
+    createEffect(attachListeners);
+  else
+    createRenderEffect(attachListeners);
+}
+
+// ../../node_modules/.pnpm/@solid-primitives+resize-observer@2.0.18_solid-js@1.8.1/node_modules/@solid-primitives/resize-observer/dist/index.js
 function makeResizeObserver(callback, options) {
   if (isServer) {
-    return { observe: noop3, unobserve: noop3 };
+    return { observe: noop2, unobserve: noop2 };
   }
   const observer = new ResizeObserver(callback);
   onCleanup(observer.disconnect.bind(observer));
@@ -1289,8 +1308,8 @@ function makeResizeObserver(callback, options) {
 function createResizeObserver(targets, onResize, options) {
   if (isServer)
     return;
-  const previousMap = /* @__PURE__ */ new WeakMap(), { observe, unobserve } = makeResizeObserver((entries3) => {
-    for (const entry of entries3) {
+  const previousMap = /* @__PURE__ */ new WeakMap(), { observe, unobserve } = makeResizeObserver((entries2) => {
+    for (const entry of entries2) {
       const { contentRect, target } = entry, width = Math.round(contentRect.width), height = Math.round(contentRect.height), previous = previousMap.get(target);
       if (!previous || previous.width !== width || previous.height !== height) {
         onResize(contentRect, target, entry);
@@ -1299,34 +1318,14 @@ function createResizeObserver(targets, onResize, options) {
     }
   }, options);
   createEffect((prev) => {
-    const refs = filterNonNullable2(asArray2(access2(targets)));
-    handleDiffArray2(refs, prev, observe, unobserve);
+    const refs = filterNonNullable(asArray(access(targets)));
+    handleDiffArray(refs, prev, observe, unobserve);
     return refs;
   }, []);
 }
 
-// ../../node_modules/.pnpm/@solid-primitives+event-listener@2.3.0_solid-js@1.7.8/node_modules/@solid-primitives/event-listener/dist/index.js
-function makeEventListener(target, type, handler, options) {
-  target.addEventListener(type, handler, options);
-  return tryOnCleanup(target.removeEventListener.bind(target, type, handler, options));
-}
-function createEventListener(targets, type, handler, options) {
-  if (isServer)
-    return;
-  const attachListeners = () => {
-    asArray(access(targets)).forEach((el) => {
-      if (el)
-        asArray(access(type)).forEach((type2) => makeEventListener(el, type2, handler, options));
-    });
-  };
-  if (typeof targets === "function")
-    createEffect(attachListeners);
-  else
-    createRenderEffect(attachListeners);
-}
-
-// ../../node_modules/.pnpm/@solid-primitives+props@3.1.8_solid-js@1.7.8/node_modules/@solid-primitives/props/dist/index.js
-function trueFn3() {
+// ../../node_modules/.pnpm/@solid-primitives+props@3.1.8_solid-js@1.8.1/node_modules/@solid-primitives/props/dist/index.js
+function trueFn2() {
   return true;
 }
 var propTraps = {
@@ -1338,8 +1337,8 @@ var propTraps = {
   has(_, property) {
     return _.has(property);
   },
-  set: trueFn3,
-  deleteProperty: trueFn3,
+  set: trueFn2,
+  deleteProperty: trueFn2,
   getOwnPropertyDescriptor(_, property) {
     return {
       configurable: true,
@@ -1347,8 +1346,8 @@ var propTraps = {
       get() {
         return _.get(property);
       },
-      set: trueFn3,
-      deleteProperty: trueFn3
+      set: trueFn2,
+      deleteProperty: trueFn2
     };
   },
   ownKeys(_) {
@@ -1447,12 +1446,7 @@ function combineProps(...args) {
   );
 }
 
-// ../../node_modules/.pnpm/@solid-primitives+refs@1.0.5_solid-js@1.7.8/node_modules/@solid-primitives/refs/dist/index.js
-function mergeRefs(...refs) {
-  return chain(refs);
-}
-
-// ../../node_modules/.pnpm/@kobalte+utils@0.9.0_solid-js@1.7.8/node_modules/@kobalte/utils/dist/index.js
+// ../../node_modules/.pnpm/@kobalte+utils@0.9.0_solid-js@1.8.1/node_modules/@kobalte/utils/dist/index.js
 function addItemToArray(array, item, index = -1) {
   if (!(index in array)) {
     return [...array, item];
@@ -1722,7 +1716,7 @@ function getFocusableTreeWalker(root, opts, scope) {
   }
   return walker2;
 }
-function noop4() {
+function noop3() {
   return;
 }
 function isPointInPolygon(point, polygon) {
@@ -1869,9 +1863,11 @@ var visuallyHiddenStyles = {
   "white-space": "nowrap"
 };
 
-// ../../node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/store/dist/store.js
+// ../../node_modules/.pnpm/solid-js@1.8.1/node_modules/solid-js/store/dist/store.js
 var $RAW = Symbol("store-raw");
 var $NODE = Symbol("store-node");
+var $HAS = Symbol("store-has");
+var $SELF = Symbol("store-self");
 function wrap$1(value) {
   let p2 = value[$PROXY];
   if (!p2) {
@@ -1879,9 +1875,9 @@ function wrap$1(value) {
       value: p2 = new Proxy(value, proxyTraps$1)
     });
     if (!Array.isArray(value)) {
-      const keys3 = Object.keys(value), desc = Object.getOwnPropertyDescriptors(value);
-      for (let i2 = 0, l2 = keys3.length; i2 < l2; i2++) {
-        const prop = keys3[i2];
+      const keys2 = Object.keys(value), desc = Object.getOwnPropertyDescriptors(value);
+      for (let i2 = 0, l2 = keys2.length; i2 < l2; i2++) {
+        const prop = keys2[i2];
         if (desc[prop].get) {
           Object.defineProperty(value, prop, {
             enumerable: desc[prop].enumerable,
@@ -1918,9 +1914,9 @@ function unwrap(item, set = /* @__PURE__ */ new Set()) {
       item = Object.assign({}, item);
     else
       set.add(item);
-    const keys3 = Object.keys(item), desc = Object.getOwnPropertyDescriptors(item);
-    for (let i2 = 0, l2 = keys3.length; i2 < l2; i2++) {
-      prop = keys3[i2];
+    const keys2 = Object.keys(item), desc = Object.getOwnPropertyDescriptors(item);
+    for (let i2 = 0, l2 = keys2.length; i2 < l2; i2++) {
+      prop = keys2[i2];
       if (desc[prop].get)
         continue;
       v = item[prop];
@@ -1930,16 +1926,23 @@ function unwrap(item, set = /* @__PURE__ */ new Set()) {
   }
   return item;
 }
-function getDataNodes(target) {
-  let nodes = target[$NODE];
+function getNodes(target, symbol) {
+  let nodes = target[symbol];
   if (!nodes)
-    Object.defineProperty(target, $NODE, {
+    Object.defineProperty(target, symbol, {
       value: nodes = /* @__PURE__ */ Object.create(null)
     });
   return nodes;
 }
-function getDataNode(nodes, property, value) {
-  return nodes[property] || (nodes[property] = createDataNode(value));
+function getNode(nodes, property, value) {
+  if (nodes[property])
+    return nodes[property];
+  const [s2, set] = createSignal(value, {
+    equals: false,
+    internal: true
+  });
+  s2.$ = set;
+  return nodes[property] = s2;
 }
 function proxyDescriptor$1(target, property) {
   const desc = Reflect.getOwnPropertyDescriptor(target, property);
@@ -1951,23 +1954,12 @@ function proxyDescriptor$1(target, property) {
   return desc;
 }
 function trackSelf(target) {
-  if (getListener()) {
-    const nodes = getDataNodes(target);
-    (nodes._ || (nodes._ = createDataNode()))();
-  }
+  getListener() && getNode(getNodes(target, $NODE), $SELF)();
 }
 function ownKeys(target) {
   trackSelf(target);
   return Reflect.ownKeys(target);
 }
-function createDataNode(value) {
-  const [s2, set] = createSignal(value, {
-    equals: false,
-    internal: true
-  });
-  s2.$ = set;
-  return s2;
-}
 var proxyTraps$1 = {
   get(target, property, receiver) {
     if (property === $RAW)
@@ -1978,22 +1970,22 @@ var proxyTraps$1 = {
       trackSelf(target);
       return receiver;
     }
-    const nodes = getDataNodes(target);
+    const nodes = getNodes(target, $NODE);
     const tracked = nodes[property];
     let value = tracked ? tracked() : target[property];
-    if (property === $NODE || property === "__proto__")
+    if (property === $NODE || property === $HAS || property === "__proto__")
       return value;
     if (!tracked) {
       const desc = Object.getOwnPropertyDescriptor(target, property);
       if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property)) && !(desc && desc.get))
-        value = getDataNode(nodes, property, value)();
+        value = getNode(nodes, property, value)();
     }
     return isWrappable(value) ? wrap$1(value) : value;
   },
   has(target, property) {
-    if (property === $RAW || property === $PROXY || property === $TRACK || property === $NODE || property === "__proto__")
+    if (property === $RAW || property === $PROXY || property === $TRACK || property === $NODE || property === $HAS || property === "__proto__")
       return true;
-    this.get(target, property, target);
+    getListener() && getNode(getNodes(target, $HAS), property)();
     return property in target;
   },
   set() {
@@ -2009,24 +2001,29 @@ function setProperty(state2, property, value, deleting = false) {
   if (!deleting && state2[property] === value)
     return;
   const prev = state2[property], len = state2.length;
-  if (value === void 0)
+  if (value === void 0) {
     delete state2[property];
-  else
+    if (state2[$HAS] && state2[$HAS][property] && prev !== void 0)
+      state2[$HAS][property].$();
+  } else {
     state2[property] = value;
-  let nodes = getDataNodes(state2), node;
-  if (node = getDataNode(nodes, property, prev))
+    if (state2[$HAS] && state2[$HAS][property] && prev === void 0)
+      state2[$HAS][property].$();
+  }
+  let nodes = getNodes(state2, $NODE), node;
+  if (node = getNode(nodes, property, prev))
     node.$(() => value);
   if (Array.isArray(state2) && state2.length !== len) {
     for (let i2 = state2.length; i2 < len; i2++)
       (node = nodes[i2]) && node.$();
-    (node = getDataNode(nodes, "length", len)) && node.$(state2.length);
+    (node = getNode(nodes, "length", len)) && node.$(state2.length);
   }
-  (node = nodes._) && node.$();
+  (node = nodes[$SELF]) && node.$();
 }
 function mergeStoreNode(state2, value) {
-  const keys3 = Object.keys(value);
-  for (let i2 = 0; i2 < keys3.length; i2 += 1) {
-    const key = keys3[i2];
+  const keys2 = Object.keys(value);
+  for (let i2 = 0; i2 < keys2.length; i2 += 1) {
+    const key = keys2[i2];
     setProperty(state2, key, value[key]);
   }
 }
@@ -2064,11 +2061,7 @@ function updatePath(current, path, traversed = []) {
       }
       return;
     } else if (isArray4 && partType === "object") {
-      const {
-        from = 0,
-        to = current.length - 1,
-        by = 1
-      } = part;
+      const { from = 0, to = current.length - 1, by = 1 } = part;
       for (let i2 = from; i2 <= to; i2 += by) {
         updatePath(current, [i2].concat(path), traversed);
       }
@@ -2144,7 +2137,7 @@ function $d6fd23bc337660df$var$getLanguage(locale) {
   return locale.split("-")[0];
 }
 
-// ../../node_modules/.pnpm/@floating-ui+utils@0.1.4/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+// ../../node_modules/.pnpm/@floating-ui+utils@0.1.6/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var sides = ["top", "right", "bottom", "left"];
 var min = Math.min;
 var max = Math.max;
@@ -2164,7 +2157,7 @@ var oppositeAlignmentMap = {
   start: "end",
   end: "start"
 };
-function clamp3(start, value, end) {
+function clamp2(start, value, end) {
   return max(start, min(value, end));
 }
 function evaluate(value, param) {
@@ -2507,7 +2500,7 @@ var arrow = (options) => ({
     const min$1 = minPadding;
     const max2 = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset2 = clamp3(min$1, center, max2);
+    const offset2 = clamp2(min$1, center, max2);
     const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center != offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
     return {
@@ -2780,14 +2773,14 @@ var shift = function(options) {
         const maxSide = mainAxis === "y" ? "bottom" : "right";
         const min2 = mainAxisCoord + overflow[minSide];
         const max2 = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp3(min2, mainAxisCoord, max2);
+        mainAxisCoord = clamp2(min2, mainAxisCoord, max2);
       }
       if (checkCrossAxis) {
         const minSide = crossAxis === "y" ? "top" : "left";
         const maxSide = crossAxis === "y" ? "bottom" : "right";
         const min2 = crossAxisCoord + overflow[minSide];
         const max2 = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp3(min2, crossAxisCoord, max2);
+        crossAxisCoord = clamp2(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
         ...state2,
@@ -2881,7 +2874,7 @@ var size = function(options) {
   };
 };
 
-// ../../node_modules/.pnpm/@floating-ui+utils@0.1.4/node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.mjs
+// ../../node_modules/.pnpm/@floating-ui+utils@0.1.6/node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.mjs
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || "").toLowerCase();
@@ -3419,8 +3412,8 @@ function observeMove(element, onMove) {
       threshold: max(0, min(1, threshold)) || 1
     };
     let isFirstUpdate = true;
-    function handleObserve(entries3) {
-      const ratio = entries3[0].intersectionRatio;
+    function handleObserve(entries2) {
+      const ratio = entries2[0].intersectionRatio;
       if (ratio !== threshold) {
         if (!isFirstUpdate) {
           return refresh();
@@ -3531,7 +3524,7 @@ var computePosition2 = (reference, floating, options) => {
   });
 };
 
-// ../../node_modules/.pnpm/@kobalte+core@0.11.0_solid-js@1.7.8/node_modules/@kobalte/core/dist/esm/index.js
+// ../../node_modules/.pnpm/@kobalte+core@0.11.0_solid-js@1.8.1/node_modules/@kobalte/core/dist/esm/index.js
 createContext();
 function buildNodes(params) {
   let index = params.startIndex ?? 0;
@@ -4119,7 +4112,7 @@ var POINTER_DOWN_OUTSIDE_EVENT = "interactOutside.pointerDownOutside";
 var FOCUS_OUTSIDE_EVENT = "interactOutside.focusOutside";
 function createInteractOutside(props, ref) {
   let pointerDownTimeoutId;
-  let clickHandler = noop4;
+  let clickHandler = noop3;
   const ownerDocument = () => getDocument(ref());
   const onPointerDownOutside = (e2) => props.onPointerDownOutside?.(e2);
   const onFocusOutside = (e2) => props.onFocusOutside?.(e2);
@@ -4568,11 +4561,11 @@ function createCollator(options) {
   });
 }
 var Selection = class _Selection extends Set {
-  constructor(keys3, anchorKey, currentKey) {
-    super(keys3);
-    if (keys3 instanceof _Selection) {
-      this.anchorKey = anchorKey || keys3.anchorKey;
-      this.currentKey = currentKey || keys3.currentKey;
+  constructor(keys2, anchorKey, currentKey) {
+    super(keys2);
+    if (keys2 instanceof _Selection) {
+      this.anchorKey = anchorKey || keys2.anchorKey;
+      this.currentKey = currentKey || keys2.currentKey;
     } else {
       this.anchorKey = anchorKey;
       this.currentKey = currentKey;
@@ -4636,9 +4629,9 @@ function createMultipleSelectionState(props) {
   const [selectionBehavior, setSelectionBehavior] = createSignal(access(props.selectionBehavior));
   const selectionMode = () => access(props.selectionMode);
   const disallowEmptySelection = () => access(props.disallowEmptySelection) ?? false;
-  const setSelectedKeys = (keys3) => {
-    if (access(props.allowDuplicateSelectionEvents) || !isSameSelection(keys3, selectedKeys())) {
-      _setSelectedKeys(keys3);
+  const setSelectedKeys = (keys2) => {
+    if (access(props.allowDuplicateSelectionEvents) || !isSameSelection(keys2, selectedKeys())) {
+      _setSelectedKeys(keys2);
     }
   };
   createEffect(() => {
@@ -5253,15 +5246,15 @@ var SelectionManager = class {
     return [];
   }
   getKeyRangeInternal(from, to) {
-    const keys3 = [];
+    const keys2 = [];
     let key = from;
     while (key != null) {
       const item = this.collection().getItem(key);
       if (item && item.type === "item") {
-        keys3.push(key);
+        keys2.push(key);
       }
       if (key === to) {
-        return keys3;
+        return keys2;
       }
       key = this.collection().getKeyAfter(key);
     }
@@ -5290,18 +5283,18 @@ var SelectionManager = class {
     if (retrievedKey == null) {
       return;
     }
-    const keys3 = new Selection(this.state.selectedKeys());
-    if (keys3.has(retrievedKey)) {
-      keys3.delete(retrievedKey);
+    const keys2 = new Selection(this.state.selectedKeys());
+    if (keys2.has(retrievedKey)) {
+      keys2.delete(retrievedKey);
     } else if (this.canSelectItem(retrievedKey)) {
-      keys3.add(retrievedKey);
-      keys3.anchorKey = retrievedKey;
-      keys3.currentKey = retrievedKey;
+      keys2.add(retrievedKey);
+      keys2.anchorKey = retrievedKey;
+      keys2.currentKey = retrievedKey;
     }
-    if (this.disallowEmptySelection() && keys3.size === 0) {
+    if (this.disallowEmptySelection() && keys2.size === 0) {
       return;
     }
-    this.state.setSelectedKeys(keys3);
+    this.state.setSelectedKeys(keys2);
   }
   /** Replaces the selection with only the given key. */
   replaceSelection(key) {
@@ -5316,12 +5309,12 @@ var SelectionManager = class {
     this.state.setSelectedKeys(selection);
   }
   /** Replaces the selection with the given keys. */
-  setSelectedKeys(keys3) {
+  setSelectedKeys(keys2) {
     if (this.selectionMode() === "none") {
       return;
     }
     const selection = new Selection();
-    for (const key of keys3) {
+    for (const key of keys2) {
       const retrievedKey = this.getKey(key);
       if (retrievedKey != null) {
         selection.add(retrievedKey);
@@ -5406,7 +5399,7 @@ var SelectionManager = class {
     return !item || item.disabled;
   }
   getAllSelectableKeys() {
-    const keys3 = [];
+    const keys2 = [];
     const addKeys = (key) => {
       while (key != null) {
         if (this.canSelectItem(key)) {
@@ -5415,14 +5408,14 @@ var SelectionManager = class {
             continue;
           }
           if (item.type === "item") {
-            keys3.push(key);
+            keys2.push(key);
           }
         }
         key = this.collection().getKeyAfter(key);
       }
     };
     addKeys(this.collection().getFirstKey());
-    return keys3;
+    return keys2;
   }
 };
 var ListCollection = class {
@@ -5478,8 +5471,8 @@ var ListCollection = class {
     return this.keyMap.get(key);
   }
   at(idx) {
-    const keys3 = [...this.getKeys()];
-    return this.getItem(keys3[idx]);
+    const keys2 = [...this.getKeys()];
+    return this.getItem(keys2[idx]);
   }
 };
 function createListState(props) {
@@ -8744,12 +8737,12 @@ var untransformValue = function(json, type, superJson) {
 
 // ../../node_modules/.pnpm/superjson@1.12.4/node_modules/superjson/dist/esm/accessDeep.js
 var getNthKey = function(value, n2) {
-  var keys3 = value.keys();
+  var keys2 = value.keys();
   while (n2 > 0) {
-    keys3.next();
+    keys2.next();
     n2--;
   }
-  return keys3.next().value;
+  return keys2.next().value;
 };
 function validatePath(path) {
   if (includes(path, "__proto__")) {
@@ -9049,7 +9042,7 @@ function isArray3(payload) {
   return getType2(payload) === "Array";
 }
 
-// ../../node_modules/.pnpm/copy-anything@3.0.2/node_modules/copy-anything/dist/index.es.js
+// ../../node_modules/.pnpm/copy-anything@3.0.5/node_modules/copy-anything/dist/index.js
 function assignProp(carry, key, newVal, originalObject, includeNonenumerable) {
   const propType = {}.propertyIsEnumerable.call(originalObject, key) ? "enumerable" : "nonenumerable";
   if (propType === "enumerable")
@@ -9244,6 +9237,19 @@ var sortFns = {
 var convertRemToPixels = (rem) => {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 };
+var getPreferredColorScheme = () => {
+  const [colorScheme, setColorScheme] = createSignal("dark");
+  onMount(() => {
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    setColorScheme(query.matches ? "dark" : "light");
+    const listener = (e2) => {
+      setColorScheme(e2.matches ? "dark" : "light");
+    };
+    query.addEventListener("change", listener);
+    onCleanup(() => query.removeEventListener("change", listener));
+  });
+  return colorScheme;
+};
 var updateNestedDataByPath = (oldData, updatePath2, value) => {
   if (updatePath2.length === 0) {
     return value;
@@ -9326,19 +9332,23 @@ var deleteNestedDataByPath = (oldData, deletePath) => {
 };
 
 // src/icons/index.tsx
-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">`);
-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">`);
-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">`);
-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">`);
-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">`);
-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">`);
-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">`);
-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">`);
-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">`);
-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">`);
-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">`);
-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">`);
-var _tmpl$13 = /* @__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">`);
+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>`);
+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>`);
+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>`);
+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>`);
+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>`);
+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>`);
+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>`);
+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>`);
+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">`);
+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">`);
+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>`);
+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>`);
+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>`);
+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>`);
+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>`);
+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>`);
+var _tmpl$17 = /* @__PURE__ */ template(`<svg version=1.0 viewBox="0 0 633 633"><linearGradient 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></circle><defs><filter 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 x=-137.5 y=412 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=89.5 cy=610.5 rx=214.5 ry=186 fill=#015064 stroke=#00CFE2 stroke-width=25></ellipse></g><defs><filter 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 x=316.5 y=412 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=543.5 cy=610.5 rx=214.5 ry=186 fill=#015064 stroke=#00CFE2 stroke-width=25></ellipse></g><defs><filter 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 x=-137.5 y=450 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=89.5 cy=648.5 rx=214.5 ry=186 fill=#015064 stroke=#00A8B8 stroke-width=25></ellipse></g><defs><filter 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 x=316.5 y=450 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=543.5 cy=648.5 rx=214.5 ry=186 fill=#015064 stroke=#00A8B8 stroke-width=25></ellipse></g><defs><filter 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 x=-137.5 y=486 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=89.5 cy=684.5 rx=214.5 ry=186 fill=#015064 stroke=#007782 stroke-width=25></ellipse></g><defs><filter 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 x=316.5 y=486 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=543.5 cy=684.5 rx=214.5 ry=186 fill=#015064 stroke=#007782 stroke-width=25></ellipse></g><defs><filter 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 x=272.2 y=308 width=176.9 height=129.3 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><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 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-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 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 x=73.2 y=113.8 width=280.6 height=317.4 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><linearGradient 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-rule=evenodd></path><g stroke=#2F8A00><linearGradient 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-rule=evenodd stroke-width=13></path><linearGradient 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-rule=evenodd stroke-width=13></path><linearGradient 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-rule=evenodd stroke-width=13></path><linearGradient 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-rule=evenodd stroke-width=13></path><linearGradient 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-rule=evenodd stroke-width=13></path><linearGradient 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-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 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 x=50.5 y=399 width=532 height=633 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><linearGradient 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></ellipse></g><defs><filter 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 x=391 y=-24 width=288 height=283 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><linearGradient 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></circle><linearGradient 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-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient 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-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient 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-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient 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-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient 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-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient 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-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient 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-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient 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-linecap=round stroke-linejoin=bevel stroke-width=12>`);
 function Search() {
   return _tmpl$();
 }
@@ -9368,41 +9378,145 @@ function ArrowRight() {
     return _el$7;
   })();
 }
-function Wifi() {
+function Sun() {
   return _tmpl$6();
 }
-function Offline() {
-  return (() => {
-    const _el$9 = _tmpl$7();
-    createRenderEffect((_p$) => {
-      const _v$ = tokens.colors.yellow[500], _v$2 = tokens.colors.yellow[500];
-      _v$ !== _p$._v$ && setAttribute(_el$9, "stroke", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && setAttribute(_el$9, "fill", _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: void 0,
-      _v$2: void 0
-    });
-    return _el$9;
-  })();
+function Moon() {
+  return _tmpl$7();
 }
-function Settings() {
+function Monitor() {
   return _tmpl$8();
 }
-function Copier() {
+function Wifi() {
   return _tmpl$9();
 }
-function CopiedCopier() {
+function Offline() {
   return _tmpl$10();
 }
-function ErrorCopier() {
+function Settings() {
   return _tmpl$11();
 }
-function List() {
+function Copier() {
   return _tmpl$12();
 }
+function CopiedCopier(props) {
+  return (() => {
+    const _el$15 = _tmpl$13(), _el$16 = _el$15.firstChild;
+    createRenderEffect(() => setAttribute(_el$16, "stroke", props.theme === "dark" ? "#12B76A" : "#027A48"));
+    return _el$15;
+  })();
+}
+function ErrorCopier() {
+  return _tmpl$14();
+}
+function List() {
+  return _tmpl$15();
+}
+function Check(props) {
+  return [createComponent(Show, {
+    get when() {
+      return props.checked;
+    },
+    get children() {
+      const _el$19 = _tmpl$13(), _el$20 = _el$19.firstChild;
+      createRenderEffect(() => setAttribute(_el$20, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
+      return _el$19;
+    }
+  }), createComponent(Show, {
+    get when() {
+      return !props.checked;
+    },
+    get children() {
+      const _el$21 = _tmpl$16(), _el$22 = _el$21.firstChild;
+      createRenderEffect(() => setAttribute(_el$22, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
+      return _el$21;
+    }
+  })];
+}
 function TanstackLogo() {
-  return _tmpl$13();
+  const id = createUniqueId();
+  return (() => {
+    const _el$23 = _tmpl$17(), _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$26 = _el$25.nextSibling, _el$27 = _el$26.firstChild, _el$28 = _el$26.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$28.nextSibling, _el$31 = _el$30.nextSibling, _el$32 = _el$31.firstChild, _el$33 = _el$31.nextSibling, _el$34 = _el$33.firstChild, _el$35 = _el$33.nextSibling, _el$36 = _el$35.nextSibling, _el$37 = _el$36.firstChild, _el$38 = _el$36.nextSibling, _el$39 = _el$38.firstChild, _el$40 = _el$38.nextSibling, _el$41 = _el$40.nextSibling, _el$42 = _el$41.firstChild, _el$43 = _el$41.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$43.nextSibling, _el$46 = _el$45.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$46.nextSibling, _el$49 = _el$48.firstChild, _el$50 = _el$48.nextSibling, _el$51 = _el$50.nextSibling, _el$52 = _el$51.firstChild, _el$53 = _el$51.nextSibling, _el$54 = _el$53.firstChild, _el$55 = _el$53.nextSibling, _el$56 = _el$55.nextSibling, _el$57 = _el$56.firstChild, _el$58 = _el$56.nextSibling, _el$59 = _el$58.firstChild, _el$60 = _el$58.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling, _el$63 = _el$62.nextSibling, _el$64 = _el$63.nextSibling, _el$65 = _el$64.nextSibling, _el$66 = _el$60.nextSibling, _el$67 = _el$66.firstChild, _el$68 = _el$66.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$68.nextSibling, _el$71 = _el$70.firstChild, _el$72 = _el$71.nextSibling, _el$73 = _el$72.nextSibling, _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling, _el$79 = _el$78.nextSibling, _el$80 = _el$79.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$70.nextSibling, _el$87 = _el$86.firstChild, _el$88 = _el$86.nextSibling, _el$89 = _el$88.firstChild, _el$90 = _el$88.nextSibling, _el$91 = _el$90.firstChild, _el$92 = _el$91.nextSibling, _el$93 = _el$90.nextSibling, _el$94 = _el$93.firstChild, _el$95 = _el$93.nextSibling, _el$96 = _el$95.firstChild, _el$97 = _el$95.nextSibling, _el$98 = _el$97.firstChild, _el$99 = _el$98.nextSibling, _el$100 = _el$99.nextSibling, _el$101 = _el$100.nextSibling, _el$102 = _el$101.nextSibling, _el$103 = _el$102.nextSibling, _el$104 = _el$103.nextSibling, _el$105 = _el$104.nextSibling, _el$106 = _el$105.nextSibling, _el$107 = _el$106.nextSibling, _el$108 = _el$107.nextSibling, _el$109 = _el$108.nextSibling, _el$110 = _el$109.nextSibling, _el$111 = _el$110.nextSibling, _el$112 = _el$111.nextSibling, _el$113 = _el$112.nextSibling, _el$114 = _el$113.nextSibling, _el$115 = _el$114.nextSibling;
+    setAttribute(_el$24, "id", `a-${id}`);
+    setAttribute(_el$25, "fill", `url(#a-${id})`);
+    setAttribute(_el$27, "id", `am-${id}`);
+    setAttribute(_el$28, "id", `b-${id}`);
+    setAttribute(_el$29, "filter", `url(#am-${id})`);
+    setAttribute(_el$30, "mask", `url(#b-${id})`);
+    setAttribute(_el$32, "id", `ah-${id}`);
+    setAttribute(_el$33, "id", `k-${id}`);
+    setAttribute(_el$34, "filter", `url(#ah-${id})`);
+    setAttribute(_el$35, "mask", `url(#k-${id})`);
+    setAttribute(_el$37, "id", `ae-${id}`);
+    setAttribute(_el$38, "id", `j-${id}`);
+    setAttribute(_el$39, "filter", `url(#ae-${id})`);
+    setAttribute(_el$40, "mask", `url(#j-${id})`);
+    setAttribute(_el$42, "id", `ai-${id}`);
+    setAttribute(_el$43, "id", `i-${id}`);
+    setAttribute(_el$44, "filter", `url(#ai-${id})`);
+    setAttribute(_el$45, "mask", `url(#i-${id})`);
+    setAttribute(_el$47, "id", `aj-${id}`);
+    setAttribute(_el$48, "id", `h-${id}`);
+    setAttribute(_el$49, "filter", `url(#aj-${id})`);
+    setAttribute(_el$50, "mask", `url(#h-${id})`);
+    setAttribute(_el$52, "id", `ag-${id}`);
+    setAttribute(_el$53, "id", `g-${id}`);
+    setAttribute(_el$54, "filter", `url(#ag-${id})`);
+    setAttribute(_el$55, "mask", `url(#g-${id})`);
+    setAttribute(_el$57, "id", `af-${id}`);
+    setAttribute(_el$58, "id", `f-${id}`);
+    setAttribute(_el$59, "filter", `url(#af-${id})`);
+    setAttribute(_el$60, "mask", `url(#f-${id})`);
+    setAttribute(_el$64, "id", `m-${id}`);
+    setAttribute(_el$65, "fill", `url(#m-${id})`);
+    setAttribute(_el$67, "id", `ak-${id}`);
+    setAttribute(_el$68, "id", `e-${id}`);
+    setAttribute(_el$69, "filter", `url(#ak-${id})`);
+    setAttribute(_el$70, "mask", `url(#e-${id})`);
+    setAttribute(_el$71, "id", `n-${id}`);
+    setAttribute(_el$72, "fill", `url(#n-${id})`);
+    setAttribute(_el$74, "id", `r-${id}`);
+    setAttribute(_el$75, "fill", `url(#r-${id})`);
+    setAttribute(_el$76, "id", `s-${id}`);
+    setAttribute(_el$77, "fill", `url(#s-${id})`);
+    setAttribute(_el$78, "id", `q-${id}`);
+    setAttribute(_el$79, "fill", `url(#q-${id})`);
+    setAttribute(_el$80, "id", `p-${id}`);
+    setAttribute(_el$81, "fill", `url(#p-${id})`);
+    setAttribute(_el$82, "id", `o-${id}`);
+    setAttribute(_el$83, "fill", `url(#o-${id})`);
+    setAttribute(_el$84, "id", `l-${id}`);
+    setAttribute(_el$85, "fill", `url(#l-${id})`);
+    setAttribute(_el$87, "id", `al-${id}`);
+    setAttribute(_el$88, "id", `d-${id}`);
+    setAttribute(_el$89, "filter", `url(#al-${id})`);
+    setAttribute(_el$90, "mask", `url(#d-${id})`);
+    setAttribute(_el$91, "id", `u-${id}`);
+    setAttribute(_el$92, "fill", `url(#u-${id})`);
+    setAttribute(_el$94, "id", `ad-${id}`);
+    setAttribute(_el$95, "id", `c-${id}`);
+    setAttribute(_el$96, "filter", `url(#ad-${id})`);
+    setAttribute(_el$97, "mask", `url(#c-${id})`);
+    setAttribute(_el$98, "id", `t-${id}`);
+    setAttribute(_el$99, "fill", `url(#t-${id})`);
+    setAttribute(_el$100, "id", `v-${id}`);
+    setAttribute(_el$101, "stroke", `url(#v-${id})`);
+    setAttribute(_el$102, "id", `aa-${id}`);
+    setAttribute(_el$103, "stroke", `url(#aa-${id})`);
+    setAttribute(_el$104, "id", `w-${id}`);
+    setAttribute(_el$105, "stroke", `url(#w-${id})`);
+    setAttribute(_el$106, "id", `ac-${id}`);
+    setAttribute(_el$107, "stroke", `url(#ac-${id})`);
+    setAttribute(_el$108, "id", `ab-${id}`);
+    setAttribute(_el$109, "stroke", `url(#ab-${id})`);
+    setAttribute(_el$110, "id", `y-${id}`);
+    setAttribute(_el$111, "stroke", `url(#y-${id})`);
+    setAttribute(_el$112, "id", `x-${id}`);
+    setAttribute(_el$113, "stroke", `url(#x-${id})`);
+    setAttribute(_el$114, "id", `z-${id}`);
+    setAttribute(_el$115, "stroke", `url(#z-${id})`);
+    return _el$23;
+  })();
 }
 
 // src/Context.ts
@@ -9415,18 +9529,25 @@ var QueryDevtoolsContext = createContext({
 function useQueryDevtoolsContext() {
   return useContext(QueryDevtoolsContext);
 }
+var ThemeContext = createContext(
+  () => "dark"
+);
+function useTheme() {
+  return useContext(ThemeContext);
+}
 
 // src/Explorer.tsx
-var _tmpl$14 = /* @__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">`);
+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>`);
 var _tmpl$22 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
-var _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items" aria-label="Remove all items">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item" aria-label="Delete item">`);
-var _tmpl$52 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$62 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
-var _tmpl$72 = /* @__PURE__ */ template(`<input>`);
-var _tmpl$82 = /* @__PURE__ */ template(`<div><span>:`);
-var _tmpl$92 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
-var _tmpl$102 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items"aria-label="Remove all items">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item"aria-label="Delete item">`);
+var _tmpl$52 = /* @__PURE__ */ template(`<button title="Toggle value"aria-label="Toggle value">`);
+var _tmpl$62 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$72 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
+var _tmpl$82 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$92 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$102 = /* @__PURE__ */ template(`<div><span>:`);
+var _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
 function chunkArray(array, size2) {
   if (size2 < 1)
     return [];
@@ -9439,10 +9560,13 @@ function chunkArray(array, size2) {
   return result;
 }
 var Expander = (props) => {
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
   return (() => {
-    const _el$ = _tmpl$14();
-    createRenderEffect(() => className(_el$, clsx(styles.expander, u`
+    const _el$ = _tmpl$18();
+    createRenderEffect(() => className(_el$, clsx(styles().expander, u`
           transform: rotate(${props.expanded ? 90 : 0}deg);
         `, props.expanded && u`
             & svg {
@@ -9453,7 +9577,10 @@ var Expander = (props) => {
   })();
 };
 var CopyButton = (props) => {
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
   const [copyState, setCopyState] = createSignal("NoCopy");
   return (() => {
     const _el$2 = _tmpl$22();
@@ -9484,7 +9611,11 @@ var CopyButton = (props) => {
             return copyState() === "SuccessCopy";
           },
           get children() {
-            return createComponent(CopiedCopier, {});
+            return createComponent(CopiedCopier, {
+              get theme() {
+                return theme();
+              }
+            });
           }
         }), createComponent(Match, {
           get when() {
@@ -9497,7 +9628,7 @@ var CopyButton = (props) => {
       }
     }));
     createRenderEffect((_p$) => {
-      const _v$ = styles.actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
+      const _v$ = styles().actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
       _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && setAttribute(_el$2, "aria-label", _p$._v$2 = _v$2);
       return _p$;
@@ -9509,7 +9640,10 @@ var CopyButton = (props) => {
   })();
 };
 var ClearArrayButton = (props) => {
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
   const queryClient = useQueryDevtoolsContext().client;
   return (() => {
     const _el$3 = _tmpl$32();
@@ -9519,12 +9653,15 @@ var ClearArrayButton = (props) => {
       queryClient.setQueryData(props.activeQuery.queryKey, newData);
     };
     insert(_el$3, createComponent(List, {}));
-    createRenderEffect(() => className(_el$3, styles.actionButton));
+    createRenderEffect(() => className(_el$3, styles().actionButton));
     return _el$3;
   })();
 };
 var DeleteItemButton = (props) => {
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
   const queryClient = useQueryDevtoolsContext().client;
   return (() => {
     const _el$4 = _tmpl$42();
@@ -9534,15 +9671,46 @@ var DeleteItemButton = (props) => {
       queryClient.setQueryData(props.activeQuery.queryKey, newData);
     };
     insert(_el$4, createComponent(Trash, {}));
-    createRenderEffect(() => className(_el$4, clsx(styles.actionButton)));
+    createRenderEffect(() => className(_el$4, clsx(styles().actionButton)));
     return _el$4;
   })();
 };
+var ToggleValueButton = (props) => {
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
+  const queryClient = useQueryDevtoolsContext().client;
+  return (() => {
+    const _el$5 = _tmpl$52();
+    _el$5.$$click = () => {
+      const oldData = props.activeQuery.state.data;
+      const newData = updateNestedDataByPath(oldData, props.dataPath, !props.value);
+      queryClient.setQueryData(props.activeQuery.queryKey, newData);
+    };
+    insert(_el$5, createComponent(Check, {
+      get theme() {
+        return theme();
+      },
+      get checked() {
+        return props.value;
+      }
+    }));
+    createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
+          width: ${tokens.size[3.5]};
+          height: ${tokens.size[3.5]};
+        `)));
+    return _el$5;
+  })();
+};
 function isIterable(x) {
   return Symbol.iterator in x;
 }
 function Explorer(props) {
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
   const queryClient = useQueryDevtoolsContext().client;
   const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
   const toggleExpanded = () => setExpanded((old) => !old);
@@ -9585,36 +9753,36 @@ function Explorer(props) {
   const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
   const currentDataPath = props.dataPath ?? [];
   return (() => {
-    const _el$5 = _tmpl$52();
-    insert(_el$5, createComponent(Show, {
+    const _el$6 = _tmpl$62();
+    insert(_el$6, createComponent(Show, {
       get when() {
         return subEntryPages().length;
       },
       get children() {
         return [(() => {
-          const _el$6 = _tmpl$62(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$10 = _el$9.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.firstChild;
-          _el$7.$$click = () => toggleExpanded();
-          insert(_el$7, createComponent(Expander, {
+          const _el$7 = _tmpl$72(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$9.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild;
+          _el$8.$$click = () => toggleExpanded();
+          insert(_el$8, createComponent(Expander, {
             get expanded() {
               return expanded();
             }
-          }), _el$8);
-          insert(_el$9, () => props.label);
-          insert(_el$11, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$12);
-          insert(_el$11, () => subEntries().length, _el$12);
-          insert(_el$11, () => subEntries().length > 1 ? `items` : `item`, null);
-          insert(_el$6, createComponent(Show, {
+          }), _el$9);
+          insert(_el$10, () => props.label);
+          insert(_el$12, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$13);
+          insert(_el$12, () => subEntries().length, _el$13);
+          insert(_el$12, () => subEntries().length > 1 ? `items` : `item`, null);
+          insert(_el$7, createComponent(Show, {
             get when() {
               return props.editable;
             },
             get children() {
-              const _el$13 = _tmpl$52();
-              insert(_el$13, createComponent(CopyButton, {
+              const _el$14 = _tmpl$62();
+              insert(_el$14, createComponent(CopyButton, {
                 get value() {
                   return props.value;
                 }
               }), null);
-              insert(_el$13, createComponent(Show, {
+              insert(_el$14, createComponent(Show, {
                 get when() {
                   return props.itemsDeletable && props.activeQuery !== void 0;
                 },
@@ -9627,7 +9795,7 @@ function Explorer(props) {
                   });
                 }
               }), null);
-              insert(_el$13, createComponent(Show, {
+              insert(_el$14, createComponent(Show, {
                 get when() {
                   return type() === "array" && props.activeQuery !== void 0;
                 },
@@ -9640,22 +9808,22 @@ function Explorer(props) {
                   });
                 }
               }), null);
-              createRenderEffect(() => className(_el$13, styles.actions));
-              return _el$13;
+              createRenderEffect(() => className(_el$14, styles().actions));
+              return _el$14;
             }
           }), null);
           createRenderEffect((_p$) => {
-            const _v$3 = styles.expanderButtonContainer, _v$4 = styles.expanderButton, _v$5 = styles.info;
-            _v$3 !== _p$._v$3 && className(_el$6, _p$._v$3 = _v$3);
-            _v$4 !== _p$._v$4 && className(_el$7, _p$._v$4 = _v$4);
-            _v$5 !== _p$._v$5 && className(_el$11, _p$._v$5 = _v$5);
+            const _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
+            _v$3 !== _p$._v$3 && className(_el$7, _p$._v$3 = _v$3);
+            _v$4 !== _p$._v$4 && className(_el$8, _p$._v$4 = _v$4);
+            _v$5 !== _p$._v$5 && className(_el$12, _p$._v$5 = _v$5);
             return _p$;
           }, {
             _v$3: void 0,
             _v$4: void 0,
             _v$5: void 0
           });
-          return _el$6;
+          return _el$7;
         })(), createComponent(Show, {
           get when() {
             return expanded();
@@ -9666,8 +9834,8 @@ function Explorer(props) {
                 return subEntryPages().length === 1;
               },
               get children() {
-                const _el$14 = _tmpl$52();
-                insert(_el$14, createComponent(Key, {
+                const _el$15 = _tmpl$62();
+                insert(_el$15, createComponent(Key, {
                   get each() {
                     return subEntries();
                   },
@@ -9698,38 +9866,38 @@ function Explorer(props) {
                     });
                   }
                 }));
-                createRenderEffect(() => className(_el$14, styles.subEntry));
-                return _el$14;
+                createRenderEffect(() => className(_el$15, styles().subEntry));
+                return _el$15;
               }
             }), createComponent(Show, {
               get when() {
                 return subEntryPages().length > 1;
               },
               get children() {
-                const _el$15 = _tmpl$52();
-                insert(_el$15, createComponent(Index, {
+                const _el$16 = _tmpl$62();
+                insert(_el$16, createComponent(Index, {
                   get each() {
                     return subEntryPages();
                   },
-                  children: (entries3, index) => (() => {
-                    const _el$20 = _tmpl$92(), _el$21 = _el$20.firstChild, _el$22 = _el$21.firstChild, _el$23 = _el$22.firstChild, _el$27 = _el$23.nextSibling, _el$25 = _el$27.nextSibling, _el$28 = _el$25.nextSibling; _el$28.nextSibling;
-                    _el$22.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
-                    insert(_el$22, createComponent(Expander, {
+                  children: (entries2, index) => (() => {
+                    const _el$22 = _tmpl$112(), _el$23 = _el$22.firstChild, _el$24 = _el$23.firstChild, _el$25 = _el$24.firstChild, _el$29 = _el$25.nextSibling, _el$27 = _el$29.nextSibling, _el$30 = _el$27.nextSibling; _el$30.nextSibling;
+                    _el$24.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
+                    insert(_el$24, createComponent(Expander, {
                       get expanded() {
                         return expandedPages().includes(index);
                       }
-                    }), _el$23);
-                    insert(_el$22, index * 100, _el$27);
-                    insert(_el$22, index * 100 + 100 - 1, _el$28);
-                    insert(_el$21, createComponent(Show, {
+                    }), _el$25);
+                    insert(_el$24, index * 100, _el$29);
+                    insert(_el$24, index * 100 + 100 - 1, _el$30);
+                    insert(_el$23, createComponent(Show, {
                       get when() {
                         return expandedPages().includes(index);
                       },
                       get children() {
-                        const _el$29 = _tmpl$52();
-                        insert(_el$29, createComponent(Key, {
+                        const _el$31 = _tmpl$62();
+                        insert(_el$31, createComponent(Key, {
                           get each() {
-                            return entries3();
+                            return entries2();
                           },
                           by: (entry) => entry.label,
                           children: (entry) => createComponent(Explorer, {
@@ -9753,70 +9921,96 @@ function Explorer(props) {
                             }
                           })
                         }));
-                        createRenderEffect(() => className(_el$29, styles.subEntry));
-                        return _el$29;
+                        createRenderEffect(() => className(_el$31, styles().subEntry));
+                        return _el$31;
                       }
                     }), null);
                     createRenderEffect((_p$) => {
-                      const _v$10 = styles.entry, _v$11 = styles.expanderButton;
-                      _v$10 !== _p$._v$10 && className(_el$21, _p$._v$10 = _v$10);
-                      _v$11 !== _p$._v$11 && className(_el$22, _p$._v$11 = _v$11);
+                      const _v$10 = styles().entry, _v$11 = styles().expanderButton;
+                      _v$10 !== _p$._v$10 && className(_el$23, _p$._v$10 = _v$10);
+                      _v$11 !== _p$._v$11 && className(_el$24, _p$._v$11 = _v$11);
                       return _p$;
                     }, {
                       _v$10: void 0,
                       _v$11: void 0
                     });
-                    return _el$20;
+                    return _el$22;
                   })()
                 }));
-                createRenderEffect(() => className(_el$15, styles.subEntry));
-                return _el$15;
+                createRenderEffect(() => className(_el$16, styles().subEntry));
+                return _el$16;
               }
             })];
           }
         })];
       }
     }), null);
-    insert(_el$5, createComponent(Show, {
+    insert(_el$6, createComponent(Show, {
       get when() {
         return subEntryPages().length === 0;
       },
       get children() {
-        const _el$16 = _tmpl$82(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild;
-        insert(_el$17, () => props.label, _el$18);
-        insert(_el$16, createComponent(Show, {
+        const _el$17 = _tmpl$102(), _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild;
+        insert(_el$18, () => props.label, _el$19);
+        insert(_el$17, createComponent(Show, {
           get when() {
-            return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number");
+            return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number" || type() === "boolean");
           },
           get fallback() {
             return (() => {
-              const _el$30 = _tmpl$102();
-              insert(_el$30, () => displayValue(props.value));
-              createRenderEffect(() => className(_el$30, styles.value));
-              return _el$30;
+              const _el$32 = _tmpl$92();
+              insert(_el$32, () => displayValue(props.value));
+              createRenderEffect(() => className(_el$32, styles().value));
+              return _el$32;
             })();
           },
           get children() {
-            const _el$19 = _tmpl$72();
-            _el$19.addEventListener("change", (changeEvent) => {
-              const oldData = props.activeQuery.state.data;
-              const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
-              queryClient.setQueryData(props.activeQuery.queryKey, newData);
-            });
-            createRenderEffect((_p$) => {
-              const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles.value, styles.editableInput);
-              _v$6 !== _p$._v$6 && setAttribute(_el$19, "type", _p$._v$6 = _v$6);
-              _v$7 !== _p$._v$7 && className(_el$19, _p$._v$7 = _v$7);
-              return _p$;
-            }, {
-              _v$6: void 0,
-              _v$7: void 0
-            });
-            createRenderEffect(() => _el$19.value = props.value);
-            return _el$19;
+            return [createComponent(Show, {
+              get when() {
+                return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number");
+              },
+              get children() {
+                const _el$20 = _tmpl$82();
+                _el$20.addEventListener("change", (changeEvent) => {
+                  const oldData = props.activeQuery.state.data;
+                  const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
+                  queryClient.setQueryData(props.activeQuery.queryKey, newData);
+                });
+                createRenderEffect((_p$) => {
+                  const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles().value, styles().editableInput);
+                  _v$6 !== _p$._v$6 && setAttribute(_el$20, "type", _p$._v$6 = _v$6);
+                  _v$7 !== _p$._v$7 && className(_el$20, _p$._v$7 = _v$7);
+                  return _p$;
+                }, {
+                  _v$6: void 0,
+                  _v$7: void 0
+                });
+                createRenderEffect(() => _el$20.value = props.value);
+                return _el$20;
+              }
+            }), createComponent(Show, {
+              get when() {
+                return type() === "boolean";
+              },
+              get children() {
+                const _el$21 = _tmpl$92();
+                insert(_el$21, createComponent(ToggleValueButton, {
+                  get activeQuery() {
+                    return props.activeQuery;
+                  },
+                  dataPath: currentDataPath,
+                  get value() {
+                    return props.value;
+                  }
+                }), null);
+                insert(_el$21, () => displayValue(props.value), null);
+                createRenderEffect(() => className(_el$21, clsx(styles().value, styles().actions, styles().editableInput)));
+                return _el$21;
+              }
+            })];
           }
         }), null);
-        insert(_el$16, createComponent(Show, {
+        insert(_el$17, createComponent(Show, {
           get when() {
             return props.editable && props.itemsDeletable && props.activeQuery !== void 0;
           },
@@ -9830,28 +10024,29 @@ function Explorer(props) {
           }
         }), null);
         createRenderEffect((_p$) => {
-          const _v$8 = styles.row, _v$9 = styles.label;
-          _v$8 !== _p$._v$8 && className(_el$16, _p$._v$8 = _v$8);
-          _v$9 !== _p$._v$9 && className(_el$17, _p$._v$9 = _v$9);
+          const _v$8 = styles().row, _v$9 = styles().label;
+          _v$8 !== _p$._v$8 && className(_el$17, _p$._v$8 = _v$8);
+          _v$9 !== _p$._v$9 && className(_el$18, _p$._v$9 = _v$9);
           return _p$;
         }, {
           _v$8: void 0,
           _v$9: void 0
         });
-        return _el$16;
+        return _el$17;
       }
     }), null);
-    createRenderEffect(() => className(_el$5, styles.entry));
-    return _el$5;
+    createRenderEffect(() => className(_el$6, styles().entry));
+    return _el$6;
   })();
 }
-var getStyles = () => {
+var stylesFactory = (theme) => {
   const {
     colors,
     font,
     size: size2,
     border
   } = tokens;
+  const t2 = (light, dark) => theme === "light" ? light : dark;
   return {
     entry: u`
       & * {
@@ -9865,7 +10060,7 @@ var getStyles = () => {
     subEntry: u`
       margin: 0 0 0 0.5em;
       padding-left: 0.75em;
-      border-left: 2px solid ${colors.darkGray[400]};
+      border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
       /* outline: 1px solid ${colors.teal[400]}; */
     `,
     expander: u`
@@ -9914,21 +10109,22 @@ var getStyles = () => {
       }
     `,
     info: u`
-      color: ${colors.gray[500]};
+      color: ${t2(colors.gray[500], colors.gray[500])};
       font-size: ${font.size.xs};
       margin-left: ${size2[1]};
       /* outline: 1px solid ${colors.yellow[400]}; */
     `,
     label: u`
-      color: ${colors.gray[300]};
+      color: ${t2(colors.gray[700], colors.gray[300])};
     `,
     value: u`
-      color: ${colors.purple[400]};
+      color: ${t2(colors.purple[600], colors.purple[400])};
       flex-grow: 1;
     `,
     actions: u`
       display: inline-flex;
       gap: ${size2[2]};
+      align-items: center;
     `,
     row: u`
       display: inline-flex;
@@ -9936,19 +10132,22 @@ var getStyles = () => {
       width: 100%;
       margin-bottom: ${size2[0.5]};
       line-height: 1.125rem;
+      align-items: center;
     `,
     editableInput: u`
       border: none;
-      padding: 0px ${size2[1]};
+      padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
       flex-grow: 1;
-      background-color: ${colors.gray[900]};
+      border-radius: ${border.radius.xs};
+      background-color: ${t2(colors.gray[200], colors.darkGray[500])};
 
       &:hover {
-        background-color: ${colors.gray[800]};
+        background-color: ${t2(colors.gray[300], colors.darkGray[600])};
       }
     `,
     actionButton: u`
       background-color: transparent;
+      color: ${t2(colors.gray[500], colors.gray[500])};
       border: none;
       display: inline-flex;
       padding: 0px;
@@ -9961,14 +10160,7 @@ var getStyles = () => {
       z-index: 1;
 
       &:hover svg {
-        .copier,
-        .list {
-          stroke: ${colors.gray[500]} !important;
-        }
-
-        .list-item {
-          stroke: ${colors.gray[700]};
-        }
+        color: ${t2(colors.gray[600], colors.gray[400])};
       }
 
       &:focus-visible {
@@ -9979,6 +10171,8 @@ var getStyles = () => {
     `
   };
 };
+var lightStyles = stylesFactory("light");
+var darkStyles = stylesFactory("dark");
 delegateEvents(["click"]);
 
 // src/fonts.ts
@@ -9990,7 +10184,7 @@ var loadFonts = () => {
 };
 
 // src/Devtools.tsx
-var _tmpl$15 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
+var _tmpl$19 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
 var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
 var _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
@@ -10000,22 +10194,27 @@ var _tmpl$73 = /* @__PURE__ */ template(`<span>Top`);
 var _tmpl$83 = /* @__PURE__ */ template(`<span>Bottom`);
 var _tmpl$93 = /* @__PURE__ */ template(`<span>Left`);
 var _tmpl$103 = /* @__PURE__ */ template(`<span>Right`);
-var _tmpl$112 = /* @__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">`);
-var _tmpl$122 = /* @__PURE__ */ template(`<option>Sort by `);
-var _tmpl$132 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
-var _tmpl$142 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
-var _tmpl$152 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
-var _tmpl$16 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$17 = /* @__PURE__ */ template(`<button><span></span><span>`);
-var _tmpl$18 = /* @__PURE__ */ template(`<button><span></span> Error`);
-var _tmpl$19 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
-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">`);
-var _tmpl$21 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$113 = /* @__PURE__ */ template(`<span>Theme`);
+var _tmpl$122 = /* @__PURE__ */ template(`<span>Light`);
+var _tmpl$132 = /* @__PURE__ */ template(`<span>Dark`);
+var _tmpl$142 = /* @__PURE__ */ template(`<span>System`);
+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>`);
+var _tmpl$162 = /* @__PURE__ */ template(`<option>Sort by `);
+var _tmpl$172 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
+var _tmpl$182 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
+var _tmpl$192 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
+var _tmpl$20 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$21 = /* @__PURE__ */ template(`<button><span></span><span>`);
+var _tmpl$222 = /* @__PURE__ */ template(`<button><span></span> Error`);
+var _tmpl$232 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
+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">`);
+var _tmpl$25 = /* @__PURE__ */ template(`<option>`);
 var firstBreakpoint = 1024;
 var secondBreakpoint = 796;
 var thirdBreakpoint = 700;
 var BUTTON_POSITION = "bottom-right";
 var POSITION = "bottom";
+var THEME_PREFERENCE = "system";
 var INITIAL_IS_OPEN = false;
 var DEFAULT_HEIGHT = 500;
 var DEFAULT_WIDTH = 500;
@@ -10024,33 +10223,51 @@ var DEFAULT_SORT_ORDER = 1;
 var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
 var [panelWidth, setPanelWidth] = createSignal(0);
 var DevtoolsComponent = (props) => {
+  const [localStore, setLocalStore] = createLocalStorage({
+    prefix: "TanstackQueryDevtools"
+  });
+  const colorScheme = getPreferredColorScheme();
+  const theme = createMemo(() => {
+    const preference = localStore.theme_preference || THEME_PREFERENCE;
+    if (preference !== "system")
+      return preference;
+    return colorScheme();
+  });
   return createComponent(QueryDevtoolsContext.Provider, {
     value: props,
     get children() {
-      return createComponent(Devtools, {});
+      return createComponent(ThemeContext.Provider, {
+        value: theme,
+        get children() {
+          return createComponent(Devtools, {
+            localStore,
+            setLocalStore
+          });
+        }
+      });
     }
   });
 };
 var Devtools_default = DevtoolsComponent;
-var Devtools = () => {
+var Devtools = (props) => {
   loadFonts();
-  const styles = getStyles2();
-  const [localStore, setLocalStore] = createLocalStorage({
-    prefix: "TanstackQueryDevtools"
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
   });
   const buttonPosition = createMemo(() => {
     return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
   });
   const isOpen = createMemo(() => {
-    return localStore.open === "true" ? true : localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
+    return props.localStore.open === "true" ? true : props.localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
   });
   const position = createMemo(() => {
-    return localStore.position || useQueryDevtoolsContext().position || POSITION;
+    return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
   });
   createEffect(() => {
     const root = document.querySelector(".tsqd-parent-container");
-    const height = localStore.height || DEFAULT_HEIGHT;
-    const width = localStore.width || DEFAULT_WIDTH;
+    const height = props.localStore.height || DEFAULT_HEIGHT;
+    const width = props.localStore.width || DEFAULT_WIDTH;
     const panelPosition = position();
     root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
     root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
@@ -10066,8 +10283,12 @@ var Devtools = () => {
           },
           get children() {
             return createComponent(DevtoolsPanel, {
-              localStore,
-              setLocalStore
+              get localStore() {
+                return props.localStore;
+              },
+              get setLocalStore() {
+                return props.setLocalStore;
+              }
             });
           }
         });
@@ -10081,11 +10302,11 @@ var Devtools = () => {
             return !isOpen();
           },
           get children() {
-            const _el$2 = _tmpl$15(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+            const _el$2 = _tmpl$19(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
             insert(_el$3, createComponent(TanstackLogo, {}));
-            _el$4.$$click = () => setLocalStore("open", "true");
+            _el$4.$$click = () => props.setLocalStore("open", "true");
             insert(_el$4, createComponent(TanstackLogo, {}));
-            createRenderEffect(() => className(_el$2, clsx(styles.devtoolsBtn, styles[`devtoolsBtn-position-${buttonPosition()}`])));
+            createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
             return _el$2;
           }
         });
@@ -10116,7 +10337,10 @@ var Devtools = () => {
   })();
 };
 var DevtoolsPanel = (props) => {
-  const styles = getStyles2();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
   const [isResizing, setIsResizing] = createSignal(false);
   const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
   const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
@@ -10225,8 +10449,24 @@ var DevtoolsPanel = (props) => {
       });
     });
   });
+  const getPanelDynamicStyles = () => {
+    const {
+      colors
+    } = tokens;
+    const t2 = (light, dark) => theme() === "dark" ? dark : light;
+    if (panelWidth() < secondBreakpoint) {
+      return u`
+        flex-direction: column;
+        background-color: ${t2(colors.gray[300], colors.gray[600])};
+      `;
+    }
+    return u`
+      flex-direction: row;
+      background-color: ${t2(colors.gray[200], colors.darkGray[900])};
+    `;
+  };
   return (() => {
-    const _el$5 = _tmpl$112(), _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;
+    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;
     const _ref$ = panelRef;
     typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
     _el$6.$$mousedown = handleDragStart;
@@ -10242,10 +10482,10 @@ var DevtoolsPanel = (props) => {
     _el$17.$$input = (e2) => props.setLocalStore("filter", e2.currentTarget.value);
     _el$19.addEventListener("change", (e2) => props.setLocalStore("sort", e2.currentTarget.value));
     insert(_el$19, () => Object.keys(sortFns).map((key) => (() => {
-      const _el$34 = _tmpl$122(); _el$34.firstChild;
-      _el$34.value = key;
-      insert(_el$34, key, null);
-      return _el$34;
+      const _el$38 = _tmpl$162(); _el$38.firstChild;
+      _el$38.value = key;
+      insert(_el$38, key, null);
+      return _el$38;
     })()));
     insert(_el$18, createComponent(ChevronDown, {}), null);
     _el$20.$$click = () => {
@@ -10289,7 +10529,7 @@ var DevtoolsPanel = (props) => {
       get children() {
         return [createComponent(index$d.Trigger, {
           get ["class"]() {
-            return clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
+            return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
           },
           get children() {
             return createComponent(Settings, {});
@@ -10298,12 +10538,12 @@ var DevtoolsPanel = (props) => {
           get children() {
             return createComponent(index$d.Content, {
               get ["class"]() {
-                return clsx(styles.settingsMenu, "tsqd-settings-menu");
+                return clsx(styles().settingsMenu, "tsqd-settings-menu");
               },
               get children() {
                 return [(() => {
                   const _el$26 = _tmpl$53();
-                  createRenderEffect(() => className(_el$26, clsx(styles.settingsMenuHeader, "tsqd-settings-menu-header")));
+                  createRenderEffect(() => className(_el$26, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
                   return _el$26;
                 })(), createComponent(index$d.Sub, {
                   overlap: true,
@@ -10312,7 +10552,7 @@ var DevtoolsPanel = (props) => {
                   get children() {
                     return [createComponent(index$d.SubTrigger, {
                       get ["class"]() {
-                        return clsx(styles.settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
+                        return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
                       },
                       get children() {
                         return [_tmpl$63(), createComponent(ChevronDown, {})];
@@ -10321,7 +10561,7 @@ var DevtoolsPanel = (props) => {
                       get children() {
                         return createComponent(index$d.SubContent, {
                           get ["class"]() {
-                            return clsx(styles.settingsMenu, "tsqd-settings-submenu");
+                            return clsx(styles().settingsMenu, "tsqd-settings-submenu");
                           },
                           get children() {
                             return [createComponent(index$d.Item, {
@@ -10330,7 +10570,7 @@ var DevtoolsPanel = (props) => {
                               },
                               as: "button",
                               get ["class"]() {
-                                return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
+                                return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
                               },
                               get children() {
                                 return [_tmpl$73(), createComponent(ArrowUp, {})];
@@ -10341,7 +10581,7 @@ var DevtoolsPanel = (props) => {
                               },
                               as: "button",
                               get ["class"]() {
-                                return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
+                                return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
                               },
                               get children() {
                                 return [_tmpl$83(), createComponent(ArrowDown, {})];
@@ -10352,7 +10592,7 @@ var DevtoolsPanel = (props) => {
                               },
                               as: "button",
                               get ["class"]() {
-                                return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
+                                return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
                               },
                               get children() {
                                 return [_tmpl$93(), createComponent(ArrowLeft, {})];
@@ -10363,7 +10603,7 @@ var DevtoolsPanel = (props) => {
                               },
                               as: "button",
                               get ["class"]() {
-                                return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
+                                return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
                               },
                               get children() {
                                 return [_tmpl$103(), createComponent(ArrowRight, {})];
@@ -10374,6 +10614,64 @@ var DevtoolsPanel = (props) => {
                       }
                     })];
                   }
+                }), createComponent(index$d.Sub, {
+                  overlap: true,
+                  gutter: 8,
+                  shift: -4,
+                  get children() {
+                    return [createComponent(index$d.SubTrigger, {
+                      get ["class"]() {
+                        return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
+                      },
+                      get children() {
+                        return [_tmpl$113(), createComponent(ChevronDown, {})];
+                      }
+                    }), createComponent(index$d.Portal, {
+                      get children() {
+                        return createComponent(index$d.SubContent, {
+                          get ["class"]() {
+                            return clsx(styles().settingsMenu, "tsqd-settings-submenu");
+                          },
+                          get children() {
+                            return [createComponent(index$d.Item, {
+                              onSelect: () => {
+                                props.setLocalStore("theme_preference", "light");
+                              },
+                              as: "button",
+                              get ["class"]() {
+                                return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
+                              },
+                              get children() {
+                                return [_tmpl$122(), createComponent(Sun, {})];
+                              }
+                            }), createComponent(index$d.Item, {
+                              onSelect: () => {
+                                props.setLocalStore("theme_preference", "dark");
+                              },
+                              as: "button",
+                              get ["class"]() {
+                                return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
+                              },
+                              get children() {
+                                return [_tmpl$132(), createComponent(Moon, {})];
+                              }
+                            }), createComponent(index$d.Item, {
+                              onSelect: () => {
+                                props.setLocalStore("theme_preference", "system");
+                              },
+                              as: "button",
+                              get ["class"]() {
+                                return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
+                              },
+                              get children() {
+                                return [_tmpl$142(), createComponent(Monitor, {})];
+                              }
+                            })];
+                          }
+                        });
+                      }
+                    })];
+                  }
                 })];
               }
             });
@@ -10381,7 +10679,7 @@ var DevtoolsPanel = (props) => {
         })];
       }
     }), null);
-    insert(_el$33, createComponent(Key, {
+    insert(_el$37, createComponent(Key, {
       by: (q) => q.queryHash,
       get each() {
         return queries();
@@ -10401,19 +10699,16 @@ var DevtoolsPanel = (props) => {
       }
     }), null);
     createRenderEffect((_p$) => {
-      const _v$ = clsx(styles.panel, styles[`panel-position-${position()}`], u`
-          flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
-          background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
-        `, {
+      const _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
         [u`
             min-width: min-content;
           `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
-      }, "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`
+      }, "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`
               height: 50%;
               max-height: 50%;
-            `, "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`
+            `, "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`
               gap: ${tokens.size[2.5]};
-            `, "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");
+            `, "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");
       _v$ !== _p$._v$ && className(_el$5, _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$5.style.setProperty("height", _v$2) : _el$5.style.removeProperty("height"));
       _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$5.style.setProperty("width", _v$3) : _el$5.style.removeProperty("width"));
@@ -10436,7 +10731,7 @@ var DevtoolsPanel = (props) => {
       _v$20 !== _p$._v$20 && setAttribute(_el$25, "aria-label", _p$._v$20 = _v$20);
       _v$21 !== _p$._v$21 && setAttribute(_el$25, "aria-pressed", _p$._v$21 = _v$21);
       _v$22 !== _p$._v$22 && setAttribute(_el$25, "title", _p$._v$22 = _v$22);
-      _v$23 !== _p$._v$23 && className(_el$32, _p$._v$23 = _v$23);
+      _v$23 !== _p$._v$23 && className(_el$36, _p$._v$23 = _v$23);
       return _p$;
     }, {
       _v$: void 0,
@@ -10469,7 +10764,15 @@ var DevtoolsPanel = (props) => {
   })();
 };
 var QueryRow = (props) => {
-  const styles = getStyles2();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  const {
+    colors,
+    alpha
+  } = tokens;
+  const t2 = (light, dark) => theme() === "dark" ? dark : light;
   const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
     queryKey: props.query.queryKey
   })?.state);
@@ -10487,41 +10790,47 @@ var QueryRow = (props) => {
     observerCount: observers(),
     isStale: isStale()
   }));
+  const getObserverCountColorStyles = () => {
+    if (color() === "gray") {
+      return u`
+        background-color: ${t2(colors[color()][200], colors[color()][700])};
+        color: ${t2(colors[color()][700], colors[color()][300])};
+      `;
+    }
+    return u`
+      background-color: ${t2(colors[color()][200] + alpha[80], colors[color()][900])};
+      color: ${t2(colors[color()][800], colors[color()][300])};
+    `;
+  };
   return createComponent(Show, {
     get when() {
       return queryState();
     },
     get children() {
-      const _el$36 = _tmpl$142(), _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
-      _el$36.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
-      insert(_el$37, observers);
-      insert(_el$38, () => props.query.queryHash);
-      insert(_el$36, createComponent(Show, {
+      const _el$40 = _tmpl$182(), _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling;
+      _el$40.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
+      insert(_el$41, observers);
+      insert(_el$42, () => props.query.queryHash);
+      insert(_el$40, createComponent(Show, {
         get when() {
           return isDisabled();
         },
         get children() {
-          return _tmpl$132();
+          return _tmpl$172();
         }
       }), null);
       createRenderEffect((_p$) => {
-        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`
-                  background-color: ${tokens.colors[color()][700]};
-                  color: ${tokens.colors[color()][300]};
-                ` : u`
-                  background-color: ${tokens.colors[color()][900]};
-                  color: ${tokens.colors[color()][300]};
-                `, "tsqd-query-observer-count");
-        _v$24 !== _p$._v$24 && className(_el$36, _p$._v$24 = _v$24);
-        _v$25 !== _p$._v$25 && setAttribute(_el$36, "aria-label", _p$._v$25 = _v$25);
-        _v$26 !== _p$._v$26 && className(_el$37, _p$._v$26 = _v$26);
+        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");
+        _v$24 !== _p$._v$24 && className(_el$40, _p$._v$24 = _v$24);
+        _v$25 !== _p$._v$25 && setAttribute(_el$40, "aria-label", _p$._v$25 = _v$25);
+        _v$26 !== _p$._v$26 && className(_el$41, _p$._v$26 = _v$26);
         return _p$;
       }, {
         _v$24: void 0,
         _v$25: void 0,
         _v$26: void 0
       });
-      return _el$36;
+      return _el$40;
     }
   });
 };
@@ -10531,50 +10840,61 @@ var QueryStatusCount = () => {
   const fetching = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "fetching").length);
   const paused = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "paused").length);
   const inactive = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length);
-  const styles = getStyles2();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
   return (() => {
-    const _el$40 = _tmpl$23();
-    insert(_el$40, createComponent(QueryStatus, {
+    const _el$44 = _tmpl$23();
+    insert(_el$44, createComponent(QueryStatus, {
       label: "Fresh",
       color: "green",
       get count() {
         return fresh();
       }
     }), null);
-    insert(_el$40, createComponent(QueryStatus, {
+    insert(_el$44, createComponent(QueryStatus, {
       label: "Fetching",
       color: "blue",
       get count() {
         return fetching();
       }
     }), null);
-    insert(_el$40, createComponent(QueryStatus, {
+    insert(_el$44, createComponent(QueryStatus, {
       label: "Paused",
       color: "purple",
       get count() {
         return paused();
       }
     }), null);
-    insert(_el$40, createComponent(QueryStatus, {
+    insert(_el$44, createComponent(QueryStatus, {
       label: "Stale",
       color: "yellow",
       get count() {
         return stale();
       }
     }), null);
-    insert(_el$40, createComponent(QueryStatus, {
+    insert(_el$44, createComponent(QueryStatus, {
       label: "Inactive",
       color: "gray",
       get count() {
         return inactive();
       }
     }), null);
-    createRenderEffect(() => className(_el$40, clsx(styles.queryStatusContainer, "tsqd-query-status-container")));
-    return _el$40;
+    createRenderEffect(() => className(_el$44, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
+    return _el$44;
   })();
 };
 var QueryStatus = (props) => {
-  const styles = getStyles2();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  const {
+    colors,
+    alpha
+  } = tokens;
+  const t2 = (light, dark) => theme() === "dark" ? dark : light;
   let tagRef;
   const [mouseOver, setMouseOver] = createSignal(false);
   const [focused, setFocused] = createSignal(false);
@@ -10590,78 +10910,83 @@ var QueryStatus = (props) => {
     return true;
   });
   return (() => {
-    const _el$41 = _tmpl$17(), _el$43 = _el$41.firstChild, _el$45 = _el$43.nextSibling;
+    const _el$45 = _tmpl$21(), _el$47 = _el$45.firstChild, _el$49 = _el$47.nextSibling;
     const _ref$3 = tagRef;
-    typeof _ref$3 === "function" ? use(_ref$3, _el$41) : tagRef = _el$41;
-    _el$41.addEventListener("mouseleave", () => {
+    typeof _ref$3 === "function" ? use(_ref$3, _el$45) : tagRef = _el$45;
+    _el$45.addEventListener("mouseleave", () => {
       setMouseOver(false);
       setFocused(false);
     });
-    _el$41.addEventListener("mouseenter", () => setMouseOver(true));
-    _el$41.addEventListener("blur", () => setFocused(false));
-    _el$41.addEventListener("focus", () => setFocused(true));
-    spread(_el$41, mergeProps({
+    _el$45.addEventListener("mouseenter", () => setMouseOver(true));
+    _el$45.addEventListener("blur", () => setFocused(false));
+    _el$45.addEventListener("focus", () => setFocused(true));
+    spread(_el$45, mergeProps({
       get disabled() {
         return showLabel();
       },
       get ["class"]() {
-        return clsx(styles.queryStatusTag, !showLabel() && u`
+        return clsx(styles().queryStatusTag, !showLabel() && u`
             cursor: pointer;
             &:hover {
-              background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
+              background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
             }
           `, "tsqd-query-status-tag", `tsqd-query-status-tag-${props.label.toLowerCase()}`);
       }
     }, () => mouseOver() || focused() ? {
       "aria-describedby": "tsqd-status-tooltip"
     } : {}), false, true);
-    insert(_el$41, createComponent(Show, {
+    insert(_el$45, createComponent(Show, {
       get when() {
         return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
       },
       get children() {
-        const _el$42 = _tmpl$152();
-        insert(_el$42, () => props.label);
-        createRenderEffect(() => className(_el$42, clsx(styles.statusTooltip, "tsqd-query-status-tooltip")));
-        return _el$42;
+        const _el$46 = _tmpl$192();
+        insert(_el$46, () => props.label);
+        createRenderEffect(() => className(_el$46, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
+        return _el$46;
       }
-    }), _el$43);
-    insert(_el$41, createComponent(Show, {
+    }), _el$47);
+    insert(_el$45, createComponent(Show, {
       get when() {
         return showLabel();
       },
       get children() {
-        const _el$44 = _tmpl$16();
-        insert(_el$44, () => props.label);
-        createRenderEffect(() => className(_el$44, clsx(styles.queryStatusTagLabel, "tsqd-query-status-tag-label")));
-        return _el$44;
+        const _el$48 = _tmpl$20();
+        insert(_el$48, () => props.label);
+        createRenderEffect(() => className(_el$48, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
+        return _el$48;
       }
-    }), _el$45);
-    insert(_el$45, () => props.count);
+    }), _el$49);
+    insert(_el$49, () => props.count);
     createRenderEffect((_p$) => {
       const _v$27 = clsx(u`
             width: ${tokens.size[1.5]};
             height: ${tokens.size[1.5]};
             border-radius: ${tokens.border.radius.full};
             background-color: ${tokens.colors[props.color][500]};
-          `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles.queryStatusCount, props.count > 0 && props.color !== "gray" ? u`
-                background-color: ${tokens.colors[props.color][900]};
-                color: ${tokens.colors[props.color][300]};
-              ` : u`
-                color: ${tokens.colors["gray"][400]};
-              `, "tsqd-query-status-tag-count");
-      _v$27 !== _p$._v$27 && className(_el$43, _p$._v$27 = _v$27);
-      _v$28 !== _p$._v$28 && className(_el$45, _p$._v$28 = _v$28);
+          `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && u`
+              background-color: ${t2(colors[props.color][100], colors[props.color][900])};
+              color: ${t2(colors[props.color][700], colors[props.color][300])};
+            `, "tsqd-query-status-tag-count");
+      _v$27 !== _p$._v$27 && className(_el$47, _p$._v$27 = _v$27);
+      _v$28 !== _p$._v$28 && className(_el$49, _p$._v$28 = _v$28);
       return _p$;
     }, {
       _v$27: void 0,
       _v$28: void 0
     });
-    return _el$41;
+    return _el$45;
   })();
 };
 var QueryDetails = () => {
-  const styles = getStyles2();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  const {
+    colors
+  } = tokens;
+  const t2 = (light, dark) => theme() === "dark" ? dark : light;
   const queryClient = useQueryDevtoolsContext().client;
   const [restoringLoading, setRestoringLoading] = createSignal(false);
   const errorTypes = createMemo(() => {
@@ -10718,24 +11043,38 @@ var QueryDetails = () => {
       setRestoringLoading(false);
     }
   });
+  const getQueryStatusColors = () => {
+    if (color() === "gray") {
+      return u`
+        background-color: ${t2(colors[color()][200], colors[color()][700])};
+        color: ${t2(colors[color()][700], colors[color()][300])};
+        border-color: ${t2(colors[color()][400], colors[color()][600])};
+      `;
+    }
+    return u`
+      background-color: ${t2(colors[color()][100], colors[color()][900])};
+      color: ${t2(colors[color()][700], colors[color()][300])};
+      border-color: ${t2(colors[color()][400], colors[color()][600])};
+    `;
+  };
   return createComponent(Show, {
     get when() {
       return createMemo(() => !!activeQuery())() && activeQueryState();
     },
     get children() {
-      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;
-      insert(_el$51, () => displayValue(activeQuery().queryKey, true));
-      insert(_el$52, statusLabel);
-      insert(_el$55, observerCount);
-      insert(_el$58, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
-      _el$61.$$click = handleRefetch;
-      _el$63.$$click = () => queryClient.invalidateQueries(activeQuery());
-      _el$65.$$click = () => queryClient.resetQueries(activeQuery());
-      _el$67.$$click = () => {
+      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;
+      insert(_el$55, () => displayValue(activeQuery().queryKey, true));
+      insert(_el$56, statusLabel);
+      insert(_el$59, observerCount);
+      insert(_el$62, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
+      _el$65.$$click = handleRefetch;
+      _el$67.$$click = () => queryClient.invalidateQueries(activeQuery());
+      _el$69.$$click = () => queryClient.resetQueries(activeQuery());
+      _el$71.$$click = () => {
         queryClient.removeQueries(activeQuery());
         setSelectedQueryHash(null);
       };
-      _el$69.$$click = () => {
+      _el$73.$$click = () => {
         if (activeQuery()?.state.data === void 0) {
           setRestoringLoading(true);
           restoreQueryAfterLoadingOrError();
@@ -10763,79 +11102,79 @@ var QueryDetails = () => {
           });
         }
       };
-      insert(_el$69, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$71);
-      insert(_el$60, createComponent(Show, {
+      insert(_el$73, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$75);
+      insert(_el$64, createComponent(Show, {
         get when() {
           return errorTypes().length === 0 || queryStatus() === "error";
         },
         get children() {
-          const _el$72 = _tmpl$18(), _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling;
-          _el$72.$$click = () => {
+          const _el$76 = _tmpl$222(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
+          _el$76.$$click = () => {
             if (!activeQuery().state.error) {
               triggerError();
             } else {
               queryClient.resetQueries(activeQuery());
             }
           };
-          insert(_el$72, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$74);
+          insert(_el$76, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$78);
           createRenderEffect((_p$) => {
             const _v$29 = clsx(u`
-                  color: ${tokens.colors.red[400]};
+                  color: ${t2(colors.red[500], colors.red[400])};
                 `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$30 = queryStatus() === "pending", _v$31 = u`
-                  background-color: ${tokens.colors.red[400]};
+                  background-color: ${t2(colors.red[500], colors.red[400])};
                 `;
-            _v$29 !== _p$._v$29 && className(_el$72, _p$._v$29 = _v$29);
-            _v$30 !== _p$._v$30 && (_el$72.disabled = _p$._v$30 = _v$30);
-            _v$31 !== _p$._v$31 && className(_el$73, _p$._v$31 = _v$31);
+            _v$29 !== _p$._v$29 && className(_el$76, _p$._v$29 = _v$29);
+            _v$30 !== _p$._v$30 && (_el$76.disabled = _p$._v$30 = _v$30);
+            _v$31 !== _p$._v$31 && className(_el$77, _p$._v$31 = _v$31);
             return _p$;
           }, {
             _v$29: void 0,
             _v$30: void 0,
             _v$31: void 0
           });
-          return _el$72;
+          return _el$76;
         }
       }), null);
-      insert(_el$60, createComponent(Show, {
+      insert(_el$64, createComponent(Show, {
         get when() {
           return !(errorTypes().length === 0 || queryStatus() === "error");
         },
         get children() {
-          const _el$75 = _tmpl$19(), _el$76 = _el$75.firstChild, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling; _el$78.firstChild;
-          _el$78.addEventListener("change", (e2) => {
-            const errorType = errorTypes().find((t2) => t2.name === e2.currentTarget.value);
+          const _el$79 = _tmpl$232(), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling; _el$82.firstChild;
+          _el$82.addEventListener("change", (e2) => {
+            const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
             triggerError(errorType);
           });
-          insert(_el$78, createComponent(For, {
+          insert(_el$82, createComponent(For, {
             get each() {
               return errorTypes();
             },
             children: (errorType) => (() => {
-              const _el$84 = _tmpl$21();
-              insert(_el$84, () => errorType.name);
-              createRenderEffect(() => _el$84.value = errorType.name);
-              return _el$84;
+              const _el$88 = _tmpl$25();
+              insert(_el$88, () => errorType.name);
+              createRenderEffect(() => _el$88.value = errorType.name);
+              return _el$88;
             })()
           }), null);
-          insert(_el$75, createComponent(ChevronDown, {}), null);
+          insert(_el$79, createComponent(ChevronDown, {}), null);
           createRenderEffect((_p$) => {
-            const _v$32 = clsx(styles.actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
+            const _v$32 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
                   background-color: ${tokens.colors.red[400]};
                 `, _v$34 = queryStatus() === "pending";
-            _v$32 !== _p$._v$32 && className(_el$75, _p$._v$32 = _v$32);
-            _v$33 !== _p$._v$33 && className(_el$76, _p$._v$33 = _v$33);
-            _v$34 !== _p$._v$34 && (_el$78.disabled = _p$._v$34 = _v$34);
+            _v$32 !== _p$._v$32 && className(_el$79, _p$._v$32 = _v$32);
+            _v$33 !== _p$._v$33 && className(_el$80, _p$._v$33 = _v$33);
+            _v$34 !== _p$._v$34 && (_el$82.disabled = _p$._v$34 = _v$34);
             return _p$;
           }, {
             _v$32: void 0,
             _v$33: void 0,
             _v$34: void 0
           });
-          return _el$75;
+          return _el$79;
         }
       }), null);
-      _el$81.style.setProperty("padding", "0.5rem");
-      insert(_el$81, createComponent(Explorer, {
+      _el$85.style.setProperty("padding", "0.5rem");
+      insert(_el$85, createComponent(Explorer, {
         label: "Data",
         defaultExpanded: ["Data"],
         get value() {
@@ -10846,8 +11185,8 @@ var QueryDetails = () => {
           return activeQuery();
         }
       }));
-      _el$83.style.setProperty("padding", "0.5rem");
-      insert(_el$83, createComponent(Explorer, {
+      _el$87.style.setProperty("padding", "0.5rem");
+      insert(_el$87, createComponent(Explorer, {
         label: "Query",
         defaultExpanded: ["Query", "queryKey"],
         get value() {
@@ -10855,58 +11194,50 @@ var QueryDetails = () => {
         }
       }));
       createRenderEffect((_p$) => {
-        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`
-                      background-color: ${tokens.colors[color()][700]};
-                      color: ${tokens.colors[color()][300]};
-                      border-color: ${tokens.colors[color()][600]};
-                    ` : u`
-                      background-color: ${tokens.colors[color()][900]};
-                      color: ${tokens.colors[color()][300]};
-                      border-color: ${tokens.colors[color()][600]};
-                    `), _v$39 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles.actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
-                color: ${tokens.colors.blue[400]};
+        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`
+                color: ${t2(colors.blue[600], colors.blue[400])};
               `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$42 = statusLabel() === "fetching", _v$43 = u`
-                background-color: ${tokens.colors.blue[400]};
+                background-color: ${t2(colors.blue[600], colors.blue[400])};
               `, _v$44 = clsx(u`
-                color: ${tokens.colors.yellow[400]};
+                color: ${t2(colors.yellow[600], colors.yellow[400])};
               `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$45 = queryStatus() === "pending", _v$46 = u`
-                background-color: ${tokens.colors.yellow[400]};
+                background-color: ${t2(colors.yellow[600], colors.yellow[400])};
               `, _v$47 = clsx(u`
-                color: ${tokens.colors.gray[300]};
+                color: ${t2(colors.gray[600], colors.gray[300])};
               `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$48 = queryStatus() === "pending", _v$49 = u`
-                background-color: ${tokens.colors.gray[400]};
+                background-color: ${t2(colors.gray[600], colors.gray[400])};
               `, _v$50 = clsx(u`
-                color: ${tokens.colors.pink[400]};
+                color: ${t2(colors.pink[500], colors.pink[400])};
               `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$51 = statusLabel() === "fetching", _v$52 = u`
-                background-color: ${tokens.colors.pink[400]};
+                background-color: ${t2(colors.pink[500], colors.pink[400])};
               `, _v$53 = clsx(u`
-                color: ${tokens.colors.cyan[400]};
+                color: ${t2(colors.cyan[500], colors.cyan[400])};
               `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$54 = restoringLoading(), _v$55 = u`
-                background-color: ${tokens.colors.cyan[400]};
-              `, _v$56 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles.detailsHeader, "tsqd-query-details-header");
-        _v$35 !== _p$._v$35 && className(_el$46, _p$._v$35 = _v$35);
-        _v$36 !== _p$._v$36 && className(_el$47, _p$._v$36 = _v$36);
-        _v$37 !== _p$._v$37 && className(_el$48, _p$._v$37 = _v$37);
-        _v$38 !== _p$._v$38 && className(_el$52, _p$._v$38 = _v$38);
-        _v$39 !== _p$._v$39 && className(_el$59, _p$._v$39 = _v$39);
-        _v$40 !== _p$._v$40 && className(_el$60, _p$._v$40 = _v$40);
-        _v$41 !== _p$._v$41 && className(_el$61, _p$._v$41 = _v$41);
-        _v$42 !== _p$._v$42 && (_el$61.disabled = _p$._v$42 = _v$42);
-        _v$43 !== _p$._v$43 && className(_el$62, _p$._v$43 = _v$43);
-        _v$44 !== _p$._v$44 && className(_el$63, _p$._v$44 = _v$44);
-        _v$45 !== _p$._v$45 && (_el$63.disabled = _p$._v$45 = _v$45);
-        _v$46 !== _p$._v$46 && className(_el$64, _p$._v$46 = _v$46);
-        _v$47 !== _p$._v$47 && className(_el$65, _p$._v$47 = _v$47);
-        _v$48 !== _p$._v$48 && (_el$65.disabled = _p$._v$48 = _v$48);
-        _v$49 !== _p$._v$49 && className(_el$66, _p$._v$49 = _v$49);
-        _v$50 !== _p$._v$50 && className(_el$67, _p$._v$50 = _v$50);
-        _v$51 !== _p$._v$51 && (_el$67.disabled = _p$._v$51 = _v$51);
-        _v$52 !== _p$._v$52 && className(_el$68, _p$._v$52 = _v$52);
-        _v$53 !== _p$._v$53 && className(_el$69, _p$._v$53 = _v$53);
-        _v$54 !== _p$._v$54 && (_el$69.disabled = _p$._v$54 = _v$54);
-        _v$55 !== _p$._v$55 && className(_el$70, _p$._v$55 = _v$55);
-        _v$56 !== _p$._v$56 && className(_el$80, _p$._v$56 = _v$56);
-        _v$57 !== _p$._v$57 && className(_el$82, _p$._v$57 = _v$57);
+                background-color: ${t2(colors.cyan[500], colors.cyan[400])};
+              `, _v$56 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles().detailsHeader, "tsqd-query-details-header");
+        _v$35 !== _p$._v$35 && className(_el$50, _p$._v$35 = _v$35);
+        _v$36 !== _p$._v$36 && className(_el$51, _p$._v$36 = _v$36);
+        _v$37 !== _p$._v$37 && className(_el$52, _p$._v$37 = _v$37);
+        _v$38 !== _p$._v$38 && className(_el$56, _p$._v$38 = _v$38);
+        _v$39 !== _p$._v$39 && className(_el$63, _p$._v$39 = _v$39);
+        _v$40 !== _p$._v$40 && className(_el$64, _p$._v$40 = _v$40);
+        _v$41 !== _p$._v$41 && className(_el$65, _p$._v$41 = _v$41);
+        _v$42 !== _p$._v$42 && (_el$65.disabled = _p$._v$42 = _v$42);
+        _v$43 !== _p$._v$43 && className(_el$66, _p$._v$43 = _v$43);
+        _v$44 !== _p$._v$44 && className(_el$67, _p$._v$44 = _v$44);
+        _v$45 !== _p$._v$45 && (_el$67.disabled = _p$._v$45 = _v$45);
+        _v$46 !== _p$._v$46 && className(_el$68, _p$._v$46 = _v$46);
+        _v$47 !== _p$._v$47 && className(_el$69, _p$._v$47 = _v$47);
+        _v$48 !== _p$._v$48 && (_el$69.disabled = _p$._v$48 = _v$48);
+        _v$49 !== _p$._v$49 && className(_el$70, _p$._v$49 = _v$49);
+        _v$50 !== _p$._v$50 && className(_el$71, _p$._v$50 = _v$50);
+        _v$51 !== _p$._v$51 && (_el$71.disabled = _p$._v$51 = _v$51);
+        _v$52 !== _p$._v$52 && className(_el$72, _p$._v$52 = _v$52);
+        _v$53 !== _p$._v$53 && className(_el$73, _p$._v$53 = _v$53);
+        _v$54 !== _p$._v$54 && (_el$73.disabled = _p$._v$54 = _v$54);
+        _v$55 !== _p$._v$55 && className(_el$74, _p$._v$55 = _v$55);
+        _v$56 !== _p$._v$56 && className(_el$84, _p$._v$56 = _v$56);
+        _v$57 !== _p$._v$57 && className(_el$86, _p$._v$57 = _v$57);
         return _p$;
       }, {
         _v$35: void 0,
@@ -10933,7 +11264,7 @@ var QueryDetails = () => {
         _v$56: void 0,
         _v$57: void 0
       });
-      return _el$46;
+      return _el$50;
     }
   });
 };
@@ -10973,7 +11304,7 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
   });
   return value;
 };
-var getStyles2 = () => {
+var stylesFactory2 = (theme) => {
   const {
     colors,
     font,
@@ -10982,6 +11313,7 @@ var getStyles2 = () => {
     shadow,
     border
   } = tokens;
+  const t2 = (light, dark) => theme === "light" ? light : dark;
   return {
     devtoolsBtn: u`
       z-index: 100000;
@@ -11043,8 +11375,6 @@ var getStyles2 = () => {
       display: flex;
       gap: ${tokens.size[0.5]};
       & * {
-        font-family: 'Inter', sans-serif;
-        color: ${colors.gray[300]};
         box-sizing: border-box;
         text-transform: none;
       }
@@ -11071,7 +11401,7 @@ var getStyles2 = () => {
       left: 0;
       max-height: 90%;
       min-height: 3.5rem;
-      border-bottom: ${colors.darkGray[300]} 1px solid;
+      border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
     "panel-position-bottom": u`
       bottom: 0;
@@ -11079,20 +11409,20 @@ var getStyles2 = () => {
       left: 0;
       max-height: 90%;
       min-height: 3.5rem;
-      border-top: ${colors.darkGray[300]} 1px solid;
+      border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
     "panel-position-right": u`
       bottom: 0;
       right: 0;
       top: 0;
-      border-left: ${colors.darkGray[300]} 1px solid;
+      border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       max-width: 90%;
     `,
     "panel-position-left": u`
       bottom: 0;
       left: 0;
       top: 0;
-      border-right: ${colors.darkGray[300]} 1px solid;
+      border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       max-width: 90%;
     `,
     closeBtn: u`
@@ -11103,13 +11433,15 @@ var getStyles2 = () => {
       align-items: center;
       justify-content: center;
       outline: none;
+      background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       &:hover {
-        background-color: ${colors.darkGray[500]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[500])};
       }
       &:focus-visible {
         outline: 2px solid ${colors.blue[600]};
       }
       & svg {
+        color: ${t2(colors.gray[600], colors.gray[400])};
         width: ${size2[2]};
         height: ${size2[2]};
       }
@@ -11118,11 +11450,10 @@ var getStyles2 = () => {
       bottom: 0;
       right: ${size2[2]};
       transform: translate(0, 100%);
-      background-color: ${colors.darkGray[700]};
-      border-right: ${colors.darkGray[300]} 1px solid;
-      border-left: ${colors.darkGray[300]} 1px solid;
+      border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       border-top: none;
-      border-bottom: ${colors.darkGray[300]} 1px solid;
+      border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
       padding: ${size2[0.5]} ${size2[1.5]} ${size2[1]} ${size2[1.5]};
 
@@ -11143,10 +11474,9 @@ var getStyles2 = () => {
       top: 0;
       right: ${size2[2]};
       transform: translate(0, -100%);
-      background-color: ${colors.darkGray[700]};
-      border-right: ${colors.darkGray[300]} 1px solid;
-      border-left: ${colors.darkGray[300]} 1px solid;
-      border-top: ${colors.darkGray[300]} 1px solid;
+      border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       border-bottom: none;
       border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
       padding: ${size2[1]} ${size2[1.5]} ${size2[0.5]} ${size2[1.5]};
@@ -11164,11 +11494,10 @@ var getStyles2 = () => {
       bottom: ${size2[2]};
       left: 0;
       transform: translate(-100%, 0);
-      background-color: ${colors.darkGray[700]};
       border-right: none;
-      border-left: ${colors.darkGray[300]} 1px solid;
-      border-top: ${colors.darkGray[300]} 1px solid;
-      border-bottom: ${colors.darkGray[300]} 1px solid;
+      border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
       padding: ${size2[1.5]} ${size2[0.5]} ${size2[1.5]} ${size2[1]};
 
@@ -11188,11 +11517,10 @@ var getStyles2 = () => {
       bottom: ${size2[2]};
       right: 0;
       transform: translate(100%, 0);
-      background-color: ${colors.darkGray[700]};
       border-left: none;
-      border-right: ${colors.darkGray[300]} 1px solid;
-      border-top: ${colors.darkGray[300]} 1px solid;
-      border-bottom: ${colors.darkGray[300]} 1px solid;
+      border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
       padding: ${size2[1.5]} ${size2[1]} ${size2[1.5]} ${size2[0.5]};
 
@@ -11210,15 +11538,18 @@ var getStyles2 = () => {
     `,
     queriesContainer: u`
       flex: 1 1 700px;
-      background-color: ${colors.darkGray[700]};
+      background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       display: flex;
       flex-direction: column;
+      & * {
+        font-family: 'Inter', sans-serif;
+      }
     `,
     dragHandle: u`
       position: absolute;
       transition: background-color 0.125s ease;
       &:hover {
-        background-color: ${colors.purple[400]}${alpha[90]};
+        background-color: ${colors.purple[400]}${t2("", alpha[90])};
       }
       z-index: 4;
     `,
@@ -11252,7 +11583,7 @@ var getStyles2 = () => {
       align-items: center;
       padding: ${tokens.size[2]} ${tokens.size[2.5]};
       gap: ${tokens.size[3]};
-      border-bottom: ${colors.darkGray[500]} 1px solid;
+      border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
       align-items: center;
       & > button {
         padding: 0;
@@ -11279,11 +11610,15 @@ var getStyles2 = () => {
       font-weight: ${font.weight.bold};
       line-height: ${font.lineHeight.xs};
       white-space: nowrap;
+      color: ${t2(colors.gray[600], colors.gray[300])};
     `,
     queryFlavorLogo: u`
       font-weight: ${font.weight.semibold};
       font-size: ${font.size.xs};
-      background: linear-gradient(to right, #dd524b, #e9a03b);
+      background: linear-gradient(
+        to right,
+        ${t2("#ea4037, #ff9b11", "#dd524b, #e9a03b")}
+      );
       background-clip: text;
       -webkit-background-clip: text;
       line-height: 1;
@@ -11298,14 +11633,17 @@ var getStyles2 = () => {
     queryStatusTag: u`
       display: flex;
       gap: ${tokens.size[1.5]};
-      background: ${colors.darkGray[500]};
+      box-sizing: border-box;
+      height: ${tokens.size[6.5]};
+      background: ${t2(colors.gray[50], colors.darkGray[500])};
+      color: ${t2(colors.gray[700], colors.gray[300])};
       border-radius: ${tokens.border.radius.sm};
       font-size: ${font.size.sm};
       padding: ${tokens.size[1]};
-      padding-left: ${tokens.size[2]};
+      padding-left: ${tokens.size[1.5]};
       align-items: center;
       font-weight: ${font.weight.medium};
-      border: none;
+      border: ${t2("1px solid " + colors.gray[300], "1px solid transparent")};
       user-select: none;
       position: relative;
       &:focus-visible {
@@ -11322,8 +11660,8 @@ var getStyles2 = () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      color: ${colors.gray[400]};
-      background-color: ${colors.darkGray[300]};
+      color: ${t2(colors.gray[500], colors.gray[400])};
+      background-color: ${t2(colors.gray[200], colors.darkGray[300])};
       border-radius: 2px;
       font-variant-numeric: tabular-nums;
       height: ${tokens.size[4.5]};
@@ -11331,15 +11669,15 @@ var getStyles2 = () => {
     statusTooltip: u`
       position: absolute;
       z-index: 1;
-      background-color: ${colors.darkGray[500]};
+      background-color: ${t2(colors.gray[50], colors.darkGray[500])};
       top: 100%;
       left: 50%;
       transform: translate(-50%, calc(${tokens.size[2]}));
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
-      border-radius: ${tokens.border.radius.md};
+      border-radius: ${tokens.border.radius.sm};
       font-size: ${font.size.xs};
-      border: 1px solid ${colors.gray[600]};
-      color: ${tokens.colors["gray"][300]};
+      border: 1px solid ${t2(colors.gray[400], colors.gray[600])};
+      color: ${t2(colors["gray"][600], colors["gray"][300])};
 
       &::before {
         top: 0px;
@@ -11348,7 +11686,8 @@ var getStyles2 = () => {
         left: 50%;
         transform: translate(-50%, -100%);
         position: absolute;
-        border-color: transparent transparent ${colors.gray[600]} transparent;
+        border-color: transparent transparent
+          ${t2(colors.gray[400], colors.gray[600])} transparent;
         border-style: solid;
         border-width: 7px;
         /* transform: rotate(180deg); */
@@ -11359,17 +11698,14 @@ var getStyles2 = () => {
         content: ' ';
         display: block;
         left: 50%;
-        transform: translate(-50%, calc(-100% + 2.5px));
+        transform: translate(-50%, calc(-100% + 2px));
         position: absolute;
-        border-color: transparent transparent ${colors.darkGray[500]}
-          transparent;
+        border-color: transparent transparent
+          ${t2(colors.gray[100], colors.darkGray[500])} transparent;
         border-style: solid;
         border-width: 7px;
       }
     `,
-    selectedQueryRow: u`
-      background-color: ${colors.darkGray[500]};
-    `,
     filtersContainer: u`
       display: flex;
       gap: ${tokens.size[2]};
@@ -11378,47 +11714,52 @@ var getStyles2 = () => {
         padding: ${tokens.size[0.5]} ${tokens.size[2]};
         padding-right: ${tokens.size[1.5]};
         border-radius: ${tokens.border.radius.sm};
-        background-color: ${colors.darkGray[400]};
+        background-color: ${t2(colors.gray[100], colors.darkGray[400])};
+        border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
+        color: ${t2(colors.gray[700], colors.gray[300])};
         font-size: ${font.size.xs};
         display: flex;
         align-items: center;
         line-height: ${font.lineHeight.sm};
         gap: ${tokens.size[1.5]};
         max-width: 160px;
-        border: 1px solid ${colors.darkGray[200]};
         &:focus-visible {
           outline-offset: 2px;
           border-radius: ${border.radius.xs};
           outline: 2px solid ${colors.blue[800]};
         }
+        & svg {
+          color: ${t2(colors.gray[500], colors.gray[400])};
+        }
       }
     `,
     filterInput: u`
-      padding: ${tokens.size[0.5]} ${tokens.size[2]};
+      padding: ${size2[0.5]} ${size2[2]};
       border-radius: ${tokens.border.radius.sm};
-      background-color: ${colors.darkGray[400]};
+      background-color: ${t2(colors.gray[100], colors.darkGray[400])};
       display: flex;
       box-sizing: content-box;
       align-items: center;
       gap: ${tokens.size[1.5]};
       max-width: 160px;
       min-width: 100px;
-      border: 1px solid ${colors.darkGray[200]};
+      border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
       height: min-content;
+      color: ${t2(colors.gray[600], colors.gray[400])};
       & > svg {
-        width: ${tokens.size[3]};
-        height: ${tokens.size[3]};
+        width: ${size2[3]};
+        height: ${size2[3]};
       }
       & input {
         font-size: ${font.size.xs};
         width: 100%;
-        background-color: ${colors.darkGray[400]};
+        background-color: ${t2(colors.gray[100], colors.darkGray[400])};
         border: none;
         padding: 0;
         line-height: ${font.lineHeight.sm};
-        color: ${colors.gray[300]};
+        color: ${t2(colors.gray[700], colors.gray[300])};
         &::placeholder {
-          color: ${colors.gray[300]};
+          color: ${t2(colors.gray[700], colors.gray[300])};
         }
         &:focus {
           outline: none;
@@ -11434,24 +11775,26 @@ var getStyles2 = () => {
     filterSelect: u`
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
       border-radius: ${tokens.border.radius.sm};
-      background-color: ${colors.darkGray[400]};
+      background-color: ${t2(colors.gray[100], colors.darkGray[400])};
       display: flex;
       align-items: center;
       gap: ${tokens.size[1.5]};
       box-sizing: content-box;
       max-width: 160px;
-      border: 1px solid ${colors.darkGray[200]};
+      border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
       height: min-content;
       & > svg {
+        color: ${t2(colors.gray[600], colors.gray[400])};
         width: ${tokens.size[2]};
         height: ${tokens.size[2]};
       }
       & > select {
         appearance: none;
+        color: ${t2(colors.gray[700], colors.gray[300])};
         min-width: 100px;
         line-height: ${font.lineHeight.sm};
         font-size: ${font.size.xs};
-        background-color: ${colors.darkGray[400]};
+        background-color: ${t2(colors.gray[100], colors.darkGray[400])};
         border: none;
         &:focus {
           outline: none;
@@ -11469,7 +11812,8 @@ var getStyles2 = () => {
     `,
     actionsBtn: u`
       border-radius: ${tokens.border.radius.sm};
-      background-color: ${colors.darkGray[400]};
+      background-color: ${t2(colors.gray[100], colors.darkGray[400])};
+      border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
       width: 1.625rem;
       height: 1.625rem;
       justify-content: center;
@@ -11477,13 +11821,13 @@ var getStyles2 = () => {
       align-items: center;
       gap: ${tokens.size[1.5]};
       max-width: 160px;
-      border: 1px solid ${colors.darkGray[200]};
       cursor: pointer;
       padding: 0;
       &:hover {
-        background-color: ${colors.darkGray[500]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[500])};
       }
       & svg {
+        color: ${t2(colors.gray[700], colors.gray[300])};
         width: ${tokens.size[3]};
         height: ${tokens.size[3]};
       }
@@ -11493,6 +11837,12 @@ var getStyles2 = () => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
+    actionsBtnOffline: u`
+      & svg {
+        stroke: ${t2(colors.yellow[700], colors.yellow[500])};
+        fill: ${t2(colors.yellow[700], colors.yellow[500])};
+      }
+    `,
     overflowQueryContainer: u`
       flex: 1;
       overflow-y: auto;
@@ -11505,9 +11855,11 @@ var getStyles2 = () => {
       display: flex;
       align-items: center;
       padding: 0;
-      background-color: inherit;
       border: none;
       cursor: pointer;
+      color: ${t2(colors.gray[700], colors.gray[300])};
+      background-color: ${t2(colors.gray[50], colors.darkGray[700])};
+      line-height: 1;
       &:focus {
         outline: none;
       }
@@ -11517,7 +11869,7 @@ var getStyles2 = () => {
         outline: 2px solid ${colors.blue[800]};
       }
       &:hover .tsqd-query-hash {
-        background-color: ${colors.darkGray[600]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[600])};
       }
 
       & .tsqd-query-observer-count {
@@ -11532,7 +11884,7 @@ var getStyles2 = () => {
         font-weight: ${font.weight.medium};
         border-bottom-width: 1px;
         border-bottom-style: solid;
-        border-bottom: 1px solid ${colors.darkGray[700]};
+        border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[700])};
       }
       & .tsqd-query-hash {
         user-select: text;
@@ -11543,7 +11895,7 @@ var getStyles2 = () => {
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
         font-family: 'Menlo', 'Fira Code', monospace;
-        border-bottom: 1px solid ${colors.darkGray[400]};
+        border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
         word-break: break-word;
@@ -11554,15 +11906,20 @@ var getStyles2 = () => {
         display: flex;
         align-items: center;
         padding: 0 ${tokens.size[2]};
-        color: ${colors.gray[300]};
-        background-color: ${colors.darkGray[600]};
-        border-bottom: 1px solid ${colors.darkGray[400]};
+        color: ${t2(colors.gray[800], colors.gray[300])};
+        background-color: ${t2(colors.gray[300], colors.darkGray[600])};
+        border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         font-size: ${font.size.xs};
       }
     `,
+    selectedQueryRow: u`
+      background-color: ${t2(colors.gray[200], colors.darkGray[500])};
+    `,
     detailsContainer: u`
       flex: 1 1 700px;
-      background-color: ${colors.darkGray[700]};
+      background-color: ${t2(colors.gray[50], colors.darkGray[700])};
+      color: ${t2(colors.gray[700], colors.gray[300])};
+      font-family: 'Inter', sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -11570,10 +11927,11 @@ var getStyles2 = () => {
       text-align: left;
     `,
     detailsHeader: u`
+      font-family: 'Inter', sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
-      background-color: ${colors.darkGray[600]};
+      background-color: ${t2(colors.gray[200], colors.darkGray[600])};
       padding: ${tokens.size[1.5]} ${tokens.size[2]};
       font-weight: ${font.weight.medium};
       font-size: ${font.size.xs};
@@ -11606,6 +11964,10 @@ var getStyles2 = () => {
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
       }
+
+      & pre {
+        margin: 0;
+      }
     `,
     queryDetailsStatus: u`
       border: 1px solid ${colors.darkGray[200]};
@@ -11620,12 +11982,13 @@ var getStyles2 = () => {
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
+        font-family: 'Inter', sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
         border-radius: ${tokens.border.radius.sm};
-        border: 1px solid ${colors.darkGray[400]};
-        background-color: ${colors.darkGray[600]};
+        background-color: ${t2(colors.gray[100], colors.darkGray[600])};
+        border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         align-items: center;
         gap: ${tokens.size[2]};
         font-weight: ${font.weight.medium};
@@ -11637,7 +12000,7 @@ var getStyles2 = () => {
           outline: 2px solid ${colors.blue[800]};
         }
         &:hover {
-          background-color: ${colors.darkGray[500]};
+          background-color: ${t2(colors.gray[200], colors.darkGray[500])};
         }
 
         &:disabled {
@@ -11658,17 +12021,17 @@ var getStyles2 = () => {
       display: flex;
       border-radius: ${tokens.border.radius.sm};
       overflow: hidden;
-      border: 1px solid ${colors.darkGray[400]};
-      background-color: ${colors.darkGray[600]};
+      background-color: ${t2(colors.gray[100], colors.darkGray[600])};
+      border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
       align-items: center;
       gap: ${tokens.size[2]};
       font-weight: ${font.weight.medium};
       line-height: ${font.lineHeight.sm};
-      color: ${tokens.colors.red[400]};
+      color: ${t2(colors.red[500], colors.red[400])};
       cursor: pointer;
       position: relative;
       &:hover {
-        background-color: ${colors.darkGray[500]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[500])};
       }
       & > span {
         width: ${size2[1.5]};
@@ -11709,10 +12072,10 @@ var getStyles2 = () => {
       flex-direction: column;
       gap: ${size2[0.5]};
       border-radius: ${tokens.border.radius.sm};
-      border: 1px solid ${colors.gray[700]};
-      background-color: ${colors.darkGray[600]};
+      border: 1px solid ${t2(colors.gray[300], colors.gray[700])};
+      background-color: ${t2(colors.gray[50], colors.darkGray[600])};
       font-size: ${font.size.xs};
-      color: ${colors.gray[300]};
+      color: ${t2(colors.gray[700], colors.gray[300])};
       z-index: 99999;
       min-width: 120px;
       padding: ${size2[0.5]};
@@ -11722,17 +12085,19 @@ var getStyles2 = () => {
       align-items: center;
       justify-content: space-between;
       border-radius: ${tokens.border.radius.xs};
-      padding: ${tokens.size[0.5]} ${tokens.size[1]};
+      padding: ${tokens.size[1]} ${tokens.size[1]};
       cursor: pointer;
       background-color: transparent;
       border: none;
+      color: ${t2(colors.gray[700], colors.gray[300])};
       & svg {
+        color: ${t2(colors.gray[600], colors.gray[400])};
         transform: rotate(-90deg);
         width: ${tokens.size[2]};
         height: ${tokens.size[2]};
       }
       &:hover {
-        background-color: ${colors.darkGray[500]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[500])};
       }
       &:focus-visible {
         outline-offset: 2px;
@@ -11744,33 +12109,48 @@ var getStyles2 = () => {
       }
     `,
     settingsMenuHeader: u`
-      padding: ${tokens.size[0.5]} ${tokens.size[1]};
+      padding: ${tokens.size[1]} ${tokens.size[1]};
       font-weight: ${font.weight.medium};
-      border-bottom: 1px solid ${colors.darkGray[400]};
-      color: ${colors.gray[400]};
+      border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
+      color: ${t2(colors.gray[500], colors.gray[400])};
       font-size: ${font.size["xs"]};
     `,
     settingsSubButton: u`
       display: flex;
       align-items: center;
       justify-content: space-between;
-      color: ${colors.gray[300]};
+      color: ${t2(colors.gray[700], colors.gray[300])};
       font-size: ${font.size["xs"]};
       border-radius: ${tokens.border.radius.xs};
-      padding: ${tokens.size[0.5]} ${tokens.size[1]};
+      padding: ${tokens.size[1]} ${tokens.size[1]};
       cursor: pointer;
       background-color: transparent;
       border: none;
+      & svg {
+        color: ${t2(colors.gray[600], colors.gray[400])};
+      }
       &:hover {
-        background-color: ${colors.darkGray[500]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[500])};
       }
       &:focus-visible {
         outline-offset: 2px;
         outline: 2px solid ${colors.blue[800]};
       }
+    `,
+    themeSelectedButton: u`
+      background-color: ${t2(colors.purple[100], colors.purple[900])};
+      color: ${t2(colors.purple[700], colors.purple[300])};
+      & svg {
+        color: ${t2(colors.purple[700], colors.purple[300])};
+      }
+      &:hover {
+        background-color: ${t2(colors.purple[100], colors.purple[900])};
+      }
     `
   };
 };
+var lightStyles2 = stylesFactory2("light");
+var darkStyles2 = stylesFactory2("dark");
 delegateEvents(["click", "mousedown", "input"]);
 /*! Bundled license information: