@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/dev.cjs CHANGED
@@ -11355,10 +11355,11 @@ function getQueryStatusColor({
11355
11355
  function getQueryStatusColorByLabel(label) {
11356
11356
  return label === "fresh" ? "green" : label === "stale" ? "yellow" : label === "paused" ? "purple" : label === "inactive" ? "gray" : "blue";
11357
11357
  }
11358
- var displayValue, getStatusRank, queryHashSort, dateSort, statusAndDateSort, sortFns, convertRemToPixels;
11358
+ var displayValue, getStatusRank, queryHashSort, dateSort, statusAndDateSort, sortFns, convertRemToPixels, getPreferredColorScheme, updateNestedDataByPath, deleteNestedDataByPath;
11359
11359
  var init_utils = __esm({
11360
11360
  "src/utils.tsx"() {
11361
11361
  init_esm2();
11362
+ init_solid();
11362
11363
  displayValue = (value, beautify = false) => {
11363
11364
  const {
11364
11365
  json
@@ -11382,6 +11383,99 @@ var init_utils = __esm({
11382
11383
  convertRemToPixels = (rem) => {
11383
11384
  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
11384
11385
  };
11386
+ getPreferredColorScheme = () => {
11387
+ const [colorScheme, setColorScheme] = createSignal("dark");
11388
+ onMount(() => {
11389
+ const query = window.matchMedia("(prefers-color-scheme: dark)");
11390
+ setColorScheme(query.matches ? "dark" : "light");
11391
+ const listener = (e2) => {
11392
+ setColorScheme(e2.matches ? "dark" : "light");
11393
+ };
11394
+ query.addEventListener("change", listener);
11395
+ onCleanup(() => query.removeEventListener("change", listener));
11396
+ });
11397
+ return colorScheme;
11398
+ };
11399
+ updateNestedDataByPath = (oldData, updatePath2, value) => {
11400
+ if (updatePath2.length === 0) {
11401
+ return value;
11402
+ }
11403
+ if (oldData instanceof Map) {
11404
+ const newData = new Map(oldData);
11405
+ if (updatePath2.length === 1) {
11406
+ newData.set(updatePath2[0], value);
11407
+ return newData;
11408
+ }
11409
+ const [head, ...tail] = updatePath2;
11410
+ newData.set(head, updateNestedDataByPath(newData.get(head), tail, value));
11411
+ return newData;
11412
+ }
11413
+ if (oldData instanceof Set) {
11414
+ const setAsArray = updateNestedDataByPath(Array.from(oldData), updatePath2, value);
11415
+ return new Set(setAsArray);
11416
+ }
11417
+ if (Array.isArray(oldData)) {
11418
+ const newData = [...oldData];
11419
+ if (updatePath2.length === 1) {
11420
+ newData[updatePath2[0]] = value;
11421
+ return newData;
11422
+ }
11423
+ const [head, ...tail] = updatePath2;
11424
+ newData[head] = updateNestedDataByPath(newData[head], tail, value);
11425
+ return newData;
11426
+ }
11427
+ if (oldData instanceof Object) {
11428
+ const newData = {
11429
+ ...oldData
11430
+ };
11431
+ if (updatePath2.length === 1) {
11432
+ newData[updatePath2[0]] = value;
11433
+ return newData;
11434
+ }
11435
+ const [head, ...tail] = updatePath2;
11436
+ newData[head] = updateNestedDataByPath(newData[head], tail, value);
11437
+ return newData;
11438
+ }
11439
+ return oldData;
11440
+ };
11441
+ deleteNestedDataByPath = (oldData, deletePath) => {
11442
+ if (oldData instanceof Map) {
11443
+ const newData = new Map(oldData);
11444
+ if (deletePath.length === 1) {
11445
+ newData.delete(deletePath[0]);
11446
+ return newData;
11447
+ }
11448
+ const [head, ...tail] = deletePath;
11449
+ newData.set(head, deleteNestedDataByPath(newData.get(head), tail));
11450
+ return newData;
11451
+ }
11452
+ if (oldData instanceof Set) {
11453
+ const setAsArray = deleteNestedDataByPath(Array.from(oldData), deletePath);
11454
+ return new Set(setAsArray);
11455
+ }
11456
+ if (Array.isArray(oldData)) {
11457
+ const newData = [...oldData];
11458
+ if (deletePath.length === 1) {
11459
+ return newData.filter((_, idx) => idx.toString() !== deletePath[0]);
11460
+ }
11461
+ const [head, ...tail] = deletePath;
11462
+ newData[head] = deleteNestedDataByPath(newData[head], tail);
11463
+ return newData;
11464
+ }
11465
+ if (oldData instanceof Object) {
11466
+ const newData = {
11467
+ ...oldData
11468
+ };
11469
+ if (deletePath.length === 1) {
11470
+ delete newData[deletePath[0]];
11471
+ return newData;
11472
+ }
11473
+ const [head, ...tail] = deletePath;
11474
+ newData[head] = deleteNestedDataByPath(newData[head], tail);
11475
+ return newData;
11476
+ }
11477
+ return oldData;
11478
+ };
11385
11479
  }
11386
11480
  });
11387
11481
 
@@ -11415,58 +11509,112 @@ function ArrowRight() {
11415
11509
  return _el$7;
11416
11510
  })();
11417
11511
  }
11418
- function Wifi() {
11512
+ function Sun() {
11419
11513
  return _tmpl$6();
11420
11514
  }
11421
- function Offline() {
11422
- return (() => {
11423
- const _el$9 = _tmpl$7();
11424
- createRenderEffect((_p$) => {
11425
- const _v$ = tokens.colors.yellow[500], _v$2 = tokens.colors.yellow[500];
11426
- _v$ !== _p$._v$ && setAttribute(_el$9, "stroke", _p$._v$ = _v$);
11427
- _v$2 !== _p$._v$2 && setAttribute(_el$9, "fill", _p$._v$2 = _v$2);
11428
- return _p$;
11429
- }, {
11430
- _v$: void 0,
11431
- _v$2: void 0
11432
- });
11433
- return _el$9;
11434
- })();
11515
+ function Moon() {
11516
+ return _tmpl$7();
11435
11517
  }
11436
- function Settings() {
11518
+ function Monitor() {
11437
11519
  return _tmpl$8();
11438
11520
  }
11439
- function Copier() {
11521
+ function Wifi() {
11440
11522
  return _tmpl$9();
11441
11523
  }
11442
- function CopiedCopier() {
11524
+ function Offline() {
11443
11525
  return _tmpl$10();
11444
11526
  }
11445
- function ErrorCopier() {
11527
+ function Settings() {
11446
11528
  return _tmpl$11();
11447
11529
  }
11448
- function TanstackLogo() {
11530
+ function Copier() {
11449
11531
  return _tmpl$12();
11450
11532
  }
11451
- var _tmpl$, _tmpl$2, _tmpl$3, _tmpl$4, _tmpl$5, _tmpl$6, _tmpl$7, _tmpl$8, _tmpl$9, _tmpl$10, _tmpl$11, _tmpl$12;
11533
+ function CopiedCopier(props) {
11534
+ return (() => {
11535
+ const _el$15 = _tmpl$13(), _el$16 = _el$15.firstChild;
11536
+ createRenderEffect(() => setAttribute(_el$16, "stroke", props.theme === "dark" ? "#12B76A" : "#027A48"));
11537
+ return _el$15;
11538
+ })();
11539
+ }
11540
+ function ErrorCopier() {
11541
+ return _tmpl$14();
11542
+ }
11543
+ function List() {
11544
+ return _tmpl$15();
11545
+ }
11546
+ function Check(props) {
11547
+ return [createComponent(Show, {
11548
+ get when() {
11549
+ return props.checked;
11550
+ },
11551
+ get children() {
11552
+ const _el$19 = _tmpl$13(), _el$20 = _el$19.firstChild;
11553
+ createRenderEffect(() => setAttribute(_el$20, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
11554
+ return _el$19;
11555
+ }
11556
+ }), createComponent(Show, {
11557
+ get when() {
11558
+ return !props.checked;
11559
+ },
11560
+ get children() {
11561
+ const _el$21 = _tmpl$16(), _el$22 = _el$21.firstChild;
11562
+ createRenderEffect(() => setAttribute(_el$22, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
11563
+ return _el$21;
11564
+ }
11565
+ })];
11566
+ }
11567
+ function TanstackLogo() {
11568
+ return _tmpl$17();
11569
+ }
11570
+ 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;
11452
11571
  var init_icons = __esm({
11453
11572
  "src/icons/index.tsx"() {
11454
11573
  init_web();
11455
11574
  init_web();
11456
11575
  init_web();
11457
- init_theme();
11458
- _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">`);
11459
- _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">`);
11460
- _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">`);
11461
- _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">`);
11462
- _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">`);
11463
- _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">`);
11464
- _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">`);
11465
- _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">`);
11466
- _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">`);
11467
- _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">`);
11468
- _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">`);
11469
- _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">`);
11576
+ init_web();
11577
+ init_solid();
11578
+ _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">`);
11579
+ _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">`);
11580
+ _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">`);
11581
+ _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">`);
11582
+ _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">`);
11583
+ _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">`);
11584
+ _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">`);
11585
+ _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">`);
11586
+ _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">`);
11587
+ _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">`);
11588
+ _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">`);
11589
+ _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">`);
11590
+ _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">`);
11591
+ _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">`);
11592
+ _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">`);
11593
+ _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">`);
11594
+ _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">`);
11595
+ }
11596
+ });
11597
+
11598
+ // src/Context.ts
11599
+ function useQueryDevtoolsContext() {
11600
+ return useContext(QueryDevtoolsContext);
11601
+ }
11602
+ function useTheme() {
11603
+ return useContext(ThemeContext);
11604
+ }
11605
+ var QueryDevtoolsContext, ThemeContext;
11606
+ var init_Context = __esm({
11607
+ "src/Context.ts"() {
11608
+ init_solid();
11609
+ QueryDevtoolsContext = createContext({
11610
+ client: void 0,
11611
+ onlineManager: void 0,
11612
+ queryFlavor: "",
11613
+ version: ""
11614
+ });
11615
+ ThemeContext = createContext(
11616
+ () => "dark"
11617
+ );
11470
11618
  }
11471
11619
  });
11472
11620
 
@@ -11486,7 +11634,11 @@ function isIterable(x) {
11486
11634
  return Symbol.iterator in x;
11487
11635
  }
11488
11636
  function Explorer(props) {
11489
- const styles = getStyles();
11637
+ const theme = useTheme();
11638
+ const styles = createMemo(() => {
11639
+ return theme() === "dark" ? darkStyles : lightStyles;
11640
+ });
11641
+ const queryClient = useQueryDevtoolsContext().client;
11490
11642
  const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
11491
11643
  const toggleExpanded = () => setExpanded((old) => !old);
11492
11644
  const [expandedPages, setExpandedPages] = createSignal([]);
@@ -11526,49 +11678,79 @@ function Explorer(props) {
11526
11678
  return typeof props.value;
11527
11679
  });
11528
11680
  const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
11681
+ const currentDataPath = props.dataPath ?? [];
11529
11682
  return (() => {
11530
- const _el$3 = _tmpl$42();
11531
- insert(_el$3, createComponent(Show, {
11683
+ const _el$6 = _tmpl$62();
11684
+ insert(_el$6, createComponent(Show, {
11532
11685
  get when() {
11533
11686
  return subEntryPages().length;
11534
11687
  },
11535
11688
  get children() {
11536
11689
  return [(() => {
11537
- 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;
11538
- _el$5.$$click = () => toggleExpanded();
11539
- insert(_el$5, createComponent(Expander, {
11690
+ 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;
11691
+ _el$8.$$click = () => toggleExpanded();
11692
+ insert(_el$8, createComponent(Expander, {
11540
11693
  get expanded() {
11541
11694
  return expanded();
11542
11695
  }
11543
- }), _el$6);
11544
- insert(_el$7, () => props.label);
11545
- insert(_el$9, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$10);
11546
- insert(_el$9, () => subEntries().length, _el$10);
11547
- insert(_el$9, () => subEntries().length > 1 ? `items` : `item`, null);
11548
- insert(_el$4, createComponent(Show, {
11696
+ }), _el$9);
11697
+ insert(_el$10, () => props.label);
11698
+ insert(_el$12, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$13);
11699
+ insert(_el$12, () => subEntries().length, _el$13);
11700
+ insert(_el$12, () => subEntries().length > 1 ? `items` : `item`, null);
11701
+ insert(_el$7, createComponent(Show, {
11549
11702
  get when() {
11550
- return props.copyable;
11703
+ return props.editable;
11551
11704
  },
11552
11705
  get children() {
11553
- return createComponent(CopyButton, {
11706
+ const _el$14 = _tmpl$62();
11707
+ insert(_el$14, createComponent(CopyButton, {
11554
11708
  get value() {
11555
11709
  return props.value;
11556
11710
  }
11557
- });
11711
+ }), null);
11712
+ insert(_el$14, createComponent(Show, {
11713
+ get when() {
11714
+ return props.itemsDeletable && props.activeQuery !== void 0;
11715
+ },
11716
+ get children() {
11717
+ return createComponent(DeleteItemButton, {
11718
+ get activeQuery() {
11719
+ return props.activeQuery;
11720
+ },
11721
+ dataPath: currentDataPath
11722
+ });
11723
+ }
11724
+ }), null);
11725
+ insert(_el$14, createComponent(Show, {
11726
+ get when() {
11727
+ return type() === "array" && props.activeQuery !== void 0;
11728
+ },
11729
+ get children() {
11730
+ return createComponent(ClearArrayButton, {
11731
+ get activeQuery() {
11732
+ return props.activeQuery;
11733
+ },
11734
+ dataPath: currentDataPath
11735
+ });
11736
+ }
11737
+ }), null);
11738
+ createRenderEffect(() => className(_el$14, styles().actions));
11739
+ return _el$14;
11558
11740
  }
11559
11741
  }), null);
11560
11742
  createRenderEffect((_p$) => {
11561
- const _v$3 = styles.expanderButtonContainer, _v$4 = styles.expanderButton, _v$5 = styles.info;
11562
- _v$3 !== _p$._v$3 && className(_el$4, _p$._v$3 = _v$3);
11563
- _v$4 !== _p$._v$4 && className(_el$5, _p$._v$4 = _v$4);
11564
- _v$5 !== _p$._v$5 && className(_el$9, _p$._v$5 = _v$5);
11743
+ const _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
11744
+ _v$3 !== _p$._v$3 && className(_el$7, _p$._v$3 = _v$3);
11745
+ _v$4 !== _p$._v$4 && className(_el$8, _p$._v$4 = _v$4);
11746
+ _v$5 !== _p$._v$5 && className(_el$12, _p$._v$5 = _v$5);
11565
11747
  return _p$;
11566
11748
  }, {
11567
11749
  _v$3: void 0,
11568
11750
  _v$4: void 0,
11569
11751
  _v$5: void 0
11570
11752
  });
11571
- return _el$4;
11753
+ return _el$7;
11572
11754
  })(), createComponent(Show, {
11573
11755
  get when() {
11574
11756
  return expanded();
@@ -11579,8 +11761,8 @@ function Explorer(props) {
11579
11761
  return subEntryPages().length === 1;
11580
11762
  },
11581
11763
  get children() {
11582
- const _el$11 = _tmpl$42();
11583
- insert(_el$11, createComponent(Key, {
11764
+ const _el$15 = _tmpl$62();
11765
+ insert(_el$15, createComponent(Key, {
11584
11766
  get each() {
11585
11767
  return subEntries();
11586
11768
  },
@@ -11596,42 +11778,51 @@ function Explorer(props) {
11596
11778
  get value() {
11597
11779
  return entry().value;
11598
11780
  },
11599
- get copyable() {
11600
- return props.copyable;
11781
+ get editable() {
11782
+ return props.editable;
11783
+ },
11784
+ get dataPath() {
11785
+ return [...currentDataPath, entry().label];
11786
+ },
11787
+ get activeQuery() {
11788
+ return props.activeQuery;
11789
+ },
11790
+ get itemsDeletable() {
11791
+ return type() === "array" || type() === "Iterable" || type() === "object";
11601
11792
  }
11602
11793
  });
11603
11794
  }
11604
11795
  }));
11605
- createRenderEffect(() => className(_el$11, styles.subEntry));
11606
- return _el$11;
11796
+ createRenderEffect(() => className(_el$15, styles().subEntry));
11797
+ return _el$15;
11607
11798
  }
11608
11799
  }), createComponent(Show, {
11609
11800
  get when() {
11610
11801
  return subEntryPages().length > 1;
11611
11802
  },
11612
11803
  get children() {
11613
- const _el$12 = _tmpl$42();
11614
- insert(_el$12, createComponent(Index, {
11804
+ const _el$16 = _tmpl$62();
11805
+ insert(_el$16, createComponent(Index, {
11615
11806
  get each() {
11616
11807
  return subEntryPages();
11617
11808
  },
11618
11809
  children: (entries3, index) => (() => {
11619
- 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;
11620
- _el$20.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
11621
- insert(_el$20, createComponent(Expander, {
11810
+ 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;
11811
+ _el$24.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
11812
+ insert(_el$24, createComponent(Expander, {
11622
11813
  get expanded() {
11623
11814
  return expandedPages().includes(index);
11624
11815
  }
11625
- }), _el$21);
11626
- insert(_el$20, index * 100, _el$25);
11627
- insert(_el$20, index * 100 + 100 - 1, _el$26);
11628
- insert(_el$19, createComponent(Show, {
11816
+ }), _el$25);
11817
+ insert(_el$24, index * 100, _el$29);
11818
+ insert(_el$24, index * 100 + 100 - 1, _el$30);
11819
+ insert(_el$23, createComponent(Show, {
11629
11820
  get when() {
11630
11821
  return expandedPages().includes(index);
11631
11822
  },
11632
11823
  get children() {
11633
- const _el$27 = _tmpl$42();
11634
- insert(_el$27, createComponent(Key, {
11824
+ const _el$31 = _tmpl$62();
11825
+ insert(_el$31, createComponent(Key, {
11635
11826
  get each() {
11636
11827
  return entries3();
11637
11828
  },
@@ -11646,61 +11837,136 @@ function Explorer(props) {
11646
11837
  get value() {
11647
11838
  return entry().value;
11648
11839
  },
11649
- get copyable() {
11650
- return props.copyable;
11840
+ get editable() {
11841
+ return props.editable;
11842
+ },
11843
+ get dataPath() {
11844
+ return [...currentDataPath, entry().label];
11845
+ },
11846
+ get activeQuery() {
11847
+ return props.activeQuery;
11651
11848
  }
11652
11849
  })
11653
11850
  }));
11654
- createRenderEffect(() => className(_el$27, styles.subEntry));
11655
- return _el$27;
11851
+ createRenderEffect(() => className(_el$31, styles().subEntry));
11852
+ return _el$31;
11656
11853
  }
11657
11854
  }), null);
11658
11855
  createRenderEffect((_p$) => {
11659
- const _v$8 = styles.entry, _v$9 = styles.expanderButton;
11660
- _v$8 !== _p$._v$8 && className(_el$19, _p$._v$8 = _v$8);
11661
- _v$9 !== _p$._v$9 && className(_el$20, _p$._v$9 = _v$9);
11856
+ const _v$10 = styles().entry, _v$11 = styles().expanderButton;
11857
+ _v$10 !== _p$._v$10 && className(_el$23, _p$._v$10 = _v$10);
11858
+ _v$11 !== _p$._v$11 && className(_el$24, _p$._v$11 = _v$11);
11662
11859
  return _p$;
11663
11860
  }, {
11664
- _v$8: void 0,
11665
- _v$9: void 0
11861
+ _v$10: void 0,
11862
+ _v$11: void 0
11666
11863
  });
11667
- return _el$18;
11864
+ return _el$22;
11668
11865
  })()
11669
11866
  }));
11670
- createRenderEffect(() => className(_el$12, styles.subEntry));
11671
- return _el$12;
11867
+ createRenderEffect(() => className(_el$16, styles().subEntry));
11868
+ return _el$16;
11672
11869
  }
11673
11870
  })];
11674
11871
  }
11675
11872
  })];
11676
11873
  }
11677
11874
  }), null);
11678
- insert(_el$3, createComponent(Show, {
11875
+ insert(_el$6, createComponent(Show, {
11679
11876
  get when() {
11680
11877
  return subEntryPages().length === 0;
11681
11878
  },
11682
11879
  get children() {
11683
- 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;
11684
- _el$13.style.setProperty("line-height", "1.125rem");
11685
- insert(_el$14, () => props.label, _el$15);
11686
- insert(_el$17, () => displayValue(props.value));
11880
+ const _el$17 = _tmpl$102(), _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild;
11881
+ insert(_el$18, () => props.label, _el$19);
11882
+ insert(_el$17, createComponent(Show, {
11883
+ get when() {
11884
+ return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number" || type() === "boolean");
11885
+ },
11886
+ get fallback() {
11887
+ return (() => {
11888
+ const _el$32 = _tmpl$92();
11889
+ insert(_el$32, () => displayValue(props.value));
11890
+ createRenderEffect(() => className(_el$32, styles().value));
11891
+ return _el$32;
11892
+ })();
11893
+ },
11894
+ get children() {
11895
+ return [createComponent(Show, {
11896
+ get when() {
11897
+ return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number");
11898
+ },
11899
+ get children() {
11900
+ const _el$20 = _tmpl$82();
11901
+ _el$20.addEventListener("change", (changeEvent) => {
11902
+ const oldData = props.activeQuery.state.data;
11903
+ const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
11904
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
11905
+ });
11906
+ createRenderEffect((_p$) => {
11907
+ const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles().value, styles().editableInput);
11908
+ _v$6 !== _p$._v$6 && setAttribute(_el$20, "type", _p$._v$6 = _v$6);
11909
+ _v$7 !== _p$._v$7 && className(_el$20, _p$._v$7 = _v$7);
11910
+ return _p$;
11911
+ }, {
11912
+ _v$6: void 0,
11913
+ _v$7: void 0
11914
+ });
11915
+ createRenderEffect(() => _el$20.value = props.value);
11916
+ return _el$20;
11917
+ }
11918
+ }), createComponent(Show, {
11919
+ get when() {
11920
+ return type() === "boolean";
11921
+ },
11922
+ get children() {
11923
+ const _el$21 = _tmpl$92();
11924
+ insert(_el$21, createComponent(ToggleValueButton, {
11925
+ get activeQuery() {
11926
+ return props.activeQuery;
11927
+ },
11928
+ dataPath: currentDataPath,
11929
+ get value() {
11930
+ return props.value;
11931
+ }
11932
+ }), null);
11933
+ insert(_el$21, () => displayValue(props.value), null);
11934
+ createRenderEffect(() => className(_el$21, clsx(styles().value, styles().actions, styles().editableInput)));
11935
+ return _el$21;
11936
+ }
11937
+ })];
11938
+ }
11939
+ }), null);
11940
+ insert(_el$17, createComponent(Show, {
11941
+ get when() {
11942
+ return props.editable && props.itemsDeletable && props.activeQuery !== void 0;
11943
+ },
11944
+ get children() {
11945
+ return createComponent(DeleteItemButton, {
11946
+ get activeQuery() {
11947
+ return props.activeQuery;
11948
+ },
11949
+ dataPath: currentDataPath
11950
+ });
11951
+ }
11952
+ }), null);
11687
11953
  createRenderEffect((_p$) => {
11688
- const _v$6 = styles.label, _v$7 = styles.value;
11689
- _v$6 !== _p$._v$6 && className(_el$14, _p$._v$6 = _v$6);
11690
- _v$7 !== _p$._v$7 && className(_el$17, _p$._v$7 = _v$7);
11954
+ const _v$8 = styles().row, _v$9 = styles().label;
11955
+ _v$8 !== _p$._v$8 && className(_el$17, _p$._v$8 = _v$8);
11956
+ _v$9 !== _p$._v$9 && className(_el$18, _p$._v$9 = _v$9);
11691
11957
  return _p$;
11692
11958
  }, {
11693
- _v$6: void 0,
11694
- _v$7: void 0
11959
+ _v$8: void 0,
11960
+ _v$9: void 0
11695
11961
  });
11696
- return _el$13;
11962
+ return _el$17;
11697
11963
  }
11698
11964
  }), null);
11699
- createRenderEffect(() => className(_el$3, styles.entry));
11700
- return _el$3;
11965
+ createRenderEffect(() => className(_el$6, styles().entry));
11966
+ return _el$6;
11701
11967
  })();
11702
11968
  }
11703
- var _tmpl$13, _tmpl$22, _tmpl$32, _tmpl$42, _tmpl$52, _tmpl$62, Expander, CopyButton, getStyles;
11969
+ 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;
11704
11970
  var init_Explorer = __esm({
11705
11971
  "src/Explorer.tsx"() {
11706
11972
  init_web();
@@ -11711,6 +11977,7 @@ var init_Explorer = __esm({
11711
11977
  init_web();
11712
11978
  init_web();
11713
11979
  init_web();
11980
+ init_web();
11714
11981
  init_esm2();
11715
11982
  init_goober_modern();
11716
11983
  init_clsx();
@@ -11719,17 +11986,26 @@ var init_Explorer = __esm({
11719
11986
  init_theme();
11720
11987
  init_utils();
11721
11988
  init_icons();
11722
- _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">`);
11723
- _tmpl$22 = /* @__PURE__ */ template(`<button>`);
11724
- _tmpl$32 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
11725
- _tmpl$42 = /* @__PURE__ */ template(`<div>`);
11726
- _tmpl$52 = /* @__PURE__ */ template(`<div><span>:</span> <span>`);
11727
- _tmpl$62 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
11989
+ init_Context();
11990
+ _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">`);
11991
+ _tmpl$22 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
11992
+ _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items" aria-label="Remove all items">`);
11993
+ _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item" aria-label="Delete item">`);
11994
+ _tmpl$52 = /* @__PURE__ */ template(`<button title="Toggle value" aria-label="Toggle value">`);
11995
+ _tmpl$62 = /* @__PURE__ */ template(`<div>`);
11996
+ _tmpl$72 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
11997
+ _tmpl$82 = /* @__PURE__ */ template(`<input>`);
11998
+ _tmpl$92 = /* @__PURE__ */ template(`<span>`);
11999
+ _tmpl$102 = /* @__PURE__ */ template(`<div><span>:`);
12000
+ _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
11728
12001
  Expander = (props) => {
11729
- const styles = getStyles();
12002
+ const theme = useTheme();
12003
+ const styles = createMemo(() => {
12004
+ return theme() === "dark" ? darkStyles : lightStyles;
12005
+ });
11730
12006
  return (() => {
11731
- const _el$ = _tmpl$13();
11732
- createRenderEffect(() => className(_el$, clsx(styles.expander, u`
12007
+ const _el$ = _tmpl$18();
12008
+ createRenderEffect(() => className(_el$, clsx(styles().expander, u`
11733
12009
  transform: rotate(${props.expanded ? 90 : 0}deg);
11734
12010
  `, props.expanded && u`
11735
12011
  & svg {
@@ -11740,7 +12016,10 @@ var init_Explorer = __esm({
11740
12016
  })();
11741
12017
  };
11742
12018
  CopyButton = (props) => {
11743
- const styles = getStyles();
12019
+ const theme = useTheme();
12020
+ const styles = createMemo(() => {
12021
+ return theme() === "dark" ? darkStyles : lightStyles;
12022
+ });
11744
12023
  const [copyState, setCopyState] = createSignal("NoCopy");
11745
12024
  return (() => {
11746
12025
  const _el$2 = _tmpl$22();
@@ -11772,7 +12051,11 @@ var init_Explorer = __esm({
11772
12051
  return copyState() === "SuccessCopy";
11773
12052
  },
11774
12053
  get children() {
11775
- return createComponent(CopiedCopier, {});
12054
+ return createComponent(CopiedCopier, {
12055
+ get theme() {
12056
+ return theme();
12057
+ }
12058
+ });
11776
12059
  }
11777
12060
  }), createComponent(Match, {
11778
12061
  get when() {
@@ -11785,7 +12068,7 @@ var init_Explorer = __esm({
11785
12068
  }
11786
12069
  }));
11787
12070
  createRenderEffect((_p$) => {
11788
- const _v$ = styles.copyButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
12071
+ const _v$ = styles().actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
11789
12072
  _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
11790
12073
  _v$2 !== _p$._v$2 && setAttribute(_el$2, "aria-label", _p$._v$2 = _v$2);
11791
12074
  return _p$;
@@ -11796,13 +12079,78 @@ var init_Explorer = __esm({
11796
12079
  return _el$2;
11797
12080
  })();
11798
12081
  };
11799
- getStyles = () => {
12082
+ ClearArrayButton = (props) => {
12083
+ const theme = useTheme();
12084
+ const styles = createMemo(() => {
12085
+ return theme() === "dark" ? darkStyles : lightStyles;
12086
+ });
12087
+ const queryClient = useQueryDevtoolsContext().client;
12088
+ return (() => {
12089
+ const _el$3 = _tmpl$32();
12090
+ _el$3.$$click = () => {
12091
+ const oldData = props.activeQuery.state.data;
12092
+ const newData = updateNestedDataByPath(oldData, props.dataPath, []);
12093
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
12094
+ };
12095
+ insert(_el$3, createComponent(List, {}));
12096
+ createRenderEffect(() => className(_el$3, styles().actionButton));
12097
+ return _el$3;
12098
+ })();
12099
+ };
12100
+ DeleteItemButton = (props) => {
12101
+ const theme = useTheme();
12102
+ const styles = createMemo(() => {
12103
+ return theme() === "dark" ? darkStyles : lightStyles;
12104
+ });
12105
+ const queryClient = useQueryDevtoolsContext().client;
12106
+ return (() => {
12107
+ const _el$4 = _tmpl$42();
12108
+ _el$4.$$click = () => {
12109
+ const oldData = props.activeQuery.state.data;
12110
+ const newData = deleteNestedDataByPath(oldData, props.dataPath);
12111
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
12112
+ };
12113
+ insert(_el$4, createComponent(Trash, {}));
12114
+ createRenderEffect(() => className(_el$4, clsx(styles().actionButton)));
12115
+ return _el$4;
12116
+ })();
12117
+ };
12118
+ ToggleValueButton = (props) => {
12119
+ const theme = useTheme();
12120
+ const styles = createMemo(() => {
12121
+ return theme() === "dark" ? darkStyles : lightStyles;
12122
+ });
12123
+ const queryClient = useQueryDevtoolsContext().client;
12124
+ return (() => {
12125
+ const _el$5 = _tmpl$52();
12126
+ _el$5.$$click = () => {
12127
+ const oldData = props.activeQuery.state.data;
12128
+ const newData = updateNestedDataByPath(oldData, props.dataPath, !props.value);
12129
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
12130
+ };
12131
+ insert(_el$5, createComponent(Check, {
12132
+ get theme() {
12133
+ return theme();
12134
+ },
12135
+ get checked() {
12136
+ return props.value;
12137
+ }
12138
+ }));
12139
+ createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
12140
+ width: ${tokens.size[3.5]};
12141
+ height: ${tokens.size[3.5]};
12142
+ `)));
12143
+ return _el$5;
12144
+ })();
12145
+ };
12146
+ stylesFactory = (theme) => {
11800
12147
  const {
11801
12148
  colors,
11802
12149
  font,
11803
12150
  size: size2,
11804
12151
  border
11805
12152
  } = tokens;
12153
+ const t2 = (light, dark) => theme === "light" ? light : dark;
11806
12154
  return {
11807
12155
  entry: u`
11808
12156
  & * {
@@ -11816,7 +12164,7 @@ var init_Explorer = __esm({
11816
12164
  subEntry: u`
11817
12165
  margin: 0 0 0 0.5em;
11818
12166
  padding-left: 0.75em;
11819
- border-left: 2px solid ${colors.darkGray[400]};
12167
+ border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
11820
12168
  /* outline: 1px solid ${colors.teal[400]}; */
11821
12169
  `,
11822
12170
  expander: u`
@@ -11837,6 +12185,7 @@ var init_Explorer = __esm({
11837
12185
  align-items: center;
11838
12186
  line-height: 1.125rem;
11839
12187
  min-height: 1.125rem;
12188
+ gap: ${size2[2]};
11840
12189
  `,
11841
12190
  expanderButton: u`
11842
12191
  cursor: pointer;
@@ -11864,19 +12213,45 @@ var init_Explorer = __esm({
11864
12213
  }
11865
12214
  `,
11866
12215
  info: u`
11867
- color: ${colors.gray[500]};
12216
+ color: ${t2(colors.gray[500], colors.gray[500])};
11868
12217
  font-size: ${font.size.xs};
11869
12218
  margin-left: ${size2[1]};
11870
12219
  /* outline: 1px solid ${colors.yellow[400]}; */
11871
12220
  `,
11872
12221
  label: u`
11873
- color: ${colors.gray[300]};
12222
+ color: ${t2(colors.gray[700], colors.gray[300])};
11874
12223
  `,
11875
12224
  value: u`
11876
- color: ${colors.purple[400]};
12225
+ color: ${t2(colors.purple[600], colors.purple[400])};
12226
+ flex-grow: 1;
12227
+ `,
12228
+ actions: u`
12229
+ display: inline-flex;
12230
+ gap: ${size2[2]};
12231
+ align-items: center;
12232
+ `,
12233
+ row: u`
12234
+ display: inline-flex;
12235
+ gap: ${size2[2]};
12236
+ width: 100%;
12237
+ margin-bottom: ${size2[0.5]};
12238
+ line-height: 1.125rem;
12239
+ align-items: center;
12240
+ `,
12241
+ editableInput: u`
12242
+ border: none;
12243
+ padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
12244
+ flex-grow: 1;
12245
+ border-radius: ${border.radius.xs};
12246
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
12247
+
12248
+ &:hover {
12249
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
12250
+ }
11877
12251
  `,
11878
- copyButton: u`
12252
+ actionButton: u`
11879
12253
  background-color: transparent;
12254
+ color: ${t2(colors.gray[500], colors.gray[500])};
11880
12255
  border: none;
11881
12256
  display: inline-flex;
11882
12257
  padding: 0px;
@@ -11886,11 +12261,10 @@ var init_Explorer = __esm({
11886
12261
  width: ${size2[3]};
11887
12262
  height: ${size2[3]};
11888
12263
  position: relative;
11889
- left: ${size2[2]};
11890
12264
  z-index: 1;
11891
12265
 
11892
- &:hover svg .copier {
11893
- stroke: ${colors.gray[500]} !important;
12266
+ &:hover svg {
12267
+ color: ${t2(colors.gray[600], colors.gray[400])};
11894
12268
  }
11895
12269
 
11896
12270
  &:focus-visible {
@@ -11901,27 +12275,12 @@ var init_Explorer = __esm({
11901
12275
  `
11902
12276
  };
11903
12277
  };
12278
+ lightStyles = stylesFactory("light");
12279
+ darkStyles = stylesFactory("dark");
11904
12280
  delegateEvents(["click"]);
11905
12281
  }
11906
12282
  });
11907
12283
 
11908
- // src/Context.ts
11909
- function useQueryDevtoolsContext() {
11910
- return useContext(QueryDevtoolsContext);
11911
- }
11912
- var QueryDevtoolsContext;
11913
- var init_Context = __esm({
11914
- "src/Context.ts"() {
11915
- init_solid();
11916
- QueryDevtoolsContext = createContext({
11917
- client: void 0,
11918
- onlineManager: void 0,
11919
- queryFlavor: "",
11920
- version: ""
11921
- });
11922
- }
11923
- });
11924
-
11925
12284
  // src/fonts.ts
11926
12285
  var loadFonts;
11927
12286
  var init_fonts = __esm({
@@ -11946,7 +12305,7 @@ __export(Devtools_exports, {
11946
12305
  QueryStatusCount: () => QueryStatusCount,
11947
12306
  default: () => Devtools_default
11948
12307
  });
11949
- 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;
12308
+ 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;
11950
12309
  var init_Devtools = __esm({
11951
12310
  "src/Devtools.tsx"() {
11952
12311
  init_web();
@@ -11975,32 +12334,37 @@ var init_Devtools = __esm({
11975
12334
  init_Explorer();
11976
12335
  init_Context();
11977
12336
  init_fonts();
11978
- _tmpl$14 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
12337
+ _tmpl$19 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
11979
12338
  _tmpl$23 = /* @__PURE__ */ template(`<div>`);
11980
12339
  _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
11981
12340
  _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
11982
12341
  _tmpl$53 = /* @__PURE__ */ template(`<div>Settings`);
11983
12342
  _tmpl$63 = /* @__PURE__ */ template(`<span>Position`);
11984
- _tmpl$72 = /* @__PURE__ */ template(`<span>Top`);
11985
- _tmpl$82 = /* @__PURE__ */ template(`<span>Bottom`);
11986
- _tmpl$92 = /* @__PURE__ */ template(`<span>Left`);
11987
- _tmpl$102 = /* @__PURE__ */ template(`<span>Right`);
11988
- _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">`);
11989
- _tmpl$122 = /* @__PURE__ */ template(`<option>Sort by `);
11990
- _tmpl$132 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
11991
- _tmpl$142 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
11992
- _tmpl$15 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
11993
- _tmpl$16 = /* @__PURE__ */ template(`<span>`);
11994
- _tmpl$17 = /* @__PURE__ */ template(`<button><span></span><span>`);
11995
- _tmpl$18 = /* @__PURE__ */ template(`<button><span></span> Error`);
11996
- _tmpl$19 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
11997
- _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">`);
11998
- _tmpl$21 = /* @__PURE__ */ template(`<option>`);
12343
+ _tmpl$73 = /* @__PURE__ */ template(`<span>Top`);
12344
+ _tmpl$83 = /* @__PURE__ */ template(`<span>Bottom`);
12345
+ _tmpl$93 = /* @__PURE__ */ template(`<span>Left`);
12346
+ _tmpl$103 = /* @__PURE__ */ template(`<span>Right`);
12347
+ _tmpl$113 = /* @__PURE__ */ template(`<span>Theme`);
12348
+ _tmpl$122 = /* @__PURE__ */ template(`<span>Light`);
12349
+ _tmpl$132 = /* @__PURE__ */ template(`<span>Dark`);
12350
+ _tmpl$142 = /* @__PURE__ */ template(`<span>System`);
12351
+ _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">`);
12352
+ _tmpl$162 = /* @__PURE__ */ template(`<option>Sort by `);
12353
+ _tmpl$172 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
12354
+ _tmpl$182 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
12355
+ _tmpl$192 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
12356
+ _tmpl$20 = /* @__PURE__ */ template(`<span>`);
12357
+ _tmpl$21 = /* @__PURE__ */ template(`<button><span></span><span>`);
12358
+ _tmpl$222 = /* @__PURE__ */ template(`<button><span></span> Error`);
12359
+ _tmpl$232 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
12360
+ _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">`);
12361
+ _tmpl$25 = /* @__PURE__ */ template(`<option>`);
11999
12362
  firstBreakpoint = 1024;
12000
12363
  secondBreakpoint = 796;
12001
12364
  thirdBreakpoint = 700;
12002
12365
  BUTTON_POSITION = "bottom-right";
12003
12366
  POSITION = "bottom";
12367
+ THEME_PREFERENCE = "system";
12004
12368
  INITIAL_IS_OPEN = false;
12005
12369
  DEFAULT_HEIGHT = 500;
12006
12370
  DEFAULT_WIDTH = 500;
@@ -12009,33 +12373,51 @@ var init_Devtools = __esm({
12009
12373
  [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
12010
12374
  [panelWidth, setPanelWidth] = createSignal(0);
12011
12375
  DevtoolsComponent = (props) => {
12376
+ const [localStore, setLocalStore] = createLocalStorage({
12377
+ prefix: "TanstackQueryDevtools"
12378
+ });
12379
+ const colorScheme = getPreferredColorScheme();
12380
+ const theme = createMemo(() => {
12381
+ const preference = localStore.theme_preference || THEME_PREFERENCE;
12382
+ if (preference !== "system")
12383
+ return preference;
12384
+ return colorScheme();
12385
+ });
12012
12386
  return createComponent(QueryDevtoolsContext.Provider, {
12013
12387
  value: props,
12014
12388
  get children() {
12015
- return createComponent(Devtools, {});
12389
+ return createComponent(ThemeContext.Provider, {
12390
+ value: theme,
12391
+ get children() {
12392
+ return createComponent(Devtools, {
12393
+ localStore,
12394
+ setLocalStore
12395
+ });
12396
+ }
12397
+ });
12016
12398
  }
12017
12399
  });
12018
12400
  };
12019
12401
  Devtools_default = DevtoolsComponent;
12020
- Devtools = () => {
12402
+ Devtools = (props) => {
12021
12403
  loadFonts();
12022
- const styles = getStyles2();
12023
- const [localStore, setLocalStore] = createLocalStorage({
12024
- prefix: "TanstackQueryDevtools"
12404
+ const theme = useTheme();
12405
+ const styles = createMemo(() => {
12406
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
12025
12407
  });
12026
12408
  const buttonPosition = createMemo(() => {
12027
12409
  return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
12028
12410
  });
12029
12411
  const isOpen = createMemo(() => {
12030
- return localStore.open === "true" ? true : localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
12412
+ return props.localStore.open === "true" ? true : props.localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
12031
12413
  });
12032
12414
  const position = createMemo(() => {
12033
- return localStore.position || useQueryDevtoolsContext().position || POSITION;
12415
+ return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
12034
12416
  });
12035
12417
  createEffect(() => {
12036
12418
  const root = document.querySelector(".tsqd-parent-container");
12037
- const height = localStore.height || DEFAULT_HEIGHT;
12038
- const width = localStore.width || DEFAULT_WIDTH;
12419
+ const height = props.localStore.height || DEFAULT_HEIGHT;
12420
+ const width = props.localStore.width || DEFAULT_WIDTH;
12039
12421
  const panelPosition = position();
12040
12422
  root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
12041
12423
  root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
@@ -12051,8 +12433,12 @@ var init_Devtools = __esm({
12051
12433
  },
12052
12434
  get children() {
12053
12435
  return createComponent(DevtoolsPanel, {
12054
- localStore,
12055
- setLocalStore
12436
+ get localStore() {
12437
+ return props.localStore;
12438
+ },
12439
+ get setLocalStore() {
12440
+ return props.setLocalStore;
12441
+ }
12056
12442
  });
12057
12443
  }
12058
12444
  });
@@ -12066,11 +12452,11 @@ var init_Devtools = __esm({
12066
12452
  return !isOpen();
12067
12453
  },
12068
12454
  get children() {
12069
- const _el$2 = _tmpl$14(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
12455
+ const _el$2 = _tmpl$19(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
12070
12456
  insert(_el$3, createComponent(TanstackLogo, {}));
12071
- _el$4.$$click = () => setLocalStore("open", "true");
12457
+ _el$4.$$click = () => props.setLocalStore("open", "true");
12072
12458
  insert(_el$4, createComponent(TanstackLogo, {}));
12073
- createRenderEffect(() => className(_el$2, clsx(styles.devtoolsBtn, styles[`devtoolsBtn-position-${buttonPosition()}`])));
12459
+ createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
12074
12460
  return _el$2;
12075
12461
  }
12076
12462
  });
@@ -12101,7 +12487,10 @@ var init_Devtools = __esm({
12101
12487
  })();
12102
12488
  };
12103
12489
  DevtoolsPanel = (props) => {
12104
- const styles = getStyles2();
12490
+ const theme = useTheme();
12491
+ const styles = createMemo(() => {
12492
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
12493
+ });
12105
12494
  const [isResizing, setIsResizing] = createSignal(false);
12106
12495
  const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
12107
12496
  const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
@@ -12210,8 +12599,24 @@ var init_Devtools = __esm({
12210
12599
  });
12211
12600
  });
12212
12601
  });
12602
+ const getPanelDynamicStyles = () => {
12603
+ const {
12604
+ colors
12605
+ } = tokens;
12606
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
12607
+ if (panelWidth() < secondBreakpoint) {
12608
+ return u`
12609
+ flex-direction: column;
12610
+ background-color: ${t2(colors.gray[300], colors.gray[600])};
12611
+ `;
12612
+ }
12613
+ return u`
12614
+ flex-direction: row;
12615
+ background-color: ${t2(colors.gray[200], colors.darkGray[900])};
12616
+ `;
12617
+ };
12213
12618
  return (() => {
12214
- 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;
12619
+ 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;
12215
12620
  const _ref$ = panelRef;
12216
12621
  typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
12217
12622
  _el$6.$$mousedown = handleDragStart;
@@ -12227,10 +12632,10 @@ var init_Devtools = __esm({
12227
12632
  _el$17.$$input = (e2) => props.setLocalStore("filter", e2.currentTarget.value);
12228
12633
  _el$19.addEventListener("change", (e2) => props.setLocalStore("sort", e2.currentTarget.value));
12229
12634
  insert(_el$19, () => Object.keys(sortFns).map((key) => (() => {
12230
- const _el$34 = _tmpl$122(); _el$34.firstChild;
12231
- _el$34.value = key;
12232
- insert(_el$34, key, null);
12233
- return _el$34;
12635
+ const _el$38 = _tmpl$162(); _el$38.firstChild;
12636
+ _el$38.value = key;
12637
+ insert(_el$38, key, null);
12638
+ return _el$38;
12234
12639
  })()));
12235
12640
  insert(_el$18, createComponent(ChevronDown, {}), null);
12236
12641
  _el$20.$$click = () => {
@@ -12274,7 +12679,7 @@ var init_Devtools = __esm({
12274
12679
  get children() {
12275
12680
  return [createComponent(index$d.Trigger, {
12276
12681
  get ["class"]() {
12277
- return clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
12682
+ return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
12278
12683
  },
12279
12684
  get children() {
12280
12685
  return createComponent(Settings, {});
@@ -12283,12 +12688,12 @@ var init_Devtools = __esm({
12283
12688
  get children() {
12284
12689
  return createComponent(index$d.Content, {
12285
12690
  get ["class"]() {
12286
- return clsx(styles.settingsMenu, "tsqd-settings-menu");
12691
+ return clsx(styles().settingsMenu, "tsqd-settings-menu");
12287
12692
  },
12288
12693
  get children() {
12289
12694
  return [(() => {
12290
12695
  const _el$26 = _tmpl$53();
12291
- createRenderEffect(() => className(_el$26, clsx(styles.settingsMenuHeader, "tsqd-settings-menu-header")));
12696
+ createRenderEffect(() => className(_el$26, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
12292
12697
  return _el$26;
12293
12698
  })(), createComponent(index$d.Sub, {
12294
12699
  overlap: true,
@@ -12297,7 +12702,7 @@ var init_Devtools = __esm({
12297
12702
  get children() {
12298
12703
  return [createComponent(index$d.SubTrigger, {
12299
12704
  get ["class"]() {
12300
- return clsx(styles.settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
12705
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
12301
12706
  },
12302
12707
  get children() {
12303
12708
  return [_tmpl$63(), createComponent(ChevronDown, {})];
@@ -12306,7 +12711,7 @@ var init_Devtools = __esm({
12306
12711
  get children() {
12307
12712
  return createComponent(index$d.SubContent, {
12308
12713
  get ["class"]() {
12309
- return clsx(styles.settingsMenu, "tsqd-settings-submenu");
12714
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
12310
12715
  },
12311
12716
  get children() {
12312
12717
  return [createComponent(index$d.Item, {
@@ -12315,10 +12720,10 @@ var init_Devtools = __esm({
12315
12720
  },
12316
12721
  as: "button",
12317
12722
  get ["class"]() {
12318
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
12723
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
12319
12724
  },
12320
12725
  get children() {
12321
- return [_tmpl$72(), createComponent(ArrowUp, {})];
12726
+ return [_tmpl$73(), createComponent(ArrowUp, {})];
12322
12727
  }
12323
12728
  }), createComponent(index$d.Item, {
12324
12729
  onSelect: () => {
@@ -12326,10 +12731,10 @@ var init_Devtools = __esm({
12326
12731
  },
12327
12732
  as: "button",
12328
12733
  get ["class"]() {
12329
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
12734
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
12330
12735
  },
12331
12736
  get children() {
12332
- return [_tmpl$82(), createComponent(ArrowDown, {})];
12737
+ return [_tmpl$83(), createComponent(ArrowDown, {})];
12333
12738
  }
12334
12739
  }), createComponent(index$d.Item, {
12335
12740
  onSelect: () => {
@@ -12337,10 +12742,10 @@ var init_Devtools = __esm({
12337
12742
  },
12338
12743
  as: "button",
12339
12744
  get ["class"]() {
12340
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
12745
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
12341
12746
  },
12342
12747
  get children() {
12343
- return [_tmpl$92(), createComponent(ArrowLeft, {})];
12748
+ return [_tmpl$93(), createComponent(ArrowLeft, {})];
12344
12749
  }
12345
12750
  }), createComponent(index$d.Item, {
12346
12751
  onSelect: () => {
@@ -12348,10 +12753,68 @@ var init_Devtools = __esm({
12348
12753
  },
12349
12754
  as: "button",
12350
12755
  get ["class"]() {
12351
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
12756
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
12757
+ },
12758
+ get children() {
12759
+ return [_tmpl$103(), createComponent(ArrowRight, {})];
12760
+ }
12761
+ })];
12762
+ }
12763
+ });
12764
+ }
12765
+ })];
12766
+ }
12767
+ }), createComponent(index$d.Sub, {
12768
+ overlap: true,
12769
+ gutter: 8,
12770
+ shift: -4,
12771
+ get children() {
12772
+ return [createComponent(index$d.SubTrigger, {
12773
+ get ["class"]() {
12774
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
12775
+ },
12776
+ get children() {
12777
+ return [_tmpl$113(), createComponent(ChevronDown, {})];
12778
+ }
12779
+ }), createComponent(index$d.Portal, {
12780
+ get children() {
12781
+ return createComponent(index$d.SubContent, {
12782
+ get ["class"]() {
12783
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
12784
+ },
12785
+ get children() {
12786
+ return [createComponent(index$d.Item, {
12787
+ onSelect: () => {
12788
+ props.setLocalStore("theme_preference", "light");
12789
+ },
12790
+ as: "button",
12791
+ get ["class"]() {
12792
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
12793
+ },
12794
+ get children() {
12795
+ return [_tmpl$122(), createComponent(Sun, {})];
12796
+ }
12797
+ }), createComponent(index$d.Item, {
12798
+ onSelect: () => {
12799
+ props.setLocalStore("theme_preference", "dark");
12800
+ },
12801
+ as: "button",
12802
+ get ["class"]() {
12803
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
12804
+ },
12805
+ get children() {
12806
+ return [_tmpl$132(), createComponent(Moon, {})];
12807
+ }
12808
+ }), createComponent(index$d.Item, {
12809
+ onSelect: () => {
12810
+ props.setLocalStore("theme_preference", "system");
12811
+ },
12812
+ as: "button",
12813
+ get ["class"]() {
12814
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
12352
12815
  },
12353
12816
  get children() {
12354
- return [_tmpl$102(), createComponent(ArrowRight, {})];
12817
+ return [_tmpl$142(), createComponent(Monitor, {})];
12355
12818
  }
12356
12819
  })];
12357
12820
  }
@@ -12366,7 +12829,7 @@ var init_Devtools = __esm({
12366
12829
  })];
12367
12830
  }
12368
12831
  }), null);
12369
- insert(_el$33, createComponent(Key, {
12832
+ insert(_el$37, createComponent(Key, {
12370
12833
  by: (q) => q.queryHash,
12371
12834
  get each() {
12372
12835
  return queries();
@@ -12386,19 +12849,16 @@ var init_Devtools = __esm({
12386
12849
  }
12387
12850
  }), null);
12388
12851
  createRenderEffect((_p$) => {
12389
- const _v$ = clsx(styles.panel, styles[`panel-position-${position()}`], u`
12390
- flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
12391
- background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
12392
- `, {
12852
+ const _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
12393
12853
  [u`
12394
12854
  min-width: min-content;
12395
12855
  `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
12396
- }, "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`
12856
+ }, "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`
12397
12857
  height: 50%;
12398
12858
  max-height: 50%;
12399
- `, "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`
12859
+ `, "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`
12400
12860
  gap: ${tokens.size[2.5]};
12401
- `, "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");
12861
+ `, "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");
12402
12862
  _v$ !== _p$._v$ && className(_el$5, _p$._v$ = _v$);
12403
12863
  _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$5.style.setProperty("height", _v$2) : _el$5.style.removeProperty("height"));
12404
12864
  _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$5.style.setProperty("width", _v$3) : _el$5.style.removeProperty("width"));
@@ -12421,7 +12881,7 @@ var init_Devtools = __esm({
12421
12881
  _v$20 !== _p$._v$20 && setAttribute(_el$25, "aria-label", _p$._v$20 = _v$20);
12422
12882
  _v$21 !== _p$._v$21 && setAttribute(_el$25, "aria-pressed", _p$._v$21 = _v$21);
12423
12883
  _v$22 !== _p$._v$22 && setAttribute(_el$25, "title", _p$._v$22 = _v$22);
12424
- _v$23 !== _p$._v$23 && className(_el$32, _p$._v$23 = _v$23);
12884
+ _v$23 !== _p$._v$23 && className(_el$36, _p$._v$23 = _v$23);
12425
12885
  return _p$;
12426
12886
  }, {
12427
12887
  _v$: void 0,
@@ -12454,7 +12914,15 @@ var init_Devtools = __esm({
12454
12914
  })();
12455
12915
  };
12456
12916
  QueryRow = (props) => {
12457
- const styles = getStyles2();
12917
+ const theme = useTheme();
12918
+ const styles = createMemo(() => {
12919
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
12920
+ });
12921
+ const {
12922
+ colors,
12923
+ alpha
12924
+ } = tokens;
12925
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
12458
12926
  const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
12459
12927
  queryKey: props.query.queryKey
12460
12928
  })?.state);
@@ -12472,41 +12940,47 @@ var init_Devtools = __esm({
12472
12940
  observerCount: observers(),
12473
12941
  isStale: isStale()
12474
12942
  }));
12943
+ const getObserverCountColorStyles = () => {
12944
+ if (color() === "gray") {
12945
+ return u`
12946
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
12947
+ color: ${t2(colors[color()][700], colors[color()][300])};
12948
+ `;
12949
+ }
12950
+ return u`
12951
+ background-color: ${t2(colors[color()][200] + alpha[80], colors[color()][900])};
12952
+ color: ${t2(colors[color()][800], colors[color()][300])};
12953
+ `;
12954
+ };
12475
12955
  return createComponent(Show, {
12476
12956
  get when() {
12477
12957
  return queryState();
12478
12958
  },
12479
12959
  get children() {
12480
- const _el$36 = _tmpl$142(), _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
12481
- _el$36.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
12482
- insert(_el$37, observers);
12483
- insert(_el$38, () => props.query.queryHash);
12484
- insert(_el$36, createComponent(Show, {
12960
+ const _el$40 = _tmpl$182(), _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling;
12961
+ _el$40.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
12962
+ insert(_el$41, observers);
12963
+ insert(_el$42, () => props.query.queryHash);
12964
+ insert(_el$40, createComponent(Show, {
12485
12965
  get when() {
12486
12966
  return isDisabled();
12487
12967
  },
12488
12968
  get children() {
12489
- return _tmpl$132();
12969
+ return _tmpl$172();
12490
12970
  }
12491
12971
  }), null);
12492
12972
  createRenderEffect((_p$) => {
12493
- 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`
12494
- background-color: ${tokens.colors[color()][700]};
12495
- color: ${tokens.colors[color()][300]};
12496
- ` : u`
12497
- background-color: ${tokens.colors[color()][900]};
12498
- color: ${tokens.colors[color()][300]};
12499
- `, "tsqd-query-observer-count");
12500
- _v$24 !== _p$._v$24 && className(_el$36, _p$._v$24 = _v$24);
12501
- _v$25 !== _p$._v$25 && setAttribute(_el$36, "aria-label", _p$._v$25 = _v$25);
12502
- _v$26 !== _p$._v$26 && className(_el$37, _p$._v$26 = _v$26);
12973
+ 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");
12974
+ _v$24 !== _p$._v$24 && className(_el$40, _p$._v$24 = _v$24);
12975
+ _v$25 !== _p$._v$25 && setAttribute(_el$40, "aria-label", _p$._v$25 = _v$25);
12976
+ _v$26 !== _p$._v$26 && className(_el$41, _p$._v$26 = _v$26);
12503
12977
  return _p$;
12504
12978
  }, {
12505
12979
  _v$24: void 0,
12506
12980
  _v$25: void 0,
12507
12981
  _v$26: void 0
12508
12982
  });
12509
- return _el$36;
12983
+ return _el$40;
12510
12984
  }
12511
12985
  });
12512
12986
  };
@@ -12516,50 +12990,61 @@ var init_Devtools = __esm({
12516
12990
  const fetching = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "fetching").length);
12517
12991
  const paused = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "paused").length);
12518
12992
  const inactive = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length);
12519
- const styles = getStyles2();
12993
+ const theme = useTheme();
12994
+ const styles = createMemo(() => {
12995
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
12996
+ });
12520
12997
  return (() => {
12521
- const _el$40 = _tmpl$23();
12522
- insert(_el$40, createComponent(QueryStatus, {
12998
+ const _el$44 = _tmpl$23();
12999
+ insert(_el$44, createComponent(QueryStatus, {
12523
13000
  label: "Fresh",
12524
13001
  color: "green",
12525
13002
  get count() {
12526
13003
  return fresh();
12527
13004
  }
12528
13005
  }), null);
12529
- insert(_el$40, createComponent(QueryStatus, {
13006
+ insert(_el$44, createComponent(QueryStatus, {
12530
13007
  label: "Fetching",
12531
13008
  color: "blue",
12532
13009
  get count() {
12533
13010
  return fetching();
12534
13011
  }
12535
13012
  }), null);
12536
- insert(_el$40, createComponent(QueryStatus, {
13013
+ insert(_el$44, createComponent(QueryStatus, {
12537
13014
  label: "Paused",
12538
13015
  color: "purple",
12539
13016
  get count() {
12540
13017
  return paused();
12541
13018
  }
12542
13019
  }), null);
12543
- insert(_el$40, createComponent(QueryStatus, {
13020
+ insert(_el$44, createComponent(QueryStatus, {
12544
13021
  label: "Stale",
12545
13022
  color: "yellow",
12546
13023
  get count() {
12547
13024
  return stale();
12548
13025
  }
12549
13026
  }), null);
12550
- insert(_el$40, createComponent(QueryStatus, {
13027
+ insert(_el$44, createComponent(QueryStatus, {
12551
13028
  label: "Inactive",
12552
13029
  color: "gray",
12553
13030
  get count() {
12554
13031
  return inactive();
12555
13032
  }
12556
13033
  }), null);
12557
- createRenderEffect(() => className(_el$40, clsx(styles.queryStatusContainer, "tsqd-query-status-container")));
12558
- return _el$40;
13034
+ createRenderEffect(() => className(_el$44, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
13035
+ return _el$44;
12559
13036
  })();
12560
13037
  };
12561
13038
  QueryStatus = (props) => {
12562
- const styles = getStyles2();
13039
+ const theme = useTheme();
13040
+ const styles = createMemo(() => {
13041
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
13042
+ });
13043
+ const {
13044
+ colors,
13045
+ alpha
13046
+ } = tokens;
13047
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
12563
13048
  let tagRef;
12564
13049
  const [mouseOver, setMouseOver] = createSignal(false);
12565
13050
  const [focused, setFocused] = createSignal(false);
@@ -12575,78 +13060,83 @@ var init_Devtools = __esm({
12575
13060
  return true;
12576
13061
  });
12577
13062
  return (() => {
12578
- const _el$41 = _tmpl$17(), _el$43 = _el$41.firstChild, _el$45 = _el$43.nextSibling;
13063
+ const _el$45 = _tmpl$21(), _el$47 = _el$45.firstChild, _el$49 = _el$47.nextSibling;
12579
13064
  const _ref$3 = tagRef;
12580
- typeof _ref$3 === "function" ? use(_ref$3, _el$41) : tagRef = _el$41;
12581
- _el$41.addEventListener("mouseleave", () => {
13065
+ typeof _ref$3 === "function" ? use(_ref$3, _el$45) : tagRef = _el$45;
13066
+ _el$45.addEventListener("mouseleave", () => {
12582
13067
  setMouseOver(false);
12583
13068
  setFocused(false);
12584
13069
  });
12585
- _el$41.addEventListener("mouseenter", () => setMouseOver(true));
12586
- _el$41.addEventListener("blur", () => setFocused(false));
12587
- _el$41.addEventListener("focus", () => setFocused(true));
12588
- spread(_el$41, mergeProps({
13070
+ _el$45.addEventListener("mouseenter", () => setMouseOver(true));
13071
+ _el$45.addEventListener("blur", () => setFocused(false));
13072
+ _el$45.addEventListener("focus", () => setFocused(true));
13073
+ spread(_el$45, mergeProps({
12589
13074
  get disabled() {
12590
13075
  return showLabel();
12591
13076
  },
12592
13077
  get ["class"]() {
12593
- return clsx(styles.queryStatusTag, !showLabel() && u`
13078
+ return clsx(styles().queryStatusTag, !showLabel() && u`
12594
13079
  cursor: pointer;
12595
13080
  &:hover {
12596
- background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
13081
+ background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
12597
13082
  }
12598
13083
  `, "tsqd-query-status-tag", `tsqd-query-status-tag-${props.label.toLowerCase()}`);
12599
13084
  }
12600
13085
  }, () => mouseOver() || focused() ? {
12601
13086
  "aria-describedby": "tsqd-status-tooltip"
12602
13087
  } : {}), false, true);
12603
- insert(_el$41, createComponent(Show, {
13088
+ insert(_el$45, createComponent(Show, {
12604
13089
  get when() {
12605
13090
  return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
12606
13091
  },
12607
13092
  get children() {
12608
- const _el$42 = _tmpl$15();
12609
- insert(_el$42, () => props.label);
12610
- createRenderEffect(() => className(_el$42, clsx(styles.statusTooltip, "tsqd-query-status-tooltip")));
12611
- return _el$42;
13093
+ const _el$46 = _tmpl$192();
13094
+ insert(_el$46, () => props.label);
13095
+ createRenderEffect(() => className(_el$46, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
13096
+ return _el$46;
12612
13097
  }
12613
- }), _el$43);
12614
- insert(_el$41, createComponent(Show, {
13098
+ }), _el$47);
13099
+ insert(_el$45, createComponent(Show, {
12615
13100
  get when() {
12616
13101
  return showLabel();
12617
13102
  },
12618
13103
  get children() {
12619
- const _el$44 = _tmpl$16();
12620
- insert(_el$44, () => props.label);
12621
- createRenderEffect(() => className(_el$44, clsx(styles.queryStatusTagLabel, "tsqd-query-status-tag-label")));
12622
- return _el$44;
13104
+ const _el$48 = _tmpl$20();
13105
+ insert(_el$48, () => props.label);
13106
+ createRenderEffect(() => className(_el$48, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
13107
+ return _el$48;
12623
13108
  }
12624
- }), _el$45);
12625
- insert(_el$45, () => props.count);
13109
+ }), _el$49);
13110
+ insert(_el$49, () => props.count);
12626
13111
  createRenderEffect((_p$) => {
12627
13112
  const _v$27 = clsx(u`
12628
13113
  width: ${tokens.size[1.5]};
12629
13114
  height: ${tokens.size[1.5]};
12630
13115
  border-radius: ${tokens.border.radius.full};
12631
13116
  background-color: ${tokens.colors[props.color][500]};
12632
- `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles.queryStatusCount, props.count > 0 && props.color !== "gray" ? u`
12633
- background-color: ${tokens.colors[props.color][900]};
12634
- color: ${tokens.colors[props.color][300]};
12635
- ` : u`
12636
- color: ${tokens.colors["gray"][400]};
12637
- `, "tsqd-query-status-tag-count");
12638
- _v$27 !== _p$._v$27 && className(_el$43, _p$._v$27 = _v$27);
12639
- _v$28 !== _p$._v$28 && className(_el$45, _p$._v$28 = _v$28);
13117
+ `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && u`
13118
+ background-color: ${t2(colors[props.color][100], colors[props.color][900])};
13119
+ color: ${t2(colors[props.color][700], colors[props.color][300])};
13120
+ `, "tsqd-query-status-tag-count");
13121
+ _v$27 !== _p$._v$27 && className(_el$47, _p$._v$27 = _v$27);
13122
+ _v$28 !== _p$._v$28 && className(_el$49, _p$._v$28 = _v$28);
12640
13123
  return _p$;
12641
13124
  }, {
12642
13125
  _v$27: void 0,
12643
13126
  _v$28: void 0
12644
13127
  });
12645
- return _el$41;
13128
+ return _el$45;
12646
13129
  })();
12647
13130
  };
12648
13131
  QueryDetails = () => {
12649
- const styles = getStyles2();
13132
+ const theme = useTheme();
13133
+ const styles = createMemo(() => {
13134
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
13135
+ });
13136
+ const {
13137
+ colors
13138
+ } = tokens;
13139
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
12650
13140
  const queryClient = useQueryDevtoolsContext().client;
12651
13141
  const [restoringLoading, setRestoringLoading] = createSignal(false);
12652
13142
  const errorTypes = createMemo(() => {
@@ -12703,24 +13193,38 @@ var init_Devtools = __esm({
12703
13193
  setRestoringLoading(false);
12704
13194
  }
12705
13195
  });
13196
+ const getQueryStatusColors = () => {
13197
+ if (color() === "gray") {
13198
+ return u`
13199
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
13200
+ color: ${t2(colors[color()][700], colors[color()][300])};
13201
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
13202
+ `;
13203
+ }
13204
+ return u`
13205
+ background-color: ${t2(colors[color()][100], colors[color()][900])};
13206
+ color: ${t2(colors[color()][700], colors[color()][300])};
13207
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
13208
+ `;
13209
+ };
12706
13210
  return createComponent(Show, {
12707
13211
  get when() {
12708
13212
  return createMemo(() => !!activeQuery())() && activeQueryState();
12709
13213
  },
12710
13214
  get children() {
12711
- 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;
12712
- insert(_el$51, () => displayValue(activeQuery().queryKey, true));
12713
- insert(_el$52, statusLabel);
12714
- insert(_el$55, observerCount);
12715
- insert(_el$58, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
12716
- _el$61.$$click = handleRefetch;
12717
- _el$63.$$click = () => queryClient.invalidateQueries(activeQuery());
12718
- _el$65.$$click = () => queryClient.resetQueries(activeQuery());
12719
- _el$67.$$click = () => {
13215
+ 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;
13216
+ insert(_el$55, () => displayValue(activeQuery().queryKey, true));
13217
+ insert(_el$56, statusLabel);
13218
+ insert(_el$59, observerCount);
13219
+ insert(_el$62, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
13220
+ _el$65.$$click = handleRefetch;
13221
+ _el$67.$$click = () => queryClient.invalidateQueries(activeQuery());
13222
+ _el$69.$$click = () => queryClient.resetQueries(activeQuery());
13223
+ _el$71.$$click = () => {
12720
13224
  queryClient.removeQueries(activeQuery());
12721
13225
  setSelectedQueryHash(null);
12722
13226
  };
12723
- _el$69.$$click = () => {
13227
+ _el$73.$$click = () => {
12724
13228
  if (activeQuery()?.state.data === void 0) {
12725
13229
  setRestoringLoading(true);
12726
13230
  restoreQueryAfterLoadingOrError();
@@ -12748,88 +13252,91 @@ var init_Devtools = __esm({
12748
13252
  });
12749
13253
  }
12750
13254
  };
12751
- insert(_el$69, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$71);
12752
- insert(_el$60, createComponent(Show, {
13255
+ insert(_el$73, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$75);
13256
+ insert(_el$64, createComponent(Show, {
12753
13257
  get when() {
12754
13258
  return errorTypes().length === 0 || queryStatus() === "error";
12755
13259
  },
12756
13260
  get children() {
12757
- const _el$72 = _tmpl$18(), _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling;
12758
- _el$72.$$click = () => {
13261
+ const _el$76 = _tmpl$222(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
13262
+ _el$76.$$click = () => {
12759
13263
  if (!activeQuery().state.error) {
12760
13264
  triggerError();
12761
13265
  } else {
12762
13266
  queryClient.resetQueries(activeQuery());
12763
13267
  }
12764
13268
  };
12765
- insert(_el$72, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$74);
13269
+ insert(_el$76, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$78);
12766
13270
  createRenderEffect((_p$) => {
12767
13271
  const _v$29 = clsx(u`
12768
- color: ${tokens.colors.red[400]};
13272
+ color: ${t2(colors.red[500], colors.red[400])};
12769
13273
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$30 = queryStatus() === "pending", _v$31 = u`
12770
- background-color: ${tokens.colors.red[400]};
13274
+ background-color: ${t2(colors.red[500], colors.red[400])};
12771
13275
  `;
12772
- _v$29 !== _p$._v$29 && className(_el$72, _p$._v$29 = _v$29);
12773
- _v$30 !== _p$._v$30 && (_el$72.disabled = _p$._v$30 = _v$30);
12774
- _v$31 !== _p$._v$31 && className(_el$73, _p$._v$31 = _v$31);
13276
+ _v$29 !== _p$._v$29 && className(_el$76, _p$._v$29 = _v$29);
13277
+ _v$30 !== _p$._v$30 && (_el$76.disabled = _p$._v$30 = _v$30);
13278
+ _v$31 !== _p$._v$31 && className(_el$77, _p$._v$31 = _v$31);
12775
13279
  return _p$;
12776
13280
  }, {
12777
13281
  _v$29: void 0,
12778
13282
  _v$30: void 0,
12779
13283
  _v$31: void 0
12780
13284
  });
12781
- return _el$72;
13285
+ return _el$76;
12782
13286
  }
12783
13287
  }), null);
12784
- insert(_el$60, createComponent(Show, {
13288
+ insert(_el$64, createComponent(Show, {
12785
13289
  get when() {
12786
13290
  return !(errorTypes().length === 0 || queryStatus() === "error");
12787
13291
  },
12788
13292
  get children() {
12789
- const _el$75 = _tmpl$19(), _el$76 = _el$75.firstChild, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling; _el$78.firstChild;
12790
- _el$78.addEventListener("change", (e2) => {
12791
- const errorType = errorTypes().find((t2) => t2.name === e2.currentTarget.value);
13293
+ const _el$79 = _tmpl$232(), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling; _el$82.firstChild;
13294
+ _el$82.addEventListener("change", (e2) => {
13295
+ const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
12792
13296
  triggerError(errorType);
12793
13297
  });
12794
- insert(_el$78, createComponent(For, {
13298
+ insert(_el$82, createComponent(For, {
12795
13299
  get each() {
12796
13300
  return errorTypes();
12797
13301
  },
12798
13302
  children: (errorType) => (() => {
12799
- const _el$84 = _tmpl$21();
12800
- insert(_el$84, () => errorType.name);
12801
- createRenderEffect(() => _el$84.value = errorType.name);
12802
- return _el$84;
13303
+ const _el$88 = _tmpl$25();
13304
+ insert(_el$88, () => errorType.name);
13305
+ createRenderEffect(() => _el$88.value = errorType.name);
13306
+ return _el$88;
12803
13307
  })()
12804
13308
  }), null);
12805
- insert(_el$75, createComponent(ChevronDown, {}), null);
13309
+ insert(_el$79, createComponent(ChevronDown, {}), null);
12806
13310
  createRenderEffect((_p$) => {
12807
- const _v$32 = clsx(styles.actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
13311
+ const _v$32 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
12808
13312
  background-color: ${tokens.colors.red[400]};
12809
13313
  `, _v$34 = queryStatus() === "pending";
12810
- _v$32 !== _p$._v$32 && className(_el$75, _p$._v$32 = _v$32);
12811
- _v$33 !== _p$._v$33 && className(_el$76, _p$._v$33 = _v$33);
12812
- _v$34 !== _p$._v$34 && (_el$78.disabled = _p$._v$34 = _v$34);
13314
+ _v$32 !== _p$._v$32 && className(_el$79, _p$._v$32 = _v$32);
13315
+ _v$33 !== _p$._v$33 && className(_el$80, _p$._v$33 = _v$33);
13316
+ _v$34 !== _p$._v$34 && (_el$82.disabled = _p$._v$34 = _v$34);
12813
13317
  return _p$;
12814
13318
  }, {
12815
13319
  _v$32: void 0,
12816
13320
  _v$33: void 0,
12817
13321
  _v$34: void 0
12818
13322
  });
12819
- return _el$75;
13323
+ return _el$79;
12820
13324
  }
12821
13325
  }), null);
12822
- _el$81.style.setProperty("padding", "0.5rem");
12823
- insert(_el$81, createComponent(Explorer, {
13326
+ _el$85.style.setProperty("padding", "0.5rem");
13327
+ insert(_el$85, createComponent(Explorer, {
12824
13328
  label: "Data",
12825
13329
  defaultExpanded: ["Data"],
12826
13330
  get value() {
12827
13331
  return activeQueryStateData();
12828
13332
  },
12829
- copyable: true
13333
+ editable: true,
13334
+ get activeQuery() {
13335
+ return activeQuery();
13336
+ }
12830
13337
  }));
12831
- _el$83.style.setProperty("padding", "0.5rem");
12832
- insert(_el$83, createComponent(Explorer, {
13338
+ _el$87.style.setProperty("padding", "0.5rem");
13339
+ insert(_el$87, createComponent(Explorer, {
12833
13340
  label: "Query",
12834
13341
  defaultExpanded: ["Query", "queryKey"],
12835
13342
  get value() {
@@ -12837,58 +13344,50 @@ var init_Devtools = __esm({
12837
13344
  }
12838
13345
  }));
12839
13346
  createRenderEffect((_p$) => {
12840
- 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`
12841
- background-color: ${tokens.colors[color()][700]};
12842
- color: ${tokens.colors[color()][300]};
12843
- border-color: ${tokens.colors[color()][600]};
12844
- ` : u`
12845
- background-color: ${tokens.colors[color()][900]};
12846
- color: ${tokens.colors[color()][300]};
12847
- border-color: ${tokens.colors[color()][600]};
12848
- `), _v$39 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles.actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
12849
- color: ${tokens.colors.blue[400]};
13347
+ 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`
13348
+ color: ${t2(colors.blue[600], colors.blue[400])};
12850
13349
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$42 = statusLabel() === "fetching", _v$43 = u`
12851
- background-color: ${tokens.colors.blue[400]};
13350
+ background-color: ${t2(colors.blue[600], colors.blue[400])};
12852
13351
  `, _v$44 = clsx(u`
12853
- color: ${tokens.colors.yellow[400]};
13352
+ color: ${t2(colors.yellow[600], colors.yellow[400])};
12854
13353
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$45 = queryStatus() === "pending", _v$46 = u`
12855
- background-color: ${tokens.colors.yellow[400]};
13354
+ background-color: ${t2(colors.yellow[600], colors.yellow[400])};
12856
13355
  `, _v$47 = clsx(u`
12857
- color: ${tokens.colors.gray[300]};
13356
+ color: ${t2(colors.gray[600], colors.gray[300])};
12858
13357
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$48 = queryStatus() === "pending", _v$49 = u`
12859
- background-color: ${tokens.colors.gray[400]};
13358
+ background-color: ${t2(colors.gray[600], colors.gray[400])};
12860
13359
  `, _v$50 = clsx(u`
12861
- color: ${tokens.colors.pink[400]};
13360
+ color: ${t2(colors.pink[500], colors.pink[400])};
12862
13361
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$51 = statusLabel() === "fetching", _v$52 = u`
12863
- background-color: ${tokens.colors.pink[400]};
13362
+ background-color: ${t2(colors.pink[500], colors.pink[400])};
12864
13363
  `, _v$53 = clsx(u`
12865
- color: ${tokens.colors.cyan[400]};
13364
+ color: ${t2(colors.cyan[500], colors.cyan[400])};
12866
13365
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$54 = restoringLoading(), _v$55 = u`
12867
- background-color: ${tokens.colors.cyan[400]};
12868
- `, _v$56 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles.detailsHeader, "tsqd-query-details-header");
12869
- _v$35 !== _p$._v$35 && className(_el$46, _p$._v$35 = _v$35);
12870
- _v$36 !== _p$._v$36 && className(_el$47, _p$._v$36 = _v$36);
12871
- _v$37 !== _p$._v$37 && className(_el$48, _p$._v$37 = _v$37);
12872
- _v$38 !== _p$._v$38 && className(_el$52, _p$._v$38 = _v$38);
12873
- _v$39 !== _p$._v$39 && className(_el$59, _p$._v$39 = _v$39);
12874
- _v$40 !== _p$._v$40 && className(_el$60, _p$._v$40 = _v$40);
12875
- _v$41 !== _p$._v$41 && className(_el$61, _p$._v$41 = _v$41);
12876
- _v$42 !== _p$._v$42 && (_el$61.disabled = _p$._v$42 = _v$42);
12877
- _v$43 !== _p$._v$43 && className(_el$62, _p$._v$43 = _v$43);
12878
- _v$44 !== _p$._v$44 && className(_el$63, _p$._v$44 = _v$44);
12879
- _v$45 !== _p$._v$45 && (_el$63.disabled = _p$._v$45 = _v$45);
12880
- _v$46 !== _p$._v$46 && className(_el$64, _p$._v$46 = _v$46);
12881
- _v$47 !== _p$._v$47 && className(_el$65, _p$._v$47 = _v$47);
12882
- _v$48 !== _p$._v$48 && (_el$65.disabled = _p$._v$48 = _v$48);
12883
- _v$49 !== _p$._v$49 && className(_el$66, _p$._v$49 = _v$49);
12884
- _v$50 !== _p$._v$50 && className(_el$67, _p$._v$50 = _v$50);
12885
- _v$51 !== _p$._v$51 && (_el$67.disabled = _p$._v$51 = _v$51);
12886
- _v$52 !== _p$._v$52 && className(_el$68, _p$._v$52 = _v$52);
12887
- _v$53 !== _p$._v$53 && className(_el$69, _p$._v$53 = _v$53);
12888
- _v$54 !== _p$._v$54 && (_el$69.disabled = _p$._v$54 = _v$54);
12889
- _v$55 !== _p$._v$55 && className(_el$70, _p$._v$55 = _v$55);
12890
- _v$56 !== _p$._v$56 && className(_el$80, _p$._v$56 = _v$56);
12891
- _v$57 !== _p$._v$57 && className(_el$82, _p$._v$57 = _v$57);
13366
+ background-color: ${t2(colors.cyan[500], colors.cyan[400])};
13367
+ `, _v$56 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles().detailsHeader, "tsqd-query-details-header");
13368
+ _v$35 !== _p$._v$35 && className(_el$50, _p$._v$35 = _v$35);
13369
+ _v$36 !== _p$._v$36 && className(_el$51, _p$._v$36 = _v$36);
13370
+ _v$37 !== _p$._v$37 && className(_el$52, _p$._v$37 = _v$37);
13371
+ _v$38 !== _p$._v$38 && className(_el$56, _p$._v$38 = _v$38);
13372
+ _v$39 !== _p$._v$39 && className(_el$63, _p$._v$39 = _v$39);
13373
+ _v$40 !== _p$._v$40 && className(_el$64, _p$._v$40 = _v$40);
13374
+ _v$41 !== _p$._v$41 && className(_el$65, _p$._v$41 = _v$41);
13375
+ _v$42 !== _p$._v$42 && (_el$65.disabled = _p$._v$42 = _v$42);
13376
+ _v$43 !== _p$._v$43 && className(_el$66, _p$._v$43 = _v$43);
13377
+ _v$44 !== _p$._v$44 && className(_el$67, _p$._v$44 = _v$44);
13378
+ _v$45 !== _p$._v$45 && (_el$67.disabled = _p$._v$45 = _v$45);
13379
+ _v$46 !== _p$._v$46 && className(_el$68, _p$._v$46 = _v$46);
13380
+ _v$47 !== _p$._v$47 && className(_el$69, _p$._v$47 = _v$47);
13381
+ _v$48 !== _p$._v$48 && (_el$69.disabled = _p$._v$48 = _v$48);
13382
+ _v$49 !== _p$._v$49 && className(_el$70, _p$._v$49 = _v$49);
13383
+ _v$50 !== _p$._v$50 && className(_el$71, _p$._v$50 = _v$50);
13384
+ _v$51 !== _p$._v$51 && (_el$71.disabled = _p$._v$51 = _v$51);
13385
+ _v$52 !== _p$._v$52 && className(_el$72, _p$._v$52 = _v$52);
13386
+ _v$53 !== _p$._v$53 && className(_el$73, _p$._v$53 = _v$53);
13387
+ _v$54 !== _p$._v$54 && (_el$73.disabled = _p$._v$54 = _v$54);
13388
+ _v$55 !== _p$._v$55 && className(_el$74, _p$._v$55 = _v$55);
13389
+ _v$56 !== _p$._v$56 && className(_el$84, _p$._v$56 = _v$56);
13390
+ _v$57 !== _p$._v$57 && className(_el$86, _p$._v$57 = _v$57);
12892
13391
  return _p$;
12893
13392
  }, {
12894
13393
  _v$35: void 0,
@@ -12915,7 +13414,7 @@ var init_Devtools = __esm({
12915
13414
  _v$56: void 0,
12916
13415
  _v$57: void 0
12917
13416
  });
12918
- return _el$46;
13417
+ return _el$50;
12919
13418
  }
12920
13419
  });
12921
13420
  };
@@ -12955,7 +13454,7 @@ var init_Devtools = __esm({
12955
13454
  });
12956
13455
  return value;
12957
13456
  };
12958
- getStyles2 = () => {
13457
+ stylesFactory2 = (theme) => {
12959
13458
  const {
12960
13459
  colors,
12961
13460
  font,
@@ -12964,6 +13463,7 @@ var init_Devtools = __esm({
12964
13463
  shadow,
12965
13464
  border
12966
13465
  } = tokens;
13466
+ const t2 = (light, dark) => theme === "light" ? light : dark;
12967
13467
  return {
12968
13468
  devtoolsBtn: u`
12969
13469
  z-index: 100000;
@@ -13025,8 +13525,6 @@ var init_Devtools = __esm({
13025
13525
  display: flex;
13026
13526
  gap: ${tokens.size[0.5]};
13027
13527
  & * {
13028
- font-family: 'Inter', sans-serif;
13029
- color: ${colors.gray[300]};
13030
13528
  box-sizing: border-box;
13031
13529
  text-transform: none;
13032
13530
  }
@@ -13053,7 +13551,7 @@ var init_Devtools = __esm({
13053
13551
  left: 0;
13054
13552
  max-height: 90%;
13055
13553
  min-height: 3.5rem;
13056
- border-bottom: ${colors.darkGray[300]} 1px solid;
13554
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13057
13555
  `,
13058
13556
  "panel-position-bottom": u`
13059
13557
  bottom: 0;
@@ -13061,20 +13559,20 @@ var init_Devtools = __esm({
13061
13559
  left: 0;
13062
13560
  max-height: 90%;
13063
13561
  min-height: 3.5rem;
13064
- border-top: ${colors.darkGray[300]} 1px solid;
13562
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13065
13563
  `,
13066
13564
  "panel-position-right": u`
13067
13565
  bottom: 0;
13068
13566
  right: 0;
13069
13567
  top: 0;
13070
- border-left: ${colors.darkGray[300]} 1px solid;
13568
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13071
13569
  max-width: 90%;
13072
13570
  `,
13073
13571
  "panel-position-left": u`
13074
13572
  bottom: 0;
13075
13573
  left: 0;
13076
13574
  top: 0;
13077
- border-right: ${colors.darkGray[300]} 1px solid;
13575
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13078
13576
  max-width: 90%;
13079
13577
  `,
13080
13578
  closeBtn: u`
@@ -13085,13 +13583,15 @@ var init_Devtools = __esm({
13085
13583
  align-items: center;
13086
13584
  justify-content: center;
13087
13585
  outline: none;
13586
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
13088
13587
  &:hover {
13089
- background-color: ${colors.darkGray[500]};
13588
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13090
13589
  }
13091
13590
  &:focus-visible {
13092
13591
  outline: 2px solid ${colors.blue[600]};
13093
13592
  }
13094
13593
  & svg {
13594
+ color: ${t2(colors.gray[600], colors.gray[400])};
13095
13595
  width: ${size2[2]};
13096
13596
  height: ${size2[2]};
13097
13597
  }
@@ -13100,11 +13600,10 @@ var init_Devtools = __esm({
13100
13600
  bottom: 0;
13101
13601
  right: ${size2[2]};
13102
13602
  transform: translate(0, 100%);
13103
- background-color: ${colors.darkGray[700]};
13104
- border-right: ${colors.darkGray[300]} 1px solid;
13105
- border-left: ${colors.darkGray[300]} 1px solid;
13603
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13604
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13106
13605
  border-top: none;
13107
- border-bottom: ${colors.darkGray[300]} 1px solid;
13606
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13108
13607
  border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
13109
13608
  padding: ${size2[0.5]} ${size2[1.5]} ${size2[1]} ${size2[1.5]};
13110
13609
 
@@ -13125,10 +13624,9 @@ var init_Devtools = __esm({
13125
13624
  top: 0;
13126
13625
  right: ${size2[2]};
13127
13626
  transform: translate(0, -100%);
13128
- background-color: ${colors.darkGray[700]};
13129
- border-right: ${colors.darkGray[300]} 1px solid;
13130
- border-left: ${colors.darkGray[300]} 1px solid;
13131
- border-top: ${colors.darkGray[300]} 1px solid;
13627
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13628
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13629
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13132
13630
  border-bottom: none;
13133
13631
  border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
13134
13632
  padding: ${size2[1]} ${size2[1.5]} ${size2[0.5]} ${size2[1.5]};
@@ -13146,11 +13644,10 @@ var init_Devtools = __esm({
13146
13644
  bottom: ${size2[2]};
13147
13645
  left: 0;
13148
13646
  transform: translate(-100%, 0);
13149
- background-color: ${colors.darkGray[700]};
13150
13647
  border-right: none;
13151
- border-left: ${colors.darkGray[300]} 1px solid;
13152
- border-top: ${colors.darkGray[300]} 1px solid;
13153
- border-bottom: ${colors.darkGray[300]} 1px solid;
13648
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13649
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13650
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13154
13651
  border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
13155
13652
  padding: ${size2[1.5]} ${size2[0.5]} ${size2[1.5]} ${size2[1]};
13156
13653
 
@@ -13170,11 +13667,10 @@ var init_Devtools = __esm({
13170
13667
  bottom: ${size2[2]};
13171
13668
  right: 0;
13172
13669
  transform: translate(100%, 0);
13173
- background-color: ${colors.darkGray[700]};
13174
13670
  border-left: none;
13175
- border-right: ${colors.darkGray[300]} 1px solid;
13176
- border-top: ${colors.darkGray[300]} 1px solid;
13177
- border-bottom: ${colors.darkGray[300]} 1px solid;
13671
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13672
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13673
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13178
13674
  border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
13179
13675
  padding: ${size2[1.5]} ${size2[1]} ${size2[1.5]} ${size2[0.5]};
13180
13676
 
@@ -13192,15 +13688,18 @@ var init_Devtools = __esm({
13192
13688
  `,
13193
13689
  queriesContainer: u`
13194
13690
  flex: 1 1 700px;
13195
- background-color: ${colors.darkGray[700]};
13691
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
13196
13692
  display: flex;
13197
13693
  flex-direction: column;
13694
+ & * {
13695
+ font-family: 'Inter', sans-serif;
13696
+ }
13198
13697
  `,
13199
13698
  dragHandle: u`
13200
13699
  position: absolute;
13201
13700
  transition: background-color 0.125s ease;
13202
13701
  &:hover {
13203
- background-color: ${colors.purple[400]}${alpha[90]};
13702
+ background-color: ${colors.purple[400]}${t2("", alpha[90])};
13204
13703
  }
13205
13704
  z-index: 4;
13206
13705
  `,
@@ -13234,7 +13733,7 @@ var init_Devtools = __esm({
13234
13733
  align-items: center;
13235
13734
  padding: ${tokens.size[2]} ${tokens.size[2.5]};
13236
13735
  gap: ${tokens.size[3]};
13237
- border-bottom: ${colors.darkGray[500]} 1px solid;
13736
+ border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
13238
13737
  align-items: center;
13239
13738
  & > button {
13240
13739
  padding: 0;
@@ -13261,11 +13760,15 @@ var init_Devtools = __esm({
13261
13760
  font-weight: ${font.weight.bold};
13262
13761
  line-height: ${font.lineHeight.xs};
13263
13762
  white-space: nowrap;
13763
+ color: ${t2(colors.gray[600], colors.gray[300])};
13264
13764
  `,
13265
13765
  queryFlavorLogo: u`
13266
13766
  font-weight: ${font.weight.semibold};
13267
13767
  font-size: ${font.size.xs};
13268
- background: linear-gradient(to right, #dd524b, #e9a03b);
13768
+ background: linear-gradient(
13769
+ to right,
13770
+ ${t2("#ea4037, #ff9b11", "#dd524b, #e9a03b")}
13771
+ );
13269
13772
  background-clip: text;
13270
13773
  -webkit-background-clip: text;
13271
13774
  line-height: 1;
@@ -13280,14 +13783,17 @@ var init_Devtools = __esm({
13280
13783
  queryStatusTag: u`
13281
13784
  display: flex;
13282
13785
  gap: ${tokens.size[1.5]};
13283
- background: ${colors.darkGray[500]};
13786
+ box-sizing: border-box;
13787
+ height: ${tokens.size[6.5]};
13788
+ background: ${t2(colors.gray[50], colors.darkGray[500])};
13789
+ color: ${t2(colors.gray[700], colors.gray[300])};
13284
13790
  border-radius: ${tokens.border.radius.sm};
13285
13791
  font-size: ${font.size.sm};
13286
13792
  padding: ${tokens.size[1]};
13287
- padding-left: ${tokens.size[2]};
13793
+ padding-left: ${tokens.size[1.5]};
13288
13794
  align-items: center;
13289
13795
  font-weight: ${font.weight.medium};
13290
- border: none;
13796
+ border: ${t2("1px solid " + colors.gray[300], "1px solid transparent")};
13291
13797
  user-select: none;
13292
13798
  position: relative;
13293
13799
  &:focus-visible {
@@ -13304,8 +13810,8 @@ var init_Devtools = __esm({
13304
13810
  display: flex;
13305
13811
  align-items: center;
13306
13812
  justify-content: center;
13307
- color: ${colors.gray[400]};
13308
- background-color: ${colors.darkGray[300]};
13813
+ color: ${t2(colors.gray[500], colors.gray[400])};
13814
+ background-color: ${t2(colors.gray[200], colors.darkGray[300])};
13309
13815
  border-radius: 2px;
13310
13816
  font-variant-numeric: tabular-nums;
13311
13817
  height: ${tokens.size[4.5]};
@@ -13313,15 +13819,15 @@ var init_Devtools = __esm({
13313
13819
  statusTooltip: u`
13314
13820
  position: absolute;
13315
13821
  z-index: 1;
13316
- background-color: ${colors.darkGray[500]};
13822
+ background-color: ${t2(colors.gray[50], colors.darkGray[500])};
13317
13823
  top: 100%;
13318
13824
  left: 50%;
13319
13825
  transform: translate(-50%, calc(${tokens.size[2]}));
13320
13826
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
13321
- border-radius: ${tokens.border.radius.md};
13827
+ border-radius: ${tokens.border.radius.sm};
13322
13828
  font-size: ${font.size.xs};
13323
- border: 1px solid ${colors.gray[600]};
13324
- color: ${tokens.colors["gray"][300]};
13829
+ border: 1px solid ${t2(colors.gray[400], colors.gray[600])};
13830
+ color: ${t2(colors["gray"][600], colors["gray"][300])};
13325
13831
 
13326
13832
  &::before {
13327
13833
  top: 0px;
@@ -13330,7 +13836,8 @@ var init_Devtools = __esm({
13330
13836
  left: 50%;
13331
13837
  transform: translate(-50%, -100%);
13332
13838
  position: absolute;
13333
- border-color: transparent transparent ${colors.gray[600]} transparent;
13839
+ border-color: transparent transparent
13840
+ ${t2(colors.gray[400], colors.gray[600])} transparent;
13334
13841
  border-style: solid;
13335
13842
  border-width: 7px;
13336
13843
  /* transform: rotate(180deg); */
@@ -13341,16 +13848,13 @@ var init_Devtools = __esm({
13341
13848
  content: ' ';
13342
13849
  display: block;
13343
13850
  left: 50%;
13344
- transform: translate(-50%, calc(-100% + 2.5px));
13851
+ transform: translate(-50%, calc(-100% + 2px));
13345
13852
  position: absolute;
13346
- border-color: transparent transparent ${colors.darkGray[500]}
13347
- transparent;
13853
+ border-color: transparent transparent
13854
+ ${t2(colors.gray[100], colors.darkGray[500])} transparent;
13348
13855
  border-style: solid;
13349
13856
  border-width: 7px;
13350
13857
  }
13351
- `,
13352
- selectedQueryRow: u`
13353
- background-color: ${colors.darkGray[500]};
13354
13858
  `,
13355
13859
  filtersContainer: u`
13356
13860
  display: flex;
@@ -13360,47 +13864,52 @@ var init_Devtools = __esm({
13360
13864
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
13361
13865
  padding-right: ${tokens.size[1.5]};
13362
13866
  border-radius: ${tokens.border.radius.sm};
13363
- background-color: ${colors.darkGray[400]};
13867
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13868
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
13869
+ color: ${t2(colors.gray[700], colors.gray[300])};
13364
13870
  font-size: ${font.size.xs};
13365
13871
  display: flex;
13366
13872
  align-items: center;
13367
13873
  line-height: ${font.lineHeight.sm};
13368
13874
  gap: ${tokens.size[1.5]};
13369
13875
  max-width: 160px;
13370
- border: 1px solid ${colors.darkGray[200]};
13371
13876
  &:focus-visible {
13372
13877
  outline-offset: 2px;
13373
13878
  border-radius: ${border.radius.xs};
13374
13879
  outline: 2px solid ${colors.blue[800]};
13375
13880
  }
13881
+ & svg {
13882
+ color: ${t2(colors.gray[500], colors.gray[400])};
13883
+ }
13376
13884
  }
13377
13885
  `,
13378
13886
  filterInput: u`
13379
- padding: ${tokens.size[0.5]} ${tokens.size[2]};
13887
+ padding: ${size2[0.5]} ${size2[2]};
13380
13888
  border-radius: ${tokens.border.radius.sm};
13381
- background-color: ${colors.darkGray[400]};
13889
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13382
13890
  display: flex;
13383
13891
  box-sizing: content-box;
13384
13892
  align-items: center;
13385
13893
  gap: ${tokens.size[1.5]};
13386
13894
  max-width: 160px;
13387
13895
  min-width: 100px;
13388
- border: 1px solid ${colors.darkGray[200]};
13896
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
13389
13897
  height: min-content;
13898
+ color: ${t2(colors.gray[600], colors.gray[400])};
13390
13899
  & > svg {
13391
- width: ${tokens.size[3]};
13392
- height: ${tokens.size[3]};
13900
+ width: ${size2[3]};
13901
+ height: ${size2[3]};
13393
13902
  }
13394
13903
  & input {
13395
13904
  font-size: ${font.size.xs};
13396
13905
  width: 100%;
13397
- background-color: ${colors.darkGray[400]};
13906
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13398
13907
  border: none;
13399
13908
  padding: 0;
13400
13909
  line-height: ${font.lineHeight.sm};
13401
- color: ${colors.gray[300]};
13910
+ color: ${t2(colors.gray[700], colors.gray[300])};
13402
13911
  &::placeholder {
13403
- color: ${colors.gray[300]};
13912
+ color: ${t2(colors.gray[700], colors.gray[300])};
13404
13913
  }
13405
13914
  &:focus {
13406
13915
  outline: none;
@@ -13416,24 +13925,26 @@ var init_Devtools = __esm({
13416
13925
  filterSelect: u`
13417
13926
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
13418
13927
  border-radius: ${tokens.border.radius.sm};
13419
- background-color: ${colors.darkGray[400]};
13928
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13420
13929
  display: flex;
13421
13930
  align-items: center;
13422
13931
  gap: ${tokens.size[1.5]};
13423
13932
  box-sizing: content-box;
13424
13933
  max-width: 160px;
13425
- border: 1px solid ${colors.darkGray[200]};
13934
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
13426
13935
  height: min-content;
13427
13936
  & > svg {
13937
+ color: ${t2(colors.gray[600], colors.gray[400])};
13428
13938
  width: ${tokens.size[2]};
13429
13939
  height: ${tokens.size[2]};
13430
13940
  }
13431
13941
  & > select {
13432
13942
  appearance: none;
13943
+ color: ${t2(colors.gray[700], colors.gray[300])};
13433
13944
  min-width: 100px;
13434
13945
  line-height: ${font.lineHeight.sm};
13435
13946
  font-size: ${font.size.xs};
13436
- background-color: ${colors.darkGray[400]};
13947
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13437
13948
  border: none;
13438
13949
  &:focus {
13439
13950
  outline: none;
@@ -13451,7 +13962,8 @@ var init_Devtools = __esm({
13451
13962
  `,
13452
13963
  actionsBtn: u`
13453
13964
  border-radius: ${tokens.border.radius.sm};
13454
- background-color: ${colors.darkGray[400]};
13965
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13966
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
13455
13967
  width: 1.625rem;
13456
13968
  height: 1.625rem;
13457
13969
  justify-content: center;
@@ -13459,13 +13971,13 @@ var init_Devtools = __esm({
13459
13971
  align-items: center;
13460
13972
  gap: ${tokens.size[1.5]};
13461
13973
  max-width: 160px;
13462
- border: 1px solid ${colors.darkGray[200]};
13463
13974
  cursor: pointer;
13464
13975
  padding: 0;
13465
13976
  &:hover {
13466
- background-color: ${colors.darkGray[500]};
13977
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13467
13978
  }
13468
13979
  & svg {
13980
+ color: ${t2(colors.gray[700], colors.gray[300])};
13469
13981
  width: ${tokens.size[3]};
13470
13982
  height: ${tokens.size[3]};
13471
13983
  }
@@ -13474,6 +13986,12 @@ var init_Devtools = __esm({
13474
13986
  border-radius: ${border.radius.xs};
13475
13987
  outline: 2px solid ${colors.blue[800]};
13476
13988
  }
13989
+ `,
13990
+ actionsBtnOffline: u`
13991
+ & svg {
13992
+ stroke: ${t2(colors.yellow[700], colors.yellow[500])};
13993
+ fill: ${t2(colors.yellow[700], colors.yellow[500])};
13994
+ }
13477
13995
  `,
13478
13996
  overflowQueryContainer: u`
13479
13997
  flex: 1;
@@ -13487,9 +14005,11 @@ var init_Devtools = __esm({
13487
14005
  display: flex;
13488
14006
  align-items: center;
13489
14007
  padding: 0;
13490
- background-color: inherit;
13491
14008
  border: none;
13492
14009
  cursor: pointer;
14010
+ color: ${t2(colors.gray[700], colors.gray[300])};
14011
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
14012
+ line-height: 1;
13493
14013
  &:focus {
13494
14014
  outline: none;
13495
14015
  }
@@ -13499,7 +14019,7 @@ var init_Devtools = __esm({
13499
14019
  outline: 2px solid ${colors.blue[800]};
13500
14020
  }
13501
14021
  &:hover .tsqd-query-hash {
13502
- background-color: ${colors.darkGray[600]};
14022
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
13503
14023
  }
13504
14024
 
13505
14025
  & .tsqd-query-observer-count {
@@ -13514,7 +14034,7 @@ var init_Devtools = __esm({
13514
14034
  font-weight: ${font.weight.medium};
13515
14035
  border-bottom-width: 1px;
13516
14036
  border-bottom-style: solid;
13517
- border-bottom: 1px solid ${colors.darkGray[700]};
14037
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[700])};
13518
14038
  }
13519
14039
  & .tsqd-query-hash {
13520
14040
  user-select: text;
@@ -13525,7 +14045,7 @@ var init_Devtools = __esm({
13525
14045
  flex: 1;
13526
14046
  padding: ${tokens.size[1]} ${tokens.size[2]};
13527
14047
  font-family: 'Menlo', 'Fira Code', monospace;
13528
- border-bottom: 1px solid ${colors.darkGray[400]};
14048
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
13529
14049
  text-align: left;
13530
14050
  text-overflow: clip;
13531
14051
  word-break: break-word;
@@ -13536,15 +14056,20 @@ var init_Devtools = __esm({
13536
14056
  display: flex;
13537
14057
  align-items: center;
13538
14058
  padding: 0 ${tokens.size[2]};
13539
- color: ${colors.gray[300]};
13540
- background-color: ${colors.darkGray[600]};
13541
- border-bottom: 1px solid ${colors.darkGray[400]};
14059
+ color: ${t2(colors.gray[800], colors.gray[300])};
14060
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
14061
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
13542
14062
  font-size: ${font.size.xs};
13543
14063
  }
14064
+ `,
14065
+ selectedQueryRow: u`
14066
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13544
14067
  `,
13545
14068
  detailsContainer: u`
13546
14069
  flex: 1 1 700px;
13547
- background-color: ${colors.darkGray[700]};
14070
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
14071
+ color: ${t2(colors.gray[700], colors.gray[300])};
14072
+ font-family: 'Inter', sans-serif;
13548
14073
  display: flex;
13549
14074
  flex-direction: column;
13550
14075
  overflow-y: auto;
@@ -13552,10 +14077,11 @@ var init_Devtools = __esm({
13552
14077
  text-align: left;
13553
14078
  `,
13554
14079
  detailsHeader: u`
14080
+ font-family: 'Inter', sans-serif;
13555
14081
  position: sticky;
13556
14082
  top: 0;
13557
14083
  z-index: 2;
13558
- background-color: ${colors.darkGray[600]};
14084
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
13559
14085
  padding: ${tokens.size[1.5]} ${tokens.size[2]};
13560
14086
  font-weight: ${font.weight.medium};
13561
14087
  font-size: ${font.size.xs};
@@ -13588,6 +14114,10 @@ var init_Devtools = __esm({
13588
14114
  font-size: ${font.size.xs};
13589
14115
  line-height: ${font.lineHeight.xs};
13590
14116
  }
14117
+
14118
+ & pre {
14119
+ margin: 0;
14120
+ }
13591
14121
  `,
13592
14122
  queryDetailsStatus: u`
13593
14123
  border: 1px solid ${colors.darkGray[200]};
@@ -13602,12 +14132,13 @@ var init_Devtools = __esm({
13602
14132
  gap: ${tokens.size[2]};
13603
14133
  padding: 0px ${tokens.size[2]};
13604
14134
  & > button {
14135
+ font-family: 'Inter', sans-serif;
13605
14136
  font-size: ${font.size.xs};
13606
14137
  padding: ${tokens.size[1]} ${tokens.size[2]};
13607
14138
  display: flex;
13608
14139
  border-radius: ${tokens.border.radius.sm};
13609
- border: 1px solid ${colors.darkGray[400]};
13610
- background-color: ${colors.darkGray[600]};
14140
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
14141
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
13611
14142
  align-items: center;
13612
14143
  gap: ${tokens.size[2]};
13613
14144
  font-weight: ${font.weight.medium};
@@ -13619,7 +14150,7 @@ var init_Devtools = __esm({
13619
14150
  outline: 2px solid ${colors.blue[800]};
13620
14151
  }
13621
14152
  &:hover {
13622
- background-color: ${colors.darkGray[500]};
14153
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13623
14154
  }
13624
14155
 
13625
14156
  &:disabled {
@@ -13640,17 +14171,17 @@ var init_Devtools = __esm({
13640
14171
  display: flex;
13641
14172
  border-radius: ${tokens.border.radius.sm};
13642
14173
  overflow: hidden;
13643
- border: 1px solid ${colors.darkGray[400]};
13644
- background-color: ${colors.darkGray[600]};
14174
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
14175
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
13645
14176
  align-items: center;
13646
14177
  gap: ${tokens.size[2]};
13647
14178
  font-weight: ${font.weight.medium};
13648
14179
  line-height: ${font.lineHeight.sm};
13649
- color: ${tokens.colors.red[400]};
14180
+ color: ${t2(colors.red[500], colors.red[400])};
13650
14181
  cursor: pointer;
13651
14182
  position: relative;
13652
14183
  &:hover {
13653
- background-color: ${colors.darkGray[500]};
14184
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13654
14185
  }
13655
14186
  & > span {
13656
14187
  width: ${size2[1.5]};
@@ -13691,10 +14222,10 @@ var init_Devtools = __esm({
13691
14222
  flex-direction: column;
13692
14223
  gap: ${size2[0.5]};
13693
14224
  border-radius: ${tokens.border.radius.sm};
13694
- border: 1px solid ${colors.gray[700]};
13695
- background-color: ${colors.darkGray[600]};
14225
+ border: 1px solid ${t2(colors.gray[300], colors.gray[700])};
14226
+ background-color: ${t2(colors.gray[50], colors.darkGray[600])};
13696
14227
  font-size: ${font.size.xs};
13697
- color: ${colors.gray[300]};
14228
+ color: ${t2(colors.gray[700], colors.gray[300])};
13698
14229
  z-index: 99999;
13699
14230
  min-width: 120px;
13700
14231
  padding: ${size2[0.5]};
@@ -13704,17 +14235,19 @@ var init_Devtools = __esm({
13704
14235
  align-items: center;
13705
14236
  justify-content: space-between;
13706
14237
  border-radius: ${tokens.border.radius.xs};
13707
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
14238
+ padding: ${tokens.size[1]} ${tokens.size[1]};
13708
14239
  cursor: pointer;
13709
14240
  background-color: transparent;
13710
14241
  border: none;
14242
+ color: ${t2(colors.gray[700], colors.gray[300])};
13711
14243
  & svg {
14244
+ color: ${t2(colors.gray[600], colors.gray[400])};
13712
14245
  transform: rotate(-90deg);
13713
14246
  width: ${tokens.size[2]};
13714
14247
  height: ${tokens.size[2]};
13715
14248
  }
13716
14249
  &:hover {
13717
- background-color: ${colors.darkGray[500]};
14250
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13718
14251
  }
13719
14252
  &:focus-visible {
13720
14253
  outline-offset: 2px;
@@ -13726,33 +14259,48 @@ var init_Devtools = __esm({
13726
14259
  }
13727
14260
  `,
13728
14261
  settingsMenuHeader: u`
13729
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
14262
+ padding: ${tokens.size[1]} ${tokens.size[1]};
13730
14263
  font-weight: ${font.weight.medium};
13731
- border-bottom: 1px solid ${colors.darkGray[400]};
13732
- color: ${colors.gray[400]};
14264
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
14265
+ color: ${t2(colors.gray[500], colors.gray[400])};
13733
14266
  font-size: ${font.size["xs"]};
13734
14267
  `,
13735
14268
  settingsSubButton: u`
13736
14269
  display: flex;
13737
14270
  align-items: center;
13738
14271
  justify-content: space-between;
13739
- color: ${colors.gray[300]};
14272
+ color: ${t2(colors.gray[700], colors.gray[300])};
13740
14273
  font-size: ${font.size["xs"]};
13741
14274
  border-radius: ${tokens.border.radius.xs};
13742
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
14275
+ padding: ${tokens.size[1]} ${tokens.size[1]};
13743
14276
  cursor: pointer;
13744
14277
  background-color: transparent;
13745
14278
  border: none;
14279
+ & svg {
14280
+ color: ${t2(colors.gray[600], colors.gray[400])};
14281
+ }
13746
14282
  &:hover {
13747
- background-color: ${colors.darkGray[500]};
14283
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13748
14284
  }
13749
14285
  &:focus-visible {
13750
14286
  outline-offset: 2px;
13751
14287
  outline: 2px solid ${colors.blue[800]};
13752
14288
  }
14289
+ `,
14290
+ themeSelectedButton: u`
14291
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
14292
+ color: ${t2(colors.purple[700], colors.purple[300])};
14293
+ & svg {
14294
+ color: ${t2(colors.purple[700], colors.purple[300])};
14295
+ }
14296
+ &:hover {
14297
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
14298
+ }
13753
14299
  `
13754
14300
  };
13755
14301
  };
14302
+ lightStyles2 = stylesFactory2("light");
14303
+ darkStyles2 = stylesFactory2("dark");
13756
14304
  delegateEvents(["click", "mousedown", "input"]);
13757
14305
  }
13758
14306
  });