@copart/ops-tool-kit 1.9.0-alpha.2 → 1.9.0-alpha.4

package/dist/ops-tool-kit.js

@@ -33,7 +33,7 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
 const name$e = "@copart/ops-tool-kit";
-const version$3 = "1.9.0-alpha.2";
+const version$3 = "1.9.0-alpha.4";
 const main = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -90,7 +90,7 @@ const devDependencies = {
 };
 const peerDependencies = {
   react: "*",
-  "@copart/core-components": "^1.4.47"
+  "@copart/core-components": "^2.2.5"
 };
 const dependencies = {
   "@reacting/purist": "0.1.0",
@@ -2556,24 +2556,29 @@ var isobject = function isObject(val) {
 };
 
 function isObjectObject(o) {
-  return isobject(o) === true && Object.prototype.toString.call(o) === '[object Object]';
+  return isobject(o) === true
+    && Object.prototype.toString.call(o) === '[object Object]';
 }
 
 var isPlainObject = function isPlainObject(o) {
-  var ctor, prot;
-  if (isObjectObject(o) === false) return false; // If has modified constructor
+  var ctor,prot;
 
+  if (isObjectObject(o) === false) return false;
+
+  // If has modified constructor
   ctor = o.constructor;
-  if (typeof ctor !== 'function') return false; // If has modified prototype
+  if (typeof ctor !== 'function') return false;
 
+  // If has modified prototype
   prot = ctor.prototype;
-  if (isObjectObject(prot) === false) return false; // If constructor does not have an Object-specific method
+  if (isObjectObject(prot) === false) return false;
 
+  // If constructor does not have an Object-specific method
   if (prot.hasOwnProperty('isPrototypeOf') === false) {
     return false;
-  } // Most likely a plain Object
-
+  }
 
+  // Most likely a plain Object
   return true;
 };
 
@@ -3196,47 +3201,46 @@ var runtime = createCommonjsModule(function (module) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-!(function(global) {
+!function (global) {
 
   var Op = Object.prototype;
   var hasOwn = Op.hasOwnProperty;
   var undefined$1; // More compressible than void 0.
+
   var $Symbol = typeof Symbol === "function" ? Symbol : {};
   var iteratorSymbol = $Symbol.iterator || "@@iterator";
   var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
   var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
   var runtime = global.regeneratorRuntime;
+
   if (runtime) {
     {
       // If regeneratorRuntime is defined globally and we're in a module,
       // make the exports object identical to regeneratorRuntime.
       module.exports = runtime;
-    }
-    // Don't bother evaluating the rest of this file if the runtime was
+    } // Don't bother evaluating the rest of this file if the runtime was
     // already defined globally.
-    return;
-  }
 
-  // Define the runtime globally (as expected by generated code) as either
+
+    return;
+  } // Define the runtime globally (as expected by generated code) as either
   // module.exports (if we're in a module) or a new, empty object.
+
+
   runtime = global.regeneratorRuntime = module.exports ;
 
   function wrap(innerFn, outerFn, self, tryLocsList) {
     // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
     var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
     var generator = Object.create(protoGenerator.prototype);
-    var context = new Context(tryLocsList || []);
-
-    // The ._invoke method unifies the implementations of the .next,
+    var context = new Context(tryLocsList || []); // The ._invoke method unifies the implementations of the .next,
     // .throw, and .return methods.
-    generator._invoke = makeInvokeMethod(innerFn, self, context);
 
+    generator._invoke = makeInvokeMethod(innerFn, self, context);
     return generator;
   }
-  runtime.wrap = wrap;
 
-  // Try/catch helper to minimize deoptimizations. Returns a completion
+  runtime.wrap = wrap; // Try/catch helper to minimize deoptimizations. Returns a completion
   // record like context.tryEntries[i].completion. This interface could
   // have been (and was previously) designed to take a closure to be
   // invoked without arguments, but in all the cases we care about we
@@ -3246,121 +3250,126 @@ var runtime = createCommonjsModule(function (module) {
   // in every case, so we don't have to touch the arguments object. The
   // only additional allocation required is the completion record, which
   // has a stable shape and so hopefully should be cheap to allocate.
+
   function tryCatch(fn, obj, arg) {
     try {
-      return { type: "normal", arg: fn.call(obj, arg) };
+      return {
+        type: "normal",
+        arg: fn.call(obj, arg)
+      };
     } catch (err) {
-      return { type: "throw", arg: err };
+      return {
+        type: "throw",
+        arg: err
+      };
     }
   }
 
   var GenStateSuspendedStart = "suspendedStart";
   var GenStateSuspendedYield = "suspendedYield";
   var GenStateExecuting = "executing";
-  var GenStateCompleted = "completed";
-
-  // Returning this object from the innerFn has the same effect as
+  var GenStateCompleted = "completed"; // Returning this object from the innerFn has the same effect as
   // breaking out of the dispatch switch statement.
-  var ContinueSentinel = {};
 
-  // Dummy constructor functions that we use as the .constructor and
+  var ContinueSentinel = {}; // Dummy constructor functions that we use as the .constructor and
   // .constructor.prototype properties for functions that return Generator
   // objects. For full spec compliance, you may wish to configure your
   // minifier not to mangle the names of these two functions.
+
   function Generator() {}
+
   function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
 
-  // This is a polyfill for %IteratorPrototype% for environments that
+  function GeneratorFunctionPrototype() {} // This is a polyfill for %IteratorPrototype% for environments that
   // don't natively support it.
+
+
   var IteratorPrototype = {};
+
   IteratorPrototype[iteratorSymbol] = function () {
     return this;
   };
 
   var getProto = Object.getPrototypeOf;
   var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
-  if (NativeIteratorPrototype &&
-      NativeIteratorPrototype !== Op &&
-      hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
+
+  if (NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
     // This environment has a native %IteratorPrototype%; use it instead
     // of the polyfill.
     IteratorPrototype = NativeIteratorPrototype;
   }
 
-  var Gp = GeneratorFunctionPrototype.prototype =
-    Generator.prototype = Object.create(IteratorPrototype);
+  var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
   GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
   GeneratorFunctionPrototype.constructor = GeneratorFunction;
-  GeneratorFunctionPrototype[toStringTagSymbol] =
-    GeneratorFunction.displayName = "GeneratorFunction";
-
-  // Helper for defining the .next, .throw, and .return methods of the
+  GeneratorFunctionPrototype[toStringTagSymbol] = GeneratorFunction.displayName = "GeneratorFunction"; // Helper for defining the .next, .throw, and .return methods of the
   // Iterator interface in terms of a single ._invoke method.
+
   function defineIteratorMethods(prototype) {
-    ["next", "throw", "return"].forEach(function(method) {
-      prototype[method] = function(arg) {
+    ["next", "throw", "return"].forEach(function (method) {
+      prototype[method] = function (arg) {
         return this._invoke(method, arg);
       };
     });
   }
 
-  runtime.isGeneratorFunction = function(genFun) {
+  runtime.isGeneratorFunction = function (genFun) {
     var ctor = typeof genFun === "function" && genFun.constructor;
-    return ctor
-      ? ctor === GeneratorFunction ||
-        // For the native GeneratorFunction constructor, the best we can
-        // do is to check its .name property.
-        (ctor.displayName || ctor.name) === "GeneratorFunction"
-      : false;
+    return ctor ? ctor === GeneratorFunction || // For the native GeneratorFunction constructor, the best we can
+    // do is to check its .name property.
+    (ctor.displayName || ctor.name) === "GeneratorFunction" : false;
   };
 
-  runtime.mark = function(genFun) {
+  runtime.mark = function (genFun) {
     if (Object.setPrototypeOf) {
       Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
     } else {
       genFun.__proto__ = GeneratorFunctionPrototype;
+
       if (!(toStringTagSymbol in genFun)) {
         genFun[toStringTagSymbol] = "GeneratorFunction";
       }
     }
+
     genFun.prototype = Object.create(Gp);
     return genFun;
-  };
-
-  // Within the body of any async function, `await x` is transformed to
+  }; // Within the body of any async function, `await x` is transformed to
   // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
   // `hasOwn.call(value, "__await")` to determine if the yielded value is
   // meant to be awaited.
-  runtime.awrap = function(arg) {
-    return { __await: arg };
+
+
+  runtime.awrap = function (arg) {
+    return {
+      __await: arg
+    };
   };
 
   function AsyncIterator(generator) {
     function invoke(method, arg, resolve, reject) {
       var record = tryCatch(generator[method], generator, arg);
+
       if (record.type === "throw") {
         reject(record.arg);
       } else {
         var result = record.arg;
         var value = result.value;
-        if (value &&
-            typeof value === "object" &&
-            hasOwn.call(value, "__await")) {
-          return Promise.resolve(value.__await).then(function(value) {
+
+        if (value && typeof value === "object" && hasOwn.call(value, "__await")) {
+          return Promise.resolve(value.__await).then(function (value) {
             invoke("next", value, resolve, reject);
-          }, function(err) {
+          }, function (err) {
             invoke("throw", err, resolve, reject);
           });
         }
 
-        return Promise.resolve(value).then(function(unwrapped) {
+        return Promise.resolve(value).then(function (unwrapped) {
           // When a yielded Promise is resolved, its final value becomes
           // the .value of the Promise<{value,done}> result for the
           // current iteration.
           result.value = unwrapped;
           resolve(result);
-        }, function(error) {
+        }, function (error) {
           // If a rejected Promise was yielded, throw the rejection back
           // into the async generator function so it can be handled there.
           return invoke("throw", error, resolve, reject);
@@ -3372,61 +3381,53 @@ var runtime = createCommonjsModule(function (module) {
 
     function enqueue(method, arg) {
       function callInvokeWithMethodAndArg() {
-        return new Promise(function(resolve, reject) {
+        return new Promise(function (resolve, reject) {
           invoke(method, arg, resolve, reject);
         });
       }
 
-      return previousPromise =
-        // If enqueue has been called before, then we want to wait until
-        // all previous Promises have been resolved before calling invoke,
-        // so that results are always delivered in the correct order. If
-        // enqueue has not been called before, then it is important to
-        // call invoke immediately, without waiting on a callback to fire,
-        // so that the async generator function has the opportunity to do
-        // any necessary setup in a predictable way. This predictability
-        // is why the Promise constructor synchronously invokes its
-        // executor callback, and why async functions synchronously
-        // execute code before the first await. Since we implement simple
-        // async functions in terms of async generators, it is especially
-        // important to get this right, even though it requires care.
-        previousPromise ? previousPromise.then(
-          callInvokeWithMethodAndArg,
-          // Avoid propagating failures to Promises returned by later
-          // invocations of the iterator.
-          callInvokeWithMethodAndArg
-        ) : callInvokeWithMethodAndArg();
-    }
-
-    // Define the unified helper method that is used to implement .next,
+      return previousPromise = // If enqueue has been called before, then we want to wait until
+      // all previous Promises have been resolved before calling invoke,
+      // so that results are always delivered in the correct order. If
+      // enqueue has not been called before, then it is important to
+      // call invoke immediately, without waiting on a callback to fire,
+      // so that the async generator function has the opportunity to do
+      // any necessary setup in a predictable way. This predictability
+      // is why the Promise constructor synchronously invokes its
+      // executor callback, and why async functions synchronously
+      // execute code before the first await. Since we implement simple
+      // async functions in terms of async generators, it is especially
+      // important to get this right, even though it requires care.
+      previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, // Avoid propagating failures to Promises returned by later
+      // invocations of the iterator.
+      callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+    } // Define the unified helper method that is used to implement .next,
     // .throw, and .return (see defineIteratorMethods).
+
+
     this._invoke = enqueue;
   }
 
   defineIteratorMethods(AsyncIterator.prototype);
+
   AsyncIterator.prototype[asyncIteratorSymbol] = function () {
     return this;
   };
-  runtime.AsyncIterator = AsyncIterator;
 
-  // Note that simple async functions are implemented on top of
+  runtime.AsyncIterator = AsyncIterator; // Note that simple async functions are implemented on top of
   // AsyncIterator objects; they just return a Promise for the value of
   // the final result produced by the iterator.
-  runtime.async = function(innerFn, outerFn, self, tryLocsList) {
-    var iter = new AsyncIterator(
-      wrap(innerFn, outerFn, self, tryLocsList)
-    );
 
-    return runtime.isGeneratorFunction(outerFn)
-      ? iter // If outerFn is a generator, return the full iterator.
-      : iter.next().then(function(result) {
-          return result.done ? result.value : iter.next();
-        });
+  runtime.async = function (innerFn, outerFn, self, tryLocsList) {
+    var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList));
+    return runtime.isGeneratorFunction(outerFn) ? iter // If outerFn is a generator, return the full iterator.
+    : iter.next().then(function (result) {
+      return result.done ? result.value : iter.next();
+    });
   };
 
   function makeInvokeMethod(innerFn, self, context) {
     var state = GenStateSuspendedStart;
-
     return function invoke(method, arg) {
       if (state === GenStateExecuting) {
         throw new Error("Generator is already running");
@@ -3435,10 +3436,10 @@ var runtime = createCommonjsModule(function (module) {
       if (state === GenStateCompleted) {
         if (method === "throw") {
           throw arg;
-        }
-
-        // Be forgiving, per 25.3.3.3.3 of the spec:
+        } // Be forgiving, per 25.3.3.3.3 of the spec:
         // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
+
+
         return doneResult();
       }
 
@@ -3447,8 +3448,10 @@ var runtime = createCommonjsModule(function (module) {
 
       while (true) {
         var delegate = context.delegate;
+
         if (delegate) {
           var delegateResult = maybeInvokeDelegate(delegate, context);
+
           if (delegateResult) {
             if (delegateResult === ContinueSentinel) continue;
             return delegateResult;
@@ -3459,7 +3462,6 @@ var runtime = createCommonjsModule(function (module) {
           // Setting context._sent for legacy support of Babel's
           // function.sent implementation.
           context.sent = context._sent = context.arg;
-
         } else if (context.method === "throw") {
           if (state === GenStateSuspendedStart) {
             state = GenStateCompleted;
@@ -3467,20 +3469,17 @@ var runtime = createCommonjsModule(function (module) {
           }
 
           context.dispatchException(context.arg);
-
         } else if (context.method === "return") {
           context.abrupt("return", context.arg);
         }
 
         state = GenStateExecuting;
-
         var record = tryCatch(innerFn, self, context);
+
         if (record.type === "normal") {
           // If an exception is thrown from innerFn, we leave state ===
           // GenStateExecuting and loop back for another invocation.
-          state = context.done
-            ? GenStateCompleted
-            : GenStateSuspendedYield;
+          state = context.done ? GenStateCompleted : GenStateSuspendedYield;
 
           if (record.arg === ContinueSentinel) {
             continue;
@@ -3490,24 +3489,24 @@ var runtime = createCommonjsModule(function (module) {
             value: record.arg,
             done: context.done
           };
-
         } else if (record.type === "throw") {
-          state = GenStateCompleted;
-          // Dispatch the exception by looping back around to the
+          state = GenStateCompleted; // Dispatch the exception by looping back around to the
           // context.dispatchException(context.arg) call above.
+
           context.method = "throw";
           context.arg = record.arg;
         }
       }
     };
-  }
-
-  // Call delegate.iterator[context.method](context.arg) and handle the
+  } // Call delegate.iterator[context.method](context.arg) and handle the
   // result, either by returning a { value, done } result from the
   // delegate iterator, or by modifying context.method and context.arg,
   // setting context.delegate to null, and returning the ContinueSentinel.
+
+
   function maybeInvokeDelegate(delegate, context) {
     var method = delegate.iterator[context.method];
+
     if (method === undefined$1) {
       // A .throw or .return when the delegate iterator has no .throw
       // method always terminates the yield* loop.
@@ -3529,8 +3528,7 @@ var runtime = createCommonjsModule(function (module) {
         }
 
         context.method = "throw";
-        context.arg = new TypeError(
-          "The iterator does not provide a 'throw' method");
+        context.arg = new TypeError("The iterator does not provide a 'throw' method");
       }
 
       return ContinueSentinel;
@@ -3547,7 +3545,7 @@ var runtime = createCommonjsModule(function (module) {
 
     var info = record.arg;
 
-    if (! info) {
+    if (!info) {
       context.method = "throw";
       context.arg = new TypeError("iterator result is not an object");
       context.delegate = null;
@@ -3557,54 +3555,51 @@ var runtime = createCommonjsModule(function (module) {
     if (info.done) {
       // Assign the result of the finished delegate to the temporary
       // variable specified by delegate.resultName (see delegateYield).
-      context[delegate.resultName] = info.value;
+      context[delegate.resultName] = info.value; // Resume execution at the desired location (see delegateYield).
 
-      // Resume execution at the desired location (see delegateYield).
-      context.next = delegate.nextLoc;
-
-      // If context.method was "throw" but the delegate handled the
+      context.next = delegate.nextLoc; // If context.method was "throw" but the delegate handled the
       // exception, let the outer generator proceed normally. If
       // context.method was "next", forget context.arg since it has been
       // "consumed" by the delegate iterator. If context.method was
       // "return", allow the original .return call to continue in the
       // outer generator.
+
       if (context.method !== "return") {
         context.method = "next";
         context.arg = undefined$1;
       }
-
     } else {
       // Re-yield the result returned by the delegate method.
       return info;
-    }
-
-    // The delegate iterator is finished, so forget it and continue with
+    } // The delegate iterator is finished, so forget it and continue with
     // the outer generator.
+
+
     context.delegate = null;
     return ContinueSentinel;
-  }
-
-  // Define Generator.prototype.{next,throw,return} in terms of the
+  } // Define Generator.prototype.{next,throw,return} in terms of the
   // unified ._invoke helper method.
-  defineIteratorMethods(Gp);
 
-  Gp[toStringTagSymbol] = "Generator";
 
-  // A Generator should always return itself as the iterator object when the
+  defineIteratorMethods(Gp);
+  Gp[toStringTagSymbol] = "Generator"; // A Generator should always return itself as the iterator object when the
   // @@iterator function is called on it. Some browsers' implementations of the
   // iterator prototype chain incorrectly implement this, causing the Generator
   // object to not be returned from this call. This ensures that doesn't happen.
   // See https://github.com/facebook/regenerator/issues/274 for more details.
-  Gp[iteratorSymbol] = function() {
+
+  Gp[iteratorSymbol] = function () {
     return this;
   };
 
-  Gp.toString = function() {
+  Gp.toString = function () {
     return "[object Generator]";
   };
 
   function pushTryEntry(locs) {
-    var entry = { tryLoc: locs[0] };
+    var entry = {
+      tryLoc: locs[0]
+    };
 
     if (1 in locs) {
       entry.catchLoc = locs[1];
@@ -3629,33 +3624,37 @@ var runtime = createCommonjsModule(function (module) {
     // The root entry object (effectively a try statement without a catch
     // or a finally block) gives us a place to store values thrown from
     // locations where there is no enclosing try statement.
-    this.tryEntries = [{ tryLoc: "root" }];
+    this.tryEntries = [{
+      tryLoc: "root"
+    }];
     tryLocsList.forEach(pushTryEntry, this);
     this.reset(true);
   }
 
-  runtime.keys = function(object) {
+  runtime.keys = function (object) {
     var keys = [];
+
     for (var key in object) {
       keys.push(key);
     }
-    keys.reverse();
 
-    // Rather than returning an object with a next method, we keep
+    keys.reverse(); // Rather than returning an object with a next method, we keep
     // things simple and return the next function itself.
+
     return function next() {
       while (keys.length) {
         var key = keys.pop();
+
         if (key in object) {
           next.value = key;
           next.done = false;
           return next;
         }
-      }
-
-      // To avoid creating an additional object, we just hang the .value
+      } // To avoid creating an additional object, we just hang the .value
       // and .done properties off the next function object itself. This
       // also ensures that the minifier will not anonymize the function.
+
+
       next.done = true;
       return next;
     };
@@ -3664,6 +3663,7 @@ var runtime = createCommonjsModule(function (module) {
   function values(iterable) {
     if (iterable) {
       var iteratorMethod = iterable[iteratorSymbol];
+
       if (iteratorMethod) {
         return iteratorMethod.call(iterable);
       }
@@ -3673,7 +3673,8 @@ var runtime = createCommonjsModule(function (module) {
       }
 
       if (!isNaN(iterable.length)) {
-        var i = -1, next = function next() {
+        var i = -1,
+            next = function next() {
           while (++i < iterable.length) {
             if (hasOwn.call(iterable, i)) {
               next.value = iterable[i];
@@ -3684,70 +3685,69 @@ var runtime = createCommonjsModule(function (module) {
 
           next.value = undefined$1;
           next.done = true;
-
           return next;
         };
 
         return next.next = next;
       }
-    }
+    } // Return an iterator with no values.
 
-    // Return an iterator with no values.
-    return { next: doneResult };
+
+    return {
+      next: doneResult
+    };
   }
+
   runtime.values = values;
 
   function doneResult() {
-    return { value: undefined$1, done: true };
+    return {
+      value: undefined$1,
+      done: true
+    };
   }
 
   Context.prototype = {
     constructor: Context,
-
-    reset: function(skipTempReset) {
+    reset: function (skipTempReset) {
       this.prev = 0;
-      this.next = 0;
-      // Resetting context._sent for legacy support of Babel's
+      this.next = 0; // Resetting context._sent for legacy support of Babel's
       // function.sent implementation.
+
       this.sent = this._sent = undefined$1;
       this.done = false;
       this.delegate = null;
-
       this.method = "next";
       this.arg = undefined$1;
-
       this.tryEntries.forEach(resetTryEntry);
 
       if (!skipTempReset) {
         for (var name in this) {
           // Not sure about the optimal order of these conditions:
-          if (name.charAt(0) === "t" &&
-              hasOwn.call(this, name) &&
-              !isNaN(+name.slice(1))) {
+          if (name.charAt(0) === "t" && hasOwn.call(this, name) && !isNaN(+name.slice(1))) {
             this[name] = undefined$1;
           }
         }
       }
     },
-
-    stop: function() {
+    stop: function () {
       this.done = true;
-
       var rootEntry = this.tryEntries[0];
       var rootRecord = rootEntry.completion;
+
       if (rootRecord.type === "throw") {
         throw rootRecord.arg;
       }
 
       return this.rval;
     },
-
-    dispatchException: function(exception) {
+    dispatchException: function (exception) {
       if (this.done) {
         throw exception;
       }
 
       var context = this;
+
       function handle(loc, caught) {
         record.type = "throw";
         record.arg = exception;
@@ -3760,7 +3760,7 @@ var runtime = createCommonjsModule(function (module) {
           context.arg = undefined$1;
         }
 
-        return !! caught;
+        return !!caught;
       }
 
       for (var i = this.tryEntries.length - 1; i >= 0; --i) {
@@ -3784,40 +3784,31 @@ var runtime = createCommonjsModule(function (module) {
             } else if (this.prev < entry.finallyLoc) {
               return handle(entry.finallyLoc);
             }
-
           } else if (hasCatch) {
             if (this.prev < entry.catchLoc) {
               return handle(entry.catchLoc, true);
             }
-
           } else if (hasFinally) {
             if (this.prev < entry.finallyLoc) {
               return handle(entry.finallyLoc);
             }
-
           } else {
             throw new Error("try statement without catch or finally");
           }
         }
       }
     },
-
-    abrupt: function(type, arg) {
+    abrupt: function (type, arg) {
       for (var i = this.tryEntries.length - 1; i >= 0; --i) {
         var entry = this.tryEntries[i];
-        if (entry.tryLoc <= this.prev &&
-            hasOwn.call(entry, "finallyLoc") &&
-            this.prev < entry.finallyLoc) {
+
+        if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
           var finallyEntry = entry;
           break;
         }
       }
 
-      if (finallyEntry &&
-          (type === "break" ||
-           type === "continue") &&
-          finallyEntry.tryLoc <= arg &&
-          arg <= finallyEntry.finallyLoc) {
+      if (finallyEntry && (type === "break" || type === "continue") && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc) {
         // Ignore the finally entry if control is not jumping to a
         // location outside the try/catch block.
         finallyEntry = null;
@@ -3835,14 +3826,12 @@ var runtime = createCommonjsModule(function (module) {
 
       return this.complete(record);
     },
-
-    complete: function(record, afterLoc) {
+    complete: function (record, afterLoc) {
       if (record.type === "throw") {
         throw record.arg;
       }
 
-      if (record.type === "break" ||
-          record.type === "continue") {
+      if (record.type === "break" || record.type === "continue") {
         this.next = record.arg;
       } else if (record.type === "return") {
         this.rval = this.arg = record.arg;
@@ -3854,10 +3843,10 @@ var runtime = createCommonjsModule(function (module) {
 
       return ContinueSentinel;
     },
-
-    finish: function(finallyLoc) {
+    finish: function (finallyLoc) {
       for (var i = this.tryEntries.length - 1; i >= 0; --i) {
         var entry = this.tryEntries[i];
+
         if (entry.finallyLoc === finallyLoc) {
           this.complete(entry.completion, entry.afterLoc);
           resetTryEntry(entry);
@@ -3865,26 +3854,27 @@ var runtime = createCommonjsModule(function (module) {
         }
       }
     },
-
-    "catch": function(tryLoc) {
+    "catch": function (tryLoc) {
       for (var i = this.tryEntries.length - 1; i >= 0; --i) {
         var entry = this.tryEntries[i];
+
         if (entry.tryLoc === tryLoc) {
           var record = entry.completion;
+
           if (record.type === "throw") {
             var thrown = record.arg;
             resetTryEntry(entry);
           }
+
           return thrown;
         }
-      }
-
-      // The context.catch method must only be called with a location
+      } // The context.catch method must only be called with a location
       // argument that corresponds to a known catch block.
+
+
       throw new Error("illegal catch attempt");
     },
-
-    delegateYield: function(iterable, resultName, nextLoc) {
+    delegateYield: function (iterable, resultName, nextLoc) {
       this.delegate = {
         iterator: values(iterable),
         resultName: resultName,
@@ -3900,14 +3890,12 @@ var runtime = createCommonjsModule(function (module) {
       return ContinueSentinel;
     }
   };
-})(
-  // In sloppy mode, unbound `this` refers to the global object, fallback to
-  // Function constructor if we're in global strict mode. That is sadly a form
-  // of indirect eval which violates Content Security Policy.
-  (function() {
-    return this || (typeof self === "object" && self);
-  })() || Function("return this")()
-);
+}( // In sloppy mode, unbound `this` refers to the global object, fallback to
+// Function constructor if we're in global strict mode. That is sadly a form
+// of indirect eval which violates Content Security Policy.
+function () {
+  return this || typeof self === "object" && self;
+}() || Function("return this")());
 });
 
 /**
@@ -3916,24 +3904,19 @@ var runtime = createCommonjsModule(function (module) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 // This method of obtaining a reference to the global object needs to be
 // kept identical to the way it is obtained in runtime.js
-var g$1 = (function() {
-  return this || (typeof self === "object" && self);
-})() || Function("return this")();
-
-// Use `getOwnPropertyNames` because not all browsers support calling
+var g$1 = function () {
+  return this || typeof self === "object" && self;
+}() || Function("return this")(); // Use `getOwnPropertyNames` because not all browsers support calling
 // `hasOwnProperty` on the global `self` object in a worker. See #183.
-var hadRuntime = g$1.regeneratorRuntime &&
-  Object.getOwnPropertyNames(g$1).indexOf("regeneratorRuntime") >= 0;
 
-// Save the old regeneratorRuntime in case it needs to be restored later.
-var oldRuntime = hadRuntime && g$1.regeneratorRuntime;
 
-// Force reevalutation of runtime.js.
-g$1.regeneratorRuntime = undefined;
+var hadRuntime = g$1.regeneratorRuntime && Object.getOwnPropertyNames(g$1).indexOf("regeneratorRuntime") >= 0; // Save the old regeneratorRuntime in case it needs to be restored later.
+
+var oldRuntime = hadRuntime && g$1.regeneratorRuntime; // Force reevalutation of runtime.js.
 
+g$1.regeneratorRuntime = undefined;
 var runtimeModule = runtime;
 
 if (hadRuntime) {
@@ -3943,7 +3926,7 @@ if (hadRuntime) {
   // Remove the global property added by runtime.js.
   try {
     delete g$1.regeneratorRuntime;
-  } catch(e) {
+  } catch (e) {
     g$1.regeneratorRuntime = undefined;
   }
 }
@@ -30962,7 +30945,7 @@ var GoHome = function GoHome(props) {
   }, props.reason));
 };
 
-var css_248z$1 = ".utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  background: #3A4454;\n  min-width: 100px;\n  max-width: 100px;\n  height: 100%;\n  color: #ffffff;\n  transition: max-width 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover {\n  max-width: 400px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu {\n  flex: 1;\n  overflow-y: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu::-webkit-scrollbar { \n  display: none;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\n  display: flex;\n  width: 100%;\n  padding: 6px 0px 6px 12px;\n  border-radius: 5px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected {\n  color: #323130;\n  background-color: #fff;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\n  margin-left: auto;\n  margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu {\n  background-color: #73A6FF;\n  transition: background-color 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\n  margin-left: auto;\n  font-size: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount {\n  margin-left: auto;\n  margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\n  margin-right: 14.5px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n  max-width: 0;\n  overflow: hidden;\n  white-space:nowrap;\n  margin: 0 5px;\n  font-weight: 100;\n  cursor: pointer;\n  transition: max-width 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n  max-width: 100%;\n  margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n  margin: 0 5px 0 0;\n  font-weight: 600;\n  margin-left: 0px;\n  cursor: auto;\n  cursor: initial;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\n  margin-right: 0px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\n  padding-left: 15px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName > span {\n  display: inline;\n  display: initial;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2 {\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 {\n  margin-left: 10px;\n  padding: 0 2px;\n  background-color: #232932;\n  border-left: 1px solid #8A8886;\n  overflow: hidden;\n  max-height: 0px;\n  transition: max-height 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3.utilities_ops-app-frame_NavigationBar_NavigationBar--expanded {\n  max-height: 500px;\n  margin-top: 3px;\n}";
+var css_248z$1 = ".utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  background: #3A4454;\n  min-width: 100px;\n  max-width: 100px;\n  height: 100%;\n  color: #ffffff;\n  font-size: 16px;\n  z-index: 99999;\n  transition: max-width 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover {\n  max-width: 400px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu {\n  flex: 1;\n  overflow-y: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu::-webkit-scrollbar { \n  display: none;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\n  display: flex;\n  width: 100%;\n  padding: 6px 0px 6px 12px;\n  border-radius: 5px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected {\n  color: #323130;\n  background-color: #fff;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\n  margin-left: auto;\n  margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu {\n  background-color: #73A6FF;\n  transition: background-color 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\n  margin-left: auto;\n  font-size: 12px;\n  color: #fff;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\n  color: #323130;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount {\n  margin-left: auto;\n  margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\n  \n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\n  width: 20px;\n  color: #fff;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\n  color: #323130;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n  max-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  margin: 0 5px 0 10px;\n  font-weight: 100;\n  cursor: pointer;\n  transition: max-width 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n  max-width: 100%;\n  margin-right: 10px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\n  max-width: 100%;\n  margin: 0 5px 0 0;\n  font-weight: 600;\n  margin-left: 0px;\n  cursor: auto;\n  cursor: initial;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\n  margin-right: 0px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\n  padding-left: 12px;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName > span {\n  display: inline;\n  display: initial;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2 {\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 {\n  margin-left: 10px;\n  padding: 0 2px;\n  background-color: #232932;\n  border-left: 1px solid #8A8886;\n  overflow: hidden;\n  max-height: 0px;\n  transition: max-height 0.5s ease-in-out;\n}\n\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3.utilities_ops-app-frame_NavigationBar_NavigationBar--expanded {\n  max-height: 500px;\n  margin-top: 3px;\n}";
 styleInject(css_248z$1);
 
 var _styleModuleImportMap = {
@@ -30970,9 +30953,10 @@ var _styleModuleImportMap = {
     "NavBarContainer": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer",
     "NavMenu": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu",
     "NavItem": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem",
-    "selected": "utilities_ops-app-frame_NavigationBar_NavigationBar--selected",
+    "NavItemSelected": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected",
     "expandButton": "utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton",
     "expandedMenu": "utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu",
+    "selected": "utilities_ops-app-frame_NavigationBar_NavigationBar--selected",
     "NavItemCount": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount",
     "NavItemIcon": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon",
     "NavItemName": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName",
@@ -30985,186 +30969,145 @@ var _styleModuleImportMap = {
 
 var NavIcon = function NavIcon(_ref) {
   var icon = _ref.icon;
-  return typeof icon === 'string' ? React__default["default"].createElement(coreComponents.Icon, {
+  return typeof icon === 'string' ? React__default["default"].createElement(coreComponents.IconV2, {
     name: icon
   }) : icon;
 };
 
-var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref2) {
-  var _navItem$name;
-
-  var navItem = _ref2.navItem,
-      isHover = _ref2.isHover,
-      activeSubmenu = _ref2.activeSubmenu,
-      setActiveSubmenu = _ref2.setActiveSubmenu,
-      navigateTo = _ref2.navigateTo,
-      selected = _ref2.selected,
-      setSelected = _ref2.setSelected,
-      defaultRedirect = _ref2.defaultRedirect,
-      reloadMenuItems = _ref2.reloadMenuItems;
-  var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
-  return React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1"
-  }, React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem"
-  }, React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
-  }, React__default["default"].createElement(NavIcon, {
-    icon: navItem.icon
-  })), React__default["default"].createElement("div", {
-    className: ((isHover ? 'hovered' : '') ? (isHover ? 'hovered' : '') + " " : "") + "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
-  }, (_navItem$name = navItem.name) === null || _navItem$name === void 0 ? void 0 : _navItem$name.toUpperCase()), React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
-  }, navItem.count)), React__default["default"].createElement("div", null, hasSubMenuItems ? navItem.subMenuItems.map(function (subItem) {
-    return React__default["default"].createElement(NavigationMenuLevel2, {
-      key: subItem.name,
-      isHover: isHover,
-      navItem: subItem,
-      selected: selected,
-      setSelected: setSelected,
-      defaultRedirect: defaultRedirect,
-      activeSubmenu: activeSubmenu,
-      setActiveSubmenu: setActiveSubmenu,
-      navigateTo: navigateTo,
-      reloadMenuItems: reloadMenuItems
-    });
-  }) : null));
-};
+var updateRoutes = function updateRoutes(navItems, parentRoute) {
+  var updatedItems = navItems.map(function (item) {
+    var updatedItem = _objectSpread2({}, item);
 
-var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref3) {
-  var navItem = _ref3.navItem,
-      isHover = _ref3.isHover,
-      selected = _ref3.selected,
-      setSelected = _ref3.setSelected,
-      defaultRedirect = _ref3.defaultRedirect,
-      activeSubmenu = _ref3.activeSubmenu,
-      setActiveSubmenu = _ref3.setActiveSubmenu,
-      navigateTo = _ref3.navigateTo,
-      reloadMenuItems = _ref3.reloadMenuItems;
+    if (updatedItem.route) {
+      updatedItem.fullRoute = parentRoute + '/' + updatedItem.route;
+    }
 
-  var _useState = React.useState(navItem.count),
-      _useState2 = _slicedToArray(_useState, 2),
-      countText = _useState2[0],
-      setCountText = _useState2[1];
+    if (updatedItem.subMenuItems) {
+      updatedItem.subMenuItems = updateRoutes(updatedItem.subMenuItems, updatedItem.fullRoute);
+    }
 
-  var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
-  React.useEffect(function () {
-    setTimeout(function () {
-      setCountText(!isHover ? navItem.count > 999 ? '999+' : navItem.count : navItem.count);
-    });
-  }, [isHover]);
+    return updatedItem;
+  });
+  return updatedItems;
+};
 
-  var handleItemClick = function handleItemClick() {
-    setActiveSubmenu(activeSubmenu === navItem.route ? null : navItem.route);
-    setSelected(null);
+var getDepth = function getDepth(navItems) {
+  var depth = 0;
+  navItems.forEach(function (navItem) {
+    var subMenuDepth = navItem.subMenuItems ? getDepth(navItem.subMenuItems) : 0;
+    depth = Math.max(depth, 1 + subMenuDepth);
+  });
+  return depth;
+};
+
+var validateConfig = function validateConfig(navItems) {
+  var maxDepth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  var keys = ['name', 'route'];
+  if (navItems.length === 0) return false;
+  var depth = getDepth(navItems);
+  if (depth > maxDepth) return false;
+  navItems.map(function (item) {
+    var configItem = _objectSpread2({}, item);
+
+    if (keys.every(function (key) {
+      return configItem.hasOwnProperty(key);
+    }) === false) {
+      console.log("please check and update the navigation config");
+      return false;
+    }
 
-    if (activeSubmenu != navItem.route) {
-      reloadMenuItems();
+    if (configItem.subMenuItems) {
+      validateConfig(configItem.subMenuItems, maxDepth - 1);
     }
-  };
+  });
+  return true;
+};
 
-  return React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2"
-  }, React__default["default"].createElement("div", {
-    onClick: handleItemClick,
-    className: _getClassName("NavItem ".concat(activeSubmenu === navItem.route ? "expandedMenu" : ""), _styleModuleImportMap, {
-      "handleMissingStyleName": "warn"
-    })
-  }, React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
-  }, React__default["default"].createElement(NavIcon, {
-    icon: navItem.icon
-  })), React__default["default"].createElement("div", {
-    className: ((isHover ? 'hovered' : '') ? (isHover ? 'hovered' : '') + " " : "") + "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
-  }, navItem.name), hasSubMenuItems ? React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton"
-  }, React__default["default"].createElement(coreComponents.Icon, {
-    name: activeSubmenu == navItem.route ? 'ChevronUpMed' : 'ChevronDownMed'
-  })) : React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
-  }, countText)), React__default["default"].createElement("div", {
-    className: _getClassName("NavMenuLevel3 ".concat(activeSubmenu == navItem.route ? "expanded" : ""), _styleModuleImportMap, {
-      "handleMissingStyleName": "warn"
-    })
-  }, hasSubMenuItems ? navItem.subMenuItems.map(function (subItem) {
-    return React__default["default"].createElement(NavigationMenuLevel3, {
-      key: subItem.name,
-      isHover: isHover,
-      navItem: subItem,
-      selected: selected,
-      setSelected: setSelected,
-      defaultRedirect: defaultRedirect,
-      navigateTo: navigateTo
-    });
-  }) : null));
+var defaultRedirect = function defaultRedirect(addr) {
+  window.open('http://localhost.copart.com' + addr, '_blank');
 };
 
-var NavigationMenuLevel3 = function NavigationMenuLevel3(_ref4) {
-  var navItem = _ref4.navItem,
-      isHover = _ref4.isHover,
-      selected = _ref4.selected,
-      setSelected = _ref4.setSelected,
-      defaultRedirect = _ref4.defaultRedirect,
-      navigateTo = _ref4.navigateTo;
+var NavigationBar = function NavigationBar(_ref2) {
+  var navItems = _ref2.navItems,
+      navigateTo = _ref2.navigateTo,
+      history = _ref2.history,
+      getCounts = _ref2.getCounts;
+  var navigateFunction = navigateTo || (history === null || history === void 0 ? void 0 : history.push) || defaultRedirect;
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      navItemsModified = _useState2[0],
+      setNavItemsModified = _useState2[1];
 
-  var _useState3 = React.useState(navItem.count),
+  var _useState3 = React.useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      countText = _useState4[0],
-      setCountText = _useState4[1];
+      isHover = _useState4[0],
+      setHover = _useState4[1];
+
+  var _useState5 = React.useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      configDepth = _useState6[0],
+      setConfigDepth = _useState6[1];
+
+  var _useState7 = React.useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isConfigValid = _useState8[0],
+      setConfigValid = _useState8[1];
+
+  var _useState9 = React.useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      activeSubmenu = _useState10[0],
+      setActiveSubmenu = _useState10[1];
 
   React.useEffect(function () {
-    setTimeout(function () {
-      setCountText(!isHover ? navItem.count > 999 ? '999+' : navItem.count : navItem.count);
-    });
-  }, [isHover]);
-  return React__default["default"].createElement("div", {
-    onClick: function onClick() {
-      setSelected(navItem.route);
+    if (Array.isArray(navItems)) {
+      var isValid = validateConfig(navItems);
 
-      if (navigateTo == null) {
-        defaultRedirect(navItem.route);
+      if (isValid) {
+        setNavItemsModified(updateRoutes(navItems, ""));
+        setConfigDepth(getDepth(navItems));
+        setConfigValid(true);
       } else {
-        navigateTo(navItem.route);
+        setConfigValid(false);
       }
+    } else {
+      setConfigValid(false);
+    }
+  }, []);
+  return React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer",
+    onMouseOver: function onMouseOver() {
+      return setHover(true);
     },
-    className: _getClassName("NavItem ".concat(selected === navItem.route ? "selected" : ""), _styleModuleImportMap, {
-      "handleMissingStyleName": "warn"
-    })
-  }, React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
-  }, React__default["default"].createElement(NavIcon, {
-    icon: navItem.icon
-  })), React__default["default"].createElement("div", {
-    className: ((isHover ? 'hovered' : '') ? (isHover ? 'hovered' : '') + " " : "") + "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
-  }, navItem.name), React__default["default"].createElement("div", {
-    key: isHover,
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
-  }, countText));
+    onMouseLeave: function onMouseLeave() {
+      return setHover(false);
+    }
+  }, isConfigValid ? React__default["default"].createElement(NavigationMenu, {
+    isHover: isHover,
+    navItems: navItemsModified,
+    navigateFunction: navigateFunction,
+    configDepth: configDepth,
+    activeSubmenu: activeSubmenu,
+    setActiveSubmenu: setActiveSubmenu,
+    getCounts: getCounts
+  }) : null, !isConfigValid ? React__default["default"].createElement("div", null, "Please check your navigation config") : null);
 };
 
-var NavigationMenu = function NavigationMenu(_ref5) {
-  var navItems = _ref5.navItems,
-      isHover = _ref5.isHover,
-      navigateTo = _ref5.navigateTo,
-      configDepth = _ref5.configDepth,
-      reloadMenuItems = _ref5.reloadMenuItems;
-
-  var _useState5 = React.useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      activeSubmenu = _useState6[0],
-      setActiveSubmenu = _useState6[1];
+var NavigationMenu = function NavigationMenu(_ref3) {
+  var navItems = _ref3.navItems,
+      isHover = _ref3.isHover,
+      navigateFunction = _ref3.navigateFunction,
+      configDepth = _ref3.configDepth,
+      activeSubmenu = _ref3.activeSubmenu,
+      setActiveSubmenu = _ref3.setActiveSubmenu,
+      getCounts = _ref3.getCounts;
 
-  var _useState7 = React.useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      selected = _useState8[0],
-      setSelected = _useState8[1];
+  var _useState11 = React.useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      selected = _useState12[0],
+      setSelected = _useState12[1];
 
   var redirectUrl = window.location.pathname;
-
-  function defaultRedirect(addr) {
-    window.open('http://localhost.copart.com' + addr, '_blank');
-  }
-
   React.useEffect(function () {
     if (redirectUrl != "/") {
       var splitUrl = redirectUrl.split("/");
@@ -31188,7 +31131,7 @@ var NavigationMenu = function NavigationMenu(_ref5) {
   }, [configDepth]);
   var NavComponent = configDepth === 3 ? NavigationMenuLevel1 : NavigationMenuLevel2;
   return React__default["default"].createElement("div", {
-    className: _getClassName("NavMenu ".concat(isHover ? "isHover" : ""), _styleModuleImportMap, {
+    className: _getClassName("NavMenu", _styleModuleImportMap, {
       "handleMissingStyleName": "warn"
     })
   }, navItems.map(function (item) {
@@ -31197,142 +31140,166 @@ var NavigationMenu = function NavigationMenu(_ref5) {
       isHover: isHover,
       navItem: item,
       activeSubmenu: activeSubmenu,
-      navigateTo: navigateTo,
+      navigateFunction: navigateFunction,
       setActiveSubmenu: setActiveSubmenu,
       selected: selected,
       setSelected: setSelected,
-      defaultRedirect: defaultRedirect,
       redirectUrl: redirectUrl,
-      reloadMenuItems: reloadMenuItems
+      getCounts: getCounts
     });
   }));
 };
 
-var NavigationBar = function NavigationBar(_ref6) {
-  var getNavItems = _ref6.getNavItems,
-      navigateTo = _ref6.navigateTo;
+var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
+  var _navItem$name, _navItem$shortName;
 
-  var _useState9 = React.useState(null),
-      _useState10 = _slicedToArray(_useState9, 2),
-      navItemsModified = _useState10[0],
-      setNavItemsModified = _useState10[1];
+  var navItem = _ref4.navItem,
+      isHover = _ref4.isHover,
+      activeSubmenu = _ref4.activeSubmenu,
+      setActiveSubmenu = _ref4.setActiveSubmenu,
+      navigateFunction = _ref4.navigateFunction,
+      selected = _ref4.selected,
+      setSelected = _ref4.setSelected,
+      getCounts = _ref4.getCounts;
+  var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
+  return React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1"
+  }, React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem"
+  }, React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
+  }, React__default["default"].createElement(NavIcon, {
+    icon: navItem.icon
+  })), React__default["default"].createElement("div", {
+    className: ((isHover ? 'hovered' : '') ? (isHover ? 'hovered' : '') + " " : "") + "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
+  }, isHover ? (_navItem$name = navItem.name) === null || _navItem$name === void 0 ? void 0 : _navItem$name.toUpperCase() : (_navItem$shortName = navItem.shortName) === null || _navItem$shortName === void 0 ? void 0 : _navItem$shortName.toUpperCase()), React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
+  }, navItem.count)), React__default["default"].createElement("div", null, hasSubMenuItems ? navItem.subMenuItems.map(function (subItem) {
+    return React__default["default"].createElement(NavigationMenuLevel2, {
+      key: subItem.name,
+      isHover: isHover,
+      navItem: subItem,
+      selected: selected,
+      setSelected: setSelected,
+      activeSubmenu: activeSubmenu,
+      setActiveSubmenu: setActiveSubmenu,
+      navigateFunction: navigateFunction,
+      getCounts: getCounts
+    });
+  }) : null));
+};
 
-  var _useState11 = React.useState(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      isHover = _useState12[0],
-      setHover = _useState12[1];
+var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
+  var navItem = _ref5.navItem,
+      isHover = _ref5.isHover,
+      selected = _ref5.selected,
+      setSelected = _ref5.setSelected,
+      activeSubmenu = _ref5.activeSubmenu,
+      setActiveSubmenu = _ref5.setActiveSubmenu,
+      navigateFunction = _ref5.navigateFunction,
+      getCounts = _ref5.getCounts;
+  var isMenuExpanded = activeSubmenu === navItem.fullRoute;
+  var showCounts = isMenuExpanded && getCounts && typeof getCounts === 'function';
 
   var _useState13 = React.useState(null),
       _useState14 = _slicedToArray(_useState13, 2),
-      configDepth = _useState14[0],
-      setConfigDepth = _useState14[1];
+      counts = _useState14[0],
+      setCounts = _useState14[1];
 
-  var _useState15 = React.useState(null),
+  var _useState15 = React.useState(false),
       _useState16 = _slicedToArray(_useState15, 2),
-      isConfigValid = _useState16[0],
-      setConfigValid = _useState16[1];
+      countsLoading = _useState16[0],
+      setCountsLoading = _useState16[1];
 
+  var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
   React.useEffect(function () {
-    var navItems = getNavItems();
-
-    if (Array.isArray(navItems)) {
-      var isValid = validateConfig(navItems);
-
-      if (isValid) {
-        setConfigDepth(getDepth(navItems));
-        setNavItemsModified(updateRoutes(navItems, ""));
-        setConfigValid(true);
-      } else {
-        setConfigValid(false);
-      }
-    } else {
-      reloadMenuItems();
-    }
-  }, []);
-
-  var updateRoutes = function updateRoutes(navItems, parentRoute) {
-    var updatedItems = navItems.map(function (item) {
-      var updatedItem = _objectSpread2({}, item);
-
-      if (updatedItem.route) {
-        updatedItem.route = parentRoute + '/' + updatedItem.route;
-      }
-
-      if (updatedItem.subMenuItems) {
-        updatedItem.subMenuItems = updateRoutes(updatedItem.subMenuItems, updatedItem.route);
-      }
-
-      return updatedItem;
-    });
-    return updatedItems;
-  };
-
-  var getDepth = function getDepth(navItems) {
-    var depth = 0;
-    navItems.forEach(function (navItem) {
-      var subMenuDepth = navItem.subMenuItems ? getDepth(navItem.subMenuItems) : 0;
-      depth = Math.max(depth, 1 + subMenuDepth);
-    });
-    return depth;
-  };
-
-  var validateConfig = function validateConfig(navItems) {
-    var keys = ['name', 'route'];
-    if (navItems.length === 0) return false;
-    navItems.map(function (item) {
-      var configItem = _objectSpread2({}, item);
-
-      if (keys.every(function (key) {
-        return configItem.hasOwnProperty(key);
-      }) === false) {
-        console.log("please check the navigation config and update the json");
-        return false;
-      }
-
-      if (configItem.subMenuItems) {
-        validateConfig(configItem.subMenuItems);
-      }
+    if (showCounts) {
+      setCountsLoading(true);
+      reloadCounts(navItem.route);
+    }
+  }, [activeSubmenu]);
+
+  var reloadCounts = function reloadCounts(menuItemName) {
+    getCounts(menuItemName).then(function (result) {
+      setCounts(result);
+      setCountsLoading(false);
+    }).catch(function () {
+      setCountsLoading(false);
     });
-    return true;
   };
 
-  var reloadMenuItems = function reloadMenuItems() {
-    var navItems = getNavItems();
-
-    if (!Array.isArray(navItems)) {
-      navItems.then(function (result) {
-        var isVaild = validateConfig(result);
+  var handleItemClick = function handleItemClick() {
+    setActiveSubmenu(isMenuExpanded ? null : navItem.fullRoute);
+    setSelected(null);
 
-        if (isVaild) {
-          setConfigDepth(getDepth(result));
-          setNavItemsModified(updateRoutes(result, ""));
-          setConfigValid(true);
-        } else {
-          setConfigValid(false);
-        }
-      });
+    if (!isMenuExpanded) {
+      reloadCounts();
     }
   };
 
-  var onMouseOver = function onMouseOver() {
-    setHover(true);
-  };
-
-  var onMouseLeave = function onMouseLeave() {
-    setHover(false);
-  };
+  return React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2"
+  }, React__default["default"].createElement("div", {
+    onClick: handleItemClick,
+    className: _getClassName("NavItem ".concat(isMenuExpanded ? "expandedMenu" : ""), _styleModuleImportMap, {
+      "handleMissingStyleName": "warn"
+    })
+  }, React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
+  }, React__default["default"].createElement(NavIcon, {
+    icon: navItem.icon
+  })), React__default["default"].createElement("div", {
+    className: ((isHover ? 'hovered' : '') ? (isHover ? 'hovered' : '') + " " : "") + "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
+  }, navItem.name), hasSubMenuItems && React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton"
+  }, React__default["default"].createElement(coreComponents.IconV2, {
+    name: isMenuExpanded ? 'chevron-up' : 'chevron-down'
+  }))), React__default["default"].createElement("div", {
+    className: _getClassName("NavMenuLevel3 ".concat(isMenuExpanded ? "expanded" : ""), _styleModuleImportMap, {
+      "handleMissingStyleName": "warn"
+    })
+  }, hasSubMenuItems ? navItem.subMenuItems.map(function (subItem) {
+    return React__default["default"].createElement(NavigationMenuLevel3, {
+      key: subItem.fullRoute,
+      isHover: isHover,
+      navItem: subItem,
+      count: counts && counts[subItem.route],
+      countsLoading: countsLoading,
+      selected: selected,
+      setSelected: setSelected,
+      navigateFunction: navigateFunction
+    });
+  }) : null));
+};
 
+var NavigationMenuLevel3 = function NavigationMenuLevel3(_ref6) {
+  var navItem = _ref6.navItem,
+      count = _ref6.count,
+      countsLoading = _ref6.countsLoading,
+      isHover = _ref6.isHover,
+      selected = _ref6.selected,
+      setSelected = _ref6.setSelected,
+      navigateFunction = _ref6.navigateFunction;
+  var countText = !isHover ? count > 999 ? '999+' : count : count;
   return React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer",
-    onMouseOver: onMouseOver,
-    onMouseLeave: onMouseLeave
-  }, isConfigValid ? React__default["default"].createElement(NavigationMenu, {
-    isHover: isHover,
-    navItems: navItemsModified,
-    navigateTo: navigateTo,
-    configDepth: configDepth,
-    reloadMenuItems: reloadMenuItems
-  }) : null, !isConfigValid ? React__default["default"].createElement("div", null, "Please check your navigation config") : null);
+    onClick: function onClick() {
+      setSelected(navItem.fullRoute);
+      navigateFunction(navItem.fullRoute);
+    },
+    className: _getClassName("NavItem ".concat(selected === navItem.fullRoute ? "NavItemSelected" : ""), _styleModuleImportMap, {
+      "handleMissingStyleName": "warn"
+    })
+  }, React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon"
+  }, React__default["default"].createElement(NavIcon, {
+    icon: navItem.icon
+  })), React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
+  }, navItem.name), React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
+  }, countsLoading ? React__default["default"].createElement(coreComponents.Spinner, {
+    size: "xxs"
+  }) : null, !countsLoading ? countText : null));
 };
 
 /******************************************************************************
@@ -45622,325 +45589,6 @@ function withFirebaseConfigCheck (Comp) {
 
 var Notifications = withFirebaseConfigCheck(Notifications$2);
 
-var _ref, _ref2;
-var navItems = [{
-  name: "Dispatch",
-  icon: null,
-  count: null,
-  route: 'dispatch',
-  subMenuItems: [{
-    name: "Lots",
-    route: "lots",
-    icon: "Car",
-    count: null,
-    subMenuItems: [{
-      name: "All",
-      route: "all",
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 13174
-    }, {
-      name: "Pending Trip Build",
-      route: 'pendingtripsbuild',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 10958
-    }, {
-      name: "Pending Processing",
-      route: 'dispatch',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 2089
-    }, {
-      name: "Pending Paperwork Verification",
-      route: 'pendingprocessing',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 268
-    }, {
-      name: "Partial Paperwork Verified",
-      route: 'partialpaperwork',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 19
-    }, {
-      name: "Awaiting Dispatch",
-      route: 'awaitingdispatch',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 18
-    }, {
-      name: "Overdue and Due Today",
-      route: 'overdue',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 10462
-    }, {
-      name: "Issue Queue",
-      route: 'issuequeue',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 21
-    }]
-  }, {
-    name: "Trips View",
-    route: 'tripsview',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "AddEvent"
-    })
-  }, (_ref = {
-    name: "Tow Providers",
-    route: 'towproviders',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "DeliveryTruck"
-    })
-  }, _defineProperty(_ref, "route", "/towproviders"), _defineProperty(_ref, "subMenuItems", [{
-    name: "All",
-    route: 'all',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 13174
-  }]), _ref), {
-    name: "Drivers",
-    route: 'drivers',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "AlignHorizontalLeft"
-    }),
-    subMenuItems: [{
-      name: "All",
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      route: 'all',
-      count: 13174
-    }]
-  }, {
-    name: "Work Requests",
-    route: 'workrequests',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "AnchorLock"
-    }),
-    subMenuItems: [{
-      name: "All",
-      route: 'all',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 13174
-    }]
-  }, {
-    name: "Advanced Charge Discrepancy",
-    route: 'advanced',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "CalendarDay"
-    }),
-    subMenuItems: [{
-      name: "All",
-      route: 'all',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 13174
-    }]
-  }, {
-    name: "One Time Rate Request Change",
-    route: 'onetime',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "AddEvent"
-    }),
-    subMenuItems: [{
-      name: "All",
-      route: 'all',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 13174
-    }]
-  }]
-}, {
-  name: "Yard To Yard",
-  route: 'y2y',
-  icon: null,
-  subMenuItems: [{
-    name: "Y2Y Trips",
-    route: 'trips',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Chart"
-    }),
-    subMenuItems: [{
-      name: "All",
-      route: 'all',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 13174
-    }]
-  }, {
-    name: "Y2Y Requests",
-    route: 'requests',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "BucketColor"
-    }),
-    subMenuItems: [{
-      name: "All",
-      route: 'all',
-      icon: React__default["default"].createElement(coreComponents.Icon, {
-        name: "Car"
-      }),
-      count: 13174
-    }]
-  }]
-}];
-[{
-  name: "Lots",
-  route: "/lots",
-  icon: React__default["default"].createElement(coreComponents.Icon, {
-    name: "Car"
-  }),
-  count: null,
-  subMenuItems: [{
-    name: "All",
-    route: "/all",
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 13174
-  }, {
-    name: "Pending Trip Build",
-    route: 'pendingtripsbuild',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 10958
-  }, {
-    name: "Pending Processing",
-    route: 'dispatch',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 2089
-  }, {
-    name: "Pending Paperwork Verification",
-    route: 'pendingprocessing',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 268
-  }, {
-    name: "Partial Paperwork Verified",
-    route: 'partialpaperwork',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 19
-  }, {
-    name: "Awaiting Dispatch",
-    route: 'awaitingdispatch',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 18
-  }, {
-    name: "Overdue and Due Today",
-    route: 'overdue',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 10462
-  }, {
-    name: "Issue Queue",
-    route: 'issuequeue',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 21
-  }]
-}, {
-  name: "Trips View",
-  route: 'tripsview',
-  icon: React__default["default"].createElement(coreComponents.Icon, {
-    name: "AddEvent"
-  })
-}, (_ref2 = {
-  name: "Tow Providers",
-  route: 'towproviders',
-  icon: React__default["default"].createElement(coreComponents.Icon, {
-    name: "DeliveryTruck"
-  })
-}, _defineProperty(_ref2, "route", "/towproviders"), _defineProperty(_ref2, "subMenuItems", [{
-  name: "All",
-  route: 'all',
-  icon: React__default["default"].createElement(coreComponents.Icon, {
-    name: "Car"
-  }),
-  count: 13174
-}]), _ref2), {
-  name: "Drivers",
-  route: 'drivers',
-  icon: React__default["default"].createElement(coreComponents.Icon, {
-    name: "AlignHorizontalLeft"
-  }),
-  subMenuItems: [{
-    name: "All",
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    route: 'all',
-    count: 13174
-  }]
-}, {
-  name: "Work Requests",
-  route: 'workrequests',
-  icon: React__default["default"].createElement(coreComponents.Icon, {
-    name: "AnchorLock"
-  }),
-  subMenuItems: [{
-    name: "All",
-    route: 'all',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 13174
-  }]
-}, {
-  name: "Advanced Charge Discrepancy",
-  route: 'advanced',
-  icon: React__default["default"].createElement(coreComponents.Icon, {
-    name: "CalendarDay"
-  }),
-  subMenuItems: [{
-    name: "All",
-    route: 'all',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 13174
-  }]
-}, {
-  name: "One Time Rate Request Change",
-  route: 'onetime',
-  icon: React__default["default"].createElement(coreComponents.Icon, {
-    name: "AddEvent"
-  }),
-  subMenuItems: [{
-    name: "All",
-    route: 'all',
-    icon: React__default["default"].createElement(coreComponents.Icon, {
-      name: "Car"
-    }),
-    count: 13174
-  }]
-}];
-
 var css_248z = ".utilities_ops-app-frame_AppFrame_AppFrame--AppFrame {\n  background: var(--paleGray);\n  background: var(--paleGray);\n  height: 100vh;\n  max-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  flex-basis: 0;\n}\n\n.utilities_ops-app-frame_AppFrame_AppFrame--header {\n  flex: 0 1 auto;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Wrapper that contains the app being developed. */\n\n.utilities_ops-app-frame_AppFrame_AppFrame--AppContainer {\n  flex: 1 1 auto;\n}\n";
 styleInject(css_248z);
 
@@ -46010,7 +45658,9 @@ var AppFrame = function AppFrame(props) {
     className: "utilities_ops-app-frame_AppFrame_AppFrame--AppContainer"
   }, props.showNavigation && storage.isAuthenticated ? React__default["default"].createElement(NavigationBar, {
     navigateTo: props.navigateTo,
-    getNavItems: props.getNavItems
+    history: props.history,
+    navItems: props.navItems,
+    getCounts: props.getCounts
   }) : null, React__default["default"].createElement("div", {
     style: {
       marginLeft: props.showNavigation ? '100px' : '0px'
@@ -46019,10 +45669,8 @@ var AppFrame = function AppFrame(props) {
 };
 AppFrame.defaultProps = {
   handleScrolling: true,
-  showNavigation: true,
-  getNavItems: function getNavItems() {
-    return navItems;
-  }
+  showNavigation: false,
+  navItems: []
 };
 
 var logOutboundCalls =