@tanstack/query-devtools 5.1.0 → 5.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.cjs CHANGED
@@ -10677,35 +10677,35 @@ var init_theme = __esm({
10677
10677
  },
10678
10678
  font: {
10679
10679
  size: {
10680
- "2xs": "0.625rem",
10681
- xs: "0.75rem",
10682
- sm: "0.875rem",
10683
- md: "1rem",
10684
- lg: "1.125rem",
10685
- xl: "1.25rem",
10686
- "2xl": "1.5rem",
10687
- "3xl": "1.875rem",
10688
- "4xl": "2.25rem",
10689
- "5xl": "3rem",
10690
- "6xl": "3.75rem",
10691
- "7xl": "4.5rem",
10692
- "8xl": "6rem",
10693
- "9xl": "8rem"
10680
+ "2xs": "calc(var(--tsqd-font-size) * 0.625)",
10681
+ xs: "calc(var(--tsqd-font-size) * 0.75)",
10682
+ sm: "calc(var(--tsqd-font-size) * 0.875)",
10683
+ md: "var(--tsqd-font-size)",
10684
+ lg: "calc(var(--tsqd-font-size) * 1.125)",
10685
+ xl: "calc(var(--tsqd-font-size) * 1.25)",
10686
+ "2xl": "calc(var(--tsqd-font-size) * 1.5)",
10687
+ "3xl": "calc(var(--tsqd-font-size) * 1.875)",
10688
+ "4xl": "calc(var(--tsqd-font-size) * 2.25)",
10689
+ "5xl": "calc(var(--tsqd-font-size) * 3)",
10690
+ "6xl": "calc(var(--tsqd-font-size) * 3.75)",
10691
+ "7xl": "calc(var(--tsqd-font-size) * 4.5)",
10692
+ "8xl": "calc(var(--tsqd-font-size) * 6)",
10693
+ "9xl": "calc(var(--tsqd-font-size) * 8)"
10694
10694
  },
10695
10695
  lineHeight: {
10696
- xs: "1rem",
10697
- sm: "1.25rem",
10698
- md: "1.5rem",
10699
- lg: "1.75rem",
10700
- xl: "1.75rem",
10701
- "2xl": "2rem",
10702
- "3xl": "2.25rem",
10703
- "4xl": "2.5rem",
10704
- "5xl": "1",
10705
- "6xl": "1",
10706
- "7xl": "1",
10707
- "8xl": "1",
10708
- "9xl": "1"
10696
+ xs: "calc(var(--tsqd-font-size) * 1)",
10697
+ sm: "calc(var(--tsqd-font-size) * 1.25)",
10698
+ md: "calc(var(--tsqd-font-size) * 1.5)",
10699
+ lg: "calc(var(--tsqd-font-size) * 1.75)",
10700
+ xl: "calc(var(--tsqd-font-size) * 2)",
10701
+ "2xl": "calc(var(--tsqd-font-size) * 2.25)",
10702
+ "3xl": "calc(var(--tsqd-font-size) * 2.5)",
10703
+ "4xl": "calc(var(--tsqd-font-size) * 2.75)",
10704
+ "5xl": "calc(var(--tsqd-font-size) * 3)",
10705
+ "6xl": "calc(var(--tsqd-font-size) * 3.25)",
10706
+ "7xl": "calc(var(--tsqd-font-size) * 3.5)",
10707
+ "8xl": "calc(var(--tsqd-font-size) * 3.75)",
10708
+ "9xl": "calc(var(--tsqd-font-size) * 4)"
10709
10709
  },
10710
10710
  weight: {
10711
10711
  thin: "100",
@@ -10730,55 +10730,55 @@ var init_theme = __esm({
10730
10730
  border: {
10731
10731
  radius: {
10732
10732
  none: "0px",
10733
- xs: "0.125rem",
10734
- sm: "0.25rem",
10735
- md: "0.375rem",
10736
- lg: "0.5rem",
10737
- xl: "0.75rem",
10738
- "2xl": "1rem",
10739
- "3xl": "1.5rem",
10733
+ xs: "calc(var(--tsqd-font-size) * 0.125)",
10734
+ sm: "calc(var(--tsqd-font-size) * 0.25)",
10735
+ md: "calc(var(--tsqd-font-size) * 0.375)",
10736
+ lg: "calc(var(--tsqd-font-size) * 0.5)",
10737
+ xl: "calc(var(--tsqd-font-size) * 0.75)",
10738
+ "2xl": "calc(var(--tsqd-font-size) * 1)",
10739
+ "3xl": "calc(var(--tsqd-font-size) * 1.5)",
10740
10740
  full: "9999px"
10741
10741
  }
10742
10742
  },
10743
10743
  size: {
10744
10744
  0: "0px",
10745
- 0.25: "0.0625rem",
10746
- 0.5: "0.125rem",
10747
- 1: "0.25rem",
10748
- 1.5: "0.375rem",
10749
- 2: "0.5rem",
10750
- 2.5: "0.625rem",
10751
- 3: "0.75rem",
10752
- 3.5: "0.875rem",
10753
- 4: "1rem",
10754
- 4.5: "1.125rem",
10755
- 5: "1.25rem",
10756
- 5.5: "1.375rem",
10757
- 6: "1.5rem",
10758
- 6.5: "1.625rem",
10759
- 7: "1.75rem",
10760
- 8: "2rem",
10761
- 9: "2.25rem",
10762
- 10: "2.5rem",
10763
- 11: "2.75rem",
10764
- 12: "3rem",
10765
- 14: "3.5rem",
10766
- 16: "4rem",
10767
- 20: "5rem",
10768
- 24: "6rem",
10769
- 28: "7rem",
10770
- 32: "8rem",
10771
- 36: "9rem",
10772
- 40: "10rem",
10773
- 44: "11rem",
10774
- 48: "12rem",
10775
- 52: "13rem",
10776
- 56: "14rem",
10777
- 60: "15rem",
10778
- 64: "16rem",
10779
- 72: "18rem",
10780
- 80: "20rem",
10781
- 96: "24rem"
10745
+ 0.25: "calc(var(--tsqd-font-size) * 0.0625)",
10746
+ 0.5: "calc(var(--tsqd-font-size) * 0.125)",
10747
+ 1: "calc(var(--tsqd-font-size) * 0.25)",
10748
+ 1.5: "calc(var(--tsqd-font-size) * 0.375)",
10749
+ 2: "calc(var(--tsqd-font-size) * 0.5)",
10750
+ 2.5: "calc(var(--tsqd-font-size) * 0.625)",
10751
+ 3: "calc(var(--tsqd-font-size) * 0.75)",
10752
+ 3.5: "calc(var(--tsqd-font-size) * 0.875)",
10753
+ 4: "calc(var(--tsqd-font-size) * 1)",
10754
+ 4.5: "calc(var(--tsqd-font-size) * 1.125)",
10755
+ 5: "calc(var(--tsqd-font-size) * 1.25)",
10756
+ 5.5: "calc(var(--tsqd-font-size) * 1.375)",
10757
+ 6: "calc(var(--tsqd-font-size) * 1.5)",
10758
+ 6.5: "calc(var(--tsqd-font-size) * 1.625)",
10759
+ 7: "calc(var(--tsqd-font-size) * 1.75)",
10760
+ 8: "calc(var(--tsqd-font-size) * 2)",
10761
+ 9: "calc(var(--tsqd-font-size) * 2.25)",
10762
+ 10: "calc(var(--tsqd-font-size) * 2.5)",
10763
+ 11: "calc(var(--tsqd-font-size) * 2.75)",
10764
+ 12: "calc(var(--tsqd-font-size) * 3)",
10765
+ 14: "calc(var(--tsqd-font-size) * 3.5)",
10766
+ 16: "calc(var(--tsqd-font-size) * 4)",
10767
+ 20: "calc(var(--tsqd-font-size) * 5)",
10768
+ 24: "calc(var(--tsqd-font-size) * 6)",
10769
+ 28: "calc(var(--tsqd-font-size) * 7)",
10770
+ 32: "calc(var(--tsqd-font-size) * 8)",
10771
+ 36: "calc(var(--tsqd-font-size) * 9)",
10772
+ 40: "calc(var(--tsqd-font-size) * 10)",
10773
+ 44: "calc(var(--tsqd-font-size) * 11)",
10774
+ 48: "calc(var(--tsqd-font-size) * 12)",
10775
+ 52: "calc(var(--tsqd-font-size) * 13)",
10776
+ 56: "calc(var(--tsqd-font-size) * 14)",
10777
+ 60: "calc(var(--tsqd-font-size) * 15)",
10778
+ 64: "calc(var(--tsqd-font-size) * 16)",
10779
+ 72: "calc(var(--tsqd-font-size) * 18)",
10780
+ 80: "calc(var(--tsqd-font-size) * 20)",
10781
+ 96: "calc(var(--tsqd-font-size) * 24)"
10782
10782
  },
10783
10783
  shadow: Shadow,
10784
10784
  zIndices: {
@@ -12864,8 +12864,8 @@ var init_Explorer = __esm({
12864
12864
  expanderButtonContainer: u`
12865
12865
  display: flex;
12866
12866
  align-items: center;
12867
- line-height: 1.125rem;
12868
- min-height: 1.125rem;
12867
+ line-height: ${size2[4]};
12868
+ min-height: ${size2[4]};
12869
12869
  gap: ${size2[2]};
12870
12870
  `,
12871
12871
  expanderButton: u`
@@ -12873,7 +12873,7 @@ var init_Explorer = __esm({
12873
12873
  color: inherit;
12874
12874
  font: inherit;
12875
12875
  outline: inherit;
12876
- height: 1rem;
12876
+ height: ${size2[5]};
12877
12877
  background: transparent;
12878
12878
  border: none;
12879
12879
  padding: 0;
@@ -12915,8 +12915,8 @@ var init_Explorer = __esm({
12915
12915
  display: inline-flex;
12916
12916
  gap: ${size2[2]};
12917
12917
  width: 100%;
12918
- margin-bottom: ${size2[0.5]};
12919
- line-height: 1.125rem;
12918
+ margin: ${size2[0.25]} 0px;
12919
+ line-height: ${size2[4.5]};
12920
12920
  align-items: center;
12921
12921
  `,
12922
12922
  editableInput: u`
@@ -13104,16 +13104,31 @@ var init_Devtools = __esm({
13104
13104
  const position = createMemo(() => {
13105
13105
  return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
13106
13106
  });
13107
+ let transitionsContainerRef;
13107
13108
  createEffect(() => {
13108
- const root = document.querySelector(".tsqd-parent-container");
13109
+ const root = transitionsContainerRef.parentElement;
13109
13110
  const height = props.localStore.height || DEFAULT_HEIGHT;
13110
13111
  const width = props.localStore.width || DEFAULT_WIDTH;
13111
13112
  const panelPosition = position();
13112
13113
  root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
13113
13114
  root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
13114
13115
  });
13116
+ onMount(() => {
13117
+ const onFocus = () => {
13118
+ const root = transitionsContainerRef.parentElement;
13119
+ const fontSize = getComputedStyle(root).fontSize;
13120
+ root.style.setProperty("--tsqd-font-size", fontSize);
13121
+ };
13122
+ onFocus();
13123
+ window.addEventListener("focus", onFocus);
13124
+ onCleanup(() => {
13125
+ window.removeEventListener("focus", onFocus);
13126
+ });
13127
+ });
13115
13128
  return (() => {
13116
13129
  const _el$ = _tmpl$25();
13130
+ const _ref$ = transitionsContainerRef;
13131
+ typeof _ref$ === "function" ? use(_ref$, _el$) : transitionsContainerRef = _el$;
13117
13132
  insert(_el$, createComponent(TransitionGroup, {
13118
13133
  name: "tsqd-panel-transition",
13119
13134
  get children() {
@@ -13285,8 +13300,8 @@ var init_Devtools = __esm({
13285
13300
  };
13286
13301
  return (() => {
13287
13302
  const _el$5 = _tmpl$33(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
13288
- const _ref$ = panelRef;
13289
- typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
13303
+ const _ref$2 = panelRef;
13304
+ typeof _ref$2 === "function" ? use(_ref$2, _el$5) : panelRef = _el$5;
13290
13305
  _el$6.$$mousedown = handleDragStart;
13291
13306
  _el$7.$$click = () => props.setLocalStore("open", "false");
13292
13307
  insert(_el$7, createComponent(ChevronDown, {}));
@@ -13323,6 +13338,7 @@ var init_Devtools = __esm({
13323
13338
  ContentView = (props) => {
13324
13339
  setupQueryCacheSubscription();
13325
13340
  setupMutationCacheSubscription();
13341
+ let containerRef;
13326
13342
  const theme = useTheme();
13327
13343
  const styles = createMemo(() => {
13328
13344
  return theme() === "dark" ? darkStyles2 : lightStyles2;
@@ -13366,8 +13382,15 @@ var init_Devtools = __esm({
13366
13382
  const setDevtoolsPosition = (pos) => {
13367
13383
  props.setLocalStore("position", pos);
13368
13384
  };
13385
+ const setComputedVariables = (el) => {
13386
+ const computedStyle = getComputedStyle(containerRef);
13387
+ const variable = computedStyle.getPropertyValue("--tsqd-font-size");
13388
+ el.style.setProperty("--tsqd-font-size", variable);
13389
+ };
13369
13390
  return [(() => {
13370
13391
  const _el$8 = _tmpl$192(), _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$9.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$17.nextSibling, _el$22 = _el$19.nextSibling, _el$25 = _el$16.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling;
13392
+ const _ref$3 = containerRef;
13393
+ typeof _ref$3 === "function" ? use(_ref$3, _el$8) : containerRef = _el$8;
13371
13394
  _el$11.$$click = () => props.setLocalStore("open", "false");
13372
13395
  insert(_el$13, () => useQueryDevtoolsContext().queryFlavor, _el$14);
13373
13396
  insert(_el$13, () => useQueryDevtoolsContext().version, null);
@@ -13531,6 +13554,7 @@ var init_Devtools = __esm({
13531
13554
  return createComponent(Settings, {});
13532
13555
  }
13533
13556
  }), createComponent(index$d.Portal, {
13557
+ ref: (el) => setComputedVariables(el),
13534
13558
  get children() {
13535
13559
  return createComponent(index$d.Content, {
13536
13560
  get ["class"]() {
@@ -13554,6 +13578,7 @@ var init_Devtools = __esm({
13554
13578
  return [_tmpl$83(), createComponent(ChevronDown, {})];
13555
13579
  }
13556
13580
  }), createComponent(index$d.Portal, {
13581
+ ref: (el) => setComputedVariables(el),
13557
13582
  get children() {
13558
13583
  return createComponent(index$d.SubContent, {
13559
13584
  get ["class"]() {
@@ -13623,6 +13648,7 @@ var init_Devtools = __esm({
13623
13648
  return [_tmpl$132(), createComponent(ChevronDown, {})];
13624
13649
  }
13625
13650
  }), createComponent(index$d.Portal, {
13651
+ ref: (el) => setComputedVariables(el),
13626
13652
  get children() {
13627
13653
  return createComponent(index$d.SubContent, {
13628
13654
  get ["class"]() {
@@ -14094,8 +14120,8 @@ var init_Devtools = __esm({
14094
14120
  });
14095
14121
  return (() => {
14096
14122
  const _el$55 = _tmpl$252(), _el$57 = _el$55.firstChild, _el$59 = _el$57.nextSibling;
14097
- const _ref$2 = tagRef;
14098
- typeof _ref$2 === "function" ? use(_ref$2, _el$55) : tagRef = _el$55;
14123
+ const _ref$4 = tagRef;
14124
+ typeof _ref$4 === "function" ? use(_ref$4, _el$55) : tagRef = _el$55;
14099
14125
  _el$55.addEventListener("mouseleave", () => {
14100
14126
  setMouseOver(false);
14101
14127
  setFocused(false);
@@ -14356,7 +14382,6 @@ var init_Devtools = __esm({
14356
14382
  return _el$89;
14357
14383
  }
14358
14384
  }), null);
14359
- _el$95.style.setProperty("padding", "0.5rem");
14360
14385
  insert(_el$95, createComponent(Explorer, {
14361
14386
  label: "Data",
14362
14387
  defaultExpanded: ["Data"],
@@ -14368,7 +14393,6 @@ var init_Devtools = __esm({
14368
14393
  return activeQuery();
14369
14394
  }
14370
14395
  }));
14371
- _el$97.style.setProperty("padding", "0.5rem");
14372
14396
  insert(_el$97, createComponent(Explorer, {
14373
14397
  label: "Query",
14374
14398
  defaultExpanded: ["Query", "queryKey"],
@@ -14397,7 +14421,7 @@ var init_Devtools = __esm({
14397
14421
  color: ${t2(colors.cyan[500], colors.cyan[400])};
14398
14422
  `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$58 = restoringLoading(), _v$59 = u`
14399
14423
  background-color: ${t2(colors.cyan[500], colors.cyan[400])};
14400
- `, _v$60 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$61 = clsx(styles().detailsHeader, "tsqd-query-details-header");
14424
+ `, _v$60 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$61 = tokens.size[2], _v$62 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$63 = tokens.size[2];
14401
14425
  _v$39 !== _p$._v$39 && className(_el$60, _p$._v$39 = _v$39);
14402
14426
  _v$40 !== _p$._v$40 && className(_el$61, _p$._v$40 = _v$40);
14403
14427
  _v$41 !== _p$._v$41 && className(_el$62, _p$._v$41 = _v$41);
@@ -14420,7 +14444,9 @@ var init_Devtools = __esm({
14420
14444
  _v$58 !== _p$._v$58 && (_el$83.disabled = _p$._v$58 = _v$58);
14421
14445
  _v$59 !== _p$._v$59 && className(_el$84, _p$._v$59 = _v$59);
14422
14446
  _v$60 !== _p$._v$60 && className(_el$94, _p$._v$60 = _v$60);
14423
- _v$61 !== _p$._v$61 && className(_el$96, _p$._v$61 = _v$61);
14447
+ _v$61 !== _p$._v$61 && ((_p$._v$61 = _v$61) != null ? _el$95.style.setProperty("padding", _v$61) : _el$95.style.removeProperty("padding"));
14448
+ _v$62 !== _p$._v$62 && className(_el$96, _p$._v$62 = _v$62);
14449
+ _v$63 !== _p$._v$63 && ((_p$._v$63 = _v$63) != null ? _el$97.style.setProperty("padding", _v$63) : _el$97.style.removeProperty("padding"));
14424
14450
  return _p$;
14425
14451
  }, {
14426
14452
  _v$39: void 0,
@@ -14445,7 +14471,9 @@ var init_Devtools = __esm({
14445
14471
  _v$58: void 0,
14446
14472
  _v$59: void 0,
14447
14473
  _v$60: void 0,
14448
- _v$61: void 0
14474
+ _v$61: void 0,
14475
+ _v$62: void 0,
14476
+ _v$63: void 0
14449
14477
  });
14450
14478
  return _el$60;
14451
14479
  }
@@ -14523,7 +14551,6 @@ var init_Devtools = __esm({
14523
14551
  }
14524
14552
  }), null);
14525
14553
  insert(_el$108, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
14526
- _el$110.style.setProperty("padding", "0.5rem");
14527
14554
  insert(_el$110, createComponent(Explorer, {
14528
14555
  label: "Variables",
14529
14556
  defaultExpanded: ["Variables"],
@@ -14531,7 +14558,6 @@ var init_Devtools = __esm({
14531
14558
  return activeMutation().state.variables;
14532
14559
  }
14533
14560
  }));
14534
- _el$112.style.setProperty("padding", "0.5rem");
14535
14561
  insert(_el$112, createComponent(Explorer, {
14536
14562
  label: "Context",
14537
14563
  defaultExpanded: ["Context"],
@@ -14539,7 +14565,6 @@ var init_Devtools = __esm({
14539
14565
  return activeMutation().state.context;
14540
14566
  }
14541
14567
  }));
14542
- _el$114.style.setProperty("padding", "0.5rem");
14543
14568
  insert(_el$114, createComponent(Explorer, {
14544
14569
  label: "Data",
14545
14570
  defaultExpanded: ["Data"],
@@ -14547,7 +14572,6 @@ var init_Devtools = __esm({
14547
14572
  return activeMutation().state.data;
14548
14573
  }
14549
14574
  }));
14550
- _el$116.style.setProperty("padding", "0.5rem");
14551
14575
  insert(_el$116, createComponent(Explorer, {
14552
14576
  label: "Mutation",
14553
14577
  defaultExpanded: ["Mutation"],
@@ -14556,25 +14580,33 @@ var init_Devtools = __esm({
14556
14580
  }
14557
14581
  }));
14558
14582
  createRenderEffect((_p$) => {
14559
- const _v$62 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$63 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$64 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$65 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$66 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$67 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$68 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$69 = clsx(styles().detailsHeader, "tsqd-query-details-header");
14560
- _v$62 !== _p$._v$62 && className(_el$99, _p$._v$62 = _v$62);
14561
- _v$63 !== _p$._v$63 && className(_el$100, _p$._v$63 = _v$63);
14562
- _v$64 !== _p$._v$64 && className(_el$101, _p$._v$64 = _v$64);
14563
- _v$65 !== _p$._v$65 && className(_el$105, _p$._v$65 = _v$65);
14564
- _v$66 !== _p$._v$66 && className(_el$109, _p$._v$66 = _v$66);
14565
- _v$67 !== _p$._v$67 && className(_el$111, _p$._v$67 = _v$67);
14566
- _v$68 !== _p$._v$68 && className(_el$113, _p$._v$68 = _v$68);
14567
- _v$69 !== _p$._v$69 && className(_el$115, _p$._v$69 = _v$69);
14583
+ const _v$64 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$65 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$66 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$67 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$68 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$69 = tokens.size[2], _v$70 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$71 = tokens.size[2], _v$72 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$73 = tokens.size[2], _v$74 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$75 = tokens.size[2];
14584
+ _v$64 !== _p$._v$64 && className(_el$99, _p$._v$64 = _v$64);
14585
+ _v$65 !== _p$._v$65 && className(_el$100, _p$._v$65 = _v$65);
14586
+ _v$66 !== _p$._v$66 && className(_el$101, _p$._v$66 = _v$66);
14587
+ _v$67 !== _p$._v$67 && className(_el$105, _p$._v$67 = _v$67);
14588
+ _v$68 !== _p$._v$68 && className(_el$109, _p$._v$68 = _v$68);
14589
+ _v$69 !== _p$._v$69 && ((_p$._v$69 = _v$69) != null ? _el$110.style.setProperty("padding", _v$69) : _el$110.style.removeProperty("padding"));
14590
+ _v$70 !== _p$._v$70 && className(_el$111, _p$._v$70 = _v$70);
14591
+ _v$71 !== _p$._v$71 && ((_p$._v$71 = _v$71) != null ? _el$112.style.setProperty("padding", _v$71) : _el$112.style.removeProperty("padding"));
14592
+ _v$72 !== _p$._v$72 && className(_el$113, _p$._v$72 = _v$72);
14593
+ _v$73 !== _p$._v$73 && ((_p$._v$73 = _v$73) != null ? _el$114.style.setProperty("padding", _v$73) : _el$114.style.removeProperty("padding"));
14594
+ _v$74 !== _p$._v$74 && className(_el$115, _p$._v$74 = _v$74);
14595
+ _v$75 !== _p$._v$75 && ((_p$._v$75 = _v$75) != null ? _el$116.style.setProperty("padding", _v$75) : _el$116.style.removeProperty("padding"));
14568
14596
  return _p$;
14569
14597
  }, {
14570
- _v$62: void 0,
14571
- _v$63: void 0,
14572
14598
  _v$64: void 0,
14573
14599
  _v$65: void 0,
14574
14600
  _v$66: void 0,
14575
14601
  _v$67: void 0,
14576
14602
  _v$68: void 0,
14577
- _v$69: void 0
14603
+ _v$69: void 0,
14604
+ _v$70: void 0,
14605
+ _v$71: void 0,
14606
+ _v$72: void 0,
14607
+ _v$73: void 0,
14608
+ _v$74: void 0,
14609
+ _v$75: void 0
14578
14610
  });
14579
14611
  return _el$99;
14580
14612
  }
@@ -14748,7 +14780,7 @@ var init_Devtools = __esm({
14748
14780
  right: 0;
14749
14781
  left: 0;
14750
14782
  max-height: 90%;
14751
- min-height: 3.5rem;
14783
+ min-height: ${size2[14]};
14752
14784
  border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
14753
14785
  `,
14754
14786
  "panel-position-bottom": u`
@@ -14756,7 +14788,7 @@ var init_Devtools = __esm({
14756
14788
  right: 0;
14757
14789
  left: 0;
14758
14790
  max-height: 90%;
14759
- min-height: 3.5rem;
14791
+ min-height: ${size2[14]};
14760
14792
  border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
14761
14793
  `,
14762
14794
  "panel-position-right": u`
@@ -15088,6 +15120,8 @@ var init_Devtools = __esm({
15088
15120
  outline: 2px solid ${colors.blue[800]};
15089
15121
  }
15090
15122
  & svg {
15123
+ width: ${tokens.size[3]};
15124
+ height: ${tokens.size[3]};
15091
15125
  color: ${t2(colors.gray[500], colors.gray[400])};
15092
15126
  }
15093
15127
  }
@@ -15173,8 +15207,8 @@ var init_Devtools = __esm({
15173
15207
  border-radius: ${tokens.border.radius.sm};
15174
15208
  background-color: ${t2(colors.gray[100], colors.darkGray[400])};
15175
15209
  border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
15176
- width: 1.625rem;
15177
- height: 1.625rem;
15210
+ width: ${tokens.size[6.5]};
15211
+ height: ${tokens.size[6.5]};
15178
15212
  justify-content: center;
15179
15213
  display: flex;
15180
15214
  align-items: center;
package/build/index.js CHANGED
@@ -62,7 +62,7 @@ var TanstackQueryDevtools = class {
62
62
  if (this.#Component) {
63
63
  Devtools = this.#Component;
64
64
  } else {
65
- Devtools = lazy(() => import('./Devtools/BWLPXLBN.js'));
65
+ Devtools = lazy(() => import('./Devtools/HESZYUBG.js'));
66
66
  this.#Component = Devtools;
67
67
  }
68
68
  const _self$ = this;
package/build/index.jsx CHANGED
@@ -66,7 +66,7 @@ var TanstackQueryDevtools = class {
66
66
  if (this.#Component) {
67
67
  Devtools = this.#Component;
68
68
  } else {
69
- Devtools = lazy(() => import("./Devtools/QHLLQ2XL.jsx"));
69
+ Devtools = lazy(() => import("./Devtools/KWB27UDF.jsx"));
70
70
  this.#Component = Devtools;
71
71
  }
72
72
  return <Devtools
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/query-devtools",
3
- "version": "5.1.0",
3
+ "version": "5.4.2",
4
4
  "description": "Developer tools to interact with and visualize the TanStack Query cache",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",