@tanstack/query-devtools 5.0.0-beta.33 → 5.0.0-beta.34

package/build/Devtools/{AO4SNFEU.js → 26QOLXHC.js}

@@ -1,4 +1,4 @@
-import { delegateEvents, createContext, createSignal, createComponent, createMemo, insert, Show, createRenderEffect, className, on, onMount, createEffect, setAttribute, spread, mergeProps, For, onCleanup, isServer, Index, useContext, template, use, untrack, useTransition, $TRACK, createRoot, addEventListener, Switch, Match } from '../chunk/C5UID3AG.js';
+import { delegateEvents, createContext, createSignal, createComponent, createMemo, createEffect, insert, Show, createRenderEffect, className, on, onMount, setAttribute, spread, mergeProps, For, onCleanup, isServer, Index, useContext, template, use, untrack, useTransition, $TRACK, createRoot, addEventListener, Switch, Match } from '../chunk/C5UID3AG.js';
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -405,8 +405,8 @@ var characterMap = {
 var chars = Object.keys(characterMap).join("|");
 var allAccents = new RegExp(chars, "g");
 function removeAccents(str) {
-  return str.replace(allAccents, (match2) => {
-    return characterMap[match2];
+  return str.replace(allAccents, (match) => {
+    return characterMap[match];
   });
 }
 var rankings = {
@@ -442,8 +442,8 @@ function rankItem(item, value, options) {
     accessorThreshold: options.threshold,
     passed: false
   };
-  for (let i = 0; i < valuesToRank.length; i++) {
-    const rankValue = valuesToRank[i];
+  for (let i2 = 0; i2 < valuesToRank.length; i2++) {
+    const rankValue = valuesToRank[i2];
     let newRank = getMatchRanking(rankValue.itemValue, value, options);
     const {
       minRanking,
@@ -459,7 +459,7 @@ function rankItem(item, value, options) {
     if (newRank >= threshold && newRank > rankingInfo.rank) {
       rankingInfo.rank = newRank;
       rankingInfo.passed = true;
-      rankingInfo.accessorIndex = i;
+      rankingInfo.accessorIndex = i2;
       rankingInfo.accessorThreshold = threshold;
       rankingInfo.rankedValue = rankValue.itemValue;
     }
@@ -531,8 +531,8 @@ function getClosenessRanking(testString, stringToRank) {
     return rankings.NO_MATCH;
   }
   charNumber = firstIndex;
-  for (let i = 1, I = stringToRank.length; i < I; i++) {
-    const matchChar = stringToRank[i];
+  for (let i2 = 1, I = stringToRank.length; i2 < I; i2++) {
+    const matchChar = stringToRank[i2];
     charNumber = findMatchingCharacter(matchChar, testString, charNumber);
     const found = charNumber > -1;
     if (!found) {
@@ -572,9 +572,9 @@ function getAllValuesToRank(item, accessors) {
     const accessor = accessors[j];
     const attributes = getAccessorAttributes(accessor);
     const itemValues = getItemValues(item, accessor);
-    for (let i = 0, I = itemValues.length; i < I; i++) {
+    for (let i2 = 0, I = itemValues.length; i2 < I; i2++) {
       allValues.push({
-        itemValue: itemValues[i],
+        itemValue: itemValues[i2],
         attributes
       });
     }
@@ -595,1171 +595,85 @@ function getAccessorAttributes(accessor) {
   };
 }
 
-// ../../node_modules/.pnpm/@emotion+sheet@1.2.2/node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js
-function sheetForTag(tag) {
-  if (tag.sheet) {
-    return tag.sheet;
+// ../../node_modules/.pnpm/goober@2.1.13_csstype@3.1.2/node_modules/goober/dist/goober.modern.js
+var e = { data: "" };
+var t = (t2) => "object" == typeof window ? ((t2 ? t2.querySelector("#_goober") : window._goober) || Object.assign((t2 || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : t2 || e;
+var l = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g;
+var a = /\/\*[^]*?\*\/|  +/g;
+var n = /\n+/g;
+var o = (e2, t2) => {
+  let r2 = "", l2 = "", a2 = "";
+  for (let n2 in e2) {
+    let c2 = e2[n2];
+    "@" == n2[0] ? "i" == n2[1] ? r2 = n2 + " " + c2 + ";" : l2 += "f" == n2[1] ? o(c2, n2) : n2 + "{" + o(c2, "k" == n2[1] ? "" : t2) + "}" : "object" == typeof c2 ? l2 += o(c2, t2 ? t2.replace(/([^,])+/g, (e3) => n2.replace(/(^:.*)|([^,])+/g, (t3) => /&/.test(t3) ? t3.replace(/&/g, e3) : e3 ? e3 + " " + t3 : t3)) : n2) : null != c2 && (n2 = /^--/.test(n2) ? n2 : n2.replace(/[A-Z]/g, "-$&").toLowerCase(), a2 += o.p ? o.p(n2, c2) : n2 + ":" + c2 + ";");
   }
-  for (var i = 0; i < document.styleSheets.length; i++) {
-    if (document.styleSheets[i].ownerNode === tag) {
-      return document.styleSheets[i];
-    }
-  }
-}
-function createStyleElement(options) {
-  var tag = document.createElement("style");
-  tag.setAttribute("data-emotion", options.key);
-  if (options.nonce !== void 0) {
-    tag.setAttribute("nonce", options.nonce);
-  }
-  tag.appendChild(document.createTextNode(""));
-  tag.setAttribute("data-s", "");
-  return tag;
-}
-var StyleSheet = /* @__PURE__ */ function() {
-  function StyleSheet2(options) {
-    var _this = this;
-    this._insertTag = function(tag) {
-      var before;
-      if (_this.tags.length === 0) {
-        if (_this.insertionPoint) {
-          before = _this.insertionPoint.nextSibling;
-        } else if (_this.prepend) {
-          before = _this.container.firstChild;
-        } else {
-          before = _this.before;
-        }
-      } else {
-        before = _this.tags[_this.tags.length - 1].nextSibling;
-      }
-      _this.container.insertBefore(tag, before);
-      _this.tags.push(tag);
-    };
-    this.isSpeedy = options.speedy === void 0 ? true : options.speedy;
-    this.tags = [];
-    this.ctr = 0;
-    this.nonce = options.nonce;
-    this.key = options.key;
-    this.container = options.container;
-    this.prepend = options.prepend;
-    this.insertionPoint = options.insertionPoint;
-    this.before = null;
-  }
-  var _proto = StyleSheet2.prototype;
-  _proto.hydrate = function hydrate2(nodes) {
-    nodes.forEach(this._insertTag);
-  };
-  _proto.insert = function insert2(rule) {
-    if (this.ctr % (this.isSpeedy ? 65e3 : 1) === 0) {
-      this._insertTag(createStyleElement(this));
-    }
-    var tag = this.tags[this.tags.length - 1];
-    if (this.isSpeedy) {
-      var sheet2 = sheetForTag(tag);
-      try {
-        sheet2.insertRule(rule, sheet2.cssRules.length);
-      } catch (e) {
-      }
-    } else {
-      tag.appendChild(document.createTextNode(rule));
-    }
-    this.ctr++;
-  };
-  _proto.flush = function flush2() {
-    this.tags.forEach(function(tag) {
-      return tag.parentNode && tag.parentNode.removeChild(tag);
-    });
-    this.tags = [];
-    this.ctr = 0;
-  };
-  return StyleSheet2;
-}();
-
-// ../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Enum.js
-var MS = "-ms-";
-var MOZ = "-moz-";
-var WEBKIT = "-webkit-";
-var COMMENT = "comm";
-var RULESET = "rule";
-var DECLARATION = "decl";
-var IMPORT = "@import";
-var KEYFRAMES = "@keyframes";
-var LAYER = "@layer";
-
-// ../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Utility.js
-var abs = Math.abs;
-var from = String.fromCharCode;
-var assign = Object.assign;
-function hash(value, length2) {
-  return charat(value, 0) ^ 45 ? (((length2 << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0;
-}
-function trim(value) {
-  return value.trim();
-}
-function match(value, pattern) {
-  return (value = pattern.exec(value)) ? value[0] : value;
-}
-function replace(value, pattern, replacement) {
-  return value.replace(pattern, replacement);
-}
-function indexof(value, search) {
-  return value.indexOf(search);
-}
-function charat(value, index) {
-  return value.charCodeAt(index) | 0;
-}
-function substr(value, begin, end) {
-  return value.slice(begin, end);
-}
-function strlen(value) {
-  return value.length;
-}
-function sizeof(value) {
-  return value.length;
-}
-function append(value, array) {
-  return array.push(value), value;
-}
-function combine(array, callback) {
-  return array.map(callback).join("");
-}
-
-// ../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Tokenizer.js
-var line = 1;
-var column = 1;
-var length = 0;
-var position = 0;
-var character = 0;
-var characters = "";
-function node(value, root, parent, type, props, children2, length2) {
-  return { value, root, parent, type, props, children: children2, line, column, length: length2, return: "" };
-}
-function copy(root, props) {
-  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props);
-}
-function char() {
-  return character;
-}
-function prev() {
-  character = position > 0 ? charat(characters, --position) : 0;
-  if (column--, character === 10)
-    column = 1, line--;
-  return character;
-}
-function next() {
-  character = position < length ? charat(characters, position++) : 0;
-  if (column++, character === 10)
-    column = 1, line++;
-  return character;
-}
-function peek() {
-  return charat(characters, position);
-}
-function caret() {
-  return position;
-}
-function slice(begin, end) {
-  return substr(characters, begin, end);
-}
-function token(type) {
-  switch (type) {
-    case 0:
-    case 9:
-    case 10:
-    case 13:
-    case 32:
-      return 5;
-    case 33:
-    case 43:
-    case 44:
-    case 47:
-    case 62:
-    case 64:
-    case 126:
-    case 59:
-    case 123:
-    case 125:
-      return 4;
-    case 58:
-      return 3;
-    case 34:
-    case 39:
-    case 40:
-    case 91:
-      return 2;
-    case 41:
-    case 93:
-      return 1;
-  }
-  return 0;
-}
-function alloc(value) {
-  return line = column = 1, length = strlen(characters = value), position = 0, [];
-}
-function dealloc(value) {
-  return characters = "", value;
-}
-function delimit(type) {
-  return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)));
-}
-function whitespace(type) {
-  while (character = peek())
-    if (character < 33)
-      next();
-    else
-      break;
-  return token(type) > 2 || token(character) > 3 ? "" : " ";
-}
-function escaping(index, count) {
-  while (--count && next())
-    if (character < 48 || character > 102 || character > 57 && character < 65 || character > 70 && character < 97)
-      break;
-  return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32));
-}
-function delimiter(type) {
-  while (next())
-    switch (character) {
-      case type:
-        return position;
-      case 34:
-      case 39:
-        if (type !== 34 && type !== 39)
-          delimiter(character);
-        break;
-      case 40:
-        if (type === 41)
-          delimiter(type);
-        break;
-      case 92:
-        next();
-        break;
-    }
-  return position;
-}
-function commenter(type, index) {
-  while (next())
-    if (type + character === 47 + 10)
-      break;
-    else if (type + character === 42 + 42 && peek() === 47)
-      break;
-  return "/*" + slice(index, position - 1) + "*" + from(type === 47 ? type : next());
-}
-function identifier(index) {
-  while (!token(peek()))
-    next();
-  return slice(index, position);
-}
-
-// ../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Parser.js
-function compile(value) {
-  return dealloc(parse("", null, null, null, [""], value = alloc(value), 0, [0], value));
-}
-function parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
-  var index = 0;
-  var offset = 0;
-  var length2 = pseudo;
-  var atrule = 0;
-  var property = 0;
-  var previous = 0;
-  var variable = 1;
-  var scanning = 1;
-  var ampersand = 1;
-  var character2 = 0;
-  var type = "";
-  var props = rules;
-  var children2 = rulesets;
-  var reference = rule;
-  var characters2 = type;
-  while (scanning)
-    switch (previous = character2, character2 = next()) {
-      case 40:
-        if (previous != 108 && charat(characters2, length2 - 1) == 58) {
-          if (indexof(characters2 += replace(delimit(character2), "&", "&\f"), "&\f") != -1)
-            ampersand = -1;
-          break;
-        }
-      case 34:
-      case 39:
-      case 91:
-        characters2 += delimit(character2);
-        break;
-      case 9:
-      case 10:
-      case 13:
-      case 32:
-        characters2 += whitespace(previous);
-        break;
-      case 92:
-        characters2 += escaping(caret() - 1, 7);
-        continue;
-      case 47:
-        switch (peek()) {
-          case 42:
-          case 47:
-            append(comment(commenter(next(), caret()), root, parent), declarations);
-            break;
-          default:
-            characters2 += "/";
-        }
-        break;
-      case 123 * variable:
-        points[index++] = strlen(characters2) * ampersand;
-      case 125 * variable:
-      case 59:
-      case 0:
-        switch (character2) {
-          case 0:
-          case 125:
-            scanning = 0;
-          case 59 + offset:
-            if (ampersand == -1)
-              characters2 = replace(characters2, /\f/g, "");
-            if (property > 0 && strlen(characters2) - length2)
-              append(property > 32 ? declaration(characters2 + ";", rule, parent, length2 - 1) : declaration(replace(characters2, " ", "") + ";", rule, parent, length2 - 2), declarations);
-            break;
-          case 59:
-            characters2 += ";";
-          default:
-            append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props = [], children2 = [], length2), rulesets);
-            if (character2 === 123)
-              if (offset === 0)
-                parse(characters2, root, reference, reference, props, rulesets, length2, points, children2);
-              else
-                switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) {
-                  case 100:
-                  case 108:
-                  case 109:
-                  case 115:
-                    parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length2), children2), rules, children2, length2, points, rule ? props : children2);
-                    break;
-                  default:
-                    parse(characters2, reference, reference, reference, [""], children2, 0, points, children2);
-                }
-        }
-        index = offset = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
-        break;
-      case 58:
-        length2 = 1 + strlen(characters2), property = previous;
-      default:
-        if (variable < 1) {
-          if (character2 == 123)
-            --variable;
-          else if (character2 == 125 && variable++ == 0 && prev() == 125)
-            continue;
-        }
-        switch (characters2 += from(character2), character2 * variable) {
-          case 38:
-            ampersand = offset > 0 ? 1 : (characters2 += "\f", -1);
-            break;
-          case 44:
-            points[index++] = (strlen(characters2) - 1) * ampersand, ampersand = 1;
-            break;
-          case 64:
-            if (peek() === 45)
-              characters2 += delimit(next());
-            atrule = peek(), offset = length2 = strlen(type = characters2 += identifier(caret())), character2++;
-            break;
-          case 45:
-            if (previous === 45 && strlen(characters2) == 2)
-              variable = 0;
-        }
-    }
-  return rulesets;
-}
-function ruleset(value, root, parent, index, offset, rules, points, type, props, children2, length2) {
-  var post = offset - 1;
-  var rule = offset === 0 ? rules : [""];
-  var size = sizeof(rule);
-  for (var i = 0, j = 0, k = 0; i < index; ++i)
-    for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)
-      if (z = trim(j > 0 ? rule[x] + " " + y : replace(y, /&\f/g, rule[x])))
-        props[k++] = z;
-  return node(value, root, parent, offset === 0 ? RULESET : type, props, children2, length2);
-}
-function comment(value, root, parent) {
-  return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0);
-}
-function declaration(value, root, parent, length2) {
-  return node(value, root, parent, DECLARATION, substr(value, 0, length2), substr(value, length2 + 1, -1), length2);
-}
-
-// ../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Serializer.js
-function serialize(children2, callback) {
-  var output = "";
-  var length2 = sizeof(children2);
-  for (var i = 0; i < length2; i++)
-    output += callback(children2[i], i, children2, callback) || "";
-  return output;
-}
-function stringify(element, index, children2, callback) {
-  switch (element.type) {
-    case LAYER:
-      if (element.children.length)
-        break;
-    case IMPORT:
-    case DECLARATION:
-      return element.return = element.return || element.value;
-    case COMMENT:
-      return "";
-    case KEYFRAMES:
-      return element.return = element.value + "{" + serialize(element.children, callback) + "}";
-    case RULESET:
-      element.value = element.props.join(",");
-  }
-  return strlen(children2 = serialize(element.children, callback)) ? element.return = element.value + "{" + children2 + "}" : "";
-}
-
-// ../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Middleware.js
-function middleware(collection) {
-  var length2 = sizeof(collection);
-  return function(element, index, children2, callback) {
-    var output = "";
-    for (var i = 0; i < length2; i++)
-      output += collection[i](element, index, children2, callback) || "";
-    return output;
-  };
-}
-function rulesheet(callback) {
-  return function(element) {
-    if (!element.root) {
-      if (element = element.return)
-        callback(element);
-    }
-  };
-}
-
-// ../../node_modules/.pnpm/@emotion+memoize@0.8.1/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
-function memoize(fn) {
-  var cache2 = /* @__PURE__ */ Object.create(null);
-  return function(arg) {
-    if (cache2[arg] === void 0)
-      cache2[arg] = fn(arg);
-    return cache2[arg];
-  };
-}
-
-// ../../node_modules/.pnpm/@emotion+cache@11.11.0/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
-var identifierWithPointTracking = function identifierWithPointTracking2(begin, points, index) {
-  var previous = 0;
-  var character2 = 0;
-  while (true) {
-    previous = character2;
-    character2 = peek();
-    if (previous === 38 && character2 === 12) {
-      points[index] = 1;
-    }
-    if (token(character2)) {
-      break;
-    }
-    next();
-  }
-  return slice(begin, position);
+  return r2 + (t2 && a2 ? t2 + "{" + a2 + "}" : a2) + l2;
 };
-var toRules = function toRules2(parsed, points) {
-  var index = -1;
-  var character2 = 44;
-  do {
-    switch (token(character2)) {
-      case 0:
-        if (character2 === 38 && peek() === 12) {
-          points[index] = 1;
-        }
-        parsed[index] += identifierWithPointTracking(position - 1, points, index);
-        break;
-      case 2:
-        parsed[index] += delimit(character2);
-        break;
-      case 4:
-        if (character2 === 44) {
-          parsed[++index] = peek() === 58 ? "&\f" : "";
-          points[index] = parsed[index].length;
-          break;
-        }
-      default:
-        parsed[index] += from(character2);
-    }
-  } while (character2 = next());
-  return parsed;
-};
-var getRules = function getRules2(value, points) {
-  return dealloc(toRules(alloc(value), points));
-};
-var fixedElements = /* @__PURE__ */ new WeakMap();
-var compat = function compat2(element) {
-  if (element.type !== "rule" || !element.parent || // positive .length indicates that this rule contains pseudo
-  // negative .length indicates that this rule has been already prefixed
-  element.length < 1) {
-    return;
-  }
-  var value = element.value, parent = element.parent;
-  var isImplicitRule = element.column === parent.column && element.line === parent.line;
-  while (parent.type !== "rule") {
-    parent = parent.parent;
-    if (!parent)
-      return;
-  }
-  if (element.props.length === 1 && value.charCodeAt(0) !== 58 && !fixedElements.get(parent)) {
-    return;
-  }
-  if (isImplicitRule) {
-    return;
-  }
-  fixedElements.set(element, true);
-  var points = [];
-  var rules = getRules(value, points);
-  var parentRules = parent.props;
-  for (var i = 0, k = 0; i < rules.length; i++) {
-    for (var j = 0; j < parentRules.length; j++, k++) {
-      element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
-    }
+var c = {};
+var s = (e2) => {
+  if ("object" == typeof e2) {
+    let t2 = "";
+    for (let r2 in e2)
+      t2 += r2 + s(e2[r2]);
+    return t2;
   }
+  return e2;
 };
-var removeLabel = function removeLabel2(element) {
-  if (element.type === "decl") {
-    var value = element.value;
-    if (
-      // charcode for l
-      value.charCodeAt(0) === 108 && // charcode for b
-      value.charCodeAt(2) === 98
-    ) {
-      element["return"] = "";
-      element.value = "";
-    }
+var i = (e2, t2, r2, i2, p2) => {
+  let u2 = s(e2), d = c[u2] || (c[u2] = ((e3) => {
+    let t3 = 0, r3 = 11;
+    for (; t3 < e3.length; )
+      r3 = 101 * r3 + e3.charCodeAt(t3++) >>> 0;
+    return "go" + r3;
+  })(u2));
+  if (!c[d]) {
+    let t3 = u2 !== e2 ? e2 : ((e3) => {
+      let t4, r3, o2 = [{}];
+      for (; t4 = l.exec(e3.replace(a, "")); )
+        t4[4] ? o2.shift() : t4[3] ? (r3 = t4[3].replace(n, " ").trim(), o2.unshift(o2[0][r3] = o2[0][r3] || {})) : o2[0][t4[1]] = t4[2].replace(n, " ").trim();
+      return o2[0];
+    })(e2);
+    c[d] = o(p2 ? { ["@keyframes " + d]: t3 } : t3, r2 ? "" : "." + d);
   }
+  let f = r2 && c.g ? c.g : null;
+  return r2 && (c.g = c[d]), ((e3, t3, r3, l2) => {
+    l2 ? t3.data = t3.data.replace(l2, e3) : -1 === t3.data.indexOf(e3) && (t3.data = r3 ? e3 + t3.data : t3.data + e3);
+  })(c[d], t2, i2, f), d;
 };
-function prefix(value, length2) {
-  switch (hash(value, length2)) {
-    case 5103:
-      return WEBKIT + "print-" + value + value;
-    case 5737:
-    case 4201:
-    case 3177:
-    case 3433:
-    case 1641:
-    case 4457:
-    case 2921:
-    case 5572:
-    case 6356:
-    case 5844:
-    case 3191:
-    case 6645:
-    case 3005:
-    case 6391:
-    case 5879:
-    case 5623:
-    case 6135:
-    case 4599:
-    case 4855:
-    case 4215:
-    case 6389:
-    case 5109:
-    case 5365:
-    case 5621:
-    case 3829:
-      return WEBKIT + value + value;
-    case 5349:
-    case 4246:
-    case 4810:
-    case 6968:
-    case 2756:
-      return WEBKIT + value + MOZ + value + MS + value + value;
-    case 6828:
-    case 4268:
-      return WEBKIT + value + MS + value + value;
-    case 6165:
-      return WEBKIT + value + MS + "flex-" + value + value;
-    case 5187:
-      return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value;
-    case 5443:
-      return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/, "") + value;
-    case 4675:
-      return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/, "") + value;
-    case 5548:
-      return WEBKIT + value + MS + replace(value, "shrink", "negative") + value;
-    case 5292:
-      return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value;
-    case 6060:
-      return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value;
-    case 4554:
-      return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value;
-    case 6187:
-      return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value;
-    case 5495:
-    case 3959:
-      return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1");
-    case 4968:
-      return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + WEBKIT + value + value;
-    case 4095:
-    case 3583:
-    case 4068:
-    case 2532:
-      return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value;
-    case 8116:
-    case 7059:
-    case 5753:
-    case 5535:
-    case 5445:
-    case 5701:
-    case 4933:
-    case 4677:
-    case 5533:
-    case 5789:
-    case 5021:
-    case 4765:
-      if (strlen(value) - 1 - length2 > 6)
-        switch (charat(value, length2 + 1)) {
-          case 109:
-            if (charat(value, length2 + 4) !== 45)
-              break;
-          case 102:
-            return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length2 + 3) == 108 ? "$3" : "$2-$3")) + value;
-          case 115:
-            return ~indexof(value, "stretch") ? prefix(replace(value, "stretch", "fill-available"), length2) + value : value;
-        }
-      break;
-    case 4949:
-      if (charat(value, length2 + 1) !== 115)
-        break;
-    case 6444:
-      switch (charat(value, strlen(value) - 3 - (~indexof(value, "!important") && 10))) {
-        case 107:
-          return replace(value, ":", ":" + WEBKIT) + value;
-        case 101:
-          return replace(value, /(.+:)([^;!]+)(;|!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value;
-      }
-      break;
-    case 5936:
-      switch (charat(value, length2 + 11)) {
-        case 114:
-          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value;
-        case 108:
-          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value;
-        case 45:
-          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value;
-      }
-      return WEBKIT + value + MS + value + value;
+var p = (e2, t2, r2) => e2.reduce((e3, l2, a2) => {
+  let n2 = t2[a2];
+  if (n2 && n2.call) {
+    let e4 = n2(r2), t3 = e4 && e4.props && e4.props.className || /^go/.test(e4) && e4;
+    n2 = t3 ? "." + t3 : e4 && "object" == typeof e4 ? e4.props ? "" : o(e4, "") : false === e4 ? "" : e4;
   }
-  return value;
+  return e3 + l2 + (null == n2 ? "" : n2);
+}, "");
+function u(e2) {
+  let r2 = this || {}, l2 = e2.call ? e2(r2.p) : e2;
+  return i(l2.unshift ? l2.raw ? p(l2, [].slice.call(arguments, 1), r2.p) : l2.reduce((e3, t2) => Object.assign(e3, t2 && t2.call ? t2(r2.p) : t2), {}) : l2, t(r2.target), r2.g, r2.o, r2.k);
 }
-var prefixer = function prefixer2(element, index, children2, callback) {
-  if (element.length > -1) {
-    if (!element["return"])
-      switch (element.type) {
-        case DECLARATION:
-          element["return"] = prefix(element.value, element.length);
-          break;
-        case KEYFRAMES:
-          return serialize([copy(element, {
-            value: replace(element.value, "@", "@" + WEBKIT)
-          })], callback);
-        case RULESET:
-          if (element.length)
-            return combine(element.props, function(value) {
-              switch (match(value, /(::plac\w+|:read-\w+)/)) {
-                case ":read-only":
-                case ":read-write":
-                  return serialize([copy(element, {
-                    props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")]
-                  })], callback);
-                case "::placeholder":
-                  return serialize([copy(element, {
-                    props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")]
-                  }), copy(element, {
-                    props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")]
-                  }), copy(element, {
-                    props: [replace(value, /:(plac\w+)/, MS + "input-$1")]
-                  })], callback);
-              }
-              return "";
-            });
-      }
-  }
-};
-var defaultStylisPlugins = [prefixer];
-var createCache = function createCache2(options) {
-  var key = options.key;
-  if (key === "css") {
-    var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])");
-    Array.prototype.forEach.call(ssrStyles, function(node2) {
-      var dataEmotionAttribute = node2.getAttribute("data-emotion");
-      if (dataEmotionAttribute.indexOf(" ") === -1) {
-        return;
-      }
-      document.head.appendChild(node2);
-      node2.setAttribute("data-s", "");
-    });
-  }
-  var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
-  var inserted = {};
-  var container;
-  var nodesToHydrate = [];
-  {
-    container = options.container || document.head;
-    Array.prototype.forEach.call(
-      // this means we will ignore elements which don't have a space in them which
-      // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
-      document.querySelectorAll('style[data-emotion^="' + key + ' "]'),
-      function(node2) {
-        var attrib = node2.getAttribute("data-emotion").split(" ");
-        for (var i = 1; i < attrib.length; i++) {
-          inserted[attrib[i]] = true;
-        }
-        nodesToHydrate.push(node2);
-      }
-    );
-  }
-  var _insert;
-  var omnipresentPlugins = [compat, removeLabel];
-  {
-    var currentSheet;
-    var finalizingPlugins = [stringify, rulesheet(function(rule) {
-      currentSheet.insert(rule);
-    })];
-    var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
-    var stylis = function stylis2(styles) {
-      return serialize(compile(styles), serializer);
-    };
-    _insert = function insert2(selector, serialized, sheet2, shouldCache) {
-      currentSheet = sheet2;
-      stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
-      if (shouldCache) {
-        cache2.inserted[serialized.name] = true;
-      }
-    };
-  }
-  var cache2 = {
-    key,
-    sheet: new StyleSheet({
-      key,
-      container,
-      nonce: options.nonce,
-      speedy: options.speedy,
-      prepend: options.prepend,
-      insertionPoint: options.insertionPoint
-    }),
-    nonce: options.nonce,
-    inserted,
-    registered: {},
-    insert: _insert
-  };
-  cache2.sheet.hydrate(nodesToHydrate);
-  return cache2;
-};
-
-// ../../node_modules/.pnpm/@emotion+hash@0.9.1/node_modules/@emotion/hash/dist/emotion-hash.esm.js
-function murmur2(str) {
-  var h = 0;
-  var k, i = 0, len = str.length;
-  for (; len >= 4; ++i, len -= 4) {
-    k = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
-    k = /* Math.imul(k, m): */
-    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
-    k ^= /* k >>> r: */
-    k >>> 24;
-    h = /* Math.imul(k, m): */
-    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ /* Math.imul(h, m): */
-    (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-  }
-  switch (len) {
-    case 3:
-      h ^= (str.charCodeAt(i + 2) & 255) << 16;
-    case 2:
-      h ^= (str.charCodeAt(i + 1) & 255) << 8;
-    case 1:
-      h ^= str.charCodeAt(i) & 255;
-      h = /* Math.imul(h, m): */
-      (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-  }
-  h ^= h >>> 13;
-  h = /* Math.imul(h, m): */
-  (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-  return ((h ^ h >>> 15) >>> 0).toString(36);
-}
-
-// ../../node_modules/.pnpm/@emotion+unitless@0.8.1/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
-var unitlessKeys = {
-  animationIterationCount: 1,
-  aspectRatio: 1,
-  borderImageOutset: 1,
-  borderImageSlice: 1,
-  borderImageWidth: 1,
-  boxFlex: 1,
-  boxFlexGroup: 1,
-  boxOrdinalGroup: 1,
-  columnCount: 1,
-  columns: 1,
-  flex: 1,
-  flexGrow: 1,
-  flexPositive: 1,
-  flexShrink: 1,
-  flexNegative: 1,
-  flexOrder: 1,
-  gridRow: 1,
-  gridRowEnd: 1,
-  gridRowSpan: 1,
-  gridRowStart: 1,
-  gridColumn: 1,
-  gridColumnEnd: 1,
-  gridColumnSpan: 1,
-  gridColumnStart: 1,
-  msGridRow: 1,
-  msGridRowSpan: 1,
-  msGridColumn: 1,
-  msGridColumnSpan: 1,
-  fontWeight: 1,
-  lineHeight: 1,
-  opacity: 1,
-  order: 1,
-  orphans: 1,
-  tabSize: 1,
-  widows: 1,
-  zIndex: 1,
-  zoom: 1,
-  WebkitLineClamp: 1,
-  // SVG-related properties
-  fillOpacity: 1,
-  floodOpacity: 1,
-  stopOpacity: 1,
-  strokeDasharray: 1,
-  strokeDashoffset: 1,
-  strokeMiterlimit: 1,
-  strokeOpacity: 1,
-  strokeWidth: 1
-};
+u.bind({ g: 1 });
+u.bind({ k: 1 });
 
-// ../../node_modules/.pnpm/@emotion+serialize@1.1.2/node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
-var hyphenateRegex = /[A-Z]|^ms/g;
-var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
-var isCustomProperty = function isCustomProperty2(property) {
-  return property.charCodeAt(1) === 45;
-};
-var isProcessableValue = function isProcessableValue2(value) {
-  return value != null && typeof value !== "boolean";
-};
-var processStyleName = /* @__PURE__ */ memoize(function(styleName) {
-  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
-});
-var processStyleValue = function processStyleValue2(key, value) {
-  switch (key) {
-    case "animation":
-    case "animationName": {
-      if (typeof value === "string") {
-        return value.replace(animationRegex, function(match2, p1, p2) {
-          cursor = {
-            name: p1,
-            styles: p2,
-            next: cursor
-          };
-          return p1;
-        });
-      }
-    }
-  }
-  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === "number" && value !== 0) {
-    return value + "px";
-  }
-  return value;
-};
-function handleInterpolation(mergedProps, registered, interpolation) {
-  if (interpolation == null) {
-    return "";
-  }
-  if (interpolation.__emotion_styles !== void 0) {
-    return interpolation;
-  }
-  switch (typeof interpolation) {
-    case "boolean": {
-      return "";
-    }
-    case "object": {
-      if (interpolation.anim === 1) {
-        cursor = {
-          name: interpolation.name,
-          styles: interpolation.styles,
-          next: cursor
-        };
-        return interpolation.name;
-      }
-      if (interpolation.styles !== void 0) {
-        var next2 = interpolation.next;
-        if (next2 !== void 0) {
-          while (next2 !== void 0) {
-            cursor = {
-              name: next2.name,
-              styles: next2.styles,
-              next: cursor
-            };
-            next2 = next2.next;
-          }
-        }
-        var styles = interpolation.styles + ";";
-        return styles;
-      }
-      return createStringFromObject(mergedProps, registered, interpolation);
-    }
-    case "function": {
-      if (mergedProps !== void 0) {
-        var previousCursor = cursor;
-        var result = interpolation(mergedProps);
-        cursor = previousCursor;
-        return handleInterpolation(mergedProps, registered, result);
-      }
-      break;
-    }
-  }
-  if (registered == null) {
-    return interpolation;
-  }
-  var cached = registered[interpolation];
-  return cached !== void 0 ? cached : interpolation;
-}
-function createStringFromObject(mergedProps, registered, obj) {
-  var string = "";
-  if (Array.isArray(obj)) {
-    for (var i = 0; i < obj.length; i++) {
-      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
-    }
-  } else {
-    for (var _key in obj) {
-      var value = obj[_key];
-      if (typeof value !== "object") {
-        if (registered != null && registered[value] !== void 0) {
-          string += _key + "{" + registered[value] + "}";
-        } else if (isProcessableValue(value)) {
-          string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
-        }
-      } else {
-        if (_key === "NO_COMPONENT_SELECTOR" && false) {
-          throw new Error(noComponentSelectorMessage);
-        }
-        if (Array.isArray(value) && typeof value[0] === "string" && (registered == null || registered[value[0]] === void 0)) {
-          for (var _i = 0; _i < value.length; _i++) {
-            if (isProcessableValue(value[_i])) {
-              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
-            }
-          }
-        } else {
-          var interpolated = handleInterpolation(mergedProps, registered, value);
-          switch (_key) {
-            case "animation":
-            case "animationName": {
-              string += processStyleName(_key) + ":" + interpolated + ";";
-              break;
-            }
-            default: {
-              string += _key + "{" + interpolated + "}";
-            }
-          }
-        }
-      }
-    }
-  }
-  return string;
-}
-var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-var cursor;
-var serializeStyles = function serializeStyles2(args, registered, mergedProps) {
-  if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) {
-    return args[0];
-  }
-  var stringMode = true;
-  var styles = "";
-  cursor = void 0;
-  var strings = args[0];
-  if (strings == null || strings.raw === void 0) {
-    stringMode = false;
-    styles += handleInterpolation(mergedProps, registered, strings);
-  } else {
-    styles += strings[0];
-  }
-  for (var i = 1; i < args.length; i++) {
-    styles += handleInterpolation(mergedProps, registered, args[i]);
-    if (stringMode) {
-      styles += strings[i];
-    }
-  }
-  labelPattern.lastIndex = 0;
-  var identifierName = "";
-  var match2;
-  while ((match2 = labelPattern.exec(styles)) !== null) {
-    identifierName += "-" + // $FlowFixMe we know it's not null
-    match2[1];
-  }
-  var name = murmur2(styles) + identifierName;
-  return {
-    name,
-    styles,
-    next: cursor
-  };
-};
-
-// ../../node_modules/.pnpm/@emotion+utils@1.2.1/node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
-var isBrowser = true;
-function getRegisteredStyles(registered, registeredStyles, classNames) {
-  var rawClassName = "";
-  classNames.split(" ").forEach(function(className2) {
-    if (registered[className2] !== void 0) {
-      registeredStyles.push(registered[className2] + ";");
-    } else {
-      rawClassName += className2 + " ";
-    }
-  });
-  return rawClassName;
-}
-var registerStyles = function registerStyles2(cache2, serialized, isStringTag) {
-  var className2 = cache2.key + "-" + serialized.name;
-  if (
-    // we only need to add the styles to the registered cache if the
-    // class name could be used further down
-    // the tree but if it's a string tag, we know it won't
-    // so we don't have to add it to registered cache.
-    // this improves memory usage since we can avoid storing the whole style string
-    (isStringTag === false || // we need to always store it if we're in compat mode and
-    // in node since emotion-server relies on whether a style is in
-    // the registered cache to know whether a style is global or not
-    // also, note that this check will be dead code eliminated in the browser
-    isBrowser === false) && cache2.registered[className2] === void 0
-  ) {
-    cache2.registered[className2] = serialized.styles;
-  }
-};
-var insertStyles = function insertStyles2(cache2, serialized, isStringTag) {
-  registerStyles(cache2, serialized, isStringTag);
-  var className2 = cache2.key + "-" + serialized.name;
-  if (cache2.inserted[serialized.name] === void 0) {
-    var current = serialized;
-    do {
-      cache2.insert(serialized === current ? "." + className2 : "", current, cache2.sheet, true);
-      current = current.next;
-    } while (current !== void 0);
-  }
-};
-
-// ../../node_modules/.pnpm/@emotion+css@11.11.0/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
-function insertWithoutScoping(cache2, serialized) {
-  if (cache2.inserted[serialized.name] === void 0) {
-    return cache2.insert("", serialized, cache2.sheet, true);
-  }
+// ../../node_modules/.pnpm/clsx@2.0.0/node_modules/clsx/dist/clsx.mjs
+function r(e2) {
+  var t2, f, n2 = "";
+  if ("string" == typeof e2 || "number" == typeof e2)
+    n2 += e2;
+  else if ("object" == typeof e2)
+    if (Array.isArray(e2))
+      for (t2 = 0; t2 < e2.length; t2++)
+        e2[t2] && (f = r(e2[t2])) && (n2 && (n2 += " "), n2 += f);
+    else
+      for (t2 in e2)
+        e2[t2] && (n2 && (n2 += " "), n2 += t2);
+  return n2;
 }
-function merge(registered, css2, className2) {
-  var registeredStyles = [];
-  var rawClassName = getRegisteredStyles(registered, registeredStyles, className2);
-  if (registeredStyles.length < 2) {
-    return className2;
-  }
-  return rawClassName + css2(registeredStyles);
+function clsx() {
+  for (var e2, t2, f = 0, n2 = ""; f < arguments.length; )
+    (e2 = arguments[f++]) && (t2 = r(e2)) && (n2 && (n2 += " "), n2 += t2);
+  return n2;
 }
-var createEmotion = function createEmotion2(options) {
-  var cache2 = createCache(options);
-  cache2.sheet.speedy = function(value) {
-    this.isSpeedy = value;
-  };
-  cache2.compat = true;
-  var css2 = function css3() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    var serialized = serializeStyles(args, cache2.registered, void 0);
-    insertStyles(cache2, serialized, false);
-    return cache2.key + "-" + serialized.name;
-  };
-  var keyframes2 = function keyframes3() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    var serialized = serializeStyles(args, cache2.registered);
-    var animation = "animation-" + serialized.name;
-    insertWithoutScoping(cache2, {
-      name: serialized.name,
-      styles: "@keyframes " + animation + "{" + serialized.styles + "}"
-    });
-    return animation;
-  };
-  var injectGlobal2 = function injectGlobal3() {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
-    var serialized = serializeStyles(args, cache2.registered);
-    insertWithoutScoping(cache2, serialized);
-  };
-  var cx2 = function cx3() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
-    return merge(cache2.registered, css2, classnames(args));
-  };
-  return {
-    css: css2,
-    cx: cx2,
-    injectGlobal: injectGlobal2,
-    keyframes: keyframes2,
-    hydrate: function hydrate2(ids) {
-      ids.forEach(function(key) {
-        cache2.inserted[key] = true;
-      });
-    },
-    flush: function flush2() {
-      cache2.registered = {};
-      cache2.inserted = {};
-      cache2.sheet.flush();
-    },
-    // $FlowFixMe
-    sheet: cache2.sheet,
-    cache: cache2,
-    getRegisteredStyles: getRegisteredStyles.bind(null, cache2.registered),
-    merge: merge.bind(null, cache2.registered, css2)
-  };
-};
-var classnames = function classnames2(args) {
-  var cls = "";
-  for (var i = 0; i < args.length; i++) {
-    var arg = args[i];
-    if (arg == null)
-      continue;
-    var toAdd = void 0;
-    switch (typeof arg) {
-      case "boolean":
-        break;
-      case "object": {
-        if (Array.isArray(arg)) {
-          toAdd = classnames2(arg);
-        } else {
-          toAdd = "";
-          for (var k in arg) {
-            if (arg[k] && k) {
-              toAdd && (toAdd += " ");
-              toAdd += k;
-            }
-          }
-        }
-        break;
-      }
-      default: {
-        toAdd = arg;
-      }
-    }
-    if (toAdd) {
-      cls && (cls += " ");
-      cls += toAdd;
-    }
-  }
-  return cls;
-};
-
-// ../../node_modules/.pnpm/@emotion+css@11.11.0/node_modules/@emotion/css/dist/emotion-css.esm.js
-var _createEmotion = createEmotion({
-  key: "css"
-});
-_createEmotion.flush;
-_createEmotion.hydrate;
-var cx = _createEmotion.cx;
-_createEmotion.merge;
-_createEmotion.getRegisteredStyles;
-_createEmotion.injectGlobal;
-_createEmotion.keyframes;
-var css = _createEmotion.css;
-_createEmotion.sheet;
-_createEmotion.cache;
 
 // ../../node_modules/.pnpm/@solid-primitives+transition-group@1.0.2_solid-js@1.7.8/node_modules/@solid-primitives/transition-group/dist/index.js
 var noop = () => {
@@ -1767,8 +681,8 @@ var noop = () => {
 function createListTransition(source, options) {
   const initSource = untrack(source);
   if (isServer) {
-    const copy3 = initSource.slice();
-    return () => copy3;
+    const copy2 = initSource.slice();
+    return () => copy2;
   }
   const { onChange } = options;
   let prevSet = new Set(options.appear ? void 0 : initSource);
@@ -1776,29 +690,29 @@ function createListTransition(source, options) {
   const [toRemove, setToRemove] = createSignal([], { equals: false });
   const [isTransitionPending] = useTransition();
   const finishRemoved = options.exitMethod === "remove" ? noop : (els) => {
-    setToRemove((p) => (p.push.apply(p, els), p));
+    setToRemove((p2) => (p2.push.apply(p2, els), p2));
     for (const el of els)
       exiting.delete(el);
   };
-  const handleRemoved = options.exitMethod === "remove" ? noop : options.exitMethod === "keep-index" ? (els, el, i) => els.splice(i, 0, el) : (els, el) => els.push(el);
+  const handleRemoved = options.exitMethod === "remove" ? noop : options.exitMethod === "keep-index" ? (els, el, i2) => els.splice(i2, 0, el) : (els, el) => els.push(el);
   return createMemo(
-    (prev2) => {
+    (prev) => {
       const elsToRemove = toRemove();
       const sourceList = source();
       sourceList[$TRACK];
       if (untrack(isTransitionPending)) {
         isTransitionPending();
-        return prev2;
+        return prev;
       }
       if (elsToRemove.length) {
-        const next2 = prev2.filter((e) => !elsToRemove.includes(e));
+        const next = prev.filter((e2) => !elsToRemove.includes(e2));
         elsToRemove.length = 0;
-        onChange({ list: next2, added: [], removed: [], unchanged: next2, finishRemoved });
-        return next2;
+        onChange({ list: next, added: [], removed: [], unchanged: next, finishRemoved });
+        return next;
       }
       return untrack(() => {
         const nextSet = new Set(sourceList);
-        const next2 = sourceList.slice();
+        const next = sourceList.slice();
         const added = [];
         const removed = [];
         const unchanged = [];
@@ -1806,23 +720,23 @@ function createListTransition(source, options) {
           (prevSet.has(el) ? unchanged : added).push(el);
         }
         let nothingChanged = !added.length;
-        for (let i = 0; i < prev2.length; i++) {
-          const el = prev2[i];
+        for (let i2 = 0; i2 < prev.length; i2++) {
+          const el = prev[i2];
           if (!nextSet.has(el)) {
             if (!exiting.has(el)) {
               removed.push(el);
               exiting.add(el);
             }
-            handleRemoved(next2, el, i);
+            handleRemoved(next, el, i2);
           }
-          if (nothingChanged && el !== next2[i])
+          if (nothingChanged && el !== next[i2])
             nothingChanged = false;
         }
         if (!removed.length && nothingChanged)
-          return prev2;
-        onChange({ list: next2, added, removed, unchanged, finishRemoved });
+          return prev;
+        onChange({ list: next, added, removed, unchanged, finishRemoved });
         prevSet = nextSet;
-        return next2;
+        return next;
       });
     },
     options.appear ? [] : initSource.slice()
@@ -1831,38 +745,38 @@ function createListTransition(source, options) {
 
 // ../../node_modules/.pnpm/@solid-primitives+utils@6.2.0_solid-js@1.7.8/node_modules/@solid-primitives/utils/dist/chunk/APG4HSEJ.js
 var noop2 = () => void 0;
-var isNonNullable = (i) => i != null;
+var isNonNullable = (i2) => i2 != null;
 var filterNonNullable = (arr) => arr.filter(isNonNullable);
 var access = (v) => typeof v === "function" && !v.length ? v() : v;
 var asArray = (value) => Array.isArray(value) ? value : value ? [value] : [];
-function handleDiffArray(current, prev2, handleAdded, handleRemoved) {
+function handleDiffArray(current, prev, handleAdded, handleRemoved) {
   const currLength = current.length;
-  const prevLength = prev2.length;
-  let i = 0;
+  const prevLength = prev.length;
+  let i2 = 0;
   if (!prevLength) {
-    for (; i < currLength; i++)
-      handleAdded(current[i]);
+    for (; i2 < currLength; i2++)
+      handleAdded(current[i2]);
     return;
   }
   if (!currLength) {
-    for (; i < prevLength; i++)
-      handleRemoved(prev2[i]);
+    for (; i2 < prevLength; i2++)
+      handleRemoved(prev[i2]);
     return;
   }
-  for (; i < prevLength; i++) {
-    if (prev2[i] !== current[i])
+  for (; i2 < prevLength; i2++) {
+    if (prev[i2] !== current[i2])
       break;
   }
   let prevEl;
   let currEl;
-  prev2 = prev2.slice(i);
-  current = current.slice(i);
-  for (prevEl of prev2) {
+  prev = prev.slice(i2);
+  current = current.slice(i2);
+  for (prevEl of prev) {
     if (!current.includes(prevEl))
       handleRemoved(prevEl);
   }
   for (currEl of current) {
-    if (!prev2.includes(currEl))
+    if (!prev.includes(currEl))
       handleAdded(currEl);
   }
 }
@@ -1915,8 +829,8 @@ function createClassnames(props) {
 function nextFrame(fn) {
   requestAnimationFrame(() => requestAnimationFrame(fn));
 }
-function enterTransition(classnames3, events, el, done) {
-  const { enterClasses, enterActiveClasses, enterToClasses } = classnames3, { onBeforeEnter, onEnter, onAfterEnter } = events;
+function enterTransition(classnames, events, el, done) {
+  const { enterClasses, enterActiveClasses, enterToClasses } = classnames, { onBeforeEnter, onEnter, onAfterEnter } = events;
   onBeforeEnter?.(el);
   el.classList.add(...enterClasses);
   el.classList.add(...enterActiveClasses);
@@ -1933,8 +847,8 @@ function enterTransition(classnames3, events, el, done) {
       el.addEventListener("animationend", endTransition);
     }
   });
-  function endTransition(e) {
-    if (!e || e.target === el) {
+  function endTransition(e2) {
+    if (!e2 || e2.target === el) {
       done?.();
       el.removeEventListener("transitionend", endTransition);
       el.removeEventListener("animationend", endTransition);
@@ -1944,8 +858,8 @@ function enterTransition(classnames3, events, el, done) {
     }
   }
 }
-function exitTransition(classnames3, events, el, done) {
-  const { exitClasses, exitActiveClasses, exitToClasses } = classnames3, { onBeforeExit, onExit, onAfterExit } = events;
+function exitTransition(classnames, events, el, done) {
+  const { exitClasses, exitActiveClasses, exitToClasses } = classnames, { onBeforeExit, onExit, onAfterExit } = events;
   if (!el.parentNode)
     return done?.();
   onBeforeExit?.(el);
@@ -1960,8 +874,8 @@ function exitTransition(classnames3, events, el, done) {
       el.addEventListener("animationend", endTransition);
     }
   });
-  function endTransition(e) {
-    if (!e || e.target === el) {
+  function endTransition(e2) {
+    if (!e2 || e2.target === el) {
       done?.();
       el.removeEventListener("transitionend", endTransition);
       el.removeEventListener("animationend", endTransition);
@@ -1972,12 +886,12 @@ function exitTransition(classnames3, events, el, done) {
   }
 }
 var TransitionGroup = (props) => {
-  const classnames3 = createClassnames(props);
+  const classnames = createClassnames(props);
   return createListTransition(resolveElements(() => props.children).toArray, {
     appear: props.appear,
     exitMethod: "keep-index",
     onChange({ added, removed, finishRemoved, list }) {
-      const classes = classnames3();
+      const classes = classnames();
       for (const el of added) {
         enterTransition(classes, props, el);
       }
@@ -2001,8 +915,8 @@ var TransitionGroup = (props) => {
         }
         document.body.offsetHeight;
         for (const el of moved) {
-          let endTransition2 = function(e) {
-            if (e.target === el || /transform$/.test(e.propertyName)) {
+          let endTransition2 = function(e2) {
+            if (e2.target === el || /transform$/.test(e2.propertyName)) {
               el.removeEventListener("transitionend", endTransition2);
               el.classList.remove(...classes.moveClasses);
             }
@@ -2022,86 +936,86 @@ var TransitionGroup = (props) => {
 // ../../node_modules/.pnpm/@solid-primitives+keyed@1.2.0_solid-js@1.7.8/node_modules/@solid-primitives/keyed/dist/index.js
 var FALLBACK = Symbol("fallback");
 function dispose(list) {
-  for (const o of list)
-    o.dispose();
+  for (const o2 of list)
+    o2.dispose();
 }
 function keyArray(items, keyFn, mapFn, options = {}) {
   if (isServer) {
     const itemsRef = items();
-    let s = [];
+    let s2 = [];
     if (itemsRef && itemsRef.length) {
-      for (let i = 0, len = itemsRef.length; i < len; i++)
-        s.push(
+      for (let i2 = 0, len = itemsRef.length; i2 < len; i2++)
+        s2.push(
           mapFn(
-            () => itemsRef[i],
-            () => i
+            () => itemsRef[i2],
+            () => i2
           )
         );
     } else if (options.fallback)
-      s = [options.fallback()];
-    return () => s;
+      s2 = [options.fallback()];
+    return () => s2;
   }
-  const prev2 = /* @__PURE__ */ new Map();
-  onCleanup(() => dispose(prev2.values()));
+  const prev = /* @__PURE__ */ new Map();
+  onCleanup(() => dispose(prev.values()));
   return () => {
     const list = items() || [];
     list[$TRACK];
     return untrack(() => {
       if (!list.length) {
-        dispose(prev2.values());
-        prev2.clear();
+        dispose(prev.values());
+        prev.clear();
         if (!options.fallback)
           return [];
         const fb2 = createRoot((dispose2) => {
-          prev2.set(FALLBACK, { dispose: dispose2 });
+          prev.set(FALLBACK, { dispose: dispose2 });
           return options.fallback();
         });
         return [fb2];
       }
       const result = new Array(list.length);
-      const fb = prev2.get(FALLBACK);
-      if (!prev2.size || fb) {
+      const fb = prev.get(FALLBACK);
+      if (!prev.size || fb) {
         fb?.dispose();
-        prev2.delete(FALLBACK);
-        for (let i = 0; i < list.length; i++) {
-          const item = list[i];
-          const key = keyFn(item, i);
-          addNewItem(result, item, i, key);
+        prev.delete(FALLBACK);
+        for (let i2 = 0; i2 < list.length; i2++) {
+          const item = list[i2];
+          const key = keyFn(item, i2);
+          addNewItem(result, item, i2, key);
         }
         return result;
       }
-      const prevKeys = new Set(prev2.keys());
-      for (let i = 0; i < list.length; i++) {
-        const item = list[i];
-        const key = keyFn(item, i);
+      const prevKeys = new Set(prev.keys());
+      for (let i2 = 0; i2 < list.length; i2++) {
+        const item = list[i2];
+        const key = keyFn(item, i2);
         prevKeys.delete(key);
-        const lookup = prev2.get(key);
+        const lookup = prev.get(key);
         if (lookup) {
-          result[i] = lookup.mapped;
-          lookup.setIndex?.(i);
+          result[i2] = lookup.mapped;
+          lookup.setIndex?.(i2);
           lookup.setItem(() => item);
         } else
-          addNewItem(result, item, i, key);
+          addNewItem(result, item, i2, key);
       }
       for (const key of prevKeys) {
-        prev2.get(key)?.dispose();
-        prev2.delete(key);
+        prev.get(key)?.dispose();
+        prev.delete(key);
       }
       return result;
     });
   };
-  function addNewItem(list, item, i, key) {
+  function addNewItem(list, item, i2, key) {
     createRoot((dispose2) => {
       const [getItem, setItem] = createSignal(item);
       const save = { setItem, dispose: dispose2 };
       if (mapFn.length > 1) {
-        const [index, setIndex] = createSignal(i);
+        const [index, setIndex] = createSignal(i2);
         save.setIndex = setIndex;
         save.mapped = mapFn(getItem, index);
       } else
         save.mapped = mapFn(getItem);
-      prev2.set(key, save);
-      list[i] = save.mapped;
+      prev.set(key, save);
+      list[i2] = save.mapped;
     });
   }
 }
@@ -2127,27 +1041,27 @@ function createStorage(props) {
     setError(err instanceof Error ? err : new Error(fallback));
   };
   const apis = props?.api ? Array.isArray(props.api) ? props.api : [props.api] : [globalThis.localStorage].filter(Boolean);
-  const prefix2 = props?.prefix ? `${props.prefix}.` : "";
+  const prefix = props?.prefix ? `${props.prefix}.` : "";
   const signals = /* @__PURE__ */ new Map();
   const store = new Proxy(
     {},
     {
       get(_, key) {
-        let node2 = signals.get(key);
-        if (!node2) {
-          node2 = createSignal(void 0, { equals: false });
-          signals.set(key, node2);
+        let node = signals.get(key);
+        if (!node) {
+          node = createSignal(void 0, { equals: false });
+          signals.set(key, node);
         }
-        node2[0]();
+        node[0]();
         const value = apis.reduce(
           (result, api) => {
             if (result !== null || !api) {
               return result;
             }
             try {
-              return api.getItem(`${prefix2}${key}`);
+              return api.getItem(`${prefix}${key}`);
             } catch (err) {
-              handleError(err, `Error reading ${prefix2}${key} from ${api["name"]}`);
+              handleError(err, `Error reading ${prefix}${key} from ${api["name"]}`);
               return null;
             }
           },
@@ -2162,22 +1076,22 @@ function createStorage(props) {
   );
   const setter = (key, value, options) => {
     const filteredValue = props?.serializer ? props.serializer(value, key, options ?? props.options) : value;
-    const apiKey = `${prefix2}${key}`;
+    const apiKey = `${prefix}${key}`;
     apis.forEach((api) => {
       try {
         api.getItem(apiKey) !== filteredValue && api.setItem(apiKey, filteredValue);
       } catch (err) {
-        handleError(err, `Error setting ${prefix2}${key} to ${filteredValue} in ${api.name}`);
+        handleError(err, `Error setting ${prefix}${key} to ${filteredValue} in ${api.name}`);
       }
     });
-    const node2 = signals.get(key);
-    node2 && node2[1]();
+    const node = signals.get(key);
+    node && node[1]();
   };
   const remove = (key) => apis.forEach((api) => {
     try {
-      api.removeItem(`${prefix2}${key}`);
+      api.removeItem(`${prefix}${key}`);
     } catch (err) {
-      handleError(err, `Error removing ${prefix2}${key} from ${api.name}`);
+      handleError(err, `Error removing ${prefix}${key} from ${api.name}`);
     }
   });
   const clear = () => apis.forEach((api) => {
@@ -2324,15 +1238,15 @@ var cookieStorage = addClearMethod({
     return key;
   },
   get length() {
-    let length2 = 0;
+    let length = 0;
     cookieStorage._cookies[0][cookieStorage._cookies[1]].replace(
       /(?:^|;)\s*.+?\s*=\s*[^;]+/g,
       (found) => {
-        length2 += found ? 1 : 0;
+        length += found ? 1 : 0;
         return "";
       }
     );
-    return length2;
+    return length;
   }
 });
 
@@ -2360,9 +1274,9 @@ function createResizeObserver(targets, onResize, options) {
       }
     }
   }, options);
-  createEffect((prev2) => {
+  createEffect((prev) => {
     const refs = filterNonNullable(asArray(access(targets)));
-    handleDiffArray(refs, prev2, observe, unobserve);
+    handleDiffArray(refs, prev, observe, unobserve);
     return refs;
   }, []);
 }
@@ -2707,14 +1621,14 @@ var Registry = (
       this.generateIdentifier = generateIdentifier;
       this.kv = new DoubleIndexedKV();
     }
-    Registry2.prototype.register = function(value, identifier2) {
+    Registry2.prototype.register = function(value, identifier) {
       if (this.kv.getByValue(value)) {
         return;
       }
-      if (!identifier2) {
-        identifier2 = this.generateIdentifier(value);
+      if (!identifier) {
+        identifier = this.generateIdentifier(value);
       }
-      this.kv.set(identifier2, value);
+      this.kv.set(identifier, value);
     };
     Registry2.prototype.clear = function() {
       this.kv.clear();
@@ -2722,8 +1636,8 @@ var Registry = (
     Registry2.prototype.getIdentifier = function(value) {
       return this.kv.getByValue(value);
     };
-    Registry2.prototype.getValue = function(identifier2) {
-      return this.kv.getByKey(identifier2);
+    Registry2.prototype.getValue = function(identifier) {
+      return this.kv.getByKey(identifier);
     };
     return Registry2;
   }()
@@ -2731,24 +1645,24 @@ var Registry = (
 
 // ../../node_modules/.pnpm/superjson@1.12.4/node_modules/superjson/dist/esm/class-registry.js
 var __extends = function() {
-  var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {
-      d2.__proto__ = b2;
-    } || function(d2, b2) {
-      for (var p in b2)
-        if (Object.prototype.hasOwnProperty.call(b2, p))
-          d2[p] = b2[p];
+  var extendStatics = function(d, b2) {
+    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b3) {
+      d2.__proto__ = b3;
+    } || function(d2, b3) {
+      for (var p2 in b3)
+        if (Object.prototype.hasOwnProperty.call(b3, p2))
+          d2[p2] = b3[p2];
     };
-    return extendStatics(d, b);
+    return extendStatics(d, b2);
   };
-  return function(d, b) {
-    if (typeof b !== "function" && b !== null)
-      throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
+  return function(d, b2) {
+    if (typeof b2 !== "function" && b2 !== null)
+      throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
+    extendStatics(d, b2);
     function __() {
       this.constructor = d;
     }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    d.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
   };
 }();
 var ClassRegistry = (
@@ -2756,8 +1670,8 @@ var ClassRegistry = (
   function(_super) {
     __extends(ClassRegistry2, _super);
     function ClassRegistry2() {
-      var _this = _super.call(this, function(c) {
-        return c.name;
+      var _this = _super.call(this, function(c2) {
+        return c2.name;
       }) || this;
       _this.classToAllowedProps = /* @__PURE__ */ new Map();
       return _this;
@@ -2780,23 +1694,23 @@ var ClassRegistry = (
 );
 
 // ../../node_modules/.pnpm/superjson@1.12.4/node_modules/superjson/dist/esm/util.js
-var __read = function(o, n) {
-  var m = typeof Symbol === "function" && o[Symbol.iterator];
+var __read = function(o2, n2) {
+  var m = typeof Symbol === "function" && o2[Symbol.iterator];
   if (!m)
-    return o;
-  var i = m.call(o), r, ar = [], e;
+    return o2;
+  var i2 = m.call(o2), r2, ar = [], e2;
   try {
-    while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-      ar.push(r.value);
+    while ((n2 === void 0 || n2-- > 0) && !(r2 = i2.next()).done)
+      ar.push(r2.value);
   } catch (error) {
-    e = { error };
+    e2 = { error };
   } finally {
     try {
-      if (r && !r.done && (m = i["return"]))
-        m.call(i);
+      if (r2 && !r2.done && (m = i2["return"]))
+        m.call(i2);
     } finally {
-      if (e)
-        throw e.error;
+      if (e2)
+        throw e2.error;
     }
   }
   return ar;
@@ -2819,8 +1733,8 @@ function find(record, predicate) {
     return values.find(predicate);
   }
   var valuesNotNever = values;
-  for (var i = 0; i < valuesNotNever.length; i++) {
-    var value = valuesNotNever[i];
+  for (var i2 = 0; i2 < valuesNotNever.length; i2++) {
+    var value = valuesNotNever[i2];
     if (predicate(value)) {
       return value;
     }
@@ -2837,8 +1751,8 @@ function includes(arr, value) {
   return arr.indexOf(value) !== -1;
 }
 function findArr(record, predicate) {
-  for (var i = 0; i < record.length; i++) {
-    var value = record[i];
+  for (var i2 = 0; i2 < record.length; i2++) {
+    var value = record[i2];
     if (predicate(value)) {
       return value;
     }
@@ -2949,21 +1863,21 @@ var stringifyPath = function(path) {
 var parsePath = function(string) {
   var result = [];
   var segment = "";
-  for (var i = 0; i < string.length; i++) {
-    var char2 = string.charAt(i);
-    var isEscapedDot = char2 === "\\" && string.charAt(i + 1) === ".";
+  for (var i2 = 0; i2 < string.length; i2++) {
+    var char = string.charAt(i2);
+    var isEscapedDot = char === "\\" && string.charAt(i2 + 1) === ".";
     if (isEscapedDot) {
       segment += ".";
-      i++;
+      i2++;
       continue;
     }
-    var isEndOfSegment = char2 === ".";
+    var isEndOfSegment = char === ".";
     if (isEndOfSegment) {
       result.push(segment);
       segment = "";
       continue;
     }
-    segment += char2;
+    segment += char;
   }
   var lastSegment = segment;
   result.push(lastSegment);
@@ -2972,41 +1886,41 @@ var parsePath = function(string) {
 
 // ../../node_modules/.pnpm/superjson@1.12.4/node_modules/superjson/dist/esm/transformer.js
 var __assign = function() {
-  __assign = Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p))
-          t[p] = s[p];
+  __assign = Object.assign || function(t2) {
+    for (var s2, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
+      s2 = arguments[i2];
+      for (var p2 in s2)
+        if (Object.prototype.hasOwnProperty.call(s2, p2))
+          t2[p2] = s2[p2];
     }
-    return t;
+    return t2;
   };
   return __assign.apply(this, arguments);
 };
-var __read2 = function(o, n) {
-  var m = typeof Symbol === "function" && o[Symbol.iterator];
+var __read2 = function(o2, n2) {
+  var m = typeof Symbol === "function" && o2[Symbol.iterator];
   if (!m)
-    return o;
-  var i = m.call(o), r, ar = [], e;
+    return o2;
+  var i2 = m.call(o2), r2, ar = [], e2;
   try {
-    while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-      ar.push(r.value);
+    while ((n2 === void 0 || n2-- > 0) && !(r2 = i2.next()).done)
+      ar.push(r2.value);
   } catch (error) {
-    e = { error };
+    e2 = { error };
   } finally {
     try {
-      if (r && !r.done && (m = i["return"]))
-        m.call(i);
+      if (r2 && !r2.done && (m = i2["return"]))
+        m.call(i2);
     } finally {
-      if (e)
-        throw e.error;
+      if (e2)
+        throw e2.error;
     }
   }
   return ar;
 };
-var __spreadArray = function(to, from2) {
-  for (var i = 0, il = from2.length, j = to.length; i < il; i++, j++)
-    to[j] = from2[i];
+var __spreadArray = function(to, from) {
+  for (var i2 = 0, il = from.length, j = to.length; i2 < il; i2++, j++)
+    to[j] = from[i2];
   return to;
 };
 function simpleTransformation(isApplicable, annotation, transform, untransform) {
@@ -3046,13 +1960,13 @@ var simpleRules = [
     });
     return baseError;
   }, function(v, superJson) {
-    var e = new Error(v.message);
-    e.name = v.name;
-    e.stack = v.stack;
+    var e2 = new Error(v.message);
+    e2.name = v.name;
+    e2.stack = v.stack;
     superJson.allowedErrorProps.forEach(function(prop) {
-      e[prop] = v[prop];
+      e2[prop] = v[prop];
     });
-    return e;
+    return e2;
   }),
   simpleTransformation(isRegExp, "regexp", function(v) {
     return "" + v;
@@ -3109,19 +2023,19 @@ function compositeTransformation(isApplicable, annotation, transform, untransfor
     untransform
   };
 }
-var symbolRule = compositeTransformation(function(s, superJson) {
-  if (isSymbol(s)) {
-    var isRegistered = !!superJson.symbolRegistry.getIdentifier(s);
+var symbolRule = compositeTransformation(function(s2, superJson) {
+  if (isSymbol(s2)) {
+    var isRegistered = !!superJson.symbolRegistry.getIdentifier(s2);
     return isRegistered;
   }
   return false;
-}, function(s, superJson) {
-  var identifier2 = superJson.symbolRegistry.getIdentifier(s);
-  return ["symbol", identifier2];
+}, function(s2, superJson) {
+  var identifier = superJson.symbolRegistry.getIdentifier(s2);
+  return ["symbol", identifier];
 }, function(v) {
   return v.description;
-}, function(_, a, superJson) {
-  var value = superJson.symbolRegistry.getValue(a[1]);
+}, function(_, a2, superJson) {
+  var value = superJson.symbolRegistry.getValue(a2[1]);
   if (!value) {
     throw new Error("Trying to deserialize unknown symbol");
   }
@@ -3145,8 +2059,8 @@ var typedArrayRule = compositeTransformation(isTypedArray, function(v) {
   return ["typed-array", v.constructor.name];
 }, function(v) {
   return __spreadArray([], __read2(v));
-}, function(v, a) {
-  var ctor = constructorToName[a[1]];
+}, function(v, a2) {
+  var ctor = constructorToName[a2[1]];
   if (!ctor) {
     throw new Error("Trying to deserialize unknown typed array");
   }
@@ -3160,8 +2074,8 @@ function isInstanceOfRegisteredClass(potentialClass, superJson) {
   return false;
 }
 var classRule = compositeTransformation(isInstanceOfRegisteredClass, function(clazz, superJson) {
-  var identifier2 = superJson.classRegistry.getIdentifier(clazz.constructor);
-  return ["class", identifier2];
+  var identifier = superJson.classRegistry.getIdentifier(clazz.constructor);
+  return ["class", identifier];
 }, function(clazz, superJson) {
   var allowedProps = superJson.classRegistry.getAllowedProps(clazz.constructor);
   if (!allowedProps) {
@@ -3172,8 +2086,8 @@ var classRule = compositeTransformation(isInstanceOfRegisteredClass, function(cl
     result[prop] = clazz[prop];
   });
   return result;
-}, function(v, a, superJson) {
-  var clazz = superJson.classRegistry.getValue(a[1]);
+}, function(v, a2, superJson) {
+  var clazz = superJson.classRegistry.getValue(a2[1]);
   if (!clazz) {
     throw new Error("Trying to deserialize unknown class - check https://github.com/blitz-js/superjson/issues/116#issuecomment-773996564");
   }
@@ -3187,8 +2101,8 @@ var customRule = compositeTransformation(function(value, superJson) {
 }, function(value, superJson) {
   var transformer = superJson.customTransformerRegistry.findApplicable(value);
   return transformer.serialize(value);
-}, function(v, a, superJson) {
-  var transformer = superJson.customTransformerRegistry.findByName(a[1]);
+}, function(v, a2, superJson) {
+  var transformer = superJson.customTransformerRegistry.findByName(a2[1]);
   if (!transformer) {
     throw new Error("Trying to deserialize unknown custom value");
   }
@@ -3244,11 +2158,11 @@ var untransformValue = function(json, type, superJson) {
 };
 
 // ../../node_modules/.pnpm/superjson@1.12.4/node_modules/superjson/dist/esm/accessDeep.js
-var getNthKey = function(value, n) {
+var getNthKey = function(value, n2) {
   var keys2 = value.keys();
-  while (n > 0) {
+  while (n2 > 0) {
     keys2.next();
-    n--;
+    n2--;
   }
   return keys2.next().value;
 };
@@ -3265,13 +2179,13 @@ function validatePath(path) {
 }
 var getDeep = function(object, path) {
   validatePath(path);
-  for (var i = 0; i < path.length; i++) {
-    var key = path[i];
+  for (var i2 = 0; i2 < path.length; i2++) {
+    var key = path[i2];
     if (isSet(object)) {
       object = getNthKey(object, +key);
     } else if (isMap(object)) {
       var row = +key;
-      var type = +path[++i] === 0 ? "key" : "value";
+      var type = +path[++i2] === 0 ? "key" : "value";
       var keyOfRow = getNthKey(object, row);
       switch (type) {
         case "key":
@@ -3293,8 +2207,8 @@ var setDeep = function(object, path, mapper) {
     return mapper(object);
   }
   var parent = object;
-  for (var i = 0; i < path.length - 1; i++) {
-    var key = path[i];
+  for (var i2 = 0; i2 < path.length - 1; i2++) {
+    var key = path[i2];
     if (isArray(parent)) {
       var index = +key;
       parent = parent[index];
@@ -3304,12 +2218,12 @@ var setDeep = function(object, path, mapper) {
       var row = +key;
       parent = getNthKey(parent, row);
     } else if (isMap(parent)) {
-      var isEnd = i === path.length - 2;
+      var isEnd = i2 === path.length - 2;
       if (isEnd) {
         break;
       }
       var row = +key;
-      var type = +path[++i] === 0 ? "key" : "value";
+      var type = +path[++i2] === 0 ? "key" : "value";
       var keyOfRow = getNthKey(parent, row);
       switch (type) {
         case "key":
@@ -3358,30 +2272,30 @@ var setDeep = function(object, path, mapper) {
 };
 
 // ../../node_modules/.pnpm/superjson@1.12.4/node_modules/superjson/dist/esm/plainer.js
-var __read3 = function(o, n) {
-  var m = typeof Symbol === "function" && o[Symbol.iterator];
+var __read3 = function(o2, n2) {
+  var m = typeof Symbol === "function" && o2[Symbol.iterator];
   if (!m)
-    return o;
-  var i = m.call(o), r, ar = [], e;
+    return o2;
+  var i2 = m.call(o2), r2, ar = [], e2;
   try {
-    while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-      ar.push(r.value);
+    while ((n2 === void 0 || n2-- > 0) && !(r2 = i2.next()).done)
+      ar.push(r2.value);
   } catch (error) {
-    e = { error };
+    e2 = { error };
   } finally {
     try {
-      if (r && !r.done && (m = i["return"]))
-        m.call(i);
+      if (r2 && !r2.done && (m = i2["return"]))
+        m.call(i2);
     } finally {
-      if (e)
-        throw e.error;
+      if (e2)
+        throw e2.error;
     }
   }
   return ar;
 };
-var __spreadArray2 = function(to, from2) {
-  for (var i = 0, il = from2.length, j = to.length; i < il; i++, j++)
-    to[j] = from2[i];
+var __spreadArray2 = function(to, from) {
+  for (var i2 = 0, il = from.length, j = to.length; i2 < il; i2++, j++)
+    to[j] = from[i2];
   return to;
 };
 function traverse(tree, walker2, origin) {
@@ -3457,8 +2371,8 @@ function generateReferentialEqualityAnnotations(identitites) {
     }
     var _a = __read3(paths.map(function(path) {
       return path.map(String);
-    }).sort(function(a, b) {
-      return a.length - b.length;
+    }).sort(function(a2, b2) {
+      return a2.length - b2.length;
     })), shortestPath = _a[0], identicalPaths = _a.slice(1);
     if (shortestPath.length === 0) {
       rootEqualityPaths = identicalPaths.map(stringifyPath);
@@ -3564,9 +2478,9 @@ function assignProp(carry, key, newVal, originalObject, includeNonenumerable) {
     });
   }
 }
-function copy2(target, options = {}) {
+function copy(target, options = {}) {
   if (isArray2(target)) {
-    return target.map((item) => copy2(item, options));
+    return target.map((item) => copy(item, options));
   }
   if (!isPlainObject2(target)) {
     return target;
@@ -3578,7 +2492,7 @@ function copy2(target, options = {}) {
       return carry;
     }
     const val = target[key];
-    const newVal = copy2(val, options);
+    const newVal = copy(val, options);
     assignProp(carry, key, newVal, target, options.nonenumerable);
     return carry;
   }, {});
@@ -3586,41 +2500,41 @@ function copy2(target, options = {}) {
 
 // ../../node_modules/.pnpm/superjson@1.12.4/node_modules/superjson/dist/esm/index.js
 var __assign2 = function() {
-  __assign2 = Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p))
-          t[p] = s[p];
+  __assign2 = Object.assign || function(t2) {
+    for (var s2, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
+      s2 = arguments[i2];
+      for (var p2 in s2)
+        if (Object.prototype.hasOwnProperty.call(s2, p2))
+          t2[p2] = s2[p2];
     }
-    return t;
+    return t2;
   };
   return __assign2.apply(this, arguments);
 };
-var __read4 = function(o, n) {
-  var m = typeof Symbol === "function" && o[Symbol.iterator];
+var __read4 = function(o2, n2) {
+  var m = typeof Symbol === "function" && o2[Symbol.iterator];
   if (!m)
-    return o;
-  var i = m.call(o), r, ar = [], e;
+    return o2;
+  var i2 = m.call(o2), r2, ar = [], e2;
   try {
-    while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-      ar.push(r.value);
+    while ((n2 === void 0 || n2-- > 0) && !(r2 = i2.next()).done)
+      ar.push(r2.value);
   } catch (error) {
-    e = { error };
+    e2 = { error };
   } finally {
     try {
-      if (r && !r.done && (m = i["return"]))
-        m.call(i);
+      if (r2 && !r2.done && (m = i2["return"]))
+        m.call(i2);
     } finally {
-      if (e)
-        throw e.error;
+      if (e2)
+        throw e2.error;
     }
   }
   return ar;
 };
-var __spreadArray3 = function(to, from2) {
-  for (var i = 0, il = from2.length, j = to.length; i < il; i++, j++)
-    to[j] = from2[i];
+var __spreadArray3 = function(to, from) {
+  for (var i2 = 0, il = from.length, j = to.length; i2 < il; i2++, j++)
+    to[j] = from[i2];
   return to;
 };
 var SuperJSON = (
@@ -3628,9 +2542,9 @@ var SuperJSON = (
   function() {
     function SuperJSON2() {
       this.classRegistry = new ClassRegistry();
-      this.symbolRegistry = new Registry(function(s) {
+      this.symbolRegistry = new Registry(function(s2) {
         var _a;
-        return (_a = s.description) !== null && _a !== void 0 ? _a : "";
+        return (_a = s2.description) !== null && _a !== void 0 ? _a : "";
       });
       this.customTransformerRegistry = new CustomTransformerRegistry();
       this.allowedErrorProps = [];
@@ -3652,7 +2566,7 @@ var SuperJSON = (
     };
     SuperJSON2.prototype.deserialize = function(payload) {
       var json = payload.json, meta = payload.meta;
-      var result = copy2(json);
+      var result = copy(json);
       if (meta === null || meta === void 0 ? void 0 : meta.values) {
         result = applyValueAnnotations(result, meta.values, this);
       }
@@ -3670,8 +2584,8 @@ var SuperJSON = (
     SuperJSON2.prototype.registerClass = function(v, options) {
       this.classRegistry.register(v, options);
     };
-    SuperJSON2.prototype.registerSymbol = function(v, identifier2) {
-      this.symbolRegistry.register(v, identifier2);
+    SuperJSON2.prototype.registerSymbol = function(v, identifier) {
+      this.symbolRegistry.register(v, identifier);
     };
     SuperJSON2.prototype.registerCustom = function(transformer, name) {
       this.customTransformerRegistry.register(__assign2({ name }, transformer));
@@ -3696,9 +2610,9 @@ var SuperJSON = (
     return SuperJSON2;
   }()
 );
-var serialize2 = SuperJSON.serialize;
+var serialize = SuperJSON.serialize;
 SuperJSON.deserialize;
-var stringify2 = SuperJSON.stringify;
+var stringify = SuperJSON.stringify;
 SuperJSON.parse;
 SuperJSON.registerClass;
 SuperJSON.registerCustom;
@@ -3725,17 +2639,17 @@ function getQueryStatusColorByLabel(label) {
 var displayValue = (value, beautify = false) => {
   const {
     json
-  } = serialize2(value);
+  } = serialize(value);
   return JSON.stringify(json, null, beautify ? 2 : void 0);
 };
 var getStatusRank = (q) => q.state.fetchStatus !== "idle" ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
-var queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
-var dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
-var statusAndDateSort = (a, b) => {
-  if (getStatusRank(a) === getStatusRank(b)) {
-    return dateSort(a, b);
+var queryHashSort = (a2, b2) => a2.queryHash.localeCompare(b2.queryHash);
+var dateSort = (a2, b2) => a2.state.dataUpdatedAt < b2.state.dataUpdatedAt ? 1 : -1;
+var statusAndDateSort = (a2, b2) => {
+  if (getStatusRank(a2) === getStatusRank(b2)) {
+    return dateSort(a2, b2);
   }
-  return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
+  return getStatusRank(a2) > getStatusRank(b2) ? 1 : -1;
 };
 var sortFns = {
   status: statusAndDateSort,
@@ -3815,11 +2729,11 @@ var _tmpl$72 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
 function chunkArray(array, size) {
   if (size < 1)
     return [];
-  let i = 0;
+  let i2 = 0;
   const result = [];
-  while (i < array.length) {
-    result.push(array.slice(i, i + size));
-    i = i + size;
+  while (i2 < array.length) {
+    result.push(array.slice(i2, i2 + size));
+    i2 = i2 + size;
   }
   return result;
 }
@@ -3827,7 +2741,7 @@ var Expander = (props) => {
   const styles = getStyles();
   return (() => {
     const _el$ = _tmpl$12();
-    createRenderEffect(() => className(_el$, cx(styles.expander, css`
+    createRenderEffect(() => className(_el$, clsx(styles.expander, u`
           transform: rotate(${props.expanded ? 90 : 0}deg);
         `)));
     return _el$;
@@ -3839,7 +2753,7 @@ var CopyButton = (props) => {
   return (() => {
     const _el$2 = _tmpl$22();
     addEventListener(_el$2, "click", copyState() === "NoCopy" ? () => {
-      navigator.clipboard.writeText(stringify2(props.value)).then(() => {
+      navigator.clipboard.writeText(stringify(props.value)).then(() => {
         setCopyState("SuccessCopy");
         setTimeout(() => {
           setCopyState("NoCopy");
@@ -3899,8 +2813,8 @@ function Explorer(props) {
   const [expandedPages, setExpandedPages] = createSignal([]);
   const subEntries = createMemo(() => {
     if (Array.isArray(props.value)) {
-      return props.value.map((d, i) => ({
-        label: i.toString(),
+      return props.value.map((d, i2) => ({
+        label: i2.toString(),
         value: d
       }));
     } else if (props.value !== null && typeof props.value === "object" && isIterable(props.value) && typeof props.value[Symbol.iterator] === "function") {
@@ -3910,8 +2824,8 @@ function Explorer(props) {
           value: val
         }));
       }
-      return Array.from(props.value, (val, i) => ({
-        label: i.toString(),
+      return Array.from(props.value, (val, i2) => ({
+        label: i2.toString(),
         value: val
       }));
     } else if (typeof props.value === "object" && props.value !== null) {
@@ -4109,7 +3023,7 @@ var getStyles = () => {
     border
   } = tokens;
   return {
-    entry: css`
+    entry: u`
       & * {
         font-size: ${font.size.sm};
         font-family: 'Menlo', 'Fira Code', monospace;
@@ -4119,12 +3033,12 @@ var getStyles = () => {
       outline: none;
       word-break: break-word;
     `,
-    subEntry: css`
+    subEntry: u`
       margin: 0 0 0 0.5em;
       padding-left: 0.75em;
       border-left: 2px solid ${colors.darkGray[400]};
     `,
-    expander: css`
+    expander: u`
       & path {
         stroke: ${colors.gray[400]};
       }
@@ -4132,7 +3046,7 @@ var getStyles = () => {
       align-items: center;
       transition: all 0.1s ease;
     `,
-    expanderButton: css`
+    expanderButton: u`
       cursor: pointer;
       color: inherit;
       font: inherit;
@@ -4150,19 +3064,19 @@ var getStyles = () => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    info: css`
+    info: u`
       color: ${colors.gray[500]};
       font-size: ${font.size.xs};
       line-height: ${font.size.xs};
       margin-left: ${size[1]};
     `,
-    label: css`
+    label: u`
       color: ${colors.gray[300]};
     `,
-    value: css`
+    value: u`
       color: ${colors.purple[400]};
     `,
-    copyButton: css`
+    copyButton: u`
       background-color: transparent;
       border: none;
       display: inline-flex;
@@ -4215,17 +3129,17 @@ var _tmpl$13 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><but
 var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
 var _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
-var _tmpl$53 = /* @__PURE__ */ template(`<div role="menu" tabindex="-1" aria-labelledby="TSQD-settings-menu-btn" id="TSQD-settings-menu"><div>Position</div><div><button aria-label="Position top"><span>Top</span></button><button aria-label="Position bottom"><span>Bottom</span></button><button aria-label="Position left"><span>Left</span></button><button aria-label="Position right"><span>Right`);
-var _tmpl$63 = /* @__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"></div><div><select></select></div><button></button></div><div><button></button><div><button id="TSQD-settings-menu-btn" aria-haspopup="true" aria-controls="TSQD-settings-menu"></button></div></div></div><div><div>`);
+var _tmpl$53 = /* @__PURE__ */ template(`<div role="menu" tabindex="-1" aria-labelledby="tsqd-settings-menu-btn" id="tsqd-settings-menu"><div>Position</div><div><button aria-label="Position top" class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-top"><span>Top</span></button><button aria-label="Position bottom" class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-bottom"><span>Bottom</span></button><button aria-label="Position left" class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-left"><span>Left</span></button><button aria-label="Position right" class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-right"><span>Right`);
+var _tmpl$63 = /* @__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></button><div><button id="tsqd-settings-menu-btn" aria-haspopup="true" aria-controls="tsqd-settings-menu"></button></div></div></div><div><div class="tsqd-queries-container">`);
 var _tmpl$73 = /* @__PURE__ */ template(`<option>Sort by `);
-var _tmpl$82 = /* @__PURE__ */ template(`<div class="TSQDQueryDisabled">disabled`);
-var _tmpl$92 = /* @__PURE__ */ template(`<button><div></div><code class="TSQDQueryHash">`);
-var _tmpl$102 = /* @__PURE__ */ template(`<div role="tooltip" id="TSQD-status-tooltip">`);
-var _tmpl$112 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$82 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
+var _tmpl$92 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
+var _tmpl$102 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
+var _tmpl$112 = /* @__PURE__ */ template(`<span class="tsqd-query-status-tag-label">`);
 var _tmpl$122 = /* @__PURE__ */ template(`<button><span></span><span>`);
 var _tmpl$132 = /* @__PURE__ */ template(`<button><span></span> Error`);
 var _tmpl$14 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
-var _tmpl$15 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div><pre><code></code></pre><span></span></div><div><span>Observers:</span><span></span></div><div><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> Loading</button></div><div>Data Explorer</div><div></div><div>Query Explorer</div><div>`);
+var _tmpl$15 = /* @__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> Loading</button></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
 var _tmpl$16 = /* @__PURE__ */ template(`<option>`);
 var firstBreakpoint = 1024;
 var secondBreakpoint = 796;
@@ -4260,13 +3174,21 @@ var Devtools = () => {
   const isOpen = createMemo(() => {
     return localStore.open === "true" ? true : localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
   });
-  const position2 = createMemo(() => {
+  const position = createMemo(() => {
     return 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 panelPosition = position();
+    root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
+    root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
+  });
   return (() => {
     const _el$ = _tmpl$23();
     insert(_el$, createComponent(TransitionGroup, {
-      name: "TSQD-panel",
+      name: "tsqd-panel-transition",
       get children() {
         return createComponent(Show, {
           get when() {
@@ -4282,7 +3204,7 @@ var Devtools = () => {
       }
     }), null);
     insert(_el$, createComponent(TransitionGroup, {
-      name: "TSQD-button",
+      name: "tsqd-button-transition",
       get children() {
         return createComponent(Show, {
           get when() {
@@ -4293,33 +3215,33 @@ var Devtools = () => {
             insert(_el$3, createComponent(TanstackLogo, {}));
             _el$4.$$click = () => setLocalStore("open", "true");
             insert(_el$4, createComponent(TanstackLogo, {}));
-            createRenderEffect(() => className(_el$2, cx(styles.devtoolsBtn, styles[`devtoolsBtn-position-${buttonPosition()}`])));
+            createRenderEffect(() => className(_el$2, clsx(styles.devtoolsBtn, styles[`devtoolsBtn-position-${buttonPosition()}`])));
             return _el$2;
           }
         });
       }
     }), null);
-    createRenderEffect(() => className(_el$, css`
-        & .TSQD-panel-exit-active,
-        & .TSQD-panel-enter-active {
-          transition: opacity 0.3s, transform 0.3s;
-        }
+    createRenderEffect(() => className(_el$, clsx(u`
+          & .tsqd-panel-transition-exit-active,
+          & .tsqd-panel-transition-enter-active {
+            transition: opacity 0.3s, transform 0.3s;
+          }
 
-        & .TSQD-panel-exit-to,
-        & .TSQD-panel-enter {
-          ${position2() === "top" ? `transform: translateY(-${Number(localStore.height || DEFAULT_HEIGHT)}px);` : position2() === "left" ? `transform: translateX(-${Number(localStore.width || DEFAULT_WIDTH)}px);` : position2() === "right" ? `transform: translateX(${Number(localStore.width || DEFAULT_WIDTH)}px);` : `transform: translateY(${Number(localStore.height || DEFAULT_HEIGHT)}px);`}
-        }
+          & .tsqd-panel-transition-exit-to,
+          & .tsqd-panel-transition-enter {
+            ${position() === "top" || position() === "bottom" ? `transform: translateY(var(--tsqd-panel-height));` : `transform: translateX(var(--tsqd-panel-width));`}
+          }
 
-        & .TSQD-button-exit-active,
-        & .TSQD-button-enter-active {
-          transition: opacity 0.3s, transform 0.3s;
-        }
+          & .tsqd-button-transition-exit-active,
+          & .tsqd-button-transition-enter-active {
+            transition: opacity 0.3s, transform 0.3s;
+          }
 
-        & .TSQD-button-exit-to,
-        & .TSQD-button-enter {
-          transform: ${buttonPosition() === "top-left" ? `translateX(-72px);` : buttonPosition() === "top-right" ? `translateX(72px);` : `translateY(72px);`};
-        }
-      `));
+          & .tsqd-button-transition-exit-to,
+          & .tsqd-button-transition-enter {
+            transform: ${buttonPosition() === "top-left" ? `translateX(-72px);` : buttonPosition() === "top-right" ? `translateX(72px);` : `translateY(72px);`};
+          }
+        `, "tsqd-transitions-container")));
     return _el$;
   })();
 };
@@ -4330,19 +3252,19 @@ var DevtoolsPanel = (props) => {
   const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
   const [offline, setOffline] = createSignal(false);
   const [settingsOpen, setSettingsOpen] = createSignal(false);
-  const position2 = createMemo(() => props.localStore.position || useQueryDevtoolsContext().position || POSITION);
+  const position = createMemo(() => props.localStore.position || useQueryDevtoolsContext().position || POSITION);
   const sortFn = createMemo(() => sortFns[sort()]);
   const onlineManager = createMemo(() => useQueryDevtoolsContext().onlineManager);
-  const cache2 = createMemo(() => {
+  const cache = createMemo(() => {
     return useQueryDevtoolsContext().client.getQueryCache();
   });
   const queryCount = createSubscribeToQueryCacheBatcher((queryCache) => {
     return queryCache().getAll().length;
   }, false);
   const queries = createMemo(on(() => [queryCount(), props.localStore.filter, sort(), sortOrder()], () => {
-    const curr = cache2().getAll();
+    const curr = cache().getAll();
     const filtered = props.localStore.filter ? curr.filter((item) => rankItem(item.queryHash, props.localStore.filter || "").passed) : [...curr];
-    const sorted = sortFn() ? filtered.sort((a, b) => sortFn()(a, b) * sortOrder()) : filtered;
+    const sorted = sortFn() ? filtered.sort((a2, b2) => sortFn()(a2, b2) * sortOrder()) : filtered;
     return sorted;
   }));
   const handleDragStart = (event) => {
@@ -4361,8 +3283,8 @@ var DevtoolsPanel = (props) => {
     const minWidth = convertRemToPixels(12);
     const runDrag = (moveEvent) => {
       moveEvent.preventDefault();
-      if (position2() === "left" || position2() === "right") {
-        const valToAdd = position2() === "right" ? startX - moveEvent.clientX : moveEvent.clientX - startX;
+      if (position() === "left" || position() === "right") {
+        const valToAdd = position() === "right" ? startX - moveEvent.clientX : moveEvent.clientX - startX;
         newSize = Math.round(width + valToAdd);
         if (newSize < minWidth) {
           newSize = minWidth;
@@ -4373,7 +3295,7 @@ var DevtoolsPanel = (props) => {
           props.setLocalStore("width", String(newWidth));
         }
       } else {
-        const valToAdd = position2() === "bottom" ? startY - moveEvent.clientY : moveEvent.clientY - startY;
+        const valToAdd = position() === "bottom" ? startY - moveEvent.clientY : moveEvent.clientY - startY;
         newSize = Math.round(height + valToAdd);
         if (newSize < minHeight) {
           newSize = minHeight;
@@ -4449,8 +3371,8 @@ var DevtoolsPanel = (props) => {
     insert(_el$12, () => useQueryDevtoolsContext().version, null);
     insert(_el$9, createComponent(QueryStatusCount, {}), null);
     insert(_el$16, createComponent(Search, {}), _el$17);
-    _el$17.$$input = (e) => props.setLocalStore("filter", e.currentTarget.value);
-    _el$19.addEventListener("change", (e) => props.setLocalStore("sort", e.currentTarget.value));
+    _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$40 = _tmpl$73(); _el$40.firstChild;
       _el$40.value = key;
@@ -4491,7 +3413,7 @@ var DevtoolsPanel = (props) => {
       return () => _c$() ? createComponent(Offline, {}) : createComponent(Wifi, {});
     })());
     _el$25.style.setProperty("position", "relative");
-    _el$26.$$click = () => setSettingsOpen((prev2) => !prev2);
+    _el$26.$$click = () => setSettingsOpen((prev) => !prev);
     insert(_el$26, createComponent(Settings, {}));
     insert(_el$25, createComponent(Show, {
       get when() {
@@ -4516,7 +3438,7 @@ var DevtoolsPanel = (props) => {
         };
         insert(_el$36, createComponent(ArrowDown, {}), _el$37);
         createRenderEffect((_p$) => {
-          const _v$ = styles.settingsMenu, _v$2 = styles.settingsMenuHeader, _v$3 = styles.settingsMenuSection;
+          const _v$ = clsx(styles.settingsMenu, "tsqd-settings-menu"), _v$2 = clsx(styles.settingsMenuHeader, "tsqd-settings-menu-header"), _v$3 = clsx(styles.settingsMenuSection, "tsqd-settings-menu-section");
           _v$ !== _p$._v$ && className(_el$27, _p$._v$ = _v$);
           _v$2 !== _p$._v$2 && className(_el$28, _p$._v$2 = _v$2);
           _v$3 !== _p$._v$3 && className(_el$29, _p$._v$3 = _v$3);
@@ -4549,20 +3471,19 @@ var DevtoolsPanel = (props) => {
       }
     }), null);
     createRenderEffect((_p$) => {
-      const _v$4 = `${styles.panel} ${styles[`panel-position-${position2()}`]} ${css`
-        flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
-        background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
-        ${panelWidth() < thirdBreakpoint && (position2() === "right" || position2() === "left") ? `
+      const _v$4 = 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]};
+        `, {
+        [u`
             min-width: min-content;
-          ` : ""}
-      `}`, _v$5 = position2() === "bottom" || position2() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$6 = position2() === "right" || position2() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$7 = cx(styles.dragHandle, styles[`dragHandle-position-${position2()}`]), _v$8 = cx(styles.closeBtn, styles[`closeBtn-position-${position2()}`]), _v$9 = `${styles.queriesContainer} ${css`
-          ${panelWidth() < secondBreakpoint && selectedQueryHash() ? `
-          height: 50%;
-          max-height: 50%;
-          ` : ""}
-        `}`, _v$10 = cx(styles.row), _v$11 = styles.logo, _v$12 = styles.tanstackLogo, _v$13 = styles.queryFlavorLogo, _v$14 = cx(styles.row, css`
+          `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
+      }, "tsqd-main-panel"), _v$5 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$6 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$7 = clsx(styles.dragHandle, styles[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$8 = clsx(styles.closeBtn, styles[`closeBtn-position-${position()}`], "tsqd-minimize-btn"), _v$9 = clsx(styles.queriesContainer, panelWidth() < secondBreakpoint && selectedQueryHash() && u`
+              height: 50%;
+              max-height: 50%;
+            `, "tsqd-queries-container"), _v$10 = clsx(styles.row, "tsqd-header"), _v$11 = clsx(styles.logo, "tsqd-text-logo-container"), _v$12 = clsx(styles.tanstackLogo, "tsqd-text-logo-tanstack"), _v$13 = clsx(styles.queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$14 = clsx(styles.row, u`
               gap: ${tokens.size[2.5]};
-            `), _v$15 = styles.filtersContainer, _v$16 = styles.filterInput, _v$17 = styles.filterSelect, _v$18 = `Sort order ${sortOrder() === -1 ? "descending" : "ascending"}`, _v$19 = sortOrder() === -1, _v$20 = styles.actionsContainer, _v$21 = styles.actionsBtn, _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = styles.actionsBtn, _v$25 = `${settingsOpen() ? "Close" : "Open"} settings menu`, _v$26 = styles.overflowQueryContainer;
+            `, "tsqd-filters-actions-container"), _v$15 = clsx(styles.filtersContainer, "tsqd-filters-container"), _v$16 = clsx(styles.filterInput, "tsqd-query-filter-textfield-container"), _v$17 = clsx(styles.filterSelect, "tsqd-query-filter-sort-container"), _v$18 = `Sort order ${sortOrder() === -1 ? "descending" : "ascending"}`, _v$19 = sortOrder() === -1, _v$20 = clsx(styles.actionsContainer, "tsqd-actions-container"), _v$21 = clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-settings"), _v$25 = `${settingsOpen() ? "Close" : "Open"} settings menu`, _v$26 = clsx(styles.overflowQueryContainer, "tsqd-queries-overflow-container");
       _v$4 !== _p$._v$4 && className(_el$5, _p$._v$4 = _v$4);
       _v$5 !== _p$._v$5 && ((_p$._v$5 = _v$5) != null ? _el$5.style.setProperty("height", _v$5) : _el$5.style.removeProperty("height"));
       _v$6 !== _p$._v$6 && ((_p$._v$6 = _v$6) != null ? _el$5.style.setProperty("width", _v$6) : _el$5.style.removeProperty("width"));
@@ -4654,13 +3575,13 @@ var QueryRow = (props) => {
         }
       }), null);
       createRenderEffect((_p$) => {
-        const _v$27 = cx(styles.queryRow, selectedQueryHash() === props.query.queryHash && styles.selectedQueryRow), _v$28 = `Query key ${props.query.queryHash}`, _v$29 = cx("TSQDObserverCount", color() === "gray" ? css`
+        const _v$27 = clsx(styles.queryRow, selectedQueryHash() === props.query.queryHash && styles.selectedQueryRow, "tsqd-query-row"), _v$28 = `Query key ${props.query.queryHash}`, _v$29 = clsx(color() === "gray" ? u`
                   background-color: ${tokens.colors[color()][700]};
                   color: ${tokens.colors[color()][300]};
-                ` : css`
+                ` : u`
                   background-color: ${tokens.colors[color()][900]};
-                  color: ${tokens.colors[color()][300]} !important;
-                `);
+                  color: ${tokens.colors[color()][300]};
+                `, "tsqd-query-observer-count");
         _v$27 !== _p$._v$27 && className(_el$42, _p$._v$27 = _v$27);
         _v$28 !== _p$._v$28 && setAttribute(_el$42, "aria-label", _p$._v$28 = _v$28);
         _v$29 !== _p$._v$29 && className(_el$43, _p$._v$29 = _v$29);
@@ -4718,7 +3639,7 @@ var QueryStatusCount = () => {
         return inactive();
       }
     }), null);
-    createRenderEffect(() => className(_el$46, styles.queryStatusContainer));
+    createRenderEffect(() => className(_el$46, clsx(styles.queryStatusContainer, "tsqd-query-status-container")));
     return _el$46;
   })();
 };
@@ -4754,15 +3675,15 @@ var QueryStatus = (props) => {
         return showLabel();
       },
       get ["class"]() {
-        return cx(styles.queryStatusTag, !showLabel() ? css`
-              cursor: pointer;
-              &:hover {
-                background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
-              }
-            ` : null);
+        return clsx(styles.queryStatusTag, !showLabel() && u`
+            cursor: pointer;
+            &:hover {
+              background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
+            }
+          `, "tsqd-query-status-tag", `tsqd-query-status-tag-${props.label.toLowerCase()}`);
       }
     }, () => mouseOver() || focused() ? {
-      "aria-describedby": "TSQD-status-tooltip"
+      "aria-describedby": "tsqd-status-tooltip"
     } : {}), false, true);
     insert(_el$47, createComponent(Show, {
       get when() {
@@ -4771,7 +3692,7 @@ var QueryStatus = (props) => {
       get children() {
         const _el$48 = _tmpl$102();
         insert(_el$48, () => props.label);
-        createRenderEffect(() => className(_el$48, cx(styles.statusTooltip)));
+        createRenderEffect(() => className(_el$48, clsx(styles.statusTooltip, "tsqd-query-status-tooltip")));
         return _el$48;
       }
     }), _el$49);
@@ -4787,17 +3708,17 @@ var QueryStatus = (props) => {
     }), _el$51);
     insert(_el$51, () => props.count);
     createRenderEffect((_p$) => {
-      const _v$30 = css`
-          width: ${tokens.size[2]};
-          height: ${tokens.size[2]};
-          border-radius: ${tokens.border.radius.full};
-          background-color: ${tokens.colors[props.color][500]};
-        `, _v$31 = cx(styles.queryStatusCount, props.count > 0 && props.color !== "gray" ? css`
+      const _v$30 = clsx(u`
+            width: ${tokens.size[2]};
+            height: ${tokens.size[2]};
+            border-radius: ${tokens.border.radius.full};
+            background-color: ${tokens.colors[props.color][500]};
+          `, "tsqd-query-status-tag-dot"), _v$31 = clsx(styles.queryStatusCount, props.count > 0 && props.color !== "gray" ? u`
                 background-color: ${tokens.colors[props.color][900]};
-                color: ${tokens.colors[props.color][300]} !important;
-              ` : css`
-                color: ${tokens.colors["gray"][400]} !important;
-              `);
+                color: ${tokens.colors[props.color][300]};
+              ` : u`
+                color: ${tokens.colors["gray"][400]};
+              `, "tsqd-query-status-tag-count");
       _v$30 !== _p$._v$30 && className(_el$49, _p$._v$30 = _v$30);
       _v$31 !== _p$._v$31 && className(_el$51, _p$._v$31 = _v$31);
       return _p$;
@@ -4923,9 +3844,9 @@ var QueryDetails = () => {
           };
           insert(_el$76, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$78);
           createRenderEffect((_p$) => {
-            const _v$32 = css`
-                color: ${tokens.colors.red[400]};
-              `, _v$33 = queryStatus() === "pending", _v$34 = css`
+            const _v$32 = clsx(u`
+                  color: ${tokens.colors.red[400]};
+                `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$33 = queryStatus() === "pending", _v$34 = u`
                   background-color: ${tokens.colors.red[400]};
                 `;
             _v$32 !== _p$._v$32 && className(_el$76, _p$._v$32 = _v$32);
@@ -4946,8 +3867,8 @@ var QueryDetails = () => {
         },
         get children() {
           const _el$79 = _tmpl$14(), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling; _el$82.firstChild;
-          _el$82.addEventListener("change", (e) => {
-            const errorType = errorTypes().find((t) => t.name === e.currentTarget.value);
+          _el$82.addEventListener("change", (e2) => {
+            const errorType = errorTypes().find((t2) => t2.name === e2.currentTarget.value);
             triggerError(errorType);
           });
           insert(_el$82, createComponent(For, {
@@ -4963,7 +3884,7 @@ var QueryDetails = () => {
           }), null);
           insert(_el$79, createComponent(ChevronDown, {}), null);
           createRenderEffect((_p$) => {
-            const _v$35 = styles.actionsSelect, _v$36 = css`
+            const _v$35 = clsx(styles.actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$36 = u`
                   background-color: ${tokens.colors.red[400]};
                 `, _v$37 = queryStatus() === "pending";
             _v$35 !== _p$._v$35 && className(_el$79, _p$._v$35 = _v$35);
@@ -4996,31 +3917,31 @@ var QueryDetails = () => {
         }
       }));
       createRenderEffect((_p$) => {
-        const _v$38 = styles.detailsContainer, _v$39 = styles.detailsHeader, _v$40 = styles.detailsBody, _v$41 = cx(styles.queryDetailsStatus, color() === "gray" ? css`
+        const _v$38 = clsx(styles.detailsContainer, "tsqd-query-details-container"), _v$39 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles.detailsBody, "tsqd-query-details-summary-container"), _v$41 = clsx(styles.queryDetailsStatus, color() === "gray" ? u`
                       background-color: ${tokens.colors[color()][700]};
                       color: ${tokens.colors[color()][300]};
                       border-color: ${tokens.colors[color()][600]};
-                    ` : css`
+                    ` : u`
                       background-color: ${tokens.colors[color()][900]};
                       color: ${tokens.colors[color()][300]};
                       border-color: ${tokens.colors[color()][600]};
-                    `), _v$42 = styles.detailsHeader, _v$43 = styles.actionsBody, _v$44 = css`
-              color: ${tokens.colors.blue[400]};
-            `, _v$45 = statusLabel() === "fetching", _v$46 = css`
+                    `), _v$42 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$43 = clsx(styles.actionsBody, "tsqd-query-details-actions-container"), _v$44 = clsx(u`
+                color: ${tokens.colors.blue[400]};
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$45 = statusLabel() === "fetching", _v$46 = u`
                 background-color: ${tokens.colors.blue[400]};
-              `, _v$47 = css`
-              color: ${tokens.colors.yellow[400]};
-            `, _v$48 = queryStatus() === "pending", _v$49 = css`
+              `, _v$47 = clsx(u`
+                color: ${tokens.colors.yellow[400]};
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$48 = queryStatus() === "pending", _v$49 = u`
                 background-color: ${tokens.colors.yellow[400]};
-              `, _v$50 = css`
-              color: ${tokens.colors.gray[300]};
-            `, _v$51 = queryStatus() === "pending", _v$52 = css`
+              `, _v$50 = clsx(u`
+                color: ${tokens.colors.gray[300]};
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$51 = queryStatus() === "pending", _v$52 = u`
                 background-color: ${tokens.colors.gray[400]};
-              `, _v$53 = css`
-              color: ${tokens.colors.cyan[400]};
-            `, _v$54 = restoringLoading(), _v$55 = css`
+              `, _v$53 = clsx(u`
+                color: ${tokens.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 = styles.detailsHeader, _v$57 = styles.detailsHeader;
+              `, _v$56 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles.detailsHeader, "tsqd-query-details-header");
         _v$38 !== _p$._v$38 && className(_el$52, _p$._v$38 = _v$38);
         _v$39 !== _p$._v$39 && className(_el$53, _p$._v$39 = _v$39);
         _v$40 !== _p$._v$40 && className(_el$54, _p$._v$40 = _v$40);
@@ -5114,10 +4035,11 @@ var getStyles2 = () => {
     border
   } = tokens;
   return {
-    devtoolsBtn: css`
+    devtoolsBtn: u`
       z-index: 100000;
       position: fixed;
       padding: 4px;
+      text-align: left;
 
       display: flex;
       align-items: center;
@@ -5167,7 +4089,7 @@ var getStyles2 = () => {
         }
       }
     `,
-    panel: css`
+    panel: u`
       position: fixed;
       z-index: 9999;
       display: flex;
@@ -5179,23 +4101,23 @@ var getStyles2 = () => {
         text-transform: none;
       }
     `,
-    "devtoolsBtn-position-bottom-right": css`
+    "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;
       right: 12px;
     `,
-    "devtoolsBtn-position-bottom-left": css`
+    "devtoolsBtn-position-bottom-left": u`
       bottom: 12px;
       left: 12px;
     `,
-    "devtoolsBtn-position-top-left": css`
+    "devtoolsBtn-position-top-left": u`
       top: 12px;
       left: 12px;
     `,
-    "devtoolsBtn-position-top-right": css`
+    "devtoolsBtn-position-top-right": u`
       top: 12px;
       right: 12px;
     `,
-    "panel-position-top": css`
+    "panel-position-top": u`
       top: 0;
       right: 0;
       left: 0;
@@ -5203,7 +4125,7 @@ var getStyles2 = () => {
       min-height: 3.5rem;
       border-bottom: ${colors.darkGray[300]} 1px solid;
     `,
-    "panel-position-bottom": css`
+    "panel-position-bottom": u`
       bottom: 0;
       right: 0;
       left: 0;
@@ -5211,21 +4133,21 @@ var getStyles2 = () => {
       min-height: 3.5rem;
       border-top: ${colors.darkGray[300]} 1px solid;
     `,
-    "panel-position-right": css`
+    "panel-position-right": u`
       bottom: 0;
       right: 0;
       top: 0;
       border-left: ${colors.darkGray[300]} 1px solid;
       max-width: 90%;
     `,
-    "panel-position-left": css`
+    "panel-position-left": u`
       bottom: 0;
       left: 0;
       top: 0;
       border-right: ${colors.darkGray[300]} 1px solid;
       max-width: 90%;
     `,
-    closeBtn: css`
+    closeBtn: u`
       position: absolute;
       cursor: pointer;
       z-index: 5;
@@ -5240,7 +4162,7 @@ var getStyles2 = () => {
         outline: 2px solid ${colors.blue[600]};
       }
     `,
-    "closeBtn-position-top": css`
+    "closeBtn-position-top": u`
       bottom: 0;
       right: ${size[3]};
       transform: translate(0, 100%);
@@ -5265,7 +4187,7 @@ var getStyles2 = () => {
         transform: rotate(180deg);
       }
     `,
-    "closeBtn-position-bottom": css`
+    "closeBtn-position-bottom": u`
       top: 0;
       right: ${size[3]};
       transform: translate(0, -100%);
@@ -5286,7 +4208,7 @@ var getStyles2 = () => {
         width: calc(100% + ${size[5]});
       }
     `,
-    "closeBtn-position-right": css`
+    "closeBtn-position-right": u`
       bottom: ${size[3]};
       left: 0;
       transform: translate(-100%, 0);
@@ -5310,7 +4232,7 @@ var getStyles2 = () => {
         transform: rotate(-90deg);
       }
     `,
-    "closeBtn-position-left": css`
+    "closeBtn-position-left": u`
       bottom: ${size[3]};
       right: 0;
       transform: translate(100%, 0);
@@ -5334,13 +4256,13 @@ var getStyles2 = () => {
         transform: rotate(90deg);
       }
     `,
-    queriesContainer: css`
+    queriesContainer: u`
       flex: 1 1 700px;
       background-color: ${colors.darkGray[700]};
       display: flex;
       flex-direction: column;
     `,
-    dragHandle: css`
+    dragHandle: u`
       position: absolute;
       transition: background-color 0.125s ease;
       &:hover {
@@ -5348,31 +4270,31 @@ var getStyles2 = () => {
       }
       z-index: 4;
     `,
-    "dragHandle-position-top": css`
+    "dragHandle-position-top": u`
       bottom: 0;
       width: 100%;
       height: ${tokens.size[1]};
       cursor: ns-resize;
     `,
-    "dragHandle-position-bottom": css`
+    "dragHandle-position-bottom": u`
       top: 0;
       width: 100%;
       height: ${tokens.size[1]};
       cursor: ns-resize;
     `,
-    "dragHandle-position-right": css`
+    "dragHandle-position-right": u`
       left: 0;
       width: ${tokens.size[1]};
       height: 100%;
       cursor: ew-resize;
     `,
-    "dragHandle-position-left": css`
+    "dragHandle-position-left": u`
       right: 0;
       width: ${tokens.size[1]};
       height: 100%;
       cursor: ew-resize;
     `,
-    row: css`
+    row: u`
       display: flex;
       justify-content: space-between;
       padding: ${tokens.size[2.5]} ${tokens.size[3]};
@@ -5387,7 +4309,7 @@ var getStyles2 = () => {
         flex-direction: column;
       }
     `,
-    logo: css`
+    logo: u`
       cursor: pointer;
       &:hover {
         opacity: 0.7;
@@ -5398,27 +4320,28 @@ var getStyles2 = () => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    tanstackLogo: css`
+    tanstackLogo: u`
       font-size: ${font.size.lg};
       font-weight: ${font.weight.extrabold};
       line-height: ${font.lineHeight.sm};
       white-space: nowrap;
     `,
-    queryFlavorLogo: css`
+    queryFlavorLogo: u`
       font-weight: ${font.weight.semibold};
       font-size: ${font.size.sm};
       background: linear-gradient(to right, #dd524b, #e9a03b);
       background-clip: text;
+      -webkit-background-clip: text;
       line-height: ${font.lineHeight.xs};
       -webkit-text-fill-color: transparent;
       white-space: nowrap;
     `,
-    queryStatusContainer: css`
+    queryStatusContainer: u`
       display: flex;
       gap: ${tokens.size[2]};
       height: min-content;
     `,
-    queryStatusTag: css`
+    queryStatusTag: u`
       display: flex;
       gap: ${tokens.size[1.5]};
       background: ${colors.darkGray[500]};
@@ -5440,7 +4363,7 @@ var getStyles2 = () => {
         color: ${colors.gray[300]}${alpha[80]};
       }
     `,
-    statusTooltip: css`
+    statusTooltip: u`
       position: absolute;
       z-index: 1;
       background-color: ${colors.darkGray[500]};
@@ -5479,10 +4402,10 @@ var getStyles2 = () => {
         border-width: 7px;
       }
     `,
-    selectedQueryRow: css`
+    selectedQueryRow: u`
       background-color: ${colors.darkGray[500]};
     `,
-    queryStatusCount: css`
+    queryStatusCount: u`
       padding: 0 8px;
       display: flex;
       align-items: center;
@@ -5492,7 +4415,7 @@ var getStyles2 = () => {
       border-radius: 3px;
       font-variant-numeric: tabular-nums;
     `,
-    filtersContainer: css`
+    filtersContainer: u`
       display: flex;
       gap: ${tokens.size[2.5]};
       & > button {
@@ -5515,7 +4438,7 @@ var getStyles2 = () => {
         }
       }
     `,
-    filterInput: css`
+    filterInput: u`
       padding: ${tokens.size[1.5]} ${tokens.size[2.5]};
       border-radius: ${tokens.border.radius.md};
       background-color: ${colors.darkGray[400]};
@@ -5553,7 +4476,7 @@ var getStyles2 = () => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    filterSelect: css`
+    filterSelect: u`
       padding: ${tokens.size[1.5]} ${tokens.size[2.5]};
       border-radius: ${tokens.border.radius.md};
       background-color: ${colors.darkGray[400]};
@@ -5585,15 +4508,15 @@ var getStyles2 = () => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    actionsContainer: css`
+    actionsContainer: u`
       display: flex;
       gap: ${tokens.size[2.5]};
     `,
-    actionsBtn: css`
+    actionsBtn: u`
       border-radius: ${tokens.border.radius.md};
       background-color: ${colors.darkGray[400]};
-      width: 2.125rem; // 34px
-      height: 2.125rem; // 34px
+      width: 2.125rem;
+      height: 2.125rem;
       justify-content: center;
       display: flex;
       align-items: center;
@@ -5615,7 +4538,7 @@ var getStyles2 = () => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    overflowQueryContainer: css`
+    overflowQueryContainer: u`
       flex: 1;
       overflow-y: auto;
       & > div {
@@ -5623,27 +4546,30 @@ var getStyles2 = () => {
         flex-direction: column;
       }
     `,
-    queryRow: css`
+    queryRow: u`
       display: flex;
       align-items: center;
       padding: 0;
       background-color: inherit;
       border: none;
       cursor: pointer;
+      &:focus {
+        outline: none;
+      }
       &:focus-visible {
         outline-offset: -2px;
         border-radius: ${border.radius.xs};
         outline: 2px solid ${colors.blue[800]};
       }
-      &:hover .TSQDQueryHash {
+      &:hover .tsqd-query-hash {
         background-color: ${colors.darkGray[600]};
       }
 
-      & .TSQDObserverCount {
+      & .tsqd-query-observer-count {
         padding: 0 ${tokens.size[1]};
         user-select: none;
         min-width: ${tokens.size[8]};
-        align-self: stretch !important;
+        align-self: stretch;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -5651,7 +4577,7 @@ var getStyles2 = () => {
         font-weight: ${font.weight.medium};
         border-bottom: 1px solid ${colors.darkGray[700]};
       }
-      & .TSQDQueryHash {
+      & .tsqd-query-hash {
         user-select: text;
         font-size: ${font.size.sm};
         display: flex;
@@ -5659,16 +4585,15 @@ var getStyles2 = () => {
         min-height: ${tokens.size[8]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace !important;
+        font-family: 'Menlo', 'Fira Code', monospace;
         border-bottom: 1px solid ${colors.darkGray[400]};
         text-align: left;
         text-overflow: clip;
         word-break: break-word;
       }
 
-      & .TSQDQueryDisabled {
+      & .tsqd-query-disabled-indicator {
         align-self: stretch;
-        align-self: stretch !important;
         display: flex;
         align-items: center;
         padding: 0 ${tokens.size[3]};
@@ -5678,15 +4603,16 @@ var getStyles2 = () => {
         font-size: ${font.size.sm};
       }
     `,
-    detailsContainer: css`
+    detailsContainer: u`
       flex: 1 1 700px;
       background-color: ${colors.darkGray[700]};
       display: flex;
       flex-direction: column;
       overflow-y: auto;
       display: flex;
+      text-align: left;
     `,
-    detailsHeader: css`
+    detailsHeader: u`
       position: sticky;
       top: 0;
       z-index: 2;
@@ -5694,8 +4620,9 @@ var getStyles2 = () => {
       padding: ${tokens.size[2]} ${tokens.size[2]};
       font-weight: ${font.weight.medium};
       font-size: ${font.size.sm};
+      text-align: left;
     `,
-    detailsBody: css`
+    detailsBody: u`
       margin: ${tokens.size[2]} 0px ${tokens.size[3]} 0px;
       & > div {
         display: flex;
@@ -5716,19 +4643,19 @@ var getStyles2 = () => {
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace !important;
+        font-family: 'Menlo', 'Fira Code', monospace;
         margin: 0;
         font-size: ${font.size.sm};
         line-height: ${font.lineHeight.sm};
       }
     `,
-    queryDetailsStatus: css`
+    queryDetailsStatus: u`
       border: 1px solid ${colors.darkGray[200]};
       border-radius: ${tokens.border.radius.md};
       font-weight: ${font.weight.medium};
       padding: ${tokens.size[1]} ${tokens.size[2.5]};
     `,
-    actionsBody: css`
+    actionsBody: u`
       flex-wrap: wrap;
       margin: ${tokens.size[3]} 0px ${tokens.size[3]} 0px;
       display: flex;
@@ -5767,7 +4694,7 @@ var getStyles2 = () => {
         }
       }
     `,
-    actionsSelect: css`
+    actionsSelect: u`
       font-size: ${font.size.sm};
       padding: ${tokens.size[2]} ${tokens.size[2]};
       display: flex;
@@ -5809,10 +4736,10 @@ var getStyles2 = () => {
       }
 
       & svg path {
-        stroke: ${tokens.colors.red[400]} !important;
+        stroke: ${tokens.colors.red[400]};
       }
     `,
-    settingsMenu: css`
+    settingsMenu: u`
       position: absolute;
       top: calc(100% + ${tokens.size[2]});
       border-radius: ${tokens.border.radius.lg};
@@ -5824,12 +4751,12 @@ var getStyles2 = () => {
       color: ${colors.gray[500]};
       z-index: 7;
     `,
-    settingsMenuHeader: css`
+    settingsMenuHeader: u`
       padding: ${tokens.size[1.5]} ${tokens.size[2.5]};
       color: ${colors.gray[300]};
       font-weight: ${font.weight.medium};
     `,
-    settingsMenuSection: css`
+    settingsMenuSection: u`
       border-top: 1px solid ${colors.gray[600]};
       display: flex;
       flex-direction: column;