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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { createContext, delegateEvents, createSignal, createComponent, createMemo, createEffect, insert, Show, createRenderEffect, className, on, onMount, setAttribute, spread, mergeProps, For, onCleanup, isServer, $PROXY, $TRACK, getListener, batch, useContext, Index, template, use, untrack, useTransition, createRoot, splitProps, createUniqueId, Portal, addEventListener, Switch, Match, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/7MNJIXJ6.js';
1
+ import { createContext, delegateEvents, createSignal, createMemo, createComponent, createEffect, insert, Show, createRenderEffect, className, on, onMount, setAttribute, spread, mergeProps, For, onCleanup, isServer, $PROXY, $TRACK, getListener, batch, useContext, Index, template, use, untrack, useTransition, createRoot, splitProps, createUniqueId, Portal, addEventListener, Switch, Match, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/7MNJIXJ6.js';
2
2
 
3
3
  // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
4
4
  var characterMap = {
@@ -9244,6 +9244,19 @@ var sortFns = {
9244
9244
  var convertRemToPixels = (rem) => {
9245
9245
  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
9246
9246
  };
9247
+ var getPreferredColorScheme = () => {
9248
+ const [colorScheme, setColorScheme] = createSignal("dark");
9249
+ onMount(() => {
9250
+ const query = window.matchMedia("(prefers-color-scheme: dark)");
9251
+ setColorScheme(query.matches ? "dark" : "light");
9252
+ const listener = (e2) => {
9253
+ setColorScheme(e2.matches ? "dark" : "light");
9254
+ };
9255
+ query.addEventListener("change", listener);
9256
+ onCleanup(() => query.removeEventListener("change", listener));
9257
+ });
9258
+ return colorScheme;
9259
+ };
9247
9260
  var updateNestedDataByPath = (oldData, updatePath2, value) => {
9248
9261
  if (updatePath2.length === 0) {
9249
9262
  return value;
@@ -9326,19 +9339,23 @@ var deleteNestedDataByPath = (oldData, deletePath) => {
9326
9339
  };
9327
9340
 
9328
9341
  // src/icons/index.tsx
9329
- var _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">`);
9330
- var _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">`);
9331
- var _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">`);
9332
- var _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">`);
9333
- var _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">`);
9334
- var _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">`);
9335
- var _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">`);
9336
- var _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">`);
9337
- var _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">`);
9338
- var _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">`);
9339
- var _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">`);
9340
- var _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">`);
9341
- var _tmpl$13 = /* @__PURE__ */ template(`<svg version="1.0" viewBox="0 0 633 633"><linearGradient id="a" x1="-666.45" x2="-666.45" y1="163.28" y2="163.99" gradientTransform="matrix(633 0 0 633 422177 -103358)" gradientUnits="userSpaceOnUse"><stop stop-color="#6BDAFF" offset="0"></stop><stop stop-color="#F9FFB5" offset=".32"></stop><stop stop-color="#FFA770" offset=".71"></stop><stop stop-color="#FF7373" offset="1"></stop></linearGradient><circle cx="316.5" cy="316.5" r="316.5" fill="url(#a)"></circle><defs><filter id="am" x="-137.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="b" x="-137.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#am)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#b)"><ellipse cx="89.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ah" x="316.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="k" x="316.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ah)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#k)"><ellipse cx="543.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ae" x="-137.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="j" x="-137.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ae)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#j)"><ellipse cx="89.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="ai" x="316.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="i" x="316.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ai)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#i)"><ellipse cx="543.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="aj" x="-137.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="h" x="-137.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#aj)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#h)"><ellipse cx="89.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="ag" x="316.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="g" x="316.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ag)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#g)"><ellipse cx="543.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="af" x="272.2" y="308" width="176.9" height="129.3" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="f" x="272.2" y="308" width="176.9" height="129.3" maskUnits="userSpaceOnUse"><g filter="url(#af)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#f)"><line x1="436" x2="431" y1="403.2" y2="431.8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="291" x2="280" y1="341.5" y2="403.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="332.9" x2="328.6" y1="384.1" y2="411.2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><linearGradient id="m" x1="-670.75" x2="-671.59" y1="164.4" y2="164.49" gradientTransform="matrix(-184.16 -32.472 -11.461 64.997 -121359 -32126)" gradientUnits="userSpaceOnUse"><stop stop-color="#EE2700" offset="0"></stop><stop stop-color="#FF008E" offset="1"></stop></linearGradient><path d="m344.1 363 97.7 17.2c5.8 2.1 8.2 6.1 7.1 12.1s-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1 0.8-12.8s8.3-4.4 13.7-2.1l55.2 53.6z" clip-rule="evenodd" fill="url(#m)" fill-rule="evenodd"></path><line x1="428.2" x2="429.1" y1="384.5" y2="378" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="395.2" x2="396.1" y1="379.5" y2="373" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="362.2" x2="363.1" y1="373.5" y2="367.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="324.2" x2="328.4" y1="351.3" y2="347.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="303.2" x2="307.4" y1="331.3" y2="327.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line></g><defs><filter id="ak" x="73.2" y="113.8" width="280.6" height="317.4" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="e" x="73.2" y="113.8" width="280.6" height="317.4" maskUnits="userSpaceOnUse"><g filter="url(#ak)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#e)"><linearGradient id="n" x1="-672.16" x2="-672.16" y1="165.03" y2="166.03" gradientTransform="matrix(-100.18 48.861 97.976 200.88 -83342 -93.059)" gradientUnits="userSpaceOnUse"><stop stop-color="#A17500" offset="0"></stop><stop stop-color="#5D2100" offset="1"></stop></linearGradient><path d="m192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.1-3 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6s-10.8-51.9-22.1-99.6l-25.3 4.6" clip-rule="evenodd" fill="url(#n)" fill-rule="evenodd"></path><g stroke="#2F8A00"><linearGradient id="r" x1="-660.23" x2="-660.23" y1="166.72" y2="167.72" gradientTransform="matrix(92.683 4.8573 -2.0259 38.657 61680 -3088.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z" clip-rule="evenodd" fill="url(#r)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="s" x1="-661.36" x2="-661.36" y1="164.18" y2="165.18" gradientTransform="matrix(110 5.7648 -6.3599 121.35 73933 -15933)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.4 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20.2 49.6-53.2 49.6-53.2z" clip-rule="evenodd" fill="url(#s)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="q" x1="-656.79" x2="-656.79" y1="165.15" y2="166.15" gradientTransform="matrix(62.954 3.2993 -3.5023 66.828 42156 -8754.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9c-0.8-21.9 6-38 20.6-48.2s29.8-15.4 45.5-15.3c-6.1 21.4-14.5 35.8-25.2 43.4s-24.4 14.2-40.9 20.1z" clip-rule="evenodd" fill="url(#q)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="p" x1="-663.07" x2="-663.07" y1="165.44" y2="166.44" gradientTransform="matrix(152.47 7.9907 -3.0936 59.029 101884 -4318.7)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c31.9-30 64.1-39.7 96.7-29s50.8 30.4 54.6 59.1c-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z" clip-rule="evenodd" fill="url(#p)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="o" x1="-662.57" x2="-662.57" y1="164.44" y2="165.44" gradientTransform="matrix(136.46 7.1517 -5.2163 99.533 91536 -11442)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c35.8-7.6 65.6-0.2 89.2 22s37.7 49 42.3 80.3c-39.8-9.7-68.3-23.8-85.5-42.4s-32.5-38.5-46-59.9z" clip-rule="evenodd" fill="url(#o)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="l" x1="-656.43" x2="-656.43" y1="163.86" y2="164.86" gradientTransform="matrix(60.866 3.1899 -8.7773 167.48 41560 -25168)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6s-3.6 63.1 8.7 99.6c27.4-40.3 43.2-69.6 47.4-88s5.6-44.1 4-77.2z" clip-rule="evenodd" fill="url(#l)" fill-rule="evenodd" stroke-width="13"></path><path d="m196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4s-9.5 33-11.1 45.1" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m194.9 185.7c-24.4 1.7-43.8 9-58.1 21.8s-24.7 25.4-31.3 37.8" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m204.5 176.4c29.7-6.7 52-8.4 67-5.1s26.9 8.6 35.8 15.9" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m196.5 181.4c20.3 9.9 38.2 20.5 53.9 31.9s27.4 22.1 35.1 32" fill="none" stroke-linecap="round" stroke-width="8"></path></g></g><defs><filter id="al" x="50.5" y="399" width="532" height="633" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="d" x="50.5" y="399" width="532" height="633" maskUnits="userSpaceOnUse"><g filter="url(#al)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#d)"><linearGradient id="u" x1="-666.06" x2="-666.23" y1="163.36" y2="163.75" gradientTransform="matrix(532 0 0 633 354760 -102959)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF400" offset="0"></stop><stop stop-color="#3C8700" offset="1"></stop></linearGradient><ellipse cx="316.5" cy="715.5" rx="266" ry="316.5" fill="url(#u)"></ellipse></g><defs><filter id="ad" x="391" y="-24" width="288" height="283" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="c" x="391" y="-24" width="288" height="283" maskUnits="userSpaceOnUse"><g filter="url(#ad)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#c)"><linearGradient id="t" x1="-664.56" x2="-664.56" y1="163.79" y2="164.79" gradientTransform="matrix(227 0 0 227 151421 -37204)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDF00" offset="0"></stop><stop stop-color="#FF9D00" offset="1"></stop></linearGradient><circle cx="565.5" cy="89.5" r="113.5" fill="url(#t)"></circle><linearGradient id="v" x1="-644.5" x2="-645.77" y1="342" y2="342" gradientTransform="matrix(30 0 0 1 19770 -253)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="427" x2="397" y1="89" y2="89" fill="none" stroke="url(#v)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="aa" x1="-641.56" x2="-642.83" y1="196.02" y2="196.07" gradientTransform="matrix(26.5 0 0 5.5 17439 -1025.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="430.5" x2="404" y1="55.5" y2="50" fill="none" stroke="url(#aa)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="w" x1="-643.73" x2="-645" y1="185.83" y2="185.9" gradientTransform="matrix(29 0 0 8 19107 -1361)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="431" x2="402" y1="122" y2="130" fill="none" stroke="url(#w)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ac" x1="-638.94" x2="-640.22" y1="177.09" y2="177.39" gradientTransform="matrix(24 0 0 13 15783 -2145)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="442" x2="418" y1="153" y2="166" fill="none" stroke="url(#ac)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ab" x1="-633.42" x2="-634.7" y1="172.41" y2="173.31" gradientTransform="matrix(20 0 0 19 13137 -3096)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="464" x2="444" y1="180" y2="199" fill="none" stroke="url(#ab)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="y" x1="-619.05" x2="-619.52" y1="170.82" y2="171.82" gradientTransform="matrix(13.83 0 0 22.85 9050 -3703.4)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="491.4" x2="477.5" y1="203" y2="225.9" fill="none" stroke="url(#y)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="x" x1="-578.5" x2="-578.63" y1="170.31" y2="171.31" gradientTransform="matrix(7.5 0 0 24.5 4860 -3953)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="524.5" x2="517" y1="219.5" y2="244" fill="none" stroke="url(#x)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="z" x1="666.5" x2="666.5" y1="170.31" y2="171.31" gradientTransform="matrix(.5 0 0 24.5 231.5 -3944)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="564.5" x2="565" y1="228.5" y2="253" fill="none" stroke="url(#z)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12">`);
9342
+ var _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">`);
9343
+ var _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">`);
9344
+ var _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">`);
9345
+ var _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">`);
9346
+ var _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">`);
9347
+ var _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">`);
9348
+ var _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">`);
9349
+ var _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">`);
9350
+ var _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">`);
9351
+ var _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">`);
9352
+ var _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">`);
9353
+ var _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">`);
9354
+ var _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">`);
9355
+ var _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">`);
9356
+ var _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">`);
9357
+ var _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">`);
9358
+ var _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">`);
9342
9359
  function Search() {
9343
9360
  return _tmpl$();
9344
9361
  }
@@ -9368,41 +9385,63 @@ function ArrowRight() {
9368
9385
  return _el$7;
9369
9386
  })();
9370
9387
  }
9371
- function Wifi() {
9388
+ function Sun() {
9372
9389
  return _tmpl$6();
9373
9390
  }
9374
- function Offline() {
9375
- return (() => {
9376
- const _el$9 = _tmpl$7();
9377
- createRenderEffect((_p$) => {
9378
- const _v$ = tokens.colors.yellow[500], _v$2 = tokens.colors.yellow[500];
9379
- _v$ !== _p$._v$ && setAttribute(_el$9, "stroke", _p$._v$ = _v$);
9380
- _v$2 !== _p$._v$2 && setAttribute(_el$9, "fill", _p$._v$2 = _v$2);
9381
- return _p$;
9382
- }, {
9383
- _v$: void 0,
9384
- _v$2: void 0
9385
- });
9386
- return _el$9;
9387
- })();
9391
+ function Moon() {
9392
+ return _tmpl$7();
9388
9393
  }
9389
- function Settings() {
9394
+ function Monitor() {
9390
9395
  return _tmpl$8();
9391
9396
  }
9392
- function Copier() {
9397
+ function Wifi() {
9393
9398
  return _tmpl$9();
9394
9399
  }
9395
- function CopiedCopier() {
9400
+ function Offline() {
9396
9401
  return _tmpl$10();
9397
9402
  }
9398
- function ErrorCopier() {
9403
+ function Settings() {
9399
9404
  return _tmpl$11();
9400
9405
  }
9401
- function List() {
9406
+ function Copier() {
9402
9407
  return _tmpl$12();
9403
9408
  }
9409
+ function CopiedCopier(props) {
9410
+ return (() => {
9411
+ const _el$15 = _tmpl$13(), _el$16 = _el$15.firstChild;
9412
+ createRenderEffect(() => setAttribute(_el$16, "stroke", props.theme === "dark" ? "#12B76A" : "#027A48"));
9413
+ return _el$15;
9414
+ })();
9415
+ }
9416
+ function ErrorCopier() {
9417
+ return _tmpl$14();
9418
+ }
9419
+ function List() {
9420
+ return _tmpl$15();
9421
+ }
9422
+ function Check(props) {
9423
+ return [createComponent(Show, {
9424
+ get when() {
9425
+ return props.checked;
9426
+ },
9427
+ get children() {
9428
+ const _el$19 = _tmpl$13(), _el$20 = _el$19.firstChild;
9429
+ createRenderEffect(() => setAttribute(_el$20, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
9430
+ return _el$19;
9431
+ }
9432
+ }), createComponent(Show, {
9433
+ get when() {
9434
+ return !props.checked;
9435
+ },
9436
+ get children() {
9437
+ const _el$21 = _tmpl$16(), _el$22 = _el$21.firstChild;
9438
+ createRenderEffect(() => setAttribute(_el$22, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
9439
+ return _el$21;
9440
+ }
9441
+ })];
9442
+ }
9404
9443
  function TanstackLogo() {
9405
- return _tmpl$13();
9444
+ return _tmpl$17();
9406
9445
  }
9407
9446
 
9408
9447
  // src/Context.ts
@@ -9415,18 +9454,25 @@ var QueryDevtoolsContext = createContext({
9415
9454
  function useQueryDevtoolsContext() {
9416
9455
  return useContext(QueryDevtoolsContext);
9417
9456
  }
9457
+ var ThemeContext = createContext(
9458
+ () => "dark"
9459
+ );
9460
+ function useTheme() {
9461
+ return useContext(ThemeContext);
9462
+ }
9418
9463
 
9419
9464
  // src/Explorer.tsx
9420
- var _tmpl$14 = /* @__PURE__ */ template(`<span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9465
+ var _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">`);
9421
9466
  var _tmpl$22 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
9422
9467
  var _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items" aria-label="Remove all items">`);
9423
9468
  var _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item" aria-label="Delete item">`);
9424
- var _tmpl$52 = /* @__PURE__ */ template(`<div>`);
9425
- var _tmpl$62 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
9426
- var _tmpl$72 = /* @__PURE__ */ template(`<input>`);
9427
- var _tmpl$82 = /* @__PURE__ */ template(`<div><span>:`);
9428
- var _tmpl$92 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
9429
- var _tmpl$102 = /* @__PURE__ */ template(`<span>`);
9469
+ var _tmpl$52 = /* @__PURE__ */ template(`<button title="Toggle value" aria-label="Toggle value">`);
9470
+ var _tmpl$62 = /* @__PURE__ */ template(`<div>`);
9471
+ var _tmpl$72 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
9472
+ var _tmpl$82 = /* @__PURE__ */ template(`<input>`);
9473
+ var _tmpl$92 = /* @__PURE__ */ template(`<span>`);
9474
+ var _tmpl$102 = /* @__PURE__ */ template(`<div><span>:`);
9475
+ var _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
9430
9476
  function chunkArray(array, size2) {
9431
9477
  if (size2 < 1)
9432
9478
  return [];
@@ -9439,10 +9485,13 @@ function chunkArray(array, size2) {
9439
9485
  return result;
9440
9486
  }
9441
9487
  var Expander = (props) => {
9442
- const styles = getStyles();
9488
+ const theme = useTheme();
9489
+ const styles = createMemo(() => {
9490
+ return theme() === "dark" ? darkStyles : lightStyles;
9491
+ });
9443
9492
  return (() => {
9444
- const _el$ = _tmpl$14();
9445
- createRenderEffect(() => className(_el$, clsx(styles.expander, u`
9493
+ const _el$ = _tmpl$18();
9494
+ createRenderEffect(() => className(_el$, clsx(styles().expander, u`
9446
9495
  transform: rotate(${props.expanded ? 90 : 0}deg);
9447
9496
  `, props.expanded && u`
9448
9497
  & svg {
@@ -9453,7 +9502,10 @@ var Expander = (props) => {
9453
9502
  })();
9454
9503
  };
9455
9504
  var CopyButton = (props) => {
9456
- const styles = getStyles();
9505
+ const theme = useTheme();
9506
+ const styles = createMemo(() => {
9507
+ return theme() === "dark" ? darkStyles : lightStyles;
9508
+ });
9457
9509
  const [copyState, setCopyState] = createSignal("NoCopy");
9458
9510
  return (() => {
9459
9511
  const _el$2 = _tmpl$22();
@@ -9484,7 +9536,11 @@ var CopyButton = (props) => {
9484
9536
  return copyState() === "SuccessCopy";
9485
9537
  },
9486
9538
  get children() {
9487
- return createComponent(CopiedCopier, {});
9539
+ return createComponent(CopiedCopier, {
9540
+ get theme() {
9541
+ return theme();
9542
+ }
9543
+ });
9488
9544
  }
9489
9545
  }), createComponent(Match, {
9490
9546
  get when() {
@@ -9497,7 +9553,7 @@ var CopyButton = (props) => {
9497
9553
  }
9498
9554
  }));
9499
9555
  createRenderEffect((_p$) => {
9500
- const _v$ = styles.actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
9556
+ const _v$ = styles().actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
9501
9557
  _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
9502
9558
  _v$2 !== _p$._v$2 && setAttribute(_el$2, "aria-label", _p$._v$2 = _v$2);
9503
9559
  return _p$;
@@ -9509,7 +9565,10 @@ var CopyButton = (props) => {
9509
9565
  })();
9510
9566
  };
9511
9567
  var ClearArrayButton = (props) => {
9512
- const styles = getStyles();
9568
+ const theme = useTheme();
9569
+ const styles = createMemo(() => {
9570
+ return theme() === "dark" ? darkStyles : lightStyles;
9571
+ });
9513
9572
  const queryClient = useQueryDevtoolsContext().client;
9514
9573
  return (() => {
9515
9574
  const _el$3 = _tmpl$32();
@@ -9519,12 +9578,15 @@ var ClearArrayButton = (props) => {
9519
9578
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
9520
9579
  };
9521
9580
  insert(_el$3, createComponent(List, {}));
9522
- createRenderEffect(() => className(_el$3, styles.actionButton));
9581
+ createRenderEffect(() => className(_el$3, styles().actionButton));
9523
9582
  return _el$3;
9524
9583
  })();
9525
9584
  };
9526
9585
  var DeleteItemButton = (props) => {
9527
- const styles = getStyles();
9586
+ const theme = useTheme();
9587
+ const styles = createMemo(() => {
9588
+ return theme() === "dark" ? darkStyles : lightStyles;
9589
+ });
9528
9590
  const queryClient = useQueryDevtoolsContext().client;
9529
9591
  return (() => {
9530
9592
  const _el$4 = _tmpl$42();
@@ -9534,15 +9596,46 @@ var DeleteItemButton = (props) => {
9534
9596
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
9535
9597
  };
9536
9598
  insert(_el$4, createComponent(Trash, {}));
9537
- createRenderEffect(() => className(_el$4, clsx(styles.actionButton)));
9599
+ createRenderEffect(() => className(_el$4, clsx(styles().actionButton)));
9538
9600
  return _el$4;
9539
9601
  })();
9540
9602
  };
9603
+ var ToggleValueButton = (props) => {
9604
+ const theme = useTheme();
9605
+ const styles = createMemo(() => {
9606
+ return theme() === "dark" ? darkStyles : lightStyles;
9607
+ });
9608
+ const queryClient = useQueryDevtoolsContext().client;
9609
+ return (() => {
9610
+ const _el$5 = _tmpl$52();
9611
+ _el$5.$$click = () => {
9612
+ const oldData = props.activeQuery.state.data;
9613
+ const newData = updateNestedDataByPath(oldData, props.dataPath, !props.value);
9614
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
9615
+ };
9616
+ insert(_el$5, createComponent(Check, {
9617
+ get theme() {
9618
+ return theme();
9619
+ },
9620
+ get checked() {
9621
+ return props.value;
9622
+ }
9623
+ }));
9624
+ createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
9625
+ width: ${tokens.size[3.5]};
9626
+ height: ${tokens.size[3.5]};
9627
+ `)));
9628
+ return _el$5;
9629
+ })();
9630
+ };
9541
9631
  function isIterable(x) {
9542
9632
  return Symbol.iterator in x;
9543
9633
  }
9544
9634
  function Explorer(props) {
9545
- const styles = getStyles();
9635
+ const theme = useTheme();
9636
+ const styles = createMemo(() => {
9637
+ return theme() === "dark" ? darkStyles : lightStyles;
9638
+ });
9546
9639
  const queryClient = useQueryDevtoolsContext().client;
9547
9640
  const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
9548
9641
  const toggleExpanded = () => setExpanded((old) => !old);
@@ -9585,36 +9678,36 @@ function Explorer(props) {
9585
9678
  const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
9586
9679
  const currentDataPath = props.dataPath ?? [];
9587
9680
  return (() => {
9588
- const _el$5 = _tmpl$52();
9589
- insert(_el$5, createComponent(Show, {
9681
+ const _el$6 = _tmpl$62();
9682
+ insert(_el$6, createComponent(Show, {
9590
9683
  get when() {
9591
9684
  return subEntryPages().length;
9592
9685
  },
9593
9686
  get children() {
9594
9687
  return [(() => {
9595
- const _el$6 = _tmpl$62(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$10 = _el$9.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.firstChild;
9596
- _el$7.$$click = () => toggleExpanded();
9597
- insert(_el$7, createComponent(Expander, {
9688
+ const _el$7 = _tmpl$72(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$9.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild;
9689
+ _el$8.$$click = () => toggleExpanded();
9690
+ insert(_el$8, createComponent(Expander, {
9598
9691
  get expanded() {
9599
9692
  return expanded();
9600
9693
  }
9601
- }), _el$8);
9602
- insert(_el$9, () => props.label);
9603
- insert(_el$11, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$12);
9604
- insert(_el$11, () => subEntries().length, _el$12);
9605
- insert(_el$11, () => subEntries().length > 1 ? `items` : `item`, null);
9606
- insert(_el$6, createComponent(Show, {
9694
+ }), _el$9);
9695
+ insert(_el$10, () => props.label);
9696
+ insert(_el$12, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$13);
9697
+ insert(_el$12, () => subEntries().length, _el$13);
9698
+ insert(_el$12, () => subEntries().length > 1 ? `items` : `item`, null);
9699
+ insert(_el$7, createComponent(Show, {
9607
9700
  get when() {
9608
9701
  return props.editable;
9609
9702
  },
9610
9703
  get children() {
9611
- const _el$13 = _tmpl$52();
9612
- insert(_el$13, createComponent(CopyButton, {
9704
+ const _el$14 = _tmpl$62();
9705
+ insert(_el$14, createComponent(CopyButton, {
9613
9706
  get value() {
9614
9707
  return props.value;
9615
9708
  }
9616
9709
  }), null);
9617
- insert(_el$13, createComponent(Show, {
9710
+ insert(_el$14, createComponent(Show, {
9618
9711
  get when() {
9619
9712
  return props.itemsDeletable && props.activeQuery !== void 0;
9620
9713
  },
@@ -9627,7 +9720,7 @@ function Explorer(props) {
9627
9720
  });
9628
9721
  }
9629
9722
  }), null);
9630
- insert(_el$13, createComponent(Show, {
9723
+ insert(_el$14, createComponent(Show, {
9631
9724
  get when() {
9632
9725
  return type() === "array" && props.activeQuery !== void 0;
9633
9726
  },
@@ -9640,22 +9733,22 @@ function Explorer(props) {
9640
9733
  });
9641
9734
  }
9642
9735
  }), null);
9643
- createRenderEffect(() => className(_el$13, styles.actions));
9644
- return _el$13;
9736
+ createRenderEffect(() => className(_el$14, styles().actions));
9737
+ return _el$14;
9645
9738
  }
9646
9739
  }), null);
9647
9740
  createRenderEffect((_p$) => {
9648
- const _v$3 = styles.expanderButtonContainer, _v$4 = styles.expanderButton, _v$5 = styles.info;
9649
- _v$3 !== _p$._v$3 && className(_el$6, _p$._v$3 = _v$3);
9650
- _v$4 !== _p$._v$4 && className(_el$7, _p$._v$4 = _v$4);
9651
- _v$5 !== _p$._v$5 && className(_el$11, _p$._v$5 = _v$5);
9741
+ const _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
9742
+ _v$3 !== _p$._v$3 && className(_el$7, _p$._v$3 = _v$3);
9743
+ _v$4 !== _p$._v$4 && className(_el$8, _p$._v$4 = _v$4);
9744
+ _v$5 !== _p$._v$5 && className(_el$12, _p$._v$5 = _v$5);
9652
9745
  return _p$;
9653
9746
  }, {
9654
9747
  _v$3: void 0,
9655
9748
  _v$4: void 0,
9656
9749
  _v$5: void 0
9657
9750
  });
9658
- return _el$6;
9751
+ return _el$7;
9659
9752
  })(), createComponent(Show, {
9660
9753
  get when() {
9661
9754
  return expanded();
@@ -9666,8 +9759,8 @@ function Explorer(props) {
9666
9759
  return subEntryPages().length === 1;
9667
9760
  },
9668
9761
  get children() {
9669
- const _el$14 = _tmpl$52();
9670
- insert(_el$14, createComponent(Key, {
9762
+ const _el$15 = _tmpl$62();
9763
+ insert(_el$15, createComponent(Key, {
9671
9764
  get each() {
9672
9765
  return subEntries();
9673
9766
  },
@@ -9698,36 +9791,36 @@ function Explorer(props) {
9698
9791
  });
9699
9792
  }
9700
9793
  }));
9701
- createRenderEffect(() => className(_el$14, styles.subEntry));
9702
- return _el$14;
9794
+ createRenderEffect(() => className(_el$15, styles().subEntry));
9795
+ return _el$15;
9703
9796
  }
9704
9797
  }), createComponent(Show, {
9705
9798
  get when() {
9706
9799
  return subEntryPages().length > 1;
9707
9800
  },
9708
9801
  get children() {
9709
- const _el$15 = _tmpl$52();
9710
- insert(_el$15, createComponent(Index, {
9802
+ const _el$16 = _tmpl$62();
9803
+ insert(_el$16, createComponent(Index, {
9711
9804
  get each() {
9712
9805
  return subEntryPages();
9713
9806
  },
9714
9807
  children: (entries3, index) => (() => {
9715
- const _el$20 = _tmpl$92(), _el$21 = _el$20.firstChild, _el$22 = _el$21.firstChild, _el$23 = _el$22.firstChild, _el$27 = _el$23.nextSibling, _el$25 = _el$27.nextSibling, _el$28 = _el$25.nextSibling; _el$28.nextSibling;
9716
- _el$22.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
9717
- insert(_el$22, createComponent(Expander, {
9808
+ const _el$22 = _tmpl$112(), _el$23 = _el$22.firstChild, _el$24 = _el$23.firstChild, _el$25 = _el$24.firstChild, _el$29 = _el$25.nextSibling, _el$27 = _el$29.nextSibling, _el$30 = _el$27.nextSibling; _el$30.nextSibling;
9809
+ _el$24.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
9810
+ insert(_el$24, createComponent(Expander, {
9718
9811
  get expanded() {
9719
9812
  return expandedPages().includes(index);
9720
9813
  }
9721
- }), _el$23);
9722
- insert(_el$22, index * 100, _el$27);
9723
- insert(_el$22, index * 100 + 100 - 1, _el$28);
9724
- insert(_el$21, createComponent(Show, {
9814
+ }), _el$25);
9815
+ insert(_el$24, index * 100, _el$29);
9816
+ insert(_el$24, index * 100 + 100 - 1, _el$30);
9817
+ insert(_el$23, createComponent(Show, {
9725
9818
  get when() {
9726
9819
  return expandedPages().includes(index);
9727
9820
  },
9728
9821
  get children() {
9729
- const _el$29 = _tmpl$52();
9730
- insert(_el$29, createComponent(Key, {
9822
+ const _el$31 = _tmpl$62();
9823
+ insert(_el$31, createComponent(Key, {
9731
9824
  get each() {
9732
9825
  return entries3();
9733
9826
  },
@@ -9753,70 +9846,96 @@ function Explorer(props) {
9753
9846
  }
9754
9847
  })
9755
9848
  }));
9756
- createRenderEffect(() => className(_el$29, styles.subEntry));
9757
- return _el$29;
9849
+ createRenderEffect(() => className(_el$31, styles().subEntry));
9850
+ return _el$31;
9758
9851
  }
9759
9852
  }), null);
9760
9853
  createRenderEffect((_p$) => {
9761
- const _v$10 = styles.entry, _v$11 = styles.expanderButton;
9762
- _v$10 !== _p$._v$10 && className(_el$21, _p$._v$10 = _v$10);
9763
- _v$11 !== _p$._v$11 && className(_el$22, _p$._v$11 = _v$11);
9854
+ const _v$10 = styles().entry, _v$11 = styles().expanderButton;
9855
+ _v$10 !== _p$._v$10 && className(_el$23, _p$._v$10 = _v$10);
9856
+ _v$11 !== _p$._v$11 && className(_el$24, _p$._v$11 = _v$11);
9764
9857
  return _p$;
9765
9858
  }, {
9766
9859
  _v$10: void 0,
9767
9860
  _v$11: void 0
9768
9861
  });
9769
- return _el$20;
9862
+ return _el$22;
9770
9863
  })()
9771
9864
  }));
9772
- createRenderEffect(() => className(_el$15, styles.subEntry));
9773
- return _el$15;
9865
+ createRenderEffect(() => className(_el$16, styles().subEntry));
9866
+ return _el$16;
9774
9867
  }
9775
9868
  })];
9776
9869
  }
9777
9870
  })];
9778
9871
  }
9779
9872
  }), null);
9780
- insert(_el$5, createComponent(Show, {
9873
+ insert(_el$6, createComponent(Show, {
9781
9874
  get when() {
9782
9875
  return subEntryPages().length === 0;
9783
9876
  },
9784
9877
  get children() {
9785
- const _el$16 = _tmpl$82(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild;
9786
- insert(_el$17, () => props.label, _el$18);
9787
- insert(_el$16, createComponent(Show, {
9878
+ const _el$17 = _tmpl$102(), _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild;
9879
+ insert(_el$18, () => props.label, _el$19);
9880
+ insert(_el$17, createComponent(Show, {
9788
9881
  get when() {
9789
- return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number");
9882
+ return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number" || type() === "boolean");
9790
9883
  },
9791
9884
  get fallback() {
9792
9885
  return (() => {
9793
- const _el$30 = _tmpl$102();
9794
- insert(_el$30, () => displayValue(props.value));
9795
- createRenderEffect(() => className(_el$30, styles.value));
9796
- return _el$30;
9886
+ const _el$32 = _tmpl$92();
9887
+ insert(_el$32, () => displayValue(props.value));
9888
+ createRenderEffect(() => className(_el$32, styles().value));
9889
+ return _el$32;
9797
9890
  })();
9798
9891
  },
9799
9892
  get children() {
9800
- const _el$19 = _tmpl$72();
9801
- _el$19.addEventListener("change", (changeEvent) => {
9802
- const oldData = props.activeQuery.state.data;
9803
- const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
9804
- queryClient.setQueryData(props.activeQuery.queryKey, newData);
9805
- });
9806
- createRenderEffect((_p$) => {
9807
- const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles.value, styles.editableInput);
9808
- _v$6 !== _p$._v$6 && setAttribute(_el$19, "type", _p$._v$6 = _v$6);
9809
- _v$7 !== _p$._v$7 && className(_el$19, _p$._v$7 = _v$7);
9810
- return _p$;
9811
- }, {
9812
- _v$6: void 0,
9813
- _v$7: void 0
9814
- });
9815
- createRenderEffect(() => _el$19.value = props.value);
9816
- return _el$19;
9893
+ return [createComponent(Show, {
9894
+ get when() {
9895
+ return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number");
9896
+ },
9897
+ get children() {
9898
+ const _el$20 = _tmpl$82();
9899
+ _el$20.addEventListener("change", (changeEvent) => {
9900
+ const oldData = props.activeQuery.state.data;
9901
+ const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
9902
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
9903
+ });
9904
+ createRenderEffect((_p$) => {
9905
+ const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles().value, styles().editableInput);
9906
+ _v$6 !== _p$._v$6 && setAttribute(_el$20, "type", _p$._v$6 = _v$6);
9907
+ _v$7 !== _p$._v$7 && className(_el$20, _p$._v$7 = _v$7);
9908
+ return _p$;
9909
+ }, {
9910
+ _v$6: void 0,
9911
+ _v$7: void 0
9912
+ });
9913
+ createRenderEffect(() => _el$20.value = props.value);
9914
+ return _el$20;
9915
+ }
9916
+ }), createComponent(Show, {
9917
+ get when() {
9918
+ return type() === "boolean";
9919
+ },
9920
+ get children() {
9921
+ const _el$21 = _tmpl$92();
9922
+ insert(_el$21, createComponent(ToggleValueButton, {
9923
+ get activeQuery() {
9924
+ return props.activeQuery;
9925
+ },
9926
+ dataPath: currentDataPath,
9927
+ get value() {
9928
+ return props.value;
9929
+ }
9930
+ }), null);
9931
+ insert(_el$21, () => displayValue(props.value), null);
9932
+ createRenderEffect(() => className(_el$21, clsx(styles().value, styles().actions, styles().editableInput)));
9933
+ return _el$21;
9934
+ }
9935
+ })];
9817
9936
  }
9818
9937
  }), null);
9819
- insert(_el$16, createComponent(Show, {
9938
+ insert(_el$17, createComponent(Show, {
9820
9939
  get when() {
9821
9940
  return props.editable && props.itemsDeletable && props.activeQuery !== void 0;
9822
9941
  },
@@ -9830,28 +9949,29 @@ function Explorer(props) {
9830
9949
  }
9831
9950
  }), null);
9832
9951
  createRenderEffect((_p$) => {
9833
- const _v$8 = styles.row, _v$9 = styles.label;
9834
- _v$8 !== _p$._v$8 && className(_el$16, _p$._v$8 = _v$8);
9835
- _v$9 !== _p$._v$9 && className(_el$17, _p$._v$9 = _v$9);
9952
+ const _v$8 = styles().row, _v$9 = styles().label;
9953
+ _v$8 !== _p$._v$8 && className(_el$17, _p$._v$8 = _v$8);
9954
+ _v$9 !== _p$._v$9 && className(_el$18, _p$._v$9 = _v$9);
9836
9955
  return _p$;
9837
9956
  }, {
9838
9957
  _v$8: void 0,
9839
9958
  _v$9: void 0
9840
9959
  });
9841
- return _el$16;
9960
+ return _el$17;
9842
9961
  }
9843
9962
  }), null);
9844
- createRenderEffect(() => className(_el$5, styles.entry));
9845
- return _el$5;
9963
+ createRenderEffect(() => className(_el$6, styles().entry));
9964
+ return _el$6;
9846
9965
  })();
9847
9966
  }
9848
- var getStyles = () => {
9967
+ var stylesFactory = (theme) => {
9849
9968
  const {
9850
9969
  colors,
9851
9970
  font,
9852
9971
  size: size2,
9853
9972
  border
9854
9973
  } = tokens;
9974
+ const t2 = (light, dark) => theme === "light" ? light : dark;
9855
9975
  return {
9856
9976
  entry: u`
9857
9977
  & * {
@@ -9865,7 +9985,7 @@ var getStyles = () => {
9865
9985
  subEntry: u`
9866
9986
  margin: 0 0 0 0.5em;
9867
9987
  padding-left: 0.75em;
9868
- border-left: 2px solid ${colors.darkGray[400]};
9988
+ border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
9869
9989
  /* outline: 1px solid ${colors.teal[400]}; */
9870
9990
  `,
9871
9991
  expander: u`
@@ -9914,21 +10034,22 @@ var getStyles = () => {
9914
10034
  }
9915
10035
  `,
9916
10036
  info: u`
9917
- color: ${colors.gray[500]};
10037
+ color: ${t2(colors.gray[500], colors.gray[500])};
9918
10038
  font-size: ${font.size.xs};
9919
10039
  margin-left: ${size2[1]};
9920
10040
  /* outline: 1px solid ${colors.yellow[400]}; */
9921
10041
  `,
9922
10042
  label: u`
9923
- color: ${colors.gray[300]};
10043
+ color: ${t2(colors.gray[700], colors.gray[300])};
9924
10044
  `,
9925
10045
  value: u`
9926
- color: ${colors.purple[400]};
10046
+ color: ${t2(colors.purple[600], colors.purple[400])};
9927
10047
  flex-grow: 1;
9928
10048
  `,
9929
10049
  actions: u`
9930
10050
  display: inline-flex;
9931
10051
  gap: ${size2[2]};
10052
+ align-items: center;
9932
10053
  `,
9933
10054
  row: u`
9934
10055
  display: inline-flex;
@@ -9936,19 +10057,22 @@ var getStyles = () => {
9936
10057
  width: 100%;
9937
10058
  margin-bottom: ${size2[0.5]};
9938
10059
  line-height: 1.125rem;
10060
+ align-items: center;
9939
10061
  `,
9940
10062
  editableInput: u`
9941
10063
  border: none;
9942
- padding: 0px ${size2[1]};
10064
+ padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
9943
10065
  flex-grow: 1;
9944
- background-color: ${colors.gray[900]};
10066
+ border-radius: ${border.radius.xs};
10067
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
9945
10068
 
9946
10069
  &:hover {
9947
- background-color: ${colors.gray[800]};
10070
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
9948
10071
  }
9949
10072
  `,
9950
10073
  actionButton: u`
9951
10074
  background-color: transparent;
10075
+ color: ${t2(colors.gray[500], colors.gray[500])};
9952
10076
  border: none;
9953
10077
  display: inline-flex;
9954
10078
  padding: 0px;
@@ -9961,14 +10085,7 @@ var getStyles = () => {
9961
10085
  z-index: 1;
9962
10086
 
9963
10087
  &:hover svg {
9964
- .copier,
9965
- .list {
9966
- stroke: ${colors.gray[500]} !important;
9967
- }
9968
-
9969
- .list-item {
9970
- stroke: ${colors.gray[700]};
9971
- }
10088
+ color: ${t2(colors.gray[600], colors.gray[400])};
9972
10089
  }
9973
10090
 
9974
10091
  &:focus-visible {
@@ -9979,6 +10096,8 @@ var getStyles = () => {
9979
10096
  `
9980
10097
  };
9981
10098
  };
10099
+ var lightStyles = stylesFactory("light");
10100
+ var darkStyles = stylesFactory("dark");
9982
10101
  delegateEvents(["click"]);
9983
10102
 
9984
10103
  // src/fonts.ts
@@ -9990,7 +10109,7 @@ var loadFonts = () => {
9990
10109
  };
9991
10110
 
9992
10111
  // src/Devtools.tsx
9993
- var _tmpl$15 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
10112
+ var _tmpl$19 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
9994
10113
  var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
9995
10114
  var _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
9996
10115
  var _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
@@ -10000,22 +10119,27 @@ var _tmpl$73 = /* @__PURE__ */ template(`<span>Top`);
10000
10119
  var _tmpl$83 = /* @__PURE__ */ template(`<span>Bottom`);
10001
10120
  var _tmpl$93 = /* @__PURE__ */ template(`<span>Left`);
10002
10121
  var _tmpl$103 = /* @__PURE__ */ template(`<span>Right`);
10003
- var _tmpl$112 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools"></button><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div><div><div><div><input aria-label="Filter queries by query key" type="text" placeholder="Filter" class="tsqd-query-filter-textfield"></div><div><select></select></div><button class="tsqd-query-filter-sort-order-btn"></button></div><div><button aria-label="Clear query cache" title="Clear query cache"></button><button></button></div></div><div><div class="tsqd-queries-container">`);
10004
- var _tmpl$122 = /* @__PURE__ */ template(`<option>Sort by `);
10005
- var _tmpl$132 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
10006
- var _tmpl$142 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
10007
- var _tmpl$152 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
10008
- var _tmpl$16 = /* @__PURE__ */ template(`<span>`);
10009
- var _tmpl$17 = /* @__PURE__ */ template(`<button><span></span><span>`);
10010
- var _tmpl$18 = /* @__PURE__ */ template(`<button><span></span> Error`);
10011
- var _tmpl$19 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
10012
- var _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">`);
10013
- var _tmpl$21 = /* @__PURE__ */ template(`<option>`);
10122
+ var _tmpl$113 = /* @__PURE__ */ template(`<span>Theme`);
10123
+ var _tmpl$122 = /* @__PURE__ */ template(`<span>Light`);
10124
+ var _tmpl$132 = /* @__PURE__ */ template(`<span>Dark`);
10125
+ var _tmpl$142 = /* @__PURE__ */ template(`<span>System`);
10126
+ var _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">`);
10127
+ var _tmpl$162 = /* @__PURE__ */ template(`<option>Sort by `);
10128
+ var _tmpl$172 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
10129
+ var _tmpl$182 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
10130
+ var _tmpl$192 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
10131
+ var _tmpl$20 = /* @__PURE__ */ template(`<span>`);
10132
+ var _tmpl$21 = /* @__PURE__ */ template(`<button><span></span><span>`);
10133
+ var _tmpl$222 = /* @__PURE__ */ template(`<button><span></span> Error`);
10134
+ var _tmpl$232 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
10135
+ var _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">`);
10136
+ var _tmpl$25 = /* @__PURE__ */ template(`<option>`);
10014
10137
  var firstBreakpoint = 1024;
10015
10138
  var secondBreakpoint = 796;
10016
10139
  var thirdBreakpoint = 700;
10017
10140
  var BUTTON_POSITION = "bottom-right";
10018
10141
  var POSITION = "bottom";
10142
+ var THEME_PREFERENCE = "system";
10019
10143
  var INITIAL_IS_OPEN = false;
10020
10144
  var DEFAULT_HEIGHT = 500;
10021
10145
  var DEFAULT_WIDTH = 500;
@@ -10024,33 +10148,51 @@ var DEFAULT_SORT_ORDER = 1;
10024
10148
  var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
10025
10149
  var [panelWidth, setPanelWidth] = createSignal(0);
10026
10150
  var DevtoolsComponent = (props) => {
10151
+ const [localStore, setLocalStore] = createLocalStorage({
10152
+ prefix: "TanstackQueryDevtools"
10153
+ });
10154
+ const colorScheme = getPreferredColorScheme();
10155
+ const theme = createMemo(() => {
10156
+ const preference = localStore.theme_preference || THEME_PREFERENCE;
10157
+ if (preference !== "system")
10158
+ return preference;
10159
+ return colorScheme();
10160
+ });
10027
10161
  return createComponent(QueryDevtoolsContext.Provider, {
10028
10162
  value: props,
10029
10163
  get children() {
10030
- return createComponent(Devtools, {});
10164
+ return createComponent(ThemeContext.Provider, {
10165
+ value: theme,
10166
+ get children() {
10167
+ return createComponent(Devtools, {
10168
+ localStore,
10169
+ setLocalStore
10170
+ });
10171
+ }
10172
+ });
10031
10173
  }
10032
10174
  });
10033
10175
  };
10034
10176
  var Devtools_default = DevtoolsComponent;
10035
- var Devtools = () => {
10177
+ var Devtools = (props) => {
10036
10178
  loadFonts();
10037
- const styles = getStyles2();
10038
- const [localStore, setLocalStore] = createLocalStorage({
10039
- prefix: "TanstackQueryDevtools"
10179
+ const theme = useTheme();
10180
+ const styles = createMemo(() => {
10181
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10040
10182
  });
10041
10183
  const buttonPosition = createMemo(() => {
10042
10184
  return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
10043
10185
  });
10044
10186
  const isOpen = createMemo(() => {
10045
- return localStore.open === "true" ? true : localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
10187
+ return props.localStore.open === "true" ? true : props.localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
10046
10188
  });
10047
10189
  const position = createMemo(() => {
10048
- return localStore.position || useQueryDevtoolsContext().position || POSITION;
10190
+ return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
10049
10191
  });
10050
10192
  createEffect(() => {
10051
10193
  const root = document.querySelector(".tsqd-parent-container");
10052
- const height = localStore.height || DEFAULT_HEIGHT;
10053
- const width = localStore.width || DEFAULT_WIDTH;
10194
+ const height = props.localStore.height || DEFAULT_HEIGHT;
10195
+ const width = props.localStore.width || DEFAULT_WIDTH;
10054
10196
  const panelPosition = position();
10055
10197
  root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
10056
10198
  root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
@@ -10066,8 +10208,12 @@ var Devtools = () => {
10066
10208
  },
10067
10209
  get children() {
10068
10210
  return createComponent(DevtoolsPanel, {
10069
- localStore,
10070
- setLocalStore
10211
+ get localStore() {
10212
+ return props.localStore;
10213
+ },
10214
+ get setLocalStore() {
10215
+ return props.setLocalStore;
10216
+ }
10071
10217
  });
10072
10218
  }
10073
10219
  });
@@ -10081,11 +10227,11 @@ var Devtools = () => {
10081
10227
  return !isOpen();
10082
10228
  },
10083
10229
  get children() {
10084
- const _el$2 = _tmpl$15(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
10230
+ const _el$2 = _tmpl$19(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
10085
10231
  insert(_el$3, createComponent(TanstackLogo, {}));
10086
- _el$4.$$click = () => setLocalStore("open", "true");
10232
+ _el$4.$$click = () => props.setLocalStore("open", "true");
10087
10233
  insert(_el$4, createComponent(TanstackLogo, {}));
10088
- createRenderEffect(() => className(_el$2, clsx(styles.devtoolsBtn, styles[`devtoolsBtn-position-${buttonPosition()}`])));
10234
+ createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
10089
10235
  return _el$2;
10090
10236
  }
10091
10237
  });
@@ -10116,7 +10262,10 @@ var Devtools = () => {
10116
10262
  })();
10117
10263
  };
10118
10264
  var DevtoolsPanel = (props) => {
10119
- const styles = getStyles2();
10265
+ const theme = useTheme();
10266
+ const styles = createMemo(() => {
10267
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10268
+ });
10120
10269
  const [isResizing, setIsResizing] = createSignal(false);
10121
10270
  const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
10122
10271
  const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
@@ -10225,8 +10374,24 @@ var DevtoolsPanel = (props) => {
10225
10374
  });
10226
10375
  });
10227
10376
  });
10377
+ const getPanelDynamicStyles = () => {
10378
+ const {
10379
+ colors
10380
+ } = tokens;
10381
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10382
+ if (panelWidth() < secondBreakpoint) {
10383
+ return u`
10384
+ flex-direction: column;
10385
+ background-color: ${t2(colors.gray[300], colors.gray[600])};
10386
+ `;
10387
+ }
10388
+ return u`
10389
+ flex-direction: row;
10390
+ background-color: ${t2(colors.gray[200], colors.darkGray[900])};
10391
+ `;
10392
+ };
10228
10393
  return (() => {
10229
- const _el$5 = _tmpl$112(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$9.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$23 = _el$15.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$32 = _el$14.nextSibling, _el$33 = _el$32.firstChild;
10394
+ 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;
10230
10395
  const _ref$ = panelRef;
10231
10396
  typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
10232
10397
  _el$6.$$mousedown = handleDragStart;
@@ -10242,10 +10407,10 @@ var DevtoolsPanel = (props) => {
10242
10407
  _el$17.$$input = (e2) => props.setLocalStore("filter", e2.currentTarget.value);
10243
10408
  _el$19.addEventListener("change", (e2) => props.setLocalStore("sort", e2.currentTarget.value));
10244
10409
  insert(_el$19, () => Object.keys(sortFns).map((key) => (() => {
10245
- const _el$34 = _tmpl$122(); _el$34.firstChild;
10246
- _el$34.value = key;
10247
- insert(_el$34, key, null);
10248
- return _el$34;
10410
+ const _el$38 = _tmpl$162(); _el$38.firstChild;
10411
+ _el$38.value = key;
10412
+ insert(_el$38, key, null);
10413
+ return _el$38;
10249
10414
  })()));
10250
10415
  insert(_el$18, createComponent(ChevronDown, {}), null);
10251
10416
  _el$20.$$click = () => {
@@ -10289,7 +10454,7 @@ var DevtoolsPanel = (props) => {
10289
10454
  get children() {
10290
10455
  return [createComponent(index$d.Trigger, {
10291
10456
  get ["class"]() {
10292
- return clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
10457
+ return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
10293
10458
  },
10294
10459
  get children() {
10295
10460
  return createComponent(Settings, {});
@@ -10298,12 +10463,12 @@ var DevtoolsPanel = (props) => {
10298
10463
  get children() {
10299
10464
  return createComponent(index$d.Content, {
10300
10465
  get ["class"]() {
10301
- return clsx(styles.settingsMenu, "tsqd-settings-menu");
10466
+ return clsx(styles().settingsMenu, "tsqd-settings-menu");
10302
10467
  },
10303
10468
  get children() {
10304
10469
  return [(() => {
10305
10470
  const _el$26 = _tmpl$53();
10306
- createRenderEffect(() => className(_el$26, clsx(styles.settingsMenuHeader, "tsqd-settings-menu-header")));
10471
+ createRenderEffect(() => className(_el$26, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
10307
10472
  return _el$26;
10308
10473
  })(), createComponent(index$d.Sub, {
10309
10474
  overlap: true,
@@ -10312,7 +10477,7 @@ var DevtoolsPanel = (props) => {
10312
10477
  get children() {
10313
10478
  return [createComponent(index$d.SubTrigger, {
10314
10479
  get ["class"]() {
10315
- return clsx(styles.settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10480
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10316
10481
  },
10317
10482
  get children() {
10318
10483
  return [_tmpl$63(), createComponent(ChevronDown, {})];
@@ -10321,7 +10486,7 @@ var DevtoolsPanel = (props) => {
10321
10486
  get children() {
10322
10487
  return createComponent(index$d.SubContent, {
10323
10488
  get ["class"]() {
10324
- return clsx(styles.settingsMenu, "tsqd-settings-submenu");
10489
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
10325
10490
  },
10326
10491
  get children() {
10327
10492
  return [createComponent(index$d.Item, {
@@ -10330,7 +10495,7 @@ var DevtoolsPanel = (props) => {
10330
10495
  },
10331
10496
  as: "button",
10332
10497
  get ["class"]() {
10333
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10498
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10334
10499
  },
10335
10500
  get children() {
10336
10501
  return [_tmpl$73(), createComponent(ArrowUp, {})];
@@ -10341,7 +10506,7 @@ var DevtoolsPanel = (props) => {
10341
10506
  },
10342
10507
  as: "button",
10343
10508
  get ["class"]() {
10344
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10509
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10345
10510
  },
10346
10511
  get children() {
10347
10512
  return [_tmpl$83(), createComponent(ArrowDown, {})];
@@ -10352,7 +10517,7 @@ var DevtoolsPanel = (props) => {
10352
10517
  },
10353
10518
  as: "button",
10354
10519
  get ["class"]() {
10355
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10520
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10356
10521
  },
10357
10522
  get children() {
10358
10523
  return [_tmpl$93(), createComponent(ArrowLeft, {})];
@@ -10363,7 +10528,7 @@ var DevtoolsPanel = (props) => {
10363
10528
  },
10364
10529
  as: "button",
10365
10530
  get ["class"]() {
10366
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
10531
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
10367
10532
  },
10368
10533
  get children() {
10369
10534
  return [_tmpl$103(), createComponent(ArrowRight, {})];
@@ -10374,6 +10539,64 @@ var DevtoolsPanel = (props) => {
10374
10539
  }
10375
10540
  })];
10376
10541
  }
10542
+ }), createComponent(index$d.Sub, {
10543
+ overlap: true,
10544
+ gutter: 8,
10545
+ shift: -4,
10546
+ get children() {
10547
+ return [createComponent(index$d.SubTrigger, {
10548
+ get ["class"]() {
10549
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10550
+ },
10551
+ get children() {
10552
+ return [_tmpl$113(), createComponent(ChevronDown, {})];
10553
+ }
10554
+ }), createComponent(index$d.Portal, {
10555
+ get children() {
10556
+ return createComponent(index$d.SubContent, {
10557
+ get ["class"]() {
10558
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
10559
+ },
10560
+ get children() {
10561
+ return [createComponent(index$d.Item, {
10562
+ onSelect: () => {
10563
+ props.setLocalStore("theme_preference", "light");
10564
+ },
10565
+ as: "button",
10566
+ get ["class"]() {
10567
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10568
+ },
10569
+ get children() {
10570
+ return [_tmpl$122(), createComponent(Sun, {})];
10571
+ }
10572
+ }), createComponent(index$d.Item, {
10573
+ onSelect: () => {
10574
+ props.setLocalStore("theme_preference", "dark");
10575
+ },
10576
+ as: "button",
10577
+ get ["class"]() {
10578
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10579
+ },
10580
+ get children() {
10581
+ return [_tmpl$132(), createComponent(Moon, {})];
10582
+ }
10583
+ }), createComponent(index$d.Item, {
10584
+ onSelect: () => {
10585
+ props.setLocalStore("theme_preference", "system");
10586
+ },
10587
+ as: "button",
10588
+ get ["class"]() {
10589
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10590
+ },
10591
+ get children() {
10592
+ return [_tmpl$142(), createComponent(Monitor, {})];
10593
+ }
10594
+ })];
10595
+ }
10596
+ });
10597
+ }
10598
+ })];
10599
+ }
10377
10600
  })];
10378
10601
  }
10379
10602
  });
@@ -10381,7 +10604,7 @@ var DevtoolsPanel = (props) => {
10381
10604
  })];
10382
10605
  }
10383
10606
  }), null);
10384
- insert(_el$33, createComponent(Key, {
10607
+ insert(_el$37, createComponent(Key, {
10385
10608
  by: (q) => q.queryHash,
10386
10609
  get each() {
10387
10610
  return queries();
@@ -10401,19 +10624,16 @@ var DevtoolsPanel = (props) => {
10401
10624
  }
10402
10625
  }), null);
10403
10626
  createRenderEffect((_p$) => {
10404
- const _v$ = clsx(styles.panel, styles[`panel-position-${position()}`], u`
10405
- flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
10406
- background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
10407
- `, {
10627
+ const _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
10408
10628
  [u`
10409
10629
  min-width: min-content;
10410
10630
  `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
10411
- }, "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`
10631
+ }, "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`
10412
10632
  height: 50%;
10413
10633
  max-height: 50%;
10414
- `, "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`
10634
+ `, "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`
10415
10635
  gap: ${tokens.size[2.5]};
10416
- `, "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");
10636
+ `, "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");
10417
10637
  _v$ !== _p$._v$ && className(_el$5, _p$._v$ = _v$);
10418
10638
  _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$5.style.setProperty("height", _v$2) : _el$5.style.removeProperty("height"));
10419
10639
  _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$5.style.setProperty("width", _v$3) : _el$5.style.removeProperty("width"));
@@ -10436,7 +10656,7 @@ var DevtoolsPanel = (props) => {
10436
10656
  _v$20 !== _p$._v$20 && setAttribute(_el$25, "aria-label", _p$._v$20 = _v$20);
10437
10657
  _v$21 !== _p$._v$21 && setAttribute(_el$25, "aria-pressed", _p$._v$21 = _v$21);
10438
10658
  _v$22 !== _p$._v$22 && setAttribute(_el$25, "title", _p$._v$22 = _v$22);
10439
- _v$23 !== _p$._v$23 && className(_el$32, _p$._v$23 = _v$23);
10659
+ _v$23 !== _p$._v$23 && className(_el$36, _p$._v$23 = _v$23);
10440
10660
  return _p$;
10441
10661
  }, {
10442
10662
  _v$: void 0,
@@ -10469,7 +10689,15 @@ var DevtoolsPanel = (props) => {
10469
10689
  })();
10470
10690
  };
10471
10691
  var QueryRow = (props) => {
10472
- const styles = getStyles2();
10692
+ const theme = useTheme();
10693
+ const styles = createMemo(() => {
10694
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10695
+ });
10696
+ const {
10697
+ colors,
10698
+ alpha
10699
+ } = tokens;
10700
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10473
10701
  const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
10474
10702
  queryKey: props.query.queryKey
10475
10703
  })?.state);
@@ -10487,41 +10715,47 @@ var QueryRow = (props) => {
10487
10715
  observerCount: observers(),
10488
10716
  isStale: isStale()
10489
10717
  }));
10718
+ const getObserverCountColorStyles = () => {
10719
+ if (color() === "gray") {
10720
+ return u`
10721
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
10722
+ color: ${t2(colors[color()][700], colors[color()][300])};
10723
+ `;
10724
+ }
10725
+ return u`
10726
+ background-color: ${t2(colors[color()][200] + alpha[80], colors[color()][900])};
10727
+ color: ${t2(colors[color()][800], colors[color()][300])};
10728
+ `;
10729
+ };
10490
10730
  return createComponent(Show, {
10491
10731
  get when() {
10492
10732
  return queryState();
10493
10733
  },
10494
10734
  get children() {
10495
- const _el$36 = _tmpl$142(), _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
10496
- _el$36.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
10497
- insert(_el$37, observers);
10498
- insert(_el$38, () => props.query.queryHash);
10499
- insert(_el$36, createComponent(Show, {
10735
+ const _el$40 = _tmpl$182(), _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling;
10736
+ _el$40.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
10737
+ insert(_el$41, observers);
10738
+ insert(_el$42, () => props.query.queryHash);
10739
+ insert(_el$40, createComponent(Show, {
10500
10740
  get when() {
10501
10741
  return isDisabled();
10502
10742
  },
10503
10743
  get children() {
10504
- return _tmpl$132();
10744
+ return _tmpl$172();
10505
10745
  }
10506
10746
  }), null);
10507
10747
  createRenderEffect((_p$) => {
10508
- 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`
10509
- background-color: ${tokens.colors[color()][700]};
10510
- color: ${tokens.colors[color()][300]};
10511
- ` : u`
10512
- background-color: ${tokens.colors[color()][900]};
10513
- color: ${tokens.colors[color()][300]};
10514
- `, "tsqd-query-observer-count");
10515
- _v$24 !== _p$._v$24 && className(_el$36, _p$._v$24 = _v$24);
10516
- _v$25 !== _p$._v$25 && setAttribute(_el$36, "aria-label", _p$._v$25 = _v$25);
10517
- _v$26 !== _p$._v$26 && className(_el$37, _p$._v$26 = _v$26);
10748
+ 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");
10749
+ _v$24 !== _p$._v$24 && className(_el$40, _p$._v$24 = _v$24);
10750
+ _v$25 !== _p$._v$25 && setAttribute(_el$40, "aria-label", _p$._v$25 = _v$25);
10751
+ _v$26 !== _p$._v$26 && className(_el$41, _p$._v$26 = _v$26);
10518
10752
  return _p$;
10519
10753
  }, {
10520
10754
  _v$24: void 0,
10521
10755
  _v$25: void 0,
10522
10756
  _v$26: void 0
10523
10757
  });
10524
- return _el$36;
10758
+ return _el$40;
10525
10759
  }
10526
10760
  });
10527
10761
  };
@@ -10531,50 +10765,61 @@ var QueryStatusCount = () => {
10531
10765
  const fetching = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "fetching").length);
10532
10766
  const paused = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "paused").length);
10533
10767
  const inactive = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length);
10534
- const styles = getStyles2();
10768
+ const theme = useTheme();
10769
+ const styles = createMemo(() => {
10770
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10771
+ });
10535
10772
  return (() => {
10536
- const _el$40 = _tmpl$23();
10537
- insert(_el$40, createComponent(QueryStatus, {
10773
+ const _el$44 = _tmpl$23();
10774
+ insert(_el$44, createComponent(QueryStatus, {
10538
10775
  label: "Fresh",
10539
10776
  color: "green",
10540
10777
  get count() {
10541
10778
  return fresh();
10542
10779
  }
10543
10780
  }), null);
10544
- insert(_el$40, createComponent(QueryStatus, {
10781
+ insert(_el$44, createComponent(QueryStatus, {
10545
10782
  label: "Fetching",
10546
10783
  color: "blue",
10547
10784
  get count() {
10548
10785
  return fetching();
10549
10786
  }
10550
10787
  }), null);
10551
- insert(_el$40, createComponent(QueryStatus, {
10788
+ insert(_el$44, createComponent(QueryStatus, {
10552
10789
  label: "Paused",
10553
10790
  color: "purple",
10554
10791
  get count() {
10555
10792
  return paused();
10556
10793
  }
10557
10794
  }), null);
10558
- insert(_el$40, createComponent(QueryStatus, {
10795
+ insert(_el$44, createComponent(QueryStatus, {
10559
10796
  label: "Stale",
10560
10797
  color: "yellow",
10561
10798
  get count() {
10562
10799
  return stale();
10563
10800
  }
10564
10801
  }), null);
10565
- insert(_el$40, createComponent(QueryStatus, {
10802
+ insert(_el$44, createComponent(QueryStatus, {
10566
10803
  label: "Inactive",
10567
10804
  color: "gray",
10568
10805
  get count() {
10569
10806
  return inactive();
10570
10807
  }
10571
10808
  }), null);
10572
- createRenderEffect(() => className(_el$40, clsx(styles.queryStatusContainer, "tsqd-query-status-container")));
10573
- return _el$40;
10809
+ createRenderEffect(() => className(_el$44, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
10810
+ return _el$44;
10574
10811
  })();
10575
10812
  };
10576
10813
  var QueryStatus = (props) => {
10577
- const styles = getStyles2();
10814
+ const theme = useTheme();
10815
+ const styles = createMemo(() => {
10816
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10817
+ });
10818
+ const {
10819
+ colors,
10820
+ alpha
10821
+ } = tokens;
10822
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10578
10823
  let tagRef;
10579
10824
  const [mouseOver, setMouseOver] = createSignal(false);
10580
10825
  const [focused, setFocused] = createSignal(false);
@@ -10590,78 +10835,83 @@ var QueryStatus = (props) => {
10590
10835
  return true;
10591
10836
  });
10592
10837
  return (() => {
10593
- const _el$41 = _tmpl$17(), _el$43 = _el$41.firstChild, _el$45 = _el$43.nextSibling;
10838
+ const _el$45 = _tmpl$21(), _el$47 = _el$45.firstChild, _el$49 = _el$47.nextSibling;
10594
10839
  const _ref$3 = tagRef;
10595
- typeof _ref$3 === "function" ? use(_ref$3, _el$41) : tagRef = _el$41;
10596
- _el$41.addEventListener("mouseleave", () => {
10840
+ typeof _ref$3 === "function" ? use(_ref$3, _el$45) : tagRef = _el$45;
10841
+ _el$45.addEventListener("mouseleave", () => {
10597
10842
  setMouseOver(false);
10598
10843
  setFocused(false);
10599
10844
  });
10600
- _el$41.addEventListener("mouseenter", () => setMouseOver(true));
10601
- _el$41.addEventListener("blur", () => setFocused(false));
10602
- _el$41.addEventListener("focus", () => setFocused(true));
10603
- spread(_el$41, mergeProps({
10845
+ _el$45.addEventListener("mouseenter", () => setMouseOver(true));
10846
+ _el$45.addEventListener("blur", () => setFocused(false));
10847
+ _el$45.addEventListener("focus", () => setFocused(true));
10848
+ spread(_el$45, mergeProps({
10604
10849
  get disabled() {
10605
10850
  return showLabel();
10606
10851
  },
10607
10852
  get ["class"]() {
10608
- return clsx(styles.queryStatusTag, !showLabel() && u`
10853
+ return clsx(styles().queryStatusTag, !showLabel() && u`
10609
10854
  cursor: pointer;
10610
10855
  &:hover {
10611
- background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
10856
+ background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
10612
10857
  }
10613
10858
  `, "tsqd-query-status-tag", `tsqd-query-status-tag-${props.label.toLowerCase()}`);
10614
10859
  }
10615
10860
  }, () => mouseOver() || focused() ? {
10616
10861
  "aria-describedby": "tsqd-status-tooltip"
10617
10862
  } : {}), false, true);
10618
- insert(_el$41, createComponent(Show, {
10863
+ insert(_el$45, createComponent(Show, {
10619
10864
  get when() {
10620
10865
  return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
10621
10866
  },
10622
10867
  get children() {
10623
- const _el$42 = _tmpl$152();
10624
- insert(_el$42, () => props.label);
10625
- createRenderEffect(() => className(_el$42, clsx(styles.statusTooltip, "tsqd-query-status-tooltip")));
10626
- return _el$42;
10868
+ const _el$46 = _tmpl$192();
10869
+ insert(_el$46, () => props.label);
10870
+ createRenderEffect(() => className(_el$46, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
10871
+ return _el$46;
10627
10872
  }
10628
- }), _el$43);
10629
- insert(_el$41, createComponent(Show, {
10873
+ }), _el$47);
10874
+ insert(_el$45, createComponent(Show, {
10630
10875
  get when() {
10631
10876
  return showLabel();
10632
10877
  },
10633
10878
  get children() {
10634
- const _el$44 = _tmpl$16();
10635
- insert(_el$44, () => props.label);
10636
- createRenderEffect(() => className(_el$44, clsx(styles.queryStatusTagLabel, "tsqd-query-status-tag-label")));
10637
- return _el$44;
10879
+ const _el$48 = _tmpl$20();
10880
+ insert(_el$48, () => props.label);
10881
+ createRenderEffect(() => className(_el$48, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
10882
+ return _el$48;
10638
10883
  }
10639
- }), _el$45);
10640
- insert(_el$45, () => props.count);
10884
+ }), _el$49);
10885
+ insert(_el$49, () => props.count);
10641
10886
  createRenderEffect((_p$) => {
10642
10887
  const _v$27 = clsx(u`
10643
10888
  width: ${tokens.size[1.5]};
10644
10889
  height: ${tokens.size[1.5]};
10645
10890
  border-radius: ${tokens.border.radius.full};
10646
10891
  background-color: ${tokens.colors[props.color][500]};
10647
- `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles.queryStatusCount, props.count > 0 && props.color !== "gray" ? u`
10648
- background-color: ${tokens.colors[props.color][900]};
10649
- color: ${tokens.colors[props.color][300]};
10650
- ` : u`
10651
- color: ${tokens.colors["gray"][400]};
10652
- `, "tsqd-query-status-tag-count");
10653
- _v$27 !== _p$._v$27 && className(_el$43, _p$._v$27 = _v$27);
10654
- _v$28 !== _p$._v$28 && className(_el$45, _p$._v$28 = _v$28);
10892
+ `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && u`
10893
+ background-color: ${t2(colors[props.color][100], colors[props.color][900])};
10894
+ color: ${t2(colors[props.color][700], colors[props.color][300])};
10895
+ `, "tsqd-query-status-tag-count");
10896
+ _v$27 !== _p$._v$27 && className(_el$47, _p$._v$27 = _v$27);
10897
+ _v$28 !== _p$._v$28 && className(_el$49, _p$._v$28 = _v$28);
10655
10898
  return _p$;
10656
10899
  }, {
10657
10900
  _v$27: void 0,
10658
10901
  _v$28: void 0
10659
10902
  });
10660
- return _el$41;
10903
+ return _el$45;
10661
10904
  })();
10662
10905
  };
10663
10906
  var QueryDetails = () => {
10664
- const styles = getStyles2();
10907
+ const theme = useTheme();
10908
+ const styles = createMemo(() => {
10909
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10910
+ });
10911
+ const {
10912
+ colors
10913
+ } = tokens;
10914
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10665
10915
  const queryClient = useQueryDevtoolsContext().client;
10666
10916
  const [restoringLoading, setRestoringLoading] = createSignal(false);
10667
10917
  const errorTypes = createMemo(() => {
@@ -10718,24 +10968,38 @@ var QueryDetails = () => {
10718
10968
  setRestoringLoading(false);
10719
10969
  }
10720
10970
  });
10971
+ const getQueryStatusColors = () => {
10972
+ if (color() === "gray") {
10973
+ return u`
10974
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
10975
+ color: ${t2(colors[color()][700], colors[color()][300])};
10976
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
10977
+ `;
10978
+ }
10979
+ return u`
10980
+ background-color: ${t2(colors[color()][100], colors[color()][900])};
10981
+ color: ${t2(colors[color()][700], colors[color()][300])};
10982
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
10983
+ `;
10984
+ };
10721
10985
  return createComponent(Show, {
10722
10986
  get when() {
10723
10987
  return createMemo(() => !!activeQuery())() && activeQueryState();
10724
10988
  },
10725
10989
  get children() {
10726
- 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;
10727
- insert(_el$51, () => displayValue(activeQuery().queryKey, true));
10728
- insert(_el$52, statusLabel);
10729
- insert(_el$55, observerCount);
10730
- insert(_el$58, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
10731
- _el$61.$$click = handleRefetch;
10732
- _el$63.$$click = () => queryClient.invalidateQueries(activeQuery());
10733
- _el$65.$$click = () => queryClient.resetQueries(activeQuery());
10734
- _el$67.$$click = () => {
10990
+ 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;
10991
+ insert(_el$55, () => displayValue(activeQuery().queryKey, true));
10992
+ insert(_el$56, statusLabel);
10993
+ insert(_el$59, observerCount);
10994
+ insert(_el$62, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
10995
+ _el$65.$$click = handleRefetch;
10996
+ _el$67.$$click = () => queryClient.invalidateQueries(activeQuery());
10997
+ _el$69.$$click = () => queryClient.resetQueries(activeQuery());
10998
+ _el$71.$$click = () => {
10735
10999
  queryClient.removeQueries(activeQuery());
10736
11000
  setSelectedQueryHash(null);
10737
11001
  };
10738
- _el$69.$$click = () => {
11002
+ _el$73.$$click = () => {
10739
11003
  if (activeQuery()?.state.data === void 0) {
10740
11004
  setRestoringLoading(true);
10741
11005
  restoreQueryAfterLoadingOrError();
@@ -10763,79 +11027,79 @@ var QueryDetails = () => {
10763
11027
  });
10764
11028
  }
10765
11029
  };
10766
- insert(_el$69, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$71);
10767
- insert(_el$60, createComponent(Show, {
11030
+ insert(_el$73, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$75);
11031
+ insert(_el$64, createComponent(Show, {
10768
11032
  get when() {
10769
11033
  return errorTypes().length === 0 || queryStatus() === "error";
10770
11034
  },
10771
11035
  get children() {
10772
- const _el$72 = _tmpl$18(), _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling;
10773
- _el$72.$$click = () => {
11036
+ const _el$76 = _tmpl$222(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
11037
+ _el$76.$$click = () => {
10774
11038
  if (!activeQuery().state.error) {
10775
11039
  triggerError();
10776
11040
  } else {
10777
11041
  queryClient.resetQueries(activeQuery());
10778
11042
  }
10779
11043
  };
10780
- insert(_el$72, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$74);
11044
+ insert(_el$76, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$78);
10781
11045
  createRenderEffect((_p$) => {
10782
11046
  const _v$29 = clsx(u`
10783
- color: ${tokens.colors.red[400]};
11047
+ color: ${t2(colors.red[500], colors.red[400])};
10784
11048
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$30 = queryStatus() === "pending", _v$31 = u`
10785
- background-color: ${tokens.colors.red[400]};
11049
+ background-color: ${t2(colors.red[500], colors.red[400])};
10786
11050
  `;
10787
- _v$29 !== _p$._v$29 && className(_el$72, _p$._v$29 = _v$29);
10788
- _v$30 !== _p$._v$30 && (_el$72.disabled = _p$._v$30 = _v$30);
10789
- _v$31 !== _p$._v$31 && className(_el$73, _p$._v$31 = _v$31);
11051
+ _v$29 !== _p$._v$29 && className(_el$76, _p$._v$29 = _v$29);
11052
+ _v$30 !== _p$._v$30 && (_el$76.disabled = _p$._v$30 = _v$30);
11053
+ _v$31 !== _p$._v$31 && className(_el$77, _p$._v$31 = _v$31);
10790
11054
  return _p$;
10791
11055
  }, {
10792
11056
  _v$29: void 0,
10793
11057
  _v$30: void 0,
10794
11058
  _v$31: void 0
10795
11059
  });
10796
- return _el$72;
11060
+ return _el$76;
10797
11061
  }
10798
11062
  }), null);
10799
- insert(_el$60, createComponent(Show, {
11063
+ insert(_el$64, createComponent(Show, {
10800
11064
  get when() {
10801
11065
  return !(errorTypes().length === 0 || queryStatus() === "error");
10802
11066
  },
10803
11067
  get children() {
10804
- const _el$75 = _tmpl$19(), _el$76 = _el$75.firstChild, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling; _el$78.firstChild;
10805
- _el$78.addEventListener("change", (e2) => {
10806
- const errorType = errorTypes().find((t2) => t2.name === e2.currentTarget.value);
11068
+ const _el$79 = _tmpl$232(), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling; _el$82.firstChild;
11069
+ _el$82.addEventListener("change", (e2) => {
11070
+ const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
10807
11071
  triggerError(errorType);
10808
11072
  });
10809
- insert(_el$78, createComponent(For, {
11073
+ insert(_el$82, createComponent(For, {
10810
11074
  get each() {
10811
11075
  return errorTypes();
10812
11076
  },
10813
11077
  children: (errorType) => (() => {
10814
- const _el$84 = _tmpl$21();
10815
- insert(_el$84, () => errorType.name);
10816
- createRenderEffect(() => _el$84.value = errorType.name);
10817
- return _el$84;
11078
+ const _el$88 = _tmpl$25();
11079
+ insert(_el$88, () => errorType.name);
11080
+ createRenderEffect(() => _el$88.value = errorType.name);
11081
+ return _el$88;
10818
11082
  })()
10819
11083
  }), null);
10820
- insert(_el$75, createComponent(ChevronDown, {}), null);
11084
+ insert(_el$79, createComponent(ChevronDown, {}), null);
10821
11085
  createRenderEffect((_p$) => {
10822
- const _v$32 = clsx(styles.actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
11086
+ const _v$32 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
10823
11087
  background-color: ${tokens.colors.red[400]};
10824
11088
  `, _v$34 = queryStatus() === "pending";
10825
- _v$32 !== _p$._v$32 && className(_el$75, _p$._v$32 = _v$32);
10826
- _v$33 !== _p$._v$33 && className(_el$76, _p$._v$33 = _v$33);
10827
- _v$34 !== _p$._v$34 && (_el$78.disabled = _p$._v$34 = _v$34);
11089
+ _v$32 !== _p$._v$32 && className(_el$79, _p$._v$32 = _v$32);
11090
+ _v$33 !== _p$._v$33 && className(_el$80, _p$._v$33 = _v$33);
11091
+ _v$34 !== _p$._v$34 && (_el$82.disabled = _p$._v$34 = _v$34);
10828
11092
  return _p$;
10829
11093
  }, {
10830
11094
  _v$32: void 0,
10831
11095
  _v$33: void 0,
10832
11096
  _v$34: void 0
10833
11097
  });
10834
- return _el$75;
11098
+ return _el$79;
10835
11099
  }
10836
11100
  }), null);
10837
- _el$81.style.setProperty("padding", "0.5rem");
10838
- insert(_el$81, createComponent(Explorer, {
11101
+ _el$85.style.setProperty("padding", "0.5rem");
11102
+ insert(_el$85, createComponent(Explorer, {
10839
11103
  label: "Data",
10840
11104
  defaultExpanded: ["Data"],
10841
11105
  get value() {
@@ -10846,8 +11110,8 @@ var QueryDetails = () => {
10846
11110
  return activeQuery();
10847
11111
  }
10848
11112
  }));
10849
- _el$83.style.setProperty("padding", "0.5rem");
10850
- insert(_el$83, createComponent(Explorer, {
11113
+ _el$87.style.setProperty("padding", "0.5rem");
11114
+ insert(_el$87, createComponent(Explorer, {
10851
11115
  label: "Query",
10852
11116
  defaultExpanded: ["Query", "queryKey"],
10853
11117
  get value() {
@@ -10855,58 +11119,50 @@ var QueryDetails = () => {
10855
11119
  }
10856
11120
  }));
10857
11121
  createRenderEffect((_p$) => {
10858
- 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`
10859
- background-color: ${tokens.colors[color()][700]};
10860
- color: ${tokens.colors[color()][300]};
10861
- border-color: ${tokens.colors[color()][600]};
10862
- ` : u`
10863
- background-color: ${tokens.colors[color()][900]};
10864
- color: ${tokens.colors[color()][300]};
10865
- border-color: ${tokens.colors[color()][600]};
10866
- `), _v$39 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles.actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
10867
- color: ${tokens.colors.blue[400]};
11122
+ 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`
11123
+ color: ${t2(colors.blue[600], colors.blue[400])};
10868
11124
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$42 = statusLabel() === "fetching", _v$43 = u`
10869
- background-color: ${tokens.colors.blue[400]};
11125
+ background-color: ${t2(colors.blue[600], colors.blue[400])};
10870
11126
  `, _v$44 = clsx(u`
10871
- color: ${tokens.colors.yellow[400]};
11127
+ color: ${t2(colors.yellow[600], colors.yellow[400])};
10872
11128
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$45 = queryStatus() === "pending", _v$46 = u`
10873
- background-color: ${tokens.colors.yellow[400]};
11129
+ background-color: ${t2(colors.yellow[600], colors.yellow[400])};
10874
11130
  `, _v$47 = clsx(u`
10875
- color: ${tokens.colors.gray[300]};
11131
+ color: ${t2(colors.gray[600], colors.gray[300])};
10876
11132
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$48 = queryStatus() === "pending", _v$49 = u`
10877
- background-color: ${tokens.colors.gray[400]};
11133
+ background-color: ${t2(colors.gray[600], colors.gray[400])};
10878
11134
  `, _v$50 = clsx(u`
10879
- color: ${tokens.colors.pink[400]};
11135
+ color: ${t2(colors.pink[500], colors.pink[400])};
10880
11136
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$51 = statusLabel() === "fetching", _v$52 = u`
10881
- background-color: ${tokens.colors.pink[400]};
11137
+ background-color: ${t2(colors.pink[500], colors.pink[400])};
10882
11138
  `, _v$53 = clsx(u`
10883
- color: ${tokens.colors.cyan[400]};
11139
+ color: ${t2(colors.cyan[500], colors.cyan[400])};
10884
11140
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$54 = restoringLoading(), _v$55 = u`
10885
- background-color: ${tokens.colors.cyan[400]};
10886
- `, _v$56 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles.detailsHeader, "tsqd-query-details-header");
10887
- _v$35 !== _p$._v$35 && className(_el$46, _p$._v$35 = _v$35);
10888
- _v$36 !== _p$._v$36 && className(_el$47, _p$._v$36 = _v$36);
10889
- _v$37 !== _p$._v$37 && className(_el$48, _p$._v$37 = _v$37);
10890
- _v$38 !== _p$._v$38 && className(_el$52, _p$._v$38 = _v$38);
10891
- _v$39 !== _p$._v$39 && className(_el$59, _p$._v$39 = _v$39);
10892
- _v$40 !== _p$._v$40 && className(_el$60, _p$._v$40 = _v$40);
10893
- _v$41 !== _p$._v$41 && className(_el$61, _p$._v$41 = _v$41);
10894
- _v$42 !== _p$._v$42 && (_el$61.disabled = _p$._v$42 = _v$42);
10895
- _v$43 !== _p$._v$43 && className(_el$62, _p$._v$43 = _v$43);
10896
- _v$44 !== _p$._v$44 && className(_el$63, _p$._v$44 = _v$44);
10897
- _v$45 !== _p$._v$45 && (_el$63.disabled = _p$._v$45 = _v$45);
10898
- _v$46 !== _p$._v$46 && className(_el$64, _p$._v$46 = _v$46);
10899
- _v$47 !== _p$._v$47 && className(_el$65, _p$._v$47 = _v$47);
10900
- _v$48 !== _p$._v$48 && (_el$65.disabled = _p$._v$48 = _v$48);
10901
- _v$49 !== _p$._v$49 && className(_el$66, _p$._v$49 = _v$49);
10902
- _v$50 !== _p$._v$50 && className(_el$67, _p$._v$50 = _v$50);
10903
- _v$51 !== _p$._v$51 && (_el$67.disabled = _p$._v$51 = _v$51);
10904
- _v$52 !== _p$._v$52 && className(_el$68, _p$._v$52 = _v$52);
10905
- _v$53 !== _p$._v$53 && className(_el$69, _p$._v$53 = _v$53);
10906
- _v$54 !== _p$._v$54 && (_el$69.disabled = _p$._v$54 = _v$54);
10907
- _v$55 !== _p$._v$55 && className(_el$70, _p$._v$55 = _v$55);
10908
- _v$56 !== _p$._v$56 && className(_el$80, _p$._v$56 = _v$56);
10909
- _v$57 !== _p$._v$57 && className(_el$82, _p$._v$57 = _v$57);
11141
+ background-color: ${t2(colors.cyan[500], colors.cyan[400])};
11142
+ `, _v$56 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles().detailsHeader, "tsqd-query-details-header");
11143
+ _v$35 !== _p$._v$35 && className(_el$50, _p$._v$35 = _v$35);
11144
+ _v$36 !== _p$._v$36 && className(_el$51, _p$._v$36 = _v$36);
11145
+ _v$37 !== _p$._v$37 && className(_el$52, _p$._v$37 = _v$37);
11146
+ _v$38 !== _p$._v$38 && className(_el$56, _p$._v$38 = _v$38);
11147
+ _v$39 !== _p$._v$39 && className(_el$63, _p$._v$39 = _v$39);
11148
+ _v$40 !== _p$._v$40 && className(_el$64, _p$._v$40 = _v$40);
11149
+ _v$41 !== _p$._v$41 && className(_el$65, _p$._v$41 = _v$41);
11150
+ _v$42 !== _p$._v$42 && (_el$65.disabled = _p$._v$42 = _v$42);
11151
+ _v$43 !== _p$._v$43 && className(_el$66, _p$._v$43 = _v$43);
11152
+ _v$44 !== _p$._v$44 && className(_el$67, _p$._v$44 = _v$44);
11153
+ _v$45 !== _p$._v$45 && (_el$67.disabled = _p$._v$45 = _v$45);
11154
+ _v$46 !== _p$._v$46 && className(_el$68, _p$._v$46 = _v$46);
11155
+ _v$47 !== _p$._v$47 && className(_el$69, _p$._v$47 = _v$47);
11156
+ _v$48 !== _p$._v$48 && (_el$69.disabled = _p$._v$48 = _v$48);
11157
+ _v$49 !== _p$._v$49 && className(_el$70, _p$._v$49 = _v$49);
11158
+ _v$50 !== _p$._v$50 && className(_el$71, _p$._v$50 = _v$50);
11159
+ _v$51 !== _p$._v$51 && (_el$71.disabled = _p$._v$51 = _v$51);
11160
+ _v$52 !== _p$._v$52 && className(_el$72, _p$._v$52 = _v$52);
11161
+ _v$53 !== _p$._v$53 && className(_el$73, _p$._v$53 = _v$53);
11162
+ _v$54 !== _p$._v$54 && (_el$73.disabled = _p$._v$54 = _v$54);
11163
+ _v$55 !== _p$._v$55 && className(_el$74, _p$._v$55 = _v$55);
11164
+ _v$56 !== _p$._v$56 && className(_el$84, _p$._v$56 = _v$56);
11165
+ _v$57 !== _p$._v$57 && className(_el$86, _p$._v$57 = _v$57);
10910
11166
  return _p$;
10911
11167
  }, {
10912
11168
  _v$35: void 0,
@@ -10933,7 +11189,7 @@ var QueryDetails = () => {
10933
11189
  _v$56: void 0,
10934
11190
  _v$57: void 0
10935
11191
  });
10936
- return _el$46;
11192
+ return _el$50;
10937
11193
  }
10938
11194
  });
10939
11195
  };
@@ -10973,7 +11229,7 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
10973
11229
  });
10974
11230
  return value;
10975
11231
  };
10976
- var getStyles2 = () => {
11232
+ var stylesFactory2 = (theme) => {
10977
11233
  const {
10978
11234
  colors,
10979
11235
  font,
@@ -10982,6 +11238,7 @@ var getStyles2 = () => {
10982
11238
  shadow,
10983
11239
  border
10984
11240
  } = tokens;
11241
+ const t2 = (light, dark) => theme === "light" ? light : dark;
10985
11242
  return {
10986
11243
  devtoolsBtn: u`
10987
11244
  z-index: 100000;
@@ -11043,8 +11300,6 @@ var getStyles2 = () => {
11043
11300
  display: flex;
11044
11301
  gap: ${tokens.size[0.5]};
11045
11302
  & * {
11046
- font-family: 'Inter', sans-serif;
11047
- color: ${colors.gray[300]};
11048
11303
  box-sizing: border-box;
11049
11304
  text-transform: none;
11050
11305
  }
@@ -11071,7 +11326,7 @@ var getStyles2 = () => {
11071
11326
  left: 0;
11072
11327
  max-height: 90%;
11073
11328
  min-height: 3.5rem;
11074
- border-bottom: ${colors.darkGray[300]} 1px solid;
11329
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11075
11330
  `,
11076
11331
  "panel-position-bottom": u`
11077
11332
  bottom: 0;
@@ -11079,20 +11334,20 @@ var getStyles2 = () => {
11079
11334
  left: 0;
11080
11335
  max-height: 90%;
11081
11336
  min-height: 3.5rem;
11082
- border-top: ${colors.darkGray[300]} 1px solid;
11337
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11083
11338
  `,
11084
11339
  "panel-position-right": u`
11085
11340
  bottom: 0;
11086
11341
  right: 0;
11087
11342
  top: 0;
11088
- border-left: ${colors.darkGray[300]} 1px solid;
11343
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11089
11344
  max-width: 90%;
11090
11345
  `,
11091
11346
  "panel-position-left": u`
11092
11347
  bottom: 0;
11093
11348
  left: 0;
11094
11349
  top: 0;
11095
- border-right: ${colors.darkGray[300]} 1px solid;
11350
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11096
11351
  max-width: 90%;
11097
11352
  `,
11098
11353
  closeBtn: u`
@@ -11103,13 +11358,15 @@ var getStyles2 = () => {
11103
11358
  align-items: center;
11104
11359
  justify-content: center;
11105
11360
  outline: none;
11361
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11106
11362
  &:hover {
11107
- background-color: ${colors.darkGray[500]};
11363
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11108
11364
  }
11109
11365
  &:focus-visible {
11110
11366
  outline: 2px solid ${colors.blue[600]};
11111
11367
  }
11112
11368
  & svg {
11369
+ color: ${t2(colors.gray[600], colors.gray[400])};
11113
11370
  width: ${size2[2]};
11114
11371
  height: ${size2[2]};
11115
11372
  }
@@ -11118,11 +11375,10 @@ var getStyles2 = () => {
11118
11375
  bottom: 0;
11119
11376
  right: ${size2[2]};
11120
11377
  transform: translate(0, 100%);
11121
- background-color: ${colors.darkGray[700]};
11122
- border-right: ${colors.darkGray[300]} 1px solid;
11123
- border-left: ${colors.darkGray[300]} 1px solid;
11378
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11379
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11124
11380
  border-top: none;
11125
- border-bottom: ${colors.darkGray[300]} 1px solid;
11381
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11126
11382
  border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
11127
11383
  padding: ${size2[0.5]} ${size2[1.5]} ${size2[1]} ${size2[1.5]};
11128
11384
 
@@ -11143,10 +11399,9 @@ var getStyles2 = () => {
11143
11399
  top: 0;
11144
11400
  right: ${size2[2]};
11145
11401
  transform: translate(0, -100%);
11146
- background-color: ${colors.darkGray[700]};
11147
- border-right: ${colors.darkGray[300]} 1px solid;
11148
- border-left: ${colors.darkGray[300]} 1px solid;
11149
- border-top: ${colors.darkGray[300]} 1px solid;
11402
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11403
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11404
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11150
11405
  border-bottom: none;
11151
11406
  border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
11152
11407
  padding: ${size2[1]} ${size2[1.5]} ${size2[0.5]} ${size2[1.5]};
@@ -11164,11 +11419,10 @@ var getStyles2 = () => {
11164
11419
  bottom: ${size2[2]};
11165
11420
  left: 0;
11166
11421
  transform: translate(-100%, 0);
11167
- background-color: ${colors.darkGray[700]};
11168
11422
  border-right: none;
11169
- border-left: ${colors.darkGray[300]} 1px solid;
11170
- border-top: ${colors.darkGray[300]} 1px solid;
11171
- border-bottom: ${colors.darkGray[300]} 1px solid;
11423
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11424
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11425
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11172
11426
  border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
11173
11427
  padding: ${size2[1.5]} ${size2[0.5]} ${size2[1.5]} ${size2[1]};
11174
11428
 
@@ -11188,11 +11442,10 @@ var getStyles2 = () => {
11188
11442
  bottom: ${size2[2]};
11189
11443
  right: 0;
11190
11444
  transform: translate(100%, 0);
11191
- background-color: ${colors.darkGray[700]};
11192
11445
  border-left: none;
11193
- border-right: ${colors.darkGray[300]} 1px solid;
11194
- border-top: ${colors.darkGray[300]} 1px solid;
11195
- border-bottom: ${colors.darkGray[300]} 1px solid;
11446
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11447
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11448
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11196
11449
  border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
11197
11450
  padding: ${size2[1.5]} ${size2[1]} ${size2[1.5]} ${size2[0.5]};
11198
11451
 
@@ -11210,15 +11463,18 @@ var getStyles2 = () => {
11210
11463
  `,
11211
11464
  queriesContainer: u`
11212
11465
  flex: 1 1 700px;
11213
- background-color: ${colors.darkGray[700]};
11466
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11214
11467
  display: flex;
11215
11468
  flex-direction: column;
11469
+ & * {
11470
+ font-family: 'Inter', sans-serif;
11471
+ }
11216
11472
  `,
11217
11473
  dragHandle: u`
11218
11474
  position: absolute;
11219
11475
  transition: background-color 0.125s ease;
11220
11476
  &:hover {
11221
- background-color: ${colors.purple[400]}${alpha[90]};
11477
+ background-color: ${colors.purple[400]}${t2("", alpha[90])};
11222
11478
  }
11223
11479
  z-index: 4;
11224
11480
  `,
@@ -11252,7 +11508,7 @@ var getStyles2 = () => {
11252
11508
  align-items: center;
11253
11509
  padding: ${tokens.size[2]} ${tokens.size[2.5]};
11254
11510
  gap: ${tokens.size[3]};
11255
- border-bottom: ${colors.darkGray[500]} 1px solid;
11511
+ border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
11256
11512
  align-items: center;
11257
11513
  & > button {
11258
11514
  padding: 0;
@@ -11279,11 +11535,15 @@ var getStyles2 = () => {
11279
11535
  font-weight: ${font.weight.bold};
11280
11536
  line-height: ${font.lineHeight.xs};
11281
11537
  white-space: nowrap;
11538
+ color: ${t2(colors.gray[600], colors.gray[300])};
11282
11539
  `,
11283
11540
  queryFlavorLogo: u`
11284
11541
  font-weight: ${font.weight.semibold};
11285
11542
  font-size: ${font.size.xs};
11286
- background: linear-gradient(to right, #dd524b, #e9a03b);
11543
+ background: linear-gradient(
11544
+ to right,
11545
+ ${t2("#ea4037, #ff9b11", "#dd524b, #e9a03b")}
11546
+ );
11287
11547
  background-clip: text;
11288
11548
  -webkit-background-clip: text;
11289
11549
  line-height: 1;
@@ -11298,14 +11558,17 @@ var getStyles2 = () => {
11298
11558
  queryStatusTag: u`
11299
11559
  display: flex;
11300
11560
  gap: ${tokens.size[1.5]};
11301
- background: ${colors.darkGray[500]};
11561
+ box-sizing: border-box;
11562
+ height: ${tokens.size[6.5]};
11563
+ background: ${t2(colors.gray[50], colors.darkGray[500])};
11564
+ color: ${t2(colors.gray[700], colors.gray[300])};
11302
11565
  border-radius: ${tokens.border.radius.sm};
11303
11566
  font-size: ${font.size.sm};
11304
11567
  padding: ${tokens.size[1]};
11305
- padding-left: ${tokens.size[2]};
11568
+ padding-left: ${tokens.size[1.5]};
11306
11569
  align-items: center;
11307
11570
  font-weight: ${font.weight.medium};
11308
- border: none;
11571
+ border: ${t2("1px solid " + colors.gray[300], "1px solid transparent")};
11309
11572
  user-select: none;
11310
11573
  position: relative;
11311
11574
  &:focus-visible {
@@ -11322,8 +11585,8 @@ var getStyles2 = () => {
11322
11585
  display: flex;
11323
11586
  align-items: center;
11324
11587
  justify-content: center;
11325
- color: ${colors.gray[400]};
11326
- background-color: ${colors.darkGray[300]};
11588
+ color: ${t2(colors.gray[500], colors.gray[400])};
11589
+ background-color: ${t2(colors.gray[200], colors.darkGray[300])};
11327
11590
  border-radius: 2px;
11328
11591
  font-variant-numeric: tabular-nums;
11329
11592
  height: ${tokens.size[4.5]};
@@ -11331,15 +11594,15 @@ var getStyles2 = () => {
11331
11594
  statusTooltip: u`
11332
11595
  position: absolute;
11333
11596
  z-index: 1;
11334
- background-color: ${colors.darkGray[500]};
11597
+ background-color: ${t2(colors.gray[50], colors.darkGray[500])};
11335
11598
  top: 100%;
11336
11599
  left: 50%;
11337
11600
  transform: translate(-50%, calc(${tokens.size[2]}));
11338
11601
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11339
- border-radius: ${tokens.border.radius.md};
11602
+ border-radius: ${tokens.border.radius.sm};
11340
11603
  font-size: ${font.size.xs};
11341
- border: 1px solid ${colors.gray[600]};
11342
- color: ${tokens.colors["gray"][300]};
11604
+ border: 1px solid ${t2(colors.gray[400], colors.gray[600])};
11605
+ color: ${t2(colors["gray"][600], colors["gray"][300])};
11343
11606
 
11344
11607
  &::before {
11345
11608
  top: 0px;
@@ -11348,7 +11611,8 @@ var getStyles2 = () => {
11348
11611
  left: 50%;
11349
11612
  transform: translate(-50%, -100%);
11350
11613
  position: absolute;
11351
- border-color: transparent transparent ${colors.gray[600]} transparent;
11614
+ border-color: transparent transparent
11615
+ ${t2(colors.gray[400], colors.gray[600])} transparent;
11352
11616
  border-style: solid;
11353
11617
  border-width: 7px;
11354
11618
  /* transform: rotate(180deg); */
@@ -11359,17 +11623,14 @@ var getStyles2 = () => {
11359
11623
  content: ' ';
11360
11624
  display: block;
11361
11625
  left: 50%;
11362
- transform: translate(-50%, calc(-100% + 2.5px));
11626
+ transform: translate(-50%, calc(-100% + 2px));
11363
11627
  position: absolute;
11364
- border-color: transparent transparent ${colors.darkGray[500]}
11365
- transparent;
11628
+ border-color: transparent transparent
11629
+ ${t2(colors.gray[100], colors.darkGray[500])} transparent;
11366
11630
  border-style: solid;
11367
11631
  border-width: 7px;
11368
11632
  }
11369
11633
  `,
11370
- selectedQueryRow: u`
11371
- background-color: ${colors.darkGray[500]};
11372
- `,
11373
11634
  filtersContainer: u`
11374
11635
  display: flex;
11375
11636
  gap: ${tokens.size[2]};
@@ -11378,47 +11639,52 @@ var getStyles2 = () => {
11378
11639
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11379
11640
  padding-right: ${tokens.size[1.5]};
11380
11641
  border-radius: ${tokens.border.radius.sm};
11381
- background-color: ${colors.darkGray[400]};
11642
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11643
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11644
+ color: ${t2(colors.gray[700], colors.gray[300])};
11382
11645
  font-size: ${font.size.xs};
11383
11646
  display: flex;
11384
11647
  align-items: center;
11385
11648
  line-height: ${font.lineHeight.sm};
11386
11649
  gap: ${tokens.size[1.5]};
11387
11650
  max-width: 160px;
11388
- border: 1px solid ${colors.darkGray[200]};
11389
11651
  &:focus-visible {
11390
11652
  outline-offset: 2px;
11391
11653
  border-radius: ${border.radius.xs};
11392
11654
  outline: 2px solid ${colors.blue[800]};
11393
11655
  }
11656
+ & svg {
11657
+ color: ${t2(colors.gray[500], colors.gray[400])};
11658
+ }
11394
11659
  }
11395
11660
  `,
11396
11661
  filterInput: u`
11397
- padding: ${tokens.size[0.5]} ${tokens.size[2]};
11662
+ padding: ${size2[0.5]} ${size2[2]};
11398
11663
  border-radius: ${tokens.border.radius.sm};
11399
- background-color: ${colors.darkGray[400]};
11664
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11400
11665
  display: flex;
11401
11666
  box-sizing: content-box;
11402
11667
  align-items: center;
11403
11668
  gap: ${tokens.size[1.5]};
11404
11669
  max-width: 160px;
11405
11670
  min-width: 100px;
11406
- border: 1px solid ${colors.darkGray[200]};
11671
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11407
11672
  height: min-content;
11673
+ color: ${t2(colors.gray[600], colors.gray[400])};
11408
11674
  & > svg {
11409
- width: ${tokens.size[3]};
11410
- height: ${tokens.size[3]};
11675
+ width: ${size2[3]};
11676
+ height: ${size2[3]};
11411
11677
  }
11412
11678
  & input {
11413
11679
  font-size: ${font.size.xs};
11414
11680
  width: 100%;
11415
- background-color: ${colors.darkGray[400]};
11681
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11416
11682
  border: none;
11417
11683
  padding: 0;
11418
11684
  line-height: ${font.lineHeight.sm};
11419
- color: ${colors.gray[300]};
11685
+ color: ${t2(colors.gray[700], colors.gray[300])};
11420
11686
  &::placeholder {
11421
- color: ${colors.gray[300]};
11687
+ color: ${t2(colors.gray[700], colors.gray[300])};
11422
11688
  }
11423
11689
  &:focus {
11424
11690
  outline: none;
@@ -11434,24 +11700,26 @@ var getStyles2 = () => {
11434
11700
  filterSelect: u`
11435
11701
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11436
11702
  border-radius: ${tokens.border.radius.sm};
11437
- background-color: ${colors.darkGray[400]};
11703
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11438
11704
  display: flex;
11439
11705
  align-items: center;
11440
11706
  gap: ${tokens.size[1.5]};
11441
11707
  box-sizing: content-box;
11442
11708
  max-width: 160px;
11443
- border: 1px solid ${colors.darkGray[200]};
11709
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11444
11710
  height: min-content;
11445
11711
  & > svg {
11712
+ color: ${t2(colors.gray[600], colors.gray[400])};
11446
11713
  width: ${tokens.size[2]};
11447
11714
  height: ${tokens.size[2]};
11448
11715
  }
11449
11716
  & > select {
11450
11717
  appearance: none;
11718
+ color: ${t2(colors.gray[700], colors.gray[300])};
11451
11719
  min-width: 100px;
11452
11720
  line-height: ${font.lineHeight.sm};
11453
11721
  font-size: ${font.size.xs};
11454
- background-color: ${colors.darkGray[400]};
11722
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11455
11723
  border: none;
11456
11724
  &:focus {
11457
11725
  outline: none;
@@ -11469,7 +11737,8 @@ var getStyles2 = () => {
11469
11737
  `,
11470
11738
  actionsBtn: u`
11471
11739
  border-radius: ${tokens.border.radius.sm};
11472
- background-color: ${colors.darkGray[400]};
11740
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11741
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11473
11742
  width: 1.625rem;
11474
11743
  height: 1.625rem;
11475
11744
  justify-content: center;
@@ -11477,13 +11746,13 @@ var getStyles2 = () => {
11477
11746
  align-items: center;
11478
11747
  gap: ${tokens.size[1.5]};
11479
11748
  max-width: 160px;
11480
- border: 1px solid ${colors.darkGray[200]};
11481
11749
  cursor: pointer;
11482
11750
  padding: 0;
11483
11751
  &:hover {
11484
- background-color: ${colors.darkGray[500]};
11752
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11485
11753
  }
11486
11754
  & svg {
11755
+ color: ${t2(colors.gray[700], colors.gray[300])};
11487
11756
  width: ${tokens.size[3]};
11488
11757
  height: ${tokens.size[3]};
11489
11758
  }
@@ -11493,6 +11762,12 @@ var getStyles2 = () => {
11493
11762
  outline: 2px solid ${colors.blue[800]};
11494
11763
  }
11495
11764
  `,
11765
+ actionsBtnOffline: u`
11766
+ & svg {
11767
+ stroke: ${t2(colors.yellow[700], colors.yellow[500])};
11768
+ fill: ${t2(colors.yellow[700], colors.yellow[500])};
11769
+ }
11770
+ `,
11496
11771
  overflowQueryContainer: u`
11497
11772
  flex: 1;
11498
11773
  overflow-y: auto;
@@ -11505,9 +11780,11 @@ var getStyles2 = () => {
11505
11780
  display: flex;
11506
11781
  align-items: center;
11507
11782
  padding: 0;
11508
- background-color: inherit;
11509
11783
  border: none;
11510
11784
  cursor: pointer;
11785
+ color: ${t2(colors.gray[700], colors.gray[300])};
11786
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11787
+ line-height: 1;
11511
11788
  &:focus {
11512
11789
  outline: none;
11513
11790
  }
@@ -11517,7 +11794,7 @@ var getStyles2 = () => {
11517
11794
  outline: 2px solid ${colors.blue[800]};
11518
11795
  }
11519
11796
  &:hover .tsqd-query-hash {
11520
- background-color: ${colors.darkGray[600]};
11797
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
11521
11798
  }
11522
11799
 
11523
11800
  & .tsqd-query-observer-count {
@@ -11532,7 +11809,7 @@ var getStyles2 = () => {
11532
11809
  font-weight: ${font.weight.medium};
11533
11810
  border-bottom-width: 1px;
11534
11811
  border-bottom-style: solid;
11535
- border-bottom: 1px solid ${colors.darkGray[700]};
11812
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[700])};
11536
11813
  }
11537
11814
  & .tsqd-query-hash {
11538
11815
  user-select: text;
@@ -11543,7 +11820,7 @@ var getStyles2 = () => {
11543
11820
  flex: 1;
11544
11821
  padding: ${tokens.size[1]} ${tokens.size[2]};
11545
11822
  font-family: 'Menlo', 'Fira Code', monospace;
11546
- border-bottom: 1px solid ${colors.darkGray[400]};
11823
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11547
11824
  text-align: left;
11548
11825
  text-overflow: clip;
11549
11826
  word-break: break-word;
@@ -11554,15 +11831,20 @@ var getStyles2 = () => {
11554
11831
  display: flex;
11555
11832
  align-items: center;
11556
11833
  padding: 0 ${tokens.size[2]};
11557
- color: ${colors.gray[300]};
11558
- background-color: ${colors.darkGray[600]};
11559
- border-bottom: 1px solid ${colors.darkGray[400]};
11834
+ color: ${t2(colors.gray[800], colors.gray[300])};
11835
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
11836
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11560
11837
  font-size: ${font.size.xs};
11561
11838
  }
11562
11839
  `,
11840
+ selectedQueryRow: u`
11841
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11842
+ `,
11563
11843
  detailsContainer: u`
11564
11844
  flex: 1 1 700px;
11565
- background-color: ${colors.darkGray[700]};
11845
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11846
+ color: ${t2(colors.gray[700], colors.gray[300])};
11847
+ font-family: 'Inter', sans-serif;
11566
11848
  display: flex;
11567
11849
  flex-direction: column;
11568
11850
  overflow-y: auto;
@@ -11570,10 +11852,11 @@ var getStyles2 = () => {
11570
11852
  text-align: left;
11571
11853
  `,
11572
11854
  detailsHeader: u`
11855
+ font-family: 'Inter', sans-serif;
11573
11856
  position: sticky;
11574
11857
  top: 0;
11575
11858
  z-index: 2;
11576
- background-color: ${colors.darkGray[600]};
11859
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
11577
11860
  padding: ${tokens.size[1.5]} ${tokens.size[2]};
11578
11861
  font-weight: ${font.weight.medium};
11579
11862
  font-size: ${font.size.xs};
@@ -11606,6 +11889,10 @@ var getStyles2 = () => {
11606
11889
  font-size: ${font.size.xs};
11607
11890
  line-height: ${font.lineHeight.xs};
11608
11891
  }
11892
+
11893
+ & pre {
11894
+ margin: 0;
11895
+ }
11609
11896
  `,
11610
11897
  queryDetailsStatus: u`
11611
11898
  border: 1px solid ${colors.darkGray[200]};
@@ -11620,12 +11907,13 @@ var getStyles2 = () => {
11620
11907
  gap: ${tokens.size[2]};
11621
11908
  padding: 0px ${tokens.size[2]};
11622
11909
  & > button {
11910
+ font-family: 'Inter', sans-serif;
11623
11911
  font-size: ${font.size.xs};
11624
11912
  padding: ${tokens.size[1]} ${tokens.size[2]};
11625
11913
  display: flex;
11626
11914
  border-radius: ${tokens.border.radius.sm};
11627
- border: 1px solid ${colors.darkGray[400]};
11628
- background-color: ${colors.darkGray[600]};
11915
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
11916
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11629
11917
  align-items: center;
11630
11918
  gap: ${tokens.size[2]};
11631
11919
  font-weight: ${font.weight.medium};
@@ -11637,7 +11925,7 @@ var getStyles2 = () => {
11637
11925
  outline: 2px solid ${colors.blue[800]};
11638
11926
  }
11639
11927
  &:hover {
11640
- background-color: ${colors.darkGray[500]};
11928
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11641
11929
  }
11642
11930
 
11643
11931
  &:disabled {
@@ -11658,17 +11946,17 @@ var getStyles2 = () => {
11658
11946
  display: flex;
11659
11947
  border-radius: ${tokens.border.radius.sm};
11660
11948
  overflow: hidden;
11661
- border: 1px solid ${colors.darkGray[400]};
11662
- background-color: ${colors.darkGray[600]};
11949
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
11950
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11663
11951
  align-items: center;
11664
11952
  gap: ${tokens.size[2]};
11665
11953
  font-weight: ${font.weight.medium};
11666
11954
  line-height: ${font.lineHeight.sm};
11667
- color: ${tokens.colors.red[400]};
11955
+ color: ${t2(colors.red[500], colors.red[400])};
11668
11956
  cursor: pointer;
11669
11957
  position: relative;
11670
11958
  &:hover {
11671
- background-color: ${colors.darkGray[500]};
11959
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11672
11960
  }
11673
11961
  & > span {
11674
11962
  width: ${size2[1.5]};
@@ -11709,10 +11997,10 @@ var getStyles2 = () => {
11709
11997
  flex-direction: column;
11710
11998
  gap: ${size2[0.5]};
11711
11999
  border-radius: ${tokens.border.radius.sm};
11712
- border: 1px solid ${colors.gray[700]};
11713
- background-color: ${colors.darkGray[600]};
12000
+ border: 1px solid ${t2(colors.gray[300], colors.gray[700])};
12001
+ background-color: ${t2(colors.gray[50], colors.darkGray[600])};
11714
12002
  font-size: ${font.size.xs};
11715
- color: ${colors.gray[300]};
12003
+ color: ${t2(colors.gray[700], colors.gray[300])};
11716
12004
  z-index: 99999;
11717
12005
  min-width: 120px;
11718
12006
  padding: ${size2[0.5]};
@@ -11722,17 +12010,19 @@ var getStyles2 = () => {
11722
12010
  align-items: center;
11723
12011
  justify-content: space-between;
11724
12012
  border-radius: ${tokens.border.radius.xs};
11725
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12013
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11726
12014
  cursor: pointer;
11727
12015
  background-color: transparent;
11728
12016
  border: none;
12017
+ color: ${t2(colors.gray[700], colors.gray[300])};
11729
12018
  & svg {
12019
+ color: ${t2(colors.gray[600], colors.gray[400])};
11730
12020
  transform: rotate(-90deg);
11731
12021
  width: ${tokens.size[2]};
11732
12022
  height: ${tokens.size[2]};
11733
12023
  }
11734
12024
  &:hover {
11735
- background-color: ${colors.darkGray[500]};
12025
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11736
12026
  }
11737
12027
  &:focus-visible {
11738
12028
  outline-offset: 2px;
@@ -11744,33 +12034,48 @@ var getStyles2 = () => {
11744
12034
  }
11745
12035
  `,
11746
12036
  settingsMenuHeader: u`
11747
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12037
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11748
12038
  font-weight: ${font.weight.medium};
11749
- border-bottom: 1px solid ${colors.darkGray[400]};
11750
- color: ${colors.gray[400]};
12039
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
12040
+ color: ${t2(colors.gray[500], colors.gray[400])};
11751
12041
  font-size: ${font.size["xs"]};
11752
12042
  `,
11753
12043
  settingsSubButton: u`
11754
12044
  display: flex;
11755
12045
  align-items: center;
11756
12046
  justify-content: space-between;
11757
- color: ${colors.gray[300]};
12047
+ color: ${t2(colors.gray[700], colors.gray[300])};
11758
12048
  font-size: ${font.size["xs"]};
11759
12049
  border-radius: ${tokens.border.radius.xs};
11760
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12050
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11761
12051
  cursor: pointer;
11762
12052
  background-color: transparent;
11763
12053
  border: none;
12054
+ & svg {
12055
+ color: ${t2(colors.gray[600], colors.gray[400])};
12056
+ }
11764
12057
  &:hover {
11765
- background-color: ${colors.darkGray[500]};
12058
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11766
12059
  }
11767
12060
  &:focus-visible {
11768
12061
  outline-offset: 2px;
11769
12062
  outline: 2px solid ${colors.blue[800]};
11770
12063
  }
12064
+ `,
12065
+ themeSelectedButton: u`
12066
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
12067
+ color: ${t2(colors.purple[700], colors.purple[300])};
12068
+ & svg {
12069
+ color: ${t2(colors.purple[700], colors.purple[300])};
12070
+ }
12071
+ &:hover {
12072
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
12073
+ }
11771
12074
  `
11772
12075
  };
11773
12076
  };
12077
+ var lightStyles2 = stylesFactory2("light");
12078
+ var darkStyles2 = stylesFactory2("dark");
11774
12079
  delegateEvents(["click", "mousedown", "input"]);
11775
12080
  /*! Bundled license information:
11776
12081