@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/L2WNRKEK.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/L2WNRKEK.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 = {
@@ -9245,6 +9245,19 @@ var sortFns = {
9245
9245
  var convertRemToPixels = (rem) => {
9246
9246
  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
9247
9247
  };
9248
+ var getPreferredColorScheme = () => {
9249
+ const [colorScheme, setColorScheme] = createSignal("dark");
9250
+ onMount(() => {
9251
+ const query = window.matchMedia("(prefers-color-scheme: dark)");
9252
+ setColorScheme(query.matches ? "dark" : "light");
9253
+ const listener = (e2) => {
9254
+ setColorScheme(e2.matches ? "dark" : "light");
9255
+ };
9256
+ query.addEventListener("change", listener);
9257
+ onCleanup(() => query.removeEventListener("change", listener));
9258
+ });
9259
+ return colorScheme;
9260
+ };
9248
9261
  var updateNestedDataByPath = (oldData, updatePath2, value) => {
9249
9262
  if (updatePath2.length === 0) {
9250
9263
  return value;
@@ -9327,19 +9340,23 @@ var deleteNestedDataByPath = (oldData, deletePath) => {
9327
9340
  };
9328
9341
 
9329
9342
  // src/icons/index.tsx
9330
- 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">`);
9331
- 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">`);
9332
- 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">`);
9333
- 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">`);
9334
- 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">`);
9335
- 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">`);
9336
- 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">`);
9337
- 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">`);
9338
- 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">`);
9339
- 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">`);
9340
- 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">`);
9341
- 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">`);
9342
- 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">`);
9343
+ 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">`);
9344
+ 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">`);
9345
+ 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">`);
9346
+ 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">`);
9347
+ 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">`);
9348
+ 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">`);
9349
+ 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">`);
9350
+ 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">`);
9351
+ 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">`);
9352
+ 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">`);
9353
+ 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">`);
9354
+ 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">`);
9355
+ 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">`);
9356
+ 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">`);
9357
+ 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">`);
9358
+ 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">`);
9359
+ 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">`);
9343
9360
  function Search() {
9344
9361
  return _tmpl$();
9345
9362
  }
@@ -9369,41 +9386,63 @@ function ArrowRight() {
9369
9386
  return _el$7;
9370
9387
  })();
9371
9388
  }
9372
- function Wifi() {
9389
+ function Sun() {
9373
9390
  return _tmpl$6();
9374
9391
  }
9375
- function Offline() {
9376
- return (() => {
9377
- const _el$9 = _tmpl$7();
9378
- createRenderEffect((_p$) => {
9379
- const _v$ = tokens.colors.yellow[500], _v$2 = tokens.colors.yellow[500];
9380
- _v$ !== _p$._v$ && setAttribute(_el$9, "stroke", _p$._v$ = _v$);
9381
- _v$2 !== _p$._v$2 && setAttribute(_el$9, "fill", _p$._v$2 = _v$2);
9382
- return _p$;
9383
- }, {
9384
- _v$: void 0,
9385
- _v$2: void 0
9386
- });
9387
- return _el$9;
9388
- })();
9392
+ function Moon() {
9393
+ return _tmpl$7();
9389
9394
  }
9390
- function Settings() {
9395
+ function Monitor() {
9391
9396
  return _tmpl$8();
9392
9397
  }
9393
- function Copier() {
9398
+ function Wifi() {
9394
9399
  return _tmpl$9();
9395
9400
  }
9396
- function CopiedCopier() {
9401
+ function Offline() {
9397
9402
  return _tmpl$10();
9398
9403
  }
9399
- function ErrorCopier() {
9404
+ function Settings() {
9400
9405
  return _tmpl$11();
9401
9406
  }
9402
- function List() {
9407
+ function Copier() {
9403
9408
  return _tmpl$12();
9404
9409
  }
9410
+ function CopiedCopier(props) {
9411
+ return (() => {
9412
+ const _el$15 = _tmpl$13(), _el$16 = _el$15.firstChild;
9413
+ createRenderEffect(() => setAttribute(_el$16, "stroke", props.theme === "dark" ? "#12B76A" : "#027A48"));
9414
+ return _el$15;
9415
+ })();
9416
+ }
9417
+ function ErrorCopier() {
9418
+ return _tmpl$14();
9419
+ }
9420
+ function List() {
9421
+ return _tmpl$15();
9422
+ }
9423
+ function Check(props) {
9424
+ return [createComponent(Show, {
9425
+ get when() {
9426
+ return props.checked;
9427
+ },
9428
+ get children() {
9429
+ const _el$19 = _tmpl$13(), _el$20 = _el$19.firstChild;
9430
+ createRenderEffect(() => setAttribute(_el$20, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
9431
+ return _el$19;
9432
+ }
9433
+ }), createComponent(Show, {
9434
+ get when() {
9435
+ return !props.checked;
9436
+ },
9437
+ get children() {
9438
+ const _el$21 = _tmpl$16(), _el$22 = _el$21.firstChild;
9439
+ createRenderEffect(() => setAttribute(_el$22, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
9440
+ return _el$21;
9441
+ }
9442
+ })];
9443
+ }
9405
9444
  function TanstackLogo() {
9406
- return _tmpl$13();
9445
+ return _tmpl$17();
9407
9446
  }
9408
9447
 
9409
9448
  // src/Context.ts
@@ -9416,18 +9455,25 @@ var QueryDevtoolsContext = createContext({
9416
9455
  function useQueryDevtoolsContext() {
9417
9456
  return useContext(QueryDevtoolsContext);
9418
9457
  }
9458
+ var ThemeContext = createContext(
9459
+ () => "dark"
9460
+ );
9461
+ function useTheme() {
9462
+ return useContext(ThemeContext);
9463
+ }
9419
9464
 
9420
9465
  // src/Explorer.tsx
9421
- 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">`);
9466
+ 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">`);
9422
9467
  var _tmpl$22 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
9423
9468
  var _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items" aria-label="Remove all items">`);
9424
9469
  var _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item" aria-label="Delete item">`);
9425
- var _tmpl$52 = /* @__PURE__ */ template(`<div>`);
9426
- var _tmpl$62 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
9427
- var _tmpl$72 = /* @__PURE__ */ template(`<input>`);
9428
- var _tmpl$82 = /* @__PURE__ */ template(`<div><span>:`);
9429
- var _tmpl$92 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
9430
- var _tmpl$102 = /* @__PURE__ */ template(`<span>`);
9470
+ var _tmpl$52 = /* @__PURE__ */ template(`<button title="Toggle value" aria-label="Toggle value">`);
9471
+ var _tmpl$62 = /* @__PURE__ */ template(`<div>`);
9472
+ var _tmpl$72 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
9473
+ var _tmpl$82 = /* @__PURE__ */ template(`<input>`);
9474
+ var _tmpl$92 = /* @__PURE__ */ template(`<span>`);
9475
+ var _tmpl$102 = /* @__PURE__ */ template(`<div><span>:`);
9476
+ var _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
9431
9477
  function chunkArray(array, size2) {
9432
9478
  if (size2 < 1)
9433
9479
  return [];
@@ -9440,10 +9486,13 @@ function chunkArray(array, size2) {
9440
9486
  return result;
9441
9487
  }
9442
9488
  var Expander = (props) => {
9443
- const styles = getStyles();
9489
+ const theme = useTheme();
9490
+ const styles = createMemo(() => {
9491
+ return theme() === "dark" ? darkStyles : lightStyles;
9492
+ });
9444
9493
  return (() => {
9445
- const _el$ = _tmpl$14();
9446
- createRenderEffect(() => className(_el$, clsx(styles.expander, u`
9494
+ const _el$ = _tmpl$18();
9495
+ createRenderEffect(() => className(_el$, clsx(styles().expander, u`
9447
9496
  transform: rotate(${props.expanded ? 90 : 0}deg);
9448
9497
  `, props.expanded && u`
9449
9498
  & svg {
@@ -9454,7 +9503,10 @@ var Expander = (props) => {
9454
9503
  })();
9455
9504
  };
9456
9505
  var CopyButton = (props) => {
9457
- const styles = getStyles();
9506
+ const theme = useTheme();
9507
+ const styles = createMemo(() => {
9508
+ return theme() === "dark" ? darkStyles : lightStyles;
9509
+ });
9458
9510
  const [copyState, setCopyState] = createSignal("NoCopy");
9459
9511
  return (() => {
9460
9512
  const _el$2 = _tmpl$22();
@@ -9486,7 +9538,11 @@ var CopyButton = (props) => {
9486
9538
  return copyState() === "SuccessCopy";
9487
9539
  },
9488
9540
  get children() {
9489
- return createComponent(CopiedCopier, {});
9541
+ return createComponent(CopiedCopier, {
9542
+ get theme() {
9543
+ return theme();
9544
+ }
9545
+ });
9490
9546
  }
9491
9547
  }), createComponent(Match, {
9492
9548
  get when() {
@@ -9499,7 +9555,7 @@ var CopyButton = (props) => {
9499
9555
  }
9500
9556
  }));
9501
9557
  createRenderEffect((_p$) => {
9502
- const _v$ = styles.actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
9558
+ const _v$ = styles().actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
9503
9559
  _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
9504
9560
  _v$2 !== _p$._v$2 && setAttribute(_el$2, "aria-label", _p$._v$2 = _v$2);
9505
9561
  return _p$;
@@ -9511,7 +9567,10 @@ var CopyButton = (props) => {
9511
9567
  })();
9512
9568
  };
9513
9569
  var ClearArrayButton = (props) => {
9514
- const styles = getStyles();
9570
+ const theme = useTheme();
9571
+ const styles = createMemo(() => {
9572
+ return theme() === "dark" ? darkStyles : lightStyles;
9573
+ });
9515
9574
  const queryClient = useQueryDevtoolsContext().client;
9516
9575
  return (() => {
9517
9576
  const _el$3 = _tmpl$32();
@@ -9521,12 +9580,15 @@ var ClearArrayButton = (props) => {
9521
9580
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
9522
9581
  };
9523
9582
  insert(_el$3, createComponent(List, {}));
9524
- createRenderEffect(() => className(_el$3, styles.actionButton));
9583
+ createRenderEffect(() => className(_el$3, styles().actionButton));
9525
9584
  return _el$3;
9526
9585
  })();
9527
9586
  };
9528
9587
  var DeleteItemButton = (props) => {
9529
- const styles = getStyles();
9588
+ const theme = useTheme();
9589
+ const styles = createMemo(() => {
9590
+ return theme() === "dark" ? darkStyles : lightStyles;
9591
+ });
9530
9592
  const queryClient = useQueryDevtoolsContext().client;
9531
9593
  return (() => {
9532
9594
  const _el$4 = _tmpl$42();
@@ -9536,15 +9598,46 @@ var DeleteItemButton = (props) => {
9536
9598
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
9537
9599
  };
9538
9600
  insert(_el$4, createComponent(Trash, {}));
9539
- createRenderEffect(() => className(_el$4, clsx(styles.actionButton)));
9601
+ createRenderEffect(() => className(_el$4, clsx(styles().actionButton)));
9540
9602
  return _el$4;
9541
9603
  })();
9542
9604
  };
9605
+ var ToggleValueButton = (props) => {
9606
+ const theme = useTheme();
9607
+ const styles = createMemo(() => {
9608
+ return theme() === "dark" ? darkStyles : lightStyles;
9609
+ });
9610
+ const queryClient = useQueryDevtoolsContext().client;
9611
+ return (() => {
9612
+ const _el$5 = _tmpl$52();
9613
+ _el$5.$$click = () => {
9614
+ const oldData = props.activeQuery.state.data;
9615
+ const newData = updateNestedDataByPath(oldData, props.dataPath, !props.value);
9616
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
9617
+ };
9618
+ insert(_el$5, createComponent(Check, {
9619
+ get theme() {
9620
+ return theme();
9621
+ },
9622
+ get checked() {
9623
+ return props.value;
9624
+ }
9625
+ }));
9626
+ createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
9627
+ width: ${tokens.size[3.5]};
9628
+ height: ${tokens.size[3.5]};
9629
+ `)));
9630
+ return _el$5;
9631
+ })();
9632
+ };
9543
9633
  function isIterable(x) {
9544
9634
  return Symbol.iterator in x;
9545
9635
  }
9546
9636
  function Explorer(props) {
9547
- const styles = getStyles();
9637
+ const theme = useTheme();
9638
+ const styles = createMemo(() => {
9639
+ return theme() === "dark" ? darkStyles : lightStyles;
9640
+ });
9548
9641
  const queryClient = useQueryDevtoolsContext().client;
9549
9642
  const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
9550
9643
  const toggleExpanded = () => setExpanded((old) => !old);
@@ -9587,36 +9680,36 @@ function Explorer(props) {
9587
9680
  const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
9588
9681
  const currentDataPath = props.dataPath ?? [];
9589
9682
  return (() => {
9590
- const _el$5 = _tmpl$52();
9591
- insert(_el$5, createComponent(Show, {
9683
+ const _el$6 = _tmpl$62();
9684
+ insert(_el$6, createComponent(Show, {
9592
9685
  get when() {
9593
9686
  return subEntryPages().length;
9594
9687
  },
9595
9688
  get children() {
9596
9689
  return [(() => {
9597
- 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;
9598
- _el$7.$$click = () => toggleExpanded();
9599
- insert(_el$7, createComponent(Expander, {
9690
+ 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;
9691
+ _el$8.$$click = () => toggleExpanded();
9692
+ insert(_el$8, createComponent(Expander, {
9600
9693
  get expanded() {
9601
9694
  return expanded();
9602
9695
  }
9603
- }), _el$8);
9604
- insert(_el$9, () => props.label);
9605
- insert(_el$11, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$12);
9606
- insert(_el$11, () => subEntries().length, _el$12);
9607
- insert(_el$11, () => subEntries().length > 1 ? `items` : `item`, null);
9608
- insert(_el$6, createComponent(Show, {
9696
+ }), _el$9);
9697
+ insert(_el$10, () => props.label);
9698
+ insert(_el$12, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$13);
9699
+ insert(_el$12, () => subEntries().length, _el$13);
9700
+ insert(_el$12, () => subEntries().length > 1 ? `items` : `item`, null);
9701
+ insert(_el$7, createComponent(Show, {
9609
9702
  get when() {
9610
9703
  return props.editable;
9611
9704
  },
9612
9705
  get children() {
9613
- const _el$13 = _tmpl$52();
9614
- insert(_el$13, createComponent(CopyButton, {
9706
+ const _el$14 = _tmpl$62();
9707
+ insert(_el$14, createComponent(CopyButton, {
9615
9708
  get value() {
9616
9709
  return props.value;
9617
9710
  }
9618
9711
  }), null);
9619
- insert(_el$13, createComponent(Show, {
9712
+ insert(_el$14, createComponent(Show, {
9620
9713
  get when() {
9621
9714
  return props.itemsDeletable && props.activeQuery !== void 0;
9622
9715
  },
@@ -9629,7 +9722,7 @@ function Explorer(props) {
9629
9722
  });
9630
9723
  }
9631
9724
  }), null);
9632
- insert(_el$13, createComponent(Show, {
9725
+ insert(_el$14, createComponent(Show, {
9633
9726
  get when() {
9634
9727
  return type() === "array" && props.activeQuery !== void 0;
9635
9728
  },
@@ -9642,22 +9735,22 @@ function Explorer(props) {
9642
9735
  });
9643
9736
  }
9644
9737
  }), null);
9645
- createRenderEffect(() => className(_el$13, styles.actions));
9646
- return _el$13;
9738
+ createRenderEffect(() => className(_el$14, styles().actions));
9739
+ return _el$14;
9647
9740
  }
9648
9741
  }), null);
9649
9742
  createRenderEffect((_p$) => {
9650
- const _v$3 = styles.expanderButtonContainer, _v$4 = styles.expanderButton, _v$5 = styles.info;
9651
- _v$3 !== _p$._v$3 && className(_el$6, _p$._v$3 = _v$3);
9652
- _v$4 !== _p$._v$4 && className(_el$7, _p$._v$4 = _v$4);
9653
- _v$5 !== _p$._v$5 && className(_el$11, _p$._v$5 = _v$5);
9743
+ const _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
9744
+ _v$3 !== _p$._v$3 && className(_el$7, _p$._v$3 = _v$3);
9745
+ _v$4 !== _p$._v$4 && className(_el$8, _p$._v$4 = _v$4);
9746
+ _v$5 !== _p$._v$5 && className(_el$12, _p$._v$5 = _v$5);
9654
9747
  return _p$;
9655
9748
  }, {
9656
9749
  _v$3: void 0,
9657
9750
  _v$4: void 0,
9658
9751
  _v$5: void 0
9659
9752
  });
9660
- return _el$6;
9753
+ return _el$7;
9661
9754
  })(), createComponent(Show, {
9662
9755
  get when() {
9663
9756
  return expanded();
@@ -9668,8 +9761,8 @@ function Explorer(props) {
9668
9761
  return subEntryPages().length === 1;
9669
9762
  },
9670
9763
  get children() {
9671
- const _el$14 = _tmpl$52();
9672
- insert(_el$14, createComponent(Key, {
9764
+ const _el$15 = _tmpl$62();
9765
+ insert(_el$15, createComponent(Key, {
9673
9766
  get each() {
9674
9767
  return subEntries();
9675
9768
  },
@@ -9700,36 +9793,36 @@ function Explorer(props) {
9700
9793
  });
9701
9794
  }
9702
9795
  }));
9703
- createRenderEffect(() => className(_el$14, styles.subEntry));
9704
- return _el$14;
9796
+ createRenderEffect(() => className(_el$15, styles().subEntry));
9797
+ return _el$15;
9705
9798
  }
9706
9799
  }), createComponent(Show, {
9707
9800
  get when() {
9708
9801
  return subEntryPages().length > 1;
9709
9802
  },
9710
9803
  get children() {
9711
- const _el$15 = _tmpl$52();
9712
- insert(_el$15, createComponent(Index, {
9804
+ const _el$16 = _tmpl$62();
9805
+ insert(_el$16, createComponent(Index, {
9713
9806
  get each() {
9714
9807
  return subEntryPages();
9715
9808
  },
9716
9809
  children: (entries3, index) => (() => {
9717
- 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;
9718
- _el$22.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
9719
- insert(_el$22, createComponent(Expander, {
9810
+ 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;
9811
+ _el$24.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
9812
+ insert(_el$24, createComponent(Expander, {
9720
9813
  get expanded() {
9721
9814
  return expandedPages().includes(index);
9722
9815
  }
9723
- }), _el$23);
9724
- insert(_el$22, index * 100, _el$27);
9725
- insert(_el$22, index * 100 + 100 - 1, _el$28);
9726
- insert(_el$21, createComponent(Show, {
9816
+ }), _el$25);
9817
+ insert(_el$24, index * 100, _el$29);
9818
+ insert(_el$24, index * 100 + 100 - 1, _el$30);
9819
+ insert(_el$23, createComponent(Show, {
9727
9820
  get when() {
9728
9821
  return expandedPages().includes(index);
9729
9822
  },
9730
9823
  get children() {
9731
- const _el$29 = _tmpl$52();
9732
- insert(_el$29, createComponent(Key, {
9824
+ const _el$31 = _tmpl$62();
9825
+ insert(_el$31, createComponent(Key, {
9733
9826
  get each() {
9734
9827
  return entries3();
9735
9828
  },
@@ -9755,70 +9848,96 @@ function Explorer(props) {
9755
9848
  }
9756
9849
  })
9757
9850
  }));
9758
- createRenderEffect(() => className(_el$29, styles.subEntry));
9759
- return _el$29;
9851
+ createRenderEffect(() => className(_el$31, styles().subEntry));
9852
+ return _el$31;
9760
9853
  }
9761
9854
  }), null);
9762
9855
  createRenderEffect((_p$) => {
9763
- const _v$10 = styles.entry, _v$11 = styles.expanderButton;
9764
- _v$10 !== _p$._v$10 && className(_el$21, _p$._v$10 = _v$10);
9765
- _v$11 !== _p$._v$11 && className(_el$22, _p$._v$11 = _v$11);
9856
+ const _v$10 = styles().entry, _v$11 = styles().expanderButton;
9857
+ _v$10 !== _p$._v$10 && className(_el$23, _p$._v$10 = _v$10);
9858
+ _v$11 !== _p$._v$11 && className(_el$24, _p$._v$11 = _v$11);
9766
9859
  return _p$;
9767
9860
  }, {
9768
9861
  _v$10: void 0,
9769
9862
  _v$11: void 0
9770
9863
  });
9771
- return _el$20;
9864
+ return _el$22;
9772
9865
  })()
9773
9866
  }));
9774
- createRenderEffect(() => className(_el$15, styles.subEntry));
9775
- return _el$15;
9867
+ createRenderEffect(() => className(_el$16, styles().subEntry));
9868
+ return _el$16;
9776
9869
  }
9777
9870
  })];
9778
9871
  }
9779
9872
  })];
9780
9873
  }
9781
9874
  }), null);
9782
- insert(_el$5, createComponent(Show, {
9875
+ insert(_el$6, createComponent(Show, {
9783
9876
  get when() {
9784
9877
  return subEntryPages().length === 0;
9785
9878
  },
9786
9879
  get children() {
9787
- const _el$16 = _tmpl$82(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild;
9788
- insert(_el$17, () => props.label, _el$18);
9789
- insert(_el$16, createComponent(Show, {
9880
+ const _el$17 = _tmpl$102(), _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild;
9881
+ insert(_el$18, () => props.label, _el$19);
9882
+ insert(_el$17, createComponent(Show, {
9790
9883
  get when() {
9791
- return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number");
9884
+ return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number" || type() === "boolean");
9792
9885
  },
9793
9886
  get fallback() {
9794
9887
  return (() => {
9795
- const _el$30 = _tmpl$102();
9796
- insert(_el$30, () => displayValue(props.value));
9797
- createRenderEffect(() => className(_el$30, styles.value));
9798
- return _el$30;
9888
+ const _el$32 = _tmpl$92();
9889
+ insert(_el$32, () => displayValue(props.value));
9890
+ createRenderEffect(() => className(_el$32, styles().value));
9891
+ return _el$32;
9799
9892
  })();
9800
9893
  },
9801
9894
  get children() {
9802
- const _el$19 = _tmpl$72();
9803
- _el$19.addEventListener("change", (changeEvent) => {
9804
- const oldData = props.activeQuery.state.data;
9805
- const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
9806
- queryClient.setQueryData(props.activeQuery.queryKey, newData);
9807
- });
9808
- createRenderEffect((_p$) => {
9809
- const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles.value, styles.editableInput);
9810
- _v$6 !== _p$._v$6 && setAttribute(_el$19, "type", _p$._v$6 = _v$6);
9811
- _v$7 !== _p$._v$7 && className(_el$19, _p$._v$7 = _v$7);
9812
- return _p$;
9813
- }, {
9814
- _v$6: void 0,
9815
- _v$7: void 0
9816
- });
9817
- createRenderEffect(() => _el$19.value = props.value);
9818
- return _el$19;
9895
+ return [createComponent(Show, {
9896
+ get when() {
9897
+ return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number");
9898
+ },
9899
+ get children() {
9900
+ const _el$20 = _tmpl$82();
9901
+ _el$20.addEventListener("change", (changeEvent) => {
9902
+ const oldData = props.activeQuery.state.data;
9903
+ const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
9904
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
9905
+ });
9906
+ createRenderEffect((_p$) => {
9907
+ const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles().value, styles().editableInput);
9908
+ _v$6 !== _p$._v$6 && setAttribute(_el$20, "type", _p$._v$6 = _v$6);
9909
+ _v$7 !== _p$._v$7 && className(_el$20, _p$._v$7 = _v$7);
9910
+ return _p$;
9911
+ }, {
9912
+ _v$6: void 0,
9913
+ _v$7: void 0
9914
+ });
9915
+ createRenderEffect(() => _el$20.value = props.value);
9916
+ return _el$20;
9917
+ }
9918
+ }), createComponent(Show, {
9919
+ get when() {
9920
+ return type() === "boolean";
9921
+ },
9922
+ get children() {
9923
+ const _el$21 = _tmpl$92();
9924
+ insert(_el$21, createComponent(ToggleValueButton, {
9925
+ get activeQuery() {
9926
+ return props.activeQuery;
9927
+ },
9928
+ dataPath: currentDataPath,
9929
+ get value() {
9930
+ return props.value;
9931
+ }
9932
+ }), null);
9933
+ insert(_el$21, () => displayValue(props.value), null);
9934
+ createRenderEffect(() => className(_el$21, clsx(styles().value, styles().actions, styles().editableInput)));
9935
+ return _el$21;
9936
+ }
9937
+ })];
9819
9938
  }
9820
9939
  }), null);
9821
- insert(_el$16, createComponent(Show, {
9940
+ insert(_el$17, createComponent(Show, {
9822
9941
  get when() {
9823
9942
  return props.editable && props.itemsDeletable && props.activeQuery !== void 0;
9824
9943
  },
@@ -9832,28 +9951,29 @@ function Explorer(props) {
9832
9951
  }
9833
9952
  }), null);
9834
9953
  createRenderEffect((_p$) => {
9835
- const _v$8 = styles.row, _v$9 = styles.label;
9836
- _v$8 !== _p$._v$8 && className(_el$16, _p$._v$8 = _v$8);
9837
- _v$9 !== _p$._v$9 && className(_el$17, _p$._v$9 = _v$9);
9954
+ const _v$8 = styles().row, _v$9 = styles().label;
9955
+ _v$8 !== _p$._v$8 && className(_el$17, _p$._v$8 = _v$8);
9956
+ _v$9 !== _p$._v$9 && className(_el$18, _p$._v$9 = _v$9);
9838
9957
  return _p$;
9839
9958
  }, {
9840
9959
  _v$8: void 0,
9841
9960
  _v$9: void 0
9842
9961
  });
9843
- return _el$16;
9962
+ return _el$17;
9844
9963
  }
9845
9964
  }), null);
9846
- createRenderEffect(() => className(_el$5, styles.entry));
9847
- return _el$5;
9965
+ createRenderEffect(() => className(_el$6, styles().entry));
9966
+ return _el$6;
9848
9967
  })();
9849
9968
  }
9850
- var getStyles = () => {
9969
+ var stylesFactory = (theme) => {
9851
9970
  const {
9852
9971
  colors,
9853
9972
  font,
9854
9973
  size: size2,
9855
9974
  border
9856
9975
  } = tokens;
9976
+ const t2 = (light, dark) => theme === "light" ? light : dark;
9857
9977
  return {
9858
9978
  entry: u`
9859
9979
  & * {
@@ -9867,7 +9987,7 @@ var getStyles = () => {
9867
9987
  subEntry: u`
9868
9988
  margin: 0 0 0 0.5em;
9869
9989
  padding-left: 0.75em;
9870
- border-left: 2px solid ${colors.darkGray[400]};
9990
+ border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
9871
9991
  /* outline: 1px solid ${colors.teal[400]}; */
9872
9992
  `,
9873
9993
  expander: u`
@@ -9916,21 +10036,22 @@ var getStyles = () => {
9916
10036
  }
9917
10037
  `,
9918
10038
  info: u`
9919
- color: ${colors.gray[500]};
10039
+ color: ${t2(colors.gray[500], colors.gray[500])};
9920
10040
  font-size: ${font.size.xs};
9921
10041
  margin-left: ${size2[1]};
9922
10042
  /* outline: 1px solid ${colors.yellow[400]}; */
9923
10043
  `,
9924
10044
  label: u`
9925
- color: ${colors.gray[300]};
10045
+ color: ${t2(colors.gray[700], colors.gray[300])};
9926
10046
  `,
9927
10047
  value: u`
9928
- color: ${colors.purple[400]};
10048
+ color: ${t2(colors.purple[600], colors.purple[400])};
9929
10049
  flex-grow: 1;
9930
10050
  `,
9931
10051
  actions: u`
9932
10052
  display: inline-flex;
9933
10053
  gap: ${size2[2]};
10054
+ align-items: center;
9934
10055
  `,
9935
10056
  row: u`
9936
10057
  display: inline-flex;
@@ -9938,19 +10059,22 @@ var getStyles = () => {
9938
10059
  width: 100%;
9939
10060
  margin-bottom: ${size2[0.5]};
9940
10061
  line-height: 1.125rem;
10062
+ align-items: center;
9941
10063
  `,
9942
10064
  editableInput: u`
9943
10065
  border: none;
9944
- padding: 0px ${size2[1]};
10066
+ padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
9945
10067
  flex-grow: 1;
9946
- background-color: ${colors.gray[900]};
10068
+ border-radius: ${border.radius.xs};
10069
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
9947
10070
 
9948
10071
  &:hover {
9949
- background-color: ${colors.gray[800]};
10072
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
9950
10073
  }
9951
10074
  `,
9952
10075
  actionButton: u`
9953
10076
  background-color: transparent;
10077
+ color: ${t2(colors.gray[500], colors.gray[500])};
9954
10078
  border: none;
9955
10079
  display: inline-flex;
9956
10080
  padding: 0px;
@@ -9963,14 +10087,7 @@ var getStyles = () => {
9963
10087
  z-index: 1;
9964
10088
 
9965
10089
  &:hover svg {
9966
- .copier,
9967
- .list {
9968
- stroke: ${colors.gray[500]} !important;
9969
- }
9970
-
9971
- .list-item {
9972
- stroke: ${colors.gray[700]};
9973
- }
10090
+ color: ${t2(colors.gray[600], colors.gray[400])};
9974
10091
  }
9975
10092
 
9976
10093
  &:focus-visible {
@@ -9981,6 +10098,8 @@ var getStyles = () => {
9981
10098
  `
9982
10099
  };
9983
10100
  };
10101
+ var lightStyles = stylesFactory("light");
10102
+ var darkStyles = stylesFactory("dark");
9984
10103
  delegateEvents(["click"]);
9985
10104
 
9986
10105
  // src/fonts.ts
@@ -9992,7 +10111,7 @@ var loadFonts = () => {
9992
10111
  };
9993
10112
 
9994
10113
  // src/Devtools.tsx
9995
- var _tmpl$15 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
10114
+ var _tmpl$19 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
9996
10115
  var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
9997
10116
  var _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
9998
10117
  var _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
@@ -10002,22 +10121,27 @@ var _tmpl$73 = /* @__PURE__ */ template(`<span>Top`);
10002
10121
  var _tmpl$83 = /* @__PURE__ */ template(`<span>Bottom`);
10003
10122
  var _tmpl$93 = /* @__PURE__ */ template(`<span>Left`);
10004
10123
  var _tmpl$103 = /* @__PURE__ */ template(`<span>Right`);
10005
- 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">`);
10006
- var _tmpl$122 = /* @__PURE__ */ template(`<option>Sort by `);
10007
- var _tmpl$132 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
10008
- var _tmpl$142 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
10009
- var _tmpl$152 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
10010
- var _tmpl$16 = /* @__PURE__ */ template(`<span>`);
10011
- var _tmpl$17 = /* @__PURE__ */ template(`<button><span></span><span>`);
10012
- var _tmpl$18 = /* @__PURE__ */ template(`<button><span></span> Error`);
10013
- var _tmpl$19 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
10014
- 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">`);
10015
- var _tmpl$21 = /* @__PURE__ */ template(`<option>`);
10124
+ var _tmpl$113 = /* @__PURE__ */ template(`<span>Theme`);
10125
+ var _tmpl$122 = /* @__PURE__ */ template(`<span>Light`);
10126
+ var _tmpl$132 = /* @__PURE__ */ template(`<span>Dark`);
10127
+ var _tmpl$142 = /* @__PURE__ */ template(`<span>System`);
10128
+ 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">`);
10129
+ var _tmpl$162 = /* @__PURE__ */ template(`<option>Sort by `);
10130
+ var _tmpl$172 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
10131
+ var _tmpl$182 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
10132
+ var _tmpl$192 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
10133
+ var _tmpl$20 = /* @__PURE__ */ template(`<span>`);
10134
+ var _tmpl$21 = /* @__PURE__ */ template(`<button><span></span><span>`);
10135
+ var _tmpl$222 = /* @__PURE__ */ template(`<button><span></span> Error`);
10136
+ var _tmpl$232 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
10137
+ 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">`);
10138
+ var _tmpl$25 = /* @__PURE__ */ template(`<option>`);
10016
10139
  var firstBreakpoint = 1024;
10017
10140
  var secondBreakpoint = 796;
10018
10141
  var thirdBreakpoint = 700;
10019
10142
  var BUTTON_POSITION = "bottom-right";
10020
10143
  var POSITION = "bottom";
10144
+ var THEME_PREFERENCE = "system";
10021
10145
  var INITIAL_IS_OPEN = false;
10022
10146
  var DEFAULT_HEIGHT = 500;
10023
10147
  var DEFAULT_WIDTH = 500;
@@ -10026,33 +10150,51 @@ var DEFAULT_SORT_ORDER = 1;
10026
10150
  var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
10027
10151
  var [panelWidth, setPanelWidth] = createSignal(0);
10028
10152
  var DevtoolsComponent = (props) => {
10153
+ const [localStore, setLocalStore] = createLocalStorage({
10154
+ prefix: "TanstackQueryDevtools"
10155
+ });
10156
+ const colorScheme = getPreferredColorScheme();
10157
+ const theme = createMemo(() => {
10158
+ const preference = localStore.theme_preference || THEME_PREFERENCE;
10159
+ if (preference !== "system")
10160
+ return preference;
10161
+ return colorScheme();
10162
+ });
10029
10163
  return createComponent(QueryDevtoolsContext.Provider, {
10030
10164
  value: props,
10031
10165
  get children() {
10032
- return createComponent(Devtools, {});
10166
+ return createComponent(ThemeContext.Provider, {
10167
+ value: theme,
10168
+ get children() {
10169
+ return createComponent(Devtools, {
10170
+ localStore,
10171
+ setLocalStore
10172
+ });
10173
+ }
10174
+ });
10033
10175
  }
10034
10176
  });
10035
10177
  };
10036
10178
  var Devtools_default = DevtoolsComponent;
10037
- var Devtools = () => {
10179
+ var Devtools = (props) => {
10038
10180
  loadFonts();
10039
- const styles = getStyles2();
10040
- const [localStore, setLocalStore] = createLocalStorage({
10041
- prefix: "TanstackQueryDevtools"
10181
+ const theme = useTheme();
10182
+ const styles = createMemo(() => {
10183
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10042
10184
  });
10043
10185
  const buttonPosition = createMemo(() => {
10044
10186
  return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
10045
10187
  });
10046
10188
  const isOpen = createMemo(() => {
10047
- return localStore.open === "true" ? true : localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
10189
+ return props.localStore.open === "true" ? true : props.localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
10048
10190
  });
10049
10191
  const position = createMemo(() => {
10050
- return localStore.position || useQueryDevtoolsContext().position || POSITION;
10192
+ return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
10051
10193
  });
10052
10194
  createEffect(() => {
10053
10195
  const root = document.querySelector(".tsqd-parent-container");
10054
- const height = localStore.height || DEFAULT_HEIGHT;
10055
- const width = localStore.width || DEFAULT_WIDTH;
10196
+ const height = props.localStore.height || DEFAULT_HEIGHT;
10197
+ const width = props.localStore.width || DEFAULT_WIDTH;
10056
10198
  const panelPosition = position();
10057
10199
  root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
10058
10200
  root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
@@ -10068,8 +10210,12 @@ var Devtools = () => {
10068
10210
  },
10069
10211
  get children() {
10070
10212
  return createComponent(DevtoolsPanel, {
10071
- localStore,
10072
- setLocalStore
10213
+ get localStore() {
10214
+ return props.localStore;
10215
+ },
10216
+ get setLocalStore() {
10217
+ return props.setLocalStore;
10218
+ }
10073
10219
  });
10074
10220
  }
10075
10221
  });
@@ -10083,11 +10229,11 @@ var Devtools = () => {
10083
10229
  return !isOpen();
10084
10230
  },
10085
10231
  get children() {
10086
- const _el$2 = _tmpl$15(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
10232
+ const _el$2 = _tmpl$19(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
10087
10233
  insert(_el$3, createComponent(TanstackLogo, {}));
10088
- _el$4.$$click = () => setLocalStore("open", "true");
10234
+ _el$4.$$click = () => props.setLocalStore("open", "true");
10089
10235
  insert(_el$4, createComponent(TanstackLogo, {}));
10090
- createRenderEffect(() => className(_el$2, clsx(styles.devtoolsBtn, styles[`devtoolsBtn-position-${buttonPosition()}`])));
10236
+ createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
10091
10237
  return _el$2;
10092
10238
  }
10093
10239
  });
@@ -10118,7 +10264,10 @@ var Devtools = () => {
10118
10264
  })();
10119
10265
  };
10120
10266
  var DevtoolsPanel = (props) => {
10121
- const styles = getStyles2();
10267
+ const theme = useTheme();
10268
+ const styles = createMemo(() => {
10269
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10270
+ });
10122
10271
  const [isResizing, setIsResizing] = createSignal(false);
10123
10272
  const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
10124
10273
  const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
@@ -10227,8 +10376,24 @@ var DevtoolsPanel = (props) => {
10227
10376
  });
10228
10377
  });
10229
10378
  });
10379
+ const getPanelDynamicStyles = () => {
10380
+ const {
10381
+ colors
10382
+ } = tokens;
10383
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10384
+ if (panelWidth() < secondBreakpoint) {
10385
+ return u`
10386
+ flex-direction: column;
10387
+ background-color: ${t2(colors.gray[300], colors.gray[600])};
10388
+ `;
10389
+ }
10390
+ return u`
10391
+ flex-direction: row;
10392
+ background-color: ${t2(colors.gray[200], colors.darkGray[900])};
10393
+ `;
10394
+ };
10230
10395
  return (() => {
10231
- 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;
10396
+ 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;
10232
10397
  const _ref$ = panelRef;
10233
10398
  typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
10234
10399
  _el$6.$$mousedown = handleDragStart;
@@ -10244,10 +10409,10 @@ var DevtoolsPanel = (props) => {
10244
10409
  _el$17.$$input = (e2) => props.setLocalStore("filter", e2.currentTarget.value);
10245
10410
  _el$19.addEventListener("change", (e2) => props.setLocalStore("sort", e2.currentTarget.value));
10246
10411
  insert(_el$19, () => Object.keys(sortFns).map((key) => (() => {
10247
- const _el$34 = _tmpl$122(); _el$34.firstChild;
10248
- _el$34.value = key;
10249
- insert(_el$34, key, null);
10250
- return _el$34;
10412
+ const _el$38 = _tmpl$162(); _el$38.firstChild;
10413
+ _el$38.value = key;
10414
+ insert(_el$38, key, null);
10415
+ return _el$38;
10251
10416
  })()));
10252
10417
  insert(_el$18, createComponent(ChevronDown, {}), null);
10253
10418
  _el$20.$$click = () => {
@@ -10291,7 +10456,7 @@ var DevtoolsPanel = (props) => {
10291
10456
  get children() {
10292
10457
  return [createComponent(index$d.Trigger, {
10293
10458
  get ["class"]() {
10294
- return clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
10459
+ return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
10295
10460
  },
10296
10461
  get children() {
10297
10462
  return createComponent(Settings, {});
@@ -10300,12 +10465,12 @@ var DevtoolsPanel = (props) => {
10300
10465
  get children() {
10301
10466
  return createComponent(index$d.Content, {
10302
10467
  get ["class"]() {
10303
- return clsx(styles.settingsMenu, "tsqd-settings-menu");
10468
+ return clsx(styles().settingsMenu, "tsqd-settings-menu");
10304
10469
  },
10305
10470
  get children() {
10306
10471
  return [(() => {
10307
10472
  const _el$26 = _tmpl$53();
10308
- createRenderEffect(() => className(_el$26, clsx(styles.settingsMenuHeader, "tsqd-settings-menu-header")));
10473
+ createRenderEffect(() => className(_el$26, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
10309
10474
  return _el$26;
10310
10475
  })(), createComponent(index$d.Sub, {
10311
10476
  overlap: true,
@@ -10314,7 +10479,7 @@ var DevtoolsPanel = (props) => {
10314
10479
  get children() {
10315
10480
  return [createComponent(index$d.SubTrigger, {
10316
10481
  get ["class"]() {
10317
- return clsx(styles.settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10482
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10318
10483
  },
10319
10484
  get children() {
10320
10485
  return [_tmpl$63(), createComponent(ChevronDown, {})];
@@ -10323,7 +10488,7 @@ var DevtoolsPanel = (props) => {
10323
10488
  get children() {
10324
10489
  return createComponent(index$d.SubContent, {
10325
10490
  get ["class"]() {
10326
- return clsx(styles.settingsMenu, "tsqd-settings-submenu");
10491
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
10327
10492
  },
10328
10493
  get children() {
10329
10494
  return [createComponent(index$d.Item, {
@@ -10332,7 +10497,7 @@ var DevtoolsPanel = (props) => {
10332
10497
  },
10333
10498
  as: "button",
10334
10499
  get ["class"]() {
10335
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10500
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10336
10501
  },
10337
10502
  get children() {
10338
10503
  return [_tmpl$73(), createComponent(ArrowUp, {})];
@@ -10343,7 +10508,7 @@ var DevtoolsPanel = (props) => {
10343
10508
  },
10344
10509
  as: "button",
10345
10510
  get ["class"]() {
10346
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10511
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10347
10512
  },
10348
10513
  get children() {
10349
10514
  return [_tmpl$83(), createComponent(ArrowDown, {})];
@@ -10354,7 +10519,7 @@ var DevtoolsPanel = (props) => {
10354
10519
  },
10355
10520
  as: "button",
10356
10521
  get ["class"]() {
10357
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10522
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10358
10523
  },
10359
10524
  get children() {
10360
10525
  return [_tmpl$93(), createComponent(ArrowLeft, {})];
@@ -10365,7 +10530,7 @@ var DevtoolsPanel = (props) => {
10365
10530
  },
10366
10531
  as: "button",
10367
10532
  get ["class"]() {
10368
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
10533
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
10369
10534
  },
10370
10535
  get children() {
10371
10536
  return [_tmpl$103(), createComponent(ArrowRight, {})];
@@ -10376,6 +10541,64 @@ var DevtoolsPanel = (props) => {
10376
10541
  }
10377
10542
  })];
10378
10543
  }
10544
+ }), createComponent(index$d.Sub, {
10545
+ overlap: true,
10546
+ gutter: 8,
10547
+ shift: -4,
10548
+ get children() {
10549
+ return [createComponent(index$d.SubTrigger, {
10550
+ get ["class"]() {
10551
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10552
+ },
10553
+ get children() {
10554
+ return [_tmpl$113(), createComponent(ChevronDown, {})];
10555
+ }
10556
+ }), createComponent(index$d.Portal, {
10557
+ get children() {
10558
+ return createComponent(index$d.SubContent, {
10559
+ get ["class"]() {
10560
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
10561
+ },
10562
+ get children() {
10563
+ return [createComponent(index$d.Item, {
10564
+ onSelect: () => {
10565
+ props.setLocalStore("theme_preference", "light");
10566
+ },
10567
+ as: "button",
10568
+ get ["class"]() {
10569
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10570
+ },
10571
+ get children() {
10572
+ return [_tmpl$122(), createComponent(Sun, {})];
10573
+ }
10574
+ }), createComponent(index$d.Item, {
10575
+ onSelect: () => {
10576
+ props.setLocalStore("theme_preference", "dark");
10577
+ },
10578
+ as: "button",
10579
+ get ["class"]() {
10580
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10581
+ },
10582
+ get children() {
10583
+ return [_tmpl$132(), createComponent(Moon, {})];
10584
+ }
10585
+ }), createComponent(index$d.Item, {
10586
+ onSelect: () => {
10587
+ props.setLocalStore("theme_preference", "system");
10588
+ },
10589
+ as: "button",
10590
+ get ["class"]() {
10591
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10592
+ },
10593
+ get children() {
10594
+ return [_tmpl$142(), createComponent(Monitor, {})];
10595
+ }
10596
+ })];
10597
+ }
10598
+ });
10599
+ }
10600
+ })];
10601
+ }
10379
10602
  })];
10380
10603
  }
10381
10604
  });
@@ -10383,7 +10606,7 @@ var DevtoolsPanel = (props) => {
10383
10606
  })];
10384
10607
  }
10385
10608
  }), null);
10386
- insert(_el$33, createComponent(Key, {
10609
+ insert(_el$37, createComponent(Key, {
10387
10610
  by: (q) => q.queryHash,
10388
10611
  get each() {
10389
10612
  return queries();
@@ -10403,19 +10626,16 @@ var DevtoolsPanel = (props) => {
10403
10626
  }
10404
10627
  }), null);
10405
10628
  createRenderEffect((_p$) => {
10406
- const _v$ = clsx(styles.panel, styles[`panel-position-${position()}`], u`
10407
- flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
10408
- background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
10409
- `, {
10629
+ const _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
10410
10630
  [u`
10411
10631
  min-width: min-content;
10412
10632
  `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
10413
- }, "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`
10633
+ }, "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`
10414
10634
  height: 50%;
10415
10635
  max-height: 50%;
10416
- `, "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`
10636
+ `, "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`
10417
10637
  gap: ${tokens.size[2.5]};
10418
- `, "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");
10638
+ `, "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");
10419
10639
  _v$ !== _p$._v$ && className(_el$5, _p$._v$ = _v$);
10420
10640
  _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$5.style.setProperty("height", _v$2) : _el$5.style.removeProperty("height"));
10421
10641
  _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$5.style.setProperty("width", _v$3) : _el$5.style.removeProperty("width"));
@@ -10438,7 +10658,7 @@ var DevtoolsPanel = (props) => {
10438
10658
  _v$20 !== _p$._v$20 && setAttribute(_el$25, "aria-label", _p$._v$20 = _v$20);
10439
10659
  _v$21 !== _p$._v$21 && setAttribute(_el$25, "aria-pressed", _p$._v$21 = _v$21);
10440
10660
  _v$22 !== _p$._v$22 && setAttribute(_el$25, "title", _p$._v$22 = _v$22);
10441
- _v$23 !== _p$._v$23 && className(_el$32, _p$._v$23 = _v$23);
10661
+ _v$23 !== _p$._v$23 && className(_el$36, _p$._v$23 = _v$23);
10442
10662
  return _p$;
10443
10663
  }, {
10444
10664
  _v$: void 0,
@@ -10471,7 +10691,15 @@ var DevtoolsPanel = (props) => {
10471
10691
  })();
10472
10692
  };
10473
10693
  var QueryRow = (props) => {
10474
- const styles = getStyles2();
10694
+ const theme = useTheme();
10695
+ const styles = createMemo(() => {
10696
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10697
+ });
10698
+ const {
10699
+ colors,
10700
+ alpha
10701
+ } = tokens;
10702
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10475
10703
  const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
10476
10704
  queryKey: props.query.queryKey
10477
10705
  })?.state);
@@ -10489,41 +10717,47 @@ var QueryRow = (props) => {
10489
10717
  observerCount: observers(),
10490
10718
  isStale: isStale()
10491
10719
  }));
10720
+ const getObserverCountColorStyles = () => {
10721
+ if (color() === "gray") {
10722
+ return u`
10723
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
10724
+ color: ${t2(colors[color()][700], colors[color()][300])};
10725
+ `;
10726
+ }
10727
+ return u`
10728
+ background-color: ${t2(colors[color()][200] + alpha[80], colors[color()][900])};
10729
+ color: ${t2(colors[color()][800], colors[color()][300])};
10730
+ `;
10731
+ };
10492
10732
  return createComponent(Show, {
10493
10733
  get when() {
10494
10734
  return queryState();
10495
10735
  },
10496
10736
  get children() {
10497
- const _el$36 = _tmpl$142(), _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
10498
- _el$36.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
10499
- insert(_el$37, observers);
10500
- insert(_el$38, () => props.query.queryHash);
10501
- insert(_el$36, createComponent(Show, {
10737
+ const _el$40 = _tmpl$182(), _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling;
10738
+ _el$40.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
10739
+ insert(_el$41, observers);
10740
+ insert(_el$42, () => props.query.queryHash);
10741
+ insert(_el$40, createComponent(Show, {
10502
10742
  get when() {
10503
10743
  return isDisabled();
10504
10744
  },
10505
10745
  get children() {
10506
- return _tmpl$132();
10746
+ return _tmpl$172();
10507
10747
  }
10508
10748
  }), null);
10509
10749
  createRenderEffect((_p$) => {
10510
- 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`
10511
- background-color: ${tokens.colors[color()][700]};
10512
- color: ${tokens.colors[color()][300]};
10513
- ` : u`
10514
- background-color: ${tokens.colors[color()][900]};
10515
- color: ${tokens.colors[color()][300]};
10516
- `, "tsqd-query-observer-count");
10517
- _v$24 !== _p$._v$24 && className(_el$36, _p$._v$24 = _v$24);
10518
- _v$25 !== _p$._v$25 && setAttribute(_el$36, "aria-label", _p$._v$25 = _v$25);
10519
- _v$26 !== _p$._v$26 && className(_el$37, _p$._v$26 = _v$26);
10750
+ 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");
10751
+ _v$24 !== _p$._v$24 && className(_el$40, _p$._v$24 = _v$24);
10752
+ _v$25 !== _p$._v$25 && setAttribute(_el$40, "aria-label", _p$._v$25 = _v$25);
10753
+ _v$26 !== _p$._v$26 && className(_el$41, _p$._v$26 = _v$26);
10520
10754
  return _p$;
10521
10755
  }, {
10522
10756
  _v$24: void 0,
10523
10757
  _v$25: void 0,
10524
10758
  _v$26: void 0
10525
10759
  });
10526
- return _el$36;
10760
+ return _el$40;
10527
10761
  }
10528
10762
  });
10529
10763
  };
@@ -10533,50 +10767,61 @@ var QueryStatusCount = () => {
10533
10767
  const fetching = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "fetching").length);
10534
10768
  const paused = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "paused").length);
10535
10769
  const inactive = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length);
10536
- const styles = getStyles2();
10770
+ const theme = useTheme();
10771
+ const styles = createMemo(() => {
10772
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10773
+ });
10537
10774
  return (() => {
10538
- const _el$40 = _tmpl$23();
10539
- insert(_el$40, createComponent(QueryStatus, {
10775
+ const _el$44 = _tmpl$23();
10776
+ insert(_el$44, createComponent(QueryStatus, {
10540
10777
  label: "Fresh",
10541
10778
  color: "green",
10542
10779
  get count() {
10543
10780
  return fresh();
10544
10781
  }
10545
10782
  }), null);
10546
- insert(_el$40, createComponent(QueryStatus, {
10783
+ insert(_el$44, createComponent(QueryStatus, {
10547
10784
  label: "Fetching",
10548
10785
  color: "blue",
10549
10786
  get count() {
10550
10787
  return fetching();
10551
10788
  }
10552
10789
  }), null);
10553
- insert(_el$40, createComponent(QueryStatus, {
10790
+ insert(_el$44, createComponent(QueryStatus, {
10554
10791
  label: "Paused",
10555
10792
  color: "purple",
10556
10793
  get count() {
10557
10794
  return paused();
10558
10795
  }
10559
10796
  }), null);
10560
- insert(_el$40, createComponent(QueryStatus, {
10797
+ insert(_el$44, createComponent(QueryStatus, {
10561
10798
  label: "Stale",
10562
10799
  color: "yellow",
10563
10800
  get count() {
10564
10801
  return stale();
10565
10802
  }
10566
10803
  }), null);
10567
- insert(_el$40, createComponent(QueryStatus, {
10804
+ insert(_el$44, createComponent(QueryStatus, {
10568
10805
  label: "Inactive",
10569
10806
  color: "gray",
10570
10807
  get count() {
10571
10808
  return inactive();
10572
10809
  }
10573
10810
  }), null);
10574
- createRenderEffect(() => className(_el$40, clsx(styles.queryStatusContainer, "tsqd-query-status-container")));
10575
- return _el$40;
10811
+ createRenderEffect(() => className(_el$44, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
10812
+ return _el$44;
10576
10813
  })();
10577
10814
  };
10578
10815
  var QueryStatus = (props) => {
10579
- const styles = getStyles2();
10816
+ const theme = useTheme();
10817
+ const styles = createMemo(() => {
10818
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10819
+ });
10820
+ const {
10821
+ colors,
10822
+ alpha
10823
+ } = tokens;
10824
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10580
10825
  let tagRef;
10581
10826
  const [mouseOver, setMouseOver] = createSignal(false);
10582
10827
  const [focused, setFocused] = createSignal(false);
@@ -10592,78 +10837,83 @@ var QueryStatus = (props) => {
10592
10837
  return true;
10593
10838
  });
10594
10839
  return (() => {
10595
- const _el$41 = _tmpl$17(), _el$43 = _el$41.firstChild, _el$45 = _el$43.nextSibling;
10840
+ const _el$45 = _tmpl$21(), _el$47 = _el$45.firstChild, _el$49 = _el$47.nextSibling;
10596
10841
  const _ref$3 = tagRef;
10597
- typeof _ref$3 === "function" ? use(_ref$3, _el$41) : tagRef = _el$41;
10598
- _el$41.addEventListener("mouseleave", () => {
10842
+ typeof _ref$3 === "function" ? use(_ref$3, _el$45) : tagRef = _el$45;
10843
+ _el$45.addEventListener("mouseleave", () => {
10599
10844
  setMouseOver(false);
10600
10845
  setFocused(false);
10601
10846
  });
10602
- _el$41.addEventListener("mouseenter", () => setMouseOver(true));
10603
- _el$41.addEventListener("blur", () => setFocused(false));
10604
- _el$41.addEventListener("focus", () => setFocused(true));
10605
- spread(_el$41, mergeProps({
10847
+ _el$45.addEventListener("mouseenter", () => setMouseOver(true));
10848
+ _el$45.addEventListener("blur", () => setFocused(false));
10849
+ _el$45.addEventListener("focus", () => setFocused(true));
10850
+ spread(_el$45, mergeProps({
10606
10851
  get disabled() {
10607
10852
  return showLabel();
10608
10853
  },
10609
10854
  get ["class"]() {
10610
- return clsx(styles.queryStatusTag, !showLabel() && u`
10855
+ return clsx(styles().queryStatusTag, !showLabel() && u`
10611
10856
  cursor: pointer;
10612
10857
  &:hover {
10613
- background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
10858
+ background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
10614
10859
  }
10615
10860
  `, "tsqd-query-status-tag", `tsqd-query-status-tag-${props.label.toLowerCase()}`);
10616
10861
  }
10617
10862
  }, () => mouseOver() || focused() ? {
10618
10863
  "aria-describedby": "tsqd-status-tooltip"
10619
10864
  } : {}), false, true);
10620
- insert(_el$41, createComponent(Show, {
10865
+ insert(_el$45, createComponent(Show, {
10621
10866
  get when() {
10622
10867
  return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
10623
10868
  },
10624
10869
  get children() {
10625
- const _el$42 = _tmpl$152();
10626
- insert(_el$42, () => props.label);
10627
- createRenderEffect(() => className(_el$42, clsx(styles.statusTooltip, "tsqd-query-status-tooltip")));
10628
- return _el$42;
10870
+ const _el$46 = _tmpl$192();
10871
+ insert(_el$46, () => props.label);
10872
+ createRenderEffect(() => className(_el$46, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
10873
+ return _el$46;
10629
10874
  }
10630
- }), _el$43);
10631
- insert(_el$41, createComponent(Show, {
10875
+ }), _el$47);
10876
+ insert(_el$45, createComponent(Show, {
10632
10877
  get when() {
10633
10878
  return showLabel();
10634
10879
  },
10635
10880
  get children() {
10636
- const _el$44 = _tmpl$16();
10637
- insert(_el$44, () => props.label);
10638
- createRenderEffect(() => className(_el$44, clsx(styles.queryStatusTagLabel, "tsqd-query-status-tag-label")));
10639
- return _el$44;
10881
+ const _el$48 = _tmpl$20();
10882
+ insert(_el$48, () => props.label);
10883
+ createRenderEffect(() => className(_el$48, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
10884
+ return _el$48;
10640
10885
  }
10641
- }), _el$45);
10642
- insert(_el$45, () => props.count);
10886
+ }), _el$49);
10887
+ insert(_el$49, () => props.count);
10643
10888
  createRenderEffect((_p$) => {
10644
10889
  const _v$27 = clsx(u`
10645
10890
  width: ${tokens.size[1.5]};
10646
10891
  height: ${tokens.size[1.5]};
10647
10892
  border-radius: ${tokens.border.radius.full};
10648
10893
  background-color: ${tokens.colors[props.color][500]};
10649
- `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles.queryStatusCount, props.count > 0 && props.color !== "gray" ? u`
10650
- background-color: ${tokens.colors[props.color][900]};
10651
- color: ${tokens.colors[props.color][300]};
10652
- ` : u`
10653
- color: ${tokens.colors["gray"][400]};
10654
- `, "tsqd-query-status-tag-count");
10655
- _v$27 !== _p$._v$27 && className(_el$43, _p$._v$27 = _v$27);
10656
- _v$28 !== _p$._v$28 && className(_el$45, _p$._v$28 = _v$28);
10894
+ `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && u`
10895
+ background-color: ${t2(colors[props.color][100], colors[props.color][900])};
10896
+ color: ${t2(colors[props.color][700], colors[props.color][300])};
10897
+ `, "tsqd-query-status-tag-count");
10898
+ _v$27 !== _p$._v$27 && className(_el$47, _p$._v$27 = _v$27);
10899
+ _v$28 !== _p$._v$28 && className(_el$49, _p$._v$28 = _v$28);
10657
10900
  return _p$;
10658
10901
  }, {
10659
10902
  _v$27: void 0,
10660
10903
  _v$28: void 0
10661
10904
  });
10662
- return _el$41;
10905
+ return _el$45;
10663
10906
  })();
10664
10907
  };
10665
10908
  var QueryDetails = () => {
10666
- const styles = getStyles2();
10909
+ const theme = useTheme();
10910
+ const styles = createMemo(() => {
10911
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10912
+ });
10913
+ const {
10914
+ colors
10915
+ } = tokens;
10916
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10667
10917
  const queryClient = useQueryDevtoolsContext().client;
10668
10918
  const [restoringLoading, setRestoringLoading] = createSignal(false);
10669
10919
  const errorTypes = createMemo(() => {
@@ -10720,24 +10970,38 @@ var QueryDetails = () => {
10720
10970
  setRestoringLoading(false);
10721
10971
  }
10722
10972
  });
10973
+ const getQueryStatusColors = () => {
10974
+ if (color() === "gray") {
10975
+ return u`
10976
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
10977
+ color: ${t2(colors[color()][700], colors[color()][300])};
10978
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
10979
+ `;
10980
+ }
10981
+ return u`
10982
+ background-color: ${t2(colors[color()][100], colors[color()][900])};
10983
+ color: ${t2(colors[color()][700], colors[color()][300])};
10984
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
10985
+ `;
10986
+ };
10723
10987
  return createComponent(Show, {
10724
10988
  get when() {
10725
10989
  return createMemo(() => !!activeQuery())() && activeQueryState();
10726
10990
  },
10727
10991
  get children() {
10728
- 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;
10729
- insert(_el$51, () => displayValue(activeQuery().queryKey, true));
10730
- insert(_el$52, statusLabel);
10731
- insert(_el$55, observerCount);
10732
- insert(_el$58, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
10733
- _el$61.$$click = handleRefetch;
10734
- _el$63.$$click = () => queryClient.invalidateQueries(activeQuery());
10735
- _el$65.$$click = () => queryClient.resetQueries(activeQuery());
10736
- _el$67.$$click = () => {
10992
+ 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;
10993
+ insert(_el$55, () => displayValue(activeQuery().queryKey, true));
10994
+ insert(_el$56, statusLabel);
10995
+ insert(_el$59, observerCount);
10996
+ insert(_el$62, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
10997
+ _el$65.$$click = handleRefetch;
10998
+ _el$67.$$click = () => queryClient.invalidateQueries(activeQuery());
10999
+ _el$69.$$click = () => queryClient.resetQueries(activeQuery());
11000
+ _el$71.$$click = () => {
10737
11001
  queryClient.removeQueries(activeQuery());
10738
11002
  setSelectedQueryHash(null);
10739
11003
  };
10740
- _el$69.$$click = () => {
11004
+ _el$73.$$click = () => {
10741
11005
  if (activeQuery()?.state.data === void 0) {
10742
11006
  setRestoringLoading(true);
10743
11007
  restoreQueryAfterLoadingOrError();
@@ -10765,79 +11029,79 @@ var QueryDetails = () => {
10765
11029
  });
10766
11030
  }
10767
11031
  };
10768
- insert(_el$69, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$71);
10769
- insert(_el$60, createComponent(Show, {
11032
+ insert(_el$73, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$75);
11033
+ insert(_el$64, createComponent(Show, {
10770
11034
  get when() {
10771
11035
  return errorTypes().length === 0 || queryStatus() === "error";
10772
11036
  },
10773
11037
  get children() {
10774
- const _el$72 = _tmpl$18(), _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling;
10775
- _el$72.$$click = () => {
11038
+ const _el$76 = _tmpl$222(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
11039
+ _el$76.$$click = () => {
10776
11040
  if (!activeQuery().state.error) {
10777
11041
  triggerError();
10778
11042
  } else {
10779
11043
  queryClient.resetQueries(activeQuery());
10780
11044
  }
10781
11045
  };
10782
- insert(_el$72, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$74);
11046
+ insert(_el$76, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$78);
10783
11047
  createRenderEffect((_p$) => {
10784
11048
  const _v$29 = clsx(u`
10785
- color: ${tokens.colors.red[400]};
11049
+ color: ${t2(colors.red[500], colors.red[400])};
10786
11050
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$30 = queryStatus() === "pending", _v$31 = u`
10787
- background-color: ${tokens.colors.red[400]};
11051
+ background-color: ${t2(colors.red[500], colors.red[400])};
10788
11052
  `;
10789
- _v$29 !== _p$._v$29 && className(_el$72, _p$._v$29 = _v$29);
10790
- _v$30 !== _p$._v$30 && (_el$72.disabled = _p$._v$30 = _v$30);
10791
- _v$31 !== _p$._v$31 && className(_el$73, _p$._v$31 = _v$31);
11053
+ _v$29 !== _p$._v$29 && className(_el$76, _p$._v$29 = _v$29);
11054
+ _v$30 !== _p$._v$30 && (_el$76.disabled = _p$._v$30 = _v$30);
11055
+ _v$31 !== _p$._v$31 && className(_el$77, _p$._v$31 = _v$31);
10792
11056
  return _p$;
10793
11057
  }, {
10794
11058
  _v$29: void 0,
10795
11059
  _v$30: void 0,
10796
11060
  _v$31: void 0
10797
11061
  });
10798
- return _el$72;
11062
+ return _el$76;
10799
11063
  }
10800
11064
  }), null);
10801
- insert(_el$60, createComponent(Show, {
11065
+ insert(_el$64, createComponent(Show, {
10802
11066
  get when() {
10803
11067
  return !(errorTypes().length === 0 || queryStatus() === "error");
10804
11068
  },
10805
11069
  get children() {
10806
- const _el$75 = _tmpl$19(), _el$76 = _el$75.firstChild, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling; _el$78.firstChild;
10807
- _el$78.addEventListener("change", (e2) => {
10808
- const errorType = errorTypes().find((t2) => t2.name === e2.currentTarget.value);
11070
+ const _el$79 = _tmpl$232(), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling; _el$82.firstChild;
11071
+ _el$82.addEventListener("change", (e2) => {
11072
+ const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
10809
11073
  triggerError(errorType);
10810
11074
  });
10811
- insert(_el$78, createComponent(For, {
11075
+ insert(_el$82, createComponent(For, {
10812
11076
  get each() {
10813
11077
  return errorTypes();
10814
11078
  },
10815
11079
  children: (errorType) => (() => {
10816
- const _el$84 = _tmpl$21();
10817
- insert(_el$84, () => errorType.name);
10818
- createRenderEffect(() => _el$84.value = errorType.name);
10819
- return _el$84;
11080
+ const _el$88 = _tmpl$25();
11081
+ insert(_el$88, () => errorType.name);
11082
+ createRenderEffect(() => _el$88.value = errorType.name);
11083
+ return _el$88;
10820
11084
  })()
10821
11085
  }), null);
10822
- insert(_el$75, createComponent(ChevronDown, {}), null);
11086
+ insert(_el$79, createComponent(ChevronDown, {}), null);
10823
11087
  createRenderEffect((_p$) => {
10824
- const _v$32 = clsx(styles.actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
11088
+ const _v$32 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
10825
11089
  background-color: ${tokens.colors.red[400]};
10826
11090
  `, _v$34 = queryStatus() === "pending";
10827
- _v$32 !== _p$._v$32 && className(_el$75, _p$._v$32 = _v$32);
10828
- _v$33 !== _p$._v$33 && className(_el$76, _p$._v$33 = _v$33);
10829
- _v$34 !== _p$._v$34 && (_el$78.disabled = _p$._v$34 = _v$34);
11091
+ _v$32 !== _p$._v$32 && className(_el$79, _p$._v$32 = _v$32);
11092
+ _v$33 !== _p$._v$33 && className(_el$80, _p$._v$33 = _v$33);
11093
+ _v$34 !== _p$._v$34 && (_el$82.disabled = _p$._v$34 = _v$34);
10830
11094
  return _p$;
10831
11095
  }, {
10832
11096
  _v$32: void 0,
10833
11097
  _v$33: void 0,
10834
11098
  _v$34: void 0
10835
11099
  });
10836
- return _el$75;
11100
+ return _el$79;
10837
11101
  }
10838
11102
  }), null);
10839
- _el$81.style.setProperty("padding", "0.5rem");
10840
- insert(_el$81, createComponent(Explorer, {
11103
+ _el$85.style.setProperty("padding", "0.5rem");
11104
+ insert(_el$85, createComponent(Explorer, {
10841
11105
  label: "Data",
10842
11106
  defaultExpanded: ["Data"],
10843
11107
  get value() {
@@ -10848,8 +11112,8 @@ var QueryDetails = () => {
10848
11112
  return activeQuery();
10849
11113
  }
10850
11114
  }));
10851
- _el$83.style.setProperty("padding", "0.5rem");
10852
- insert(_el$83, createComponent(Explorer, {
11115
+ _el$87.style.setProperty("padding", "0.5rem");
11116
+ insert(_el$87, createComponent(Explorer, {
10853
11117
  label: "Query",
10854
11118
  defaultExpanded: ["Query", "queryKey"],
10855
11119
  get value() {
@@ -10857,58 +11121,50 @@ var QueryDetails = () => {
10857
11121
  }
10858
11122
  }));
10859
11123
  createRenderEffect((_p$) => {
10860
- 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`
10861
- background-color: ${tokens.colors[color()][700]};
10862
- color: ${tokens.colors[color()][300]};
10863
- border-color: ${tokens.colors[color()][600]};
10864
- ` : u`
10865
- background-color: ${tokens.colors[color()][900]};
10866
- color: ${tokens.colors[color()][300]};
10867
- border-color: ${tokens.colors[color()][600]};
10868
- `), _v$39 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles.actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
10869
- color: ${tokens.colors.blue[400]};
11124
+ 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`
11125
+ color: ${t2(colors.blue[600], colors.blue[400])};
10870
11126
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$42 = statusLabel() === "fetching", _v$43 = u`
10871
- background-color: ${tokens.colors.blue[400]};
11127
+ background-color: ${t2(colors.blue[600], colors.blue[400])};
10872
11128
  `, _v$44 = clsx(u`
10873
- color: ${tokens.colors.yellow[400]};
11129
+ color: ${t2(colors.yellow[600], colors.yellow[400])};
10874
11130
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$45 = queryStatus() === "pending", _v$46 = u`
10875
- background-color: ${tokens.colors.yellow[400]};
11131
+ background-color: ${t2(colors.yellow[600], colors.yellow[400])};
10876
11132
  `, _v$47 = clsx(u`
10877
- color: ${tokens.colors.gray[300]};
11133
+ color: ${t2(colors.gray[600], colors.gray[300])};
10878
11134
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$48 = queryStatus() === "pending", _v$49 = u`
10879
- background-color: ${tokens.colors.gray[400]};
11135
+ background-color: ${t2(colors.gray[600], colors.gray[400])};
10880
11136
  `, _v$50 = clsx(u`
10881
- color: ${tokens.colors.pink[400]};
11137
+ color: ${t2(colors.pink[500], colors.pink[400])};
10882
11138
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$51 = statusLabel() === "fetching", _v$52 = u`
10883
- background-color: ${tokens.colors.pink[400]};
11139
+ background-color: ${t2(colors.pink[500], colors.pink[400])};
10884
11140
  `, _v$53 = clsx(u`
10885
- color: ${tokens.colors.cyan[400]};
11141
+ color: ${t2(colors.cyan[500], colors.cyan[400])};
10886
11142
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$54 = restoringLoading(), _v$55 = u`
10887
- background-color: ${tokens.colors.cyan[400]};
10888
- `, _v$56 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles.detailsHeader, "tsqd-query-details-header");
10889
- _v$35 !== _p$._v$35 && className(_el$46, _p$._v$35 = _v$35);
10890
- _v$36 !== _p$._v$36 && className(_el$47, _p$._v$36 = _v$36);
10891
- _v$37 !== _p$._v$37 && className(_el$48, _p$._v$37 = _v$37);
10892
- _v$38 !== _p$._v$38 && className(_el$52, _p$._v$38 = _v$38);
10893
- _v$39 !== _p$._v$39 && className(_el$59, _p$._v$39 = _v$39);
10894
- _v$40 !== _p$._v$40 && className(_el$60, _p$._v$40 = _v$40);
10895
- _v$41 !== _p$._v$41 && className(_el$61, _p$._v$41 = _v$41);
10896
- _v$42 !== _p$._v$42 && (_el$61.disabled = _p$._v$42 = _v$42);
10897
- _v$43 !== _p$._v$43 && className(_el$62, _p$._v$43 = _v$43);
10898
- _v$44 !== _p$._v$44 && className(_el$63, _p$._v$44 = _v$44);
10899
- _v$45 !== _p$._v$45 && (_el$63.disabled = _p$._v$45 = _v$45);
10900
- _v$46 !== _p$._v$46 && className(_el$64, _p$._v$46 = _v$46);
10901
- _v$47 !== _p$._v$47 && className(_el$65, _p$._v$47 = _v$47);
10902
- _v$48 !== _p$._v$48 && (_el$65.disabled = _p$._v$48 = _v$48);
10903
- _v$49 !== _p$._v$49 && className(_el$66, _p$._v$49 = _v$49);
10904
- _v$50 !== _p$._v$50 && className(_el$67, _p$._v$50 = _v$50);
10905
- _v$51 !== _p$._v$51 && (_el$67.disabled = _p$._v$51 = _v$51);
10906
- _v$52 !== _p$._v$52 && className(_el$68, _p$._v$52 = _v$52);
10907
- _v$53 !== _p$._v$53 && className(_el$69, _p$._v$53 = _v$53);
10908
- _v$54 !== _p$._v$54 && (_el$69.disabled = _p$._v$54 = _v$54);
10909
- _v$55 !== _p$._v$55 && className(_el$70, _p$._v$55 = _v$55);
10910
- _v$56 !== _p$._v$56 && className(_el$80, _p$._v$56 = _v$56);
10911
- _v$57 !== _p$._v$57 && className(_el$82, _p$._v$57 = _v$57);
11143
+ background-color: ${t2(colors.cyan[500], colors.cyan[400])};
11144
+ `, _v$56 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles().detailsHeader, "tsqd-query-details-header");
11145
+ _v$35 !== _p$._v$35 && className(_el$50, _p$._v$35 = _v$35);
11146
+ _v$36 !== _p$._v$36 && className(_el$51, _p$._v$36 = _v$36);
11147
+ _v$37 !== _p$._v$37 && className(_el$52, _p$._v$37 = _v$37);
11148
+ _v$38 !== _p$._v$38 && className(_el$56, _p$._v$38 = _v$38);
11149
+ _v$39 !== _p$._v$39 && className(_el$63, _p$._v$39 = _v$39);
11150
+ _v$40 !== _p$._v$40 && className(_el$64, _p$._v$40 = _v$40);
11151
+ _v$41 !== _p$._v$41 && className(_el$65, _p$._v$41 = _v$41);
11152
+ _v$42 !== _p$._v$42 && (_el$65.disabled = _p$._v$42 = _v$42);
11153
+ _v$43 !== _p$._v$43 && className(_el$66, _p$._v$43 = _v$43);
11154
+ _v$44 !== _p$._v$44 && className(_el$67, _p$._v$44 = _v$44);
11155
+ _v$45 !== _p$._v$45 && (_el$67.disabled = _p$._v$45 = _v$45);
11156
+ _v$46 !== _p$._v$46 && className(_el$68, _p$._v$46 = _v$46);
11157
+ _v$47 !== _p$._v$47 && className(_el$69, _p$._v$47 = _v$47);
11158
+ _v$48 !== _p$._v$48 && (_el$69.disabled = _p$._v$48 = _v$48);
11159
+ _v$49 !== _p$._v$49 && className(_el$70, _p$._v$49 = _v$49);
11160
+ _v$50 !== _p$._v$50 && className(_el$71, _p$._v$50 = _v$50);
11161
+ _v$51 !== _p$._v$51 && (_el$71.disabled = _p$._v$51 = _v$51);
11162
+ _v$52 !== _p$._v$52 && className(_el$72, _p$._v$52 = _v$52);
11163
+ _v$53 !== _p$._v$53 && className(_el$73, _p$._v$53 = _v$53);
11164
+ _v$54 !== _p$._v$54 && (_el$73.disabled = _p$._v$54 = _v$54);
11165
+ _v$55 !== _p$._v$55 && className(_el$74, _p$._v$55 = _v$55);
11166
+ _v$56 !== _p$._v$56 && className(_el$84, _p$._v$56 = _v$56);
11167
+ _v$57 !== _p$._v$57 && className(_el$86, _p$._v$57 = _v$57);
10912
11168
  return _p$;
10913
11169
  }, {
10914
11170
  _v$35: void 0,
@@ -10935,7 +11191,7 @@ var QueryDetails = () => {
10935
11191
  _v$56: void 0,
10936
11192
  _v$57: void 0
10937
11193
  });
10938
- return _el$46;
11194
+ return _el$50;
10939
11195
  }
10940
11196
  });
10941
11197
  };
@@ -10975,7 +11231,7 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
10975
11231
  });
10976
11232
  return value;
10977
11233
  };
10978
- var getStyles2 = () => {
11234
+ var stylesFactory2 = (theme) => {
10979
11235
  const {
10980
11236
  colors,
10981
11237
  font,
@@ -10984,6 +11240,7 @@ var getStyles2 = () => {
10984
11240
  shadow,
10985
11241
  border
10986
11242
  } = tokens;
11243
+ const t2 = (light, dark) => theme === "light" ? light : dark;
10987
11244
  return {
10988
11245
  devtoolsBtn: u`
10989
11246
  z-index: 100000;
@@ -11045,8 +11302,6 @@ var getStyles2 = () => {
11045
11302
  display: flex;
11046
11303
  gap: ${tokens.size[0.5]};
11047
11304
  & * {
11048
- font-family: 'Inter', sans-serif;
11049
- color: ${colors.gray[300]};
11050
11305
  box-sizing: border-box;
11051
11306
  text-transform: none;
11052
11307
  }
@@ -11073,7 +11328,7 @@ var getStyles2 = () => {
11073
11328
  left: 0;
11074
11329
  max-height: 90%;
11075
11330
  min-height: 3.5rem;
11076
- border-bottom: ${colors.darkGray[300]} 1px solid;
11331
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11077
11332
  `,
11078
11333
  "panel-position-bottom": u`
11079
11334
  bottom: 0;
@@ -11081,20 +11336,20 @@ var getStyles2 = () => {
11081
11336
  left: 0;
11082
11337
  max-height: 90%;
11083
11338
  min-height: 3.5rem;
11084
- border-top: ${colors.darkGray[300]} 1px solid;
11339
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11085
11340
  `,
11086
11341
  "panel-position-right": u`
11087
11342
  bottom: 0;
11088
11343
  right: 0;
11089
11344
  top: 0;
11090
- border-left: ${colors.darkGray[300]} 1px solid;
11345
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11091
11346
  max-width: 90%;
11092
11347
  `,
11093
11348
  "panel-position-left": u`
11094
11349
  bottom: 0;
11095
11350
  left: 0;
11096
11351
  top: 0;
11097
- border-right: ${colors.darkGray[300]} 1px solid;
11352
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11098
11353
  max-width: 90%;
11099
11354
  `,
11100
11355
  closeBtn: u`
@@ -11105,13 +11360,15 @@ var getStyles2 = () => {
11105
11360
  align-items: center;
11106
11361
  justify-content: center;
11107
11362
  outline: none;
11363
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11108
11364
  &:hover {
11109
- background-color: ${colors.darkGray[500]};
11365
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11110
11366
  }
11111
11367
  &:focus-visible {
11112
11368
  outline: 2px solid ${colors.blue[600]};
11113
11369
  }
11114
11370
  & svg {
11371
+ color: ${t2(colors.gray[600], colors.gray[400])};
11115
11372
  width: ${size2[2]};
11116
11373
  height: ${size2[2]};
11117
11374
  }
@@ -11120,11 +11377,10 @@ var getStyles2 = () => {
11120
11377
  bottom: 0;
11121
11378
  right: ${size2[2]};
11122
11379
  transform: translate(0, 100%);
11123
- background-color: ${colors.darkGray[700]};
11124
- border-right: ${colors.darkGray[300]} 1px solid;
11125
- border-left: ${colors.darkGray[300]} 1px solid;
11380
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11381
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11126
11382
  border-top: none;
11127
- border-bottom: ${colors.darkGray[300]} 1px solid;
11383
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11128
11384
  border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
11129
11385
  padding: ${size2[0.5]} ${size2[1.5]} ${size2[1]} ${size2[1.5]};
11130
11386
 
@@ -11145,10 +11401,9 @@ var getStyles2 = () => {
11145
11401
  top: 0;
11146
11402
  right: ${size2[2]};
11147
11403
  transform: translate(0, -100%);
11148
- background-color: ${colors.darkGray[700]};
11149
- border-right: ${colors.darkGray[300]} 1px solid;
11150
- border-left: ${colors.darkGray[300]} 1px solid;
11151
- border-top: ${colors.darkGray[300]} 1px solid;
11404
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11405
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11406
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11152
11407
  border-bottom: none;
11153
11408
  border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
11154
11409
  padding: ${size2[1]} ${size2[1.5]} ${size2[0.5]} ${size2[1.5]};
@@ -11166,11 +11421,10 @@ var getStyles2 = () => {
11166
11421
  bottom: ${size2[2]};
11167
11422
  left: 0;
11168
11423
  transform: translate(-100%, 0);
11169
- background-color: ${colors.darkGray[700]};
11170
11424
  border-right: none;
11171
- border-left: ${colors.darkGray[300]} 1px solid;
11172
- border-top: ${colors.darkGray[300]} 1px solid;
11173
- border-bottom: ${colors.darkGray[300]} 1px solid;
11425
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11426
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11427
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11174
11428
  border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
11175
11429
  padding: ${size2[1.5]} ${size2[0.5]} ${size2[1.5]} ${size2[1]};
11176
11430
 
@@ -11190,11 +11444,10 @@ var getStyles2 = () => {
11190
11444
  bottom: ${size2[2]};
11191
11445
  right: 0;
11192
11446
  transform: translate(100%, 0);
11193
- background-color: ${colors.darkGray[700]};
11194
11447
  border-left: none;
11195
- border-right: ${colors.darkGray[300]} 1px solid;
11196
- border-top: ${colors.darkGray[300]} 1px solid;
11197
- border-bottom: ${colors.darkGray[300]} 1px solid;
11448
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11449
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11450
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11198
11451
  border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
11199
11452
  padding: ${size2[1.5]} ${size2[1]} ${size2[1.5]} ${size2[0.5]};
11200
11453
 
@@ -11212,15 +11465,18 @@ var getStyles2 = () => {
11212
11465
  `,
11213
11466
  queriesContainer: u`
11214
11467
  flex: 1 1 700px;
11215
- background-color: ${colors.darkGray[700]};
11468
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11216
11469
  display: flex;
11217
11470
  flex-direction: column;
11471
+ & * {
11472
+ font-family: 'Inter', sans-serif;
11473
+ }
11218
11474
  `,
11219
11475
  dragHandle: u`
11220
11476
  position: absolute;
11221
11477
  transition: background-color 0.125s ease;
11222
11478
  &:hover {
11223
- background-color: ${colors.purple[400]}${alpha[90]};
11479
+ background-color: ${colors.purple[400]}${t2("", alpha[90])};
11224
11480
  }
11225
11481
  z-index: 4;
11226
11482
  `,
@@ -11254,7 +11510,7 @@ var getStyles2 = () => {
11254
11510
  align-items: center;
11255
11511
  padding: ${tokens.size[2]} ${tokens.size[2.5]};
11256
11512
  gap: ${tokens.size[3]};
11257
- border-bottom: ${colors.darkGray[500]} 1px solid;
11513
+ border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
11258
11514
  align-items: center;
11259
11515
  & > button {
11260
11516
  padding: 0;
@@ -11281,11 +11537,15 @@ var getStyles2 = () => {
11281
11537
  font-weight: ${font.weight.bold};
11282
11538
  line-height: ${font.lineHeight.xs};
11283
11539
  white-space: nowrap;
11540
+ color: ${t2(colors.gray[600], colors.gray[300])};
11284
11541
  `,
11285
11542
  queryFlavorLogo: u`
11286
11543
  font-weight: ${font.weight.semibold};
11287
11544
  font-size: ${font.size.xs};
11288
- background: linear-gradient(to right, #dd524b, #e9a03b);
11545
+ background: linear-gradient(
11546
+ to right,
11547
+ ${t2("#ea4037, #ff9b11", "#dd524b, #e9a03b")}
11548
+ );
11289
11549
  background-clip: text;
11290
11550
  -webkit-background-clip: text;
11291
11551
  line-height: 1;
@@ -11300,14 +11560,17 @@ var getStyles2 = () => {
11300
11560
  queryStatusTag: u`
11301
11561
  display: flex;
11302
11562
  gap: ${tokens.size[1.5]};
11303
- background: ${colors.darkGray[500]};
11563
+ box-sizing: border-box;
11564
+ height: ${tokens.size[6.5]};
11565
+ background: ${t2(colors.gray[50], colors.darkGray[500])};
11566
+ color: ${t2(colors.gray[700], colors.gray[300])};
11304
11567
  border-radius: ${tokens.border.radius.sm};
11305
11568
  font-size: ${font.size.sm};
11306
11569
  padding: ${tokens.size[1]};
11307
- padding-left: ${tokens.size[2]};
11570
+ padding-left: ${tokens.size[1.5]};
11308
11571
  align-items: center;
11309
11572
  font-weight: ${font.weight.medium};
11310
- border: none;
11573
+ border: ${t2("1px solid " + colors.gray[300], "1px solid transparent")};
11311
11574
  user-select: none;
11312
11575
  position: relative;
11313
11576
  &:focus-visible {
@@ -11324,8 +11587,8 @@ var getStyles2 = () => {
11324
11587
  display: flex;
11325
11588
  align-items: center;
11326
11589
  justify-content: center;
11327
- color: ${colors.gray[400]};
11328
- background-color: ${colors.darkGray[300]};
11590
+ color: ${t2(colors.gray[500], colors.gray[400])};
11591
+ background-color: ${t2(colors.gray[200], colors.darkGray[300])};
11329
11592
  border-radius: 2px;
11330
11593
  font-variant-numeric: tabular-nums;
11331
11594
  height: ${tokens.size[4.5]};
@@ -11333,15 +11596,15 @@ var getStyles2 = () => {
11333
11596
  statusTooltip: u`
11334
11597
  position: absolute;
11335
11598
  z-index: 1;
11336
- background-color: ${colors.darkGray[500]};
11599
+ background-color: ${t2(colors.gray[50], colors.darkGray[500])};
11337
11600
  top: 100%;
11338
11601
  left: 50%;
11339
11602
  transform: translate(-50%, calc(${tokens.size[2]}));
11340
11603
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11341
- border-radius: ${tokens.border.radius.md};
11604
+ border-radius: ${tokens.border.radius.sm};
11342
11605
  font-size: ${font.size.xs};
11343
- border: 1px solid ${colors.gray[600]};
11344
- color: ${tokens.colors["gray"][300]};
11606
+ border: 1px solid ${t2(colors.gray[400], colors.gray[600])};
11607
+ color: ${t2(colors["gray"][600], colors["gray"][300])};
11345
11608
 
11346
11609
  &::before {
11347
11610
  top: 0px;
@@ -11350,7 +11613,8 @@ var getStyles2 = () => {
11350
11613
  left: 50%;
11351
11614
  transform: translate(-50%, -100%);
11352
11615
  position: absolute;
11353
- border-color: transparent transparent ${colors.gray[600]} transparent;
11616
+ border-color: transparent transparent
11617
+ ${t2(colors.gray[400], colors.gray[600])} transparent;
11354
11618
  border-style: solid;
11355
11619
  border-width: 7px;
11356
11620
  /* transform: rotate(180deg); */
@@ -11361,17 +11625,14 @@ var getStyles2 = () => {
11361
11625
  content: ' ';
11362
11626
  display: block;
11363
11627
  left: 50%;
11364
- transform: translate(-50%, calc(-100% + 2.5px));
11628
+ transform: translate(-50%, calc(-100% + 2px));
11365
11629
  position: absolute;
11366
- border-color: transparent transparent ${colors.darkGray[500]}
11367
- transparent;
11630
+ border-color: transparent transparent
11631
+ ${t2(colors.gray[100], colors.darkGray[500])} transparent;
11368
11632
  border-style: solid;
11369
11633
  border-width: 7px;
11370
11634
  }
11371
11635
  `,
11372
- selectedQueryRow: u`
11373
- background-color: ${colors.darkGray[500]};
11374
- `,
11375
11636
  filtersContainer: u`
11376
11637
  display: flex;
11377
11638
  gap: ${tokens.size[2]};
@@ -11380,47 +11641,52 @@ var getStyles2 = () => {
11380
11641
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11381
11642
  padding-right: ${tokens.size[1.5]};
11382
11643
  border-radius: ${tokens.border.radius.sm};
11383
- background-color: ${colors.darkGray[400]};
11644
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11645
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11646
+ color: ${t2(colors.gray[700], colors.gray[300])};
11384
11647
  font-size: ${font.size.xs};
11385
11648
  display: flex;
11386
11649
  align-items: center;
11387
11650
  line-height: ${font.lineHeight.sm};
11388
11651
  gap: ${tokens.size[1.5]};
11389
11652
  max-width: 160px;
11390
- border: 1px solid ${colors.darkGray[200]};
11391
11653
  &:focus-visible {
11392
11654
  outline-offset: 2px;
11393
11655
  border-radius: ${border.radius.xs};
11394
11656
  outline: 2px solid ${colors.blue[800]};
11395
11657
  }
11658
+ & svg {
11659
+ color: ${t2(colors.gray[500], colors.gray[400])};
11660
+ }
11396
11661
  }
11397
11662
  `,
11398
11663
  filterInput: u`
11399
- padding: ${tokens.size[0.5]} ${tokens.size[2]};
11664
+ padding: ${size2[0.5]} ${size2[2]};
11400
11665
  border-radius: ${tokens.border.radius.sm};
11401
- background-color: ${colors.darkGray[400]};
11666
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11402
11667
  display: flex;
11403
11668
  box-sizing: content-box;
11404
11669
  align-items: center;
11405
11670
  gap: ${tokens.size[1.5]};
11406
11671
  max-width: 160px;
11407
11672
  min-width: 100px;
11408
- border: 1px solid ${colors.darkGray[200]};
11673
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11409
11674
  height: min-content;
11675
+ color: ${t2(colors.gray[600], colors.gray[400])};
11410
11676
  & > svg {
11411
- width: ${tokens.size[3]};
11412
- height: ${tokens.size[3]};
11677
+ width: ${size2[3]};
11678
+ height: ${size2[3]};
11413
11679
  }
11414
11680
  & input {
11415
11681
  font-size: ${font.size.xs};
11416
11682
  width: 100%;
11417
- background-color: ${colors.darkGray[400]};
11683
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11418
11684
  border: none;
11419
11685
  padding: 0;
11420
11686
  line-height: ${font.lineHeight.sm};
11421
- color: ${colors.gray[300]};
11687
+ color: ${t2(colors.gray[700], colors.gray[300])};
11422
11688
  &::placeholder {
11423
- color: ${colors.gray[300]};
11689
+ color: ${t2(colors.gray[700], colors.gray[300])};
11424
11690
  }
11425
11691
  &:focus {
11426
11692
  outline: none;
@@ -11436,24 +11702,26 @@ var getStyles2 = () => {
11436
11702
  filterSelect: u`
11437
11703
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11438
11704
  border-radius: ${tokens.border.radius.sm};
11439
- background-color: ${colors.darkGray[400]};
11705
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11440
11706
  display: flex;
11441
11707
  align-items: center;
11442
11708
  gap: ${tokens.size[1.5]};
11443
11709
  box-sizing: content-box;
11444
11710
  max-width: 160px;
11445
- border: 1px solid ${colors.darkGray[200]};
11711
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11446
11712
  height: min-content;
11447
11713
  & > svg {
11714
+ color: ${t2(colors.gray[600], colors.gray[400])};
11448
11715
  width: ${tokens.size[2]};
11449
11716
  height: ${tokens.size[2]};
11450
11717
  }
11451
11718
  & > select {
11452
11719
  appearance: none;
11720
+ color: ${t2(colors.gray[700], colors.gray[300])};
11453
11721
  min-width: 100px;
11454
11722
  line-height: ${font.lineHeight.sm};
11455
11723
  font-size: ${font.size.xs};
11456
- background-color: ${colors.darkGray[400]};
11724
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11457
11725
  border: none;
11458
11726
  &:focus {
11459
11727
  outline: none;
@@ -11471,7 +11739,8 @@ var getStyles2 = () => {
11471
11739
  `,
11472
11740
  actionsBtn: u`
11473
11741
  border-radius: ${tokens.border.radius.sm};
11474
- background-color: ${colors.darkGray[400]};
11742
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11743
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11475
11744
  width: 1.625rem;
11476
11745
  height: 1.625rem;
11477
11746
  justify-content: center;
@@ -11479,13 +11748,13 @@ var getStyles2 = () => {
11479
11748
  align-items: center;
11480
11749
  gap: ${tokens.size[1.5]};
11481
11750
  max-width: 160px;
11482
- border: 1px solid ${colors.darkGray[200]};
11483
11751
  cursor: pointer;
11484
11752
  padding: 0;
11485
11753
  &:hover {
11486
- background-color: ${colors.darkGray[500]};
11754
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11487
11755
  }
11488
11756
  & svg {
11757
+ color: ${t2(colors.gray[700], colors.gray[300])};
11489
11758
  width: ${tokens.size[3]};
11490
11759
  height: ${tokens.size[3]};
11491
11760
  }
@@ -11495,6 +11764,12 @@ var getStyles2 = () => {
11495
11764
  outline: 2px solid ${colors.blue[800]};
11496
11765
  }
11497
11766
  `,
11767
+ actionsBtnOffline: u`
11768
+ & svg {
11769
+ stroke: ${t2(colors.yellow[700], colors.yellow[500])};
11770
+ fill: ${t2(colors.yellow[700], colors.yellow[500])};
11771
+ }
11772
+ `,
11498
11773
  overflowQueryContainer: u`
11499
11774
  flex: 1;
11500
11775
  overflow-y: auto;
@@ -11507,9 +11782,11 @@ var getStyles2 = () => {
11507
11782
  display: flex;
11508
11783
  align-items: center;
11509
11784
  padding: 0;
11510
- background-color: inherit;
11511
11785
  border: none;
11512
11786
  cursor: pointer;
11787
+ color: ${t2(colors.gray[700], colors.gray[300])};
11788
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11789
+ line-height: 1;
11513
11790
  &:focus {
11514
11791
  outline: none;
11515
11792
  }
@@ -11519,7 +11796,7 @@ var getStyles2 = () => {
11519
11796
  outline: 2px solid ${colors.blue[800]};
11520
11797
  }
11521
11798
  &:hover .tsqd-query-hash {
11522
- background-color: ${colors.darkGray[600]};
11799
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
11523
11800
  }
11524
11801
 
11525
11802
  & .tsqd-query-observer-count {
@@ -11534,7 +11811,7 @@ var getStyles2 = () => {
11534
11811
  font-weight: ${font.weight.medium};
11535
11812
  border-bottom-width: 1px;
11536
11813
  border-bottom-style: solid;
11537
- border-bottom: 1px solid ${colors.darkGray[700]};
11814
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[700])};
11538
11815
  }
11539
11816
  & .tsqd-query-hash {
11540
11817
  user-select: text;
@@ -11545,7 +11822,7 @@ var getStyles2 = () => {
11545
11822
  flex: 1;
11546
11823
  padding: ${tokens.size[1]} ${tokens.size[2]};
11547
11824
  font-family: 'Menlo', 'Fira Code', monospace;
11548
- border-bottom: 1px solid ${colors.darkGray[400]};
11825
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11549
11826
  text-align: left;
11550
11827
  text-overflow: clip;
11551
11828
  word-break: break-word;
@@ -11556,15 +11833,20 @@ var getStyles2 = () => {
11556
11833
  display: flex;
11557
11834
  align-items: center;
11558
11835
  padding: 0 ${tokens.size[2]};
11559
- color: ${colors.gray[300]};
11560
- background-color: ${colors.darkGray[600]};
11561
- border-bottom: 1px solid ${colors.darkGray[400]};
11836
+ color: ${t2(colors.gray[800], colors.gray[300])};
11837
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
11838
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11562
11839
  font-size: ${font.size.xs};
11563
11840
  }
11564
11841
  `,
11842
+ selectedQueryRow: u`
11843
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11844
+ `,
11565
11845
  detailsContainer: u`
11566
11846
  flex: 1 1 700px;
11567
- background-color: ${colors.darkGray[700]};
11847
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11848
+ color: ${t2(colors.gray[700], colors.gray[300])};
11849
+ font-family: 'Inter', sans-serif;
11568
11850
  display: flex;
11569
11851
  flex-direction: column;
11570
11852
  overflow-y: auto;
@@ -11572,10 +11854,11 @@ var getStyles2 = () => {
11572
11854
  text-align: left;
11573
11855
  `,
11574
11856
  detailsHeader: u`
11857
+ font-family: 'Inter', sans-serif;
11575
11858
  position: sticky;
11576
11859
  top: 0;
11577
11860
  z-index: 2;
11578
- background-color: ${colors.darkGray[600]};
11861
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
11579
11862
  padding: ${tokens.size[1.5]} ${tokens.size[2]};
11580
11863
  font-weight: ${font.weight.medium};
11581
11864
  font-size: ${font.size.xs};
@@ -11608,6 +11891,10 @@ var getStyles2 = () => {
11608
11891
  font-size: ${font.size.xs};
11609
11892
  line-height: ${font.lineHeight.xs};
11610
11893
  }
11894
+
11895
+ & pre {
11896
+ margin: 0;
11897
+ }
11611
11898
  `,
11612
11899
  queryDetailsStatus: u`
11613
11900
  border: 1px solid ${colors.darkGray[200]};
@@ -11622,12 +11909,13 @@ var getStyles2 = () => {
11622
11909
  gap: ${tokens.size[2]};
11623
11910
  padding: 0px ${tokens.size[2]};
11624
11911
  & > button {
11912
+ font-family: 'Inter', sans-serif;
11625
11913
  font-size: ${font.size.xs};
11626
11914
  padding: ${tokens.size[1]} ${tokens.size[2]};
11627
11915
  display: flex;
11628
11916
  border-radius: ${tokens.border.radius.sm};
11629
- border: 1px solid ${colors.darkGray[400]};
11630
- background-color: ${colors.darkGray[600]};
11917
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
11918
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11631
11919
  align-items: center;
11632
11920
  gap: ${tokens.size[2]};
11633
11921
  font-weight: ${font.weight.medium};
@@ -11639,7 +11927,7 @@ var getStyles2 = () => {
11639
11927
  outline: 2px solid ${colors.blue[800]};
11640
11928
  }
11641
11929
  &:hover {
11642
- background-color: ${colors.darkGray[500]};
11930
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11643
11931
  }
11644
11932
 
11645
11933
  &:disabled {
@@ -11660,17 +11948,17 @@ var getStyles2 = () => {
11660
11948
  display: flex;
11661
11949
  border-radius: ${tokens.border.radius.sm};
11662
11950
  overflow: hidden;
11663
- border: 1px solid ${colors.darkGray[400]};
11664
- background-color: ${colors.darkGray[600]};
11951
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
11952
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11665
11953
  align-items: center;
11666
11954
  gap: ${tokens.size[2]};
11667
11955
  font-weight: ${font.weight.medium};
11668
11956
  line-height: ${font.lineHeight.sm};
11669
- color: ${tokens.colors.red[400]};
11957
+ color: ${t2(colors.red[500], colors.red[400])};
11670
11958
  cursor: pointer;
11671
11959
  position: relative;
11672
11960
  &:hover {
11673
- background-color: ${colors.darkGray[500]};
11961
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11674
11962
  }
11675
11963
  & > span {
11676
11964
  width: ${size2[1.5]};
@@ -11711,10 +11999,10 @@ var getStyles2 = () => {
11711
11999
  flex-direction: column;
11712
12000
  gap: ${size2[0.5]};
11713
12001
  border-radius: ${tokens.border.radius.sm};
11714
- border: 1px solid ${colors.gray[700]};
11715
- background-color: ${colors.darkGray[600]};
12002
+ border: 1px solid ${t2(colors.gray[300], colors.gray[700])};
12003
+ background-color: ${t2(colors.gray[50], colors.darkGray[600])};
11716
12004
  font-size: ${font.size.xs};
11717
- color: ${colors.gray[300]};
12005
+ color: ${t2(colors.gray[700], colors.gray[300])};
11718
12006
  z-index: 99999;
11719
12007
  min-width: 120px;
11720
12008
  padding: ${size2[0.5]};
@@ -11724,17 +12012,19 @@ var getStyles2 = () => {
11724
12012
  align-items: center;
11725
12013
  justify-content: space-between;
11726
12014
  border-radius: ${tokens.border.radius.xs};
11727
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12015
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11728
12016
  cursor: pointer;
11729
12017
  background-color: transparent;
11730
12018
  border: none;
12019
+ color: ${t2(colors.gray[700], colors.gray[300])};
11731
12020
  & svg {
12021
+ color: ${t2(colors.gray[600], colors.gray[400])};
11732
12022
  transform: rotate(-90deg);
11733
12023
  width: ${tokens.size[2]};
11734
12024
  height: ${tokens.size[2]};
11735
12025
  }
11736
12026
  &:hover {
11737
- background-color: ${colors.darkGray[500]};
12027
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11738
12028
  }
11739
12029
  &:focus-visible {
11740
12030
  outline-offset: 2px;
@@ -11746,33 +12036,48 @@ var getStyles2 = () => {
11746
12036
  }
11747
12037
  `,
11748
12038
  settingsMenuHeader: u`
11749
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12039
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11750
12040
  font-weight: ${font.weight.medium};
11751
- border-bottom: 1px solid ${colors.darkGray[400]};
11752
- color: ${colors.gray[400]};
12041
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
12042
+ color: ${t2(colors.gray[500], colors.gray[400])};
11753
12043
  font-size: ${font.size["xs"]};
11754
12044
  `,
11755
12045
  settingsSubButton: u`
11756
12046
  display: flex;
11757
12047
  align-items: center;
11758
12048
  justify-content: space-between;
11759
- color: ${colors.gray[300]};
12049
+ color: ${t2(colors.gray[700], colors.gray[300])};
11760
12050
  font-size: ${font.size["xs"]};
11761
12051
  border-radius: ${tokens.border.radius.xs};
11762
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12052
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11763
12053
  cursor: pointer;
11764
12054
  background-color: transparent;
11765
12055
  border: none;
12056
+ & svg {
12057
+ color: ${t2(colors.gray[600], colors.gray[400])};
12058
+ }
11766
12059
  &:hover {
11767
- background-color: ${colors.darkGray[500]};
12060
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11768
12061
  }
11769
12062
  &:focus-visible {
11770
12063
  outline-offset: 2px;
11771
12064
  outline: 2px solid ${colors.blue[800]};
11772
12065
  }
12066
+ `,
12067
+ themeSelectedButton: u`
12068
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
12069
+ color: ${t2(colors.purple[700], colors.purple[300])};
12070
+ & svg {
12071
+ color: ${t2(colors.purple[700], colors.purple[300])};
12072
+ }
12073
+ &:hover {
12074
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
12075
+ }
11773
12076
  `
11774
12077
  };
11775
12078
  };
12079
+ var lightStyles2 = stylesFactory2("light");
12080
+ var darkStyles2 = stylesFactory2("dark");
11776
12081
  delegateEvents(["click", "mousedown", "input"]);
11777
12082
  /*! Bundled license information:
11778
12083