@tanstack/react-router-devtools 0.0.1-beta.2 → 0.0.1-beta.30

package/build/esm/index.js

@@ -10,893 +10,51 @@
  */
 import * as React from 'react';
 import React__default from 'react';
-import { last } from '@tanstack/react-router';
+import { routerContext, invariant, last } from '@tanstack/react-router';
+import { formatDistanceStrict } from 'date-fns';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
-  return target;
-}
-
-function requiredArgs(required, args) {
-  if (args.length < required) {
-    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
-  }
-}
-
-/**
- * @name toDate
- * @category Common Helpers
- * @summary Convert the given argument to an instance of Date.
- *
- * @description
- * Convert the given argument to an instance of Date.
- *
- * If the argument is an instance of Date, the function returns its clone.
- *
- * If the argument is a number, it is treated as a timestamp.
- *
- * If the argument is none of the above, the function returns Invalid Date.
- *
- * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
- *
- * @param {Date|Number} argument - the value to convert
- * @returns {Date} the parsed date in the local time zone
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // Clone the date:
- * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
- * //=> Tue Feb 11 2014 11:30:30
- *
- * @example
- * // Convert the timestamp to date:
- * const result = toDate(1392098430000)
- * //=> Tue Feb 11 2014 11:30:30
- */
-
-function toDate(argument) {
-  requiredArgs(1, arguments);
-  var argStr = Object.prototype.toString.call(argument); // Clone the date
-
-  if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') {
-    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
-    return new Date(argument.getTime());
-  } else if (typeof argument === 'number' || argStr === '[object Number]') {
-    return new Date(argument);
-  } else {
-    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"); // eslint-disable-next-line no-console
-
-      console.warn(new Error().stack);
-    }
-
-    return new Date(NaN);
-  }
-}
-
-var defaultOptions = {};
-function getDefaultOptions() {
-  return defaultOptions;
-}
-
-/**
- * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
- * They usually appear for dates that denote time before the timezones were introduced
- * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
- * and GMT+01:00:00 after that date)
- *
- * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
- * which would lead to incorrect calculations.
- *
- * This function returns the timezone offset in milliseconds that takes seconds in account.
- */
-function getTimezoneOffsetInMilliseconds(date) {
-  var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
-  utcDate.setUTCFullYear(date.getFullYear());
-  return date.getTime() - utcDate.getTime();
-}
-
-/**
- * @name compareAsc
- * @category Common Helpers
- * @summary Compare the two dates and return -1, 0 or 1.
- *
- * @description
- * Compare the two dates and return 1 if the first date is after the second,
- * -1 if the first date is before the second or 0 if dates are equal.
- *
- * @param {Date|Number} dateLeft - the first date to compare
- * @param {Date|Number} dateRight - the second date to compare
- * @returns {Number} the result of the comparison
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Compare 11 February 1987 and 10 July 1989:
- * const result = compareAsc(new Date(1987, 1, 11), new Date(1989, 6, 10))
- * //=> -1
- *
- * @example
- * // Sort the array of dates:
- * const result = [
- *   new Date(1995, 6, 2),
- *   new Date(1987, 1, 11),
- *   new Date(1989, 6, 10)
- * ].sort(compareAsc)
- * //=> [
- * //   Wed Feb 11 1987 00:00:00,
- * //   Mon Jul 10 1989 00:00:00,
- * //   Sun Jul 02 1995 00:00:00
- * // ]
- */
-
-function compareAsc(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  var diff = dateLeft.getTime() - dateRight.getTime();
-
-  if (diff < 0) {
-    return -1;
-  } else if (diff > 0) {
-    return 1; // Return 0 if diff is 0; return NaN if diff is NaN
-  } else {
-    return diff;
-  }
-}
-
-var formatDistanceLocale = {
-  lessThanXSeconds: {
-    one: 'less than a second',
-    other: 'less than {{count}} seconds'
-  },
-  xSeconds: {
-    one: '1 second',
-    other: '{{count}} seconds'
-  },
-  halfAMinute: 'half a minute',
-  lessThanXMinutes: {
-    one: 'less than a minute',
-    other: 'less than {{count}} minutes'
-  },
-  xMinutes: {
-    one: '1 minute',
-    other: '{{count}} minutes'
-  },
-  aboutXHours: {
-    one: 'about 1 hour',
-    other: 'about {{count}} hours'
-  },
-  xHours: {
-    one: '1 hour',
-    other: '{{count}} hours'
-  },
-  xDays: {
-    one: '1 day',
-    other: '{{count}} days'
-  },
-  aboutXWeeks: {
-    one: 'about 1 week',
-    other: 'about {{count}} weeks'
-  },
-  xWeeks: {
-    one: '1 week',
-    other: '{{count}} weeks'
-  },
-  aboutXMonths: {
-    one: 'about 1 month',
-    other: 'about {{count}} months'
-  },
-  xMonths: {
-    one: '1 month',
-    other: '{{count}} months'
-  },
-  aboutXYears: {
-    one: 'about 1 year',
-    other: 'about {{count}} years'
-  },
-  xYears: {
-    one: '1 year',
-    other: '{{count}} years'
-  },
-  overXYears: {
-    one: 'over 1 year',
-    other: 'over {{count}} years'
-  },
-  almostXYears: {
-    one: 'almost 1 year',
-    other: 'almost {{count}} years'
-  }
-};
-
-var formatDistance = function (token, count, options) {
-  var result;
-  var tokenValue = formatDistanceLocale[token];
-
-  if (typeof tokenValue === 'string') {
-    result = tokenValue;
-  } else if (count === 1) {
-    result = tokenValue.one;
-  } else {
-    result = tokenValue.other.replace('{{count}}', count.toString());
-  }
-
-  if (options !== null && options !== void 0 && options.addSuffix) {
-    if (options.comparison && options.comparison > 0) {
-      return 'in ' + result;
-    } else {
-      return result + ' ago';
-    }
-  }
-
-  return result;
-};
-
-var formatDistance$1 = formatDistance;
-
-function buildFormatLongFn(args) {
-  return function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    // TODO: Remove String()
-    var width = options.width ? String(options.width) : args.defaultWidth;
-    var format = args.formats[width] || args.formats[args.defaultWidth];
-    return format;
-  };
-}
-
-var dateFormats = {
-  full: 'EEEE, MMMM do, y',
-  long: 'MMMM do, y',
-  medium: 'MMM d, y',
-  short: 'MM/dd/yyyy'
-};
-var timeFormats = {
-  full: 'h:mm:ss a zzzz',
-  long: 'h:mm:ss a z',
-  medium: 'h:mm:ss a',
-  short: 'h:mm a'
-};
-var dateTimeFormats = {
-  full: "{{date}} 'at' {{time}}",
-  long: "{{date}} 'at' {{time}}",
-  medium: '{{date}}, {{time}}',
-  short: '{{date}}, {{time}}'
-};
-var formatLong = {
-  date: buildFormatLongFn({
-    formats: dateFormats,
-    defaultWidth: 'full'
-  }),
-  time: buildFormatLongFn({
-    formats: timeFormats,
-    defaultWidth: 'full'
-  }),
-  dateTime: buildFormatLongFn({
-    formats: dateTimeFormats,
-    defaultWidth: 'full'
-  })
-};
-var formatLong$1 = formatLong;
-
-var formatRelativeLocale = {
-  lastWeek: "'last' eeee 'at' p",
-  yesterday: "'yesterday at' p",
-  today: "'today at' p",
-  tomorrow: "'tomorrow at' p",
-  nextWeek: "eeee 'at' p",
-  other: 'P'
-};
-
-var formatRelative = function (token, _date, _baseDate, _options) {
-  return formatRelativeLocale[token];
-};
-
-var formatRelative$1 = formatRelative;
-
-function buildLocalizeFn(args) {
-  return function (dirtyIndex, options) {
-    var context = options !== null && options !== void 0 && options.context ? String(options.context) : 'standalone';
-    var valuesArray;
-
-    if (context === 'formatting' && args.formattingValues) {
-      var defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
-      var width = options !== null && options !== void 0 && options.width ? String(options.width) : defaultWidth;
-      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
-    } else {
-      var _defaultWidth = args.defaultWidth;
-
-      var _width = options !== null && options !== void 0 && options.width ? String(options.width) : args.defaultWidth;
-
-      valuesArray = args.values[_width] || args.values[_defaultWidth];
-    }
-
-    var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex; // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!
-
-    return valuesArray[index];
-  };
-}
-
-var eraValues = {
-  narrow: ['B', 'A'],
-  abbreviated: ['BC', 'AD'],
-  wide: ['Before Christ', 'Anno Domini']
-};
-var quarterValues = {
-  narrow: ['1', '2', '3', '4'],
-  abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'],
-  wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter']
-}; // Note: in English, the names of days of the week and months are capitalized.
-// If you are making a new locale based on this one, check if the same is true for the language you're working on.
-// Generally, formatted dates should look like they are in the middle of a sentence,
-// e.g. in Spanish language the weekdays and months should be in the lowercase.
-
-var monthValues = {
-  narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
-  abbreviated: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-  wide: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-};
-var dayValues = {
-  narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-  short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-  abbreviated: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-  wide: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-};
-var dayPeriodValues = {
-  narrow: {
-    am: 'a',
-    pm: 'p',
-    midnight: 'mi',
-    noon: 'n',
-    morning: 'morning',
-    afternoon: 'afternoon',
-    evening: 'evening',
-    night: 'night'
-  },
-  abbreviated: {
-    am: 'AM',
-    pm: 'PM',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'morning',
-    afternoon: 'afternoon',
-    evening: 'evening',
-    night: 'night'
-  },
-  wide: {
-    am: 'a.m.',
-    pm: 'p.m.',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'morning',
-    afternoon: 'afternoon',
-    evening: 'evening',
-    night: 'night'
-  }
-};
-var formattingDayPeriodValues = {
-  narrow: {
-    am: 'a',
-    pm: 'p',
-    midnight: 'mi',
-    noon: 'n',
-    morning: 'in the morning',
-    afternoon: 'in the afternoon',
-    evening: 'in the evening',
-    night: 'at night'
-  },
-  abbreviated: {
-    am: 'AM',
-    pm: 'PM',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'in the morning',
-    afternoon: 'in the afternoon',
-    evening: 'in the evening',
-    night: 'at night'
-  },
-  wide: {
-    am: 'a.m.',
-    pm: 'p.m.',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'in the morning',
-    afternoon: 'in the afternoon',
-    evening: 'in the evening',
-    night: 'at night'
-  }
-};
-
-var ordinalNumber = function (dirtyNumber, _options) {
-  var number = Number(dirtyNumber); // If ordinal numbers depend on context, for example,
-  // if they are different for different grammatical genders,
-  // use `options.unit`.
-  //
-  // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
-  // 'day', 'hour', 'minute', 'second'.
-
-  var rem100 = number % 100;
-
-  if (rem100 > 20 || rem100 < 10) {
-    switch (rem100 % 10) {
-      case 1:
-        return number + 'st';
-
-      case 2:
-        return number + 'nd';
-
-      case 3:
-        return number + 'rd';
-    }
-  }
-
-  return number + 'th';
-};
-
-var localize = {
-  ordinalNumber: ordinalNumber,
-  era: buildLocalizeFn({
-    values: eraValues,
-    defaultWidth: 'wide'
-  }),
-  quarter: buildLocalizeFn({
-    values: quarterValues,
-    defaultWidth: 'wide',
-    argumentCallback: function (quarter) {
-      return quarter - 1;
-    }
-  }),
-  month: buildLocalizeFn({
-    values: monthValues,
-    defaultWidth: 'wide'
-  }),
-  day: buildLocalizeFn({
-    values: dayValues,
-    defaultWidth: 'wide'
-  }),
-  dayPeriod: buildLocalizeFn({
-    values: dayPeriodValues,
-    defaultWidth: 'wide',
-    formattingValues: formattingDayPeriodValues,
-    defaultFormattingWidth: 'wide'
-  })
-};
-var localize$1 = localize;
-
-function buildMatchFn(args) {
-  return function (string) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var width = options.width;
-    var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
-    var matchResult = string.match(matchPattern);
-
-    if (!matchResult) {
-      return null;
-    }
-
-    var matchedString = matchResult[0];
-    var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
-    var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) {
-      return pattern.test(matchedString);
-    }) : findKey(parsePatterns, function (pattern) {
-      return pattern.test(matchedString);
-    });
-    var value;
-    value = args.valueCallback ? args.valueCallback(key) : key;
-    value = options.valueCallback ? options.valueCallback(value) : value;
-    var rest = string.slice(matchedString.length);
-    return {
-      value: value,
-      rest: rest
-    };
-  };
-}
-
-function findKey(object, predicate) {
-  for (var key in object) {
-    if (object.hasOwnProperty(key) && predicate(object[key])) {
-      return key;
-    }
-  }
-
-  return undefined;
-}
-
-function findIndex(array, predicate) {
-  for (var key = 0; key < array.length; key++) {
-    if (predicate(array[key])) {
-      return key;
-    }
-  }
-
-  return undefined;
-}
-
-function buildMatchPatternFn(args) {
-  return function (string) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var matchResult = string.match(args.matchPattern);
-    if (!matchResult) return null;
-    var matchedString = matchResult[0];
-    var parseResult = string.match(args.parsePattern);
-    if (!parseResult) return null;
-    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
-    value = options.valueCallback ? options.valueCallback(value) : value;
-    var rest = string.slice(matchedString.length);
-    return {
-      value: value,
-      rest: rest
-    };
-  };
-}
-
-var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
-var parseOrdinalNumberPattern = /\d+/i;
-var matchEraPatterns = {
-  narrow: /^(b|a)/i,
-  abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
-  wide: /^(before christ|before common era|anno domini|common era)/i
-};
-var parseEraPatterns = {
-  any: [/^b/i, /^(a|c)/i]
-};
-var matchQuarterPatterns = {
-  narrow: /^[1234]/i,
-  abbreviated: /^q[1234]/i,
-  wide: /^[1234](th|st|nd|rd)? quarter/i
-};
-var parseQuarterPatterns = {
-  any: [/1/i, /2/i, /3/i, /4/i]
-};
-var matchMonthPatterns = {
-  narrow: /^[jfmasond]/i,
-  abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
-  wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
-};
-var parseMonthPatterns = {
-  narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
-  any: [/^ja/i, /^f/i, /^mar/i, /^ap/i, /^may/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i]
-};
-var matchDayPatterns = {
-  narrow: /^[smtwf]/i,
-  short: /^(su|mo|tu|we|th|fr|sa)/i,
-  abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
-  wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
-};
-var parseDayPatterns = {
-  narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
-  any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
-};
-var matchDayPeriodPatterns = {
-  narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
-  any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
-};
-var parseDayPeriodPatterns = {
-  any: {
-    am: /^a/i,
-    pm: /^p/i,
-    midnight: /^mi/i,
-    noon: /^no/i,
-    morning: /morning/i,
-    afternoon: /afternoon/i,
-    evening: /evening/i,
-    night: /night/i
-  }
-};
-var match = {
-  ordinalNumber: buildMatchPatternFn({
-    matchPattern: matchOrdinalNumberPattern,
-    parsePattern: parseOrdinalNumberPattern,
-    valueCallback: function (value) {
-      return parseInt(value, 10);
-    }
-  }),
-  era: buildMatchFn({
-    matchPatterns: matchEraPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseEraPatterns,
-    defaultParseWidth: 'any'
-  }),
-  quarter: buildMatchFn({
-    matchPatterns: matchQuarterPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseQuarterPatterns,
-    defaultParseWidth: 'any',
-    valueCallback: function (index) {
-      return index + 1;
-    }
-  }),
-  month: buildMatchFn({
-    matchPatterns: matchMonthPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseMonthPatterns,
-    defaultParseWidth: 'any'
-  }),
-  day: buildMatchFn({
-    matchPatterns: matchDayPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseDayPatterns,
-    defaultParseWidth: 'any'
-  }),
-  dayPeriod: buildMatchFn({
-    matchPatterns: matchDayPeriodPatterns,
-    defaultMatchWidth: 'any',
-    parsePatterns: parseDayPeriodPatterns,
-    defaultParseWidth: 'any'
-  })
-};
-var match$1 = match;
-
-/**
- * @type {Locale}
- * @category Locales
- * @summary English locale (United States).
- * @language English
- * @iso-639-2 eng
- * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp}
- * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss}
- */
-var locale = {
-  code: 'en-US',
-  formatDistance: formatDistance$1,
-  formatLong: formatLong$1,
-  formatRelative: formatRelative$1,
-  localize: localize$1,
-  match: match$1,
-  options: {
-    weekStartsOn: 0
-    /* Sunday */
-    ,
-    firstWeekContainsDate: 1
-  }
-};
-var defaultLocale = locale;
-
-function assign(target, object) {
-  if (target == null) {
-    throw new TypeError('assign requires that input parameter not be null or undefined');
-  }
-
-  for (var property in object) {
-    if (Object.prototype.hasOwnProperty.call(object, property)) {
-      target[property] = object[property];
-    }
-  }
-
   return target;
 }
 
-function cloneObject(object) {
-  return assign({}, object);
-}
-
-var MILLISECONDS_IN_MINUTE = 1000 * 60;
-var MINUTES_IN_DAY = 60 * 24;
-var MINUTES_IN_MONTH = MINUTES_IN_DAY * 30;
-var MINUTES_IN_YEAR = MINUTES_IN_DAY * 365;
-/**
- * @name formatDistanceStrict
- * @category Common Helpers
- * @summary Return the distance between the given dates in words.
- *
- * @description
- * Return the distance between the given dates in words, using strict units.
- * This is like `formatDistance`, but does not use helpers like 'almost', 'over',
- * 'less than' and the like.
- *
- * | Distance between dates | Result              |
- * |------------------------|---------------------|
- * | 0 ... 59 secs          | [0..59] seconds     |
- * | 1 ... 59 mins          | [1..59] minutes     |
- * | 1 ... 23 hrs           | [1..23] hours       |
- * | 1 ... 29 days          | [1..29] days        |
- * | 1 ... 11 months        | [1..11] months      |
- * | 1 ... N years          | [1..N]  years       |
- *
- * @param {Date|Number} date - the date
- * @param {Date|Number} baseDate - the date to compare with
- * @param {Object} [options] - an object with options.
- * @param {Boolean} [options.addSuffix=false] - result indicates if the second date is earlier or later than the first
- * @param {'second'|'minute'|'hour'|'day'|'month'|'year'} [options.unit] - if specified, will force a unit
- * @param {'floor'|'ceil'|'round'} [options.roundingMethod='round'] - which way to round partial units
- * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
- * @returns {String} the distance in words
- * @throws {TypeError} 2 arguments required
- * @throws {RangeError} `date` must not be Invalid Date
- * @throws {RangeError} `baseDate` must not be Invalid Date
- * @throws {RangeError} `options.roundingMethod` must be 'floor', 'ceil' or 'round'
- * @throws {RangeError} `options.unit` must be 'second', 'minute', 'hour', 'day', 'month' or 'year'
- * @throws {RangeError} `options.locale` must contain `formatDistance` property
- *
- * @example
- * // What is the distance between 2 July 2014 and 1 January 2015?
- * const result = formatDistanceStrict(new Date(2014, 6, 2), new Date(2015, 0, 2))
- * //=> '6 months'
- *
- * @example
- * // What is the distance between 1 January 2015 00:00:15
- * // and 1 January 2015 00:00:00?
- * const result = formatDistanceStrict(
- *   new Date(2015, 0, 1, 0, 0, 15),
- *   new Date(2015, 0, 1, 0, 0, 0)
- * )
- * //=> '15 seconds'
- *
- * @example
- * // What is the distance from 1 January 2016
- * // to 1 January 2015, with a suffix?
- * const result = formatDistanceStrict(new Date(2015, 0, 1), new Date(2016, 0, 1), {
- *   addSuffix: true
- * })
- * //=> '1 year ago'
- *
- * @example
- * // What is the distance from 1 January 2016
- * // to 1 January 2015, in minutes?
- * const result = formatDistanceStrict(new Date(2016, 0, 1), new Date(2015, 0, 1), {
- *   unit: 'minute'
- * })
- * //=> '525600 minutes'
- *
- * @example
- * // What is the distance from 1 January 2015
- * // to 28 January 2015, in months, rounded up?
- * const result = formatDistanceStrict(new Date(2015, 0, 28), new Date(2015, 0, 1), {
- *   unit: 'month',
- *   roundingMethod: 'ceil'
- * })
- * //=> '1 month'
- *
- * @example
- * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?
- * import { eoLocale } from 'date-fns/locale/eo'
- * const result = formatDistanceStrict(new Date(2016, 7, 1), new Date(2015, 0, 1), {
- *   locale: eoLocale
- * })
- * //=> '1 jaro'
- */
-
-function formatDistanceStrict(dirtyDate, dirtyBaseDate, options) {
-  var _ref, _options$locale, _options$roundingMeth;
-
-  requiredArgs(2, arguments);
-  var defaultOptions = getDefaultOptions();
-  var locale = (_ref = (_options$locale = options === null || options === void 0 ? void 0 : options.locale) !== null && _options$locale !== void 0 ? _options$locale : defaultOptions.locale) !== null && _ref !== void 0 ? _ref : defaultLocale;
-
-  if (!locale.formatDistance) {
-    throw new RangeError('locale must contain localize.formatDistance property');
-  }
-
-  var comparison = compareAsc(dirtyDate, dirtyBaseDate);
-
-  if (isNaN(comparison)) {
-    throw new RangeError('Invalid time value');
-  }
-
-  var localizeOptions = assign(cloneObject(options), {
-    addSuffix: Boolean(options === null || options === void 0 ? void 0 : options.addSuffix),
-    comparison: comparison
-  });
-  var dateLeft;
-  var dateRight;
-
-  if (comparison > 0) {
-    dateLeft = toDate(dirtyBaseDate);
-    dateRight = toDate(dirtyDate);
-  } else {
-    dateLeft = toDate(dirtyDate);
-    dateRight = toDate(dirtyBaseDate);
-  }
-
-  var roundingMethod = String((_options$roundingMeth = options === null || options === void 0 ? void 0 : options.roundingMethod) !== null && _options$roundingMeth !== void 0 ? _options$roundingMeth : 'round');
-  var roundingMethodFn;
-
-  if (roundingMethod === 'floor') {
-    roundingMethodFn = Math.floor;
-  } else if (roundingMethod === 'ceil') {
-    roundingMethodFn = Math.ceil;
-  } else if (roundingMethod === 'round') {
-    roundingMethodFn = Math.round;
-  } else {
-    throw new RangeError("roundingMethod must be 'floor', 'ceil' or 'round'");
-  }
-
-  var milliseconds = dateRight.getTime() - dateLeft.getTime();
-  var minutes = milliseconds / MILLISECONDS_IN_MINUTE;
-  var timezoneOffset = getTimezoneOffsetInMilliseconds(dateRight) - getTimezoneOffsetInMilliseconds(dateLeft); // Use DST-normalized difference in minutes for years, months and days;
-  // use regular difference in minutes for hours, minutes and seconds.
-
-  var dstNormalizedMinutes = (milliseconds - timezoneOffset) / MILLISECONDS_IN_MINUTE;
-  var defaultUnit = options === null || options === void 0 ? void 0 : options.unit;
-  var unit;
-
-  if (!defaultUnit) {
-    if (minutes < 1) {
-      unit = 'second';
-    } else if (minutes < 60) {
-      unit = 'minute';
-    } else if (minutes < MINUTES_IN_DAY) {
-      unit = 'hour';
-    } else if (dstNormalizedMinutes < MINUTES_IN_MONTH) {
-      unit = 'day';
-    } else if (dstNormalizedMinutes < MINUTES_IN_YEAR) {
-      unit = 'month';
-    } else {
-      unit = 'year';
-    }
-  } else {
-    unit = String(defaultUnit);
-  } // 0 up to 60 seconds
-
-
-  if (unit === 'second') {
-    var seconds = roundingMethodFn(milliseconds / 1000);
-    return locale.formatDistance('xSeconds', seconds, localizeOptions); // 1 up to 60 mins
-  } else if (unit === 'minute') {
-    var roundedMinutes = roundingMethodFn(minutes);
-    return locale.formatDistance('xMinutes', roundedMinutes, localizeOptions); // 1 up to 24 hours
-  } else if (unit === 'hour') {
-    var hours = roundingMethodFn(minutes / 60);
-    return locale.formatDistance('xHours', hours, localizeOptions); // 1 up to 30 days
-  } else if (unit === 'day') {
-    var days = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_DAY);
-    return locale.formatDistance('xDays', days, localizeOptions); // 1 up to 12 months
-  } else if (unit === 'month') {
-    var months = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_MONTH);
-    return months === 12 && defaultUnit !== 'month' ? locale.formatDistance('xYears', 1, localizeOptions) : locale.formatDistance('xMonths', months, localizeOptions); // 1 year up to max Date
-  } else if (unit === 'year') {
-    var years = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_YEAR);
-    return locale.formatDistance('xYears', years, localizeOptions);
-  }
-
-  throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'");
-}
-
 const getItem = key => {
   try {
     const itemValue = localStorage.getItem(key);
-
     if (typeof itemValue === 'string') {
       return JSON.parse(itemValue);
     }
-
     return undefined;
   } catch (_unused) {
     return undefined;
   }
 };
-
 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 {
@@ -906,15 +64,12 @@ function useLocalStorage(key, defaultValue) {
   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 (_unused2) {}
-
       return newVal;
     });
   }, [key]);
@@ -938,10 +93,9 @@ const defaultTheme = {
 const ThemeContext = /*#__PURE__*/React__default.createContext(defaultTheme);
 function ThemeProvider(_ref) {
   let {
-    theme
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
+      theme
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, _extends({
     value: theme
   }, rest));
@@ -956,34 +110,34 @@ function useMediaQuery(query) {
     if (typeof window !== 'undefined') {
       return window.matchMedia && window.matchMedia(query).matches;
     }
-
     return;
-  }); // Watch for changes
+  });
 
+  // Watch for changes
   React__default.useEffect(() => {
     if (typeof window !== 'undefined') {
       if (!window.matchMedia) {
         return;
-      } // Create a matcher
-
+      }
 
-      const matcher = window.matchMedia(query); // Create our handler
+      // Create a matcher
+      const matcher = window.matchMedia(query);
 
+      // Create our handler
       const onChange = _ref => {
         let {
           matches
         } = _ref;
         return setIsMatch(matches);
-      }; // Listen for changes
-
+      };
 
+      // Listen for changes
       matcher.addListener(onChange);
       return () => {
         // Stop listening for changes
         matcher.removeListener(onChange);
       };
     }
-
     return;
   }, [isMatch, query, setIsMatch]);
   return isMatch;
@@ -992,8 +146,10 @@ function useMediaQuery(query) {
 const _excluded$2 = ["style"];
 const isServer$1 = typeof window === 'undefined';
 function getStatusColor(match, theme) {
-  return match.isPending ? theme.warning : match.isFetching ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
-} // export function getQueryStatusLabel(query: Query) {
+  return match.isFetching ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
+}
+
+// export function getQueryStatusLabel(query: Query) {
 //   return query.state.isFetching
 //     ? 'fetching'
 //     : !query.getObserversCount()
@@ -1007,13 +163,11 @@ function styled(type, newStyles, queries) {
   if (queries === void 0) {
     queries = {};
   }
-
   return /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     let {
-      style
-    } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
+        style
+      } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
     const theme = useTheme();
     const mediaStyles = Object.entries(queries).reduce((current, _ref2) => {
       let [key, value] = _ref2;
@@ -1037,22 +191,22 @@ function useIsMounted() {
   }, []);
   return isMounted;
 }
+
 /**
  * Displays a string regardless the type of the data
  * @param {unknown} value Value to be stringified
  */
-
 const displayValue = value => {
   const name = Object.getOwnPropertyNames(Object(value));
   const newValue = typeof value === 'bigint' ? value.toString() + "n" : value;
   return JSON.stringify(newValue, name);
 };
+
 /**
  * This hook is a safe useState version which schedules state updates in microtasks
  * to prevent updating a component state while React is rendering different components
  * or when the component is not mounted anymore.
  */
-
 function useSafeState(initialState) {
   const isMounted = useIsMounted();
   const [state, setState] = React__default.useState(initialState);
@@ -1065,45 +219,37 @@ function useSafeState(initialState) {
   }, [isMounted]);
   return [state, safeSetState];
 }
+
 /**
  * Schedules a microtask.
  * This can be useful to schedule state updates after rendering.
  */
-
 function scheduleMicrotask(callback) {
   Promise.resolve().then(callback).catch(error => setTimeout(() => {
     throw error;
   }));
 }
-
 function multiSortBy(arr, accessors) {
   if (accessors === void 0) {
     accessors = [d => d];
   }
-
   return arr.map((d, i) => [d, i]).sort((_ref3, _ref4) => {
     let [a, ai] = _ref3;
     let [b, bi] = _ref4;
-
     for (const accessor of accessors) {
       const ao = accessor(a);
       const bo = accessor(b);
-
       if (typeof ao === 'undefined') {
         if (typeof bo === 'undefined') {
           continue;
         }
-
         return 1;
       }
-
       if (ao === bo) {
         continue;
       }
-
       return ao > bo ? 1 : -1;
     }
-
     return ai - bi;
   }).map(_ref5 => {
     let [d] = _ref5;
@@ -1122,10 +268,11 @@ const Panel = styled('div', (_props, theme) => ({
     flexDirection: 'column'
   },
   '(max-width: 600px)': {
-    fontSize: '.9em' // flexDirection: 'column',
-
+    fontSize: '.9em'
+    // flexDirection: 'column',
   }
 });
+
 const ActivePanel = styled('div', () => ({
   flex: '1 1 500px',
   display: 'flex',
@@ -1148,10 +295,13 @@ const Button = styled('button', (props, theme) => ({
   padding: '.5em',
   opacity: props.disabled ? '.5' : undefined,
   cursor: 'pointer'
-})); // export const QueryKeys = styled('span', {
+}));
+
+// export const QueryKeys = styled('span', {
 //   display: 'inline-block',
 //   fontSize: '0.9em',
 // })
+
 // export const QueryKey = styled('span', {
 //   display: 'inline-flex',
 //   alignItems: 'center',
@@ -1246,7 +396,6 @@ const Expander = _ref => {
     }, style)
   }, "\u25B6");
 };
-
 /**
  * Chunk elements in the array by size
  *
@@ -1260,12 +409,10 @@ function chunkArray(array, size) {
   if (size < 1) return [];
   let i = 0;
   const result = [];
-
   while (i < array.length) {
     result.push(array.slice(i, i + size));
     i = i + size;
   }
-
   return result;
 }
 const DefaultRenderer = _ref2 => {
@@ -1283,11 +430,9 @@ const DefaultRenderer = _ref2 => {
   } = _ref2;
   const [expandedPages, setExpandedPages] = React.useState([]);
   const [valueSnapshot, setValueSnapshot] = React.useState(undefined);
-
   const refreshValueSnapshot = () => {
     setValueSnapshot(value());
   };
-
   return /*#__PURE__*/React.createElement(Entry, null, subEntryPages.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ExpandButton, {
     onClick: () => toggleExpanded()
   }, /*#__PURE__*/React.createElement(Expander, {
@@ -1312,25 +457,21 @@ const DefaultRenderer = _ref2 => {
     defaultExpanded: {}
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, label, ":"), " ", /*#__PURE__*/React.createElement(Value, null, displayValue(value))));
 };
-
 function isIterable(x) {
   return Symbol.iterator in x;
 }
-
 function Explorer(_ref3) {
   let {
-    value,
-    defaultExpanded,
-    renderer = DefaultRenderer,
-    pageSize = 100
-  } = _ref3,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
-
+      value,
+      defaultExpanded,
+      renderer = DefaultRenderer,
+      pageSize = 100
+    } = _ref3,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded));
   const toggleExpanded = React.useCallback(() => setExpanded(old => !old), []);
   let type = typeof value;
   let subEntries = [];
-
   const makeProperty = sub => {
     const subDefaultExpanded = defaultExpanded === true ? {
       [sub.label]: true
@@ -1339,7 +480,6 @@ function Explorer(_ref3) {
       defaultExpanded: subDefaultExpanded
     });
   };
-
   if (Array.isArray(value)) {
     type = 'array';
     subEntries = value.map((d, i) => makeProperty({
@@ -1362,7 +502,6 @@ function Explorer(_ref3) {
       });
     });
   }
-
   const subEntryPages = chunkArray(subEntries, pageSize);
   return renderer(_extends({
     handleEntry: entry => /*#__PURE__*/React.createElement(Explorer, _extends({
@@ -1381,21 +520,19 @@ function Explorer(_ref3) {
 }
 
 const _excluded = ["style"],
-      _excluded2 = ["style", "onClick"],
-      _excluded3 = ["style", "onClick"],
-      _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "router"];
+  _excluded2 = ["style", "onClick"],
+  _excluded3 = ["style", "onClick"],
+  _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "router"];
 const isServer = typeof window === 'undefined';
-
 function Logo(props) {
   var _props$style;
-
   return /*#__PURE__*/React__default.createElement("div", _extends({}, props, {
     style: _extends({}, (_props$style = props.style) != null ? _props$style : {}, {
       display: 'flex',
       alignItems: 'center',
       flexDirection: 'column',
-      fontSize: '0.7rem',
-      fontWeight: '900',
+      fontSize: '0.8rem',
+      fontWeight: 'bolder',
       lineHeight: '1'
     })
   }), /*#__PURE__*/React__default.createElement("div", {
@@ -1403,14 +540,19 @@ function Logo(props) {
       letterSpacing: '-0.05rem'
     }
   }, "TANSTACK"), /*#__PURE__*/React__default.createElement("div", {
-    className: "text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-emerald-500",
     style: {
+      backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))',
+      // @ts-ignore
+      '--tw-gradient-from': '#84cc16',
+      '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)',
+      '--tw-gradient-to': '#10b981',
+      WebkitBackgroundClip: 'text',
+      color: 'transparent',
       letterSpacing: '0.1rem',
       marginRight: '-0.2rem'
     }
   }, "ROUTER"));
 }
-
 function TanStackRouterDevtools(_ref) {
   let {
     initialIsOpen,
@@ -1428,10 +570,8 @@ function TanStackRouterDevtools(_ref) {
   const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false);
   const [isResizing, setIsResizing] = useSafeState(false);
   const isMounted = useIsMounted();
-
   const _handleDragStart = (panelElement, startEvent) => {
     var _panelElement$getBoun;
-
     if (startEvent.button !== 0) return; // Only allow left click for drag
 
     setIsResizing(true);
@@ -1439,50 +579,43 @@ function TanStackRouterDevtools(_ref) {
       originalHeight: (_panelElement$getBoun = panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) != null ? _panelElement$getBoun : 0,
       pageY: startEvent.pageY
     };
-
     const run = moveEvent => {
       const delta = dragInfo.pageY - moveEvent.pageY;
       const newHeight = (dragInfo == null ? void 0 : dragInfo.originalHeight) + delta;
       setDevtoolsHeight(newHeight);
-
       if (newHeight < 70) {
         setIsOpen(false);
       } else {
         setIsOpen(true);
       }
     };
-
     const unsub = () => {
       setIsResizing(false);
       document.removeEventListener('mousemove', run);
       document.removeEventListener('mouseUp', unsub);
     };
-
     document.addEventListener('mousemove', run);
     document.addEventListener('mouseup', unsub);
   };
-
   React__default.useEffect(() => {
     setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
-  // Prevents focusing in a closed panel.
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
+  // Toggle panel visibility before/after transition (depending on direction).
+  // Prevents focusing in a closed panel.
   React__default.useEffect(() => {
     const ref = panelRef.current;
-
     if (ref) {
       const handlePanelTransitionStart = () => {
         if (ref && isResolvedOpen) {
           ref.style.visibility = 'visible';
         }
       };
-
       const handlePanelTransitionEnd = () => {
         if (ref && !isResolvedOpen) {
           ref.style.visibility = 'hidden';
         }
       };
-
       ref.addEventListener('transitionstart', handlePanelTransitionStart);
       ref.addEventListener('transitionend', handlePanelTransitionEnd);
       return () => {
@@ -1490,62 +623,49 @@ function TanStackRouterDevtools(_ref) {
         ref.removeEventListener('transitionend', handlePanelTransitionEnd);
       };
     }
-
     return;
   }, [isResolvedOpen]);
   React__default[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
     if (isResolvedOpen) {
       var _rootRef$current, _rootRef$current$pare;
-
       const previousValue = (_rootRef$current = rootRef.current) == null ? void 0 : (_rootRef$current$pare = _rootRef$current.parentElement) == null ? void 0 : _rootRef$current$pare.style.paddingBottom;
-
       const run = () => {
         var _panelRef$current, _rootRef$current2;
-
         const containerHeight = (_panelRef$current = panelRef.current) == null ? void 0 : _panelRef$current.getBoundingClientRect().height;
-
         if ((_rootRef$current2 = rootRef.current) != null && _rootRef$current2.parentElement) {
           rootRef.current.parentElement.style.paddingBottom = containerHeight + "px";
         }
       };
-
       run();
-
       if (typeof window !== 'undefined') {
         window.addEventListener('resize', run);
         return () => {
           var _rootRef$current3;
-
           window.removeEventListener('resize', run);
-
           if ((_rootRef$current3 = rootRef.current) != null && _rootRef$current3.parentElement && typeof previousValue === 'string') {
             rootRef.current.parentElement.style.paddingBottom = previousValue;
           }
         };
       }
     }
-
     return;
   }, [isResolvedOpen]);
-
   const {
-    style: panelStyle = {}
-  } = panelProps,
-        otherPanelProps = _objectWithoutPropertiesLoose(panelProps, _excluded);
-
+      style: panelStyle = {}
+    } = panelProps,
+    otherPanelProps = _objectWithoutPropertiesLoose(panelProps, _excluded);
   const {
-    style: closeButtonStyle = {},
-    onClick: onCloseClick
-  } = closeButtonProps,
-        otherCloseButtonProps = _objectWithoutPropertiesLoose(closeButtonProps, _excluded2);
-
+      style: closeButtonStyle = {},
+      onClick: onCloseClick
+    } = closeButtonProps,
+    otherCloseButtonProps = _objectWithoutPropertiesLoose(closeButtonProps, _excluded2);
   const {
-    style: toggleButtonStyle = {},
-    onClick: onToggleClick
-  } = toggleButtonProps,
-        otherToggleButtonProps = _objectWithoutPropertiesLoose(toggleButtonProps, _excluded3); // Do not render on the server
-
+      style: toggleButtonStyle = {},
+      onClick: onToggleClick
+    } = toggleButtonProps,
+    otherToggleButtonProps = _objectWithoutPropertiesLoose(toggleButtonProps, _excluded3);
 
+  // Do not render on the server
   if (!isMounted()) return null;
   return /*#__PURE__*/React__default.createElement(Container, {
     ref: rootRef,
@@ -1646,19 +766,20 @@ function TanStackRouterDevtools(_ref) {
 }
 const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
   var _Object$values$find$m, _Object$values, _Object$values$find, _router$state$matches, _router$state$pending, _router$state$pending2, _last, _last2, _last3, _last4, _last5, _last6;
-
   const {
-    isOpen = true,
-    handleDragStart,
-    router
-  } = props,
-        panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
-
+      isOpen = true,
+      handleDragStart,
+      router: userRouter
+    } = props,
+    panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
+  const routerContextValue = React__default.useContext(routerContext);
+  const router = userRouter != null ? userRouter : routerContextValue == null ? void 0 : routerContextValue.router;
+  invariant(router, 'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.');
   const rerender = React__default.useReducer(() => ({}), {})[1];
   React__default.useEffect(() => {
     let interval = setInterval(() => {
-      router.cleanMatchCache(); // router.notify()
-
+      router.cleanMatchCache();
+      // router.notify()
       rerender();
     }, 250);
     return () => {
@@ -1677,9 +798,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
   }).map(key => router.matchCache[key]), [d => d.match.isFetching ? -1 : 1, d => -d.match.updatedAt]);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: defaultTheme
-  }, /*#__PURE__*/React__default.createElement("script", {
-    src: "https://cdn.tailwindcss.com"
-  }), /*#__PURE__*/React__default.createElement(Panel, _extends({
+  }, /*#__PURE__*/React__default.createElement(Panel, _extends({
     ref: ref,
     className: "TanStackRouterDevtoolsPanel"
   }, panelProps), /*#__PURE__*/React__default.createElement("style", {
@@ -1709,8 +828,12 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       flexDirection: 'column'
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex justify-start gap-2 p-2 items-center",
     style: {
+      display: 'flex',
+      justifyContent: 'start',
+      gap: '1rem',
+      padding: '1rem',
+      alignItems: 'center',
       background: defaultTheme.backgroundAlt
     }
   }, /*#__PURE__*/React__default.createElement(Logo, {
@@ -1918,10 +1041,6 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     style: {
       opacity: '.5'
     }
-  }, "Pending"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.isPending.toString())), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    style: {
-      opacity: '.5'
-    }
   }, "Invalid"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.isInvalid.toString())), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     style: {
       opacity: '.5'