@tanstack/react-router-devtools 0.0.1-beta.45 → 0.0.1-beta.55

package/build/umd/index.development.js

@@ -9,10 +9,10 @@
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouterDevtools = {}, global.React, global.shim));
-})(this, (function (exports, React, shim) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim/with-selector')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim/with-selector'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouterDevtools = {}, global.React, global.withSelector));
+})(this, (function (exports, React, withSelector) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -52,395 +52,18 @@
     return _extends.apply(this, arguments);
   }
 
-  // src/core.ts
-  var CurrentReaction = void 0;
-  var CurrentGets = null;
-  var CurrentGetsIndex = 0;
-  var EffectQueue = null;
-  var CacheClean = 0;
-  var CacheCheck = 1;
-  var CacheDirty = 2;
-  var Root;
-  var Reactive = class {
-    value;
-    fn;
-    observers = null;
-    sources = null;
-    state;
-    effect;
-    cleanups = null;
-    alwaysUpdate = false;
-    constructor(fnOrValue, type) {
-      if (type != 0 /* Signal */) {
-        this.fn = fnOrValue;
-        this.value = void 0;
-        this.state = CacheDirty;
-        if (Root)
-          Root.push(this);
-        else
-          console.error("Memos and effects must be wrapped in a createRoot");
-        this.effect = type == 2 /* Effect */;
-        if (this.effect)
-          this.update();
-      } else {
-        this.fn = void 0;
-        this.value = fnOrValue;
-        this.state = CacheClean;
-        this.effect = false;
-      }
-    }
-    get() {
-      if (CurrentReaction) {
-        if (!CurrentGets && CurrentReaction.sources && CurrentReaction.sources[CurrentGetsIndex] == this) {
-          CurrentGetsIndex++;
-        } else {
-          if (!CurrentGets)
-            CurrentGets = [this];
-          else
-            CurrentGets.push(this);
-        }
-      }
-      if (this.fn)
-        this.updateIfNecessary();
-      return this.value;
-    }
-    set(value) {
-      const notInBatch = !EffectQueue;
-      const newValue = typeof value === "function" ? value(this.value) : value;
-      if ((this.value !== newValue || this.alwaysUpdate) && this.observers) {
-        for (let i = 0; i < this.observers.length; i++) {
-          this.observers[i].stale(CacheDirty);
-        }
-      }
-      this.value = newValue;
-      if (notInBatch)
-        stabilize();
-      return newValue;
-    }
-    stale(state) {
-      if (this.state < state) {
-        if (this.state === CacheClean && this.effect) {
-          if (EffectQueue)
-            EffectQueue.push(this);
-          else
-            EffectQueue = [this];
-        }
-        this.state = state;
-        if (this.observers) {
-          for (let i = 0; i < this.observers.length; i++) {
-            this.observers[i].stale(CacheCheck);
-          }
-        }
-      }
-    }
-    update() {
-      const oldValue = this.value;
-      const prevReaction = CurrentReaction;
-      const prevGets = CurrentGets;
-      const prevIndex = CurrentGetsIndex;
-      CurrentReaction = this;
-      CurrentGets = null;
-      CurrentGetsIndex = 0;
-      try {
-        if (this.cleanups) {
-          this.cleanups.forEach((c) => c());
-          this.cleanups = null;
-        }
-        this.value = this.fn();
-        if (CurrentGets) {
-          this.removeParentObservers(CurrentGetsIndex);
-          if (this.sources && CurrentGetsIndex > 0) {
-            this.sources.length = CurrentGetsIndex + CurrentGets.length;
-            for (let i = 0; i < CurrentGets.length; i++) {
-              this.sources[CurrentGetsIndex + i] = CurrentGets[i];
-            }
-          } else {
-            this.sources = CurrentGets;
-          }
-          for (let i = CurrentGetsIndex; i < this.sources.length; i++) {
-            const source = this.sources[i];
-            if (!source.observers) {
-              source.observers = [this];
-            } else {
-              source.observers.push(this);
-            }
-          }
-        } else if (this.sources && CurrentGetsIndex < this.sources.length) {
-          this.removeParentObservers(CurrentGetsIndex);
-          this.sources.length = CurrentGetsIndex;
-        }
-      } finally {
-        CurrentGets = prevGets;
-        CurrentReaction = prevReaction;
-        CurrentGetsIndex = prevIndex;
-      }
-      if ((oldValue !== this.value || this.alwaysUpdate) && this.observers) {
-        for (let i = 0; i < this.observers.length; i++) {
-          this.observers[i].state = CacheDirty;
-        }
-      }
-      this.state = CacheClean;
-    }
-    updateIfNecessary() {
-      if (this.state === CacheCheck) {
-        for (const source of this.sources) {
-          source.updateIfNecessary();
-          if (this.state === CacheDirty) {
-            break;
-          }
-        }
-      }
-      if (this.state === CacheDirty) {
-        this.update();
-      }
-      this.state = CacheClean;
-    }
-    removeParentObservers(index) {
-      if (!this.sources)
-        return;
-      for (let i = index; i < this.sources.length; i++) {
-        const source = this.sources[i];
-        const swap = source.observers.findIndex((v) => v === this);
-        source.observers[swap] = source.observers[source.observers.length - 1];
-        source.observers.pop();
-      }
-    }
-    destroy() {
-      if (this.cleanups) {
-        this.cleanups.forEach((c) => c());
-        this.cleanups = null;
-      }
-      this.removeParentObservers(0);
-    }
-  };
-  function stabilize() {
-    if (!EffectQueue)
-      return;
-    for (let i = 0; i < EffectQueue.length; i++) {
-      EffectQueue[i].get();
-    }
-    EffectQueue = null;
-  }
-  function createEffect(fn) {
-    const effect = new Reactive(fn, 2 /* Effect */);
-    return effect.get.bind(effect);
-  }
-  function createRoot(fn) {
-    let root = [];
-    Root = root;
-    fn();
-    Root = null;
-    return () => {
-      if (!root)
-        return;
-      root.forEach((r) => r.destroy());
-      root = null;
-    };
-  }
-  function batch(fn) {
-    EffectQueue = [];
-    let out = fn();
-    stabilize();
-    return out;
-  }
-  function untrack(fn) {
-    const listener = CurrentReaction;
-    CurrentReaction = void 0;
-    try {
-      return fn();
-    } finally {
-      CurrentReaction = listener;
-    }
-  }
-
-  // src/store.ts
-  var $RAW = Symbol("store-raw");
-  var $TRACK = Symbol("track");
-  var $PROXY = Symbol("store-proxy");
-  var $NODE = Symbol("store-node");
-  function wrap(value) {
-    let p = value[$PROXY];
-    if (!p) {
-      Object.defineProperty(value, $PROXY, {
-        value: p = new Proxy(value, proxyTraps)
-      });
-      if (!Array.isArray(value)) {
-        const keys = Object.keys(value);
-        const desc = Object.getOwnPropertyDescriptors(value);
-        for (let i = 0, l = keys.length; i < l; i++) {
-          const prop = keys[i];
-          if (desc[prop].get) {
-            const get = desc[prop].get.bind(p);
-            Object.defineProperty(value, prop, {
-              enumerable: desc[prop].enumerable,
-              get
-            });
-          }
-        }
-      }
-    }
-    return p;
-  }
-  function isWrappable(obj) {
-    let proto;
-    return obj != null && typeof obj === "object" && (obj[$PROXY] || !(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype || Array.isArray(obj));
-  }
-  function unwrap(item, set = /* @__PURE__ */ new Set()) {
-    let result, unwrapped, v, prop;
-    if (result = item != null && item[$RAW])
-      return result;
-    if (!isWrappable(item) || set.has(item))
-      return item;
-    if (Array.isArray(item)) {
-      if (Object.isFrozen(item))
-        item = item.slice(0);
-      else
-        set.add(item);
-      for (let i = 0, l = item.length; i < l; i++) {
-        v = item[i];
-        if ((unwrapped = unwrap(v, set)) !== v)
-          item[i] = unwrapped;
-      }
-    } else {
-      if (Object.isFrozen(item))
-        item = Object.assign({}, item);
-      else
-        set.add(item);
-      const keys = Object.keys(item);
-      const desc = Object.getOwnPropertyDescriptors(item);
-      for (let i = 0, l = keys.length; i < l; i++) {
-        prop = keys[i];
-        if (desc[prop].get)
-          continue;
-        v = item[prop];
-        if ((unwrapped = unwrap(v, set)) !== v)
-          item[prop] = unwrapped;
-      }
-    }
-    return item;
-  }
-  function getDataNodes(target) {
-    let nodes = target[$NODE];
-    if (!nodes)
-      Object.defineProperty(target, $NODE, { value: nodes = {} });
-    return nodes;
-  }
-  function getDataNode(nodes, property, value) {
-    return nodes[property] || (nodes[property] = createDataNode(value));
-  }
-  function proxyDescriptor(target, property) {
-    const desc = Reflect.getOwnPropertyDescriptor(target, property);
-    if (!desc || desc.get || !desc.configurable || property === $PROXY || property === $NODE)
-      return desc;
-    delete desc.value;
-    delete desc.writable;
-    desc.get = () => target[$PROXY][property];
-    return desc;
-  }
-  function trackSelf(target) {
-    if (CurrentReaction) {
-      const nodes = getDataNodes(target);
-      (nodes._ || (nodes._ = createDataNode())).get();
-    }
-  }
-  function ownKeys(target) {
-    trackSelf(target);
-    return Reflect.ownKeys(target);
-  }
-  function createDataNode(value) {
-    const s = new Reactive(value, 0);
-    s.alwaysUpdate = true;
-    return s;
-  }
-  var Writing = false;
-  var proxyTraps = {
-    get(target, property, receiver) {
-      if (property === $RAW)
-        return target;
-      if (property === $PROXY)
-        return receiver;
-      if (property === $TRACK) {
-        trackSelf(target);
-        return receiver;
-      }
-      const nodes = getDataNodes(target);
-      const tracked = nodes.hasOwnProperty(property);
-      let value = tracked ? nodes[property].get() : target[property];
-      if (property === $NODE || property === "__proto__")
-        return value;
-      if (!tracked) {
-        const desc = Object.getOwnPropertyDescriptor(target, property);
-        if (CurrentReaction && (typeof value !== "function" || target.hasOwnProperty(property)) && !(desc && desc.get))
-          value = getDataNode(nodes, property, value).get();
-      }
-      return isWrappable(value) ? wrap(value) : value;
-    },
-    has(target, property) {
-      if (property === $RAW || property === $PROXY || property === $TRACK || property === $NODE || property === "__proto__")
-        return true;
-      this.get(target, property, target);
-      return property in target;
-    },
-    set(target, property, value) {
-      Writing && setProperty(target, property, unwrap(value));
-      return true;
-    },
-    deleteProperty(target, property) {
-      Writing && setProperty(target, property, void 0, true);
-      return true;
-    },
-    ownKeys,
-    getOwnPropertyDescriptor: proxyDescriptor
-  };
-  function setProperty(state, property, value, deleting = false) {
-    if (!deleting && state[property] === value)
-      return;
-    const prev = state[property];
-    const len = state.length;
-    if (deleting)
-      delete state[property];
-    else
-      state[property] = value;
-    const nodes = getDataNodes(state);
-    let node;
-    if (node = getDataNode(nodes, property, prev))
-      node.set(() => value);
-    if (Array.isArray(state) && state.length !== len)
-      (node = getDataNode(nodes, "length", len)) && node.set(state.length);
-    (node = nodes._) && node.set();
-  }
-  function createStore(store) {
-    const unwrappedStore = unwrap(store);
-    const wrappedStore = wrap(unwrappedStore);
-    const setStore = (fn) => {
-      batch(() => {
-        try {
-          Writing = true;
-          fn(wrappedStore);
-        } finally {
-          Writing = false;
-        }
-      });
-    };
-    return [wrappedStore, setStore];
-  }
-
-  var isProduction = "development" === 'production';
   var prefix = 'Invariant failed';
   function invariant(condition, message) {
       if (condition) {
           return;
       }
-      if (isProduction) {
-          throw new Error(prefix);
-      }
       var provided = typeof message === 'function' ? message() : message;
       var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
       throw new Error(value);
   }
 
   /**
-   * router-core
+   * router
    *
    * Copyright (c) TanStack
    *
@@ -464,114 +87,61 @@
   }
 
   /**
-   * This function returns `a` if `b` is deeply equal.
-   * If not, it will replace any deeply equal children of `b` with those of `a`.
-   * This can be used for structural sharing between JSON values for example.
+   * react-store
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
    */
-  function sharedClone(prev, next, touchAll) {
-    const things = new Map();
-    function recurse(prev, next) {
-      if (prev === next) {
-        return prev;
-      }
-      if (things.has(next)) {
-        return things.get(next);
-      }
-      const prevIsArray = Array.isArray(prev);
-      const nextIsArray = Array.isArray(next);
-      const prevIsObj = isPlainObject(prev);
-      const nextIsObj = isPlainObject(next);
-      const isArray = prevIsArray && nextIsArray;
-      const isObj = prevIsObj && nextIsObj;
-      const isSameStructure = isArray || isObj;
 
-      // Both are arrays or objects
-      if (isSameStructure) {
-        const aSize = isArray ? prev.length : Object.keys(prev).length;
-        const bItems = isArray ? next : Object.keys(next);
-        const bSize = bItems.length;
-        const copy = isArray ? [] : {};
-        let equalItems = 0;
-        for (let i = 0; i < bSize; i++) {
-          const key = isArray ? i : bItems[i];
-          if (copy[key] === prev[key]) {
-            equalItems++;
-          }
-        }
-        if (aSize === bSize && equalItems === aSize) {
-          things.set(next, prev);
-          return prev;
-        }
-        things.set(next, copy);
-        for (let i = 0; i < bSize; i++) {
-          const key = isArray ? i : bItems[i];
-          if (typeof bItems[i] === 'function') {
-            copy[key] = prev[key];
-          } else {
-            copy[key] = recurse(prev[key], next[key]);
-          }
-          if (copy[key] === prev[key]) {
-            equalItems++;
-          }
-        }
-        return copy;
-      }
-      if (nextIsArray) {
-        const copy = [];
-        things.set(next, copy);
-        for (let i = 0; i < next.length; i++) {
-          copy[i] = recurse(undefined, next[i]);
-        }
-        return copy;
-      }
-      if (nextIsObj) {
-        const copy = {};
-        things.set(next, copy);
-        const nextKeys = Object.keys(next);
-        for (let i = 0; i < nextKeys.length; i++) {
-          const key = nextKeys[i];
-          copy[key] = recurse(undefined, next[key]);
-        }
-        return copy;
-      }
-      return next;
-    }
-    return recurse(prev, next);
+  function useStore(store, selector = d => d, compareShallow) {
+    const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, compareShallow ? shallow : undefined);
+    return slice;
   }
-
-  // Copied from: https://github.com/jonschlinkert/is-plain-object
-  function isPlainObject(o) {
-    if (!hasObjectPrototype(o)) {
-      return false;
-    }
-
-    // If has modified constructor
-    const ctor = o.constructor;
-    if (typeof ctor === 'undefined') {
+  function shallow(objA, objB) {
+    if (Object.is(objA, objB)) {
       return true;
     }
-
-    // If has modified prototype
-    const prot = ctor.prototype;
-    if (!hasObjectPrototype(prot)) {
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
       return false;
     }
 
-    // If constructor does not have an Object-specific method
-    if (!prot.hasOwnProperty('isPrototypeOf')) {
+    // if (objA instanceof Map && objB instanceof Map) {
+    //   if (objA.size !== objB.size) return false
+
+    //   for (const [key, value] of objA) {
+    //     if (!Object.is(value, objB.get(key))) {
+    //       return false
+    //     }
+    //   }
+    //   return true
+    // }
+
+    // if (objA instanceof Set && objB instanceof Set) {
+    //   if (objA.size !== objB.size) return false
+
+    //   for (const value of objA) {
+    //     if (!objB.has(value)) {
+    //       return false
+    //     }
+    //   }
+    //   return true
+    // }
+
+    const keysA = Object.keys(objA);
+    if (keysA.length !== Object.keys(objB).length) {
       return false;
     }
-
-    // Most likely a plain Object
+    for (let i = 0; i < keysA.length; i++) {
+      if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+        return false;
+      }
+    }
     return true;
   }
-  function hasObjectPrototype(o) {
-    return Object.prototype.toString.call(o) === '[object Object]';
-  }
-
-  var _window$document;
-  // Detect if we're in the DOM
-  typeof window === 'undefined' || !((_window$document = window.document) != null && _window$document.createElement);
 
   /**
    * react-router
@@ -584,904 +154,14 @@
    * @license MIT
    */
   const routerContext = /*#__PURE__*/React__namespace.createContext(null);
-  const EMPTY = {};
-  const __useStoreValue = (seed, selector) => {
-    const valueRef = React__namespace.useRef(EMPTY);
-
-    // If there is no selector, track the seed
-    // If there is a selector, do not track the seed
-    const getValue = () => !selector ? seed() : selector(untrack(() => seed()));
-
-    // If empty, initialize the value
-    if (valueRef.current === EMPTY) {
-      valueRef.current = sharedClone(undefined, getValue());
-    }
-
-    // Snapshot should just return the current cached value
-    const getSnapshot = React__namespace.useCallback(() => valueRef.current, []);
-    const getStore = React__namespace.useCallback(cb => {
-      // A root is necessary to track effects
-      return createRoot(() => {
-        createEffect(() => {
-          // Read and update the value
-          // getValue will handle which values are accessed and
-          // thus tracked.
-          // sharedClone will both recursively track the end result
-          // and ensure that the previous value is structurally shared
-          // into the new version.
-          valueRef.current = unwrap(
-          // Unwrap the value to get rid of any proxy structures
-          sharedClone(valueRef.current, getValue()));
-          cb();
-        });
-      });
-    }, []);
-    return shim.useSyncExternalStore(getStore, getSnapshot, getSnapshot);
-  };
-  const [store, setStore] = createStore({
-    foo: 'foo',
-    bar: {
-      baz: 'baz'
-    }
-  });
-  createRoot(() => {
-    let prev;
-    createEffect(() => {
-      console.log('effect');
-      const next = sharedClone(prev, store);
-      console.log(next);
-      prev = untrack(() => next);
-    });
-  });
-  setStore(s => {
-    s.foo = '1';
-  });
-  setStore(s => {
-    s.bar.baz = '2';
-  });
   function useRouter() {
     const value = React__namespace.useContext(routerContext);
     warning(!value, 'useRouter must be used inside a <Router> component!');
     return value.router;
   }
-  function useRouterStore(selector) {
+  function useRouterStore(selector, shallow) {
     const router = useRouter();
-    return __useStoreValue(() => router.store, selector);
-  }
-
-  function requiredArgs(required, args) {
-    if (args.length < required) {
-      throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
-    }
-  }
-
-  function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-  /**
-   * @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 formatDistance(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 formatRelative(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 ordinalNumber(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 argumentCallback(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 valueCallback(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 valueCallback(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'");
+    return useStore(router.store, selector, shallow);
   }
 
   const getItem = key => {
@@ -1534,11 +214,10 @@
     warning: '#ffb200'
   };
   const ThemeContext = /*#__PURE__*/React__default["default"].createContext(defaultTheme);
-  function ThemeProvider(_ref) {
-    let {
-      theme,
-      ...rest
-    } = _ref;
+  function ThemeProvider({
+    theme,
+    ...rest
+  }) {
     return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, _extends({
       value: theme
     }, rest));
@@ -1567,12 +246,9 @@
         const matcher = window.matchMedia(query);
 
         // Create our handler
-        const onChange = _ref => {
-          let {
-            matches
-          } = _ref;
-          return setIsMatch(matches);
-        };
+        const onChange = ({
+          matches
+        }) => setIsMatch(matches);
 
         // Listen for changes
         matcher.addListener(onChange);
@@ -1588,31 +264,15 @@
 
   const isServer$1 = typeof window === 'undefined';
   function getStatusColor(match, theme) {
-    return match.store.isFetching ? theme.active : match.store.status === 'error' ? theme.danger : match.store.status === 'success' ? theme.success : theme.gray;
+    return match.store.state.status === 'pending' ? theme.active : match.store.state.status === 'error' ? theme.danger : match.store.state.status === 'success' ? theme.success : theme.gray;
   }
-
-  // export function getQueryStatusLabel(query: Query) {
-  //   return query.state.isFetching
-  //     ? 'fetching'
-  //     : !query.getObserversCount()
-  //     ? 'inactive'
-  //     : query.isStale()
-  //     ? 'stale'
-  //     : 'fresh'
-  // }
-
-  function styled(type, newStyles, queries) {
-    if (queries === void 0) {
-      queries = {};
-    }
-    return /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-      let {
-        style,
-        ...rest
-      } = _ref;
+  function styled(type, newStyles, queries = {}) {
+    return /*#__PURE__*/React__default["default"].forwardRef(({
+      style,
+      ...rest
+    }, ref) => {
       const theme = useTheme();
-      const mediaStyles = Object.entries(queries).reduce((current, _ref2) => {
-        let [key, value] = _ref2;
+      const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         return useMediaQuery(key) ? {
           ...current,
@@ -1679,33 +339,6 @@
       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;
-      return d;
-    });
-  }
 
   const Panel = styled('div', (_props, theme) => ({
     fontSize: 'clamp(12px, 1.5vw, 14px)',
@@ -1764,38 +397,6 @@
   const Code = styled('code', {
     fontSize: '.9em'
   });
-  styled('input', (_props, theme) => ({
-    backgroundColor: theme.inputBackgroundColor,
-    border: 0,
-    borderRadius: '.2em',
-    color: theme.inputTextColor,
-    fontSize: '.9em',
-    lineHeight: `1.3`,
-    padding: '.3em .4em'
-  }));
-  styled('select', (_props, theme) => ({
-    display: `inline-block`,
-    fontSize: `.9em`,
-    fontFamily: `sans-serif`,
-    fontWeight: 'normal',
-    lineHeight: `1.3`,
-    padding: `.3em 1.5em .3em .5em`,
-    height: 'auto',
-    border: 0,
-    borderRadius: `.2em`,
-    appearance: `none`,
-    WebkitAppearance: 'none',
-    backgroundColor: theme.inputBackgroundColor,
-    backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
-    backgroundRepeat: `no-repeat`,
-    backgroundPosition: `right .55em center`,
-    backgroundSize: `.65em auto, 100%`,
-    color: theme.inputTextColor
-  }), {
-    '(max-width: 500px)': {
-      display: 'none'
-    }
-  });
 
   const Entry = styled('div', {
     fontFamily: 'Menlo, monospace',
@@ -1832,20 +433,17 @@
     color: 'grey',
     fontSize: '.7em'
   });
-  const Expander = _ref => {
-    let {
-      expanded,
-      style = {}
-    } = _ref;
-    return /*#__PURE__*/React__namespace.createElement("span", {
-      style: {
-        display: 'inline-block',
-        transition: 'all .1s ease',
-        transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
-        ...style
-      }
-    }, "\u25B6");
-  };
+  const Expander = ({
+    expanded,
+    style = {}
+  }) => /*#__PURE__*/React__namespace.createElement("span", {
+    style: {
+      display: 'inline-block',
+      transition: 'all .1s ease',
+      transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
+      ...style
+    }
+  }, "\u25B6");
   /**
    * Chunk elements in the array by size
    *
@@ -1865,19 +463,18 @@
     }
     return result;
   }
-  const DefaultRenderer = _ref2 => {
-    let {
-      handleEntry,
-      label,
-      value,
-      subEntries = [],
-      subEntryPages = [],
-      type,
-      expanded = false,
-      toggleExpanded,
-      pageSize,
-      renderer
-    } = _ref2;
+  const DefaultRenderer = ({
+    handleEntry,
+    label,
+    value,
+    subEntries = [],
+    subEntryPages = [],
+    type,
+    expanded = false,
+    toggleExpanded,
+    pageSize,
+    renderer
+  }) => {
     const [expandedPages, setExpandedPages] = React__namespace.useState([]);
     const [valueSnapshot, setValueSnapshot] = React__namespace.useState(undefined);
     const refreshValueSnapshot = () => {
@@ -1910,14 +507,13 @@
   function isIterable(x) {
     return Symbol.iterator in x;
   }
-  function Explorer(_ref3) {
-    let {
-      value,
-      defaultExpanded,
-      renderer = DefaultRenderer,
-      pageSize = 100,
-      ...rest
-    } = _ref3;
+  function Explorer({
+    value,
+    defaultExpanded,
+    renderer = DefaultRenderer,
+    pageSize = 100,
+    ...rest
+  }) {
     const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
     const toggleExpanded = React__namespace.useCallback(() => setExpanded(old => !old), []);
     let type = typeof value;
@@ -1925,7 +521,7 @@
     const makeProperty = sub => {
       const subDefaultExpanded = defaultExpanded === true ? {
         [sub.label]: true
-      } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
+      } : defaultExpanded?.[sub.label];
       return {
         ...sub,
         defaultExpanded: subDefaultExpanded
@@ -1945,13 +541,10 @@
       }));
     } else if (typeof value === 'object' && value !== null) {
       type = 'object';
-      subEntries = Object.entries(value).map(_ref4 => {
-        let [key, val] = _ref4;
-        return makeProperty({
-          label: key,
-          value: val
-        });
-      });
+      subEntries = Object.entries(value).map(([key, val]) => makeProperty({
+        label: key,
+        value: val
+      }));
     }
     const subEntryPages = chunkArray(subEntries, pageSize);
     return renderer({
@@ -2001,16 +594,15 @@
       }
     }, "ROUTER"));
   }
-  function TanStackRouterDevtools(_ref) {
-    let {
-      initialIsOpen,
-      panelProps = {},
-      closeButtonProps = {},
-      toggleButtonProps = {},
-      position = 'bottom-left',
-      containerElement: Container = 'footer',
-      router
-    } = _ref;
+  function TanStackRouterDevtools({
+    initialIsOpen,
+    panelProps = {},
+    closeButtonProps = {},
+    toggleButtonProps = {},
+    position = 'bottom-left',
+    containerElement: Container = 'footer',
+    router
+  }) {
     const rootRef = React__default["default"].useRef(null);
     const panelRef = React__default["default"].useRef(null);
     const [isOpen, setIsOpen] = useLocalStorage('tanstackRouterDevtoolsOpen', initialIsOpen);
@@ -2023,12 +615,12 @@
 
       setIsResizing(true);
       const dragInfo = {
-        originalHeight: (panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) ?? 0,
+        originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
         pageY: startEvent.pageY
       };
       const run = moveEvent => {
         const delta = dragInfo.pageY - moveEvent.pageY;
-        const newHeight = (dragInfo == null ? void 0 : dragInfo.originalHeight) + delta;
+        const newHeight = dragInfo?.originalHeight + delta;
         setDevtoolsHeight(newHeight);
         if (newHeight < 70) {
           setIsOpen(false);
@@ -2074,12 +666,10 @@
     }, [isResolvedOpen]);
     React__default["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 previousValue = rootRef.current?.parentElement?.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) {
+          const containerHeight = panelRef.current?.getBoundingClientRect().height;
+          if (rootRef.current?.parentElement) {
             rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
           }
         };
@@ -2087,9 +677,8 @@
         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') {
+            if (rootRef.current?.parentElement && typeof previousValue === 'string') {
               rootRef.current.parentElement.style.paddingBottom = previousValue;
             }
           };
@@ -2219,7 +808,6 @@
     })) : null);
   }
   const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
-    var _Object$values, _Object$values$find, _router$store$current, _router$store$pending, _router$store$pending2, _last, _last2, _last3, _last4, _last5, _last6;
     const {
       isOpen = true,
       setIsOpen,
@@ -2228,7 +816,7 @@
       ...panelProps
     } = props;
     const routerContextValue = React__default["default"].useContext(routerContext);
-    const router = userRouter ?? (routerContextValue == null ? void 0 : routerContextValue.router);
+    const router = userRouter ?? 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.');
     useRouterStore();
     const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
@@ -2236,11 +824,22 @@
     React__default["default"].useEffect(() => {
       setActiveMatchId('');
     }, [activeRouteId]);
-    const activeMatch = ((_Object$values = Object.values(router.store.matchCache)) == null ? void 0 : (_Object$values$find = _Object$values.find(d => d.match.matchId === activeMatchId)) == null ? void 0 : _Object$values$find.match) ?? ((_router$store$current = router.store.currentMatches) == null ? void 0 : _router$store$current.find(d => d.routeId === activeRouteId));
-    const matchCacheValues = multiSortBy(Object.keys(router.store.matchCache).filter(key => {
-      const cacheEntry = router.store.matchCache[key];
-      return cacheEntry.gc > Date.now();
-    }).map(key => router.store.matchCache[key]), [d => d.match.store.isFetching ? -1 : 1, d => -d.match.store.updatedAt]);
+    const allMatches = React__default["default"].useMemo(() => [...Object.values(router.store.state.currentMatches), ...Object.values(router.store.state.pendingMatches ?? [])], [router.store.state.currentMatches, router.store.state.pendingMatches]);
+    const activeMatch = allMatches?.find(d => d.id === activeMatchId) || allMatches?.find(d => d.route.id === activeRouteId);
+
+    // const matchCacheValues = multiSortBy(
+    //   Object.keys(router.store.state.matchCache)
+    //     .filter((key) => {
+    //       const cacheEntry = router.store.state.matchCache[key]!
+    //       return cacheEntry.gc > Date.now()
+    //     })
+    //     .map((key) => router.store.state.matchCache[key]!),
+    //   [
+    //     (d) => (d.match.store.state.isFetching ? -1 : 1),
+    //     (d) => -d.match.store.state.updatedAt!,
+    //   ],
+    // )
+
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
       theme: defaultTheme
     }, /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
@@ -2365,12 +964,12 @@
         top: 0,
         zIndex: 1
       }
-    }, "Active Matches"), router.store.currentMatches.map((match, i) => {
+    }, "Active Matches"), router.store.state.currentMatches.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        key: match.routeId || i,
+        key: match.route.id || i,
         role: "button",
-        "aria-label": `Open match details for ${match.routeId}`,
-        onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
+        "aria-label": `Open match details for ${match.route.id}`,
+        onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
         style: {
           display: 'flex',
           borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
@@ -2395,8 +994,8 @@
         style: {
           padding: '.5em'
         }
-      }, `${match.matchId}`));
-    }), (_router$store$pending = router.store.pendingMatches) != null && _router$store$pending.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, `${match.id}`));
+    }), router.store.state.pendingMatches?.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         marginTop: '2rem',
         padding: '.5em',
@@ -2405,12 +1004,12 @@
         top: 0,
         zIndex: 1
       }
-    }, "Pending Matches"), (_router$store$pending2 = router.store.pendingMatches) == null ? void 0 : _router$store$pending2.map((match, i) => {
+    }, "Pending Matches"), router.store.state.pendingMatches?.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        key: match.routeId || i,
+        key: match.route.id || i,
         role: "button",
-        "aria-label": `Open match details for ${match.routeId}`,
-        onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
+        "aria-label": `Open match details for ${match.route.id}`,
+        onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
         style: {
           display: 'flex',
           borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
@@ -2434,74 +1033,7 @@
         style: {
           padding: '.5em'
         }
-      }, `${match.matchId}`));
-    })) : null, matchCacheValues.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        marginTop: '2rem',
-        padding: '.5em',
-        background: defaultTheme.backgroundAlt,
-        position: 'sticky',
-        top: 0,
-        bottom: 0,
-        zIndex: 1,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between'
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", null, "Match Cache"), /*#__PURE__*/React__default["default"].createElement(Button, {
-      onClick: () => {
-        router.setStore(s => s.matchCache = {});
-      }
-    }, "Clear")), matchCacheValues.map((d, i) => {
-      const {
-        match,
-        gc
-      } = d;
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        key: match.matchId || i,
-        role: "button",
-        "aria-label": `Open match details for ${match.matchId}`,
-        onClick: () => setActiveMatchId(activeMatchId === match.matchId ? '' : match.matchId),
-        style: {
-          display: 'flex',
-          borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
-          cursor: 'pointer',
-          background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          flexDirection: 'column',
-          padding: '.5rem',
-          gap: '.3rem'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          gap: '.5rem'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        style: {
-          flex: '0 0 auto',
-          width: '1.3rem',
-          height: '1.3rem',
-          background: getStatusColor(match, defaultTheme),
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontWeight: 'bold',
-          borderRadius: '.25rem',
-          transition: 'all .2s ease-out'
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(Code, null, `${match.matchId}`)), /*#__PURE__*/React__default["default"].createElement("span", {
-        style: {
-          fontSize: '.7rem',
-          opacity: '.5',
-          lineHeight: 1
-        }
-      }, "Expires", ' ', formatDistanceStrict(new Date(gc), new Date(), {
-        addSuffix: true
-      }))));
+      }, `${match.id}`));
     })) : null), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         padding: '.5em',
@@ -2519,19 +1051,15 @@
       style: {
         lineHeight: '1.8em'
       }
-    }, JSON.stringify(activeMatch.matchId, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
       style: {
         opacity: '.5'
       }
-    }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.state.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
       style: {
         opacity: '.5'
       }
-    }, "Invalid"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.isInvalid.toString())), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
-      style: {
-        opacity: '.5'
-      }
-    }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.updatedAt ? new Date(activeMatch.store.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.state.updatedAt ? new Date(activeMatch.store.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         background: defaultTheme.backgroundAlt,
         padding: '.5em',
@@ -2545,15 +1073,6 @@
         padding: '0.5em'
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button, {
-      type: "button",
-      onClick: () => {
-        activeMatch.invalidate();
-      },
-      style: {
-        background: defaultTheme.warning,
-        color: defaultTheme.inputTextColor
-      }
-    }, "Invalidate"), ' ', /*#__PURE__*/React__default["default"].createElement(Button, {
       type: "button",
       onClick: () => activeMatch.load(),
       style: {
@@ -2595,36 +1114,13 @@
         bottom: 0,
         zIndex: 1
       }
-    }, "All Loader Data"), /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        padding: '.5em'
-      }
-    }, Object.keys(((_last = last(router.store.currentMatches)) == null ? void 0 : _last.store.loaderData) || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
-      value: ((_last2 = last(router.store.currentMatches)) == null ? void 0 : _last2.store.loaderData) || {},
-      defaultExpanded: Object.keys(((_last3 = last(router.store.currentMatches)) == null ? void 0 : _last3.store.loaderData) || {}).reduce((obj, next) => {
-        obj[next] = {};
-        return obj;
-      }, {})
-    }) : /*#__PURE__*/React__default["default"].createElement("em", {
-      style: {
-        opacity: 0.5
-      }
-    }, '{ }')), /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        padding: '.5em',
-        background: defaultTheme.backgroundAlt,
-        position: 'sticky',
-        top: 0,
-        bottom: 0,
-        zIndex: 1
-      }
     }, "Search Params"), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         padding: '.5em'
       }
-    }, Object.keys(((_last4 = last(router.store.currentMatches)) == null ? void 0 : _last4.store.search) || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
-      value: ((_last5 = last(router.store.currentMatches)) == null ? void 0 : _last5.store.search) || {},
-      defaultExpanded: Object.keys(((_last6 = last(router.store.currentMatches)) == null ? void 0 : _last6.store.search) || {}).reduce((obj, next) => {
+    }, Object.keys(last(router.store.state.currentMatches)?.store.state.search || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
+      value: last(router.store.state.currentMatches)?.store.state.search || {},
+      defaultExpanded: Object.keys(last(router.store.state.currentMatches)?.store.state.search || {}).reduce((obj, next) => {
         obj[next] = {};
         return obj;
       }, {})