@tanstack/query-devtools 5.0.0-rc.1 → 5.0.0-rc.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.cjs CHANGED
@@ -11354,10 +11354,11 @@ function getQueryStatusColor({
11354
11354
  function getQueryStatusColorByLabel(label) {
11355
11355
  return label === "fresh" ? "green" : label === "stale" ? "yellow" : label === "paused" ? "purple" : label === "inactive" ? "gray" : "blue";
11356
11356
  }
11357
- var displayValue, getStatusRank, queryHashSort, dateSort, statusAndDateSort, sortFns, convertRemToPixels;
11357
+ var displayValue, getStatusRank, queryHashSort, dateSort, statusAndDateSort, sortFns, convertRemToPixels, getPreferredColorScheme, updateNestedDataByPath, deleteNestedDataByPath;
11358
11358
  var init_utils = __esm({
11359
11359
  "src/utils.tsx"() {
11360
11360
  init_esm2();
11361
+ init_solid();
11361
11362
  displayValue = (value, beautify = false) => {
11362
11363
  const {
11363
11364
  json
@@ -11381,6 +11382,99 @@ var init_utils = __esm({
11381
11382
  convertRemToPixels = (rem) => {
11382
11383
  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
11383
11384
  };
11385
+ getPreferredColorScheme = () => {
11386
+ const [colorScheme, setColorScheme] = createSignal("dark");
11387
+ onMount(() => {
11388
+ const query = window.matchMedia("(prefers-color-scheme: dark)");
11389
+ setColorScheme(query.matches ? "dark" : "light");
11390
+ const listener = (e2) => {
11391
+ setColorScheme(e2.matches ? "dark" : "light");
11392
+ };
11393
+ query.addEventListener("change", listener);
11394
+ onCleanup(() => query.removeEventListener("change", listener));
11395
+ });
11396
+ return colorScheme;
11397
+ };
11398
+ updateNestedDataByPath = (oldData, updatePath2, value) => {
11399
+ if (updatePath2.length === 0) {
11400
+ return value;
11401
+ }
11402
+ if (oldData instanceof Map) {
11403
+ const newData = new Map(oldData);
11404
+ if (updatePath2.length === 1) {
11405
+ newData.set(updatePath2[0], value);
11406
+ return newData;
11407
+ }
11408
+ const [head, ...tail] = updatePath2;
11409
+ newData.set(head, updateNestedDataByPath(newData.get(head), tail, value));
11410
+ return newData;
11411
+ }
11412
+ if (oldData instanceof Set) {
11413
+ const setAsArray = updateNestedDataByPath(Array.from(oldData), updatePath2, value);
11414
+ return new Set(setAsArray);
11415
+ }
11416
+ if (Array.isArray(oldData)) {
11417
+ const newData = [...oldData];
11418
+ if (updatePath2.length === 1) {
11419
+ newData[updatePath2[0]] = value;
11420
+ return newData;
11421
+ }
11422
+ const [head, ...tail] = updatePath2;
11423
+ newData[head] = updateNestedDataByPath(newData[head], tail, value);
11424
+ return newData;
11425
+ }
11426
+ if (oldData instanceof Object) {
11427
+ const newData = {
11428
+ ...oldData
11429
+ };
11430
+ if (updatePath2.length === 1) {
11431
+ newData[updatePath2[0]] = value;
11432
+ return newData;
11433
+ }
11434
+ const [head, ...tail] = updatePath2;
11435
+ newData[head] = updateNestedDataByPath(newData[head], tail, value);
11436
+ return newData;
11437
+ }
11438
+ return oldData;
11439
+ };
11440
+ deleteNestedDataByPath = (oldData, deletePath) => {
11441
+ if (oldData instanceof Map) {
11442
+ const newData = new Map(oldData);
11443
+ if (deletePath.length === 1) {
11444
+ newData.delete(deletePath[0]);
11445
+ return newData;
11446
+ }
11447
+ const [head, ...tail] = deletePath;
11448
+ newData.set(head, deleteNestedDataByPath(newData.get(head), tail));
11449
+ return newData;
11450
+ }
11451
+ if (oldData instanceof Set) {
11452
+ const setAsArray = deleteNestedDataByPath(Array.from(oldData), deletePath);
11453
+ return new Set(setAsArray);
11454
+ }
11455
+ if (Array.isArray(oldData)) {
11456
+ const newData = [...oldData];
11457
+ if (deletePath.length === 1) {
11458
+ return newData.filter((_, idx) => idx.toString() !== deletePath[0]);
11459
+ }
11460
+ const [head, ...tail] = deletePath;
11461
+ newData[head] = deleteNestedDataByPath(newData[head], tail);
11462
+ return newData;
11463
+ }
11464
+ if (oldData instanceof Object) {
11465
+ const newData = {
11466
+ ...oldData
11467
+ };
11468
+ if (deletePath.length === 1) {
11469
+ delete newData[deletePath[0]];
11470
+ return newData;
11471
+ }
11472
+ const [head, ...tail] = deletePath;
11473
+ newData[head] = deleteNestedDataByPath(newData[head], tail);
11474
+ return newData;
11475
+ }
11476
+ return oldData;
11477
+ };
11384
11478
  }
11385
11479
  });
11386
11480
 
@@ -11414,58 +11508,112 @@ function ArrowRight() {
11414
11508
  return _el$7;
11415
11509
  })();
11416
11510
  }
11417
- function Wifi() {
11511
+ function Sun() {
11418
11512
  return _tmpl$6();
11419
11513
  }
11420
- function Offline() {
11421
- return (() => {
11422
- const _el$9 = _tmpl$7();
11423
- createRenderEffect((_p$) => {
11424
- const _v$ = tokens.colors.yellow[500], _v$2 = tokens.colors.yellow[500];
11425
- _v$ !== _p$._v$ && setAttribute(_el$9, "stroke", _p$._v$ = _v$);
11426
- _v$2 !== _p$._v$2 && setAttribute(_el$9, "fill", _p$._v$2 = _v$2);
11427
- return _p$;
11428
- }, {
11429
- _v$: void 0,
11430
- _v$2: void 0
11431
- });
11432
- return _el$9;
11433
- })();
11514
+ function Moon() {
11515
+ return _tmpl$7();
11434
11516
  }
11435
- function Settings() {
11517
+ function Monitor() {
11436
11518
  return _tmpl$8();
11437
11519
  }
11438
- function Copier() {
11520
+ function Wifi() {
11439
11521
  return _tmpl$9();
11440
11522
  }
11441
- function CopiedCopier() {
11523
+ function Offline() {
11442
11524
  return _tmpl$10();
11443
11525
  }
11444
- function ErrorCopier() {
11526
+ function Settings() {
11445
11527
  return _tmpl$11();
11446
11528
  }
11447
- function TanstackLogo() {
11529
+ function Copier() {
11448
11530
  return _tmpl$12();
11449
11531
  }
11450
- var _tmpl$, _tmpl$2, _tmpl$3, _tmpl$4, _tmpl$5, _tmpl$6, _tmpl$7, _tmpl$8, _tmpl$9, _tmpl$10, _tmpl$11, _tmpl$12;
11532
+ function CopiedCopier(props) {
11533
+ return (() => {
11534
+ const _el$15 = _tmpl$13(), _el$16 = _el$15.firstChild;
11535
+ createRenderEffect(() => setAttribute(_el$16, "stroke", props.theme === "dark" ? "#12B76A" : "#027A48"));
11536
+ return _el$15;
11537
+ })();
11538
+ }
11539
+ function ErrorCopier() {
11540
+ return _tmpl$14();
11541
+ }
11542
+ function List() {
11543
+ return _tmpl$15();
11544
+ }
11545
+ function Check(props) {
11546
+ return [createComponent(Show, {
11547
+ get when() {
11548
+ return props.checked;
11549
+ },
11550
+ get children() {
11551
+ const _el$19 = _tmpl$13(), _el$20 = _el$19.firstChild;
11552
+ createRenderEffect(() => setAttribute(_el$20, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
11553
+ return _el$19;
11554
+ }
11555
+ }), createComponent(Show, {
11556
+ get when() {
11557
+ return !props.checked;
11558
+ },
11559
+ get children() {
11560
+ const _el$21 = _tmpl$16(), _el$22 = _el$21.firstChild;
11561
+ createRenderEffect(() => setAttribute(_el$22, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
11562
+ return _el$21;
11563
+ }
11564
+ })];
11565
+ }
11566
+ function TanstackLogo() {
11567
+ return _tmpl$17();
11568
+ }
11569
+ var _tmpl$, _tmpl$2, _tmpl$3, _tmpl$4, _tmpl$5, _tmpl$6, _tmpl$7, _tmpl$8, _tmpl$9, _tmpl$10, _tmpl$11, _tmpl$12, _tmpl$13, _tmpl$14, _tmpl$15, _tmpl$16, _tmpl$17;
11451
11570
  var init_icons = __esm({
11452
11571
  "src/icons/index.tsx"() {
11453
11572
  init_web();
11454
11573
  init_web();
11455
11574
  init_web();
11456
- init_theme();
11457
- _tmpl$ = /* @__PURE__ */ template(`<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 13L9.00007 9M10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
11458
- _tmpl$2 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5" stroke="#d0d5dd" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
11459
- _tmpl$3 = /* @__PURE__ */ template(`<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
11460
- _tmpl$4 = /* @__PURE__ */ template(`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 13.3333V2.66667M8 2.66667L4 6.66667M8 2.66667L12 6.66667" stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
11461
- _tmpl$5 = /* @__PURE__ */ template(`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333" stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
11462
- _tmpl$6 = /* @__PURE__ */ template(`<svg stroke="#d0d5dd" fill="#d0d5dd" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.237 4.237 0 00-6 0zm-4-4l2 2a7.074 7.074 0 0110 0l2-2C15.14 9.14 8.87 9.14 5 13z">`);
11463
- _tmpl$7 = /* @__PURE__ */ template(`<svg stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z"></path><path d="M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4a9.793 9.793 0 00-4.49-2.56l3.53 3.53.96-.97zM2 3.05L5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24A9.684 9.684 0 005 13v.01L6.99 15a7.042 7.042 0 014.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3a4.237 4.237 0 00-6 0z">`);
11464
- _tmpl$8 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.3951 19.3711L9.97955 20.6856C10.1533 21.0768 10.4368 21.4093 10.7958 21.6426C11.1547 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8488 21.8759 13.2078 21.6426C13.5667 21.4093 13.8503 21.0768 14.024 20.6856L14.6084 19.3711C14.8165 18.9047 15.1664 18.5159 15.6084 18.26C16.0532 18.0034 16.5678 17.8941 17.0784 17.9478L18.5084 18.1C18.9341 18.145 19.3637 18.0656 19.7451 17.8713C20.1265 17.6771 20.4434 17.3763 20.6573 17.0056C20.8715 16.635 20.9735 16.2103 20.9511 15.7829C20.9286 15.3555 20.7825 14.9438 20.5307 14.5978L19.684 13.4344C19.3825 13.0171 19.2214 12.5148 19.224 12C19.2239 11.4866 19.3865 10.9864 19.6884 10.5711L20.5351 9.40778C20.787 9.06175 20.933 8.65007 20.9555 8.22267C20.978 7.79528 20.8759 7.37054 20.6618 7C20.4479 6.62923 20.131 6.32849 19.7496 6.13423C19.3681 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5722 6.11141 16.0577 6.00212 15.6129 5.74556C15.17 5.48825 14.82 5.09736 14.6129 4.62889L14.024 3.31444C13.8503 2.92317 13.5667 2.59072 13.2078 2.3574C12.8488 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1547 2.12408 10.7958 2.3574C10.4368 2.59072 10.1533 2.92317 9.97955 3.31444L9.3951 4.62889C9.18803 5.09736 8.83798 5.48825 8.3951 5.74556C7.95032 6.00212 7.43577 6.11141 6.9251 6.05778L5.49066 5.90556C5.06499 5.86053 4.6354 5.93997 4.25397 6.13423C3.87255 6.32849 3.55567 6.62923 3.34177 7C3.12759 7.37054 3.02555 7.79528 3.04804 8.22267C3.07052 8.65007 3.21656 9.06175 3.46844 9.40778L4.3151 10.5711C4.61704 10.9864 4.77964 11.4866 4.77955 12C4.77964 12.5134 4.61704 13.0137 4.3151 13.4289L3.46844 14.5922C3.21656 14.9382 3.07052 15.3499 3.04804 15.7773C3.02555 16.2047 3.12759 16.6295 3.34177 17C3.55589 17.3706 3.8728 17.6712 4.25417 17.8654C4.63554 18.0596 5.06502 18.1392 5.49066 18.0944L6.92066 17.9422C7.43133 17.8886 7.94587 17.9979 8.39066 18.2544C8.83519 18.511 9.18687 18.902 9.3951 19.3711Z" stroke="#d0d5dd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15C13.6568 15 15 13.6569 15 12C15 10.3431 13.6568 9 12 9C10.3431 9 8.99998 10.3431 8.99998 12C8.99998 13.6569 10.3431 15 12 15Z" stroke="#d0d5dd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11465
- _tmpl$9 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="copier" d="M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="#98A2B3">`);
11466
- _tmpl$10 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke="#12B76A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11467
- _tmpl$11 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke="#F04438" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11468
- _tmpl$12 = /* @__PURE__ */ template(`<svg version="1.0" viewBox="0 0 633 633"><linearGradient id="a" x1="-666.45" x2="-666.45" y1="163.28" y2="163.99" gradientTransform="matrix(633 0 0 633 422177 -103358)" gradientUnits="userSpaceOnUse"><stop stop-color="#6BDAFF" offset="0"></stop><stop stop-color="#F9FFB5" offset=".32"></stop><stop stop-color="#FFA770" offset=".71"></stop><stop stop-color="#FF7373" offset="1"></stop></linearGradient><circle cx="316.5" cy="316.5" r="316.5" fill="url(#a)"></circle><defs><filter id="am" x="-137.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="b" x="-137.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#am)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#b)"><ellipse cx="89.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ah" x="316.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="k" x="316.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ah)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#k)"><ellipse cx="543.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ae" x="-137.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="j" x="-137.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ae)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#j)"><ellipse cx="89.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="ai" x="316.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="i" x="316.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ai)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#i)"><ellipse cx="543.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="aj" x="-137.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="h" x="-137.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#aj)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#h)"><ellipse cx="89.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="ag" x="316.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="g" x="316.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ag)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#g)"><ellipse cx="543.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="af" x="272.2" y="308" width="176.9" height="129.3" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="f" x="272.2" y="308" width="176.9" height="129.3" maskUnits="userSpaceOnUse"><g filter="url(#af)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#f)"><line x1="436" x2="431" y1="403.2" y2="431.8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="291" x2="280" y1="341.5" y2="403.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="332.9" x2="328.6" y1="384.1" y2="411.2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><linearGradient id="m" x1="-670.75" x2="-671.59" y1="164.4" y2="164.49" gradientTransform="matrix(-184.16 -32.472 -11.461 64.997 -121359 -32126)" gradientUnits="userSpaceOnUse"><stop stop-color="#EE2700" offset="0"></stop><stop stop-color="#FF008E" offset="1"></stop></linearGradient><path d="m344.1 363 97.7 17.2c5.8 2.1 8.2 6.1 7.1 12.1s-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1 0.8-12.8s8.3-4.4 13.7-2.1l55.2 53.6z" clip-rule="evenodd" fill="url(#m)" fill-rule="evenodd"></path><line x1="428.2" x2="429.1" y1="384.5" y2="378" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="395.2" x2="396.1" y1="379.5" y2="373" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="362.2" x2="363.1" y1="373.5" y2="367.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="324.2" x2="328.4" y1="351.3" y2="347.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="303.2" x2="307.4" y1="331.3" y2="327.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line></g><defs><filter id="ak" x="73.2" y="113.8" width="280.6" height="317.4" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="e" x="73.2" y="113.8" width="280.6" height="317.4" maskUnits="userSpaceOnUse"><g filter="url(#ak)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#e)"><linearGradient id="n" x1="-672.16" x2="-672.16" y1="165.03" y2="166.03" gradientTransform="matrix(-100.18 48.861 97.976 200.88 -83342 -93.059)" gradientUnits="userSpaceOnUse"><stop stop-color="#A17500" offset="0"></stop><stop stop-color="#5D2100" offset="1"></stop></linearGradient><path d="m192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.1-3 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6s-10.8-51.9-22.1-99.6l-25.3 4.6" clip-rule="evenodd" fill="url(#n)" fill-rule="evenodd"></path><g stroke="#2F8A00"><linearGradient id="r" x1="-660.23" x2="-660.23" y1="166.72" y2="167.72" gradientTransform="matrix(92.683 4.8573 -2.0259 38.657 61680 -3088.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z" clip-rule="evenodd" fill="url(#r)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="s" x1="-661.36" x2="-661.36" y1="164.18" y2="165.18" gradientTransform="matrix(110 5.7648 -6.3599 121.35 73933 -15933)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.4 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20.2 49.6-53.2 49.6-53.2z" clip-rule="evenodd" fill="url(#s)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="q" x1="-656.79" x2="-656.79" y1="165.15" y2="166.15" gradientTransform="matrix(62.954 3.2993 -3.5023 66.828 42156 -8754.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9c-0.8-21.9 6-38 20.6-48.2s29.8-15.4 45.5-15.3c-6.1 21.4-14.5 35.8-25.2 43.4s-24.4 14.2-40.9 20.1z" clip-rule="evenodd" fill="url(#q)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="p" x1="-663.07" x2="-663.07" y1="165.44" y2="166.44" gradientTransform="matrix(152.47 7.9907 -3.0936 59.029 101884 -4318.7)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c31.9-30 64.1-39.7 96.7-29s50.8 30.4 54.6 59.1c-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z" clip-rule="evenodd" fill="url(#p)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="o" x1="-662.57" x2="-662.57" y1="164.44" y2="165.44" gradientTransform="matrix(136.46 7.1517 -5.2163 99.533 91536 -11442)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c35.8-7.6 65.6-0.2 89.2 22s37.7 49 42.3 80.3c-39.8-9.7-68.3-23.8-85.5-42.4s-32.5-38.5-46-59.9z" clip-rule="evenodd" fill="url(#o)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="l" x1="-656.43" x2="-656.43" y1="163.86" y2="164.86" gradientTransform="matrix(60.866 3.1899 -8.7773 167.48 41560 -25168)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6s-3.6 63.1 8.7 99.6c27.4-40.3 43.2-69.6 47.4-88s5.6-44.1 4-77.2z" clip-rule="evenodd" fill="url(#l)" fill-rule="evenodd" stroke-width="13"></path><path d="m196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4s-9.5 33-11.1 45.1" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m194.9 185.7c-24.4 1.7-43.8 9-58.1 21.8s-24.7 25.4-31.3 37.8" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m204.5 176.4c29.7-6.7 52-8.4 67-5.1s26.9 8.6 35.8 15.9" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m196.5 181.4c20.3 9.9 38.2 20.5 53.9 31.9s27.4 22.1 35.1 32" fill="none" stroke-linecap="round" stroke-width="8"></path></g></g><defs><filter id="al" x="50.5" y="399" width="532" height="633" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="d" x="50.5" y="399" width="532" height="633" maskUnits="userSpaceOnUse"><g filter="url(#al)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#d)"><linearGradient id="u" x1="-666.06" x2="-666.23" y1="163.36" y2="163.75" gradientTransform="matrix(532 0 0 633 354760 -102959)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF400" offset="0"></stop><stop stop-color="#3C8700" offset="1"></stop></linearGradient><ellipse cx="316.5" cy="715.5" rx="266" ry="316.5" fill="url(#u)"></ellipse></g><defs><filter id="ad" x="391" y="-24" width="288" height="283" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="c" x="391" y="-24" width="288" height="283" maskUnits="userSpaceOnUse"><g filter="url(#ad)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#c)"><linearGradient id="t" x1="-664.56" x2="-664.56" y1="163.79" y2="164.79" gradientTransform="matrix(227 0 0 227 151421 -37204)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDF00" offset="0"></stop><stop stop-color="#FF9D00" offset="1"></stop></linearGradient><circle cx="565.5" cy="89.5" r="113.5" fill="url(#t)"></circle><linearGradient id="v" x1="-644.5" x2="-645.77" y1="342" y2="342" gradientTransform="matrix(30 0 0 1 19770 -253)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="427" x2="397" y1="89" y2="89" fill="none" stroke="url(#v)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="aa" x1="-641.56" x2="-642.83" y1="196.02" y2="196.07" gradientTransform="matrix(26.5 0 0 5.5 17439 -1025.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="430.5" x2="404" y1="55.5" y2="50" fill="none" stroke="url(#aa)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="w" x1="-643.73" x2="-645" y1="185.83" y2="185.9" gradientTransform="matrix(29 0 0 8 19107 -1361)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="431" x2="402" y1="122" y2="130" fill="none" stroke="url(#w)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ac" x1="-638.94" x2="-640.22" y1="177.09" y2="177.39" gradientTransform="matrix(24 0 0 13 15783 -2145)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="442" x2="418" y1="153" y2="166" fill="none" stroke="url(#ac)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ab" x1="-633.42" x2="-634.7" y1="172.41" y2="173.31" gradientTransform="matrix(20 0 0 19 13137 -3096)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="464" x2="444" y1="180" y2="199" fill="none" stroke="url(#ab)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="y" x1="-619.05" x2="-619.52" y1="170.82" y2="171.82" gradientTransform="matrix(13.83 0 0 22.85 9050 -3703.4)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="491.4" x2="477.5" y1="203" y2="225.9" fill="none" stroke="url(#y)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="x" x1="-578.5" x2="-578.63" y1="170.31" y2="171.31" gradientTransform="matrix(7.5 0 0 24.5 4860 -3953)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="524.5" x2="517" y1="219.5" y2="244" fill="none" stroke="url(#x)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="z" x1="666.5" x2="666.5" y1="170.31" y2="171.31" gradientTransform="matrix(.5 0 0 24.5 231.5 -3944)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="564.5" x2="565" y1="228.5" y2="253" fill="none" stroke="url(#z)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12">`);
11575
+ init_web();
11576
+ init_solid();
11577
+ _tmpl$ = /* @__PURE__ */ template(`<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 13L9.00007 9M10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
11578
+ _tmpl$2 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11579
+ _tmpl$3 = /* @__PURE__ */ template(`<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
11580
+ _tmpl$4 = /* @__PURE__ */ template(`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 13.3333V2.66667M8 2.66667L4 6.66667M8 2.66667L12 6.66667" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
11581
+ _tmpl$5 = /* @__PURE__ */ template(`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
11582
+ _tmpl$6 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="12" width="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2v2m0 16v2M4 12H2m4.314-5.686L4.9 4.9m12.786 1.414L19.1 4.9M6.314 17.69 4.9 19.104m12.786-1.414 1.414 1.414M22 12h-2m-3 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11583
+ _tmpl$7 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="12" width="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 15.844a10.424 10.424 0 0 1-4.306.925c-5.779 0-10.463-4.684-10.463-10.462 0-1.536.33-2.994.925-4.307A10.464 10.464 0 0 0 2 11.538C2 17.316 6.684 22 12.462 22c4.243 0 7.896-2.526 9.538-6.156Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11584
+ _tmpl$8 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="12" width="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 21h8m-4-4v4m-5.2-4h10.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C22 14.72 22 13.88 22 12.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C19.72 3 18.88 3 17.2 3H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 5.28 2 6.12 2 7.8v4.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 17 5.12 17 6.8 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11585
+ _tmpl$9 = /* @__PURE__ */ template(`<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.237 4.237 0 00-6 0zm-4-4l2 2a7.074 7.074 0 0110 0l2-2C15.14 9.14 8.87 9.14 5 13z">`);
11586
+ _tmpl$10 = /* @__PURE__ */ template(`<svg stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z"></path><path d="M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4a9.793 9.793 0 00-4.49-2.56l3.53 3.53.96-.97zM2 3.05L5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24A9.684 9.684 0 005 13v.01L6.99 15a7.042 7.042 0 014.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3a4.237 4.237 0 00-6 0z">`);
11587
+ _tmpl$11 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.3951 19.3711L9.97955 20.6856C10.1533 21.0768 10.4368 21.4093 10.7958 21.6426C11.1547 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8488 21.8759 13.2078 21.6426C13.5667 21.4093 13.8503 21.0768 14.024 20.6856L14.6084 19.3711C14.8165 18.9047 15.1664 18.5159 15.6084 18.26C16.0532 18.0034 16.5678 17.8941 17.0784 17.9478L18.5084 18.1C18.9341 18.145 19.3637 18.0656 19.7451 17.8713C20.1265 17.6771 20.4434 17.3763 20.6573 17.0056C20.8715 16.635 20.9735 16.2103 20.9511 15.7829C20.9286 15.3555 20.7825 14.9438 20.5307 14.5978L19.684 13.4344C19.3825 13.0171 19.2214 12.5148 19.224 12C19.2239 11.4866 19.3865 10.9864 19.6884 10.5711L20.5351 9.40778C20.787 9.06175 20.933 8.65007 20.9555 8.22267C20.978 7.79528 20.8759 7.37054 20.6618 7C20.4479 6.62923 20.131 6.32849 19.7496 6.13423C19.3681 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5722 6.11141 16.0577 6.00212 15.6129 5.74556C15.17 5.48825 14.82 5.09736 14.6129 4.62889L14.024 3.31444C13.8503 2.92317 13.5667 2.59072 13.2078 2.3574C12.8488 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1547 2.12408 10.7958 2.3574C10.4368 2.59072 10.1533 2.92317 9.97955 3.31444L9.3951 4.62889C9.18803 5.09736 8.83798 5.48825 8.3951 5.74556C7.95032 6.00212 7.43577 6.11141 6.9251 6.05778L5.49066 5.90556C5.06499 5.86053 4.6354 5.93997 4.25397 6.13423C3.87255 6.32849 3.55567 6.62923 3.34177 7C3.12759 7.37054 3.02555 7.79528 3.04804 8.22267C3.07052 8.65007 3.21656 9.06175 3.46844 9.40778L4.3151 10.5711C4.61704 10.9864 4.77964 11.4866 4.77955 12C4.77964 12.5134 4.61704 13.0137 4.3151 13.4289L3.46844 14.5922C3.21656 14.9382 3.07052 15.3499 3.04804 15.7773C3.02555 16.2047 3.12759 16.6295 3.34177 17C3.55589 17.3706 3.8728 17.6712 4.25417 17.8654C4.63554 18.0596 5.06502 18.1392 5.49066 18.0944L6.92066 17.9422C7.43133 17.8886 7.94587 17.9979 8.39066 18.2544C8.83519 18.511 9.18687 18.902 9.3951 19.3711Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15C13.6568 15 15 13.6569 15 12C15 10.3431 13.6568 9 12 9C10.3431 9 8.99998 10.3431 8.99998 12C8.99998 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11588
+ _tmpl$12 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="copier" d="M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor">`);
11589
+ _tmpl$13 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11590
+ _tmpl$14 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke="#F04438" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11591
+ _tmpl$15 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><rect class="list" width="20" height="20" y="2" x="2" rx="2"></rect><line class="list-item" y1="7" y2="7" x1="6" x2="18"></line><line class="list-item" y2="12" y1="12" x1="6" x2="18"></line><line class="list-item" y1="17" y2="17" x1="6" x2="18">`);
11592
+ _tmpl$16 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="20" width="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11593
+ _tmpl$17 = /* @__PURE__ */ template(`<svg version="1.0" viewBox="0 0 633 633"><linearGradient id="a" x1="-666.45" x2="-666.45" y1="163.28" y2="163.99" gradientTransform="matrix(633 0 0 633 422177 -103358)" gradientUnits="userSpaceOnUse"><stop stop-color="#6BDAFF" offset="0"></stop><stop stop-color="#F9FFB5" offset=".32"></stop><stop stop-color="#FFA770" offset=".71"></stop><stop stop-color="#FF7373" offset="1"></stop></linearGradient><circle cx="316.5" cy="316.5" r="316.5" fill="url(#a)"></circle><defs><filter id="am" x="-137.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="b" x="-137.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#am)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#b)"><ellipse cx="89.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ah" x="316.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="k" x="316.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ah)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#k)"><ellipse cx="543.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ae" x="-137.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="j" x="-137.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ae)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#j)"><ellipse cx="89.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="ai" x="316.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="i" x="316.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ai)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#i)"><ellipse cx="543.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="aj" x="-137.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="h" x="-137.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#aj)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#h)"><ellipse cx="89.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="ag" x="316.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="g" x="316.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ag)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#g)"><ellipse cx="543.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="af" x="272.2" y="308" width="176.9" height="129.3" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="f" x="272.2" y="308" width="176.9" height="129.3" maskUnits="userSpaceOnUse"><g filter="url(#af)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#f)"><line x1="436" x2="431" y1="403.2" y2="431.8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="291" x2="280" y1="341.5" y2="403.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="332.9" x2="328.6" y1="384.1" y2="411.2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><linearGradient id="m" x1="-670.75" x2="-671.59" y1="164.4" y2="164.49" gradientTransform="matrix(-184.16 -32.472 -11.461 64.997 -121359 -32126)" gradientUnits="userSpaceOnUse"><stop stop-color="#EE2700" offset="0"></stop><stop stop-color="#FF008E" offset="1"></stop></linearGradient><path d="m344.1 363 97.7 17.2c5.8 2.1 8.2 6.1 7.1 12.1s-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1 0.8-12.8s8.3-4.4 13.7-2.1l55.2 53.6z" clip-rule="evenodd" fill="url(#m)" fill-rule="evenodd"></path><line x1="428.2" x2="429.1" y1="384.5" y2="378" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="395.2" x2="396.1" y1="379.5" y2="373" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="362.2" x2="363.1" y1="373.5" y2="367.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="324.2" x2="328.4" y1="351.3" y2="347.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="303.2" x2="307.4" y1="331.3" y2="327.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line></g><defs><filter id="ak" x="73.2" y="113.8" width="280.6" height="317.4" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="e" x="73.2" y="113.8" width="280.6" height="317.4" maskUnits="userSpaceOnUse"><g filter="url(#ak)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#e)"><linearGradient id="n" x1="-672.16" x2="-672.16" y1="165.03" y2="166.03" gradientTransform="matrix(-100.18 48.861 97.976 200.88 -83342 -93.059)" gradientUnits="userSpaceOnUse"><stop stop-color="#A17500" offset="0"></stop><stop stop-color="#5D2100" offset="1"></stop></linearGradient><path d="m192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.1-3 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6s-10.8-51.9-22.1-99.6l-25.3 4.6" clip-rule="evenodd" fill="url(#n)" fill-rule="evenodd"></path><g stroke="#2F8A00"><linearGradient id="r" x1="-660.23" x2="-660.23" y1="166.72" y2="167.72" gradientTransform="matrix(92.683 4.8573 -2.0259 38.657 61680 -3088.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z" clip-rule="evenodd" fill="url(#r)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="s" x1="-661.36" x2="-661.36" y1="164.18" y2="165.18" gradientTransform="matrix(110 5.7648 -6.3599 121.35 73933 -15933)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.4 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20.2 49.6-53.2 49.6-53.2z" clip-rule="evenodd" fill="url(#s)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="q" x1="-656.79" x2="-656.79" y1="165.15" y2="166.15" gradientTransform="matrix(62.954 3.2993 -3.5023 66.828 42156 -8754.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9c-0.8-21.9 6-38 20.6-48.2s29.8-15.4 45.5-15.3c-6.1 21.4-14.5 35.8-25.2 43.4s-24.4 14.2-40.9 20.1z" clip-rule="evenodd" fill="url(#q)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="p" x1="-663.07" x2="-663.07" y1="165.44" y2="166.44" gradientTransform="matrix(152.47 7.9907 -3.0936 59.029 101884 -4318.7)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c31.9-30 64.1-39.7 96.7-29s50.8 30.4 54.6 59.1c-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z" clip-rule="evenodd" fill="url(#p)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="o" x1="-662.57" x2="-662.57" y1="164.44" y2="165.44" gradientTransform="matrix(136.46 7.1517 -5.2163 99.533 91536 -11442)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c35.8-7.6 65.6-0.2 89.2 22s37.7 49 42.3 80.3c-39.8-9.7-68.3-23.8-85.5-42.4s-32.5-38.5-46-59.9z" clip-rule="evenodd" fill="url(#o)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="l" x1="-656.43" x2="-656.43" y1="163.86" y2="164.86" gradientTransform="matrix(60.866 3.1899 -8.7773 167.48 41560 -25168)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6s-3.6 63.1 8.7 99.6c27.4-40.3 43.2-69.6 47.4-88s5.6-44.1 4-77.2z" clip-rule="evenodd" fill="url(#l)" fill-rule="evenodd" stroke-width="13"></path><path d="m196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4s-9.5 33-11.1 45.1" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m194.9 185.7c-24.4 1.7-43.8 9-58.1 21.8s-24.7 25.4-31.3 37.8" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m204.5 176.4c29.7-6.7 52-8.4 67-5.1s26.9 8.6 35.8 15.9" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m196.5 181.4c20.3 9.9 38.2 20.5 53.9 31.9s27.4 22.1 35.1 32" fill="none" stroke-linecap="round" stroke-width="8"></path></g></g><defs><filter id="al" x="50.5" y="399" width="532" height="633" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="d" x="50.5" y="399" width="532" height="633" maskUnits="userSpaceOnUse"><g filter="url(#al)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#d)"><linearGradient id="u" x1="-666.06" x2="-666.23" y1="163.36" y2="163.75" gradientTransform="matrix(532 0 0 633 354760 -102959)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF400" offset="0"></stop><stop stop-color="#3C8700" offset="1"></stop></linearGradient><ellipse cx="316.5" cy="715.5" rx="266" ry="316.5" fill="url(#u)"></ellipse></g><defs><filter id="ad" x="391" y="-24" width="288" height="283" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="c" x="391" y="-24" width="288" height="283" maskUnits="userSpaceOnUse"><g filter="url(#ad)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#c)"><linearGradient id="t" x1="-664.56" x2="-664.56" y1="163.79" y2="164.79" gradientTransform="matrix(227 0 0 227 151421 -37204)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDF00" offset="0"></stop><stop stop-color="#FF9D00" offset="1"></stop></linearGradient><circle cx="565.5" cy="89.5" r="113.5" fill="url(#t)"></circle><linearGradient id="v" x1="-644.5" x2="-645.77" y1="342" y2="342" gradientTransform="matrix(30 0 0 1 19770 -253)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="427" x2="397" y1="89" y2="89" fill="none" stroke="url(#v)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="aa" x1="-641.56" x2="-642.83" y1="196.02" y2="196.07" gradientTransform="matrix(26.5 0 0 5.5 17439 -1025.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="430.5" x2="404" y1="55.5" y2="50" fill="none" stroke="url(#aa)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="w" x1="-643.73" x2="-645" y1="185.83" y2="185.9" gradientTransform="matrix(29 0 0 8 19107 -1361)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="431" x2="402" y1="122" y2="130" fill="none" stroke="url(#w)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ac" x1="-638.94" x2="-640.22" y1="177.09" y2="177.39" gradientTransform="matrix(24 0 0 13 15783 -2145)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="442" x2="418" y1="153" y2="166" fill="none" stroke="url(#ac)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ab" x1="-633.42" x2="-634.7" y1="172.41" y2="173.31" gradientTransform="matrix(20 0 0 19 13137 -3096)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="464" x2="444" y1="180" y2="199" fill="none" stroke="url(#ab)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="y" x1="-619.05" x2="-619.52" y1="170.82" y2="171.82" gradientTransform="matrix(13.83 0 0 22.85 9050 -3703.4)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="491.4" x2="477.5" y1="203" y2="225.9" fill="none" stroke="url(#y)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="x" x1="-578.5" x2="-578.63" y1="170.31" y2="171.31" gradientTransform="matrix(7.5 0 0 24.5 4860 -3953)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="524.5" x2="517" y1="219.5" y2="244" fill="none" stroke="url(#x)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="z" x1="666.5" x2="666.5" y1="170.31" y2="171.31" gradientTransform="matrix(.5 0 0 24.5 231.5 -3944)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="564.5" x2="565" y1="228.5" y2="253" fill="none" stroke="url(#z)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12">`);
11594
+ }
11595
+ });
11596
+
11597
+ // src/Context.ts
11598
+ function useQueryDevtoolsContext() {
11599
+ return useContext(QueryDevtoolsContext);
11600
+ }
11601
+ function useTheme() {
11602
+ return useContext(ThemeContext);
11603
+ }
11604
+ var QueryDevtoolsContext, ThemeContext;
11605
+ var init_Context = __esm({
11606
+ "src/Context.ts"() {
11607
+ init_solid();
11608
+ QueryDevtoolsContext = createContext({
11609
+ client: void 0,
11610
+ onlineManager: void 0,
11611
+ queryFlavor: "",
11612
+ version: ""
11613
+ });
11614
+ ThemeContext = createContext(
11615
+ () => "dark"
11616
+ );
11469
11617
  }
11470
11618
  });
11471
11619
 
@@ -11485,7 +11633,11 @@ function isIterable(x) {
11485
11633
  return Symbol.iterator in x;
11486
11634
  }
11487
11635
  function Explorer(props) {
11488
- const styles = getStyles();
11636
+ const theme = useTheme();
11637
+ const styles = createMemo(() => {
11638
+ return theme() === "dark" ? darkStyles : lightStyles;
11639
+ });
11640
+ const queryClient = useQueryDevtoolsContext().client;
11489
11641
  const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
11490
11642
  const toggleExpanded = () => setExpanded((old) => !old);
11491
11643
  const [expandedPages, setExpandedPages] = createSignal([]);
@@ -11525,49 +11677,79 @@ function Explorer(props) {
11525
11677
  return typeof props.value;
11526
11678
  });
11527
11679
  const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
11680
+ const currentDataPath = props.dataPath ?? [];
11528
11681
  return (() => {
11529
- const _el$3 = _tmpl$42();
11530
- insert(_el$3, createComponent(Show, {
11682
+ const _el$6 = _tmpl$62();
11683
+ insert(_el$6, createComponent(Show, {
11531
11684
  get when() {
11532
11685
  return subEntryPages().length;
11533
11686
  },
11534
11687
  get children() {
11535
11688
  return [(() => {
11536
- const _el$4 = _tmpl$32(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling, _el$10 = _el$9.firstChild;
11537
- _el$5.$$click = () => toggleExpanded();
11538
- insert(_el$5, createComponent(Expander, {
11689
+ const _el$7 = _tmpl$72(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$9.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild;
11690
+ _el$8.$$click = () => toggleExpanded();
11691
+ insert(_el$8, createComponent(Expander, {
11539
11692
  get expanded() {
11540
11693
  return expanded();
11541
11694
  }
11542
- }), _el$6);
11543
- insert(_el$7, () => props.label);
11544
- insert(_el$9, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$10);
11545
- insert(_el$9, () => subEntries().length, _el$10);
11546
- insert(_el$9, () => subEntries().length > 1 ? `items` : `item`, null);
11547
- insert(_el$4, createComponent(Show, {
11695
+ }), _el$9);
11696
+ insert(_el$10, () => props.label);
11697
+ insert(_el$12, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$13);
11698
+ insert(_el$12, () => subEntries().length, _el$13);
11699
+ insert(_el$12, () => subEntries().length > 1 ? `items` : `item`, null);
11700
+ insert(_el$7, createComponent(Show, {
11548
11701
  get when() {
11549
- return props.copyable;
11702
+ return props.editable;
11550
11703
  },
11551
11704
  get children() {
11552
- return createComponent(CopyButton, {
11705
+ const _el$14 = _tmpl$62();
11706
+ insert(_el$14, createComponent(CopyButton, {
11553
11707
  get value() {
11554
11708
  return props.value;
11555
11709
  }
11556
- });
11710
+ }), null);
11711
+ insert(_el$14, createComponent(Show, {
11712
+ get when() {
11713
+ return props.itemsDeletable && props.activeQuery !== void 0;
11714
+ },
11715
+ get children() {
11716
+ return createComponent(DeleteItemButton, {
11717
+ get activeQuery() {
11718
+ return props.activeQuery;
11719
+ },
11720
+ dataPath: currentDataPath
11721
+ });
11722
+ }
11723
+ }), null);
11724
+ insert(_el$14, createComponent(Show, {
11725
+ get when() {
11726
+ return type() === "array" && props.activeQuery !== void 0;
11727
+ },
11728
+ get children() {
11729
+ return createComponent(ClearArrayButton, {
11730
+ get activeQuery() {
11731
+ return props.activeQuery;
11732
+ },
11733
+ dataPath: currentDataPath
11734
+ });
11735
+ }
11736
+ }), null);
11737
+ createRenderEffect(() => className(_el$14, styles().actions));
11738
+ return _el$14;
11557
11739
  }
11558
11740
  }), null);
11559
11741
  createRenderEffect((_p$) => {
11560
- const _v$3 = styles.expanderButtonContainer, _v$4 = styles.expanderButton, _v$5 = styles.info;
11561
- _v$3 !== _p$._v$3 && className(_el$4, _p$._v$3 = _v$3);
11562
- _v$4 !== _p$._v$4 && className(_el$5, _p$._v$4 = _v$4);
11563
- _v$5 !== _p$._v$5 && className(_el$9, _p$._v$5 = _v$5);
11742
+ const _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
11743
+ _v$3 !== _p$._v$3 && className(_el$7, _p$._v$3 = _v$3);
11744
+ _v$4 !== _p$._v$4 && className(_el$8, _p$._v$4 = _v$4);
11745
+ _v$5 !== _p$._v$5 && className(_el$12, _p$._v$5 = _v$5);
11564
11746
  return _p$;
11565
11747
  }, {
11566
11748
  _v$3: void 0,
11567
11749
  _v$4: void 0,
11568
11750
  _v$5: void 0
11569
11751
  });
11570
- return _el$4;
11752
+ return _el$7;
11571
11753
  })(), createComponent(Show, {
11572
11754
  get when() {
11573
11755
  return expanded();
@@ -11578,8 +11760,8 @@ function Explorer(props) {
11578
11760
  return subEntryPages().length === 1;
11579
11761
  },
11580
11762
  get children() {
11581
- const _el$11 = _tmpl$42();
11582
- insert(_el$11, createComponent(Key, {
11763
+ const _el$15 = _tmpl$62();
11764
+ insert(_el$15, createComponent(Key, {
11583
11765
  get each() {
11584
11766
  return subEntries();
11585
11767
  },
@@ -11595,42 +11777,51 @@ function Explorer(props) {
11595
11777
  get value() {
11596
11778
  return entry().value;
11597
11779
  },
11598
- get copyable() {
11599
- return props.copyable;
11780
+ get editable() {
11781
+ return props.editable;
11782
+ },
11783
+ get dataPath() {
11784
+ return [...currentDataPath, entry().label];
11785
+ },
11786
+ get activeQuery() {
11787
+ return props.activeQuery;
11788
+ },
11789
+ get itemsDeletable() {
11790
+ return type() === "array" || type() === "Iterable" || type() === "object";
11600
11791
  }
11601
11792
  });
11602
11793
  }
11603
11794
  }));
11604
- createRenderEffect(() => className(_el$11, styles.subEntry));
11605
- return _el$11;
11795
+ createRenderEffect(() => className(_el$15, styles().subEntry));
11796
+ return _el$15;
11606
11797
  }
11607
11798
  }), createComponent(Show, {
11608
11799
  get when() {
11609
11800
  return subEntryPages().length > 1;
11610
11801
  },
11611
11802
  get children() {
11612
- const _el$12 = _tmpl$42();
11613
- insert(_el$12, createComponent(Index, {
11803
+ const _el$16 = _tmpl$62();
11804
+ insert(_el$16, createComponent(Index, {
11614
11805
  get each() {
11615
11806
  return subEntryPages();
11616
11807
  },
11617
11808
  children: (entries3, index) => (() => {
11618
- const _el$18 = _tmpl$62(), _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$20.firstChild, _el$25 = _el$21.nextSibling, _el$23 = _el$25.nextSibling, _el$26 = _el$23.nextSibling; _el$26.nextSibling;
11619
- _el$20.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
11620
- insert(_el$20, createComponent(Expander, {
11809
+ const _el$22 = _tmpl$112(), _el$23 = _el$22.firstChild, _el$24 = _el$23.firstChild, _el$25 = _el$24.firstChild, _el$29 = _el$25.nextSibling, _el$27 = _el$29.nextSibling, _el$30 = _el$27.nextSibling; _el$30.nextSibling;
11810
+ _el$24.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
11811
+ insert(_el$24, createComponent(Expander, {
11621
11812
  get expanded() {
11622
11813
  return expandedPages().includes(index);
11623
11814
  }
11624
- }), _el$21);
11625
- insert(_el$20, index * 100, _el$25);
11626
- insert(_el$20, index * 100 + 100 - 1, _el$26);
11627
- insert(_el$19, createComponent(Show, {
11815
+ }), _el$25);
11816
+ insert(_el$24, index * 100, _el$29);
11817
+ insert(_el$24, index * 100 + 100 - 1, _el$30);
11818
+ insert(_el$23, createComponent(Show, {
11628
11819
  get when() {
11629
11820
  return expandedPages().includes(index);
11630
11821
  },
11631
11822
  get children() {
11632
- const _el$27 = _tmpl$42();
11633
- insert(_el$27, createComponent(Key, {
11823
+ const _el$31 = _tmpl$62();
11824
+ insert(_el$31, createComponent(Key, {
11634
11825
  get each() {
11635
11826
  return entries3();
11636
11827
  },
@@ -11645,61 +11836,136 @@ function Explorer(props) {
11645
11836
  get value() {
11646
11837
  return entry().value;
11647
11838
  },
11648
- get copyable() {
11649
- return props.copyable;
11839
+ get editable() {
11840
+ return props.editable;
11841
+ },
11842
+ get dataPath() {
11843
+ return [...currentDataPath, entry().label];
11844
+ },
11845
+ get activeQuery() {
11846
+ return props.activeQuery;
11650
11847
  }
11651
11848
  })
11652
11849
  }));
11653
- createRenderEffect(() => className(_el$27, styles.subEntry));
11654
- return _el$27;
11850
+ createRenderEffect(() => className(_el$31, styles().subEntry));
11851
+ return _el$31;
11655
11852
  }
11656
11853
  }), null);
11657
11854
  createRenderEffect((_p$) => {
11658
- const _v$8 = styles.entry, _v$9 = styles.expanderButton;
11659
- _v$8 !== _p$._v$8 && className(_el$19, _p$._v$8 = _v$8);
11660
- _v$9 !== _p$._v$9 && className(_el$20, _p$._v$9 = _v$9);
11855
+ const _v$10 = styles().entry, _v$11 = styles().expanderButton;
11856
+ _v$10 !== _p$._v$10 && className(_el$23, _p$._v$10 = _v$10);
11857
+ _v$11 !== _p$._v$11 && className(_el$24, _p$._v$11 = _v$11);
11661
11858
  return _p$;
11662
11859
  }, {
11663
- _v$8: void 0,
11664
- _v$9: void 0
11860
+ _v$10: void 0,
11861
+ _v$11: void 0
11665
11862
  });
11666
- return _el$18;
11863
+ return _el$22;
11667
11864
  })()
11668
11865
  }));
11669
- createRenderEffect(() => className(_el$12, styles.subEntry));
11670
- return _el$12;
11866
+ createRenderEffect(() => className(_el$16, styles().subEntry));
11867
+ return _el$16;
11671
11868
  }
11672
11869
  })];
11673
11870
  }
11674
11871
  })];
11675
11872
  }
11676
11873
  }), null);
11677
- insert(_el$3, createComponent(Show, {
11874
+ insert(_el$6, createComponent(Show, {
11678
11875
  get when() {
11679
11876
  return subEntryPages().length === 0;
11680
11877
  },
11681
11878
  get children() {
11682
- const _el$13 = _tmpl$52(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.nextSibling;
11683
- _el$13.style.setProperty("line-height", "1.125rem");
11684
- insert(_el$14, () => props.label, _el$15);
11685
- insert(_el$17, () => displayValue(props.value));
11879
+ const _el$17 = _tmpl$102(), _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild;
11880
+ insert(_el$18, () => props.label, _el$19);
11881
+ insert(_el$17, createComponent(Show, {
11882
+ get when() {
11883
+ return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number" || type() === "boolean");
11884
+ },
11885
+ get fallback() {
11886
+ return (() => {
11887
+ const _el$32 = _tmpl$92();
11888
+ insert(_el$32, () => displayValue(props.value));
11889
+ createRenderEffect(() => className(_el$32, styles().value));
11890
+ return _el$32;
11891
+ })();
11892
+ },
11893
+ get children() {
11894
+ return [createComponent(Show, {
11895
+ get when() {
11896
+ return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number");
11897
+ },
11898
+ get children() {
11899
+ const _el$20 = _tmpl$82();
11900
+ _el$20.addEventListener("change", (changeEvent) => {
11901
+ const oldData = props.activeQuery.state.data;
11902
+ const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
11903
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
11904
+ });
11905
+ createRenderEffect((_p$) => {
11906
+ const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles().value, styles().editableInput);
11907
+ _v$6 !== _p$._v$6 && setAttribute(_el$20, "type", _p$._v$6 = _v$6);
11908
+ _v$7 !== _p$._v$7 && className(_el$20, _p$._v$7 = _v$7);
11909
+ return _p$;
11910
+ }, {
11911
+ _v$6: void 0,
11912
+ _v$7: void 0
11913
+ });
11914
+ createRenderEffect(() => _el$20.value = props.value);
11915
+ return _el$20;
11916
+ }
11917
+ }), createComponent(Show, {
11918
+ get when() {
11919
+ return type() === "boolean";
11920
+ },
11921
+ get children() {
11922
+ const _el$21 = _tmpl$92();
11923
+ insert(_el$21, createComponent(ToggleValueButton, {
11924
+ get activeQuery() {
11925
+ return props.activeQuery;
11926
+ },
11927
+ dataPath: currentDataPath,
11928
+ get value() {
11929
+ return props.value;
11930
+ }
11931
+ }), null);
11932
+ insert(_el$21, () => displayValue(props.value), null);
11933
+ createRenderEffect(() => className(_el$21, clsx(styles().value, styles().actions, styles().editableInput)));
11934
+ return _el$21;
11935
+ }
11936
+ })];
11937
+ }
11938
+ }), null);
11939
+ insert(_el$17, createComponent(Show, {
11940
+ get when() {
11941
+ return props.editable && props.itemsDeletable && props.activeQuery !== void 0;
11942
+ },
11943
+ get children() {
11944
+ return createComponent(DeleteItemButton, {
11945
+ get activeQuery() {
11946
+ return props.activeQuery;
11947
+ },
11948
+ dataPath: currentDataPath
11949
+ });
11950
+ }
11951
+ }), null);
11686
11952
  createRenderEffect((_p$) => {
11687
- const _v$6 = styles.label, _v$7 = styles.value;
11688
- _v$6 !== _p$._v$6 && className(_el$14, _p$._v$6 = _v$6);
11689
- _v$7 !== _p$._v$7 && className(_el$17, _p$._v$7 = _v$7);
11953
+ const _v$8 = styles().row, _v$9 = styles().label;
11954
+ _v$8 !== _p$._v$8 && className(_el$17, _p$._v$8 = _v$8);
11955
+ _v$9 !== _p$._v$9 && className(_el$18, _p$._v$9 = _v$9);
11690
11956
  return _p$;
11691
11957
  }, {
11692
- _v$6: void 0,
11693
- _v$7: void 0
11958
+ _v$8: void 0,
11959
+ _v$9: void 0
11694
11960
  });
11695
- return _el$13;
11961
+ return _el$17;
11696
11962
  }
11697
11963
  }), null);
11698
- createRenderEffect(() => className(_el$3, styles.entry));
11699
- return _el$3;
11964
+ createRenderEffect(() => className(_el$6, styles().entry));
11965
+ return _el$6;
11700
11966
  })();
11701
11967
  }
11702
- var _tmpl$13, _tmpl$22, _tmpl$32, _tmpl$42, _tmpl$52, _tmpl$62, Expander, CopyButton, getStyles;
11968
+ var _tmpl$18, _tmpl$22, _tmpl$32, _tmpl$42, _tmpl$52, _tmpl$62, _tmpl$72, _tmpl$82, _tmpl$92, _tmpl$102, _tmpl$112, Expander, CopyButton, ClearArrayButton, DeleteItemButton, ToggleValueButton, stylesFactory, lightStyles, darkStyles;
11703
11969
  var init_Explorer = __esm({
11704
11970
  "src/Explorer.tsx"() {
11705
11971
  init_web();
@@ -11710,6 +11976,7 @@ var init_Explorer = __esm({
11710
11976
  init_web();
11711
11977
  init_web();
11712
11978
  init_web();
11979
+ init_web();
11713
11980
  init_esm2();
11714
11981
  init_goober_modern();
11715
11982
  init_clsx();
@@ -11718,17 +11985,26 @@ var init_Explorer = __esm({
11718
11985
  init_theme();
11719
11986
  init_utils();
11720
11987
  init_icons();
11721
- _tmpl$13 = /* @__PURE__ */ template(`<span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11722
- _tmpl$22 = /* @__PURE__ */ template(`<button>`);
11723
- _tmpl$32 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
11724
- _tmpl$42 = /* @__PURE__ */ template(`<div>`);
11725
- _tmpl$52 = /* @__PURE__ */ template(`<div><span>:</span> <span>`);
11726
- _tmpl$62 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
11988
+ init_Context();
11989
+ _tmpl$18 = /* @__PURE__ */ template(`<span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
11990
+ _tmpl$22 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
11991
+ _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items" aria-label="Remove all items">`);
11992
+ _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item" aria-label="Delete item">`);
11993
+ _tmpl$52 = /* @__PURE__ */ template(`<button title="Toggle value" aria-label="Toggle value">`);
11994
+ _tmpl$62 = /* @__PURE__ */ template(`<div>`);
11995
+ _tmpl$72 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
11996
+ _tmpl$82 = /* @__PURE__ */ template(`<input>`);
11997
+ _tmpl$92 = /* @__PURE__ */ template(`<span>`);
11998
+ _tmpl$102 = /* @__PURE__ */ template(`<div><span>:`);
11999
+ _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
11727
12000
  Expander = (props) => {
11728
- const styles = getStyles();
12001
+ const theme = useTheme();
12002
+ const styles = createMemo(() => {
12003
+ return theme() === "dark" ? darkStyles : lightStyles;
12004
+ });
11729
12005
  return (() => {
11730
- const _el$ = _tmpl$13();
11731
- createRenderEffect(() => className(_el$, clsx(styles.expander, u`
12006
+ const _el$ = _tmpl$18();
12007
+ createRenderEffect(() => className(_el$, clsx(styles().expander, u`
11732
12008
  transform: rotate(${props.expanded ? 90 : 0}deg);
11733
12009
  `, props.expanded && u`
11734
12010
  & svg {
@@ -11739,7 +12015,10 @@ var init_Explorer = __esm({
11739
12015
  })();
11740
12016
  };
11741
12017
  CopyButton = (props) => {
11742
- const styles = getStyles();
12018
+ const theme = useTheme();
12019
+ const styles = createMemo(() => {
12020
+ return theme() === "dark" ? darkStyles : lightStyles;
12021
+ });
11743
12022
  const [copyState, setCopyState] = createSignal("NoCopy");
11744
12023
  return (() => {
11745
12024
  const _el$2 = _tmpl$22();
@@ -11770,7 +12049,11 @@ var init_Explorer = __esm({
11770
12049
  return copyState() === "SuccessCopy";
11771
12050
  },
11772
12051
  get children() {
11773
- return createComponent(CopiedCopier, {});
12052
+ return createComponent(CopiedCopier, {
12053
+ get theme() {
12054
+ return theme();
12055
+ }
12056
+ });
11774
12057
  }
11775
12058
  }), createComponent(Match, {
11776
12059
  get when() {
@@ -11783,7 +12066,7 @@ var init_Explorer = __esm({
11783
12066
  }
11784
12067
  }));
11785
12068
  createRenderEffect((_p$) => {
11786
- const _v$ = styles.copyButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
12069
+ const _v$ = styles().actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
11787
12070
  _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
11788
12071
  _v$2 !== _p$._v$2 && setAttribute(_el$2, "aria-label", _p$._v$2 = _v$2);
11789
12072
  return _p$;
@@ -11794,13 +12077,78 @@ var init_Explorer = __esm({
11794
12077
  return _el$2;
11795
12078
  })();
11796
12079
  };
11797
- getStyles = () => {
12080
+ ClearArrayButton = (props) => {
12081
+ const theme = useTheme();
12082
+ const styles = createMemo(() => {
12083
+ return theme() === "dark" ? darkStyles : lightStyles;
12084
+ });
12085
+ const queryClient = useQueryDevtoolsContext().client;
12086
+ return (() => {
12087
+ const _el$3 = _tmpl$32();
12088
+ _el$3.$$click = () => {
12089
+ const oldData = props.activeQuery.state.data;
12090
+ const newData = updateNestedDataByPath(oldData, props.dataPath, []);
12091
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
12092
+ };
12093
+ insert(_el$3, createComponent(List, {}));
12094
+ createRenderEffect(() => className(_el$3, styles().actionButton));
12095
+ return _el$3;
12096
+ })();
12097
+ };
12098
+ DeleteItemButton = (props) => {
12099
+ const theme = useTheme();
12100
+ const styles = createMemo(() => {
12101
+ return theme() === "dark" ? darkStyles : lightStyles;
12102
+ });
12103
+ const queryClient = useQueryDevtoolsContext().client;
12104
+ return (() => {
12105
+ const _el$4 = _tmpl$42();
12106
+ _el$4.$$click = () => {
12107
+ const oldData = props.activeQuery.state.data;
12108
+ const newData = deleteNestedDataByPath(oldData, props.dataPath);
12109
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
12110
+ };
12111
+ insert(_el$4, createComponent(Trash, {}));
12112
+ createRenderEffect(() => className(_el$4, clsx(styles().actionButton)));
12113
+ return _el$4;
12114
+ })();
12115
+ };
12116
+ ToggleValueButton = (props) => {
12117
+ const theme = useTheme();
12118
+ const styles = createMemo(() => {
12119
+ return theme() === "dark" ? darkStyles : lightStyles;
12120
+ });
12121
+ const queryClient = useQueryDevtoolsContext().client;
12122
+ return (() => {
12123
+ const _el$5 = _tmpl$52();
12124
+ _el$5.$$click = () => {
12125
+ const oldData = props.activeQuery.state.data;
12126
+ const newData = updateNestedDataByPath(oldData, props.dataPath, !props.value);
12127
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
12128
+ };
12129
+ insert(_el$5, createComponent(Check, {
12130
+ get theme() {
12131
+ return theme();
12132
+ },
12133
+ get checked() {
12134
+ return props.value;
12135
+ }
12136
+ }));
12137
+ createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
12138
+ width: ${tokens.size[3.5]};
12139
+ height: ${tokens.size[3.5]};
12140
+ `)));
12141
+ return _el$5;
12142
+ })();
12143
+ };
12144
+ stylesFactory = (theme) => {
11798
12145
  const {
11799
12146
  colors,
11800
12147
  font,
11801
12148
  size: size2,
11802
12149
  border
11803
12150
  } = tokens;
12151
+ const t2 = (light, dark) => theme === "light" ? light : dark;
11804
12152
  return {
11805
12153
  entry: u`
11806
12154
  & * {
@@ -11814,7 +12162,7 @@ var init_Explorer = __esm({
11814
12162
  subEntry: u`
11815
12163
  margin: 0 0 0 0.5em;
11816
12164
  padding-left: 0.75em;
11817
- border-left: 2px solid ${colors.darkGray[400]};
12165
+ border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
11818
12166
  /* outline: 1px solid ${colors.teal[400]}; */
11819
12167
  `,
11820
12168
  expander: u`
@@ -11835,6 +12183,7 @@ var init_Explorer = __esm({
11835
12183
  align-items: center;
11836
12184
  line-height: 1.125rem;
11837
12185
  min-height: 1.125rem;
12186
+ gap: ${size2[2]};
11838
12187
  `,
11839
12188
  expanderButton: u`
11840
12189
  cursor: pointer;
@@ -11862,19 +12211,45 @@ var init_Explorer = __esm({
11862
12211
  }
11863
12212
  `,
11864
12213
  info: u`
11865
- color: ${colors.gray[500]};
12214
+ color: ${t2(colors.gray[500], colors.gray[500])};
11866
12215
  font-size: ${font.size.xs};
11867
12216
  margin-left: ${size2[1]};
11868
12217
  /* outline: 1px solid ${colors.yellow[400]}; */
11869
12218
  `,
11870
12219
  label: u`
11871
- color: ${colors.gray[300]};
12220
+ color: ${t2(colors.gray[700], colors.gray[300])};
11872
12221
  `,
11873
12222
  value: u`
11874
- color: ${colors.purple[400]};
12223
+ color: ${t2(colors.purple[600], colors.purple[400])};
12224
+ flex-grow: 1;
12225
+ `,
12226
+ actions: u`
12227
+ display: inline-flex;
12228
+ gap: ${size2[2]};
12229
+ align-items: center;
12230
+ `,
12231
+ row: u`
12232
+ display: inline-flex;
12233
+ gap: ${size2[2]};
12234
+ width: 100%;
12235
+ margin-bottom: ${size2[0.5]};
12236
+ line-height: 1.125rem;
12237
+ align-items: center;
12238
+ `,
12239
+ editableInput: u`
12240
+ border: none;
12241
+ padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
12242
+ flex-grow: 1;
12243
+ border-radius: ${border.radius.xs};
12244
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
12245
+
12246
+ &:hover {
12247
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
12248
+ }
11875
12249
  `,
11876
- copyButton: u`
12250
+ actionButton: u`
11877
12251
  background-color: transparent;
12252
+ color: ${t2(colors.gray[500], colors.gray[500])};
11878
12253
  border: none;
11879
12254
  display: inline-flex;
11880
12255
  padding: 0px;
@@ -11884,11 +12259,10 @@ var init_Explorer = __esm({
11884
12259
  width: ${size2[3]};
11885
12260
  height: ${size2[3]};
11886
12261
  position: relative;
11887
- left: ${size2[2]};
11888
12262
  z-index: 1;
11889
12263
 
11890
- &:hover svg .copier {
11891
- stroke: ${colors.gray[500]} !important;
12264
+ &:hover svg {
12265
+ color: ${t2(colors.gray[600], colors.gray[400])};
11892
12266
  }
11893
12267
 
11894
12268
  &:focus-visible {
@@ -11899,27 +12273,12 @@ var init_Explorer = __esm({
11899
12273
  `
11900
12274
  };
11901
12275
  };
12276
+ lightStyles = stylesFactory("light");
12277
+ darkStyles = stylesFactory("dark");
11902
12278
  delegateEvents(["click"]);
11903
12279
  }
11904
12280
  });
11905
12281
 
11906
- // src/Context.ts
11907
- function useQueryDevtoolsContext() {
11908
- return useContext(QueryDevtoolsContext);
11909
- }
11910
- var QueryDevtoolsContext;
11911
- var init_Context = __esm({
11912
- "src/Context.ts"() {
11913
- init_solid();
11914
- QueryDevtoolsContext = createContext({
11915
- client: void 0,
11916
- onlineManager: void 0,
11917
- queryFlavor: "",
11918
- version: ""
11919
- });
11920
- }
11921
- });
11922
-
11923
12282
  // src/fonts.ts
11924
12283
  var loadFonts;
11925
12284
  var init_fonts = __esm({
@@ -11944,7 +12303,7 @@ __export(Devtools_exports, {
11944
12303
  QueryStatusCount: () => QueryStatusCount,
11945
12304
  default: () => Devtools_default
11946
12305
  });
11947
- var _tmpl$14, _tmpl$23, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$72, _tmpl$82, _tmpl$92, _tmpl$102, _tmpl$112, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$15, _tmpl$16, _tmpl$17, _tmpl$18, _tmpl$19, _tmpl$20, _tmpl$21, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, selectedQueryHash, setSelectedQueryHash, panelWidth, setPanelWidth, DevtoolsComponent, Devtools_default, Devtools, DevtoolsPanel, QueryRow, QueryStatusCount, QueryStatus, QueryDetails, signalsMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, getStyles2;
12306
+ var _tmpl$19, _tmpl$23, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$20, _tmpl$21, _tmpl$222, _tmpl$232, _tmpl$24, _tmpl$25, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, selectedQueryHash, setSelectedQueryHash, panelWidth, setPanelWidth, DevtoolsComponent, Devtools_default, Devtools, DevtoolsPanel, QueryRow, QueryStatusCount, QueryStatus, QueryDetails, signalsMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
11948
12307
  var init_Devtools = __esm({
11949
12308
  "src/Devtools.tsx"() {
11950
12309
  init_web();
@@ -11973,32 +12332,37 @@ var init_Devtools = __esm({
11973
12332
  init_Explorer();
11974
12333
  init_Context();
11975
12334
  init_fonts();
11976
- _tmpl$14 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
12335
+ _tmpl$19 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
11977
12336
  _tmpl$23 = /* @__PURE__ */ template(`<div>`);
11978
12337
  _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
11979
12338
  _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
11980
12339
  _tmpl$53 = /* @__PURE__ */ template(`<div>Settings`);
11981
12340
  _tmpl$63 = /* @__PURE__ */ template(`<span>Position`);
11982
- _tmpl$72 = /* @__PURE__ */ template(`<span>Top`);
11983
- _tmpl$82 = /* @__PURE__ */ template(`<span>Bottom`);
11984
- _tmpl$92 = /* @__PURE__ */ template(`<span>Left`);
11985
- _tmpl$102 = /* @__PURE__ */ template(`<span>Right`);
11986
- _tmpl$112 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools"></button><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div><div><div><div><input aria-label="Filter queries by query key" type="text" placeholder="Filter" class="tsqd-query-filter-textfield"></div><div><select></select></div><button class="tsqd-query-filter-sort-order-btn"></button></div><div><button aria-label="Clear query cache" title="Clear query cache"></button><button></button></div></div><div><div class="tsqd-queries-container">`);
11987
- _tmpl$122 = /* @__PURE__ */ template(`<option>Sort by `);
11988
- _tmpl$132 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
11989
- _tmpl$142 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
11990
- _tmpl$15 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
11991
- _tmpl$16 = /* @__PURE__ */ template(`<span>`);
11992
- _tmpl$17 = /* @__PURE__ */ template(`<button><span></span><span>`);
11993
- _tmpl$18 = /* @__PURE__ */ template(`<button><span></span> Error`);
11994
- _tmpl$19 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
11995
- _tmpl$20 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class="tsqd-query-details-summary"><pre><code></code></pre><span></span></div><div class="tsqd-query-details-observers-count"><span>Observers:</span><span></span></div><div class="tsqd-query-details-last-updated"><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
11996
- _tmpl$21 = /* @__PURE__ */ template(`<option>`);
12341
+ _tmpl$73 = /* @__PURE__ */ template(`<span>Top`);
12342
+ _tmpl$83 = /* @__PURE__ */ template(`<span>Bottom`);
12343
+ _tmpl$93 = /* @__PURE__ */ template(`<span>Left`);
12344
+ _tmpl$103 = /* @__PURE__ */ template(`<span>Right`);
12345
+ _tmpl$113 = /* @__PURE__ */ template(`<span>Theme`);
12346
+ _tmpl$122 = /* @__PURE__ */ template(`<span>Light`);
12347
+ _tmpl$132 = /* @__PURE__ */ template(`<span>Dark`);
12348
+ _tmpl$142 = /* @__PURE__ */ template(`<span>System`);
12349
+ _tmpl$152 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools"></button><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div><div><div><div><input aria-label="Filter queries by query key" type="text" placeholder="Filter" class="tsqd-query-filter-textfield"></div><div><select></select></div><button class="tsqd-query-filter-sort-order-btn"></button></div><div><button aria-label="Clear query cache" title="Clear query cache"></button><button></button></div></div><div><div class="tsqd-queries-container">`);
12350
+ _tmpl$162 = /* @__PURE__ */ template(`<option>Sort by `);
12351
+ _tmpl$172 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
12352
+ _tmpl$182 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
12353
+ _tmpl$192 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
12354
+ _tmpl$20 = /* @__PURE__ */ template(`<span>`);
12355
+ _tmpl$21 = /* @__PURE__ */ template(`<button><span></span><span>`);
12356
+ _tmpl$222 = /* @__PURE__ */ template(`<button><span></span> Error`);
12357
+ _tmpl$232 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
12358
+ _tmpl$24 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class="tsqd-query-details-summary"><pre><code></code></pre><span></span></div><div class="tsqd-query-details-observers-count"><span>Observers:</span><span></span></div><div class="tsqd-query-details-last-updated"><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
12359
+ _tmpl$25 = /* @__PURE__ */ template(`<option>`);
11997
12360
  firstBreakpoint = 1024;
11998
12361
  secondBreakpoint = 796;
11999
12362
  thirdBreakpoint = 700;
12000
12363
  BUTTON_POSITION = "bottom-right";
12001
12364
  POSITION = "bottom";
12365
+ THEME_PREFERENCE = "system";
12002
12366
  INITIAL_IS_OPEN = false;
12003
12367
  DEFAULT_HEIGHT = 500;
12004
12368
  DEFAULT_WIDTH = 500;
@@ -12007,33 +12371,51 @@ var init_Devtools = __esm({
12007
12371
  [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
12008
12372
  [panelWidth, setPanelWidth] = createSignal(0);
12009
12373
  DevtoolsComponent = (props) => {
12374
+ const [localStore, setLocalStore] = createLocalStorage({
12375
+ prefix: "TanstackQueryDevtools"
12376
+ });
12377
+ const colorScheme = getPreferredColorScheme();
12378
+ const theme = createMemo(() => {
12379
+ const preference = localStore.theme_preference || THEME_PREFERENCE;
12380
+ if (preference !== "system")
12381
+ return preference;
12382
+ return colorScheme();
12383
+ });
12010
12384
  return createComponent(QueryDevtoolsContext.Provider, {
12011
12385
  value: props,
12012
12386
  get children() {
12013
- return createComponent(Devtools, {});
12387
+ return createComponent(ThemeContext.Provider, {
12388
+ value: theme,
12389
+ get children() {
12390
+ return createComponent(Devtools, {
12391
+ localStore,
12392
+ setLocalStore
12393
+ });
12394
+ }
12395
+ });
12014
12396
  }
12015
12397
  });
12016
12398
  };
12017
12399
  Devtools_default = DevtoolsComponent;
12018
- Devtools = () => {
12400
+ Devtools = (props) => {
12019
12401
  loadFonts();
12020
- const styles = getStyles2();
12021
- const [localStore, setLocalStore] = createLocalStorage({
12022
- prefix: "TanstackQueryDevtools"
12402
+ const theme = useTheme();
12403
+ const styles = createMemo(() => {
12404
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
12023
12405
  });
12024
12406
  const buttonPosition = createMemo(() => {
12025
12407
  return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
12026
12408
  });
12027
12409
  const isOpen = createMemo(() => {
12028
- return localStore.open === "true" ? true : localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
12410
+ return props.localStore.open === "true" ? true : props.localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
12029
12411
  });
12030
12412
  const position = createMemo(() => {
12031
- return localStore.position || useQueryDevtoolsContext().position || POSITION;
12413
+ return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
12032
12414
  });
12033
12415
  createEffect(() => {
12034
12416
  const root = document.querySelector(".tsqd-parent-container");
12035
- const height = localStore.height || DEFAULT_HEIGHT;
12036
- const width = localStore.width || DEFAULT_WIDTH;
12417
+ const height = props.localStore.height || DEFAULT_HEIGHT;
12418
+ const width = props.localStore.width || DEFAULT_WIDTH;
12037
12419
  const panelPosition = position();
12038
12420
  root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
12039
12421
  root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
@@ -12049,8 +12431,12 @@ var init_Devtools = __esm({
12049
12431
  },
12050
12432
  get children() {
12051
12433
  return createComponent(DevtoolsPanel, {
12052
- localStore,
12053
- setLocalStore
12434
+ get localStore() {
12435
+ return props.localStore;
12436
+ },
12437
+ get setLocalStore() {
12438
+ return props.setLocalStore;
12439
+ }
12054
12440
  });
12055
12441
  }
12056
12442
  });
@@ -12064,11 +12450,11 @@ var init_Devtools = __esm({
12064
12450
  return !isOpen();
12065
12451
  },
12066
12452
  get children() {
12067
- const _el$2 = _tmpl$14(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
12453
+ const _el$2 = _tmpl$19(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
12068
12454
  insert(_el$3, createComponent(TanstackLogo, {}));
12069
- _el$4.$$click = () => setLocalStore("open", "true");
12455
+ _el$4.$$click = () => props.setLocalStore("open", "true");
12070
12456
  insert(_el$4, createComponent(TanstackLogo, {}));
12071
- createRenderEffect(() => className(_el$2, clsx(styles.devtoolsBtn, styles[`devtoolsBtn-position-${buttonPosition()}`])));
12457
+ createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
12072
12458
  return _el$2;
12073
12459
  }
12074
12460
  });
@@ -12099,7 +12485,10 @@ var init_Devtools = __esm({
12099
12485
  })();
12100
12486
  };
12101
12487
  DevtoolsPanel = (props) => {
12102
- const styles = getStyles2();
12488
+ const theme = useTheme();
12489
+ const styles = createMemo(() => {
12490
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
12491
+ });
12103
12492
  const [isResizing, setIsResizing] = createSignal(false);
12104
12493
  const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
12105
12494
  const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
@@ -12208,8 +12597,24 @@ var init_Devtools = __esm({
12208
12597
  });
12209
12598
  });
12210
12599
  });
12600
+ const getPanelDynamicStyles = () => {
12601
+ const {
12602
+ colors
12603
+ } = tokens;
12604
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
12605
+ if (panelWidth() < secondBreakpoint) {
12606
+ return u`
12607
+ flex-direction: column;
12608
+ background-color: ${t2(colors.gray[300], colors.gray[600])};
12609
+ `;
12610
+ }
12611
+ return u`
12612
+ flex-direction: row;
12613
+ background-color: ${t2(colors.gray[200], colors.darkGray[900])};
12614
+ `;
12615
+ };
12211
12616
  return (() => {
12212
- const _el$5 = _tmpl$112(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$9.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$23 = _el$15.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$32 = _el$14.nextSibling, _el$33 = _el$32.firstChild;
12617
+ const _el$5 = _tmpl$152(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$9.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$23 = _el$15.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$36 = _el$14.nextSibling, _el$37 = _el$36.firstChild;
12213
12618
  const _ref$ = panelRef;
12214
12619
  typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
12215
12620
  _el$6.$$mousedown = handleDragStart;
@@ -12225,10 +12630,10 @@ var init_Devtools = __esm({
12225
12630
  _el$17.$$input = (e2) => props.setLocalStore("filter", e2.currentTarget.value);
12226
12631
  _el$19.addEventListener("change", (e2) => props.setLocalStore("sort", e2.currentTarget.value));
12227
12632
  insert(_el$19, () => Object.keys(sortFns).map((key) => (() => {
12228
- const _el$34 = _tmpl$122(); _el$34.firstChild;
12229
- _el$34.value = key;
12230
- insert(_el$34, key, null);
12231
- return _el$34;
12633
+ const _el$38 = _tmpl$162(); _el$38.firstChild;
12634
+ _el$38.value = key;
12635
+ insert(_el$38, key, null);
12636
+ return _el$38;
12232
12637
  })()));
12233
12638
  insert(_el$18, createComponent(ChevronDown, {}), null);
12234
12639
  _el$20.$$click = () => {
@@ -12272,7 +12677,7 @@ var init_Devtools = __esm({
12272
12677
  get children() {
12273
12678
  return [createComponent(index$d.Trigger, {
12274
12679
  get ["class"]() {
12275
- return clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
12680
+ return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
12276
12681
  },
12277
12682
  get children() {
12278
12683
  return createComponent(Settings, {});
@@ -12281,12 +12686,12 @@ var init_Devtools = __esm({
12281
12686
  get children() {
12282
12687
  return createComponent(index$d.Content, {
12283
12688
  get ["class"]() {
12284
- return clsx(styles.settingsMenu, "tsqd-settings-menu");
12689
+ return clsx(styles().settingsMenu, "tsqd-settings-menu");
12285
12690
  },
12286
12691
  get children() {
12287
12692
  return [(() => {
12288
12693
  const _el$26 = _tmpl$53();
12289
- createRenderEffect(() => className(_el$26, clsx(styles.settingsMenuHeader, "tsqd-settings-menu-header")));
12694
+ createRenderEffect(() => className(_el$26, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
12290
12695
  return _el$26;
12291
12696
  })(), createComponent(index$d.Sub, {
12292
12697
  overlap: true,
@@ -12295,7 +12700,7 @@ var init_Devtools = __esm({
12295
12700
  get children() {
12296
12701
  return [createComponent(index$d.SubTrigger, {
12297
12702
  get ["class"]() {
12298
- return clsx(styles.settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
12703
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
12299
12704
  },
12300
12705
  get children() {
12301
12706
  return [_tmpl$63(), createComponent(ChevronDown, {})];
@@ -12304,7 +12709,7 @@ var init_Devtools = __esm({
12304
12709
  get children() {
12305
12710
  return createComponent(index$d.SubContent, {
12306
12711
  get ["class"]() {
12307
- return clsx(styles.settingsMenu, "tsqd-settings-submenu");
12712
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
12308
12713
  },
12309
12714
  get children() {
12310
12715
  return [createComponent(index$d.Item, {
@@ -12313,10 +12718,10 @@ var init_Devtools = __esm({
12313
12718
  },
12314
12719
  as: "button",
12315
12720
  get ["class"]() {
12316
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
12721
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
12317
12722
  },
12318
12723
  get children() {
12319
- return [_tmpl$72(), createComponent(ArrowUp, {})];
12724
+ return [_tmpl$73(), createComponent(ArrowUp, {})];
12320
12725
  }
12321
12726
  }), createComponent(index$d.Item, {
12322
12727
  onSelect: () => {
@@ -12324,10 +12729,10 @@ var init_Devtools = __esm({
12324
12729
  },
12325
12730
  as: "button",
12326
12731
  get ["class"]() {
12327
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
12732
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
12328
12733
  },
12329
12734
  get children() {
12330
- return [_tmpl$82(), createComponent(ArrowDown, {})];
12735
+ return [_tmpl$83(), createComponent(ArrowDown, {})];
12331
12736
  }
12332
12737
  }), createComponent(index$d.Item, {
12333
12738
  onSelect: () => {
@@ -12335,10 +12740,10 @@ var init_Devtools = __esm({
12335
12740
  },
12336
12741
  as: "button",
12337
12742
  get ["class"]() {
12338
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
12743
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
12339
12744
  },
12340
12745
  get children() {
12341
- return [_tmpl$92(), createComponent(ArrowLeft, {})];
12746
+ return [_tmpl$93(), createComponent(ArrowLeft, {})];
12342
12747
  }
12343
12748
  }), createComponent(index$d.Item, {
12344
12749
  onSelect: () => {
@@ -12346,10 +12751,68 @@ var init_Devtools = __esm({
12346
12751
  },
12347
12752
  as: "button",
12348
12753
  get ["class"]() {
12349
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
12754
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
12755
+ },
12756
+ get children() {
12757
+ return [_tmpl$103(), createComponent(ArrowRight, {})];
12758
+ }
12759
+ })];
12760
+ }
12761
+ });
12762
+ }
12763
+ })];
12764
+ }
12765
+ }), createComponent(index$d.Sub, {
12766
+ overlap: true,
12767
+ gutter: 8,
12768
+ shift: -4,
12769
+ get children() {
12770
+ return [createComponent(index$d.SubTrigger, {
12771
+ get ["class"]() {
12772
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
12773
+ },
12774
+ get children() {
12775
+ return [_tmpl$113(), createComponent(ChevronDown, {})];
12776
+ }
12777
+ }), createComponent(index$d.Portal, {
12778
+ get children() {
12779
+ return createComponent(index$d.SubContent, {
12780
+ get ["class"]() {
12781
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
12782
+ },
12783
+ get children() {
12784
+ return [createComponent(index$d.Item, {
12785
+ onSelect: () => {
12786
+ props.setLocalStore("theme_preference", "light");
12787
+ },
12788
+ as: "button",
12789
+ get ["class"]() {
12790
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
12791
+ },
12792
+ get children() {
12793
+ return [_tmpl$122(), createComponent(Sun, {})];
12794
+ }
12795
+ }), createComponent(index$d.Item, {
12796
+ onSelect: () => {
12797
+ props.setLocalStore("theme_preference", "dark");
12798
+ },
12799
+ as: "button",
12800
+ get ["class"]() {
12801
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
12802
+ },
12803
+ get children() {
12804
+ return [_tmpl$132(), createComponent(Moon, {})];
12805
+ }
12806
+ }), createComponent(index$d.Item, {
12807
+ onSelect: () => {
12808
+ props.setLocalStore("theme_preference", "system");
12809
+ },
12810
+ as: "button",
12811
+ get ["class"]() {
12812
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
12350
12813
  },
12351
12814
  get children() {
12352
- return [_tmpl$102(), createComponent(ArrowRight, {})];
12815
+ return [_tmpl$142(), createComponent(Monitor, {})];
12353
12816
  }
12354
12817
  })];
12355
12818
  }
@@ -12364,7 +12827,7 @@ var init_Devtools = __esm({
12364
12827
  })];
12365
12828
  }
12366
12829
  }), null);
12367
- insert(_el$33, createComponent(Key, {
12830
+ insert(_el$37, createComponent(Key, {
12368
12831
  by: (q) => q.queryHash,
12369
12832
  get each() {
12370
12833
  return queries();
@@ -12384,19 +12847,16 @@ var init_Devtools = __esm({
12384
12847
  }
12385
12848
  }), null);
12386
12849
  createRenderEffect((_p$) => {
12387
- const _v$ = clsx(styles.panel, styles[`panel-position-${position()}`], u`
12388
- flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
12389
- background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
12390
- `, {
12850
+ const _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
12391
12851
  [u`
12392
12852
  min-width: min-content;
12393
12853
  `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
12394
- }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles.dragHandle, styles[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles.closeBtn, styles[`closeBtn-position-${position()}`], "tsqd-minimize-btn"), _v$6 = clsx(styles.queriesContainer, panelWidth() < secondBreakpoint && selectedQueryHash() && u`
12854
+ }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn"), _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && selectedQueryHash() && u`
12395
12855
  height: 50%;
12396
12856
  max-height: 50%;
12397
- `, "tsqd-queries-container"), _v$7 = clsx(styles.row, "tsqd-header"), _v$8 = clsx(styles.logo, "tsqd-text-logo-container"), _v$9 = clsx(styles.tanstackLogo, "tsqd-text-logo-tanstack"), _v$10 = clsx(styles.queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$11 = clsx(styles.row, u`
12857
+ `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = clsx(styles().logo, "tsqd-text-logo-container"), _v$9 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$10 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$11 = clsx(styles().row, u`
12398
12858
  gap: ${tokens.size[2.5]};
12399
- `, "tsqd-filters-actions-container"), _v$12 = clsx(styles.filtersContainer, "tsqd-filters-container"), _v$13 = clsx(styles.filterInput, "tsqd-query-filter-textfield-container"), _v$14 = clsx(styles.filterSelect, "tsqd-query-filter-sort-container"), _v$15 = `Sort order ${sortOrder() === -1 ? "descending" : "ascending"}`, _v$16 = sortOrder() === -1, _v$17 = clsx(styles.actionsContainer, "tsqd-actions-container"), _v$18 = clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$19 = clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$20 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$21 = offline(), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = clsx(styles.overflowQueryContainer, "tsqd-queries-overflow-container");
12859
+ `, "tsqd-filters-actions-container"), _v$12 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$13 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$14 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$15 = `Sort order ${sortOrder() === -1 ? "descending" : "ascending"}`, _v$16 = sortOrder() === -1, _v$17 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$18 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$19 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$20 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$21 = offline(), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = clsx(styles().overflowQueryContainer, "tsqd-queries-overflow-container");
12400
12860
  _v$ !== _p$._v$ && className(_el$5, _p$._v$ = _v$);
12401
12861
  _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$5.style.setProperty("height", _v$2) : _el$5.style.removeProperty("height"));
12402
12862
  _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$5.style.setProperty("width", _v$3) : _el$5.style.removeProperty("width"));
@@ -12419,7 +12879,7 @@ var init_Devtools = __esm({
12419
12879
  _v$20 !== _p$._v$20 && setAttribute(_el$25, "aria-label", _p$._v$20 = _v$20);
12420
12880
  _v$21 !== _p$._v$21 && setAttribute(_el$25, "aria-pressed", _p$._v$21 = _v$21);
12421
12881
  _v$22 !== _p$._v$22 && setAttribute(_el$25, "title", _p$._v$22 = _v$22);
12422
- _v$23 !== _p$._v$23 && className(_el$32, _p$._v$23 = _v$23);
12882
+ _v$23 !== _p$._v$23 && className(_el$36, _p$._v$23 = _v$23);
12423
12883
  return _p$;
12424
12884
  }, {
12425
12885
  _v$: void 0,
@@ -12452,7 +12912,15 @@ var init_Devtools = __esm({
12452
12912
  })();
12453
12913
  };
12454
12914
  QueryRow = (props) => {
12455
- const styles = getStyles2();
12915
+ const theme = useTheme();
12916
+ const styles = createMemo(() => {
12917
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
12918
+ });
12919
+ const {
12920
+ colors,
12921
+ alpha
12922
+ } = tokens;
12923
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
12456
12924
  const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
12457
12925
  queryKey: props.query.queryKey
12458
12926
  })?.state);
@@ -12470,41 +12938,47 @@ var init_Devtools = __esm({
12470
12938
  observerCount: observers(),
12471
12939
  isStale: isStale()
12472
12940
  }));
12941
+ const getObserverCountColorStyles = () => {
12942
+ if (color() === "gray") {
12943
+ return u`
12944
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
12945
+ color: ${t2(colors[color()][700], colors[color()][300])};
12946
+ `;
12947
+ }
12948
+ return u`
12949
+ background-color: ${t2(colors[color()][200] + alpha[80], colors[color()][900])};
12950
+ color: ${t2(colors[color()][800], colors[color()][300])};
12951
+ `;
12952
+ };
12473
12953
  return createComponent(Show, {
12474
12954
  get when() {
12475
12955
  return queryState();
12476
12956
  },
12477
12957
  get children() {
12478
- const _el$36 = _tmpl$142(), _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
12479
- _el$36.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
12480
- insert(_el$37, observers);
12481
- insert(_el$38, () => props.query.queryHash);
12482
- insert(_el$36, createComponent(Show, {
12958
+ const _el$40 = _tmpl$182(), _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling;
12959
+ _el$40.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
12960
+ insert(_el$41, observers);
12961
+ insert(_el$42, () => props.query.queryHash);
12962
+ insert(_el$40, createComponent(Show, {
12483
12963
  get when() {
12484
12964
  return isDisabled();
12485
12965
  },
12486
12966
  get children() {
12487
- return _tmpl$132();
12967
+ return _tmpl$172();
12488
12968
  }
12489
12969
  }), null);
12490
12970
  createRenderEffect((_p$) => {
12491
- const _v$24 = clsx(styles.queryRow, selectedQueryHash() === props.query.queryHash && styles.selectedQueryRow, "tsqd-query-row"), _v$25 = `Query key ${props.query.queryHash}`, _v$26 = clsx(color() === "gray" ? u`
12492
- background-color: ${tokens.colors[color()][700]};
12493
- color: ${tokens.colors[color()][300]};
12494
- ` : u`
12495
- background-color: ${tokens.colors[color()][900]};
12496
- color: ${tokens.colors[color()][300]};
12497
- `, "tsqd-query-observer-count");
12498
- _v$24 !== _p$._v$24 && className(_el$36, _p$._v$24 = _v$24);
12499
- _v$25 !== _p$._v$25 && setAttribute(_el$36, "aria-label", _p$._v$25 = _v$25);
12500
- _v$26 !== _p$._v$26 && className(_el$37, _p$._v$26 = _v$26);
12971
+ const _v$24 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$25 = `Query key ${props.query.queryHash}`, _v$26 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
12972
+ _v$24 !== _p$._v$24 && className(_el$40, _p$._v$24 = _v$24);
12973
+ _v$25 !== _p$._v$25 && setAttribute(_el$40, "aria-label", _p$._v$25 = _v$25);
12974
+ _v$26 !== _p$._v$26 && className(_el$41, _p$._v$26 = _v$26);
12501
12975
  return _p$;
12502
12976
  }, {
12503
12977
  _v$24: void 0,
12504
12978
  _v$25: void 0,
12505
12979
  _v$26: void 0
12506
12980
  });
12507
- return _el$36;
12981
+ return _el$40;
12508
12982
  }
12509
12983
  });
12510
12984
  };
@@ -12514,50 +12988,61 @@ var init_Devtools = __esm({
12514
12988
  const fetching = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "fetching").length);
12515
12989
  const paused = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "paused").length);
12516
12990
  const inactive = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length);
12517
- const styles = getStyles2();
12991
+ const theme = useTheme();
12992
+ const styles = createMemo(() => {
12993
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
12994
+ });
12518
12995
  return (() => {
12519
- const _el$40 = _tmpl$23();
12520
- insert(_el$40, createComponent(QueryStatus, {
12996
+ const _el$44 = _tmpl$23();
12997
+ insert(_el$44, createComponent(QueryStatus, {
12521
12998
  label: "Fresh",
12522
12999
  color: "green",
12523
13000
  get count() {
12524
13001
  return fresh();
12525
13002
  }
12526
13003
  }), null);
12527
- insert(_el$40, createComponent(QueryStatus, {
13004
+ insert(_el$44, createComponent(QueryStatus, {
12528
13005
  label: "Fetching",
12529
13006
  color: "blue",
12530
13007
  get count() {
12531
13008
  return fetching();
12532
13009
  }
12533
13010
  }), null);
12534
- insert(_el$40, createComponent(QueryStatus, {
13011
+ insert(_el$44, createComponent(QueryStatus, {
12535
13012
  label: "Paused",
12536
13013
  color: "purple",
12537
13014
  get count() {
12538
13015
  return paused();
12539
13016
  }
12540
13017
  }), null);
12541
- insert(_el$40, createComponent(QueryStatus, {
13018
+ insert(_el$44, createComponent(QueryStatus, {
12542
13019
  label: "Stale",
12543
13020
  color: "yellow",
12544
13021
  get count() {
12545
13022
  return stale();
12546
13023
  }
12547
13024
  }), null);
12548
- insert(_el$40, createComponent(QueryStatus, {
13025
+ insert(_el$44, createComponent(QueryStatus, {
12549
13026
  label: "Inactive",
12550
13027
  color: "gray",
12551
13028
  get count() {
12552
13029
  return inactive();
12553
13030
  }
12554
13031
  }), null);
12555
- createRenderEffect(() => className(_el$40, clsx(styles.queryStatusContainer, "tsqd-query-status-container")));
12556
- return _el$40;
13032
+ createRenderEffect(() => className(_el$44, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
13033
+ return _el$44;
12557
13034
  })();
12558
13035
  };
12559
13036
  QueryStatus = (props) => {
12560
- const styles = getStyles2();
13037
+ const theme = useTheme();
13038
+ const styles = createMemo(() => {
13039
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
13040
+ });
13041
+ const {
13042
+ colors,
13043
+ alpha
13044
+ } = tokens;
13045
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
12561
13046
  let tagRef;
12562
13047
  const [mouseOver, setMouseOver] = createSignal(false);
12563
13048
  const [focused, setFocused] = createSignal(false);
@@ -12573,78 +13058,83 @@ var init_Devtools = __esm({
12573
13058
  return true;
12574
13059
  });
12575
13060
  return (() => {
12576
- const _el$41 = _tmpl$17(), _el$43 = _el$41.firstChild, _el$45 = _el$43.nextSibling;
13061
+ const _el$45 = _tmpl$21(), _el$47 = _el$45.firstChild, _el$49 = _el$47.nextSibling;
12577
13062
  const _ref$3 = tagRef;
12578
- typeof _ref$3 === "function" ? use(_ref$3, _el$41) : tagRef = _el$41;
12579
- _el$41.addEventListener("mouseleave", () => {
13063
+ typeof _ref$3 === "function" ? use(_ref$3, _el$45) : tagRef = _el$45;
13064
+ _el$45.addEventListener("mouseleave", () => {
12580
13065
  setMouseOver(false);
12581
13066
  setFocused(false);
12582
13067
  });
12583
- _el$41.addEventListener("mouseenter", () => setMouseOver(true));
12584
- _el$41.addEventListener("blur", () => setFocused(false));
12585
- _el$41.addEventListener("focus", () => setFocused(true));
12586
- spread(_el$41, mergeProps({
13068
+ _el$45.addEventListener("mouseenter", () => setMouseOver(true));
13069
+ _el$45.addEventListener("blur", () => setFocused(false));
13070
+ _el$45.addEventListener("focus", () => setFocused(true));
13071
+ spread(_el$45, mergeProps({
12587
13072
  get disabled() {
12588
13073
  return showLabel();
12589
13074
  },
12590
13075
  get ["class"]() {
12591
- return clsx(styles.queryStatusTag, !showLabel() && u`
13076
+ return clsx(styles().queryStatusTag, !showLabel() && u`
12592
13077
  cursor: pointer;
12593
13078
  &:hover {
12594
- background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
13079
+ background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
12595
13080
  }
12596
13081
  `, "tsqd-query-status-tag", `tsqd-query-status-tag-${props.label.toLowerCase()}`);
12597
13082
  }
12598
13083
  }, () => mouseOver() || focused() ? {
12599
13084
  "aria-describedby": "tsqd-status-tooltip"
12600
13085
  } : {}), false, true);
12601
- insert(_el$41, createComponent(Show, {
13086
+ insert(_el$45, createComponent(Show, {
12602
13087
  get when() {
12603
13088
  return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
12604
13089
  },
12605
13090
  get children() {
12606
- const _el$42 = _tmpl$15();
12607
- insert(_el$42, () => props.label);
12608
- createRenderEffect(() => className(_el$42, clsx(styles.statusTooltip, "tsqd-query-status-tooltip")));
12609
- return _el$42;
13091
+ const _el$46 = _tmpl$192();
13092
+ insert(_el$46, () => props.label);
13093
+ createRenderEffect(() => className(_el$46, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
13094
+ return _el$46;
12610
13095
  }
12611
- }), _el$43);
12612
- insert(_el$41, createComponent(Show, {
13096
+ }), _el$47);
13097
+ insert(_el$45, createComponent(Show, {
12613
13098
  get when() {
12614
13099
  return showLabel();
12615
13100
  },
12616
13101
  get children() {
12617
- const _el$44 = _tmpl$16();
12618
- insert(_el$44, () => props.label);
12619
- createRenderEffect(() => className(_el$44, clsx(styles.queryStatusTagLabel, "tsqd-query-status-tag-label")));
12620
- return _el$44;
13102
+ const _el$48 = _tmpl$20();
13103
+ insert(_el$48, () => props.label);
13104
+ createRenderEffect(() => className(_el$48, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
13105
+ return _el$48;
12621
13106
  }
12622
- }), _el$45);
12623
- insert(_el$45, () => props.count);
13107
+ }), _el$49);
13108
+ insert(_el$49, () => props.count);
12624
13109
  createRenderEffect((_p$) => {
12625
13110
  const _v$27 = clsx(u`
12626
13111
  width: ${tokens.size[1.5]};
12627
13112
  height: ${tokens.size[1.5]};
12628
13113
  border-radius: ${tokens.border.radius.full};
12629
13114
  background-color: ${tokens.colors[props.color][500]};
12630
- `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles.queryStatusCount, props.count > 0 && props.color !== "gray" ? u`
12631
- background-color: ${tokens.colors[props.color][900]};
12632
- color: ${tokens.colors[props.color][300]};
12633
- ` : u`
12634
- color: ${tokens.colors["gray"][400]};
12635
- `, "tsqd-query-status-tag-count");
12636
- _v$27 !== _p$._v$27 && className(_el$43, _p$._v$27 = _v$27);
12637
- _v$28 !== _p$._v$28 && className(_el$45, _p$._v$28 = _v$28);
13115
+ `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && u`
13116
+ background-color: ${t2(colors[props.color][100], colors[props.color][900])};
13117
+ color: ${t2(colors[props.color][700], colors[props.color][300])};
13118
+ `, "tsqd-query-status-tag-count");
13119
+ _v$27 !== _p$._v$27 && className(_el$47, _p$._v$27 = _v$27);
13120
+ _v$28 !== _p$._v$28 && className(_el$49, _p$._v$28 = _v$28);
12638
13121
  return _p$;
12639
13122
  }, {
12640
13123
  _v$27: void 0,
12641
13124
  _v$28: void 0
12642
13125
  });
12643
- return _el$41;
13126
+ return _el$45;
12644
13127
  })();
12645
13128
  };
12646
13129
  QueryDetails = () => {
12647
- const styles = getStyles2();
13130
+ const theme = useTheme();
13131
+ const styles = createMemo(() => {
13132
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
13133
+ });
13134
+ const {
13135
+ colors
13136
+ } = tokens;
13137
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
12648
13138
  const queryClient = useQueryDevtoolsContext().client;
12649
13139
  const [restoringLoading, setRestoringLoading] = createSignal(false);
12650
13140
  const errorTypes = createMemo(() => {
@@ -12701,24 +13191,38 @@ var init_Devtools = __esm({
12701
13191
  setRestoringLoading(false);
12702
13192
  }
12703
13193
  });
13194
+ const getQueryStatusColors = () => {
13195
+ if (color() === "gray") {
13196
+ return u`
13197
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
13198
+ color: ${t2(colors[color()][700], colors[color()][300])};
13199
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
13200
+ `;
13201
+ }
13202
+ return u`
13203
+ background-color: ${t2(colors[color()][100], colors[color()][900])};
13204
+ color: ${t2(colors[color()][700], colors[color()][300])};
13205
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
13206
+ `;
13207
+ };
12704
13208
  return createComponent(Show, {
12705
13209
  get when() {
12706
13210
  return createMemo(() => !!activeQuery())() && activeQueryState();
12707
13211
  },
12708
13212
  get children() {
12709
- const _el$46 = _tmpl$20(), _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling, _el$49 = _el$48.firstChild, _el$50 = _el$49.firstChild, _el$51 = _el$50.firstChild, _el$52 = _el$50.nextSibling, _el$53 = _el$49.nextSibling, _el$54 = _el$53.firstChild, _el$55 = _el$54.nextSibling, _el$56 = _el$53.nextSibling, _el$57 = _el$56.firstChild, _el$58 = _el$57.nextSibling, _el$59 = _el$48.nextSibling, _el$60 = _el$59.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$61.firstChild, _el$63 = _el$61.nextSibling, _el$64 = _el$63.firstChild, _el$65 = _el$63.nextSibling, _el$66 = _el$65.firstChild, _el$67 = _el$65.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$67.nextSibling, _el$70 = _el$69.firstChild, _el$71 = _el$70.nextSibling, _el$80 = _el$60.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling;
12710
- insert(_el$51, () => displayValue(activeQuery().queryKey, true));
12711
- insert(_el$52, statusLabel);
12712
- insert(_el$55, observerCount);
12713
- insert(_el$58, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
12714
- _el$61.$$click = handleRefetch;
12715
- _el$63.$$click = () => queryClient.invalidateQueries(activeQuery());
12716
- _el$65.$$click = () => queryClient.resetQueries(activeQuery());
12717
- _el$67.$$click = () => {
13213
+ const _el$50 = _tmpl$24(), _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$53.firstChild, _el$55 = _el$54.firstChild, _el$56 = _el$54.nextSibling, _el$57 = _el$53.nextSibling, _el$58 = _el$57.firstChild, _el$59 = _el$58.nextSibling, _el$60 = _el$57.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling, _el$63 = _el$52.nextSibling, _el$64 = _el$63.nextSibling, _el$65 = _el$64.firstChild, _el$66 = _el$65.firstChild, _el$67 = _el$65.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$67.nextSibling, _el$70 = _el$69.firstChild, _el$71 = _el$69.nextSibling, _el$72 = _el$71.firstChild, _el$73 = _el$71.nextSibling, _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling, _el$84 = _el$64.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling;
13214
+ insert(_el$55, () => displayValue(activeQuery().queryKey, true));
13215
+ insert(_el$56, statusLabel);
13216
+ insert(_el$59, observerCount);
13217
+ insert(_el$62, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
13218
+ _el$65.$$click = handleRefetch;
13219
+ _el$67.$$click = () => queryClient.invalidateQueries(activeQuery());
13220
+ _el$69.$$click = () => queryClient.resetQueries(activeQuery());
13221
+ _el$71.$$click = () => {
12718
13222
  queryClient.removeQueries(activeQuery());
12719
13223
  setSelectedQueryHash(null);
12720
13224
  };
12721
- _el$69.$$click = () => {
13225
+ _el$73.$$click = () => {
12722
13226
  if (activeQuery()?.state.data === void 0) {
12723
13227
  setRestoringLoading(true);
12724
13228
  restoreQueryAfterLoadingOrError();
@@ -12746,88 +13250,91 @@ var init_Devtools = __esm({
12746
13250
  });
12747
13251
  }
12748
13252
  };
12749
- insert(_el$69, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$71);
12750
- insert(_el$60, createComponent(Show, {
13253
+ insert(_el$73, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$75);
13254
+ insert(_el$64, createComponent(Show, {
12751
13255
  get when() {
12752
13256
  return errorTypes().length === 0 || queryStatus() === "error";
12753
13257
  },
12754
13258
  get children() {
12755
- const _el$72 = _tmpl$18(), _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling;
12756
- _el$72.$$click = () => {
13259
+ const _el$76 = _tmpl$222(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
13260
+ _el$76.$$click = () => {
12757
13261
  if (!activeQuery().state.error) {
12758
13262
  triggerError();
12759
13263
  } else {
12760
13264
  queryClient.resetQueries(activeQuery());
12761
13265
  }
12762
13266
  };
12763
- insert(_el$72, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$74);
13267
+ insert(_el$76, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$78);
12764
13268
  createRenderEffect((_p$) => {
12765
13269
  const _v$29 = clsx(u`
12766
- color: ${tokens.colors.red[400]};
13270
+ color: ${t2(colors.red[500], colors.red[400])};
12767
13271
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$30 = queryStatus() === "pending", _v$31 = u`
12768
- background-color: ${tokens.colors.red[400]};
13272
+ background-color: ${t2(colors.red[500], colors.red[400])};
12769
13273
  `;
12770
- _v$29 !== _p$._v$29 && className(_el$72, _p$._v$29 = _v$29);
12771
- _v$30 !== _p$._v$30 && (_el$72.disabled = _p$._v$30 = _v$30);
12772
- _v$31 !== _p$._v$31 && className(_el$73, _p$._v$31 = _v$31);
13274
+ _v$29 !== _p$._v$29 && className(_el$76, _p$._v$29 = _v$29);
13275
+ _v$30 !== _p$._v$30 && (_el$76.disabled = _p$._v$30 = _v$30);
13276
+ _v$31 !== _p$._v$31 && className(_el$77, _p$._v$31 = _v$31);
12773
13277
  return _p$;
12774
13278
  }, {
12775
13279
  _v$29: void 0,
12776
13280
  _v$30: void 0,
12777
13281
  _v$31: void 0
12778
13282
  });
12779
- return _el$72;
13283
+ return _el$76;
12780
13284
  }
12781
13285
  }), null);
12782
- insert(_el$60, createComponent(Show, {
13286
+ insert(_el$64, createComponent(Show, {
12783
13287
  get when() {
12784
13288
  return !(errorTypes().length === 0 || queryStatus() === "error");
12785
13289
  },
12786
13290
  get children() {
12787
- const _el$75 = _tmpl$19(), _el$76 = _el$75.firstChild, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling; _el$78.firstChild;
12788
- _el$78.addEventListener("change", (e2) => {
12789
- const errorType = errorTypes().find((t2) => t2.name === e2.currentTarget.value);
13291
+ const _el$79 = _tmpl$232(), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling; _el$82.firstChild;
13292
+ _el$82.addEventListener("change", (e2) => {
13293
+ const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
12790
13294
  triggerError(errorType);
12791
13295
  });
12792
- insert(_el$78, createComponent(For, {
13296
+ insert(_el$82, createComponent(For, {
12793
13297
  get each() {
12794
13298
  return errorTypes();
12795
13299
  },
12796
13300
  children: (errorType) => (() => {
12797
- const _el$84 = _tmpl$21();
12798
- insert(_el$84, () => errorType.name);
12799
- createRenderEffect(() => _el$84.value = errorType.name);
12800
- return _el$84;
13301
+ const _el$88 = _tmpl$25();
13302
+ insert(_el$88, () => errorType.name);
13303
+ createRenderEffect(() => _el$88.value = errorType.name);
13304
+ return _el$88;
12801
13305
  })()
12802
13306
  }), null);
12803
- insert(_el$75, createComponent(ChevronDown, {}), null);
13307
+ insert(_el$79, createComponent(ChevronDown, {}), null);
12804
13308
  createRenderEffect((_p$) => {
12805
- const _v$32 = clsx(styles.actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
13309
+ const _v$32 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
12806
13310
  background-color: ${tokens.colors.red[400]};
12807
13311
  `, _v$34 = queryStatus() === "pending";
12808
- _v$32 !== _p$._v$32 && className(_el$75, _p$._v$32 = _v$32);
12809
- _v$33 !== _p$._v$33 && className(_el$76, _p$._v$33 = _v$33);
12810
- _v$34 !== _p$._v$34 && (_el$78.disabled = _p$._v$34 = _v$34);
13312
+ _v$32 !== _p$._v$32 && className(_el$79, _p$._v$32 = _v$32);
13313
+ _v$33 !== _p$._v$33 && className(_el$80, _p$._v$33 = _v$33);
13314
+ _v$34 !== _p$._v$34 && (_el$82.disabled = _p$._v$34 = _v$34);
12811
13315
  return _p$;
12812
13316
  }, {
12813
13317
  _v$32: void 0,
12814
13318
  _v$33: void 0,
12815
13319
  _v$34: void 0
12816
13320
  });
12817
- return _el$75;
13321
+ return _el$79;
12818
13322
  }
12819
13323
  }), null);
12820
- _el$81.style.setProperty("padding", "0.5rem");
12821
- insert(_el$81, createComponent(Explorer, {
13324
+ _el$85.style.setProperty("padding", "0.5rem");
13325
+ insert(_el$85, createComponent(Explorer, {
12822
13326
  label: "Data",
12823
13327
  defaultExpanded: ["Data"],
12824
13328
  get value() {
12825
13329
  return activeQueryStateData();
12826
13330
  },
12827
- copyable: true
13331
+ editable: true,
13332
+ get activeQuery() {
13333
+ return activeQuery();
13334
+ }
12828
13335
  }));
12829
- _el$83.style.setProperty("padding", "0.5rem");
12830
- insert(_el$83, createComponent(Explorer, {
13336
+ _el$87.style.setProperty("padding", "0.5rem");
13337
+ insert(_el$87, createComponent(Explorer, {
12831
13338
  label: "Query",
12832
13339
  defaultExpanded: ["Query", "queryKey"],
12833
13340
  get value() {
@@ -12835,58 +13342,50 @@ var init_Devtools = __esm({
12835
13342
  }
12836
13343
  }));
12837
13344
  createRenderEffect((_p$) => {
12838
- const _v$35 = clsx(styles.detailsContainer, "tsqd-query-details-container"), _v$36 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$37 = clsx(styles.detailsBody, "tsqd-query-details-summary-container"), _v$38 = clsx(styles.queryDetailsStatus, color() === "gray" ? u`
12839
- background-color: ${tokens.colors[color()][700]};
12840
- color: ${tokens.colors[color()][300]};
12841
- border-color: ${tokens.colors[color()][600]};
12842
- ` : u`
12843
- background-color: ${tokens.colors[color()][900]};
12844
- color: ${tokens.colors[color()][300]};
12845
- border-color: ${tokens.colors[color()][600]};
12846
- `), _v$39 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles.actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
12847
- color: ${tokens.colors.blue[400]};
13345
+ const _v$35 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$36 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$37 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$38 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$39 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
13346
+ color: ${t2(colors.blue[600], colors.blue[400])};
12848
13347
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$42 = statusLabel() === "fetching", _v$43 = u`
12849
- background-color: ${tokens.colors.blue[400]};
13348
+ background-color: ${t2(colors.blue[600], colors.blue[400])};
12850
13349
  `, _v$44 = clsx(u`
12851
- color: ${tokens.colors.yellow[400]};
13350
+ color: ${t2(colors.yellow[600], colors.yellow[400])};
12852
13351
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$45 = queryStatus() === "pending", _v$46 = u`
12853
- background-color: ${tokens.colors.yellow[400]};
13352
+ background-color: ${t2(colors.yellow[600], colors.yellow[400])};
12854
13353
  `, _v$47 = clsx(u`
12855
- color: ${tokens.colors.gray[300]};
13354
+ color: ${t2(colors.gray[600], colors.gray[300])};
12856
13355
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$48 = queryStatus() === "pending", _v$49 = u`
12857
- background-color: ${tokens.colors.gray[400]};
13356
+ background-color: ${t2(colors.gray[600], colors.gray[400])};
12858
13357
  `, _v$50 = clsx(u`
12859
- color: ${tokens.colors.pink[400]};
13358
+ color: ${t2(colors.pink[500], colors.pink[400])};
12860
13359
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$51 = statusLabel() === "fetching", _v$52 = u`
12861
- background-color: ${tokens.colors.pink[400]};
13360
+ background-color: ${t2(colors.pink[500], colors.pink[400])};
12862
13361
  `, _v$53 = clsx(u`
12863
- color: ${tokens.colors.cyan[400]};
13362
+ color: ${t2(colors.cyan[500], colors.cyan[400])};
12864
13363
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$54 = restoringLoading(), _v$55 = u`
12865
- background-color: ${tokens.colors.cyan[400]};
12866
- `, _v$56 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles.detailsHeader, "tsqd-query-details-header");
12867
- _v$35 !== _p$._v$35 && className(_el$46, _p$._v$35 = _v$35);
12868
- _v$36 !== _p$._v$36 && className(_el$47, _p$._v$36 = _v$36);
12869
- _v$37 !== _p$._v$37 && className(_el$48, _p$._v$37 = _v$37);
12870
- _v$38 !== _p$._v$38 && className(_el$52, _p$._v$38 = _v$38);
12871
- _v$39 !== _p$._v$39 && className(_el$59, _p$._v$39 = _v$39);
12872
- _v$40 !== _p$._v$40 && className(_el$60, _p$._v$40 = _v$40);
12873
- _v$41 !== _p$._v$41 && className(_el$61, _p$._v$41 = _v$41);
12874
- _v$42 !== _p$._v$42 && (_el$61.disabled = _p$._v$42 = _v$42);
12875
- _v$43 !== _p$._v$43 && className(_el$62, _p$._v$43 = _v$43);
12876
- _v$44 !== _p$._v$44 && className(_el$63, _p$._v$44 = _v$44);
12877
- _v$45 !== _p$._v$45 && (_el$63.disabled = _p$._v$45 = _v$45);
12878
- _v$46 !== _p$._v$46 && className(_el$64, _p$._v$46 = _v$46);
12879
- _v$47 !== _p$._v$47 && className(_el$65, _p$._v$47 = _v$47);
12880
- _v$48 !== _p$._v$48 && (_el$65.disabled = _p$._v$48 = _v$48);
12881
- _v$49 !== _p$._v$49 && className(_el$66, _p$._v$49 = _v$49);
12882
- _v$50 !== _p$._v$50 && className(_el$67, _p$._v$50 = _v$50);
12883
- _v$51 !== _p$._v$51 && (_el$67.disabled = _p$._v$51 = _v$51);
12884
- _v$52 !== _p$._v$52 && className(_el$68, _p$._v$52 = _v$52);
12885
- _v$53 !== _p$._v$53 && className(_el$69, _p$._v$53 = _v$53);
12886
- _v$54 !== _p$._v$54 && (_el$69.disabled = _p$._v$54 = _v$54);
12887
- _v$55 !== _p$._v$55 && className(_el$70, _p$._v$55 = _v$55);
12888
- _v$56 !== _p$._v$56 && className(_el$80, _p$._v$56 = _v$56);
12889
- _v$57 !== _p$._v$57 && className(_el$82, _p$._v$57 = _v$57);
13364
+ background-color: ${t2(colors.cyan[500], colors.cyan[400])};
13365
+ `, _v$56 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles().detailsHeader, "tsqd-query-details-header");
13366
+ _v$35 !== _p$._v$35 && className(_el$50, _p$._v$35 = _v$35);
13367
+ _v$36 !== _p$._v$36 && className(_el$51, _p$._v$36 = _v$36);
13368
+ _v$37 !== _p$._v$37 && className(_el$52, _p$._v$37 = _v$37);
13369
+ _v$38 !== _p$._v$38 && className(_el$56, _p$._v$38 = _v$38);
13370
+ _v$39 !== _p$._v$39 && className(_el$63, _p$._v$39 = _v$39);
13371
+ _v$40 !== _p$._v$40 && className(_el$64, _p$._v$40 = _v$40);
13372
+ _v$41 !== _p$._v$41 && className(_el$65, _p$._v$41 = _v$41);
13373
+ _v$42 !== _p$._v$42 && (_el$65.disabled = _p$._v$42 = _v$42);
13374
+ _v$43 !== _p$._v$43 && className(_el$66, _p$._v$43 = _v$43);
13375
+ _v$44 !== _p$._v$44 && className(_el$67, _p$._v$44 = _v$44);
13376
+ _v$45 !== _p$._v$45 && (_el$67.disabled = _p$._v$45 = _v$45);
13377
+ _v$46 !== _p$._v$46 && className(_el$68, _p$._v$46 = _v$46);
13378
+ _v$47 !== _p$._v$47 && className(_el$69, _p$._v$47 = _v$47);
13379
+ _v$48 !== _p$._v$48 && (_el$69.disabled = _p$._v$48 = _v$48);
13380
+ _v$49 !== _p$._v$49 && className(_el$70, _p$._v$49 = _v$49);
13381
+ _v$50 !== _p$._v$50 && className(_el$71, _p$._v$50 = _v$50);
13382
+ _v$51 !== _p$._v$51 && (_el$71.disabled = _p$._v$51 = _v$51);
13383
+ _v$52 !== _p$._v$52 && className(_el$72, _p$._v$52 = _v$52);
13384
+ _v$53 !== _p$._v$53 && className(_el$73, _p$._v$53 = _v$53);
13385
+ _v$54 !== _p$._v$54 && (_el$73.disabled = _p$._v$54 = _v$54);
13386
+ _v$55 !== _p$._v$55 && className(_el$74, _p$._v$55 = _v$55);
13387
+ _v$56 !== _p$._v$56 && className(_el$84, _p$._v$56 = _v$56);
13388
+ _v$57 !== _p$._v$57 && className(_el$86, _p$._v$57 = _v$57);
12890
13389
  return _p$;
12891
13390
  }, {
12892
13391
  _v$35: void 0,
@@ -12913,7 +13412,7 @@ var init_Devtools = __esm({
12913
13412
  _v$56: void 0,
12914
13413
  _v$57: void 0
12915
13414
  });
12916
- return _el$46;
13415
+ return _el$50;
12917
13416
  }
12918
13417
  });
12919
13418
  };
@@ -12953,7 +13452,7 @@ var init_Devtools = __esm({
12953
13452
  });
12954
13453
  return value;
12955
13454
  };
12956
- getStyles2 = () => {
13455
+ stylesFactory2 = (theme) => {
12957
13456
  const {
12958
13457
  colors,
12959
13458
  font,
@@ -12962,6 +13461,7 @@ var init_Devtools = __esm({
12962
13461
  shadow,
12963
13462
  border
12964
13463
  } = tokens;
13464
+ const t2 = (light, dark) => theme === "light" ? light : dark;
12965
13465
  return {
12966
13466
  devtoolsBtn: u`
12967
13467
  z-index: 100000;
@@ -13023,8 +13523,6 @@ var init_Devtools = __esm({
13023
13523
  display: flex;
13024
13524
  gap: ${tokens.size[0.5]};
13025
13525
  & * {
13026
- font-family: 'Inter', sans-serif;
13027
- color: ${colors.gray[300]};
13028
13526
  box-sizing: border-box;
13029
13527
  text-transform: none;
13030
13528
  }
@@ -13051,7 +13549,7 @@ var init_Devtools = __esm({
13051
13549
  left: 0;
13052
13550
  max-height: 90%;
13053
13551
  min-height: 3.5rem;
13054
- border-bottom: ${colors.darkGray[300]} 1px solid;
13552
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13055
13553
  `,
13056
13554
  "panel-position-bottom": u`
13057
13555
  bottom: 0;
@@ -13059,20 +13557,20 @@ var init_Devtools = __esm({
13059
13557
  left: 0;
13060
13558
  max-height: 90%;
13061
13559
  min-height: 3.5rem;
13062
- border-top: ${colors.darkGray[300]} 1px solid;
13560
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13063
13561
  `,
13064
13562
  "panel-position-right": u`
13065
13563
  bottom: 0;
13066
13564
  right: 0;
13067
13565
  top: 0;
13068
- border-left: ${colors.darkGray[300]} 1px solid;
13566
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13069
13567
  max-width: 90%;
13070
13568
  `,
13071
13569
  "panel-position-left": u`
13072
13570
  bottom: 0;
13073
13571
  left: 0;
13074
13572
  top: 0;
13075
- border-right: ${colors.darkGray[300]} 1px solid;
13573
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13076
13574
  max-width: 90%;
13077
13575
  `,
13078
13576
  closeBtn: u`
@@ -13083,13 +13581,15 @@ var init_Devtools = __esm({
13083
13581
  align-items: center;
13084
13582
  justify-content: center;
13085
13583
  outline: none;
13584
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
13086
13585
  &:hover {
13087
- background-color: ${colors.darkGray[500]};
13586
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13088
13587
  }
13089
13588
  &:focus-visible {
13090
13589
  outline: 2px solid ${colors.blue[600]};
13091
13590
  }
13092
13591
  & svg {
13592
+ color: ${t2(colors.gray[600], colors.gray[400])};
13093
13593
  width: ${size2[2]};
13094
13594
  height: ${size2[2]};
13095
13595
  }
@@ -13098,11 +13598,10 @@ var init_Devtools = __esm({
13098
13598
  bottom: 0;
13099
13599
  right: ${size2[2]};
13100
13600
  transform: translate(0, 100%);
13101
- background-color: ${colors.darkGray[700]};
13102
- border-right: ${colors.darkGray[300]} 1px solid;
13103
- border-left: ${colors.darkGray[300]} 1px solid;
13601
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13602
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13104
13603
  border-top: none;
13105
- border-bottom: ${colors.darkGray[300]} 1px solid;
13604
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13106
13605
  border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
13107
13606
  padding: ${size2[0.5]} ${size2[1.5]} ${size2[1]} ${size2[1.5]};
13108
13607
 
@@ -13123,10 +13622,9 @@ var init_Devtools = __esm({
13123
13622
  top: 0;
13124
13623
  right: ${size2[2]};
13125
13624
  transform: translate(0, -100%);
13126
- background-color: ${colors.darkGray[700]};
13127
- border-right: ${colors.darkGray[300]} 1px solid;
13128
- border-left: ${colors.darkGray[300]} 1px solid;
13129
- border-top: ${colors.darkGray[300]} 1px solid;
13625
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13626
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13627
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13130
13628
  border-bottom: none;
13131
13629
  border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
13132
13630
  padding: ${size2[1]} ${size2[1.5]} ${size2[0.5]} ${size2[1.5]};
@@ -13144,11 +13642,10 @@ var init_Devtools = __esm({
13144
13642
  bottom: ${size2[2]};
13145
13643
  left: 0;
13146
13644
  transform: translate(-100%, 0);
13147
- background-color: ${colors.darkGray[700]};
13148
13645
  border-right: none;
13149
- border-left: ${colors.darkGray[300]} 1px solid;
13150
- border-top: ${colors.darkGray[300]} 1px solid;
13151
- border-bottom: ${colors.darkGray[300]} 1px solid;
13646
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13647
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13648
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13152
13649
  border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
13153
13650
  padding: ${size2[1.5]} ${size2[0.5]} ${size2[1.5]} ${size2[1]};
13154
13651
 
@@ -13168,11 +13665,10 @@ var init_Devtools = __esm({
13168
13665
  bottom: ${size2[2]};
13169
13666
  right: 0;
13170
13667
  transform: translate(100%, 0);
13171
- background-color: ${colors.darkGray[700]};
13172
13668
  border-left: none;
13173
- border-right: ${colors.darkGray[300]} 1px solid;
13174
- border-top: ${colors.darkGray[300]} 1px solid;
13175
- border-bottom: ${colors.darkGray[300]} 1px solid;
13669
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13670
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13671
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13176
13672
  border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
13177
13673
  padding: ${size2[1.5]} ${size2[1]} ${size2[1.5]} ${size2[0.5]};
13178
13674
 
@@ -13190,15 +13686,18 @@ var init_Devtools = __esm({
13190
13686
  `,
13191
13687
  queriesContainer: u`
13192
13688
  flex: 1 1 700px;
13193
- background-color: ${colors.darkGray[700]};
13689
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
13194
13690
  display: flex;
13195
13691
  flex-direction: column;
13692
+ & * {
13693
+ font-family: 'Inter', sans-serif;
13694
+ }
13196
13695
  `,
13197
13696
  dragHandle: u`
13198
13697
  position: absolute;
13199
13698
  transition: background-color 0.125s ease;
13200
13699
  &:hover {
13201
- background-color: ${colors.purple[400]}${alpha[90]};
13700
+ background-color: ${colors.purple[400]}${t2("", alpha[90])};
13202
13701
  }
13203
13702
  z-index: 4;
13204
13703
  `,
@@ -13232,7 +13731,7 @@ var init_Devtools = __esm({
13232
13731
  align-items: center;
13233
13732
  padding: ${tokens.size[2]} ${tokens.size[2.5]};
13234
13733
  gap: ${tokens.size[3]};
13235
- border-bottom: ${colors.darkGray[500]} 1px solid;
13734
+ border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
13236
13735
  align-items: center;
13237
13736
  & > button {
13238
13737
  padding: 0;
@@ -13259,11 +13758,15 @@ var init_Devtools = __esm({
13259
13758
  font-weight: ${font.weight.bold};
13260
13759
  line-height: ${font.lineHeight.xs};
13261
13760
  white-space: nowrap;
13761
+ color: ${t2(colors.gray[600], colors.gray[300])};
13262
13762
  `,
13263
13763
  queryFlavorLogo: u`
13264
13764
  font-weight: ${font.weight.semibold};
13265
13765
  font-size: ${font.size.xs};
13266
- background: linear-gradient(to right, #dd524b, #e9a03b);
13766
+ background: linear-gradient(
13767
+ to right,
13768
+ ${t2("#ea4037, #ff9b11", "#dd524b, #e9a03b")}
13769
+ );
13267
13770
  background-clip: text;
13268
13771
  -webkit-background-clip: text;
13269
13772
  line-height: 1;
@@ -13278,14 +13781,17 @@ var init_Devtools = __esm({
13278
13781
  queryStatusTag: u`
13279
13782
  display: flex;
13280
13783
  gap: ${tokens.size[1.5]};
13281
- background: ${colors.darkGray[500]};
13784
+ box-sizing: border-box;
13785
+ height: ${tokens.size[6.5]};
13786
+ background: ${t2(colors.gray[50], colors.darkGray[500])};
13787
+ color: ${t2(colors.gray[700], colors.gray[300])};
13282
13788
  border-radius: ${tokens.border.radius.sm};
13283
13789
  font-size: ${font.size.sm};
13284
13790
  padding: ${tokens.size[1]};
13285
- padding-left: ${tokens.size[2]};
13791
+ padding-left: ${tokens.size[1.5]};
13286
13792
  align-items: center;
13287
13793
  font-weight: ${font.weight.medium};
13288
- border: none;
13794
+ border: ${t2("1px solid " + colors.gray[300], "1px solid transparent")};
13289
13795
  user-select: none;
13290
13796
  position: relative;
13291
13797
  &:focus-visible {
@@ -13302,8 +13808,8 @@ var init_Devtools = __esm({
13302
13808
  display: flex;
13303
13809
  align-items: center;
13304
13810
  justify-content: center;
13305
- color: ${colors.gray[400]};
13306
- background-color: ${colors.darkGray[300]};
13811
+ color: ${t2(colors.gray[500], colors.gray[400])};
13812
+ background-color: ${t2(colors.gray[200], colors.darkGray[300])};
13307
13813
  border-radius: 2px;
13308
13814
  font-variant-numeric: tabular-nums;
13309
13815
  height: ${tokens.size[4.5]};
@@ -13311,15 +13817,15 @@ var init_Devtools = __esm({
13311
13817
  statusTooltip: u`
13312
13818
  position: absolute;
13313
13819
  z-index: 1;
13314
- background-color: ${colors.darkGray[500]};
13820
+ background-color: ${t2(colors.gray[50], colors.darkGray[500])};
13315
13821
  top: 100%;
13316
13822
  left: 50%;
13317
13823
  transform: translate(-50%, calc(${tokens.size[2]}));
13318
13824
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
13319
- border-radius: ${tokens.border.radius.md};
13825
+ border-radius: ${tokens.border.radius.sm};
13320
13826
  font-size: ${font.size.xs};
13321
- border: 1px solid ${colors.gray[600]};
13322
- color: ${tokens.colors["gray"][300]};
13827
+ border: 1px solid ${t2(colors.gray[400], colors.gray[600])};
13828
+ color: ${t2(colors["gray"][600], colors["gray"][300])};
13323
13829
 
13324
13830
  &::before {
13325
13831
  top: 0px;
@@ -13328,7 +13834,8 @@ var init_Devtools = __esm({
13328
13834
  left: 50%;
13329
13835
  transform: translate(-50%, -100%);
13330
13836
  position: absolute;
13331
- border-color: transparent transparent ${colors.gray[600]} transparent;
13837
+ border-color: transparent transparent
13838
+ ${t2(colors.gray[400], colors.gray[600])} transparent;
13332
13839
  border-style: solid;
13333
13840
  border-width: 7px;
13334
13841
  /* transform: rotate(180deg); */
@@ -13339,16 +13846,13 @@ var init_Devtools = __esm({
13339
13846
  content: ' ';
13340
13847
  display: block;
13341
13848
  left: 50%;
13342
- transform: translate(-50%, calc(-100% + 2.5px));
13849
+ transform: translate(-50%, calc(-100% + 2px));
13343
13850
  position: absolute;
13344
- border-color: transparent transparent ${colors.darkGray[500]}
13345
- transparent;
13851
+ border-color: transparent transparent
13852
+ ${t2(colors.gray[100], colors.darkGray[500])} transparent;
13346
13853
  border-style: solid;
13347
13854
  border-width: 7px;
13348
13855
  }
13349
- `,
13350
- selectedQueryRow: u`
13351
- background-color: ${colors.darkGray[500]};
13352
13856
  `,
13353
13857
  filtersContainer: u`
13354
13858
  display: flex;
@@ -13358,47 +13862,52 @@ var init_Devtools = __esm({
13358
13862
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
13359
13863
  padding-right: ${tokens.size[1.5]};
13360
13864
  border-radius: ${tokens.border.radius.sm};
13361
- background-color: ${colors.darkGray[400]};
13865
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13866
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
13867
+ color: ${t2(colors.gray[700], colors.gray[300])};
13362
13868
  font-size: ${font.size.xs};
13363
13869
  display: flex;
13364
13870
  align-items: center;
13365
13871
  line-height: ${font.lineHeight.sm};
13366
13872
  gap: ${tokens.size[1.5]};
13367
13873
  max-width: 160px;
13368
- border: 1px solid ${colors.darkGray[200]};
13369
13874
  &:focus-visible {
13370
13875
  outline-offset: 2px;
13371
13876
  border-radius: ${border.radius.xs};
13372
13877
  outline: 2px solid ${colors.blue[800]};
13373
13878
  }
13879
+ & svg {
13880
+ color: ${t2(colors.gray[500], colors.gray[400])};
13881
+ }
13374
13882
  }
13375
13883
  `,
13376
13884
  filterInput: u`
13377
- padding: ${tokens.size[0.5]} ${tokens.size[2]};
13885
+ padding: ${size2[0.5]} ${size2[2]};
13378
13886
  border-radius: ${tokens.border.radius.sm};
13379
- background-color: ${colors.darkGray[400]};
13887
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13380
13888
  display: flex;
13381
13889
  box-sizing: content-box;
13382
13890
  align-items: center;
13383
13891
  gap: ${tokens.size[1.5]};
13384
13892
  max-width: 160px;
13385
13893
  min-width: 100px;
13386
- border: 1px solid ${colors.darkGray[200]};
13894
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
13387
13895
  height: min-content;
13896
+ color: ${t2(colors.gray[600], colors.gray[400])};
13388
13897
  & > svg {
13389
- width: ${tokens.size[3]};
13390
- height: ${tokens.size[3]};
13898
+ width: ${size2[3]};
13899
+ height: ${size2[3]};
13391
13900
  }
13392
13901
  & input {
13393
13902
  font-size: ${font.size.xs};
13394
13903
  width: 100%;
13395
- background-color: ${colors.darkGray[400]};
13904
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13396
13905
  border: none;
13397
13906
  padding: 0;
13398
13907
  line-height: ${font.lineHeight.sm};
13399
- color: ${colors.gray[300]};
13908
+ color: ${t2(colors.gray[700], colors.gray[300])};
13400
13909
  &::placeholder {
13401
- color: ${colors.gray[300]};
13910
+ color: ${t2(colors.gray[700], colors.gray[300])};
13402
13911
  }
13403
13912
  &:focus {
13404
13913
  outline: none;
@@ -13414,24 +13923,26 @@ var init_Devtools = __esm({
13414
13923
  filterSelect: u`
13415
13924
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
13416
13925
  border-radius: ${tokens.border.radius.sm};
13417
- background-color: ${colors.darkGray[400]};
13926
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13418
13927
  display: flex;
13419
13928
  align-items: center;
13420
13929
  gap: ${tokens.size[1.5]};
13421
13930
  box-sizing: content-box;
13422
13931
  max-width: 160px;
13423
- border: 1px solid ${colors.darkGray[200]};
13932
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
13424
13933
  height: min-content;
13425
13934
  & > svg {
13935
+ color: ${t2(colors.gray[600], colors.gray[400])};
13426
13936
  width: ${tokens.size[2]};
13427
13937
  height: ${tokens.size[2]};
13428
13938
  }
13429
13939
  & > select {
13430
13940
  appearance: none;
13941
+ color: ${t2(colors.gray[700], colors.gray[300])};
13431
13942
  min-width: 100px;
13432
13943
  line-height: ${font.lineHeight.sm};
13433
13944
  font-size: ${font.size.xs};
13434
- background-color: ${colors.darkGray[400]};
13945
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13435
13946
  border: none;
13436
13947
  &:focus {
13437
13948
  outline: none;
@@ -13449,7 +13960,8 @@ var init_Devtools = __esm({
13449
13960
  `,
13450
13961
  actionsBtn: u`
13451
13962
  border-radius: ${tokens.border.radius.sm};
13452
- background-color: ${colors.darkGray[400]};
13963
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13964
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
13453
13965
  width: 1.625rem;
13454
13966
  height: 1.625rem;
13455
13967
  justify-content: center;
@@ -13457,13 +13969,13 @@ var init_Devtools = __esm({
13457
13969
  align-items: center;
13458
13970
  gap: ${tokens.size[1.5]};
13459
13971
  max-width: 160px;
13460
- border: 1px solid ${colors.darkGray[200]};
13461
13972
  cursor: pointer;
13462
13973
  padding: 0;
13463
13974
  &:hover {
13464
- background-color: ${colors.darkGray[500]};
13975
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13465
13976
  }
13466
13977
  & svg {
13978
+ color: ${t2(colors.gray[700], colors.gray[300])};
13467
13979
  width: ${tokens.size[3]};
13468
13980
  height: ${tokens.size[3]};
13469
13981
  }
@@ -13472,6 +13984,12 @@ var init_Devtools = __esm({
13472
13984
  border-radius: ${border.radius.xs};
13473
13985
  outline: 2px solid ${colors.blue[800]};
13474
13986
  }
13987
+ `,
13988
+ actionsBtnOffline: u`
13989
+ & svg {
13990
+ stroke: ${t2(colors.yellow[700], colors.yellow[500])};
13991
+ fill: ${t2(colors.yellow[700], colors.yellow[500])};
13992
+ }
13475
13993
  `,
13476
13994
  overflowQueryContainer: u`
13477
13995
  flex: 1;
@@ -13485,9 +14003,11 @@ var init_Devtools = __esm({
13485
14003
  display: flex;
13486
14004
  align-items: center;
13487
14005
  padding: 0;
13488
- background-color: inherit;
13489
14006
  border: none;
13490
14007
  cursor: pointer;
14008
+ color: ${t2(colors.gray[700], colors.gray[300])};
14009
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
14010
+ line-height: 1;
13491
14011
  &:focus {
13492
14012
  outline: none;
13493
14013
  }
@@ -13497,7 +14017,7 @@ var init_Devtools = __esm({
13497
14017
  outline: 2px solid ${colors.blue[800]};
13498
14018
  }
13499
14019
  &:hover .tsqd-query-hash {
13500
- background-color: ${colors.darkGray[600]};
14020
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
13501
14021
  }
13502
14022
 
13503
14023
  & .tsqd-query-observer-count {
@@ -13512,7 +14032,7 @@ var init_Devtools = __esm({
13512
14032
  font-weight: ${font.weight.medium};
13513
14033
  border-bottom-width: 1px;
13514
14034
  border-bottom-style: solid;
13515
- border-bottom: 1px solid ${colors.darkGray[700]};
14035
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[700])};
13516
14036
  }
13517
14037
  & .tsqd-query-hash {
13518
14038
  user-select: text;
@@ -13523,7 +14043,7 @@ var init_Devtools = __esm({
13523
14043
  flex: 1;
13524
14044
  padding: ${tokens.size[1]} ${tokens.size[2]};
13525
14045
  font-family: 'Menlo', 'Fira Code', monospace;
13526
- border-bottom: 1px solid ${colors.darkGray[400]};
14046
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
13527
14047
  text-align: left;
13528
14048
  text-overflow: clip;
13529
14049
  word-break: break-word;
@@ -13534,15 +14054,20 @@ var init_Devtools = __esm({
13534
14054
  display: flex;
13535
14055
  align-items: center;
13536
14056
  padding: 0 ${tokens.size[2]};
13537
- color: ${colors.gray[300]};
13538
- background-color: ${colors.darkGray[600]};
13539
- border-bottom: 1px solid ${colors.darkGray[400]};
14057
+ color: ${t2(colors.gray[800], colors.gray[300])};
14058
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
14059
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
13540
14060
  font-size: ${font.size.xs};
13541
14061
  }
14062
+ `,
14063
+ selectedQueryRow: u`
14064
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13542
14065
  `,
13543
14066
  detailsContainer: u`
13544
14067
  flex: 1 1 700px;
13545
- background-color: ${colors.darkGray[700]};
14068
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
14069
+ color: ${t2(colors.gray[700], colors.gray[300])};
14070
+ font-family: 'Inter', sans-serif;
13546
14071
  display: flex;
13547
14072
  flex-direction: column;
13548
14073
  overflow-y: auto;
@@ -13550,10 +14075,11 @@ var init_Devtools = __esm({
13550
14075
  text-align: left;
13551
14076
  `,
13552
14077
  detailsHeader: u`
14078
+ font-family: 'Inter', sans-serif;
13553
14079
  position: sticky;
13554
14080
  top: 0;
13555
14081
  z-index: 2;
13556
- background-color: ${colors.darkGray[600]};
14082
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
13557
14083
  padding: ${tokens.size[1.5]} ${tokens.size[2]};
13558
14084
  font-weight: ${font.weight.medium};
13559
14085
  font-size: ${font.size.xs};
@@ -13586,6 +14112,10 @@ var init_Devtools = __esm({
13586
14112
  font-size: ${font.size.xs};
13587
14113
  line-height: ${font.lineHeight.xs};
13588
14114
  }
14115
+
14116
+ & pre {
14117
+ margin: 0;
14118
+ }
13589
14119
  `,
13590
14120
  queryDetailsStatus: u`
13591
14121
  border: 1px solid ${colors.darkGray[200]};
@@ -13600,12 +14130,13 @@ var init_Devtools = __esm({
13600
14130
  gap: ${tokens.size[2]};
13601
14131
  padding: 0px ${tokens.size[2]};
13602
14132
  & > button {
14133
+ font-family: 'Inter', sans-serif;
13603
14134
  font-size: ${font.size.xs};
13604
14135
  padding: ${tokens.size[1]} ${tokens.size[2]};
13605
14136
  display: flex;
13606
14137
  border-radius: ${tokens.border.radius.sm};
13607
- border: 1px solid ${colors.darkGray[400]};
13608
- background-color: ${colors.darkGray[600]};
14138
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
14139
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
13609
14140
  align-items: center;
13610
14141
  gap: ${tokens.size[2]};
13611
14142
  font-weight: ${font.weight.medium};
@@ -13617,7 +14148,7 @@ var init_Devtools = __esm({
13617
14148
  outline: 2px solid ${colors.blue[800]};
13618
14149
  }
13619
14150
  &:hover {
13620
- background-color: ${colors.darkGray[500]};
14151
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13621
14152
  }
13622
14153
 
13623
14154
  &:disabled {
@@ -13638,17 +14169,17 @@ var init_Devtools = __esm({
13638
14169
  display: flex;
13639
14170
  border-radius: ${tokens.border.radius.sm};
13640
14171
  overflow: hidden;
13641
- border: 1px solid ${colors.darkGray[400]};
13642
- background-color: ${colors.darkGray[600]};
14172
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
14173
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
13643
14174
  align-items: center;
13644
14175
  gap: ${tokens.size[2]};
13645
14176
  font-weight: ${font.weight.medium};
13646
14177
  line-height: ${font.lineHeight.sm};
13647
- color: ${tokens.colors.red[400]};
14178
+ color: ${t2(colors.red[500], colors.red[400])};
13648
14179
  cursor: pointer;
13649
14180
  position: relative;
13650
14181
  &:hover {
13651
- background-color: ${colors.darkGray[500]};
14182
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13652
14183
  }
13653
14184
  & > span {
13654
14185
  width: ${size2[1.5]};
@@ -13689,10 +14220,10 @@ var init_Devtools = __esm({
13689
14220
  flex-direction: column;
13690
14221
  gap: ${size2[0.5]};
13691
14222
  border-radius: ${tokens.border.radius.sm};
13692
- border: 1px solid ${colors.gray[700]};
13693
- background-color: ${colors.darkGray[600]};
14223
+ border: 1px solid ${t2(colors.gray[300], colors.gray[700])};
14224
+ background-color: ${t2(colors.gray[50], colors.darkGray[600])};
13694
14225
  font-size: ${font.size.xs};
13695
- color: ${colors.gray[300]};
14226
+ color: ${t2(colors.gray[700], colors.gray[300])};
13696
14227
  z-index: 99999;
13697
14228
  min-width: 120px;
13698
14229
  padding: ${size2[0.5]};
@@ -13702,17 +14233,19 @@ var init_Devtools = __esm({
13702
14233
  align-items: center;
13703
14234
  justify-content: space-between;
13704
14235
  border-radius: ${tokens.border.radius.xs};
13705
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
14236
+ padding: ${tokens.size[1]} ${tokens.size[1]};
13706
14237
  cursor: pointer;
13707
14238
  background-color: transparent;
13708
14239
  border: none;
14240
+ color: ${t2(colors.gray[700], colors.gray[300])};
13709
14241
  & svg {
14242
+ color: ${t2(colors.gray[600], colors.gray[400])};
13710
14243
  transform: rotate(-90deg);
13711
14244
  width: ${tokens.size[2]};
13712
14245
  height: ${tokens.size[2]};
13713
14246
  }
13714
14247
  &:hover {
13715
- background-color: ${colors.darkGray[500]};
14248
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13716
14249
  }
13717
14250
  &:focus-visible {
13718
14251
  outline-offset: 2px;
@@ -13724,33 +14257,48 @@ var init_Devtools = __esm({
13724
14257
  }
13725
14258
  `,
13726
14259
  settingsMenuHeader: u`
13727
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
14260
+ padding: ${tokens.size[1]} ${tokens.size[1]};
13728
14261
  font-weight: ${font.weight.medium};
13729
- border-bottom: 1px solid ${colors.darkGray[400]};
13730
- color: ${colors.gray[400]};
14262
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
14263
+ color: ${t2(colors.gray[500], colors.gray[400])};
13731
14264
  font-size: ${font.size["xs"]};
13732
14265
  `,
13733
14266
  settingsSubButton: u`
13734
14267
  display: flex;
13735
14268
  align-items: center;
13736
14269
  justify-content: space-between;
13737
- color: ${colors.gray[300]};
14270
+ color: ${t2(colors.gray[700], colors.gray[300])};
13738
14271
  font-size: ${font.size["xs"]};
13739
14272
  border-radius: ${tokens.border.radius.xs};
13740
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
14273
+ padding: ${tokens.size[1]} ${tokens.size[1]};
13741
14274
  cursor: pointer;
13742
14275
  background-color: transparent;
13743
14276
  border: none;
14277
+ & svg {
14278
+ color: ${t2(colors.gray[600], colors.gray[400])};
14279
+ }
13744
14280
  &:hover {
13745
- background-color: ${colors.darkGray[500]};
14281
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13746
14282
  }
13747
14283
  &:focus-visible {
13748
14284
  outline-offset: 2px;
13749
14285
  outline: 2px solid ${colors.blue[800]};
13750
14286
  }
14287
+ `,
14288
+ themeSelectedButton: u`
14289
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
14290
+ color: ${t2(colors.purple[700], colors.purple[300])};
14291
+ & svg {
14292
+ color: ${t2(colors.purple[700], colors.purple[300])};
14293
+ }
14294
+ &:hover {
14295
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
14296
+ }
13751
14297
  `
13752
14298
  };
13753
14299
  };
14300
+ lightStyles2 = stylesFactory2("light");
14301
+ darkStyles2 = stylesFactory2("dark");
13754
14302
  delegateEvents(["click", "mousedown", "input"]);
13755
14303
  }
13756
14304
  });