@tanstack/query-devtools 5.1.0 → 5.4.2

package/build/Devtools/{CRASJTHY.js → MVUALMJ4.js}

@@ -1,4 +1,4 @@
-import { createContext, delegateEvents, createSignal, createMemo, createComponent, createEffect, insert, Show, createRenderEffect, className, onMount, on, setAttribute, spread, mergeProps, For, onCleanup, isServer, $PROXY, $TRACK, getListener, batch, createUniqueId, useContext, Index, template, use, untrack, useTransition, createRoot, splitProps, Portal, addEventListener, Switch, Match, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/Z53XT47W.js';
+import { createContext, delegateEvents, createSignal, createMemo, createComponent, createEffect, onMount, onCleanup, use, insert, Show, createRenderEffect, className, on, setAttribute, spread, mergeProps, For, isServer, $PROXY, $TRACK, getListener, batch, createUniqueId, useContext, Index, template, untrack, useTransition, createRoot, splitProps, Portal, addEventListener, Switch, Match, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/Z53XT47W.js';
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -8510,35 +8510,35 @@ var tokens = {
   },
   font: {
     size: {
-      "2xs": "0.625rem",
-      xs: "0.75rem",
-      sm: "0.875rem",
-      md: "1rem",
-      lg: "1.125rem",
-      xl: "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "1.875rem",
-      "4xl": "2.25rem",
-      "5xl": "3rem",
-      "6xl": "3.75rem",
-      "7xl": "4.5rem",
-      "8xl": "6rem",
-      "9xl": "8rem"
+      "2xs": "calc(var(--tsqd-font-size) * 0.625)",
+      xs: "calc(var(--tsqd-font-size) * 0.75)",
+      sm: "calc(var(--tsqd-font-size) * 0.875)",
+      md: "var(--tsqd-font-size)",
+      lg: "calc(var(--tsqd-font-size) * 1.125)",
+      xl: "calc(var(--tsqd-font-size) * 1.25)",
+      "2xl": "calc(var(--tsqd-font-size) * 1.5)",
+      "3xl": "calc(var(--tsqd-font-size) * 1.875)",
+      "4xl": "calc(var(--tsqd-font-size) * 2.25)",
+      "5xl": "calc(var(--tsqd-font-size) * 3)",
+      "6xl": "calc(var(--tsqd-font-size) * 3.75)",
+      "7xl": "calc(var(--tsqd-font-size) * 4.5)",
+      "8xl": "calc(var(--tsqd-font-size) * 6)",
+      "9xl": "calc(var(--tsqd-font-size) * 8)"
     },
     lineHeight: {
-      xs: "1rem",
-      sm: "1.25rem",
-      md: "1.5rem",
-      lg: "1.75rem",
-      xl: "1.75rem",
-      "2xl": "2rem",
-      "3xl": "2.25rem",
-      "4xl": "2.5rem",
-      "5xl": "1",
-      "6xl": "1",
-      "7xl": "1",
-      "8xl": "1",
-      "9xl": "1"
+      xs: "calc(var(--tsqd-font-size) * 1)",
+      sm: "calc(var(--tsqd-font-size) * 1.25)",
+      md: "calc(var(--tsqd-font-size) * 1.5)",
+      lg: "calc(var(--tsqd-font-size) * 1.75)",
+      xl: "calc(var(--tsqd-font-size) * 2)",
+      "2xl": "calc(var(--tsqd-font-size) * 2.25)",
+      "3xl": "calc(var(--tsqd-font-size) * 2.5)",
+      "4xl": "calc(var(--tsqd-font-size) * 2.75)",
+      "5xl": "calc(var(--tsqd-font-size) * 3)",
+      "6xl": "calc(var(--tsqd-font-size) * 3.25)",
+      "7xl": "calc(var(--tsqd-font-size) * 3.5)",
+      "8xl": "calc(var(--tsqd-font-size) * 3.75)",
+      "9xl": "calc(var(--tsqd-font-size) * 4)"
     },
     weight: {
       thin: "100",
@@ -8563,55 +8563,55 @@ var tokens = {
   border: {
     radius: {
       none: "0px",
-      xs: "0.125rem",
-      sm: "0.25rem",
-      md: "0.375rem",
-      lg: "0.5rem",
-      xl: "0.75rem",
-      "2xl": "1rem",
-      "3xl": "1.5rem",
+      xs: "calc(var(--tsqd-font-size) * 0.125)",
+      sm: "calc(var(--tsqd-font-size) * 0.25)",
+      md: "calc(var(--tsqd-font-size) * 0.375)",
+      lg: "calc(var(--tsqd-font-size) * 0.5)",
+      xl: "calc(var(--tsqd-font-size) * 0.75)",
+      "2xl": "calc(var(--tsqd-font-size) * 1)",
+      "3xl": "calc(var(--tsqd-font-size) * 1.5)",
       full: "9999px"
     }
   },
   size: {
     0: "0px",
-    0.25: "0.0625rem",
-    0.5: "0.125rem",
-    1: "0.25rem",
-    1.5: "0.375rem",
-    2: "0.5rem",
-    2.5: "0.625rem",
-    3: "0.75rem",
-    3.5: "0.875rem",
-    4: "1rem",
-    4.5: "1.125rem",
-    5: "1.25rem",
-    5.5: "1.375rem",
-    6: "1.5rem",
-    6.5: "1.625rem",
-    7: "1.75rem",
-    8: "2rem",
-    9: "2.25rem",
-    10: "2.5rem",
-    11: "2.75rem",
-    12: "3rem",
-    14: "3.5rem",
-    16: "4rem",
-    20: "5rem",
-    24: "6rem",
-    28: "7rem",
-    32: "8rem",
-    36: "9rem",
-    40: "10rem",
-    44: "11rem",
-    48: "12rem",
-    52: "13rem",
-    56: "14rem",
-    60: "15rem",
-    64: "16rem",
-    72: "18rem",
-    80: "20rem",
-    96: "24rem"
+    0.25: "calc(var(--tsqd-font-size) * 0.0625)",
+    0.5: "calc(var(--tsqd-font-size) * 0.125)",
+    1: "calc(var(--tsqd-font-size) * 0.25)",
+    1.5: "calc(var(--tsqd-font-size) * 0.375)",
+    2: "calc(var(--tsqd-font-size) * 0.5)",
+    2.5: "calc(var(--tsqd-font-size) * 0.625)",
+    3: "calc(var(--tsqd-font-size) * 0.75)",
+    3.5: "calc(var(--tsqd-font-size) * 0.875)",
+    4: "calc(var(--tsqd-font-size) * 1)",
+    4.5: "calc(var(--tsqd-font-size) * 1.125)",
+    5: "calc(var(--tsqd-font-size) * 1.25)",
+    5.5: "calc(var(--tsqd-font-size) * 1.375)",
+    6: "calc(var(--tsqd-font-size) * 1.5)",
+    6.5: "calc(var(--tsqd-font-size) * 1.625)",
+    7: "calc(var(--tsqd-font-size) * 1.75)",
+    8: "calc(var(--tsqd-font-size) * 2)",
+    9: "calc(var(--tsqd-font-size) * 2.25)",
+    10: "calc(var(--tsqd-font-size) * 2.5)",
+    11: "calc(var(--tsqd-font-size) * 2.75)",
+    12: "calc(var(--tsqd-font-size) * 3)",
+    14: "calc(var(--tsqd-font-size) * 3.5)",
+    16: "calc(var(--tsqd-font-size) * 4)",
+    20: "calc(var(--tsqd-font-size) * 5)",
+    24: "calc(var(--tsqd-font-size) * 6)",
+    28: "calc(var(--tsqd-font-size) * 7)",
+    32: "calc(var(--tsqd-font-size) * 8)",
+    36: "calc(var(--tsqd-font-size) * 9)",
+    40: "calc(var(--tsqd-font-size) * 10)",
+    44: "calc(var(--tsqd-font-size) * 11)",
+    48: "calc(var(--tsqd-font-size) * 12)",
+    52: "calc(var(--tsqd-font-size) * 13)",
+    56: "calc(var(--tsqd-font-size) * 14)",
+    60: "calc(var(--tsqd-font-size) * 15)",
+    64: "calc(var(--tsqd-font-size) * 16)",
+    72: "calc(var(--tsqd-font-size) * 18)",
+    80: "calc(var(--tsqd-font-size) * 20)",
+    96: "calc(var(--tsqd-font-size) * 24)"
   },
   shadow: Shadow,
   zIndices: {
@@ -10581,8 +10581,8 @@ var stylesFactory = (theme) => {
     expanderButtonContainer: u`
       display: flex;
       align-items: center;
-      line-height: 1.125rem;
-      min-height: 1.125rem;
+      line-height: ${size2[4]};
+      min-height: ${size2[4]};
       gap: ${size2[2]};
     `,
     expanderButton: u`
@@ -10590,7 +10590,7 @@ var stylesFactory = (theme) => {
       color: inherit;
       font: inherit;
       outline: inherit;
-      height: 1rem;
+      height: ${size2[5]};
       background: transparent;
       border: none;
       padding: 0;
@@ -10632,8 +10632,8 @@ var stylesFactory = (theme) => {
       display: inline-flex;
       gap: ${size2[2]};
       width: 100%;
-      margin-bottom: ${size2[0.5]};
-      line-height: 1.125rem;
+      margin: ${size2[0.25]} 0px;
+      line-height: ${size2[4.5]};
       align-items: center;
     `,
     editableInput: u`
@@ -10773,16 +10773,31 @@ var Devtools = (props) => {
   const position = createMemo(() => {
     return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
   });
+  let transitionsContainerRef;
   createEffect(() => {
-    const root = document.querySelector(".tsqd-parent-container");
+    const root = transitionsContainerRef.parentElement;
     const height = props.localStore.height || DEFAULT_HEIGHT;
     const width = props.localStore.width || DEFAULT_WIDTH;
     const panelPosition = position();
     root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
     root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
   });
+  onMount(() => {
+    const onFocus = () => {
+      const root = transitionsContainerRef.parentElement;
+      const fontSize = getComputedStyle(root).fontSize;
+      root.style.setProperty("--tsqd-font-size", fontSize);
+    };
+    onFocus();
+    window.addEventListener("focus", onFocus);
+    onCleanup(() => {
+      window.removeEventListener("focus", onFocus);
+    });
+  });
   return (() => {
     const _el$ = _tmpl$25();
+    const _ref$ = transitionsContainerRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : transitionsContainerRef = _el$;
     insert(_el$, createComponent(TransitionGroup, {
       name: "tsqd-panel-transition",
       get children() {
@@ -10954,8 +10969,8 @@ var DevtoolsPanel = (props) => {
   };
   return (() => {
     const _el$5 = _tmpl$33(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
-    const _ref$ = panelRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
+    const _ref$2 = panelRef;
+    typeof _ref$2 === "function" ? use(_ref$2, _el$5) : panelRef = _el$5;
     _el$6.$$mousedown = handleDragStart;
     _el$7.$$click = () => props.setLocalStore("open", "false");
     insert(_el$7, createComponent(ChevronDown, {}));
@@ -10992,6 +11007,7 @@ var DevtoolsPanel = (props) => {
 var ContentView = (props) => {
   setupQueryCacheSubscription();
   setupMutationCacheSubscription();
+  let containerRef;
   const theme = useTheme();
   const styles = createMemo(() => {
     return theme() === "dark" ? darkStyles2 : lightStyles2;
@@ -11035,8 +11051,15 @@ var ContentView = (props) => {
   const setDevtoolsPosition = (pos) => {
     props.setLocalStore("position", pos);
   };
+  const setComputedVariables = (el) => {
+    const computedStyle = getComputedStyle(containerRef);
+    const variable = computedStyle.getPropertyValue("--tsqd-font-size");
+    el.style.setProperty("--tsqd-font-size", variable);
+  };
   return [(() => {
     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;
+    const _ref$3 = containerRef;
+    typeof _ref$3 === "function" ? use(_ref$3, _el$8) : containerRef = _el$8;
     _el$11.$$click = () => props.setLocalStore("open", "false");
     insert(_el$13, () => useQueryDevtoolsContext().queryFlavor, _el$14);
     insert(_el$13, () => useQueryDevtoolsContext().version, null);
@@ -11200,6 +11223,7 @@ var ContentView = (props) => {
             return createComponent(Settings, {});
           }
         }), createComponent(index$d.Portal, {
+          ref: (el) => setComputedVariables(el),
           get children() {
             return createComponent(index$d.Content, {
               get ["class"]() {
@@ -11223,6 +11247,7 @@ var ContentView = (props) => {
                         return [_tmpl$83(), createComponent(ChevronDown, {})];
                       }
                     }), createComponent(index$d.Portal, {
+                      ref: (el) => setComputedVariables(el),
                       get children() {
                         return createComponent(index$d.SubContent, {
                           get ["class"]() {
@@ -11292,6 +11317,7 @@ var ContentView = (props) => {
                         return [_tmpl$132(), createComponent(ChevronDown, {})];
                       }
                     }), createComponent(index$d.Portal, {
+                      ref: (el) => setComputedVariables(el),
                       get children() {
                         return createComponent(index$d.SubContent, {
                           get ["class"]() {
@@ -11763,8 +11789,8 @@ var QueryStatus = (props) => {
   });
   return (() => {
     const _el$55 = _tmpl$252(), _el$57 = _el$55.firstChild, _el$59 = _el$57.nextSibling;
-    const _ref$2 = tagRef;
-    typeof _ref$2 === "function" ? use(_ref$2, _el$55) : tagRef = _el$55;
+    const _ref$4 = tagRef;
+    typeof _ref$4 === "function" ? use(_ref$4, _el$55) : tagRef = _el$55;
     _el$55.addEventListener("mouseleave", () => {
       setMouseOver(false);
       setFocused(false);
@@ -12025,7 +12051,6 @@ var QueryDetails = () => {
           return _el$89;
         }
       }), null);
-      _el$95.style.setProperty("padding", "0.5rem");
       insert(_el$95, createComponent(Explorer, {
         label: "Data",
         defaultExpanded: ["Data"],
@@ -12037,7 +12062,6 @@ var QueryDetails = () => {
           return activeQuery();
         }
       }));
-      _el$97.style.setProperty("padding", "0.5rem");
       insert(_el$97, createComponent(Explorer, {
         label: "Query",
         defaultExpanded: ["Query", "queryKey"],
@@ -12066,7 +12090,7 @@ var QueryDetails = () => {
                 color: ${t2(colors.cyan[500], colors.cyan[400])};
               `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$58 = restoringLoading(), _v$59 = u`
                 background-color: ${t2(colors.cyan[500], colors.cyan[400])};
-              `, _v$60 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$61 = clsx(styles().detailsHeader, "tsqd-query-details-header");
+              `, _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];
         _v$39 !== _p$._v$39 && className(_el$60, _p$._v$39 = _v$39);
         _v$40 !== _p$._v$40 && className(_el$61, _p$._v$40 = _v$40);
         _v$41 !== _p$._v$41 && className(_el$62, _p$._v$41 = _v$41);
@@ -12089,7 +12113,9 @@ var QueryDetails = () => {
         _v$58 !== _p$._v$58 && (_el$83.disabled = _p$._v$58 = _v$58);
         _v$59 !== _p$._v$59 && className(_el$84, _p$._v$59 = _v$59);
         _v$60 !== _p$._v$60 && className(_el$94, _p$._v$60 = _v$60);
-        _v$61 !== _p$._v$61 && className(_el$96, _p$._v$61 = _v$61);
+        _v$61 !== _p$._v$61 && ((_p$._v$61 = _v$61) != null ? _el$95.style.setProperty("padding", _v$61) : _el$95.style.removeProperty("padding"));
+        _v$62 !== _p$._v$62 && className(_el$96, _p$._v$62 = _v$62);
+        _v$63 !== _p$._v$63 && ((_p$._v$63 = _v$63) != null ? _el$97.style.setProperty("padding", _v$63) : _el$97.style.removeProperty("padding"));
         return _p$;
       }, {
         _v$39: void 0,
@@ -12114,7 +12140,9 @@ var QueryDetails = () => {
         _v$58: void 0,
         _v$59: void 0,
         _v$60: void 0,
-        _v$61: void 0
+        _v$61: void 0,
+        _v$62: void 0,
+        _v$63: void 0
       });
       return _el$60;
     }
@@ -12192,7 +12220,6 @@ var MutationDetails = () => {
         }
       }), null);
       insert(_el$108, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
-      _el$110.style.setProperty("padding", "0.5rem");
       insert(_el$110, createComponent(Explorer, {
         label: "Variables",
         defaultExpanded: ["Variables"],
@@ -12200,7 +12227,6 @@ var MutationDetails = () => {
           return activeMutation().state.variables;
         }
       }));
-      _el$112.style.setProperty("padding", "0.5rem");
       insert(_el$112, createComponent(Explorer, {
         label: "Context",
         defaultExpanded: ["Context"],
@@ -12208,7 +12234,6 @@ var MutationDetails = () => {
           return activeMutation().state.context;
         }
       }));
-      _el$114.style.setProperty("padding", "0.5rem");
       insert(_el$114, createComponent(Explorer, {
         label: "Data",
         defaultExpanded: ["Data"],
@@ -12216,7 +12241,6 @@ var MutationDetails = () => {
           return activeMutation().state.data;
         }
       }));
-      _el$116.style.setProperty("padding", "0.5rem");
       insert(_el$116, createComponent(Explorer, {
         label: "Mutation",
         defaultExpanded: ["Mutation"],
@@ -12225,25 +12249,33 @@ var MutationDetails = () => {
         }
       }));
       createRenderEffect((_p$) => {
-        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");
-        _v$62 !== _p$._v$62 && className(_el$99, _p$._v$62 = _v$62);
-        _v$63 !== _p$._v$63 && className(_el$100, _p$._v$63 = _v$63);
-        _v$64 !== _p$._v$64 && className(_el$101, _p$._v$64 = _v$64);
-        _v$65 !== _p$._v$65 && className(_el$105, _p$._v$65 = _v$65);
-        _v$66 !== _p$._v$66 && className(_el$109, _p$._v$66 = _v$66);
-        _v$67 !== _p$._v$67 && className(_el$111, _p$._v$67 = _v$67);
-        _v$68 !== _p$._v$68 && className(_el$113, _p$._v$68 = _v$68);
-        _v$69 !== _p$._v$69 && className(_el$115, _p$._v$69 = _v$69);
+        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];
+        _v$64 !== _p$._v$64 && className(_el$99, _p$._v$64 = _v$64);
+        _v$65 !== _p$._v$65 && className(_el$100, _p$._v$65 = _v$65);
+        _v$66 !== _p$._v$66 && className(_el$101, _p$._v$66 = _v$66);
+        _v$67 !== _p$._v$67 && className(_el$105, _p$._v$67 = _v$67);
+        _v$68 !== _p$._v$68 && className(_el$109, _p$._v$68 = _v$68);
+        _v$69 !== _p$._v$69 && ((_p$._v$69 = _v$69) != null ? _el$110.style.setProperty("padding", _v$69) : _el$110.style.removeProperty("padding"));
+        _v$70 !== _p$._v$70 && className(_el$111, _p$._v$70 = _v$70);
+        _v$71 !== _p$._v$71 && ((_p$._v$71 = _v$71) != null ? _el$112.style.setProperty("padding", _v$71) : _el$112.style.removeProperty("padding"));
+        _v$72 !== _p$._v$72 && className(_el$113, _p$._v$72 = _v$72);
+        _v$73 !== _p$._v$73 && ((_p$._v$73 = _v$73) != null ? _el$114.style.setProperty("padding", _v$73) : _el$114.style.removeProperty("padding"));
+        _v$74 !== _p$._v$74 && className(_el$115, _p$._v$74 = _v$74);
+        _v$75 !== _p$._v$75 && ((_p$._v$75 = _v$75) != null ? _el$116.style.setProperty("padding", _v$75) : _el$116.style.removeProperty("padding"));
         return _p$;
       }, {
-        _v$62: void 0,
-        _v$63: void 0,
         _v$64: void 0,
         _v$65: void 0,
         _v$66: void 0,
         _v$67: void 0,
         _v$68: void 0,
-        _v$69: void 0
+        _v$69: void 0,
+        _v$70: void 0,
+        _v$71: void 0,
+        _v$72: void 0,
+        _v$73: void 0,
+        _v$74: void 0,
+        _v$75: void 0
       });
       return _el$99;
     }
@@ -12417,7 +12449,7 @@ var stylesFactory2 = (theme) => {
       right: 0;
       left: 0;
       max-height: 90%;
-      min-height: 3.5rem;
+      min-height: ${size2[14]};
       border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
     "panel-position-bottom": u`
@@ -12425,7 +12457,7 @@ var stylesFactory2 = (theme) => {
       right: 0;
       left: 0;
       max-height: 90%;
-      min-height: 3.5rem;
+      min-height: ${size2[14]};
       border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
     "panel-position-right": u`
@@ -12757,6 +12789,8 @@ var stylesFactory2 = (theme) => {
           outline: 2px solid ${colors.blue[800]};
         }
         & svg {
+          width: ${tokens.size[3]};
+          height: ${tokens.size[3]};
           color: ${t2(colors.gray[500], colors.gray[400])};
         }
       }
@@ -12842,8 +12876,8 @@ var stylesFactory2 = (theme) => {
       border-radius: ${tokens.border.radius.sm};
       background-color: ${t2(colors.gray[100], colors.darkGray[400])};
       border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
-      width: 1.625rem;
-      height: 1.625rem;
+      width: ${tokens.size[6.5]};
+      height: ${tokens.size[6.5]};
       justify-content: center;
       display: flex;
       align-items: center;