@tanstack/router-devtools 1.112.17 → 1.114.0

package/dist/esm/tokens.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens.js","sources":["../../src/tokens.ts"],"sourcesContent":["export const tokens = {\n  colors: {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: '#000000',\n    white: '#ffffff',\n    neutral: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    darkGray: {\n      50: '#525c7a',\n      100: '#49536e',\n      200: '#414962',\n      300: '#394056',\n      400: '#313749',\n      500: '#292e3d',\n      600: '#212530',\n      700: '#191c24',\n      800: '#111318',\n      900: '#0b0d10',\n    },\n    gray: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    blue: {\n      25: '#F5FAFF',\n      50: '#EFF8FF',\n      100: '#D1E9FF',\n      200: '#B2DDFF',\n      300: '#84CAFF',\n      400: '#53B1FD',\n      500: '#2E90FA',\n      600: '#1570EF',\n      700: '#175CD3',\n      800: '#1849A9',\n      900: '#194185',\n    },\n    green: {\n      25: '#F6FEF9',\n      50: '#ECFDF3',\n      100: '#D1FADF',\n      200: '#A6F4C5',\n      300: '#6CE9A6',\n      400: '#32D583',\n      500: '#12B76A',\n      600: '#039855',\n      700: '#027A48',\n      800: '#05603A',\n      900: '#054F31',\n    },\n    red: {\n      50: '#fef2f2',\n      100: '#fee2e2',\n      200: '#fecaca',\n      300: '#fca5a5',\n      400: '#f87171',\n      500: '#ef4444',\n      600: '#dc2626',\n      700: '#b91c1c',\n      800: '#991b1b',\n      900: '#7f1d1d',\n      950: '#450a0a',\n    },\n    yellow: {\n      25: '#FFFCF5',\n      50: '#FFFAEB',\n      100: '#FEF0C7',\n      200: '#FEDF89',\n      300: '#FEC84B',\n      400: '#FDB022',\n      500: '#F79009',\n      600: '#DC6803',\n      700: '#B54708',\n      800: '#93370D',\n      900: '#7A2E0E',\n    },\n    purple: {\n      25: '#FAFAFF',\n      50: '#F4F3FF',\n      100: '#EBE9FE',\n      200: '#D9D6FE',\n      300: '#BDB4FE',\n      400: '#9B8AFB',\n      500: '#7A5AF8',\n      600: '#6938EF',\n      700: '#5925DC',\n      800: '#4A1FB8',\n      900: '#3E1C96',\n    },\n    teal: {\n      25: '#F6FEFC',\n      50: '#F0FDF9',\n      100: '#CCFBEF',\n      200: '#99F6E0',\n      300: '#5FE9D0',\n      400: '#2ED3B7',\n      500: '#15B79E',\n      600: '#0E9384',\n      700: '#107569',\n      800: '#125D56',\n      900: '#134E48',\n    },\n    pink: {\n      25: '#fdf2f8',\n      50: '#fce7f3',\n      100: '#fbcfe8',\n      200: '#f9a8d4',\n      300: '#f472b6',\n      400: '#ec4899',\n      500: '#db2777',\n      600: '#be185d',\n      700: '#9d174d',\n      800: '#831843',\n      900: '#500724',\n    },\n    cyan: {\n      25: '#ecfeff',\n      50: '#cffafe',\n      100: '#a5f3fc',\n      200: '#67e8f9',\n      300: '#22d3ee',\n      400: '#06b6d4',\n      500: '#0891b2',\n      600: '#0e7490',\n      700: '#155e75',\n      800: '#164e63',\n      900: '#083344',\n    },\n  },\n  alpha: {\n    100: 'ff',\n    90: 'e5',\n    80: 'cc',\n    70: 'b3',\n    60: '99',\n    50: '80',\n    40: '66',\n    30: '4d',\n    20: '33',\n    10: '1a',\n    0: '00',\n  },\n  font: {\n    size: {\n      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n      xs: 'calc(var(--tsrd-font-size) * 0.75)',\n      sm: 'calc(var(--tsrd-font-size) * 0.875)',\n      md: 'var(--tsrd-font-size)',\n      lg: 'calc(var(--tsrd-font-size) * 1.125)',\n      xl: 'calc(var(--tsrd-font-size) * 1.25)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 6)',\n      '9xl': 'calc(var(--tsrd-font-size) * 8)',\n    },\n    lineHeight: {\n      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n      xs: 'calc(var(--tsrd-font-size) * 1)',\n      sm: 'calc(var(--tsrd-font-size) * 1.25)',\n      md: 'calc(var(--tsrd-font-size) * 1.5)',\n      lg: 'calc(var(--tsrd-font-size) * 1.75)',\n      xl: 'calc(var(--tsrd-font-size) * 2)',\n      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '9xl': 'calc(var(--tsrd-font-size) * 4)',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    fontFamily: {\n      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n    },\n  },\n  breakpoints: {\n    xs: '320px',\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n  },\n  border: {\n    radius: {\n      none: '0px',\n      xs: 'calc(var(--tsrd-font-size) * 0.125)',\n      sm: 'calc(var(--tsrd-font-size) * 0.25)',\n      md: 'calc(var(--tsrd-font-size) * 0.375)',\n      lg: 'calc(var(--tsrd-font-size) * 0.5)',\n      xl: 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      full: '9999px',\n    },\n  },\n  size: {\n    0: '0px',\n    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n    0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n    1: 'calc(var(--tsrd-font-size) * 0.25)',\n    1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n    2: 'calc(var(--tsrd-font-size) * 0.5)',\n    2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n    3: 'calc(var(--tsrd-font-size) * 0.75)',\n    3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n    4: 'calc(var(--tsrd-font-size) * 1)',\n    4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n    5: 'calc(var(--tsrd-font-size) * 1.25)',\n    5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n    6: 'calc(var(--tsrd-font-size) * 1.5)',\n    6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n    7: 'calc(var(--tsrd-font-size) * 1.75)',\n    8: 'calc(var(--tsrd-font-size) * 2)',\n    9: 'calc(var(--tsrd-font-size) * 2.25)',\n    10: 'calc(var(--tsrd-font-size) * 2.5)',\n    11: 'calc(var(--tsrd-font-size) * 2.75)',\n    12: 'calc(var(--tsrd-font-size) * 3)',\n    14: 'calc(var(--tsrd-font-size) * 3.5)',\n    16: 'calc(var(--tsrd-font-size) * 4)',\n    20: 'calc(var(--tsrd-font-size) * 5)',\n    24: 'calc(var(--tsrd-font-size) * 6)',\n    28: 'calc(var(--tsrd-font-size) * 7)',\n    32: 'calc(var(--tsrd-font-size) * 8)',\n    36: 'calc(var(--tsrd-font-size) * 9)',\n    40: 'calc(var(--tsrd-font-size) * 10)',\n    44: 'calc(var(--tsrd-font-size) * 11)',\n    48: 'calc(var(--tsrd-font-size) * 12)',\n    52: 'calc(var(--tsrd-font-size) * 13)',\n    56: 'calc(var(--tsrd-font-size) * 14)',\n    60: 'calc(var(--tsrd-font-size) * 15)',\n    64: 'calc(var(--tsrd-font-size) * 16)',\n    72: 'calc(var(--tsrd-font-size) * 18)',\n    80: 'calc(var(--tsrd-font-size) * 20)',\n    96: 'calc(var(--tsrd-font-size) * 24)',\n  },\n  shadow: {\n    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n    md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n      `0 25px 50px -12px ${color}` as const,\n    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n      `inset 0 2px 4px 0 ${color}` as const,\n    none: () => `none` as const,\n  },\n  zIndices: {\n    hide: -1,\n    auto: 'auto',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n} as const\n"],"names":[],"mappings":"AAAO,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,aAAa;AAAA,IACb,OAAO;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,UAAU;AAAA,MACR,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,KAAK;AAAA,MACH,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,EAET;AAAA,EACA,OAAO;AAAA,IAEL,IAAI;AAAA,IAEJ,IAAI;AAAA,IAKJ,IAAI;AAAA,EAGN;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAWN;AAAA,IACA,YAAY;AAAA,MAGV,IAAI;AAAA,MACJ,IAAI;AAAA,IAYN;AAAA,IACA,QAAQ;AAAA,MAIN,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,IAGR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAEV;AAAA,EASA,QAAQ;AAAA,IACN,QAAQ;AAAA,MAEN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MAKJ,MAAM;AAAA,IAAA;AAAA,EAEV;AAAA,EACA,MAAM;AAAA,IACJ,GAAG;AAAA,IAEH,KAAK;AAAA,IACL,GAAG;AAAA,IACH,KAAK;AAAA,IACL,GAAG;AAAA,IACH,KAAK;AAAA,IACL,GAAG;AAAA,IACH,KAAK;AAAA,IACL,GAAG;AAAA,IAEH,GAAG;AAAA,IAKH,GAAG;AAAA,EAsBL;AAiCF;"}

package/dist/esm/useLocalStorage.d.ts

@@ -1 +0,0 @@
-export default function useLocalStorage<T>(key: string, defaultValue: T | undefined): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void];

package/dist/esm/useLocalStorage.js

@@ -1,46 +0,0 @@
-import React__default from "react";
-const getItem = (key) => {
-  try {
-    const itemValue = localStorage.getItem(key);
-    if (typeof itemValue === "string") {
-      return JSON.parse(itemValue);
-    }
-    return void 0;
-  } catch {
-    return void 0;
-  }
-};
-function useLocalStorage(key, defaultValue) {
-  const [value, setValue] = React__default.useState();
-  React__default.useEffect(() => {
-    const initialValue = getItem(key);
-    if (typeof initialValue === "undefined" || initialValue === null) {
-      setValue(
-        typeof defaultValue === "function" ? defaultValue() : defaultValue
-      );
-    } else {
-      setValue(initialValue);
-    }
-  }, [defaultValue, key]);
-  const setter = React__default.useCallback(
-    (updater) => {
-      setValue((old) => {
-        let newVal = updater;
-        if (typeof updater == "function") {
-          newVal = updater(old);
-        }
-        try {
-          localStorage.setItem(key, JSON.stringify(newVal));
-        } catch {
-        }
-        return newVal;
-      });
-    },
-    [key]
-  );
-  return [value, setter];
-}
-export {
-  useLocalStorage as default
-};
-//# sourceMappingURL=useLocalStorage.js.map

package/dist/esm/useLocalStorage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLocalStorage.js","sources":["../../src/useLocalStorage.ts"],"sourcesContent":["import React from 'react'\n\nconst getItem = (key: string): unknown => {\n  try {\n    const itemValue = localStorage.getItem(key)\n    if (typeof itemValue === 'string') {\n      return JSON.parse(itemValue)\n    }\n    return undefined\n  } catch {\n    return undefined\n  }\n}\n\nexport default function useLocalStorage<T>(\n  key: string,\n  defaultValue: T | undefined,\n): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void] {\n  const [value, setValue] = React.useState<T>()\n\n  React.useEffect(() => {\n    const initialValue = getItem(key) as T | undefined\n\n    if (typeof initialValue === 'undefined' || initialValue === null) {\n      setValue(\n        typeof defaultValue === 'function' ? defaultValue() : defaultValue,\n      )\n    } else {\n      setValue(initialValue)\n    }\n  }, [defaultValue, key])\n\n  const setter = React.useCallback(\n    (updater: any) => {\n      setValue((old) => {\n        let newVal = updater\n\n        if (typeof updater == 'function') {\n          newVal = updater(old)\n        }\n        try {\n          localStorage.setItem(key, JSON.stringify(newVal))\n        } catch {}\n\n        return newVal\n      })\n    },\n    [key],\n  )\n\n  return [value, setter]\n}\n"],"names":["React"],"mappings":";AAEA,MAAM,UAAU,CAAC,QAAyB;AACpC,MAAA;AACI,UAAA,YAAY,aAAa,QAAQ,GAAG;AACtC,QAAA,OAAO,cAAc,UAAU;AAC1B,aAAA,KAAK,MAAM,SAAS;AAAA,IAAA;AAEtB,WAAA;AAAA,EAAA,QACD;AACC,WAAA;AAAA,EAAA;AAEX;AAEwB,SAAA,gBACtB,KACA,cAC4D;AAC5D,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAY;AAE5CA,iBAAM,UAAU,MAAM;AACd,UAAA,eAAe,QAAQ,GAAG;AAEhC,QAAI,OAAO,iBAAiB,eAAe,iBAAiB,MAAM;AAChE;AAAA,QACE,OAAO,iBAAiB,aAAa,iBAAiB;AAAA,MACxD;AAAA,IAAA,OACK;AACL,eAAS,YAAY;AAAA,IAAA;AAAA,EACvB,GACC,CAAC,cAAc,GAAG,CAAC;AAEtB,QAAM,SAASA,eAAM;AAAA,IACnB,CAAC,YAAiB;AAChB,eAAS,CAAC,QAAQ;AAChB,YAAI,SAAS;AAET,YAAA,OAAO,WAAW,YAAY;AAChC,mBAAS,QAAQ,GAAG;AAAA,QAAA;AAElB,YAAA;AACF,uBAAa,QAAQ,KAAK,KAAK,UAAU,MAAM,CAAC;AAAA,QAAA,QAC1C;AAAA,QAAA;AAED,eAAA;AAAA,MAAA,CACR;AAAA,IACH;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAEO,SAAA,CAAC,OAAO,MAAM;AACvB;"}

package/dist/esm/useMediaQuery.d.ts

@@ -1 +0,0 @@
-export default function useMediaQuery(query: string): boolean | undefined;

package/dist/esm/useStyles.d.ts

@@ -1,52 +0,0 @@
-export declare function useStyles(): {
-    devtoolsPanelContainer: string;
-    devtoolsPanelContainerVisibility: (isOpen: boolean) => string;
-    devtoolsPanelContainerResizing: (isResizing: boolean) => string;
-    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => string;
-    logo: string;
-    tanstackLogo: string;
-    routerLogo: string;
-    devtoolsPanel: string;
-    dragHandle: string;
-    firstContainer: string;
-    routerExplorerContainer: string;
-    routerExplorer: string;
-    row: string;
-    detailsHeader: string;
-    maskedBadge: string;
-    maskedLocation: string;
-    detailsContent: string;
-    routeMatchesToggle: string;
-    routeMatchesToggleBtn: (active: boolean, showBorder: boolean) => string[];
-    detailsHeaderInfo: string;
-    matchRow: (active: boolean) => string[];
-    matchIndicator: (color: "green" | "red" | "yellow" | "gray" | "blue" | "purple") => string[];
-    matchID: string;
-    ageTicker: (showWarning: boolean) => string[];
-    secondContainer: string;
-    thirdContainer: string;
-    fourthContainer: string;
-    routesContainer: string;
-    routesRowContainer: (active: boolean, isMatch: boolean) => string[];
-    routesRow: (isMatch: boolean) => string[];
-    routeParamInfo: string;
-    nestedRouteRow: (isRoot: boolean) => string;
-    code: string;
-    matchesContainer: string;
-    cachedMatchesContainer: string;
-    maskedBadgeContainer: string;
-    matchDetails: string;
-    matchStatus: (status: "pending" | "success" | "error" | "notFound" | "redirected", isFetching: false | "beforeLoad" | "loader") => string;
-    matchDetailsInfo: string;
-    matchDetailsInfoLabel: string;
-    mainCloseBtn: string;
-    mainCloseBtnPosition: (position: "top-left" | "top-right" | "bottom-left" | "bottom-right") => string;
-    mainCloseBtnAnimation: (isOpen: boolean) => string;
-    routerLogoCloseButton: string;
-    mainCloseBtnDivider: string;
-    mainCloseBtnIconContainer: string;
-    mainCloseBtnIconOuter: string;
-    mainCloseBtnIconInner: string;
-    panelCloseBtn: string;
-    panelCloseBtnIcon: string;
-};

package/dist/esm/useStyles.js

@@ -1,553 +0,0 @@
-import React__default from "react";
-import * as goober from "goober";
-import { tokens } from "./tokens.js";
-import { ShadowDomTargetContext } from "./context.js";
-const stylesFactory = (shadowDOMTarget) => {
-  const { colors, font, size, alpha, border } = tokens;
-  const { fontFamily, lineHeight, size: fontSize } = font;
-  const css = shadowDOMTarget ? goober.css.bind({ target: shadowDOMTarget }) : goober.css;
-  return {
-    devtoolsPanelContainer: css`
-      direction: ltr;
-      position: fixed;
-      bottom: 0;
-      right: 0;
-      z-index: 99999;
-      width: 100%;
-      max-height: 90%;
-      border-top: 1px solid ${colors.gray[700]};
-      transform-origin: top;
-    `,
-    devtoolsPanelContainerVisibility: (isOpen) => {
-      return css`
-        visibility: ${isOpen ? "visible" : "hidden"};
-      `;
-    },
-    devtoolsPanelContainerResizing: (isResizing) => {
-      if (isResizing) {
-        return css`
-          transition: none;
-        `;
-      }
-      return css`
-        transition: all 0.4s ease;
-      `;
-    },
-    devtoolsPanelContainerAnimation: (isOpen, height) => {
-      if (isOpen) {
-        return css`
-          pointer-events: auto;
-          transform: translateY(0);
-        `;
-      }
-      return css`
-        pointer-events: none;
-        transform: translateY(${height}px);
-      `;
-    },
-    logo: css`
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      background-color: transparent;
-      border: none;
-      font-family: ${fontFamily.sans};
-      gap: ${tokens.size[0.5]};
-      padding: 0px;
-      &:hover {
-        opacity: 0.7;
-      }
-      &:focus-visible {
-        outline-offset: 4px;
-        border-radius: ${border.radius.xs};
-        outline: 2px solid ${colors.blue[800]};
-      }
-    `,
-    tanstackLogo: css`
-      font-size: ${font.size.md};
-      font-weight: ${font.weight.bold};
-      line-height: ${font.lineHeight.xs};
-      white-space: nowrap;
-      color: ${colors.gray[300]};
-    `,
-    routerLogo: css`
-      font-weight: ${font.weight.semibold};
-      font-size: ${font.size.xs};
-      background: linear-gradient(to right, #84cc16, #10b981);
-      background-clip: text;
-      -webkit-background-clip: text;
-      line-height: 1;
-      -webkit-text-fill-color: transparent;
-      white-space: nowrap;
-    `,
-    devtoolsPanel: css`
-      display: flex;
-      font-size: ${fontSize.sm};
-      font-family: ${fontFamily.sans};
-      background-color: ${colors.darkGray[700]};
-      color: ${colors.gray[300]};
-
-      @media (max-width: 700px) {
-        flex-direction: column;
-      }
-      @media (max-width: 600px) {
-        font-size: ${fontSize.xs};
-      }
-    `,
-    dragHandle: css`
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 4px;
-      cursor: row-resize;
-      z-index: 100000;
-      &:hover {
-        background-color: ${colors.purple[400]}${alpha[90]};
-      }
-    `,
-    firstContainer: css`
-      flex: 1 1 500px;
-      min-height: 40%;
-      max-height: 100%;
-      overflow: auto;
-      border-right: 1px solid ${colors.gray[700]};
-      display: flex;
-      flex-direction: column;
-    `,
-    routerExplorerContainer: css`
-      overflow-y: auto;
-      flex: 1;
-    `,
-    routerExplorer: css`
-      padding: ${tokens.size[2]};
-    `,
-    row: css`
-      display: flex;
-      align-items: center;
-      padding: ${tokens.size[2]} ${tokens.size[2.5]};
-      gap: ${tokens.size[2.5]};
-      border-bottom: ${colors.darkGray[500]} 1px solid;
-      align-items: center;
-    `,
-    detailsHeader: css`
-      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      background-color: ${colors.darkGray[600]};
-      padding: 0px ${tokens.size[2]};
-      font-weight: ${font.weight.medium};
-      font-size: ${font.size.xs};
-      min-height: ${tokens.size[8]};
-      line-height: ${font.lineHeight.xs};
-      text-align: left;
-      display: flex;
-      align-items: center;
-    `,
-    maskedBadge: css`
-      background: ${colors.yellow[900]}${alpha[70]};
-      color: ${colors.yellow[300]};
-      display: inline-block;
-      padding: ${tokens.size[0]} ${tokens.size[2.5]};
-      border-radius: ${border.radius.full};
-      font-size: ${font.size.xs};
-      font-weight: ${font.weight.normal};
-      border: 1px solid ${colors.yellow[300]};
-    `,
-    maskedLocation: css`
-      color: ${colors.yellow[300]};
-    `,
-    detailsContent: css`
-      padding: ${tokens.size[1.5]} ${tokens.size[2]};
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: ${font.size.xs};
-    `,
-    routeMatchesToggle: css`
-      display: flex;
-      align-items: center;
-      border: 1px solid ${colors.gray[500]};
-      border-radius: ${border.radius.sm};
-      overflow: hidden;
-    `,
-    routeMatchesToggleBtn: (active, showBorder) => {
-      const base = css`
-        appearance: none;
-        border: none;
-        font-size: 12px;
-        padding: 4px 8px;
-        background: transparent;
-        cursor: pointer;
-        font-family: ${fontFamily.sans};
-        font-weight: ${font.weight.medium};
-      `;
-      const classes = [base];
-      if (active) {
-        const activeStyles = css`
-          background: ${colors.darkGray[400]};
-          color: ${colors.gray[300]};
-        `;
-        classes.push(activeStyles);
-      } else {
-        const inactiveStyles = css`
-          color: ${colors.gray[500]};
-          background: ${colors.darkGray[800]}${alpha[20]};
-        `;
-        classes.push(inactiveStyles);
-      }
-      if (showBorder) {
-        classes.push(css`
-          border-right: 1px solid ${tokens.colors.gray[500]};
-        `);
-      }
-      return classes;
-    },
-    detailsHeaderInfo: css`
-      flex: 1;
-      justify-content: flex-end;
-      display: flex;
-      align-items: center;
-      font-weight: ${font.weight.normal};
-      color: ${colors.gray[400]};
-    `,
-    matchRow: (active) => {
-      const base = css`
-        display: flex;
-        border-bottom: 1px solid ${colors.darkGray[400]};
-        cursor: pointer;
-        align-items: center;
-        padding: ${size[1]} ${size[2]};
-        gap: ${size[2]};
-        font-size: ${fontSize.xs};
-        color: ${colors.gray[300]};
-      `;
-      const classes = [base];
-      if (active) {
-        const activeStyles = css`
-          background: ${colors.darkGray[500]};
-        `;
-        classes.push(activeStyles);
-      }
-      return classes;
-    },
-    matchIndicator: (color) => {
-      const base = css`
-        flex: 0 0 auto;
-        width: ${size[3]};
-        height: ${size[3]};
-        background: ${colors[color][900]};
-        border: 1px solid ${colors[color][500]};
-        border-radius: ${border.radius.full};
-        transition: all 0.25s ease-out;
-        box-sizing: border-box;
-      `;
-      const classes = [base];
-      if (color === "gray") {
-        const grayStyles = css`
-          background: ${colors.gray[700]};
-          border-color: ${colors.gray[400]};
-        `;
-        classes.push(grayStyles);
-      }
-      return classes;
-    },
-    matchID: css`
-      flex: 1;
-      line-height: ${lineHeight["xs"]};
-    `,
-    ageTicker: (showWarning) => {
-      const base = css`
-        display: flex;
-        gap: ${size[1]};
-        font-size: ${fontSize.xs};
-        color: ${colors.gray[400]};
-        font-variant-numeric: tabular-nums;
-        line-height: ${lineHeight["xs"]};
-      `;
-      const classes = [base];
-      if (showWarning) {
-        const warningStyles = css`
-          color: ${colors.yellow[400]};
-        `;
-        classes.push(warningStyles);
-      }
-      return classes;
-    },
-    secondContainer: css`
-      flex: 1 1 500px;
-      min-height: 40%;
-      max-height: 100%;
-      overflow: auto;
-      border-right: 1px solid ${colors.gray[700]};
-      display: flex;
-      flex-direction: column;
-    `,
-    thirdContainer: css`
-      flex: 1 1 500px;
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      border-right: 1px solid ${colors.gray[700]};
-
-      @media (max-width: 700px) {
-        border-top: 2px solid ${colors.gray[700]};
-      }
-    `,
-    fourthContainer: css`
-      flex: 1 1 500px;
-      min-height: 40%;
-      max-height: 100%;
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-    `,
-    routesContainer: css`
-      overflow-x: auto;
-      overflow-y: visible;
-    `,
-    routesRowContainer: (active, isMatch) => {
-      const base = css`
-        display: flex;
-        border-bottom: 1px solid ${colors.darkGray[400]};
-        align-items: center;
-        padding: ${size[1]} ${size[2]};
-        gap: ${size[2]};
-        font-size: ${fontSize.xs};
-        color: ${colors.gray[300]};
-        cursor: ${isMatch ? "pointer" : "default"};
-        line-height: ${lineHeight["xs"]};
-      `;
-      const classes = [base];
-      if (active) {
-        const activeStyles = css`
-          background: ${colors.darkGray[500]};
-        `;
-        classes.push(activeStyles);
-      }
-      return classes;
-    },
-    routesRow: (isMatch) => {
-      const base = css`
-        flex: 1 0 auto;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: ${fontSize.xs};
-        line-height: ${lineHeight["xs"]};
-      `;
-      const classes = [base];
-      if (!isMatch) {
-        const matchStyles = css`
-          color: ${colors.gray[400]};
-        `;
-        classes.push(matchStyles);
-      }
-      return classes;
-    },
-    routeParamInfo: css`
-      color: ${colors.gray[400]};
-      font-size: ${fontSize.xs};
-      line-height: ${lineHeight["xs"]};
-    `,
-    nestedRouteRow: (isRoot) => {
-      const base = css`
-        margin-left: ${isRoot ? 0 : size[3.5]};
-        border-left: ${isRoot ? "" : `solid 1px ${colors.gray[700]}`};
-      `;
-      return base;
-    },
-    code: css`
-      font-size: ${fontSize.xs};
-      line-height: ${lineHeight["xs"]};
-    `,
-    matchesContainer: css`
-      flex: 1 1 auto;
-      overflow-y: auto;
-    `,
-    cachedMatchesContainer: css`
-      flex: 1 1 auto;
-      overflow-y: auto;
-      max-height: 50%;
-    `,
-    maskedBadgeContainer: css`
-      flex: 1;
-      justify-content: flex-end;
-      display: flex;
-    `,
-    matchDetails: css`
-      display: flex;
-      flex-direction: column;
-      padding: ${tokens.size[2]};
-      font-size: ${tokens.font.size.xs};
-      color: ${tokens.colors.gray[300]};
-      line-height: ${tokens.font.lineHeight.sm};
-    `,
-    matchStatus: (status, isFetching) => {
-      const colorMap = {
-        pending: "yellow",
-        success: "green",
-        error: "red",
-        notFound: "purple",
-        redirected: "gray"
-      };
-      const color = isFetching && status === "success" ? isFetching === "beforeLoad" ? "purple" : "blue" : colorMap[status];
-      return css`
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 40px;
-        border-radius: ${tokens.border.radius.sm};
-        font-weight: ${tokens.font.weight.normal};
-        background-color: ${tokens.colors[color][900]}${tokens.alpha[90]};
-        color: ${tokens.colors[color][300]};
-        border: 1px solid ${tokens.colors[color][600]};
-        margin-bottom: ${tokens.size[2]};
-        transition: all 0.25s ease-out;
-      `;
-    },
-    matchDetailsInfo: css`
-      display: flex;
-      justify-content: flex-end;
-      flex: 1;
-    `,
-    matchDetailsInfoLabel: css`
-      display: flex;
-    `,
-    mainCloseBtn: css`
-      background: ${colors.darkGray[700]};
-      padding: ${size[1]} ${size[2]} ${size[1]} ${size[1.5]};
-      border-radius: ${border.radius.md};
-      position: fixed;
-      z-index: 99999;
-      display: inline-flex;
-      width: fit-content;
-      cursor: pointer;
-      appearance: none;
-      border: 0;
-      gap: 8px;
-      align-items: center;
-      border: 1px solid ${colors.gray[500]};
-      font-size: ${font.size.xs};
-      cursor: pointer;
-      transition: all 0.25s ease-out;
-
-      &:hover {
-        background: ${colors.darkGray[500]};
-      }
-    `,
-    mainCloseBtnPosition: (position) => {
-      const base = css`
-        ${position === "top-left" ? `top: ${size[2]}; left: ${size[2]};` : ""}
-        ${position === "top-right" ? `top: ${size[2]}; right: ${size[2]};` : ""}
-        ${position === "bottom-left" ? `bottom: ${size[2]}; left: ${size[2]};` : ""}
-        ${position === "bottom-right" ? `bottom: ${size[2]}; right: ${size[2]};` : ""}
-      `;
-      return base;
-    },
-    mainCloseBtnAnimation: (isOpen) => {
-      if (isOpen) {
-        return css`
-          opacity: 1;
-          pointer-events: auto;
-          visibility: visible;
-        `;
-      }
-      return css`
-        opacity: 0;
-        pointer-events: none;
-        visibility: hidden;
-      `;
-    },
-    routerLogoCloseButton: css`
-      font-weight: ${font.weight.semibold};
-      font-size: ${font.size.xs};
-      background: linear-gradient(to right, #98f30c, #00f4a3);
-      background-clip: text;
-      -webkit-background-clip: text;
-      line-height: 1;
-      -webkit-text-fill-color: transparent;
-      white-space: nowrap;
-    `,
-    mainCloseBtnDivider: css`
-      width: 1px;
-      background: ${tokens.colors.gray[600]};
-      height: 100%;
-      border-radius: 999999px;
-      color: transparent;
-    `,
-    mainCloseBtnIconContainer: css`
-      position: relative;
-      width: ${size[5]};
-      height: ${size[5]};
-      background: pink;
-      border-radius: 999999px;
-      overflow: hidden;
-    `,
-    mainCloseBtnIconOuter: css`
-      width: ${size[5]};
-      height: ${size[5]};
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      filter: blur(3px) saturate(1.8) contrast(2);
-    `,
-    mainCloseBtnIconInner: css`
-      width: ${size[4]};
-      height: ${size[4]};
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    `,
-    panelCloseBtn: css`
-      position: absolute;
-      cursor: pointer;
-      z-index: 100001;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      outline: none;
-      background-color: ${colors.darkGray[700]};
-      &:hover {
-        background-color: ${colors.darkGray[500]};
-      }
-
-      top: 0;
-      right: ${size[2]};
-      transform: translate(0, -100%);
-      border-right: ${colors.darkGray[300]} 1px solid;
-      border-left: ${colors.darkGray[300]} 1px solid;
-      border-top: ${colors.darkGray[300]} 1px solid;
-      border-bottom: none;
-      border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
-      padding: ${size[1]} ${size[1.5]} ${size[0.5]} ${size[1.5]};
-
-      &::after {
-        content: ' ';
-        position: absolute;
-        top: 100%;
-        left: -${size[2.5]};
-        height: ${size[1.5]};
-        width: calc(100% + ${size[5]});
-      }
-    `,
-    panelCloseBtnIcon: css`
-      color: ${colors.gray[400]};
-      width: ${size[2]};
-      height: ${size[2]};
-    `
-  };
-};
-function useStyles() {
-  const shadowDomTarget = React__default.useContext(ShadowDomTargetContext);
-  const [_styles] = React__default.useState(() => stylesFactory(shadowDomTarget));
-  return _styles;
-}
-export {
-  useStyles
-};
-//# sourceMappingURL=useStyles.js.map