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