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