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

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