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