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

package/build/index.cjs

@@ -10,7 +10,7 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// ../../node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/solid.js
+// ../../node_modules/.pnpm/solid-js@1.8.1/node_modules/solid-js/dist/solid.js
 function setHydrateContext(context) {
   sharedConfig.context = context;
 }
@@ -22,11 +22,11 @@ function nextHydrateContext() {
   };
 }
 function createRoot(fn, detachedOwner) {
-  const listener = Listener, owner = Owner, unowned = fn.length === 0, root = unowned ? UNOWNED : {
+  const listener = Listener, owner = Owner, unowned = fn.length === 0, current = detachedOwner === void 0 ? owner : detachedOwner, root = unowned ? UNOWNED : {
     owned: null,
     cleanups: null,
-    context: null,
-    owner: detachedOwner === void 0 ? owner : detachedOwner
+    context: current ? current.context : null,
+    owner: current
   }, updateFn = unowned ? fn : () => fn(() => untrack(() => cleanNode(root)));
   Owner = root;
   Listener = null;
@@ -72,7 +72,7 @@ function createRenderEffect(fn, value, options) {
 }
 function createEffect(fn, value, options) {
   runEffects = runUserEffects;
-  const c2 = createComputation(fn, value, false, STALE), s2 = SuspenseContext && lookup(Owner, SuspenseContext.id);
+  const c2 = createComputation(fn, value, false, STALE), s2 = SuspenseContext && useContext(SuspenseContext);
   if (s2)
     c2.suspense = s2;
   if (!options || !options.render)
@@ -92,6 +92,9 @@ function createMemo(fn, value, options) {
     updateComputation(c2);
   return readSignal.bind(c2);
 }
+function isPromise(v) {
+  return v && typeof v === "object" && "then" in v;
+}
 function createResource(pSource, pFetcher, pOptions) {
   let source;
   let fetcher;
@@ -115,16 +118,18 @@ function createResource(pSource, pFetcher, pOptions) {
     if (options.ssrLoadFrom === "initial")
       initP = options.initialValue;
     else if (sharedConfig.load && (v = sharedConfig.load(id)))
-      initP = v[0];
+      initP = isPromise(v) && "value" in v ? v.value : v;
   }
   function loadEnd(p2, v, error2, key) {
     if (pr === p2) {
       pr = null;
       key !== void 0 && (resolved = true);
       if ((p2 === initP || v === initP) && options.onHydrated)
-        queueMicrotask(() => options.onHydrated(key, {
-          value: v
-        }));
+        queueMicrotask(
+          () => options.onHydrated(key, {
+            value: v
+          })
+        );
       initP = NO_INIT;
       if (Transition && p2 && loadedUnderTransition) {
         Transition.promises.delete(p2);
@@ -150,7 +155,7 @@ function createResource(pSource, pFetcher, pOptions) {
     }, false);
   }
   function read() {
-    const c2 = SuspenseContext && lookup(Owner, SuspenseContext.id), v = value(), err = error();
+    const c2 = SuspenseContext && useContext(SuspenseContext), v = value(), err = error();
     if (err !== void 0 && !pr)
       throw err;
     if (Listener && !Listener.user && c2) {
@@ -172,20 +177,22 @@ function createResource(pSource, pFetcher, pOptions) {
     if (refetching !== false && scheduled)
       return;
     scheduled = false;
-    const lookup2 = dynamic ? dynamic() : source;
+    const lookup = dynamic ? dynamic() : source;
     loadedUnderTransition = Transition && Transition.running;
-    if (lookup2 == null || lookup2 === false) {
+    if (lookup == null || lookup === false) {
       loadEnd(pr, untrack(value));
       return;
     }
     if (Transition && pr)
       Transition.promises.delete(pr);
-    const p2 = initP !== NO_INIT ? initP : untrack(() => fetcher(lookup2, {
-      value: value(),
-      refetching
-    }));
-    if (typeof p2 !== "object" || !(p2 && "then" in p2)) {
-      loadEnd(pr, p2, void 0, lookup2);
+    const p2 = initP !== NO_INIT ? initP : untrack(
+      () => fetcher(lookup, {
+        value: value(),
+        refetching
+      })
+    );
+    if (!isPromise(p2)) {
+      loadEnd(pr, p2, void 0, lookup);
       return p2;
     }
     pr = p2;
@@ -195,7 +202,10 @@ function createResource(pSource, pFetcher, pOptions) {
       setState2(resolved ? "refreshing" : "pending");
       trigger();
     }, false);
-    return p2.then((v) => loadEnd(p2, v, void 0, lookup2), (e2) => loadEnd(p2, void 0, castError(e2), lookup2));
+    return p2.then(
+      (v) => loadEnd(p2, v, void 0, lookup),
+      (e2) => loadEnd(p2, void 0, castError(e2), lookup)
+    );
   }
   Object.defineProperties(read, {
     state: {
@@ -225,10 +235,13 @@ function createResource(pSource, pFetcher, pOptions) {
     createComputed(() => load(false));
   else
     load(false);
-  return [read, {
-    refetch: load,
-    mutate: setValue
-  }];
+  return [
+    read,
+    {
+      refetch: load,
+      mutate: setValue
+    }
+  ];
 }
 function batch(fn) {
   return runUpdates(fn, false);
@@ -247,7 +260,7 @@ function untrack(fn) {
 function on(deps, fn, options) {
   const isArray4 = Array.isArray(deps);
   let prevInput;
-  let defer3 = options && options.defer;
+  let defer2 = options && options.defer;
   return (prevValue) => {
     let input;
     if (isArray4) {
@@ -256,8 +269,8 @@ function on(deps, fn, options) {
         input[i2] = deps[i2]();
     } else
       input = deps();
-    if (defer3) {
-      defer3 = false;
+    if (defer2) {
+      defer2 = false;
       return void 0;
     }
     const result = untrack(() => fn(input, prevInput, prevValue));
@@ -337,8 +350,7 @@ function createContext(defaultValue, options) {
   };
 }
 function useContext(context) {
-  let ctx;
-  return (ctx = lookup(Owner, context.id)) !== void 0 ? ctx : context.defaultValue;
+  return Owner && Owner.context && Owner.context[context.id] !== void 0 ? Owner.context[context.id] : context.defaultValue;
 }
 function children(fn) {
   const children2 = createMemo(fn);
@@ -432,7 +444,11 @@ function updateComputation(node) {
   cleanNode(node);
   const owner = Owner, listener = Listener, time = ExecCount;
   Listener = Owner = node;
-  runComputation(node, Transition && Transition.running && Transition.sources.has(node) ? node.tValue : node.value, time);
+  runComputation(
+    node,
+    Transition && Transition.running && Transition.sources.has(node) ? node.tValue : node.value,
+    time
+  );
   if (Transition && !Transition.running && Transition.sources.has(node)) {
     queueMicrotask(() => {
       runUpdates(() => {
@@ -487,7 +503,7 @@ function createComputation(fn, init, pure, state2 = STALE, options) {
     cleanups: null,
     value: init,
     owner: Owner,
-    context: null,
+    context: Owner ? Owner.context : null,
     pure
   };
   if (Transition && Transition.running) {
@@ -750,7 +766,6 @@ function cleanNode(node) {
     node.tState = 0;
   else
     node.state = 0;
-  node.context = null;
 }
 function reset(node, top) {
   if (!top) {
@@ -778,7 +793,7 @@ function runErrors(err, fns, owner) {
   }
 }
 function handleError(err, owner = Owner) {
-  const fns = ERROR && lookup(owner, ERROR);
+  const fns = ERROR && owner && owner.context && owner.context[ERROR];
   const error = castError(err);
   if (!fns)
     throw error;
@@ -792,9 +807,6 @@ function handleError(err, owner = Owner) {
   else
     runErrors(error, fns, owner);
 }
-function lookup(owner, key) {
-  return owner ? owner.context && owner.context[key] !== void 0 ? owner.context[key] : lookup(owner.owner, key) : void 0;
-}
 function resolveChildren(children2) {
   if (typeof children2 === "function" && !children2.length)
     return resolveChildren(children2());
@@ -811,12 +823,16 @@ function resolveChildren(children2) {
 function createProvider(id, options) {
   return function provider(props) {
     let res;
-    createRenderEffect(() => res = untrack(() => {
-      Owner.context = {
-        [id]: props.value
-      };
-      return children(() => props.children);
-    }), void 0);
+    createRenderEffect(
+      () => res = untrack(() => {
+        Owner.context = {
+          ...Owner.context,
+          [id]: props.value
+        };
+        return children(() => props.children);
+      }),
+      void 0
+    );
     return res;
   };
 }
@@ -1002,28 +1018,31 @@ function mergeProps(...sources) {
     sources[i2] = typeof s2 === "function" ? (proxy = true, createMemo(s2)) : s2;
   }
   if (proxy) {
-    return new Proxy({
-      get(property) {
-        for (let i2 = sources.length - 1; i2 >= 0; i2--) {
-          const v = resolveSource(sources[i2])[property];
-          if (v !== void 0)
-            return v;
-        }
-      },
-      has(property) {
-        for (let i2 = sources.length - 1; i2 >= 0; i2--) {
-          if (property in resolveSource(sources[i2]))
-            return true;
+    return new Proxy(
+      {
+        get(property) {
+          for (let i2 = sources.length - 1; i2 >= 0; i2--) {
+            const v = resolveSource(sources[i2])[property];
+            if (v !== void 0)
+              return v;
+          }
+        },
+        has(property) {
+          for (let i2 = sources.length - 1; i2 >= 0; i2--) {
+            if (property in resolveSource(sources[i2]))
+              return true;
+          }
+          return false;
+        },
+        keys() {
+          const keys2 = [];
+          for (let i2 = 0; i2 < sources.length; i2++)
+            keys2.push(...Object.keys(resolveSource(sources[i2])));
+          return [...new Set(keys2)];
         }
-        return false;
       },
-      keys() {
-        const keys3 = [];
-        for (let i2 = 0; i2 < sources.length; i2++)
-          keys3.push(...Object.keys(resolveSource(sources[i2])));
-        return [...new Set(keys3)];
-      }
-    }, propTraps);
+      propTraps
+    );
   }
   const target = {};
   const sourcesMap = {};
@@ -1066,43 +1085,51 @@ function mergeProps(...sources) {
   }
   return target;
 }
-function splitProps(props, ...keys3) {
+function splitProps(props, ...keys2) {
   if ($PROXY in props) {
-    const blocked = new Set(keys3.length > 1 ? keys3.flat() : keys3[0]);
-    const res = keys3.map((k) => {
-      return new Proxy({
-        get(property) {
-          return k.includes(property) ? props[property] : void 0;
-        },
-        has(property) {
-          return k.includes(property) && property in props;
+    const blocked = new Set(keys2.length > 1 ? keys2.flat() : keys2[0]);
+    const res = keys2.map((k) => {
+      return new Proxy(
+        {
+          get(property) {
+            return k.includes(property) ? props[property] : void 0;
+          },
+          has(property) {
+            return k.includes(property) && property in props;
+          },
+          keys() {
+            return k.filter((property) => property in props);
+          }
         },
-        keys() {
-          return k.filter((property) => property in props);
-        }
-      }, propTraps);
+        propTraps
+      );
     });
-    res.push(new Proxy({
-      get(property) {
-        return blocked.has(property) ? void 0 : props[property];
-      },
-      has(property) {
-        return blocked.has(property) ? false : property in props;
-      },
-      keys() {
-        return Object.keys(props).filter((k) => !blocked.has(k));
-      }
-    }, propTraps));
+    res.push(
+      new Proxy(
+        {
+          get(property) {
+            return blocked.has(property) ? void 0 : props[property];
+          },
+          has(property) {
+            return blocked.has(property) ? false : property in props;
+          },
+          keys() {
+            return Object.keys(props).filter((k) => !blocked.has(k));
+          }
+        },
+        propTraps
+      )
+    );
     return res;
   }
   const otherObject = {};
-  const objects = keys3.map(() => ({}));
+  const objects = keys2.map(() => ({}));
   for (const propName of Object.getOwnPropertyNames(props)) {
     const desc = Object.getOwnPropertyDescriptor(props, propName);
     const isDefaultDesc = !desc.get && !desc.set && desc.enumerable && desc.writable && desc.configurable;
     let blocked = false;
     let objectIndex = 0;
-    for (const k of keys3) {
+    for (const k of keys2) {
       if (k.includes(propName)) {
         blocked = true;
         isDefaultDesc ? objects[objectIndex][propName] = desc.value : Object.defineProperty(objects[objectIndex], propName, desc);
@@ -1136,17 +1163,19 @@ function lazy(fn) {
       comp = s2;
     }
     let Comp;
-    return createMemo(() => (Comp = comp()) && untrack(() => {
-      if (false)
-        ;
-      if (!ctx)
-        return Comp(props);
-      const c2 = sharedConfig.context;
-      setHydrateContext(ctx);
-      const r2 = Comp(props);
-      setHydrateContext(c2);
-      return r2;
-    }));
+    return createMemo(
+      () => (Comp = comp()) && untrack(() => {
+        if (false)
+          ;
+        if (!ctx)
+          return Comp(props);
+        const c2 = sharedConfig.context;
+        setHydrateContext(ctx);
+        const r2 = Comp(props);
+        setHydrateContext(c2);
+        return r2;
+      })
+    );
   };
   wrap.preload = () => p2 || ((p2 = fn()).then((mod) => comp = () => mod.default), p2);
   return wrap;
@@ -1172,57 +1201,77 @@ function Show(props) {
   const condition = createMemo(() => props.when, void 0, {
     equals: (a2, b2) => keyed ? a2 === b2 : !a2 === !b2
   });
-  return createMemo(() => {
-    const c2 = condition();
-    if (c2) {
-      const child = props.children;
-      const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(keyed ? c2 : () => {
-        if (!untrack(condition))
-          throw narrowedError("Show");
-        return props.when;
-      })) : child;
-    }
-    return props.fallback;
-  }, void 0, void 0);
+  return createMemo(
+    () => {
+      const c2 = condition();
+      if (c2) {
+        const child = props.children;
+        const fn = typeof child === "function" && child.length > 0;
+        return fn ? untrack(
+          () => child(
+            keyed ? c2 : () => {
+              if (!untrack(condition))
+                throw narrowedError("Show");
+              return props.when;
+            }
+          )
+        ) : child;
+      }
+      return props.fallback;
+    },
+    void 0,
+    void 0
+  );
 }
 function Switch(props) {
   let keyed = false;
   const equals = (a2, b2) => a2[0] === b2[0] && (keyed ? a2[1] === b2[1] : !a2[1] === !b2[1]) && a2[2] === b2[2];
-  const conditions = children(() => props.children), evalConditions = createMemo(() => {
-    let conds = conditions();
-    if (!Array.isArray(conds))
-      conds = [conds];
-    for (let i2 = 0; i2 < conds.length; i2++) {
-      const c2 = conds[i2].when;
-      if (c2) {
-        keyed = !!conds[i2].keyed;
-        return [i2, c2, conds[i2]];
-      }
+  const conditions = children(() => props.children), evalConditions = createMemo(
+    () => {
+      let conds = conditions();
+      if (!Array.isArray(conds))
+        conds = [conds];
+      for (let i2 = 0; i2 < conds.length; i2++) {
+        const c2 = conds[i2].when;
+        if (c2) {
+          keyed = !!conds[i2].keyed;
+          return [i2, c2, conds[i2]];
+        }
+      }
+      return [-1];
+    },
+    void 0,
+    {
+      equals
     }
-    return [-1];
-  }, void 0, {
-    equals
-  });
-  return createMemo(() => {
-    const [index, when, cond] = evalConditions();
-    if (index < 0)
-      return props.fallback;
-    const c2 = cond.children;
-    const fn = typeof c2 === "function" && c2.length > 0;
-    return fn ? untrack(() => c2(keyed ? when : () => {
-      if (untrack(evalConditions)[0] !== index)
-        throw narrowedError("Match");
-      return cond.when;
-    })) : c2;
-  }, void 0, void 0);
+  );
+  return createMemo(
+    () => {
+      const [index, when, cond] = evalConditions();
+      if (index < 0)
+        return props.fallback;
+      const c2 = cond.children;
+      const fn = typeof c2 === "function" && c2.length > 0;
+      return fn ? untrack(
+        () => c2(
+          keyed ? when : () => {
+            if (untrack(evalConditions)[0] !== index)
+              throw narrowedError("Match");
+            return cond.when;
+          }
+        )
+      ) : c2;
+    },
+    void 0,
+    void 0
+  );
 }
 function Match(props) {
   return props;
 }
-var sharedConfig, equalFn, $PROXY, $TRACK, $DEVCOMP, signalOptions, ERROR, runEffects, STALE, PENDING, UNOWNED, NO_INIT, Owner, Transition, Scheduler, ExternalSourceFactory, Listener, Updates, Effects, ExecCount, transPending, setTransPending, SuspenseContext, FALLBACK, hydrationEnabled, propTraps, counter, narrowedError, DEV;
+var sharedConfig, equalFn, $PROXY, $TRACK, signalOptions, ERROR, runEffects, STALE, PENDING, UNOWNED, NO_INIT, Owner, Transition, Scheduler, ExternalSourceFactory, Listener, Updates, Effects, ExecCount, transPending, setTransPending, SuspenseContext, FALLBACK, hydrationEnabled, propTraps, counter, narrowedError, DEV;
 var init_solid = __esm({
-  "../../node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/dist/solid.js"() {
+  "../../node_modules/.pnpm/solid-js@1.8.1/node_modules/solid-js/dist/solid.js"() {
     sharedConfig = {
       context: void 0,
       registry: void 0
@@ -1230,7 +1279,6 @@ var init_solid = __esm({
     equalFn = (a2, b2) => a2 === b2;
     $PROXY = Symbol("solid-proxy");
     $TRACK = Symbol("solid-track");
-    $DEVCOMP = Symbol("solid-dev-component");
     signalOptions = {
       equals: equalFn
     };
@@ -1290,7 +1338,7 @@ var init_solid = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/web/dist/web.js
+// ../../node_modules/.pnpm/solid-js@1.8.1/node_modules/solid-js/web/dist/web.js
 function getPropAlias(prop, tagName) {
   const a2 = PropAliases[prop];
   return typeof a2 === "object" ? a2[tagName] ? a2["$"] : void 0 : a2;
@@ -1384,18 +1432,24 @@ function delegateEvents(eventNames, document2 = window.document) {
   }
 }
 function setAttribute(node, name, value) {
+  if (sharedConfig.context)
+    return;
   if (value == null)
     node.removeAttribute(name);
   else
     node.setAttribute(name, value);
 }
 function setAttributeNS(node, namespace, name, value) {
+  if (sharedConfig.context)
+    return;
   if (value == null)
     node.removeAttributeNS(namespace, name);
   else
     node.setAttributeNS(namespace, name, value);
 }
 function className(node, value) {
+  if (sharedConfig.context)
+    return;
   if (value == null)
     node.removeAttribute("class");
   else
@@ -1459,7 +1513,9 @@ function style(node, value, prev) {
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
   if (!skipChildren) {
-    createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
+    createRenderEffect(
+      () => prevProps.children = insertExpression(node, props.children, prevProps.children)
+    );
   }
   createRenderEffect(() => props.ref && props.ref(node));
   createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
@@ -1497,10 +1553,6 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
 function getNextElement(template2) {
   let node, key;
   if (!sharedConfig.context || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
-    if (sharedConfig.context)
-      ;
-    if (!template2)
-      throw new Error("Unrecoverable Hydration Mismatch. No template for key: " + key);
     return template2();
   }
   if (sharedConfig.completed)
@@ -1552,7 +1604,8 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     if (forceProp) {
       prop = prop.slice(5);
       isProp = true;
-    }
+    } else if (sharedConfig.context)
+      return value;
     if (prop === "class" || prop === "className")
       className(node, value);
     else if (isCE && !isProp && !isChildProp)
@@ -1655,10 +1708,13 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     if (sharedConfig.context) {
       if (!array.length)
         return current;
-      for (let i2 = 0; i2 < array.length; i2++) {
-        if (array[i2].parentNode)
-          return current = array;
-      }
+      if (marker === void 0)
+        return [...parent.childNodes];
+      let node = array[0];
+      let nodes = [node];
+      while ((node = node.nextSibling) !== marker)
+        nodes.push(node);
+      return current = nodes;
     }
     if (array.length === 0) {
       current = cleanChildren(parent, current, marker);
@@ -1704,7 +1760,11 @@ function normalizeIncomingArray(normalized, array, current, unwrap2) {
       if (unwrap2) {
         while (typeof item === "function")
           item = item();
-        dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
+        dynamic = normalizeIncomingArray(
+          normalized,
+          Array.isArray(item) ? item : [item],
+          Array.isArray(prev) ? prev : [prev]
+        ) || dynamic;
       } else {
         normalized.push(item);
         dynamic = true;
@@ -1752,39 +1812,41 @@ function createElement(tagName, isSVG = false) {
   return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
 }
 function Portal(props) {
-  const {
-    useShadow
-  } = props, marker = document.createTextNode(""), mount = () => props.mount || document.body, owner = getOwner();
+  const { useShadow } = props, marker = document.createTextNode(""), mount = () => props.mount || document.body, owner = getOwner();
   let content;
   let hydrating = !!sharedConfig.context;
-  createEffect(() => {
-    if (hydrating)
-      getOwner().user = hydrating = false;
-    content || (content = runWithOwner(owner, () => createMemo(() => props.children)));
-    const el = mount();
-    if (el instanceof HTMLHeadElement) {
-      const [clean, setClean] = createSignal(false);
-      const cleanup = () => setClean(true);
-      createRoot((dispose3) => insert(el, () => !clean() ? content() : dispose3(), null));
-      onCleanup(cleanup);
-    } else {
-      const container = createElement(props.isSVG ? "g" : "div", props.isSVG), renderRoot = useShadow && container.attachShadow ? container.attachShadow({
-        mode: "open"
-      }) : container;
-      Object.defineProperty(container, "_$host", {
-        get() {
-          return marker.parentNode;
-        },
-        configurable: true
-      });
-      insert(renderRoot, content);
-      el.appendChild(container);
-      props.ref && props.ref(container);
-      onCleanup(() => el.removeChild(container));
+  createEffect(
+    () => {
+      if (hydrating)
+        getOwner().user = hydrating = false;
+      content || (content = runWithOwner(owner, () => createMemo(() => props.children)));
+      const el = mount();
+      if (el instanceof HTMLHeadElement) {
+        const [clean, setClean] = createSignal(false);
+        const cleanup = () => setClean(true);
+        createRoot((dispose3) => insert(el, () => !clean() ? content() : dispose3(), null));
+        onCleanup(cleanup);
+      } else {
+        const container = createElement(props.isSVG ? "g" : "div", props.isSVG), renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+          mode: "open"
+        }) : container;
+        Object.defineProperty(container, "_$host", {
+          get() {
+            return marker.parentNode;
+          },
+          configurable: true
+        });
+        insert(renderRoot, content);
+        el.appendChild(container);
+        props.ref && props.ref(container);
+        onCleanup(() => el.removeChild(container));
+      }
+    },
+    void 0,
+    {
+      render: !hydrating
     }
-  }, void 0, {
-    render: !hydrating
-  });
+  );
   return marker;
 }
 function Dynamic(props) {
@@ -1794,9 +1856,6 @@ function Dynamic(props) {
     const component = cached();
     switch (typeof component) {
       case "function":
-        Object.assign(component, {
-          [$DEVCOMP]: true
-        });
         return untrack(() => component(others));
       case "string":
         const isSvg = SVGElements.has(component);
@@ -1808,12 +1867,51 @@ function Dynamic(props) {
 }
 var booleans, Properties, ChildProperties, Aliases, PropAliases, DelegatedEvents, SVGElements, SVGNamespace, $$EVENTS, isServer, SVG_NAMESPACE;
 var init_web = __esm({
-  "../../node_modules/.pnpm/solid-js@1.7.8/node_modules/solid-js/web/dist/web.js"() {
+  "../../node_modules/.pnpm/solid-js@1.8.1/node_modules/solid-js/web/dist/web.js"() {
     init_solid();
     init_solid();
-    booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
-    Properties = /* @__PURE__ */ new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
-    ChildProperties = /* @__PURE__ */ new Set(["innerHTML", "textContent", "innerText", "children"]);
+    booleans = [
+      "allowfullscreen",
+      "async",
+      "autofocus",
+      "autoplay",
+      "checked",
+      "controls",
+      "default",
+      "disabled",
+      "formnovalidate",
+      "hidden",
+      "indeterminate",
+      "ismap",
+      "loop",
+      "multiple",
+      "muted",
+      "nomodule",
+      "novalidate",
+      "open",
+      "playsinline",
+      "readonly",
+      "required",
+      "reversed",
+      "seamless",
+      "selected"
+    ];
+    Properties = /* @__PURE__ */ new Set([
+      "className",
+      "value",
+      "readOnly",
+      "formNoValidate",
+      "isMap",
+      "noModule",
+      "playsInline",
+      ...booleans
+    ]);
+    ChildProperties = /* @__PURE__ */ new Set([
+      "innerHTML",
+      "textContent",
+      "innerText",
+      "children"
+    ]);
     Aliases = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
       className: "class",
       htmlFor: "for"
@@ -1843,7 +1941,30 @@ var init_web = __esm({
         TEXTAREA: 1
       }
     });
-    DelegatedEvents = /* @__PURE__ */ new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
+    DelegatedEvents = /* @__PURE__ */ new Set([
+      "beforeinput",
+      "click",
+      "dblclick",
+      "contextmenu",
+      "focusin",
+      "focusout",
+      "input",
+      "keydown",
+      "keyup",
+      "mousedown",
+      "mousemove",
+      "mouseout",
+      "mouseover",
+      "mouseup",
+      "pointerdown",
+      "pointermove",
+      "pointerout",
+      "pointerover",
+      "pointerup",
+      "touchend",
+      "touchmove",
+      "touchstart"
+    ]);
     SVGElements = /* @__PURE__ */ new Set([
       "altGlyph",
       "altGlyphDef",
@@ -2621,7 +2742,7 @@ var init_clsx = __esm({
   }
 });
 
-// ../../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
 function createListTransition(source, options) {
   const initSource = untrack(source);
   if (isServer) {
@@ -2688,7 +2809,7 @@ function createListTransition(source, options) {
 }
 var noop;
 var init_dist = __esm({
-  "../../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"() {
     init_solid();
     init_web();
     noop = () => {
@@ -2696,7 +2817,7 @@ var init_dist = __esm({
   }
 });
 
-// ../../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
 function chain(callbacks) {
   return (...args) => {
     for (const callback of callbacks)
@@ -2714,27 +2835,64 @@ function reverseChain(callbacks) {
 function accessWith(valueOrFn, ...args) {
   return typeof valueOrFn === "function" ? valueOrFn(...args) : valueOrFn;
 }
-var isClient, isDev, access, asArray, tryOnCleanup;
+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);
+  }
+}
+var isClient, isDev, noop2, isNonNullable, filterNonNullable, access, asArray, tryOnCleanup;
 var init_R5675YMU = __esm({
-  "../../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"() {
     init_solid();
     init_web();
     isClient = !isServer;
     isDev = isClient && !!DEV;
+    noop2 = () => void 0;
+    isNonNullable = (i2) => i2 != null;
+    filterNonNullable = (arr) => arr.filter(isNonNullable);
     access = (v) => typeof v === "function" && !v.length ? v() : v;
     asArray = (value) => Array.isArray(value) ? value : value ? [value] : [];
     tryOnCleanup = isDev ? (fn) => getOwner() ? onCleanup(fn) : fn : onCleanup;
   }
 });
 
-// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.1_solid-js@1.7.8/node_modules/@solid-primitives/utils/dist/index/index.js
+// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.1_solid-js@1.8.1/node_modules/@solid-primitives/utils/dist/index/index.js
 var init_index = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+utils@6.2.1_solid-js@1.7.8/node_modules/@solid-primitives/utils/dist/index/index.js"() {
+  "../../node_modules/.pnpm/@solid-primitives+utils@6.2.1_solid-js@1.8.1/node_modules/@solid-primitives/utils/dist/index/index.js"() {
     init_R5675YMU();
   }
 });
 
-// ../../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);
+}
 function getResolvedElements(value, predicate) {
   if (predicate(value))
     return value;
@@ -2764,14 +2922,15 @@ function resolveElements(fn, predicate = defaultElementPredicate, serverPredicat
 }
 var defaultElementPredicate;
 var init_dist2 = __esm({
-  "../../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"() {
+    init_index();
     init_solid();
     init_web();
     defaultElementPredicate = isServer ? (item) => item != null && typeof item === "object" && "t" in item : (item) => item instanceof Element;
   }
 });
 
-// ../../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";
@@ -2847,7 +3006,7 @@ function exitTransition(classnames, events, el, done) {
 }
 var TransitionGroup;
 var init_dist3 = __esm({
-  "../../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"() {
     init_solid();
     init_dist();
     init_dist2();
@@ -2901,7 +3060,7 @@ var init_dist3 = __esm({
   }
 });
 
-// ../../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
 function dispose2(list) {
   for (const o2 of list)
     o2.dispose();
@@ -2956,11 +3115,11 @@ function keyArray(items, keyFn, mapFn, options = {}) {
         const item = list[i2];
         const key = keyFn(item, i2);
         prevKeys.delete(key);
-        const lookup2 = prev.get(key);
-        if (lookup2) {
-          result[i2] = lookup2.mapped;
-          lookup2.setIndex?.(i2);
-          lookup2.setItem(() => item);
+        const lookup = prev.get(key);
+        if (lookup) {
+          result[i2] = lookup.mapped;
+          lookup.setIndex?.(i2);
+          lookup.setItem(() => item);
         } else
           addNewItem(result, item, i2, key);
       }
@@ -2999,64 +3158,14 @@ function Key(props) {
 }
 var FALLBACK2;
 var init_dist4 = __esm({
-  "../../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"() {
     init_solid();
     init_web();
     FALLBACK2 = Symbol("fallback");
   }
 });
 
-// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.0_solid-js@1.7.8/node_modules/@solid-primitives/utils/dist/chunk/APG4HSEJ.js
-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);
-  }
-}
-var noop3, isNonNullable2, filterNonNullable2, access2, asArray2;
-var init_APG4HSEJ = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+utils@6.2.0_solid-js@1.7.8/node_modules/@solid-primitives/utils/dist/chunk/APG4HSEJ.js"() {
-    noop3 = () => void 0;
-    isNonNullable2 = (i2) => i2 != null;
-    filterNonNullable2 = (arr) => arr.filter(isNonNullable2);
-    access2 = (v) => typeof v === "function" && !v.length ? v() : v;
-    asArray2 = (value) => Array.isArray(value) ? value : value ? [value] : [];
-  }
-});
-
-// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.0_solid-js@1.7.8/node_modules/@solid-primitives/utils/dist/index/index.js
-var init_index2 = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+utils@6.2.0_solid-js@1.7.8/node_modules/@solid-primitives/utils/dist/index/index.js"() {
-    init_APG4HSEJ();
-  }
-});
-
-// ../../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 handleError2 = props?.throw ? (err, fallback) => {
@@ -3201,7 +3310,7 @@ function createStorage(props) {
 }
 var createLocalStorage, addClearMethod, serializeCookieOptions, cookieStorage;
 var init_dist5 = __esm({
-  "../../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"() {
     init_solid();
     createLocalStorage = createStorage;
     addClearMethod = (storage) => {
@@ -3281,10 +3390,37 @@ var init_dist5 = __esm({
   }
 });
 
-// ../../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);
+}
+var init_dist6 = __esm({
+  "../../node_modules/.pnpm/@solid-primitives+event-listener@2.3.0_solid-js@1.8.1/node_modules/@solid-primitives/event-listener/dist/index.js"() {
+    init_index();
+    init_solid();
+    init_web();
+  }
+});
+
+// ../../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));
@@ -3296,8 +3432,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);
@@ -3306,48 +3442,21 @@ 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;
   }, []);
 }
-var init_dist6 = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+resize-observer@2.0.18_solid-js@1.7.8/node_modules/@solid-primitives/resize-observer/dist/index.js"() {
-    init_index2();
-    init_solid();
-    init_web();
-  }
-});
-
-// ../../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);
-}
 var init_dist7 = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+event-listener@2.3.0_solid-js@1.7.8/node_modules/@solid-primitives/event-listener/dist/index.js"() {
+  "../../node_modules/.pnpm/@solid-primitives+resize-observer@2.0.18_solid-js@1.8.1/node_modules/@solid-primitives/resize-observer/dist/index.js"() {
     init_index();
     init_solid();
     init_web();
   }
 });
 
-// ../../node_modules/.pnpm/@solid-primitives+props@3.1.8_solid-js@1.7.8/node_modules/@solid-primitives/props/dist/index.js
-function trueFn4() {
+// ../../node_modules/.pnpm/@solid-primitives+props@3.1.8_solid-js@1.8.1/node_modules/@solid-primitives/props/dist/index.js
+function trueFn3() {
   return true;
 }
 function stringStyleToObject(style2) {
@@ -3431,7 +3540,7 @@ function combineProps(...args) {
 }
 var propTraps2, extractCSSregex, reduce;
 var init_dist8 = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+props@3.1.8_solid-js@1.7.8/node_modules/@solid-primitives/props/dist/index.js"() {
+  "../../node_modules/.pnpm/@solid-primitives+props@3.1.8_solid-js@1.8.1/node_modules/@solid-primitives/props/dist/index.js"() {
     init_solid();
     init_index();
     propTraps2 = {
@@ -3443,8 +3552,8 @@ var init_dist8 = __esm({
       has(_, property) {
         return _.has(property);
       },
-      set: trueFn4,
-      deleteProperty: trueFn4,
+      set: trueFn3,
+      deleteProperty: trueFn3,
       getOwnPropertyDescriptor(_, property) {
         return {
           configurable: true,
@@ -3452,8 +3561,8 @@ var init_dist8 = __esm({
           get() {
             return _.get(property);
           },
-          set: trueFn4,
-          deleteProperty: trueFn4
+          set: trueFn3,
+          deleteProperty: trueFn3
         };
       },
       ownKeys(_) {
@@ -3475,17 +3584,7 @@ var init_dist8 = __esm({
   }
 });
 
-// ../../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);
-}
-var init_dist9 = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+refs@1.0.5_solid-js@1.7.8/node_modules/@solid-primitives/refs/dist/index.js"() {
-    init_index();
-  }
-});
-
-// ../../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];
@@ -3719,7 +3818,7 @@ function getFocusableTreeWalker(root, opts, scope) {
   }
   return walker2;
 }
-function noop4() {
+function noop3() {
   return;
 }
 function isPointInPolygon(point, polygon) {
@@ -3845,12 +3944,12 @@ function relativeOffset(ancestor, child, axis) {
   return sum;
 }
 var EventKey, supportsPreventScrollCached, focusableElements, tabbableElements, FOCUSABLE_ELEMENT_SELECTOR, TABBABLE_ELEMENT_SELECTOR, transitionsByElement, transitionCallbacks, visuallyHiddenStyles;
-var init_dist10 = __esm({
-  "../../node_modules/.pnpm/@kobalte+utils@0.9.0_solid-js@1.7.8/node_modules/@kobalte/utils/dist/index.js"() {
+var init_dist9 = __esm({
+  "../../node_modules/.pnpm/@kobalte+utils@0.9.0_solid-js@1.8.1/node_modules/@kobalte/utils/dist/index.js"() {
     init_solid();
-    init_dist7();
+    init_dist6();
     init_dist8();
-    init_dist9();
+    init_dist2();
     init_index();
     EventKey = /* @__PURE__ */ ((EventKey2) => {
       EventKey2["Escape"] = "Escape";
@@ -3912,7 +4011,7 @@ var init_dist10 = __esm({
   }
 });
 
-// ../../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
 function wrap$1(value) {
   let p2 = value[$PROXY];
   if (!p2) {
@@ -3920,9 +4019,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,
@@ -3959,9 +4058,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];
@@ -3971,16 +4070,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);
@@ -3992,45 +4098,39 @@ 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;
-}
 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]);
   }
 }
@@ -4068,11 +4168,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);
       }
@@ -4109,12 +4205,14 @@ function createStore(...[store, options]) {
   }
   return [wrappedStore, setStore];
 }
-var $RAW, $NODE, proxyTraps$1;
+var $RAW, $NODE, $HAS, $SELF, proxyTraps$1;
 var init_store = __esm({
-  "../../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"() {
     init_solid();
     $RAW = Symbol("store-raw");
     $NODE = Symbol("store-node");
+    $HAS = Symbol("store-has");
+    $SELF = Symbol("store-self");
     proxyTraps$1 = {
       get(target, property, receiver) {
         if (property === $RAW)
@@ -4125,22 +4223,22 @@ var init_store = __esm({
           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() {
@@ -4198,8 +4296,8 @@ var init_import = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/@floating-ui+utils@0.1.4/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
-function clamp3(start, value, end) {
+// ../../node_modules/.pnpm/@floating-ui+utils@0.1.6/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+function clamp2(start, value, end) {
   return max(start, min(value, end));
 }
 function evaluate(value, param) {
@@ -4303,7 +4401,7 @@ function rectToClientRect(rect) {
 }
 var sides, min, max, round, floor, createCoords, oppositeSideMap, oppositeAlignmentMap;
 var init_floating_ui_utils = __esm({
-  "../../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"() {
     sides = ["top", "right", "bottom", "left"];
     min = Math.min;
     max = Math.max;
@@ -4620,7 +4718,7 @@ var init_floating_ui_core = __esm({
         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 {
@@ -4844,14 +4942,14 @@ var init_floating_ui_core = __esm({
             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,
@@ -4947,7 +5045,7 @@ var init_floating_ui_core = __esm({
   }
 });
 
-// ../../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();
@@ -5068,7 +5166,7 @@ function getOverflowAncestors(node, list, traverseIframes) {
   return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
 var init_floating_ui_utils_dom = __esm({
-  "../../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"() {
   }
 });
 
@@ -5459,8 +5557,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();
@@ -6149,7 +6247,7 @@ function ariaHideOutside(targets, root = document.body) {
 }
 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);
@@ -6645,9 +6743,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(() => {
@@ -8956,8 +9054,8 @@ function DropdownMenuRoot(props) {
 }
 var DATA_TOP_LAYER_ATTR, originalBodyPointerEvents, hasDisabledBodyPointerEvents, layers, layerStack, AUTOFOCUS_ON_MOUNT_EVENT, AUTOFOCUS_ON_UNMOUNT_EVENT, EVENT_OPTIONS, focusScopeStack, DATA_LIVE_ANNOUNCER_ATTR, refCountMap, observerStack, POINTER_DOWN_OUTSIDE_EVENT, FOCUS_OUTSIDE_EVENT, SCROLL_LOCK_IDENTIFIER, AS_COMPONENT_SYMBOL, RTL_SCRIPTS, RTL_LANGS, currentLocale, listeners, I18nContext, cache$1, Selection, SelectionManager, ListCollection, ListKeyboardDelegate, BUTTON_INPUT_TYPES, DomCollectionContext, DismissableLayerContext, PopperContext, _tmpl$$e, DEFAULT_SIZE, HALF_DEFAULT_SIZE, ROTATION_DEG, REVERSE_BASE_PLACEMENT, MenuContext, MenuRootContext, MenuItemContext, MenuGroupContext, MenuRadioGroupContext, SUB_CLOSE_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, index$d;
 var init_esm = __esm({
-  "../../node_modules/.pnpm/@kobalte+core@0.11.0_solid-js@1.7.8/node_modules/@kobalte/core/dist/esm/index.js"() {
-    init_dist10();
+  "../../node_modules/.pnpm/@kobalte+core@0.11.0_solid-js@1.8.1/node_modules/@kobalte/core/dist/esm/index.js"() {
+    init_dist9();
     init_store();
     init_web();
     init_solid();
@@ -9017,11 +9115,11 @@ var init_esm = __esm({
     I18nContext = createContext();
     cache$1 = /* @__PURE__ */ new Map();
     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;
@@ -9154,15 +9252,15 @@ var init_esm = __esm({
         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);
         }
@@ -9191,18 +9289,18 @@ var init_esm = __esm({
         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) {
@@ -9217,12 +9315,12 @@ var init_esm = __esm({
         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);
@@ -9307,7 +9405,7 @@ var init_esm = __esm({
         return !item || item.disabled;
       }
       getAllSelectableKeys() {
-        const keys3 = [];
+        const keys2 = [];
         const addKeys = (key) => {
           while (key != null) {
             if (this.canSelectItem(key)) {
@@ -9316,14 +9414,14 @@ var init_esm = __esm({
                 continue;
               }
               if (item.type === "item") {
-                keys3.push(key);
+                keys2.push(key);
               }
             }
             key = this.collection().getKeyAfter(key);
           }
         };
         addKeys(this.collection().getFirstKey());
-        return keys3;
+        return keys2;
       }
     };
     ListCollection = class {
@@ -9379,8 +9477,8 @@ var init_esm = __esm({
         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]);
       }
     };
     ListKeyboardDelegate = class {
@@ -10858,12 +10956,12 @@ var init_accessDeep = __esm({
     init_is();
     init_util();
     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;
     };
     getDeep = function(object, path) {
       validatePath(path);
@@ -11164,12 +11262,12 @@ function isPlainObject2(payload) {
 function isArray3(payload) {
   return getType2(payload) === "Array";
 }
-var init_dist11 = __esm({
+var init_dist10 = __esm({
   "../../node_modules/.pnpm/is-what@4.1.15/node_modules/is-what/dist/index.js"() {
   }
 });
 
-// ../../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 assignProp2(carry, key, newVal, originalObject, includeNonenumerable) {
   const propType = {}.propertyIsEnumerable.call(originalObject, key) ? "enumerable" : "nonenumerable";
   if (propType === "enumerable")
@@ -11202,9 +11300,9 @@ function copy(target, options = {}) {
     return carry;
   }, {});
 }
-var init_index_es = __esm({
-  "../../node_modules/.pnpm/copy-anything@3.0.2/node_modules/copy-anything/dist/index.es.js"() {
-    init_dist11();
+var init_dist11 = __esm({
+  "../../node_modules/.pnpm/copy-anything@3.0.5/node_modules/copy-anything/dist/index.js"() {
+    init_dist10();
   }
 });
 
@@ -11216,7 +11314,7 @@ var init_esm2 = __esm({
     init_registry();
     init_custom_transformer_registry();
     init_plainer();
-    init_index_es();
+    init_dist11();
     __assign2 = function() {
       __assign2 = Object.assign || function(t2) {
         for (var s2, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
@@ -11354,10 +11452,11 @@ function getQueryStatusColor({
 function getQueryStatusColorByLabel(label) {
   return label === "fresh" ? "green" : label === "stale" ? "yellow" : label === "paused" ? "purple" : label === "inactive" ? "gray" : "blue";
 }
-var displayValue, getStatusRank, queryHashSort, dateSort, statusAndDateSort, sortFns, convertRemToPixels, updateNestedDataByPath, deleteNestedDataByPath;
+var displayValue, getStatusRank, queryHashSort, dateSort, statusAndDateSort, sortFns, convertRemToPixels, getPreferredColorScheme, updateNestedDataByPath, deleteNestedDataByPath;
 var init_utils = __esm({
   "src/utils.tsx"() {
     init_esm2();
+    init_solid();
     displayValue = (value, beautify = false) => {
       const {
         json
@@ -11381,6 +11480,19 @@ var init_utils = __esm({
     convertRemToPixels = (rem) => {
       return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
     };
+    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;
+    };
     updateNestedDataByPath = (oldData, updatePath2, value) => {
       if (updatePath2.length === 0) {
         return value;
@@ -11494,62 +11606,171 @@ 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;
+  })();
 }
-var _tmpl$, _tmpl$2, _tmpl$3, _tmpl$4, _tmpl$5, _tmpl$6, _tmpl$7, _tmpl$8, _tmpl$9, _tmpl$10, _tmpl$11, _tmpl$12, _tmpl$13;
+var _tmpl$, _tmpl$2, _tmpl$3, _tmpl$4, _tmpl$5, _tmpl$6, _tmpl$7, _tmpl$8, _tmpl$9, _tmpl$10, _tmpl$11, _tmpl$12, _tmpl$13, _tmpl$14, _tmpl$15, _tmpl$16, _tmpl$17;
 var init_icons = __esm({
   "src/icons/index.tsx"() {
     init_web();
     init_web();
     init_web();
-    init_theme();
-    _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">`);
-    _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">`);
-    _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">`);
-    _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">`);
-    _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">`);
-    _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">`);
-    _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">`);
-    _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">`);
-    _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">`);
-    _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">`);
-    _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">`);
-    _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">`);
-    _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">`);
+    init_web();
+    init_solid();
+    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
+    _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">`);
+    _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">`);
+    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
   }
 });
 
@@ -11557,7 +11778,10 @@ var init_icons = __esm({
 function useQueryDevtoolsContext() {
   return useContext(QueryDevtoolsContext);
 }
-var QueryDevtoolsContext;
+function useTheme() {
+  return useContext(ThemeContext);
+}
+var QueryDevtoolsContext, ThemeContext;
 var init_Context = __esm({
   "src/Context.ts"() {
     init_solid();
@@ -11567,6 +11791,9 @@ var init_Context = __esm({
       queryFlavor: "",
       version: ""
     });
+    ThemeContext = createContext(
+      () => "dark"
+    );
   }
 });
 
@@ -11586,7 +11813,10 @@ 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);
@@ -11629,36 +11859,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;
                 },
@@ -11671,7 +11901,7 @@ function Explorer(props) {
                   });
                 }
               }), null);
-              insert(_el$13, createComponent(Show, {
+              insert(_el$14, createComponent(Show, {
                 get when() {
                   return type() === "array" && props.activeQuery !== void 0;
                 },
@@ -11684,22 +11914,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();
@@ -11710,8 +11940,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();
                   },
@@ -11742,38 +11972,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, {
@@ -11797,70 +12027,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;
           },
@@ -11874,22 +12130,22 @@ 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 _tmpl$14, _tmpl$22, _tmpl$32, _tmpl$42, _tmpl$52, _tmpl$62, _tmpl$72, _tmpl$82, _tmpl$92, _tmpl$102, Expander, CopyButton, ClearArrayButton, DeleteItemButton, getStyles;
+var _tmpl$18, _tmpl$22, _tmpl$32, _tmpl$42, _tmpl$52, _tmpl$62, _tmpl$72, _tmpl$82, _tmpl$92, _tmpl$102, _tmpl$112, Expander, CopyButton, ClearArrayButton, DeleteItemButton, ToggleValueButton, stylesFactory, lightStyles, darkStyles;
 var init_Explorer = __esm({
   "src/Explorer.tsx"() {
     init_web();
@@ -11910,21 +12166,25 @@ var init_Explorer = __esm({
     init_utils();
     init_icons();
     init_Context();
-    _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">`);
+    _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>`);
     _tmpl$22 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
-    _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items" aria-label="Remove all items">`);
-    _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item" aria-label="Delete item">`);
-    _tmpl$52 = /* @__PURE__ */ template(`<div>`);
-    _tmpl$62 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
-    _tmpl$72 = /* @__PURE__ */ template(`<input>`);
-    _tmpl$82 = /* @__PURE__ */ template(`<div><span>:`);
-    _tmpl$92 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
-    _tmpl$102 = /* @__PURE__ */ template(`<span>`);
+    _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items"aria-label="Remove all items">`);
+    _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item"aria-label="Delete item">`);
+    _tmpl$52 = /* @__PURE__ */ template(`<button title="Toggle value"aria-label="Toggle value">`);
+    _tmpl$62 = /* @__PURE__ */ template(`<div>`);
+    _tmpl$72 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
+    _tmpl$82 = /* @__PURE__ */ template(`<input>`);
+    _tmpl$92 = /* @__PURE__ */ template(`<span>`);
+    _tmpl$102 = /* @__PURE__ */ template(`<div><span>:`);
+    _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
     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 {
@@ -11935,7 +12195,10 @@ var init_Explorer = __esm({
       })();
     };
     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();
@@ -11966,7 +12229,11 @@ var init_Explorer = __esm({
                 return copyState() === "SuccessCopy";
               },
               get children() {
-                return createComponent(CopiedCopier, {});
+                return createComponent(CopiedCopier, {
+                  get theme() {
+                    return theme();
+                  }
+                });
               }
             }), createComponent(Match, {
               get when() {
@@ -11979,7 +12246,7 @@ var init_Explorer = __esm({
           }
         }));
         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$;
@@ -11991,7 +12258,10 @@ var init_Explorer = __esm({
       })();
     };
     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();
@@ -12001,12 +12271,15 @@ var init_Explorer = __esm({
           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;
       })();
     };
     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();
@@ -12016,17 +12289,46 @@ var init_Explorer = __esm({
           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;
       })();
     };
-    getStyles = () => {
+    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;
+      })();
+    };
+    stylesFactory = (theme) => {
       const {
         colors,
         font,
         size: size2,
         border
       } = tokens;
+      const t2 = (light, dark) => theme === "light" ? light : dark;
       return {
         entry: u`
       & * {
@@ -12040,7 +12342,7 @@ var init_Explorer = __esm({
         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`
@@ -12089,21 +12391,22 @@ var init_Explorer = __esm({
       }
     `,
         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;
@@ -12111,19 +12414,22 @@ var init_Explorer = __esm({
       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;
@@ -12136,14 +12442,7 @@ var init_Explorer = __esm({
       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 {
@@ -12154,6 +12453,8 @@ var init_Explorer = __esm({
     `
       };
     };
+    lightStyles = stylesFactory("light");
+    darkStyles = stylesFactory("dark");
     delegateEvents(["click"]);
   }
 });
@@ -12182,7 +12483,7 @@ __export(Devtools_exports, {
   QueryStatusCount: () => QueryStatusCount,
   default: () => Devtools_default
 });
-var _tmpl$15, _tmpl$23, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$112, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$16, _tmpl$17, _tmpl$18, _tmpl$19, _tmpl$20, _tmpl$21, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, selectedQueryHash, setSelectedQueryHash, panelWidth, setPanelWidth, DevtoolsComponent, Devtools_default, Devtools, DevtoolsPanel, QueryRow, QueryStatusCount, QueryStatus, QueryDetails, signalsMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, getStyles2;
+var _tmpl$19, _tmpl$23, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$20, _tmpl$21, _tmpl$222, _tmpl$232, _tmpl$24, _tmpl$25, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, selectedQueryHash, setSelectedQueryHash, panelWidth, setPanelWidth, DevtoolsComponent, Devtools_default, Devtools, DevtoolsPanel, QueryRow, QueryStatusCount, QueryStatus, QueryDetails, signalsMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
 var init_Devtools = __esm({
   "src/Devtools.tsx"() {
     init_web();
@@ -12203,7 +12504,7 @@ var init_Devtools = __esm({
     init_dist3();
     init_dist4();
     init_dist5();
-    init_dist6();
+    init_dist7();
     init_esm();
     init_theme();
     init_utils();
@@ -12211,7 +12512,7 @@ var init_Devtools = __esm({
     init_Explorer();
     init_Context();
     init_fonts();
-    _tmpl$15 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
+    _tmpl$19 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
     _tmpl$23 = /* @__PURE__ */ template(`<div>`);
     _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
     _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
@@ -12221,22 +12522,27 @@ var init_Devtools = __esm({
     _tmpl$83 = /* @__PURE__ */ template(`<span>Bottom`);
     _tmpl$93 = /* @__PURE__ */ template(`<span>Left`);
     _tmpl$103 = /* @__PURE__ */ template(`<span>Right`);
-    _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">`);
-    _tmpl$122 = /* @__PURE__ */ template(`<option>Sort by `);
-    _tmpl$132 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
-    _tmpl$142 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
-    _tmpl$152 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
-    _tmpl$16 = /* @__PURE__ */ template(`<span>`);
-    _tmpl$17 = /* @__PURE__ */ template(`<button><span></span><span>`);
-    _tmpl$18 = /* @__PURE__ */ template(`<button><span></span> Error`);
-    _tmpl$19 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
-    _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">`);
-    _tmpl$21 = /* @__PURE__ */ template(`<option>`);
+    _tmpl$113 = /* @__PURE__ */ template(`<span>Theme`);
+    _tmpl$122 = /* @__PURE__ */ template(`<span>Light`);
+    _tmpl$132 = /* @__PURE__ */ template(`<span>Dark`);
+    _tmpl$142 = /* @__PURE__ */ template(`<span>System`);
+    _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>`);
+    _tmpl$162 = /* @__PURE__ */ template(`<option>Sort by `);
+    _tmpl$172 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
+    _tmpl$182 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
+    _tmpl$192 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
+    _tmpl$20 = /* @__PURE__ */ template(`<span>`);
+    _tmpl$21 = /* @__PURE__ */ template(`<button><span></span><span>`);
+    _tmpl$222 = /* @__PURE__ */ template(`<button><span></span> Error`);
+    _tmpl$232 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
+    _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">`);
+    _tmpl$25 = /* @__PURE__ */ template(`<option>`);
     firstBreakpoint = 1024;
     secondBreakpoint = 796;
     thirdBreakpoint = 700;
     BUTTON_POSITION = "bottom-right";
     POSITION = "bottom";
+    THEME_PREFERENCE = "system";
     INITIAL_IS_OPEN = false;
     DEFAULT_HEIGHT = 500;
     DEFAULT_WIDTH = 500;
@@ -12245,33 +12551,51 @@ var init_Devtools = __esm({
     [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
     [panelWidth, setPanelWidth] = createSignal(0);
     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
+              });
+            }
+          });
         }
       });
     };
     Devtools_default = DevtoolsComponent;
-    Devtools = () => {
+    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`);
@@ -12287,8 +12611,12 @@ var init_Devtools = __esm({
               },
               get children() {
                 return createComponent(DevtoolsPanel, {
-                  localStore,
-                  setLocalStore
+                  get localStore() {
+                    return props.localStore;
+                  },
+                  get setLocalStore() {
+                    return props.setLocalStore;
+                  }
                 });
               }
             });
@@ -12302,11 +12630,11 @@ var init_Devtools = __esm({
                 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;
               }
             });
@@ -12337,7 +12665,10 @@ var init_Devtools = __esm({
       })();
     };
     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);
@@ -12446,8 +12777,24 @@ var init_Devtools = __esm({
           });
         });
       });
+      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;
@@ -12463,10 +12810,10 @@ var init_Devtools = __esm({
         _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 = () => {
@@ -12510,7 +12857,7 @@ var init_Devtools = __esm({
           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, {});
@@ -12519,12 +12866,12 @@ var init_Devtools = __esm({
               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,
@@ -12533,7 +12880,7 @@ var init_Devtools = __esm({
                       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, {})];
@@ -12542,7 +12889,7 @@ var init_Devtools = __esm({
                           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, {
@@ -12551,7 +12898,7 @@ var init_Devtools = __esm({
                                   },
                                   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, {})];
@@ -12562,7 +12909,7 @@ var init_Devtools = __esm({
                                   },
                                   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, {})];
@@ -12573,7 +12920,7 @@ var init_Devtools = __esm({
                                   },
                                   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, {})];
@@ -12584,7 +12931,7 @@ var init_Devtools = __esm({
                                   },
                                   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, {})];
@@ -12595,6 +12942,64 @@ var init_Devtools = __esm({
                           }
                         })];
                       }
+                    }), 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, {})];
+                                  }
+                                })];
+                              }
+                            });
+                          }
+                        })];
+                      }
                     })];
                   }
                 });
@@ -12602,7 +13007,7 @@ var init_Devtools = __esm({
             })];
           }
         }), null);
-        insert(_el$33, createComponent(Key, {
+        insert(_el$37, createComponent(Key, {
           by: (q) => q.queryHash,
           get each() {
             return queries();
@@ -12622,19 +13027,16 @@ var init_Devtools = __esm({
           }
         }), 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"));
@@ -12657,7 +13059,7 @@ var init_Devtools = __esm({
           _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,
@@ -12690,7 +13092,15 @@ var init_Devtools = __esm({
       })();
     };
     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);
@@ -12708,41 +13118,47 @@ var init_Devtools = __esm({
         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;
         }
       });
     };
@@ -12752,50 +13168,61 @@ var init_Devtools = __esm({
       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;
       })();
     };
     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);
@@ -12811,78 +13238,83 @@ var init_Devtools = __esm({
         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;
       })();
     };
     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(() => {
@@ -12939,24 +13371,38 @@ var init_Devtools = __esm({
           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();
@@ -12984,79 +13430,79 @@ var init_Devtools = __esm({
               });
             }
           };
-          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() {
@@ -13067,8 +13513,8 @@ var init_Devtools = __esm({
               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() {
@@ -13076,58 +13522,50 @@ var init_Devtools = __esm({
             }
           }));
           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,
@@ -13154,7 +13592,7 @@ var init_Devtools = __esm({
             _v$56: void 0,
             _v$57: void 0
           });
-          return _el$46;
+          return _el$50;
         }
       });
     };
@@ -13194,7 +13632,7 @@ var init_Devtools = __esm({
       });
       return value;
     };
-    getStyles2 = () => {
+    stylesFactory2 = (theme) => {
       const {
         colors,
         font,
@@ -13203,6 +13641,7 @@ var init_Devtools = __esm({
         shadow,
         border
       } = tokens;
+      const t2 = (light, dark) => theme === "light" ? light : dark;
       return {
         devtoolsBtn: u`
       z-index: 100000;
@@ -13264,8 +13703,6 @@ var init_Devtools = __esm({
       display: flex;
       gap: ${tokens.size[0.5]};
       & * {
-        font-family: 'Inter', sans-serif;
-        color: ${colors.gray[300]};
         box-sizing: border-box;
         text-transform: none;
       }
@@ -13292,7 +13729,7 @@ var init_Devtools = __esm({
       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;
@@ -13300,20 +13737,20 @@ var init_Devtools = __esm({
       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`
@@ -13324,13 +13761,15 @@ var init_Devtools = __esm({
       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]};
       }
@@ -13339,11 +13778,10 @@ var init_Devtools = __esm({
       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]};
 
@@ -13364,10 +13802,9 @@ var init_Devtools = __esm({
       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]};
@@ -13385,11 +13822,10 @@ var init_Devtools = __esm({
       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]};
 
@@ -13409,11 +13845,10 @@ var init_Devtools = __esm({
       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]};
 
@@ -13431,15 +13866,18 @@ var init_Devtools = __esm({
     `,
         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;
     `,
@@ -13473,7 +13911,7 @@ var init_Devtools = __esm({
       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;
@@ -13500,11 +13938,15 @@ var init_Devtools = __esm({
       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;
@@ -13519,14 +13961,17 @@ var init_Devtools = __esm({
         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 {
@@ -13543,8 +13988,8 @@ var init_Devtools = __esm({
       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]};
@@ -13552,15 +13997,15 @@ var init_Devtools = __esm({
         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;
@@ -13569,7 +14014,8 @@ var init_Devtools = __esm({
         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); */
@@ -13580,16 +14026,13 @@ var init_Devtools = __esm({
         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;
@@ -13599,47 +14042,52 @@ var init_Devtools = __esm({
         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;
@@ -13655,24 +14103,26 @@ var init_Devtools = __esm({
         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;
@@ -13690,7 +14140,8 @@ var init_Devtools = __esm({
     `,
         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;
@@ -13698,13 +14149,13 @@ var init_Devtools = __esm({
       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]};
       }
@@ -13713,6 +14164,12 @@ var init_Devtools = __esm({
         border-radius: ${border.radius.xs};
         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;
@@ -13726,9 +14183,11 @@ var init_Devtools = __esm({
       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;
       }
@@ -13738,7 +14197,7 @@ var init_Devtools = __esm({
         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 {
@@ -13753,7 +14212,7 @@ var init_Devtools = __esm({
         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;
@@ -13764,7 +14223,7 @@ var init_Devtools = __esm({
         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;
@@ -13775,15 +14234,20 @@ var init_Devtools = __esm({
         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;
@@ -13791,10 +14255,11 @@ var init_Devtools = __esm({
       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};
@@ -13827,6 +14292,10 @@ var init_Devtools = __esm({
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
       }
+
+      & pre {
+        margin: 0;
+      }
     `,
         queryDetailsStatus: u`
       border: 1px solid ${colors.darkGray[200]};
@@ -13841,12 +14310,13 @@ var init_Devtools = __esm({
       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};
@@ -13858,7 +14328,7 @@ var init_Devtools = __esm({
           outline: 2px solid ${colors.blue[800]};
         }
         &:hover {
-          background-color: ${colors.darkGray[500]};
+          background-color: ${t2(colors.gray[200], colors.darkGray[500])};
         }
 
         &:disabled {
@@ -13879,17 +14349,17 @@ var init_Devtools = __esm({
       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]};
@@ -13930,10 +14400,10 @@ var init_Devtools = __esm({
       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]};
@@ -13943,17 +14413,19 @@ var init_Devtools = __esm({
       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;
@@ -13965,33 +14437,48 @@ var init_Devtools = __esm({
       }
     `,
         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])};
+      }
     `
       };
     };
+    lightStyles2 = stylesFactory2("light");
+    darkStyles2 = stylesFactory2("dark");
     delegateEvents(["click", "mousedown", "input"]);
   }
 });
@@ -14002,7 +14489,17 @@ init_web();
 init_web();
 init_solid();
 exports.TanstackQueryDevtools = class TanstackQueryDevtools {
-  isMounted = false;
+  #client;
+  #onlineManager;
+  #queryFlavor;
+  #version;
+  #isMounted = false;
+  #buttonPosition;
+  #position;
+  #initialIsOpen;
+  #errorTypes;
+  #Component;
+  #dispose;
   constructor(config) {
     const {
       client,
@@ -14014,57 +14511,57 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
       initialIsOpen,
       errorTypes
     } = config;
-    this.client = createSignal(client);
-    this.queryFlavor = queryFlavor;
-    this.version = version;
-    this.onlineManager = onlineManager;
-    this.buttonPosition = createSignal(buttonPosition);
-    this.position = createSignal(position);
-    this.initialIsOpen = createSignal(initialIsOpen);
-    this.errorTypes = createSignal(errorTypes);
+    this.#client = createSignal(client);
+    this.#queryFlavor = queryFlavor;
+    this.#version = version;
+    this.#onlineManager = onlineManager;
+    this.#buttonPosition = createSignal(buttonPosition);
+    this.#position = createSignal(position);
+    this.#initialIsOpen = createSignal(initialIsOpen);
+    this.#errorTypes = createSignal(errorTypes);
   }
   setButtonPosition(position) {
-    this.buttonPosition[1](position);
+    this.#buttonPosition[1](position);
   }
   setPosition(position) {
-    this.position[1](position);
+    this.#position[1](position);
   }
   setInitialIsOpen(isOpen) {
-    this.initialIsOpen[1](isOpen);
+    this.#initialIsOpen[1](isOpen);
   }
   setErrorTypes(errorTypes) {
-    this.errorTypes[1](errorTypes);
+    this.#errorTypes[1](errorTypes);
   }
   setClient(client) {
-    this.client[1](client);
+    this.#client[1](client);
   }
   mount(el) {
-    if (this.isMounted) {
+    if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
     }
     const dispose3 = render(() => {
-      const [btnPosition] = this.buttonPosition;
-      const [pos] = this.position;
-      const [isOpen] = this.initialIsOpen;
-      const [errors] = this.errorTypes;
-      const [queryClient] = this.client;
+      const [btnPosition] = this.#buttonPosition;
+      const [pos] = this.#position;
+      const [isOpen] = this.#initialIsOpen;
+      const [errors] = this.#errorTypes;
+      const [queryClient] = this.#client;
       let Devtools2;
-      if (this.Component) {
-        Devtools2 = this.Component;
+      if (this.#Component) {
+        Devtools2 = this.#Component;
       } else {
         Devtools2 = lazy(() => Promise.resolve().then(() => (init_Devtools(), Devtools_exports)));
-        this.Component = Devtools2;
+        this.#Component = Devtools2;
       }
       const _self$ = this;
       return createComponent(Devtools2, mergeProps({
         get queryFlavor() {
-          return _self$.queryFlavor;
+          return _self$.#queryFlavor;
         },
         get version() {
-          return _self$.version;
+          return _self$.#version;
         },
         get onlineManager() {
-          return _self$.onlineManager;
+          return _self$.#onlineManager;
         }
       }, {
         get client() {
@@ -14084,15 +14581,15 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
         }
       }));
     }, el);
-    this.isMounted = true;
-    this.dispose = dispose3;
+    this.#isMounted = true;
+    this.#dispose = dispose3;
   }
   unmount() {
-    if (!this.isMounted) {
+    if (!this.#isMounted) {
       throw new Error("Devtools is not mounted");
     }
-    this.dispose?.();
-    this.isMounted = false;
+    this.#dispose?.();
+    this.#isMounted = false;
   }
 };
 /*! Bundled license information: