@tanstack/query-devtools 5.0.0-rc.10 → 5.0.0-rc.14

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,76 +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
  }
11531
- function Check(props) {
11533
+ function CopiedCopier(props) {
11532
11534
  return (() => {
11533
- const _el$15 = _tmpl$13(); _el$15.firstChild;
11534
- insert(_el$15, (() => {
11535
- const _c$ = createMemo(() => !!props.checked);
11536
- return () => _c$() && _tmpl$14();
11537
- })(), null);
11535
+ const _el$15 = _tmpl$13(), _el$16 = _el$15.firstChild;
11536
+ createRenderEffect(() => setAttribute(_el$16, "stroke", props.theme === "dark" ? "#12B76A" : "#027A48"));
11538
11537
  return _el$15;
11539
11538
  })();
11540
11539
  }
11541
- function TanstackLogo() {
11540
+ function ErrorCopier() {
11541
+ return _tmpl$14();
11542
+ }
11543
+ function List() {
11542
11544
  return _tmpl$15();
11543
11545
  }
11544
- 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;
11546
+ function Check(props) {
11547
+ return [createComponent(Show, {
11548
+ get when() {
11549
+ return props.checked;
11550
+ },
11551
+ get children() {
11552
+ const _el$19 = _tmpl$13(), _el$20 = _el$19.firstChild;
11553
+ createRenderEffect(() => setAttribute(_el$20, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
11554
+ return _el$19;
11555
+ }
11556
+ }), createComponent(Show, {
11557
+ get when() {
11558
+ return !props.checked;
11559
+ },
11560
+ get children() {
11561
+ const _el$21 = _tmpl$16(), _el$22 = _el$21.firstChild;
11562
+ createRenderEffect(() => setAttribute(_el$22, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
11563
+ return _el$21;
11564
+ }
11565
+ })];
11566
+ }
11567
+ function TanstackLogo() {
11568
+ return _tmpl$17();
11569
+ }
11570
+ var _tmpl$, _tmpl$2, _tmpl$3, _tmpl$4, _tmpl$5, _tmpl$6, _tmpl$7, _tmpl$8, _tmpl$9, _tmpl$10, _tmpl$11, _tmpl$12, _tmpl$13, _tmpl$14, _tmpl$15, _tmpl$16, _tmpl$17;
11545
11571
  var init_icons = __esm({
11546
11572
  "src/icons/index.tsx"() {
11547
11573
  init_web();
11548
11574
  init_web();
11549
11575
  init_web();
11550
11576
  init_web();
11551
- init_web();
11552
- init_theme();
11553
- _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">`);
11554
- _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">`);
11555
- _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">`);
11556
- _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">`);
11557
- _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">`);
11558
- _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">`);
11559
- _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">`);
11560
- _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">`);
11561
- _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">`);
11562
- _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">`);
11563
- _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">`);
11564
- _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">`);
11565
- _tmpl$13 = /* @__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 x="2" y="2" width="20" height="20" rx="2" class="check">`);
11566
- _tmpl$14 = /* @__PURE__ */ template(`<svg><g><line transform="rotate(45 7.18873 14.6316)" x1="3.56453" y1="14.63158" x2="10.81294" y2="14.63158" class="check"></line><line transform="rotate(-45 13.9674 11.5826)" x1="6.02012" y1="11.58263" x2="21.91469" y2="11.58263" class="check"></svg>`, false, true);
11567
- _tmpl$15 = /* @__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">`);
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">`);
11568
11595
  }
11569
11596
  });
11570
11597
 
@@ -11572,7 +11599,10 @@ var init_icons = __esm({
11572
11599
  function useQueryDevtoolsContext() {
11573
11600
  return useContext(QueryDevtoolsContext);
11574
11601
  }
11575
- var QueryDevtoolsContext;
11602
+ function useTheme() {
11603
+ return useContext(ThemeContext);
11604
+ }
11605
+ var QueryDevtoolsContext, ThemeContext;
11576
11606
  var init_Context = __esm({
11577
11607
  "src/Context.ts"() {
11578
11608
  init_solid();
@@ -11582,6 +11612,9 @@ var init_Context = __esm({
11582
11612
  queryFlavor: "",
11583
11613
  version: ""
11584
11614
  });
11615
+ ThemeContext = createContext(
11616
+ () => "dark"
11617
+ );
11585
11618
  }
11586
11619
  });
11587
11620
 
@@ -11601,7 +11634,10 @@ function isIterable(x) {
11601
11634
  return Symbol.iterator in x;
11602
11635
  }
11603
11636
  function Explorer(props) {
11604
- const styles = getStyles();
11637
+ const theme = useTheme();
11638
+ const styles = createMemo(() => {
11639
+ return theme() === "dark" ? darkStyles : lightStyles;
11640
+ });
11605
11641
  const queryClient = useQueryDevtoolsContext().client;
11606
11642
  const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
11607
11643
  const toggleExpanded = () => setExpanded((old) => !old);
@@ -11699,12 +11735,12 @@ function Explorer(props) {
11699
11735
  });
11700
11736
  }
11701
11737
  }), null);
11702
- createRenderEffect(() => className(_el$14, styles.actions));
11738
+ createRenderEffect(() => className(_el$14, styles().actions));
11703
11739
  return _el$14;
11704
11740
  }
11705
11741
  }), null);
11706
11742
  createRenderEffect((_p$) => {
11707
- const _v$3 = styles.expanderButtonContainer, _v$4 = styles.expanderButton, _v$5 = styles.info;
11743
+ const _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
11708
11744
  _v$3 !== _p$._v$3 && className(_el$7, _p$._v$3 = _v$3);
11709
11745
  _v$4 !== _p$._v$4 && className(_el$8, _p$._v$4 = _v$4);
11710
11746
  _v$5 !== _p$._v$5 && className(_el$12, _p$._v$5 = _v$5);
@@ -11757,7 +11793,7 @@ function Explorer(props) {
11757
11793
  });
11758
11794
  }
11759
11795
  }));
11760
- createRenderEffect(() => className(_el$15, styles.subEntry));
11796
+ createRenderEffect(() => className(_el$15, styles().subEntry));
11761
11797
  return _el$15;
11762
11798
  }
11763
11799
  }), createComponent(Show, {
@@ -11812,12 +11848,12 @@ function Explorer(props) {
11812
11848
  }
11813
11849
  })
11814
11850
  }));
11815
- createRenderEffect(() => className(_el$31, styles.subEntry));
11851
+ createRenderEffect(() => className(_el$31, styles().subEntry));
11816
11852
  return _el$31;
11817
11853
  }
11818
11854
  }), null);
11819
11855
  createRenderEffect((_p$) => {
11820
- const _v$10 = styles.entry, _v$11 = styles.expanderButton;
11856
+ const _v$10 = styles().entry, _v$11 = styles().expanderButton;
11821
11857
  _v$10 !== _p$._v$10 && className(_el$23, _p$._v$10 = _v$10);
11822
11858
  _v$11 !== _p$._v$11 && className(_el$24, _p$._v$11 = _v$11);
11823
11859
  return _p$;
@@ -11828,7 +11864,7 @@ function Explorer(props) {
11828
11864
  return _el$22;
11829
11865
  })()
11830
11866
  }));
11831
- createRenderEffect(() => className(_el$16, styles.subEntry));
11867
+ createRenderEffect(() => className(_el$16, styles().subEntry));
11832
11868
  return _el$16;
11833
11869
  }
11834
11870
  })];
@@ -11851,7 +11887,7 @@ function Explorer(props) {
11851
11887
  return (() => {
11852
11888
  const _el$32 = _tmpl$92();
11853
11889
  insert(_el$32, () => displayValue(props.value));
11854
- createRenderEffect(() => className(_el$32, styles.value));
11890
+ createRenderEffect(() => className(_el$32, styles().value));
11855
11891
  return _el$32;
11856
11892
  })();
11857
11893
  },
@@ -11868,7 +11904,7 @@ function Explorer(props) {
11868
11904
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
11869
11905
  });
11870
11906
  createRenderEffect((_p$) => {
11871
- const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles.value, styles.editableInput);
11907
+ const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles().value, styles().editableInput);
11872
11908
  _v$6 !== _p$._v$6 && setAttribute(_el$20, "type", _p$._v$6 = _v$6);
11873
11909
  _v$7 !== _p$._v$7 && className(_el$20, _p$._v$7 = _v$7);
11874
11910
  return _p$;
@@ -11895,7 +11931,7 @@ function Explorer(props) {
11895
11931
  }
11896
11932
  }), null);
11897
11933
  insert(_el$21, () => displayValue(props.value), null);
11898
- createRenderEffect(() => className(_el$21, clsx(styles.value, styles.actions, styles.editableInput)));
11934
+ createRenderEffect(() => className(_el$21, clsx(styles().value, styles().actions, styles().editableInput)));
11899
11935
  return _el$21;
11900
11936
  }
11901
11937
  })];
@@ -11915,7 +11951,7 @@ function Explorer(props) {
11915
11951
  }
11916
11952
  }), null);
11917
11953
  createRenderEffect((_p$) => {
11918
- const _v$8 = styles.row, _v$9 = styles.label;
11954
+ const _v$8 = styles().row, _v$9 = styles().label;
11919
11955
  _v$8 !== _p$._v$8 && className(_el$17, _p$._v$8 = _v$8);
11920
11956
  _v$9 !== _p$._v$9 && className(_el$18, _p$._v$9 = _v$9);
11921
11957
  return _p$;
@@ -11926,11 +11962,11 @@ function Explorer(props) {
11926
11962
  return _el$17;
11927
11963
  }
11928
11964
  }), null);
11929
- createRenderEffect(() => className(_el$6, styles.entry));
11965
+ createRenderEffect(() => className(_el$6, styles().entry));
11930
11966
  return _el$6;
11931
11967
  })();
11932
11968
  }
11933
- var _tmpl$16, _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, 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;
11934
11970
  var init_Explorer = __esm({
11935
11971
  "src/Explorer.tsx"() {
11936
11972
  init_web();
@@ -11951,7 +11987,7 @@ var init_Explorer = __esm({
11951
11987
  init_utils();
11952
11988
  init_icons();
11953
11989
  init_Context();
11954
- _tmpl$16 = /* @__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">`);
11955
11991
  _tmpl$22 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
11956
11992
  _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items" aria-label="Remove all items">`);
11957
11993
  _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item" aria-label="Delete item">`);
@@ -11963,10 +11999,13 @@ var init_Explorer = __esm({
11963
11999
  _tmpl$102 = /* @__PURE__ */ template(`<div><span>:`);
11964
12000
  _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
11965
12001
  Expander = (props) => {
11966
- const styles = getStyles();
12002
+ const theme = useTheme();
12003
+ const styles = createMemo(() => {
12004
+ return theme() === "dark" ? darkStyles : lightStyles;
12005
+ });
11967
12006
  return (() => {
11968
- const _el$ = _tmpl$16();
11969
- createRenderEffect(() => className(_el$, clsx(styles.expander, u`
12007
+ const _el$ = _tmpl$18();
12008
+ createRenderEffect(() => className(_el$, clsx(styles().expander, u`
11970
12009
  transform: rotate(${props.expanded ? 90 : 0}deg);
11971
12010
  `, props.expanded && u`
11972
12011
  & svg {
@@ -11977,7 +12016,10 @@ var init_Explorer = __esm({
11977
12016
  })();
11978
12017
  };
11979
12018
  CopyButton = (props) => {
11980
- const styles = getStyles();
12019
+ const theme = useTheme();
12020
+ const styles = createMemo(() => {
12021
+ return theme() === "dark" ? darkStyles : lightStyles;
12022
+ });
11981
12023
  const [copyState, setCopyState] = createSignal("NoCopy");
11982
12024
  return (() => {
11983
12025
  const _el$2 = _tmpl$22();
@@ -12009,7 +12051,11 @@ var init_Explorer = __esm({
12009
12051
  return copyState() === "SuccessCopy";
12010
12052
  },
12011
12053
  get children() {
12012
- return createComponent(CopiedCopier, {});
12054
+ return createComponent(CopiedCopier, {
12055
+ get theme() {
12056
+ return theme();
12057
+ }
12058
+ });
12013
12059
  }
12014
12060
  }), createComponent(Match, {
12015
12061
  get when() {
@@ -12022,7 +12068,7 @@ var init_Explorer = __esm({
12022
12068
  }
12023
12069
  }));
12024
12070
  createRenderEffect((_p$) => {
12025
- 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"}`;
12026
12072
  _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
12027
12073
  _v$2 !== _p$._v$2 && setAttribute(_el$2, "aria-label", _p$._v$2 = _v$2);
12028
12074
  return _p$;
@@ -12034,7 +12080,10 @@ var init_Explorer = __esm({
12034
12080
  })();
12035
12081
  };
12036
12082
  ClearArrayButton = (props) => {
12037
- const styles = getStyles();
12083
+ const theme = useTheme();
12084
+ const styles = createMemo(() => {
12085
+ return theme() === "dark" ? darkStyles : lightStyles;
12086
+ });
12038
12087
  const queryClient = useQueryDevtoolsContext().client;
12039
12088
  return (() => {
12040
12089
  const _el$3 = _tmpl$32();
@@ -12044,12 +12093,15 @@ var init_Explorer = __esm({
12044
12093
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
12045
12094
  };
12046
12095
  insert(_el$3, createComponent(List, {}));
12047
- createRenderEffect(() => className(_el$3, styles.actionButton));
12096
+ createRenderEffect(() => className(_el$3, styles().actionButton));
12048
12097
  return _el$3;
12049
12098
  })();
12050
12099
  };
12051
12100
  DeleteItemButton = (props) => {
12052
- const styles = getStyles();
12101
+ const theme = useTheme();
12102
+ const styles = createMemo(() => {
12103
+ return theme() === "dark" ? darkStyles : lightStyles;
12104
+ });
12053
12105
  const queryClient = useQueryDevtoolsContext().client;
12054
12106
  return (() => {
12055
12107
  const _el$4 = _tmpl$42();
@@ -12059,12 +12111,15 @@ var init_Explorer = __esm({
12059
12111
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
12060
12112
  };
12061
12113
  insert(_el$4, createComponent(Trash, {}));
12062
- createRenderEffect(() => className(_el$4, clsx(styles.actionButton)));
12114
+ createRenderEffect(() => className(_el$4, clsx(styles().actionButton)));
12063
12115
  return _el$4;
12064
12116
  })();
12065
12117
  };
12066
12118
  ToggleValueButton = (props) => {
12067
- const styles = getStyles();
12119
+ const theme = useTheme();
12120
+ const styles = createMemo(() => {
12121
+ return theme() === "dark" ? darkStyles : lightStyles;
12122
+ });
12068
12123
  const queryClient = useQueryDevtoolsContext().client;
12069
12124
  return (() => {
12070
12125
  const _el$5 = _tmpl$52();
@@ -12074,21 +12129,28 @@ var init_Explorer = __esm({
12074
12129
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
12075
12130
  };
12076
12131
  insert(_el$5, createComponent(Check, {
12132
+ get theme() {
12133
+ return theme();
12134
+ },
12077
12135
  get checked() {
12078
12136
  return props.value;
12079
12137
  }
12080
12138
  }));
12081
- createRenderEffect(() => className(_el$5, clsx(styles.actionButton)));
12139
+ createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
12140
+ width: ${tokens.size[3.5]};
12141
+ height: ${tokens.size[3.5]};
12142
+ `)));
12082
12143
  return _el$5;
12083
12144
  })();
12084
12145
  };
12085
- getStyles = () => {
12146
+ stylesFactory = (theme) => {
12086
12147
  const {
12087
12148
  colors,
12088
12149
  font,
12089
12150
  size: size2,
12090
12151
  border
12091
12152
  } = tokens;
12153
+ const t2 = (light, dark) => theme === "light" ? light : dark;
12092
12154
  return {
12093
12155
  entry: u`
12094
12156
  & * {
@@ -12102,7 +12164,7 @@ var init_Explorer = __esm({
12102
12164
  subEntry: u`
12103
12165
  margin: 0 0 0 0.5em;
12104
12166
  padding-left: 0.75em;
12105
- border-left: 2px solid ${colors.darkGray[400]};
12167
+ border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
12106
12168
  /* outline: 1px solid ${colors.teal[400]}; */
12107
12169
  `,
12108
12170
  expander: u`
@@ -12151,16 +12213,16 @@ var init_Explorer = __esm({
12151
12213
  }
12152
12214
  `,
12153
12215
  info: u`
12154
- color: ${colors.gray[500]};
12216
+ color: ${t2(colors.gray[500], colors.gray[500])};
12155
12217
  font-size: ${font.size.xs};
12156
12218
  margin-left: ${size2[1]};
12157
12219
  /* outline: 1px solid ${colors.yellow[400]}; */
12158
12220
  `,
12159
12221
  label: u`
12160
- color: ${colors.gray[300]};
12222
+ color: ${t2(colors.gray[700], colors.gray[300])};
12161
12223
  `,
12162
12224
  value: u`
12163
- color: ${colors.purple[400]};
12225
+ color: ${t2(colors.purple[600], colors.purple[400])};
12164
12226
  flex-grow: 1;
12165
12227
  `,
12166
12228
  actions: u`
@@ -12178,16 +12240,18 @@ var init_Explorer = __esm({
12178
12240
  `,
12179
12241
  editableInput: u`
12180
12242
  border: none;
12181
- padding: ${size2[0.5]} ${size2[1]};
12243
+ padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
12182
12244
  flex-grow: 1;
12183
- background-color: ${colors.gray[900]};
12245
+ border-radius: ${border.radius.xs};
12246
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
12184
12247
 
12185
12248
  &:hover {
12186
- background-color: ${colors.gray[800]};
12249
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
12187
12250
  }
12188
12251
  `,
12189
12252
  actionButton: u`
12190
12253
  background-color: transparent;
12254
+ color: ${t2(colors.gray[500], colors.gray[500])};
12191
12255
  border: none;
12192
12256
  display: inline-flex;
12193
12257
  padding: 0px;
@@ -12200,15 +12264,7 @@ var init_Explorer = __esm({
12200
12264
  z-index: 1;
12201
12265
 
12202
12266
  &:hover svg {
12203
- .copier,
12204
- .check,
12205
- .list {
12206
- stroke: ${colors.gray[500]} !important;
12207
- }
12208
-
12209
- .list-item {
12210
- stroke: ${colors.gray[700]};
12211
- }
12267
+ color: ${t2(colors.gray[600], colors.gray[400])};
12212
12268
  }
12213
12269
 
12214
12270
  &:focus-visible {
@@ -12219,6 +12275,8 @@ var init_Explorer = __esm({
12219
12275
  `
12220
12276
  };
12221
12277
  };
12278
+ lightStyles = stylesFactory("light");
12279
+ darkStyles = stylesFactory("dark");
12222
12280
  delegateEvents(["click"]);
12223
12281
  }
12224
12282
  });
@@ -12247,7 +12305,7 @@ __export(Devtools_exports, {
12247
12305
  QueryStatusCount: () => QueryStatusCount,
12248
12306
  default: () => Devtools_default
12249
12307
  });
12250
- var _tmpl$17, _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$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;
12251
12309
  var init_Devtools = __esm({
12252
12310
  "src/Devtools.tsx"() {
12253
12311
  init_web();
@@ -12276,7 +12334,7 @@ var init_Devtools = __esm({
12276
12334
  init_Explorer();
12277
12335
  init_Context();
12278
12336
  init_fonts();
12279
- _tmpl$17 = /* @__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">`);
12280
12338
  _tmpl$23 = /* @__PURE__ */ template(`<div>`);
12281
12339
  _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
12282
12340
  _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
@@ -12286,22 +12344,27 @@ var init_Devtools = __esm({
12286
12344
  _tmpl$83 = /* @__PURE__ */ template(`<span>Bottom`);
12287
12345
  _tmpl$93 = /* @__PURE__ */ template(`<span>Left`);
12288
12346
  _tmpl$103 = /* @__PURE__ */ template(`<span>Right`);
12289
- _tmpl$113 = /* @__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">`);
12290
- _tmpl$122 = /* @__PURE__ */ template(`<option>Sort by `);
12291
- _tmpl$132 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
12292
- _tmpl$142 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
12293
- _tmpl$152 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
12294
- _tmpl$162 = /* @__PURE__ */ template(`<span>`);
12295
- _tmpl$172 = /* @__PURE__ */ template(`<button><span></span><span>`);
12296
- _tmpl$18 = /* @__PURE__ */ template(`<button><span></span> Error`);
12297
- _tmpl$19 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
12298
- _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">`);
12299
- _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>`);
12300
12362
  firstBreakpoint = 1024;
12301
12363
  secondBreakpoint = 796;
12302
12364
  thirdBreakpoint = 700;
12303
12365
  BUTTON_POSITION = "bottom-right";
12304
12366
  POSITION = "bottom";
12367
+ THEME_PREFERENCE = "system";
12305
12368
  INITIAL_IS_OPEN = false;
12306
12369
  DEFAULT_HEIGHT = 500;
12307
12370
  DEFAULT_WIDTH = 500;
@@ -12310,33 +12373,51 @@ var init_Devtools = __esm({
12310
12373
  [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
12311
12374
  [panelWidth, setPanelWidth] = createSignal(0);
12312
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
+ });
12313
12386
  return createComponent(QueryDevtoolsContext.Provider, {
12314
12387
  value: props,
12315
12388
  get children() {
12316
- 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
+ });
12317
12398
  }
12318
12399
  });
12319
12400
  };
12320
12401
  Devtools_default = DevtoolsComponent;
12321
- Devtools = () => {
12402
+ Devtools = (props) => {
12322
12403
  loadFonts();
12323
- const styles = getStyles2();
12324
- const [localStore, setLocalStore] = createLocalStorage({
12325
- prefix: "TanstackQueryDevtools"
12404
+ const theme = useTheme();
12405
+ const styles = createMemo(() => {
12406
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
12326
12407
  });
12327
12408
  const buttonPosition = createMemo(() => {
12328
12409
  return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
12329
12410
  });
12330
12411
  const isOpen = createMemo(() => {
12331
- 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;
12332
12413
  });
12333
12414
  const position = createMemo(() => {
12334
- return localStore.position || useQueryDevtoolsContext().position || POSITION;
12415
+ return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
12335
12416
  });
12336
12417
  createEffect(() => {
12337
12418
  const root = document.querySelector(".tsqd-parent-container");
12338
- const height = localStore.height || DEFAULT_HEIGHT;
12339
- const width = localStore.width || DEFAULT_WIDTH;
12419
+ const height = props.localStore.height || DEFAULT_HEIGHT;
12420
+ const width = props.localStore.width || DEFAULT_WIDTH;
12340
12421
  const panelPosition = position();
12341
12422
  root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
12342
12423
  root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
@@ -12352,8 +12433,12 @@ var init_Devtools = __esm({
12352
12433
  },
12353
12434
  get children() {
12354
12435
  return createComponent(DevtoolsPanel, {
12355
- localStore,
12356
- setLocalStore
12436
+ get localStore() {
12437
+ return props.localStore;
12438
+ },
12439
+ get setLocalStore() {
12440
+ return props.setLocalStore;
12441
+ }
12357
12442
  });
12358
12443
  }
12359
12444
  });
@@ -12367,11 +12452,11 @@ var init_Devtools = __esm({
12367
12452
  return !isOpen();
12368
12453
  },
12369
12454
  get children() {
12370
- const _el$2 = _tmpl$17(), _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;
12371
12456
  insert(_el$3, createComponent(TanstackLogo, {}));
12372
- _el$4.$$click = () => setLocalStore("open", "true");
12457
+ _el$4.$$click = () => props.setLocalStore("open", "true");
12373
12458
  insert(_el$4, createComponent(TanstackLogo, {}));
12374
- createRenderEffect(() => className(_el$2, clsx(styles.devtoolsBtn, styles[`devtoolsBtn-position-${buttonPosition()}`])));
12459
+ createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
12375
12460
  return _el$2;
12376
12461
  }
12377
12462
  });
@@ -12402,7 +12487,10 @@ var init_Devtools = __esm({
12402
12487
  })();
12403
12488
  };
12404
12489
  DevtoolsPanel = (props) => {
12405
- const styles = getStyles2();
12490
+ const theme = useTheme();
12491
+ const styles = createMemo(() => {
12492
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
12493
+ });
12406
12494
  const [isResizing, setIsResizing] = createSignal(false);
12407
12495
  const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
12408
12496
  const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
@@ -12511,8 +12599,24 @@ var init_Devtools = __esm({
12511
12599
  });
12512
12600
  });
12513
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
+ };
12514
12618
  return (() => {
12515
- const _el$5 = _tmpl$113(), _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;
12516
12620
  const _ref$ = panelRef;
12517
12621
  typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
12518
12622
  _el$6.$$mousedown = handleDragStart;
@@ -12528,10 +12632,10 @@ var init_Devtools = __esm({
12528
12632
  _el$17.$$input = (e2) => props.setLocalStore("filter", e2.currentTarget.value);
12529
12633
  _el$19.addEventListener("change", (e2) => props.setLocalStore("sort", e2.currentTarget.value));
12530
12634
  insert(_el$19, () => Object.keys(sortFns).map((key) => (() => {
12531
- const _el$34 = _tmpl$122(); _el$34.firstChild;
12532
- _el$34.value = key;
12533
- insert(_el$34, key, null);
12534
- 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;
12535
12639
  })()));
12536
12640
  insert(_el$18, createComponent(ChevronDown, {}), null);
12537
12641
  _el$20.$$click = () => {
@@ -12575,7 +12679,7 @@ var init_Devtools = __esm({
12575
12679
  get children() {
12576
12680
  return [createComponent(index$d.Trigger, {
12577
12681
  get ["class"]() {
12578
- return clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
12682
+ return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
12579
12683
  },
12580
12684
  get children() {
12581
12685
  return createComponent(Settings, {});
@@ -12584,12 +12688,12 @@ var init_Devtools = __esm({
12584
12688
  get children() {
12585
12689
  return createComponent(index$d.Content, {
12586
12690
  get ["class"]() {
12587
- return clsx(styles.settingsMenu, "tsqd-settings-menu");
12691
+ return clsx(styles().settingsMenu, "tsqd-settings-menu");
12588
12692
  },
12589
12693
  get children() {
12590
12694
  return [(() => {
12591
12695
  const _el$26 = _tmpl$53();
12592
- createRenderEffect(() => className(_el$26, clsx(styles.settingsMenuHeader, "tsqd-settings-menu-header")));
12696
+ createRenderEffect(() => className(_el$26, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
12593
12697
  return _el$26;
12594
12698
  })(), createComponent(index$d.Sub, {
12595
12699
  overlap: true,
@@ -12598,7 +12702,7 @@ var init_Devtools = __esm({
12598
12702
  get children() {
12599
12703
  return [createComponent(index$d.SubTrigger, {
12600
12704
  get ["class"]() {
12601
- 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");
12602
12706
  },
12603
12707
  get children() {
12604
12708
  return [_tmpl$63(), createComponent(ChevronDown, {})];
@@ -12607,7 +12711,7 @@ var init_Devtools = __esm({
12607
12711
  get children() {
12608
12712
  return createComponent(index$d.SubContent, {
12609
12713
  get ["class"]() {
12610
- return clsx(styles.settingsMenu, "tsqd-settings-submenu");
12714
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
12611
12715
  },
12612
12716
  get children() {
12613
12717
  return [createComponent(index$d.Item, {
@@ -12616,7 +12720,7 @@ var init_Devtools = __esm({
12616
12720
  },
12617
12721
  as: "button",
12618
12722
  get ["class"]() {
12619
- 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");
12620
12724
  },
12621
12725
  get children() {
12622
12726
  return [_tmpl$73(), createComponent(ArrowUp, {})];
@@ -12627,7 +12731,7 @@ var init_Devtools = __esm({
12627
12731
  },
12628
12732
  as: "button",
12629
12733
  get ["class"]() {
12630
- 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");
12631
12735
  },
12632
12736
  get children() {
12633
12737
  return [_tmpl$83(), createComponent(ArrowDown, {})];
@@ -12638,7 +12742,7 @@ var init_Devtools = __esm({
12638
12742
  },
12639
12743
  as: "button",
12640
12744
  get ["class"]() {
12641
- 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");
12642
12746
  },
12643
12747
  get children() {
12644
12748
  return [_tmpl$93(), createComponent(ArrowLeft, {})];
@@ -12649,7 +12753,7 @@ var init_Devtools = __esm({
12649
12753
  },
12650
12754
  as: "button",
12651
12755
  get ["class"]() {
12652
- 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");
12653
12757
  },
12654
12758
  get children() {
12655
12759
  return [_tmpl$103(), createComponent(ArrowRight, {})];
@@ -12660,6 +12764,64 @@ var init_Devtools = __esm({
12660
12764
  }
12661
12765
  })];
12662
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
+ }
12663
12825
  })];
12664
12826
  }
12665
12827
  });
@@ -12667,7 +12829,7 @@ var init_Devtools = __esm({
12667
12829
  })];
12668
12830
  }
12669
12831
  }), null);
12670
- insert(_el$33, createComponent(Key, {
12832
+ insert(_el$37, createComponent(Key, {
12671
12833
  by: (q) => q.queryHash,
12672
12834
  get each() {
12673
12835
  return queries();
@@ -12687,19 +12849,16 @@ var init_Devtools = __esm({
12687
12849
  }
12688
12850
  }), null);
12689
12851
  createRenderEffect((_p$) => {
12690
- const _v$ = clsx(styles.panel, styles[`panel-position-${position()}`], u`
12691
- flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
12692
- background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
12693
- `, {
12852
+ const _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
12694
12853
  [u`
12695
12854
  min-width: min-content;
12696
12855
  `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
12697
- }, "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`
12698
12857
  height: 50%;
12699
12858
  max-height: 50%;
12700
- `, "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`
12701
12860
  gap: ${tokens.size[2.5]};
12702
- `, "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");
12703
12862
  _v$ !== _p$._v$ && className(_el$5, _p$._v$ = _v$);
12704
12863
  _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$5.style.setProperty("height", _v$2) : _el$5.style.removeProperty("height"));
12705
12864
  _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$5.style.setProperty("width", _v$3) : _el$5.style.removeProperty("width"));
@@ -12722,7 +12881,7 @@ var init_Devtools = __esm({
12722
12881
  _v$20 !== _p$._v$20 && setAttribute(_el$25, "aria-label", _p$._v$20 = _v$20);
12723
12882
  _v$21 !== _p$._v$21 && setAttribute(_el$25, "aria-pressed", _p$._v$21 = _v$21);
12724
12883
  _v$22 !== _p$._v$22 && setAttribute(_el$25, "title", _p$._v$22 = _v$22);
12725
- _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);
12726
12885
  return _p$;
12727
12886
  }, {
12728
12887
  _v$: void 0,
@@ -12755,7 +12914,15 @@ var init_Devtools = __esm({
12755
12914
  })();
12756
12915
  };
12757
12916
  QueryRow = (props) => {
12758
- 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;
12759
12926
  const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
12760
12927
  queryKey: props.query.queryKey
12761
12928
  })?.state);
@@ -12773,41 +12940,47 @@ var init_Devtools = __esm({
12773
12940
  observerCount: observers(),
12774
12941
  isStale: isStale()
12775
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
+ };
12776
12955
  return createComponent(Show, {
12777
12956
  get when() {
12778
12957
  return queryState();
12779
12958
  },
12780
12959
  get children() {
12781
- const _el$36 = _tmpl$142(), _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
12782
- _el$36.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
12783
- insert(_el$37, observers);
12784
- insert(_el$38, () => props.query.queryHash);
12785
- 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, {
12786
12965
  get when() {
12787
12966
  return isDisabled();
12788
12967
  },
12789
12968
  get children() {
12790
- return _tmpl$132();
12969
+ return _tmpl$172();
12791
12970
  }
12792
12971
  }), null);
12793
12972
  createRenderEffect((_p$) => {
12794
- 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`
12795
- background-color: ${tokens.colors[color()][700]};
12796
- color: ${tokens.colors[color()][300]};
12797
- ` : u`
12798
- background-color: ${tokens.colors[color()][900]};
12799
- color: ${tokens.colors[color()][300]};
12800
- `, "tsqd-query-observer-count");
12801
- _v$24 !== _p$._v$24 && className(_el$36, _p$._v$24 = _v$24);
12802
- _v$25 !== _p$._v$25 && setAttribute(_el$36, "aria-label", _p$._v$25 = _v$25);
12803
- _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);
12804
12977
  return _p$;
12805
12978
  }, {
12806
12979
  _v$24: void 0,
12807
12980
  _v$25: void 0,
12808
12981
  _v$26: void 0
12809
12982
  });
12810
- return _el$36;
12983
+ return _el$40;
12811
12984
  }
12812
12985
  });
12813
12986
  };
@@ -12817,50 +12990,61 @@ var init_Devtools = __esm({
12817
12990
  const fetching = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "fetching").length);
12818
12991
  const paused = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "paused").length);
12819
12992
  const inactive = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length);
12820
- const styles = getStyles2();
12993
+ const theme = useTheme();
12994
+ const styles = createMemo(() => {
12995
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
12996
+ });
12821
12997
  return (() => {
12822
- const _el$40 = _tmpl$23();
12823
- insert(_el$40, createComponent(QueryStatus, {
12998
+ const _el$44 = _tmpl$23();
12999
+ insert(_el$44, createComponent(QueryStatus, {
12824
13000
  label: "Fresh",
12825
13001
  color: "green",
12826
13002
  get count() {
12827
13003
  return fresh();
12828
13004
  }
12829
13005
  }), null);
12830
- insert(_el$40, createComponent(QueryStatus, {
13006
+ insert(_el$44, createComponent(QueryStatus, {
12831
13007
  label: "Fetching",
12832
13008
  color: "blue",
12833
13009
  get count() {
12834
13010
  return fetching();
12835
13011
  }
12836
13012
  }), null);
12837
- insert(_el$40, createComponent(QueryStatus, {
13013
+ insert(_el$44, createComponent(QueryStatus, {
12838
13014
  label: "Paused",
12839
13015
  color: "purple",
12840
13016
  get count() {
12841
13017
  return paused();
12842
13018
  }
12843
13019
  }), null);
12844
- insert(_el$40, createComponent(QueryStatus, {
13020
+ insert(_el$44, createComponent(QueryStatus, {
12845
13021
  label: "Stale",
12846
13022
  color: "yellow",
12847
13023
  get count() {
12848
13024
  return stale();
12849
13025
  }
12850
13026
  }), null);
12851
- insert(_el$40, createComponent(QueryStatus, {
13027
+ insert(_el$44, createComponent(QueryStatus, {
12852
13028
  label: "Inactive",
12853
13029
  color: "gray",
12854
13030
  get count() {
12855
13031
  return inactive();
12856
13032
  }
12857
13033
  }), null);
12858
- createRenderEffect(() => className(_el$40, clsx(styles.queryStatusContainer, "tsqd-query-status-container")));
12859
- return _el$40;
13034
+ createRenderEffect(() => className(_el$44, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
13035
+ return _el$44;
12860
13036
  })();
12861
13037
  };
12862
13038
  QueryStatus = (props) => {
12863
- 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;
12864
13048
  let tagRef;
12865
13049
  const [mouseOver, setMouseOver] = createSignal(false);
12866
13050
  const [focused, setFocused] = createSignal(false);
@@ -12876,78 +13060,83 @@ var init_Devtools = __esm({
12876
13060
  return true;
12877
13061
  });
12878
13062
  return (() => {
12879
- const _el$41 = _tmpl$172(), _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;
12880
13064
  const _ref$3 = tagRef;
12881
- typeof _ref$3 === "function" ? use(_ref$3, _el$41) : tagRef = _el$41;
12882
- _el$41.addEventListener("mouseleave", () => {
13065
+ typeof _ref$3 === "function" ? use(_ref$3, _el$45) : tagRef = _el$45;
13066
+ _el$45.addEventListener("mouseleave", () => {
12883
13067
  setMouseOver(false);
12884
13068
  setFocused(false);
12885
13069
  });
12886
- _el$41.addEventListener("mouseenter", () => setMouseOver(true));
12887
- _el$41.addEventListener("blur", () => setFocused(false));
12888
- _el$41.addEventListener("focus", () => setFocused(true));
12889
- 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({
12890
13074
  get disabled() {
12891
13075
  return showLabel();
12892
13076
  },
12893
13077
  get ["class"]() {
12894
- return clsx(styles.queryStatusTag, !showLabel() && u`
13078
+ return clsx(styles().queryStatusTag, !showLabel() && u`
12895
13079
  cursor: pointer;
12896
13080
  &:hover {
12897
- background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
13081
+ background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
12898
13082
  }
12899
13083
  `, "tsqd-query-status-tag", `tsqd-query-status-tag-${props.label.toLowerCase()}`);
12900
13084
  }
12901
13085
  }, () => mouseOver() || focused() ? {
12902
13086
  "aria-describedby": "tsqd-status-tooltip"
12903
13087
  } : {}), false, true);
12904
- insert(_el$41, createComponent(Show, {
13088
+ insert(_el$45, createComponent(Show, {
12905
13089
  get when() {
12906
13090
  return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
12907
13091
  },
12908
13092
  get children() {
12909
- const _el$42 = _tmpl$152();
12910
- insert(_el$42, () => props.label);
12911
- createRenderEffect(() => className(_el$42, clsx(styles.statusTooltip, "tsqd-query-status-tooltip")));
12912
- 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;
12913
13097
  }
12914
- }), _el$43);
12915
- insert(_el$41, createComponent(Show, {
13098
+ }), _el$47);
13099
+ insert(_el$45, createComponent(Show, {
12916
13100
  get when() {
12917
13101
  return showLabel();
12918
13102
  },
12919
13103
  get children() {
12920
- const _el$44 = _tmpl$162();
12921
- insert(_el$44, () => props.label);
12922
- createRenderEffect(() => className(_el$44, clsx(styles.queryStatusTagLabel, "tsqd-query-status-tag-label")));
12923
- 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;
12924
13108
  }
12925
- }), _el$45);
12926
- insert(_el$45, () => props.count);
13109
+ }), _el$49);
13110
+ insert(_el$49, () => props.count);
12927
13111
  createRenderEffect((_p$) => {
12928
13112
  const _v$27 = clsx(u`
12929
13113
  width: ${tokens.size[1.5]};
12930
13114
  height: ${tokens.size[1.5]};
12931
13115
  border-radius: ${tokens.border.radius.full};
12932
13116
  background-color: ${tokens.colors[props.color][500]};
12933
- `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles.queryStatusCount, props.count > 0 && props.color !== "gray" ? u`
12934
- background-color: ${tokens.colors[props.color][900]};
12935
- color: ${tokens.colors[props.color][300]};
12936
- ` : u`
12937
- color: ${tokens.colors["gray"][400]};
12938
- `, "tsqd-query-status-tag-count");
12939
- _v$27 !== _p$._v$27 && className(_el$43, _p$._v$27 = _v$27);
12940
- _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);
12941
13123
  return _p$;
12942
13124
  }, {
12943
13125
  _v$27: void 0,
12944
13126
  _v$28: void 0
12945
13127
  });
12946
- return _el$41;
13128
+ return _el$45;
12947
13129
  })();
12948
13130
  };
12949
13131
  QueryDetails = () => {
12950
- 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;
12951
13140
  const queryClient = useQueryDevtoolsContext().client;
12952
13141
  const [restoringLoading, setRestoringLoading] = createSignal(false);
12953
13142
  const errorTypes = createMemo(() => {
@@ -13004,24 +13193,38 @@ var init_Devtools = __esm({
13004
13193
  setRestoringLoading(false);
13005
13194
  }
13006
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
+ };
13007
13210
  return createComponent(Show, {
13008
13211
  get when() {
13009
13212
  return createMemo(() => !!activeQuery())() && activeQueryState();
13010
13213
  },
13011
13214
  get children() {
13012
- 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;
13013
- insert(_el$51, () => displayValue(activeQuery().queryKey, true));
13014
- insert(_el$52, statusLabel);
13015
- insert(_el$55, observerCount);
13016
- insert(_el$58, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
13017
- _el$61.$$click = handleRefetch;
13018
- _el$63.$$click = () => queryClient.invalidateQueries(activeQuery());
13019
- _el$65.$$click = () => queryClient.resetQueries(activeQuery());
13020
- _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 = () => {
13021
13224
  queryClient.removeQueries(activeQuery());
13022
13225
  setSelectedQueryHash(null);
13023
13226
  };
13024
- _el$69.$$click = () => {
13227
+ _el$73.$$click = () => {
13025
13228
  if (activeQuery()?.state.data === void 0) {
13026
13229
  setRestoringLoading(true);
13027
13230
  restoreQueryAfterLoadingOrError();
@@ -13049,79 +13252,79 @@ var init_Devtools = __esm({
13049
13252
  });
13050
13253
  }
13051
13254
  };
13052
- insert(_el$69, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$71);
13053
- insert(_el$60, createComponent(Show, {
13255
+ insert(_el$73, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$75);
13256
+ insert(_el$64, createComponent(Show, {
13054
13257
  get when() {
13055
13258
  return errorTypes().length === 0 || queryStatus() === "error";
13056
13259
  },
13057
13260
  get children() {
13058
- const _el$72 = _tmpl$18(), _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling;
13059
- _el$72.$$click = () => {
13261
+ const _el$76 = _tmpl$222(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
13262
+ _el$76.$$click = () => {
13060
13263
  if (!activeQuery().state.error) {
13061
13264
  triggerError();
13062
13265
  } else {
13063
13266
  queryClient.resetQueries(activeQuery());
13064
13267
  }
13065
13268
  };
13066
- insert(_el$72, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$74);
13269
+ insert(_el$76, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$78);
13067
13270
  createRenderEffect((_p$) => {
13068
13271
  const _v$29 = clsx(u`
13069
- color: ${tokens.colors.red[400]};
13272
+ color: ${t2(colors.red[500], colors.red[400])};
13070
13273
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$30 = queryStatus() === "pending", _v$31 = u`
13071
- background-color: ${tokens.colors.red[400]};
13274
+ background-color: ${t2(colors.red[500], colors.red[400])};
13072
13275
  `;
13073
- _v$29 !== _p$._v$29 && className(_el$72, _p$._v$29 = _v$29);
13074
- _v$30 !== _p$._v$30 && (_el$72.disabled = _p$._v$30 = _v$30);
13075
- _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);
13076
13279
  return _p$;
13077
13280
  }, {
13078
13281
  _v$29: void 0,
13079
13282
  _v$30: void 0,
13080
13283
  _v$31: void 0
13081
13284
  });
13082
- return _el$72;
13285
+ return _el$76;
13083
13286
  }
13084
13287
  }), null);
13085
- insert(_el$60, createComponent(Show, {
13288
+ insert(_el$64, createComponent(Show, {
13086
13289
  get when() {
13087
13290
  return !(errorTypes().length === 0 || queryStatus() === "error");
13088
13291
  },
13089
13292
  get children() {
13090
- const _el$75 = _tmpl$19(), _el$76 = _el$75.firstChild, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling; _el$78.firstChild;
13091
- _el$78.addEventListener("change", (e2) => {
13092
- 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);
13093
13296
  triggerError(errorType);
13094
13297
  });
13095
- insert(_el$78, createComponent(For, {
13298
+ insert(_el$82, createComponent(For, {
13096
13299
  get each() {
13097
13300
  return errorTypes();
13098
13301
  },
13099
13302
  children: (errorType) => (() => {
13100
- const _el$84 = _tmpl$21();
13101
- insert(_el$84, () => errorType.name);
13102
- createRenderEffect(() => _el$84.value = errorType.name);
13103
- 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;
13104
13307
  })()
13105
13308
  }), null);
13106
- insert(_el$75, createComponent(ChevronDown, {}), null);
13309
+ insert(_el$79, createComponent(ChevronDown, {}), null);
13107
13310
  createRenderEffect((_p$) => {
13108
- 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`
13109
13312
  background-color: ${tokens.colors.red[400]};
13110
13313
  `, _v$34 = queryStatus() === "pending";
13111
- _v$32 !== _p$._v$32 && className(_el$75, _p$._v$32 = _v$32);
13112
- _v$33 !== _p$._v$33 && className(_el$76, _p$._v$33 = _v$33);
13113
- _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);
13114
13317
  return _p$;
13115
13318
  }, {
13116
13319
  _v$32: void 0,
13117
13320
  _v$33: void 0,
13118
13321
  _v$34: void 0
13119
13322
  });
13120
- return _el$75;
13323
+ return _el$79;
13121
13324
  }
13122
13325
  }), null);
13123
- _el$81.style.setProperty("padding", "0.5rem");
13124
- insert(_el$81, createComponent(Explorer, {
13326
+ _el$85.style.setProperty("padding", "0.5rem");
13327
+ insert(_el$85, createComponent(Explorer, {
13125
13328
  label: "Data",
13126
13329
  defaultExpanded: ["Data"],
13127
13330
  get value() {
@@ -13132,8 +13335,8 @@ var init_Devtools = __esm({
13132
13335
  return activeQuery();
13133
13336
  }
13134
13337
  }));
13135
- _el$83.style.setProperty("padding", "0.5rem");
13136
- insert(_el$83, createComponent(Explorer, {
13338
+ _el$87.style.setProperty("padding", "0.5rem");
13339
+ insert(_el$87, createComponent(Explorer, {
13137
13340
  label: "Query",
13138
13341
  defaultExpanded: ["Query", "queryKey"],
13139
13342
  get value() {
@@ -13141,58 +13344,50 @@ var init_Devtools = __esm({
13141
13344
  }
13142
13345
  }));
13143
13346
  createRenderEffect((_p$) => {
13144
- 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`
13145
- background-color: ${tokens.colors[color()][700]};
13146
- color: ${tokens.colors[color()][300]};
13147
- border-color: ${tokens.colors[color()][600]};
13148
- ` : u`
13149
- background-color: ${tokens.colors[color()][900]};
13150
- color: ${tokens.colors[color()][300]};
13151
- border-color: ${tokens.colors[color()][600]};
13152
- `), _v$39 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles.actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
13153
- 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])};
13154
13349
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$42 = statusLabel() === "fetching", _v$43 = u`
13155
- background-color: ${tokens.colors.blue[400]};
13350
+ background-color: ${t2(colors.blue[600], colors.blue[400])};
13156
13351
  `, _v$44 = clsx(u`
13157
- color: ${tokens.colors.yellow[400]};
13352
+ color: ${t2(colors.yellow[600], colors.yellow[400])};
13158
13353
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$45 = queryStatus() === "pending", _v$46 = u`
13159
- background-color: ${tokens.colors.yellow[400]};
13354
+ background-color: ${t2(colors.yellow[600], colors.yellow[400])};
13160
13355
  `, _v$47 = clsx(u`
13161
- color: ${tokens.colors.gray[300]};
13356
+ color: ${t2(colors.gray[600], colors.gray[300])};
13162
13357
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$48 = queryStatus() === "pending", _v$49 = u`
13163
- background-color: ${tokens.colors.gray[400]};
13358
+ background-color: ${t2(colors.gray[600], colors.gray[400])};
13164
13359
  `, _v$50 = clsx(u`
13165
- color: ${tokens.colors.pink[400]};
13360
+ color: ${t2(colors.pink[500], colors.pink[400])};
13166
13361
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$51 = statusLabel() === "fetching", _v$52 = u`
13167
- background-color: ${tokens.colors.pink[400]};
13362
+ background-color: ${t2(colors.pink[500], colors.pink[400])};
13168
13363
  `, _v$53 = clsx(u`
13169
- color: ${tokens.colors.cyan[400]};
13364
+ color: ${t2(colors.cyan[500], colors.cyan[400])};
13170
13365
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$54 = restoringLoading(), _v$55 = u`
13171
- background-color: ${tokens.colors.cyan[400]};
13172
- `, _v$56 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles.detailsHeader, "tsqd-query-details-header");
13173
- _v$35 !== _p$._v$35 && className(_el$46, _p$._v$35 = _v$35);
13174
- _v$36 !== _p$._v$36 && className(_el$47, _p$._v$36 = _v$36);
13175
- _v$37 !== _p$._v$37 && className(_el$48, _p$._v$37 = _v$37);
13176
- _v$38 !== _p$._v$38 && className(_el$52, _p$._v$38 = _v$38);
13177
- _v$39 !== _p$._v$39 && className(_el$59, _p$._v$39 = _v$39);
13178
- _v$40 !== _p$._v$40 && className(_el$60, _p$._v$40 = _v$40);
13179
- _v$41 !== _p$._v$41 && className(_el$61, _p$._v$41 = _v$41);
13180
- _v$42 !== _p$._v$42 && (_el$61.disabled = _p$._v$42 = _v$42);
13181
- _v$43 !== _p$._v$43 && className(_el$62, _p$._v$43 = _v$43);
13182
- _v$44 !== _p$._v$44 && className(_el$63, _p$._v$44 = _v$44);
13183
- _v$45 !== _p$._v$45 && (_el$63.disabled = _p$._v$45 = _v$45);
13184
- _v$46 !== _p$._v$46 && className(_el$64, _p$._v$46 = _v$46);
13185
- _v$47 !== _p$._v$47 && className(_el$65, _p$._v$47 = _v$47);
13186
- _v$48 !== _p$._v$48 && (_el$65.disabled = _p$._v$48 = _v$48);
13187
- _v$49 !== _p$._v$49 && className(_el$66, _p$._v$49 = _v$49);
13188
- _v$50 !== _p$._v$50 && className(_el$67, _p$._v$50 = _v$50);
13189
- _v$51 !== _p$._v$51 && (_el$67.disabled = _p$._v$51 = _v$51);
13190
- _v$52 !== _p$._v$52 && className(_el$68, _p$._v$52 = _v$52);
13191
- _v$53 !== _p$._v$53 && className(_el$69, _p$._v$53 = _v$53);
13192
- _v$54 !== _p$._v$54 && (_el$69.disabled = _p$._v$54 = _v$54);
13193
- _v$55 !== _p$._v$55 && className(_el$70, _p$._v$55 = _v$55);
13194
- _v$56 !== _p$._v$56 && className(_el$80, _p$._v$56 = _v$56);
13195
- _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);
13196
13391
  return _p$;
13197
13392
  }, {
13198
13393
  _v$35: void 0,
@@ -13219,7 +13414,7 @@ var init_Devtools = __esm({
13219
13414
  _v$56: void 0,
13220
13415
  _v$57: void 0
13221
13416
  });
13222
- return _el$46;
13417
+ return _el$50;
13223
13418
  }
13224
13419
  });
13225
13420
  };
@@ -13259,7 +13454,7 @@ var init_Devtools = __esm({
13259
13454
  });
13260
13455
  return value;
13261
13456
  };
13262
- getStyles2 = () => {
13457
+ stylesFactory2 = (theme) => {
13263
13458
  const {
13264
13459
  colors,
13265
13460
  font,
@@ -13268,6 +13463,7 @@ var init_Devtools = __esm({
13268
13463
  shadow,
13269
13464
  border
13270
13465
  } = tokens;
13466
+ const t2 = (light, dark) => theme === "light" ? light : dark;
13271
13467
  return {
13272
13468
  devtoolsBtn: u`
13273
13469
  z-index: 100000;
@@ -13329,8 +13525,6 @@ var init_Devtools = __esm({
13329
13525
  display: flex;
13330
13526
  gap: ${tokens.size[0.5]};
13331
13527
  & * {
13332
- font-family: 'Inter', sans-serif;
13333
- color: ${colors.gray[300]};
13334
13528
  box-sizing: border-box;
13335
13529
  text-transform: none;
13336
13530
  }
@@ -13357,7 +13551,7 @@ var init_Devtools = __esm({
13357
13551
  left: 0;
13358
13552
  max-height: 90%;
13359
13553
  min-height: 3.5rem;
13360
- border-bottom: ${colors.darkGray[300]} 1px solid;
13554
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13361
13555
  `,
13362
13556
  "panel-position-bottom": u`
13363
13557
  bottom: 0;
@@ -13365,20 +13559,20 @@ var init_Devtools = __esm({
13365
13559
  left: 0;
13366
13560
  max-height: 90%;
13367
13561
  min-height: 3.5rem;
13368
- border-top: ${colors.darkGray[300]} 1px solid;
13562
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13369
13563
  `,
13370
13564
  "panel-position-right": u`
13371
13565
  bottom: 0;
13372
13566
  right: 0;
13373
13567
  top: 0;
13374
- border-left: ${colors.darkGray[300]} 1px solid;
13568
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13375
13569
  max-width: 90%;
13376
13570
  `,
13377
13571
  "panel-position-left": u`
13378
13572
  bottom: 0;
13379
13573
  left: 0;
13380
13574
  top: 0;
13381
- border-right: ${colors.darkGray[300]} 1px solid;
13575
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13382
13576
  max-width: 90%;
13383
13577
  `,
13384
13578
  closeBtn: u`
@@ -13389,13 +13583,15 @@ var init_Devtools = __esm({
13389
13583
  align-items: center;
13390
13584
  justify-content: center;
13391
13585
  outline: none;
13586
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
13392
13587
  &:hover {
13393
- background-color: ${colors.darkGray[500]};
13588
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13394
13589
  }
13395
13590
  &:focus-visible {
13396
13591
  outline: 2px solid ${colors.blue[600]};
13397
13592
  }
13398
13593
  & svg {
13594
+ color: ${t2(colors.gray[600], colors.gray[400])};
13399
13595
  width: ${size2[2]};
13400
13596
  height: ${size2[2]};
13401
13597
  }
@@ -13404,11 +13600,10 @@ var init_Devtools = __esm({
13404
13600
  bottom: 0;
13405
13601
  right: ${size2[2]};
13406
13602
  transform: translate(0, 100%);
13407
- background-color: ${colors.darkGray[700]};
13408
- border-right: ${colors.darkGray[300]} 1px solid;
13409
- 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;
13410
13605
  border-top: none;
13411
- border-bottom: ${colors.darkGray[300]} 1px solid;
13606
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
13412
13607
  border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
13413
13608
  padding: ${size2[0.5]} ${size2[1.5]} ${size2[1]} ${size2[1.5]};
13414
13609
 
@@ -13429,10 +13624,9 @@ var init_Devtools = __esm({
13429
13624
  top: 0;
13430
13625
  right: ${size2[2]};
13431
13626
  transform: translate(0, -100%);
13432
- background-color: ${colors.darkGray[700]};
13433
- border-right: ${colors.darkGray[300]} 1px solid;
13434
- border-left: ${colors.darkGray[300]} 1px solid;
13435
- 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;
13436
13630
  border-bottom: none;
13437
13631
  border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
13438
13632
  padding: ${size2[1]} ${size2[1.5]} ${size2[0.5]} ${size2[1.5]};
@@ -13450,11 +13644,10 @@ var init_Devtools = __esm({
13450
13644
  bottom: ${size2[2]};
13451
13645
  left: 0;
13452
13646
  transform: translate(-100%, 0);
13453
- background-color: ${colors.darkGray[700]};
13454
13647
  border-right: none;
13455
- border-left: ${colors.darkGray[300]} 1px solid;
13456
- border-top: ${colors.darkGray[300]} 1px solid;
13457
- 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;
13458
13651
  border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
13459
13652
  padding: ${size2[1.5]} ${size2[0.5]} ${size2[1.5]} ${size2[1]};
13460
13653
 
@@ -13474,11 +13667,10 @@ var init_Devtools = __esm({
13474
13667
  bottom: ${size2[2]};
13475
13668
  right: 0;
13476
13669
  transform: translate(100%, 0);
13477
- background-color: ${colors.darkGray[700]};
13478
13670
  border-left: none;
13479
- border-right: ${colors.darkGray[300]} 1px solid;
13480
- border-top: ${colors.darkGray[300]} 1px solid;
13481
- 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;
13482
13674
  border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
13483
13675
  padding: ${size2[1.5]} ${size2[1]} ${size2[1.5]} ${size2[0.5]};
13484
13676
 
@@ -13496,15 +13688,18 @@ var init_Devtools = __esm({
13496
13688
  `,
13497
13689
  queriesContainer: u`
13498
13690
  flex: 1 1 700px;
13499
- background-color: ${colors.darkGray[700]};
13691
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
13500
13692
  display: flex;
13501
13693
  flex-direction: column;
13694
+ & * {
13695
+ font-family: 'Inter', sans-serif;
13696
+ }
13502
13697
  `,
13503
13698
  dragHandle: u`
13504
13699
  position: absolute;
13505
13700
  transition: background-color 0.125s ease;
13506
13701
  &:hover {
13507
- background-color: ${colors.purple[400]}${alpha[90]};
13702
+ background-color: ${colors.purple[400]}${t2("", alpha[90])};
13508
13703
  }
13509
13704
  z-index: 4;
13510
13705
  `,
@@ -13538,7 +13733,7 @@ var init_Devtools = __esm({
13538
13733
  align-items: center;
13539
13734
  padding: ${tokens.size[2]} ${tokens.size[2.5]};
13540
13735
  gap: ${tokens.size[3]};
13541
- border-bottom: ${colors.darkGray[500]} 1px solid;
13736
+ border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
13542
13737
  align-items: center;
13543
13738
  & > button {
13544
13739
  padding: 0;
@@ -13565,11 +13760,15 @@ var init_Devtools = __esm({
13565
13760
  font-weight: ${font.weight.bold};
13566
13761
  line-height: ${font.lineHeight.xs};
13567
13762
  white-space: nowrap;
13763
+ color: ${t2(colors.gray[600], colors.gray[300])};
13568
13764
  `,
13569
13765
  queryFlavorLogo: u`
13570
13766
  font-weight: ${font.weight.semibold};
13571
13767
  font-size: ${font.size.xs};
13572
- background: linear-gradient(to right, #dd524b, #e9a03b);
13768
+ background: linear-gradient(
13769
+ to right,
13770
+ ${t2("#ea4037, #ff9b11", "#dd524b, #e9a03b")}
13771
+ );
13573
13772
  background-clip: text;
13574
13773
  -webkit-background-clip: text;
13575
13774
  line-height: 1;
@@ -13584,14 +13783,17 @@ var init_Devtools = __esm({
13584
13783
  queryStatusTag: u`
13585
13784
  display: flex;
13586
13785
  gap: ${tokens.size[1.5]};
13587
- 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])};
13588
13790
  border-radius: ${tokens.border.radius.sm};
13589
13791
  font-size: ${font.size.sm};
13590
13792
  padding: ${tokens.size[1]};
13591
- padding-left: ${tokens.size[2]};
13793
+ padding-left: ${tokens.size[1.5]};
13592
13794
  align-items: center;
13593
13795
  font-weight: ${font.weight.medium};
13594
- border: none;
13796
+ border: ${t2("1px solid " + colors.gray[300], "1px solid transparent")};
13595
13797
  user-select: none;
13596
13798
  position: relative;
13597
13799
  &:focus-visible {
@@ -13608,8 +13810,8 @@ var init_Devtools = __esm({
13608
13810
  display: flex;
13609
13811
  align-items: center;
13610
13812
  justify-content: center;
13611
- color: ${colors.gray[400]};
13612
- background-color: ${colors.darkGray[300]};
13813
+ color: ${t2(colors.gray[500], colors.gray[400])};
13814
+ background-color: ${t2(colors.gray[200], colors.darkGray[300])};
13613
13815
  border-radius: 2px;
13614
13816
  font-variant-numeric: tabular-nums;
13615
13817
  height: ${tokens.size[4.5]};
@@ -13617,15 +13819,15 @@ var init_Devtools = __esm({
13617
13819
  statusTooltip: u`
13618
13820
  position: absolute;
13619
13821
  z-index: 1;
13620
- background-color: ${colors.darkGray[500]};
13822
+ background-color: ${t2(colors.gray[50], colors.darkGray[500])};
13621
13823
  top: 100%;
13622
13824
  left: 50%;
13623
13825
  transform: translate(-50%, calc(${tokens.size[2]}));
13624
13826
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
13625
- border-radius: ${tokens.border.radius.md};
13827
+ border-radius: ${tokens.border.radius.sm};
13626
13828
  font-size: ${font.size.xs};
13627
- border: 1px solid ${colors.gray[600]};
13628
- 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])};
13629
13831
 
13630
13832
  &::before {
13631
13833
  top: 0px;
@@ -13634,7 +13836,8 @@ var init_Devtools = __esm({
13634
13836
  left: 50%;
13635
13837
  transform: translate(-50%, -100%);
13636
13838
  position: absolute;
13637
- border-color: transparent transparent ${colors.gray[600]} transparent;
13839
+ border-color: transparent transparent
13840
+ ${t2(colors.gray[400], colors.gray[600])} transparent;
13638
13841
  border-style: solid;
13639
13842
  border-width: 7px;
13640
13843
  /* transform: rotate(180deg); */
@@ -13645,16 +13848,13 @@ var init_Devtools = __esm({
13645
13848
  content: ' ';
13646
13849
  display: block;
13647
13850
  left: 50%;
13648
- transform: translate(-50%, calc(-100% + 2.5px));
13851
+ transform: translate(-50%, calc(-100% + 2px));
13649
13852
  position: absolute;
13650
- border-color: transparent transparent ${colors.darkGray[500]}
13651
- transparent;
13853
+ border-color: transparent transparent
13854
+ ${t2(colors.gray[100], colors.darkGray[500])} transparent;
13652
13855
  border-style: solid;
13653
13856
  border-width: 7px;
13654
13857
  }
13655
- `,
13656
- selectedQueryRow: u`
13657
- background-color: ${colors.darkGray[500]};
13658
13858
  `,
13659
13859
  filtersContainer: u`
13660
13860
  display: flex;
@@ -13664,47 +13864,52 @@ var init_Devtools = __esm({
13664
13864
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
13665
13865
  padding-right: ${tokens.size[1.5]};
13666
13866
  border-radius: ${tokens.border.radius.sm};
13667
- 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])};
13668
13870
  font-size: ${font.size.xs};
13669
13871
  display: flex;
13670
13872
  align-items: center;
13671
13873
  line-height: ${font.lineHeight.sm};
13672
13874
  gap: ${tokens.size[1.5]};
13673
13875
  max-width: 160px;
13674
- border: 1px solid ${colors.darkGray[200]};
13675
13876
  &:focus-visible {
13676
13877
  outline-offset: 2px;
13677
13878
  border-radius: ${border.radius.xs};
13678
13879
  outline: 2px solid ${colors.blue[800]};
13679
13880
  }
13881
+ & svg {
13882
+ color: ${t2(colors.gray[500], colors.gray[400])};
13883
+ }
13680
13884
  }
13681
13885
  `,
13682
13886
  filterInput: u`
13683
- padding: ${tokens.size[0.5]} ${tokens.size[2]};
13887
+ padding: ${size2[0.5]} ${size2[2]};
13684
13888
  border-radius: ${tokens.border.radius.sm};
13685
- background-color: ${colors.darkGray[400]};
13889
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13686
13890
  display: flex;
13687
13891
  box-sizing: content-box;
13688
13892
  align-items: center;
13689
13893
  gap: ${tokens.size[1.5]};
13690
13894
  max-width: 160px;
13691
13895
  min-width: 100px;
13692
- border: 1px solid ${colors.darkGray[200]};
13896
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
13693
13897
  height: min-content;
13898
+ color: ${t2(colors.gray[600], colors.gray[400])};
13694
13899
  & > svg {
13695
- width: ${tokens.size[3]};
13696
- height: ${tokens.size[3]};
13900
+ width: ${size2[3]};
13901
+ height: ${size2[3]};
13697
13902
  }
13698
13903
  & input {
13699
13904
  font-size: ${font.size.xs};
13700
13905
  width: 100%;
13701
- background-color: ${colors.darkGray[400]};
13906
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13702
13907
  border: none;
13703
13908
  padding: 0;
13704
13909
  line-height: ${font.lineHeight.sm};
13705
- color: ${colors.gray[300]};
13910
+ color: ${t2(colors.gray[700], colors.gray[300])};
13706
13911
  &::placeholder {
13707
- color: ${colors.gray[300]};
13912
+ color: ${t2(colors.gray[700], colors.gray[300])};
13708
13913
  }
13709
13914
  &:focus {
13710
13915
  outline: none;
@@ -13720,24 +13925,26 @@ var init_Devtools = __esm({
13720
13925
  filterSelect: u`
13721
13926
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
13722
13927
  border-radius: ${tokens.border.radius.sm};
13723
- background-color: ${colors.darkGray[400]};
13928
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13724
13929
  display: flex;
13725
13930
  align-items: center;
13726
13931
  gap: ${tokens.size[1.5]};
13727
13932
  box-sizing: content-box;
13728
13933
  max-width: 160px;
13729
- border: 1px solid ${colors.darkGray[200]};
13934
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
13730
13935
  height: min-content;
13731
13936
  & > svg {
13937
+ color: ${t2(colors.gray[600], colors.gray[400])};
13732
13938
  width: ${tokens.size[2]};
13733
13939
  height: ${tokens.size[2]};
13734
13940
  }
13735
13941
  & > select {
13736
13942
  appearance: none;
13943
+ color: ${t2(colors.gray[700], colors.gray[300])};
13737
13944
  min-width: 100px;
13738
13945
  line-height: ${font.lineHeight.sm};
13739
13946
  font-size: ${font.size.xs};
13740
- background-color: ${colors.darkGray[400]};
13947
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
13741
13948
  border: none;
13742
13949
  &:focus {
13743
13950
  outline: none;
@@ -13755,7 +13962,8 @@ var init_Devtools = __esm({
13755
13962
  `,
13756
13963
  actionsBtn: u`
13757
13964
  border-radius: ${tokens.border.radius.sm};
13758
- 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])};
13759
13967
  width: 1.625rem;
13760
13968
  height: 1.625rem;
13761
13969
  justify-content: center;
@@ -13763,13 +13971,13 @@ var init_Devtools = __esm({
13763
13971
  align-items: center;
13764
13972
  gap: ${tokens.size[1.5]};
13765
13973
  max-width: 160px;
13766
- border: 1px solid ${colors.darkGray[200]};
13767
13974
  cursor: pointer;
13768
13975
  padding: 0;
13769
13976
  &:hover {
13770
- background-color: ${colors.darkGray[500]};
13977
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13771
13978
  }
13772
13979
  & svg {
13980
+ color: ${t2(colors.gray[700], colors.gray[300])};
13773
13981
  width: ${tokens.size[3]};
13774
13982
  height: ${tokens.size[3]};
13775
13983
  }
@@ -13778,6 +13986,12 @@ var init_Devtools = __esm({
13778
13986
  border-radius: ${border.radius.xs};
13779
13987
  outline: 2px solid ${colors.blue[800]};
13780
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
+ }
13781
13995
  `,
13782
13996
  overflowQueryContainer: u`
13783
13997
  flex: 1;
@@ -13791,9 +14005,11 @@ var init_Devtools = __esm({
13791
14005
  display: flex;
13792
14006
  align-items: center;
13793
14007
  padding: 0;
13794
- background-color: inherit;
13795
14008
  border: none;
13796
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;
13797
14013
  &:focus {
13798
14014
  outline: none;
13799
14015
  }
@@ -13803,7 +14019,7 @@ var init_Devtools = __esm({
13803
14019
  outline: 2px solid ${colors.blue[800]};
13804
14020
  }
13805
14021
  &:hover .tsqd-query-hash {
13806
- background-color: ${colors.darkGray[600]};
14022
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
13807
14023
  }
13808
14024
 
13809
14025
  & .tsqd-query-observer-count {
@@ -13818,7 +14034,7 @@ var init_Devtools = __esm({
13818
14034
  font-weight: ${font.weight.medium};
13819
14035
  border-bottom-width: 1px;
13820
14036
  border-bottom-style: solid;
13821
- border-bottom: 1px solid ${colors.darkGray[700]};
14037
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[700])};
13822
14038
  }
13823
14039
  & .tsqd-query-hash {
13824
14040
  user-select: text;
@@ -13829,7 +14045,7 @@ var init_Devtools = __esm({
13829
14045
  flex: 1;
13830
14046
  padding: ${tokens.size[1]} ${tokens.size[2]};
13831
14047
  font-family: 'Menlo', 'Fira Code', monospace;
13832
- border-bottom: 1px solid ${colors.darkGray[400]};
14048
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
13833
14049
  text-align: left;
13834
14050
  text-overflow: clip;
13835
14051
  word-break: break-word;
@@ -13840,15 +14056,20 @@ var init_Devtools = __esm({
13840
14056
  display: flex;
13841
14057
  align-items: center;
13842
14058
  padding: 0 ${tokens.size[2]};
13843
- color: ${colors.gray[300]};
13844
- background-color: ${colors.darkGray[600]};
13845
- 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])};
13846
14062
  font-size: ${font.size.xs};
13847
14063
  }
14064
+ `,
14065
+ selectedQueryRow: u`
14066
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13848
14067
  `,
13849
14068
  detailsContainer: u`
13850
14069
  flex: 1 1 700px;
13851
- 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;
13852
14073
  display: flex;
13853
14074
  flex-direction: column;
13854
14075
  overflow-y: auto;
@@ -13856,10 +14077,11 @@ var init_Devtools = __esm({
13856
14077
  text-align: left;
13857
14078
  `,
13858
14079
  detailsHeader: u`
14080
+ font-family: 'Inter', sans-serif;
13859
14081
  position: sticky;
13860
14082
  top: 0;
13861
14083
  z-index: 2;
13862
- background-color: ${colors.darkGray[600]};
14084
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
13863
14085
  padding: ${tokens.size[1.5]} ${tokens.size[2]};
13864
14086
  font-weight: ${font.weight.medium};
13865
14087
  font-size: ${font.size.xs};
@@ -13892,6 +14114,10 @@ var init_Devtools = __esm({
13892
14114
  font-size: ${font.size.xs};
13893
14115
  line-height: ${font.lineHeight.xs};
13894
14116
  }
14117
+
14118
+ & pre {
14119
+ margin: 0;
14120
+ }
13895
14121
  `,
13896
14122
  queryDetailsStatus: u`
13897
14123
  border: 1px solid ${colors.darkGray[200]};
@@ -13906,12 +14132,13 @@ var init_Devtools = __esm({
13906
14132
  gap: ${tokens.size[2]};
13907
14133
  padding: 0px ${tokens.size[2]};
13908
14134
  & > button {
14135
+ font-family: 'Inter', sans-serif;
13909
14136
  font-size: ${font.size.xs};
13910
14137
  padding: ${tokens.size[1]} ${tokens.size[2]};
13911
14138
  display: flex;
13912
14139
  border-radius: ${tokens.border.radius.sm};
13913
- border: 1px solid ${colors.darkGray[400]};
13914
- 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])};
13915
14142
  align-items: center;
13916
14143
  gap: ${tokens.size[2]};
13917
14144
  font-weight: ${font.weight.medium};
@@ -13923,7 +14150,7 @@ var init_Devtools = __esm({
13923
14150
  outline: 2px solid ${colors.blue[800]};
13924
14151
  }
13925
14152
  &:hover {
13926
- background-color: ${colors.darkGray[500]};
14153
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13927
14154
  }
13928
14155
 
13929
14156
  &:disabled {
@@ -13944,17 +14171,17 @@ var init_Devtools = __esm({
13944
14171
  display: flex;
13945
14172
  border-radius: ${tokens.border.radius.sm};
13946
14173
  overflow: hidden;
13947
- border: 1px solid ${colors.darkGray[400]};
13948
- 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])};
13949
14176
  align-items: center;
13950
14177
  gap: ${tokens.size[2]};
13951
14178
  font-weight: ${font.weight.medium};
13952
14179
  line-height: ${font.lineHeight.sm};
13953
- color: ${tokens.colors.red[400]};
14180
+ color: ${t2(colors.red[500], colors.red[400])};
13954
14181
  cursor: pointer;
13955
14182
  position: relative;
13956
14183
  &:hover {
13957
- background-color: ${colors.darkGray[500]};
14184
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
13958
14185
  }
13959
14186
  & > span {
13960
14187
  width: ${size2[1.5]};
@@ -13995,10 +14222,10 @@ var init_Devtools = __esm({
13995
14222
  flex-direction: column;
13996
14223
  gap: ${size2[0.5]};
13997
14224
  border-radius: ${tokens.border.radius.sm};
13998
- border: 1px solid ${colors.gray[700]};
13999
- 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])};
14000
14227
  font-size: ${font.size.xs};
14001
- color: ${colors.gray[300]};
14228
+ color: ${t2(colors.gray[700], colors.gray[300])};
14002
14229
  z-index: 99999;
14003
14230
  min-width: 120px;
14004
14231
  padding: ${size2[0.5]};
@@ -14008,17 +14235,19 @@ var init_Devtools = __esm({
14008
14235
  align-items: center;
14009
14236
  justify-content: space-between;
14010
14237
  border-radius: ${tokens.border.radius.xs};
14011
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
14238
+ padding: ${tokens.size[1]} ${tokens.size[1]};
14012
14239
  cursor: pointer;
14013
14240
  background-color: transparent;
14014
14241
  border: none;
14242
+ color: ${t2(colors.gray[700], colors.gray[300])};
14015
14243
  & svg {
14244
+ color: ${t2(colors.gray[600], colors.gray[400])};
14016
14245
  transform: rotate(-90deg);
14017
14246
  width: ${tokens.size[2]};
14018
14247
  height: ${tokens.size[2]};
14019
14248
  }
14020
14249
  &:hover {
14021
- background-color: ${colors.darkGray[500]};
14250
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
14022
14251
  }
14023
14252
  &:focus-visible {
14024
14253
  outline-offset: 2px;
@@ -14030,33 +14259,48 @@ var init_Devtools = __esm({
14030
14259
  }
14031
14260
  `,
14032
14261
  settingsMenuHeader: u`
14033
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
14262
+ padding: ${tokens.size[1]} ${tokens.size[1]};
14034
14263
  font-weight: ${font.weight.medium};
14035
- border-bottom: 1px solid ${colors.darkGray[400]};
14036
- 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])};
14037
14266
  font-size: ${font.size["xs"]};
14038
14267
  `,
14039
14268
  settingsSubButton: u`
14040
14269
  display: flex;
14041
14270
  align-items: center;
14042
14271
  justify-content: space-between;
14043
- color: ${colors.gray[300]};
14272
+ color: ${t2(colors.gray[700], colors.gray[300])};
14044
14273
  font-size: ${font.size["xs"]};
14045
14274
  border-radius: ${tokens.border.radius.xs};
14046
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
14275
+ padding: ${tokens.size[1]} ${tokens.size[1]};
14047
14276
  cursor: pointer;
14048
14277
  background-color: transparent;
14049
14278
  border: none;
14279
+ & svg {
14280
+ color: ${t2(colors.gray[600], colors.gray[400])};
14281
+ }
14050
14282
  &:hover {
14051
- background-color: ${colors.darkGray[500]};
14283
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
14052
14284
  }
14053
14285
  &:focus-visible {
14054
14286
  outline-offset: 2px;
14055
14287
  outline: 2px solid ${colors.blue[800]};
14056
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
+ }
14057
14299
  `
14058
14300
  };
14059
14301
  };
14302
+ lightStyles2 = stylesFactory2("light");
14303
+ darkStyles2 = stylesFactory2("dark");
14060
14304
  delegateEvents(["click", "mousedown", "input"]);
14061
14305
  }
14062
14306
  });
@@ -14067,7 +14311,17 @@ init_web();
14067
14311
  init_web();
14068
14312
  init_solid();
14069
14313
  exports.TanstackQueryDevtools = class TanstackQueryDevtools {
14070
- 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;
14071
14325
  constructor(config) {
14072
14326
  const {
14073
14327
  client,
@@ -14079,57 +14333,57 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
14079
14333
  initialIsOpen,
14080
14334
  errorTypes
14081
14335
  } = config;
14082
- this.client = createSignal(client);
14083
- this.queryFlavor = queryFlavor;
14084
- this.version = version;
14085
- this.onlineManager = onlineManager;
14086
- this.buttonPosition = createSignal(buttonPosition);
14087
- this.position = createSignal(position);
14088
- this.initialIsOpen = createSignal(initialIsOpen);
14089
- 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);
14090
14344
  }
14091
14345
  setButtonPosition(position) {
14092
- this.buttonPosition[1](position);
14346
+ this.#buttonPosition[1](position);
14093
14347
  }
14094
14348
  setPosition(position) {
14095
- this.position[1](position);
14349
+ this.#position[1](position);
14096
14350
  }
14097
14351
  setInitialIsOpen(isOpen) {
14098
- this.initialIsOpen[1](isOpen);
14352
+ this.#initialIsOpen[1](isOpen);
14099
14353
  }
14100
14354
  setErrorTypes(errorTypes) {
14101
- this.errorTypes[1](errorTypes);
14355
+ this.#errorTypes[1](errorTypes);
14102
14356
  }
14103
14357
  setClient(client) {
14104
- this.client[1](client);
14358
+ this.#client[1](client);
14105
14359
  }
14106
14360
  mount(el) {
14107
- if (this.isMounted) {
14361
+ if (this.#isMounted) {
14108
14362
  throw new Error("Devtools is already mounted");
14109
14363
  }
14110
14364
  const dispose3 = render(() => {
14111
- const [btnPosition] = this.buttonPosition;
14112
- const [pos] = this.position;
14113
- const [isOpen] = this.initialIsOpen;
14114
- const [errors] = this.errorTypes;
14115
- 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;
14116
14370
  let Devtools2;
14117
- if (this.Component) {
14118
- Devtools2 = this.Component;
14371
+ if (this.#Component) {
14372
+ Devtools2 = this.#Component;
14119
14373
  } else {
14120
14374
  Devtools2 = lazy(() => Promise.resolve().then(() => (init_Devtools(), Devtools_exports)));
14121
- this.Component = Devtools2;
14375
+ this.#Component = Devtools2;
14122
14376
  }
14123
14377
  const _self$ = this;
14124
14378
  return createComponent(Devtools2, mergeProps({
14125
14379
  get queryFlavor() {
14126
- return _self$.queryFlavor;
14380
+ return _self$.#queryFlavor;
14127
14381
  },
14128
14382
  get version() {
14129
- return _self$.version;
14383
+ return _self$.#version;
14130
14384
  },
14131
14385
  get onlineManager() {
14132
- return _self$.onlineManager;
14386
+ return _self$.#onlineManager;
14133
14387
  }
14134
14388
  }, {
14135
14389
  get client() {
@@ -14149,15 +14403,15 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
14149
14403
  }
14150
14404
  }));
14151
14405
  }, el);
14152
- this.isMounted = true;
14153
- this.dispose = dispose3;
14406
+ this.#isMounted = true;
14407
+ this.#dispose = dispose3;
14154
14408
  }
14155
14409
  unmount() {
14156
- if (!this.isMounted) {
14410
+ if (!this.#isMounted) {
14157
14411
  throw new Error("Devtools is not mounted");
14158
14412
  }
14159
- this.dispose?.();
14160
- this.isMounted = false;
14413
+ this.#dispose?.();
14414
+ this.#isMounted = false;
14161
14415
  }
14162
14416
  };
14163
14417
  /*! Bundled license information: