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

package/build/Devtools/{AL7POTVF.jsx → DK6B4TZH.jsx}

@@ -424,8 +424,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 = {
@@ -461,8 +461,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,
@@ -478,7 +478,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;
     }
@@ -550,8 +550,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) {
@@ -591,9 +591,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
       });
     }
@@ -614,1287 +614,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 insert(rule) {
-    if (this.ctr % (this.isSpeedy ? 65e3 : 1) === 0) {
-      this._insertTag(createStyleElement(this));
-    }
-    var tag = this.tags[this.tags.length - 1];
-    if (false) {
-      var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
-      if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
-      }
-      this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;
-    }
-    if (this.isSpeedy) {
-      var sheet2 = sheetForTag(tag);
-      try {
-        sheet2.insertRule(rule, sheet2.cssRules.length);
-      } catch (e) {
-        if (false) {
-        }
-      }
-    } 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;
-    if (false) {
-      this._alreadyInsertedOrderInsensitiveRule = false;
-    }
-  };
-  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);
-};
-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 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 = "";
-    }
-  }
-};
-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;
-  }
-  return value;
-}
-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 (false) {
-    throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\nIf multiple caches share the same key they might \"fight\" for each other's style elements.");
-  }
-  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;
-  if (false) {
-    if (/[^a-z-]/.test(key)) {
-      throw new Error('Emotion key must only contain lower case alphabetical characters and - but "' + key + '" was passed');
-    }
-  }
-  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];
-  if (false) {
-    omnipresentPlugins.push(createUnsafeSelectorsAlarm({
-      get compat() {
-        return cache2.compat;
-      }
-    }), incorrectImportAlarm);
-  }
-  {
-    var currentSheet;
-    var finalizingPlugins = [stringify, false ? function(element) {
-      if (!element.root) {
-        if (element["return"]) {
-          currentSheet.insert(element["return"]);
-        } else if (element.value && element.type !== COMMENT) {
-          currentSheet.insert(element.value + "{}");
-        }
-      }
-    } : 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 insert(selector, serialized, sheet2, shouldCache) {
-      currentSheet = sheet2;
-      if (false) {
-        currentSheet = {
-          insert: function insert2(rule) {
-            sheet2.insert(rule + serialized.map);
-          }
-        };
-      }
-      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;
+  return r2 + (t2 && a2 ? t2 + "{" + a2 + "}" : a2) + l2;
 };
-
-// ../../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);
+var c = {};
+var s = (e2) => {
+  if ("object" == typeof e2) {
+    let t2 = "";
+    for (let r2 in e2)
+      t2 += r2 + s(e2[r2]);
+    return t2;
   }
-  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
+  return e2;
 };
-
-// ../../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";
+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);
   }
-  return value;
+  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;
 };
-if (false) {
-  contentValuePattern = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
-  contentValues = ["normal", "none", "initial", "inherit", "unset"];
-  oldProcessStyleValue = processStyleValue;
-  msPattern = /^-ms-/;
-  hyphenPattern = /-(.)/g;
-  hyphenatedCache = {};
-  processStyleValue = function processStyleValue3(key, value) {
-    if (key === "content") {
-      if (typeof value !== "string" || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
-        throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
-      }
-    }
-    var processed = oldProcessStyleValue(key, value);
-    if (processed !== "" && !isCustomProperty(key) && key.indexOf("-") !== -1 && hyphenatedCache[key] === void 0) {
-      hyphenatedCache[key] = true;
-    }
-    return processed;
-  };
-}
-var contentValuePattern;
-var contentValues;
-var oldProcessStyleValue;
-var msPattern;
-var hyphenPattern;
-var hyphenatedCache;
-function handleInterpolation(mergedProps, registered, interpolation) {
-  if (interpolation == null) {
-    return "";
-  }
-  if (interpolation.__emotion_styles !== void 0) {
-    if (false) {
-      throw new Error(noComponentSelectorMessage);
-    }
-    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 + ";";
-        if (false) {
-          styles += interpolation.map;
-        }
-        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);
-      } else if (false) {
-      }
-      break;
-    }
-    case "string":
-      if (false) {
-        var matched = [];
-        var replaced = interpolation.replace(animationRegex, function(match2, p1, p2) {
-          var fakeVarName = "animation" + matched.length;
-          matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, "") + "`");
-          return "${" + fakeVarName + "}";
-        });
-        if (matched.length) {
-        }
-      }
-      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: {
-              if (false) {
-              }
-              string += _key + "{" + interpolated + "}";
-            }
-          }
-        }
-      }
-    }
+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 string;
+  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 labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-if (false) {
-  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\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 {
-    if (false) {
-    }
-    styles += strings[0];
-  }
-  for (var i = 1; i < args.length; i++) {
-    styles += handleInterpolation(mergedProps, registered, args[i]);
-    if (stringMode) {
-      if (false) {
-      }
-      styles += strings[i];
-    }
-  }
-  var sourceMap;
-  if (false) {
-    styles = styles.replace(sourceMapPattern, function(match3) {
-      sourceMap = match3;
-      return "";
-    });
-  }
-  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;
-  if (false) {
-    return {
-      name,
-      styles,
-      map: sourceMap,
-      next: cursor,
-      toString: function toString() {
-        return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-      }
-    };
-  }
-  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(className) {
-    if (registered[className] !== void 0) {
-      registeredStyles.push(registered[className] + ";");
-    } else {
-      rawClassName += className + " ";
-    }
-  });
-  return rawClassName;
-}
-var registerStyles = function registerStyles2(cache2, serialized, isStringTag) {
-  var className = 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[className] === void 0
-  ) {
-    cache2.registered[className] = serialized.styles;
-  }
-};
-var insertStyles = function insertStyles2(cache2, serialized, isStringTag) {
-  registerStyles(cache2, serialized, isStringTag);
-  var className = cache2.key + "-" + serialized.name;
-  if (cache2.inserted[serialized.name] === void 0) {
-    var current = serialized;
-    do {
-      cache2.insert(serialized === current ? "." + className : "", current, cache2.sheet, true);
-      current = current.next;
-    } while (current !== void 0);
-  }
-};
+var b = u.bind({ g: 1 });
+var h = u.bind({ k: 1 });
 
-// ../../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, className) {
-  var registeredStyles = [];
-  var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
-  if (registeredStyles.length < 2) {
-    return className;
-  }
-  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) {
-    if (false) {
-      throw new Error("speedy must be changed before any rules are inserted");
-    }
-    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"
-});
-var flush = _createEmotion.flush;
-var hydrate = _createEmotion.hydrate;
-var cx = _createEmotion.cx;
-var merge2 = _createEmotion.merge;
-var getRegisteredStyles2 = _createEmotion.getRegisteredStyles;
-var injectGlobal = _createEmotion.injectGlobal;
-var keyframes = _createEmotion.keyframes;
-var css = _createEmotion.css;
-var sheet = _createEmotion.sheet;
-var cache = _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 = () => {
@@ -1902,8 +700,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);
@@ -1911,29 +709,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 = [];
@@ -1941,23 +739,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()
@@ -1966,38 +764,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);
   }
 }
@@ -2050,8 +848,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);
@@ -2068,8 +866,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);
@@ -2079,8 +877,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);
@@ -2095,8 +893,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);
@@ -2107,12 +905,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);
       }
@@ -2136,8 +934,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);
             }
@@ -2158,86 +956,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;
     });
   }
 }
@@ -2263,27 +1061,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;
             }
           },
@@ -2298,22 +1096,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) => {
@@ -2460,15 +1258,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;
   }
 });
 
@@ -2496,9 +1294,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;
   }, []);
 }
@@ -2843,14 +1641,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();
@@ -2858,8 +1656,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;
   }()
@@ -2867,24 +1665,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 = (
@@ -2892,8 +1690,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;
@@ -2916,23 +1714,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;
@@ -2955,8 +1753,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;
     }
@@ -2973,8 +1771,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;
     }
@@ -3085,21 +1883,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);
@@ -3108,41 +1906,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) {
@@ -3182,13 +1980,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;
@@ -3245,19 +2043,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");
   }
@@ -3281,8 +2079,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");
   }
@@ -3296,8 +2094,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) {
@@ -3308,8 +2106,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");
   }
@@ -3323,8 +2121,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");
   }
@@ -3380,11 +2178,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;
 };
@@ -3401,13 +2199,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":
@@ -3429,8 +2227,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];
@@ -3440,12 +2238,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":
@@ -3494,30 +2292,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) {
@@ -3593,8 +2391,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);
@@ -3692,8 +2490,8 @@ function isArray2(payload) {
   return getType2(payload) === "Array";
 }
 var isNullOrUndefined = isOneOf(isNull2, isUndefined2);
-function isOneOf(a, b, c, d, e) {
-  return (value) => a(value) || b(value) || !!c && c(value) || !!d && d(value) || !!e && e(value);
+function isOneOf(a2, b2, c2, d, e2) {
+  return (value) => a2(value) || b2(value) || !!c2 && c2(value) || !!d && d(value) || !!e2 && e2(value);
 }
 
 // ../../node_modules/.pnpm/copy-anything@3.0.2/node_modules/copy-anything/dist/index.es.js
@@ -3710,9 +2508,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;
@@ -3724,7 +2522,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;
   }, {});
@@ -3732,41 +2530,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 = (
@@ -3774,9 +2572,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 = [];
@@ -3798,7 +2596,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);
       }
@@ -3816,8 +2614,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));
@@ -3842,10 +2640,10 @@ var SuperJSON = (
     return SuperJSON2;
   }()
 );
-var serialize2 = SuperJSON.serialize;
+var serialize = SuperJSON.serialize;
 var deserialize = SuperJSON.deserialize;
-var stringify2 = SuperJSON.stringify;
-var parse2 = SuperJSON.parse;
+var stringify = SuperJSON.stringify;
+var parse = SuperJSON.parse;
 var registerClass = SuperJSON.registerClass;
 var registerCustom = SuperJSON.registerCustom;
 var registerSymbol = SuperJSON.registerSymbol;
@@ -3869,17 +2667,17 @@ function getQueryStatusColorByLabel(label) {
   return label === "fresh" ? "green" : label === "stale" ? "yellow" : label === "paused" ? "purple" : label === "inactive" ? "gray" : "blue";
 }
 var displayValue = (value, beautify = false) => {
-  const { json } = serialize2(value);
+  const { json } = 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,
@@ -4772,20 +3570,20 @@ function TanstackLogo() {
 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;
 }
 var Expander = (props) => {
   const styles = getStyles();
   return <span
-    class={cx(
+    class={clsx(
       styles.expander,
-      css`
+      u`
           transform: rotate(${props.expanded ? 90 : 0}deg);
         `
     )}
@@ -4809,7 +3607,7 @@ var CopyButton = (props) => {
     class={styles.copyButton}
     aria-label={`${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`}
     onClick={copyState() === "NoCopy" ? () => {
-      navigator.clipboard.writeText(stringify2(props.value)).then(
+      navigator.clipboard.writeText(stringify(props.value)).then(
         () => {
           setCopyState("SuccessCopy");
           setTimeout(() => {
@@ -4842,8 +3640,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") {
@@ -4853,8 +3651,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) {
@@ -4937,7 +3735,7 @@ function Explorer(props) {
 var getStyles = () => {
   const { colors, font, size, border } = tokens;
   return {
-    entry: css`
+    entry: u`
       & * {
         font-size: ${font.size.sm};
         font-family: 'Menlo', 'Fira Code', monospace;
@@ -4947,12 +3745,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]};
       }
@@ -4960,7 +3758,7 @@ var getStyles = () => {
       align-items: center;
       transition: all 0.1s ease;
     `,
-    expanderButton: css`
+    expanderButton: u`
       cursor: pointer;
       color: inherit;
       font: inherit;
@@ -4978,19 +3776,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;
@@ -5068,46 +3866,55 @@ 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 <div
-    class={css`
-        & .TSQD-panel-exit-active,
-        & .TSQD-panel-enter-active {
-          transition: opacity 0.3s, transform 0.3s;
-        }
+    class={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"
+    )}
   >
-    <TransitionGroup name="TSQD-panel"><Show when={isOpen()}><DevtoolsPanel
+    <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen()}><DevtoolsPanel
       localStore={localStore}
       setLocalStore={setLocalStore}
     /></Show></TransitionGroup>
-    <TransitionGroup name="TSQD-button"><Show when={!isOpen()}><div
-      class={cx(
+    <TransitionGroup name="tsqd-button-transition"><Show when={!isOpen()}><div
+      class={clsx(
         styles.devtoolsBtn,
         styles[`devtoolsBtn-position-${buttonPosition()}`]
       )}
@@ -5129,14 +3936,14 @@ var DevtoolsPanel = (props) => {
   );
   const [offline, setOffline] = createSignal(false);
   const [settingsOpen, setSettingsOpen] = createSignal(false);
-  const position2 = createMemo(
+  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) => {
@@ -5146,11 +3953,11 @@ var DevtoolsPanel = (props) => {
     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;
       }
     )
@@ -5168,8 +3975,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;
@@ -5180,7 +3987,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;
@@ -5241,49 +4048,65 @@ var DevtoolsPanel = (props) => {
     });
   });
   return <aside
-    class={`${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") ? `
+    class={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;
-          ` : ""}
-      `}`}
+          `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
+      },
+      "tsqd-main-panel"
+    )}
     style={{
-      height: position2() === "bottom" || position2() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto",
-      width: position2() === "right" || position2() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto"
+      height: position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto",
+      width: position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto"
     }}
     ref={panelRef}
     aria-label="Tanstack query devtools"
   >
     <div
-      class={cx(
+      class={clsx(
         styles.dragHandle,
-        styles[`dragHandle-position-${position2()}`]
+        styles[`dragHandle-position-${position()}`],
+        "tsqd-drag-handle"
       )}
       onMouseDown={handleDragStart}
     />
     <button
       aria-label="Close tanstack query devtools"
-      class={cx(styles.closeBtn, styles[`closeBtn-position-${position2()}`])}
+      class={clsx(
+        styles.closeBtn,
+        styles[`closeBtn-position-${position()}`],
+        "tsqd-minimize-btn"
+      )}
       onClick={() => props.setLocalStore("open", "false")}
     ><ChevronDown /></button>
     <div
       ref={queriesContainerRef}
-      class={`${styles.queriesContainer} ${css`
-          ${panelWidth() < secondBreakpoint && selectedQueryHash() ? `
-          height: 50%;
-          max-height: 50%;
-          ` : ""}
-        `}`}
+      class={clsx(
+        styles.queriesContainer,
+        panelWidth() < secondBreakpoint && selectedQueryHash() && u`
+              height: 50%;
+              max-height: 50%;
+            `,
+        "tsqd-queries-container"
+      )}
     >
-      <div class={cx(styles.row)}>
+      <div class={clsx(styles.row, "tsqd-header")}>
         <button
-          class={styles.logo}
+          class={clsx(styles.logo, "tsqd-text-logo-container")}
           onClick={() => props.setLocalStore("open", "false")}
           aria-label="Close Tanstack query devtools"
         >
-          <span class={styles.tanstackLogo}>TANSTACK</span>
-          <span class={styles.queryFlavorLogo}>
+          <span class={clsx(styles.tanstackLogo, "tsqd-text-logo-tanstack")}>TANSTACK</span>
+          <span
+            class={clsx(styles.queryFlavorLogo, "tsqd-text-logo-query-flavor")}
+          >
             {useQueryDevtoolsContext().queryFlavor}
             {" v"}
             {useQueryDevtoolsContext().version}
@@ -5292,28 +4115,40 @@ var DevtoolsPanel = (props) => {
         <QueryStatusCount />
       </div>
       <div
-        class={cx(
+        class={clsx(
           styles.row,
-          css`
+          u`
               gap: ${tokens.size[2.5]};
-            `
+            `,
+          "tsqd-filters-actions-container"
         )}
       >
-        <div class={styles.filtersContainer}>
-          <div class={styles.filterInput}>
+        <div class={clsx(styles.filtersContainer, "tsqd-filters-container")}>
+          <div
+            class={clsx(
+              styles.filterInput,
+              "tsqd-query-filter-textfield-container"
+            )}
+          >
             <Search />
             <input
               aria-label="Filter queries by query key"
               type="text"
               placeholder="Filter"
-              onInput={(e) => props.setLocalStore("filter", e.currentTarget.value)}
+              onInput={(e2) => props.setLocalStore("filter", e2.currentTarget.value)}
+              class="tsqd-query-filter-textfield"
               value={props.localStore.filter || ""}
             />
           </div>
-          <div class={styles.filterSelect}>
+          <div
+            class={clsx(
+              styles.filterSelect,
+              "tsqd-query-filter-sort-container"
+            )}
+          >
             <select
               value={sort()}
-              onChange={(e) => props.setLocalStore("sort", e.currentTarget.value)}
+              onChange={(e2) => props.setLocalStore("sort", e2.currentTarget.value)}
             >{Object.keys(sortFns).map((key) => <option value={key}>
               {"Sort by "}
               {key}
@@ -5326,6 +4161,7 @@ var DevtoolsPanel = (props) => {
             }}
             aria-label={`Sort order ${sortOrder() === -1 ? "descending" : "ascending"}`}
             aria-pressed={sortOrder() === -1}
+            class="tsqd-query-filter-sort-order-btn"
           >
             <Show when={sortOrder() === 1}>
               <span>Asc</span>
@@ -5337,7 +4173,7 @@ var DevtoolsPanel = (props) => {
             </Show>
           </button>
         </div>
-        <div class={styles.actionsContainer}>
+        <div class={clsx(styles.actionsContainer, "tsqd-actions-container")}>
           <button
             onClick={() => {
               if (offline()) {
@@ -5348,33 +4184,52 @@ var DevtoolsPanel = (props) => {
                 setOffline(true);
               }
             }}
-            class={styles.actionsBtn}
+            class={clsx(
+              styles.actionsBtn,
+              "tsqd-actions-btn",
+              "tsqd-action-mock-offline-behavior"
+            )}
             aria-label={`${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`}
             aria-pressed={offline()}
           >{offline() ? <Offline /> : <Wifi />}</button>
           <div style={{ position: "relative" }}>
             <button
-              onClick={() => setSettingsOpen((prev2) => !prev2)}
-              class={styles.actionsBtn}
-              id="TSQD-settings-menu-btn"
+              onClick={() => setSettingsOpen((prev) => !prev)}
+              class={clsx(
+                styles.actionsBtn,
+                "tsqd-actions-btn",
+                "tsqd-action-settings"
+              )}
+              id="tsqd-settings-menu-btn"
               aria-label={`${settingsOpen() ? "Close" : "Open"} settings menu`}
               aria-haspopup="true"
-              aria-controls="TSQD-settings-menu"
+              aria-controls="tsqd-settings-menu"
             ><Settings /></button>
             <Show when={settingsOpen()}><div
               role="menu"
               tabindex="-1"
-              aria-labelledby="TSQD-settings-menu-btn"
-              id="TSQD-settings-menu"
-              class={styles.settingsMenu}
+              aria-labelledby="tsqd-settings-menu-btn"
+              id="tsqd-settings-menu"
+              class={clsx(styles.settingsMenu, "tsqd-settings-menu")}
             >
-              <div class={styles.settingsMenuHeader}>Position</div>
-              <div class={styles.settingsMenuSection}>
+              <div
+                class={clsx(
+                  styles.settingsMenuHeader,
+                  "tsqd-settings-menu-header"
+                )}
+              >Position</div>
+              <div
+                class={clsx(
+                  styles.settingsMenuSection,
+                  "tsqd-settings-menu-section"
+                )}
+              >
                 <button
                   onClick={() => {
                     setDevtoolsPosition("top");
                   }}
                   aria-label="Position top"
+                  class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-top"
                 >
                   <ArrowUp />
                   <span>Top</span>
@@ -5384,6 +4239,7 @@ var DevtoolsPanel = (props) => {
                     setDevtoolsPosition("bottom");
                   }}
                   aria-label="Position bottom"
+                  class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-bottom"
                 >
                   <ArrowDown />
                   <span>Bottom</span>
@@ -5393,6 +4249,7 @@ var DevtoolsPanel = (props) => {
                     setDevtoolsPosition("left");
                   }}
                   aria-label="Position left"
+                  class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-left"
                 >
                   <ArrowDown />
                   <span>Left</span>
@@ -5402,6 +4259,7 @@ var DevtoolsPanel = (props) => {
                     setDevtoolsPosition("right");
                   }}
                   aria-label="Position right"
+                  class="tsqd-settings-menu-position-btn tsqd-settings-menu-position-btn-right"
                 >
                   <ArrowDown />
                   <span>Right</span>
@@ -5411,7 +4269,12 @@ var DevtoolsPanel = (props) => {
           </div>
         </div>
       </div>
-      <div class={styles.overflowQueryContainer}><div><Key by={(q) => q.queryHash} each={queries()}>{(query) => <QueryRow query={query()} />}</Key></div></div>
+      <div
+        class={clsx(
+          styles.overflowQueryContainer,
+          "tsqd-queries-overflow-container"
+        )}
+      ><div class="tsqd-queries-container"><Key by={(q) => q.queryHash} each={queries()}>{(query) => <QueryRow query={query()} />}</Key></div></div>
     </div>
     <Show when={selectedQueryHash()}><QueryDetails /></Show>
   </aside>;
@@ -5449,26 +4312,27 @@ var QueryRow = (props) => {
     onClick={() => setSelectedQueryHash(
       props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash
     )}
-    class={cx(
+    class={clsx(
       styles.queryRow,
-      selectedQueryHash() === props.query.queryHash && styles.selectedQueryRow
+      selectedQueryHash() === props.query.queryHash && styles.selectedQueryRow,
+      "tsqd-query-row"
     )}
     aria-label={`Query key ${props.query.queryHash}`}
   >
     <div
-      class={cx(
-        "TSQDObserverCount",
-        color() === "gray" ? css`
+      class={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"
       )}
     >{observers()}</div>
-    <code class="TSQDQueryHash">{props.query.queryHash}</code>
-    <Show when={isDisabled()}><div class="TSQDQueryDisabled">disabled</div></Show>
+    <code class="tsqd-query-hash">{props.query.queryHash}</code>
+    <Show when={isDisabled()}><div class="tsqd-query-disabled-indicator">disabled</div></Show>
   </button></Show>;
 };
 var QueryStatusCount = () => {
@@ -5488,7 +4352,7 @@ var QueryStatusCount = () => {
     (queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length
   );
   const styles = getStyles2();
-  return <div class={styles.queryStatusContainer}>
+  return <div class={clsx(styles.queryStatusContainer, "tsqd-query-status-container")}>
     <QueryStatus label="Fresh" color="green" count={fresh()} />
     <QueryStatus label="Fetching" color="blue" count={fetching()} />
     <QueryStatus label="Paused" color="purple" count={paused()} />
@@ -5522,42 +4386,48 @@ var QueryStatus = (props) => {
     }}
     disabled={showLabel()}
     ref={tagRef}
-    class={cx(
+    class={clsx(
       styles.queryStatusTag,
-      !showLabel() ? css`
-              cursor: pointer;
-              &:hover {
-                background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
-              }
-            ` : null
+      !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"
     } : {}}
   >
     <Show when={!showLabel() && (mouseOver() || focused())}><div
       role="tooltip"
-      id="TSQD-status-tooltip"
-      class={cx(styles.statusTooltip)}
+      id="tsqd-status-tooltip"
+      class={clsx(styles.statusTooltip, "tsqd-query-status-tooltip")}
     >{props.label}</div></Show>
     <span
-      class={css`
-          width: ${tokens.size[2]};
-          height: ${tokens.size[2]};
-          border-radius: ${tokens.border.radius.full};
-          background-color: ${tokens.colors[props.color][500]};
-        `}
+      class={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"
+      )}
     />
-    <Show when={showLabel()}><span>{props.label}</span></Show>
+    <Show when={showLabel()}><span class="tsqd-query-status-tag-label">{props.label}</span></Show>
     <span
-      class={cx(
+      class={clsx(
         styles.queryStatusCount,
-        props.count > 0 && props.color !== "gray" ? css`
+        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"
       )}
     >{props.count}</span>
   </button>;
@@ -5634,19 +4504,21 @@ var QueryDetails = () => {
       setRestoringLoading(false);
     }
   });
-  return <Show when={activeQuery() && activeQueryState()}><div class={styles.detailsContainer}>
-    <div class={styles.detailsHeader}>Query Details</div>
-    <div class={styles.detailsBody}>
-      <div>
+  return <Show when={activeQuery() && activeQueryState()}><div class={clsx(styles.detailsContainer, "tsqd-query-details-container")}>
+    <div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Query Details</div>
+    <div
+      class={clsx(styles.detailsBody, "tsqd-query-details-summary-container")}
+    >
+      <div class="tsqd-query-details-summary">
         <pre><code>{displayValue(activeQuery().queryKey, true)}</code></pre>
         <span
-          class={cx(
+          class={clsx(
             styles.queryDetailsStatus,
-            color() === "gray" ? css`
+            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]};
@@ -5654,63 +4526,81 @@ var QueryDetails = () => {
           )}
         >{statusLabel()}</span>
       </div>
-      <div>
+      <div class="tsqd-query-details-observers-count">
         <span>Observers:</span>
         <span>{observerCount()}</span>
       </div>
-      <div>
+      <div class="tsqd-query-details-last-updated">
         <span>Last Updated:</span>
         <span>{new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString()}</span>
       </div>
     </div>
-    <div class={styles.detailsHeader}>Actions</div>
-    <div class={styles.actionsBody}>
+    <div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Actions</div>
+    <div
+      class={clsx(styles.actionsBody, "tsqd-query-details-actions-container")}
+    >
       <button
-        class={css`
-              color: ${tokens.colors.blue[400]};
-            `}
+        class={clsx(
+          u`
+                color: ${tokens.colors.blue[400]};
+              `,
+          "tsqd-query-details-actions-btn",
+          "tsqd-query-details-action-refetch"
+        )}
         onClick={handleRefetch}
         disabled={statusLabel() === "fetching"}
       >
         <span
-          class={css`
+          class={u`
                 background-color: ${tokens.colors.blue[400]};
               `}
         />
         {"Refetch"}
       </button>
       <button
-        class={css`
-              color: ${tokens.colors.yellow[400]};
-            `}
+        class={clsx(
+          u`
+                color: ${tokens.colors.yellow[400]};
+              `,
+          "tsqd-query-details-actions-btn",
+          "tsqd-query-details-action-invalidate"
+        )}
         onClick={() => queryClient.invalidateQueries(activeQuery())}
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={css`
+          class={u`
                 background-color: ${tokens.colors.yellow[400]};
               `}
         />
         {"Invalidate"}
       </button>
       <button
-        class={css`
-              color: ${tokens.colors.gray[300]};
-            `}
+        class={clsx(
+          u`
+                color: ${tokens.colors.gray[300]};
+              `,
+          "tsqd-query-details-actions-btn",
+          "tsqd-query-details-action-reset"
+        )}
         onClick={() => queryClient.resetQueries(activeQuery())}
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={css`
+          class={u`
                 background-color: ${tokens.colors.gray[400]};
               `}
         />
         {"Reset"}
       </button>
       <button
-        class={css`
-              color: ${tokens.colors.cyan[400]};
-            `}
+        class={clsx(
+          u`
+                color: ${tokens.colors.cyan[400]};
+              `,
+          "tsqd-query-details-actions-btn",
+          "tsqd-query-details-action-loading"
+        )}
         disabled={restoringLoading()}
         onClick={() => {
           if (activeQuery()?.state.data === void 0) {
@@ -5742,7 +4632,7 @@ var QueryDetails = () => {
         }}
       >
         <span
-          class={css`
+          class={u`
                 background-color: ${tokens.colors.cyan[400]};
               `}
         />
@@ -5750,9 +4640,13 @@ var QueryDetails = () => {
         {" Loading"}
       </button>
       <Show when={errorTypes().length === 0 || queryStatus() === "error"}><button
-        class={css`
-                color: ${tokens.colors.red[400]};
-              `}
+        class={clsx(
+          u`
+                  color: ${tokens.colors.red[400]};
+                `,
+          "tsqd-query-details-actions-btn",
+          "tsqd-query-details-action-error"
+        )}
         onClick={() => {
           if (!activeQuery().state.error) {
             triggerError();
@@ -5763,7 +4657,7 @@ var QueryDetails = () => {
         disabled={queryStatus() === "pending"}
       >
         <span
-          class={css`
+          class={u`
                   background-color: ${tokens.colors.red[400]};
                 `}
         />
@@ -5772,18 +4666,24 @@ var QueryDetails = () => {
       </button></Show>
       <Show
         when={!(errorTypes().length === 0 || queryStatus() === "error")}
-      ><div class={styles.actionsSelect}>
+      ><div
+        class={clsx(
+          styles.actionsSelect,
+          "tsqd-query-details-actions-btn",
+          "tsqd-query-details-action-error-multiple"
+        )}
+      >
         <span
-          class={css`
+          class={u`
                   background-color: ${tokens.colors.red[400]};
                 `}
         />
         {"Trigger Error"}
         <select
           disabled={queryStatus() === "pending"}
-          onChange={(e) => {
+          onChange={(e2) => {
             const errorType = errorTypes().find(
-              (t) => t.name === e.currentTarget.value
+              (t2) => t2.name === e2.currentTarget.value
             );
             triggerError(errorType);
           }}
@@ -5794,22 +4694,24 @@ var QueryDetails = () => {
         <ChevronDown />
       </div></Show>
     </div>
-    <div class={styles.detailsHeader}>Data Explorer</div>
+    <div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Data Explorer</div>
     <div
       style={{
         padding: "0.5rem"
       }}
+      class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"
     ><Explorer
       label="Data"
       defaultExpanded={["Data"]}
       value={activeQueryStateData()}
       copyable={true}
     /></div>
-    <div class={styles.detailsHeader}>Query Explorer</div>
+    <div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Query Explorer</div>
     <div
       style={{
         padding: "0.5rem"
       }}
+      class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
     ><Explorer
       label="Query"
       defaultExpanded={["Query", "queryKey"]}
@@ -5857,10 +4759,11 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
 var getStyles2 = () => {
   const { colors, font, size, alpha, shadow, border } = tokens;
   return {
-    devtoolsBtn: css`
+    devtoolsBtn: u`
       z-index: 100000;
       position: fixed;
       padding: 4px;
+      text-align: left;
 
       display: flex;
       align-items: center;
@@ -5910,7 +4813,7 @@ var getStyles2 = () => {
         }
       }
     `,
-    panel: css`
+    panel: u`
       position: fixed;
       z-index: 9999;
       display: flex;
@@ -5922,23 +4825,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;
@@ -5946,7 +4849,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;
@@ -5954,21 +4857,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;
@@ -5983,7 +4886,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%);
@@ -6008,7 +4911,7 @@ var getStyles2 = () => {
         transform: rotate(180deg);
       }
     `,
-    "closeBtn-position-bottom": css`
+    "closeBtn-position-bottom": u`
       top: 0;
       right: ${size[3]};
       transform: translate(0, -100%);
@@ -6029,7 +4932,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);
@@ -6053,7 +4956,7 @@ var getStyles2 = () => {
         transform: rotate(-90deg);
       }
     `,
-    "closeBtn-position-left": css`
+    "closeBtn-position-left": u`
       bottom: ${size[3]};
       right: 0;
       transform: translate(100%, 0);
@@ -6077,13 +4980,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 {
@@ -6091,31 +4994,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]};
@@ -6130,7 +5033,7 @@ var getStyles2 = () => {
         flex-direction: column;
       }
     `,
-    logo: css`
+    logo: u`
       cursor: pointer;
       &:hover {
         opacity: 0.7;
@@ -6141,27 +5044,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]};
@@ -6183,7 +5087,7 @@ var getStyles2 = () => {
         color: ${colors.gray[300]}${alpha[80]};
       }
     `,
-    statusTooltip: css`
+    statusTooltip: u`
       position: absolute;
       z-index: 1;
       background-color: ${colors.darkGray[500]};
@@ -6222,10 +5126,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;
@@ -6235,7 +5139,7 @@ var getStyles2 = () => {
       border-radius: 3px;
       font-variant-numeric: tabular-nums;
     `,
-    filtersContainer: css`
+    filtersContainer: u`
       display: flex;
       gap: ${tokens.size[2.5]};
       & > button {
@@ -6258,7 +5162,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]};
@@ -6296,7 +5200,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]};
@@ -6328,15 +5232,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;
@@ -6358,7 +5262,7 @@ var getStyles2 = () => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    overflowQueryContainer: css`
+    overflowQueryContainer: u`
       flex: 1;
       overflow-y: auto;
       & > div {
@@ -6366,27 +5270,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;
@@ -6394,7 +5301,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;
@@ -6402,16 +5309,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]};
@@ -6421,15 +5327,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;
@@ -6437,8 +5344,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;
@@ -6459,19 +5367,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;
@@ -6510,7 +5418,7 @@ var getStyles2 = () => {
         }
       }
     `,
-    actionsSelect: css`
+    actionsSelect: u`
       font-size: ${font.size.sm};
       padding: ${tokens.size[2]} ${tokens.size[2]};
       display: flex;
@@ -6552,10 +5460,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};
@@ -6567,12 +5475,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;