@tanstack/query-devtools 5.0.0-rc.1 → 5.0.0-rc.13

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, Index, useContext, template, use, untrack, useTransition, createRoot, splitProps, createUniqueId, Portal, addEventListener, Switch, Match, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/7MNJIXJ6.js';
1
+ import { createContext, delegateEvents, createSignal, createMemo, createComponent, createEffect, insert, Show, createRenderEffect, className, on, onMount, setAttribute, spread, mergeProps, For, onCleanup, isServer, $PROXY, $TRACK, getListener, batch, useContext, Index, template, use, untrack, useTransition, createRoot, splitProps, createUniqueId, Portal, addEventListener, Switch, Match, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/7MNJIXJ6.js';
2
2
 
3
3
  // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
4
4
  var characterMap = {
@@ -9244,20 +9244,118 @@ var sortFns = {
9244
9244
  var convertRemToPixels = (rem) => {
9245
9245
  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
9246
9246
  };
9247
+ var getPreferredColorScheme = () => {
9248
+ const [colorScheme, setColorScheme] = createSignal("dark");
9249
+ onMount(() => {
9250
+ const query = window.matchMedia("(prefers-color-scheme: dark)");
9251
+ setColorScheme(query.matches ? "dark" : "light");
9252
+ const listener = (e2) => {
9253
+ setColorScheme(e2.matches ? "dark" : "light");
9254
+ };
9255
+ query.addEventListener("change", listener);
9256
+ onCleanup(() => query.removeEventListener("change", listener));
9257
+ });
9258
+ return colorScheme;
9259
+ };
9260
+ var updateNestedDataByPath = (oldData, updatePath2, value) => {
9261
+ if (updatePath2.length === 0) {
9262
+ return value;
9263
+ }
9264
+ if (oldData instanceof Map) {
9265
+ const newData = new Map(oldData);
9266
+ if (updatePath2.length === 1) {
9267
+ newData.set(updatePath2[0], value);
9268
+ return newData;
9269
+ }
9270
+ const [head, ...tail] = updatePath2;
9271
+ newData.set(head, updateNestedDataByPath(newData.get(head), tail, value));
9272
+ return newData;
9273
+ }
9274
+ if (oldData instanceof Set) {
9275
+ const setAsArray = updateNestedDataByPath(Array.from(oldData), updatePath2, value);
9276
+ return new Set(setAsArray);
9277
+ }
9278
+ if (Array.isArray(oldData)) {
9279
+ const newData = [...oldData];
9280
+ if (updatePath2.length === 1) {
9281
+ newData[updatePath2[0]] = value;
9282
+ return newData;
9283
+ }
9284
+ const [head, ...tail] = updatePath2;
9285
+ newData[head] = updateNestedDataByPath(newData[head], tail, value);
9286
+ return newData;
9287
+ }
9288
+ if (oldData instanceof Object) {
9289
+ const newData = {
9290
+ ...oldData
9291
+ };
9292
+ if (updatePath2.length === 1) {
9293
+ newData[updatePath2[0]] = value;
9294
+ return newData;
9295
+ }
9296
+ const [head, ...tail] = updatePath2;
9297
+ newData[head] = updateNestedDataByPath(newData[head], tail, value);
9298
+ return newData;
9299
+ }
9300
+ return oldData;
9301
+ };
9302
+ var deleteNestedDataByPath = (oldData, deletePath) => {
9303
+ if (oldData instanceof Map) {
9304
+ const newData = new Map(oldData);
9305
+ if (deletePath.length === 1) {
9306
+ newData.delete(deletePath[0]);
9307
+ return newData;
9308
+ }
9309
+ const [head, ...tail] = deletePath;
9310
+ newData.set(head, deleteNestedDataByPath(newData.get(head), tail));
9311
+ return newData;
9312
+ }
9313
+ if (oldData instanceof Set) {
9314
+ const setAsArray = deleteNestedDataByPath(Array.from(oldData), deletePath);
9315
+ return new Set(setAsArray);
9316
+ }
9317
+ if (Array.isArray(oldData)) {
9318
+ const newData = [...oldData];
9319
+ if (deletePath.length === 1) {
9320
+ return newData.filter((_, idx) => idx.toString() !== deletePath[0]);
9321
+ }
9322
+ const [head, ...tail] = deletePath;
9323
+ newData[head] = deleteNestedDataByPath(newData[head], tail);
9324
+ return newData;
9325
+ }
9326
+ if (oldData instanceof Object) {
9327
+ const newData = {
9328
+ ...oldData
9329
+ };
9330
+ if (deletePath.length === 1) {
9331
+ delete newData[deletePath[0]];
9332
+ return newData;
9333
+ }
9334
+ const [head, ...tail] = deletePath;
9335
+ newData[head] = deleteNestedDataByPath(newData[head], tail);
9336
+ return newData;
9337
+ }
9338
+ return oldData;
9339
+ };
9247
9340
 
9248
9341
  // src/icons/index.tsx
9249
- 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">`);
9250
- 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">`);
9251
- 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">`);
9252
- 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">`);
9253
- 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">`);
9254
- 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">`);
9255
- 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">`);
9256
- 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">`);
9257
- 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">`);
9258
- 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">`);
9259
- 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">`);
9260
- var _tmpl$12 = /* @__PURE__ */ template(`<svg version="1.0" viewBox="0 0 633 633"><linearGradient id="a" x1="-666.45" x2="-666.45" y1="163.28" y2="163.99" gradientTransform="matrix(633 0 0 633 422177 -103358)" gradientUnits="userSpaceOnUse"><stop stop-color="#6BDAFF" offset="0"></stop><stop stop-color="#F9FFB5" offset=".32"></stop><stop stop-color="#FFA770" offset=".71"></stop><stop stop-color="#FF7373" offset="1"></stop></linearGradient><circle cx="316.5" cy="316.5" r="316.5" fill="url(#a)"></circle><defs><filter id="am" x="-137.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="b" x="-137.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#am)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#b)"><ellipse cx="89.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ah" x="316.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="k" x="316.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ah)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#k)"><ellipse cx="543.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ae" x="-137.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="j" x="-137.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ae)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#j)"><ellipse cx="89.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="ai" x="316.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="i" x="316.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ai)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#i)"><ellipse cx="543.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="aj" x="-137.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="h" x="-137.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#aj)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#h)"><ellipse cx="89.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="ag" x="316.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="g" x="316.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ag)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#g)"><ellipse cx="543.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="af" x="272.2" y="308" width="176.9" height="129.3" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="f" x="272.2" y="308" width="176.9" height="129.3" maskUnits="userSpaceOnUse"><g filter="url(#af)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#f)"><line x1="436" x2="431" y1="403.2" y2="431.8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="291" x2="280" y1="341.5" y2="403.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="332.9" x2="328.6" y1="384.1" y2="411.2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><linearGradient id="m" x1="-670.75" x2="-671.59" y1="164.4" y2="164.49" gradientTransform="matrix(-184.16 -32.472 -11.461 64.997 -121359 -32126)" gradientUnits="userSpaceOnUse"><stop stop-color="#EE2700" offset="0"></stop><stop stop-color="#FF008E" offset="1"></stop></linearGradient><path d="m344.1 363 97.7 17.2c5.8 2.1 8.2 6.1 7.1 12.1s-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1 0.8-12.8s8.3-4.4 13.7-2.1l55.2 53.6z" clip-rule="evenodd" fill="url(#m)" fill-rule="evenodd"></path><line x1="428.2" x2="429.1" y1="384.5" y2="378" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="395.2" x2="396.1" y1="379.5" y2="373" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="362.2" x2="363.1" y1="373.5" y2="367.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="324.2" x2="328.4" y1="351.3" y2="347.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="303.2" x2="307.4" y1="331.3" y2="327.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line></g><defs><filter id="ak" x="73.2" y="113.8" width="280.6" height="317.4" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="e" x="73.2" y="113.8" width="280.6" height="317.4" maskUnits="userSpaceOnUse"><g filter="url(#ak)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#e)"><linearGradient id="n" x1="-672.16" x2="-672.16" y1="165.03" y2="166.03" gradientTransform="matrix(-100.18 48.861 97.976 200.88 -83342 -93.059)" gradientUnits="userSpaceOnUse"><stop stop-color="#A17500" offset="0"></stop><stop stop-color="#5D2100" offset="1"></stop></linearGradient><path d="m192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.1-3 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6s-10.8-51.9-22.1-99.6l-25.3 4.6" clip-rule="evenodd" fill="url(#n)" fill-rule="evenodd"></path><g stroke="#2F8A00"><linearGradient id="r" x1="-660.23" x2="-660.23" y1="166.72" y2="167.72" gradientTransform="matrix(92.683 4.8573 -2.0259 38.657 61680 -3088.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z" clip-rule="evenodd" fill="url(#r)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="s" x1="-661.36" x2="-661.36" y1="164.18" y2="165.18" gradientTransform="matrix(110 5.7648 -6.3599 121.35 73933 -15933)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.4 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20.2 49.6-53.2 49.6-53.2z" clip-rule="evenodd" fill="url(#s)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="q" x1="-656.79" x2="-656.79" y1="165.15" y2="166.15" gradientTransform="matrix(62.954 3.2993 -3.5023 66.828 42156 -8754.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9c-0.8-21.9 6-38 20.6-48.2s29.8-15.4 45.5-15.3c-6.1 21.4-14.5 35.8-25.2 43.4s-24.4 14.2-40.9 20.1z" clip-rule="evenodd" fill="url(#q)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="p" x1="-663.07" x2="-663.07" y1="165.44" y2="166.44" gradientTransform="matrix(152.47 7.9907 -3.0936 59.029 101884 -4318.7)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c31.9-30 64.1-39.7 96.7-29s50.8 30.4 54.6 59.1c-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z" clip-rule="evenodd" fill="url(#p)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="o" x1="-662.57" x2="-662.57" y1="164.44" y2="165.44" gradientTransform="matrix(136.46 7.1517 -5.2163 99.533 91536 -11442)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c35.8-7.6 65.6-0.2 89.2 22s37.7 49 42.3 80.3c-39.8-9.7-68.3-23.8-85.5-42.4s-32.5-38.5-46-59.9z" clip-rule="evenodd" fill="url(#o)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="l" x1="-656.43" x2="-656.43" y1="163.86" y2="164.86" gradientTransform="matrix(60.866 3.1899 -8.7773 167.48 41560 -25168)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6s-3.6 63.1 8.7 99.6c27.4-40.3 43.2-69.6 47.4-88s5.6-44.1 4-77.2z" clip-rule="evenodd" fill="url(#l)" fill-rule="evenodd" stroke-width="13"></path><path d="m196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4s-9.5 33-11.1 45.1" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m194.9 185.7c-24.4 1.7-43.8 9-58.1 21.8s-24.7 25.4-31.3 37.8" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m204.5 176.4c29.7-6.7 52-8.4 67-5.1s26.9 8.6 35.8 15.9" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m196.5 181.4c20.3 9.9 38.2 20.5 53.9 31.9s27.4 22.1 35.1 32" fill="none" stroke-linecap="round" stroke-width="8"></path></g></g><defs><filter id="al" x="50.5" y="399" width="532" height="633" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="d" x="50.5" y="399" width="532" height="633" maskUnits="userSpaceOnUse"><g filter="url(#al)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#d)"><linearGradient id="u" x1="-666.06" x2="-666.23" y1="163.36" y2="163.75" gradientTransform="matrix(532 0 0 633 354760 -102959)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF400" offset="0"></stop><stop stop-color="#3C8700" offset="1"></stop></linearGradient><ellipse cx="316.5" cy="715.5" rx="266" ry="316.5" fill="url(#u)"></ellipse></g><defs><filter id="ad" x="391" y="-24" width="288" height="283" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="c" x="391" y="-24" width="288" height="283" maskUnits="userSpaceOnUse"><g filter="url(#ad)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#c)"><linearGradient id="t" x1="-664.56" x2="-664.56" y1="163.79" y2="164.79" gradientTransform="matrix(227 0 0 227 151421 -37204)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDF00" offset="0"></stop><stop stop-color="#FF9D00" offset="1"></stop></linearGradient><circle cx="565.5" cy="89.5" r="113.5" fill="url(#t)"></circle><linearGradient id="v" x1="-644.5" x2="-645.77" y1="342" y2="342" gradientTransform="matrix(30 0 0 1 19770 -253)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="427" x2="397" y1="89" y2="89" fill="none" stroke="url(#v)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="aa" x1="-641.56" x2="-642.83" y1="196.02" y2="196.07" gradientTransform="matrix(26.5 0 0 5.5 17439 -1025.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="430.5" x2="404" y1="55.5" y2="50" fill="none" stroke="url(#aa)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="w" x1="-643.73" x2="-645" y1="185.83" y2="185.9" gradientTransform="matrix(29 0 0 8 19107 -1361)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="431" x2="402" y1="122" y2="130" fill="none" stroke="url(#w)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ac" x1="-638.94" x2="-640.22" y1="177.09" y2="177.39" gradientTransform="matrix(24 0 0 13 15783 -2145)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="442" x2="418" y1="153" y2="166" fill="none" stroke="url(#ac)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ab" x1="-633.42" x2="-634.7" y1="172.41" y2="173.31" gradientTransform="matrix(20 0 0 19 13137 -3096)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="464" x2="444" y1="180" y2="199" fill="none" stroke="url(#ab)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="y" x1="-619.05" x2="-619.52" y1="170.82" y2="171.82" gradientTransform="matrix(13.83 0 0 22.85 9050 -3703.4)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="491.4" x2="477.5" y1="203" y2="225.9" fill="none" stroke="url(#y)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="x" x1="-578.5" x2="-578.63" y1="170.31" y2="171.31" gradientTransform="matrix(7.5 0 0 24.5 4860 -3953)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="524.5" x2="517" y1="219.5" y2="244" fill="none" stroke="url(#x)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="z" x1="666.5" x2="666.5" y1="170.31" y2="171.31" gradientTransform="matrix(.5 0 0 24.5 231.5 -3944)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="564.5" x2="565" y1="228.5" y2="253" fill="none" stroke="url(#z)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12">`);
9342
+ var _tmpl$ = /* @__PURE__ */ template(`<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 13L9.00007 9M10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9343
+ var _tmpl$2 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9344
+ var _tmpl$3 = /* @__PURE__ */ template(`<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9345
+ var _tmpl$4 = /* @__PURE__ */ template(`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 13.3333V2.66667M8 2.66667L4 6.66667M8 2.66667L12 6.66667" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9346
+ var _tmpl$5 = /* @__PURE__ */ template(`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round">`);
9347
+ var _tmpl$6 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="12" width="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2v2m0 16v2M4 12H2m4.314-5.686L4.9 4.9m12.786 1.414L19.1 4.9M6.314 17.69 4.9 19.104m12.786-1.414 1.414 1.414M22 12h-2m-3 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9348
+ var _tmpl$7 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="12" width="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 15.844a10.424 10.424 0 0 1-4.306.925c-5.779 0-10.463-4.684-10.463-10.462 0-1.536.33-2.994.925-4.307A10.464 10.464 0 0 0 2 11.538C2 17.316 6.684 22 12.462 22c4.243 0 7.896-2.526 9.538-6.156Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9349
+ var _tmpl$8 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="12" width="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 21h8m-4-4v4m-5.2-4h10.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C22 14.72 22 13.88 22 12.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C19.72 3 18.88 3 17.2 3H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 5.28 2 6.12 2 7.8v4.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 17 5.12 17 6.8 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9350
+ var _tmpl$9 = /* @__PURE__ */ template(`<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.237 4.237 0 00-6 0zm-4-4l2 2a7.074 7.074 0 0110 0l2-2C15.14 9.14 8.87 9.14 5 13z">`);
9351
+ var _tmpl$10 = /* @__PURE__ */ template(`<svg stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z"></path><path d="M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4a9.793 9.793 0 00-4.49-2.56l3.53 3.53.96-.97zM2 3.05L5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24A9.684 9.684 0 005 13v.01L6.99 15a7.042 7.042 0 014.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3a4.237 4.237 0 00-6 0z">`);
9352
+ var _tmpl$11 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.3951 19.3711L9.97955 20.6856C10.1533 21.0768 10.4368 21.4093 10.7958 21.6426C11.1547 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8488 21.8759 13.2078 21.6426C13.5667 21.4093 13.8503 21.0768 14.024 20.6856L14.6084 19.3711C14.8165 18.9047 15.1664 18.5159 15.6084 18.26C16.0532 18.0034 16.5678 17.8941 17.0784 17.9478L18.5084 18.1C18.9341 18.145 19.3637 18.0656 19.7451 17.8713C20.1265 17.6771 20.4434 17.3763 20.6573 17.0056C20.8715 16.635 20.9735 16.2103 20.9511 15.7829C20.9286 15.3555 20.7825 14.9438 20.5307 14.5978L19.684 13.4344C19.3825 13.0171 19.2214 12.5148 19.224 12C19.2239 11.4866 19.3865 10.9864 19.6884 10.5711L20.5351 9.40778C20.787 9.06175 20.933 8.65007 20.9555 8.22267C20.978 7.79528 20.8759 7.37054 20.6618 7C20.4479 6.62923 20.131 6.32849 19.7496 6.13423C19.3681 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5722 6.11141 16.0577 6.00212 15.6129 5.74556C15.17 5.48825 14.82 5.09736 14.6129 4.62889L14.024 3.31444C13.8503 2.92317 13.5667 2.59072 13.2078 2.3574C12.8488 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1547 2.12408 10.7958 2.3574C10.4368 2.59072 10.1533 2.92317 9.97955 3.31444L9.3951 4.62889C9.18803 5.09736 8.83798 5.48825 8.3951 5.74556C7.95032 6.00212 7.43577 6.11141 6.9251 6.05778L5.49066 5.90556C5.06499 5.86053 4.6354 5.93997 4.25397 6.13423C3.87255 6.32849 3.55567 6.62923 3.34177 7C3.12759 7.37054 3.02555 7.79528 3.04804 8.22267C3.07052 8.65007 3.21656 9.06175 3.46844 9.40778L4.3151 10.5711C4.61704 10.9864 4.77964 11.4866 4.77955 12C4.77964 12.5134 4.61704 13.0137 4.3151 13.4289L3.46844 14.5922C3.21656 14.9382 3.07052 15.3499 3.04804 15.7773C3.02555 16.2047 3.12759 16.6295 3.34177 17C3.55589 17.3706 3.8728 17.6712 4.25417 17.8654C4.63554 18.0596 5.06502 18.1392 5.49066 18.0944L6.92066 17.9422C7.43133 17.8886 7.94587 17.9979 8.39066 18.2544C8.83519 18.511 9.18687 18.902 9.3951 19.3711Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15C13.6568 15 15 13.6569 15 12C15 10.3431 13.6568 9 12 9C10.3431 9 8.99998 10.3431 8.99998 12C8.99998 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9353
+ var _tmpl$12 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="copier" d="M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor">`);
9354
+ var _tmpl$13 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9355
+ var _tmpl$14 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke="#F04438" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9356
+ var _tmpl$15 = /* @__PURE__ */ template(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><rect class="list" width="20" height="20" y="2" x="2" rx="2"></rect><line class="list-item" y1="7" y2="7" x1="6" x2="18"></line><line class="list-item" y2="12" y1="12" x1="6" x2="18"></line><line class="list-item" y1="17" y2="17" x1="6" x2="18">`);
9357
+ var _tmpl$16 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24" height="20" width="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9358
+ var _tmpl$17 = /* @__PURE__ */ template(`<svg version="1.0" viewBox="0 0 633 633"><linearGradient id="a" x1="-666.45" x2="-666.45" y1="163.28" y2="163.99" gradientTransform="matrix(633 0 0 633 422177 -103358)" gradientUnits="userSpaceOnUse"><stop stop-color="#6BDAFF" offset="0"></stop><stop stop-color="#F9FFB5" offset=".32"></stop><stop stop-color="#FFA770" offset=".71"></stop><stop stop-color="#FF7373" offset="1"></stop></linearGradient><circle cx="316.5" cy="316.5" r="316.5" fill="url(#a)"></circle><defs><filter id="am" x="-137.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="b" x="-137.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#am)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#b)"><ellipse cx="89.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ah" x="316.5" y="412" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="k" x="316.5" y="412" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ah)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#k)"><ellipse cx="543.5" cy="610.5" rx="214.5" ry="186" fill="#015064" stroke="#00CFE2" stroke-width="25"></ellipse></g><defs><filter id="ae" x="-137.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="j" x="-137.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ae)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#j)"><ellipse cx="89.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="ai" x="316.5" y="450" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="i" x="316.5" y="450" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ai)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#i)"><ellipse cx="543.5" cy="648.5" rx="214.5" ry="186" fill="#015064" stroke="#00A8B8" stroke-width="25"></ellipse></g><defs><filter id="aj" x="-137.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="h" x="-137.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#aj)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#h)"><ellipse cx="89.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="ag" x="316.5" y="486" width="454" height="396.9" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="g" x="316.5" y="486" width="454" height="396.9" maskUnits="userSpaceOnUse"><g filter="url(#ag)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#g)"><ellipse cx="543.5" cy="684.5" rx="214.5" ry="186" fill="#015064" stroke="#007782" stroke-width="25"></ellipse></g><defs><filter id="af" x="272.2" y="308" width="176.9" height="129.3" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="f" x="272.2" y="308" width="176.9" height="129.3" maskUnits="userSpaceOnUse"><g filter="url(#af)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#f)"><line x1="436" x2="431" y1="403.2" y2="431.8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="291" x2="280" y1="341.5" y2="403.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><line x1="332.9" x2="328.6" y1="384.1" y2="411.2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="11"></line><linearGradient id="m" x1="-670.75" x2="-671.59" y1="164.4" y2="164.49" gradientTransform="matrix(-184.16 -32.472 -11.461 64.997 -121359 -32126)" gradientUnits="userSpaceOnUse"><stop stop-color="#EE2700" offset="0"></stop><stop stop-color="#FF008E" offset="1"></stop></linearGradient><path d="m344.1 363 97.7 17.2c5.8 2.1 8.2 6.1 7.1 12.1s-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1 0.8-12.8s8.3-4.4 13.7-2.1l55.2 53.6z" clip-rule="evenodd" fill="url(#m)" fill-rule="evenodd"></path><line x1="428.2" x2="429.1" y1="384.5" y2="378" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="395.2" x2="396.1" y1="379.5" y2="373" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="362.2" x2="363.1" y1="373.5" y2="367.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="324.2" x2="328.4" y1="351.3" y2="347.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line><line x1="303.2" x2="307.4" y1="331.3" y2="327.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="7"></line></g><defs><filter id="ak" x="73.2" y="113.8" width="280.6" height="317.4" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="e" x="73.2" y="113.8" width="280.6" height="317.4" maskUnits="userSpaceOnUse"><g filter="url(#ak)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#e)"><linearGradient id="n" x1="-672.16" x2="-672.16" y1="165.03" y2="166.03" gradientTransform="matrix(-100.18 48.861 97.976 200.88 -83342 -93.059)" gradientUnits="userSpaceOnUse"><stop stop-color="#A17500" offset="0"></stop><stop stop-color="#5D2100" offset="1"></stop></linearGradient><path d="m192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.1-3 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6s-10.8-51.9-22.1-99.6l-25.3 4.6" clip-rule="evenodd" fill="url(#n)" fill-rule="evenodd"></path><g stroke="#2F8A00"><linearGradient id="r" x1="-660.23" x2="-660.23" y1="166.72" y2="167.72" gradientTransform="matrix(92.683 4.8573 -2.0259 38.657 61680 -3088.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z" clip-rule="evenodd" fill="url(#r)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="s" x1="-661.36" x2="-661.36" y1="164.18" y2="165.18" gradientTransform="matrix(110 5.7648 -6.3599 121.35 73933 -15933)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.4 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20.2 49.6-53.2 49.6-53.2z" clip-rule="evenodd" fill="url(#s)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="q" x1="-656.79" x2="-656.79" y1="165.15" y2="166.15" gradientTransform="matrix(62.954 3.2993 -3.5023 66.828 42156 -8754.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m195 183.9c-0.8-21.9 6-38 20.6-48.2s29.8-15.4 45.5-15.3c-6.1 21.4-14.5 35.8-25.2 43.4s-24.4 14.2-40.9 20.1z" clip-rule="evenodd" fill="url(#q)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="p" x1="-663.07" x2="-663.07" y1="165.44" y2="166.44" gradientTransform="matrix(152.47 7.9907 -3.0936 59.029 101884 -4318.7)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c31.9-30 64.1-39.7 96.7-29s50.8 30.4 54.6 59.1c-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z" clip-rule="evenodd" fill="url(#p)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="o" x1="-662.57" x2="-662.57" y1="164.44" y2="165.44" gradientTransform="matrix(136.46 7.1517 -5.2163 99.533 91536 -11442)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c35.8-7.6 65.6-0.2 89.2 22s37.7 49 42.3 80.3c-39.8-9.7-68.3-23.8-85.5-42.4s-32.5-38.5-46-59.9z" clip-rule="evenodd" fill="url(#o)" fill-rule="evenodd" stroke-width="13"></path><linearGradient id="l" x1="-656.43" x2="-656.43" y1="163.86" y2="164.86" gradientTransform="matrix(60.866 3.1899 -8.7773 167.48 41560 -25168)" gradientUnits="userSpaceOnUse"><stop stop-color="#2F8A00" offset="0"></stop><stop stop-color="#90FF57" offset="1"></stop></linearGradient><path d="m194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6s-3.6 63.1 8.7 99.6c27.4-40.3 43.2-69.6 47.4-88s5.6-44.1 4-77.2z" clip-rule="evenodd" fill="url(#l)" fill-rule="evenodd" stroke-width="13"></path><path d="m196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4s-9.5 33-11.1 45.1" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m194.9 185.7c-24.4 1.7-43.8 9-58.1 21.8s-24.7 25.4-31.3 37.8" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m204.5 176.4c29.7-6.7 52-8.4 67-5.1s26.9 8.6 35.8 15.9" fill="none" stroke-linecap="round" stroke-width="8"></path><path d="m196.5 181.4c20.3 9.9 38.2 20.5 53.9 31.9s27.4 22.1 35.1 32" fill="none" stroke-linecap="round" stroke-width="8"></path></g></g><defs><filter id="al" x="50.5" y="399" width="532" height="633" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="d" x="50.5" y="399" width="532" height="633" maskUnits="userSpaceOnUse"><g filter="url(#al)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#d)"><linearGradient id="u" x1="-666.06" x2="-666.23" y1="163.36" y2="163.75" gradientTransform="matrix(532 0 0 633 354760 -102959)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF400" offset="0"></stop><stop stop-color="#3C8700" offset="1"></stop></linearGradient><ellipse cx="316.5" cy="715.5" rx="266" ry="316.5" fill="url(#u)"></ellipse></g><defs><filter id="ad" x="391" y="-24" width="288" height="283" filterUnits="userSpaceOnUse"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask id="c" x="391" y="-24" width="288" height="283" maskUnits="userSpaceOnUse"><g filter="url(#ad)"><circle cx="316.5" cy="316.5" r="316.5" fill="#fff"></circle></g></mask><g mask="url(#c)"><linearGradient id="t" x1="-664.56" x2="-664.56" y1="163.79" y2="164.79" gradientTransform="matrix(227 0 0 227 151421 -37204)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDF00" offset="0"></stop><stop stop-color="#FF9D00" offset="1"></stop></linearGradient><circle cx="565.5" cy="89.5" r="113.5" fill="url(#t)"></circle><linearGradient id="v" x1="-644.5" x2="-645.77" y1="342" y2="342" gradientTransform="matrix(30 0 0 1 19770 -253)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="427" x2="397" y1="89" y2="89" fill="none" stroke="url(#v)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="aa" x1="-641.56" x2="-642.83" y1="196.02" y2="196.07" gradientTransform="matrix(26.5 0 0 5.5 17439 -1025.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="430.5" x2="404" y1="55.5" y2="50" fill="none" stroke="url(#aa)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="w" x1="-643.73" x2="-645" y1="185.83" y2="185.9" gradientTransform="matrix(29 0 0 8 19107 -1361)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="431" x2="402" y1="122" y2="130" fill="none" stroke="url(#w)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ac" x1="-638.94" x2="-640.22" y1="177.09" y2="177.39" gradientTransform="matrix(24 0 0 13 15783 -2145)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="442" x2="418" y1="153" y2="166" fill="none" stroke="url(#ac)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="ab" x1="-633.42" x2="-634.7" y1="172.41" y2="173.31" gradientTransform="matrix(20 0 0 19 13137 -3096)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="464" x2="444" y1="180" y2="199" fill="none" stroke="url(#ab)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="y" x1="-619.05" x2="-619.52" y1="170.82" y2="171.82" gradientTransform="matrix(13.83 0 0 22.85 9050 -3703.4)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="491.4" x2="477.5" y1="203" y2="225.9" fill="none" stroke="url(#y)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="x" x1="-578.5" x2="-578.63" y1="170.31" y2="171.31" gradientTransform="matrix(7.5 0 0 24.5 4860 -3953)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="524.5" x2="517" y1="219.5" y2="244" fill="none" stroke="url(#x)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12"></line><linearGradient id="z" x1="666.5" x2="666.5" y1="170.31" y2="171.31" gradientTransform="matrix(.5 0 0 24.5 231.5 -3944)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA400" offset="0"></stop><stop stop-color="#FF5E00" offset="1"></stop></linearGradient><line x1="564.5" x2="565" y1="228.5" y2="253" fill="none" stroke="url(#z)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12">`);
9261
9359
  function Search() {
9262
9360
  return _tmpl$();
9263
9361
  }
@@ -9287,47 +9385,94 @@ function ArrowRight() {
9287
9385
  return _el$7;
9288
9386
  })();
9289
9387
  }
9290
- function Wifi() {
9388
+ function Sun() {
9291
9389
  return _tmpl$6();
9292
9390
  }
9293
- function Offline() {
9294
- return (() => {
9295
- const _el$9 = _tmpl$7();
9296
- createRenderEffect((_p$) => {
9297
- const _v$ = tokens.colors.yellow[500], _v$2 = tokens.colors.yellow[500];
9298
- _v$ !== _p$._v$ && setAttribute(_el$9, "stroke", _p$._v$ = _v$);
9299
- _v$2 !== _p$._v$2 && setAttribute(_el$9, "fill", _p$._v$2 = _v$2);
9300
- return _p$;
9301
- }, {
9302
- _v$: void 0,
9303
- _v$2: void 0
9304
- });
9305
- return _el$9;
9306
- })();
9391
+ function Moon() {
9392
+ return _tmpl$7();
9307
9393
  }
9308
- function Settings() {
9394
+ function Monitor() {
9309
9395
  return _tmpl$8();
9310
9396
  }
9311
- function Copier() {
9397
+ function Wifi() {
9312
9398
  return _tmpl$9();
9313
9399
  }
9314
- function CopiedCopier() {
9400
+ function Offline() {
9315
9401
  return _tmpl$10();
9316
9402
  }
9317
- function ErrorCopier() {
9403
+ function Settings() {
9318
9404
  return _tmpl$11();
9319
9405
  }
9320
- function TanstackLogo() {
9406
+ function Copier() {
9321
9407
  return _tmpl$12();
9322
9408
  }
9409
+ function CopiedCopier(props) {
9410
+ return (() => {
9411
+ const _el$15 = _tmpl$13(), _el$16 = _el$15.firstChild;
9412
+ createRenderEffect(() => setAttribute(_el$16, "stroke", props.theme === "dark" ? "#12B76A" : "#027A48"));
9413
+ return _el$15;
9414
+ })();
9415
+ }
9416
+ function ErrorCopier() {
9417
+ return _tmpl$14();
9418
+ }
9419
+ function List() {
9420
+ return _tmpl$15();
9421
+ }
9422
+ function Check(props) {
9423
+ return [createComponent(Show, {
9424
+ get when() {
9425
+ return props.checked;
9426
+ },
9427
+ get children() {
9428
+ const _el$19 = _tmpl$13(), _el$20 = _el$19.firstChild;
9429
+ createRenderEffect(() => setAttribute(_el$20, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
9430
+ return _el$19;
9431
+ }
9432
+ }), createComponent(Show, {
9433
+ get when() {
9434
+ return !props.checked;
9435
+ },
9436
+ get children() {
9437
+ const _el$21 = _tmpl$16(), _el$22 = _el$21.firstChild;
9438
+ createRenderEffect(() => setAttribute(_el$22, "stroke", props.theme === "dark" ? "#9B8AFB" : "#6938EF"));
9439
+ return _el$21;
9440
+ }
9441
+ })];
9442
+ }
9443
+ function TanstackLogo() {
9444
+ return _tmpl$17();
9445
+ }
9446
+
9447
+ // src/Context.ts
9448
+ var QueryDevtoolsContext = createContext({
9449
+ client: void 0,
9450
+ onlineManager: void 0,
9451
+ queryFlavor: "",
9452
+ version: ""
9453
+ });
9454
+ function useQueryDevtoolsContext() {
9455
+ return useContext(QueryDevtoolsContext);
9456
+ }
9457
+ var ThemeContext = createContext(
9458
+ () => "dark"
9459
+ );
9460
+ function useTheme() {
9461
+ return useContext(ThemeContext);
9462
+ }
9323
9463
 
9324
9464
  // src/Explorer.tsx
9325
- var _tmpl$13 = /* @__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">`);
9326
- var _tmpl$22 = /* @__PURE__ */ template(`<button>`);
9327
- var _tmpl$32 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
9328
- var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
9329
- var _tmpl$52 = /* @__PURE__ */ template(`<div><span>:</span> <span>`);
9330
- var _tmpl$62 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
9465
+ var _tmpl$18 = /* @__PURE__ */ template(`<span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`);
9466
+ var _tmpl$22 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
9467
+ var _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items" aria-label="Remove all items">`);
9468
+ var _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item" aria-label="Delete item">`);
9469
+ var _tmpl$52 = /* @__PURE__ */ template(`<button title="Toggle value" aria-label="Toggle value">`);
9470
+ var _tmpl$62 = /* @__PURE__ */ template(`<div>`);
9471
+ var _tmpl$72 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
9472
+ var _tmpl$82 = /* @__PURE__ */ template(`<input>`);
9473
+ var _tmpl$92 = /* @__PURE__ */ template(`<span>`);
9474
+ var _tmpl$102 = /* @__PURE__ */ template(`<div><span>:`);
9475
+ var _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
9331
9476
  function chunkArray(array, size2) {
9332
9477
  if (size2 < 1)
9333
9478
  return [];
@@ -9340,10 +9485,13 @@ function chunkArray(array, size2) {
9340
9485
  return result;
9341
9486
  }
9342
9487
  var Expander = (props) => {
9343
- const styles = getStyles();
9488
+ const theme = useTheme();
9489
+ const styles = createMemo(() => {
9490
+ return theme() === "dark" ? darkStyles : lightStyles;
9491
+ });
9344
9492
  return (() => {
9345
- const _el$ = _tmpl$13();
9346
- createRenderEffect(() => className(_el$, clsx(styles.expander, u`
9493
+ const _el$ = _tmpl$18();
9494
+ createRenderEffect(() => className(_el$, clsx(styles().expander, u`
9347
9495
  transform: rotate(${props.expanded ? 90 : 0}deg);
9348
9496
  `, props.expanded && u`
9349
9497
  & svg {
@@ -9354,7 +9502,10 @@ var Expander = (props) => {
9354
9502
  })();
9355
9503
  };
9356
9504
  var CopyButton = (props) => {
9357
- const styles = getStyles();
9505
+ const theme = useTheme();
9506
+ const styles = createMemo(() => {
9507
+ return theme() === "dark" ? darkStyles : lightStyles;
9508
+ });
9358
9509
  const [copyState, setCopyState] = createSignal("NoCopy");
9359
9510
  return (() => {
9360
9511
  const _el$2 = _tmpl$22();
@@ -9385,7 +9536,11 @@ var CopyButton = (props) => {
9385
9536
  return copyState() === "SuccessCopy";
9386
9537
  },
9387
9538
  get children() {
9388
- return createComponent(CopiedCopier, {});
9539
+ return createComponent(CopiedCopier, {
9540
+ get theme() {
9541
+ return theme();
9542
+ }
9543
+ });
9389
9544
  }
9390
9545
  }), createComponent(Match, {
9391
9546
  get when() {
@@ -9398,7 +9553,7 @@ var CopyButton = (props) => {
9398
9553
  }
9399
9554
  }));
9400
9555
  createRenderEffect((_p$) => {
9401
- const _v$ = styles.copyButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
9556
+ const _v$ = styles().actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
9402
9557
  _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
9403
9558
  _v$2 !== _p$._v$2 && setAttribute(_el$2, "aria-label", _p$._v$2 = _v$2);
9404
9559
  return _p$;
@@ -9409,11 +9564,79 @@ var CopyButton = (props) => {
9409
9564
  return _el$2;
9410
9565
  })();
9411
9566
  };
9567
+ var ClearArrayButton = (props) => {
9568
+ const theme = useTheme();
9569
+ const styles = createMemo(() => {
9570
+ return theme() === "dark" ? darkStyles : lightStyles;
9571
+ });
9572
+ const queryClient = useQueryDevtoolsContext().client;
9573
+ return (() => {
9574
+ const _el$3 = _tmpl$32();
9575
+ _el$3.$$click = () => {
9576
+ const oldData = props.activeQuery.state.data;
9577
+ const newData = updateNestedDataByPath(oldData, props.dataPath, []);
9578
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
9579
+ };
9580
+ insert(_el$3, createComponent(List, {}));
9581
+ createRenderEffect(() => className(_el$3, styles().actionButton));
9582
+ return _el$3;
9583
+ })();
9584
+ };
9585
+ var DeleteItemButton = (props) => {
9586
+ const theme = useTheme();
9587
+ const styles = createMemo(() => {
9588
+ return theme() === "dark" ? darkStyles : lightStyles;
9589
+ });
9590
+ const queryClient = useQueryDevtoolsContext().client;
9591
+ return (() => {
9592
+ const _el$4 = _tmpl$42();
9593
+ _el$4.$$click = () => {
9594
+ const oldData = props.activeQuery.state.data;
9595
+ const newData = deleteNestedDataByPath(oldData, props.dataPath);
9596
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
9597
+ };
9598
+ insert(_el$4, createComponent(Trash, {}));
9599
+ createRenderEffect(() => className(_el$4, clsx(styles().actionButton)));
9600
+ return _el$4;
9601
+ })();
9602
+ };
9603
+ var ToggleValueButton = (props) => {
9604
+ const theme = useTheme();
9605
+ const styles = createMemo(() => {
9606
+ return theme() === "dark" ? darkStyles : lightStyles;
9607
+ });
9608
+ const queryClient = useQueryDevtoolsContext().client;
9609
+ return (() => {
9610
+ const _el$5 = _tmpl$52();
9611
+ _el$5.$$click = () => {
9612
+ const oldData = props.activeQuery.state.data;
9613
+ const newData = updateNestedDataByPath(oldData, props.dataPath, !props.value);
9614
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
9615
+ };
9616
+ insert(_el$5, createComponent(Check, {
9617
+ get theme() {
9618
+ return theme();
9619
+ },
9620
+ get checked() {
9621
+ return props.value;
9622
+ }
9623
+ }));
9624
+ createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
9625
+ width: ${tokens.size[3.5]};
9626
+ height: ${tokens.size[3.5]};
9627
+ `)));
9628
+ return _el$5;
9629
+ })();
9630
+ };
9412
9631
  function isIterable(x) {
9413
9632
  return Symbol.iterator in x;
9414
9633
  }
9415
9634
  function Explorer(props) {
9416
- const styles = getStyles();
9635
+ const theme = useTheme();
9636
+ const styles = createMemo(() => {
9637
+ return theme() === "dark" ? darkStyles : lightStyles;
9638
+ });
9639
+ const queryClient = useQueryDevtoolsContext().client;
9417
9640
  const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
9418
9641
  const toggleExpanded = () => setExpanded((old) => !old);
9419
9642
  const [expandedPages, setExpandedPages] = createSignal([]);
@@ -9453,49 +9676,79 @@ function Explorer(props) {
9453
9676
  return typeof props.value;
9454
9677
  });
9455
9678
  const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
9679
+ const currentDataPath = props.dataPath ?? [];
9456
9680
  return (() => {
9457
- const _el$3 = _tmpl$42();
9458
- insert(_el$3, createComponent(Show, {
9681
+ const _el$6 = _tmpl$62();
9682
+ insert(_el$6, createComponent(Show, {
9459
9683
  get when() {
9460
9684
  return subEntryPages().length;
9461
9685
  },
9462
9686
  get children() {
9463
9687
  return [(() => {
9464
- const _el$4 = _tmpl$32(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling, _el$10 = _el$9.firstChild;
9465
- _el$5.$$click = () => toggleExpanded();
9466
- insert(_el$5, createComponent(Expander, {
9688
+ const _el$7 = _tmpl$72(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$9.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild;
9689
+ _el$8.$$click = () => toggleExpanded();
9690
+ insert(_el$8, createComponent(Expander, {
9467
9691
  get expanded() {
9468
9692
  return expanded();
9469
9693
  }
9470
- }), _el$6);
9471
- insert(_el$7, () => props.label);
9472
- insert(_el$9, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$10);
9473
- insert(_el$9, () => subEntries().length, _el$10);
9474
- insert(_el$9, () => subEntries().length > 1 ? `items` : `item`, null);
9475
- insert(_el$4, createComponent(Show, {
9694
+ }), _el$9);
9695
+ insert(_el$10, () => props.label);
9696
+ insert(_el$12, () => String(type()).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$13);
9697
+ insert(_el$12, () => subEntries().length, _el$13);
9698
+ insert(_el$12, () => subEntries().length > 1 ? `items` : `item`, null);
9699
+ insert(_el$7, createComponent(Show, {
9476
9700
  get when() {
9477
- return props.copyable;
9701
+ return props.editable;
9478
9702
  },
9479
9703
  get children() {
9480
- return createComponent(CopyButton, {
9704
+ const _el$14 = _tmpl$62();
9705
+ insert(_el$14, createComponent(CopyButton, {
9481
9706
  get value() {
9482
9707
  return props.value;
9483
9708
  }
9484
- });
9709
+ }), null);
9710
+ insert(_el$14, createComponent(Show, {
9711
+ get when() {
9712
+ return props.itemsDeletable && props.activeQuery !== void 0;
9713
+ },
9714
+ get children() {
9715
+ return createComponent(DeleteItemButton, {
9716
+ get activeQuery() {
9717
+ return props.activeQuery;
9718
+ },
9719
+ dataPath: currentDataPath
9720
+ });
9721
+ }
9722
+ }), null);
9723
+ insert(_el$14, createComponent(Show, {
9724
+ get when() {
9725
+ return type() === "array" && props.activeQuery !== void 0;
9726
+ },
9727
+ get children() {
9728
+ return createComponent(ClearArrayButton, {
9729
+ get activeQuery() {
9730
+ return props.activeQuery;
9731
+ },
9732
+ dataPath: currentDataPath
9733
+ });
9734
+ }
9735
+ }), null);
9736
+ createRenderEffect(() => className(_el$14, styles().actions));
9737
+ return _el$14;
9485
9738
  }
9486
9739
  }), null);
9487
9740
  createRenderEffect((_p$) => {
9488
- const _v$3 = styles.expanderButtonContainer, _v$4 = styles.expanderButton, _v$5 = styles.info;
9489
- _v$3 !== _p$._v$3 && className(_el$4, _p$._v$3 = _v$3);
9490
- _v$4 !== _p$._v$4 && className(_el$5, _p$._v$4 = _v$4);
9491
- _v$5 !== _p$._v$5 && className(_el$9, _p$._v$5 = _v$5);
9741
+ const _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
9742
+ _v$3 !== _p$._v$3 && className(_el$7, _p$._v$3 = _v$3);
9743
+ _v$4 !== _p$._v$4 && className(_el$8, _p$._v$4 = _v$4);
9744
+ _v$5 !== _p$._v$5 && className(_el$12, _p$._v$5 = _v$5);
9492
9745
  return _p$;
9493
9746
  }, {
9494
9747
  _v$3: void 0,
9495
9748
  _v$4: void 0,
9496
9749
  _v$5: void 0
9497
9750
  });
9498
- return _el$4;
9751
+ return _el$7;
9499
9752
  })(), createComponent(Show, {
9500
9753
  get when() {
9501
9754
  return expanded();
@@ -9506,8 +9759,8 @@ function Explorer(props) {
9506
9759
  return subEntryPages().length === 1;
9507
9760
  },
9508
9761
  get children() {
9509
- const _el$11 = _tmpl$42();
9510
- insert(_el$11, createComponent(Key, {
9762
+ const _el$15 = _tmpl$62();
9763
+ insert(_el$15, createComponent(Key, {
9511
9764
  get each() {
9512
9765
  return subEntries();
9513
9766
  },
@@ -9523,42 +9776,51 @@ function Explorer(props) {
9523
9776
  get value() {
9524
9777
  return entry().value;
9525
9778
  },
9526
- get copyable() {
9527
- return props.copyable;
9779
+ get editable() {
9780
+ return props.editable;
9781
+ },
9782
+ get dataPath() {
9783
+ return [...currentDataPath, entry().label];
9784
+ },
9785
+ get activeQuery() {
9786
+ return props.activeQuery;
9787
+ },
9788
+ get itemsDeletable() {
9789
+ return type() === "array" || type() === "Iterable" || type() === "object";
9528
9790
  }
9529
9791
  });
9530
9792
  }
9531
9793
  }));
9532
- createRenderEffect(() => className(_el$11, styles.subEntry));
9533
- return _el$11;
9794
+ createRenderEffect(() => className(_el$15, styles().subEntry));
9795
+ return _el$15;
9534
9796
  }
9535
9797
  }), createComponent(Show, {
9536
9798
  get when() {
9537
9799
  return subEntryPages().length > 1;
9538
9800
  },
9539
9801
  get children() {
9540
- const _el$12 = _tmpl$42();
9541
- insert(_el$12, createComponent(Index, {
9802
+ const _el$16 = _tmpl$62();
9803
+ insert(_el$16, createComponent(Index, {
9542
9804
  get each() {
9543
9805
  return subEntryPages();
9544
9806
  },
9545
9807
  children: (entries3, index) => (() => {
9546
- const _el$18 = _tmpl$62(), _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$20.firstChild, _el$25 = _el$21.nextSibling, _el$23 = _el$25.nextSibling, _el$26 = _el$23.nextSibling; _el$26.nextSibling;
9547
- _el$20.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
9548
- insert(_el$20, createComponent(Expander, {
9808
+ const _el$22 = _tmpl$112(), _el$23 = _el$22.firstChild, _el$24 = _el$23.firstChild, _el$25 = _el$24.firstChild, _el$29 = _el$25.nextSibling, _el$27 = _el$29.nextSibling, _el$30 = _el$27.nextSibling; _el$30.nextSibling;
9809
+ _el$24.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
9810
+ insert(_el$24, createComponent(Expander, {
9549
9811
  get expanded() {
9550
9812
  return expandedPages().includes(index);
9551
9813
  }
9552
- }), _el$21);
9553
- insert(_el$20, index * 100, _el$25);
9554
- insert(_el$20, index * 100 + 100 - 1, _el$26);
9555
- insert(_el$19, createComponent(Show, {
9814
+ }), _el$25);
9815
+ insert(_el$24, index * 100, _el$29);
9816
+ insert(_el$24, index * 100 + 100 - 1, _el$30);
9817
+ insert(_el$23, createComponent(Show, {
9556
9818
  get when() {
9557
9819
  return expandedPages().includes(index);
9558
9820
  },
9559
9821
  get children() {
9560
- const _el$27 = _tmpl$42();
9561
- insert(_el$27, createComponent(Key, {
9822
+ const _el$31 = _tmpl$62();
9823
+ insert(_el$31, createComponent(Key, {
9562
9824
  get each() {
9563
9825
  return entries3();
9564
9826
  },
@@ -9573,67 +9835,143 @@ function Explorer(props) {
9573
9835
  get value() {
9574
9836
  return entry().value;
9575
9837
  },
9576
- get copyable() {
9577
- return props.copyable;
9838
+ get editable() {
9839
+ return props.editable;
9840
+ },
9841
+ get dataPath() {
9842
+ return [...currentDataPath, entry().label];
9843
+ },
9844
+ get activeQuery() {
9845
+ return props.activeQuery;
9578
9846
  }
9579
9847
  })
9580
9848
  }));
9581
- createRenderEffect(() => className(_el$27, styles.subEntry));
9582
- return _el$27;
9849
+ createRenderEffect(() => className(_el$31, styles().subEntry));
9850
+ return _el$31;
9583
9851
  }
9584
9852
  }), null);
9585
9853
  createRenderEffect((_p$) => {
9586
- const _v$8 = styles.entry, _v$9 = styles.expanderButton;
9587
- _v$8 !== _p$._v$8 && className(_el$19, _p$._v$8 = _v$8);
9588
- _v$9 !== _p$._v$9 && className(_el$20, _p$._v$9 = _v$9);
9854
+ const _v$10 = styles().entry, _v$11 = styles().expanderButton;
9855
+ _v$10 !== _p$._v$10 && className(_el$23, _p$._v$10 = _v$10);
9856
+ _v$11 !== _p$._v$11 && className(_el$24, _p$._v$11 = _v$11);
9589
9857
  return _p$;
9590
9858
  }, {
9591
- _v$8: void 0,
9592
- _v$9: void 0
9859
+ _v$10: void 0,
9860
+ _v$11: void 0
9593
9861
  });
9594
- return _el$18;
9862
+ return _el$22;
9595
9863
  })()
9596
9864
  }));
9597
- createRenderEffect(() => className(_el$12, styles.subEntry));
9598
- return _el$12;
9865
+ createRenderEffect(() => className(_el$16, styles().subEntry));
9866
+ return _el$16;
9599
9867
  }
9600
9868
  })];
9601
9869
  }
9602
9870
  })];
9603
9871
  }
9604
9872
  }), null);
9605
- insert(_el$3, createComponent(Show, {
9873
+ insert(_el$6, createComponent(Show, {
9606
9874
  get when() {
9607
9875
  return subEntryPages().length === 0;
9608
9876
  },
9609
9877
  get children() {
9610
- const _el$13 = _tmpl$52(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.nextSibling;
9611
- _el$13.style.setProperty("line-height", "1.125rem");
9612
- insert(_el$14, () => props.label, _el$15);
9613
- insert(_el$17, () => displayValue(props.value));
9878
+ const _el$17 = _tmpl$102(), _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild;
9879
+ insert(_el$18, () => props.label, _el$19);
9880
+ insert(_el$17, createComponent(Show, {
9881
+ get when() {
9882
+ return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number" || type() === "boolean");
9883
+ },
9884
+ get fallback() {
9885
+ return (() => {
9886
+ const _el$32 = _tmpl$92();
9887
+ insert(_el$32, () => displayValue(props.value));
9888
+ createRenderEffect(() => className(_el$32, styles().value));
9889
+ return _el$32;
9890
+ })();
9891
+ },
9892
+ get children() {
9893
+ return [createComponent(Show, {
9894
+ get when() {
9895
+ return createMemo(() => !!(props.editable && props.activeQuery !== void 0))() && (type() === "string" || type() === "number");
9896
+ },
9897
+ get children() {
9898
+ const _el$20 = _tmpl$82();
9899
+ _el$20.addEventListener("change", (changeEvent) => {
9900
+ const oldData = props.activeQuery.state.data;
9901
+ const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
9902
+ queryClient.setQueryData(props.activeQuery.queryKey, newData);
9903
+ });
9904
+ createRenderEffect((_p$) => {
9905
+ const _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles().value, styles().editableInput);
9906
+ _v$6 !== _p$._v$6 && setAttribute(_el$20, "type", _p$._v$6 = _v$6);
9907
+ _v$7 !== _p$._v$7 && className(_el$20, _p$._v$7 = _v$7);
9908
+ return _p$;
9909
+ }, {
9910
+ _v$6: void 0,
9911
+ _v$7: void 0
9912
+ });
9913
+ createRenderEffect(() => _el$20.value = props.value);
9914
+ return _el$20;
9915
+ }
9916
+ }), createComponent(Show, {
9917
+ get when() {
9918
+ return type() === "boolean";
9919
+ },
9920
+ get children() {
9921
+ const _el$21 = _tmpl$92();
9922
+ insert(_el$21, createComponent(ToggleValueButton, {
9923
+ get activeQuery() {
9924
+ return props.activeQuery;
9925
+ },
9926
+ dataPath: currentDataPath,
9927
+ get value() {
9928
+ return props.value;
9929
+ }
9930
+ }), null);
9931
+ insert(_el$21, () => displayValue(props.value), null);
9932
+ createRenderEffect(() => className(_el$21, clsx(styles().value, styles().actions, styles().editableInput)));
9933
+ return _el$21;
9934
+ }
9935
+ })];
9936
+ }
9937
+ }), null);
9938
+ insert(_el$17, createComponent(Show, {
9939
+ get when() {
9940
+ return props.editable && props.itemsDeletable && props.activeQuery !== void 0;
9941
+ },
9942
+ get children() {
9943
+ return createComponent(DeleteItemButton, {
9944
+ get activeQuery() {
9945
+ return props.activeQuery;
9946
+ },
9947
+ dataPath: currentDataPath
9948
+ });
9949
+ }
9950
+ }), null);
9614
9951
  createRenderEffect((_p$) => {
9615
- const _v$6 = styles.label, _v$7 = styles.value;
9616
- _v$6 !== _p$._v$6 && className(_el$14, _p$._v$6 = _v$6);
9617
- _v$7 !== _p$._v$7 && className(_el$17, _p$._v$7 = _v$7);
9952
+ const _v$8 = styles().row, _v$9 = styles().label;
9953
+ _v$8 !== _p$._v$8 && className(_el$17, _p$._v$8 = _v$8);
9954
+ _v$9 !== _p$._v$9 && className(_el$18, _p$._v$9 = _v$9);
9618
9955
  return _p$;
9619
9956
  }, {
9620
- _v$6: void 0,
9621
- _v$7: void 0
9957
+ _v$8: void 0,
9958
+ _v$9: void 0
9622
9959
  });
9623
- return _el$13;
9960
+ return _el$17;
9624
9961
  }
9625
9962
  }), null);
9626
- createRenderEffect(() => className(_el$3, styles.entry));
9627
- return _el$3;
9963
+ createRenderEffect(() => className(_el$6, styles().entry));
9964
+ return _el$6;
9628
9965
  })();
9629
9966
  }
9630
- var getStyles = () => {
9967
+ var stylesFactory = (theme) => {
9631
9968
  const {
9632
9969
  colors,
9633
9970
  font,
9634
9971
  size: size2,
9635
9972
  border
9636
9973
  } = tokens;
9974
+ const t2 = (light, dark) => theme === "light" ? light : dark;
9637
9975
  return {
9638
9976
  entry: u`
9639
9977
  & * {
@@ -9647,7 +9985,7 @@ var getStyles = () => {
9647
9985
  subEntry: u`
9648
9986
  margin: 0 0 0 0.5em;
9649
9987
  padding-left: 0.75em;
9650
- border-left: 2px solid ${colors.darkGray[400]};
9988
+ border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
9651
9989
  /* outline: 1px solid ${colors.teal[400]}; */
9652
9990
  `,
9653
9991
  expander: u`
@@ -9668,6 +10006,7 @@ var getStyles = () => {
9668
10006
  align-items: center;
9669
10007
  line-height: 1.125rem;
9670
10008
  min-height: 1.125rem;
10009
+ gap: ${size2[2]};
9671
10010
  `,
9672
10011
  expanderButton: u`
9673
10012
  cursor: pointer;
@@ -9695,19 +10034,45 @@ var getStyles = () => {
9695
10034
  }
9696
10035
  `,
9697
10036
  info: u`
9698
- color: ${colors.gray[500]};
10037
+ color: ${t2(colors.gray[500], colors.gray[500])};
9699
10038
  font-size: ${font.size.xs};
9700
10039
  margin-left: ${size2[1]};
9701
10040
  /* outline: 1px solid ${colors.yellow[400]}; */
9702
10041
  `,
9703
10042
  label: u`
9704
- color: ${colors.gray[300]};
10043
+ color: ${t2(colors.gray[700], colors.gray[300])};
9705
10044
  `,
9706
10045
  value: u`
9707
- color: ${colors.purple[400]};
10046
+ color: ${t2(colors.purple[600], colors.purple[400])};
10047
+ flex-grow: 1;
10048
+ `,
10049
+ actions: u`
10050
+ display: inline-flex;
10051
+ gap: ${size2[2]};
10052
+ align-items: center;
9708
10053
  `,
9709
- copyButton: u`
10054
+ row: u`
10055
+ display: inline-flex;
10056
+ gap: ${size2[2]};
10057
+ width: 100%;
10058
+ margin-bottom: ${size2[0.5]};
10059
+ line-height: 1.125rem;
10060
+ align-items: center;
10061
+ `,
10062
+ editableInput: u`
10063
+ border: none;
10064
+ padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
10065
+ flex-grow: 1;
10066
+ border-radius: ${border.radius.xs};
10067
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
10068
+
10069
+ &:hover {
10070
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
10071
+ }
10072
+ `,
10073
+ actionButton: u`
9710
10074
  background-color: transparent;
10075
+ color: ${t2(colors.gray[500], colors.gray[500])};
9711
10076
  border: none;
9712
10077
  display: inline-flex;
9713
10078
  padding: 0px;
@@ -9717,11 +10082,10 @@ var getStyles = () => {
9717
10082
  width: ${size2[3]};
9718
10083
  height: ${size2[3]};
9719
10084
  position: relative;
9720
- left: ${size2[2]};
9721
10085
  z-index: 1;
9722
10086
 
9723
- &:hover svg .copier {
9724
- stroke: ${colors.gray[500]} !important;
10087
+ &:hover svg {
10088
+ color: ${t2(colors.gray[600], colors.gray[400])};
9725
10089
  }
9726
10090
 
9727
10091
  &:focus-visible {
@@ -9732,19 +10096,10 @@ var getStyles = () => {
9732
10096
  `
9733
10097
  };
9734
10098
  };
10099
+ var lightStyles = stylesFactory("light");
10100
+ var darkStyles = stylesFactory("dark");
9735
10101
  delegateEvents(["click"]);
9736
10102
 
9737
- // src/Context.ts
9738
- var QueryDevtoolsContext = createContext({
9739
- client: void 0,
9740
- onlineManager: void 0,
9741
- queryFlavor: "",
9742
- version: ""
9743
- });
9744
- function useQueryDevtoolsContext() {
9745
- return useContext(QueryDevtoolsContext);
9746
- }
9747
-
9748
10103
  // src/fonts.ts
9749
10104
  var loadFonts = () => {
9750
10105
  const link = document.createElement("link");
@@ -9754,32 +10109,37 @@ var loadFonts = () => {
9754
10109
  };
9755
10110
 
9756
10111
  // src/Devtools.tsx
9757
- var _tmpl$14 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
10112
+ var _tmpl$19 = /* @__PURE__ */ template(`<div><div aria-hidden="true"></div><button aria-label="Open Tanstack query devtools">`);
9758
10113
  var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
9759
10114
  var _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
9760
10115
  var _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
9761
10116
  var _tmpl$53 = /* @__PURE__ */ template(`<div>Settings`);
9762
10117
  var _tmpl$63 = /* @__PURE__ */ template(`<span>Position`);
9763
- var _tmpl$72 = /* @__PURE__ */ template(`<span>Top`);
9764
- var _tmpl$82 = /* @__PURE__ */ template(`<span>Bottom`);
9765
- var _tmpl$92 = /* @__PURE__ */ template(`<span>Left`);
9766
- var _tmpl$102 = /* @__PURE__ */ template(`<span>Right`);
9767
- 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">`);
9768
- var _tmpl$122 = /* @__PURE__ */ template(`<option>Sort by `);
9769
- var _tmpl$132 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
9770
- var _tmpl$142 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
9771
- var _tmpl$15 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
9772
- var _tmpl$16 = /* @__PURE__ */ template(`<span>`);
9773
- var _tmpl$17 = /* @__PURE__ */ template(`<button><span></span><span>`);
9774
- var _tmpl$18 = /* @__PURE__ */ template(`<button><span></span> Error`);
9775
- var _tmpl$19 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
9776
- 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">`);
9777
- var _tmpl$21 = /* @__PURE__ */ template(`<option>`);
10118
+ var _tmpl$73 = /* @__PURE__ */ template(`<span>Top`);
10119
+ var _tmpl$83 = /* @__PURE__ */ template(`<span>Bottom`);
10120
+ var _tmpl$93 = /* @__PURE__ */ template(`<span>Left`);
10121
+ var _tmpl$103 = /* @__PURE__ */ template(`<span>Right`);
10122
+ var _tmpl$113 = /* @__PURE__ */ template(`<span>Theme`);
10123
+ var _tmpl$122 = /* @__PURE__ */ template(`<span>Light`);
10124
+ var _tmpl$132 = /* @__PURE__ */ template(`<span>Dark`);
10125
+ var _tmpl$142 = /* @__PURE__ */ template(`<span>System`);
10126
+ var _tmpl$152 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools"></button><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div><div><div><div><input aria-label="Filter queries by query key" type="text" placeholder="Filter" class="tsqd-query-filter-textfield"></div><div><select></select></div><button class="tsqd-query-filter-sort-order-btn"></button></div><div><button aria-label="Clear query cache" title="Clear query cache"></button><button></button></div></div><div><div class="tsqd-queries-container">`);
10127
+ var _tmpl$162 = /* @__PURE__ */ template(`<option>Sort by `);
10128
+ var _tmpl$172 = /* @__PURE__ */ template(`<div class="tsqd-query-disabled-indicator">disabled`);
10129
+ var _tmpl$182 = /* @__PURE__ */ template(`<button><div></div><code class="tsqd-query-hash">`);
10130
+ var _tmpl$192 = /* @__PURE__ */ template(`<div role="tooltip" id="tsqd-status-tooltip">`);
10131
+ var _tmpl$20 = /* @__PURE__ */ template(`<span>`);
10132
+ var _tmpl$21 = /* @__PURE__ */ template(`<button><span></span><span>`);
10133
+ var _tmpl$222 = /* @__PURE__ */ template(`<button><span></span> Error`);
10134
+ var _tmpl$232 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value="" disabled selected>`);
10135
+ var _tmpl$24 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class="tsqd-query-details-summary"><pre><code></code></pre><span></span></div><div class="tsqd-query-details-observers-count"><span>Observers:</span><span></span></div><div class="tsqd-query-details-last-updated"><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
10136
+ var _tmpl$25 = /* @__PURE__ */ template(`<option>`);
9778
10137
  var firstBreakpoint = 1024;
9779
10138
  var secondBreakpoint = 796;
9780
10139
  var thirdBreakpoint = 700;
9781
10140
  var BUTTON_POSITION = "bottom-right";
9782
10141
  var POSITION = "bottom";
10142
+ var THEME_PREFERENCE = "system";
9783
10143
  var INITIAL_IS_OPEN = false;
9784
10144
  var DEFAULT_HEIGHT = 500;
9785
10145
  var DEFAULT_WIDTH = 500;
@@ -9788,33 +10148,51 @@ var DEFAULT_SORT_ORDER = 1;
9788
10148
  var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
9789
10149
  var [panelWidth, setPanelWidth] = createSignal(0);
9790
10150
  var DevtoolsComponent = (props) => {
10151
+ const [localStore, setLocalStore] = createLocalStorage({
10152
+ prefix: "TanstackQueryDevtools"
10153
+ });
10154
+ const colorScheme = getPreferredColorScheme();
10155
+ const theme = createMemo(() => {
10156
+ const preference = localStore.theme_preference || THEME_PREFERENCE;
10157
+ if (preference !== "system")
10158
+ return preference;
10159
+ return colorScheme();
10160
+ });
9791
10161
  return createComponent(QueryDevtoolsContext.Provider, {
9792
10162
  value: props,
9793
10163
  get children() {
9794
- return createComponent(Devtools, {});
10164
+ return createComponent(ThemeContext.Provider, {
10165
+ value: theme,
10166
+ get children() {
10167
+ return createComponent(Devtools, {
10168
+ localStore,
10169
+ setLocalStore
10170
+ });
10171
+ }
10172
+ });
9795
10173
  }
9796
10174
  });
9797
10175
  };
9798
10176
  var Devtools_default = DevtoolsComponent;
9799
- var Devtools = () => {
10177
+ var Devtools = (props) => {
9800
10178
  loadFonts();
9801
- const styles = getStyles2();
9802
- const [localStore, setLocalStore] = createLocalStorage({
9803
- prefix: "TanstackQueryDevtools"
10179
+ const theme = useTheme();
10180
+ const styles = createMemo(() => {
10181
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
9804
10182
  });
9805
10183
  const buttonPosition = createMemo(() => {
9806
10184
  return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
9807
10185
  });
9808
10186
  const isOpen = createMemo(() => {
9809
- return localStore.open === "true" ? true : localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
10187
+ return props.localStore.open === "true" ? true : props.localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
9810
10188
  });
9811
10189
  const position = createMemo(() => {
9812
- return localStore.position || useQueryDevtoolsContext().position || POSITION;
10190
+ return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
9813
10191
  });
9814
10192
  createEffect(() => {
9815
10193
  const root = document.querySelector(".tsqd-parent-container");
9816
- const height = localStore.height || DEFAULT_HEIGHT;
9817
- const width = localStore.width || DEFAULT_WIDTH;
10194
+ const height = props.localStore.height || DEFAULT_HEIGHT;
10195
+ const width = props.localStore.width || DEFAULT_WIDTH;
9818
10196
  const panelPosition = position();
9819
10197
  root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
9820
10198
  root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
@@ -9830,8 +10208,12 @@ var Devtools = () => {
9830
10208
  },
9831
10209
  get children() {
9832
10210
  return createComponent(DevtoolsPanel, {
9833
- localStore,
9834
- setLocalStore
10211
+ get localStore() {
10212
+ return props.localStore;
10213
+ },
10214
+ get setLocalStore() {
10215
+ return props.setLocalStore;
10216
+ }
9835
10217
  });
9836
10218
  }
9837
10219
  });
@@ -9845,11 +10227,11 @@ var Devtools = () => {
9845
10227
  return !isOpen();
9846
10228
  },
9847
10229
  get children() {
9848
- const _el$2 = _tmpl$14(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
10230
+ const _el$2 = _tmpl$19(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
9849
10231
  insert(_el$3, createComponent(TanstackLogo, {}));
9850
- _el$4.$$click = () => setLocalStore("open", "true");
10232
+ _el$4.$$click = () => props.setLocalStore("open", "true");
9851
10233
  insert(_el$4, createComponent(TanstackLogo, {}));
9852
- createRenderEffect(() => className(_el$2, clsx(styles.devtoolsBtn, styles[`devtoolsBtn-position-${buttonPosition()}`])));
10234
+ createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
9853
10235
  return _el$2;
9854
10236
  }
9855
10237
  });
@@ -9880,7 +10262,10 @@ var Devtools = () => {
9880
10262
  })();
9881
10263
  };
9882
10264
  var DevtoolsPanel = (props) => {
9883
- const styles = getStyles2();
10265
+ const theme = useTheme();
10266
+ const styles = createMemo(() => {
10267
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10268
+ });
9884
10269
  const [isResizing, setIsResizing] = createSignal(false);
9885
10270
  const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
9886
10271
  const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
@@ -9989,8 +10374,24 @@ var DevtoolsPanel = (props) => {
9989
10374
  });
9990
10375
  });
9991
10376
  });
10377
+ const getPanelDynamicStyles = () => {
10378
+ const {
10379
+ colors
10380
+ } = tokens;
10381
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10382
+ if (panelWidth() < secondBreakpoint) {
10383
+ return u`
10384
+ flex-direction: column;
10385
+ background-color: ${t2(colors.gray[300], colors.gray[600])};
10386
+ `;
10387
+ }
10388
+ return u`
10389
+ flex-direction: row;
10390
+ background-color: ${t2(colors.gray[200], colors.darkGray[900])};
10391
+ `;
10392
+ };
9992
10393
  return (() => {
9993
- const _el$5 = _tmpl$112(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$9.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$23 = _el$15.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$32 = _el$14.nextSibling, _el$33 = _el$32.firstChild;
10394
+ const _el$5 = _tmpl$152(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$9.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$23 = _el$15.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$36 = _el$14.nextSibling, _el$37 = _el$36.firstChild;
9994
10395
  const _ref$ = panelRef;
9995
10396
  typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
9996
10397
  _el$6.$$mousedown = handleDragStart;
@@ -10006,10 +10407,10 @@ var DevtoolsPanel = (props) => {
10006
10407
  _el$17.$$input = (e2) => props.setLocalStore("filter", e2.currentTarget.value);
10007
10408
  _el$19.addEventListener("change", (e2) => props.setLocalStore("sort", e2.currentTarget.value));
10008
10409
  insert(_el$19, () => Object.keys(sortFns).map((key) => (() => {
10009
- const _el$34 = _tmpl$122(); _el$34.firstChild;
10010
- _el$34.value = key;
10011
- insert(_el$34, key, null);
10012
- return _el$34;
10410
+ const _el$38 = _tmpl$162(); _el$38.firstChild;
10411
+ _el$38.value = key;
10412
+ insert(_el$38, key, null);
10413
+ return _el$38;
10013
10414
  })()));
10014
10415
  insert(_el$18, createComponent(ChevronDown, {}), null);
10015
10416
  _el$20.$$click = () => {
@@ -10053,7 +10454,7 @@ var DevtoolsPanel = (props) => {
10053
10454
  get children() {
10054
10455
  return [createComponent(index$d.Trigger, {
10055
10456
  get ["class"]() {
10056
- return clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
10457
+ return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
10057
10458
  },
10058
10459
  get children() {
10059
10460
  return createComponent(Settings, {});
@@ -10062,12 +10463,12 @@ var DevtoolsPanel = (props) => {
10062
10463
  get children() {
10063
10464
  return createComponent(index$d.Content, {
10064
10465
  get ["class"]() {
10065
- return clsx(styles.settingsMenu, "tsqd-settings-menu");
10466
+ return clsx(styles().settingsMenu, "tsqd-settings-menu");
10066
10467
  },
10067
10468
  get children() {
10068
10469
  return [(() => {
10069
10470
  const _el$26 = _tmpl$53();
10070
- createRenderEffect(() => className(_el$26, clsx(styles.settingsMenuHeader, "tsqd-settings-menu-header")));
10471
+ createRenderEffect(() => className(_el$26, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
10071
10472
  return _el$26;
10072
10473
  })(), createComponent(index$d.Sub, {
10073
10474
  overlap: true,
@@ -10076,7 +10477,7 @@ var DevtoolsPanel = (props) => {
10076
10477
  get children() {
10077
10478
  return [createComponent(index$d.SubTrigger, {
10078
10479
  get ["class"]() {
10079
- return clsx(styles.settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10480
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10080
10481
  },
10081
10482
  get children() {
10082
10483
  return [_tmpl$63(), createComponent(ChevronDown, {})];
@@ -10085,7 +10486,7 @@ var DevtoolsPanel = (props) => {
10085
10486
  get children() {
10086
10487
  return createComponent(index$d.SubContent, {
10087
10488
  get ["class"]() {
10088
- return clsx(styles.settingsMenu, "tsqd-settings-submenu");
10489
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
10089
10490
  },
10090
10491
  get children() {
10091
10492
  return [createComponent(index$d.Item, {
@@ -10094,10 +10495,10 @@ var DevtoolsPanel = (props) => {
10094
10495
  },
10095
10496
  as: "button",
10096
10497
  get ["class"]() {
10097
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10498
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10098
10499
  },
10099
10500
  get children() {
10100
- return [_tmpl$72(), createComponent(ArrowUp, {})];
10501
+ return [_tmpl$73(), createComponent(ArrowUp, {})];
10101
10502
  }
10102
10503
  }), createComponent(index$d.Item, {
10103
10504
  onSelect: () => {
@@ -10105,10 +10506,10 @@ var DevtoolsPanel = (props) => {
10105
10506
  },
10106
10507
  as: "button",
10107
10508
  get ["class"]() {
10108
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10509
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10109
10510
  },
10110
10511
  get children() {
10111
- return [_tmpl$82(), createComponent(ArrowDown, {})];
10512
+ return [_tmpl$83(), createComponent(ArrowDown, {})];
10112
10513
  }
10113
10514
  }), createComponent(index$d.Item, {
10114
10515
  onSelect: () => {
@@ -10116,10 +10517,10 @@ var DevtoolsPanel = (props) => {
10116
10517
  },
10117
10518
  as: "button",
10118
10519
  get ["class"]() {
10119
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10520
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10120
10521
  },
10121
10522
  get children() {
10122
- return [_tmpl$92(), createComponent(ArrowLeft, {})];
10523
+ return [_tmpl$93(), createComponent(ArrowLeft, {})];
10123
10524
  }
10124
10525
  }), createComponent(index$d.Item, {
10125
10526
  onSelect: () => {
@@ -10127,10 +10528,68 @@ var DevtoolsPanel = (props) => {
10127
10528
  },
10128
10529
  as: "button",
10129
10530
  get ["class"]() {
10130
- return clsx(styles.settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
10531
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
10131
10532
  },
10132
10533
  get children() {
10133
- return [_tmpl$102(), createComponent(ArrowRight, {})];
10534
+ return [_tmpl$103(), createComponent(ArrowRight, {})];
10535
+ }
10536
+ })];
10537
+ }
10538
+ });
10539
+ }
10540
+ })];
10541
+ }
10542
+ }), createComponent(index$d.Sub, {
10543
+ overlap: true,
10544
+ gutter: 8,
10545
+ shift: -4,
10546
+ get children() {
10547
+ return [createComponent(index$d.SubTrigger, {
10548
+ get ["class"]() {
10549
+ return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
10550
+ },
10551
+ get children() {
10552
+ return [_tmpl$113(), createComponent(ChevronDown, {})];
10553
+ }
10554
+ }), createComponent(index$d.Portal, {
10555
+ get children() {
10556
+ return createComponent(index$d.SubContent, {
10557
+ get ["class"]() {
10558
+ return clsx(styles().settingsMenu, "tsqd-settings-submenu");
10559
+ },
10560
+ get children() {
10561
+ return [createComponent(index$d.Item, {
10562
+ onSelect: () => {
10563
+ props.setLocalStore("theme_preference", "light");
10564
+ },
10565
+ as: "button",
10566
+ get ["class"]() {
10567
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10568
+ },
10569
+ get children() {
10570
+ return [_tmpl$122(), createComponent(Sun, {})];
10571
+ }
10572
+ }), createComponent(index$d.Item, {
10573
+ onSelect: () => {
10574
+ props.setLocalStore("theme_preference", "dark");
10575
+ },
10576
+ as: "button",
10577
+ get ["class"]() {
10578
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10579
+ },
10580
+ get children() {
10581
+ return [_tmpl$132(), createComponent(Moon, {})];
10582
+ }
10583
+ }), createComponent(index$d.Item, {
10584
+ onSelect: () => {
10585
+ props.setLocalStore("theme_preference", "system");
10586
+ },
10587
+ as: "button",
10588
+ get ["class"]() {
10589
+ return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10590
+ },
10591
+ get children() {
10592
+ return [_tmpl$142(), createComponent(Monitor, {})];
10134
10593
  }
10135
10594
  })];
10136
10595
  }
@@ -10145,7 +10604,7 @@ var DevtoolsPanel = (props) => {
10145
10604
  })];
10146
10605
  }
10147
10606
  }), null);
10148
- insert(_el$33, createComponent(Key, {
10607
+ insert(_el$37, createComponent(Key, {
10149
10608
  by: (q) => q.queryHash,
10150
10609
  get each() {
10151
10610
  return queries();
@@ -10165,19 +10624,16 @@ var DevtoolsPanel = (props) => {
10165
10624
  }
10166
10625
  }), null);
10167
10626
  createRenderEffect((_p$) => {
10168
- const _v$ = clsx(styles.panel, styles[`panel-position-${position()}`], u`
10169
- flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
10170
- background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
10171
- `, {
10627
+ const _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
10172
10628
  [u`
10173
10629
  min-width: min-content;
10174
10630
  `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
10175
- }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles.dragHandle, styles[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles.closeBtn, styles[`closeBtn-position-${position()}`], "tsqd-minimize-btn"), _v$6 = clsx(styles.queriesContainer, panelWidth() < secondBreakpoint && selectedQueryHash() && u`
10631
+ }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn"), _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && selectedQueryHash() && u`
10176
10632
  height: 50%;
10177
10633
  max-height: 50%;
10178
- `, "tsqd-queries-container"), _v$7 = clsx(styles.row, "tsqd-header"), _v$8 = clsx(styles.logo, "tsqd-text-logo-container"), _v$9 = clsx(styles.tanstackLogo, "tsqd-text-logo-tanstack"), _v$10 = clsx(styles.queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$11 = clsx(styles.row, u`
10634
+ `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = clsx(styles().logo, "tsqd-text-logo-container"), _v$9 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$10 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$11 = clsx(styles().row, u`
10179
10635
  gap: ${tokens.size[2.5]};
10180
- `, "tsqd-filters-actions-container"), _v$12 = clsx(styles.filtersContainer, "tsqd-filters-container"), _v$13 = clsx(styles.filterInput, "tsqd-query-filter-textfield-container"), _v$14 = clsx(styles.filterSelect, "tsqd-query-filter-sort-container"), _v$15 = `Sort order ${sortOrder() === -1 ? "descending" : "ascending"}`, _v$16 = sortOrder() === -1, _v$17 = clsx(styles.actionsContainer, "tsqd-actions-container"), _v$18 = clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$19 = clsx(styles.actionsBtn, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$20 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$21 = offline(), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = clsx(styles.overflowQueryContainer, "tsqd-queries-overflow-container");
10636
+ `, "tsqd-filters-actions-container"), _v$12 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$13 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$14 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$15 = `Sort order ${sortOrder() === -1 ? "descending" : "ascending"}`, _v$16 = sortOrder() === -1, _v$17 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$18 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$19 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$20 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$21 = offline(), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = clsx(styles().overflowQueryContainer, "tsqd-queries-overflow-container");
10181
10637
  _v$ !== _p$._v$ && className(_el$5, _p$._v$ = _v$);
10182
10638
  _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$5.style.setProperty("height", _v$2) : _el$5.style.removeProperty("height"));
10183
10639
  _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$5.style.setProperty("width", _v$3) : _el$5.style.removeProperty("width"));
@@ -10200,7 +10656,7 @@ var DevtoolsPanel = (props) => {
10200
10656
  _v$20 !== _p$._v$20 && setAttribute(_el$25, "aria-label", _p$._v$20 = _v$20);
10201
10657
  _v$21 !== _p$._v$21 && setAttribute(_el$25, "aria-pressed", _p$._v$21 = _v$21);
10202
10658
  _v$22 !== _p$._v$22 && setAttribute(_el$25, "title", _p$._v$22 = _v$22);
10203
- _v$23 !== _p$._v$23 && className(_el$32, _p$._v$23 = _v$23);
10659
+ _v$23 !== _p$._v$23 && className(_el$36, _p$._v$23 = _v$23);
10204
10660
  return _p$;
10205
10661
  }, {
10206
10662
  _v$: void 0,
@@ -10233,7 +10689,15 @@ var DevtoolsPanel = (props) => {
10233
10689
  })();
10234
10690
  };
10235
10691
  var QueryRow = (props) => {
10236
- const styles = getStyles2();
10692
+ const theme = useTheme();
10693
+ const styles = createMemo(() => {
10694
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10695
+ });
10696
+ const {
10697
+ colors,
10698
+ alpha
10699
+ } = tokens;
10700
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10237
10701
  const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
10238
10702
  queryKey: props.query.queryKey
10239
10703
  })?.state);
@@ -10251,41 +10715,47 @@ var QueryRow = (props) => {
10251
10715
  observerCount: observers(),
10252
10716
  isStale: isStale()
10253
10717
  }));
10718
+ const getObserverCountColorStyles = () => {
10719
+ if (color() === "gray") {
10720
+ return u`
10721
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
10722
+ color: ${t2(colors[color()][700], colors[color()][300])};
10723
+ `;
10724
+ }
10725
+ return u`
10726
+ background-color: ${t2(colors[color()][200] + alpha[80], colors[color()][900])};
10727
+ color: ${t2(colors[color()][800], colors[color()][300])};
10728
+ `;
10729
+ };
10254
10730
  return createComponent(Show, {
10255
10731
  get when() {
10256
10732
  return queryState();
10257
10733
  },
10258
10734
  get children() {
10259
- const _el$36 = _tmpl$142(), _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
10260
- _el$36.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
10261
- insert(_el$37, observers);
10262
- insert(_el$38, () => props.query.queryHash);
10263
- insert(_el$36, createComponent(Show, {
10735
+ const _el$40 = _tmpl$182(), _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling;
10736
+ _el$40.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
10737
+ insert(_el$41, observers);
10738
+ insert(_el$42, () => props.query.queryHash);
10739
+ insert(_el$40, createComponent(Show, {
10264
10740
  get when() {
10265
10741
  return isDisabled();
10266
10742
  },
10267
10743
  get children() {
10268
- return _tmpl$132();
10744
+ return _tmpl$172();
10269
10745
  }
10270
10746
  }), null);
10271
10747
  createRenderEffect((_p$) => {
10272
- 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`
10273
- background-color: ${tokens.colors[color()][700]};
10274
- color: ${tokens.colors[color()][300]};
10275
- ` : u`
10276
- background-color: ${tokens.colors[color()][900]};
10277
- color: ${tokens.colors[color()][300]};
10278
- `, "tsqd-query-observer-count");
10279
- _v$24 !== _p$._v$24 && className(_el$36, _p$._v$24 = _v$24);
10280
- _v$25 !== _p$._v$25 && setAttribute(_el$36, "aria-label", _p$._v$25 = _v$25);
10281
- _v$26 !== _p$._v$26 && className(_el$37, _p$._v$26 = _v$26);
10748
+ const _v$24 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$25 = `Query key ${props.query.queryHash}`, _v$26 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
10749
+ _v$24 !== _p$._v$24 && className(_el$40, _p$._v$24 = _v$24);
10750
+ _v$25 !== _p$._v$25 && setAttribute(_el$40, "aria-label", _p$._v$25 = _v$25);
10751
+ _v$26 !== _p$._v$26 && className(_el$41, _p$._v$26 = _v$26);
10282
10752
  return _p$;
10283
10753
  }, {
10284
10754
  _v$24: void 0,
10285
10755
  _v$25: void 0,
10286
10756
  _v$26: void 0
10287
10757
  });
10288
- return _el$36;
10758
+ return _el$40;
10289
10759
  }
10290
10760
  });
10291
10761
  };
@@ -10295,50 +10765,61 @@ var QueryStatusCount = () => {
10295
10765
  const fetching = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "fetching").length);
10296
10766
  const paused = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "paused").length);
10297
10767
  const inactive = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length);
10298
- const styles = getStyles2();
10768
+ const theme = useTheme();
10769
+ const styles = createMemo(() => {
10770
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10771
+ });
10299
10772
  return (() => {
10300
- const _el$40 = _tmpl$23();
10301
- insert(_el$40, createComponent(QueryStatus, {
10773
+ const _el$44 = _tmpl$23();
10774
+ insert(_el$44, createComponent(QueryStatus, {
10302
10775
  label: "Fresh",
10303
10776
  color: "green",
10304
10777
  get count() {
10305
10778
  return fresh();
10306
10779
  }
10307
10780
  }), null);
10308
- insert(_el$40, createComponent(QueryStatus, {
10781
+ insert(_el$44, createComponent(QueryStatus, {
10309
10782
  label: "Fetching",
10310
10783
  color: "blue",
10311
10784
  get count() {
10312
10785
  return fetching();
10313
10786
  }
10314
10787
  }), null);
10315
- insert(_el$40, createComponent(QueryStatus, {
10788
+ insert(_el$44, createComponent(QueryStatus, {
10316
10789
  label: "Paused",
10317
10790
  color: "purple",
10318
10791
  get count() {
10319
10792
  return paused();
10320
10793
  }
10321
10794
  }), null);
10322
- insert(_el$40, createComponent(QueryStatus, {
10795
+ insert(_el$44, createComponent(QueryStatus, {
10323
10796
  label: "Stale",
10324
10797
  color: "yellow",
10325
10798
  get count() {
10326
10799
  return stale();
10327
10800
  }
10328
10801
  }), null);
10329
- insert(_el$40, createComponent(QueryStatus, {
10802
+ insert(_el$44, createComponent(QueryStatus, {
10330
10803
  label: "Inactive",
10331
10804
  color: "gray",
10332
10805
  get count() {
10333
10806
  return inactive();
10334
10807
  }
10335
10808
  }), null);
10336
- createRenderEffect(() => className(_el$40, clsx(styles.queryStatusContainer, "tsqd-query-status-container")));
10337
- return _el$40;
10809
+ createRenderEffect(() => className(_el$44, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
10810
+ return _el$44;
10338
10811
  })();
10339
10812
  };
10340
10813
  var QueryStatus = (props) => {
10341
- const styles = getStyles2();
10814
+ const theme = useTheme();
10815
+ const styles = createMemo(() => {
10816
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10817
+ });
10818
+ const {
10819
+ colors,
10820
+ alpha
10821
+ } = tokens;
10822
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10342
10823
  let tagRef;
10343
10824
  const [mouseOver, setMouseOver] = createSignal(false);
10344
10825
  const [focused, setFocused] = createSignal(false);
@@ -10354,78 +10835,83 @@ var QueryStatus = (props) => {
10354
10835
  return true;
10355
10836
  });
10356
10837
  return (() => {
10357
- const _el$41 = _tmpl$17(), _el$43 = _el$41.firstChild, _el$45 = _el$43.nextSibling;
10838
+ const _el$45 = _tmpl$21(), _el$47 = _el$45.firstChild, _el$49 = _el$47.nextSibling;
10358
10839
  const _ref$3 = tagRef;
10359
- typeof _ref$3 === "function" ? use(_ref$3, _el$41) : tagRef = _el$41;
10360
- _el$41.addEventListener("mouseleave", () => {
10840
+ typeof _ref$3 === "function" ? use(_ref$3, _el$45) : tagRef = _el$45;
10841
+ _el$45.addEventListener("mouseleave", () => {
10361
10842
  setMouseOver(false);
10362
10843
  setFocused(false);
10363
10844
  });
10364
- _el$41.addEventListener("mouseenter", () => setMouseOver(true));
10365
- _el$41.addEventListener("blur", () => setFocused(false));
10366
- _el$41.addEventListener("focus", () => setFocused(true));
10367
- spread(_el$41, mergeProps({
10845
+ _el$45.addEventListener("mouseenter", () => setMouseOver(true));
10846
+ _el$45.addEventListener("blur", () => setFocused(false));
10847
+ _el$45.addEventListener("focus", () => setFocused(true));
10848
+ spread(_el$45, mergeProps({
10368
10849
  get disabled() {
10369
10850
  return showLabel();
10370
10851
  },
10371
10852
  get ["class"]() {
10372
- return clsx(styles.queryStatusTag, !showLabel() && u`
10853
+ return clsx(styles().queryStatusTag, !showLabel() && u`
10373
10854
  cursor: pointer;
10374
10855
  &:hover {
10375
- background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
10856
+ background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
10376
10857
  }
10377
10858
  `, "tsqd-query-status-tag", `tsqd-query-status-tag-${props.label.toLowerCase()}`);
10378
10859
  }
10379
10860
  }, () => mouseOver() || focused() ? {
10380
10861
  "aria-describedby": "tsqd-status-tooltip"
10381
10862
  } : {}), false, true);
10382
- insert(_el$41, createComponent(Show, {
10863
+ insert(_el$45, createComponent(Show, {
10383
10864
  get when() {
10384
10865
  return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
10385
10866
  },
10386
10867
  get children() {
10387
- const _el$42 = _tmpl$15();
10388
- insert(_el$42, () => props.label);
10389
- createRenderEffect(() => className(_el$42, clsx(styles.statusTooltip, "tsqd-query-status-tooltip")));
10390
- return _el$42;
10868
+ const _el$46 = _tmpl$192();
10869
+ insert(_el$46, () => props.label);
10870
+ createRenderEffect(() => className(_el$46, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
10871
+ return _el$46;
10391
10872
  }
10392
- }), _el$43);
10393
- insert(_el$41, createComponent(Show, {
10873
+ }), _el$47);
10874
+ insert(_el$45, createComponent(Show, {
10394
10875
  get when() {
10395
10876
  return showLabel();
10396
10877
  },
10397
10878
  get children() {
10398
- const _el$44 = _tmpl$16();
10399
- insert(_el$44, () => props.label);
10400
- createRenderEffect(() => className(_el$44, clsx(styles.queryStatusTagLabel, "tsqd-query-status-tag-label")));
10401
- return _el$44;
10879
+ const _el$48 = _tmpl$20();
10880
+ insert(_el$48, () => props.label);
10881
+ createRenderEffect(() => className(_el$48, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
10882
+ return _el$48;
10402
10883
  }
10403
- }), _el$45);
10404
- insert(_el$45, () => props.count);
10884
+ }), _el$49);
10885
+ insert(_el$49, () => props.count);
10405
10886
  createRenderEffect((_p$) => {
10406
10887
  const _v$27 = clsx(u`
10407
10888
  width: ${tokens.size[1.5]};
10408
10889
  height: ${tokens.size[1.5]};
10409
10890
  border-radius: ${tokens.border.radius.full};
10410
10891
  background-color: ${tokens.colors[props.color][500]};
10411
- `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles.queryStatusCount, props.count > 0 && props.color !== "gray" ? u`
10412
- background-color: ${tokens.colors[props.color][900]};
10413
- color: ${tokens.colors[props.color][300]};
10414
- ` : u`
10415
- color: ${tokens.colors["gray"][400]};
10416
- `, "tsqd-query-status-tag-count");
10417
- _v$27 !== _p$._v$27 && className(_el$43, _p$._v$27 = _v$27);
10418
- _v$28 !== _p$._v$28 && className(_el$45, _p$._v$28 = _v$28);
10892
+ `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && u`
10893
+ background-color: ${t2(colors[props.color][100], colors[props.color][900])};
10894
+ color: ${t2(colors[props.color][700], colors[props.color][300])};
10895
+ `, "tsqd-query-status-tag-count");
10896
+ _v$27 !== _p$._v$27 && className(_el$47, _p$._v$27 = _v$27);
10897
+ _v$28 !== _p$._v$28 && className(_el$49, _p$._v$28 = _v$28);
10419
10898
  return _p$;
10420
10899
  }, {
10421
10900
  _v$27: void 0,
10422
10901
  _v$28: void 0
10423
10902
  });
10424
- return _el$41;
10903
+ return _el$45;
10425
10904
  })();
10426
10905
  };
10427
10906
  var QueryDetails = () => {
10428
- const styles = getStyles2();
10907
+ const theme = useTheme();
10908
+ const styles = createMemo(() => {
10909
+ return theme() === "dark" ? darkStyles2 : lightStyles2;
10910
+ });
10911
+ const {
10912
+ colors
10913
+ } = tokens;
10914
+ const t2 = (light, dark) => theme() === "dark" ? dark : light;
10429
10915
  const queryClient = useQueryDevtoolsContext().client;
10430
10916
  const [restoringLoading, setRestoringLoading] = createSignal(false);
10431
10917
  const errorTypes = createMemo(() => {
@@ -10482,24 +10968,38 @@ var QueryDetails = () => {
10482
10968
  setRestoringLoading(false);
10483
10969
  }
10484
10970
  });
10971
+ const getQueryStatusColors = () => {
10972
+ if (color() === "gray") {
10973
+ return u`
10974
+ background-color: ${t2(colors[color()][200], colors[color()][700])};
10975
+ color: ${t2(colors[color()][700], colors[color()][300])};
10976
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
10977
+ `;
10978
+ }
10979
+ return u`
10980
+ background-color: ${t2(colors[color()][100], colors[color()][900])};
10981
+ color: ${t2(colors[color()][700], colors[color()][300])};
10982
+ border-color: ${t2(colors[color()][400], colors[color()][600])};
10983
+ `;
10984
+ };
10485
10985
  return createComponent(Show, {
10486
10986
  get when() {
10487
10987
  return createMemo(() => !!activeQuery())() && activeQueryState();
10488
10988
  },
10489
10989
  get children() {
10490
- 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;
10491
- insert(_el$51, () => displayValue(activeQuery().queryKey, true));
10492
- insert(_el$52, statusLabel);
10493
- insert(_el$55, observerCount);
10494
- insert(_el$58, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
10495
- _el$61.$$click = handleRefetch;
10496
- _el$63.$$click = () => queryClient.invalidateQueries(activeQuery());
10497
- _el$65.$$click = () => queryClient.resetQueries(activeQuery());
10498
- _el$67.$$click = () => {
10990
+ const _el$50 = _tmpl$24(), _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$53.firstChild, _el$55 = _el$54.firstChild, _el$56 = _el$54.nextSibling, _el$57 = _el$53.nextSibling, _el$58 = _el$57.firstChild, _el$59 = _el$58.nextSibling, _el$60 = _el$57.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling, _el$63 = _el$52.nextSibling, _el$64 = _el$63.nextSibling, _el$65 = _el$64.firstChild, _el$66 = _el$65.firstChild, _el$67 = _el$65.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$67.nextSibling, _el$70 = _el$69.firstChild, _el$71 = _el$69.nextSibling, _el$72 = _el$71.firstChild, _el$73 = _el$71.nextSibling, _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling, _el$84 = _el$64.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling;
10991
+ insert(_el$55, () => displayValue(activeQuery().queryKey, true));
10992
+ insert(_el$56, statusLabel);
10993
+ insert(_el$59, observerCount);
10994
+ insert(_el$62, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
10995
+ _el$65.$$click = handleRefetch;
10996
+ _el$67.$$click = () => queryClient.invalidateQueries(activeQuery());
10997
+ _el$69.$$click = () => queryClient.resetQueries(activeQuery());
10998
+ _el$71.$$click = () => {
10499
10999
  queryClient.removeQueries(activeQuery());
10500
11000
  setSelectedQueryHash(null);
10501
11001
  };
10502
- _el$69.$$click = () => {
11002
+ _el$73.$$click = () => {
10503
11003
  if (activeQuery()?.state.data === void 0) {
10504
11004
  setRestoringLoading(true);
10505
11005
  restoreQueryAfterLoadingOrError();
@@ -10527,88 +11027,91 @@ var QueryDetails = () => {
10527
11027
  });
10528
11028
  }
10529
11029
  };
10530
- insert(_el$69, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$71);
10531
- insert(_el$60, createComponent(Show, {
11030
+ insert(_el$73, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$75);
11031
+ insert(_el$64, createComponent(Show, {
10532
11032
  get when() {
10533
11033
  return errorTypes().length === 0 || queryStatus() === "error";
10534
11034
  },
10535
11035
  get children() {
10536
- const _el$72 = _tmpl$18(), _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling;
10537
- _el$72.$$click = () => {
11036
+ const _el$76 = _tmpl$222(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
11037
+ _el$76.$$click = () => {
10538
11038
  if (!activeQuery().state.error) {
10539
11039
  triggerError();
10540
11040
  } else {
10541
11041
  queryClient.resetQueries(activeQuery());
10542
11042
  }
10543
11043
  };
10544
- insert(_el$72, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$74);
11044
+ insert(_el$76, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$78);
10545
11045
  createRenderEffect((_p$) => {
10546
11046
  const _v$29 = clsx(u`
10547
- color: ${tokens.colors.red[400]};
11047
+ color: ${t2(colors.red[500], colors.red[400])};
10548
11048
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$30 = queryStatus() === "pending", _v$31 = u`
10549
- background-color: ${tokens.colors.red[400]};
11049
+ background-color: ${t2(colors.red[500], colors.red[400])};
10550
11050
  `;
10551
- _v$29 !== _p$._v$29 && className(_el$72, _p$._v$29 = _v$29);
10552
- _v$30 !== _p$._v$30 && (_el$72.disabled = _p$._v$30 = _v$30);
10553
- _v$31 !== _p$._v$31 && className(_el$73, _p$._v$31 = _v$31);
11051
+ _v$29 !== _p$._v$29 && className(_el$76, _p$._v$29 = _v$29);
11052
+ _v$30 !== _p$._v$30 && (_el$76.disabled = _p$._v$30 = _v$30);
11053
+ _v$31 !== _p$._v$31 && className(_el$77, _p$._v$31 = _v$31);
10554
11054
  return _p$;
10555
11055
  }, {
10556
11056
  _v$29: void 0,
10557
11057
  _v$30: void 0,
10558
11058
  _v$31: void 0
10559
11059
  });
10560
- return _el$72;
11060
+ return _el$76;
10561
11061
  }
10562
11062
  }), null);
10563
- insert(_el$60, createComponent(Show, {
11063
+ insert(_el$64, createComponent(Show, {
10564
11064
  get when() {
10565
11065
  return !(errorTypes().length === 0 || queryStatus() === "error");
10566
11066
  },
10567
11067
  get children() {
10568
- const _el$75 = _tmpl$19(), _el$76 = _el$75.firstChild, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling; _el$78.firstChild;
10569
- _el$78.addEventListener("change", (e2) => {
10570
- const errorType = errorTypes().find((t2) => t2.name === e2.currentTarget.value);
11068
+ const _el$79 = _tmpl$232(), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling; _el$82.firstChild;
11069
+ _el$82.addEventListener("change", (e2) => {
11070
+ const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
10571
11071
  triggerError(errorType);
10572
11072
  });
10573
- insert(_el$78, createComponent(For, {
11073
+ insert(_el$82, createComponent(For, {
10574
11074
  get each() {
10575
11075
  return errorTypes();
10576
11076
  },
10577
11077
  children: (errorType) => (() => {
10578
- const _el$84 = _tmpl$21();
10579
- insert(_el$84, () => errorType.name);
10580
- createRenderEffect(() => _el$84.value = errorType.name);
10581
- return _el$84;
11078
+ const _el$88 = _tmpl$25();
11079
+ insert(_el$88, () => errorType.name);
11080
+ createRenderEffect(() => _el$88.value = errorType.name);
11081
+ return _el$88;
10582
11082
  })()
10583
11083
  }), null);
10584
- insert(_el$75, createComponent(ChevronDown, {}), null);
11084
+ insert(_el$79, createComponent(ChevronDown, {}), null);
10585
11085
  createRenderEffect((_p$) => {
10586
- const _v$32 = clsx(styles.actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
11086
+ const _v$32 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
10587
11087
  background-color: ${tokens.colors.red[400]};
10588
11088
  `, _v$34 = queryStatus() === "pending";
10589
- _v$32 !== _p$._v$32 && className(_el$75, _p$._v$32 = _v$32);
10590
- _v$33 !== _p$._v$33 && className(_el$76, _p$._v$33 = _v$33);
10591
- _v$34 !== _p$._v$34 && (_el$78.disabled = _p$._v$34 = _v$34);
11089
+ _v$32 !== _p$._v$32 && className(_el$79, _p$._v$32 = _v$32);
11090
+ _v$33 !== _p$._v$33 && className(_el$80, _p$._v$33 = _v$33);
11091
+ _v$34 !== _p$._v$34 && (_el$82.disabled = _p$._v$34 = _v$34);
10592
11092
  return _p$;
10593
11093
  }, {
10594
11094
  _v$32: void 0,
10595
11095
  _v$33: void 0,
10596
11096
  _v$34: void 0
10597
11097
  });
10598
- return _el$75;
11098
+ return _el$79;
10599
11099
  }
10600
11100
  }), null);
10601
- _el$81.style.setProperty("padding", "0.5rem");
10602
- insert(_el$81, createComponent(Explorer, {
11101
+ _el$85.style.setProperty("padding", "0.5rem");
11102
+ insert(_el$85, createComponent(Explorer, {
10603
11103
  label: "Data",
10604
11104
  defaultExpanded: ["Data"],
10605
11105
  get value() {
10606
11106
  return activeQueryStateData();
10607
11107
  },
10608
- copyable: true
11108
+ editable: true,
11109
+ get activeQuery() {
11110
+ return activeQuery();
11111
+ }
10609
11112
  }));
10610
- _el$83.style.setProperty("padding", "0.5rem");
10611
- insert(_el$83, createComponent(Explorer, {
11113
+ _el$87.style.setProperty("padding", "0.5rem");
11114
+ insert(_el$87, createComponent(Explorer, {
10612
11115
  label: "Query",
10613
11116
  defaultExpanded: ["Query", "queryKey"],
10614
11117
  get value() {
@@ -10616,58 +11119,50 @@ var QueryDetails = () => {
10616
11119
  }
10617
11120
  }));
10618
11121
  createRenderEffect((_p$) => {
10619
- 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`
10620
- background-color: ${tokens.colors[color()][700]};
10621
- color: ${tokens.colors[color()][300]};
10622
- border-color: ${tokens.colors[color()][600]};
10623
- ` : u`
10624
- background-color: ${tokens.colors[color()][900]};
10625
- color: ${tokens.colors[color()][300]};
10626
- border-color: ${tokens.colors[color()][600]};
10627
- `), _v$39 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles.actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
10628
- color: ${tokens.colors.blue[400]};
11122
+ const _v$35 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$36 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$37 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$38 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$39 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
11123
+ color: ${t2(colors.blue[600], colors.blue[400])};
10629
11124
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$42 = statusLabel() === "fetching", _v$43 = u`
10630
- background-color: ${tokens.colors.blue[400]};
11125
+ background-color: ${t2(colors.blue[600], colors.blue[400])};
10631
11126
  `, _v$44 = clsx(u`
10632
- color: ${tokens.colors.yellow[400]};
11127
+ color: ${t2(colors.yellow[600], colors.yellow[400])};
10633
11128
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$45 = queryStatus() === "pending", _v$46 = u`
10634
- background-color: ${tokens.colors.yellow[400]};
11129
+ background-color: ${t2(colors.yellow[600], colors.yellow[400])};
10635
11130
  `, _v$47 = clsx(u`
10636
- color: ${tokens.colors.gray[300]};
11131
+ color: ${t2(colors.gray[600], colors.gray[300])};
10637
11132
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$48 = queryStatus() === "pending", _v$49 = u`
10638
- background-color: ${tokens.colors.gray[400]};
11133
+ background-color: ${t2(colors.gray[600], colors.gray[400])};
10639
11134
  `, _v$50 = clsx(u`
10640
- color: ${tokens.colors.pink[400]};
11135
+ color: ${t2(colors.pink[500], colors.pink[400])};
10641
11136
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$51 = statusLabel() === "fetching", _v$52 = u`
10642
- background-color: ${tokens.colors.pink[400]};
11137
+ background-color: ${t2(colors.pink[500], colors.pink[400])};
10643
11138
  `, _v$53 = clsx(u`
10644
- color: ${tokens.colors.cyan[400]};
11139
+ color: ${t2(colors.cyan[500], colors.cyan[400])};
10645
11140
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$54 = restoringLoading(), _v$55 = u`
10646
- background-color: ${tokens.colors.cyan[400]};
10647
- `, _v$56 = clsx(styles.detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles.detailsHeader, "tsqd-query-details-header");
10648
- _v$35 !== _p$._v$35 && className(_el$46, _p$._v$35 = _v$35);
10649
- _v$36 !== _p$._v$36 && className(_el$47, _p$._v$36 = _v$36);
10650
- _v$37 !== _p$._v$37 && className(_el$48, _p$._v$37 = _v$37);
10651
- _v$38 !== _p$._v$38 && className(_el$52, _p$._v$38 = _v$38);
10652
- _v$39 !== _p$._v$39 && className(_el$59, _p$._v$39 = _v$39);
10653
- _v$40 !== _p$._v$40 && className(_el$60, _p$._v$40 = _v$40);
10654
- _v$41 !== _p$._v$41 && className(_el$61, _p$._v$41 = _v$41);
10655
- _v$42 !== _p$._v$42 && (_el$61.disabled = _p$._v$42 = _v$42);
10656
- _v$43 !== _p$._v$43 && className(_el$62, _p$._v$43 = _v$43);
10657
- _v$44 !== _p$._v$44 && className(_el$63, _p$._v$44 = _v$44);
10658
- _v$45 !== _p$._v$45 && (_el$63.disabled = _p$._v$45 = _v$45);
10659
- _v$46 !== _p$._v$46 && className(_el$64, _p$._v$46 = _v$46);
10660
- _v$47 !== _p$._v$47 && className(_el$65, _p$._v$47 = _v$47);
10661
- _v$48 !== _p$._v$48 && (_el$65.disabled = _p$._v$48 = _v$48);
10662
- _v$49 !== _p$._v$49 && className(_el$66, _p$._v$49 = _v$49);
10663
- _v$50 !== _p$._v$50 && className(_el$67, _p$._v$50 = _v$50);
10664
- _v$51 !== _p$._v$51 && (_el$67.disabled = _p$._v$51 = _v$51);
10665
- _v$52 !== _p$._v$52 && className(_el$68, _p$._v$52 = _v$52);
10666
- _v$53 !== _p$._v$53 && className(_el$69, _p$._v$53 = _v$53);
10667
- _v$54 !== _p$._v$54 && (_el$69.disabled = _p$._v$54 = _v$54);
10668
- _v$55 !== _p$._v$55 && className(_el$70, _p$._v$55 = _v$55);
10669
- _v$56 !== _p$._v$56 && className(_el$80, _p$._v$56 = _v$56);
10670
- _v$57 !== _p$._v$57 && className(_el$82, _p$._v$57 = _v$57);
11141
+ background-color: ${t2(colors.cyan[500], colors.cyan[400])};
11142
+ `, _v$56 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles().detailsHeader, "tsqd-query-details-header");
11143
+ _v$35 !== _p$._v$35 && className(_el$50, _p$._v$35 = _v$35);
11144
+ _v$36 !== _p$._v$36 && className(_el$51, _p$._v$36 = _v$36);
11145
+ _v$37 !== _p$._v$37 && className(_el$52, _p$._v$37 = _v$37);
11146
+ _v$38 !== _p$._v$38 && className(_el$56, _p$._v$38 = _v$38);
11147
+ _v$39 !== _p$._v$39 && className(_el$63, _p$._v$39 = _v$39);
11148
+ _v$40 !== _p$._v$40 && className(_el$64, _p$._v$40 = _v$40);
11149
+ _v$41 !== _p$._v$41 && className(_el$65, _p$._v$41 = _v$41);
11150
+ _v$42 !== _p$._v$42 && (_el$65.disabled = _p$._v$42 = _v$42);
11151
+ _v$43 !== _p$._v$43 && className(_el$66, _p$._v$43 = _v$43);
11152
+ _v$44 !== _p$._v$44 && className(_el$67, _p$._v$44 = _v$44);
11153
+ _v$45 !== _p$._v$45 && (_el$67.disabled = _p$._v$45 = _v$45);
11154
+ _v$46 !== _p$._v$46 && className(_el$68, _p$._v$46 = _v$46);
11155
+ _v$47 !== _p$._v$47 && className(_el$69, _p$._v$47 = _v$47);
11156
+ _v$48 !== _p$._v$48 && (_el$69.disabled = _p$._v$48 = _v$48);
11157
+ _v$49 !== _p$._v$49 && className(_el$70, _p$._v$49 = _v$49);
11158
+ _v$50 !== _p$._v$50 && className(_el$71, _p$._v$50 = _v$50);
11159
+ _v$51 !== _p$._v$51 && (_el$71.disabled = _p$._v$51 = _v$51);
11160
+ _v$52 !== _p$._v$52 && className(_el$72, _p$._v$52 = _v$52);
11161
+ _v$53 !== _p$._v$53 && className(_el$73, _p$._v$53 = _v$53);
11162
+ _v$54 !== _p$._v$54 && (_el$73.disabled = _p$._v$54 = _v$54);
11163
+ _v$55 !== _p$._v$55 && className(_el$74, _p$._v$55 = _v$55);
11164
+ _v$56 !== _p$._v$56 && className(_el$84, _p$._v$56 = _v$56);
11165
+ _v$57 !== _p$._v$57 && className(_el$86, _p$._v$57 = _v$57);
10671
11166
  return _p$;
10672
11167
  }, {
10673
11168
  _v$35: void 0,
@@ -10694,7 +11189,7 @@ var QueryDetails = () => {
10694
11189
  _v$56: void 0,
10695
11190
  _v$57: void 0
10696
11191
  });
10697
- return _el$46;
11192
+ return _el$50;
10698
11193
  }
10699
11194
  });
10700
11195
  };
@@ -10734,7 +11229,7 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
10734
11229
  });
10735
11230
  return value;
10736
11231
  };
10737
- var getStyles2 = () => {
11232
+ var stylesFactory2 = (theme) => {
10738
11233
  const {
10739
11234
  colors,
10740
11235
  font,
@@ -10743,6 +11238,7 @@ var getStyles2 = () => {
10743
11238
  shadow,
10744
11239
  border
10745
11240
  } = tokens;
11241
+ const t2 = (light, dark) => theme === "light" ? light : dark;
10746
11242
  return {
10747
11243
  devtoolsBtn: u`
10748
11244
  z-index: 100000;
@@ -10804,8 +11300,6 @@ var getStyles2 = () => {
10804
11300
  display: flex;
10805
11301
  gap: ${tokens.size[0.5]};
10806
11302
  & * {
10807
- font-family: 'Inter', sans-serif;
10808
- color: ${colors.gray[300]};
10809
11303
  box-sizing: border-box;
10810
11304
  text-transform: none;
10811
11305
  }
@@ -10832,7 +11326,7 @@ var getStyles2 = () => {
10832
11326
  left: 0;
10833
11327
  max-height: 90%;
10834
11328
  min-height: 3.5rem;
10835
- border-bottom: ${colors.darkGray[300]} 1px solid;
11329
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
10836
11330
  `,
10837
11331
  "panel-position-bottom": u`
10838
11332
  bottom: 0;
@@ -10840,20 +11334,20 @@ var getStyles2 = () => {
10840
11334
  left: 0;
10841
11335
  max-height: 90%;
10842
11336
  min-height: 3.5rem;
10843
- border-top: ${colors.darkGray[300]} 1px solid;
11337
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
10844
11338
  `,
10845
11339
  "panel-position-right": u`
10846
11340
  bottom: 0;
10847
11341
  right: 0;
10848
11342
  top: 0;
10849
- border-left: ${colors.darkGray[300]} 1px solid;
11343
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
10850
11344
  max-width: 90%;
10851
11345
  `,
10852
11346
  "panel-position-left": u`
10853
11347
  bottom: 0;
10854
11348
  left: 0;
10855
11349
  top: 0;
10856
- border-right: ${colors.darkGray[300]} 1px solid;
11350
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
10857
11351
  max-width: 90%;
10858
11352
  `,
10859
11353
  closeBtn: u`
@@ -10864,13 +11358,15 @@ var getStyles2 = () => {
10864
11358
  align-items: center;
10865
11359
  justify-content: center;
10866
11360
  outline: none;
11361
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
10867
11362
  &:hover {
10868
- background-color: ${colors.darkGray[500]};
11363
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
10869
11364
  }
10870
11365
  &:focus-visible {
10871
11366
  outline: 2px solid ${colors.blue[600]};
10872
11367
  }
10873
11368
  & svg {
11369
+ color: ${t2(colors.gray[600], colors.gray[400])};
10874
11370
  width: ${size2[2]};
10875
11371
  height: ${size2[2]};
10876
11372
  }
@@ -10879,11 +11375,10 @@ var getStyles2 = () => {
10879
11375
  bottom: 0;
10880
11376
  right: ${size2[2]};
10881
11377
  transform: translate(0, 100%);
10882
- background-color: ${colors.darkGray[700]};
10883
- border-right: ${colors.darkGray[300]} 1px solid;
10884
- border-left: ${colors.darkGray[300]} 1px solid;
11378
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11379
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
10885
11380
  border-top: none;
10886
- border-bottom: ${colors.darkGray[300]} 1px solid;
11381
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
10887
11382
  border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
10888
11383
  padding: ${size2[0.5]} ${size2[1.5]} ${size2[1]} ${size2[1.5]};
10889
11384
 
@@ -10904,10 +11399,9 @@ var getStyles2 = () => {
10904
11399
  top: 0;
10905
11400
  right: ${size2[2]};
10906
11401
  transform: translate(0, -100%);
10907
- background-color: ${colors.darkGray[700]};
10908
- border-right: ${colors.darkGray[300]} 1px solid;
10909
- border-left: ${colors.darkGray[300]} 1px solid;
10910
- border-top: ${colors.darkGray[300]} 1px solid;
11402
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11403
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11404
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
10911
11405
  border-bottom: none;
10912
11406
  border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
10913
11407
  padding: ${size2[1]} ${size2[1.5]} ${size2[0.5]} ${size2[1.5]};
@@ -10925,11 +11419,10 @@ var getStyles2 = () => {
10925
11419
  bottom: ${size2[2]};
10926
11420
  left: 0;
10927
11421
  transform: translate(-100%, 0);
10928
- background-color: ${colors.darkGray[700]};
10929
11422
  border-right: none;
10930
- border-left: ${colors.darkGray[300]} 1px solid;
10931
- border-top: ${colors.darkGray[300]} 1px solid;
10932
- border-bottom: ${colors.darkGray[300]} 1px solid;
11423
+ border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11424
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11425
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
10933
11426
  border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
10934
11427
  padding: ${size2[1.5]} ${size2[0.5]} ${size2[1.5]} ${size2[1]};
10935
11428
 
@@ -10949,11 +11442,10 @@ var getStyles2 = () => {
10949
11442
  bottom: ${size2[2]};
10950
11443
  right: 0;
10951
11444
  transform: translate(100%, 0);
10952
- background-color: ${colors.darkGray[700]};
10953
11445
  border-left: none;
10954
- border-right: ${colors.darkGray[300]} 1px solid;
10955
- border-top: ${colors.darkGray[300]} 1px solid;
10956
- border-bottom: ${colors.darkGray[300]} 1px solid;
11446
+ border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11447
+ border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
11448
+ border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
10957
11449
  border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
10958
11450
  padding: ${size2[1.5]} ${size2[1]} ${size2[1.5]} ${size2[0.5]};
10959
11451
 
@@ -10971,15 +11463,18 @@ var getStyles2 = () => {
10971
11463
  `,
10972
11464
  queriesContainer: u`
10973
11465
  flex: 1 1 700px;
10974
- background-color: ${colors.darkGray[700]};
11466
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
10975
11467
  display: flex;
10976
11468
  flex-direction: column;
11469
+ & * {
11470
+ font-family: 'Inter', sans-serif;
11471
+ }
10977
11472
  `,
10978
11473
  dragHandle: u`
10979
11474
  position: absolute;
10980
11475
  transition: background-color 0.125s ease;
10981
11476
  &:hover {
10982
- background-color: ${colors.purple[400]}${alpha[90]};
11477
+ background-color: ${colors.purple[400]}${t2("", alpha[90])};
10983
11478
  }
10984
11479
  z-index: 4;
10985
11480
  `,
@@ -11013,7 +11508,7 @@ var getStyles2 = () => {
11013
11508
  align-items: center;
11014
11509
  padding: ${tokens.size[2]} ${tokens.size[2.5]};
11015
11510
  gap: ${tokens.size[3]};
11016
- border-bottom: ${colors.darkGray[500]} 1px solid;
11511
+ border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
11017
11512
  align-items: center;
11018
11513
  & > button {
11019
11514
  padding: 0;
@@ -11040,11 +11535,15 @@ var getStyles2 = () => {
11040
11535
  font-weight: ${font.weight.bold};
11041
11536
  line-height: ${font.lineHeight.xs};
11042
11537
  white-space: nowrap;
11538
+ color: ${t2(colors.gray[600], colors.gray[300])};
11043
11539
  `,
11044
11540
  queryFlavorLogo: u`
11045
11541
  font-weight: ${font.weight.semibold};
11046
11542
  font-size: ${font.size.xs};
11047
- background: linear-gradient(to right, #dd524b, #e9a03b);
11543
+ background: linear-gradient(
11544
+ to right,
11545
+ ${t2("#ea4037, #ff9b11", "#dd524b, #e9a03b")}
11546
+ );
11048
11547
  background-clip: text;
11049
11548
  -webkit-background-clip: text;
11050
11549
  line-height: 1;
@@ -11059,14 +11558,17 @@ var getStyles2 = () => {
11059
11558
  queryStatusTag: u`
11060
11559
  display: flex;
11061
11560
  gap: ${tokens.size[1.5]};
11062
- background: ${colors.darkGray[500]};
11561
+ box-sizing: border-box;
11562
+ height: ${tokens.size[6.5]};
11563
+ background: ${t2(colors.gray[50], colors.darkGray[500])};
11564
+ color: ${t2(colors.gray[700], colors.gray[300])};
11063
11565
  border-radius: ${tokens.border.radius.sm};
11064
11566
  font-size: ${font.size.sm};
11065
11567
  padding: ${tokens.size[1]};
11066
- padding-left: ${tokens.size[2]};
11568
+ padding-left: ${tokens.size[1.5]};
11067
11569
  align-items: center;
11068
11570
  font-weight: ${font.weight.medium};
11069
- border: none;
11571
+ border: ${t2("1px solid " + colors.gray[300], "1px solid transparent")};
11070
11572
  user-select: none;
11071
11573
  position: relative;
11072
11574
  &:focus-visible {
@@ -11083,8 +11585,8 @@ var getStyles2 = () => {
11083
11585
  display: flex;
11084
11586
  align-items: center;
11085
11587
  justify-content: center;
11086
- color: ${colors.gray[400]};
11087
- background-color: ${colors.darkGray[300]};
11588
+ color: ${t2(colors.gray[500], colors.gray[400])};
11589
+ background-color: ${t2(colors.gray[200], colors.darkGray[300])};
11088
11590
  border-radius: 2px;
11089
11591
  font-variant-numeric: tabular-nums;
11090
11592
  height: ${tokens.size[4.5]};
@@ -11092,15 +11594,15 @@ var getStyles2 = () => {
11092
11594
  statusTooltip: u`
11093
11595
  position: absolute;
11094
11596
  z-index: 1;
11095
- background-color: ${colors.darkGray[500]};
11597
+ background-color: ${t2(colors.gray[50], colors.darkGray[500])};
11096
11598
  top: 100%;
11097
11599
  left: 50%;
11098
11600
  transform: translate(-50%, calc(${tokens.size[2]}));
11099
11601
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11100
- border-radius: ${tokens.border.radius.md};
11602
+ border-radius: ${tokens.border.radius.sm};
11101
11603
  font-size: ${font.size.xs};
11102
- border: 1px solid ${colors.gray[600]};
11103
- color: ${tokens.colors["gray"][300]};
11604
+ border: 1px solid ${t2(colors.gray[400], colors.gray[600])};
11605
+ color: ${t2(colors["gray"][600], colors["gray"][300])};
11104
11606
 
11105
11607
  &::before {
11106
11608
  top: 0px;
@@ -11109,7 +11611,8 @@ var getStyles2 = () => {
11109
11611
  left: 50%;
11110
11612
  transform: translate(-50%, -100%);
11111
11613
  position: absolute;
11112
- border-color: transparent transparent ${colors.gray[600]} transparent;
11614
+ border-color: transparent transparent
11615
+ ${t2(colors.gray[400], colors.gray[600])} transparent;
11113
11616
  border-style: solid;
11114
11617
  border-width: 7px;
11115
11618
  /* transform: rotate(180deg); */
@@ -11120,17 +11623,14 @@ var getStyles2 = () => {
11120
11623
  content: ' ';
11121
11624
  display: block;
11122
11625
  left: 50%;
11123
- transform: translate(-50%, calc(-100% + 2.5px));
11626
+ transform: translate(-50%, calc(-100% + 2px));
11124
11627
  position: absolute;
11125
- border-color: transparent transparent ${colors.darkGray[500]}
11126
- transparent;
11628
+ border-color: transparent transparent
11629
+ ${t2(colors.gray[100], colors.darkGray[500])} transparent;
11127
11630
  border-style: solid;
11128
11631
  border-width: 7px;
11129
11632
  }
11130
11633
  `,
11131
- selectedQueryRow: u`
11132
- background-color: ${colors.darkGray[500]};
11133
- `,
11134
11634
  filtersContainer: u`
11135
11635
  display: flex;
11136
11636
  gap: ${tokens.size[2]};
@@ -11139,47 +11639,52 @@ var getStyles2 = () => {
11139
11639
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11140
11640
  padding-right: ${tokens.size[1.5]};
11141
11641
  border-radius: ${tokens.border.radius.sm};
11142
- background-color: ${colors.darkGray[400]};
11642
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11643
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11644
+ color: ${t2(colors.gray[700], colors.gray[300])};
11143
11645
  font-size: ${font.size.xs};
11144
11646
  display: flex;
11145
11647
  align-items: center;
11146
11648
  line-height: ${font.lineHeight.sm};
11147
11649
  gap: ${tokens.size[1.5]};
11148
11650
  max-width: 160px;
11149
- border: 1px solid ${colors.darkGray[200]};
11150
11651
  &:focus-visible {
11151
11652
  outline-offset: 2px;
11152
11653
  border-radius: ${border.radius.xs};
11153
11654
  outline: 2px solid ${colors.blue[800]};
11154
11655
  }
11656
+ & svg {
11657
+ color: ${t2(colors.gray[500], colors.gray[400])};
11658
+ }
11155
11659
  }
11156
11660
  `,
11157
11661
  filterInput: u`
11158
- padding: ${tokens.size[0.5]} ${tokens.size[2]};
11662
+ padding: ${size2[0.5]} ${size2[2]};
11159
11663
  border-radius: ${tokens.border.radius.sm};
11160
- background-color: ${colors.darkGray[400]};
11664
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11161
11665
  display: flex;
11162
11666
  box-sizing: content-box;
11163
11667
  align-items: center;
11164
11668
  gap: ${tokens.size[1.5]};
11165
11669
  max-width: 160px;
11166
11670
  min-width: 100px;
11167
- border: 1px solid ${colors.darkGray[200]};
11671
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11168
11672
  height: min-content;
11673
+ color: ${t2(colors.gray[600], colors.gray[400])};
11169
11674
  & > svg {
11170
- width: ${tokens.size[3]};
11171
- height: ${tokens.size[3]};
11675
+ width: ${size2[3]};
11676
+ height: ${size2[3]};
11172
11677
  }
11173
11678
  & input {
11174
11679
  font-size: ${font.size.xs};
11175
11680
  width: 100%;
11176
- background-color: ${colors.darkGray[400]};
11681
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11177
11682
  border: none;
11178
11683
  padding: 0;
11179
11684
  line-height: ${font.lineHeight.sm};
11180
- color: ${colors.gray[300]};
11685
+ color: ${t2(colors.gray[700], colors.gray[300])};
11181
11686
  &::placeholder {
11182
- color: ${colors.gray[300]};
11687
+ color: ${t2(colors.gray[700], colors.gray[300])};
11183
11688
  }
11184
11689
  &:focus {
11185
11690
  outline: none;
@@ -11195,24 +11700,26 @@ var getStyles2 = () => {
11195
11700
  filterSelect: u`
11196
11701
  padding: ${tokens.size[0.5]} ${tokens.size[2]};
11197
11702
  border-radius: ${tokens.border.radius.sm};
11198
- background-color: ${colors.darkGray[400]};
11703
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11199
11704
  display: flex;
11200
11705
  align-items: center;
11201
11706
  gap: ${tokens.size[1.5]};
11202
11707
  box-sizing: content-box;
11203
11708
  max-width: 160px;
11204
- border: 1px solid ${colors.darkGray[200]};
11709
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11205
11710
  height: min-content;
11206
11711
  & > svg {
11712
+ color: ${t2(colors.gray[600], colors.gray[400])};
11207
11713
  width: ${tokens.size[2]};
11208
11714
  height: ${tokens.size[2]};
11209
11715
  }
11210
11716
  & > select {
11211
11717
  appearance: none;
11718
+ color: ${t2(colors.gray[700], colors.gray[300])};
11212
11719
  min-width: 100px;
11213
11720
  line-height: ${font.lineHeight.sm};
11214
11721
  font-size: ${font.size.xs};
11215
- background-color: ${colors.darkGray[400]};
11722
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11216
11723
  border: none;
11217
11724
  &:focus {
11218
11725
  outline: none;
@@ -11230,7 +11737,8 @@ var getStyles2 = () => {
11230
11737
  `,
11231
11738
  actionsBtn: u`
11232
11739
  border-radius: ${tokens.border.radius.sm};
11233
- background-color: ${colors.darkGray[400]};
11740
+ background-color: ${t2(colors.gray[100], colors.darkGray[400])};
11741
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
11234
11742
  width: 1.625rem;
11235
11743
  height: 1.625rem;
11236
11744
  justify-content: center;
@@ -11238,13 +11746,13 @@ var getStyles2 = () => {
11238
11746
  align-items: center;
11239
11747
  gap: ${tokens.size[1.5]};
11240
11748
  max-width: 160px;
11241
- border: 1px solid ${colors.darkGray[200]};
11242
11749
  cursor: pointer;
11243
11750
  padding: 0;
11244
11751
  &:hover {
11245
- background-color: ${colors.darkGray[500]};
11752
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11246
11753
  }
11247
11754
  & svg {
11755
+ color: ${t2(colors.gray[700], colors.gray[300])};
11248
11756
  width: ${tokens.size[3]};
11249
11757
  height: ${tokens.size[3]};
11250
11758
  }
@@ -11254,6 +11762,12 @@ var getStyles2 = () => {
11254
11762
  outline: 2px solid ${colors.blue[800]};
11255
11763
  }
11256
11764
  `,
11765
+ actionsBtnOffline: u`
11766
+ & svg {
11767
+ stroke: ${t2(colors.yellow[700], colors.yellow[500])};
11768
+ fill: ${t2(colors.yellow[700], colors.yellow[500])};
11769
+ }
11770
+ `,
11257
11771
  overflowQueryContainer: u`
11258
11772
  flex: 1;
11259
11773
  overflow-y: auto;
@@ -11266,9 +11780,11 @@ var getStyles2 = () => {
11266
11780
  display: flex;
11267
11781
  align-items: center;
11268
11782
  padding: 0;
11269
- background-color: inherit;
11270
11783
  border: none;
11271
11784
  cursor: pointer;
11785
+ color: ${t2(colors.gray[700], colors.gray[300])};
11786
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11787
+ line-height: 1;
11272
11788
  &:focus {
11273
11789
  outline: none;
11274
11790
  }
@@ -11278,7 +11794,7 @@ var getStyles2 = () => {
11278
11794
  outline: 2px solid ${colors.blue[800]};
11279
11795
  }
11280
11796
  &:hover .tsqd-query-hash {
11281
- background-color: ${colors.darkGray[600]};
11797
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
11282
11798
  }
11283
11799
 
11284
11800
  & .tsqd-query-observer-count {
@@ -11293,7 +11809,7 @@ var getStyles2 = () => {
11293
11809
  font-weight: ${font.weight.medium};
11294
11810
  border-bottom-width: 1px;
11295
11811
  border-bottom-style: solid;
11296
- border-bottom: 1px solid ${colors.darkGray[700]};
11812
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[700])};
11297
11813
  }
11298
11814
  & .tsqd-query-hash {
11299
11815
  user-select: text;
@@ -11304,7 +11820,7 @@ var getStyles2 = () => {
11304
11820
  flex: 1;
11305
11821
  padding: ${tokens.size[1]} ${tokens.size[2]};
11306
11822
  font-family: 'Menlo', 'Fira Code', monospace;
11307
- border-bottom: 1px solid ${colors.darkGray[400]};
11823
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11308
11824
  text-align: left;
11309
11825
  text-overflow: clip;
11310
11826
  word-break: break-word;
@@ -11315,15 +11831,20 @@ var getStyles2 = () => {
11315
11831
  display: flex;
11316
11832
  align-items: center;
11317
11833
  padding: 0 ${tokens.size[2]};
11318
- color: ${colors.gray[300]};
11319
- background-color: ${colors.darkGray[600]};
11320
- border-bottom: 1px solid ${colors.darkGray[400]};
11834
+ color: ${t2(colors.gray[800], colors.gray[300])};
11835
+ background-color: ${t2(colors.gray[300], colors.darkGray[600])};
11836
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11321
11837
  font-size: ${font.size.xs};
11322
11838
  }
11323
11839
  `,
11840
+ selectedQueryRow: u`
11841
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11842
+ `,
11324
11843
  detailsContainer: u`
11325
11844
  flex: 1 1 700px;
11326
- background-color: ${colors.darkGray[700]};
11845
+ background-color: ${t2(colors.gray[50], colors.darkGray[700])};
11846
+ color: ${t2(colors.gray[700], colors.gray[300])};
11847
+ font-family: 'Inter', sans-serif;
11327
11848
  display: flex;
11328
11849
  flex-direction: column;
11329
11850
  overflow-y: auto;
@@ -11331,10 +11852,11 @@ var getStyles2 = () => {
11331
11852
  text-align: left;
11332
11853
  `,
11333
11854
  detailsHeader: u`
11855
+ font-family: 'Inter', sans-serif;
11334
11856
  position: sticky;
11335
11857
  top: 0;
11336
11858
  z-index: 2;
11337
- background-color: ${colors.darkGray[600]};
11859
+ background-color: ${t2(colors.gray[200], colors.darkGray[600])};
11338
11860
  padding: ${tokens.size[1.5]} ${tokens.size[2]};
11339
11861
  font-weight: ${font.weight.medium};
11340
11862
  font-size: ${font.size.xs};
@@ -11367,6 +11889,10 @@ var getStyles2 = () => {
11367
11889
  font-size: ${font.size.xs};
11368
11890
  line-height: ${font.lineHeight.xs};
11369
11891
  }
11892
+
11893
+ & pre {
11894
+ margin: 0;
11895
+ }
11370
11896
  `,
11371
11897
  queryDetailsStatus: u`
11372
11898
  border: 1px solid ${colors.darkGray[200]};
@@ -11381,12 +11907,13 @@ var getStyles2 = () => {
11381
11907
  gap: ${tokens.size[2]};
11382
11908
  padding: 0px ${tokens.size[2]};
11383
11909
  & > button {
11910
+ font-family: 'Inter', sans-serif;
11384
11911
  font-size: ${font.size.xs};
11385
11912
  padding: ${tokens.size[1]} ${tokens.size[2]};
11386
11913
  display: flex;
11387
11914
  border-radius: ${tokens.border.radius.sm};
11388
- border: 1px solid ${colors.darkGray[400]};
11389
- background-color: ${colors.darkGray[600]};
11915
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
11916
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11390
11917
  align-items: center;
11391
11918
  gap: ${tokens.size[2]};
11392
11919
  font-weight: ${font.weight.medium};
@@ -11398,7 +11925,7 @@ var getStyles2 = () => {
11398
11925
  outline: 2px solid ${colors.blue[800]};
11399
11926
  }
11400
11927
  &:hover {
11401
- background-color: ${colors.darkGray[500]};
11928
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11402
11929
  }
11403
11930
 
11404
11931
  &:disabled {
@@ -11419,17 +11946,17 @@ var getStyles2 = () => {
11419
11946
  display: flex;
11420
11947
  border-radius: ${tokens.border.radius.sm};
11421
11948
  overflow: hidden;
11422
- border: 1px solid ${colors.darkGray[400]};
11423
- background-color: ${colors.darkGray[600]};
11949
+ background-color: ${t2(colors.gray[100], colors.darkGray[600])};
11950
+ border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
11424
11951
  align-items: center;
11425
11952
  gap: ${tokens.size[2]};
11426
11953
  font-weight: ${font.weight.medium};
11427
11954
  line-height: ${font.lineHeight.sm};
11428
- color: ${tokens.colors.red[400]};
11955
+ color: ${t2(colors.red[500], colors.red[400])};
11429
11956
  cursor: pointer;
11430
11957
  position: relative;
11431
11958
  &:hover {
11432
- background-color: ${colors.darkGray[500]};
11959
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11433
11960
  }
11434
11961
  & > span {
11435
11962
  width: ${size2[1.5]};
@@ -11470,10 +11997,10 @@ var getStyles2 = () => {
11470
11997
  flex-direction: column;
11471
11998
  gap: ${size2[0.5]};
11472
11999
  border-radius: ${tokens.border.radius.sm};
11473
- border: 1px solid ${colors.gray[700]};
11474
- background-color: ${colors.darkGray[600]};
12000
+ border: 1px solid ${t2(colors.gray[300], colors.gray[700])};
12001
+ background-color: ${t2(colors.gray[50], colors.darkGray[600])};
11475
12002
  font-size: ${font.size.xs};
11476
- color: ${colors.gray[300]};
12003
+ color: ${t2(colors.gray[700], colors.gray[300])};
11477
12004
  z-index: 99999;
11478
12005
  min-width: 120px;
11479
12006
  padding: ${size2[0.5]};
@@ -11483,17 +12010,19 @@ var getStyles2 = () => {
11483
12010
  align-items: center;
11484
12011
  justify-content: space-between;
11485
12012
  border-radius: ${tokens.border.radius.xs};
11486
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12013
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11487
12014
  cursor: pointer;
11488
12015
  background-color: transparent;
11489
12016
  border: none;
12017
+ color: ${t2(colors.gray[700], colors.gray[300])};
11490
12018
  & svg {
12019
+ color: ${t2(colors.gray[600], colors.gray[400])};
11491
12020
  transform: rotate(-90deg);
11492
12021
  width: ${tokens.size[2]};
11493
12022
  height: ${tokens.size[2]};
11494
12023
  }
11495
12024
  &:hover {
11496
- background-color: ${colors.darkGray[500]};
12025
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11497
12026
  }
11498
12027
  &:focus-visible {
11499
12028
  outline-offset: 2px;
@@ -11505,33 +12034,48 @@ var getStyles2 = () => {
11505
12034
  }
11506
12035
  `,
11507
12036
  settingsMenuHeader: u`
11508
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12037
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11509
12038
  font-weight: ${font.weight.medium};
11510
- border-bottom: 1px solid ${colors.darkGray[400]};
11511
- color: ${colors.gray[400]};
12039
+ border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
12040
+ color: ${t2(colors.gray[500], colors.gray[400])};
11512
12041
  font-size: ${font.size["xs"]};
11513
12042
  `,
11514
12043
  settingsSubButton: u`
11515
12044
  display: flex;
11516
12045
  align-items: center;
11517
12046
  justify-content: space-between;
11518
- color: ${colors.gray[300]};
12047
+ color: ${t2(colors.gray[700], colors.gray[300])};
11519
12048
  font-size: ${font.size["xs"]};
11520
12049
  border-radius: ${tokens.border.radius.xs};
11521
- padding: ${tokens.size[0.5]} ${tokens.size[1]};
12050
+ padding: ${tokens.size[1]} ${tokens.size[1]};
11522
12051
  cursor: pointer;
11523
12052
  background-color: transparent;
11524
12053
  border: none;
12054
+ & svg {
12055
+ color: ${t2(colors.gray[600], colors.gray[400])};
12056
+ }
11525
12057
  &:hover {
11526
- background-color: ${colors.darkGray[500]};
12058
+ background-color: ${t2(colors.gray[200], colors.darkGray[500])};
11527
12059
  }
11528
12060
  &:focus-visible {
11529
12061
  outline-offset: 2px;
11530
12062
  outline: 2px solid ${colors.blue[800]};
11531
12063
  }
12064
+ `,
12065
+ themeSelectedButton: u`
12066
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
12067
+ color: ${t2(colors.purple[700], colors.purple[300])};
12068
+ & svg {
12069
+ color: ${t2(colors.purple[700], colors.purple[300])};
12070
+ }
12071
+ &:hover {
12072
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
12073
+ }
11532
12074
  `
11533
12075
  };
11534
12076
  };
12077
+ var lightStyles2 = stylesFactory2("light");
12078
+ var darkStyles2 = stylesFactory2("dark");
11535
12079
  delegateEvents(["click", "mousedown", "input"]);
11536
12080
  /*! Bundled license information:
11537
12081