@nebula.js/stardust/dist/stardust.dev.js

/*
* @nebula.js/stardust v2.12.0
* Copyright (c) 2022 QlikTech International AB
* Released under the MIT license.
*/

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.stardust = {}));
})(this, (function (exports) { 'use strict';

	var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

	function getDefaultExportFromCjs (x) {
		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
	}

	var runtime = {exports: {}};

	/**
	 * Copyright (c) 2014-present, Facebook, Inc.
	 *
	 * This source code is licensed under the MIT license found in the
	 * LICENSE file in the root directory of this source tree.
	 */

	(function (module) {
		var runtime = (function (exports) {

		  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";

		  function define(obj, key, value) {
		    Object.defineProperty(obj, key, {
		      value: value,
		      enumerable: true,
		      configurable: true,
		      writable: true
		    });
		    return obj[key];
		  }
		  try {
		    // IE 8 has a broken Object.defineProperty that only works on DOM objects.
		    define({}, "");
		  } catch (err) {
		    define = function(obj, key, value) {
		      return obj[key] = value;
		    };
		  }

		  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,
		    // .throw, and .return methods.
		    generator._invoke = makeInvokeMethod(innerFn, self, context);

		    return generator;
		  }
		  exports.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
		  // already have an existing method we want to call, so there's no need
		  // to create a new function object. We can even get away with assuming
		  // the method takes exactly one argument, since that happens to be true
		  // 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) };
		    } catch (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
		  // breaking out of the dispatch switch statement.
		  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
		  // don't natively support it.
		  var IteratorPrototype = {};
		  define(IteratorPrototype, iteratorSymbol, function () {
		    return this;
		  });

		  var getProto = Object.getPrototypeOf;
		  var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
		  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);
		  GeneratorFunction.prototype = GeneratorFunctionPrototype;
		  define(Gp, "constructor", GeneratorFunctionPrototype);
		  define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
		  GeneratorFunction.displayName = define(
		    GeneratorFunctionPrototype,
		    toStringTagSymbol,
		    "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) {
		      define(prototype, method, function(arg) {
		        return this._invoke(method, arg);
		      });
		    });
		  }

		  exports.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;
		  };

		  exports.mark = function(genFun) {
		    if (Object.setPrototypeOf) {
		      Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
		    } else {
		      genFun.__proto__ = GeneratorFunctionPrototype;
		      define(genFun, toStringTagSymbol, "GeneratorFunction");
		    }
		    genFun.prototype = Object.create(Gp);
		    return genFun;
		  };

		  // 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.
		  exports.awrap = function(arg) {
		    return { __await: arg };
		  };

		  function AsyncIterator(generator, PromiseImpl) {
		    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 PromiseImpl.resolve(value.__await).then(function(value) {
		            invoke("next", value, resolve, reject);
		          }, function(err) {
		            invoke("throw", err, resolve, reject);
		          });
		        }

		        return PromiseImpl.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) {
		          // 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);
		        });
		      }
		    }

		    var previousPromise;

		    function enqueue(method, arg) {
		      function callInvokeWithMethodAndArg() {
		        return new PromiseImpl(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,
		    // .throw, and .return (see defineIteratorMethods).
		    this._invoke = enqueue;
		  }

		  defineIteratorMethods(AsyncIterator.prototype);
		  define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
		    return this;
		  });
		  exports.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.
		  exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
		    if (PromiseImpl === void 0) PromiseImpl = Promise;

		    var iter = new AsyncIterator(
		      wrap(innerFn, outerFn, self, tryLocsList),
		      PromiseImpl
		    );

		    return exports.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");
		      }

		      if (state === GenStateCompleted) {
		        if (method === "throw") {
		          throw arg;
		        }

		        // Be forgiving, per 25.3.3.3.3 of the spec:
		        // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
		        return doneResult();
		      }

		      context.method = method;
		      context.arg = arg;

		      while (true) {
		        var delegate = context.delegate;
		        if (delegate) {
		          var delegateResult = maybeInvokeDelegate(delegate, context);
		          if (delegateResult) {
		            if (delegateResult === ContinueSentinel) continue;
		            return delegateResult;
		          }
		        }

		        if (context.method === "next") {
		          // 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;
		            throw context.arg;
		          }

		          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;

		          if (record.arg === ContinueSentinel) {
		            continue;
		          }

		          return {
		            value: record.arg,
		            done: context.done
		          };

		        } else if (record.type === "throw") {
		          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
		  // 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.
		      context.delegate = null;

		      if (context.method === "throw") {
		        // Note: ["return"] must be used for ES3 parsing compatibility.
		        if (delegate.iterator["return"]) {
		          // If the delegate iterator has a return method, give it a
		          // chance to clean up.
		          context.method = "return";
		          context.arg = undefined$1;
		          maybeInvokeDelegate(delegate, context);

		          if (context.method === "throw") {
		            // If maybeInvokeDelegate(context) changed context.method from
		            // "return" to "throw", let that override the TypeError below.
		            return ContinueSentinel;
		          }
		        }

		        context.method = "throw";
		        context.arg = new TypeError(
		          "The iterator does not provide a 'throw' method");
		      }

		      return ContinueSentinel;
		    }

		    var record = tryCatch(method, delegate.iterator, context.arg);

		    if (record.type === "throw") {
		      context.method = "throw";
		      context.arg = record.arg;
		      context.delegate = null;
		      return ContinueSentinel;
		    }

		    var info = record.arg;

		    if (! info) {
		      context.method = "throw";
		      context.arg = new TypeError("iterator result is not an object");
		      context.delegate = null;
		      return ContinueSentinel;
		    }

		    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;

		      // Resume execution at the desired location (see delegateYield).
		      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 outer generator.
		    context.delegate = null;
		    return ContinueSentinel;
		  }

		  // Define Generator.prototype.{next,throw,return} in terms of the
		  // unified ._invoke helper method.
		  defineIteratorMethods(Gp);

		  define(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.
		  define(Gp, iteratorSymbol, function() {
		    return this;
		  });

		  define(Gp, "toString", function() {
		    return "[object Generator]";
		  });

		  function pushTryEntry(locs) {
		    var entry = { tryLoc: locs[0] };

		    if (1 in locs) {
		      entry.catchLoc = locs[1];
		    }

		    if (2 in locs) {
		      entry.finallyLoc = locs[2];
		      entry.afterLoc = locs[3];
		    }

		    this.tryEntries.push(entry);
		  }

		  function resetTryEntry(entry) {
		    var record = entry.completion || {};
		    record.type = "normal";
		    delete record.arg;
		    entry.completion = record;
		  }

		  function Context(tryLocsList) {
		    // 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" }];
		    tryLocsList.forEach(pushTryEntry, this);
		    this.reset(true);
		  }

		  exports.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
		    // 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
		      // 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;
		    };
		  };

		  function values(iterable) {
		    if (iterable) {
		      var iteratorMethod = iterable[iteratorSymbol];
		      if (iteratorMethod) {
		        return iteratorMethod.call(iterable);
		      }

		      if (typeof iterable.next === "function") {
		        return iterable;
		      }

		      if (!isNaN(iterable.length)) {
		        var i = -1, next = function next() {
		          while (++i < iterable.length) {
		            if (hasOwn.call(iterable, i)) {
		              next.value = iterable[i];
		              next.done = false;
		              return next;
		            }
		          }

		          next.value = undefined$1;
		          next.done = true;

		          return next;
		        };

		        return next.next = next;
		      }
		    }

		    // Return an iterator with no values.
		    return { next: doneResult };
		  }
		  exports.values = values;

		  function doneResult() {
		    return { value: undefined$1, done: true };
		  }

		  Context.prototype = {
		    constructor: Context,

		    reset: function(skipTempReset) {
		      this.prev = 0;
		      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))) {
		            this[name] = undefined$1;
		          }
		        }
		      }
		    },

		    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) {
		      if (this.done) {
		        throw exception;
		      }

		      var context = this;
		      function handle(loc, caught) {
		        record.type = "throw";
		        record.arg = exception;
		        context.next = loc;

		        if (caught) {
		          // If the dispatched exception was caught by a catch block,
		          // then let that catch block handle the exception normally.
		          context.method = "next";
		          context.arg = undefined$1;
		        }

		        return !! caught;
		      }

		      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
		        var entry = this.tryEntries[i];
		        var record = entry.completion;

		        if (entry.tryLoc === "root") {
		          // Exception thrown outside of any try block that could handle
		          // it, so set the completion value of the entire function to
		          // throw the exception.
		          return handle("end");
		        }

		        if (entry.tryLoc <= this.prev) {
		          var hasCatch = hasOwn.call(entry, "catchLoc");
		          var hasFinally = hasOwn.call(entry, "finallyLoc");

		          if (hasCatch && hasFinally) {
		            if (this.prev < entry.catchLoc) {
		              return handle(entry.catchLoc, true);
		            } 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) {
		      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) {
		          var finallyEntry = entry;
		          break;
		        }
		      }

		      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;
		      }

		      var record = finallyEntry ? finallyEntry.completion : {};
		      record.type = type;
		      record.arg = arg;

		      if (finallyEntry) {
		        this.method = "next";
		        this.next = finallyEntry.finallyLoc;
		        return ContinueSentinel;
		      }

		      return this.complete(record);
		    },

		    complete: function(record, afterLoc) {
		      if (record.type === "throw") {
		        throw record.arg;
		      }

		      if (record.type === "break" ||
		          record.type === "continue") {
		        this.next = record.arg;
		      } else if (record.type === "return") {
		        this.rval = this.arg = record.arg;
		        this.method = "return";
		        this.next = "end";
		      } else if (record.type === "normal" && afterLoc) {
		        this.next = afterLoc;
		      }

		      return ContinueSentinel;
		    },

		    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);
		          return ContinueSentinel;
		        }
		      }
		    },

		    "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
		      // argument that corresponds to a known catch block.
		      throw new Error("illegal catch attempt");
		    },

		    delegateYield: function(iterable, resultName, nextLoc) {
		      this.delegate = {
		        iterator: values(iterable),
		        resultName: resultName,
		        nextLoc: nextLoc
		      };

		      if (this.method === "next") {
		        // Deliberately forget the last sent value so that we don't
		        // accidentally pass it on to the delegate.
		        this.arg = undefined$1;
		      }

		      return ContinueSentinel;
		    }
		  };

		  // Regardless of whether this script is executing as a CommonJS module
		  // or not, return the runtime object so that we can declare the variable
		  // regeneratorRuntime in the outer scope, which allows this module to be
		  // injected easily by `bin/regenerator --include-runtime script.js`.
		  return exports;

		}(
		  // If this script is executing as a CommonJS module, use module.exports
		  // as the regeneratorRuntime namespace. Otherwise create a new empty
		  // object. Either way, the resulting object will be used to initialize
		  // the regeneratorRuntime variable at the top of this file.
		  module.exports 
		));

		try {
		  regeneratorRuntime = runtime;
		} catch (accidentalStrictMode) {
		  // This module should not be running in strict mode, so the above
		  // assignment should always work unless something is misconfigured. Just
		  // in case runtime.js accidentally runs in strict mode, in modern engines
		  // we can explicitly access globalThis. In older engines we can escape
		  // strict mode using a global Function call. This could conceivably fail
		  // if a Content Security Policy forbids using Function, but in that case
		  // the proper solution is to fix the accidental strict mode problem. If
		  // you've misconfigured your bundler to force strict mode and applied a
		  // CSP to forbid Function, and you're not willing to fix either of those
		  // problems, please detail your unique predicament in a GitHub issue.
		  if (typeof globalThis === "object") {
		    globalThis.regeneratorRuntime = runtime;
		  } else {
		    Function("r", "regeneratorRuntime = r")(runtime);
		  }
		}
	} (runtime));

	function ownKeys(object, enumerableOnly) {
	  var keys = Object.keys(object);

	  if (Object.getOwnPropertySymbols) {
	    var symbols = Object.getOwnPropertySymbols(object);
	    enumerableOnly && (symbols = symbols.filter(function (sym) {
	      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
	    })), keys.push.apply(keys, symbols);
	  }

	  return keys;
	}

	function _objectSpread2(target) {
	  for (var i = 1; i < arguments.length; i++) {
	    var source = null != arguments[i] ? arguments[i] : {};
	    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
	      _defineProperty$2(target, key, source[key]);
	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
	      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
	    });
	  }

	  return target;
	}

	function _defineProperty$2(obj, key, value) {
	  if (key in obj) {
	    Object.defineProperty(obj, key, {
	      value: value,
	      enumerable: true,
	      configurable: true,
	      writable: true
	    });
	  } else {
	    obj[key] = value;
	  }

	  return obj;
	}

	function _extends$b() {
	  _extends$b = Object.assign || function (target) {
	    for (var i = 1; i < arguments.length; i++) {
	      var source = arguments[i];

	      for (var key in source) {
	        if (Object.prototype.hasOwnProperty.call(source, key)) {
	          target[key] = source[key];
	        }
	      }
	    }

	    return target;
	  };

	  return _extends$b.apply(this, arguments);
	}

	function _objectWithoutPropertiesLoose$4(source, excluded) {
	  if (source == null) return {};
	  var target = {};
	  var sourceKeys = Object.keys(source);
	  var key, i;

	  for (i = 0; i < sourceKeys.length; i++) {
	    key = sourceKeys[i];
	    if (excluded.indexOf(key) >= 0) continue;
	    target[key] = source[key];
	  }

	  return target;
	}

	function _objectWithoutProperties$2(source, excluded) {
	  if (source == null) return {};

	  var target = _objectWithoutPropertiesLoose$4(source, excluded);

	  var key, i;

	  if (Object.getOwnPropertySymbols) {
	    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

	    for (i = 0; i < sourceSymbolKeys.length; i++) {
	      key = sourceSymbolKeys[i];
	      if (excluded.indexOf(key) >= 0) continue;
	      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
	      target[key] = source[key];
	    }
	  }

	  return target;
	}

	const format = function () {
	  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
	  let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
	  const arr = typeof args === 'string' || typeof args === 'number' ? [args] : args;
	  return message.replace(/\{(\d+)\}/g, (match, number) => typeof arr[number] !== 'undefined' ? arr[number] : match);
	};

	function translator() {
	  let {
	    initial = 'en-US',
	    fallback = 'en-US'
	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  const dictionaries = {};
	  let currentLocale = initial;
	  /**
	   * @class Translator
	   */

	  const api =
	  /** @lends Translator# */
	  {
	    language: lang => {
	      if (lang) {
	        currentLocale = lang;
	      }

	      return currentLocale;
	    },

	    /**
	     * Registers a string in multiple locales
	     * @param {object} item
	     * @param {string} item.id
	     * @param {object<string,string>} item.locale
	     * @example
	     * translator.add({
	     *   id: 'company.hello_user',
	     *   locale: {
	     *     'en-US': 'Hello {0}',
	     *     'sv-SE': 'Hej {0}'
	     *   }
	     * });
	     * translator.get('company.hello_user', ['John']); // Hello John
	     */
	    add: item => {
	      // TODO - disallow override?
	      const {
	        id,
	        locale
	      } = item;
	      Object.keys(locale).forEach(lang => {
	        if (!dictionaries[lang]) {
	          dictionaries[lang] = {};
	        }

	        dictionaries[lang][id] = locale[lang];
	      });
	    },

	    /**
	     * Translates a string for current locale.
	     * @param {string} str - ID of the registered string.
	     * @param {Array<string>=} args - Values passed down for string interpolation.
	     * @returns {string} The translated string.
	     */
	    get(str, args) {
	      let v;

	      if (dictionaries[currentLocale] && typeof dictionaries[currentLocale][str] !== 'undefined') {
	        v = dictionaries[currentLocale][str];
	      } else if (dictionaries[fallback] && typeof dictionaries[fallback][str] !== 'undefined') {
	        v = dictionaries[fallback][str];
	      } else {
	        v = str;
	      }

	      return typeof args !== 'undefined' ? format(v, args) : v;
	    }

	  };
	  return api;
	}

	const locale = function () {
	  let {
	    initial = 'en-US',
	    fallback = 'en-US'
	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  const t = translator({
	    initial,
	    fallback
	  });
	  return {
	    translator: t
	  };
	};

	var Cancel$1 = {
		id: "Cancel",
		locale: {
			"de-DE": "Abbrechen",
			"en-US": "Cancel",
			"es-ES": "Cancelar",
			"fr-FR": "Annuler",
			"it-IT": "Annulla",
			"ja-JP": "キャンセル",
			"ko-KR": "취소",
			"nl-NL": "Annuleren",
			"pl-PL": "Anuluj",
			"pt-BR": "Cancelar",
			"ru-RU": "Отмена",
			"sv-SE": "Avbryt",
			"tr-TR": "İptal",
			"zh-CN": "取消",
			"zh-TW": "取消"
		}
	};
	var CurrentSelections_All = {
		id: "CurrentSelections.All",
		locale: {
			"de-DE": "ALLES",
			"en-US": "ALL",
			"es-ES": "TODOS",
			"fr-FR": "TOUS",
			"it-IT": "TUTTI",
			"ja-JP": "すべて",
			"ko-KR": "모두",
			"nl-NL": "ALLE",
			"pl-PL": "WSZYSTKO",
			"pt-BR": "TODOS",
			"ru-RU": "ВСЕ",
			"sv-SE": "ALLA",
			"tr-TR": "TÜMÜ",
			"zh-CN": "全部",
			"zh-TW": "全部"
		}
	};
	var CurrentSelections_Of = {
		id: "CurrentSelections.Of",
		locale: {
			"de-DE": "{0} von {1}",
			"en-US": "{0} of {1}",
			"es-ES": "{0} de {1}",
			"fr-FR": "{0} sur {1}",
			"it-IT": "{0} di {1}",
			"ja-JP": "{0}/ {1}",
			"ko-KR": "{0} / {1}",
			"nl-NL": "{0} van {1}",
			"pl-PL": "{0} z {1}",
			"pt-BR": "{0} de {1}",
			"ru-RU": "{0} из {1}",
			"sv-SE": "{0} av {1}",
			"tr-TR": "{0} / {1}",
			"zh-CN": "{0}/ {1}",
			"zh-TW": "{0}/ {1}"
		}
	};
	var Listbox_Lock = {
		id: "Listbox.Lock",
		locale: {
			"de-DE": "Auswahlen sperren",
			"en-US": "Lock selections",
			"es-ES": "Bloquear selecciones",
			"fr-FR": "Verrouiller les sélections",
			"it-IT": "Blocca selezioni",
			"ja-JP": "選択をロック",
			"ko-KR": "선택 내용 잠금",
			"nl-NL": "Selecties vergrendelen",
			"pl-PL": "Zablokuj wybory",
			"pt-BR": "Bloquear seleções",
			"ru-RU": "Заблокировать выборки",
			"sv-SE": "Lås urval",
			"tr-TR": "Seçimleri kilitle",
			"zh-CN": "锁定选择项",
			"zh-TW": "鎖定選項"
		}
	};
	var Listbox_Search = {
		id: "Listbox.Search",
		locale: {
			"de-DE": "In Listenfeld suchen",
			"en-US": "Search in listbox",
			"es-ES": "Buscar en cuadro de lista",
			"fr-FR": "Rechercher dans la liste de sélection",
			"it-IT": "Cerca nella casella di elenco",
			"ja-JP": "リストボックス内を検索",
			"ko-KR": "목록 상자에서 검색",
			"nl-NL": "Zoeken in keuzelijst",
			"pl-PL": "Wyszukaj w liście wartości",
			"pt-BR": "Pesquisar na caixa de listagem",
			"ru-RU": "Поиск в списке",
			"sv-SE": "Sök i listruta",
			"tr-TR": "Liste kutusunda ara",
			"zh-CN": "在列表框中搜索",
			"zh-TW": "在清單方塊中搜尋"
		}
	};
	var Listbox_Unlock = {
		id: "Listbox.Unlock",
		locale: {
			"de-DE": "Auswahlen entsperren",
			"en-US": "Unlock selections",
			"es-ES": "Desbloquear selecciones",
			"fr-FR": "Déverrouiller les sélections",
			"it-IT": "Sblocca selezioni",
			"ja-JP": "選択をロック解除",
			"ko-KR": "선택 내용 잠금 해제",
			"nl-NL": "Selecties ontgrendelen",
			"pl-PL": "Odblokuj wybory",
			"pt-BR": "Desbloquear seleções",
			"ru-RU": "Разблокировать выборки",
			"sv-SE": "Lås upp urval",
			"tr-TR": "Seçimlerin kilidini aç",
			"zh-CN": "将选择项解锁",
			"zh-TW": "解鎖選項"
		}
	};
	var Menu_More = {
		id: "Menu.More",
		locale: {
			"de-DE": "Mehr",
			"en-US": "More",
			"es-ES": "Más",
			"fr-FR": "Plus",
			"it-IT": "Altro",
			"ja-JP": "詳細",
			"ko-KR": "자세히",
			"nl-NL": "Meer",
			"pl-PL": "Więcej",
			"pt-BR": "Mais",
			"ru-RU": "Дополнительно",
			"sv-SE": "Mer",
			"tr-TR": "Daha fazla",
			"zh-CN": "更多",
			"zh-TW": "更多"
		}
	};
	var Navigate_Back = {
		id: "Navigate.Back",
		locale: {
			"de-DE": "Schritt zurück",
			"en-US": "Step back",
			"es-ES": "Atrás",
			"fr-FR": "Retour en arrière",
			"it-IT": "Torna indietro",
			"ja-JP": "1 段階戻る",
			"ko-KR": "이전 단계",
			"nl-NL": "Stap terug",
			"pl-PL": "Krok do tyłu",
			"pt-BR": "Voltar uma etapa",
			"ru-RU": "Шаг назад",
			"sv-SE": "Gå bakåt",
			"tr-TR": "Bir adım geri",
			"zh-CN": "后退",
			"zh-TW": "倒退"
		}
	};
	var Navigate_Forward = {
		id: "Navigate.Forward",
		locale: {
			"de-DE": "Schritt vor",
			"en-US": "Step forward",
			"es-ES": "Avanzar",
			"fr-FR": "Étape suivante",
			"it-IT": "Vai avanti",
			"ja-JP": "1段階進む",
			"ko-KR": "다음 단계",
			"nl-NL": "Stap vooruit",
			"pl-PL": "Krok do przodu",
			"pt-BR": "Avançar uma etapa",
			"ru-RU": "Шаг вперед",
			"sv-SE": "Gå framåt",
			"tr-TR": "Bir adım ileri",
			"zh-CN": "前进",
			"zh-TW": "前進"
		}
	};
	var OK = {
		id: "OK",
		locale: {
			"de-DE": "OK",
			"en-US": "OK",
			"es-ES": "Aceptar",
			"fr-FR": "OK",
			"it-IT": "OK",
			"ja-JP": "OK",
			"ko-KR": "확인",
			"nl-NL": "OK",
			"pl-PL": "OK",
			"pt-BR": "OK",
			"ru-RU": "ОК",
			"sv-SE": "OK",
			"tr-TR": "Tamam",
			"zh-CN": "确定",
			"zh-TW": "確定"
		}
	};
	var Object_Update_Active = {
		id: "Object.Update.Active",
		locale: {
			"de-DE": "Laden von Daten",
			"en-US": "Updating data",
			"es-ES": "Cargando datos",
			"fr-FR": "Chargement de données en cours",
			"it-IT": "Caricamento dati in corso",
			"ja-JP": "データのロード中",
			"ko-KR": "데이터 로드 중",
			"nl-NL": "Gegevens worden geladen",
			"pl-PL": "Ładowanie danych",
			"pt-BR": "Carregando dados",
			"ru-RU": "Загрузка данных",
			"sv-SE": "Laddar data",
			"tr-TR": "Veriler yükleniyor",
			"zh-CN": "加载数据",
			"zh-TW": "正在載入資料"
		}
	};
	var Object_Update_Cancelled = {
		id: "Object.Update.Cancelled",
		locale: {
			"de-DE": "Datenaktualisierung wurde abgebrochen",
			"en-US": "Data update was cancelled",
			"es-ES": "Se ha cancelado la actualización de datos",
			"fr-FR": "Mise à jour des données annulée",
			"it-IT": "Aggiornamento dati annullato",
			"ja-JP": "データの更新がキャンセルされました",
			"ko-KR": "데이터 업데이트가 취소되었습니다.",
			"nl-NL": "Gegevensupdate is geannuleerd",
			"pl-PL": "Aktualizacja danych została anulowana",
			"pt-BR": "A atualização de dados foi cancelada",
			"ru-RU": "Обновление данных отменено",
			"sv-SE": "Datauppdateringen avbröts.",
			"tr-TR": "Veri güncelleştirme iptal edildi",
			"zh-CN": "数据更新已取消",
			"zh-TW": "資料更新已取消"
		}
	};
	var Retry$1 = {
		id: "Retry",
		locale: {
			"de-DE": "Wiederholen",
			"en-US": "Retry",
			"es-ES": "Intentar de nuevo",
			"fr-FR": "Réessayer",
			"it-IT": "Riprova",
			"ja-JP": "再試行",
			"ko-KR": "다시 시도",
			"nl-NL": "Opnieuw",
			"pl-PL": "Ponów próbę",
			"pt-BR": "Tentar novamente",
			"ru-RU": "Повторить попытку",
			"sv-SE": "Försök igen",
			"tr-TR": "Yeniden dene",
			"zh-CN": "重试",
			"zh-TW": "重試"
		}
	};
	var Selection_Cancel = {
		id: "Selection.Cancel",
		locale: {
			"de-DE": "Auswahl abbrechen",
			"en-US": "Cancel selection",
			"es-ES": "Cancelar selección",
			"fr-FR": "Annuler la sélection",
			"it-IT": "Annulla selezione",
			"ja-JP": "選択のキャンセル",
			"ko-KR": "선택 취소",
			"nl-NL": "Selectie annuleren",
			"pl-PL": "Anuluj selekcję",
			"pt-BR": "Cancelar seleção",
			"ru-RU": "Отменить выборку",
			"sv-SE": "Avbryt urval",
			"tr-TR": "Seçimi iptal et",
			"zh-CN": "取消选择",
			"zh-TW": "取消選取"
		}
	};
	var Selection_Clear = {
		id: "Selection.Clear",
		locale: {
			"de-DE": "Auswahl löschen",
			"en-US": "Clear selection",
			"es-ES": "Borrar selección",
			"fr-FR": "Effacer la sélection",
			"it-IT": "Cancella selezione",
			"ja-JP": "選択をクリア",
			"ko-KR": "선택 해제",
			"nl-NL": "Selectie wissen",
			"pl-PL": "Wyczyść selekcję",
			"pt-BR": "Limpar seleção",
			"ru-RU": "Очистить выбор",
			"sv-SE": "Rensa urval",
			"tr-TR": "Seçimi temizle",
			"zh-CN": "清除选择",
			"zh-TW": "清除選項"
		}
	};
	var Selection_ClearAll = {
		id: "Selection.ClearAll",
		locale: {
			"de-DE": "Alle Auswahlen löschen",
			"en-US": "Clear all selections",
			"es-ES": "Borrar todas las selecciones",
			"fr-FR": "Effacer toutes les sélections",
			"it-IT": "Cancella tutte le selezioni",
			"ja-JP": "選択をすべてクリアする",
			"ko-KR": "모든 선택 해제",
			"nl-NL": "Alle selecties wissen",
			"pl-PL": "Wyczyść wszystkie selekcje",
			"pt-BR": "Limpar todas as seleções",
			"ru-RU": "Очистить от всех выборок",
			"sv-SE": "Radera alla urval",
			"tr-TR": "Tüm seçimleri temizle",
			"zh-CN": "清除所有选择项",
			"zh-TW": "清除所有選項"
		}
	};
	var Selection_ClearAllStates = {
		id: "Selection.ClearAllStates",
		locale: {
			"de-DE": "Alle Status löschen",
			"en-US": "Clear all states",
			"es-ES": "Borrar todos los estados",
			"fr-FR": "Effacer tous les états",
			"it-IT": "Cancella tutti gli stati",
			"ja-JP": "全ステートをクリア",
			"ko-KR": "모든 상태 지우기",
			"nl-NL": "Alle states wissen",
			"pl-PL": "Wyczyść wszystkie stany",
			"pt-BR": "Limpar todos os estados",
			"ru-RU": "Очистить все состояния",
			"sv-SE": "Rensa alla tillstånd",
			"tr-TR": "Tüm durumları temizle",
			"zh-CN": "清除所有状态",
			"zh-TW": "清除所有狀態"
		}
	};
	var Selection_Confirm = {
		id: "Selection.Confirm",
		locale: {
			"de-DE": "Auswahl bestätigen",
			"en-US": "Confirm selection",
			"es-ES": "Confirmar selección",
			"fr-FR": "Confirmer la sélection",
			"it-IT": "Conferma selezione",
			"ja-JP": "選択の確認",
			"ko-KR": "선택 확인",
			"nl-NL": "Selectie bevestigen",
			"pl-PL": "Potwierdź selekcję",
			"pt-BR": "Confirmar seleção",
			"ru-RU": "Подтвердить выборку",
			"sv-SE": "Bekräfta urval",
			"tr-TR": "Seçimi onayla",
			"zh-CN": "确认选择",
			"zh-TW": "確認選取"
		}
	};
	var Selection_Menu = {
		id: "Selection.Menu",
		locale: {
			"de-DE": "Auswahlmenü",
			"en-US": "Selection menu",
			"es-ES": "Menú de selección",
			"fr-FR": "Menu Sélection",
			"it-IT": "Menu Selezione",
			"ja-JP": "選択メニュー",
			"ko-KR": "선택 메뉴",
			"nl-NL": "Selectiemenu",
			"pl-PL": "Menu selekcji",
			"pt-BR": "Menu de seleção",
			"ru-RU": "Меню \"Выборка\"",
			"sv-SE": "Urvalsmeny",
			"tr-TR": "Seçim menüsü",
			"zh-CN": "选择菜单",
			"zh-TW": "選項功能表"
		}
	};
	var Selection_SelectAll = {
		id: "Selection.SelectAll",
		locale: {
			"de-DE": "Alle auswählen",
			"en-US": "Select all",
			"es-ES": "Seleccionar todo",
			"fr-FR": "Sélectionner tout",
			"it-IT": "Seleziona tutto",
			"ja-JP": "すべて選択",
			"ko-KR": "모두 선택",
			"nl-NL": "Alles selecteren",
			"pl-PL": "Wybierz wszystko",
			"pt-BR": "Selecionar todos",
			"ru-RU": "Выбрать все",
			"sv-SE": "Välj alla",
			"tr-TR": "Tümünü seç",
			"zh-CN": "全选",
			"zh-TW": "全選"
		}
	};
	var Selection_SelectAlternative = {
		id: "Selection.SelectAlternative",
		locale: {
			"de-DE": "Alternative Werte auswählen",
			"en-US": "Select alternative",
			"es-ES": "Seleccionar alternativos",
			"fr-FR": "Sélectionner des valeurs alternatives",
			"it-IT": "Seleziona alternativi",
			"ja-JP": "代替値を選択",
			"ko-KR": "대안 선택",
			"nl-NL": "Alternatief selecteren",
			"pl-PL": "Wybierz alternatywę",
			"pt-BR": "Selecionar alternativa",
			"ru-RU": "Выбрать альтернативные",
			"sv-SE": "Välj alternativ",
			"tr-TR": "Alternatifi seç",
			"zh-CN": "选择替代项",
			"zh-TW": "選取替代選項"
		}
	};
	var Selection_SelectExcluded = {
		id: "Selection.SelectExcluded",
		locale: {
			"de-DE": "Ausgeschlossene Werte auswählen",
			"en-US": "Select excluded",
			"es-ES": "Seleccionar excluidos",
			"fr-FR": "Sélectionner les valeurs exclues",
			"it-IT": "Seleziona esclusi",
			"ja-JP": "除外値を選択",
			"ko-KR": "제외 항목 선택",
			"nl-NL": "Uitgesloten waarden selecteren",
			"pl-PL": "Wybierz wykluczone",
			"pt-BR": "Selecionar excluído",
			"ru-RU": "Выбрать исключенные",
			"sv-SE": "Välj uteslutna",
			"tr-TR": "Hariç tutulanı seç",
			"zh-CN": "选择排除项",
			"zh-TW": "選取排除值"
		}
	};
	var Selection_SelectPossible = {
		id: "Selection.SelectPossible",
		locale: {
			"de-DE": "Wählbare Werte auswählen",
			"en-US": "Select possible",
			"es-ES": "Seleccionar posibles",
			"fr-FR": "Sélectionner les valeurs possibles",
			"it-IT": "Seleziona possibili",
			"ja-JP": "絞込値を選択",
			"ko-KR": "사용 가능 항목 선택",
			"nl-NL": "Mogelijke waarden selecteren",
			"pl-PL": "Wybierz możliwe",
			"pt-BR": "Selecionar possível",
			"ru-RU": "Выбрать возможные",
			"sv-SE": "Välj möjliga",
			"tr-TR": "Olasıyı seç",
			"zh-CN": "选择可能值",
			"zh-TW": "選取可能值"
		}
	};
	var Visualization_Incomplete = {
		id: "Visualization.Incomplete",
		locale: {
			"de-DE": "Unvollständige Visualisierung",
			"en-US": "Incomplete visualization",
			"es-ES": "Visualización incompleta",
			"fr-FR": "Visualisation incomplète",
			"it-IT": "Visualizzazione incompleta",
			"ja-JP": "未完了のビジュアライゼーション",
			"ko-KR": "완료되지 않은 시각화",
			"nl-NL": "Onvolledige visualisatie",
			"pl-PL": "Niekompletna wizualizacja",
			"pt-BR": "Visualização incompleta",
			"ru-RU": "Незавершенная визуализация",
			"sv-SE": "Ofullständig visualisering",
			"tr-TR": "Tamamlanmamış görselleştirme",
			"zh-CN": "不完整的可视化",
			"zh-TW": "視覺化未完成"
		}
	};
	var Visualization_Incomplete_Dimensions = {
		id: "Visualization.Incomplete.Dimensions",
		locale: {
			"de-DE": "{0} von {1} Dimensionen",
			"en-US": "{0} of {1} dimensions",
			"es-ES": "{0} de {1} dimensiones",
			"fr-FR": "{0} dimensions sur {1}",
			"it-IT": "{0} di {1} dimensioni",
			"ja-JP": "{0} / {1} 軸",
			"ko-KR": "{1} 차원의 {0}",
			"nl-NL": "{0} van {1} dimensies",
			"pl-PL": "{0} z {1} wymiarów",
			"pt-BR": "{0} de {1} dimensões",
			"ru-RU": "Измерения: {0} из {1}",
			"sv-SE": "{0} av {1} dimensioner",
			"tr-TR": "{0}/{1} boyut",
			"zh-CN": "{0} / {1} 个维度",
			"zh-TW": "{1} 個維度中的 {0} 個"
		}
	};
	var Visualization_Incomplete_Measures = {
		id: "Visualization.Incomplete.Measures",
		locale: {
			"de-DE": "{0} von {1} Kennzahlen",
			"en-US": "{0} of {1} measures",
			"es-ES": "{0} de {1} medidas",
			"fr-FR": "{0} mesures sur {1}",
			"it-IT": "{0} di {1} misure",
			"ja-JP": "{0} / {1} メジャー",
			"ko-KR": "{1} 측정값의 {0}",
			"nl-NL": "{0} van {1} metingen",
			"pl-PL": "{0} z {1} miar",
			"pt-BR": "{0} de {1} medidas",
			"ru-RU": "Меры: {0} из {1}",
			"sv-SE": "{0} av {1} mått",
			"tr-TR": "{0}/{1} hesaplama",
			"zh-CN": "{0} / {1} 个度量",
			"zh-TW": "{1} 個量值中的 {0} 個"
		}
	};
	var Visualization_Invalid_Dimension = {
		id: "Visualization.Invalid.Dimension",
		locale: {
			"de-DE": "Ungültige Dimension",
			"en-US": "Invalid dimension",
			"es-ES": "Dimensión no válida",
			"fr-FR": "Dimension non valide",
			"it-IT": "Dimensione non valida",
			"ja-JP": "無効な軸です",
			"ko-KR": "잘못된 차원",
			"nl-NL": "Ongeldige dimensie",
			"pl-PL": "Nieprawidłowy wymiar",
			"pt-BR": "Dimensão inválida",
			"ru-RU": "Недопустимое измерение",
			"sv-SE": "Ogiltig dimension",
			"tr-TR": "Geçersiz boyut",
			"zh-CN": "无效维度",
			"zh-TW": "維度無效"
		}
	};
	var Visualization_Invalid_Measure = {
		id: "Visualization.Invalid.Measure",
		locale: {
			"de-DE": "Ungültige Kennzahl",
			"en-US": "Invalid measure",
			"es-ES": "Medida no válida",
			"fr-FR": "Mesure non valide",
			"it-IT": "Misura non valida",
			"ja-JP": "無効なメジャーです",
			"ko-KR": "잘못된 측정값",
			"nl-NL": "Ongeldige meting",
			"pl-PL": "Nieprawidłowa miara",
			"pt-BR": "Medida inválida",
			"ru-RU": "Недопустимая мера",
			"sv-SE": "Ogiltigt mått",
			"tr-TR": "Geçersiz hesaplama",
			"zh-CN": "无效度量项",
			"zh-TW": "量值無效"
		}
	};
	var Visualization_LayoutError = {
		id: "Visualization.LayoutError",
		locale: {
			"de-DE": "Fehler",
			"en-US": "Error",
			"es-ES": "Error",
			"fr-FR": "Erreur",
			"it-IT": "Errore",
			"ja-JP": "エラー",
			"ko-KR": "오류",
			"nl-NL": "Fout",
			"pl-PL": "Błąd",
			"pt-BR": "Erro",
			"ru-RU": "Ошибка",
			"sv-SE": "Fel",
			"tr-TR": "Hata",
			"zh-CN": "错误",
			"zh-TW": "錯誤"
		}
	};
	var Visualization_UnfulfilledCalculationCondition = {
		id: "Visualization.UnfulfilledCalculationCondition",
		locale: {
			"de-DE": "Die Berechnungsbedingung ist nicht erfüllt",
			"en-US": "The calculation condition is not fulfilled",
			"es-ES": "La condición de cálculo no se cumple",
			"fr-FR": "Condition de calcul non remplie",
			"it-IT": "La condizione di calcolo non è soddisfatta",
			"ja-JP": "演算実行条件が満たされていません",
			"ko-KR": "계산 조건이 충족되지 않았습니다.",
			"nl-NL": "Er is niet aan de berekeningsvoorwaarde voldaan",
			"pl-PL": "Warunek obliczenia nie jest spełniony",
			"pt-BR": "A condição de cálculo não foi atendida",
			"ru-RU": "Условие вычисления не выполнено",
			"sv-SE": "Beräkningsvillkoret uppfylls inte",
			"tr-TR": "Hesaplama koşulu yerine getirilmedi",
			"zh-CN": "不满足计算条件",
			"zh-TW": "不符計算條件"
		}
	};
	var all = {
		Cancel: Cancel$1,
		CurrentSelections_All: CurrentSelections_All,
		CurrentSelections_Of: CurrentSelections_Of,
		Listbox_Lock: Listbox_Lock,
		Listbox_Search: Listbox_Search,
		Listbox_Unlock: Listbox_Unlock,
		Menu_More: Menu_More,
		Navigate_Back: Navigate_Back,
		Navigate_Forward: Navigate_Forward,
		OK: OK,
		Object_Update_Active: Object_Update_Active,
		Object_Update_Cancelled: Object_Update_Cancelled,
		Retry: Retry$1,
		Selection_Cancel: Selection_Cancel,
		Selection_Clear: Selection_Clear,
		Selection_ClearAll: Selection_ClearAll,
		Selection_ClearAllStates: Selection_ClearAllStates,
		Selection_Confirm: Selection_Confirm,
		Selection_Menu: Selection_Menu,
		Selection_SelectAll: Selection_SelectAll,
		Selection_SelectAlternative: Selection_SelectAlternative,
		Selection_SelectExcluded: Selection_SelectExcluded,
		Selection_SelectPossible: Selection_SelectPossible,
		Visualization_Incomplete: Visualization_Incomplete,
		Visualization_Incomplete_Dimensions: Visualization_Incomplete_Dimensions,
		Visualization_Incomplete_Measures: Visualization_Incomplete_Measures,
		Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
		Visualization_Invalid_Measure: Visualization_Invalid_Measure,
		Visualization_LayoutError: Visualization_LayoutError,
		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
	};

	function appLocaleFn(language) {
	  const l = locale({
	    initial: language
	  });
	  Object.keys(all).forEach(key => {
	    l.translator.add(all[key]);
	  });
	  return {
	    translator: l.translator
	  };
	}

	/**
	 * Utility functions
	 */

	var util = {};

	util.isObject = function isObject(arg) {
	  return typeof arg === 'object' && arg !== null;
	};

	util.isNumber = function isNumber(arg) {
	  return typeof arg === 'number';
	};

	util.isUndefined = function isUndefined(arg) {
	  return arg === void 0;
	};

	util.isFunction = function isFunction(arg){
	  return typeof arg === 'function';
	};


	/**
	 * EventEmitter class
	 */

	function EventEmitter() {
	  EventEmitter.init.call(this);
	}
	var nodeEventEmitter = EventEmitter;

	// Backwards-compat with node 0.10.x
	EventEmitter.EventEmitter = EventEmitter;

	EventEmitter.prototype._events = undefined;
	EventEmitter.prototype._maxListeners = undefined;

	// By default EventEmitters will print a warning if more than 10 listeners are
	// added to it. This is a useful default which helps finding memory leaks.
	EventEmitter.defaultMaxListeners = 10;

	EventEmitter.init = function() {
	  this._events = this._events || {};
	  this._maxListeners = this._maxListeners || undefined;
	};

	// Obviously not all Emitters should be limited to 10. This function allows
	// that to be increased. Set to zero for unlimited.
	EventEmitter.prototype.setMaxListeners = function(n) {
	  if (!util.isNumber(n) || n < 0 || isNaN(n))
	    throw TypeError('n must be a positive number');
	  this._maxListeners = n;
	  return this;
	};

	EventEmitter.prototype.emit = function(type) {
	  var er, handler, len, args, i, listeners;

	  if (!this._events)
	    this._events = {};

	  // If there is no 'error' event listener then throw.
	  if (type === 'error' && !this._events.error) {
	    er = arguments[1];
	    if (er instanceof Error) {
	      throw er; // Unhandled 'error' event
	    } else {
	      throw Error('Uncaught, unspecified "error" event.');
	    }
	  }

	  handler = this._events[type];

	  if (util.isUndefined(handler))
	    return false;

	  if (util.isFunction(handler)) {
	    switch (arguments.length) {
	      // fast cases
	      case 1:
	        handler.call(this);
	        break;
	      case 2:
	        handler.call(this, arguments[1]);
	        break;
	      case 3:
	        handler.call(this, arguments[1], arguments[2]);
	        break;
	      // slower
	      default:
	        len = arguments.length;
	        args = new Array(len - 1);
	        for (i = 1; i < len; i++)
	          args[i - 1] = arguments[i];
	        handler.apply(this, args);
	    }
	  } else if (util.isObject(handler)) {
	    len = arguments.length;
	    args = new Array(len - 1);
	    for (i = 1; i < len; i++)
	      args[i - 1] = arguments[i];

	    listeners = handler.slice();
	    len = listeners.length;
	    for (i = 0; i < len; i++)
	      listeners[i].apply(this, args);
	  }

	  return true;
	};

	EventEmitter.prototype.addListener = function(type, listener) {
	  var m;

	  if (!util.isFunction(listener))
	    throw TypeError('listener must be a function');

	  if (!this._events)
	    this._events = {};

	  // To avoid recursion in the case that type === "newListener"! Before
	  // adding it to the listeners, first emit "newListener".
	  if (this._events.newListener)
	    this.emit('newListener', type,
	              util.isFunction(listener.listener) ?
	              listener.listener : listener);

	  if (!this._events[type])
	    // Optimize the case of one listener. Don't need the extra array object.
	    this._events[type] = listener;
	  else if (util.isObject(this._events[type]))
	    // If we've already got an array, just append.
	    this._events[type].push(listener);
	  else
	    // Adding the second element, need to change to array.
	    this._events[type] = [this._events[type], listener];

	  // Check for listener leak
	  if (util.isObject(this._events[type]) && !this._events[type].warned) {
	    var m;
	    if (!util.isUndefined(this._maxListeners)) {
	      m = this._maxListeners;
	    } else {
	      m = EventEmitter.defaultMaxListeners;
	    }

	    if (m && m > 0 && this._events[type].length > m) {
	      this._events[type].warned = true;

	      if (util.isFunction(console.error)) {
	        console.error('(node) warning: possible EventEmitter memory ' +
	                      'leak detected. %d listeners added. ' +
	                      'Use emitter.setMaxListeners() to increase limit.',
	                      this._events[type].length);
	      }
	      if (util.isFunction(console.trace))
	        console.trace();
	    }
	  }

	  return this;
	};

	EventEmitter.prototype.on = EventEmitter.prototype.addListener;

	EventEmitter.prototype.once = function(type, listener) {
	  if (!util.isFunction(listener))
	    throw TypeError('listener must be a function');

	  var fired = false;

	  function g() {
	    this.removeListener(type, g);

	    if (!fired) {
	      fired = true;
	      listener.apply(this, arguments);
	    }
	  }

	  g.listener = listener;
	  this.on(type, g);

	  return this;
	};

	// emits a 'removeListener' event iff the listener was removed
	EventEmitter.prototype.removeListener = function(type, listener) {
	  var list, position, length, i;

	  if (!util.isFunction(listener))
	    throw TypeError('listener must be a function');

	  if (!this._events || !this._events[type])
	    return this;

	  list = this._events[type];
	  length = list.length;
	  position = -1;

	  if (list === listener ||
	      (util.isFunction(list.listener) && list.listener === listener)) {
	    delete this._events[type];
	    if (this._events.removeListener)
	      this.emit('removeListener', type, listener);

	  } else if (util.isObject(list)) {
	    for (i = length; i-- > 0;) {
	      if (list[i] === listener ||
	          (list[i].listener && list[i].listener === listener)) {
	        position = i;
	        break;
	      }
	    }

	    if (position < 0)
	      return this;

	    if (list.length === 1) {
	      list.length = 0;
	      delete this._events[type];
	    } else {
	      list.splice(position, 1);
	    }

	    if (this._events.removeListener)
	      this.emit('removeListener', type, listener);
	  }

	  return this;
	};

	EventEmitter.prototype.removeAllListeners = function(type) {
	  var key, listeners;

	  if (!this._events)
	    return this;

	  // not listening for removeListener, no need to emit
	  if (!this._events.removeListener) {
	    if (arguments.length === 0)
	      this._events = {};
	    else if (this._events[type])
	      delete this._events[type];
	    return this;
	  }

	  // emit removeListener for all listeners on all events
	  if (arguments.length === 0) {
	    for (key in this._events) {
	      if (key === 'removeListener') continue;
	      this.removeAllListeners(key);
	    }
	    this.removeAllListeners('removeListener');
	    this._events = {};
	    return this;
	  }

	  listeners = this._events[type];

	  if (util.isFunction(listeners)) {
	    this.removeListener(type, listeners);
	  } else if (Array.isArray(listeners)) {
	    // LIFO order
	    while (listeners.length)
	      this.removeListener(type, listeners[listeners.length - 1]);
	  }
	  delete this._events[type];

	  return this;
	};

	EventEmitter.prototype.listeners = function(type) {
	  var ret;
	  if (!this._events || !this._events[type])
	    ret = [];
	  else if (util.isFunction(this._events[type]))
	    ret = [this._events[type]];
	  else
	    ret = this._events[type].slice();
	  return ret;
	};

	EventEmitter.listenerCount = function(emitter, type) {
	  var ret;
	  if (!emitter._events || !emitter._events[type])
	    ret = 0;
	  else if (util.isFunction(emitter._events[type]))
	    ret = 1;
	  else
	    ret = emitter._events[type].length;
	  return ret;
	};

	var hasOwn = Object.prototype.hasOwnProperty;
	var toStr = Object.prototype.toString;
	var defineProperty$2 = Object.defineProperty;
	var gOPD = Object.getOwnPropertyDescriptor;

	var isArray$1 = function isArray(arr) {
		if (typeof Array.isArray === 'function') {
			return Array.isArray(arr);
		}

		return toStr.call(arr) === '[object Array]';
	};

	var isPlainObject$1 = function isPlainObject(obj) {
		if (!obj || toStr.call(obj) !== '[object Object]') {
			return false;
		}

		var hasOwnConstructor = hasOwn.call(obj, 'constructor');
		var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf');
		// Not own constructor property must be Object
		if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
			return false;
		}

		// Own properties are enumerated firstly, so to speed up,
		// if last one is own, then all properties are own.
		var key;
		for (key in obj) { /**/ }

		return typeof key === 'undefined' || hasOwn.call(obj, key);
	};

	// If name is '__proto__', and Object.defineProperty is available, define __proto__ as an own property on target
	var setProperty$1 = function setProperty(target, options) {
		if (defineProperty$2 && options.name === '__proto__') {
			defineProperty$2(target, options.name, {
				enumerable: true,
				configurable: true,
				value: options.newValue,
				writable: true
			});
		} else {
			target[options.name] = options.newValue;
		}
	};

	// Return undefined instead of __proto__ if '__proto__' is not an own property
	var getProperty = function getProperty(obj, name) {
		if (name === '__proto__') {
			if (!hasOwn.call(obj, name)) {
				return void 0;
			} else if (gOPD) {
				// In early versions of node, obj['__proto__'] is buggy when obj has
				// __proto__ as an own property. Object.getOwnPropertyDescriptor() works.
				return gOPD(obj, name).value;
			}
		}

		return obj[name];
	};

	var extend$2 = function extend() {
		var options, name, src, copy, copyIsArray, clone;
		var target = arguments[0];
		var i = 1;
		var length = arguments.length;
		var deep = false;

		// Handle a deep copy situation
		if (typeof target === 'boolean') {
			deep = target;
			target = arguments[1] || {};
			// skip the boolean and the target
			i = 2;
		}
		if (target == null || (typeof target !== 'object' && typeof target !== 'function')) {
			target = {};
		}

		for (; i < length; ++i) {
			options = arguments[i];
			// Only deal with non-null/undefined values
			if (options != null) {
				// Extend the base object
				for (name in options) {
					src = getProperty(target, name);
					copy = getProperty(options, name);

					// Prevent never-ending loop
					if (target !== copy) {
						// Recurse if we're merging plain objects or arrays
						if (deep && copy && (isPlainObject$1(copy) || (copyIsArray = isArray$1(copy)))) {
							if (copyIsArray) {
								copyIsArray = false;
								clone = src && isArray$1(src) ? src : [];
							} else {
								clone = src && isPlainObject$1(src) ? src : {};
							}

							// Never move original objects, clone them
							setProperty$1(target, { name: name, newValue: extend(deep, clone, copy) });

						// Don't bring in undefined values
						} else if (typeof copy !== 'undefined') {
							setProperty$1(target, { name: name, newValue: copy });
						}
					}
				}
			}
		}

		// Return the modified object
		return target;
	};

	var fontSize$1 = "13px";
	var fontFamily$1 = "'Source Sans Pro', 'Arial', 'sans-serif'";
	var backgroundColor = "transparent";
	var dataColors = {
		primaryColor: "#26a0a7",
		othersColor: "#a5a5a5",
		errorColor: "#ff4444",
		nullColor: "#d2d2d2"
	};
	var scales = [
		{
			name: "Sequential Gradient",
			translation: "properties.colorScheme.sequential",
			type: "gradient",
			propertyValue: "sg",
			scale: [
				"#26a0a7",
				"#c7ea8b"
			]
		},
		{
			name: "Sequential Classes",
			translation: "properties.colorScheme.sequentialC",
			propertyValue: "sc",
			type: "class",
			scale: [
				"#26a0a7",
				"#c7ea8b"
			]
		},
		{
			name: "Diverging gradient",
			translation: "properties.colorScheme.diverging",
			propertyValue: "dg",
			type: "gradient",
			scale: [
				"#26a0a7",
				"#c3ea8c",
				"#ec983d"
			]
		},
		{
			name: "Diverging Classes",
			translation: "properties.colorScheme.divergingC",
			propertyValue: "dc",
			type: "class",
			scale: [
				"#26a0a7",
				"#c3ea8c",
				"#ec983d"
			]
		}
	];
	var palettes = {
		data: [
			{
				name: "12 Colors",
				translation: "properties.colorNumberOfColors.12",
				propertyValue: "12",
				type: "pyramid",
				scale: [
					[
						"#26A0A7"
					],
					[
						"#26A0A7",
						"#EC983D"
					],
					[
						"#26A0A7",
						"#CBE989",
						"#EC983D"
					],
					[
						"#26A0A7",
						"#79D69F",
						"#F9EC86",
						"#EC983D"
					],
					[
						"#26A0A7",
						"#79D69F",
						"#CBE989",
						"#F9EC86",
						"#EC983D"
					],
					[
						"#26A0A7",
						"#65D3DA",
						"#79D69F",
						"#CBE989",
						"#F9EC86",
						"#EC983D"
					],
					[
						"#26A0A7",
						"#65D3DA",
						"#79D69F",
						"#CBE989",
						"#F9EC86",
						"#EC983D",
						"#D76C6C"
					],
					[
						"#26A0A7",
						"#65D3DA",
						"#79D69F",
						"#CBE989",
						"#F9EC86",
						"#FAD144",
						"#EC983D",
						"#D76C6C"
					],
					[
						"#138185",
						"#26A0A7",
						"#65D3DA",
						"#79D69F",
						"#CBE989",
						"#F9EC86",
						"#FAD144",
						"#EC983D",
						"#D76C6C"
					],
					[
						"#138185",
						"#26A0A7",
						"#65D3DA",
						"#79D69F",
						"#CBE989",
						"#EBF898",
						"#F9EC86",
						"#FAD144",
						"#EC983D",
						"#D76C6C"
					],
					[
						"#138185",
						"#26A0A7",
						"#65D3DA",
						"#79D69F",
						"#CBE989",
						"#EBF898",
						"#F9EC86",
						"#FAD144",
						"#EC983D",
						"#D76C6C",
						"#A54343"
					],
					[
						"#138185",
						"#26A0A7",
						"#65D3DA",
						"#79D69F",
						"#70BA6E",
						"#CBE989",
						"#EBF898",
						"#F9EC86",
						"#FAD144",
						"#EC983D",
						"#D76C6C",
						"#A54343"
					]
				]
			}
		],
		ui: [
			{
				name: "Palette",
				colors: [
					"#b0afae",
					"#7b7a78",
					"#a54343",
					"#d76c6c",
					"#ec983d",
					"#ecc43d",
					"#f9ec86",
					"#cbe989",
					"#70ba6e",
					"#578b60",
					"#79d69f",
					"#26a0a7",
					"#138185",
					"#65d3da",
					"#ffffff",
					"#000000"
				]
			}
		]
	};
	var baseRawJSON = {
		fontSize: fontSize$1,
		fontFamily: fontFamily$1,
		backgroundColor: backgroundColor,
		dataColors: dataColors,
		scales: scales,
		palettes: palettes
	};

	var _variables$1 = {
		"@B20": "#333333",
		"@B35": "#595959",
		"@B45": "#737373",
		"@B50": "#808080",
		"@B60": "#999999",
		"@B80": "#cccccc",
		"@B90": "#e6e6e6",
		"@B98": "#fbfbfb",
		"@B100": "#ffffff",
		"@H1": "24px",
		"@H2": "18px",
		"@H3": "14px",
		"@H4": "13px",
		"@H5": "12px",
		"@H6": "10px"
	};
	var type$1 = "light";
	var color$3 = "@B35";
	var lightRawJSON = {
		_variables: _variables$1,
		type: type$1,
		color: color$3
	};

	var _variables = {
		"@B20": "#333333",
		"@B35": "#595959",
		"@B45": "#737373",
		"@B50": "#808080",
		"@B60": "#999999",
		"@B80": "#cccccc",
		"@B90": "#e6e6e6",
		"@B98": "#fbfbfb",
		"@B100": "#ffffff",
		"@H1": "24px",
		"@H2": "18px",
		"@H3": "14px",
		"@H4": "13px",
		"@H5": "12px",
		"@H6": "10px"
	};
	var type = "dark";
	var color$2 = "@B98";
	var darkRawJSON = {
		_variables: _variables,
		type: type,
		color: color$2
	};

	function setTheme(t, resolve) {
	  const colorRawJSON = t.type === 'dark' ? darkRawJSON : lightRawJSON;
	  const root = extend$2(true, {}, baseRawJSON, colorRawJSON); // avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length

	  const rawThemeJSON = extend$2(true, {}, root, {
	    scales: null,
	    palettes: {
	      data: null,
	      ui: null
	    }
	  }, t);

	  if (!rawThemeJSON.palettes.data || !rawThemeJSON.palettes.data.length) {
	    rawThemeJSON.palettes.data = root.palettes.data;
	  }

	  if (!rawThemeJSON.palettes.ui || !rawThemeJSON.palettes.ui.length) {
	    rawThemeJSON.palettes.ui = root.palettes.ui;
	  }

	  if (!rawThemeJSON.scales || !rawThemeJSON.scales.length) {
	    rawThemeJSON.scales = root.scales;
	  }

	  const resolvedThemeJSON = resolve(rawThemeJSON);
	  return resolvedThemeJSON;
	}

	/**
	 * @interface Theme~ScalePalette
	 * @property {string} key
	 * @property {'gradient'|'class-pyramid'} type
	 * @property {string[]|Array<Array<string>>} colors
	 */

	/**
	 * @interface Theme~DataPalette
	 * @property {string} key
	 * @property {'pyramid'|'row'} type
	 * @property {string[]|Array<Array<string>>} colors
	 */

	/**
	 * @interface Theme~ColorPickerPalette
	 * @property {string} key
	 * @property {string[]} colors
	 */
	function theme$1(resolvedTheme) {
	  let uiPalette;
	  return {
	    dataScales() {
	      const pals = [];
	      resolvedTheme.scales.forEach(s => {
	        pals.push({
	          key: s.propertyValue,
	          name: s.name,
	          translation: s.translation,
	          scheme: true,
	          // indicate that this is scheme that can be used to generate more colors
	          type: s.type,
	          // gradient, class, pyramid, row
	          colors: s.scale
	        });
	      });
	      return pals;
	    },

	    dataPalettes() {
	      const pals = [];
	      resolvedTheme.palettes.data.forEach(s => {
	        pals.push({
	          key: s.propertyValue,
	          name: s.name,
	          translation: s.translation,
	          type: s.type,
	          colors: s.scale
	        });
	      });
	      return pals;
	    },

	    uiPalettes() {
	      const pals = [];
	      resolvedTheme.palettes.ui.forEach(s => {
	        pals.push({
	          key: 'ui',
	          name: s.name,
	          translation: s.translation,
	          type: 'row',
	          colors: s.colors
	        });
	      });
	      return pals;
	    },

	    dataColors() {
	      /** @interface Theme~DataColorSpecials */
	      return (
	        /** @lends Theme~DataColorSpecials */
	        {
	          /** @type {string} */
	          primary: resolvedTheme.dataColors.primaryColor,

	          /** @type {string} */
	          nil: resolvedTheme.dataColors.nullColor,

	          /** @type {string} */
	          others: resolvedTheme.dataColors.othersColor
	        }
	      );
	    },

	    uiColor(c) {
	      if (c.index < 0 || typeof c.index === 'undefined') {
	        return c.color;
	      }

	      if (typeof uiPalette === 'undefined') {
	        uiPalette = this.uiPalettes()[0] || false;
	      }

	      if (!uiPalette) {
	        return c.color;
	      }

	      if (typeof uiPalette.colors[c.index] === 'undefined') {
	        return c.color;
	      }

	      return uiPalette.colors[c.index];
	    }

	  };
	}

	function define(constructor, factory, prototype) {
	  constructor.prototype = factory.prototype = prototype;
	  prototype.constructor = constructor;
	}

	function extend$1(parent, definition) {
	  var prototype = Object.create(parent.prototype);
	  for (var key in definition) prototype[key] = definition[key];
	  return prototype;
	}

	function Color() {}

	var darker = 0.7;
	var brighter = 1 / darker;

	var reI = "\\s*([+-]?\\d+)\\s*",
	    reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
	    reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
	    reHex = /^#([0-9a-f]{3,8})$/,
	    reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
	    reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
	    reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
	    reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"),
	    reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"),
	    reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");

	var named = {
	  aliceblue: 0xf0f8ff,
	  antiquewhite: 0xfaebd7,
	  aqua: 0x00ffff,
	  aquamarine: 0x7fffd4,
	  azure: 0xf0ffff,
	  beige: 0xf5f5dc,
	  bisque: 0xffe4c4,
	  black: 0x000000,
	  blanchedalmond: 0xffebcd,
	  blue: 0x0000ff,
	  blueviolet: 0x8a2be2,
	  brown: 0xa52a2a,
	  burlywood: 0xdeb887,
	  cadetblue: 0x5f9ea0,
	  chartreuse: 0x7fff00,
	  chocolate: 0xd2691e,
	  coral: 0xff7f50,
	  cornflowerblue: 0x6495ed,
	  cornsilk: 0xfff8dc,
	  crimson: 0xdc143c,
	  cyan: 0x00ffff,
	  darkblue: 0x00008b,
	  darkcyan: 0x008b8b,
	  darkgoldenrod: 0xb8860b,
	  darkgray: 0xa9a9a9,
	  darkgreen: 0x006400,
	  darkgrey: 0xa9a9a9,
	  darkkhaki: 0xbdb76b,
	  darkmagenta: 0x8b008b,
	  darkolivegreen: 0x556b2f,
	  darkorange: 0xff8c00,
	  darkorchid: 0x9932cc,
	  darkred: 0x8b0000,
	  darksalmon: 0xe9967a,
	  darkseagreen: 0x8fbc8f,
	  darkslateblue: 0x483d8b,
	  darkslategray: 0x2f4f4f,
	  darkslategrey: 0x2f4f4f,
	  darkturquoise: 0x00ced1,
	  darkviolet: 0x9400d3,
	  deeppink: 0xff1493,
	  deepskyblue: 0x00bfff,
	  dimgray: 0x696969,
	  dimgrey: 0x696969,
	  dodgerblue: 0x1e90ff,
	  firebrick: 0xb22222,
	  floralwhite: 0xfffaf0,
	  forestgreen: 0x228b22,
	  fuchsia: 0xff00ff,
	  gainsboro: 0xdcdcdc,
	  ghostwhite: 0xf8f8ff,
	  gold: 0xffd700,
	  goldenrod: 0xdaa520,
	  gray: 0x808080,
	  green: 0x008000,
	  greenyellow: 0xadff2f,
	  grey: 0x808080,
	  honeydew: 0xf0fff0,
	  hotpink: 0xff69b4,
	  indianred: 0xcd5c5c,
	  indigo: 0x4b0082,
	  ivory: 0xfffff0,
	  khaki: 0xf0e68c,
	  lavender: 0xe6e6fa,
	  lavenderblush: 0xfff0f5,
	  lawngreen: 0x7cfc00,
	  lemonchiffon: 0xfffacd,
	  lightblue: 0xadd8e6,
	  lightcoral: 0xf08080,
	  lightcyan: 0xe0ffff,
	  lightgoldenrodyellow: 0xfafad2,
	  lightgray: 0xd3d3d3,
	  lightgreen: 0x90ee90,
	  lightgrey: 0xd3d3d3,
	  lightpink: 0xffb6c1,
	  lightsalmon: 0xffa07a,
	  lightseagreen: 0x20b2aa,
	  lightskyblue: 0x87cefa,
	  lightslategray: 0x778899,
	  lightslategrey: 0x778899,
	  lightsteelblue: 0xb0c4de,
	  lightyellow: 0xffffe0,
	  lime: 0x00ff00,
	  limegreen: 0x32cd32,
	  linen: 0xfaf0e6,
	  magenta: 0xff00ff,
	  maroon: 0x800000,
	  mediumaquamarine: 0x66cdaa,
	  mediumblue: 0x0000cd,
	  mediumorchid: 0xba55d3,
	  mediumpurple: 0x9370db,
	  mediumseagreen: 0x3cb371,
	  mediumslateblue: 0x7b68ee,
	  mediumspringgreen: 0x00fa9a,
	  mediumturquoise: 0x48d1cc,
	  mediumvioletred: 0xc71585,
	  midnightblue: 0x191970,
	  mintcream: 0xf5fffa,
	  mistyrose: 0xffe4e1,
	  moccasin: 0xffe4b5,
	  navajowhite: 0xffdead,
	  navy: 0x000080,
	  oldlace: 0xfdf5e6,
	  olive: 0x808000,
	  olivedrab: 0x6b8e23,
	  orange: 0xffa500,
	  orangered: 0xff4500,
	  orchid: 0xda70d6,
	  palegoldenrod: 0xeee8aa,
	  palegreen: 0x98fb98,
	  paleturquoise: 0xafeeee,
	  palevioletred: 0xdb7093,
	  papayawhip: 0xffefd5,
	  peachpuff: 0xffdab9,
	  peru: 0xcd853f,
	  pink: 0xffc0cb,
	  plum: 0xdda0dd,
	  powderblue: 0xb0e0e6,
	  purple: 0x800080,
	  rebeccapurple: 0x663399,
	  red: 0xff0000,
	  rosybrown: 0xbc8f8f,
	  royalblue: 0x4169e1,
	  saddlebrown: 0x8b4513,
	  salmon: 0xfa8072,
	  sandybrown: 0xf4a460,
	  seagreen: 0x2e8b57,
	  seashell: 0xfff5ee,
	  sienna: 0xa0522d,
	  silver: 0xc0c0c0,
	  skyblue: 0x87ceeb,
	  slateblue: 0x6a5acd,
	  slategray: 0x708090,
	  slategrey: 0x708090,
	  snow: 0xfffafa,
	  springgreen: 0x00ff7f,
	  steelblue: 0x4682b4,
	  tan: 0xd2b48c,
	  teal: 0x008080,
	  thistle: 0xd8bfd8,
	  tomato: 0xff6347,
	  turquoise: 0x40e0d0,
	  violet: 0xee82ee,
	  wheat: 0xf5deb3,
	  white: 0xffffff,
	  whitesmoke: 0xf5f5f5,
	  yellow: 0xffff00,
	  yellowgreen: 0x9acd32
	};

	define(Color, color$1, {
	  copy: function(channels) {
	    return Object.assign(new this.constructor, this, channels);
	  },
	  displayable: function() {
	    return this.rgb().displayable();
	  },
	  hex: color_formatHex, // Deprecated! Use color.formatHex.
	  formatHex: color_formatHex,
	  formatHsl: color_formatHsl,
	  formatRgb: color_formatRgb,
	  toString: color_formatRgb
	});

	function color_formatHex() {
	  return this.rgb().formatHex();
	}

	function color_formatHsl() {
	  return hslConvert(this).formatHsl();
	}

	function color_formatRgb() {
	  return this.rgb().formatRgb();
	}

	function color$1(format) {
	  var m, l;
	  format = (format + "").trim().toLowerCase();
	  return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
	      : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
	      : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
	      : l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
	      : null) // invalid hex
	      : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
	      : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
	      : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
	      : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
	      : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
	      : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
	      : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
	      : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
	      : null;
	}

	function rgbn(n) {
	  return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
	}

	function rgba(r, g, b, a) {
	  if (a <= 0) r = g = b = NaN;
	  return new Rgb(r, g, b, a);
	}

	function rgbConvert(o) {
	  if (!(o instanceof Color)) o = color$1(o);
	  if (!o) return new Rgb;
	  o = o.rgb();
	  return new Rgb(o.r, o.g, o.b, o.opacity);
	}

	function rgb(r, g, b, opacity) {
	  return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
	}

	function Rgb(r, g, b, opacity) {
	  this.r = +r;
	  this.g = +g;
	  this.b = +b;
	  this.opacity = +opacity;
	}

	define(Rgb, rgb, extend$1(Color, {
	  brighter: function(k) {
	    k = k == null ? brighter : Math.pow(brighter, k);
	    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
	  },
	  darker: function(k) {
	    k = k == null ? darker : Math.pow(darker, k);
	    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
	  },
	  rgb: function() {
	    return this;
	  },
	  displayable: function() {
	    return (-0.5 <= this.r && this.r < 255.5)
	        && (-0.5 <= this.g && this.g < 255.5)
	        && (-0.5 <= this.b && this.b < 255.5)
	        && (0 <= this.opacity && this.opacity <= 1);
	  },
	  hex: rgb_formatHex, // Deprecated! Use color.formatHex.
	  formatHex: rgb_formatHex,
	  formatRgb: rgb_formatRgb,
	  toString: rgb_formatRgb
	}));

	function rgb_formatHex() {
	  return "#" + hex(this.r) + hex(this.g) + hex(this.b);
	}

	function rgb_formatRgb() {
	  var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
	  return (a === 1 ? "rgb(" : "rgba(")
	      + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", "
	      + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", "
	      + Math.max(0, Math.min(255, Math.round(this.b) || 0))
	      + (a === 1 ? ")" : ", " + a + ")");
	}

	function hex(value) {
	  value = Math.max(0, Math.min(255, Math.round(value) || 0));
	  return (value < 16 ? "0" : "") + value.toString(16);
	}

	function hsla(h, s, l, a) {
	  if (a <= 0) h = s = l = NaN;
	  else if (l <= 0 || l >= 1) h = s = NaN;
	  else if (s <= 0) h = NaN;
	  return new Hsl(h, s, l, a);
	}

	function hslConvert(o) {
	  if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
	  if (!(o instanceof Color)) o = color$1(o);
	  if (!o) return new Hsl;
	  if (o instanceof Hsl) return o;
	  o = o.rgb();
	  var r = o.r / 255,
	      g = o.g / 255,
	      b = o.b / 255,
	      min = Math.min(r, g, b),
	      max = Math.max(r, g, b),
	      h = NaN,
	      s = max - min,
	      l = (max + min) / 2;
	  if (s) {
	    if (r === max) h = (g - b) / s + (g < b) * 6;
	    else if (g === max) h = (b - r) / s + 2;
	    else h = (r - g) / s + 4;
	    s /= l < 0.5 ? max + min : 2 - max - min;
	    h *= 60;
	  } else {
	    s = l > 0 && l < 1 ? 0 : h;
	  }
	  return new Hsl(h, s, l, o.opacity);
	}

	function hsl(h, s, l, opacity) {
	  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
	}

	function Hsl(h, s, l, opacity) {
	  this.h = +h;
	  this.s = +s;
	  this.l = +l;
	  this.opacity = +opacity;
	}

	define(Hsl, hsl, extend$1(Color, {
	  brighter: function(k) {
	    k = k == null ? brighter : Math.pow(brighter, k);
	    return new Hsl(this.h, this.s, this.l * k, this.opacity);
	  },
	  darker: function(k) {
	    k = k == null ? darker : Math.pow(darker, k);
	    return new Hsl(this.h, this.s, this.l * k, this.opacity);
	  },
	  rgb: function() {
	    var h = this.h % 360 + (this.h < 0) * 360,
	        s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
	        l = this.l,
	        m2 = l + (l < 0.5 ? l : 1 - l) * s,
	        m1 = 2 * l - m2;
	    return new Rgb(
	      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
	      hsl2rgb(h, m1, m2),
	      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
	      this.opacity
	    );
	  },
	  displayable: function() {
	    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
	        && (0 <= this.l && this.l <= 1)
	        && (0 <= this.opacity && this.opacity <= 1);
	  },
	  formatHsl: function() {
	    var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
	    return (a === 1 ? "hsl(" : "hsla(")
	        + (this.h || 0) + ", "
	        + (this.s || 0) * 100 + "%, "
	        + (this.l || 0) * 100 + "%"
	        + (a === 1 ? ")" : ", " + a + ")");
	  }
	}));

	/* From FvD 13.37, CSS Color Module Level 3 */
	function hsl2rgb(h, m1, m2) {
	  return (h < 60 ? m1 + (m2 - m1) * h / 60
	      : h < 180 ? m2
	      : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
	      : m1) * 255;
	}

	const radians = Math.PI / 180;
	const degrees = 180 / Math.PI;

	// https://observablehq.com/@mbostock/lab-and-rgb
	const K$1 = 18,
	    Xn = 0.96422,
	    Yn = 1,
	    Zn = 0.82521,
	    t0 = 4 / 29,
	    t1 = 6 / 29,
	    t2 = 3 * t1 * t1,
	    t3 = t1 * t1 * t1;

	function labConvert(o) {
	  if (o instanceof Lab) return new Lab(o.l, o.a, o.b, o.opacity);
	  if (o instanceof Hcl) return hcl2lab(o);
	  if (!(o instanceof Rgb)) o = rgbConvert(o);
	  var r = rgb2lrgb(o.r),
	      g = rgb2lrgb(o.g),
	      b = rgb2lrgb(o.b),
	      y = xyz2lab((0.2225045 * r + 0.7168786 * g + 0.0606169 * b) / Yn), x, z;
	  if (r === g && g === b) x = z = y; else {
	    x = xyz2lab((0.4360747 * r + 0.3850649 * g + 0.1430804 * b) / Xn);
	    z = xyz2lab((0.0139322 * r + 0.0971045 * g + 0.7141733 * b) / Zn);
	  }
	  return new Lab(116 * y - 16, 500 * (x - y), 200 * (y - z), o.opacity);
	}

	function lab(l, a, b, opacity) {
	  return arguments.length === 1 ? labConvert(l) : new Lab(l, a, b, opacity == null ? 1 : opacity);
	}

	function Lab(l, a, b, opacity) {
	  this.l = +l;
	  this.a = +a;
	  this.b = +b;
	  this.opacity = +opacity;
	}

	define(Lab, lab, extend$1(Color, {
	  brighter: function(k) {
	    return new Lab(this.l + K$1 * (k == null ? 1 : k), this.a, this.b, this.opacity);
	  },
	  darker: function(k) {
	    return new Lab(this.l - K$1 * (k == null ? 1 : k), this.a, this.b, this.opacity);
	  },
	  rgb: function() {
	    var y = (this.l + 16) / 116,
	        x = isNaN(this.a) ? y : y + this.a / 500,
	        z = isNaN(this.b) ? y : y - this.b / 200;
	    x = Xn * lab2xyz(x);
	    y = Yn * lab2xyz(y);
	    z = Zn * lab2xyz(z);
	    return new Rgb(
	      lrgb2rgb( 3.1338561 * x - 1.6168667 * y - 0.4906146 * z),
	      lrgb2rgb(-0.9787684 * x + 1.9161415 * y + 0.0334540 * z),
	      lrgb2rgb( 0.0719453 * x - 0.2289914 * y + 1.4052427 * z),
	      this.opacity
	    );
	  }
	}));

	function xyz2lab(t) {
	  return t > t3 ? Math.pow(t, 1 / 3) : t / t2 + t0;
	}

	function lab2xyz(t) {
	  return t > t1 ? t * t * t : t2 * (t - t0);
	}

	function lrgb2rgb(x) {
	  return 255 * (x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
	}

	function rgb2lrgb(x) {
	  return (x /= 255) <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
	}

	function hclConvert(o) {
	  if (o instanceof Hcl) return new Hcl(o.h, o.c, o.l, o.opacity);
	  if (!(o instanceof Lab)) o = labConvert(o);
	  if (o.a === 0 && o.b === 0) return new Hcl(NaN, 0 < o.l && o.l < 100 ? 0 : NaN, o.l, o.opacity);
	  var h = Math.atan2(o.b, o.a) * degrees;
	  return new Hcl(h < 0 ? h + 360 : h, Math.sqrt(o.a * o.a + o.b * o.b), o.l, o.opacity);
	}

	function hcl(h, c, l, opacity) {
	  return arguments.length === 1 ? hclConvert(h) : new Hcl(h, c, l, opacity == null ? 1 : opacity);
	}

	function Hcl(h, c, l, opacity) {
	  this.h = +h;
	  this.c = +c;
	  this.l = +l;
	  this.opacity = +opacity;
	}

	function hcl2lab(o) {
	  if (isNaN(o.h)) return new Lab(o.l, 0, 0, o.opacity);
	  var h = o.h * radians;
	  return new Lab(o.l, Math.cos(h) * o.c, Math.sin(h) * o.c, o.opacity);
	}

	define(Hcl, hcl, extend$1(Color, {
	  brighter: function(k) {
	    return new Hcl(this.h, this.c, this.l + K$1 * (k == null ? 1 : k), this.opacity);
	  },
	  darker: function(k) {
	    return new Hcl(this.h, this.c, this.l - K$1 * (k == null ? 1 : k), this.opacity);
	  },
	  rgb: function() {
	    return hcl2lab(this).rgb();
	  }
	}));

	var A$2 = -0.14861,
	    B$3 = +1.78277,
	    C$2 = -0.29227,
	    D$3 = -0.90649,
	    E$3 = +1.97294,
	    ED = E$3 * D$3,
	    EB = E$3 * B$3,
	    BC_DA = B$3 * C$2 - D$3 * A$2;

	function cubehelixConvert(o) {
	  if (o instanceof Cubehelix) return new Cubehelix(o.h, o.s, o.l, o.opacity);
	  if (!(o instanceof Rgb)) o = rgbConvert(o);
	  var r = o.r / 255,
	      g = o.g / 255,
	      b = o.b / 255,
	      l = (BC_DA * b + ED * r - EB * g) / (BC_DA + ED - EB),
	      bl = b - l,
	      k = (E$3 * (g - l) - C$2 * bl) / D$3,
	      s = Math.sqrt(k * k + bl * bl) / (E$3 * l * (1 - l)), // NaN if l=0 or l=1
	      h = s ? Math.atan2(k, bl) * degrees - 120 : NaN;
	  return new Cubehelix(h < 0 ? h + 360 : h, s, l, o.opacity);
	}

	function cubehelix(h, s, l, opacity) {
	  return arguments.length === 1 ? cubehelixConvert(h) : new Cubehelix(h, s, l, opacity == null ? 1 : opacity);
	}

	function Cubehelix(h, s, l, opacity) {
	  this.h = +h;
	  this.s = +s;
	  this.l = +l;
	  this.opacity = +opacity;
	}

	define(Cubehelix, cubehelix, extend$1(Color, {
	  brighter: function(k) {
	    k = k == null ? brighter : Math.pow(brighter, k);
	    return new Cubehelix(this.h, this.s, this.l * k, this.opacity);
	  },
	  darker: function(k) {
	    k = k == null ? darker : Math.pow(darker, k);
	    return new Cubehelix(this.h, this.s, this.l * k, this.opacity);
	  },
	  rgb: function() {
	    var h = isNaN(this.h) ? 0 : (this.h + 120) * radians,
	        l = +this.l,
	        a = isNaN(this.s) ? 0 : this.s * l * (1 - l),
	        cosh = Math.cos(h),
	        sinh = Math.sin(h);
	    return new Rgb(
	      255 * (l + a * (A$2 * cosh + B$3 * sinh)),
	      255 * (l + a * (C$2 * cosh + D$3 * sinh)),
	      255 * (l + a * (E$3 * cosh)),
	      this.opacity
	    );
	  }
	}));

	/**
	 * Gets this mapping between the scaled value and the color parts
	 * @ignore
	 * @param {Number} scaledValue - A value between 0 and 1 representing a value in the data scaled between the max and min boundaries of the data. Values are clamped to 0 and 1.
	 * @param {Number} numEdges - Number of parts that makes up this scale
	 */

	function limitFunction(scaledValue, numParts) {
	  /*
	   *	Color-Scale doesn't calculate exact color blends based of the scaled value. It instead shifts the value inwards to achieve
	   *	a better color representation at the edges. Primarily this is done to allow setting custom limits to where each color begins
	   *	and ends. If a color begins and ends at 1, it should not be visible. The simplest way to achive this is to remove 1 and 0
	   *	from the possible numbers that can be used. Colors that are not equal to 1 or 0 should not be affected.
	   */
	  // The following is done to keep the scaled value above 0 and below 1. This shifts values that hits an exact boundary upwards.
	  // eslint-disable-next-line no-param-reassign
	  scaledValue = Math.min(Math.max(scaledValue, 0.000000000001), 0.999999999999);
	  return numParts - scaledValue * numParts;
	}

	function getLevel(scale, level) {
	  return Math.min(level || scale.startLevel, scale.colorParts.length - 1);
	}

	function blend(c1, c2, t) {
	  const r = Math.floor(c1.r + (c2.r - c1.r) * t);
	  const g = Math.floor(c1.g + (c2.g - c1.g) * t);
	  const b = Math.floor(c1.b + (c2.b - c1.b) * t);
	  const a = Math.floor(c1.opacity + (c2.opacity - c1.opacity) * t);
	  return rgb(r, g, b, a);
	}

	class ColorScale {
	  constructor(nanColor) {
	    this.colorParts = [];
	    this.startLevel = 0;
	    this.max = 1;
	    this.min = 0;
	    this.nanColor = color$1(nanColor);
	  }
	  /**
	   * Adds a part to this color scale. The input colors span one part of the gradient, colors between them are interpolated. Input two equal colors for a solid scale part.
	   * @ignore
	   * @param {String|Number} color1 - First color to be used, in formats defined by Color
	   * @param {String|Number} color2 - Second color to be used, in formats defined by Color
	   * @param {Number} level - Which level of the color pyramid to add this part to.
	   */


	  addColorPart(color1, color2, level) {
	    // eslint-disable-next-line no-param-reassign
	    level = level || 0;
	    this.startLevel = Math.max(level, this.startLevel);

	    if (!this.colorParts[level]) {
	      this.colorParts[level] = [];
	    }

	    this.colorParts[level].push([color$1(color1), color$1(color2)]);
	  }
	  /**
	   * Gets the color which represents the input value
	   * @ignore
	   * @param {Number} scaledValue - A value between 0 and 1 representing a value in the data scaled between the max and min boundaries of the data. Values are clamped to 0 and 1.
	   */


	  getColor(value, level) {
	    const scaledValue = value - this.min;

	    if (Number.isNaN(+value) || Number.isNaN(+scaledValue)) {
	      return this.nanColor;
	    } // eslint-disable-next-line no-param-reassign


	    level = getLevel(this, level);
	    const k = limitFunction(scaledValue, this.colorParts[level].length);
	    let f = Math.floor(k);
	    f = f === k ? f - 1 : f; // To fulfill equal or greater than: 329-<330

	    const part = this.colorParts[level][f];
	    const c1 = part[0];
	    const c2 = part[1]; // For absolute edges we return the colors at the limit

	    if (value === this.min) {
	      return c2;
	    }

	    if (value === this.max) {
	      return c1;
	    }

	    const t = k - f;
	    const uc = blend(c1, c2, t);
	    return uc;
	  }

	}

	/* Calculates a value that expands from 0.5 out to 0 and 1
	 * Ex for size 8:
	 * current -> percent
	 * 0 -> 0.0625	4 -> 0.3125
	 * 1 -> 0.125	5 -> 0.375
	 * 2 -> 0.1875	6 -> 0.4375
	 * 3 -> 0.25		7 -> 0.5
	 */

	function getScaleValue(value, current, size) {
	  const percent = 0.25 + (current + 1) / size * 0.25;
	  const min = 0.5 - percent;
	  const max = 0.5 + percent;
	  const span = max - min;
	  return min + value / 1 * span;
	}

	function setupColorScale(colors, nanColor, gradient) {
	  const newColors = [];
	  const cs = new ColorScale(nanColor);
	  newColors.push(colors[0]);

	  if (!gradient) {
	    newColors.push(colors[0]);
	  }

	  let i = 1;

	  for (; i < colors.length - 1; i++) {
	    newColors.push(colors[i]);
	    newColors.push(colors[i]);
	  }

	  newColors.push(colors[i]);

	  if (!gradient) {
	    newColors.push(colors[i]);
	  }

	  for (let j = 0; j < newColors.length; j += 2) {
	    cs.addColorPart(newColors[j], newColors[j + 1]);
	  }

	  return cs;
	}

	function generateLevel(scale, current, size) {
	  const level = [];

	  for (let j = 0; j < current + 1; j++) {
	    let c;

	    switch (current) {
	      case 0:
	        c = scale.getColor(0.5);
	        break;

	      default:
	        {
	          const scaled = getScaleValue(1 / current * j, current, size);
	          c = scale.getColor(scaled);
	          break;
	        }
	    }

	    level.push(color$1(c).formatHex());
	  }

	  return level;
	}
	/**
	 * Generates a pyramid of colors from a minimum of 2 colors
	 *
	 * @ignore
	 * @internal
	 * @param {Array} colors an array of colors to generate from
	 * @param {number} size the integer size of the base of the pyramid
	 * @returns {Array} A 2 dimensional array containing the levels of the color pyramid
	 */


	function createPyramidFromColors(colors, size, nanColor) {
	  const gradientScale = setupColorScale(colors, nanColor, true);
	  const baseLevel = generateLevel(gradientScale, size - 1, size);
	  const scale = setupColorScale(baseLevel, nanColor, false);
	  const pyramid = [null];

	  for (let i = 0; i < size; i++) {
	    pyramid.push(generateLevel(scale, i, size));
	  }

	  return pyramid;
	}

	function generateOrdinalScales(scalesDef) {
	  let nanColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#d2d2d2';
	  scalesDef.forEach(def => {
	    if (def.type === 'class') {
	      // generate pyramid
	      const pyramid = createPyramidFromColors(def.scale, Math.max(def.scale.length, 7), nanColor); // eslint-disable-next-line no-param-reassign

	      def.scale = pyramid; // eslint-disable-next-line no-param-reassign

	      def.type = 'class-pyramid';
	    }
	  });
	}

	/**
	 * Creates the following array of paths
	 * object.barChart - legend.title - fontSize
	 * object - legend.title - fontSize
	 * legend.title - fontSize
	 * object.barChart - legend - fontSize
	 * object - legend - fontSize
	 * legend - fontSize
	 * object.barChart - fontSize
	 * object - fontSize
	 * fontSize
	 * @ignore
	 */

	function constructPaths(pathSteps, baseSteps) {
	  const ret = [];
	  let localBaseSteps;
	  let baseLength;

	  if (pathSteps) {
	    let pathLength = pathSteps.length;

	    while (pathLength >= 0) {
	      localBaseSteps = baseSteps.slice();
	      baseLength = localBaseSteps.length;

	      while (baseLength >= 0) {
	        ret.push(localBaseSteps.concat(pathSteps));
	        localBaseSteps.pop();
	        baseLength--;
	      }

	      pathSteps.pop();
	      pathLength--;
	    }
	  } else {
	    localBaseSteps = baseSteps.slice();
	    baseLength = localBaseSteps.length;

	    while (baseLength >= 0) {
	      ret.push(localBaseSteps.concat());
	      localBaseSteps.pop();
	      baseLength--;
	    }
	  }

	  return ret;
	}

	function getObject$1(root, steps) {
	  let obj = root;

	  for (let i = 0; i < steps.length; i++) {
	    if (obj[steps[i]]) {
	      obj = obj[steps[i]];
	    } else {
	      return undefined;
	    }
	  }

	  return obj;
	}

	function searchPathArray(pathArray, attribute, theme) {
	  const attributeArray = attribute.split('.');

	  for (let i = 0; i < pathArray.length; i++) {
	    const restult = getObject$1(theme, [...pathArray[i], ...attributeArray]);
	    if (restult !== undefined) return restult;
	  }

	  return undefined;
	}

	function searchValue(path, attribute, baseSteps, component) {
	  let pathArray;

	  if (path === '') {
	    pathArray = constructPaths(null, baseSteps);
	  } else {
	    const steps = path.split('.');
	    pathArray = constructPaths(steps, baseSteps);
	  }

	  return searchPathArray(pathArray, attribute, component);
	}

	function styleResolver(basePath, themeJSON) {
	  const basePathSteps = basePath.split('.');
	  const api = {
	    /**
	     *
	     * Get the value of a style attribute, starting in the given base path + path
	     * Ex: Base path: "object.barChart", Path: "legend.title", Attribute: "fontSize"
	     * Will search in, and fall back to:
	     * object.barChart - legend.title - fontSize
	     * object - legend.title - fontSize
	     * legend.title - fontSize
	     * object.barChart - legend - fontSize
	     * object - legend - fontSize
	     * legend - fontSize
	     * object.barChart - fontSize
	     * object - fontSize
	     * fontSize
	     * When attributes separated by dots is provided, they are required in the theme JSON file
	     * Ex. Base path: "object" , Path: "legend", ", Attribute: "title.fontSize"
	     * title: {fontSize: ...} must be matched and the rest is the same as above
	     * If you want a exact match, you can use `getStyle('object', '', 'legend.title.fontSize');`
	     * @ignore
	     *
	     * @param {string} component String of properties separated by dots to search in
	     * @param {string} attribute Name of the style attribute
	     * @returns {string|undefined} The style value of the resolved path, undefined if not found
	     */
	    getStyle(component, attribute) {
	      // TODO - object overrides
	      // TODO - feature flag on font-family?
	      // TODO - caching
	      const baseSteps = basePathSteps.concat();
	      const result = searchValue(component, attribute, baseSteps, themeJSON); // TODO - support functions

	      return result;
	    }

	  };
	  return api;
	}
	/**
	 * Iterate the object tree and resolve variables and functions.
	 * @ignore
	 * @param {Object} - objTree
	 * @param {Object} - variables
	 */

	function resolveVariables(objTree, variables) {
	  Object.keys(objTree).forEach(key => {
	    if (typeof objTree[key] === 'object' && objTree[key] !== null) {
	      resolveVariables(objTree[key], variables);
	    } else if (typeof objTree[key] === 'string' && objTree[key].charAt(0) === '@') {
	      // Resolve variables
	      objTree[key] = variables[objTree[key]]; // eslint-disable-line no-param-reassign
	    }
	  });
	}

	styleResolver.resolveRawTheme = raw => {
	  // TODO - validate format
	  const c = extend$2(true, {}, raw);
	  resolveVariables(c, c._variables); // eslint-disable-line
	  // generate class-pyramid

	  if (c.scales) {
	    generateOrdinalScales(c.scales, c.dataColors && c.dataColors.nullColor);
	  }

	  return c;
	};

	function luminance(colStr) {
	  const c = color$1(colStr).rgb();
	  const {
	    r,
	    g,
	    b
	  } = c; // https://www.w3.org/TR/WCAG20/#relativeluminancedef

	  const [sR, sG, sB] = [r, g, b].map(v => v / 255);
	  const [R, G, B] = [sR, sG, sB].map(v => v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
	  return +(0.2126 * R + 0.7152 * G + 0.0722 * B).toFixed(5);
	}

	// https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef
	function contrast(L1, L2) {
	  return +((Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05)).toFixed(5);
	}

	/* eslint no-cond-assign: 0 */
	const MAX_SIZE = 1000;
	function colorFn() {
	  let colors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['#333333', '#ffffff'];
	  let cache = {};
	  let n = 0;
	  const luminances = colors.map(luminance);
	  return {
	    getBestContrastColor(colorString) {
	      if (!cache[colorString]) {
	        if (n > MAX_SIZE) {
	          cache = {};
	          n = 0;
	        }

	        const L = luminance(colorString);
	        const contrasts = luminances.map(lum => contrast(L, lum));
	        const c = colors[contrasts.indexOf(Math.max(...contrasts))];
	        cache[colorString] = c;
	        n++;
	      }

	      return cache[colorString];
	    }

	  };
	}

	function theme() {
	  let resolvedThemeJSON;
	  let styleResolverInstanceCache = {};
	  let paletteResolver;
	  let contraster;
	  /**
	   * @class
	   * @alias Theme
	   */

	  const externalAPI =
	  /** @lends Theme# */
	  {
	    /**
	     * @returns {Theme~ScalePalette[]}
	     */
	    getDataColorScales() {
	      return paletteResolver.dataScales();
	    },

	    /**
	     * @returns {Theme~DataPalette[]}
	     */
	    getDataColorPalettes() {
	      return paletteResolver.dataPalettes();
	    },

	    /**
	     * @returns {Theme~ColorPickerPalette[]}
	     */
	    getDataColorPickerPalettes() {
	      return paletteResolver.uiPalettes();
	    },

	    /**
	     * @returns {Theme~DataColorSpecials}
	     */
	    getDataColorSpecials() {
	      return paletteResolver.dataColors();
	    },

	    /**
	     * Resolve a color object using the color picker palette from the provided JSON theme.
	     * @param {object} c
	     * @param {number=} c.index
	     * @param {string=} c.color
	     * @returns {string} The resolved color.
	     *
	     * @example
	     * theme.getColorPickerColor({ index: 1 });
	     * theme.getColorPickerColor({ color: 'red' });
	     */
	    getColorPickerColor() {
	      return paletteResolver.uiColor(...arguments);
	    },

	    /**
	     * Get the best contrasting color against the specified `color`.
	     * This is typically used to find a suitable text color for a label placed on an arbitrarily colored background.
	     *
	     * The returned colors are derived from the theme.
	     * @param {string} color - A color to measure the contrast against
	     * @returns {string} - The color that has the best contrast against the specified `color`.
	     * @example
	     * theme.getContrastingColorTo('#400');
	     */
	    getContrastingColorTo(color) {
	      return contraster.getBestContrastColor(color);
	    },

	    /**
	     * Get the value of a style attribute in the theme
	     * by searching in the theme's JSON structure.
	     * The search starts at the specified base path
	     * and continues upwards until the value is found.
	     * If possible it will get the attribute's value using the given path.
	     * When attributes separated by dots are provided, such as 'hover.color',
	     * they are required in the theme JSON file
	     *
	     * @param {string} basePath - Base path in the theme's JSON structure to start the search in (specified as a name path separated by dots).
	     * @param {string} path - Expected path for the attribute (specified as a name path separated by dots).
	     * @param {string} attribute - Name of the style attribute. (specified as a name attribute separated by dots).
	     * @returns {string|undefined} The style value or undefined if not found
	     *
	     * @example
	     * theme.getStyle('object', 'title.main', 'fontSize');
	     * theme.getStyle('object', 'title', 'main.fontSize');
	     * theme.getStyle('object', '', 'title.main.fontSize');
	     * theme.getStyle('', '', 'fontSize');
	     */
	    getStyle(basePath, path, attribute) {
	      if (!styleResolverInstanceCache[basePath]) {
	        styleResolverInstanceCache[basePath] = styleResolver(basePath, resolvedThemeJSON);
	      }

	      return styleResolverInstanceCache[basePath].getStyle(path, attribute);
	    }

	  };
	  const internalAPI = {
	    /**
	     * @private
	     * @param {object} t Raw JSON theme
	     */
	    setTheme(t, name) {
	      resolvedThemeJSON = setTheme(t, styleResolver.resolveRawTheme);
	      styleResolverInstanceCache = {};
	      paletteResolver = theme$1(resolvedThemeJSON); // try to determine if the theme color is light or dark

	      const textColor = externalAPI.getStyle('', '', 'color');
	      const textColorLuminance = luminance(textColor); // if it appears dark, create an inverse that is light and vice versa

	      const inverseTextColor = textColorLuminance < 0.2 ? '#ffffff' : '#333333'; // instantiate a contraster that uses those two colors when determining the best contrast for an arbitrary color

	      contraster = colorFn([textColor, inverseTextColor]);
	      externalAPI.emit('changed');

	      externalAPI.name = () => name;
	    }

	  };
	  Object.keys(nodeEventEmitter.prototype).forEach(key => {
	    externalAPI[key] = nodeEventEmitter.prototype[key];
	  });
	  nodeEventEmitter.init(externalAPI);
	  internalAPI.setTheme({}, 'light');
	  return {
	    externalAPI,
	    internalAPI
	  };
	}

	/* eslint no-underscore-dangle:0 */

	const timed = (t, v) => new Promise(resolve => {
	  setTimeout(() => resolve(v), t);
	});

	const LOAD_THEME_TIMEOUT = 5000;
	function appTheme() {
	  let {
	    themes = [],
	    root
	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  const wrappedTheme = theme();

	  const setTheme = async themeId => {
	    const found = themes.filter(t => t.id === themeId)[0];
	    let muiTheme = themeId === 'dark' ? 'dark' : 'light';

	    if (found && found.load) {
	      try {
	        const raw = await Promise.race([found.load(), timed(LOAD_THEME_TIMEOUT, {
	          __timedOut: true
	        })]);

	        if (raw.__timedOut) {
	          if (true) {
	            console.warn("Timeout when loading theme '".concat(themeId, "'")); // eslint-disable-line no-console
	          }
	        } else {
	          muiTheme = raw.type === 'dark' ? 'dark' : 'light';
	          wrappedTheme.internalAPI.setTheme(raw, themeId);
	          root.setMuiThemeName(muiTheme);
	        }
	      } catch (e) {
	        {
	          console.error(e); // eslint-disable-line no-console
	        }
	      }
	    } else {
	      wrappedTheme.internalAPI.setTheme({
	        type: muiTheme
	      }, themeId);
	      root.setMuiThemeName(muiTheme);
	    }
	  };

	  return {
	    setTheme,
	    externalAPI: wrappedTheme.externalAPI
	  };
	}

	// from https://patrickhlauke.github.io/touch/touchscreen-detection/ (MIT License)
	function detectTouchscreen() {
	  let result = false;

	  if (window.PointerEvent && 'maxTouchPoints' in navigator) {
	    // if Pointer Events are supported, just check maxTouchPoints
	    if (navigator.maxTouchPoints > 0) {
	      result = true;
	    }
	  } else if (window.matchMedia && window.matchMedia('(any-pointer:coarse)').matches) {
	    // check for any-pointer:coarse which mostly means touchscreen
	    result = true;
	  } else if (window.TouchEvent || 'ontouchstart' in window) {
	    // last resort - check for exposed touch events API / event handler
	    result = true;
	  }

	  return result;
	}

	function deviceTypeFn(deviceType) {
	  if (deviceType !== 'auto') {
	    return deviceType;
	  }

	  return detectTouchscreen() ? 'touch' : 'desktop';
	}

	var react = {exports: {}};

	var react_production_min = {};

	/*
	object-assign
	(c) Sindre Sorhus
	@license MIT
	*/
	/* eslint-disable no-unused-vars */
	var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols;
	var hasOwnProperty = Object.prototype.hasOwnProperty;
	var propIsEnumerable = Object.prototype.propertyIsEnumerable;

	function toObject(val) {
		if (val === null || val === undefined) {
			throw new TypeError('Object.assign cannot be called with null or undefined');
		}

		return Object(val);
	}

	function shouldUseNative() {
		try {
			if (!Object.assign) {
				return false;
			}

			// Detect buggy property enumeration order in older V8 versions.

			// https://bugs.chromium.org/p/v8/issues/detail?id=4118
			var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
			test1[5] = 'de';
			if (Object.getOwnPropertyNames(test1)[0] === '5') {
				return false;
			}

			// https://bugs.chromium.org/p/v8/issues/detail?id=3056
			var test2 = {};
			for (var i = 0; i < 10; i++) {
				test2['_' + String.fromCharCode(i)] = i;
			}
			var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
				return test2[n];
			});
			if (order2.join('') !== '0123456789') {
				return false;
			}

			// https://bugs.chromium.org/p/v8/issues/detail?id=3056
			var test3 = {};
			'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
				test3[letter] = letter;
			});
			if (Object.keys(Object.assign({}, test3)).join('') !==
					'abcdefghijklmnopqrst') {
				return false;
			}

			return true;
		} catch (err) {
			// We don't expect any of the above to throw, but better to be safe.
			return false;
		}
	}

	var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
		var from;
		var to = toObject(target);
		var symbols;

		for (var s = 1; s < arguments.length; s++) {
			from = Object(arguments[s]);

			for (var key in from) {
				if (hasOwnProperty.call(from, key)) {
					to[key] = from[key];
				}
			}

			if (getOwnPropertySymbols$1) {
				symbols = getOwnPropertySymbols$1(from);
				for (var i = 0; i < symbols.length; i++) {
					if (propIsEnumerable.call(from, symbols[i])) {
						to[symbols[i]] = from[symbols[i]];
					}
				}
			}
		}

		return to;
	};

	/** @license React v17.0.2
	 * react.production.min.js
	 *
	 * Copyright (c) Facebook, Inc. and its affiliates.
	 *
	 * This source code is licensed under the MIT license found in the
	 * LICENSE file in the root directory of this source tree.
	 */
	var l$1=objectAssign,n$1=60103,p$1=60106;react_production_min.Fragment=60107;react_production_min.StrictMode=60108;react_production_min.Profiler=60114;var q$1=60109,r$2=60110,t=60112;react_production_min.Suspense=60113;var u$1=60115,v$1=60116;
	if("function"===typeof Symbol&&Symbol.for){var w$1=Symbol.for;n$1=w$1("react.element");p$1=w$1("react.portal");react_production_min.Fragment=w$1("react.fragment");react_production_min.StrictMode=w$1("react.strict_mode");react_production_min.Profiler=w$1("react.profiler");q$1=w$1("react.provider");r$2=w$1("react.context");t=w$1("react.forward_ref");react_production_min.Suspense=w$1("react.suspense");u$1=w$1("react.memo");v$1=w$1("react.lazy");}var x$1="function"===typeof Symbol&&Symbol.iterator;
	function y$2(a){if(null===a||"object"!==typeof a)return null;a=x$1&&a[x$1]||a["@@iterator"];return "function"===typeof a?a:null}function z$1(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+encodeURIComponent(arguments[c]);return "Minified React error #"+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}
	var A$1={isMounted:function(){return !1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},B$2={};function C$1(a,b,c){this.props=a;this.context=b;this.refs=B$2;this.updater=c||A$1;}C$1.prototype.isReactComponent={};C$1.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error(z$1(85));this.updater.enqueueSetState(this,a,b,"setState");};C$1.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate");};
	function D$2(){}D$2.prototype=C$1.prototype;function E$2(a,b,c){this.props=a;this.context=b;this.refs=B$2;this.updater=c||A$1;}var F$2=E$2.prototype=new D$2;F$2.constructor=E$2;l$1(F$2,C$1.prototype);F$2.isPureReactComponent=!0;var G$2={current:null},H$2=Object.prototype.hasOwnProperty,I$2={key:!0,ref:!0,__self:!0,__source:!0};
	function J(a,b,c){var e,d={},k=null,h=null;if(null!=b)for(e in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=""+b.key),b)H$2.call(b,e)&&!I$2.hasOwnProperty(e)&&(d[e]=b[e]);var g=arguments.length-2;if(1===g)d.children=c;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];d.children=f;}if(a&&a.defaultProps)for(e in g=a.defaultProps,g)void 0===d[e]&&(d[e]=g[e]);return {$$typeof:n$1,type:a,key:k,ref:h,props:d,_owner:G$2.current}}
	function K(a,b){return {$$typeof:n$1,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function L(a){return "object"===typeof a&&null!==a&&a.$$typeof===n$1}function escape$1(a){var b={"=":"=0",":":"=2"};return "$"+a.replace(/[=:]/g,function(a){return b[a]})}var M$1=/\/+/g;function N$1(a,b){return "object"===typeof a&&null!==a&&null!=a.key?escape$1(""+a.key):b.toString(36)}
	function O$1(a,b,c,e,d){var k=typeof a;if("undefined"===k||"boolean"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case n$1:case p$1:h=!0;}}if(h)return h=a,d=d(h),a=""===e?"."+N$1(h,0):e,Array.isArray(d)?(c="",null!=a&&(c=a.replace(M$1,"$&/")+"/"),O$1(d,b,c,"",function(a){return a})):null!=d&&(L(d)&&(d=K(d,c+(!d.key||h&&h.key===d.key?"":(""+d.key).replace(M$1,"$&/")+"/")+a)),b.push(d)),1;h=0;e=""===e?".":e+":";if(Array.isArray(a))for(var g=
	0;g<a.length;g++){k=a[g];var f=e+N$1(k,g);h+=O$1(k,b,c,f,d);}else if(f=y$2(a),"function"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=e+N$1(k,g++),h+=O$1(k,b,c,f,d);else if("object"===k)throw b=""+a,Error(z$1(31,"[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b));return h}function P$1(a,b,c){if(null==a)return a;var e=[],d=0;O$1(a,e,"","",function(a){return b.call(c,a,d++)});return e}
	function Q(a){if(-1===a._status){var b=a._result;b=b();a._status=0;a._result=b;b.then(function(b){0===a._status&&(b=b.default,a._status=1,a._result=b);},function(b){0===a._status&&(a._status=2,a._result=b);});}if(1===a._status)return a._result;throw a._result;}var R$1={current:null};function S$1(){var a=R$1.current;if(null===a)throw Error(z$1(321));return a}var T$1={ReactCurrentDispatcher:R$1,ReactCurrentBatchConfig:{transition:0},ReactCurrentOwner:G$2,IsSomeRendererActing:{current:!1},assign:l$1};
	react_production_min.Children={map:P$1,forEach:function(a,b,c){P$1(a,function(){b.apply(this,arguments);},c);},count:function(a){var b=0;P$1(a,function(){b++;});return b},toArray:function(a){return P$1(a,function(a){return a})||[]},only:function(a){if(!L(a))throw Error(z$1(143));return a}};react_production_min.Component=C$1;react_production_min.PureComponent=E$2;react_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=T$1;
	react_production_min.cloneElement=function(a,b,c){if(null===a||void 0===a)throw Error(z$1(267,a));var e=l$1({},a.props),d=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=G$2.current);void 0!==b.key&&(d=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)H$2.call(b,f)&&!I$2.hasOwnProperty(f)&&(e[f]=void 0===b[f]&&void 0!==g?g[f]:b[f]);}var f=arguments.length-2;if(1===f)e.children=c;else if(1<f){g=Array(f);for(var m=0;m<f;m++)g[m]=arguments[m+2];e.children=g;}return {$$typeof:n$1,type:a.type,
	key:d,ref:k,props:e,_owner:h}};react_production_min.createContext=function(a,b){void 0===b&&(b=null);a={$$typeof:r$2,_calculateChangedBits:b,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.Provider={$$typeof:q$1,_context:a};return a.Consumer=a};react_production_min.createElement=J;react_production_min.createFactory=function(a){var b=J.bind(null,a);b.type=a;return b};react_production_min.createRef=function(){return {current:null}};react_production_min.forwardRef=function(a){return {$$typeof:t,render:a}};react_production_min.isValidElement=L;
	react_production_min.lazy=function(a){return {$$typeof:v$1,_payload:{_status:-1,_result:a},_init:Q}};react_production_min.memo=function(a,b){return {$$typeof:u$1,type:a,compare:void 0===b?null:b}};react_production_min.useCallback=function(a,b){return S$1().useCallback(a,b)};react_production_min.useContext=function(a,b){return S$1().useContext(a,b)};react_production_min.useDebugValue=function(){};react_production_min.useEffect=function(a,b){return S$1().useEffect(a,b)};react_production_min.useImperativeHandle=function(a,b,c){return S$1().useImperativeHandle(a,b,c)};
	react_production_min.useLayoutEffect=function(a,b){return S$1().useLayoutEffect(a,b)};react_production_min.useMemo=function(a,b){return S$1().useMemo(a,b)};react_production_min.useReducer=function(a,b,c){return S$1().useReducer(a,b,c)};react_production_min.useRef=function(a){return S$1().useRef(a)};react_production_min.useState=function(a){return S$1().useState(a)};react_production_min.version="17.0.2";

	(function (module) {

		{
		  module.exports = react_production_min;
		}
	} (react));

	var React = /*@__PURE__*/getDefaultExportFromCjs(react.exports);

	var reactDom = {exports: {}};

	var reactDom_production_min = {};

	var scheduler = {exports: {}};

	var scheduler_production_min = {};

	/** @license React v0.20.2
	 * scheduler.production.min.js
	 *
	 * Copyright (c) Facebook, Inc. and its affiliates.
	 *
	 * This source code is licensed under the MIT license found in the
	 * LICENSE file in the root directory of this source tree.
	 */

	(function (exports) {
	var f,g,h,k;if("object"===typeof performance&&"function"===typeof performance.now){var l=performance;exports.unstable_now=function(){return l.now()};}else {var p=Date,q=p.now();exports.unstable_now=function(){return p.now()-q};}
		if("undefined"===typeof window||"function"!==typeof MessageChannel){var t=null,u=null,w=function(){if(null!==t)try{var a=exports.unstable_now();t(!0,a);t=null;}catch(b){throw setTimeout(w,0),b;}};f=function(a){null!==t?setTimeout(f,0,a):(t=a,setTimeout(w,0));};g=function(a,b){u=setTimeout(a,b);};h=function(){clearTimeout(u);};exports.unstable_shouldYield=function(){return !1};k=exports.unstable_forceFrameRate=function(){};}else {var x=window.setTimeout,y=window.clearTimeout;if("undefined"!==typeof console){var z=
		window.cancelAnimationFrame;"function"!==typeof window.requestAnimationFrame&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills");"function"!==typeof z&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills");}var A=!1,B=null,C=-1,D=5,E=0;exports.unstable_shouldYield=function(){return exports.unstable_now()>=
		E};k=function(){};exports.unstable_forceFrameRate=function(a){0>a||125<a?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):D=0<a?Math.floor(1E3/a):5;};var F=new MessageChannel,G=F.port2;F.port1.onmessage=function(){if(null!==B){var a=exports.unstable_now();E=a+D;try{B(!0,a)?G.postMessage(null):(A=!1,B=null);}catch(b){throw G.postMessage(null),b;}}else A=!1;};f=function(a){B=a;A||(A=!0,G.postMessage(null));};g=function(a,b){C=
		x(function(){a(exports.unstable_now());},b);};h=function(){y(C);C=-1;};}function H(a,b){var c=a.length;a.push(b);a:for(;;){var d=c-1>>>1,e=a[d];if(void 0!==e&&0<I(e,b))a[d]=b,a[c]=e,c=d;else break a}}function J(a){a=a[0];return void 0===a?null:a}
		function K(a){var b=a[0];if(void 0!==b){var c=a.pop();if(c!==b){a[0]=c;a:for(var d=0,e=a.length;d<e;){var m=2*(d+1)-1,n=a[m],v=m+1,r=a[v];if(void 0!==n&&0>I(n,c))void 0!==r&&0>I(r,n)?(a[d]=r,a[v]=c,d=v):(a[d]=n,a[m]=c,d=m);else if(void 0!==r&&0>I(r,c))a[d]=r,a[v]=c,d=v;else break a}}return b}return null}function I(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}var L=[],M=[],N=1,O=null,P=3,Q=!1,R=!1,S=!1;
		function T(a){for(var b=J(M);null!==b;){if(null===b.callback)K(M);else if(b.startTime<=a)K(M),b.sortIndex=b.expirationTime,H(L,b);else break;b=J(M);}}function U(a){S=!1;T(a);if(!R)if(null!==J(L))R=!0,f(V);else {var b=J(M);null!==b&&g(U,b.startTime-a);}}
		function V(a,b){R=!1;S&&(S=!1,h());Q=!0;var c=P;try{T(b);for(O=J(L);null!==O&&(!(O.expirationTime>b)||a&&!exports.unstable_shouldYield());){var d=O.callback;if("function"===typeof d){O.callback=null;P=O.priorityLevel;var e=d(O.expirationTime<=b);b=exports.unstable_now();"function"===typeof e?O.callback=e:O===J(L)&&K(L);T(b);}else K(L);O=J(L);}if(null!==O)var m=!0;else {var n=J(M);null!==n&&g(U,n.startTime-b);m=!1;}return m}finally{O=null,P=c,Q=!1;}}var W=k;exports.unstable_IdlePriority=5;
		exports.unstable_ImmediatePriority=1;exports.unstable_LowPriority=4;exports.unstable_NormalPriority=3;exports.unstable_Profiling=null;exports.unstable_UserBlockingPriority=2;exports.unstable_cancelCallback=function(a){a.callback=null;};exports.unstable_continueExecution=function(){R||Q||(R=!0,f(V));};exports.unstable_getCurrentPriorityLevel=function(){return P};exports.unstable_getFirstCallbackNode=function(){return J(L)};
		exports.unstable_next=function(a){switch(P){case 1:case 2:case 3:var b=3;break;default:b=P;}var c=P;P=b;try{return a()}finally{P=c;}};exports.unstable_pauseExecution=function(){};exports.unstable_requestPaint=W;exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3;}var c=P;P=a;try{return b()}finally{P=c;}};
		exports.unstable_scheduleCallback=function(a,b,c){var d=exports.unstable_now();"object"===typeof c&&null!==c?(c=c.delay,c="number"===typeof c&&0<c?d+c:d):c=d;switch(a){case 1:var e=-1;break;case 2:e=250;break;case 5:e=1073741823;break;case 4:e=1E4;break;default:e=5E3;}e=c+e;a={id:N++,callback:b,priorityLevel:a,startTime:c,expirationTime:e,sortIndex:-1};c>d?(a.sortIndex=c,H(M,a),null===J(L)&&a===J(M)&&(S?h():S=!0,g(U,c-d))):(a.sortIndex=e,H(L,a),R||Q||(R=!0,f(V)));return a};
		exports.unstable_wrapCallback=function(a){var b=P;return function(){var c=P;P=b;try{return a.apply(this,arguments)}finally{P=c;}}};
	} (scheduler_production_min));

	(function (module) {

		{
		  module.exports = scheduler_production_min;
		}
	} (scheduler));

	/** @license React v17.0.2
	 * react-dom.production.min.js
	 *
	 * Copyright (c) Facebook, Inc. and its affiliates.
	 *
	 * This source code is licensed under the MIT license found in the
	 * LICENSE file in the root directory of this source tree.
	 */
	var aa=react.exports,m$1=objectAssign,r$1=scheduler.exports;function y$1(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+encodeURIComponent(arguments[c]);return "Minified React error #"+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}if(!aa)throw Error(y$1(227));var ba=new Set,ca={};function da(a,b){ea(a,b);ea(a+"Capture",b);}
	function ea(a,b){ca[a]=b;for(a=0;a<b.length;a++)ba.add(b[a]);}
	var fa=!("undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement),ha=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,ia=Object.prototype.hasOwnProperty,
	ja={},ka={};function la(a){if(ia.call(ka,a))return !0;if(ia.call(ja,a))return !1;if(ha.test(a))return ka[a]=!0;ja[a]=!0;return !1}function ma(a,b,c,d){if(null!==c&&0===c.type)return !1;switch(typeof b){case "function":case "symbol":return !0;case "boolean":if(d)return !1;if(null!==c)return !c.acceptsBooleans;a=a.toLowerCase().slice(0,5);return "data-"!==a&&"aria-"!==a;default:return !1}}
	function na(a,b,c,d){if(null===b||"undefined"===typeof b||ma(a,b,c,d))return !0;if(d)return !1;if(null!==c)switch(c.type){case 3:return !b;case 4:return !1===b;case 5:return isNaN(b);case 6:return isNaN(b)||1>b}return !1}function B$1(a,b,c,d,e,f,g){this.acceptsBooleans=2===b||3===b||4===b;this.attributeName=d;this.attributeNamespace=e;this.mustUseProperty=c;this.propertyName=a;this.type=b;this.sanitizeURL=f;this.removeEmptyString=g;}var D$1={};
	"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(a){D$1[a]=new B$1(a,0,!1,a,null,!1,!1);});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(a){var b=a[0];D$1[b]=new B$1(b,1,!1,a[1],null,!1,!1);});["contentEditable","draggable","spellCheck","value"].forEach(function(a){D$1[a]=new B$1(a,2,!1,a.toLowerCase(),null,!1,!1);});
	["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(a){D$1[a]=new B$1(a,2,!1,a,null,!1,!1);});"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(a){D$1[a]=new B$1(a,3,!1,a.toLowerCase(),null,!1,!1);});
	["checked","multiple","muted","selected"].forEach(function(a){D$1[a]=new B$1(a,3,!0,a,null,!1,!1);});["capture","download"].forEach(function(a){D$1[a]=new B$1(a,4,!1,a,null,!1,!1);});["cols","rows","size","span"].forEach(function(a){D$1[a]=new B$1(a,6,!1,a,null,!1,!1);});["rowSpan","start"].forEach(function(a){D$1[a]=new B$1(a,5,!1,a.toLowerCase(),null,!1,!1);});var oa=/[\-:]([a-z])/g;function pa(a){return a[1].toUpperCase()}
	"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(a){var b=a.replace(oa,
	pa);D$1[b]=new B$1(b,1,!1,a,null,!1,!1);});"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(a){var b=a.replace(oa,pa);D$1[b]=new B$1(b,1,!1,a,"http://www.w3.org/1999/xlink",!1,!1);});["xml:base","xml:lang","xml:space"].forEach(function(a){var b=a.replace(oa,pa);D$1[b]=new B$1(b,1,!1,a,"http://www.w3.org/XML/1998/namespace",!1,!1);});["tabIndex","crossOrigin"].forEach(function(a){D$1[a]=new B$1(a,1,!1,a.toLowerCase(),null,!1,!1);});
	D$1.xlinkHref=new B$1("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1);["src","href","action","formAction"].forEach(function(a){D$1[a]=new B$1(a,1,!1,a.toLowerCase(),null,!0,!0);});
	function qa(a,b,c,d){var e=D$1.hasOwnProperty(b)?D$1[b]:null;var f=null!==e?0===e.type:d?!1:!(2<b.length)||"o"!==b[0]&&"O"!==b[0]||"n"!==b[1]&&"N"!==b[1]?!1:!0;f||(na(b,c,e,d)&&(c=null),d||null===e?la(b)&&(null===c?a.removeAttribute(b):a.setAttribute(b,""+c)):e.mustUseProperty?a[e.propertyName]=null===c?3===e.type?!1:"":c:(b=e.attributeName,d=e.attributeNamespace,null===c?a.removeAttribute(b):(e=e.type,c=3===e||4===e&&!0===c?"":""+c,d?a.setAttributeNS(d,b,c):a.setAttribute(b,c))));}
	var ra=aa.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,sa=60103,ta=60106,ua=60107,wa=60108,xa=60114,ya=60109,za=60110,Aa=60112,Ba=60113,Ca=60120,Da=60115,Ea=60116,Fa=60121,Ga=60128,Ha=60129,Ia=60130,Ja=60131;
	if("function"===typeof Symbol&&Symbol.for){var E$1=Symbol.for;sa=E$1("react.element");ta=E$1("react.portal");ua=E$1("react.fragment");wa=E$1("react.strict_mode");xa=E$1("react.profiler");ya=E$1("react.provider");za=E$1("react.context");Aa=E$1("react.forward_ref");Ba=E$1("react.suspense");Ca=E$1("react.suspense_list");Da=E$1("react.memo");Ea=E$1("react.lazy");Fa=E$1("react.block");E$1("react.scope");Ga=E$1("react.opaque.id");Ha=E$1("react.debug_trace_mode");Ia=E$1("react.offscreen");Ja=E$1("react.legacy_hidden");}
	var Ka="function"===typeof Symbol&&Symbol.iterator;function La(a){if(null===a||"object"!==typeof a)return null;a=Ka&&a[Ka]||a["@@iterator"];return "function"===typeof a?a:null}var Ma;function Na(a){if(void 0===Ma)try{throw Error();}catch(c){var b=c.stack.trim().match(/\n( *(at )?)/);Ma=b&&b[1]||"";}return "\n"+Ma+a}var Oa=!1;
	function Pa(a,b){if(!a||Oa)return "";Oa=!0;var c=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(b)if(b=function(){throw Error();},Object.defineProperty(b.prototype,"props",{set:function(){throw Error();}}),"object"===typeof Reflect&&Reflect.construct){try{Reflect.construct(b,[]);}catch(k){var d=k;}Reflect.construct(a,[],b);}else {try{b.call();}catch(k){d=k;}a.call(b.prototype);}else {try{throw Error();}catch(k){d=k;}a();}}catch(k){if(k&&d&&"string"===typeof k.stack){for(var e=k.stack.split("\n"),
	f=d.stack.split("\n"),g=e.length-1,h=f.length-1;1<=g&&0<=h&&e[g]!==f[h];)h--;for(;1<=g&&0<=h;g--,h--)if(e[g]!==f[h]){if(1!==g||1!==h){do if(g--,h--,0>h||e[g]!==f[h])return "\n"+e[g].replace(" at new "," at ");while(1<=g&&0<=h)}break}}}finally{Oa=!1,Error.prepareStackTrace=c;}return (a=a?a.displayName||a.name:"")?Na(a):""}
	function Qa(a){switch(a.tag){case 5:return Na(a.type);case 16:return Na("Lazy");case 13:return Na("Suspense");case 19:return Na("SuspenseList");case 0:case 2:case 15:return a=Pa(a.type,!1),a;case 11:return a=Pa(a.type.render,!1),a;case 22:return a=Pa(a.type._render,!1),a;case 1:return a=Pa(a.type,!0),a;default:return ""}}
	function Ra(a){if(null==a)return null;if("function"===typeof a)return a.displayName||a.name||null;if("string"===typeof a)return a;switch(a){case ua:return "Fragment";case ta:return "Portal";case xa:return "Profiler";case wa:return "StrictMode";case Ba:return "Suspense";case Ca:return "SuspenseList"}if("object"===typeof a)switch(a.$$typeof){case za:return (a.displayName||"Context")+".Consumer";case ya:return (a._context.displayName||"Context")+".Provider";case Aa:var b=a.render;b=b.displayName||b.name||"";
	return a.displayName||(""!==b?"ForwardRef("+b+")":"ForwardRef");case Da:return Ra(a.type);case Fa:return Ra(a._render);case Ea:b=a._payload;a=a._init;try{return Ra(a(b))}catch(c){}}return null}function Sa(a){switch(typeof a){case "boolean":case "number":case "object":case "string":case "undefined":return a;default:return ""}}function Ta(a){var b=a.type;return (a=a.nodeName)&&"input"===a.toLowerCase()&&("checkbox"===b||"radio"===b)}
	function Ua(a){var b=Ta(a)?"checked":"value",c=Object.getOwnPropertyDescriptor(a.constructor.prototype,b),d=""+a[b];if(!a.hasOwnProperty(b)&&"undefined"!==typeof c&&"function"===typeof c.get&&"function"===typeof c.set){var e=c.get,f=c.set;Object.defineProperty(a,b,{configurable:!0,get:function(){return e.call(this)},set:function(a){d=""+a;f.call(this,a);}});Object.defineProperty(a,b,{enumerable:c.enumerable});return {getValue:function(){return d},setValue:function(a){d=""+a;},stopTracking:function(){a._valueTracker=
	null;delete a[b];}}}}function Va(a){a._valueTracker||(a._valueTracker=Ua(a));}function Wa(a){if(!a)return !1;var b=a._valueTracker;if(!b)return !0;var c=b.getValue();var d="";a&&(d=Ta(a)?a.checked?"true":"false":a.value);a=d;return a!==c?(b.setValue(a),!0):!1}function Xa(a){a=a||("undefined"!==typeof document?document:void 0);if("undefined"===typeof a)return null;try{return a.activeElement||a.body}catch(b){return a.body}}
	function Ya(a,b){var c=b.checked;return m$1({},b,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=c?c:a._wrapperState.initialChecked})}function Za(a,b){var c=null==b.defaultValue?"":b.defaultValue,d=null!=b.checked?b.checked:b.defaultChecked;c=Sa(null!=b.value?b.value:c);a._wrapperState={initialChecked:d,initialValue:c,controlled:"checkbox"===b.type||"radio"===b.type?null!=b.checked:null!=b.value};}function $a(a,b){b=b.checked;null!=b&&qa(a,"checked",b,!1);}
	function ab(a,b){$a(a,b);var c=Sa(b.value),d=b.type;if(null!=c)if("number"===d){if(0===c&&""===a.value||a.value!=c)a.value=""+c;}else a.value!==""+c&&(a.value=""+c);else if("submit"===d||"reset"===d){a.removeAttribute("value");return}b.hasOwnProperty("value")?bb(a,b.type,c):b.hasOwnProperty("defaultValue")&&bb(a,b.type,Sa(b.defaultValue));null==b.checked&&null!=b.defaultChecked&&(a.defaultChecked=!!b.defaultChecked);}
	function cb(a,b,c){if(b.hasOwnProperty("value")||b.hasOwnProperty("defaultValue")){var d=b.type;if(!("submit"!==d&&"reset"!==d||void 0!==b.value&&null!==b.value))return;b=""+a._wrapperState.initialValue;c||b===a.value||(a.value=b);a.defaultValue=b;}c=a.name;""!==c&&(a.name="");a.defaultChecked=!!a._wrapperState.initialChecked;""!==c&&(a.name=c);}
	function bb(a,b,c){if("number"!==b||Xa(a.ownerDocument)!==a)null==c?a.defaultValue=""+a._wrapperState.initialValue:a.defaultValue!==""+c&&(a.defaultValue=""+c);}function db(a){var b="";aa.Children.forEach(a,function(a){null!=a&&(b+=a);});return b}function eb(a,b){a=m$1({children:void 0},b);if(b=db(b.children))a.children=b;return a}
	function fb(a,b,c,d){a=a.options;if(b){b={};for(var e=0;e<c.length;e++)b["$"+c[e]]=!0;for(c=0;c<a.length;c++)e=b.hasOwnProperty("$"+a[c].value),a[c].selected!==e&&(a[c].selected=e),e&&d&&(a[c].defaultSelected=!0);}else {c=""+Sa(c);b=null;for(e=0;e<a.length;e++){if(a[e].value===c){a[e].selected=!0;d&&(a[e].defaultSelected=!0);return}null!==b||a[e].disabled||(b=a[e]);}null!==b&&(b.selected=!0);}}
	function gb(a,b){if(null!=b.dangerouslySetInnerHTML)throw Error(y$1(91));return m$1({},b,{value:void 0,defaultValue:void 0,children:""+a._wrapperState.initialValue})}function hb(a,b){var c=b.value;if(null==c){c=b.children;b=b.defaultValue;if(null!=c){if(null!=b)throw Error(y$1(92));if(Array.isArray(c)){if(!(1>=c.length))throw Error(y$1(93));c=c[0];}b=c;}null==b&&(b="");c=b;}a._wrapperState={initialValue:Sa(c)};}
	function ib(a,b){var c=Sa(b.value),d=Sa(b.defaultValue);null!=c&&(c=""+c,c!==a.value&&(a.value=c),null==b.defaultValue&&a.defaultValue!==c&&(a.defaultValue=c));null!=d&&(a.defaultValue=""+d);}function jb(a){var b=a.textContent;b===a._wrapperState.initialValue&&""!==b&&null!==b&&(a.value=b);}var kb={html:"http://www.w3.org/1999/xhtml",mathml:"http://www.w3.org/1998/Math/MathML",svg:"http://www.w3.org/2000/svg"};
	function lb(a){switch(a){case "svg":return "http://www.w3.org/2000/svg";case "math":return "http://www.w3.org/1998/Math/MathML";default:return "http://www.w3.org/1999/xhtml"}}function mb(a,b){return null==a||"http://www.w3.org/1999/xhtml"===a?lb(b):"http://www.w3.org/2000/svg"===a&&"foreignObject"===b?"http://www.w3.org/1999/xhtml":a}
	var nb,ob=function(a){return "undefined"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(b,c,d,e){MSApp.execUnsafeLocalFunction(function(){return a(b,c,d,e)});}:a}(function(a,b){if(a.namespaceURI!==kb.svg||"innerHTML"in a)a.innerHTML=b;else {nb=nb||document.createElement("div");nb.innerHTML="<svg>"+b.valueOf().toString()+"</svg>";for(b=nb.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;b.firstChild;)a.appendChild(b.firstChild);}});
	function pb(a,b){if(b){var c=a.firstChild;if(c&&c===a.lastChild&&3===c.nodeType){c.nodeValue=b;return}}a.textContent=b;}
	var qb={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,
	floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},rb=["Webkit","ms","Moz","O"];Object.keys(qb).forEach(function(a){rb.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);qb[b]=qb[a];});});function sb(a,b,c){return null==b||"boolean"===typeof b||""===b?"":c||"number"!==typeof b||0===b||qb.hasOwnProperty(a)&&qb[a]?(""+b).trim():b+"px"}
	function tb(a,b){a=a.style;for(var c in b)if(b.hasOwnProperty(c)){var d=0===c.indexOf("--"),e=sb(c,b[c],d);"float"===c&&(c="cssFloat");d?a.setProperty(c,e):a[c]=e;}}var ub=m$1({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});
	function vb(a,b){if(b){if(ub[a]&&(null!=b.children||null!=b.dangerouslySetInnerHTML))throw Error(y$1(137,a));if(null!=b.dangerouslySetInnerHTML){if(null!=b.children)throw Error(y$1(60));if(!("object"===typeof b.dangerouslySetInnerHTML&&"__html"in b.dangerouslySetInnerHTML))throw Error(y$1(61));}if(null!=b.style&&"object"!==typeof b.style)throw Error(y$1(62));}}
	function wb(a,b){if(-1===a.indexOf("-"))return "string"===typeof b.is;switch(a){case "annotation-xml":case "color-profile":case "font-face":case "font-face-src":case "font-face-uri":case "font-face-format":case "font-face-name":case "missing-glyph":return !1;default:return !0}}function xb(a){a=a.target||a.srcElement||window;a.correspondingUseElement&&(a=a.correspondingUseElement);return 3===a.nodeType?a.parentNode:a}var yb=null,zb=null,Ab=null;
	function Bb(a){if(a=Cb(a)){if("function"!==typeof yb)throw Error(y$1(280));var b=a.stateNode;b&&(b=Db(b),yb(a.stateNode,a.type,b));}}function Eb(a){zb?Ab?Ab.push(a):Ab=[a]:zb=a;}function Fb(){if(zb){var a=zb,b=Ab;Ab=zb=null;Bb(a);if(b)for(a=0;a<b.length;a++)Bb(b[a]);}}function Gb(a,b){return a(b)}function Hb(a,b,c,d,e){return a(b,c,d,e)}function Ib(){}var Jb=Gb,Kb=!1,Lb=!1;function Mb(){if(null!==zb||null!==Ab)Ib(),Fb();}
	function Nb(a,b,c){if(Lb)return a(b,c);Lb=!0;try{return Jb(a,b,c)}finally{Lb=!1,Mb();}}
	function Ob(a,b){var c=a.stateNode;if(null===c)return null;var d=Db(c);if(null===d)return null;c=d[b];a:switch(b){case "onClick":case "onClickCapture":case "onDoubleClick":case "onDoubleClickCapture":case "onMouseDown":case "onMouseDownCapture":case "onMouseMove":case "onMouseMoveCapture":case "onMouseUp":case "onMouseUpCapture":case "onMouseEnter":(d=!d.disabled)||(a=a.type,d=!("button"===a||"input"===a||"select"===a||"textarea"===a));a=!d;break a;default:a=!1;}if(a)return null;if(c&&"function"!==
	typeof c)throw Error(y$1(231,b,typeof c));return c}var Pb=!1;if(fa)try{var Qb={};Object.defineProperty(Qb,"passive",{get:function(){Pb=!0;}});window.addEventListener("test",Qb,Qb);window.removeEventListener("test",Qb,Qb);}catch(a){Pb=!1;}function Rb(a,b,c,d,e,f,g,h,k){var l=Array.prototype.slice.call(arguments,3);try{b.apply(c,l);}catch(n){this.onError(n);}}var Sb=!1,Tb=null,Ub=!1,Vb=null,Wb={onError:function(a){Sb=!0;Tb=a;}};function Xb(a,b,c,d,e,f,g,h,k){Sb=!1;Tb=null;Rb.apply(Wb,arguments);}
	function Yb(a,b,c,d,e,f,g,h,k){Xb.apply(this,arguments);if(Sb){if(Sb){var l=Tb;Sb=!1;Tb=null;}else throw Error(y$1(198));Ub||(Ub=!0,Vb=l);}}function Zb(a){var b=a,c=a;if(a.alternate)for(;b.return;)b=b.return;else {a=b;do b=a,0!==(b.flags&1026)&&(c=b.return),a=b.return;while(a)}return 3===b.tag?c:null}function $b(a){if(13===a.tag){var b=a.memoizedState;null===b&&(a=a.alternate,null!==a&&(b=a.memoizedState));if(null!==b)return b.dehydrated}return null}function ac(a){if(Zb(a)!==a)throw Error(y$1(188));}
	function bc(a){var b=a.alternate;if(!b){b=Zb(a);if(null===b)throw Error(y$1(188));return b!==a?null:a}for(var c=a,d=b;;){var e=c.return;if(null===e)break;var f=e.alternate;if(null===f){d=e.return;if(null!==d){c=d;continue}break}if(e.child===f.child){for(f=e.child;f;){if(f===c)return ac(e),a;if(f===d)return ac(e),b;f=f.sibling;}throw Error(y$1(188));}if(c.return!==d.return)c=e,d=f;else {for(var g=!1,h=e.child;h;){if(h===c){g=!0;c=e;d=f;break}if(h===d){g=!0;d=e;c=f;break}h=h.sibling;}if(!g){for(h=f.child;h;){if(h===
	c){g=!0;c=f;d=e;break}if(h===d){g=!0;d=f;c=e;break}h=h.sibling;}if(!g)throw Error(y$1(189));}}if(c.alternate!==d)throw Error(y$1(190));}if(3!==c.tag)throw Error(y$1(188));return c.stateNode.current===c?a:b}function cc(a){a=bc(a);if(!a)return null;for(var b=a;;){if(5===b.tag||6===b.tag)return b;if(b.child)b.child.return=b,b=b.child;else {if(b===a)break;for(;!b.sibling;){if(!b.return||b.return===a)return null;b=b.return;}b.sibling.return=b.return;b=b.sibling;}}return null}
	function dc(a,b){for(var c=a.alternate;null!==b;){if(b===a||b===c)return !0;b=b.return;}return !1}var ec,fc,gc,hc,ic=!1,jc=[],kc=null,lc=null,mc=null,nc=new Map,oc=new Map,pc=[],qc="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit".split(" ");
	function rc(a,b,c,d,e){return {blockedOn:a,domEventName:b,eventSystemFlags:c|16,nativeEvent:e,targetContainers:[d]}}function sc(a,b){switch(a){case "focusin":case "focusout":kc=null;break;case "dragenter":case "dragleave":lc=null;break;case "mouseover":case "mouseout":mc=null;break;case "pointerover":case "pointerout":nc.delete(b.pointerId);break;case "gotpointercapture":case "lostpointercapture":oc.delete(b.pointerId);}}
	function tc(a,b,c,d,e,f){if(null===a||a.nativeEvent!==f)return a=rc(b,c,d,e,f),null!==b&&(b=Cb(b),null!==b&&fc(b)),a;a.eventSystemFlags|=d;b=a.targetContainers;null!==e&&-1===b.indexOf(e)&&b.push(e);return a}
	function uc(a,b,c,d,e){switch(b){case "focusin":return kc=tc(kc,a,b,c,d,e),!0;case "dragenter":return lc=tc(lc,a,b,c,d,e),!0;case "mouseover":return mc=tc(mc,a,b,c,d,e),!0;case "pointerover":var f=e.pointerId;nc.set(f,tc(nc.get(f)||null,a,b,c,d,e));return !0;case "gotpointercapture":return f=e.pointerId,oc.set(f,tc(oc.get(f)||null,a,b,c,d,e)),!0}return !1}
	function vc(a){var b=wc(a.target);if(null!==b){var c=Zb(b);if(null!==c)if(b=c.tag,13===b){if(b=$b(c),null!==b){a.blockedOn=b;hc(a.lanePriority,function(){r$1.unstable_runWithPriority(a.priority,function(){gc(c);});});return}}else if(3===b&&c.stateNode.hydrate){a.blockedOn=3===c.tag?c.stateNode.containerInfo:null;return}}a.blockedOn=null;}
	function xc(a){if(null!==a.blockedOn)return !1;for(var b=a.targetContainers;0<b.length;){var c=yc(a.domEventName,a.eventSystemFlags,b[0],a.nativeEvent);if(null!==c)return b=Cb(c),null!==b&&fc(b),a.blockedOn=c,!1;b.shift();}return !0}function zc(a,b,c){xc(a)&&c.delete(b);}
	function Ac(){for(ic=!1;0<jc.length;){var a=jc[0];if(null!==a.blockedOn){a=Cb(a.blockedOn);null!==a&&ec(a);break}for(var b=a.targetContainers;0<b.length;){var c=yc(a.domEventName,a.eventSystemFlags,b[0],a.nativeEvent);if(null!==c){a.blockedOn=c;break}b.shift();}null===a.blockedOn&&jc.shift();}null!==kc&&xc(kc)&&(kc=null);null!==lc&&xc(lc)&&(lc=null);null!==mc&&xc(mc)&&(mc=null);nc.forEach(zc);oc.forEach(zc);}
	function Bc(a,b){a.blockedOn===b&&(a.blockedOn=null,ic||(ic=!0,r$1.unstable_scheduleCallback(r$1.unstable_NormalPriority,Ac)));}
	function Cc(a){function b(b){return Bc(b,a)}if(0<jc.length){Bc(jc[0],a);for(var c=1;c<jc.length;c++){var d=jc[c];d.blockedOn===a&&(d.blockedOn=null);}}null!==kc&&Bc(kc,a);null!==lc&&Bc(lc,a);null!==mc&&Bc(mc,a);nc.forEach(b);oc.forEach(b);for(c=0;c<pc.length;c++)d=pc[c],d.blockedOn===a&&(d.blockedOn=null);for(;0<pc.length&&(c=pc[0],null===c.blockedOn);)vc(c),null===c.blockedOn&&pc.shift();}
	function Dc(a,b){var c={};c[a.toLowerCase()]=b.toLowerCase();c["Webkit"+a]="webkit"+b;c["Moz"+a]="moz"+b;return c}var Ec={animationend:Dc("Animation","AnimationEnd"),animationiteration:Dc("Animation","AnimationIteration"),animationstart:Dc("Animation","AnimationStart"),transitionend:Dc("Transition","TransitionEnd")},Fc={},Gc={};
	fa&&(Gc=document.createElement("div").style,"AnimationEvent"in window||(delete Ec.animationend.animation,delete Ec.animationiteration.animation,delete Ec.animationstart.animation),"TransitionEvent"in window||delete Ec.transitionend.transition);function Hc(a){if(Fc[a])return Fc[a];if(!Ec[a])return a;var b=Ec[a],c;for(c in b)if(b.hasOwnProperty(c)&&c in Gc)return Fc[a]=b[c];return a}
	var Ic=Hc("animationend"),Jc=Hc("animationiteration"),Kc=Hc("animationstart"),Lc=Hc("transitionend"),Mc=new Map,Nc=new Map,Oc=["abort","abort",Ic,"animationEnd",Jc,"animationIteration",Kc,"animationStart","canplay","canPlay","canplaythrough","canPlayThrough","durationchange","durationChange","emptied","emptied","encrypted","encrypted","ended","ended","error","error","gotpointercapture","gotPointerCapture","load","load","loadeddata","loadedData","loadedmetadata","loadedMetadata","loadstart","loadStart",
	"lostpointercapture","lostPointerCapture","playing","playing","progress","progress","seeking","seeking","stalled","stalled","suspend","suspend","timeupdate","timeUpdate",Lc,"transitionEnd","waiting","waiting"];function Pc(a,b){for(var c=0;c<a.length;c+=2){var d=a[c],e=a[c+1];e="on"+(e[0].toUpperCase()+e.slice(1));Nc.set(d,b);Mc.set(d,e);da(e,[d]);}}var Qc=r$1.unstable_now;Qc();var F$1=8;
	function Rc(a){if(0!==(1&a))return F$1=15,1;if(0!==(2&a))return F$1=14,2;if(0!==(4&a))return F$1=13,4;var b=24&a;if(0!==b)return F$1=12,b;if(0!==(a&32))return F$1=11,32;b=192&a;if(0!==b)return F$1=10,b;if(0!==(a&256))return F$1=9,256;b=3584&a;if(0!==b)return F$1=8,b;if(0!==(a&4096))return F$1=7,4096;b=4186112&a;if(0!==b)return F$1=6,b;b=62914560&a;if(0!==b)return F$1=5,b;if(a&67108864)return F$1=4,67108864;if(0!==(a&134217728))return F$1=3,134217728;b=805306368&a;if(0!==b)return F$1=2,b;if(0!==(1073741824&a))return F$1=1,1073741824;
	F$1=8;return a}function Sc(a){switch(a){case 99:return 15;case 98:return 10;case 97:case 96:return 8;case 95:return 2;default:return 0}}function Tc(a){switch(a){case 15:case 14:return 99;case 13:case 12:case 11:case 10:return 98;case 9:case 8:case 7:case 6:case 4:case 5:return 97;case 3:case 2:case 1:return 95;case 0:return 90;default:throw Error(y$1(358,a));}}
	function Uc(a,b){var c=a.pendingLanes;if(0===c)return F$1=0;var d=0,e=0,f=a.expiredLanes,g=a.suspendedLanes,h=a.pingedLanes;if(0!==f)d=f,e=F$1=15;else if(f=c&134217727,0!==f){var k=f&~g;0!==k?(d=Rc(k),e=F$1):(h&=f,0!==h&&(d=Rc(h),e=F$1));}else f=c&~g,0!==f?(d=Rc(f),e=F$1):0!==h&&(d=Rc(h),e=F$1);if(0===d)return 0;d=31-Vc(d);d=c&((0>d?0:1<<d)<<1)-1;if(0!==b&&b!==d&&0===(b&g)){Rc(b);if(e<=F$1)return b;F$1=e;}b=a.entangledLanes;if(0!==b)for(a=a.entanglements,b&=d;0<b;)c=31-Vc(b),e=1<<c,d|=a[c],b&=~e;return d}
	function Wc(a){a=a.pendingLanes&-1073741825;return 0!==a?a:a&1073741824?1073741824:0}function Xc(a,b){switch(a){case 15:return 1;case 14:return 2;case 12:return a=Yc(24&~b),0===a?Xc(10,b):a;case 10:return a=Yc(192&~b),0===a?Xc(8,b):a;case 8:return a=Yc(3584&~b),0===a&&(a=Yc(4186112&~b),0===a&&(a=512)),a;case 2:return b=Yc(805306368&~b),0===b&&(b=268435456),b}throw Error(y$1(358,a));}function Yc(a){return a&-a}function Zc(a){for(var b=[],c=0;31>c;c++)b.push(a);return b}
	function $c(a,b,c){a.pendingLanes|=b;var d=b-1;a.suspendedLanes&=d;a.pingedLanes&=d;a=a.eventTimes;b=31-Vc(b);a[b]=c;}var Vc=Math.clz32?Math.clz32:ad,bd=Math.log,cd=Math.LN2;function ad(a){return 0===a?32:31-(bd(a)/cd|0)|0}var dd=r$1.unstable_UserBlockingPriority,ed=r$1.unstable_runWithPriority,fd=!0;function gd(a,b,c,d){Kb||Ib();var e=hd,f=Kb;Kb=!0;try{Hb(e,a,b,c,d);}finally{(Kb=f)||Mb();}}function id(a,b,c,d){ed(dd,hd.bind(null,a,b,c,d));}
	function hd(a,b,c,d){if(fd){var e;if((e=0===(b&4))&&0<jc.length&&-1<qc.indexOf(a))a=rc(null,a,b,c,d),jc.push(a);else {var f=yc(a,b,c,d);if(null===f)e&&sc(a,d);else {if(e){if(-1<qc.indexOf(a)){a=rc(f,a,b,c,d);jc.push(a);return}if(uc(f,a,b,c,d))return;sc(a,d);}jd(a,b,d,null,c);}}}}
	function yc(a,b,c,d){var e=xb(d);e=wc(e);if(null!==e){var f=Zb(e);if(null===f)e=null;else {var g=f.tag;if(13===g){e=$b(f);if(null!==e)return e;e=null;}else if(3===g){if(f.stateNode.hydrate)return 3===f.tag?f.stateNode.containerInfo:null;e=null;}else f!==e&&(e=null);}}jd(a,b,d,e,c);return null}var kd=null,ld=null,md=null;
	function nd(){if(md)return md;var a,b=ld,c=b.length,d,e="value"in kd?kd.value:kd.textContent,f=e.length;for(a=0;a<c&&b[a]===e[a];a++);var g=c-a;for(d=1;d<=g&&b[c-d]===e[f-d];d++);return md=e.slice(a,1<d?1-d:void 0)}function od(a){var b=a.keyCode;"charCode"in a?(a=a.charCode,0===a&&13===b&&(a=13)):a=b;10===a&&(a=13);return 32<=a||13===a?a:0}function pd(){return !0}function qd(){return !1}
	function rd(a){function b(b,d,e,f,g){this._reactName=b;this._targetInst=e;this.type=d;this.nativeEvent=f;this.target=g;this.currentTarget=null;for(var c in a)a.hasOwnProperty(c)&&(b=a[c],this[c]=b?b(f):f[c]);this.isDefaultPrevented=(null!=f.defaultPrevented?f.defaultPrevented:!1===f.returnValue)?pd:qd;this.isPropagationStopped=qd;return this}m$1(b.prototype,{preventDefault:function(){this.defaultPrevented=!0;var a=this.nativeEvent;a&&(a.preventDefault?a.preventDefault():"unknown"!==typeof a.returnValue&&
	(a.returnValue=!1),this.isDefaultPrevented=pd);},stopPropagation:function(){var a=this.nativeEvent;a&&(a.stopPropagation?a.stopPropagation():"unknown"!==typeof a.cancelBubble&&(a.cancelBubble=!0),this.isPropagationStopped=pd);},persist:function(){},isPersistent:pd});return b}
	var sd={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(a){return a.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},td=rd(sd),ud=m$1({},sd,{view:0,detail:0}),vd=rd(ud),wd,xd,yd,Ad=m$1({},ud,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:zd,button:0,buttons:0,relatedTarget:function(a){return void 0===a.relatedTarget?a.fromElement===a.srcElement?a.toElement:a.fromElement:a.relatedTarget},movementX:function(a){if("movementX"in
	a)return a.movementX;a!==yd&&(yd&&"mousemove"===a.type?(wd=a.screenX-yd.screenX,xd=a.screenY-yd.screenY):xd=wd=0,yd=a);return wd},movementY:function(a){return "movementY"in a?a.movementY:xd}}),Bd=rd(Ad),Cd=m$1({},Ad,{dataTransfer:0}),Dd=rd(Cd),Ed=m$1({},ud,{relatedTarget:0}),Fd=rd(Ed),Gd=m$1({},sd,{animationName:0,elapsedTime:0,pseudoElement:0}),Hd=rd(Gd),Id=m$1({},sd,{clipboardData:function(a){return "clipboardData"in a?a.clipboardData:window.clipboardData}}),Jd=rd(Id),Kd=m$1({},sd,{data:0}),Ld=rd(Kd),Md={Esc:"Escape",
	Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},Nd={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",
	119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},Od={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function Pd(a){var b=this.nativeEvent;return b.getModifierState?b.getModifierState(a):(a=Od[a])?!!b[a]:!1}function zd(){return Pd}
	var Qd=m$1({},ud,{key:function(a){if(a.key){var b=Md[a.key]||a.key;if("Unidentified"!==b)return b}return "keypress"===a.type?(a=od(a),13===a?"Enter":String.fromCharCode(a)):"keydown"===a.type||"keyup"===a.type?Nd[a.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:zd,charCode:function(a){return "keypress"===a.type?od(a):0},keyCode:function(a){return "keydown"===a.type||"keyup"===a.type?a.keyCode:0},which:function(a){return "keypress"===
	a.type?od(a):"keydown"===a.type||"keyup"===a.type?a.keyCode:0}}),Rd=rd(Qd),Sd=m$1({},Ad,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0}),Td=rd(Sd),Ud=m$1({},ud,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:zd}),Vd=rd(Ud),Wd=m$1({},sd,{propertyName:0,elapsedTime:0,pseudoElement:0}),Xd=rd(Wd),Yd=m$1({},Ad,{deltaX:function(a){return "deltaX"in a?a.deltaX:"wheelDeltaX"in a?-a.wheelDeltaX:0},
	deltaY:function(a){return "deltaY"in a?a.deltaY:"wheelDeltaY"in a?-a.wheelDeltaY:"wheelDelta"in a?-a.wheelDelta:0},deltaZ:0,deltaMode:0}),Zd=rd(Yd),$d=[9,13,27,32],ae=fa&&"CompositionEvent"in window,be=null;fa&&"documentMode"in document&&(be=document.documentMode);var ce=fa&&"TextEvent"in window&&!be,de=fa&&(!ae||be&&8<be&&11>=be),ee=String.fromCharCode(32),fe=!1;
	function ge(a,b){switch(a){case "keyup":return -1!==$d.indexOf(b.keyCode);case "keydown":return 229!==b.keyCode;case "keypress":case "mousedown":case "focusout":return !0;default:return !1}}function he(a){a=a.detail;return "object"===typeof a&&"data"in a?a.data:null}var ie=!1;function je(a,b){switch(a){case "compositionend":return he(b);case "keypress":if(32!==b.which)return null;fe=!0;return ee;case "textInput":return a=b.data,a===ee&&fe?null:a;default:return null}}
	function ke(a,b){if(ie)return "compositionend"===a||!ae&&ge(a,b)?(a=nd(),md=ld=kd=null,ie=!1,a):null;switch(a){case "paste":return null;case "keypress":if(!(b.ctrlKey||b.altKey||b.metaKey)||b.ctrlKey&&b.altKey){if(b.char&&1<b.char.length)return b.char;if(b.which)return String.fromCharCode(b.which)}return null;case "compositionend":return de&&"ko"!==b.locale?null:b.data;default:return null}}
	var le={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function me(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return "input"===b?!!le[a.type]:"textarea"===b?!0:!1}function ne(a,b,c,d){Eb(d);b=oe(b,"onChange");0<b.length&&(c=new td("onChange","change",null,c,d),a.push({event:c,listeners:b}));}var pe=null,qe=null;function re(a){se(a,0);}function te(a){var b=ue(a);if(Wa(b))return a}
	function ve(a,b){if("change"===a)return b}var we=!1;if(fa){var xe;if(fa){var ye="oninput"in document;if(!ye){var ze=document.createElement("div");ze.setAttribute("oninput","return;");ye="function"===typeof ze.oninput;}xe=ye;}else xe=!1;we=xe&&(!document.documentMode||9<document.documentMode);}function Ae(){pe&&(pe.detachEvent("onpropertychange",Be),qe=pe=null);}function Be(a){if("value"===a.propertyName&&te(qe)){var b=[];ne(b,qe,a,xb(a));a=re;if(Kb)a(b);else {Kb=!0;try{Gb(a,b);}finally{Kb=!1,Mb();}}}}
	function Ce(a,b,c){"focusin"===a?(Ae(),pe=b,qe=c,pe.attachEvent("onpropertychange",Be)):"focusout"===a&&Ae();}function De(a){if("selectionchange"===a||"keyup"===a||"keydown"===a)return te(qe)}function Ee(a,b){if("click"===a)return te(b)}function Fe(a,b){if("input"===a||"change"===a)return te(b)}function Ge(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var He="function"===typeof Object.is?Object.is:Ge,Ie=Object.prototype.hasOwnProperty;
	function Je(a,b){if(He(a,b))return !0;if("object"!==typeof a||null===a||"object"!==typeof b||null===b)return !1;var c=Object.keys(a),d=Object.keys(b);if(c.length!==d.length)return !1;for(d=0;d<c.length;d++)if(!Ie.call(b,c[d])||!He(a[c[d]],b[c[d]]))return !1;return !0}function Ke(a){for(;a&&a.firstChild;)a=a.firstChild;return a}
	function Le(a,b){var c=Ke(a);a=0;for(var d;c;){if(3===c.nodeType){d=a+c.textContent.length;if(a<=b&&d>=b)return {node:c,offset:b-a};a=d;}a:{for(;c;){if(c.nextSibling){c=c.nextSibling;break a}c=c.parentNode;}c=void 0;}c=Ke(c);}}function Me(a,b){return a&&b?a===b?!0:a&&3===a.nodeType?!1:b&&3===b.nodeType?Me(a,b.parentNode):"contains"in a?a.contains(b):a.compareDocumentPosition?!!(a.compareDocumentPosition(b)&16):!1:!1}
	function Ne(){for(var a=window,b=Xa();b instanceof a.HTMLIFrameElement;){try{var c="string"===typeof b.contentWindow.location.href;}catch(d){c=!1;}if(c)a=b.contentWindow;else break;b=Xa(a.document);}return b}function Oe(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return b&&("input"===b&&("text"===a.type||"search"===a.type||"tel"===a.type||"url"===a.type||"password"===a.type)||"textarea"===b||"true"===a.contentEditable)}
	var Pe=fa&&"documentMode"in document&&11>=document.documentMode,Qe=null,Re=null,Se=null,Te=!1;
	function Ue(a,b,c){var d=c.window===c?c.document:9===c.nodeType?c:c.ownerDocument;Te||null==Qe||Qe!==Xa(d)||(d=Qe,"selectionStart"in d&&Oe(d)?d={start:d.selectionStart,end:d.selectionEnd}:(d=(d.ownerDocument&&d.ownerDocument.defaultView||window).getSelection(),d={anchorNode:d.anchorNode,anchorOffset:d.anchorOffset,focusNode:d.focusNode,focusOffset:d.focusOffset}),Se&&Je(Se,d)||(Se=d,d=oe(Re,"onSelect"),0<d.length&&(b=new td("onSelect","select",null,b,c),a.push({event:b,listeners:d}),b.target=Qe)));}
	Pc("cancel cancel click click close close contextmenu contextMenu copy copy cut cut auxclick auxClick dblclick doubleClick dragend dragEnd dragstart dragStart drop drop focusin focus focusout blur input input invalid invalid keydown keyDown keypress keyPress keyup keyUp mousedown mouseDown mouseup mouseUp paste paste pause pause play play pointercancel pointerCancel pointerdown pointerDown pointerup pointerUp ratechange rateChange reset reset seeked seeked submit submit touchcancel touchCancel touchend touchEnd touchstart touchStart volumechange volumeChange".split(" "),
	0);Pc("drag drag dragenter dragEnter dragexit dragExit dragleave dragLeave dragover dragOver mousemove mouseMove mouseout mouseOut mouseover mouseOver pointermove pointerMove pointerout pointerOut pointerover pointerOver scroll scroll toggle toggle touchmove touchMove wheel wheel".split(" "),1);Pc(Oc,2);for(var Ve="change selectionchange textInput compositionstart compositionend compositionupdate".split(" "),We=0;We<Ve.length;We++)Nc.set(Ve[We],0);ea("onMouseEnter",["mouseout","mouseover"]);
	ea("onMouseLeave",["mouseout","mouseover"]);ea("onPointerEnter",["pointerout","pointerover"]);ea("onPointerLeave",["pointerout","pointerover"]);da("onChange","change click focusin focusout input keydown keyup selectionchange".split(" "));da("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" "));da("onBeforeInput",["compositionend","keypress","textInput","paste"]);da("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" "));
	da("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" "));da("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));var Xe="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Ye=new Set("cancel close invalid load scroll toggle".split(" ").concat(Xe));
	function Ze(a,b,c){var d=a.type||"unknown-event";a.currentTarget=c;Yb(d,b,void 0,a);a.currentTarget=null;}
	function se(a,b){b=0!==(b&4);for(var c=0;c<a.length;c++){var d=a[c],e=d.event;d=d.listeners;a:{var f=void 0;if(b)for(var g=d.length-1;0<=g;g--){var h=d[g],k=h.instance,l=h.currentTarget;h=h.listener;if(k!==f&&e.isPropagationStopped())break a;Ze(e,h,l);f=k;}else for(g=0;g<d.length;g++){h=d[g];k=h.instance;l=h.currentTarget;h=h.listener;if(k!==f&&e.isPropagationStopped())break a;Ze(e,h,l);f=k;}}}if(Ub)throw a=Vb,Ub=!1,Vb=null,a;}
	function G$1(a,b){var c=$e(b),d=a+"__bubble";c.has(d)||(af(b,a,2,!1),c.add(d));}var bf="_reactListening"+Math.random().toString(36).slice(2);function cf(a){a[bf]||(a[bf]=!0,ba.forEach(function(b){Ye.has(b)||df(b,!1,a,null);df(b,!0,a,null);}));}
	function df(a,b,c,d){var e=4<arguments.length&&void 0!==arguments[4]?arguments[4]:0,f=c;"selectionchange"===a&&9!==c.nodeType&&(f=c.ownerDocument);if(null!==d&&!b&&Ye.has(a)){if("scroll"!==a)return;e|=2;f=d;}var g=$e(f),h=a+"__"+(b?"capture":"bubble");g.has(h)||(b&&(e|=4),af(f,a,e,b),g.add(h));}
	function af(a,b,c,d){var e=Nc.get(b);switch(void 0===e?2:e){case 0:e=gd;break;case 1:e=id;break;default:e=hd;}c=e.bind(null,b,c,a);e=void 0;!Pb||"touchstart"!==b&&"touchmove"!==b&&"wheel"!==b||(e=!0);d?void 0!==e?a.addEventListener(b,c,{capture:!0,passive:e}):a.addEventListener(b,c,!0):void 0!==e?a.addEventListener(b,c,{passive:e}):a.addEventListener(b,c,!1);}
	function jd(a,b,c,d,e){var f=d;if(0===(b&1)&&0===(b&2)&&null!==d)a:for(;;){if(null===d)return;var g=d.tag;if(3===g||4===g){var h=d.stateNode.containerInfo;if(h===e||8===h.nodeType&&h.parentNode===e)break;if(4===g)for(g=d.return;null!==g;){var k=g.tag;if(3===k||4===k)if(k=g.stateNode.containerInfo,k===e||8===k.nodeType&&k.parentNode===e)return;g=g.return;}for(;null!==h;){g=wc(h);if(null===g)return;k=g.tag;if(5===k||6===k){d=f=g;continue a}h=h.parentNode;}}d=d.return;}Nb(function(){var d=f,e=xb(c),g=[];
	a:{var h=Mc.get(a);if(void 0!==h){var k=td,x=a;switch(a){case "keypress":if(0===od(c))break a;case "keydown":case "keyup":k=Rd;break;case "focusin":x="focus";k=Fd;break;case "focusout":x="blur";k=Fd;break;case "beforeblur":case "afterblur":k=Fd;break;case "click":if(2===c.button)break a;case "auxclick":case "dblclick":case "mousedown":case "mousemove":case "mouseup":case "mouseout":case "mouseover":case "contextmenu":k=Bd;break;case "drag":case "dragend":case "dragenter":case "dragexit":case "dragleave":case "dragover":case "dragstart":case "drop":k=
	Dd;break;case "touchcancel":case "touchend":case "touchmove":case "touchstart":k=Vd;break;case Ic:case Jc:case Kc:k=Hd;break;case Lc:k=Xd;break;case "scroll":k=vd;break;case "wheel":k=Zd;break;case "copy":case "cut":case "paste":k=Jd;break;case "gotpointercapture":case "lostpointercapture":case "pointercancel":case "pointerdown":case "pointermove":case "pointerout":case "pointerover":case "pointerup":k=Td;}var w=0!==(b&4),z=!w&&"scroll"===a,u=w?null!==h?h+"Capture":null:h;w=[];for(var t=d,q;null!==
	t;){q=t;var v=q.stateNode;5===q.tag&&null!==v&&(q=v,null!==u&&(v=Ob(t,u),null!=v&&w.push(ef(t,v,q))));if(z)break;t=t.return;}0<w.length&&(h=new k(h,x,null,c,e),g.push({event:h,listeners:w}));}}if(0===(b&7)){a:{h="mouseover"===a||"pointerover"===a;k="mouseout"===a||"pointerout"===a;if(h&&0===(b&16)&&(x=c.relatedTarget||c.fromElement)&&(wc(x)||x[ff]))break a;if(k||h){h=e.window===e?e:(h=e.ownerDocument)?h.defaultView||h.parentWindow:window;if(k){if(x=c.relatedTarget||c.toElement,k=d,x=x?wc(x):null,null!==
	x&&(z=Zb(x),x!==z||5!==x.tag&&6!==x.tag))x=null;}else k=null,x=d;if(k!==x){w=Bd;v="onMouseLeave";u="onMouseEnter";t="mouse";if("pointerout"===a||"pointerover"===a)w=Td,v="onPointerLeave",u="onPointerEnter",t="pointer";z=null==k?h:ue(k);q=null==x?h:ue(x);h=new w(v,t+"leave",k,c,e);h.target=z;h.relatedTarget=q;v=null;wc(e)===d&&(w=new w(u,t+"enter",x,c,e),w.target=q,w.relatedTarget=z,v=w);z=v;if(k&&x)b:{w=k;u=x;t=0;for(q=w;q;q=gf(q))t++;q=0;for(v=u;v;v=gf(v))q++;for(;0<t-q;)w=gf(w),t--;for(;0<q-t;)u=
	gf(u),q--;for(;t--;){if(w===u||null!==u&&w===u.alternate)break b;w=gf(w);u=gf(u);}w=null;}else w=null;null!==k&&hf(g,h,k,w,!1);null!==x&&null!==z&&hf(g,z,x,w,!0);}}}a:{h=d?ue(d):window;k=h.nodeName&&h.nodeName.toLowerCase();if("select"===k||"input"===k&&"file"===h.type)var J=ve;else if(me(h))if(we)J=Fe;else {J=De;var K=Ce;}else (k=h.nodeName)&&"input"===k.toLowerCase()&&("checkbox"===h.type||"radio"===h.type)&&(J=Ee);if(J&&(J=J(a,d))){ne(g,J,c,e);break a}K&&K(a,h,d);"focusout"===a&&(K=h._wrapperState)&&
	K.controlled&&"number"===h.type&&bb(h,"number",h.value);}K=d?ue(d):window;switch(a){case "focusin":if(me(K)||"true"===K.contentEditable)Qe=K,Re=d,Se=null;break;case "focusout":Se=Re=Qe=null;break;case "mousedown":Te=!0;break;case "contextmenu":case "mouseup":case "dragend":Te=!1;Ue(g,c,e);break;case "selectionchange":if(Pe)break;case "keydown":case "keyup":Ue(g,c,e);}var Q;if(ae)b:{switch(a){case "compositionstart":var L="onCompositionStart";break b;case "compositionend":L="onCompositionEnd";break b;
	case "compositionupdate":L="onCompositionUpdate";break b}L=void 0;}else ie?ge(a,c)&&(L="onCompositionEnd"):"keydown"===a&&229===c.keyCode&&(L="onCompositionStart");L&&(de&&"ko"!==c.locale&&(ie||"onCompositionStart"!==L?"onCompositionEnd"===L&&ie&&(Q=nd()):(kd=e,ld="value"in kd?kd.value:kd.textContent,ie=!0)),K=oe(d,L),0<K.length&&(L=new Ld(L,a,null,c,e),g.push({event:L,listeners:K}),Q?L.data=Q:(Q=he(c),null!==Q&&(L.data=Q))));if(Q=ce?je(a,c):ke(a,c))d=oe(d,"onBeforeInput"),0<d.length&&(e=new Ld("onBeforeInput",
	"beforeinput",null,c,e),g.push({event:e,listeners:d}),e.data=Q);}se(g,b);});}function ef(a,b,c){return {instance:a,listener:b,currentTarget:c}}function oe(a,b){for(var c=b+"Capture",d=[];null!==a;){var e=a,f=e.stateNode;5===e.tag&&null!==f&&(e=f,f=Ob(a,c),null!=f&&d.unshift(ef(a,f,e)),f=Ob(a,b),null!=f&&d.push(ef(a,f,e)));a=a.return;}return d}function gf(a){if(null===a)return null;do a=a.return;while(a&&5!==a.tag);return a?a:null}
	function hf(a,b,c,d,e){for(var f=b._reactName,g=[];null!==c&&c!==d;){var h=c,k=h.alternate,l=h.stateNode;if(null!==k&&k===d)break;5===h.tag&&null!==l&&(h=l,e?(k=Ob(c,f),null!=k&&g.unshift(ef(c,k,h))):e||(k=Ob(c,f),null!=k&&g.push(ef(c,k,h))));c=c.return;}0!==g.length&&a.push({event:b,listeners:g});}function jf(){}var kf=null,lf=null;function mf(a,b){switch(a){case "button":case "input":case "select":case "textarea":return !!b.autoFocus}return !1}
	function nf(a,b){return "textarea"===a||"option"===a||"noscript"===a||"string"===typeof b.children||"number"===typeof b.children||"object"===typeof b.dangerouslySetInnerHTML&&null!==b.dangerouslySetInnerHTML&&null!=b.dangerouslySetInnerHTML.__html}var of="function"===typeof setTimeout?setTimeout:void 0,pf="function"===typeof clearTimeout?clearTimeout:void 0;function qf(a){1===a.nodeType?a.textContent="":9===a.nodeType&&(a=a.body,null!=a&&(a.textContent=""));}
	function rf(a){for(;null!=a;a=a.nextSibling){var b=a.nodeType;if(1===b||3===b)break}return a}function sf(a){a=a.previousSibling;for(var b=0;a;){if(8===a.nodeType){var c=a.data;if("$"===c||"$!"===c||"$?"===c){if(0===b)return a;b--;}else "/$"===c&&b++;}a=a.previousSibling;}return null}var tf=0;function uf(a){return {$$typeof:Ga,toString:a,valueOf:a}}var vf=Math.random().toString(36).slice(2),wf="__reactFiber$"+vf,xf="__reactProps$"+vf,ff="__reactContainer$"+vf,yf="__reactEvents$"+vf;
	function wc(a){var b=a[wf];if(b)return b;for(var c=a.parentNode;c;){if(b=c[ff]||c[wf]){c=b.alternate;if(null!==b.child||null!==c&&null!==c.child)for(a=sf(a);null!==a;){if(c=a[wf])return c;a=sf(a);}return b}a=c;c=a.parentNode;}return null}function Cb(a){a=a[wf]||a[ff];return !a||5!==a.tag&&6!==a.tag&&13!==a.tag&&3!==a.tag?null:a}function ue(a){if(5===a.tag||6===a.tag)return a.stateNode;throw Error(y$1(33));}function Db(a){return a[xf]||null}
	function $e(a){var b=a[yf];void 0===b&&(b=a[yf]=new Set);return b}var zf=[],Af=-1;function Bf(a){return {current:a}}function H$1(a){0>Af||(a.current=zf[Af],zf[Af]=null,Af--);}function I$1(a,b){Af++;zf[Af]=a.current;a.current=b;}var Cf={},M=Bf(Cf),N=Bf(!1),Df=Cf;
	function Ef(a,b){var c=a.type.contextTypes;if(!c)return Cf;var d=a.stateNode;if(d&&d.__reactInternalMemoizedUnmaskedChildContext===b)return d.__reactInternalMemoizedMaskedChildContext;var e={},f;for(f in c)e[f]=b[f];d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=b,a.__reactInternalMemoizedMaskedChildContext=e);return e}function Ff(a){a=a.childContextTypes;return null!==a&&void 0!==a}function Gf(){H$1(N);H$1(M);}function Hf(a,b,c){if(M.current!==Cf)throw Error(y$1(168));I$1(M,b);I$1(N,c);}
	function If(a,b,c){var d=a.stateNode;a=b.childContextTypes;if("function"!==typeof d.getChildContext)return c;d=d.getChildContext();for(var e in d)if(!(e in a))throw Error(y$1(108,Ra(b)||"Unknown",e));return m$1({},c,d)}function Jf(a){a=(a=a.stateNode)&&a.__reactInternalMemoizedMergedChildContext||Cf;Df=M.current;I$1(M,a);I$1(N,N.current);return !0}function Kf(a,b,c){var d=a.stateNode;if(!d)throw Error(y$1(169));c?(a=If(a,b,Df),d.__reactInternalMemoizedMergedChildContext=a,H$1(N),H$1(M),I$1(M,a)):H$1(N);I$1(N,c);}
	var Lf=null,Mf=null,Nf=r$1.unstable_runWithPriority,Of=r$1.unstable_scheduleCallback,Pf=r$1.unstable_cancelCallback,Qf=r$1.unstable_shouldYield,Rf=r$1.unstable_requestPaint,Sf=r$1.unstable_now,Tf=r$1.unstable_getCurrentPriorityLevel,Uf=r$1.unstable_ImmediatePriority,Vf=r$1.unstable_UserBlockingPriority,Wf=r$1.unstable_NormalPriority,Xf=r$1.unstable_LowPriority,Yf=r$1.unstable_IdlePriority,Zf={},$f=void 0!==Rf?Rf:function(){},ag=null,bg=null,cg=!1,dg=Sf(),O=1E4>dg?Sf:function(){return Sf()-dg};
	function eg(){switch(Tf()){case Uf:return 99;case Vf:return 98;case Wf:return 97;case Xf:return 96;case Yf:return 95;default:throw Error(y$1(332));}}function fg(a){switch(a){case 99:return Uf;case 98:return Vf;case 97:return Wf;case 96:return Xf;case 95:return Yf;default:throw Error(y$1(332));}}function gg(a,b){a=fg(a);return Nf(a,b)}function hg(a,b,c){a=fg(a);return Of(a,b,c)}function ig(){if(null!==bg){var a=bg;bg=null;Pf(a);}jg();}
	function jg(){if(!cg&&null!==ag){cg=!0;var a=0;try{var b=ag;gg(99,function(){for(;a<b.length;a++){var c=b[a];do c=c(!0);while(null!==c)}});ag=null;}catch(c){throw null!==ag&&(ag=ag.slice(a+1)),Of(Uf,ig),c;}finally{cg=!1;}}}var kg=ra.ReactCurrentBatchConfig;function lg(a,b){if(a&&a.defaultProps){b=m$1({},b);a=a.defaultProps;for(var c in a)void 0===b[c]&&(b[c]=a[c]);return b}return b}var mg=Bf(null),ng=null,og=null,pg=null;function qg(){pg=og=ng=null;}
	function rg(a){var b=mg.current;H$1(mg);a.type._context._currentValue=b;}function sg(a,b){for(;null!==a;){var c=a.alternate;if((a.childLanes&b)===b)if(null===c||(c.childLanes&b)===b)break;else c.childLanes|=b;else a.childLanes|=b,null!==c&&(c.childLanes|=b);a=a.return;}}function tg(a,b){ng=a;pg=og=null;a=a.dependencies;null!==a&&null!==a.firstContext&&(0!==(a.lanes&b)&&(ug=!0),a.firstContext=null);}
	function vg(a,b){if(pg!==a&&!1!==b&&0!==b){if("number"!==typeof b||1073741823===b)pg=a,b=1073741823;b={context:a,observedBits:b,next:null};if(null===og){if(null===ng)throw Error(y$1(308));og=b;ng.dependencies={lanes:0,firstContext:b,responders:null};}else og=og.next=b;}return a._currentValue}var wg=!1;function xg(a){a.updateQueue={baseState:a.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null},effects:null};}
	function yg(a,b){a=a.updateQueue;b.updateQueue===a&&(b.updateQueue={baseState:a.baseState,firstBaseUpdate:a.firstBaseUpdate,lastBaseUpdate:a.lastBaseUpdate,shared:a.shared,effects:a.effects});}function zg(a,b){return {eventTime:a,lane:b,tag:0,payload:null,callback:null,next:null}}function Ag(a,b){a=a.updateQueue;if(null!==a){a=a.shared;var c=a.pending;null===c?b.next=b:(b.next=c.next,c.next=b);a.pending=b;}}
	function Bg(a,b){var c=a.updateQueue,d=a.alternate;if(null!==d&&(d=d.updateQueue,c===d)){var e=null,f=null;c=c.firstBaseUpdate;if(null!==c){do{var g={eventTime:c.eventTime,lane:c.lane,tag:c.tag,payload:c.payload,callback:c.callback,next:null};null===f?e=f=g:f=f.next=g;c=c.next;}while(null!==c);null===f?e=f=b:f=f.next=b;}else e=f=b;c={baseState:d.baseState,firstBaseUpdate:e,lastBaseUpdate:f,shared:d.shared,effects:d.effects};a.updateQueue=c;return}a=c.lastBaseUpdate;null===a?c.firstBaseUpdate=b:a.next=
	b;c.lastBaseUpdate=b;}
	function Cg(a,b,c,d){var e=a.updateQueue;wg=!1;var f=e.firstBaseUpdate,g=e.lastBaseUpdate,h=e.shared.pending;if(null!==h){e.shared.pending=null;var k=h,l=k.next;k.next=null;null===g?f=l:g.next=l;g=k;var n=a.alternate;if(null!==n){n=n.updateQueue;var A=n.lastBaseUpdate;A!==g&&(null===A?n.firstBaseUpdate=l:A.next=l,n.lastBaseUpdate=k);}}if(null!==f){A=e.baseState;g=0;n=l=k=null;do{h=f.lane;var p=f.eventTime;if((d&h)===h){null!==n&&(n=n.next={eventTime:p,lane:0,tag:f.tag,payload:f.payload,callback:f.callback,
	next:null});a:{var C=a,x=f;h=b;p=c;switch(x.tag){case 1:C=x.payload;if("function"===typeof C){A=C.call(p,A,h);break a}A=C;break a;case 3:C.flags=C.flags&-4097|64;case 0:C=x.payload;h="function"===typeof C?C.call(p,A,h):C;if(null===h||void 0===h)break a;A=m$1({},A,h);break a;case 2:wg=!0;}}null!==f.callback&&(a.flags|=32,h=e.effects,null===h?e.effects=[f]:h.push(f));}else p={eventTime:p,lane:h,tag:f.tag,payload:f.payload,callback:f.callback,next:null},null===n?(l=n=p,k=A):n=n.next=p,g|=h;f=f.next;if(null===
	f)if(h=e.shared.pending,null===h)break;else f=h.next,h.next=null,e.lastBaseUpdate=h,e.shared.pending=null;}while(1);null===n&&(k=A);e.baseState=k;e.firstBaseUpdate=l;e.lastBaseUpdate=n;Dg|=g;a.lanes=g;a.memoizedState=A;}}function Eg(a,b,c){a=b.effects;b.effects=null;if(null!==a)for(b=0;b<a.length;b++){var d=a[b],e=d.callback;if(null!==e){d.callback=null;d=c;if("function"!==typeof e)throw Error(y$1(191,e));e.call(d);}}}var Fg=(new aa.Component).refs;
	function Gg(a,b,c,d){b=a.memoizedState;c=c(d,b);c=null===c||void 0===c?b:m$1({},b,c);a.memoizedState=c;0===a.lanes&&(a.updateQueue.baseState=c);}
	var Kg={isMounted:function(a){return (a=a._reactInternals)?Zb(a)===a:!1},enqueueSetState:function(a,b,c){a=a._reactInternals;var d=Hg(),e=Ig(a),f=zg(d,e);f.payload=b;void 0!==c&&null!==c&&(f.callback=c);Ag(a,f);Jg(a,e,d);},enqueueReplaceState:function(a,b,c){a=a._reactInternals;var d=Hg(),e=Ig(a),f=zg(d,e);f.tag=1;f.payload=b;void 0!==c&&null!==c&&(f.callback=c);Ag(a,f);Jg(a,e,d);},enqueueForceUpdate:function(a,b){a=a._reactInternals;var c=Hg(),d=Ig(a),e=zg(c,d);e.tag=2;void 0!==b&&null!==b&&(e.callback=
	b);Ag(a,e);Jg(a,d,c);}};function Lg(a,b,c,d,e,f,g){a=a.stateNode;return "function"===typeof a.shouldComponentUpdate?a.shouldComponentUpdate(d,f,g):b.prototype&&b.prototype.isPureReactComponent?!Je(c,d)||!Je(e,f):!0}
	function Mg(a,b,c){var d=!1,e=Cf;var f=b.contextType;"object"===typeof f&&null!==f?f=vg(f):(e=Ff(b)?Df:M.current,d=b.contextTypes,f=(d=null!==d&&void 0!==d)?Ef(a,e):Cf);b=new b(c,f);a.memoizedState=null!==b.state&&void 0!==b.state?b.state:null;b.updater=Kg;a.stateNode=b;b._reactInternals=a;d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=e,a.__reactInternalMemoizedMaskedChildContext=f);return b}
	function Ng(a,b,c,d){a=b.state;"function"===typeof b.componentWillReceiveProps&&b.componentWillReceiveProps(c,d);"function"===typeof b.UNSAFE_componentWillReceiveProps&&b.UNSAFE_componentWillReceiveProps(c,d);b.state!==a&&Kg.enqueueReplaceState(b,b.state,null);}
	function Og(a,b,c,d){var e=a.stateNode;e.props=c;e.state=a.memoizedState;e.refs=Fg;xg(a);var f=b.contextType;"object"===typeof f&&null!==f?e.context=vg(f):(f=Ff(b)?Df:M.current,e.context=Ef(a,f));Cg(a,c,e,d);e.state=a.memoizedState;f=b.getDerivedStateFromProps;"function"===typeof f&&(Gg(a,b,f,c),e.state=a.memoizedState);"function"===typeof b.getDerivedStateFromProps||"function"===typeof e.getSnapshotBeforeUpdate||"function"!==typeof e.UNSAFE_componentWillMount&&"function"!==typeof e.componentWillMount||
	(b=e.state,"function"===typeof e.componentWillMount&&e.componentWillMount(),"function"===typeof e.UNSAFE_componentWillMount&&e.UNSAFE_componentWillMount(),b!==e.state&&Kg.enqueueReplaceState(e,e.state,null),Cg(a,c,e,d),e.state=a.memoizedState);"function"===typeof e.componentDidMount&&(a.flags|=4);}var Pg=Array.isArray;
	function Qg(a,b,c){a=c.ref;if(null!==a&&"function"!==typeof a&&"object"!==typeof a){if(c._owner){c=c._owner;if(c){if(1!==c.tag)throw Error(y$1(309));var d=c.stateNode;}if(!d)throw Error(y$1(147,a));var e=""+a;if(null!==b&&null!==b.ref&&"function"===typeof b.ref&&b.ref._stringRef===e)return b.ref;b=function(a){var b=d.refs;b===Fg&&(b=d.refs={});null===a?delete b[e]:b[e]=a;};b._stringRef=e;return b}if("string"!==typeof a)throw Error(y$1(284));if(!c._owner)throw Error(y$1(290,a));}return a}
	function Rg(a,b){if("textarea"!==a.type)throw Error(y$1(31,"[object Object]"===Object.prototype.toString.call(b)?"object with keys {"+Object.keys(b).join(", ")+"}":b));}
	function Sg(a){function b(b,c){if(a){var d=b.lastEffect;null!==d?(d.nextEffect=c,b.lastEffect=c):b.firstEffect=b.lastEffect=c;c.nextEffect=null;c.flags=8;}}function c(c,d){if(!a)return null;for(;null!==d;)b(c,d),d=d.sibling;return null}function d(a,b){for(a=new Map;null!==b;)null!==b.key?a.set(b.key,b):a.set(b.index,b),b=b.sibling;return a}function e(a,b){a=Tg(a,b);a.index=0;a.sibling=null;return a}function f(b,c,d){b.index=d;if(!a)return c;d=b.alternate;if(null!==d)return d=d.index,d<c?(b.flags=2,
	c):d;b.flags=2;return c}function g(b){a&&null===b.alternate&&(b.flags=2);return b}function h(a,b,c,d){if(null===b||6!==b.tag)return b=Ug(c,a.mode,d),b.return=a,b;b=e(b,c);b.return=a;return b}function k(a,b,c,d){if(null!==b&&b.elementType===c.type)return d=e(b,c.props),d.ref=Qg(a,b,c),d.return=a,d;d=Vg(c.type,c.key,c.props,null,a.mode,d);d.ref=Qg(a,b,c);d.return=a;return d}function l(a,b,c,d){if(null===b||4!==b.tag||b.stateNode.containerInfo!==c.containerInfo||b.stateNode.implementation!==c.implementation)return b=
	Wg(c,a.mode,d),b.return=a,b;b=e(b,c.children||[]);b.return=a;return b}function n(a,b,c,d,f){if(null===b||7!==b.tag)return b=Xg(c,a.mode,d,f),b.return=a,b;b=e(b,c);b.return=a;return b}function A(a,b,c){if("string"===typeof b||"number"===typeof b)return b=Ug(""+b,a.mode,c),b.return=a,b;if("object"===typeof b&&null!==b){switch(b.$$typeof){case sa:return c=Vg(b.type,b.key,b.props,null,a.mode,c),c.ref=Qg(a,null,b),c.return=a,c;case ta:return b=Wg(b,a.mode,c),b.return=a,b}if(Pg(b)||La(b))return b=Xg(b,
	a.mode,c,null),b.return=a,b;Rg(a,b);}return null}function p(a,b,c,d){var e=null!==b?b.key:null;if("string"===typeof c||"number"===typeof c)return null!==e?null:h(a,b,""+c,d);if("object"===typeof c&&null!==c){switch(c.$$typeof){case sa:return c.key===e?c.type===ua?n(a,b,c.props.children,d,e):k(a,b,c,d):null;case ta:return c.key===e?l(a,b,c,d):null}if(Pg(c)||La(c))return null!==e?null:n(a,b,c,d,null);Rg(a,c);}return null}function C(a,b,c,d,e){if("string"===typeof d||"number"===typeof d)return a=a.get(c)||
	null,h(b,a,""+d,e);if("object"===typeof d&&null!==d){switch(d.$$typeof){case sa:return a=a.get(null===d.key?c:d.key)||null,d.type===ua?n(b,a,d.props.children,e,d.key):k(b,a,d,e);case ta:return a=a.get(null===d.key?c:d.key)||null,l(b,a,d,e)}if(Pg(d)||La(d))return a=a.get(c)||null,n(b,a,d,e,null);Rg(b,d);}return null}function x(e,g,h,k){for(var l=null,t=null,u=g,z=g=0,q=null;null!==u&&z<h.length;z++){u.index>z?(q=u,u=null):q=u.sibling;var n=p(e,u,h[z],k);if(null===n){null===u&&(u=q);break}a&&u&&null===
	n.alternate&&b(e,u);g=f(n,g,z);null===t?l=n:t.sibling=n;t=n;u=q;}if(z===h.length)return c(e,u),l;if(null===u){for(;z<h.length;z++)u=A(e,h[z],k),null!==u&&(g=f(u,g,z),null===t?l=u:t.sibling=u,t=u);return l}for(u=d(e,u);z<h.length;z++)q=C(u,e,z,h[z],k),null!==q&&(a&&null!==q.alternate&&u.delete(null===q.key?z:q.key),g=f(q,g,z),null===t?l=q:t.sibling=q,t=q);a&&u.forEach(function(a){return b(e,a)});return l}function w(e,g,h,k){var l=La(h);if("function"!==typeof l)throw Error(y$1(150));h=l.call(h);if(null==
	h)throw Error(y$1(151));for(var t=l=null,u=g,z=g=0,q=null,n=h.next();null!==u&&!n.done;z++,n=h.next()){u.index>z?(q=u,u=null):q=u.sibling;var w=p(e,u,n.value,k);if(null===w){null===u&&(u=q);break}a&&u&&null===w.alternate&&b(e,u);g=f(w,g,z);null===t?l=w:t.sibling=w;t=w;u=q;}if(n.done)return c(e,u),l;if(null===u){for(;!n.done;z++,n=h.next())n=A(e,n.value,k),null!==n&&(g=f(n,g,z),null===t?l=n:t.sibling=n,t=n);return l}for(u=d(e,u);!n.done;z++,n=h.next())n=C(u,e,z,n.value,k),null!==n&&(a&&null!==n.alternate&&
	u.delete(null===n.key?z:n.key),g=f(n,g,z),null===t?l=n:t.sibling=n,t=n);a&&u.forEach(function(a){return b(e,a)});return l}return function(a,d,f,h){var k="object"===typeof f&&null!==f&&f.type===ua&&null===f.key;k&&(f=f.props.children);var l="object"===typeof f&&null!==f;if(l)switch(f.$$typeof){case sa:a:{l=f.key;for(k=d;null!==k;){if(k.key===l){switch(k.tag){case 7:if(f.type===ua){c(a,k.sibling);d=e(k,f.props.children);d.return=a;a=d;break a}break;default:if(k.elementType===f.type){c(a,k.sibling);
	d=e(k,f.props);d.ref=Qg(a,k,f);d.return=a;a=d;break a}}c(a,k);break}else b(a,k);k=k.sibling;}f.type===ua?(d=Xg(f.props.children,a.mode,h,f.key),d.return=a,a=d):(h=Vg(f.type,f.key,f.props,null,a.mode,h),h.ref=Qg(a,d,f),h.return=a,a=h);}return g(a);case ta:a:{for(k=f.key;null!==d;){if(d.key===k)if(4===d.tag&&d.stateNode.containerInfo===f.containerInfo&&d.stateNode.implementation===f.implementation){c(a,d.sibling);d=e(d,f.children||[]);d.return=a;a=d;break a}else {c(a,d);break}else b(a,d);d=d.sibling;}d=
	Wg(f,a.mode,h);d.return=a;a=d;}return g(a)}if("string"===typeof f||"number"===typeof f)return f=""+f,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,f),d.return=a,a=d):(c(a,d),d=Ug(f,a.mode,h),d.return=a,a=d),g(a);if(Pg(f))return x(a,d,f,h);if(La(f))return w(a,d,f,h);l&&Rg(a,f);if("undefined"===typeof f&&!k)switch(a.tag){case 1:case 22:case 0:case 11:case 15:throw Error(y$1(152,Ra(a.type)||"Component"));}return c(a,d)}}var Yg=Sg(!0),Zg=Sg(!1),$g={},ah=Bf($g),bh=Bf($g),ch=Bf($g);
	function dh(a){if(a===$g)throw Error(y$1(174));return a}function eh(a,b){I$1(ch,b);I$1(bh,a);I$1(ah,$g);a=b.nodeType;switch(a){case 9:case 11:b=(b=b.documentElement)?b.namespaceURI:mb(null,"");break;default:a=8===a?b.parentNode:b,b=a.namespaceURI||null,a=a.tagName,b=mb(b,a);}H$1(ah);I$1(ah,b);}function fh(){H$1(ah);H$1(bh);H$1(ch);}function gh(a){dh(ch.current);var b=dh(ah.current);var c=mb(b,a.type);b!==c&&(I$1(bh,a),I$1(ah,c));}function hh(a){bh.current===a&&(H$1(ah),H$1(bh));}var P=Bf(0);
	function ih(a){for(var b=a;null!==b;){if(13===b.tag){var c=b.memoizedState;if(null!==c&&(c=c.dehydrated,null===c||"$?"===c.data||"$!"===c.data))return b}else if(19===b.tag&&void 0!==b.memoizedProps.revealOrder){if(0!==(b.flags&64))return b}else if(null!==b.child){b.child.return=b;b=b.child;continue}if(b===a)break;for(;null===b.sibling;){if(null===b.return||b.return===a)return null;b=b.return;}b.sibling.return=b.return;b=b.sibling;}return null}var jh=null,kh=null,lh=!1;
	function mh(a,b){var c=nh(5,null,null,0);c.elementType="DELETED";c.type="DELETED";c.stateNode=b;c.return=a;c.flags=8;null!==a.lastEffect?(a.lastEffect.nextEffect=c,a.lastEffect=c):a.firstEffect=a.lastEffect=c;}function oh(a,b){switch(a.tag){case 5:var c=a.type;b=1!==b.nodeType||c.toLowerCase()!==b.nodeName.toLowerCase()?null:b;return null!==b?(a.stateNode=b,!0):!1;case 6:return b=""===a.pendingProps||3!==b.nodeType?null:b,null!==b?(a.stateNode=b,!0):!1;case 13:return !1;default:return !1}}
	function ph(a){if(lh){var b=kh;if(b){var c=b;if(!oh(a,b)){b=rf(c.nextSibling);if(!b||!oh(a,b)){a.flags=a.flags&-1025|2;lh=!1;jh=a;return}mh(jh,c);}jh=a;kh=rf(b.firstChild);}else a.flags=a.flags&-1025|2,lh=!1,jh=a;}}function qh(a){for(a=a.return;null!==a&&5!==a.tag&&3!==a.tag&&13!==a.tag;)a=a.return;jh=a;}
	function rh(a){if(a!==jh)return !1;if(!lh)return qh(a),lh=!0,!1;var b=a.type;if(5!==a.tag||"head"!==b&&"body"!==b&&!nf(b,a.memoizedProps))for(b=kh;b;)mh(a,b),b=rf(b.nextSibling);qh(a);if(13===a.tag){a=a.memoizedState;a=null!==a?a.dehydrated:null;if(!a)throw Error(y$1(317));a:{a=a.nextSibling;for(b=0;a;){if(8===a.nodeType){var c=a.data;if("/$"===c){if(0===b){kh=rf(a.nextSibling);break a}b--;}else "$"!==c&&"$!"!==c&&"$?"!==c||b++;}a=a.nextSibling;}kh=null;}}else kh=jh?rf(a.stateNode.nextSibling):null;return !0}
	function sh(){kh=jh=null;lh=!1;}var th=[];function uh(){for(var a=0;a<th.length;a++)th[a]._workInProgressVersionPrimary=null;th.length=0;}var vh=ra.ReactCurrentDispatcher,wh=ra.ReactCurrentBatchConfig,xh=0,R=null,S=null,T=null,yh=!1,zh=!1;function Ah(){throw Error(y$1(321));}function Bh(a,b){if(null===b)return !1;for(var c=0;c<b.length&&c<a.length;c++)if(!He(a[c],b[c]))return !1;return !0}
	function Ch(a,b,c,d,e,f){xh=f;R=b;b.memoizedState=null;b.updateQueue=null;b.lanes=0;vh.current=null===a||null===a.memoizedState?Dh:Eh;a=c(d,e);if(zh){f=0;do{zh=!1;if(!(25>f))throw Error(y$1(301));f+=1;T=S=null;b.updateQueue=null;vh.current=Fh;a=c(d,e);}while(zh)}vh.current=Gh;b=null!==S&&null!==S.next;xh=0;T=S=R=null;yh=!1;if(b)throw Error(y$1(300));return a}function Hh(){var a={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};null===T?R.memoizedState=T=a:T=T.next=a;return T}
	function Ih(){if(null===S){var a=R.alternate;a=null!==a?a.memoizedState:null;}else a=S.next;var b=null===T?R.memoizedState:T.next;if(null!==b)T=b,S=a;else {if(null===a)throw Error(y$1(310));S=a;a={memoizedState:S.memoizedState,baseState:S.baseState,baseQueue:S.baseQueue,queue:S.queue,next:null};null===T?R.memoizedState=T=a:T=T.next=a;}return T}function Jh(a,b){return "function"===typeof b?b(a):b}
	function Kh(a){var b=Ih(),c=b.queue;if(null===c)throw Error(y$1(311));c.lastRenderedReducer=a;var d=S,e=d.baseQueue,f=c.pending;if(null!==f){if(null!==e){var g=e.next;e.next=f.next;f.next=g;}d.baseQueue=e=f;c.pending=null;}if(null!==e){e=e.next;d=d.baseState;var h=g=f=null,k=e;do{var l=k.lane;if((xh&l)===l)null!==h&&(h=h.next={lane:0,action:k.action,eagerReducer:k.eagerReducer,eagerState:k.eagerState,next:null}),d=k.eagerReducer===a?k.eagerState:a(d,k.action);else {var n={lane:l,action:k.action,eagerReducer:k.eagerReducer,
	eagerState:k.eagerState,next:null};null===h?(g=h=n,f=d):h=h.next=n;R.lanes|=l;Dg|=l;}k=k.next;}while(null!==k&&k!==e);null===h?f=d:h.next=g;He(d,b.memoizedState)||(ug=!0);b.memoizedState=d;b.baseState=f;b.baseQueue=h;c.lastRenderedState=d;}return [b.memoizedState,c.dispatch]}
	function Lh(a){var b=Ih(),c=b.queue;if(null===c)throw Error(y$1(311));c.lastRenderedReducer=a;var d=c.dispatch,e=c.pending,f=b.memoizedState;if(null!==e){c.pending=null;var g=e=e.next;do f=a(f,g.action),g=g.next;while(g!==e);He(f,b.memoizedState)||(ug=!0);b.memoizedState=f;null===b.baseQueue&&(b.baseState=f);c.lastRenderedState=f;}return [f,d]}
	function Mh(a,b,c){var d=b._getVersion;d=d(b._source);var e=b._workInProgressVersionPrimary;if(null!==e)a=e===d;else if(a=a.mutableReadLanes,a=(xh&a)===a)b._workInProgressVersionPrimary=d,th.push(b);if(a)return c(b._source);th.push(b);throw Error(y$1(350));}
	function Nh(a,b,c,d){var e=U;if(null===e)throw Error(y$1(349));var f=b._getVersion,g=f(b._source),h=vh.current,k=h.useState(function(){return Mh(e,b,c)}),l=k[1],n=k[0];k=T;var A=a.memoizedState,p=A.refs,C=p.getSnapshot,x=A.source;A=A.subscribe;var w=R;a.memoizedState={refs:p,source:b,subscribe:d};h.useEffect(function(){p.getSnapshot=c;p.setSnapshot=l;var a=f(b._source);if(!He(g,a)){a=c(b._source);He(n,a)||(l(a),a=Ig(w),e.mutableReadLanes|=a&e.pendingLanes);a=e.mutableReadLanes;e.entangledLanes|=a;for(var d=
	e.entanglements,h=a;0<h;){var k=31-Vc(h),v=1<<k;d[k]|=a;h&=~v;}}},[c,b,d]);h.useEffect(function(){return d(b._source,function(){var a=p.getSnapshot,c=p.setSnapshot;try{c(a(b._source));var d=Ig(w);e.mutableReadLanes|=d&e.pendingLanes;}catch(q){c(function(){throw q;});}})},[b,d]);He(C,c)&&He(x,b)&&He(A,d)||(a={pending:null,dispatch:null,lastRenderedReducer:Jh,lastRenderedState:n},a.dispatch=l=Oh.bind(null,R,a),k.queue=a,k.baseQueue=null,n=Mh(e,b,c),k.memoizedState=k.baseState=n);return n}
	function Ph(a,b,c){var d=Ih();return Nh(d,a,b,c)}function Qh(a){var b=Hh();"function"===typeof a&&(a=a());b.memoizedState=b.baseState=a;a=b.queue={pending:null,dispatch:null,lastRenderedReducer:Jh,lastRenderedState:a};a=a.dispatch=Oh.bind(null,R,a);return [b.memoizedState,a]}
	function Rh(a,b,c,d){a={tag:a,create:b,destroy:c,deps:d,next:null};b=R.updateQueue;null===b?(b={lastEffect:null},R.updateQueue=b,b.lastEffect=a.next=a):(c=b.lastEffect,null===c?b.lastEffect=a.next=a:(d=c.next,c.next=a,a.next=d,b.lastEffect=a));return a}function Sh(a){var b=Hh();a={current:a};return b.memoizedState=a}function Th(){return Ih().memoizedState}function Uh(a,b,c,d){var e=Hh();R.flags|=a;e.memoizedState=Rh(1|b,c,void 0,void 0===d?null:d);}
	function Vh(a,b,c,d){var e=Ih();d=void 0===d?null:d;var f=void 0;if(null!==S){var g=S.memoizedState;f=g.destroy;if(null!==d&&Bh(d,g.deps)){Rh(b,c,f,d);return}}R.flags|=a;e.memoizedState=Rh(1|b,c,f,d);}function Wh(a,b){return Uh(516,4,a,b)}function Xh(a,b){return Vh(516,4,a,b)}function Yh(a,b){return Vh(4,2,a,b)}function Zh(a,b){if("function"===typeof b)return a=a(),b(a),function(){b(null);};if(null!==b&&void 0!==b)return a=a(),b.current=a,function(){b.current=null;}}
	function $h(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):null;return Vh(4,2,Zh.bind(null,b,a),c)}function ai(){}function bi(a,b){var c=Ih();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&Bh(b,d[1]))return d[0];c.memoizedState=[a,b];return a}function ci(a,b){var c=Ih();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&Bh(b,d[1]))return d[0];a=a();c.memoizedState=[a,b];return a}
	function di(a,b){var c=eg();gg(98>c?98:c,function(){a(!0);});gg(97<c?97:c,function(){var c=wh.transition;wh.transition=1;try{a(!1),b();}finally{wh.transition=c;}});}
	function Oh(a,b,c){var d=Hg(),e=Ig(a),f={lane:e,action:c,eagerReducer:null,eagerState:null,next:null},g=b.pending;null===g?f.next=f:(f.next=g.next,g.next=f);b.pending=f;g=a.alternate;if(a===R||null!==g&&g===R)zh=yh=!0;else {if(0===a.lanes&&(null===g||0===g.lanes)&&(g=b.lastRenderedReducer,null!==g))try{var h=b.lastRenderedState,k=g(h,c);f.eagerReducer=g;f.eagerState=k;if(He(k,h))return}catch(l){}finally{}Jg(a,e,d);}}
	var Gh={readContext:vg,useCallback:Ah,useContext:Ah,useEffect:Ah,useImperativeHandle:Ah,useLayoutEffect:Ah,useMemo:Ah,useReducer:Ah,useRef:Ah,useState:Ah,useDebugValue:Ah,useDeferredValue:Ah,useTransition:Ah,useMutableSource:Ah,useOpaqueIdentifier:Ah,unstable_isNewReconciler:!1},Dh={readContext:vg,useCallback:function(a,b){Hh().memoizedState=[a,void 0===b?null:b];return a},useContext:vg,useEffect:Wh,useImperativeHandle:function(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):null;return Uh(4,2,Zh.bind(null,
	b,a),c)},useLayoutEffect:function(a,b){return Uh(4,2,a,b)},useMemo:function(a,b){var c=Hh();b=void 0===b?null:b;a=a();c.memoizedState=[a,b];return a},useReducer:function(a,b,c){var d=Hh();b=void 0!==c?c(b):b;d.memoizedState=d.baseState=b;a=d.queue={pending:null,dispatch:null,lastRenderedReducer:a,lastRenderedState:b};a=a.dispatch=Oh.bind(null,R,a);return [d.memoizedState,a]},useRef:Sh,useState:Qh,useDebugValue:ai,useDeferredValue:function(a){var b=Qh(a),c=b[0],d=b[1];Wh(function(){var b=wh.transition;
	wh.transition=1;try{d(a);}finally{wh.transition=b;}},[a]);return c},useTransition:function(){var a=Qh(!1),b=a[0];a=di.bind(null,a[1]);Sh(a);return [a,b]},useMutableSource:function(a,b,c){var d=Hh();d.memoizedState={refs:{getSnapshot:b,setSnapshot:null},source:a,subscribe:c};return Nh(d,a,b,c)},useOpaqueIdentifier:function(){if(lh){var a=!1,b=uf(function(){a||(a=!0,c("r:"+(tf++).toString(36)));throw Error(y$1(355));}),c=Qh(b)[1];0===(R.mode&2)&&(R.flags|=516,Rh(5,function(){c("r:"+(tf++).toString(36));},
	void 0,null));return b}b="r:"+(tf++).toString(36);Qh(b);return b},unstable_isNewReconciler:!1},Eh={readContext:vg,useCallback:bi,useContext:vg,useEffect:Xh,useImperativeHandle:$h,useLayoutEffect:Yh,useMemo:ci,useReducer:Kh,useRef:Th,useState:function(){return Kh(Jh)},useDebugValue:ai,useDeferredValue:function(a){var b=Kh(Jh),c=b[0],d=b[1];Xh(function(){var b=wh.transition;wh.transition=1;try{d(a);}finally{wh.transition=b;}},[a]);return c},useTransition:function(){var a=Kh(Jh)[0];return [Th().current,
	a]},useMutableSource:Ph,useOpaqueIdentifier:function(){return Kh(Jh)[0]},unstable_isNewReconciler:!1},Fh={readContext:vg,useCallback:bi,useContext:vg,useEffect:Xh,useImperativeHandle:$h,useLayoutEffect:Yh,useMemo:ci,useReducer:Lh,useRef:Th,useState:function(){return Lh(Jh)},useDebugValue:ai,useDeferredValue:function(a){var b=Lh(Jh),c=b[0],d=b[1];Xh(function(){var b=wh.transition;wh.transition=1;try{d(a);}finally{wh.transition=b;}},[a]);return c},useTransition:function(){var a=Lh(Jh)[0];return [Th().current,
	a]},useMutableSource:Ph,useOpaqueIdentifier:function(){return Lh(Jh)[0]},unstable_isNewReconciler:!1},ei=ra.ReactCurrentOwner,ug=!1;function fi(a,b,c,d){b.child=null===a?Zg(b,null,c,d):Yg(b,a.child,c,d);}function gi(a,b,c,d,e){c=c.render;var f=b.ref;tg(b,e);d=Ch(a,b,c,d,f,e);if(null!==a&&!ug)return b.updateQueue=a.updateQueue,b.flags&=-517,a.lanes&=~e,hi(a,b,e);b.flags|=1;fi(a,b,d,e);return b.child}
	function ii(a,b,c,d,e,f){if(null===a){var g=c.type;if("function"===typeof g&&!ji(g)&&void 0===g.defaultProps&&null===c.compare&&void 0===c.defaultProps)return b.tag=15,b.type=g,ki(a,b,g,d,e,f);a=Vg(c.type,null,d,b,b.mode,f);a.ref=b.ref;a.return=b;return b.child=a}g=a.child;if(0===(e&f)&&(e=g.memoizedProps,c=c.compare,c=null!==c?c:Je,c(e,d)&&a.ref===b.ref))return hi(a,b,f);b.flags|=1;a=Tg(g,d);a.ref=b.ref;a.return=b;return b.child=a}
	function ki(a,b,c,d,e,f){if(null!==a&&Je(a.memoizedProps,d)&&a.ref===b.ref)if(ug=!1,0!==(f&e))0!==(a.flags&16384)&&(ug=!0);else return b.lanes=a.lanes,hi(a,b,f);return li(a,b,c,d,f)}
	function mi(a,b,c){var d=b.pendingProps,e=d.children,f=null!==a?a.memoizedState:null;if("hidden"===d.mode||"unstable-defer-without-hiding"===d.mode)if(0===(b.mode&4))b.memoizedState={baseLanes:0},ni(b,c);else if(0!==(c&1073741824))b.memoizedState={baseLanes:0},ni(b,null!==f?f.baseLanes:c);else return a=null!==f?f.baseLanes|c:c,b.lanes=b.childLanes=1073741824,b.memoizedState={baseLanes:a},ni(b,a),null;else null!==f?(d=f.baseLanes|c,b.memoizedState=null):d=c,ni(b,d);fi(a,b,e,c);return b.child}
	function oi(a,b){var c=b.ref;if(null===a&&null!==c||null!==a&&a.ref!==c)b.flags|=128;}function li(a,b,c,d,e){var f=Ff(c)?Df:M.current;f=Ef(b,f);tg(b,e);c=Ch(a,b,c,d,f,e);if(null!==a&&!ug)return b.updateQueue=a.updateQueue,b.flags&=-517,a.lanes&=~e,hi(a,b,e);b.flags|=1;fi(a,b,c,e);return b.child}
	function pi(a,b,c,d,e){if(Ff(c)){var f=!0;Jf(b);}else f=!1;tg(b,e);if(null===b.stateNode)null!==a&&(a.alternate=null,b.alternate=null,b.flags|=2),Mg(b,c,d),Og(b,c,d,e),d=!0;else if(null===a){var g=b.stateNode,h=b.memoizedProps;g.props=h;var k=g.context,l=c.contextType;"object"===typeof l&&null!==l?l=vg(l):(l=Ff(c)?Df:M.current,l=Ef(b,l));var n=c.getDerivedStateFromProps,A="function"===typeof n||"function"===typeof g.getSnapshotBeforeUpdate;A||"function"!==typeof g.UNSAFE_componentWillReceiveProps&&
	"function"!==typeof g.componentWillReceiveProps||(h!==d||k!==l)&&Ng(b,g,d,l);wg=!1;var p=b.memoizedState;g.state=p;Cg(b,d,g,e);k=b.memoizedState;h!==d||p!==k||N.current||wg?("function"===typeof n&&(Gg(b,c,n,d),k=b.memoizedState),(h=wg||Lg(b,c,h,d,p,k,l))?(A||"function"!==typeof g.UNSAFE_componentWillMount&&"function"!==typeof g.componentWillMount||("function"===typeof g.componentWillMount&&g.componentWillMount(),"function"===typeof g.UNSAFE_componentWillMount&&g.UNSAFE_componentWillMount()),"function"===
	typeof g.componentDidMount&&(b.flags|=4)):("function"===typeof g.componentDidMount&&(b.flags|=4),b.memoizedProps=d,b.memoizedState=k),g.props=d,g.state=k,g.context=l,d=h):("function"===typeof g.componentDidMount&&(b.flags|=4),d=!1);}else {g=b.stateNode;yg(a,b);h=b.memoizedProps;l=b.type===b.elementType?h:lg(b.type,h);g.props=l;A=b.pendingProps;p=g.context;k=c.contextType;"object"===typeof k&&null!==k?k=vg(k):(k=Ff(c)?Df:M.current,k=Ef(b,k));var C=c.getDerivedStateFromProps;(n="function"===typeof C||
	"function"===typeof g.getSnapshotBeforeUpdate)||"function"!==typeof g.UNSAFE_componentWillReceiveProps&&"function"!==typeof g.componentWillReceiveProps||(h!==A||p!==k)&&Ng(b,g,d,k);wg=!1;p=b.memoizedState;g.state=p;Cg(b,d,g,e);var x=b.memoizedState;h!==A||p!==x||N.current||wg?("function"===typeof C&&(Gg(b,c,C,d),x=b.memoizedState),(l=wg||Lg(b,c,l,d,p,x,k))?(n||"function"!==typeof g.UNSAFE_componentWillUpdate&&"function"!==typeof g.componentWillUpdate||("function"===typeof g.componentWillUpdate&&g.componentWillUpdate(d,
	x,k),"function"===typeof g.UNSAFE_componentWillUpdate&&g.UNSAFE_componentWillUpdate(d,x,k)),"function"===typeof g.componentDidUpdate&&(b.flags|=4),"function"===typeof g.getSnapshotBeforeUpdate&&(b.flags|=256)):("function"!==typeof g.componentDidUpdate||h===a.memoizedProps&&p===a.memoizedState||(b.flags|=4),"function"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&p===a.memoizedState||(b.flags|=256),b.memoizedProps=d,b.memoizedState=x),g.props=d,g.state=x,g.context=k,d=l):("function"!==typeof g.componentDidUpdate||
	h===a.memoizedProps&&p===a.memoizedState||(b.flags|=4),"function"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&p===a.memoizedState||(b.flags|=256),d=!1);}return qi(a,b,c,d,f,e)}
	function qi(a,b,c,d,e,f){oi(a,b);var g=0!==(b.flags&64);if(!d&&!g)return e&&Kf(b,c,!1),hi(a,b,f);d=b.stateNode;ei.current=b;var h=g&&"function"!==typeof c.getDerivedStateFromError?null:d.render();b.flags|=1;null!==a&&g?(b.child=Yg(b,a.child,null,f),b.child=Yg(b,null,h,f)):fi(a,b,h,f);b.memoizedState=d.state;e&&Kf(b,c,!0);return b.child}function ri(a){var b=a.stateNode;b.pendingContext?Hf(a,b.pendingContext,b.pendingContext!==b.context):b.context&&Hf(a,b.context,!1);eh(a,b.containerInfo);}
	var si={dehydrated:null,retryLane:0};
	function ti(a,b,c){var d=b.pendingProps,e=P.current,f=!1,g;(g=0!==(b.flags&64))||(g=null!==a&&null===a.memoizedState?!1:0!==(e&2));g?(f=!0,b.flags&=-65):null!==a&&null===a.memoizedState||void 0===d.fallback||!0===d.unstable_avoidThisFallback||(e|=1);I$1(P,e&1);if(null===a){void 0!==d.fallback&&ph(b);a=d.children;e=d.fallback;if(f)return a=ui(b,a,e,c),b.child.memoizedState={baseLanes:c},b.memoizedState=si,a;if("number"===typeof d.unstable_expectedLoadTime)return a=ui(b,a,e,c),b.child.memoizedState={baseLanes:c},
	b.memoizedState=si,b.lanes=33554432,a;c=vi({mode:"visible",children:a},b.mode,c,null);c.return=b;return b.child=c}if(null!==a.memoizedState){if(f)return d=wi(a,b,d.children,d.fallback,c),f=b.child,e=a.child.memoizedState,f.memoizedState=null===e?{baseLanes:c}:{baseLanes:e.baseLanes|c},f.childLanes=a.childLanes&~c,b.memoizedState=si,d;c=xi(a,b,d.children,c);b.memoizedState=null;return c}if(f)return d=wi(a,b,d.children,d.fallback,c),f=b.child,e=a.child.memoizedState,f.memoizedState=null===e?{baseLanes:c}:
	{baseLanes:e.baseLanes|c},f.childLanes=a.childLanes&~c,b.memoizedState=si,d;c=xi(a,b,d.children,c);b.memoizedState=null;return c}function ui(a,b,c,d){var e=a.mode,f=a.child;b={mode:"hidden",children:b};0===(e&2)&&null!==f?(f.childLanes=0,f.pendingProps=b):f=vi(b,e,0,null);c=Xg(c,e,d,null);f.return=a;c.return=a;f.sibling=c;a.child=f;return c}
	function xi(a,b,c,d){var e=a.child;a=e.sibling;c=Tg(e,{mode:"visible",children:c});0===(b.mode&2)&&(c.lanes=d);c.return=b;c.sibling=null;null!==a&&(a.nextEffect=null,a.flags=8,b.firstEffect=b.lastEffect=a);return b.child=c}
	function wi(a,b,c,d,e){var f=b.mode,g=a.child;a=g.sibling;var h={mode:"hidden",children:c};0===(f&2)&&b.child!==g?(c=b.child,c.childLanes=0,c.pendingProps=h,g=c.lastEffect,null!==g?(b.firstEffect=c.firstEffect,b.lastEffect=g,g.nextEffect=null):b.firstEffect=b.lastEffect=null):c=Tg(g,h);null!==a?d=Tg(a,d):(d=Xg(d,f,e,null),d.flags|=2);d.return=b;c.return=b;c.sibling=d;b.child=c;return d}function yi(a,b){a.lanes|=b;var c=a.alternate;null!==c&&(c.lanes|=b);sg(a.return,b);}
	function zi(a,b,c,d,e,f){var g=a.memoizedState;null===g?a.memoizedState={isBackwards:b,rendering:null,renderingStartTime:0,last:d,tail:c,tailMode:e,lastEffect:f}:(g.isBackwards=b,g.rendering=null,g.renderingStartTime=0,g.last=d,g.tail=c,g.tailMode=e,g.lastEffect=f);}
	function Ai(a,b,c){var d=b.pendingProps,e=d.revealOrder,f=d.tail;fi(a,b,d.children,c);d=P.current;if(0!==(d&2))d=d&1|2,b.flags|=64;else {if(null!==a&&0!==(a.flags&64))a:for(a=b.child;null!==a;){if(13===a.tag)null!==a.memoizedState&&yi(a,c);else if(19===a.tag)yi(a,c);else if(null!==a.child){a.child.return=a;a=a.child;continue}if(a===b)break a;for(;null===a.sibling;){if(null===a.return||a.return===b)break a;a=a.return;}a.sibling.return=a.return;a=a.sibling;}d&=1;}I$1(P,d);if(0===(b.mode&2))b.memoizedState=
	null;else switch(e){case "forwards":c=b.child;for(e=null;null!==c;)a=c.alternate,null!==a&&null===ih(a)&&(e=c),c=c.sibling;c=e;null===c?(e=b.child,b.child=null):(e=c.sibling,c.sibling=null);zi(b,!1,e,c,f,b.lastEffect);break;case "backwards":c=null;e=b.child;for(b.child=null;null!==e;){a=e.alternate;if(null!==a&&null===ih(a)){b.child=e;break}a=e.sibling;e.sibling=c;c=e;e=a;}zi(b,!0,c,null,f,b.lastEffect);break;case "together":zi(b,!1,null,null,void 0,b.lastEffect);break;default:b.memoizedState=null;}return b.child}
	function hi(a,b,c){null!==a&&(b.dependencies=a.dependencies);Dg|=b.lanes;if(0!==(c&b.childLanes)){if(null!==a&&b.child!==a.child)throw Error(y$1(153));if(null!==b.child){a=b.child;c=Tg(a,a.pendingProps);b.child=c;for(c.return=b;null!==a.sibling;)a=a.sibling,c=c.sibling=Tg(a,a.pendingProps),c.return=b;c.sibling=null;}return b.child}return null}var Bi,Ci,Di,Ei;
	Bi=function(a,b){for(var c=b.child;null!==c;){if(5===c.tag||6===c.tag)a.appendChild(c.stateNode);else if(4!==c.tag&&null!==c.child){c.child.return=c;c=c.child;continue}if(c===b)break;for(;null===c.sibling;){if(null===c.return||c.return===b)return;c=c.return;}c.sibling.return=c.return;c=c.sibling;}};Ci=function(){};
	Di=function(a,b,c,d){var e=a.memoizedProps;if(e!==d){a=b.stateNode;dh(ah.current);var f=null;switch(c){case "input":e=Ya(a,e);d=Ya(a,d);f=[];break;case "option":e=eb(a,e);d=eb(a,d);f=[];break;case "select":e=m$1({},e,{value:void 0});d=m$1({},d,{value:void 0});f=[];break;case "textarea":e=gb(a,e);d=gb(a,d);f=[];break;default:"function"!==typeof e.onClick&&"function"===typeof d.onClick&&(a.onclick=jf);}vb(c,d);var g;c=null;for(l in e)if(!d.hasOwnProperty(l)&&e.hasOwnProperty(l)&&null!=e[l])if("style"===
	l){var h=e[l];for(g in h)h.hasOwnProperty(g)&&(c||(c={}),c[g]="");}else "dangerouslySetInnerHTML"!==l&&"children"!==l&&"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(ca.hasOwnProperty(l)?f||(f=[]):(f=f||[]).push(l,null));for(l in d){var k=d[l];h=null!=e?e[l]:void 0;if(d.hasOwnProperty(l)&&k!==h&&(null!=k||null!=h))if("style"===l)if(h){for(g in h)!h.hasOwnProperty(g)||k&&k.hasOwnProperty(g)||(c||(c={}),c[g]="");for(g in k)k.hasOwnProperty(g)&&h[g]!==k[g]&&(c||
	(c={}),c[g]=k[g]);}else c||(f||(f=[]),f.push(l,c)),c=k;else "dangerouslySetInnerHTML"===l?(k=k?k.__html:void 0,h=h?h.__html:void 0,null!=k&&h!==k&&(f=f||[]).push(l,k)):"children"===l?"string"!==typeof k&&"number"!==typeof k||(f=f||[]).push(l,""+k):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&(ca.hasOwnProperty(l)?(null!=k&&"onScroll"===l&&G$1("scroll",a),f||h===k||(f=[])):"object"===typeof k&&null!==k&&k.$$typeof===Ga?k.toString():(f=f||[]).push(l,k));}c&&(f=f||[]).push("style",
	c);var l=f;if(b.updateQueue=l)b.flags|=4;}};Ei=function(a,b,c,d){c!==d&&(b.flags|=4);};function Fi(a,b){if(!lh)switch(a.tailMode){case "hidden":b=a.tail;for(var c=null;null!==b;)null!==b.alternate&&(c=b),b=b.sibling;null===c?a.tail=null:c.sibling=null;break;case "collapsed":c=a.tail;for(var d=null;null!==c;)null!==c.alternate&&(d=c),c=c.sibling;null===d?b||null===a.tail?a.tail=null:a.tail.sibling=null:d.sibling=null;}}
	function Gi(a,b,c){var d=b.pendingProps;switch(b.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return null;case 1:return Ff(b.type)&&Gf(),null;case 3:fh();H$1(N);H$1(M);uh();d=b.stateNode;d.pendingContext&&(d.context=d.pendingContext,d.pendingContext=null);if(null===a||null===a.child)rh(b)?b.flags|=4:d.hydrate||(b.flags|=256);Ci(b);return null;case 5:hh(b);var e=dh(ch.current);c=b.type;if(null!==a&&null!=b.stateNode)Di(a,b,c,d,e),a.ref!==b.ref&&(b.flags|=128);else {if(!d){if(null===
	b.stateNode)throw Error(y$1(166));return null}a=dh(ah.current);if(rh(b)){d=b.stateNode;c=b.type;var f=b.memoizedProps;d[wf]=b;d[xf]=f;switch(c){case "dialog":G$1("cancel",d);G$1("close",d);break;case "iframe":case "object":case "embed":G$1("load",d);break;case "video":case "audio":for(a=0;a<Xe.length;a++)G$1(Xe[a],d);break;case "source":G$1("error",d);break;case "img":case "image":case "link":G$1("error",d);G$1("load",d);break;case "details":G$1("toggle",d);break;case "input":Za(d,f);G$1("invalid",d);break;case "select":d._wrapperState=
	{wasMultiple:!!f.multiple};G$1("invalid",d);break;case "textarea":hb(d,f),G$1("invalid",d);}vb(c,f);a=null;for(var g in f)f.hasOwnProperty(g)&&(e=f[g],"children"===g?"string"===typeof e?d.textContent!==e&&(a=["children",e]):"number"===typeof e&&d.textContent!==""+e&&(a=["children",""+e]):ca.hasOwnProperty(g)&&null!=e&&"onScroll"===g&&G$1("scroll",d));switch(c){case "input":Va(d);cb(d,f,!0);break;case "textarea":Va(d);jb(d);break;case "select":case "option":break;default:"function"===typeof f.onClick&&(d.onclick=
	jf);}d=a;b.updateQueue=d;null!==d&&(b.flags|=4);}else {g=9===e.nodeType?e:e.ownerDocument;a===kb.html&&(a=lb(c));a===kb.html?"script"===c?(a=g.createElement("div"),a.innerHTML="<script>\x3c/script>",a=a.removeChild(a.firstChild)):"string"===typeof d.is?a=g.createElement(c,{is:d.is}):(a=g.createElement(c),"select"===c&&(g=a,d.multiple?g.multiple=!0:d.size&&(g.size=d.size))):a=g.createElementNS(a,c);a[wf]=b;a[xf]=d;Bi(a,b,!1,!1);b.stateNode=a;g=wb(c,d);switch(c){case "dialog":G$1("cancel",a);G$1("close",a);
	e=d;break;case "iframe":case "object":case "embed":G$1("load",a);e=d;break;case "video":case "audio":for(e=0;e<Xe.length;e++)G$1(Xe[e],a);e=d;break;case "source":G$1("error",a);e=d;break;case "img":case "image":case "link":G$1("error",a);G$1("load",a);e=d;break;case "details":G$1("toggle",a);e=d;break;case "input":Za(a,d);e=Ya(a,d);G$1("invalid",a);break;case "option":e=eb(a,d);break;case "select":a._wrapperState={wasMultiple:!!d.multiple};e=m$1({},d,{value:void 0});G$1("invalid",a);break;case "textarea":hb(a,d);e=
	gb(a,d);G$1("invalid",a);break;default:e=d;}vb(c,e);var h=e;for(f in h)if(h.hasOwnProperty(f)){var k=h[f];"style"===f?tb(a,k):"dangerouslySetInnerHTML"===f?(k=k?k.__html:void 0,null!=k&&ob(a,k)):"children"===f?"string"===typeof k?("textarea"!==c||""!==k)&&pb(a,k):"number"===typeof k&&pb(a,""+k):"suppressContentEditableWarning"!==f&&"suppressHydrationWarning"!==f&&"autoFocus"!==f&&(ca.hasOwnProperty(f)?null!=k&&"onScroll"===f&&G$1("scroll",a):null!=k&&qa(a,f,k,g));}switch(c){case "input":Va(a);cb(a,d,!1);
	break;case "textarea":Va(a);jb(a);break;case "option":null!=d.value&&a.setAttribute("value",""+Sa(d.value));break;case "select":a.multiple=!!d.multiple;f=d.value;null!=f?fb(a,!!d.multiple,f,!1):null!=d.defaultValue&&fb(a,!!d.multiple,d.defaultValue,!0);break;default:"function"===typeof e.onClick&&(a.onclick=jf);}mf(c,d)&&(b.flags|=4);}null!==b.ref&&(b.flags|=128);}return null;case 6:if(a&&null!=b.stateNode)Ei(a,b,a.memoizedProps,d);else {if("string"!==typeof d&&null===b.stateNode)throw Error(y$1(166));
	c=dh(ch.current);dh(ah.current);rh(b)?(d=b.stateNode,c=b.memoizedProps,d[wf]=b,d.nodeValue!==c&&(b.flags|=4)):(d=(9===c.nodeType?c:c.ownerDocument).createTextNode(d),d[wf]=b,b.stateNode=d);}return null;case 13:H$1(P);d=b.memoizedState;if(0!==(b.flags&64))return b.lanes=c,b;d=null!==d;c=!1;null===a?void 0!==b.memoizedProps.fallback&&rh(b):c=null!==a.memoizedState;if(d&&!c&&0!==(b.mode&2))if(null===a&&!0!==b.memoizedProps.unstable_avoidThisFallback||0!==(P.current&1))0===V&&(V=3);else {if(0===V||3===V)V=
	4;null===U||0===(Dg&134217727)&&0===(Hi&134217727)||Ii(U,W);}if(d||c)b.flags|=4;return null;case 4:return fh(),Ci(b),null===a&&cf(b.stateNode.containerInfo),null;case 10:return rg(b),null;case 17:return Ff(b.type)&&Gf(),null;case 19:H$1(P);d=b.memoizedState;if(null===d)return null;f=0!==(b.flags&64);g=d.rendering;if(null===g)if(f)Fi(d,!1);else {if(0!==V||null!==a&&0!==(a.flags&64))for(a=b.child;null!==a;){g=ih(a);if(null!==g){b.flags|=64;Fi(d,!1);f=g.updateQueue;null!==f&&(b.updateQueue=f,b.flags|=4);
	null===d.lastEffect&&(b.firstEffect=null);b.lastEffect=d.lastEffect;d=c;for(c=b.child;null!==c;)f=c,a=d,f.flags&=2,f.nextEffect=null,f.firstEffect=null,f.lastEffect=null,g=f.alternate,null===g?(f.childLanes=0,f.lanes=a,f.child=null,f.memoizedProps=null,f.memoizedState=null,f.updateQueue=null,f.dependencies=null,f.stateNode=null):(f.childLanes=g.childLanes,f.lanes=g.lanes,f.child=g.child,f.memoizedProps=g.memoizedProps,f.memoizedState=g.memoizedState,f.updateQueue=g.updateQueue,f.type=g.type,a=g.dependencies,
	f.dependencies=null===a?null:{lanes:a.lanes,firstContext:a.firstContext}),c=c.sibling;I$1(P,P.current&1|2);return b.child}a=a.sibling;}null!==d.tail&&O()>Ji&&(b.flags|=64,f=!0,Fi(d,!1),b.lanes=33554432);}else {if(!f)if(a=ih(g),null!==a){if(b.flags|=64,f=!0,c=a.updateQueue,null!==c&&(b.updateQueue=c,b.flags|=4),Fi(d,!0),null===d.tail&&"hidden"===d.tailMode&&!g.alternate&&!lh)return b=b.lastEffect=d.lastEffect,null!==b&&(b.nextEffect=null),null}else 2*O()-d.renderingStartTime>Ji&&1073741824!==c&&(b.flags|=
	64,f=!0,Fi(d,!1),b.lanes=33554432);d.isBackwards?(g.sibling=b.child,b.child=g):(c=d.last,null!==c?c.sibling=g:b.child=g,d.last=g);}return null!==d.tail?(c=d.tail,d.rendering=c,d.tail=c.sibling,d.lastEffect=b.lastEffect,d.renderingStartTime=O(),c.sibling=null,b=P.current,I$1(P,f?b&1|2:b&1),c):null;case 23:case 24:return Ki(),null!==a&&null!==a.memoizedState!==(null!==b.memoizedState)&&"unstable-defer-without-hiding"!==d.mode&&(b.flags|=4),null}throw Error(y$1(156,b.tag));}
	function Li(a){switch(a.tag){case 1:Ff(a.type)&&Gf();var b=a.flags;return b&4096?(a.flags=b&-4097|64,a):null;case 3:fh();H$1(N);H$1(M);uh();b=a.flags;if(0!==(b&64))throw Error(y$1(285));a.flags=b&-4097|64;return a;case 5:return hh(a),null;case 13:return H$1(P),b=a.flags,b&4096?(a.flags=b&-4097|64,a):null;case 19:return H$1(P),null;case 4:return fh(),null;case 10:return rg(a),null;case 23:case 24:return Ki(),null;default:return null}}
	function Mi(a,b){try{var c="",d=b;do c+=Qa(d),d=d.return;while(d);var e=c;}catch(f){e="\nError generating stack: "+f.message+"\n"+f.stack;}return {value:a,source:b,stack:e}}function Ni(a,b){try{console.error(b.value);}catch(c){setTimeout(function(){throw c;});}}var Oi="function"===typeof WeakMap?WeakMap:Map;function Pi(a,b,c){c=zg(-1,c);c.tag=3;c.payload={element:null};var d=b.value;c.callback=function(){Qi||(Qi=!0,Ri=d);Ni(a,b);};return c}
	function Si(a,b,c){c=zg(-1,c);c.tag=3;var d=a.type.getDerivedStateFromError;if("function"===typeof d){var e=b.value;c.payload=function(){Ni(a,b);return d(e)};}var f=a.stateNode;null!==f&&"function"===typeof f.componentDidCatch&&(c.callback=function(){"function"!==typeof d&&(null===Ti?Ti=new Set([this]):Ti.add(this),Ni(a,b));var c=b.stack;this.componentDidCatch(b.value,{componentStack:null!==c?c:""});});return c}var Ui="function"===typeof WeakSet?WeakSet:Set;
	function Vi(a){var b=a.ref;if(null!==b)if("function"===typeof b)try{b(null);}catch(c){Wi(a,c);}else b.current=null;}function Xi(a,b){switch(b.tag){case 0:case 11:case 15:case 22:return;case 1:if(b.flags&256&&null!==a){var c=a.memoizedProps,d=a.memoizedState;a=b.stateNode;b=a.getSnapshotBeforeUpdate(b.elementType===b.type?c:lg(b.type,c),d);a.__reactInternalSnapshotBeforeUpdate=b;}return;case 3:b.flags&256&&qf(b.stateNode.containerInfo);return;case 5:case 6:case 4:case 17:return}throw Error(y$1(163));}
	function Yi(a,b,c){switch(c.tag){case 0:case 11:case 15:case 22:b=c.updateQueue;b=null!==b?b.lastEffect:null;if(null!==b){a=b=b.next;do{if(3===(a.tag&3)){var d=a.create;a.destroy=d();}a=a.next;}while(a!==b)}b=c.updateQueue;b=null!==b?b.lastEffect:null;if(null!==b){a=b=b.next;do{var e=a;d=e.next;e=e.tag;0!==(e&4)&&0!==(e&1)&&(Zi(c,a),$i(c,a));a=d;}while(a!==b)}return;case 1:a=c.stateNode;c.flags&4&&(null===b?a.componentDidMount():(d=c.elementType===c.type?b.memoizedProps:lg(c.type,b.memoizedProps),a.componentDidUpdate(d,
	b.memoizedState,a.__reactInternalSnapshotBeforeUpdate)));b=c.updateQueue;null!==b&&Eg(c,b,a);return;case 3:b=c.updateQueue;if(null!==b){a=null;if(null!==c.child)switch(c.child.tag){case 5:a=c.child.stateNode;break;case 1:a=c.child.stateNode;}Eg(c,b,a);}return;case 5:a=c.stateNode;null===b&&c.flags&4&&mf(c.type,c.memoizedProps)&&a.focus();return;case 6:return;case 4:return;case 12:return;case 13:null===c.memoizedState&&(c=c.alternate,null!==c&&(c=c.memoizedState,null!==c&&(c=c.dehydrated,null!==c&&Cc(c))));
	return;case 19:case 17:case 20:case 21:case 23:case 24:return}throw Error(y$1(163));}
	function aj(a,b){for(var c=a;;){if(5===c.tag){var d=c.stateNode;if(b)d=d.style,"function"===typeof d.setProperty?d.setProperty("display","none","important"):d.display="none";else {d=c.stateNode;var e=c.memoizedProps.style;e=void 0!==e&&null!==e&&e.hasOwnProperty("display")?e.display:null;d.style.display=sb("display",e);}}else if(6===c.tag)c.stateNode.nodeValue=b?"":c.memoizedProps;else if((23!==c.tag&&24!==c.tag||null===c.memoizedState||c===a)&&null!==c.child){c.child.return=c;c=c.child;continue}if(c===
	a)break;for(;null===c.sibling;){if(null===c.return||c.return===a)return;c=c.return;}c.sibling.return=c.return;c=c.sibling;}}
	function bj(a,b){if(Mf&&"function"===typeof Mf.onCommitFiberUnmount)try{Mf.onCommitFiberUnmount(Lf,b);}catch(f){}switch(b.tag){case 0:case 11:case 14:case 15:case 22:a=b.updateQueue;if(null!==a&&(a=a.lastEffect,null!==a)){var c=a=a.next;do{var d=c,e=d.destroy;d=d.tag;if(void 0!==e)if(0!==(d&4))Zi(b,c);else {d=b;try{e();}catch(f){Wi(d,f);}}c=c.next;}while(c!==a)}break;case 1:Vi(b);a=b.stateNode;if("function"===typeof a.componentWillUnmount)try{a.props=b.memoizedProps,a.state=b.memoizedState,a.componentWillUnmount();}catch(f){Wi(b,
	f);}break;case 5:Vi(b);break;case 4:cj(a,b);}}function dj(a){a.alternate=null;a.child=null;a.dependencies=null;a.firstEffect=null;a.lastEffect=null;a.memoizedProps=null;a.memoizedState=null;a.pendingProps=null;a.return=null;a.updateQueue=null;}function ej(a){return 5===a.tag||3===a.tag||4===a.tag}
	function fj(a){a:{for(var b=a.return;null!==b;){if(ej(b))break a;b=b.return;}throw Error(y$1(160));}var c=b;b=c.stateNode;switch(c.tag){case 5:var d=!1;break;case 3:b=b.containerInfo;d=!0;break;case 4:b=b.containerInfo;d=!0;break;default:throw Error(y$1(161));}c.flags&16&&(pb(b,""),c.flags&=-17);a:b:for(c=a;;){for(;null===c.sibling;){if(null===c.return||ej(c.return)){c=null;break a}c=c.return;}c.sibling.return=c.return;for(c=c.sibling;5!==c.tag&&6!==c.tag&&18!==c.tag;){if(c.flags&2)continue b;if(null===
	c.child||4===c.tag)continue b;else c.child.return=c,c=c.child;}if(!(c.flags&2)){c=c.stateNode;break a}}d?gj(a,c,b):hj(a,c,b);}
	function gj(a,b,c){var d=a.tag,e=5===d||6===d;if(e)a=e?a.stateNode:a.stateNode.instance,b?8===c.nodeType?c.parentNode.insertBefore(a,b):c.insertBefore(a,b):(8===c.nodeType?(b=c.parentNode,b.insertBefore(a,c)):(b=c,b.appendChild(a)),c=c._reactRootContainer,null!==c&&void 0!==c||null!==b.onclick||(b.onclick=jf));else if(4!==d&&(a=a.child,null!==a))for(gj(a,b,c),a=a.sibling;null!==a;)gj(a,b,c),a=a.sibling;}
	function hj(a,b,c){var d=a.tag,e=5===d||6===d;if(e)a=e?a.stateNode:a.stateNode.instance,b?c.insertBefore(a,b):c.appendChild(a);else if(4!==d&&(a=a.child,null!==a))for(hj(a,b,c),a=a.sibling;null!==a;)hj(a,b,c),a=a.sibling;}
	function cj(a,b){for(var c=b,d=!1,e,f;;){if(!d){d=c.return;a:for(;;){if(null===d)throw Error(y$1(160));e=d.stateNode;switch(d.tag){case 5:f=!1;break a;case 3:e=e.containerInfo;f=!0;break a;case 4:e=e.containerInfo;f=!0;break a}d=d.return;}d=!0;}if(5===c.tag||6===c.tag){a:for(var g=a,h=c,k=h;;)if(bj(g,k),null!==k.child&&4!==k.tag)k.child.return=k,k=k.child;else {if(k===h)break a;for(;null===k.sibling;){if(null===k.return||k.return===h)break a;k=k.return;}k.sibling.return=k.return;k=k.sibling;}f?(g=e,h=c.stateNode,
	8===g.nodeType?g.parentNode.removeChild(h):g.removeChild(h)):e.removeChild(c.stateNode);}else if(4===c.tag){if(null!==c.child){e=c.stateNode.containerInfo;f=!0;c.child.return=c;c=c.child;continue}}else if(bj(a,c),null!==c.child){c.child.return=c;c=c.child;continue}if(c===b)break;for(;null===c.sibling;){if(null===c.return||c.return===b)return;c=c.return;4===c.tag&&(d=!1);}c.sibling.return=c.return;c=c.sibling;}}
	function ij(a,b){switch(b.tag){case 0:case 11:case 14:case 15:case 22:var c=b.updateQueue;c=null!==c?c.lastEffect:null;if(null!==c){var d=c=c.next;do 3===(d.tag&3)&&(a=d.destroy,d.destroy=void 0,void 0!==a&&a()),d=d.next;while(d!==c)}return;case 1:return;case 5:c=b.stateNode;if(null!=c){d=b.memoizedProps;var e=null!==a?a.memoizedProps:d;a=b.type;var f=b.updateQueue;b.updateQueue=null;if(null!==f){c[xf]=d;"input"===a&&"radio"===d.type&&null!=d.name&&$a(c,d);wb(a,e);b=wb(a,d);for(e=0;e<f.length;e+=
	2){var g=f[e],h=f[e+1];"style"===g?tb(c,h):"dangerouslySetInnerHTML"===g?ob(c,h):"children"===g?pb(c,h):qa(c,g,h,b);}switch(a){case "input":ab(c,d);break;case "textarea":ib(c,d);break;case "select":a=c._wrapperState.wasMultiple,c._wrapperState.wasMultiple=!!d.multiple,f=d.value,null!=f?fb(c,!!d.multiple,f,!1):a!==!!d.multiple&&(null!=d.defaultValue?fb(c,!!d.multiple,d.defaultValue,!0):fb(c,!!d.multiple,d.multiple?[]:"",!1));}}}return;case 6:if(null===b.stateNode)throw Error(y$1(162));b.stateNode.nodeValue=
	b.memoizedProps;return;case 3:c=b.stateNode;c.hydrate&&(c.hydrate=!1,Cc(c.containerInfo));return;case 12:return;case 13:null!==b.memoizedState&&(jj=O(),aj(b.child,!0));kj(b);return;case 19:kj(b);return;case 17:return;case 23:case 24:aj(b,null!==b.memoizedState);return}throw Error(y$1(163));}function kj(a){var b=a.updateQueue;if(null!==b){a.updateQueue=null;var c=a.stateNode;null===c&&(c=a.stateNode=new Ui);b.forEach(function(b){var d=lj.bind(null,a,b);c.has(b)||(c.add(b),b.then(d,d));});}}
	function mj(a,b){return null!==a&&(a=a.memoizedState,null===a||null!==a.dehydrated)?(b=b.memoizedState,null!==b&&null===b.dehydrated):!1}var nj=Math.ceil,oj=ra.ReactCurrentDispatcher,pj=ra.ReactCurrentOwner,X=0,U=null,Y=null,W=0,qj=0,rj=Bf(0),V=0,sj=null,tj=0,Dg=0,Hi=0,uj=0,vj=null,jj=0,Ji=Infinity;function wj(){Ji=O()+500;}var Z=null,Qi=!1,Ri=null,Ti=null,xj=!1,yj=null,zj=90,Aj=[],Bj=[],Cj=null,Dj=0,Ej=null,Fj=-1,Gj=0,Hj=0,Ij=null,Jj=!1;function Hg(){return 0!==(X&48)?O():-1!==Fj?Fj:Fj=O()}
	function Ig(a){a=a.mode;if(0===(a&2))return 1;if(0===(a&4))return 99===eg()?1:2;0===Gj&&(Gj=tj);if(0!==kg.transition){0!==Hj&&(Hj=null!==vj?vj.pendingLanes:0);a=Gj;var b=4186112&~Hj;b&=-b;0===b&&(a=4186112&~a,b=a&-a,0===b&&(b=8192));return b}a=eg();0!==(X&4)&&98===a?a=Xc(12,Gj):(a=Sc(a),a=Xc(a,Gj));return a}
	function Jg(a,b,c){if(50<Dj)throw Dj=0,Ej=null,Error(y$1(185));a=Kj(a,b);if(null===a)return null;$c(a,b,c);a===U&&(Hi|=b,4===V&&Ii(a,W));var d=eg();1===b?0!==(X&8)&&0===(X&48)?Lj(a):(Mj(a,c),0===X&&(wj(),ig())):(0===(X&4)||98!==d&&99!==d||(null===Cj?Cj=new Set([a]):Cj.add(a)),Mj(a,c));vj=a;}function Kj(a,b){a.lanes|=b;var c=a.alternate;null!==c&&(c.lanes|=b);c=a;for(a=a.return;null!==a;)a.childLanes|=b,c=a.alternate,null!==c&&(c.childLanes|=b),c=a,a=a.return;return 3===c.tag?c.stateNode:null}
	function Mj(a,b){for(var c=a.callbackNode,d=a.suspendedLanes,e=a.pingedLanes,f=a.expirationTimes,g=a.pendingLanes;0<g;){var h=31-Vc(g),k=1<<h,l=f[h];if(-1===l){if(0===(k&d)||0!==(k&e)){l=b;Rc(k);var n=F$1;f[h]=10<=n?l+250:6<=n?l+5E3:-1;}}else l<=b&&(a.expiredLanes|=k);g&=~k;}d=Uc(a,a===U?W:0);b=F$1;if(0===d)null!==c&&(c!==Zf&&Pf(c),a.callbackNode=null,a.callbackPriority=0);else {if(null!==c){if(a.callbackPriority===b)return;c!==Zf&&Pf(c);}15===b?(c=Lj.bind(null,a),null===ag?(ag=[c],bg=Of(Uf,jg)):ag.push(c),
	c=Zf):14===b?c=hg(99,Lj.bind(null,a)):(c=Tc(b),c=hg(c,Nj.bind(null,a)));a.callbackPriority=b;a.callbackNode=c;}}
	function Nj(a){Fj=-1;Hj=Gj=0;if(0!==(X&48))throw Error(y$1(327));var b=a.callbackNode;if(Oj()&&a.callbackNode!==b)return null;var c=Uc(a,a===U?W:0);if(0===c)return null;var d=c;var e=X;X|=16;var f=Pj();if(U!==a||W!==d)wj(),Qj(a,d);do try{Rj();break}catch(h){Sj(a,h);}while(1);qg();oj.current=f;X=e;null!==Y?d=0:(U=null,W=0,d=V);if(0!==(tj&Hi))Qj(a,0);else if(0!==d){2===d&&(X|=64,a.hydrate&&(a.hydrate=!1,qf(a.containerInfo)),c=Wc(a),0!==c&&(d=Tj(a,c)));if(1===d)throw b=sj,Qj(a,0),Ii(a,c),Mj(a,O()),b;a.finishedWork=
	a.current.alternate;a.finishedLanes=c;switch(d){case 0:case 1:throw Error(y$1(345));case 2:Uj(a);break;case 3:Ii(a,c);if((c&62914560)===c&&(d=jj+500-O(),10<d)){if(0!==Uc(a,0))break;e=a.suspendedLanes;if((e&c)!==c){Hg();a.pingedLanes|=a.suspendedLanes&e;break}a.timeoutHandle=of(Uj.bind(null,a),d);break}Uj(a);break;case 4:Ii(a,c);if((c&4186112)===c)break;d=a.eventTimes;for(e=-1;0<c;){var g=31-Vc(c);f=1<<g;g=d[g];g>e&&(e=g);c&=~f;}c=e;c=O()-c;c=(120>c?120:480>c?480:1080>c?1080:1920>c?1920:3E3>c?3E3:4320>
	c?4320:1960*nj(c/1960))-c;if(10<c){a.timeoutHandle=of(Uj.bind(null,a),c);break}Uj(a);break;case 5:Uj(a);break;default:throw Error(y$1(329));}}Mj(a,O());return a.callbackNode===b?Nj.bind(null,a):null}function Ii(a,b){b&=~uj;b&=~Hi;a.suspendedLanes|=b;a.pingedLanes&=~b;for(a=a.expirationTimes;0<b;){var c=31-Vc(b),d=1<<c;a[c]=-1;b&=~d;}}
	function Lj(a){if(0!==(X&48))throw Error(y$1(327));Oj();if(a===U&&0!==(a.expiredLanes&W)){var b=W;var c=Tj(a,b);0!==(tj&Hi)&&(b=Uc(a,b),c=Tj(a,b));}else b=Uc(a,0),c=Tj(a,b);0!==a.tag&&2===c&&(X|=64,a.hydrate&&(a.hydrate=!1,qf(a.containerInfo)),b=Wc(a),0!==b&&(c=Tj(a,b)));if(1===c)throw c=sj,Qj(a,0),Ii(a,b),Mj(a,O()),c;a.finishedWork=a.current.alternate;a.finishedLanes=b;Uj(a);Mj(a,O());return null}
	function Vj(){if(null!==Cj){var a=Cj;Cj=null;a.forEach(function(a){a.expiredLanes|=24&a.pendingLanes;Mj(a,O());});}ig();}function Wj(a,b){var c=X;X|=1;try{return a(b)}finally{X=c,0===X&&(wj(),ig());}}function Xj(a,b){var c=X;X&=-2;X|=8;try{return a(b)}finally{X=c,0===X&&(wj(),ig());}}function ni(a,b){I$1(rj,qj);qj|=b;tj|=b;}function Ki(){qj=rj.current;H$1(rj);}
	function Qj(a,b){a.finishedWork=null;a.finishedLanes=0;var c=a.timeoutHandle;-1!==c&&(a.timeoutHandle=-1,pf(c));if(null!==Y)for(c=Y.return;null!==c;){var d=c;switch(d.tag){case 1:d=d.type.childContextTypes;null!==d&&void 0!==d&&Gf();break;case 3:fh();H$1(N);H$1(M);uh();break;case 5:hh(d);break;case 4:fh();break;case 13:H$1(P);break;case 19:H$1(P);break;case 10:rg(d);break;case 23:case 24:Ki();}c=c.return;}U=a;Y=Tg(a.current,null);W=qj=tj=b;V=0;sj=null;uj=Hi=Dg=0;}
	function Sj(a,b){do{var c=Y;try{qg();vh.current=Gh;if(yh){for(var d=R.memoizedState;null!==d;){var e=d.queue;null!==e&&(e.pending=null);d=d.next;}yh=!1;}xh=0;T=S=R=null;zh=!1;pj.current=null;if(null===c||null===c.return){V=1;sj=b;Y=null;break}a:{var f=a,g=c.return,h=c,k=b;b=W;h.flags|=2048;h.firstEffect=h.lastEffect=null;if(null!==k&&"object"===typeof k&&"function"===typeof k.then){var l=k;if(0===(h.mode&2)){var n=h.alternate;n?(h.updateQueue=n.updateQueue,h.memoizedState=n.memoizedState,h.lanes=n.lanes):
	(h.updateQueue=null,h.memoizedState=null);}var A=0!==(P.current&1),p=g;do{var C;if(C=13===p.tag){var x=p.memoizedState;if(null!==x)C=null!==x.dehydrated?!0:!1;else {var w=p.memoizedProps;C=void 0===w.fallback?!1:!0!==w.unstable_avoidThisFallback?!0:A?!1:!0;}}if(C){var z=p.updateQueue;if(null===z){var u=new Set;u.add(l);p.updateQueue=u;}else z.add(l);if(0===(p.mode&2)){p.flags|=64;h.flags|=16384;h.flags&=-2981;if(1===h.tag)if(null===h.alternate)h.tag=17;else {var t=zg(-1,1);t.tag=2;Ag(h,t);}h.lanes|=1;break a}k=
	void 0;h=b;var q=f.pingCache;null===q?(q=f.pingCache=new Oi,k=new Set,q.set(l,k)):(k=q.get(l),void 0===k&&(k=new Set,q.set(l,k)));if(!k.has(h)){k.add(h);var v=Yj.bind(null,f,l,h);l.then(v,v);}p.flags|=4096;p.lanes=b;break a}p=p.return;}while(null!==p);k=Error((Ra(h.type)||"A React component")+" suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.");}5!==V&&(V=2);k=Mi(k,h);p=
	g;do{switch(p.tag){case 3:f=k;p.flags|=4096;b&=-b;p.lanes|=b;var J=Pi(p,f,b);Bg(p,J);break a;case 1:f=k;var K=p.type,Q=p.stateNode;if(0===(p.flags&64)&&("function"===typeof K.getDerivedStateFromError||null!==Q&&"function"===typeof Q.componentDidCatch&&(null===Ti||!Ti.has(Q)))){p.flags|=4096;b&=-b;p.lanes|=b;var L=Si(p,f,b);Bg(p,L);break a}}p=p.return;}while(null!==p)}Zj(c);}catch(va){b=va;Y===c&&null!==c&&(Y=c=c.return);continue}break}while(1)}
	function Pj(){var a=oj.current;oj.current=Gh;return null===a?Gh:a}function Tj(a,b){var c=X;X|=16;var d=Pj();U===a&&W===b||Qj(a,b);do try{ak();break}catch(e){Sj(a,e);}while(1);qg();X=c;oj.current=d;if(null!==Y)throw Error(y$1(261));U=null;W=0;return V}function ak(){for(;null!==Y;)bk(Y);}function Rj(){for(;null!==Y&&!Qf();)bk(Y);}function bk(a){var b=ck(a.alternate,a,qj);a.memoizedProps=a.pendingProps;null===b?Zj(a):Y=b;pj.current=null;}
	function Zj(a){var b=a;do{var c=b.alternate;a=b.return;if(0===(b.flags&2048)){c=Gi(c,b,qj);if(null!==c){Y=c;return}c=b;if(24!==c.tag&&23!==c.tag||null===c.memoizedState||0!==(qj&1073741824)||0===(c.mode&4)){for(var d=0,e=c.child;null!==e;)d|=e.lanes|e.childLanes,e=e.sibling;c.childLanes=d;}null!==a&&0===(a.flags&2048)&&(null===a.firstEffect&&(a.firstEffect=b.firstEffect),null!==b.lastEffect&&(null!==a.lastEffect&&(a.lastEffect.nextEffect=b.firstEffect),a.lastEffect=b.lastEffect),1<b.flags&&(null!==
	a.lastEffect?a.lastEffect.nextEffect=b:a.firstEffect=b,a.lastEffect=b));}else {c=Li(b);if(null!==c){c.flags&=2047;Y=c;return}null!==a&&(a.firstEffect=a.lastEffect=null,a.flags|=2048);}b=b.sibling;if(null!==b){Y=b;return}Y=b=a;}while(null!==b);0===V&&(V=5);}function Uj(a){var b=eg();gg(99,dk.bind(null,a,b));return null}
	function dk(a,b){do Oj();while(null!==yj);if(0!==(X&48))throw Error(y$1(327));var c=a.finishedWork;if(null===c)return null;a.finishedWork=null;a.finishedLanes=0;if(c===a.current)throw Error(y$1(177));a.callbackNode=null;var d=c.lanes|c.childLanes,e=d,f=a.pendingLanes&~e;a.pendingLanes=e;a.suspendedLanes=0;a.pingedLanes=0;a.expiredLanes&=e;a.mutableReadLanes&=e;a.entangledLanes&=e;e=a.entanglements;for(var g=a.eventTimes,h=a.expirationTimes;0<f;){var k=31-Vc(f),l=1<<k;e[k]=0;g[k]=-1;h[k]=-1;f&=~l;}null!==
	Cj&&0===(d&24)&&Cj.has(a)&&Cj.delete(a);a===U&&(Y=U=null,W=0);1<c.flags?null!==c.lastEffect?(c.lastEffect.nextEffect=c,d=c.firstEffect):d=c:d=c.firstEffect;if(null!==d){e=X;X|=32;pj.current=null;kf=fd;g=Ne();if(Oe(g)){if("selectionStart"in g)h={start:g.selectionStart,end:g.selectionEnd};else a:if(h=(h=g.ownerDocument)&&h.defaultView||window,(l=h.getSelection&&h.getSelection())&&0!==l.rangeCount){h=l.anchorNode;f=l.anchorOffset;k=l.focusNode;l=l.focusOffset;try{h.nodeType,k.nodeType;}catch(va){h=null;
	break a}var n=0,A=-1,p=-1,C=0,x=0,w=g,z=null;b:for(;;){for(var u;;){w!==h||0!==f&&3!==w.nodeType||(A=n+f);w!==k||0!==l&&3!==w.nodeType||(p=n+l);3===w.nodeType&&(n+=w.nodeValue.length);if(null===(u=w.firstChild))break;z=w;w=u;}for(;;){if(w===g)break b;z===h&&++C===f&&(A=n);z===k&&++x===l&&(p=n);if(null!==(u=w.nextSibling))break;w=z;z=w.parentNode;}w=u;}h=-1===A||-1===p?null:{start:A,end:p};}else h=null;h=h||{start:0,end:0};}else h=null;lf={focusedElem:g,selectionRange:h};fd=!1;Ij=null;Jj=!1;Z=d;do try{ek();}catch(va){if(null===
	Z)throw Error(y$1(330));Wi(Z,va);Z=Z.nextEffect;}while(null!==Z);Ij=null;Z=d;do try{for(g=a;null!==Z;){var t=Z.flags;t&16&&pb(Z.stateNode,"");if(t&128){var q=Z.alternate;if(null!==q){var v=q.ref;null!==v&&("function"===typeof v?v(null):v.current=null);}}switch(t&1038){case 2:fj(Z);Z.flags&=-3;break;case 6:fj(Z);Z.flags&=-3;ij(Z.alternate,Z);break;case 1024:Z.flags&=-1025;break;case 1028:Z.flags&=-1025;ij(Z.alternate,Z);break;case 4:ij(Z.alternate,Z);break;case 8:h=Z;cj(g,h);var J=h.alternate;dj(h);null!==
	J&&dj(J);}Z=Z.nextEffect;}}catch(va){if(null===Z)throw Error(y$1(330));Wi(Z,va);Z=Z.nextEffect;}while(null!==Z);v=lf;q=Ne();t=v.focusedElem;g=v.selectionRange;if(q!==t&&t&&t.ownerDocument&&Me(t.ownerDocument.documentElement,t)){null!==g&&Oe(t)&&(q=g.start,v=g.end,void 0===v&&(v=q),"selectionStart"in t?(t.selectionStart=q,t.selectionEnd=Math.min(v,t.value.length)):(v=(q=t.ownerDocument||document)&&q.defaultView||window,v.getSelection&&(v=v.getSelection(),h=t.textContent.length,J=Math.min(g.start,h),g=void 0===
	g.end?J:Math.min(g.end,h),!v.extend&&J>g&&(h=g,g=J,J=h),h=Le(t,J),f=Le(t,g),h&&f&&(1!==v.rangeCount||v.anchorNode!==h.node||v.anchorOffset!==h.offset||v.focusNode!==f.node||v.focusOffset!==f.offset)&&(q=q.createRange(),q.setStart(h.node,h.offset),v.removeAllRanges(),J>g?(v.addRange(q),v.extend(f.node,f.offset)):(q.setEnd(f.node,f.offset),v.addRange(q))))));q=[];for(v=t;v=v.parentNode;)1===v.nodeType&&q.push({element:v,left:v.scrollLeft,top:v.scrollTop});"function"===typeof t.focus&&t.focus();for(t=
	0;t<q.length;t++)v=q[t],v.element.scrollLeft=v.left,v.element.scrollTop=v.top;}fd=!!kf;lf=kf=null;a.current=c;Z=d;do try{for(t=a;null!==Z;){var K=Z.flags;K&36&&Yi(t,Z.alternate,Z);if(K&128){q=void 0;var Q=Z.ref;if(null!==Q){var L=Z.stateNode;switch(Z.tag){case 5:q=L;break;default:q=L;}"function"===typeof Q?Q(q):Q.current=q;}}Z=Z.nextEffect;}}catch(va){if(null===Z)throw Error(y$1(330));Wi(Z,va);Z=Z.nextEffect;}while(null!==Z);Z=null;$f();X=e;}else a.current=c;if(xj)xj=!1,yj=a,zj=b;else for(Z=d;null!==Z;)b=
	Z.nextEffect,Z.nextEffect=null,Z.flags&8&&(K=Z,K.sibling=null,K.stateNode=null),Z=b;d=a.pendingLanes;0===d&&(Ti=null);1===d?a===Ej?Dj++:(Dj=0,Ej=a):Dj=0;c=c.stateNode;if(Mf&&"function"===typeof Mf.onCommitFiberRoot)try{Mf.onCommitFiberRoot(Lf,c,void 0,64===(c.current.flags&64));}catch(va){}Mj(a,O());if(Qi)throw Qi=!1,a=Ri,Ri=null,a;if(0!==(X&8))return null;ig();return null}
	function ek(){for(;null!==Z;){var a=Z.alternate;Jj||null===Ij||(0!==(Z.flags&8)?dc(Z,Ij)&&(Jj=!0):13===Z.tag&&mj(a,Z)&&dc(Z,Ij)&&(Jj=!0));var b=Z.flags;0!==(b&256)&&Xi(a,Z);0===(b&512)||xj||(xj=!0,hg(97,function(){Oj();return null}));Z=Z.nextEffect;}}function Oj(){if(90!==zj){var a=97<zj?97:zj;zj=90;return gg(a,fk)}return !1}function $i(a,b){Aj.push(b,a);xj||(xj=!0,hg(97,function(){Oj();return null}));}function Zi(a,b){Bj.push(b,a);xj||(xj=!0,hg(97,function(){Oj();return null}));}
	function fk(){if(null===yj)return !1;var a=yj;yj=null;if(0!==(X&48))throw Error(y$1(331));var b=X;X|=32;var c=Bj;Bj=[];for(var d=0;d<c.length;d+=2){var e=c[d],f=c[d+1],g=e.destroy;e.destroy=void 0;if("function"===typeof g)try{g();}catch(k){if(null===f)throw Error(y$1(330));Wi(f,k);}}c=Aj;Aj=[];for(d=0;d<c.length;d+=2){e=c[d];f=c[d+1];try{var h=e.create;e.destroy=h();}catch(k){if(null===f)throw Error(y$1(330));Wi(f,k);}}for(h=a.current.firstEffect;null!==h;)a=h.nextEffect,h.nextEffect=null,h.flags&8&&(h.sibling=
	null,h.stateNode=null),h=a;X=b;ig();return !0}function gk(a,b,c){b=Mi(c,b);b=Pi(a,b,1);Ag(a,b);b=Hg();a=Kj(a,1);null!==a&&($c(a,1,b),Mj(a,b));}
	function Wi(a,b){if(3===a.tag)gk(a,a,b);else for(var c=a.return;null!==c;){if(3===c.tag){gk(c,a,b);break}else if(1===c.tag){var d=c.stateNode;if("function"===typeof c.type.getDerivedStateFromError||"function"===typeof d.componentDidCatch&&(null===Ti||!Ti.has(d))){a=Mi(b,a);var e=Si(c,a,1);Ag(c,e);e=Hg();c=Kj(c,1);if(null!==c)$c(c,1,e),Mj(c,e);else if("function"===typeof d.componentDidCatch&&(null===Ti||!Ti.has(d)))try{d.componentDidCatch(b,a);}catch(f){}break}}c=c.return;}}
	function Yj(a,b,c){var d=a.pingCache;null!==d&&d.delete(b);b=Hg();a.pingedLanes|=a.suspendedLanes&c;U===a&&(W&c)===c&&(4===V||3===V&&(W&62914560)===W&&500>O()-jj?Qj(a,0):uj|=c);Mj(a,b);}function lj(a,b){var c=a.stateNode;null!==c&&c.delete(b);b=0;0===b&&(b=a.mode,0===(b&2)?b=1:0===(b&4)?b=99===eg()?1:2:(0===Gj&&(Gj=tj),b=Yc(62914560&~Gj),0===b&&(b=4194304)));c=Hg();a=Kj(a,b);null!==a&&($c(a,b,c),Mj(a,c));}var ck;
	ck=function(a,b,c){var d=b.lanes;if(null!==a)if(a.memoizedProps!==b.pendingProps||N.current)ug=!0;else if(0!==(c&d))ug=0!==(a.flags&16384)?!0:!1;else {ug=!1;switch(b.tag){case 3:ri(b);sh();break;case 5:gh(b);break;case 1:Ff(b.type)&&Jf(b);break;case 4:eh(b,b.stateNode.containerInfo);break;case 10:d=b.memoizedProps.value;var e=b.type._context;I$1(mg,e._currentValue);e._currentValue=d;break;case 13:if(null!==b.memoizedState){if(0!==(c&b.child.childLanes))return ti(a,b,c);I$1(P,P.current&1);b=hi(a,b,c);return null!==
	b?b.sibling:null}I$1(P,P.current&1);break;case 19:d=0!==(c&b.childLanes);if(0!==(a.flags&64)){if(d)return Ai(a,b,c);b.flags|=64;}e=b.memoizedState;null!==e&&(e.rendering=null,e.tail=null,e.lastEffect=null);I$1(P,P.current);if(d)break;else return null;case 23:case 24:return b.lanes=0,mi(a,b,c)}return hi(a,b,c)}else ug=!1;b.lanes=0;switch(b.tag){case 2:d=b.type;null!==a&&(a.alternate=null,b.alternate=null,b.flags|=2);a=b.pendingProps;e=Ef(b,M.current);tg(b,c);e=Ch(null,b,d,a,e,c);b.flags|=1;if("object"===
	typeof e&&null!==e&&"function"===typeof e.render&&void 0===e.$$typeof){b.tag=1;b.memoizedState=null;b.updateQueue=null;if(Ff(d)){var f=!0;Jf(b);}else f=!1;b.memoizedState=null!==e.state&&void 0!==e.state?e.state:null;xg(b);var g=d.getDerivedStateFromProps;"function"===typeof g&&Gg(b,d,g,a);e.updater=Kg;b.stateNode=e;e._reactInternals=b;Og(b,d,a,c);b=qi(null,b,d,!0,f,c);}else b.tag=0,fi(null,b,e,c),b=b.child;return b;case 16:e=b.elementType;a:{null!==a&&(a.alternate=null,b.alternate=null,b.flags|=2);
	a=b.pendingProps;f=e._init;e=f(e._payload);b.type=e;f=b.tag=hk(e);a=lg(e,a);switch(f){case 0:b=li(null,b,e,a,c);break a;case 1:b=pi(null,b,e,a,c);break a;case 11:b=gi(null,b,e,a,c);break a;case 14:b=ii(null,b,e,lg(e.type,a),d,c);break a}throw Error(y$1(306,e,""));}return b;case 0:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:lg(d,e),li(a,b,d,e,c);case 1:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:lg(d,e),pi(a,b,d,e,c);case 3:ri(b);d=b.updateQueue;if(null===a||null===d)throw Error(y$1(282));
	d=b.pendingProps;e=b.memoizedState;e=null!==e?e.element:null;yg(a,b);Cg(b,d,null,c);d=b.memoizedState.element;if(d===e)sh(),b=hi(a,b,c);else {e=b.stateNode;if(f=e.hydrate)kh=rf(b.stateNode.containerInfo.firstChild),jh=b,f=lh=!0;if(f){a=e.mutableSourceEagerHydrationData;if(null!=a)for(e=0;e<a.length;e+=2)f=a[e],f._workInProgressVersionPrimary=a[e+1],th.push(f);c=Zg(b,null,d,c);for(b.child=c;c;)c.flags=c.flags&-3|1024,c=c.sibling;}else fi(a,b,d,c),sh();b=b.child;}return b;case 5:return gh(b),null===a&&
	ph(b),d=b.type,e=b.pendingProps,f=null!==a?a.memoizedProps:null,g=e.children,nf(d,e)?g=null:null!==f&&nf(d,f)&&(b.flags|=16),oi(a,b),fi(a,b,g,c),b.child;case 6:return null===a&&ph(b),null;case 13:return ti(a,b,c);case 4:return eh(b,b.stateNode.containerInfo),d=b.pendingProps,null===a?b.child=Yg(b,null,d,c):fi(a,b,d,c),b.child;case 11:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:lg(d,e),gi(a,b,d,e,c);case 7:return fi(a,b,b.pendingProps,c),b.child;case 8:return fi(a,b,b.pendingProps.children,
	c),b.child;case 12:return fi(a,b,b.pendingProps.children,c),b.child;case 10:a:{d=b.type._context;e=b.pendingProps;g=b.memoizedProps;f=e.value;var h=b.type._context;I$1(mg,h._currentValue);h._currentValue=f;if(null!==g)if(h=g.value,f=He(h,f)?0:("function"===typeof d._calculateChangedBits?d._calculateChangedBits(h,f):1073741823)|0,0===f){if(g.children===e.children&&!N.current){b=hi(a,b,c);break a}}else for(h=b.child,null!==h&&(h.return=b);null!==h;){var k=h.dependencies;if(null!==k){g=h.child;for(var l=
	k.firstContext;null!==l;){if(l.context===d&&0!==(l.observedBits&f)){1===h.tag&&(l=zg(-1,c&-c),l.tag=2,Ag(h,l));h.lanes|=c;l=h.alternate;null!==l&&(l.lanes|=c);sg(h.return,c);k.lanes|=c;break}l=l.next;}}else g=10===h.tag?h.type===b.type?null:h.child:h.child;if(null!==g)g.return=h;else for(g=h;null!==g;){if(g===b){g=null;break}h=g.sibling;if(null!==h){h.return=g.return;g=h;break}g=g.return;}h=g;}fi(a,b,e.children,c);b=b.child;}return b;case 9:return e=b.type,f=b.pendingProps,d=f.children,tg(b,c),e=vg(e,
	f.unstable_observedBits),d=d(e),b.flags|=1,fi(a,b,d,c),b.child;case 14:return e=b.type,f=lg(e,b.pendingProps),f=lg(e.type,f),ii(a,b,e,f,d,c);case 15:return ki(a,b,b.type,b.pendingProps,d,c);case 17:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:lg(d,e),null!==a&&(a.alternate=null,b.alternate=null,b.flags|=2),b.tag=1,Ff(d)?(a=!0,Jf(b)):a=!1,tg(b,c),Mg(b,d,e),Og(b,d,e,c),qi(null,b,d,!0,a,c);case 19:return Ai(a,b,c);case 23:return mi(a,b,c);case 24:return mi(a,b,c)}throw Error(y$1(156,b.tag));
	};function ik(a,b,c,d){this.tag=a;this.key=c;this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null;this.index=0;this.ref=null;this.pendingProps=b;this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null;this.mode=d;this.flags=0;this.lastEffect=this.firstEffect=this.nextEffect=null;this.childLanes=this.lanes=0;this.alternate=null;}function nh(a,b,c,d){return new ik(a,b,c,d)}function ji(a){a=a.prototype;return !(!a||!a.isReactComponent)}
	function hk(a){if("function"===typeof a)return ji(a)?1:0;if(void 0!==a&&null!==a){a=a.$$typeof;if(a===Aa)return 11;if(a===Da)return 14}return 2}
	function Tg(a,b){var c=a.alternate;null===c?(c=nh(a.tag,b,a.key,a.mode),c.elementType=a.elementType,c.type=a.type,c.stateNode=a.stateNode,c.alternate=a,a.alternate=c):(c.pendingProps=b,c.type=a.type,c.flags=0,c.nextEffect=null,c.firstEffect=null,c.lastEffect=null);c.childLanes=a.childLanes;c.lanes=a.lanes;c.child=a.child;c.memoizedProps=a.memoizedProps;c.memoizedState=a.memoizedState;c.updateQueue=a.updateQueue;b=a.dependencies;c.dependencies=null===b?null:{lanes:b.lanes,firstContext:b.firstContext};
	c.sibling=a.sibling;c.index=a.index;c.ref=a.ref;return c}
	function Vg(a,b,c,d,e,f){var g=2;d=a;if("function"===typeof a)ji(a)&&(g=1);else if("string"===typeof a)g=5;else a:switch(a){case ua:return Xg(c.children,e,f,b);case Ha:g=8;e|=16;break;case wa:g=8;e|=1;break;case xa:return a=nh(12,c,b,e|8),a.elementType=xa,a.type=xa,a.lanes=f,a;case Ba:return a=nh(13,c,b,e),a.type=Ba,a.elementType=Ba,a.lanes=f,a;case Ca:return a=nh(19,c,b,e),a.elementType=Ca,a.lanes=f,a;case Ia:return vi(c,e,f,b);case Ja:return a=nh(24,c,b,e),a.elementType=Ja,a.lanes=f,a;default:if("object"===
	typeof a&&null!==a)switch(a.$$typeof){case ya:g=10;break a;case za:g=9;break a;case Aa:g=11;break a;case Da:g=14;break a;case Ea:g=16;d=null;break a;case Fa:g=22;break a}throw Error(y$1(130,null==a?a:typeof a,""));}b=nh(g,c,b,e);b.elementType=a;b.type=d;b.lanes=f;return b}function Xg(a,b,c,d){a=nh(7,a,d,b);a.lanes=c;return a}function vi(a,b,c,d){a=nh(23,a,d,b);a.elementType=Ia;a.lanes=c;return a}function Ug(a,b,c){a=nh(6,a,null,b);a.lanes=c;return a}
	function Wg(a,b,c){b=nh(4,null!==a.children?a.children:[],a.key,b);b.lanes=c;b.stateNode={containerInfo:a.containerInfo,pendingChildren:null,implementation:a.implementation};return b}
	function jk(a,b,c){this.tag=b;this.containerInfo=a;this.finishedWork=this.pingCache=this.current=this.pendingChildren=null;this.timeoutHandle=-1;this.pendingContext=this.context=null;this.hydrate=c;this.callbackNode=null;this.callbackPriority=0;this.eventTimes=Zc(0);this.expirationTimes=Zc(-1);this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0;this.entanglements=Zc(0);this.mutableSourceEagerHydrationData=null;}
	function kk(a,b,c){var d=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return {$$typeof:ta,key:null==d?null:""+d,children:a,containerInfo:b,implementation:c}}
	function lk(a,b,c,d){var e=b.current,f=Hg(),g=Ig(e);a:if(c){c=c._reactInternals;b:{if(Zb(c)!==c||1!==c.tag)throw Error(y$1(170));var h=c;do{switch(h.tag){case 3:h=h.stateNode.context;break b;case 1:if(Ff(h.type)){h=h.stateNode.__reactInternalMemoizedMergedChildContext;break b}}h=h.return;}while(null!==h);throw Error(y$1(171));}if(1===c.tag){var k=c.type;if(Ff(k)){c=If(c,k,h);break a}}c=h;}else c=Cf;null===b.context?b.context=c:b.pendingContext=c;b=zg(f,g);b.payload={element:a};d=void 0===d?null:d;null!==
	d&&(b.callback=d);Ag(e,b);Jg(e,g,f);return g}function mk(a){a=a.current;if(!a.child)return null;switch(a.child.tag){case 5:return a.child.stateNode;default:return a.child.stateNode}}function nk(a,b){a=a.memoizedState;if(null!==a&&null!==a.dehydrated){var c=a.retryLane;a.retryLane=0!==c&&c<b?c:b;}}function ok(a,b){nk(a,b);(a=a.alternate)&&nk(a,b);}function pk(){return null}
	function qk(a,b,c){var d=null!=c&&null!=c.hydrationOptions&&c.hydrationOptions.mutableSources||null;c=new jk(a,b,null!=c&&!0===c.hydrate);b=nh(3,null,null,2===b?7:1===b?3:0);c.current=b;b.stateNode=c;xg(b);a[ff]=c.current;cf(8===a.nodeType?a.parentNode:a);if(d)for(a=0;a<d.length;a++){b=d[a];var e=b._getVersion;e=e(b._source);null==c.mutableSourceEagerHydrationData?c.mutableSourceEagerHydrationData=[b,e]:c.mutableSourceEagerHydrationData.push(b,e);}this._internalRoot=c;}
	qk.prototype.render=function(a){lk(a,this._internalRoot,null,null);};qk.prototype.unmount=function(){var a=this._internalRoot,b=a.containerInfo;lk(null,a,null,function(){b[ff]=null;});};function rk(a){return !(!a||1!==a.nodeType&&9!==a.nodeType&&11!==a.nodeType&&(8!==a.nodeType||" react-mount-point-unstable "!==a.nodeValue))}
	function sk(a,b){b||(b=a?9===a.nodeType?a.documentElement:a.firstChild:null,b=!(!b||1!==b.nodeType||!b.hasAttribute("data-reactroot")));if(!b)for(var c;c=a.lastChild;)a.removeChild(c);return new qk(a,0,b?{hydrate:!0}:void 0)}
	function tk(a,b,c,d,e){var f=c._reactRootContainer;if(f){var g=f._internalRoot;if("function"===typeof e){var h=e;e=function(){var a=mk(g);h.call(a);};}lk(b,g,a,e);}else {f=c._reactRootContainer=sk(c,d);g=f._internalRoot;if("function"===typeof e){var k=e;e=function(){var a=mk(g);k.call(a);};}Xj(function(){lk(b,g,a,e);});}return mk(g)}ec=function(a){if(13===a.tag){var b=Hg();Jg(a,4,b);ok(a,4);}};fc=function(a){if(13===a.tag){var b=Hg();Jg(a,67108864,b);ok(a,67108864);}};
	gc=function(a){if(13===a.tag){var b=Hg(),c=Ig(a);Jg(a,c,b);ok(a,c);}};hc=function(a,b){return b()};
	yb=function(a,b,c){switch(b){case "input":ab(a,c);b=c.name;if("radio"===c.type&&null!=b){for(c=a;c.parentNode;)c=c.parentNode;c=c.querySelectorAll("input[name="+JSON.stringify(""+b)+'][type="radio"]');for(b=0;b<c.length;b++){var d=c[b];if(d!==a&&d.form===a.form){var e=Db(d);if(!e)throw Error(y$1(90));Wa(d);ab(d,e);}}}break;case "textarea":ib(a,c);break;case "select":b=c.value,null!=b&&fb(a,!!c.multiple,b,!1);}};Gb=Wj;
	Hb=function(a,b,c,d,e){var f=X;X|=4;try{return gg(98,a.bind(null,b,c,d,e))}finally{X=f,0===X&&(wj(),ig());}};Ib=function(){0===(X&49)&&(Vj(),Oj());};Jb=function(a,b){var c=X;X|=2;try{return a(b)}finally{X=c,0===X&&(wj(),ig());}};function uk(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!rk(b))throw Error(y$1(200));return kk(a,b,null,c)}var vk={Events:[Cb,ue,Db,Eb,Fb,Oj,{current:!1}]},wk={findFiberByHostInstance:wc,bundleType:0,version:"17.0.2",rendererPackageName:"react-dom"};
	var xk={bundleType:wk.bundleType,version:wk.version,rendererPackageName:wk.rendererPackageName,rendererConfig:wk.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:ra.ReactCurrentDispatcher,findHostInstanceByFiber:function(a){a=cc(a);return null===a?null:a.stateNode},findFiberByHostInstance:wk.findFiberByHostInstance||
	pk,findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null};if("undefined"!==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var yk=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!yk.isDisabled&&yk.supportsFiber)try{Lf=yk.inject(xk),Mf=yk;}catch(a){}}reactDom_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=vk;reactDom_production_min.createPortal=uk;
	reactDom_production_min.findDOMNode=function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternals;if(void 0===b){if("function"===typeof a.render)throw Error(y$1(188));throw Error(y$1(268,Object.keys(a)));}a=cc(b);a=null===a?null:a.stateNode;return a};reactDom_production_min.flushSync=function(a,b){var c=X;if(0!==(c&48))return a(b);X|=1;try{if(a)return gg(99,a.bind(null,b))}finally{X=c,ig();}};reactDom_production_min.hydrate=function(a,b,c){if(!rk(b))throw Error(y$1(200));return tk(null,a,b,!0,c)};
	reactDom_production_min.render=function(a,b,c){if(!rk(b))throw Error(y$1(200));return tk(null,a,b,!1,c)};reactDom_production_min.unmountComponentAtNode=function(a){if(!rk(a))throw Error(y$1(40));return a._reactRootContainer?(Xj(function(){tk(null,null,a,!1,function(){a._reactRootContainer=null;a[ff]=null;});}),!0):!1};reactDom_production_min.unstable_batchedUpdates=Wj;reactDom_production_min.unstable_createPortal=function(a,b){return uk(a,b,2<arguments.length&&void 0!==arguments[2]?arguments[2]:null)};
	reactDom_production_min.unstable_renderSubtreeIntoContainer=function(a,b,c,d){if(!rk(c))throw Error(y$1(200));if(null==a||void 0===a._reactInternals)throw Error(y$1(38));return tk(a,b,c,!1,d)};reactDom_production_min.version="17.0.2";

	(function (module) {

		function checkDCE() {
		  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
		  if (
		    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||
		    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'
		  ) {
		    return;
		  }
		  try {
		    // Verify that the code above has been dead code eliminated (DCE'd).
		    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
		  } catch (err) {
		    // DevTools shouldn't crash React, no matter what.
		    // We should still report in case we break this code.
		    console.error(err);
		  }
		}

		{
		  // DCE check should happen before ReactDOM bundle executes so that
		  // DevTools can report bad minification during injection.
		  checkDCE();
		  module.exports = reactDom_production_min;
		}
	} (reactDom));

	var ReactDOM = /*@__PURE__*/getDefaultExportFromCjs(reactDom.exports);

	function chainPropTypes(propType1, propType2) {
	  {
	    return function () {
	      return null;
	    };
	  }
	}

	function _extends$a() {
	  _extends$a = Object.assign || function (target) {
	    for (var i = 1; i < arguments.length; i++) {
	      var source = arguments[i];

	      for (var key in source) {
	        if (Object.prototype.hasOwnProperty.call(source, key)) {
	          target[key] = source[key];
	        }
	      }
	    }

	    return target;
	  };

	  return _extends$a.apply(this, arguments);
	}

	function _typeof2$2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2$2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2$2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2$2(obj); }

	function _typeof$3(obj) {
	  if (typeof Symbol === "function" && _typeof2$2(Symbol.iterator) === "symbol") {
	    _typeof$3 = function _typeof(obj) {
	      return _typeof2$2(obj);
	    };
	  } else {
	    _typeof$3 = function _typeof(obj) {
	      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2$2(obj);
	    };
	  }

	  return _typeof$3(obj);
	}

	function isPlainObject(item) {
	  return item && _typeof$3(item) === 'object' && item.constructor === Object;
	}
	function deepmerge(target, source) {
	  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
	    clone: true
	  };
	  var output = options.clone ? _extends$a({}, target) : target;

	  if (isPlainObject(target) && isPlainObject(source)) {
	    Object.keys(source).forEach(function (key) {
	      // Avoid prototype pollution
	      if (key === '__proto__') {
	        return;
	      }

	      if (isPlainObject(source[key]) && key in target) {
	        output[key] = deepmerge(target[key], source[key], options);
	      } else {
	        output[key] = source[key];
	      }
	    });
	  }

	  return output;
	}

	var propTypes = {exports: {}};

	/**
	 * Copyright (c) 2013-present, Facebook, Inc.
	 *
	 * This source code is licensed under the MIT license found in the
	 * LICENSE file in the root directory of this source tree.
	 */

	var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';

	var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;

	/**
	 * Copyright (c) 2013-present, Facebook, Inc.
	 *
	 * This source code is licensed under the MIT license found in the
	 * LICENSE file in the root directory of this source tree.
	 */

	var ReactPropTypesSecret = ReactPropTypesSecret_1;

	function emptyFunction() {}
	function emptyFunctionWithReset() {}
	emptyFunctionWithReset.resetWarningCache = emptyFunction;

	var factoryWithThrowingShims = function() {
	  function shim(props, propName, componentName, location, propFullName, secret) {
	    if (secret === ReactPropTypesSecret) {
	      // It is still safe when called from React.
	      return;
	    }
	    var err = new Error(
	      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
	      'Use PropTypes.checkPropTypes() to call them. ' +
	      'Read more at http://fb.me/use-check-prop-types'
	    );
	    err.name = 'Invariant Violation';
	    throw err;
	  }  shim.isRequired = shim;
	  function getShim() {
	    return shim;
	  }  // Important!
	  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
	  var ReactPropTypes = {
	    array: shim,
	    bool: shim,
	    func: shim,
	    number: shim,
	    object: shim,
	    string: shim,
	    symbol: shim,

	    any: shim,
	    arrayOf: getShim,
	    element: shim,
	    elementType: shim,
	    instanceOf: getShim,
	    node: shim,
	    objectOf: getShim,
	    oneOf: getShim,
	    oneOfType: getShim,
	    shape: getShim,
	    exact: getShim,

	    checkPropTypes: emptyFunctionWithReset,
	    resetWarningCache: emptyFunction
	  };

	  ReactPropTypes.PropTypes = ReactPropTypes;

	  return ReactPropTypes;
	};

	/**
	 * Copyright (c) 2013-present, Facebook, Inc.
	 *
	 * This source code is licensed under the MIT license found in the
	 * LICENSE file in the root directory of this source tree.
	 */

	{
	  // By explicitly using `prop-types` you are opting into new production behavior.
	  // http://fb.me/prop-types-in-prod
	  propTypes.exports = factoryWithThrowingShims();
	}

	var elementAcceptingRef = chainPropTypes(propTypes.exports.element);
	elementAcceptingRef.isRequired = chainPropTypes(propTypes.exports.element.isRequired);

	/**
	 * WARNING: Don't import this directly.
	 * Use `MuiError` from `@material-ui/utils/macros/MuiError.macro` instead.
	 * @param {number} code
	 */
	function formatMuiErrorMessage(code) {
	  // Apply babel-plugin-transform-template-literals in loose mode
	  // loose mode is safe iff we're concatenating primitives
	  // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose

	  /* eslint-disable prefer-template */
	  var url = 'https://mui.com/production-error/?code=' + code;

	  for (var i = 1; i < arguments.length; i += 1) {
	    // rest params over-transpile for this case
	    // eslint-disable-next-line prefer-rest-params
	    url += '&args[]=' + encodeURIComponent(arguments[i]);
	  }

	  return 'Minified Material-UI error #' + code + '; visit ' + url + ' for the full message.';
	  /* eslint-enable prefer-template */
	}

	var reactIs$1 = {exports: {}};

	var reactIs_production_min = {};

	/** @license React v17.0.2
	 * react-is.production.min.js
	 *
	 * Copyright (c) Facebook, Inc. and its affiliates.
	 *
	 * This source code is licensed under the MIT license found in the
	 * LICENSE file in the root directory of this source tree.
	 */
	var b=60103,c=60106,d=60107,e=60108,f=60114,g=60109,h=60110,k=60112,l=60113,m=60120,n=60115,p=60116,q=60121,r=60122,u=60117,v=60129,w=60131;
	if("function"===typeof Symbol&&Symbol.for){var x=Symbol.for;b=x("react.element");c=x("react.portal");d=x("react.fragment");e=x("react.strict_mode");f=x("react.profiler");g=x("react.provider");h=x("react.context");k=x("react.forward_ref");l=x("react.suspense");m=x("react.suspense_list");n=x("react.memo");p=x("react.lazy");q=x("react.block");r=x("react.server.block");u=x("react.fundamental");v=x("react.debug_trace_mode");w=x("react.legacy_hidden");}
	function y(a){if("object"===typeof a&&null!==a){var t=a.$$typeof;switch(t){case b:switch(a=a.type,a){case d:case f:case e:case l:case m:return a;default:switch(a=a&&a.$$typeof,a){case h:case k:case p:case n:case g:return a;default:return t}}case c:return t}}}var z=g,A=b,B=k,C=d,D=p,E=n,F=c,G=f,H=e,I=l;reactIs_production_min.ContextConsumer=h;reactIs_production_min.ContextProvider=z;reactIs_production_min.Element=A;reactIs_production_min.ForwardRef=B;reactIs_production_min.Fragment=C;reactIs_production_min.Lazy=D;reactIs_production_min.Memo=E;reactIs_production_min.Portal=F;reactIs_production_min.Profiler=G;reactIs_production_min.StrictMode=H;
	reactIs_production_min.Suspense=I;reactIs_production_min.isAsyncMode=function(){return !1};reactIs_production_min.isConcurrentMode=function(){return !1};reactIs_production_min.isContextConsumer=function(a){return y(a)===h};reactIs_production_min.isContextProvider=function(a){return y(a)===g};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min.isForwardRef=function(a){return y(a)===k};reactIs_production_min.isFragment=function(a){return y(a)===d};reactIs_production_min.isLazy=function(a){return y(a)===p};reactIs_production_min.isMemo=function(a){return y(a)===n};
	reactIs_production_min.isPortal=function(a){return y(a)===c};reactIs_production_min.isProfiler=function(a){return y(a)===f};reactIs_production_min.isStrictMode=function(a){return y(a)===e};reactIs_production_min.isSuspense=function(a){return y(a)===l};reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===v||a===e||a===l||a===m||a===w||"object"===typeof a&&null!==a&&(a.$$typeof===p||a.$$typeof===n||a.$$typeof===g||a.$$typeof===h||a.$$typeof===k||a.$$typeof===u||a.$$typeof===q||a[0]===r)?!0:!1};
	reactIs_production_min.typeOf=y;

	(function (module) {

		{
		  module.exports = reactIs_production_min;
		}
	} (reactIs$1));

	/* eslint-disable */
	// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
	typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();

	propTypes.exports.oneOfType([propTypes.exports.func, propTypes.exports.object]);

	var hasSymbol = typeof Symbol === 'function' && Symbol.for;
	var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';

	/**
	 * This is the list of the style rule name we use as drop in replacement for the built-in
	 * pseudo classes (:checked, :disabled, :focused, etc.).
	 *
	 * Why do they exist in the first place?
	 * These classes are used at a specificity of 2.
	 * It allows them to override previously definied styles as well as
	 * being untouched by simple user overrides.
	 */

	var pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected']; // Returns a function which generates unique class names based on counters.
	// When new generator function is created, rule counter is reset.
	// We need to reset the rule counter for SSR for each request.
	//
	// It's inspired by
	// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js

	function createGenerateClassName() {
	  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  var _options$disableGloba = options.disableGlobal,
	      disableGlobal = _options$disableGloba === void 0 ? false : _options$disableGloba,
	      _options$productionPr = options.productionPrefix,
	      productionPrefix = _options$productionPr === void 0 ? 'jss' : _options$productionPr,
	      _options$seed = options.seed,
	      seed = _options$seed === void 0 ? '' : _options$seed;
	  var seedPrefix = seed === '' ? '' : "".concat(seed, "-");
	  var ruleCounter = 0;

	  var getNextCounterId = function getNextCounterId() {
	    ruleCounter += 1;

	    return ruleCounter;
	  };

	  return function (rule, styleSheet) {
	    var name = styleSheet.options.name; // Is a global static MUI style?

	    if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
	      // We can use a shorthand class name, we never use the keys to style the components.
	      if (pseudoClasses.indexOf(rule.key) !== -1) {
	        return "Mui-".concat(rule.key);
	      }

	      var prefix = "".concat(seedPrefix).concat(name, "-").concat(rule.key);

	      if (!styleSheet.options.theme[nested] || seed !== '') {
	        return prefix;
	      }

	      return "".concat(prefix, "-").concat(getNextCounterId());
	    }

	    {
	      return "".concat(seedPrefix).concat(productionPrefix).concat(getNextCounterId());
	    }
	  };
	}

	/* eslint-disable no-restricted-syntax */
	function getThemeProps(params) {
	  var theme = params.theme,
	      name = params.name,
	      props = params.props;

	  if (!theme || !theme.props || !theme.props[name]) {
	    return props;
	  } // Resolve default props, code borrow from React source.
	  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221


	  var defaultProps = theme.props[name];
	  var propName;

	  for (propName in defaultProps) {
	    if (props[propName] === undefined) {
	      props[propName] = defaultProps[propName];
	    }
	  }

	  return props;
	}

	function _extends$9() {
	  _extends$9 = Object.assign || function (target) {
	    for (var i = 1; i < arguments.length; i++) {
	      var source = arguments[i];

	      for (var key in source) {
	        if (Object.prototype.hasOwnProperty.call(source, key)) {
	          target[key] = source[key];
	        }
	      }
	    }

	    return target;
	  };

	  return _extends$9.apply(this, arguments);
	}

	var _typeof$2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

	var isBrowser$1 = (typeof window === "undefined" ? "undefined" : _typeof$2(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$2(document)) === 'object' && document.nodeType === 9;

	function _defineProperties$1(target, props) {
	  for (var i = 0; i < props.length; i++) {
	    var descriptor = props[i];
	    descriptor.enumerable = descriptor.enumerable || false;
	    descriptor.configurable = true;
	    if ("value" in descriptor) descriptor.writable = true;
	    Object.defineProperty(target, descriptor.key, descriptor);
	  }
	}

	function _createClass$1(Constructor, protoProps, staticProps) {
	  if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
	  if (staticProps) _defineProperties$1(Constructor, staticProps);
	  return Constructor;
	}

	function _inheritsLoose$2(subClass, superClass) {
	  subClass.prototype = Object.create(superClass.prototype);
	  subClass.prototype.constructor = subClass;
	  subClass.__proto__ = superClass;
	}

	function _assertThisInitialized$2(self) {
	  if (self === void 0) {
	    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
	  }

	  return self;
	}

	function _objectWithoutPropertiesLoose$3(source, excluded) {
	  if (source == null) return {};
	  var target = {};
	  var sourceKeys = Object.keys(source);
	  var key, i;

	  for (i = 0; i < sourceKeys.length; i++) {
	    key = sourceKeys[i];
	    if (excluded.indexOf(key) >= 0) continue;
	    target[key] = source[key];
	  }

	  return target;
	}

	var plainObjectConstrurctor = {}.constructor;
	function cloneStyle(style) {
	  if (style == null || typeof style !== 'object') return style;
	  if (Array.isArray(style)) return style.map(cloneStyle);
	  if (style.constructor !== plainObjectConstrurctor) return style;
	  var newStyle = {};

	  for (var name in style) {
	    newStyle[name] = cloneStyle(style[name]);
	  }

	  return newStyle;
	}

	/**
	 * Create a rule instance.
	 */

	function createRule(name, decl, options) {
	  if (name === void 0) {
	    name = 'unnamed';
	  }

	  var jss = options.jss;
	  var declCopy = cloneStyle(decl);
	  var rule = jss.plugins.onCreateRule(name, declCopy, options);
	  if (rule) return rule; // It is an at-rule and it has no instance.

	  if (name[0] === '@') ;

	  return null;
	}

	var join = function join(value, by) {
	  var result = '';

	  for (var i = 0; i < value.length; i++) {
	    // Remove !important from the value, it will be readded later.
	    if (value[i] === '!important') break;
	    if (result) result += by;
	    result += value[i];
	  }

	  return result;
	};

	/**
	 * Converts array values to string.
	 *
	 * `margin: [['5px', '10px']]` > `margin: 5px 10px;`
	 * `border: ['1px', '2px']` > `border: 1px, 2px;`
	 * `margin: [['5px', '10px'], '!important']` > `margin: 5px 10px !important;`
	 * `color: ['red', !important]` > `color: red !important;`
	 */
	var toCssValue = function toCssValue(value, ignoreImportant) {
	  if (ignoreImportant === void 0) {
	    ignoreImportant = false;
	  }

	  if (!Array.isArray(value)) return value;
	  var cssValue = ''; // Support space separated values via `[['5px', '10px']]`.

	  if (Array.isArray(value[0])) {
	    for (var i = 0; i < value.length; i++) {
	      if (value[i] === '!important') break;
	      if (cssValue) cssValue += ', ';
	      cssValue += join(value[i], ' ');
	    }
	  } else cssValue = join(value, ', '); // Add !important, because it was ignored.


	  if (!ignoreImportant && value[value.length - 1] === '!important') {
	    cssValue += ' !important';
	  }

	  return cssValue;
	};

	/**
	 * Indent a string.
	 * http://jsperf.com/array-join-vs-for
	 */
	function indentStr(str, indent) {
	  var result = '';

	  for (var index = 0; index < indent; index++) {
	    result += '  ';
	  }

	  return result + str;
	}
	/**
	 * Converts a Rule to CSS string.
	 */


	function toCss(selector, style, options) {
	  if (options === void 0) {
	    options = {};
	  }

	  var result = '';
	  if (!style) return result;
	  var _options = options,
	      _options$indent = _options.indent,
	      indent = _options$indent === void 0 ? 0 : _options$indent;
	  var fallbacks = style.fallbacks;
	  if (selector) indent++; // Apply fallbacks first.

	  if (fallbacks) {
	    // Array syntax {fallbacks: [{prop: value}]}
	    if (Array.isArray(fallbacks)) {
	      for (var index = 0; index < fallbacks.length; index++) {
	        var fallback = fallbacks[index];

	        for (var prop in fallback) {
	          var value = fallback[prop];

	          if (value != null) {
	            if (result) result += '\n';
	            result += "" + indentStr(prop + ": " + toCssValue(value) + ";", indent);
	          }
	        }
	      }
	    } else {
	      // Object syntax {fallbacks: {prop: value}}
	      for (var _prop in fallbacks) {
	        var _value = fallbacks[_prop];

	        if (_value != null) {
	          if (result) result += '\n';
	          result += "" + indentStr(_prop + ": " + toCssValue(_value) + ";", indent);
	        }
	      }
	    }
	  }

	  for (var _prop2 in style) {
	    var _value2 = style[_prop2];

	    if (_value2 != null && _prop2 !== 'fallbacks') {
	      if (result) result += '\n';
	      result += "" + indentStr(_prop2 + ": " + toCssValue(_value2) + ";", indent);
	    }
	  } // Allow empty style in this case, because properties will be added dynamically.


	  if (!result && !options.allowEmpty) return result; // When rule is being stringified before selector was defined.

	  if (!selector) return result;
	  indent--;
	  if (result) result = "\n" + result + "\n";
	  return indentStr(selector + " {" + result, indent) + indentStr('}', indent);
	}

	var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
	var nativeEscape = typeof CSS !== 'undefined' && CSS.escape;
	var escape = (function (str) {
	  return nativeEscape ? nativeEscape(str) : str.replace(escapeRegex, '\\$1');
	});

	var BaseStyleRule =
	/*#__PURE__*/
	function () {
	  function BaseStyleRule(key, style, options) {
	    this.type = 'style';
	    this.key = void 0;
	    this.isProcessed = false;
	    this.style = void 0;
	    this.renderer = void 0;
	    this.renderable = void 0;
	    this.options = void 0;
	    var sheet = options.sheet,
	        Renderer = options.Renderer;
	    this.key = key;
	    this.options = options;
	    this.style = style;
	    if (sheet) this.renderer = sheet.renderer;else if (Renderer) this.renderer = new Renderer();
	  }
	  /**
	   * Get or set a style property.
	   */


	  var _proto = BaseStyleRule.prototype;

	  _proto.prop = function prop(name, value, options) {
	    // It's a getter.
	    if (value === undefined) return this.style[name]; // Don't do anything if the value has not changed.

	    var force = options ? options.force : false;
	    if (!force && this.style[name] === value) return this;
	    var newValue = value;

	    if (!options || options.process !== false) {
	      newValue = this.options.jss.plugins.onChangeValue(value, name, this);
	    }

	    var isEmpty = newValue == null || newValue === false;
	    var isDefined = name in this.style; // Value is empty and wasn't defined before.

	    if (isEmpty && !isDefined && !force) return this; // We are going to remove this value.

	    var remove = isEmpty && isDefined;
	    if (remove) delete this.style[name];else this.style[name] = newValue; // Renderable is defined if StyleSheet option `link` is true.

	    if (this.renderable && this.renderer) {
	      if (remove) this.renderer.removeProperty(this.renderable, name);else this.renderer.setProperty(this.renderable, name, newValue);
	      return this;
	    }

	    var sheet = this.options.sheet;

	    if (sheet && sheet.attached) ;

	    return this;
	  };

	  return BaseStyleRule;
	}();
	var StyleRule =
	/*#__PURE__*/
	function (_BaseStyleRule) {
	  _inheritsLoose$2(StyleRule, _BaseStyleRule);

	  function StyleRule(key, style, options) {
	    var _this;

	    _this = _BaseStyleRule.call(this, key, style, options) || this;
	    _this.selectorText = void 0;
	    _this.id = void 0;
	    _this.renderable = void 0;
	    var selector = options.selector,
	        scoped = options.scoped,
	        sheet = options.sheet,
	        generateId = options.generateId;

	    if (selector) {
	      _this.selectorText = selector;
	    } else if (scoped !== false) {
	      _this.id = generateId(_assertThisInitialized$2(_assertThisInitialized$2(_this)), sheet);
	      _this.selectorText = "." + escape(_this.id);
	    }

	    return _this;
	  }
	  /**
	   * Set selector string.
	   * Attention: use this with caution. Most browsers didn't implement
	   * selectorText setter, so this may result in rerendering of entire Style Sheet.
	   */


	  var _proto2 = StyleRule.prototype;

	  /**
	   * Apply rule to an element inline.
	   */
	  _proto2.applyTo = function applyTo(renderable) {
	    var renderer = this.renderer;

	    if (renderer) {
	      var json = this.toJSON();

	      for (var prop in json) {
	        renderer.setProperty(renderable, prop, json[prop]);
	      }
	    }

	    return this;
	  }
	  /**
	   * Returns JSON representation of the rule.
	   * Fallbacks are not supported.
	   * Useful for inline styles.
	   */
	  ;

	  _proto2.toJSON = function toJSON() {
	    var json = {};

	    for (var prop in this.style) {
	      var value = this.style[prop];
	      if (typeof value !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = toCssValue(value);
	    }

	    return json;
	  }
	  /**
	   * Generates a CSS string.
	   */
	  ;

	  _proto2.toString = function toString(options) {
	    var sheet = this.options.sheet;
	    var link = sheet ? sheet.options.link : false;
	    var opts = link ? _extends$9({}, options, {
	      allowEmpty: true
	    }) : options;
	    return toCss(this.selectorText, this.style, opts);
	  };

	  _createClass$1(StyleRule, [{
	    key: "selector",
	    set: function set(selector) {
	      if (selector === this.selectorText) return;
	      this.selectorText = selector;
	      var renderer = this.renderer,
	          renderable = this.renderable;
	      if (!renderable || !renderer) return;
	      var hasChanged = renderer.setSelector(renderable, selector); // If selector setter is not implemented, rerender the rule.

	      if (!hasChanged) {
	        renderer.replaceRule(renderable, this);
	      }
	    }
	    /**
	     * Get selector string.
	     */
	    ,
	    get: function get() {
	      return this.selectorText;
	    }
	  }]);

	  return StyleRule;
	}(BaseStyleRule);
	var pluginStyleRule = {
	  onCreateRule: function onCreateRule(name, style, options) {
	    if (name[0] === '@' || options.parent && options.parent.type === 'keyframes') {
	      return null;
	    }

	    return new StyleRule(name, style, options);
	  }
	};

	var defaultToStringOptions = {
	  indent: 1,
	  children: true
	};
	var atRegExp = /@([\w-]+)/;
	/**
	 * Conditional rule for @media, @supports
	 */

	var ConditionalRule =
	/*#__PURE__*/
	function () {
	  function ConditionalRule(key, styles, options) {
	    this.type = 'conditional';
	    this.at = void 0;
	    this.key = void 0;
	    this.query = void 0;
	    this.rules = void 0;
	    this.options = void 0;
	    this.isProcessed = false;
	    this.renderable = void 0;
	    this.key = key;
	    var atMatch = key.match(atRegExp);
	    this.at = atMatch ? atMatch[1] : 'unknown'; // Key might contain a unique suffix in case the `name` passed by user was duplicate.

	    this.query = options.name || "@" + this.at;
	    this.options = options;
	    this.rules = new RuleList(_extends$9({}, options, {
	      parent: this
	    }));

	    for (var name in styles) {
	      this.rules.add(name, styles[name]);
	    }

	    this.rules.process();
	  }
	  /**
	   * Get a rule.
	   */


	  var _proto = ConditionalRule.prototype;

	  _proto.getRule = function getRule(name) {
	    return this.rules.get(name);
	  }
	  /**
	   * Get index of a rule.
	   */
	  ;

	  _proto.indexOf = function indexOf(rule) {
	    return this.rules.indexOf(rule);
	  }
	  /**
	   * Create and register rule, run plugins.
	   */
	  ;

	  _proto.addRule = function addRule(name, style, options) {
	    var rule = this.rules.add(name, style, options);
	    if (!rule) return null;
	    this.options.jss.plugins.onProcessRule(rule);
	    return rule;
	  }
	  /**
	   * Generates a CSS string.
	   */
	  ;

	  _proto.toString = function toString(options) {
	    if (options === void 0) {
	      options = defaultToStringOptions;
	    }

	    if (options.indent == null) options.indent = defaultToStringOptions.indent;
	    if (options.children == null) options.children = defaultToStringOptions.children;

	    if (options.children === false) {
	      return this.query + " {}";
	    }

	    var children = this.rules.toString(options);
	    return children ? this.query + " {\n" + children + "\n}" : '';
	  };

	  return ConditionalRule;
	}();
	var keyRegExp = /@media|@supports\s+/;
	var pluginConditionalRule = {
	  onCreateRule: function onCreateRule(key, styles, options) {
	    return keyRegExp.test(key) ? new ConditionalRule(key, styles, options) : null;
	  }
	};

	var defaultToStringOptions$1 = {
	  indent: 1,
	  children: true
	};
	var nameRegExp = /@keyframes\s+([\w-]+)/;
	/**
	 * Rule for @keyframes
	 */

	var KeyframesRule =
	/*#__PURE__*/
	function () {
	  function KeyframesRule(key, frames, options) {
	    this.type = 'keyframes';
	    this.at = '@keyframes';
	    this.key = void 0;
	    this.name = void 0;
	    this.id = void 0;
	    this.rules = void 0;
	    this.options = void 0;
	    this.isProcessed = false;
	    this.renderable = void 0;
	    var nameMatch = key.match(nameRegExp);

	    if (nameMatch && nameMatch[1]) {
	      this.name = nameMatch[1];
	    } else {
	      this.name = 'noname';
	    }

	    this.key = this.type + "-" + this.name;
	    this.options = options;
	    var scoped = options.scoped,
	        sheet = options.sheet,
	        generateId = options.generateId;
	    this.id = scoped === false ? this.name : escape(generateId(this, sheet));
	    this.rules = new RuleList(_extends$9({}, options, {
	      parent: this
	    }));

	    for (var name in frames) {
	      this.rules.add(name, frames[name], _extends$9({}, options, {
	        parent: this
	      }));
	    }

	    this.rules.process();
	  }
	  /**
	   * Generates a CSS string.
	   */


	  var _proto = KeyframesRule.prototype;

	  _proto.toString = function toString(options) {
	    if (options === void 0) {
	      options = defaultToStringOptions$1;
	    }

	    if (options.indent == null) options.indent = defaultToStringOptions$1.indent;
	    if (options.children == null) options.children = defaultToStringOptions$1.children;

	    if (options.children === false) {
	      return this.at + " " + this.id + " {}";
	    }

	    var children = this.rules.toString(options);
	    if (children) children = "\n" + children + "\n";
	    return this.at + " " + this.id + " {" + children + "}";
	  };

	  return KeyframesRule;
	}();
	var keyRegExp$1 = /@keyframes\s+/;
	var refRegExp$1 = /\$([\w-]+)/g;

	var findReferencedKeyframe = function findReferencedKeyframe(val, keyframes) {
	  if (typeof val === 'string') {
	    return val.replace(refRegExp$1, function (match, name) {
	      if (name in keyframes) {
	        return keyframes[name];
	      }
	      return match;
	    });
	  }

	  return val;
	};
	/**
	 * Replace the reference for a animation name.
	 */


	var replaceRef = function replaceRef(style, prop, keyframes) {
	  var value = style[prop];
	  var refKeyframe = findReferencedKeyframe(value, keyframes);

	  if (refKeyframe !== value) {
	    style[prop] = refKeyframe;
	  }
	};

	var plugin = {
	  onCreateRule: function onCreateRule(key, frames, options) {
	    return typeof key === 'string' && keyRegExp$1.test(key) ? new KeyframesRule(key, frames, options) : null;
	  },
	  // Animation name ref replacer.
	  onProcessStyle: function onProcessStyle(style, rule, sheet) {
	    if (rule.type !== 'style' || !sheet) return style;
	    if ('animation-name' in style) replaceRef(style, 'animation-name', sheet.keyframes);
	    if ('animation' in style) replaceRef(style, 'animation', sheet.keyframes);
	    return style;
	  },
	  onChangeValue: function onChangeValue(val, prop, rule) {
	    var sheet = rule.options.sheet;

	    if (!sheet) {
	      return val;
	    }

	    switch (prop) {
	      case 'animation':
	        return findReferencedKeyframe(val, sheet.keyframes);

	      case 'animation-name':
	        return findReferencedKeyframe(val, sheet.keyframes);

	      default:
	        return val;
	    }
	  }
	};

	var KeyframeRule =
	/*#__PURE__*/
	function (_BaseStyleRule) {
	  _inheritsLoose$2(KeyframeRule, _BaseStyleRule);

	  function KeyframeRule() {
	    var _this;

	    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
	      args[_key] = arguments[_key];
	    }

	    _this = _BaseStyleRule.call.apply(_BaseStyleRule, [this].concat(args)) || this;
	    _this.renderable = void 0;
	    return _this;
	  }

	  var _proto = KeyframeRule.prototype;

	  /**
	   * Generates a CSS string.
	   */
	  _proto.toString = function toString(options) {
	    var sheet = this.options.sheet;
	    var link = sheet ? sheet.options.link : false;
	    var opts = link ? _extends$9({}, options, {
	      allowEmpty: true
	    }) : options;
	    return toCss(this.key, this.style, opts);
	  };

	  return KeyframeRule;
	}(BaseStyleRule);
	var pluginKeyframeRule = {
	  onCreateRule: function onCreateRule(key, style, options) {
	    if (options.parent && options.parent.type === 'keyframes') {
	      return new KeyframeRule(key, style, options);
	    }

	    return null;
	  }
	};

	var FontFaceRule =
	/*#__PURE__*/
	function () {
	  function FontFaceRule(key, style, options) {
	    this.type = 'font-face';
	    this.at = '@font-face';
	    this.key = void 0;
	    this.style = void 0;
	    this.options = void 0;
	    this.isProcessed = false;
	    this.renderable = void 0;
	    this.key = key;
	    this.style = style;
	    this.options = options;
	  }
	  /**
	   * Generates a CSS string.
	   */


	  var _proto = FontFaceRule.prototype;

	  _proto.toString = function toString(options) {
	    if (Array.isArray(this.style)) {
	      var str = '';

	      for (var index = 0; index < this.style.length; index++) {
	        str += toCss(this.at, this.style[index]);
	        if (this.style[index + 1]) str += '\n';
	      }

	      return str;
	    }

	    return toCss(this.at, this.style, options);
	  };

	  return FontFaceRule;
	}();
	var keyRegExp$2 = /@font-face/;
	var pluginFontFaceRule = {
	  onCreateRule: function onCreateRule(key, style, options) {
	    return keyRegExp$2.test(key) ? new FontFaceRule(key, style, options) : null;
	  }
	};

	var ViewportRule =
	/*#__PURE__*/
	function () {
	  function ViewportRule(key, style, options) {
	    this.type = 'viewport';
	    this.at = '@viewport';
	    this.key = void 0;
	    this.style = void 0;
	    this.options = void 0;
	    this.isProcessed = false;
	    this.renderable = void 0;
	    this.key = key;
	    this.style = style;
	    this.options = options;
	  }
	  /**
	   * Generates a CSS string.
	   */


	  var _proto = ViewportRule.prototype;

	  _proto.toString = function toString(options) {
	    return toCss(this.key, this.style, options);
	  };

	  return ViewportRule;
	}();
	var pluginViewportRule = {
	  onCreateRule: function onCreateRule(key, style, options) {
	    return key === '@viewport' || key === '@-ms-viewport' ? new ViewportRule(key, style, options) : null;
	  }
	};

	var SimpleRule =
	/*#__PURE__*/
	function () {
	  function SimpleRule(key, value, options) {
	    this.type = 'simple';
	    this.key = void 0;
	    this.value = void 0;
	    this.options = void 0;
	    this.isProcessed = false;
	    this.renderable = void 0;
	    this.key = key;
	    this.value = value;
	    this.options = options;
	  }
	  /**
	   * Generates a CSS string.
	   */
	  // eslint-disable-next-line no-unused-vars


	  var _proto = SimpleRule.prototype;

	  _proto.toString = function toString(options) {
	    if (Array.isArray(this.value)) {
	      var str = '';

	      for (var index = 0; index < this.value.length; index++) {
	        str += this.key + " " + this.value[index] + ";";
	        if (this.value[index + 1]) str += '\n';
	      }

	      return str;
	    }

	    return this.key + " " + this.value + ";";
	  };

	  return SimpleRule;
	}();
	var keysMap = {
	  '@charset': true,
	  '@import': true,
	  '@namespace': true
	};
	var pluginSimpleRule = {
	  onCreateRule: function onCreateRule(key, value, options) {
	    return key in keysMap ? new SimpleRule(key, value, options) : null;
	  }
	};

	var plugins$1 = [pluginStyleRule, pluginConditionalRule, plugin, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];

	var defaultUpdateOptions = {
	  process: true
	};
	var forceUpdateOptions = {
	  force: true,
	  process: true
	  /**
	   * Contains rules objects and allows adding/removing etc.
	   * Is used for e.g. by `StyleSheet` or `ConditionalRule`.
	   */

	};

	var RuleList =
	/*#__PURE__*/
	function () {
	  // Rules registry for access by .get() method.
	  // It contains the same rule registered by name and by selector.
	  // Original styles object.
	  // Used to ensure correct rules order.
	  function RuleList(options) {
	    this.map = {};
	    this.raw = {};
	    this.index = [];
	    this.counter = 0;
	    this.options = void 0;
	    this.classes = void 0;
	    this.keyframes = void 0;
	    this.options = options;
	    this.classes = options.classes;
	    this.keyframes = options.keyframes;
	  }
	  /**
	   * Create and register rule.
	   *
	   * Will not render after Style Sheet was rendered the first time.
	   */


	  var _proto = RuleList.prototype;

	  _proto.add = function add(name, decl, ruleOptions) {
	    var _this$options = this.options,
	        parent = _this$options.parent,
	        sheet = _this$options.sheet,
	        jss = _this$options.jss,
	        Renderer = _this$options.Renderer,
	        generateId = _this$options.generateId,
	        scoped = _this$options.scoped;

	    var options = _extends$9({
	      classes: this.classes,
	      parent: parent,
	      sheet: sheet,
	      jss: jss,
	      Renderer: Renderer,
	      generateId: generateId,
	      scoped: scoped,
	      name: name,
	      keyframes: this.keyframes,
	      selector: undefined
	    }, ruleOptions); // When user uses .createStyleSheet(), duplicate names are not possible, but
	    // `sheet.addRule()` opens the door for any duplicate rule name. When this happens
	    // we need to make the key unique within this RuleList instance scope.


	    var key = name;

	    if (name in this.raw) {
	      key = name + "-d" + this.counter++;
	    } // We need to save the original decl before creating the rule
	    // because cache plugin needs to use it as a key to return a cached rule.


	    this.raw[key] = decl;

	    if (key in this.classes) {
	      // E.g. rules inside of @media container
	      options.selector = "." + escape(this.classes[key]);
	    }

	    var rule = createRule(key, decl, options);
	    if (!rule) return null;
	    this.register(rule);
	    var index = options.index === undefined ? this.index.length : options.index;
	    this.index.splice(index, 0, rule);
	    return rule;
	  }
	  /**
	   * Get a rule.
	   */
	  ;

	  _proto.get = function get(name) {
	    return this.map[name];
	  }
	  /**
	   * Delete a rule.
	   */
	  ;

	  _proto.remove = function remove(rule) {
	    this.unregister(rule);
	    delete this.raw[rule.key];
	    this.index.splice(this.index.indexOf(rule), 1);
	  }
	  /**
	   * Get index of a rule.
	   */
	  ;

	  _proto.indexOf = function indexOf(rule) {
	    return this.index.indexOf(rule);
	  }
	  /**
	   * Run `onProcessRule()` plugins on every rule.
	   */
	  ;

	  _proto.process = function process() {
	    var plugins = this.options.jss.plugins; // We need to clone array because if we modify the index somewhere else during a loop
	    // we end up with very hard-to-track-down side effects.

	    this.index.slice(0).forEach(plugins.onProcessRule, plugins);
	  }
	  /**
	   * Register a rule in `.map`, `.classes` and `.keyframes` maps.
	   */
	  ;

	  _proto.register = function register(rule) {
	    this.map[rule.key] = rule;

	    if (rule instanceof StyleRule) {
	      this.map[rule.selector] = rule;
	      if (rule.id) this.classes[rule.key] = rule.id;
	    } else if (rule instanceof KeyframesRule && this.keyframes) {
	      this.keyframes[rule.name] = rule.id;
	    }
	  }
	  /**
	   * Unregister a rule.
	   */
	  ;

	  _proto.unregister = function unregister(rule) {
	    delete this.map[rule.key];

	    if (rule instanceof StyleRule) {
	      delete this.map[rule.selector];
	      delete this.classes[rule.key];
	    } else if (rule instanceof KeyframesRule) {
	      delete this.keyframes[rule.name];
	    }
	  }
	  /**
	   * Update the function values with a new data.
	   */
	  ;

	  _proto.update = function update() {
	    var name;
	    var data;
	    var options;

	    if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
	      name = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe[invalid-tuple-index]

	      data = arguments.length <= 1 ? undefined : arguments[1]; // $FlowFixMe[invalid-tuple-index]

	      options = arguments.length <= 2 ? undefined : arguments[2];
	    } else {
	      data = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe[invalid-tuple-index]

	      options = arguments.length <= 1 ? undefined : arguments[1];
	      name = null;
	    }

	    if (name) {
	      this.updateOne(this.map[name], data, options);
	    } else {
	      for (var index = 0; index < this.index.length; index++) {
	        this.updateOne(this.index[index], data, options);
	      }
	    }
	  }
	  /**
	   * Execute plugins, update rule props.
	   */
	  ;

	  _proto.updateOne = function updateOne(rule, data, options) {
	    if (options === void 0) {
	      options = defaultUpdateOptions;
	    }

	    var _this$options2 = this.options,
	        plugins = _this$options2.jss.plugins,
	        sheet = _this$options2.sheet; // It is a rules container like for e.g. ConditionalRule.

	    if (rule.rules instanceof RuleList) {
	      rule.rules.update(data, options);
	      return;
	    }

	    var styleRule = rule;
	    var style = styleRule.style;
	    plugins.onUpdate(data, rule, sheet, options); // We rely on a new `style` ref in case it was mutated during onUpdate hook.

	    if (options.process && style && style !== styleRule.style) {
	      // We need to run the plugins in case new `style` relies on syntax plugins.
	      plugins.onProcessStyle(styleRule.style, styleRule, sheet); // Update and add props.

	      for (var prop in styleRule.style) {
	        var nextValue = styleRule.style[prop];
	        var prevValue = style[prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.
	        // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.

	        if (nextValue !== prevValue) {
	          styleRule.prop(prop, nextValue, forceUpdateOptions);
	        }
	      } // Remove props.


	      for (var _prop in style) {
	        var _nextValue = styleRule.style[_prop];
	        var _prevValue = style[_prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.
	        // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.

	        if (_nextValue == null && _nextValue !== _prevValue) {
	          styleRule.prop(_prop, null, forceUpdateOptions);
	        }
	      }
	    }
	  }
	  /**
	   * Convert rules to a CSS string.
	   */
	  ;

	  _proto.toString = function toString(options) {
	    var str = '';
	    var sheet = this.options.sheet;
	    var link = sheet ? sheet.options.link : false;

	    for (var index = 0; index < this.index.length; index++) {
	      var rule = this.index[index];
	      var css = rule.toString(options); // No need to render an empty rule.

	      if (!css && !link) continue;
	      if (str) str += '\n';
	      str += css;
	    }

	    return str;
	  };

	  return RuleList;
	}();

	var StyleSheet =
	/*#__PURE__*/
	function () {
	  function StyleSheet(styles, options) {
	    this.options = void 0;
	    this.deployed = void 0;
	    this.attached = void 0;
	    this.rules = void 0;
	    this.renderer = void 0;
	    this.classes = void 0;
	    this.keyframes = void 0;
	    this.queue = void 0;
	    this.attached = false;
	    this.deployed = false;
	    this.classes = {};
	    this.keyframes = {};
	    this.options = _extends$9({}, options, {
	      sheet: this,
	      parent: this,
	      classes: this.classes,
	      keyframes: this.keyframes
	    });

	    if (options.Renderer) {
	      this.renderer = new options.Renderer(this);
	    }

	    this.rules = new RuleList(this.options);

	    for (var name in styles) {
	      this.rules.add(name, styles[name]);
	    }

	    this.rules.process();
	  }
	  /**
	   * Attach renderable to the render tree.
	   */


	  var _proto = StyleSheet.prototype;

	  _proto.attach = function attach() {
	    if (this.attached) return this;
	    if (this.renderer) this.renderer.attach();
	    this.attached = true; // Order is important, because we can't use insertRule API if style element is not attached.

	    if (!this.deployed) this.deploy();
	    return this;
	  }
	  /**
	   * Remove renderable from render tree.
	   */
	  ;

	  _proto.detach = function detach() {
	    if (!this.attached) return this;
	    if (this.renderer) this.renderer.detach();
	    this.attached = false;
	    return this;
	  }
	  /**
	   * Add a rule to the current stylesheet.
	   * Will insert a rule also after the stylesheet has been rendered first time.
	   */
	  ;

	  _proto.addRule = function addRule(name, decl, options) {
	    var queue = this.queue; // Plugins can create rules.
	    // In order to preserve the right order, we need to queue all `.addRule` calls,
	    // which happen after the first `rules.add()` call.

	    if (this.attached && !queue) this.queue = [];
	    var rule = this.rules.add(name, decl, options);
	    if (!rule) return null;
	    this.options.jss.plugins.onProcessRule(rule);

	    if (this.attached) {
	      if (!this.deployed) return rule; // Don't insert rule directly if there is no stringified version yet.
	      // It will be inserted all together when .attach is called.

	      if (queue) queue.push(rule);else {
	        this.insertRule(rule);

	        if (this.queue) {
	          this.queue.forEach(this.insertRule, this);
	          this.queue = undefined;
	        }
	      }
	      return rule;
	    } // We can't add rules to a detached style node.
	    // We will redeploy the sheet once user will attach it.


	    this.deployed = false;
	    return rule;
	  }
	  /**
	   * Insert rule into the StyleSheet
	   */
	  ;

	  _proto.insertRule = function insertRule(rule) {
	    if (this.renderer) {
	      this.renderer.insertRule(rule);
	    }
	  }
	  /**
	   * Create and add rules.
	   * Will render also after Style Sheet was rendered the first time.
	   */
	  ;

	  _proto.addRules = function addRules(styles, options) {
	    var added = [];

	    for (var name in styles) {
	      var rule = this.addRule(name, styles[name], options);
	      if (rule) added.push(rule);
	    }

	    return added;
	  }
	  /**
	   * Get a rule by name.
	   */
	  ;

	  _proto.getRule = function getRule(name) {
	    return this.rules.get(name);
	  }
	  /**
	   * Delete a rule by name.
	   * Returns `true`: if rule has been deleted from the DOM.
	   */
	  ;

	  _proto.deleteRule = function deleteRule(name) {
	    var rule = typeof name === 'object' ? name : this.rules.get(name);

	    if (!rule || // Style sheet was created without link: true and attached, in this case we
	    // won't be able to remove the CSS rule from the DOM.
	    this.attached && !rule.renderable) {
	      return false;
	    }

	    this.rules.remove(rule);

	    if (this.attached && rule.renderable && this.renderer) {
	      return this.renderer.deleteRule(rule.renderable);
	    }

	    return true;
	  }
	  /**
	   * Get index of a rule.
	   */
	  ;

	  _proto.indexOf = function indexOf(rule) {
	    return this.rules.indexOf(rule);
	  }
	  /**
	   * Deploy pure CSS string to a renderable.
	   */
	  ;

	  _proto.deploy = function deploy() {
	    if (this.renderer) this.renderer.deploy();
	    this.deployed = true;
	    return this;
	  }
	  /**
	   * Update the function values with a new data.
	   */
	  ;

	  _proto.update = function update() {
	    var _this$rules;

	    (_this$rules = this.rules).update.apply(_this$rules, arguments);

	    return this;
	  }
	  /**
	   * Updates a single rule.
	   */
	  ;

	  _proto.updateOne = function updateOne(rule, data, options) {
	    this.rules.updateOne(rule, data, options);
	    return this;
	  }
	  /**
	   * Convert rules to a CSS string.
	   */
	  ;

	  _proto.toString = function toString(options) {
	    return this.rules.toString(options);
	  };

	  return StyleSheet;
	}();

	var PluginsRegistry =
	/*#__PURE__*/
	function () {
	  function PluginsRegistry() {
	    this.plugins = {
	      internal: [],
	      external: []
	    };
	    this.registry = void 0;
	  }

	  var _proto = PluginsRegistry.prototype;

	  /**
	   * Call `onCreateRule` hooks and return an object if returned by a hook.
	   */
	  _proto.onCreateRule = function onCreateRule(name, decl, options) {
	    for (var i = 0; i < this.registry.onCreateRule.length; i++) {
	      var rule = this.registry.onCreateRule[i](name, decl, options);
	      if (rule) return rule;
	    }

	    return null;
	  }
	  /**
	   * Call `onProcessRule` hooks.
	   */
	  ;

	  _proto.onProcessRule = function onProcessRule(rule) {
	    if (rule.isProcessed) return;
	    var sheet = rule.options.sheet;

	    for (var i = 0; i < this.registry.onProcessRule.length; i++) {
	      this.registry.onProcessRule[i](rule, sheet);
	    }

	    if (rule.style) this.onProcessStyle(rule.style, rule, sheet);
	    rule.isProcessed = true;
	  }
	  /**
	   * Call `onProcessStyle` hooks.
	   */
	  ;

	  _proto.onProcessStyle = function onProcessStyle(style, rule, sheet) {
	    for (var i = 0; i < this.registry.onProcessStyle.length; i++) {
	      // $FlowFixMe[prop-missing]
	      rule.style = this.registry.onProcessStyle[i](rule.style, rule, sheet);
	    }
	  }
	  /**
	   * Call `onProcessSheet` hooks.
	   */
	  ;

	  _proto.onProcessSheet = function onProcessSheet(sheet) {
	    for (var i = 0; i < this.registry.onProcessSheet.length; i++) {
	      this.registry.onProcessSheet[i](sheet);
	    }
	  }
	  /**
	   * Call `onUpdate` hooks.
	   */
	  ;

	  _proto.onUpdate = function onUpdate(data, rule, sheet, options) {
	    for (var i = 0; i < this.registry.onUpdate.length; i++) {
	      this.registry.onUpdate[i](data, rule, sheet, options);
	    }
	  }
	  /**
	   * Call `onChangeValue` hooks.
	   */
	  ;

	  _proto.onChangeValue = function onChangeValue(value, prop, rule) {
	    var processedValue = value;

	    for (var i = 0; i < this.registry.onChangeValue.length; i++) {
	      processedValue = this.registry.onChangeValue[i](processedValue, prop, rule);
	    }

	    return processedValue;
	  }
	  /**
	   * Register a plugin.
	   */
	  ;

	  _proto.use = function use(newPlugin, options) {
	    if (options === void 0) {
	      options = {
	        queue: 'external'
	      };
	    }

	    var plugins = this.plugins[options.queue]; // Avoids applying same plugin twice, at least based on ref.

	    if (plugins.indexOf(newPlugin) !== -1) {
	      return;
	    }

	    plugins.push(newPlugin);
	    this.registry = [].concat(this.plugins.external, this.plugins.internal).reduce(function (registry, plugin) {
	      for (var name in plugin) {
	        if (name in registry) {
	          registry[name].push(plugin[name]);
	        }
	      }

	      return registry;
	    }, {
	      onCreateRule: [],
	      onProcessRule: [],
	      onProcessStyle: [],
	      onProcessSheet: [],
	      onChangeValue: [],
	      onUpdate: []
	    });
	  };

	  return PluginsRegistry;
	}();

	/**
	 * Sheets registry to access them all at one place.
	 */
	var SheetsRegistry =
	/*#__PURE__*/
	function () {
	  function SheetsRegistry() {
	    this.registry = [];
	  }

	  var _proto = SheetsRegistry.prototype;

	  /**
	   * Register a Style Sheet.
	   */
	  _proto.add = function add(sheet) {
	    var registry = this.registry;
	    var index = sheet.options.index;
	    if (registry.indexOf(sheet) !== -1) return;

	    if (registry.length === 0 || index >= this.index) {
	      registry.push(sheet);
	      return;
	    } // Find a position.


	    for (var i = 0; i < registry.length; i++) {
	      if (registry[i].options.index > index) {
	        registry.splice(i, 0, sheet);
	        return;
	      }
	    }
	  }
	  /**
	   * Reset the registry.
	   */
	  ;

	  _proto.reset = function reset() {
	    this.registry = [];
	  }
	  /**
	   * Remove a Style Sheet.
	   */
	  ;

	  _proto.remove = function remove(sheet) {
	    var index = this.registry.indexOf(sheet);
	    this.registry.splice(index, 1);
	  }
	  /**
	   * Convert all attached sheets to a CSS string.
	   */
	  ;

	  _proto.toString = function toString(_temp) {
	    var _ref = _temp === void 0 ? {} : _temp,
	        attached = _ref.attached,
	        options = _objectWithoutPropertiesLoose$3(_ref, ["attached"]);

	    var css = '';

	    for (var i = 0; i < this.registry.length; i++) {
	      var sheet = this.registry[i];

	      if (attached != null && sheet.attached !== attached) {
	        continue;
	      }

	      if (css) css += '\n';
	      css += sheet.toString(options);
	    }

	    return css;
	  };

	  _createClass$1(SheetsRegistry, [{
	    key: "index",

	    /**
	     * Current highest index number.
	     */
	    get: function get() {
	      return this.registry.length === 0 ? 0 : this.registry[this.registry.length - 1].options.index;
	    }
	  }]);

	  return SheetsRegistry;
	}();

	/**
	 * This is a global sheets registry. Only DomRenderer will add sheets to it.
	 * On the server one should use an own SheetsRegistry instance and add the
	 * sheets to it, because you need to make sure to create a new registry for
	 * each request in order to not leak sheets across requests.
	 */

	var registry = new SheetsRegistry();

	/* eslint-disable */
	// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
	var globalThis$1 = typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();

	var ns = '2f1acc6c3a606b082e5eef5e54414ffb';
	if (globalThis$1[ns] == null) globalThis$1[ns] = 0; // Bundle may contain multiple JSS versions at the same time. In order to identify
	// the current version with just one short number and use it for classes generation
	// we use a counter. Also it is more accurate, because user can manually reevaluate
	// the module.

	var moduleId = globalThis$1[ns]++;

	/**
	 * Returns a function which generates unique class names based on counters.
	 * When new generator function is created, rule counter is reseted.
	 * We need to reset the rule counter for SSR for each request.
	 */
	var createGenerateId = function createGenerateId(options) {
	  if (options === void 0) {
	    options = {};
	  }

	  var ruleCounter = 0;
	  return function (rule, sheet) {
	    ruleCounter += 1;

	    var jssId = '';
	    var prefix = '';

	    if (sheet) {
	      if (sheet.options.classNamePrefix) {
	        prefix = sheet.options.classNamePrefix;
	      }

	      if (sheet.options.jss.id != null) {
	        jssId = String(sheet.options.jss.id);
	      }
	    }

	    if (options.minify) {
	      // Using "c" because a number can't be the first char in a class name.
	      return "" + (prefix || 'c') + moduleId + jssId + ruleCounter;
	    }

	    return prefix + rule.key + "-" + moduleId + (jssId ? "-" + jssId : '') + "-" + ruleCounter;
	  };
	};

	/**
	 * Cache the value from the first time a function is called.
	 */
	var memoize$1 = function memoize(fn) {
	  var value;
	  return function () {
	    if (!value) value = fn();
	    return value;
	  };
	};

	/**
	 * Get a style property value.
	 */
	var getPropertyValue = function getPropertyValue(cssRule, prop) {
	  try {
	    // Support CSSTOM.
	    if (cssRule.attributeStyleMap) {
	      return cssRule.attributeStyleMap.get(prop);
	    }

	    return cssRule.style.getPropertyValue(prop);
	  } catch (err) {
	    // IE may throw if property is unknown.
	    return '';
	  }
	};

	/**
	 * Set a style property.
	 */
	var setProperty = function setProperty(cssRule, prop, value) {
	  try {
	    var cssValue = value;

	    if (Array.isArray(value)) {
	      cssValue = toCssValue(value, true);

	      if (value[value.length - 1] === '!important') {
	        cssRule.style.setProperty(prop, cssValue, 'important');
	        return true;
	      }
	    } // Support CSSTOM.


	    if (cssRule.attributeStyleMap) {
	      cssRule.attributeStyleMap.set(prop, cssValue);
	    } else {
	      cssRule.style.setProperty(prop, cssValue);
	    }
	  } catch (err) {
	    // IE may throw if property is unknown.
	    return false;
	  }

	  return true;
	};

	/**
	 * Remove a style property.
	 */
	var removeProperty = function removeProperty(cssRule, prop) {
	  try {
	    // Support CSSTOM.
	    if (cssRule.attributeStyleMap) {
	      cssRule.attributeStyleMap.delete(prop);
	    } else {
	      cssRule.style.removeProperty(prop);
	    }
	  } catch (err) {
	  }
	};

	/**
	 * Set the selector.
	 */
	var setSelector = function setSelector(cssRule, selectorText) {
	  cssRule.selectorText = selectorText; // Return false if setter was not successful.
	  // Currently works in chrome only.

	  return cssRule.selectorText === selectorText;
	};
	/**
	 * Gets the `head` element upon the first call and caches it.
	 * We assume it can't be null.
	 */


	var getHead = memoize$1(function () {
	  return document.querySelector('head');
	});
	/**
	 * Find attached sheet with an index higher than the passed one.
	 */

	function findHigherSheet(registry, options) {
	  for (var i = 0; i < registry.length; i++) {
	    var sheet = registry[i];

	    if (sheet.attached && sheet.options.index > options.index && sheet.options.insertionPoint === options.insertionPoint) {
	      return sheet;
	    }
	  }

	  return null;
	}
	/**
	 * Find attached sheet with the highest index.
	 */


	function findHighestSheet(registry, options) {
	  for (var i = registry.length - 1; i >= 0; i--) {
	    var sheet = registry[i];

	    if (sheet.attached && sheet.options.insertionPoint === options.insertionPoint) {
	      return sheet;
	    }
	  }

	  return null;
	}
	/**
	 * Find a comment with "jss" inside.
	 */


	function findCommentNode(text) {
	  var head = getHead();

	  for (var i = 0; i < head.childNodes.length; i++) {
	    var node = head.childNodes[i];

	    if (node.nodeType === 8 && node.nodeValue.trim() === text) {
	      return node;
	    }
	  }

	  return null;
	}

	/**
	 * Find a node before which we can insert the sheet.
	 */
	function findPrevNode(options) {
	  var registry$1 = registry.registry;

	  if (registry$1.length > 0) {
	    // Try to insert before the next higher sheet.
	    var sheet = findHigherSheet(registry$1, options);

	    if (sheet && sheet.renderer) {
	      return {
	        parent: sheet.renderer.element.parentNode,
	        node: sheet.renderer.element
	      };
	    } // Otherwise insert after the last attached.


	    sheet = findHighestSheet(registry$1, options);

	    if (sheet && sheet.renderer) {
	      return {
	        parent: sheet.renderer.element.parentNode,
	        node: sheet.renderer.element.nextSibling
	      };
	    }
	  } // Try to find a comment placeholder if registry is empty.


	  var insertionPoint = options.insertionPoint;

	  if (insertionPoint && typeof insertionPoint === 'string') {
	    var comment = findCommentNode(insertionPoint);

	    if (comment) {
	      return {
	        parent: comment.parentNode,
	        node: comment.nextSibling
	      };
	    } // If user specifies an insertion point and it can't be found in the document -
	  }

	  return false;
	}
	/**
	 * Insert style element into the DOM.
	 */


	function insertStyle(style, options) {
	  var insertionPoint = options.insertionPoint;
	  var nextNode = findPrevNode(options);

	  if (nextNode !== false && nextNode.parent) {
	    nextNode.parent.insertBefore(style, nextNode.node);
	    return;
	  } // Works with iframes and any node types.


	  if (insertionPoint && typeof insertionPoint.nodeType === 'number') {
	    // https://stackoverflow.com/questions/41328728/force-casting-in-flow
	    var insertionPointElement = insertionPoint;
	    var parentNode = insertionPointElement.parentNode;
	    if (parentNode) parentNode.insertBefore(style, insertionPointElement.nextSibling);
	    return;
	  }

	  getHead().appendChild(style);
	}
	/**
	 * Read jss nonce setting from the page if the user has set it.
	 */


	var getNonce = memoize$1(function () {
	  var node = document.querySelector('meta[property="csp-nonce"]');
	  return node ? node.getAttribute('content') : null;
	});

	var _insertRule = function insertRule(container, rule, index) {
	  try {
	    if ('insertRule' in container) {
	      var c = container;
	      c.insertRule(rule, index);
	    } // Keyframes rule.
	    else if ('appendRule' in container) {
	        var _c = container;

	        _c.appendRule(rule);
	      }
	  } catch (err) {
	    return false;
	  }

	  return container.cssRules[index];
	};

	var getValidRuleInsertionIndex = function getValidRuleInsertionIndex(container, index) {
	  var maxIndex = container.cssRules.length; // In case previous insertion fails, passed index might be wrong

	  if (index === undefined || index > maxIndex) {
	    // eslint-disable-next-line no-param-reassign
	    return maxIndex;
	  }

	  return index;
	};

	var createStyle = function createStyle() {
	  var el = document.createElement('style'); // Without it, IE will have a broken source order specificity if we
	  // insert rules after we insert the style tag.
	  // It seems to kick-off the source order specificity algorithm.

	  el.textContent = '\n';
	  return el;
	};

	var DomRenderer =
	/*#__PURE__*/
	function () {
	  // HTMLStyleElement needs fixing https://github.com/facebook/flow/issues/2696
	  // Will be empty if link: true option is not set, because
	  // it is only for use together with insertRule API.
	  function DomRenderer(sheet) {
	    this.getPropertyValue = getPropertyValue;
	    this.setProperty = setProperty;
	    this.removeProperty = removeProperty;
	    this.setSelector = setSelector;
	    this.element = void 0;
	    this.sheet = void 0;
	    this.hasInsertedRules = false;
	    this.cssRules = [];
	    // There is no sheet when the renderer is used from a standalone StyleRule.
	    if (sheet) registry.add(sheet);
	    this.sheet = sheet;

	    var _ref = this.sheet ? this.sheet.options : {},
	        media = _ref.media,
	        meta = _ref.meta,
	        element = _ref.element;

	    this.element = element || createStyle();
	    this.element.setAttribute('data-jss', '');
	    if (media) this.element.setAttribute('media', media);
	    if (meta) this.element.setAttribute('data-meta', meta);
	    var nonce = getNonce();
	    if (nonce) this.element.setAttribute('nonce', nonce);
	  }
	  /**
	   * Insert style element into render tree.
	   */


	  var _proto = DomRenderer.prototype;

	  _proto.attach = function attach() {
	    // In the case the element node is external and it is already in the DOM.
	    if (this.element.parentNode || !this.sheet) return;
	    insertStyle(this.element, this.sheet.options); // When rules are inserted using `insertRule` API, after `sheet.detach().attach()`
	    // most browsers create a new CSSStyleSheet, except of all IEs.

	    var deployed = Boolean(this.sheet && this.sheet.deployed);

	    if (this.hasInsertedRules && deployed) {
	      this.hasInsertedRules = false;
	      this.deploy();
	    }
	  }
	  /**
	   * Remove style element from render tree.
	   */
	  ;

	  _proto.detach = function detach() {
	    if (!this.sheet) return;
	    var parentNode = this.element.parentNode;
	    if (parentNode) parentNode.removeChild(this.element); // In the most browsers, rules inserted using insertRule() API will be lost when style element is removed.
	    // Though IE will keep them and we need a consistent behavior.

	    if (this.sheet.options.link) {
	      this.cssRules = [];
	      this.element.textContent = '\n';
	    }
	  }
	  /**
	   * Inject CSS string into element.
	   */
	  ;

	  _proto.deploy = function deploy() {
	    var sheet = this.sheet;
	    if (!sheet) return;

	    if (sheet.options.link) {
	      this.insertRules(sheet.rules);
	      return;
	    }

	    this.element.textContent = "\n" + sheet.toString() + "\n";
	  }
	  /**
	   * Insert RuleList into an element.
	   */
	  ;

	  _proto.insertRules = function insertRules(rules, nativeParent) {
	    for (var i = 0; i < rules.index.length; i++) {
	      this.insertRule(rules.index[i], i, nativeParent);
	    }
	  }
	  /**
	   * Insert a rule into element.
	   */
	  ;

	  _proto.insertRule = function insertRule(rule, index, nativeParent) {
	    if (nativeParent === void 0) {
	      nativeParent = this.element.sheet;
	    }

	    if (rule.rules) {
	      var parent = rule;
	      var latestNativeParent = nativeParent;

	      if (rule.type === 'conditional' || rule.type === 'keyframes') {
	        var _insertionIndex = getValidRuleInsertionIndex(nativeParent, index); // We need to render the container without children first.


	        latestNativeParent = _insertRule(nativeParent, parent.toString({
	          children: false
	        }), _insertionIndex);

	        if (latestNativeParent === false) {
	          return false;
	        }

	        this.refCssRule(rule, _insertionIndex, latestNativeParent);
	      }

	      this.insertRules(parent.rules, latestNativeParent);
	      return latestNativeParent;
	    }

	    var ruleStr = rule.toString();
	    if (!ruleStr) return false;
	    var insertionIndex = getValidRuleInsertionIndex(nativeParent, index);

	    var nativeRule = _insertRule(nativeParent, ruleStr, insertionIndex);

	    if (nativeRule === false) {
	      return false;
	    }

	    this.hasInsertedRules = true;
	    this.refCssRule(rule, insertionIndex, nativeRule);
	    return nativeRule;
	  };

	  _proto.refCssRule = function refCssRule(rule, index, cssRule) {
	    rule.renderable = cssRule; // We only want to reference the top level rules, deleteRule API doesn't support removing nested rules
	    // like rules inside media queries or keyframes

	    if (rule.options.parent instanceof StyleSheet) {
	      this.cssRules[index] = cssRule;
	    }
	  }
	  /**
	   * Delete a rule.
	   */
	  ;

	  _proto.deleteRule = function deleteRule(cssRule) {
	    var sheet = this.element.sheet;
	    var index = this.indexOf(cssRule);
	    if (index === -1) return false;
	    sheet.deleteRule(index);
	    this.cssRules.splice(index, 1);
	    return true;
	  }
	  /**
	   * Get index of a CSS Rule.
	   */
	  ;

	  _proto.indexOf = function indexOf(cssRule) {
	    return this.cssRules.indexOf(cssRule);
	  }
	  /**
	   * Generate a new CSS rule and replace the existing one.
	   *
	   * Only used for some old browsers because they can't set a selector.
	   */
	  ;

	  _proto.replaceRule = function replaceRule(cssRule, rule) {
	    var index = this.indexOf(cssRule);
	    if (index === -1) return false;
	    this.element.sheet.deleteRule(index);
	    this.cssRules.splice(index, 1);
	    return this.insertRule(rule, index);
	  }
	  /**
	   * Get all rules elements.
	   */
	  ;

	  _proto.getRules = function getRules() {
	    return this.element.sheet.cssRules;
	  };

	  return DomRenderer;
	}();

	var instanceCounter = 0;

	var Jss =
	/*#__PURE__*/
	function () {
	  function Jss(options) {
	    this.id = instanceCounter++;
	    this.version = "10.5.1";
	    this.plugins = new PluginsRegistry();
	    this.options = {
	      id: {
	        minify: false
	      },
	      createGenerateId: createGenerateId,
	      Renderer: isBrowser$1 ? DomRenderer : null,
	      plugins: []
	    };
	    this.generateId = createGenerateId({
	      minify: false
	    });

	    for (var i = 0; i < plugins$1.length; i++) {
	      this.plugins.use(plugins$1[i], {
	        queue: 'internal'
	      });
	    }

	    this.setup(options);
	  }
	  /**
	   * Prepares various options, applies plugins.
	   * Should not be used twice on the same instance, because there is no plugins
	   * deduplication logic.
	   */


	  var _proto = Jss.prototype;

	  _proto.setup = function setup(options) {
	    if (options === void 0) {
	      options = {};
	    }

	    if (options.createGenerateId) {
	      this.options.createGenerateId = options.createGenerateId;
	    }

	    if (options.id) {
	      this.options.id = _extends$9({}, this.options.id, options.id);
	    }

	    if (options.createGenerateId || options.id) {
	      this.generateId = this.options.createGenerateId(this.options.id);
	    }

	    if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint;

	    if ('Renderer' in options) {
	      this.options.Renderer = options.Renderer;
	    } // eslint-disable-next-line prefer-spread


	    if (options.plugins) this.use.apply(this, options.plugins);
	    return this;
	  }
	  /**
	   * Create a Style Sheet.
	   */
	  ;

	  _proto.createStyleSheet = function createStyleSheet(styles, options) {
	    if (options === void 0) {
	      options = {};
	    }

	    var _options = options,
	        index = _options.index;

	    if (typeof index !== 'number') {
	      index = registry.index === 0 ? 0 : registry.index + 1;
	    }

	    var sheet = new StyleSheet(styles, _extends$9({}, options, {
	      jss: this,
	      generateId: options.generateId || this.generateId,
	      insertionPoint: this.options.insertionPoint,
	      Renderer: this.options.Renderer,
	      index: index
	    }));
	    this.plugins.onProcessSheet(sheet);
	    return sheet;
	  }
	  /**
	   * Detach the Style Sheet and remove it from the registry.
	   */
	  ;

	  _proto.removeStyleSheet = function removeStyleSheet(sheet) {
	    sheet.detach();
	    registry.remove(sheet);
	    return this;
	  }
	  /**
	   * Create a rule without a Style Sheet.
	   * [Deprecated] will be removed in the next major version.
	   */
	  ;

	  _proto.createRule = function createRule$1(name, style, options) {
	    if (style === void 0) {
	      style = {};
	    }

	    if (options === void 0) {
	      options = {};
	    }

	    // Enable rule without name for inline styles.
	    if (typeof name === 'object') {
	      // $FlowFixMe[incompatible-call]
	      return this.createRule(undefined, name, style);
	    } // $FlowFixMe[incompatible-type]


	    var ruleOptions = _extends$9({}, options, {
	      name: name,
	      jss: this,
	      Renderer: this.options.Renderer
	    });

	    if (!ruleOptions.generateId) ruleOptions.generateId = this.generateId;
	    if (!ruleOptions.classes) ruleOptions.classes = {};
	    if (!ruleOptions.keyframes) ruleOptions.keyframes = {};

	    var rule = createRule(name, style, ruleOptions);

	    if (rule) this.plugins.onProcessRule(rule);
	    return rule;
	  }
	  /**
	   * Register plugin. Passed function will be invoked with a rule instance.
	   */
	  ;

	  _proto.use = function use() {
	    var _this = this;

	    for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) {
	      plugins[_key] = arguments[_key];
	    }

	    plugins.forEach(function (plugin) {
	      _this.plugins.use(plugin);
	    });
	    return this;
	  };

	  return Jss;
	}();

	/**
	 * Extracts a styles object with only props that contain function values.
	 */
	function getDynamicStyles(styles) {
	  var to = null;

	  for (var key in styles) {
	    var value = styles[key];
	    var type = typeof value;

	    if (type === 'function') {
	      if (!to) to = {};
	      to[key] = value;
	    } else if (type === 'object' && value !== null && !Array.isArray(value)) {
	      var extracted = getDynamicStyles(value);

	      if (extracted) {
	        if (!to) to = {};
	        to[key] = extracted;
	      }
	    }
	  }

	  return to;
	}

	/**
	 * A better abstraction over CSS.
	 *
	 * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
	 * @website https://github.com/cssinjs/jss
	 * @license MIT
	 */

	/**
	 * Export a constant indicating if this browser has CSSTOM support.
	 * https://developers.google.com/web/updates/2018/03/cssom
	 */
	var hasCSSTOMSupport = typeof CSS === 'object' && CSS != null && 'number' in CSS;
	/**
	 * Creates a new instance of Jss.
	 */

	var create$4 = function create(options) {
	  return new Jss(options);
	};
	/**
	 * A global Jss instance.
	 */

	create$4();

	var now$1 = Date.now();
	var fnValuesNs = "fnValues" + now$1;
	var fnRuleNs = "fnStyle" + ++now$1;

	var functionPlugin = function functionPlugin() {
	  return {
	    onCreateRule: function onCreateRule(name, decl, options) {
	      if (typeof decl !== 'function') return null;
	      var rule = createRule(name, {}, options);
	      rule[fnRuleNs] = decl;
	      return rule;
	    },
	    onProcessStyle: function onProcessStyle(style, rule) {
	      // We need to extract function values from the declaration, so that we can keep core unaware of them.
	      // We need to do that only once.
	      // We don't need to extract functions on each style update, since this can happen only once.
	      // We don't support function values inside of function rules.
	      if (fnValuesNs in rule || fnRuleNs in rule) return style;
	      var fnValues = {};

	      for (var prop in style) {
	        var value = style[prop];
	        if (typeof value !== 'function') continue;
	        delete style[prop];
	        fnValues[prop] = value;
	      } // $FlowFixMe[prop-missing]


	      rule[fnValuesNs] = fnValues;
	      return style;
	    },
	    onUpdate: function onUpdate(data, rule, sheet, options) {
	      var styleRule = rule; // $FlowFixMe[prop-missing]

	      var fnRule = styleRule[fnRuleNs]; // If we have a style function, the entire rule is dynamic and style object
	      // will be returned from that function.

	      if (fnRule) {
	        // Empty object will remove all currently defined props
	        // in case function rule returns a falsy value.
	        styleRule.style = fnRule(data) || {};
	      } // $FlowFixMe[prop-missing]


	      var fnValues = styleRule[fnValuesNs]; // If we have a fn values map, it is a rule with function values.

	      if (fnValues) {
	        for (var _prop in fnValues) {
	          styleRule.prop(_prop, fnValues[_prop](data), options);
	        }
	      }
	    }
	  };
	};

	function _extends$8() {
	  _extends$8 = Object.assign || function (target) {
	    for (var i = 1; i < arguments.length; i++) {
	      var source = arguments[i];

	      for (var key in source) {
	        if (Object.prototype.hasOwnProperty.call(source, key)) {
	          target[key] = source[key];
	        }
	      }
	    }

	    return target;
	  };

	  return _extends$8.apply(this, arguments);
	}

	var at = '@global';
	var atPrefix = '@global ';

	var GlobalContainerRule =
	/*#__PURE__*/
	function () {
	  function GlobalContainerRule(key, styles, options) {
	    this.type = 'global';
	    this.at = at;
	    this.rules = void 0;
	    this.options = void 0;
	    this.key = void 0;
	    this.isProcessed = false;
	    this.key = key;
	    this.options = options;
	    this.rules = new RuleList(_extends$8({}, options, {
	      parent: this
	    }));

	    for (var selector in styles) {
	      this.rules.add(selector, styles[selector]);
	    }

	    this.rules.process();
	  }
	  /**
	   * Get a rule.
	   */


	  var _proto = GlobalContainerRule.prototype;

	  _proto.getRule = function getRule(name) {
	    return this.rules.get(name);
	  }
	  /**
	   * Create and register rule, run plugins.
	   */
	  ;

	  _proto.addRule = function addRule(name, style, options) {
	    var rule = this.rules.add(name, style, options);
	    if (rule) this.options.jss.plugins.onProcessRule(rule);
	    return rule;
	  }
	  /**
	   * Get index of a rule.
	   */
	  ;

	  _proto.indexOf = function indexOf(rule) {
	    return this.rules.indexOf(rule);
	  }
	  /**
	   * Generates a CSS string.
	   */
	  ;

	  _proto.toString = function toString() {
	    return this.rules.toString();
	  };

	  return GlobalContainerRule;
	}();

	var GlobalPrefixedRule =
	/*#__PURE__*/
	function () {
	  function GlobalPrefixedRule(key, style, options) {
	    this.type = 'global';
	    this.at = at;
	    this.options = void 0;
	    this.rule = void 0;
	    this.isProcessed = false;
	    this.key = void 0;
	    this.key = key;
	    this.options = options;
	    var selector = key.substr(atPrefix.length);
	    this.rule = options.jss.createRule(selector, style, _extends$8({}, options, {
	      parent: this
	    }));
	  }

	  var _proto2 = GlobalPrefixedRule.prototype;

	  _proto2.toString = function toString(options) {
	    return this.rule ? this.rule.toString(options) : '';
	  };

	  return GlobalPrefixedRule;
	}();

	var separatorRegExp$1 = /\s*,\s*/g;

	function addScope(selector, scope) {
	  var parts = selector.split(separatorRegExp$1);
	  var scoped = '';

	  for (var i = 0; i < parts.length; i++) {
	    scoped += scope + " " + parts[i].trim();
	    if (parts[i + 1]) scoped += ', ';
	  }

	  return scoped;
	}

	function handleNestedGlobalContainerRule(rule, sheet) {
	  var options = rule.options,
	      style = rule.style;
	  var rules = style ? style[at] : null;
	  if (!rules) return;

	  for (var name in rules) {
	    sheet.addRule(name, rules[name], _extends$8({}, options, {
	      selector: addScope(name, rule.selector)
	    }));
	  }

	  delete style[at];
	}

	function handlePrefixedGlobalRule(rule, sheet) {
	  var options = rule.options,
	      style = rule.style;

	  for (var prop in style) {
	    if (prop[0] !== '@' || prop.substr(0, at.length) !== at) continue;
	    var selector = addScope(prop.substr(at.length), rule.selector);
	    sheet.addRule(selector, style[prop], _extends$8({}, options, {
	      selector: selector
	    }));
	    delete style[prop];
	  }
	}
	/**
	 * Convert nested rules to separate, remove them from original styles.
	 *
	 * @param {Rule} rule
	 * @api public
	 */


	function jssGlobal() {
	  function onCreateRule(name, styles, options) {
	    if (!name) return null;

	    if (name === at) {
	      return new GlobalContainerRule(name, styles, options);
	    }

	    if (name[0] === '@' && name.substr(0, atPrefix.length) === atPrefix) {
	      return new GlobalPrefixedRule(name, styles, options);
	    }

	    var parent = options.parent;

	    if (parent) {
	      if (parent.type === 'global' || parent.options.parent && parent.options.parent.type === 'global') {
	        options.scoped = false;
	      }
	    }

	    if (options.scoped === false) {
	      options.selector = name;
	    }

	    return null;
	  }

	  function onProcessRule(rule, sheet) {
	    if (rule.type !== 'style' || !sheet) return;
	    handleNestedGlobalContainerRule(rule, sheet);
	    handlePrefixedGlobalRule(rule, sheet);
	  }

	  return {
	    onCreateRule: onCreateRule,
	    onProcessRule: onProcessRule
	  };
	}

	function _extends$7() {
	  _extends$7 = Object.assign || function (target) {
	    for (var i = 1; i < arguments.length; i++) {
	      var source = arguments[i];

	      for (var key in source) {
	        if (Object.prototype.hasOwnProperty.call(source, key)) {
	          target[key] = source[key];
	        }
	      }
	    }

	    return target;
	  };

	  return _extends$7.apply(this, arguments);
	}

	var separatorRegExp = /\s*,\s*/g;
	var parentRegExp = /&/g;
	var refRegExp = /\$([\w-]+)/g;
	/**
	 * Convert nested rules to separate, remove them from original styles.
	 *
	 * @param {Rule} rule
	 * @api public
	 */

	function jssNested() {
	  // Get a function to be used for $ref replacement.
	  function getReplaceRef(container, sheet) {
	    return function (match, key) {
	      var rule = container.getRule(key) || sheet && sheet.getRule(key);

	      if (rule) {
	        rule = rule;
	        return rule.selector;
	      }
	      return key;
	    };
	  }

	  function replaceParentRefs(nestedProp, parentProp) {
	    var parentSelectors = parentProp.split(separatorRegExp);
	    var nestedSelectors = nestedProp.split(separatorRegExp);
	    var result = '';

	    for (var i = 0; i < parentSelectors.length; i++) {
	      var parent = parentSelectors[i];

	      for (var j = 0; j < nestedSelectors.length; j++) {
	        var nested = nestedSelectors[j];
	        if (result) result += ', '; // Replace all & by the parent or prefix & with the parent.

	        result += nested.indexOf('&') !== -1 ? nested.replace(parentRegExp, parent) : parent + " " + nested;
	      }
	    }

	    return result;
	  }

	  function getOptions(rule, container, prevOptions) {
	    // Options has been already created, now we only increase index.
	    if (prevOptions) return _extends$7({}, prevOptions, {
	      index: prevOptions.index + 1 // $FlowFixMe[prop-missing]

	    });
	    var nestingLevel = rule.options.nestingLevel;
	    nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;

	    var options = _extends$7({}, rule.options, {
	      nestingLevel: nestingLevel,
	      index: container.indexOf(rule) + 1 // We don't need the parent name to be set options for chlid.

	    });

	    delete options.name;
	    return options;
	  }

	  function onProcessStyle(style, rule, sheet) {
	    if (rule.type !== 'style') return style;
	    var styleRule = rule;
	    var container = styleRule.options.parent;
	    var options;
	    var replaceRef;

	    for (var prop in style) {
	      var isNested = prop.indexOf('&') !== -1;
	      var isNestedConditional = prop[0] === '@';
	      if (!isNested && !isNestedConditional) continue;
	      options = getOptions(styleRule, container, options);

	      if (isNested) {
	        var selector = replaceParentRefs(prop, styleRule.selector); // Lazily create the ref replacer function just once for
	        // all nested rules within the sheet.

	        if (!replaceRef) replaceRef = getReplaceRef(container, sheet); // Replace all $refs.

	        selector = selector.replace(refRegExp, replaceRef);
	        container.addRule(selector, style[prop], _extends$7({}, options, {
	          selector: selector
	        }));
	      } else if (isNestedConditional) {
	        // Place conditional right after the parent rule to ensure right ordering.
	        container.addRule(prop, {}, options) // Flow expects more options but they aren't required
	        // And flow doesn't know this will always be a StyleRule which has the addRule method
	        // $FlowFixMe[incompatible-use]
	        // $FlowFixMe[prop-missing]
	        .addRule(styleRule.key, style[prop], {
	          selector: styleRule.selector
	        });
	      }

	      delete style[prop];
	    }

	    return style;
	  }

	  return {
	    onProcessStyle: onProcessStyle
	  };
	}

	/* eslint-disable no-var, prefer-template */
	var uppercasePattern = /[A-Z]/g;
	var msPattern = /^ms-/;
	var cache$2 = {};

	function toHyphenLower(match) {
	  return '-' + match.toLowerCase()
	}

	function hyphenateStyleName(name) {
	  if (cache$2.hasOwnProperty(name)) {
	    return cache$2[name]
	  }

	  var hName = name.replace(uppercasePattern, toHyphenLower);
	  return (cache$2[name] = msPattern.test(hName) ? '-' + hName : hName)
	}

	/**
	 * Convert camel cased property names to dash separated.
	 *
	 * @param {Object} style
	 * @return {Object}
	 */

	function convertCase(style) {
	  var converted = {};

	  for (var prop in style) {
	    var key = prop.indexOf('--') === 0 ? prop : hyphenateStyleName(prop);
	    converted[key] = style[prop];
	  }

	  if (style.fallbacks) {
	    if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);
	  }

	  return converted;
	}
	/**
	 * Allow camel cased property names by converting them back to dasherized.
	 *
	 * @param {Rule} rule
	 */


	function camelCase() {
	  function onProcessStyle(style) {
	    if (Array.isArray(style)) {
	      // Handle rules like @font-face, which can have multiple styles in an array
	      for (var index = 0; index < style.length; index++) {
	        style[index] = convertCase(style[index]);
	      }

	      return style;
	    }

	    return convertCase(style);
	  }

	  function onChangeValue(value, prop, rule) {
	    if (prop.indexOf('--') === 0) {
	      return value;
	    }

	    var hyphenatedProp = hyphenateStyleName(prop); // There was no camel case in place

	    if (prop === hyphenatedProp) return value;
	    rule.prop(hyphenatedProp, value); // Core will ignore that property value we set the proper one above.

	    return null;
	  }

	  return {
	    onProcessStyle: onProcessStyle,
	    onChangeValue: onChangeValue
	  };
	}

	var px = hasCSSTOMSupport && CSS ? CSS.px : 'px';
	var ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';
	var percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';
	/**
	 * Generated jss-plugin-default-unit CSS property units
	 *
	 * @type object
	 */

	var defaultUnits = {
	  // Animation properties
	  'animation-delay': ms,
	  'animation-duration': ms,
	  // Background properties
	  'background-position': px,
	  'background-position-x': px,
	  'background-position-y': px,
	  'background-size': px,
	  // Border Properties
	  border: px,
	  'border-bottom': px,
	  'border-bottom-left-radius': px,
	  'border-bottom-right-radius': px,
	  'border-bottom-width': px,
	  'border-left': px,
	  'border-left-width': px,
	  'border-radius': px,
	  'border-right': px,
	  'border-right-width': px,
	  'border-top': px,
	  'border-top-left-radius': px,
	  'border-top-right-radius': px,
	  'border-top-width': px,
	  'border-width': px,
	  'border-block': px,
	  'border-block-end': px,
	  'border-block-end-width': px,
	  'border-block-start': px,
	  'border-block-start-width': px,
	  'border-block-width': px,
	  'border-inline': px,
	  'border-inline-end': px,
	  'border-inline-end-width': px,
	  'border-inline-start': px,
	  'border-inline-start-width': px,
	  'border-inline-width': px,
	  'border-start-start-radius': px,
	  'border-start-end-radius': px,
	  'border-end-start-radius': px,
	  'border-end-end-radius': px,
	  // Margin properties
	  margin: px,
	  'margin-bottom': px,
	  'margin-left': px,
	  'margin-right': px,
	  'margin-top': px,
	  'margin-block': px,
	  'margin-block-end': px,
	  'margin-block-start': px,
	  'margin-inline': px,
	  'margin-inline-end': px,
	  'margin-inline-start': px,
	  // Padding properties
	  padding: px,
	  'padding-bottom': px,
	  'padding-left': px,
	  'padding-right': px,
	  'padding-top': px,
	  'padding-block': px,
	  'padding-block-end': px,
	  'padding-block-start': px,
	  'padding-inline': px,
	  'padding-inline-end': px,
	  'padding-inline-start': px,
	  // Mask properties
	  'mask-position-x': px,
	  'mask-position-y': px,
	  'mask-size': px,
	  // Width and height properties
	  height: px,
	  width: px,
	  'min-height': px,
	  'max-height': px,
	  'min-width': px,
	  'max-width': px,
	  // Position properties
	  bottom: px,
	  left: px,
	  top: px,
	  right: px,
	  inset: px,
	  'inset-block': px,
	  'inset-block-end': px,
	  'inset-block-start': px,
	  'inset-inline': px,
	  'inset-inline-end': px,
	  'inset-inline-start': px,
	  // Shadow properties
	  'box-shadow': px,
	  'text-shadow': px,
	  // Column properties
	  'column-gap': px,
	  'column-rule': px,
	  'column-rule-width': px,
	  'column-width': px,
	  // Font and text properties
	  'font-size': px,
	  'font-size-delta': px,
	  'letter-spacing': px,
	  'text-decoration-thickness': px,
	  'text-indent': px,
	  'text-stroke': px,
	  'text-stroke-width': px,
	  'word-spacing': px,
	  // Motion properties
	  motion: px,
	  'motion-offset': px,
	  // Outline properties
	  outline: px,
	  'outline-offset': px,
	  'outline-width': px,
	  // Perspective properties
	  perspective: px,
	  'perspective-origin-x': percent,
	  'perspective-origin-y': percent,
	  // Transform properties
	  'transform-origin': percent,
	  'transform-origin-x': percent,
	  'transform-origin-y': percent,
	  'transform-origin-z': percent,
	  // Transition properties
	  'transition-delay': ms,
	  'transition-duration': ms,
	  // Alignment properties
	  'vertical-align': px,
	  'flex-basis': px,
	  // Some random properties
	  'shape-margin': px,
	  size: px,
	  gap: px,
	  // Grid properties
	  grid: px,
	  'grid-gap': px,
	  'row-gap': px,
	  'grid-row-gap': px,
	  'grid-column-gap': px,
	  'grid-template-rows': px,
	  'grid-template-columns': px,
	  'grid-auto-rows': px,
	  'grid-auto-columns': px,
	  // Not existing properties.
	  // Used to avoid issues with jss-plugin-expand integration.
	  'box-shadow-x': px,
	  'box-shadow-y': px,
	  'box-shadow-blur': px,
	  'box-shadow-spread': px,
	  'font-line-height': px,
	  'text-shadow-x': px,
	  'text-shadow-y': px,
	  'text-shadow-blur': px
	};

	/**
	 * Clones the object and adds a camel cased property version.
	 */
	function addCamelCasedVersion(obj) {
	  var regExp = /(-[a-z])/g;

	  var replace = function replace(str) {
	    return str[1].toUpperCase();
	  };

	  var newObj = {};

	  for (var _key in obj) {
	    newObj[_key] = obj[_key];
	    newObj[_key.replace(regExp, replace)] = obj[_key];
	  }

	  return newObj;
	}

	var units = addCamelCasedVersion(defaultUnits);
	/**
	 * Recursive deep style passing function
	 */

	function iterate(prop, value, options) {
	  if (value == null) return value;

	  if (Array.isArray(value)) {
	    for (var i = 0; i < value.length; i++) {
	      value[i] = iterate(prop, value[i], options);
	    }
	  } else if (typeof value === 'object') {
	    if (prop === 'fallbacks') {
	      for (var innerProp in value) {
	        value[innerProp] = iterate(innerProp, value[innerProp], options);
	      }
	    } else {
	      for (var _innerProp in value) {
	        value[_innerProp] = iterate(prop + "-" + _innerProp, value[_innerProp], options);
	      }
	    }
	  } else if (typeof value === 'number' && !Number.isNaN(value)) {
	    var unit = options[prop] || units[prop]; // Add the unit if available, except for the special case of 0px.

	    if (unit && !(value === 0 && unit === px)) {
	      return typeof unit === 'function' ? unit(value).toString() : "" + value + unit;
	    }

	    return value.toString();
	  }

	  return value;
	}
	/**
	 * Add unit to numeric values.
	 */


	function defaultUnit(options) {
	  if (options === void 0) {
	    options = {};
	  }

	  var camelCasedOptions = addCamelCasedVersion(options);

	  function onProcessStyle(style, rule) {
	    if (rule.type !== 'style') return style;

	    for (var prop in style) {
	      style[prop] = iterate(prop, style[prop], camelCasedOptions);
	    }

	    return style;
	  }

	  function onChangeValue(value, prop) {
	    return iterate(prop, value, camelCasedOptions);
	  }

	  return {
	    onProcessStyle: onProcessStyle,
	    onChangeValue: onChangeValue
	  };
	}

	function _arrayLikeToArray(arr, len) {
	  if (len == null || len > arr.length) len = arr.length;

	  for (var i = 0, arr2 = new Array(len); i < len; i++) {
	    arr2[i] = arr[i];
	  }

	  return arr2;
	}

	function _arrayWithoutHoles$2(arr) {
	  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
	}

	function _iterableToArray$2(iter) {
	  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
	}

	function _unsupportedIterableToArray(o, minLen) {
	  if (!o) return;
	  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
	  var n = Object.prototype.toString.call(o).slice(8, -1);
	  if (n === "Object" && o.constructor) n = o.constructor.name;
	  if (n === "Map" || n === "Set") return Array.from(o);
	  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
	}

	function _nonIterableSpread$2() {
	  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
	}

	function _toConsumableArray$2(arr) {
	  return _arrayWithoutHoles$2(arr) || _iterableToArray$2(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread$2();
	}

	// Export javascript style and css style vendor prefixes.
	var js = '';
	var css = '';
	var vendor = '';
	var browser = '';
	var isTouch = isBrowser$1 && 'ontouchstart' in document.documentElement; // We should not do anything if required serverside.

	if (isBrowser$1) {
	  // Order matters. We need to check Webkit the last one because
	  // other vendors use to add Webkit prefixes to some properties
	  var jsCssMap = {
	    Moz: '-moz-',
	    ms: '-ms-',
	    O: '-o-',
	    Webkit: '-webkit-'
	  };

	  var _document$createEleme = document.createElement('p'),
	      style$1 = _document$createEleme.style;

	  var testProp = 'Transform';

	  for (var key in jsCssMap) {
	    if (key + testProp in style$1) {
	      js = key;
	      css = jsCssMap[key];
	      break;
	    }
	  } // Correctly detect the Edge browser.


	  if (js === 'Webkit' && 'msHyphens' in style$1) {
	    js = 'ms';
	    css = jsCssMap.ms;
	    browser = 'edge';
	  } // Correctly detect the Safari browser.


	  if (js === 'Webkit' && '-apple-trailing-word' in style$1) {
	    vendor = 'apple';
	  }
	}
	/**
	 * Vendor prefix string for the current browser.
	 *
	 * @type {{js: String, css: String, vendor: String, browser: String}}
	 * @api public
	 */


	var prefix = {
	  js: js,
	  css: css,
	  vendor: vendor,
	  browser: browser,
	  isTouch: isTouch
	};

	/**
	 * Test if a keyframe at-rule should be prefixed or not
	 *
	 * @param {String} vendor prefix string for the current browser.
	 * @return {String}
	 * @api public
	 */

	function supportedKeyframes(key) {
	  // Keyframes is already prefixed. e.g. key = '@-webkit-keyframes a'
	  if (key[1] === '-') return key; // No need to prefix IE/Edge. Older browsers will ignore unsupported rules.
	  // https://caniuse.com/#search=keyframes

	  if (prefix.js === 'ms') return key;
	  return "@" + prefix.css + "keyframes" + key.substr(10);
	}

	// https://caniuse.com/#search=appearance

	var appearence = {
	  noPrefill: ['appearance'],
	  supportedProperty: function supportedProperty(prop) {
	    if (prop !== 'appearance') return false;
	    if (prefix.js === 'ms') return "-webkit-" + prop;
	    return prefix.css + prop;
	  }
	};

	// https://caniuse.com/#search=color-adjust

	var colorAdjust = {
	  noPrefill: ['color-adjust'],
	  supportedProperty: function supportedProperty(prop) {
	    if (prop !== 'color-adjust') return false;
	    if (prefix.js === 'Webkit') return prefix.css + "print-" + prop;
	    return prop;
	  }
	};

	var regExp = /[-\s]+(.)?/g;
	/**
	 * Replaces the letter with the capital letter
	 *
	 * @param {String} match
	 * @param {String} c
	 * @return {String}
	 * @api private
	 */

	function toUpper(match, c) {
	  return c ? c.toUpperCase() : '';
	}
	/**
	 * Convert dash separated strings to camel-cased.
	 *
	 * @param {String} str
	 * @return {String}
	 * @api private
	 */


	function camelize(str) {
	  return str.replace(regExp, toUpper);
	}

	/**
	 * Convert dash separated strings to pascal cased.
	 *
	 * @param {String} str
	 * @return {String}
	 * @api private
	 */

	function pascalize(str) {
	  return camelize("-" + str);
	}

	// but we can use a longhand property instead.
	// https://caniuse.com/#search=mask

	var mask = {
	  noPrefill: ['mask'],
	  supportedProperty: function supportedProperty(prop, style) {
	    if (!/^mask/.test(prop)) return false;

	    if (prefix.js === 'Webkit') {
	      var longhand = 'mask-image';

	      if (camelize(longhand) in style) {
	        return prop;
	      }

	      if (prefix.js + pascalize(longhand) in style) {
	        return prefix.css + prop;
	      }
	    }

	    return prop;
	  }
	};

	// https://caniuse.com/#search=text-orientation

	var textOrientation = {
	  noPrefill: ['text-orientation'],
	  supportedProperty: function supportedProperty(prop) {
	    if (prop !== 'text-orientation') return false;

	    if (prefix.vendor === 'apple' && !prefix.isTouch) {
	      return prefix.css + prop;
	    }

	    return prop;
	  }
	};

	// https://caniuse.com/#search=transform

	var transform$1 = {
	  noPrefill: ['transform'],
	  supportedProperty: function supportedProperty(prop, style, options) {
	    if (prop !== 'transform') return false;

	    if (options.transform) {
	      return prop;
	    }

	    return prefix.css + prop;
	  }
	};

	// https://caniuse.com/#search=transition

	var transition = {
	  noPrefill: ['transition'],
	  supportedProperty: function supportedProperty(prop, style, options) {
	    if (prop !== 'transition') return false;

	    if (options.transition) {
	      return prop;
	    }

	    return prefix.css + prop;
	  }
	};

	// https://caniuse.com/#search=writing-mode

	var writingMode = {
	  noPrefill: ['writing-mode'],
	  supportedProperty: function supportedProperty(prop) {
	    if (prop !== 'writing-mode') return false;

	    if (prefix.js === 'Webkit' || prefix.js === 'ms' && prefix.browser !== 'edge') {
	      return prefix.css + prop;
	    }

	    return prop;
	  }
	};

	// https://caniuse.com/#search=user-select

	var userSelect = {
	  noPrefill: ['user-select'],
	  supportedProperty: function supportedProperty(prop) {
	    if (prop !== 'user-select') return false;

	    if (prefix.js === 'Moz' || prefix.js === 'ms' || prefix.vendor === 'apple') {
	      return prefix.css + prop;
	    }

	    return prop;
	  }
	};

	// https://caniuse.com/#search=multicolumn
	// https://github.com/postcss/autoprefixer/issues/491
	// https://github.com/postcss/autoprefixer/issues/177

	var breakPropsOld = {
	  supportedProperty: function supportedProperty(prop, style) {
	    if (!/^break-/.test(prop)) return false;

	    if (prefix.js === 'Webkit') {
	      var jsProp = "WebkitColumn" + pascalize(prop);
	      return jsProp in style ? prefix.css + "column-" + prop : false;
	    }

	    if (prefix.js === 'Moz') {
	      var _jsProp = "page" + pascalize(prop);

	      return _jsProp in style ? "page-" + prop : false;
	    }

	    return false;
	  }
	};

	// See https://github.com/postcss/autoprefixer/issues/324.

	var inlineLogicalOld = {
	  supportedProperty: function supportedProperty(prop, style) {
	    if (!/^(border|margin|padding)-inline/.test(prop)) return false;
	    if (prefix.js === 'Moz') return prop;
	    var newProp = prop.replace('-inline', '');
	    return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
	  }
	};

	// Camelization is required because we can't test using.
	// CSS syntax for e.g. in FF.

	var unprefixed = {
	  supportedProperty: function supportedProperty(prop, style) {
	    return camelize(prop) in style ? prop : false;
	  }
	};

	var prefixed = {
	  supportedProperty: function supportedProperty(prop, style) {
	    var pascalized = pascalize(prop); // Return custom CSS variable without prefixing.

	    if (prop[0] === '-') return prop; // Return already prefixed value without prefixing.

	    if (prop[0] === '-' && prop[1] === '-') return prop;
	    if (prefix.js + pascalized in style) return prefix.css + prop; // Try webkit fallback.

	    if (prefix.js !== 'Webkit' && "Webkit" + pascalized in style) return "-webkit-" + prop;
	    return false;
	  }
	};

	// https://caniuse.com/#search=scroll-snap

	var scrollSnap = {
	  supportedProperty: function supportedProperty(prop) {
	    if (prop.substring(0, 11) !== 'scroll-snap') return false;

	    if (prefix.js === 'ms') {
	      return "" + prefix.css + prop;
	    }

	    return prop;
	  }
	};

	// https://caniuse.com/#search=overscroll-behavior

	var overscrollBehavior = {
	  supportedProperty: function supportedProperty(prop) {
	    if (prop !== 'overscroll-behavior') return false;

	    if (prefix.js === 'ms') {
	      return prefix.css + "scroll-chaining";
	    }

	    return prop;
	  }
	};

	var propMap = {
	  'flex-grow': 'flex-positive',
	  'flex-shrink': 'flex-negative',
	  'flex-basis': 'flex-preferred-size',
	  'justify-content': 'flex-pack',
	  order: 'flex-order',
	  'align-items': 'flex-align',
	  'align-content': 'flex-line-pack' // 'align-self' is handled by 'align-self' plugin.

	}; // Support old flex spec from 2012.

	var flex2012 = {
	  supportedProperty: function supportedProperty(prop, style) {
	    var newProp = propMap[prop];
	    if (!newProp) return false;
	    return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
	  }
	};

	var propMap$1 = {
	  flex: 'box-flex',
	  'flex-grow': 'box-flex',
	  'flex-direction': ['box-orient', 'box-direction'],
	  order: 'box-ordinal-group',
	  'align-items': 'box-align',
	  'flex-flow': ['box-orient', 'box-direction'],
	  'justify-content': 'box-pack'
	};
	var propKeys = Object.keys(propMap$1);

	var prefixCss = function prefixCss(p) {
	  return prefix.css + p;
	}; // Support old flex spec from 2009.


	var flex2009 = {
	  supportedProperty: function supportedProperty(prop, style, _ref) {
	    var multiple = _ref.multiple;

	    if (propKeys.indexOf(prop) > -1) {
	      var newProp = propMap$1[prop];

	      if (!Array.isArray(newProp)) {
	        return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
	      }

	      if (!multiple) return false;

	      for (var i = 0; i < newProp.length; i++) {
	        if (!(prefix.js + pascalize(newProp[0]) in style)) {
	          return false;
	        }
	      }

	      return newProp.map(prefixCss);
	    }

	    return false;
	  }
	};

	// plugins = [
	//   ...plugins,
	//    breakPropsOld,
	//    inlineLogicalOld,
	//    unprefixed,
	//    prefixed,
	//    scrollSnap,
	//    flex2012,
	//    flex2009
	// ]
	// Plugins without 'noPrefill' value, going last.
	// 'flex-*' plugins should be at the bottom.
	// 'flex2009' going after 'flex2012'.
	// 'prefixed' going after 'unprefixed'

	var plugins = [appearence, colorAdjust, mask, textOrientation, transform$1, transition, writingMode, userSelect, breakPropsOld, inlineLogicalOld, unprefixed, prefixed, scrollSnap, overscrollBehavior, flex2012, flex2009];
	var propertyDetectors = plugins.filter(function (p) {
	  return p.supportedProperty;
	}).map(function (p) {
	  return p.supportedProperty;
	});
	var noPrefill = plugins.filter(function (p) {
	  return p.noPrefill;
	}).reduce(function (a, p) {
	  a.push.apply(a, _toConsumableArray$2(p.noPrefill));
	  return a;
	}, []);

	var el;
	var cache$1 = {};

	if (isBrowser$1) {
	  el = document.createElement('p'); // We test every property on vendor prefix requirement.
	  // Once tested, result is cached. It gives us up to 70% perf boost.
	  // http://jsperf.com/element-style-object-access-vs-plain-object
	  //
	  // Prefill cache with known css properties to reduce amount of
	  // properties we need to feature test at runtime.
	  // http://davidwalsh.name/vendor-prefix

	  var computed = window.getComputedStyle(document.documentElement, '');

	  for (var key$1 in computed) {
	    // eslint-disable-next-line no-restricted-globals
	    if (!isNaN(key$1)) cache$1[computed[key$1]] = computed[key$1];
	  } // Properties that cannot be correctly detected using the
	  // cache prefill method.


	  noPrefill.forEach(function (x) {
	    return delete cache$1[x];
	  });
	}
	/**
	 * Test if a property is supported, returns supported property with vendor
	 * prefix if required. Returns `false` if not supported.
	 *
	 * @param {String} prop dash separated
	 * @param {Object} [options]
	 * @return {String|Boolean}
	 * @api public
	 */


	function supportedProperty(prop, options) {
	  if (options === void 0) {
	    options = {};
	  }

	  // For server-side rendering.
	  if (!el) return prop; // Remove cache for benchmark tests or return property from the cache.

	  if (cache$1[prop] != null) {
	    return cache$1[prop];
	  } // Check if 'transition' or 'transform' natively supported in browser.


	  if (prop === 'transition' || prop === 'transform') {
	    options[prop] = prop in el.style;
	  } // Find a plugin for current prefix property.


	  for (var i = 0; i < propertyDetectors.length; i++) {
	    cache$1[prop] = propertyDetectors[i](prop, el.style, options); // Break loop, if value found.

	    if (cache$1[prop]) break;
	  } // Reset styles for current property.
	  // Firefox can even throw an error for invalid properties, e.g., "0".


	  try {
	    el.style[prop] = '';
	  } catch (err) {
	    return false;
	  }

	  return cache$1[prop];
	}

	var cache$1$1 = {};
	var transitionProperties = {
	  transition: 1,
	  'transition-property': 1,
	  '-webkit-transition': 1,
	  '-webkit-transition-property': 1
	};
	var transPropsRegExp = /(^\s*[\w-]+)|, (\s*[\w-]+)(?![^()]*\))/g;
	var el$1;
	/**
	 * Returns prefixed value transition/transform if needed.
	 *
	 * @param {String} match
	 * @param {String} p1
	 * @param {String} p2
	 * @return {String}
	 * @api private
	 */

	function prefixTransitionCallback(match, p1, p2) {
	  if (p1 === 'var') return 'var';
	  if (p1 === 'all') return 'all';
	  if (p2 === 'all') return ', all';
	  var prefixedValue = p1 ? supportedProperty(p1) : ", " + supportedProperty(p2);
	  if (!prefixedValue) return p1 || p2;
	  return prefixedValue;
	}

	if (isBrowser$1) el$1 = document.createElement('p');
	/**
	 * Returns prefixed value if needed. Returns `false` if value is not supported.
	 *
	 * @param {String} property
	 * @param {String} value
	 * @return {String|Boolean}
	 * @api public
	 */

	function supportedValue(property, value) {
	  // For server-side rendering.
	  var prefixedValue = value;
	  if (!el$1 || property === 'content') return value; // It is a string or a number as a string like '1'.
	  // We want only prefixable values here.
	  // eslint-disable-next-line no-restricted-globals

	  if (typeof prefixedValue !== 'string' || !isNaN(parseInt(prefixedValue, 10))) {
	    return prefixedValue;
	  } // Create cache key for current value.


	  var cacheKey = property + prefixedValue; // Remove cache for benchmark tests or return value from cache.

	  if (cache$1$1[cacheKey] != null) {
	    return cache$1$1[cacheKey];
	  } // IE can even throw an error in some cases, for e.g. style.content = 'bar'.


	  try {
	    // Test value as it is.
	    el$1.style[property] = prefixedValue;
	  } catch (err) {
	    // Return false if value not supported.
	    cache$1$1[cacheKey] = false;
	    return false;
	  } // If 'transition' or 'transition-property' property.


	  if (transitionProperties[property]) {
	    prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback);
	  } else if (el$1.style[property] === '') {
	    // Value with a vendor prefix.
	    prefixedValue = prefix.css + prefixedValue; // Hardcode test to convert "flex" to "-ms-flexbox" for IE10.

	    if (prefixedValue === '-ms-flex') el$1.style[property] = '-ms-flexbox'; // Test prefixed value.

	    el$1.style[property] = prefixedValue; // Return false if value not supported.

	    if (el$1.style[property] === '') {
	      cache$1$1[cacheKey] = false;
	      return false;
	    }
	  } // Reset styles for current property.


	  el$1.style[property] = ''; // Write current value to cache.

	  cache$1$1[cacheKey] = prefixedValue;
	  return cache$1$1[cacheKey];
	}

	/**
	 * Add vendor prefix to a property name when needed.
	 *
	 * @api public
	 */

	function jssVendorPrefixer() {
	  function onProcessRule(rule) {
	    if (rule.type === 'keyframes') {
	      var atRule = rule;
	      atRule.at = supportedKeyframes(atRule.at);
	    }
	  }

	  function prefixStyle(style) {
	    for (var prop in style) {
	      var value = style[prop];

	      if (prop === 'fallbacks' && Array.isArray(value)) {
	        style[prop] = value.map(prefixStyle);
	        continue;
	      }

	      var changeProp = false;
	      var supportedProp = supportedProperty(prop);
	      if (supportedProp && supportedProp !== prop) changeProp = true;
	      var changeValue = false;
	      var supportedValue$1 = supportedValue(supportedProp, toCssValue(value));
	      if (supportedValue$1 && supportedValue$1 !== value) changeValue = true;

	      if (changeProp || changeValue) {
	        if (changeProp) delete style[prop];
	        style[supportedProp || prop] = supportedValue$1 || value;
	      }
	    }

	    return style;
	  }

	  function onProcessStyle(style, rule) {
	    if (rule.type !== 'style') return style;
	    return prefixStyle(style);
	  }

	  function onChangeValue(value, prop) {
	    return supportedValue(prop, toCssValue(value)) || value;
	  }

	  return {
	    onProcessRule: onProcessRule,
	    onProcessStyle: onProcessStyle,
	    onChangeValue: onChangeValue
	  };
	}

	/**
	 * Sort props by length.
	 */
	function jssPropsSort() {
	  var sort = function sort(prop0, prop1) {
	    if (prop0.length === prop1.length) {
	      return prop0 > prop1 ? 1 : -1;
	    }

	    return prop0.length - prop1.length;
	  };

	  return {
	    onProcessStyle: function onProcessStyle(style, rule) {
	      if (rule.type !== 'style') return style;
	      var newStyle = {};
	      var props = Object.keys(style).sort(sort);

	      for (var i = 0; i < props.length; i++) {
	        newStyle[props[i]] = style[props[i]];
	      }

	      return newStyle;
	    }
	  };
	}

	function jssPreset() {
	  return {
	    plugins: [functionPlugin(), jssGlobal(), jssNested(), camelCase(), defaultUnit(), // Disable the vendor prefixer server-side, it does nothing.
	    // This way, we can get a performance boost.
	    // In the documentation, we are using `autoprefixer` to solve this problem.
	    typeof window === 'undefined' ? null : jssVendorPrefixer(), jssPropsSort()]
	  };
	}

	function _objectWithoutPropertiesLoose$2(source, excluded) {
	  if (source == null) return {};
	  var target = {};
	  var sourceKeys = Object.keys(source);
	  var key, i;

	  for (i = 0; i < sourceKeys.length; i++) {
	    key = sourceKeys[i];
	    if (excluded.indexOf(key) >= 0) continue;
	    target[key] = source[key];
	  }

	  return target;
	}

	function _objectWithoutProperties$1(source, excluded) {
	  if (source == null) return {};
	  var target = _objectWithoutPropertiesLoose$2(source, excluded);
	  var key, i;

	  if (Object.getOwnPropertySymbols) {
	    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

	    for (i = 0; i < sourceSymbolKeys.length; i++) {
	      key = sourceSymbolKeys[i];
	      if (excluded.indexOf(key) >= 0) continue;
	      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
	      target[key] = source[key];
	    }
	  }

	  return target;
	}

	function _extends$6() {
	  _extends$6 = Object.assign || function (target) {
	    for (var i = 1; i < arguments.length; i++) {
	      var source = arguments[i];

	      for (var key in source) {
	        if (Object.prototype.hasOwnProperty.call(source, key)) {
	          target[key] = source[key];
	        }
	      }
	    }

	    return target;
	  };

	  return _extends$6.apply(this, arguments);
	}

	function mergeClasses() {
	  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  var baseClasses = options.baseClasses,
	      newClasses = options.newClasses;
	      options.Component;

	  if (!newClasses) {
	    return baseClasses;
	  }

	  var nextClasses = _extends$6({}, baseClasses);

	  Object.keys(newClasses).forEach(function (key) {

	    if (newClasses[key]) {
	      nextClasses[key] = "".concat(baseClasses[key], " ").concat(newClasses[key]);
	    }
	  });
	  return nextClasses;
	}

	// Used https://github.com/thinkloop/multi-key-cache as inspiration
	var multiKeyStore = {
	  set: function set(cache, key1, key2, value) {
	    var subCache = cache.get(key1);

	    if (!subCache) {
	      subCache = new Map();
	      cache.set(key1, subCache);
	    }

	    subCache.set(key2, value);
	  },
	  get: function get(cache, key1, key2) {
	    var subCache = cache.get(key1);
	    return subCache ? subCache.get(key2) : undefined;
	  },
	  delete: function _delete(cache, key1, key2) {
	    var subCache = cache.get(key1);
	    subCache.delete(key2);
	  }
	};

	var ThemeContext = React.createContext(null);

	function useTheme$2() {
	  var theme = React.useContext(ThemeContext);

	  return theme;
	}

	var jss = create$4(jssPreset()); // Use a singleton or the provided one by the context.
	//
	// The counter-based approach doesn't tolerate any mistake.
	// It's much safer to use the same counter everywhere.

	var generateClassName = createGenerateClassName(); // Exported for test purposes

	var sheetsManager = new Map();
	var defaultOptions = {
	  disableGeneration: false,
	  generateClassName: generateClassName,
	  jss: jss,
	  sheetsCache: null,
	  sheetsManager: sheetsManager,
	  sheetsRegistry: null
	};
	var StylesContext = React.createContext(defaultOptions);

	var injectFirstNode;
	function StylesProvider(props) {
	  var children = props.children,
	      _props$injectFirst = props.injectFirst,
	      injectFirst = _props$injectFirst === void 0 ? false : _props$injectFirst,
	      _props$disableGenerat = props.disableGeneration,
	      disableGeneration = _props$disableGenerat === void 0 ? false : _props$disableGenerat,
	      localOptions = _objectWithoutProperties$1(props, ["children", "injectFirst", "disableGeneration"]);

	  var outerOptions = React.useContext(StylesContext);

	  var context = _extends$6({}, outerOptions, {
	    disableGeneration: disableGeneration
	  }, localOptions);

	  if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') {
	    if (!injectFirstNode) {
	      var head = document.head;
	      injectFirstNode = document.createComment('mui-inject-first');
	      head.insertBefore(injectFirstNode, head.firstChild);
	    }

	    context.jss = create$4({
	      plugins: jssPreset().plugins,
	      insertionPoint: injectFirstNode
	    });
	  }

	  return /*#__PURE__*/React.createElement(StylesContext.Provider, {
	    value: context
	  }, children);
	}

	/* eslint-disable import/prefer-default-export */
	// Global index counter to preserve source order.
	// We create the style sheet during the creation of the component,
	// children are handled after the parents, so the order of style elements would be parent->child.
	// It is a problem though when a parent passes a className
	// which needs to override any child's styles.
	// StyleSheet of the child has a higher specificity, because of the source order.
	// So our solution is to render sheets them in the reverse order child->sheet, so
	// that parent has a higher specificity.
	var indexCounter = -1e9;
	function increment() {
	  indexCounter += 1;

	  return indexCounter;
	}

	// We use the same empty object to ref count the styles that don't need a theme object.
	var noopTheme = {};

	function getStylesCreator(stylesOrCreator) {
	  var themingEnabled = typeof stylesOrCreator === 'function';

	  return {
	    create: function create(theme, name) {
	      var styles;

	      try {
	        styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
	      } catch (err) {

	        throw err;
	      }

	      if (!name || !theme.overrides || !theme.overrides[name]) {
	        return styles;
	      }

	      var overrides = theme.overrides[name];

	      var stylesWithOverrides = _extends$6({}, styles);

	      Object.keys(overrides).forEach(function (key) {

	        stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);
	      });
	      return stylesWithOverrides;
	    },
	    options: {}
	  };
	}

	function getClasses(_ref, classes, Component) {
	  var state = _ref.state,
	      stylesOptions = _ref.stylesOptions;

	  if (stylesOptions.disableGeneration) {
	    return classes || {};
	  }

	  if (!state.cacheClasses) {
	    state.cacheClasses = {
	      // Cache for the finalized classes value.
	      value: null,
	      // Cache for the last used classes prop pointer.
	      lastProp: null,
	      // Cache for the last used rendered classes pointer.
	      lastJSS: {}
	    };
	  } // Tracks if either the rendered classes or classes prop has changed,
	  // requiring the generation of a new finalized classes object.


	  var generate = false;

	  if (state.classes !== state.cacheClasses.lastJSS) {
	    state.cacheClasses.lastJSS = state.classes;
	    generate = true;
	  }

	  if (classes !== state.cacheClasses.lastProp) {
	    state.cacheClasses.lastProp = classes;
	    generate = true;
	  }

	  if (generate) {
	    state.cacheClasses.value = mergeClasses({
	      baseClasses: state.cacheClasses.lastJSS,
	      newClasses: classes,
	      Component: Component
	    });
	  }

	  return state.cacheClasses.value;
	}

	function attach(_ref2, props) {
	  var state = _ref2.state,
	      theme = _ref2.theme,
	      stylesOptions = _ref2.stylesOptions,
	      stylesCreator = _ref2.stylesCreator,
	      name = _ref2.name;

	  if (stylesOptions.disableGeneration) {
	    return;
	  }

	  var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);

	  if (!sheetManager) {
	    sheetManager = {
	      refs: 0,
	      staticSheet: null,
	      dynamicStyles: null
	    };
	    multiKeyStore.set(stylesOptions.sheetsManager, stylesCreator, theme, sheetManager);
	  }

	  var options = _extends$6({}, stylesCreator.options, stylesOptions, {
	    theme: theme,
	    flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'
	  });

	  options.generateId = options.serverGenerateClassName || options.generateClassName;
	  var sheetsRegistry = stylesOptions.sheetsRegistry;

	  if (sheetManager.refs === 0) {
	    var staticSheet;

	    if (stylesOptions.sheetsCache) {
	      staticSheet = multiKeyStore.get(stylesOptions.sheetsCache, stylesCreator, theme);
	    }

	    var styles = stylesCreator.create(theme, name);

	    if (!staticSheet) {
	      staticSheet = stylesOptions.jss.createStyleSheet(styles, _extends$6({
	        link: false
	      }, options));
	      staticSheet.attach();

	      if (stylesOptions.sheetsCache) {
	        multiKeyStore.set(stylesOptions.sheetsCache, stylesCreator, theme, staticSheet);
	      }
	    }

	    if (sheetsRegistry) {
	      sheetsRegistry.add(staticSheet);
	    }

	    sheetManager.staticSheet = staticSheet;
	    sheetManager.dynamicStyles = getDynamicStyles(styles);
	  }

	  if (sheetManager.dynamicStyles) {
	    var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends$6({
	      link: true
	    }, options));
	    dynamicSheet.update(props);
	    dynamicSheet.attach();
	    state.dynamicSheet = dynamicSheet;
	    state.classes = mergeClasses({
	      baseClasses: sheetManager.staticSheet.classes,
	      newClasses: dynamicSheet.classes
	    });

	    if (sheetsRegistry) {
	      sheetsRegistry.add(dynamicSheet);
	    }
	  } else {
	    state.classes = sheetManager.staticSheet.classes;
	  }

	  sheetManager.refs += 1;
	}

	function update$1(_ref3, props) {
	  var state = _ref3.state;

	  if (state.dynamicSheet) {
	    state.dynamicSheet.update(props);
	  }
	}

	function detach(_ref4) {
	  var state = _ref4.state,
	      theme = _ref4.theme,
	      stylesOptions = _ref4.stylesOptions,
	      stylesCreator = _ref4.stylesCreator;

	  if (stylesOptions.disableGeneration) {
	    return;
	  }

	  var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
	  sheetManager.refs -= 1;
	  var sheetsRegistry = stylesOptions.sheetsRegistry;

	  if (sheetManager.refs === 0) {
	    multiKeyStore.delete(stylesOptions.sheetsManager, stylesCreator, theme);
	    stylesOptions.jss.removeStyleSheet(sheetManager.staticSheet);

	    if (sheetsRegistry) {
	      sheetsRegistry.remove(sheetManager.staticSheet);
	    }
	  }

	  if (state.dynamicSheet) {
	    stylesOptions.jss.removeStyleSheet(state.dynamicSheet);

	    if (sheetsRegistry) {
	      sheetsRegistry.remove(state.dynamicSheet);
	    }
	  }
	}

	function useSynchronousEffect(func, values) {
	  var key = React.useRef([]);
	  var output; // Store "generation" key. Just returns a new object every time

	  var currentKey = React.useMemo(function () {
	    return {};
	  }, values); // eslint-disable-line react-hooks/exhaustive-deps
	  // "the first render", or "memo dropped the value"

	  if (key.current !== currentKey) {
	    key.current = currentKey;
	    output = func();
	  }

	  React.useEffect(function () {
	    return function () {
	      if (output) {
	        output();
	      }
	    };
	  }, [currentKey] // eslint-disable-line react-hooks/exhaustive-deps
	  );
	}

	function makeStyles$1(stylesOrCreator) {
	  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

	  var name = options.name,
	      classNamePrefixOption = options.classNamePrefix,
	      Component = options.Component,
	      _options$defaultTheme = options.defaultTheme,
	      defaultTheme = _options$defaultTheme === void 0 ? noopTheme : _options$defaultTheme,
	      stylesOptions2 = _objectWithoutProperties$1(options, ["name", "classNamePrefix", "Component", "defaultTheme"]);

	  var stylesCreator = getStylesCreator(stylesOrCreator);
	  var classNamePrefix = name || classNamePrefixOption || 'makeStyles';
	  stylesCreator.options = {
	    index: increment(),
	    name: name,
	    meta: classNamePrefix,
	    classNamePrefix: classNamePrefix
	  };

	  var useStyles = function useStyles() {
	    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	    var theme = useTheme$2() || defaultTheme;

	    var stylesOptions = _extends$6({}, React.useContext(StylesContext), stylesOptions2);

	    var instance = React.useRef();
	    var shouldUpdate = React.useRef();
	    useSynchronousEffect(function () {
	      var current = {
	        name: name,
	        state: {},
	        stylesCreator: stylesCreator,
	        stylesOptions: stylesOptions,
	        theme: theme
	      };
	      attach(current, props);
	      shouldUpdate.current = false;
	      instance.current = current;
	      return function () {
	        detach(current);
	      };
	    }, [theme, stylesCreator]);
	    React.useEffect(function () {
	      if (shouldUpdate.current) {
	        update$1(instance.current, props);
	      }

	      shouldUpdate.current = true;
	    });
	    var classes = getClasses(instance.current, props.classes, Component);

	    return classes;
	  };

	  return useStyles;
	}

	function toVal$1(mix) {
		var k, y, str='';

		if (typeof mix === 'string' || typeof mix === 'number') {
			str += mix;
		} else if (typeof mix === 'object') {
			if (Array.isArray(mix)) {
				for (k=0; k < mix.length; k++) {
					if (mix[k]) {
						if (y = toVal$1(mix[k])) {
							str && (str += ' ');
							str += y;
						}
					}
				}
			} else {
				for (k in mix) {
					if (mix[k]) {
						str && (str += ' ');
						str += k;
					}
				}
			}
		}

		return str;
	}

	function clsx$1 () {
		var i=0, tmp, x, str='';
		while (i < arguments.length) {
			if (tmp = arguments[i++]) {
				if (x = toVal$1(tmp)) {
					str && (str += ' ');
					str += x;
				}
			}
		}
		return str;
	}

	var reactIs = reactIs$1.exports;

	/**
	 * Copyright 2015, Yahoo! Inc.
	 * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
	 */
	var REACT_STATICS = {
	  childContextTypes: true,
	  contextType: true,
	  contextTypes: true,
	  defaultProps: true,
	  displayName: true,
	  getDefaultProps: true,
	  getDerivedStateFromError: true,
	  getDerivedStateFromProps: true,
	  mixins: true,
	  propTypes: true,
	  type: true
	};
	var KNOWN_STATICS = {
	  name: true,
	  length: true,
	  prototype: true,
	  caller: true,
	  callee: true,
	  arguments: true,
	  arity: true
	};
	var FORWARD_REF_STATICS = {
	  '$$typeof': true,
	  render: true,
	  defaultProps: true,
	  displayName: true,
	  propTypes: true
	};
	var MEMO_STATICS = {
	  '$$typeof': true,
	  compare: true,
	  defaultProps: true,
	  displayName: true,
	  propTypes: true,
	  type: true
	};
	var TYPE_STATICS = {};
	TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
	TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;

	function getStatics(component) {
	  // React v16.11 and below
	  if (reactIs.isMemo(component)) {
	    return MEMO_STATICS;
	  } // React v16.12 and above


	  return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
	}

	var defineProperty$1 = Object.defineProperty;
	var getOwnPropertyNames = Object.getOwnPropertyNames;
	var getOwnPropertySymbols = Object.getOwnPropertySymbols;
	var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
	var getPrototypeOf = Object.getPrototypeOf;
	var objectPrototype = Object.prototype;
	function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
	  if (typeof sourceComponent !== 'string') {
	    // don't hoist over string (html) components
	    if (objectPrototype) {
	      var inheritedComponent = getPrototypeOf(sourceComponent);

	      if (inheritedComponent && inheritedComponent !== objectPrototype) {
	        hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
	      }
	    }

	    var keys = getOwnPropertyNames(sourceComponent);

	    if (getOwnPropertySymbols) {
	      keys = keys.concat(getOwnPropertySymbols(sourceComponent));
	    }

	    var targetStatics = getStatics(targetComponent);
	    var sourceStatics = getStatics(sourceComponent);

	    for (var i = 0; i < keys.length; ++i) {
	      var key = keys[i];

	      if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
	        var descriptor = getOwnPropertyDescriptor(sourceComponent, key);

	        try {
	          // Avoid failures from read-only properties
	          defineProperty$1(targetComponent, key, descriptor);
	        } catch (e) {}
	      }
	    }
	  }

	  return targetComponent;
	}

	var hoistNonReactStatics_cjs = hoistNonReactStatics;

	function omit$1(input, fields) {
	  var output = {};
	  Object.keys(input).forEach(function (prop) {
	    if (fields.indexOf(prop) === -1) {
	      output[prop] = input[prop];
	    }
	  });
	  return output;
	} // styled-components's API removes the mapping between components and styles.
	// Using components as a low-level styling construct can be simpler.


	function styled$1(Component) {
	  var componentCreator = function componentCreator(style) {
	    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

	    var name = options.name,
	        stylesOptions = _objectWithoutProperties$1(options, ["name"]);

	    var classNamePrefix = name;

	    var stylesOrCreator = typeof style === 'function' ? function (theme) {
	      return {
	        root: function root(props) {
	          return style(_extends$6({
	            theme: theme
	          }, props));
	        }
	      };
	    } : {
	      root: style
	    };
	    var useStyles = makeStyles$1(stylesOrCreator, _extends$6({
	      Component: Component,
	      name: name || Component.displayName,
	      classNamePrefix: classNamePrefix
	    }, stylesOptions));
	    var filterProps;

	    if (style.filterProps) {
	      filterProps = style.filterProps;
	      delete style.filterProps;
	    }
	    /* eslint-disable react/forbid-foreign-prop-types */


	    if (style.propTypes) {
	      delete style.propTypes;
	    }
	    /* eslint-enable react/forbid-foreign-prop-types */


	    var StyledComponent = /*#__PURE__*/React.forwardRef(function StyledComponent(props, ref) {
	      var children = props.children,
	          classNameProp = props.className,
	          clone = props.clone,
	          ComponentProp = props.component,
	          other = _objectWithoutProperties$1(props, ["children", "className", "clone", "component"]);

	      var classes = useStyles(props);
	      var className = clsx$1(classes.root, classNameProp);
	      var spread = other;

	      if (filterProps) {
	        spread = omit$1(spread, filterProps);
	      }

	      if (clone) {
	        return /*#__PURE__*/React.cloneElement(children, _extends$6({
	          className: clsx$1(children.props.className, className)
	        }, spread));
	      }

	      if (typeof children === 'function') {
	        return children(_extends$6({
	          className: className
	        }, spread));
	      }

	      var FinalComponent = ComponentProp || Component;
	      return /*#__PURE__*/React.createElement(FinalComponent, _extends$6({
	        ref: ref,
	        className: className
	      }, spread), children);
	    });

	    hoistNonReactStatics_cjs(StyledComponent, Component);
	    return StyledComponent;
	  };

	  return componentCreator;
	}

	function mergeOuterLocalTheme(outerTheme, localTheme) {
	  if (typeof localTheme === 'function') {
	    var mergedTheme = localTheme(outerTheme);

	    return mergedTheme;
	  }

	  return _extends$6({}, outerTheme, localTheme);
	}
	/**
	 * This component takes a `theme` prop.
	 * It makes the `theme` available down the React tree thanks to React context.
	 * This component should preferably be used at **the root of your component tree**.
	 */


	function ThemeProvider(props) {
	  var children = props.children,
	      localTheme = props.theme;
	  var outerTheme = useTheme$2();

	  var theme = React.useMemo(function () {
	    var output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);

	    if (output != null) {
	      output[nested] = outerTheme !== null;
	    }

	    return output;
	  }, [localTheme, outerTheme]);
	  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
	    value: theme
	  }, children);
	}

	// It does not modify the component passed to it;
	// instead, it returns a new component, with a `classes` property.

	var withStyles$1 = function withStyles(stylesOrCreator) {
	  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
	  return function (Component) {
	    var defaultTheme = options.defaultTheme,
	        _options$withTheme = options.withTheme,
	        withTheme = _options$withTheme === void 0 ? false : _options$withTheme,
	        name = options.name,
	        stylesOptions = _objectWithoutProperties$1(options, ["defaultTheme", "withTheme", "name"]);

	    var classNamePrefix = name;

	    var useStyles = makeStyles$1(stylesOrCreator, _extends$6({
	      defaultTheme: defaultTheme,
	      Component: Component,
	      name: name || Component.displayName,
	      classNamePrefix: classNamePrefix
	    }, stylesOptions));
	    var WithStyles = /*#__PURE__*/React.forwardRef(function WithStyles(props, ref) {
	      props.classes;
	          var innerRef = props.innerRef,
	          other = _objectWithoutProperties$1(props, ["classes", "innerRef"]); // The wrapper receives only user supplied props, which could be a subset of
	      // the actual props Component might receive due to merging with defaultProps.
	      // So copying it here would give us the same result in the wrapper as well.


	      var classes = useStyles(_extends$6({}, Component.defaultProps, props));
	      var theme;
	      var more = other;

	      if (typeof name === 'string' || withTheme) {
	        // name and withTheme are invariant in the outer scope
	        // eslint-disable-next-line react-hooks/rules-of-hooks
	        theme = useTheme$2() || defaultTheme;

	        if (name) {
	          more = getThemeProps({
	            theme: theme,
	            name: name,
	            props: other
	          });
	        } // Provide the theme to the wrapped component.
	        // So we don't have to use the `withTheme()` Higher-order Component.


	        if (withTheme && !more.theme) {
	          more.theme = theme;
	        }
	      }

	      return /*#__PURE__*/React.createElement(Component, _extends$6({
	        ref: innerRef || ref,
	        classes: classes
	      }, more));
	    });

	    hoistNonReactStatics_cjs(WithStyles, Component);

	    return WithStyles;
	  };
	};

	function withThemeCreator() {
	  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  var defaultTheme = options.defaultTheme;

	  var withTheme = function withTheme(Component) {

	    var WithTheme = /*#__PURE__*/React.forwardRef(function WithTheme(props, ref) {
	      var innerRef = props.innerRef,
	          other = _objectWithoutProperties$1(props, ["innerRef"]);

	      var theme = useTheme$2() || defaultTheme;
	      return /*#__PURE__*/React.createElement(Component, _extends$6({
	        theme: theme,
	        ref: innerRef || ref
	      }, other));
	    });

	    hoistNonReactStatics_cjs(WithTheme, Component);

	    return WithTheme;
	  };

	  return withTheme;
	} // Provide the theme object as a prop to the input component.
	// It's an alternative API to useTheme().
	// We encourage the usage of useTheme() where possible.

	withThemeCreator();

	/* eslint-disable no-use-before-define */

	/**
	 * Returns a number whose value is limited to the given range.
	 *
	 * @param {number} value The value to be clamped
	 * @param {number} min The lower boundary of the output range
	 * @param {number} max The upper boundary of the output range
	 * @returns {number} A number in the range [min, max]
	 */
	function clamp$1(value) {
	  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
	  var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;

	  return Math.min(Math.max(min, value), max);
	}
	/**
	 * Converts a color from CSS hex format to CSS rgb format.
	 *
	 * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
	 * @returns {string} A CSS rgb color string
	 */


	function hexToRgb(color) {
	  color = color.substr(1);
	  var re = new RegExp(".{1,".concat(color.length >= 6 ? 2 : 1, "}"), 'g');
	  var colors = color.match(re);

	  if (colors && colors[0].length === 1) {
	    colors = colors.map(function (n) {
	      return n + n;
	    });
	  }

	  return colors ? "rgb".concat(colors.length === 4 ? 'a' : '', "(").concat(colors.map(function (n, index) {
	    return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
	  }).join(', '), ")") : '';
	}
	/**
	 * Converts a color from hsl format to rgb format.
	 *
	 * @param {string} color - HSL color values
	 * @returns {string} rgb color values
	 */

	function hslToRgb(color) {
	  color = decomposeColor(color);
	  var _color = color,
	      values = _color.values;
	  var h = values[0];
	  var s = values[1] / 100;
	  var l = values[2] / 100;
	  var a = s * Math.min(l, 1 - l);

	  var f = function f(n) {
	    var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12;
	    return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
	  };

	  var type = 'rgb';
	  var rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];

	  if (color.type === 'hsla') {
	    type += 'a';
	    rgb.push(values[3]);
	  }

	  return recomposeColor({
	    type: type,
	    values: rgb
	  });
	}
	/**
	 * Returns an object with the type and values of a color.
	 *
	 * Note: Does not support rgb % values.
	 *
	 * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
	 * @returns {object} - A MUI color object: {type: string, values: number[]}
	 */

	function decomposeColor(color) {
	  // Idempotent
	  if (color.type) {
	    return color;
	  }

	  if (color.charAt(0) === '#') {
	    return decomposeColor(hexToRgb(color));
	  }

	  var marker = color.indexOf('(');
	  var type = color.substring(0, marker);

	  if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {
	    throw new Error(formatMuiErrorMessage(3, color));
	  }

	  var values = color.substring(marker + 1, color.length - 1).split(',');
	  values = values.map(function (value) {
	    return parseFloat(value);
	  });
	  return {
	    type: type,
	    values: values
	  };
	}
	/**
	 * Converts a color object with type and values to a string.
	 *
	 * @param {object} color - Decomposed color
	 * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
	 * @param {array} color.values - [n,n,n] or [n,n,n,n]
	 * @returns {string} A CSS color string
	 */

	function recomposeColor(color) {
	  var type = color.type;
	  var values = color.values;

	  if (type.indexOf('rgb') !== -1) {
	    // Only convert the first 3 values to int (i.e. not alpha)
	    values = values.map(function (n, i) {
	      return i < 3 ? parseInt(n, 10) : n;
	    });
	  } else if (type.indexOf('hsl') !== -1) {
	    values[1] = "".concat(values[1], "%");
	    values[2] = "".concat(values[2], "%");
	  }

	  return "".concat(type, "(").concat(values.join(', '), ")");
	}
	/**
	 * Calculates the contrast ratio between two colors.
	 *
	 * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
	 *
	 * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
	 * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
	 * @returns {number} A contrast ratio value in the range 0 - 21.
	 */

	function getContrastRatio(foreground, background) {
	  var lumA = getLuminance(foreground);
	  var lumB = getLuminance(background);
	  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
	}
	/**
	 * The relative brightness of any point in a color space,
	 * normalized to 0 for darkest black and 1 for lightest white.
	 *
	 * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
	 *
	 * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
	 * @returns {number} The relative brightness of the color in the range 0 - 1
	 */

	function getLuminance(color) {
	  color = decomposeColor(color);
	  var rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values;
	  rgb = rgb.map(function (val) {
	    val /= 255; // normalized

	    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
	  }); // Truncate at 3 digits

	  return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
	}
	/**
	 * Darken or lighten a color, depending on its luminance.
	 * Light colors are darkened, dark colors are lightened.
	 *
	 * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
	 * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
	 * @returns {string} A CSS color string. Hex input values are returned as rgb
	 */

	function emphasize(color) {
	  var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15;
	  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
	}
	/**
	 * Set the absolute transparency of a color.
	 * Any existing alpha value is overwritten.
	 *
	 * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
	 * @param {number} value - value to set the alpha channel to in the range 0-1
	 * @returns {string} A CSS color string. Hex input values are returned as rgb
	 */

	function alpha(color, value) {
	  color = decomposeColor(color);
	  value = clamp$1(value);

	  if (color.type === 'rgb' || color.type === 'hsl') {
	    color.type += 'a';
	  }

	  color.values[3] = value;
	  return recomposeColor(color);
	}
	/**
	 * Darkens a color.
	 *
	 * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
	 * @param {number} coefficient - multiplier in the range 0 - 1
	 * @returns {string} A CSS color string. Hex input values are returned as rgb
	 */

	function darken(color, coefficient) {
	  color = decomposeColor(color);
	  coefficient = clamp$1(coefficient);

	  if (color.type.indexOf('hsl') !== -1) {
	    color.values[2] *= 1 - coefficient;
	  } else if (color.type.indexOf('rgb') !== -1) {
	    for (var i = 0; i < 3; i += 1) {
	      color.values[i] *= 1 - coefficient;
	    }
	  }

	  return recomposeColor(color);
	}
	/**
	 * Lightens a color.
	 *
	 * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
	 * @param {number} coefficient - multiplier in the range 0 - 1
	 * @returns {string} A CSS color string. Hex input values are returned as rgb
	 */

	function lighten(color, coefficient) {
	  color = decomposeColor(color);
	  coefficient = clamp$1(coefficient);

	  if (color.type.indexOf('hsl') !== -1) {
	    color.values[2] += (100 - color.values[2]) * coefficient;
	  } else if (color.type.indexOf('rgb') !== -1) {
	    for (var i = 0; i < 3; i += 1) {
	      color.values[i] += (255 - color.values[i]) * coefficient;
	    }
	  }

	  return recomposeColor(color);
	}

	function _defineProperty$1(obj, key, value) {
	  if (key in obj) {
	    Object.defineProperty(obj, key, {
	      value: value,
	      enumerable: true,
	      configurable: true,
	      writable: true
	    });
	  } else {
	    obj[key] = value;
	  }

	  return obj;
	}

	function _objectWithoutPropertiesLoose$1(source, excluded) {
	  if (source == null) return {};
	  var target = {};
	  var sourceKeys = Object.keys(source);
	  var key, i;

	  for (i = 0; i < sourceKeys.length; i++) {
	    key = sourceKeys[i];
	    if (excluded.indexOf(key) >= 0) continue;
	    target[key] = source[key];
	  }

	  return target;
	}

	function _objectWithoutProperties(source, excluded) {
	  if (source == null) return {};
	  var target = _objectWithoutPropertiesLoose$1(source, excluded);
	  var key, i;

	  if (Object.getOwnPropertySymbols) {
	    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

	    for (i = 0; i < sourceSymbolKeys.length; i++) {
	      key = sourceSymbolKeys[i];
	      if (excluded.indexOf(key) >= 0) continue;
	      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
	      target[key] = source[key];
	    }
	  }

	  return target;
	}

	function _extends$5() {
	  _extends$5 = Object.assign || function (target) {
	    for (var i = 1; i < arguments.length; i++) {
	      var source = arguments[i];

	      for (var key in source) {
	        if (Object.prototype.hasOwnProperty.call(source, key)) {
	          target[key] = source[key];
	        }
	      }
	    }

	    return target;
	  };

	  return _extends$5.apply(this, arguments);
	}

	// Sorted ASC by size. That's important.
	// It can't be configured as it's used statically for propTypes.
	var keys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification.

	function createBreakpoints(breakpoints) {
	  var _breakpoints$values = breakpoints.values,
	      values = _breakpoints$values === void 0 ? {
	    xs: 0,
	    sm: 600,
	    md: 960,
	    lg: 1280,
	    xl: 1920
	  } : _breakpoints$values,
	      _breakpoints$unit = breakpoints.unit,
	      unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit,
	      _breakpoints$step = breakpoints.step,
	      step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
	      other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);

	  function up(key) {
	    var value = typeof values[key] === 'number' ? values[key] : key;
	    return "@media (min-width:".concat(value).concat(unit, ")");
	  }

	  function down(key) {
	    var endIndex = keys.indexOf(key) + 1;
	    var upperbound = values[keys[endIndex]];

	    if (endIndex === keys.length) {
	      // xl down applies to all sizes
	      return up('xs');
	    }

	    var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
	    return "@media (max-width:".concat(value - step / 100).concat(unit, ")");
	  }

	  function between(start, end) {
	    var endIndex = keys.indexOf(end);

	    if (endIndex === keys.length - 1) {
	      return up(start);
	    }

	    return "@media (min-width:".concat(typeof values[start] === 'number' ? values[start] : start).concat(unit, ") and ") + "(max-width:".concat((endIndex !== -1 && typeof values[keys[endIndex + 1]] === 'number' ? values[keys[endIndex + 1]] : end) - step / 100).concat(unit, ")");
	  }

	  function only(key) {
	    return between(key, key);
	  }

	  function width(key) {

	    return values[key];
	  }

	  return _extends$5({
	    keys: keys,
	    values: values,
	    up: up,
	    down: down,
	    between: between,
	    only: only,
	    width: width
	  }, other);
	}

	function createMixins(breakpoints, spacing, mixins) {
	  var _toolbar;

	  return _extends$5({
	    gutters: function gutters() {
	      var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	      console.warn(['Material-UI: theme.mixins.gutters() is deprecated.', 'You can use the source of the mixin directly:', "\n      paddingLeft: theme.spacing(2),\n      paddingRight: theme.spacing(2),\n      [theme.breakpoints.up('sm')]: {\n        paddingLeft: theme.spacing(3),\n        paddingRight: theme.spacing(3),\n      },\n      "].join('\n'));
	      return _extends$5({
	        paddingLeft: spacing(2),
	        paddingRight: spacing(2)
	      }, styles, _defineProperty$1({}, breakpoints.up('sm'), _extends$5({
	        paddingLeft: spacing(3),
	        paddingRight: spacing(3)
	      }, styles[breakpoints.up('sm')])));
	    },
	    toolbar: (_toolbar = {
	      minHeight: 56
	    }, _defineProperty$1(_toolbar, "".concat(breakpoints.up('xs'), " and (orientation: landscape)"), {
	      minHeight: 48
	    }), _defineProperty$1(_toolbar, breakpoints.up('sm'), {
	      minHeight: 64
	    }), _toolbar)
	  }, mixins);
	}

	var common = {
	  black: '#000',
	  white: '#fff'
	};

	var grey = {
	  50: '#fafafa',
	  100: '#f5f5f5',
	  200: '#eeeeee',
	  300: '#e0e0e0',
	  400: '#bdbdbd',
	  500: '#9e9e9e',
	  600: '#757575',
	  700: '#616161',
	  800: '#424242',
	  900: '#212121',
	  A100: '#d5d5d5',
	  A200: '#aaaaaa',
	  A400: '#303030',
	  A700: '#616161'
	};

	var indigo = {
	  50: '#e8eaf6',
	  100: '#c5cae9',
	  200: '#9fa8da',
	  300: '#7986cb',
	  400: '#5c6bc0',
	  500: '#3f51b5',
	  600: '#3949ab',
	  700: '#303f9f',
	  800: '#283593',
	  900: '#1a237e',
	  A100: '#8c9eff',
	  A200: '#536dfe',
	  A400: '#3d5afe',
	  A700: '#304ffe'
	};

	var pink = {
	  50: '#fce4ec',
	  100: '#f8bbd0',
	  200: '#f48fb1',
	  300: '#f06292',
	  400: '#ec407a',
	  500: '#e91e63',
	  600: '#d81b60',
	  700: '#c2185b',
	  800: '#ad1457',
	  900: '#880e4f',
	  A100: '#ff80ab',
	  A200: '#ff4081',
	  A400: '#f50057',
	  A700: '#c51162'
	};

	var red = {
	  50: '#ffebee',
	  100: '#ffcdd2',
	  200: '#ef9a9a',
	  300: '#e57373',
	  400: '#ef5350',
	  500: '#f44336',
	  600: '#e53935',
	  700: '#d32f2f',
	  800: '#c62828',
	  900: '#b71c1c',
	  A100: '#ff8a80',
	  A200: '#ff5252',
	  A400: '#ff1744',
	  A700: '#d50000'
	};

	var orange = {
	  50: '#fff3e0',
	  100: '#ffe0b2',
	  200: '#ffcc80',
	  300: '#ffb74d',
	  400: '#ffa726',
	  500: '#ff9800',
	  600: '#fb8c00',
	  700: '#f57c00',
	  800: '#ef6c00',
	  900: '#e65100',
	  A100: '#ffd180',
	  A200: '#ffab40',
	  A400: '#ff9100',
	  A700: '#ff6d00'
	};

	var blue = {
	  50: '#e3f2fd',
	  100: '#bbdefb',
	  200: '#90caf9',
	  300: '#64b5f6',
	  400: '#42a5f5',
	  500: '#2196f3',
	  600: '#1e88e5',
	  700: '#1976d2',
	  800: '#1565c0',
	  900: '#0d47a1',
	  A100: '#82b1ff',
	  A200: '#448aff',
	  A400: '#2979ff',
	  A700: '#2962ff'
	};

	var green = {
	  50: '#e8f5e9',
	  100: '#c8e6c9',
	  200: '#a5d6a7',
	  300: '#81c784',
	  400: '#66bb6a',
	  500: '#4caf50',
	  600: '#43a047',
	  700: '#388e3c',
	  800: '#2e7d32',
	  900: '#1b5e20',
	  A100: '#b9f6ca',
	  A200: '#69f0ae',
	  A400: '#00e676',
	  A700: '#00c853'
	};

	var light$1 = {
	  // The colors used to style the text.
	  text: {
	    // The most important text.
	    primary: 'rgba(0, 0, 0, 0.87)',
	    // Secondary text.
	    secondary: 'rgba(0, 0, 0, 0.54)',
	    // Disabled text have even lower visual prominence.
	    disabled: 'rgba(0, 0, 0, 0.38)',
	    // Text hints.
	    hint: 'rgba(0, 0, 0, 0.38)'
	  },
	  // The color used to divide different elements.
	  divider: 'rgba(0, 0, 0, 0.12)',
	  // The background colors used to style the surfaces.
	  // Consistency between these values is important.
	  background: {
	    paper: common.white,
	    default: grey[50]
	  },
	  // The colors used to style the action elements.
	  action: {
	    // The color of an active action like an icon button.
	    active: 'rgba(0, 0, 0, 0.54)',
	    // The color of an hovered action.
	    hover: 'rgba(0, 0, 0, 0.04)',
	    hoverOpacity: 0.04,
	    // The color of a selected action.
	    selected: 'rgba(0, 0, 0, 0.08)',
	    selectedOpacity: 0.08,
	    // The color of a disabled action.
	    disabled: 'rgba(0, 0, 0, 0.26)',
	    // The background color of a disabled action.
	    disabledBackground: 'rgba(0, 0, 0, 0.12)',
	    disabledOpacity: 0.38,
	    focus: 'rgba(0, 0, 0, 0.12)',
	    focusOpacity: 0.12,
	    activatedOpacity: 0.12
	  }
	};
	var dark$1 = {
	  text: {
	    primary: common.white,
	    secondary: 'rgba(255, 255, 255, 0.7)',
	    disabled: 'rgba(255, 255, 255, 0.5)',
	    hint: 'rgba(255, 255, 255, 0.5)',
	    icon: 'rgba(255, 255, 255, 0.5)'
	  },
	  divider: 'rgba(255, 255, 255, 0.12)',
	  background: {
	    paper: grey[800],
	    default: '#303030'
	  },
	  action: {
	    active: common.white,
	    hover: 'rgba(255, 255, 255, 0.08)',
	    hoverOpacity: 0.08,
	    selected: 'rgba(255, 255, 255, 0.16)',
	    selectedOpacity: 0.16,
	    disabled: 'rgba(255, 255, 255, 0.3)',
	    disabledBackground: 'rgba(255, 255, 255, 0.12)',
	    disabledOpacity: 0.38,
	    focus: 'rgba(255, 255, 255, 0.12)',
	    focusOpacity: 0.12,
	    activatedOpacity: 0.24
	  }
	};

	function addLightOrDark(intent, direction, shade, tonalOffset) {
	  var tonalOffsetLight = tonalOffset.light || tonalOffset;
	  var tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;

	  if (!intent[direction]) {
	    if (intent.hasOwnProperty(shade)) {
	      intent[direction] = intent[shade];
	    } else if (direction === 'light') {
	      intent.light = lighten(intent.main, tonalOffsetLight);
	    } else if (direction === 'dark') {
	      intent.dark = darken(intent.main, tonalOffsetDark);
	    }
	  }
	}

	function createPalette(palette) {
	  var _palette$primary = palette.primary,
	      primary = _palette$primary === void 0 ? {
	    light: indigo[300],
	    main: indigo[500],
	    dark: indigo[700]
	  } : _palette$primary,
	      _palette$secondary = palette.secondary,
	      secondary = _palette$secondary === void 0 ? {
	    light: pink.A200,
	    main: pink.A400,
	    dark: pink.A700
	  } : _palette$secondary,
	      _palette$error = palette.error,
	      error = _palette$error === void 0 ? {
	    light: red[300],
	    main: red[500],
	    dark: red[700]
	  } : _palette$error,
	      _palette$warning = palette.warning,
	      warning = _palette$warning === void 0 ? {
	    light: orange[300],
	    main: orange[500],
	    dark: orange[700]
	  } : _palette$warning,
	      _palette$info = palette.info,
	      info = _palette$info === void 0 ? {
	    light: blue[300],
	    main: blue[500],
	    dark: blue[700]
	  } : _palette$info,
	      _palette$success = palette.success,
	      success = _palette$success === void 0 ? {
	    light: green[300],
	    main: green[500],
	    dark: green[700]
	  } : _palette$success,
	      _palette$type = palette.type,
	      type = _palette$type === void 0 ? 'light' : _palette$type,
	      _palette$contrastThre = palette.contrastThreshold,
	      contrastThreshold = _palette$contrastThre === void 0 ? 3 : _palette$contrastThre,
	      _palette$tonalOffset = palette.tonalOffset,
	      tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
	      other = _objectWithoutProperties(palette, ["primary", "secondary", "error", "warning", "info", "success", "type", "contrastThreshold", "tonalOffset"]); // Use the same logic as
	  // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
	  // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54


	  function getContrastText(background) {
	    var contrastText = getContrastRatio(background, dark$1.text.primary) >= contrastThreshold ? dark$1.text.primary : light$1.text.primary;

	    return contrastText;
	  }

	  var augmentColor = function augmentColor(color) {
	    var mainShade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
	    var lightShade = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
	    var darkShade = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 700;
	    color = _extends$5({}, color);

	    if (!color.main && color[mainShade]) {
	      color.main = color[mainShade];
	    }

	    if (!color.main) {
	      throw new Error(formatMuiErrorMessage(4, mainShade));
	    }

	    if (typeof color.main !== 'string') {
	      throw new Error(formatMuiErrorMessage(5, JSON.stringify(color.main)));
	    }

	    addLightOrDark(color, 'light', lightShade, tonalOffset);
	    addLightOrDark(color, 'dark', darkShade, tonalOffset);

	    if (!color.contrastText) {
	      color.contrastText = getContrastText(color.main);
	    }

	    return color;
	  };

	  var types = {
	    dark: dark$1,
	    light: light$1
	  };

	  var paletteOutput = deepmerge(_extends$5({
	    // A collection of common colors.
	    common: common,
	    // The palette type, can be light or dark.
	    type: type,
	    // The colors used to represent primary interface elements for a user.
	    primary: augmentColor(primary),
	    // The colors used to represent secondary interface elements for a user.
	    secondary: augmentColor(secondary, 'A400', 'A200', 'A700'),
	    // The colors used to represent interface elements that the user should be made aware of.
	    error: augmentColor(error),
	    // The colors used to represent potentially dangerous actions or important messages.
	    warning: augmentColor(warning),
	    // The colors used to present information to the user that is neutral and not necessarily important.
	    info: augmentColor(info),
	    // The colors used to indicate the successful completion of an action that user triggered.
	    success: augmentColor(success),
	    // The grey colors.
	    grey: grey,
	    // Used by `getContrastText()` to maximize the contrast between
	    // the background and the text.
	    contrastThreshold: contrastThreshold,
	    // Takes a background color and returns the text color that maximizes the contrast.
	    getContrastText: getContrastText,
	    // Generate a rich color object.
	    augmentColor: augmentColor,
	    // Used by the functions below to shift a color's luminance by approximately
	    // two indexes within its tonal palette.
	    // E.g., shift from Red 500 to Red 300 or Red 700.
	    tonalOffset: tonalOffset
	  }, types[type]), other);
	  return paletteOutput;
	}

	function round$1(value) {
	  return Math.round(value * 1e5) / 1e5;
	}

	function roundWithDeprecationWarning(value) {

	  return round$1(value);
	}

	var caseAllCaps = {
	  textTransform: 'uppercase'
	};
	var defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
	/**
	 * @see @link{https://material.io/design/typography/the-type-system.html}
	 * @see @link{https://material.io/design/typography/understanding-typography.html}
	 */

	function createTypography(palette, typography) {
	  var _ref = typeof typography === 'function' ? typography(palette) : typography,
	      _ref$fontFamily = _ref.fontFamily,
	      fontFamily = _ref$fontFamily === void 0 ? defaultFontFamily : _ref$fontFamily,
	      _ref$fontSize = _ref.fontSize,
	      fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
	      _ref$fontWeightLight = _ref.fontWeightLight,
	      fontWeightLight = _ref$fontWeightLight === void 0 ? 300 : _ref$fontWeightLight,
	      _ref$fontWeightRegula = _ref.fontWeightRegular,
	      fontWeightRegular = _ref$fontWeightRegula === void 0 ? 400 : _ref$fontWeightRegula,
	      _ref$fontWeightMedium = _ref.fontWeightMedium,
	      fontWeightMedium = _ref$fontWeightMedium === void 0 ? 500 : _ref$fontWeightMedium,
	      _ref$fontWeightBold = _ref.fontWeightBold,
	      fontWeightBold = _ref$fontWeightBold === void 0 ? 700 : _ref$fontWeightBold,
	      _ref$htmlFontSize = _ref.htmlFontSize,
	      htmlFontSize = _ref$htmlFontSize === void 0 ? 16 : _ref$htmlFontSize,
	      allVariants = _ref.allVariants,
	      pxToRem2 = _ref.pxToRem,
	      other = _objectWithoutProperties(_ref, ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"]);

	  var coef = fontSize / 14;

	  var pxToRem = pxToRem2 || function (size) {
	    return "".concat(size / htmlFontSize * coef, "rem");
	  };

	  var buildVariant = function buildVariant(fontWeight, size, lineHeight, letterSpacing, casing) {
	    return _extends$5({
	      fontFamily: fontFamily,
	      fontWeight: fontWeight,
	      fontSize: pxToRem(size),
	      // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
	      lineHeight: lineHeight
	    }, fontFamily === defaultFontFamily ? {
	      letterSpacing: "".concat(round$1(letterSpacing / size), "em")
	    } : {}, casing, allVariants);
	  };

	  var variants = {
	    h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
	    h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
	    h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
	    h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
	    h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
	    h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
	    subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
	    subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
	    body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
	    body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
	    button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
	    caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
	    overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
	  };
	  return deepmerge(_extends$5({
	    htmlFontSize: htmlFontSize,
	    pxToRem: pxToRem,
	    round: roundWithDeprecationWarning,
	    // TODO v5: remove
	    fontFamily: fontFamily,
	    fontSize: fontSize,
	    fontWeightLight: fontWeightLight,
	    fontWeightRegular: fontWeightRegular,
	    fontWeightMedium: fontWeightMedium,
	    fontWeightBold: fontWeightBold
	  }, variants), other, {
	    clone: false // No need to clone deep

	  });
	}

	var shadowKeyUmbraOpacity = 0.2;
	var shadowKeyPenumbraOpacity = 0.14;
	var shadowAmbientShadowOpacity = 0.12;

	function createShadow() {
	  return ["".concat(arguments.length <= 0 ? undefined : arguments[0], "px ").concat(arguments.length <= 1 ? undefined : arguments[1], "px ").concat(arguments.length <= 2 ? undefined : arguments[2], "px ").concat(arguments.length <= 3 ? undefined : arguments[3], "px rgba(0,0,0,").concat(shadowKeyUmbraOpacity, ")"), "".concat(arguments.length <= 4 ? undefined : arguments[4], "px ").concat(arguments.length <= 5 ? undefined : arguments[5], "px ").concat(arguments.length <= 6 ? undefined : arguments[6], "px ").concat(arguments.length <= 7 ? undefined : arguments[7], "px rgba(0,0,0,").concat(shadowKeyPenumbraOpacity, ")"), "".concat(arguments.length <= 8 ? undefined : arguments[8], "px ").concat(arguments.length <= 9 ? undefined : arguments[9], "px ").concat(arguments.length <= 10 ? undefined : arguments[10], "px ").concat(arguments.length <= 11 ? undefined : arguments[11], "px rgba(0,0,0,").concat(shadowAmbientShadowOpacity, ")")].join(',');
	} // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss


	var shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];

	var shape = {
	  borderRadius: 4
	};

	function _defineProperty(obj, key, value) {
	  if (key in obj) {
	    Object.defineProperty(obj, key, {
	      value: value,
	      enumerable: true,
	      configurable: true,
	      writable: true
	    });
	  } else {
	    obj[key] = value;
	  }

	  return obj;
	}

	function _arrayWithoutHoles$1(arr) {
	  if (Array.isArray(arr)) {
	    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
	      arr2[i] = arr[i];
	    }

	    return arr2;
	  }
	}

	function _iterableToArray$1(iter) {
	  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
	}

	function _nonIterableSpread$1() {
	  throw new TypeError("Invalid attempt to spread non-iterable instance");
	}

	function _toConsumableArray$1(arr) {
	  return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _nonIterableSpread$1();
	}

	function _extends$4() {
	  _extends$4 = Object.assign || function (target) {
	    for (var i = 1; i < arguments.length; i++) {
	      var source = arguments[i];

	      for (var key in source) {
	        if (Object.prototype.hasOwnProperty.call(source, key)) {
	          target[key] = source[key];
	        }
	      }
	    }

	    return target;
	  };

	  return _extends$4.apply(this, arguments);
	}

	function _typeof2$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2$1 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2$1 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2$1(obj); }

	function _typeof$1(obj) {
	  if (typeof Symbol === "function" && _typeof2$1(Symbol.iterator) === "symbol") {
	    _typeof$1 = function _typeof(obj) {
	      return _typeof2$1(obj);
	    };
	  } else {
	    _typeof$1 = function _typeof(obj) {
	      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2$1(obj);
	    };
	  }

	  return _typeof$1(obj);
	}

	function merge(acc, item) {
	  if (!item) {
	    return acc;
	  }

	  return deepmerge(acc, item, {
	    clone: false // No need to clone deep, it's way faster.

	  });
	}

	// For instance with the first breakpoint xs: [xs, sm[.

	var values$1 = {
	  xs: 0,
	  sm: 600,
	  md: 960,
	  lg: 1280,
	  xl: 1920
	};
	var defaultBreakpoints = {
	  // Sorted ASC by size. That's important.
	  // It can't be configured as it's used statically for propTypes.
	  keys: ['xs', 'sm', 'md', 'lg', 'xl'],
	  up: function up(key) {
	    return "@media (min-width:".concat(values$1[key], "px)");
	  }
	};
	function handleBreakpoints(props, propValue, styleFromPropValue) {

	  if (Array.isArray(propValue)) {
	    var themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
	    return propValue.reduce(function (acc, item, index) {
	      acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
	      return acc;
	    }, {});
	  }

	  if (_typeof$1(propValue) === 'object') {
	    var _themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;

	    return Object.keys(propValue).reduce(function (acc, breakpoint) {
	      acc[_themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
	      return acc;
	    }, {});
	  }

	  var output = styleFromPropValue(propValue);
	  return output;
	}

	function getPath$1(obj, path) {
	  if (!path || typeof path !== 'string') {
	    return null;
	  }

	  return path.split('.').reduce(function (acc, item) {
	    return acc && acc[item] ? acc[item] : null;
	  }, obj);
	}

	function style(options) {
	  var prop = options.prop,
	      _options$cssProperty = options.cssProperty,
	      cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,
	      themeKey = options.themeKey,
	      transform = options.transform;

	  var fn = function fn(props) {
	    if (props[prop] == null) {
	      return null;
	    }

	    var propValue = props[prop];
	    var theme = props.theme;
	    var themeMapping = getPath$1(theme, themeKey) || {};

	    var styleFromPropValue = function styleFromPropValue(propValueFinal) {
	      var value;

	      if (typeof themeMapping === 'function') {
	        value = themeMapping(propValueFinal);
	      } else if (Array.isArray(themeMapping)) {
	        value = themeMapping[propValueFinal] || propValueFinal;
	      } else {
	        value = getPath$1(themeMapping, propValueFinal) || propValueFinal;

	        if (transform) {
	          value = transform(value);
	        }
	      }

	      if (cssProperty === false) {
	        return value;
	      }

	      return _defineProperty({}, cssProperty, value);
	    };

	    return handleBreakpoints(props, propValue, styleFromPropValue);
	  };

	  fn.propTypes = {};
	  fn.filterProps = [prop];
	  return fn;
	}

	function compose() {
	  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
	    styles[_key] = arguments[_key];
	  }

	  var fn = function fn(props) {
	    return styles.reduce(function (acc, style) {
	      var output = style(props);

	      if (output) {
	        return merge(acc, output);
	      }

	      return acc;
	    }, {});
	  }; // Alternative approach that doesn't yield any performance gain.
	  // const handlers = styles.reduce((acc, style) => {
	  //   style.filterProps.forEach(prop => {
	  //     acc[prop] = style;
	  //   });
	  //   return acc;
	  // }, {});
	  // const fn = props => {
	  //   return Object.keys(props).reduce((acc, prop) => {
	  //     if (handlers[prop]) {
	  //       return merge(acc, handlers[prop](props));
	  //     }
	  //     return acc;
	  //   }, {});
	  // };


	  fn.propTypes = {};
	  fn.filterProps = styles.reduce(function (acc, style) {
	    return acc.concat(style.filterProps);
	  }, []);
	  return fn;
	}

	function getBorder(value) {
	  if (typeof value !== 'number') {
	    return value;
	  }

	  return "".concat(value, "px solid");
	}

	var border = style({
	  prop: 'border',
	  themeKey: 'borders',
	  transform: getBorder
	});
	var borderTop = style({
	  prop: 'borderTop',
	  themeKey: 'borders',
	  transform: getBorder
	});
	var borderRight = style({
	  prop: 'borderRight',
	  themeKey: 'borders',
	  transform: getBorder
	});
	var borderBottom = style({
	  prop: 'borderBottom',
	  themeKey: 'borders',
	  transform: getBorder
	});
	var borderLeft = style({
	  prop: 'borderLeft',
	  themeKey: 'borders',
	  transform: getBorder
	});
	var borderColor = style({
	  prop: 'borderColor',
	  themeKey: 'palette'
	});
	var borderRadius$1 = style({
	  prop: 'borderRadius',
	  themeKey: 'shape'
	});
	var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius$1);

	function omit(input, fields) {
	  var output = {};
	  Object.keys(input).forEach(function (prop) {
	    if (fields.indexOf(prop) === -1) {
	      output[prop] = input[prop];
	    }
	  });
	  return output;
	}

	function styleFunctionSx(styleFunction) {
	  var newStyleFunction = function newStyleFunction(props) {
	    var output = styleFunction(props);

	    if (props.css) {
	      return _extends$4({}, merge(output, styleFunction(_extends$4({
	        theme: props.theme
	      }, props.css))), omit(props.css, [styleFunction.filterProps]));
	    }

	    if (props.sx) {
	      return _extends$4({}, merge(output, styleFunction(_extends$4({
	        theme: props.theme
	      }, props.sx))), omit(props.sx, [styleFunction.filterProps]));
	    }

	    return output;
	  };

	  newStyleFunction.propTypes = {};
	  newStyleFunction.filterProps = ['css', 'sx'].concat(_toConsumableArray$1(styleFunction.filterProps));
	  return newStyleFunction;
	}

	var displayPrint = style({
	  prop: 'displayPrint',
	  cssProperty: false,
	  transform: function transform(value) {
	    return {
	      '@media print': {
	        display: value
	      }
	    };
	  }
	});
	var displayRaw = style({
	  prop: 'display'
	});
	var overflow = style({
	  prop: 'overflow'
	});
	var textOverflow = style({
	  prop: 'textOverflow'
	});
	var visibility = style({
	  prop: 'visibility'
	});
	var whiteSpace = style({
	  prop: 'whiteSpace'
	});
	var display = compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);

	var flexBasis = style({
	  prop: 'flexBasis'
	});
	var flexDirection = style({
	  prop: 'flexDirection'
	});
	var flexWrap = style({
	  prop: 'flexWrap'
	});
	var justifyContent = style({
	  prop: 'justifyContent'
	});
	var alignItems = style({
	  prop: 'alignItems'
	});
	var alignContent = style({
	  prop: 'alignContent'
	});
	var order = style({
	  prop: 'order'
	});
	var flex = style({
	  prop: 'flex'
	});
	var flexGrow = style({
	  prop: 'flexGrow'
	});
	var flexShrink = style({
	  prop: 'flexShrink'
	});
	var alignSelf = style({
	  prop: 'alignSelf'
	});
	var justifyItems = style({
	  prop: 'justifyItems'
	});
	var justifySelf = style({
	  prop: 'justifySelf'
	});
	var flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);

	var gridGap = style({
	  prop: 'gridGap'
	});
	var gridColumnGap = style({
	  prop: 'gridColumnGap'
	});
	var gridRowGap = style({
	  prop: 'gridRowGap'
	});
	var gridColumn = style({
	  prop: 'gridColumn'
	});
	var gridRow = style({
	  prop: 'gridRow'
	});
	var gridAutoFlow = style({
	  prop: 'gridAutoFlow'
	});
	var gridAutoColumns = style({
	  prop: 'gridAutoColumns'
	});
	var gridAutoRows = style({
	  prop: 'gridAutoRows'
	});
	var gridTemplateColumns = style({
	  prop: 'gridTemplateColumns'
	});
	var gridTemplateRows = style({
	  prop: 'gridTemplateRows'
	});
	var gridTemplateAreas = style({
	  prop: 'gridTemplateAreas'
	});
	var gridArea = style({
	  prop: 'gridArea'
	});
	var grid = compose(gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);

	var color = style({
	  prop: 'color',
	  themeKey: 'palette'
	});
	var bgcolor = style({
	  prop: 'bgcolor',
	  cssProperty: 'backgroundColor',
	  themeKey: 'palette'
	});
	var palette = compose(color, bgcolor);

	var position = style({
	  prop: 'position'
	});
	var zIndex$1 = style({
	  prop: 'zIndex',
	  themeKey: 'zIndex'
	});
	var top = style({
	  prop: 'top'
	});
	var right = style({
	  prop: 'right'
	});
	var bottom = style({
	  prop: 'bottom'
	});
	var left = style({
	  prop: 'left'
	});
	var positions = compose(position, zIndex$1, top, right, bottom, left);

	var boxShadow = style({
	  prop: 'boxShadow',
	  themeKey: 'shadows'
	});

	function transform(value) {
	  return value <= 1 ? "".concat(value * 100, "%") : value;
	}

	var width = style({
	  prop: 'width',
	  transform: transform
	});
	var maxWidth = style({
	  prop: 'maxWidth',
	  transform: transform
	});
	var minWidth = style({
	  prop: 'minWidth',
	  transform: transform
	});
	var height = style({
	  prop: 'height',
	  transform: transform
	});
	var maxHeight = style({
	  prop: 'maxHeight',
	  transform: transform
	});
	var minHeight = style({
	  prop: 'minHeight',
	  transform: transform
	});
	style({
	  prop: 'size',
	  cssProperty: 'width',
	  transform: transform
	});
	style({
	  prop: 'size',
	  cssProperty: 'height',
	  transform: transform
	});
	var boxSizing = style({
	  prop: 'boxSizing'
	});
	var sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);

	function _arrayWithHoles$1(arr) {
	  if (Array.isArray(arr)) return arr;
	}

	function _iterableToArrayLimit$1(arr, i) {
	  var _arr = [];
	  var _n = true;
	  var _d = false;
	  var _e = undefined;

	  try {
	    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
	      _arr.push(_s.value);

	      if (i && _arr.length === i) break;
	    }
	  } catch (err) {
	    _d = true;
	    _e = err;
	  } finally {
	    try {
	      if (!_n && _i["return"] != null) _i["return"]();
	    } finally {
	      if (_d) throw _e;
	    }
	  }

	  return _arr;
	}

	function _nonIterableRest$1() {
	  throw new TypeError("Invalid attempt to destructure non-iterable instance");
	}

	function _slicedToArray$1(arr, i) {
	  return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1();
	}

	function memoize(fn) {
	  var cache = {};
	  return function (arg) {
	    if (cache[arg] === undefined) {
	      cache[arg] = fn(arg);
	    }

	    return cache[arg];
	  };
	}

	var properties = {
	  m: 'margin',
	  p: 'padding'
	};
	var directions = {
	  t: 'Top',
	  r: 'Right',
	  b: 'Bottom',
	  l: 'Left',
	  x: ['Left', 'Right'],
	  y: ['Top', 'Bottom']
	};
	var aliases = {
	  marginX: 'mx',
	  marginY: 'my',
	  paddingX: 'px',
	  paddingY: 'py'
	}; // memoize() impact:
	// From 300,000 ops/sec
	// To 350,000 ops/sec

	var getCssProperties = memoize(function (prop) {
	  // It's not a shorthand notation.
	  if (prop.length > 2) {
	    if (aliases[prop]) {
	      prop = aliases[prop];
	    } else {
	      return [prop];
	    }
	  }

	  var _prop$split = prop.split(''),
	      _prop$split2 = _slicedToArray$1(_prop$split, 2),
	      a = _prop$split2[0],
	      b = _prop$split2[1];

	  var property = properties[a];
	  var direction = directions[b] || '';
	  return Array.isArray(direction) ? direction.map(function (dir) {
	    return property + dir;
	  }) : [property + direction];
	});
	var spacingKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY'];
	function createUnarySpacing(theme) {
	  var themeSpacing = theme.spacing || 8;

	  if (typeof themeSpacing === 'number') {
	    return function (abs) {

	      return themeSpacing * abs;
	    };
	  }

	  if (Array.isArray(themeSpacing)) {
	    return function (abs) {

	      return themeSpacing[abs];
	    };
	  }

	  if (typeof themeSpacing === 'function') {
	    return themeSpacing;
	  }

	  return function () {
	    return undefined;
	  };
	}

	function getValue$1(transformer, propValue) {
	  if (typeof propValue === 'string' || propValue == null) {
	    return propValue;
	  }

	  var abs = Math.abs(propValue);
	  var transformed = transformer(abs);

	  if (propValue >= 0) {
	    return transformed;
	  }

	  if (typeof transformed === 'number') {
	    return -transformed;
	  }

	  return "-".concat(transformed);
	}

	function getStyleFromPropValue(cssProperties, transformer) {
	  return function (propValue) {
	    return cssProperties.reduce(function (acc, cssProperty) {
	      acc[cssProperty] = getValue$1(transformer, propValue);
	      return acc;
	    }, {});
	  };
	}

	function spacing(props) {
	  var theme = props.theme;
	  var transformer = createUnarySpacing(theme);
	  return Object.keys(props).map(function (prop) {
	    // Using a hash computation over an array iteration could be faster, but with only 28 items,
	    // it's doesn't worth the bundle size.
	    if (spacingKeys.indexOf(prop) === -1) {
	      return null;
	    }

	    var cssProperties = getCssProperties(prop);
	    var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
	    var propValue = props[prop];
	    return handleBreakpoints(props, propValue, styleFromPropValue);
	  }).reduce(merge, {});
	}

	spacing.propTypes = {};
	spacing.filterProps = spacingKeys;

	var fontFamily = style({
	  prop: 'fontFamily',
	  themeKey: 'typography'
	});
	var fontSize = style({
	  prop: 'fontSize',
	  themeKey: 'typography'
	});
	var fontStyle = style({
	  prop: 'fontStyle',
	  themeKey: 'typography'
	});
	var fontWeight = style({
	  prop: 'fontWeight',
	  themeKey: 'typography'
	});
	var letterSpacing = style({
	  prop: 'letterSpacing'
	});
	var lineHeight = style({
	  prop: 'lineHeight'
	});
	var textAlign = style({
	  prop: 'textAlign'
	});
	var typography = compose(fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);

	function createSpacing() {
	  var spacingInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8;

	  // Already transformed.
	  if (spacingInput.mui) {
	    return spacingInput;
	  } // Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout.
	  // Smaller components, such as icons and type, can align to a 4dp grid.
	  // https://material.io/design/layout/understanding-layout.html#usage


	  var transform = createUnarySpacing({
	    spacing: spacingInput
	  });

	  var spacing = function spacing() {
	    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
	      args[_key] = arguments[_key];
	    }

	    if (args.length === 0) {
	      return transform(1);
	    }

	    if (args.length === 1) {
	      return transform(args[0]);
	    }

	    return args.map(function (argument) {
	      if (typeof argument === 'string') {
	        return argument;
	      }

	      var output = transform(argument);
	      return typeof output === 'number' ? "".concat(output, "px") : output;
	    }).join(' ');
	  }; // Backward compatibility, to remove in v5.


	  Object.defineProperty(spacing, 'unit', {
	    get: function get() {

	      return spacingInput;
	    }
	  });
	  spacing.mui = true;
	  return spacing;
	}

	// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
	// to learn the context in which each easing should be used.
	var easing = {
	  // This is the most common easing curve.
	  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
	  // Objects enter the screen at full velocity from off-screen and
	  // slowly decelerate to a resting point.
	  easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
	  // Objects leave the screen at full velocity. They do not decelerate when off-screen.
	  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
	  // The sharp curve is used by objects that may return to the screen at any time.
	  sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
	}; // Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
	// to learn when use what timing

	var duration = {
	  shortest: 150,
	  shorter: 200,
	  short: 250,
	  // most basic recommended timing
	  standard: 300,
	  // this is to be used in complex animations
	  complex: 375,
	  // recommended when something is entering screen
	  enteringScreen: 225,
	  // recommended when something is leaving screen
	  leavingScreen: 195
	};

	function formatMs(milliseconds) {
	  return "".concat(Math.round(milliseconds), "ms");
	}
	/**
	 * @param {string|Array} props
	 * @param {object} param
	 * @param {string} param.prop
	 * @param {number} param.duration
	 * @param {string} param.easing
	 * @param {number} param.delay
	 */


	var transitions = {
	  easing: easing,
	  duration: duration,
	  create: function create() {
	    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['all'];
	    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

	    var _options$duration = options.duration,
	        durationOption = _options$duration === void 0 ? duration.standard : _options$duration,
	        _options$easing = options.easing,
	        easingOption = _options$easing === void 0 ? easing.easeInOut : _options$easing,
	        _options$delay = options.delay,
	        delay = _options$delay === void 0 ? 0 : _options$delay;
	        _objectWithoutProperties(options, ["duration", "easing", "delay"]);

	    return (Array.isArray(props) ? props : [props]).map(function (animatedProp) {
	      return "".concat(animatedProp, " ").concat(typeof durationOption === 'string' ? durationOption : formatMs(durationOption), " ").concat(easingOption, " ").concat(typeof delay === 'string' ? delay : formatMs(delay));
	    }).join(',');
	  },
	  getAutoHeightDuration: function getAutoHeightDuration(height) {
	    if (!height) {
	      return 0;
	    }

	    var constant = height / 36; // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10

	    return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10);
	  }
	};

	// We need to centralize the zIndex definitions as they work
	// like global values in the browser.
	var zIndex = {
	  mobileStepper: 1000,
	  speedDial: 1050,
	  appBar: 1100,
	  drawer: 1200,
	  modal: 1300,
	  snackbar: 1400,
	  tooltip: 1500
	};

	function createTheme() {
	  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

	  var _options$breakpoints = options.breakpoints,
	      breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
	      _options$mixins = options.mixins,
	      mixinsInput = _options$mixins === void 0 ? {} : _options$mixins,
	      _options$palette = options.palette,
	      paletteInput = _options$palette === void 0 ? {} : _options$palette,
	      spacingInput = options.spacing,
	      _options$typography = options.typography,
	      typographyInput = _options$typography === void 0 ? {} : _options$typography,
	      other = _objectWithoutProperties(options, ["breakpoints", "mixins", "palette", "spacing", "typography"]);

	  var palette = createPalette(paletteInput);
	  var breakpoints = createBreakpoints(breakpointsInput);
	  var spacing = createSpacing(spacingInput);
	  var muiTheme = deepmerge({
	    breakpoints: breakpoints,
	    direction: 'ltr',
	    mixins: createMixins(breakpoints, spacing, mixinsInput),
	    overrides: {},
	    // Inject custom styles
	    palette: palette,
	    props: {},
	    // Provide default props
	    shadows: shadows,
	    typography: createTypography(palette, typographyInput),
	    spacing: spacing,
	    shape: shape,
	    transitions: transitions,
	    zIndex: zIndex
	  }, other);

	  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
	    args[_key - 1] = arguments[_key];
	  }

	  muiTheme = args.reduce(function (acc, argument) {
	    return deepmerge(acc, argument);
	  }, muiTheme);

	  return muiTheme;
	}

	var defaultTheme = createTheme();

	function makeStyles(stylesOrCreator) {
	  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
	  return makeStyles$1(stylesOrCreator, _extends$5({
	    defaultTheme: defaultTheme
	  }, options));
	}

	var styled = function styled(Component) {
	  var componentCreator = styled$1(Component);
	  return function (style, options) {
	    return componentCreator(style, _extends$5({
	      defaultTheme: defaultTheme
	    }, options));
	  };
	};

	function useTheme$1() {
	  var theme = useTheme$2() || defaultTheme;

	  return theme;
	}

	function withStyles(stylesOrCreator, options) {
	  return withStyles$1(stylesOrCreator, _extends$5({
	    defaultTheme: defaultTheme
	  }, options));
	}

	withThemeCreator({
	  defaultTheme: defaultTheme
	});

	var base = {
	  typography: {
	    fontSize: 14,
	    htmlFontSize: 16,
	    fontWeightLight: 300,
	    fontWeightRegular: 400,
	    fontWeightMedium: 600,
	    fontFamily: ['"Source Sans Pro"', '"Segoe UI"', '"Helvetica Neue"', '-apple-system', 'Arial', 'sans-serif'].join(','),
	    button: {
	      textTransform: 'initial',
	      fontWeight: 400
	    }
	  },
	  shape: {
	    borderRadius: 2
	  },
	  shadows: ['none', '0px 1px 2px 0px rgba(0,0,0,0.15)', '0px 1px 2px 0px rgba(0,0,0,0.15)', '0px 1px 2px 0px rgba(0,0,0,0.15)', '0px 1px 2px 0px rgba(0,0,0,0.15)', '0px 1px 2px 0px rgba(0,0,0,0.15)', '0px 1px 2px 0px rgba(0,0,0,0.15)', '0px 2px 4px 0px rgba(0,0,0,0.15)', '0px 2px 4px 0px rgba(0,0,0,0.15)', '0px 2px 4px 0px rgba(0,0,0,0.15)', '0px 2px 4px 0px rgba(0,0,0,0.15)', '0px 2px 4px 0px rgba(0,0,0,0.15)', '0px 2px 4px 0px rgba(0,0,0,0.15)', '0px 4px 10px 0px rgba(0,0,0,0.15)', '0px 4px 10px 0px rgba(0,0,0,0.15)', '0px 4px 10px 0px rgba(0,0,0,0.15)', '0px 4px 10px 0px rgba(0,0,0,0.15)', '0px 4px 10px 0px rgba(0,0,0,0.15)', '0px 4px 10px 0px rgba(0,0,0,0.15)', '0px 6px 20px 0px rgba(0,0,0,0.15)', '0px 6px 20px 0px rgba(0,0,0,0.15)', '0px 6px 20px 0px rgba(0,0,0,0.15)', '0px 6px 20px 0px rgba(0,0,0,0.15)', '0px 6px 20px 0px rgba(0,0,0,0.15)', '0px 6px 20px 0px rgba(0,0,0,0.15)'],
	  props: {
	    MuiButtonBase: {
	      disableRipple: true,
	      disableTouchRipple: true,
	      focusRipple: false
	    }
	  }
	};

	const colors = {
	  green: '#009845',
	  greenPale: '#0AAF54',
	  red: '#DC423F',
	  redPale: '#F05551',
	  blue: '#3F8AB3',
	  bluePale: '#469DCD',
	  // greyscale
	  grey100: '#ffffff',
	  grey98: '#FBFBFB',
	  grey95: '#F2F2F2',
	  grey90: '#E6E6E6',
	  grey85: '#D9D9D9',
	  grey55: '#8C8C8C',
	  grey30: '#4D4D4D',
	  grey25: '#404040',
	  grey20: '#333333',
	  grey15: '#262626',
	  grey10: '#1A1A1A',
	  grey5: '#0E0E0E',
	  grey0: '#000000'
	};

	const light = {
	  type: 'light',
	  palette: {
	    primary: {
	      main: colors.grey25,
	      contrastText: colors.grey100
	    },
	    secondary: {
	      light: '#0AAF54',
	      main: '#009845',
	      dark: '#006937'
	    },
	    text: {
	      primary: colors.grey25,
	      secondary: 'rgba(0, 0, 0, 0.55)',
	      disabled: 'rgba(0, 0, 0, 0.3)'
	    },
	    action: {
	      active: colors.grey25,
	      // color for actionable things like icon buttons
	      hover: 'rgba(0, 0, 0, 0.03)',
	      // color for hoverable things like list items
	      hoverOpacity: 0.08,
	      // used to fade primary/secondary colors
	      selected: 'rgba(0, 0, 0, 0.05)',
	      // focused things like list items
	      disabled: 'rgba(0, 0, 0, 0.3)',
	      // usually text
	      disabledBackground: 'rgba(0, 0, 0, 0.12)'
	    },
	    background: {
	      paper: colors.grey100,
	      default: colors.grey100,
	      // -- custom properties --
	      lightest: colors.grey100,
	      lighter: colors.grey98,
	      darker: colors.grey95,
	      darkest: colors.grey90
	    },
	    // --- custom stuff ---
	    custom: {
	      focusBorder: colors.blue,
	      focusOutline: 'rgba(70, 157, 205, 0.3)',
	      inputBackground: 'rgba(255, 255, 255, 1)'
	    },
	    selected: {
	      main: colors.green,
	      alternative: '#E4E4E4',
	      excluded: '#BEBEBE',
	      mainContrastText: colors.grey100,
	      alternativeContrastText: colors.grey25,
	      excludedContrastText: colors.grey25
	    },
	    btn: {
	      normal: 'rgba(255, 255, 255, 0.6)',
	      hover: 'rgba(0, 0, 0, 0.03)',
	      active: 'rgba(0, 0, 0, 0.1)',
	      disabled: 'rgba(255, 255, 255, 0.6)',
	      border: 'rgba(0, 0, 0, 0.15)',
	      borderHover: 'rgba(0, 0, 0, 0.15)'
	    }
	  }
	};

	const dark = {
	  type: 'dark',
	  palette: {
	    primary: {
	      main: colors.grey20,
	      contrastText: colors.grey100
	    },
	    secondary: {
	      light: '#0AAF54',
	      main: '#009845',
	      dark: '#006937'
	    },
	    text: {
	      primary: colors.grey100,
	      secondary: 'rgba(255, 255, 255, 0.6)',
	      disabled: 'rgba(255, 255, 255, 0.3)'
	    },
	    action: {
	      // active: 'rgba(0, 0, 0, 0.55)',
	      active: colors.grey100,
	      hover: 'rgba(255, 255, 255, 0.05)',
	      hoverOpacity: 0.08,
	      selected: 'rgba(0, 0, 0, 0.03)',
	      disabled: 'rgba(255, 255, 255, 0.3)',
	      disabledBackground: 'rgba(0, 0, 0, 0.12)'
	    },
	    divider: 'rgba(0,0,0,0.3)',
	    background: {
	      default: '#323232',
	      paper: '#323232',
	      // -- custom properties --
	      lightest: colors.grey25,
	      lighter: colors.grey20,
	      darker: colors.grey15,
	      darkest: colors.grey10
	    },
	    // -- custom --
	    custom: {
	      focusBorder: colors.blue,
	      focusOutline: 'rgba(70, 157, 205, 0.3)',
	      inputBackground: 'rgba(0, 0, 0, 0.2)'
	    },
	    selected: {
	      main: colors.green,
	      alternative: colors.grey20,
	      excluded: colors.grey10,
	      mainContrastText: colors.grey100,
	      alternativeContrastText: colors.grey100,
	      excludedContrastText: colors.grey100
	    },
	    btn: {
	      normal: 'rgba(255, 255, 255, 0.15)',
	      hover: 'rgba(255, 255, 255, 0.25)',
	      active: 'rgba(0, 0, 0, 0.6)',
	      disabled: 'rgba(255, 255, 255, 0.15)',
	      border: 'rgba(0, 0, 0, 0.15)',
	      borderHover: 'rgba(0, 0, 0, 0.30)'
	    }
	  }
	};

	const cache = {};

	const overrides = theme => ({
	  MuiTypography: {
	    root: {
	      color: theme.palette.text.primary
	    }
	  },
	  MuiIconButton: {
	    root: {
	      padding: 7,
	      borderRadius: 2,
	      border: '1px solid transparent',
	      // should ideally use $focusVisible, but that messes up focus in all other places where Iconbutton is used (Checkbox, Switch etc)
	      '&:focus': {
	        borderColor: theme.palette.custom.focusBorder,
	        boxShadow: "0 0 0 2px ".concat(theme.palette.custom.focusOutline)
	      }
	    }
	  },
	  MuiOutlinedInput: {
	    root: {
	      backgroundColor: theme.palette.custom.inputBackground,
	      '&:hover $notchedOutline': {
	        borderColor: theme.palette.btn.border
	      },
	      '&$focused $notchedOutline': {
	        borderColor: theme.palette.custom.focusBorder,
	        borderWidth: 2
	      }
	    }
	  },
	  MuiButton: {
	    outlined: {
	      padding: '3px 11px',
	      '&$focusVisible': {
	        borderColor: theme.palette.custom.focusBorder,
	        boxShadow: "0 0 0 2px ".concat(theme.palette.custom.focusOutline)
	      }
	    },
	    contained: {
	      color: theme.palette.text.primary,
	      padding: '3px 11px',
	      border: "1px solid ".concat(theme.palette.btn.border),
	      backgroundColor: theme.palette.btn.normal,
	      boxShadow: 'none',
	      '&$focusVisible': {
	        borderColor: theme.palette.custom.focusBorder,
	        boxShadow: "0 0 0 2px ".concat(theme.palette.custom.focusOutline)
	      },
	      '&:hover': {
	        backgroundColor: theme.palette.btn.hover,
	        borderColor: theme.palette.btn.borderHover,
	        boxShadow: 'none',
	        '&$disabled': {
	          backgroundColor: theme.palette.btn.disabled
	        }
	      },
	      '&:active': {
	        boxShadow: 'none',
	        backgroundColor: theme.palette.btn.active
	      },
	      '&$disabled': {
	        backgroundColor: theme.palette.btn.disabled
	      }
	    }
	  },
	  MuiExpansionPanelSummary: {
	    content: {
	      margin: '8px 0'
	    }
	  }
	});

	function create$3(definition) {
	  let def = light;
	  let name = '';

	  if (typeof definition === 'string') {
	    name = definition;

	    if (definition !== 'light' && definition !== 'dark') {
	      console.warn("Invalid theme: '".concat(definition, "'"));
	    } else if (definition === 'dark') {
	      def = dark;
	    }
	  }

	  const key = JSON.stringify(def);

	  if (cache[key]) {
	    return cache[key];
	  }

	  const withDefaults = {
	    palette: _objectSpread2(_objectSpread2({
	      type: def.type
	    }, base.palette), def.palette),
	    typography: _objectSpread2({}, base.typography),
	    shadows: base.shadows,
	    props: _objectSpread2({}, base.props),
	    shape: _objectSpread2({}, base.shape)
	  };
	  cache[key] = createTheme(_objectSpread2(_objectSpread2({}, withDefaults), {}, {
	    overrides: overrides(withDefaults)
	  }));
	  cache[key].name = name;
	  return cache[key];
	}

	var InstanceContext = React.createContext({
	  language: null,
	  theme: null,
	  translator: null,
	  constraints: {}
	});

	var createKeyStore = (function () {
	  let initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  let applyMiddleware = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
	  const sharedState = initialState;
	  const hookListeners = [];
	  const store = {
	    get: key => sharedState[key],
	    set: (key, value) => {
	      if (typeof key === 'undefined' || typeof key === 'object') {
	        throw new Error("Invalid key: ".concat(JSON.stringify(key)));
	      }

	      sharedState[key] = value;
	      applyMiddleware({
	        type: 'SET',
	        value
	      });
	      return value;
	    },
	    clear: key => {
	      if (typeof key === 'undefined' || typeof key === 'object') {
	        throw new Error("Invalid key: ".concat(JSON.stringify(key)));
	      }

	      sharedState[key] = null;
	    },
	    dispatch: forceNewState => {
	      hookListeners.forEach(listener => listener(forceNewState ? {} : sharedState));
	    }
	  };

	  const useKeyStore = () => {
	    const [, setState] = react.exports.useState(sharedState);
	    react.exports.useEffect(() => {
	      hookListeners.push(setState);
	      return () => {
	        const ix = hookListeners.indexOf(setState);
	        hookListeners.splice(ix, 1);
	      };
	    }, [setState]);
	    return [store];
	  };

	  return [useKeyStore, store];
	});

	const [useRpcResultStore, rpcResultStore] = createKeyStore({});
	const [useRpcRequestStore, rpcRequestStore] = createKeyStore({});
	const [useRpcRequestSessionModelStore, rpcRequestSessionModelStore] = createKeyStore({});
	const [useRpcRequestModelStore, rpcRequestModelStore] = createKeyStore({});
	const [useModelChangedStore, modelChangedStore] = createKeyStore({});
	const [, modelInitializedStore] = createKeyStore({});

	const modelStoreMiddleware = _ref => {
	  let {
	    type,
	    value: model
	  } = _ref;
	  const initialized = modelInitializedStore.get(model.id);
	  modelInitializedStore.set(model.id, {});

	  const onChanged = () => {
	    rpcRequestStore.clear(model.id);
	    modelChangedStore.set(model.id, {});
	    modelChangedStore.dispatch(true); // Force new state to trigger hooks
	  };

	  const unsubscribe = () => {
	    model.removeListener('changed', onChanged);
	    rpcResultStore.clear(model.id);
	    rpcRequestStore.clear(model.id);
	    rpcRequestSessionModelStore.clear(model.id);
	    rpcRequestModelStore.clear(model.id);
	    modelChangedStore.clear(model.id);
	    modelInitializedStore.clear(model.id);
	  };

	  switch (type) {
	    case 'SET':
	      if (!initialized) {
	        model.on('changed', onChanged);
	        model.once('closed', () => {
	          unsubscribe();
	        });
	      }

	      break;
	  }

	  return unsubscribe;
	};

	const [useModelStore, modelStore] = createKeyStore({}, modelStoreMiddleware);

	const subscribe = model => {
	  const unsubscribe = modelStoreMiddleware({
	    type: 'SET',
	    value: model
	  });
	  return () => {
	    unsubscribe();
	    modelStore.clear(model.id);
	  };
	};

	const rpcReducer = (state, action) => {
	  const {
	    rpcResultStore,
	    key,
	    method
	  } = action;
	  let newState;

	  switch (action.type) {
	    case 'INVALID':
	      {
	        newState = _objectSpread2(_objectSpread2({}, state), {}, {
	          valid: false,
	          invalid: true,
	          validating: true,
	          canCancel: true,
	          canRetry: false,
	          rpcRetry: false
	        });
	        break;
	      }

	    case 'VALID':
	      {
	        newState = {
	          result: _objectSpread2({}, action.result),
	          invalid: false,
	          valid: true,
	          validating: false,
	          canCancel: false,
	          canRetry: false,
	          rpcRetry: false
	        };
	        break;
	      }

	    case 'CANCELLED':
	      {
	        newState = _objectSpread2(_objectSpread2({}, state), {}, {
	          invalid: true,
	          valid: false,
	          validating: false,
	          canCancel: false,
	          canRetry: true,
	          rpcRetry: false
	        });
	        break;
	      }

	    default:
	      throw new Error('Undefined action');
	  }

	  let sharedState = rpcResultStore.get(key);

	  if (!sharedState) {
	    sharedState = {};
	  }

	  sharedState[method] = newState;
	  rpcResultStore.set(key, sharedState);
	  return newState;
	};

	function useRpc(model, method) {
	  const key = model ? "".concat(model.id) : null;
	  const [rpcResultStore] = useRpcResultStore();
	  const [state, dispatch] = react.exports.useReducer(rpcReducer, key ? rpcResultStore.get(key) : null);
	  const [modelChangedStore] = useModelChangedStore();
	  const [rpcRequestStore] = useRpcRequestStore();
	  let rpcShared;

	  if (key) {
	    rpcShared = rpcRequestStore.get(key);

	    if (!rpcShared) {
	      rpcShared = {};
	      rpcRequestStore.set(key, rpcShared);
	    }
	  }

	  const call = async skipRetry => {
	    let cache = rpcShared[method];

	    if (!cache || cache && cache.rpcRetry) {
	      const rpc = model[method]();
	      cache = {
	        rpc,
	        rpcRetry: false
	      };
	      rpcShared[method] = cache;
	      dispatch({
	        type: 'INVALID',
	        method,
	        key,
	        model,
	        rpcResultStore,
	        canCancel: true
	      });
	    }

	    try {
	      // await sleep(5000);
	      const result = await cache.rpc;
	      dispatch({
	        type: 'VALID',
	        result,
	        key,
	        method,
	        model,
	        rpcResultStore
	      });
	    } catch (err) {
	      if (err.code === 15 && !skipRetry) {
	        // Request aborted. This will be called multiple times by hooks only retry once
	        if (!cache.rpcRetry) {
	          cache.rpcRetry = true;
	        }

	        call(true);
	      }
	    }
	  };

	  const longrunning = {
	    cancel: async () => {
	      const global = model.session.getObjectApi({
	        handle: -1
	      });
	      await global.cancelRequest(rpcShared[method].rpc.requestId);
	      dispatch({
	        type: 'CANCELLED',
	        key,
	        method,
	        model,
	        rpcResultStore
	      });
	    },
	    retry: () => {
	      rpcShared[method].rpcRetry = true;
	      call();
	    }
	  };
	  react.exports.useEffect(() => {
	    if (!model) return undefined;
	    call();
	    return undefined;
	  }, [model, modelChangedStore.get(model && model.id), key, method]);
	  return [// Result
	  state && state.result, {
	    validating: state && state.validating,
	    canCancel: state && state.canCancel,
	    canRetry: state && state.canRetry
	  }, // Long running api e.g cancel retry
	  longrunning];
	}

	function useLayout$1(model) {
	  return useRpc(model, 'getLayout');
	}
	function useAppLayout$1(model) {
	  return useRpc(model, 'getAppLayout');
	}

	function useSessionModel(definition, app) {
	  const key = app ? "".concat(app.id, "/").concat(JSON.stringify(definition)) : null;
	  const [modelStore] = useModelStore();
	  const [rpcRequestSessionModelStore] = useRpcRequestSessionModelStore();
	  const [model, setModel] = react.exports.useState();
	  let rpcShared;

	  if (key) {
	    rpcShared = rpcRequestSessionModelStore.get(key);
	  }

	  for (var _len = arguments.length, deps = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
	    deps[_key - 2] = arguments[_key];
	  }

	  react.exports.useEffect(() => {
	    if (!app) {
	      return;
	    } // Create new session object


	    const create = async () => {
	      if (!rpcShared) {
	        const rpc = app.createSessionObject(definition);
	        rpcShared = rpc;
	        rpcRequestSessionModelStore.set(key, rpcShared);
	      }

	      const newModel = await rpcShared;
	      modelStore.set(key, newModel);
	      setModel(newModel);
	    };

	    create();
	  }, [app, ...deps]);
	  return [model];
	}

	const definition = {
	  qInfo: {
	    qType: 'current-selections'
	  },
	  qSelectionObjectDef: {
	    qStateName: '$'
	  },
	  alternateStates: []
	};
	function useCurrentSelectionsModel(app) {
	  return useSessionModel(definition, app);
	}

	const patchAlternateState = (currentSelectionsModel, currentSelectionsLayout, appLayout) => {
	  const states = [...(appLayout.qStateNames || [])].map(s => ({
	    stateName: s,
	    // need this as reference in selection toolbar since qSelectionObject.qStateName is not in the layout
	    qSelectionObjectDef: {
	      qStateName: s
	    }
	  }));
	  const existingStates = (currentSelectionsLayout && currentSelectionsLayout.alternateStates ? currentSelectionsLayout.alternateStates.map(s => s.stateName) : []).join('::');
	  const newStates = (appLayout.qStateNames || []).map(s => s).join('::');

	  if (existingStates !== newStates) {
	    currentSelectionsModel.applyPatches([{
	      qOp: 'replace',
	      qPath: '/alternateStates',
	      qValue: JSON.stringify(states)
	    }], true);
	  }
	};

	function useAppSelectionsNavigation(app) {
	  const [currentSelectionsModel] = useCurrentSelectionsModel(app);
	  const [currentSelectionsLayout] = useLayout$1(currentSelectionsModel);
	  const [appLayout] = useAppLayout$1(app);
	  const [navigationState, setNavigationState] = react.exports.useState(null);
	  react.exports.useEffect(() => {
	    if (!appLayout || !currentSelectionsModel || !currentSelectionsLayout) return;
	    patchAlternateState(currentSelectionsModel, currentSelectionsLayout, appLayout);
	  }, [appLayout, currentSelectionsModel, currentSelectionsLayout]);
	  react.exports.useEffect(() => {
	    if (!currentSelectionsLayout) return;
	    let canGoBack = false;
	    let canGoForward = false;
	    let canClear = false;
	    [currentSelectionsLayout, ...(currentSelectionsLayout.alternateStates || [])].forEach(state => {
	      canGoBack = canGoBack || state.qSelectionObject && state.qSelectionObject.qBackCount > 0;
	      canGoForward = canGoForward || state.qSelectionObject && state.qSelectionObject.qForwardCount > 0;
	      canClear = canClear || (state.qSelectionObject && state.qSelectionObject.qSelections || []).filter(s => s.qLocked !== true).length > 0;
	    });
	    setNavigationState({
	      canGoBack,
	      canGoForward,
	      canClear
	    });
	  }, [currentSelectionsLayout]);
	  return [navigationState, currentSelectionsModel, currentSelectionsLayout];
	}

	const [useAppSelectionsStore, appSelectionsStore] = createKeyStore({});
	const [useAppModalStore, appModalStore] = createKeyStore({});
	const [useObjectSelectionsStore, objectSelectionsStore] = createKeyStore({});
	const [useModalObjectStore, modalObjectStore] = createKeyStore({});

	/* eslint no-underscore-dangle: 0 */

	function createAppSelections(_ref) {
	  let {
	    app,
	    currentSelectionsLayout,
	    navState
	  } = _ref;
	  const key = "".concat(app.id);

	  const end = async function () {
	    let accept = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
	    const model = modalObjectStore.get(key);

	    if (model) {
	      await model.endSelections(accept);
	      modalObjectStore.clear(key);
	      const objectSelections = objectSelectionsStore.get(model.id);
	      objectSelections.emit('deactivated');
	    }
	  };

	  const begin = async function (model, path) {
	    let accept = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

	    // Quick return if it's already in modal
	    if (model === modalObjectStore.get(key)) {
	      return;
	    } // If other model is in modal state end it


	    end(accept); // Pending modal

	    modalObjectStore.set(key, model);
	    const p = Array.isArray(path) ? path : [path];

	    const beginSelections = async skipRetry => {
	      try {
	        await model.beginSelections(p);
	        modalObjectStore.set(key, model); // We have a modal
	      } catch (err) {
	        if (err.code === 6003 && !skipRetry) {
	          await app.abortModal(accept);
	          beginSelections(true);
	        } else {
	          modalObjectStore.clear(key); // No modal
	        }
	      }
	    };

	    await beginSelections();
	  };

	  const appModal = {
	    begin,
	    end
	  };
	  appModalStore.set(key, appModal);
	  /**
	   * @class
	   * @alias AppSelections
	   */

	  const appSelections = {
	    model: app,

	    isInModal() {
	      return !!modalObjectStore.get(key);
	    },

	    isModal(object) {
	      // TODO check model state
	      return object ? modalObjectStore.get(key) === object : !!modalObjectStore.get(key);
	    },

	    canGoForward() {
	      return navState.canGoForward;
	    },

	    canGoBack() {
	      return navState.canGoBack;
	    },

	    canClear() {
	      return navState.canClear;
	    },

	    layout() {
	      return currentSelectionsLayout;
	    },

	    forward() {
	      return appModal.end().then(() => app.forward());
	    },

	    back() {
	      return appModal.end().then(() => app.back());
	    },

	    clear() {
	      return appModal.end().then(() => app.clearAll());
	    },

	    clearField(field) {
	      let state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '$';
	      return appModal.end().then(() => app.getField(field, state).then(f => f.clear()));
	    }

	  };
	  return appSelections;
	}

	function useAppSelections(app) {
	  if (!app.session) {
	    // assume the app is mocked if session is undefined
	    return [];
	  }

	  const [navState, currentSelectionsModel, currentSelectionsLayout] = useAppSelectionsNavigation(app);
	  const [appSelectionsStore] = useAppSelectionsStore();
	  const key = app ? app.id : null;
	  let appSelections = appSelectionsStore.get(key);
	  react.exports.useEffect(() => {
	    if (!app || !currentSelectionsModel || !currentSelectionsLayout || !navState || appSelections) return;
	    appSelections = createAppSelections({
	      app,
	      currentSelectionsLayout,
	      navState
	    });
	    appSelectionsStore.set(key, appSelections);
	    appSelectionsStore.dispatch(true);
	  }, [app, currentSelectionsModel, currentSelectionsLayout, navState]);
	  return [appSelections, navState];
	}

	const NEBULA_VERSION_HASH = "32d7" ;
	let counter = 0;
	const NebulaApp = react.exports.forwardRef((_ref, ref) => {
	  let {
	    initialContext,
	    app
	  } = _ref;
	  const [appSelections] = useAppSelections(app);
	  const [context, setContext] = react.exports.useState(initialContext);
	  const [muiThemeName, setMuiThemeName] = react.exports.useState();
	  const {
	    theme,
	    generator
	  } = react.exports.useMemo(() => ({
	    theme: create$3(muiThemeName),
	    generator: createGenerateClassName({
	      productionPrefix: "".concat(NEBULA_VERSION_HASH),
	      disableGlobal: true,
	      seed: "njs-".concat(counter++)
	    })
	  }), [muiThemeName]);
	  const [components, setComponents] = react.exports.useState([]);
	  react.exports.useImperativeHandle(ref, () => ({
	    addComponent(component) {
	      setComponents([...components, component]);
	    },

	    removeComponent(component) {
	      const ix = components.indexOf(component);

	      if (ix !== -1) {
	        components.splice(ix, 1);
	        setComponents([...components]);
	      }
	    },

	    setMuiThemeName,
	    setContext,
	    getAppSelections: () => appSelections
	  }));
	  return /*#__PURE__*/React.createElement(StylesProvider, {
	    generateClassName: generator
	  }, /*#__PURE__*/React.createElement(ThemeProvider, {
	    theme: theme
	  }, /*#__PURE__*/React.createElement(InstanceContext.Provider, {
	    value: context
	  }, components)));
	});
	function boot(_ref2) {
	  let {
	    app,
	    context
	  } = _ref2;
	  let resolveRender;
	  const rendered = new Promise(resolve => {
	    resolveRender = resolve;
	  });
	  const appRef = React.createRef();
	  const element = document.createElement('div');
	  element.style.display = 'none';
	  element.setAttribute('data-nebulajs-version', "2.12.0" );
	  element.setAttribute('data-app-id', app.id);
	  document.body.appendChild(element);
	  ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
	    ref: appRef,
	    app: app,
	    initialContext: context
	  }), element, resolveRender);
	  const cells = {};
	  return [{
	    toggleFocusOfCells(cellIdToFocus) {
	      Object.keys(cells).forEach(i => {
	        cells[i].current.toggleFocus(i === cellIdToFocus);
	      });
	    },

	    cells,

	    addCell(id, cell) {
	      cells[id] = cell;
	    },

	    add(component) {
	      (async () => {
	        await rendered;
	        appRef.current.addComponent(component);
	      })();
	    },

	    remove(component) {
	      (async () => {
	        await rendered;
	        appRef.current.removeComponent(component);
	      })();
	    },

	    setMuiThemeName(themeName) {
	      (async () => {
	        await rendered;
	        appRef.current.setMuiThemeName(themeName);
	      })();
	    },

	    context(ctx) {
	      (async () => {
	        await rendered;
	        appRef.current.setContext(ctx);
	      })();
	    },

	    getAppSelections: async () => {
	      await rendered;
	      return appRef.current.getAppSelections();
	    }
	  }, appRef, rendered];
	}

	// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
	//
	// A strict capitalization should uppercase the first letter of each word a the sentence.
	// We only handle the first word.
	function capitalize(string) {
	  if (typeof string !== 'string') {
	    throw new Error(formatMuiErrorMessage(7));
	  }

	  return string.charAt(0).toUpperCase() + string.slice(1);
	}

	/**
	 * Safe chained function
	 *
	 * Will only create a new function if needed,
	 * otherwise will pass back existing functions or null.
	 *
	 * @param {function} functions to chain
	 * @returns {function|null}
	 */
	function createChainedFunction() {
	  for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
	    funcs[_key] = arguments[_key];
	  }

	  return funcs.reduce(function (acc, func) {
	    if (func == null) {
	      return acc;
	    }

	    return function chainedFunction() {
	      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
	        args[_key2] = arguments[_key2];
	      }

	      acc.apply(this, args);
	      func.apply(this, args);
	    };
	  }, function () {});
	}

	function toVal(mix) {
		var k, y, str='';

		if (typeof mix === 'string' || typeof mix === 'number') {
			str += mix;
		} else if (typeof mix === 'object') {
			if (Array.isArray(mix)) {
				for (k=0; k < mix.length; k++) {
					if (mix[k]) {
						if (y = toVal(mix[k])) {
							str && (str += ' ');
							str += y;
						}
					}
				}
			} else {
				for (k in mix) {
					if (mix[k]) {
						str && (str += ' ');
						str += k;
					}
				}
			}
		}

		return str;
	}

	function clsx () {
		var i=0, tmp, x, str='';
		while (i < arguments.length) {
			if (tmp = arguments[i++]) {
				if (x = toVal(tmp)) {
					str && (str += ' ');
					str += x;
				}
			}
		}
		return str;
	}

	var styles$1R = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      userSelect: 'none',
	      width: '1em',
	      height: '1em',
	      display: 'inline-block',
	      fill: 'currentColor',
	      flexShrink: 0,
	      fontSize: theme.typography.pxToRem(24),
	      transition: theme.transitions.create('fill', {
	        duration: theme.transitions.duration.shorter
	      })
	    },

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {
	      color: theme.palette.primary.main
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    colorSecondary: {
	      color: theme.palette.secondary.main
	    },

	    /* Styles applied to the root element if `color="action"`. */
	    colorAction: {
	      color: theme.palette.action.active
	    },

	    /* Styles applied to the root element if `color="error"`. */
	    colorError: {
	      color: theme.palette.error.main
	    },

	    /* Styles applied to the root element if `color="disabled"`. */
	    colorDisabled: {
	      color: theme.palette.action.disabled
	    },

	    /* Styles applied to the root element if `fontSize="inherit"`. */
	    fontSizeInherit: {
	      fontSize: 'inherit'
	    },

	    /* Styles applied to the root element if `fontSize="small"`. */
	    fontSizeSmall: {
	      fontSize: theme.typography.pxToRem(20)
	    },

	    /* Styles applied to the root element if `fontSize="large"`. */
	    fontSizeLarge: {
	      fontSize: theme.typography.pxToRem(35)
	    }
	  };
	};
	var SvgIcon$1 = /*#__PURE__*/react.exports.forwardRef(function SvgIcon(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'inherit' : _props$color,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'svg' : _props$component,
	      _props$fontSize = props.fontSize,
	      fontSize = _props$fontSize === void 0 ? 'medium' : _props$fontSize,
	      htmlColor = props.htmlColor,
	      titleAccess = props.titleAccess,
	      _props$viewBox = props.viewBox,
	      viewBox = _props$viewBox === void 0 ? '0 0 24 24' : _props$viewBox,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "fontSize", "htmlColor", "titleAccess", "viewBox"]);

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className, color !== 'inherit' && classes["color".concat(capitalize(color))], fontSize !== 'default' && fontSize !== 'medium' && classes["fontSize".concat(capitalize(fontSize))]),
	    focusable: "false",
	    viewBox: viewBox,
	    color: htmlColor,
	    "aria-hidden": titleAccess ? undefined : true,
	    role: titleAccess ? 'img' : undefined,
	    ref: ref
	  }, other), children, titleAccess ? /*#__PURE__*/react.exports.createElement("title", null, titleAccess) : null);
	});
	SvgIcon$1.muiName = 'SvgIcon';
	var SvgIcon$2 = withStyles(styles$1R, {
	  name: 'MuiSvgIcon'
	})(SvgIcon$1);

	/**
	 * Private module reserved for @material-ui/x packages.
	 */

	function createSvgIcon(path, displayName) {
	  var Component = function Component(props, ref) {
	    return /*#__PURE__*/React.createElement(SvgIcon$2, _extends$5({
	      ref: ref
	    }, props), path);
	  };

	  Component.muiName = SvgIcon$2.muiName;
	  return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
	}

	// Corresponds to 10 frames at 60 Hz.
	// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
	function debounce$1(func) {
	  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 166;
	  var timeout;

	  function debounced() {
	    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
	      args[_key] = arguments[_key];
	    }

	    // eslint-disable-next-line consistent-this
	    var that = this;

	    var later = function later() {
	      func.apply(that, args);
	    };

	    clearTimeout(timeout);
	    timeout = setTimeout(later, wait);
	  }

	  debounced.clear = function () {
	    clearTimeout(timeout);
	  };

	  return debounced;
	}

	function isMuiElement(element, muiNames) {
	  return /*#__PURE__*/react.exports.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
	}

	function ownerDocument(node) {
	  return node && node.ownerDocument || document;
	}

	function ownerWindow(node) {
	  var doc = ownerDocument(node);
	  return doc.defaultView || window;
	}

	// TODO v5: consider to make it private
	function setRef(ref, value) {
	  if (typeof ref === 'function') {
	    ref(value);
	  } else if (ref) {
	    ref.current = value;
	  }
	}

	/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
	function useControlled(_ref) {
	  var controlled = _ref.controlled,
	      defaultProp = _ref.default;
	      _ref.name;
	      _ref.state;

	  var _React$useRef = react.exports.useRef(controlled !== undefined),
	      isControlled = _React$useRef.current;

	  var _React$useState = react.exports.useState(defaultProp),
	      valueState = _React$useState[0],
	      setValue = _React$useState[1];

	  var value = isControlled ? controlled : valueState;

	  var setValueIfUncontrolled = react.exports.useCallback(function (newValue) {
	    if (!isControlled) {
	      setValue(newValue);
	    }
	  }, []);
	  return [value, setValueIfUncontrolled];
	}

	var useEnhancedEffect$8 = typeof window !== 'undefined' ? react.exports.useLayoutEffect : react.exports.useEffect;
	/**
	 * https://github.com/facebook/react/issues/14099#issuecomment-440013892
	 *
	 * @param {function} fn
	 */

	function useEventCallback(fn) {
	  var ref = react.exports.useRef(fn);
	  useEnhancedEffect$8(function () {
	    ref.current = fn;
	  });
	  return react.exports.useCallback(function () {
	    return (ref.current).apply(void 0, arguments);
	  }, []);
	}

	function useForkRef(refA, refB) {
	  /**
	   * This will create a new function if the ref props change and are defined.
	   * This means react will call the old forkRef with `null` and the new forkRef
	   * with the ref. Cleanup naturally emerges from this behavior
	   */
	  return react.exports.useMemo(function () {
	    if (refA == null && refB == null) {
	      return null;
	    }

	    return function (refValue) {
	      setRef(refA, refValue);
	      setRef(refB, refValue);
	    };
	  }, [refA, refB]);
	}

	/**
	 * Private module reserved for @material-ui/x packages.
	 */

	function useId(idOverride) {
	  var _React$useState = react.exports.useState(idOverride),
	      defaultId = _React$useState[0],
	      setDefaultId = _React$useState[1];

	  var id = idOverride || defaultId;
	  react.exports.useEffect(function () {
	    if (defaultId == null) {
	      // Fallback to this default id when possible.
	      // Use the random value for client-side rendering only.
	      // We can't use it server-side.
	      setDefaultId("mui-".concat(Math.round(Math.random() * 1e5)));
	    }
	  }, [defaultId]);
	  return id;
	}

	// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
	var hadKeyboardEvent = true;
	var hadFocusVisibleRecently = false;
	var hadFocusVisibleRecentlyTimeout = null;
	var inputTypesWhitelist = {
	  text: true,
	  search: true,
	  url: true,
	  tel: true,
	  email: true,
	  password: true,
	  number: true,
	  date: true,
	  month: true,
	  week: true,
	  time: true,
	  datetime: true,
	  'datetime-local': true
	};
	/**
	 * Computes whether the given element should automatically trigger the
	 * `focus-visible` class being added, i.e. whether it should always match
	 * `:focus-visible` when focused.
	 * @param {Element} node
	 * @return {boolean}
	 */

	function focusTriggersKeyboardModality(node) {
	  var type = node.type,
	      tagName = node.tagName;

	  if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
	    return true;
	  }

	  if (tagName === 'TEXTAREA' && !node.readOnly) {
	    return true;
	  }

	  if (node.isContentEditable) {
	    return true;
	  }

	  return false;
	}
	/**
	 * Keep track of our keyboard modality state with `hadKeyboardEvent`.
	 * If the most recent user interaction was via the keyboard;
	 * and the key press did not include a meta, alt/option, or control key;
	 * then the modality is keyboard. Otherwise, the modality is not keyboard.
	 * @param {KeyboardEvent} event
	 */


	function handleKeyDown(event) {
	  if (event.metaKey || event.altKey || event.ctrlKey) {
	    return;
	  }

	  hadKeyboardEvent = true;
	}
	/**
	 * If at any point a user clicks with a pointing device, ensure that we change
	 * the modality away from keyboard.
	 * This avoids the situation where a user presses a key on an already focused
	 * element, and then clicks on a different element, focusing it with a
	 * pointing device, while we still think we're in keyboard modality.
	 */


	function handlePointerDown() {
	  hadKeyboardEvent = false;
	}

	function handleVisibilityChange() {
	  if (this.visibilityState === 'hidden') {
	    // If the tab becomes active again, the browser will handle calling focus
	    // on the element (Safari actually calls it twice).
	    // If this tab change caused a blur on an element with focus-visible,
	    // re-apply the class when the user switches back to the tab.
	    if (hadFocusVisibleRecently) {
	      hadKeyboardEvent = true;
	    }
	  }
	}

	function prepare(doc) {
	  doc.addEventListener('keydown', handleKeyDown, true);
	  doc.addEventListener('mousedown', handlePointerDown, true);
	  doc.addEventListener('pointerdown', handlePointerDown, true);
	  doc.addEventListener('touchstart', handlePointerDown, true);
	  doc.addEventListener('visibilitychange', handleVisibilityChange, true);
	}

	function isFocusVisible(event) {
	  var target = event.target;

	  try {
	    return target.matches(':focus-visible');
	  } catch (error) {} // browsers not implementing :focus-visible will throw a SyntaxError
	  // we use our own heuristic for those browsers
	  // rethrow might be better if it's not the expected error but do we really
	  // want to crash if focus-visible malfunctioned?
	  // no need for validFocusTarget check. the user does that by attaching it to
	  // focusable events only


	  return hadKeyboardEvent || focusTriggersKeyboardModality(target);
	}
	/**
	 * Should be called if a blur event is fired on a focus-visible element
	 */


	function handleBlurVisible() {
	  // To detect a tab/window switch, we look for a blur event followed
	  // rapidly by a visibility change.
	  // If we don't see a visibility change within 100ms, it's probably a
	  // regular focus change.
	  hadFocusVisibleRecently = true;
	  window.clearTimeout(hadFocusVisibleRecentlyTimeout);
	  hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
	    hadFocusVisibleRecently = false;
	  }, 100);
	}

	function useIsFocusVisible() {
	  var ref = react.exports.useCallback(function (instance) {
	    var node = reactDom.exports.findDOMNode(instance);

	    if (node != null) {
	      prepare(node.ownerDocument);
	    }
	  }, []);

	  return {
	    isFocusVisible: isFocusVisible,
	    onBlurVisible: handleBlurVisible,
	    ref: ref
	  };
	}

	function _arrayWithHoles(arr) {
	  if (Array.isArray(arr)) return arr;
	}

	function _iterableToArray(iter) {
	  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
	}

	function _nonIterableRest() {
	  throw new TypeError("Invalid attempt to destructure non-iterable instance");
	}

	function _toArray(arr) {
	  return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest();
	}

	function _iterableToArrayLimit(arr, i) {
	  var _arr = [];
	  var _n = true;
	  var _d = false;
	  var _e = undefined;

	  try {
	    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
	      _arr.push(_s.value);

	      if (i && _arr.length === i) break;
	    }
	  } catch (err) {
	    _d = true;
	    _e = err;
	  } finally {
	    try {
	      if (!_n && _i["return"] != null) _i["return"]();
	    } finally {
	      if (_d) throw _e;
	    }
	  }

	  return _arr;
	}

	function _slicedToArray(arr, i) {
	  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
	}

	function _extends$3() {
	  _extends$3 = Object.assign || function (target) {
	    for (var i = 1; i < arguments.length; i++) {
	      var source = arguments[i];

	      for (var key in source) {
	        if (Object.prototype.hasOwnProperty.call(source, key)) {
	          target[key] = source[key];
	        }
	      }
	    }

	    return target;
	  };

	  return _extends$3.apply(this, arguments);
	}

	function _objectWithoutPropertiesLoose(source, excluded) {
	  if (source == null) return {};
	  var target = {};
	  var sourceKeys = Object.keys(source);
	  var key, i;

	  for (i = 0; i < sourceKeys.length; i++) {
	    key = sourceKeys[i];
	    if (excluded.indexOf(key) >= 0) continue;
	    target[key] = source[key];
	  }

	  return target;
	}

	function _inheritsLoose$1(subClass, superClass) {
	  subClass.prototype = Object.create(superClass.prototype);
	  subClass.prototype.constructor = subClass;
	  subClass.__proto__ = superClass;
	}

	function hasClass(element, className) {
	  if (element.classList) return !!className && element.classList.contains(className);
	  return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
	}

	function addClass(element, className) {
	  if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + " " + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + " " + className);
	}

	function replaceClassName(origClass, classToRemove) {
	  return origClass.replace(new RegExp("(^|\\s)" + classToRemove + "(?:\\s|$)", 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
	}

	function removeClass$1(element, className) {
	  if (element.classList) {
	    element.classList.remove(className);
	  } else if (typeof element.className === 'string') {
	    element.className = replaceClassName(element.className, className);
	  } else {
	    element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
	  }
	}

	var config = {
	  disabled: false
	};

	var TransitionGroupContext = React.createContext(null);

	var UNMOUNTED = 'unmounted';
	var EXITED = 'exited';
	var ENTERING = 'entering';
	var ENTERED = 'entered';
	var EXITING = 'exiting';
	/**
	 * The Transition component lets you describe a transition from one component
	 * state to another _over time_ with a simple declarative API. Most commonly
	 * it's used to animate the mounting and unmounting of a component, but can also
	 * be used to describe in-place transition states as well.
	 *
	 * ---
	 *
	 * **Note**: `Transition` is a platform-agnostic base component. If you're using
	 * transitions in CSS, you'll probably want to use
	 * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
	 * instead. It inherits all the features of `Transition`, but contains
	 * additional features necessary to play nice with CSS transitions (hence the
	 * name of the component).
	 *
	 * ---
	 *
	 * By default the `Transition` component does not alter the behavior of the
	 * component it renders, it only tracks "enter" and "exit" states for the
	 * components. It's up to you to give meaning and effect to those states. For
	 * example we can add styles to a component when it enters or exits:
	 *
	 * ```jsx
	 * import { Transition } from 'react-transition-group';
	 *
	 * const duration = 300;
	 *
	 * const defaultStyle = {
	 *   transition: `opacity ${duration}ms ease-in-out`,
	 *   opacity: 0,
	 * }
	 *
	 * const transitionStyles = {
	 *   entering: { opacity: 1 },
	 *   entered:  { opacity: 1 },
	 *   exiting:  { opacity: 0 },
	 *   exited:  { opacity: 0 },
	 * };
	 *
	 * const Fade = ({ in: inProp }) => (
	 *   <Transition in={inProp} timeout={duration}>
	 *     {state => (
	 *       <div style={{
	 *         ...defaultStyle,
	 *         ...transitionStyles[state]
	 *       }}>
	 *         I'm a fade Transition!
	 *       </div>
	 *     )}
	 *   </Transition>
	 * );
	 * ```
	 *
	 * There are 4 main states a Transition can be in:
	 *  - `'entering'`
	 *  - `'entered'`
	 *  - `'exiting'`
	 *  - `'exited'`
	 *
	 * Transition state is toggled via the `in` prop. When `true` the component
	 * begins the "Enter" stage. During this stage, the component will shift from
	 * its current transition state, to `'entering'` for the duration of the
	 * transition and then to the `'entered'` stage once it's complete. Let's take
	 * the following example (we'll use the
	 * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
	 *
	 * ```jsx
	 * function App() {
	 *   const [inProp, setInProp] = useState(false);
	 *   return (
	 *     <div>
	 *       <Transition in={inProp} timeout={500}>
	 *         {state => (
	 *           // ...
	 *         )}
	 *       </Transition>
	 *       <button onClick={() => setInProp(true)}>
	 *         Click to Enter
	 *       </button>
	 *     </div>
	 *   );
	 * }
	 * ```
	 *
	 * When the button is clicked the component will shift to the `'entering'` state
	 * and stay there for 500ms (the value of `timeout`) before it finally switches
	 * to `'entered'`.
	 *
	 * When `in` is `false` the same thing happens except the state moves from
	 * `'exiting'` to `'exited'`.
	 */

	var Transition = /*#__PURE__*/function (_React$Component) {
	  _inheritsLoose$1(Transition, _React$Component);

	  function Transition(props, context) {
	    var _this;

	    _this = _React$Component.call(this, props, context) || this;
	    var parentGroup = context; // In the context of a TransitionGroup all enters are really appears

	    var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
	    var initialStatus;
	    _this.appearStatus = null;

	    if (props.in) {
	      if (appear) {
	        initialStatus = EXITED;
	        _this.appearStatus = ENTERING;
	      } else {
	        initialStatus = ENTERED;
	      }
	    } else {
	      if (props.unmountOnExit || props.mountOnEnter) {
	        initialStatus = UNMOUNTED;
	      } else {
	        initialStatus = EXITED;
	      }
	    }

	    _this.state = {
	      status: initialStatus
	    };
	    _this.nextCallback = null;
	    return _this;
	  }

	  Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
	    var nextIn = _ref.in;

	    if (nextIn && prevState.status === UNMOUNTED) {
	      return {
	        status: EXITED
	      };
	    }

	    return null;
	  } // getSnapshotBeforeUpdate(prevProps) {
	  //   let nextStatus = null
	  //   if (prevProps !== this.props) {
	  //     const { status } = this.state
	  //     if (this.props.in) {
	  //       if (status !== ENTERING && status !== ENTERED) {
	  //         nextStatus = ENTERING
	  //       }
	  //     } else {
	  //       if (status === ENTERING || status === ENTERED) {
	  //         nextStatus = EXITING
	  //       }
	  //     }
	  //   }
	  //   return { nextStatus }
	  // }
	  ;

	  var _proto = Transition.prototype;

	  _proto.componentDidMount = function componentDidMount() {
	    this.updateStatus(true, this.appearStatus);
	  };

	  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
	    var nextStatus = null;

	    if (prevProps !== this.props) {
	      var status = this.state.status;

	      if (this.props.in) {
	        if (status !== ENTERING && status !== ENTERED) {
	          nextStatus = ENTERING;
	        }
	      } else {
	        if (status === ENTERING || status === ENTERED) {
	          nextStatus = EXITING;
	        }
	      }
	    }

	    this.updateStatus(false, nextStatus);
	  };

	  _proto.componentWillUnmount = function componentWillUnmount() {
	    this.cancelNextCallback();
	  };

	  _proto.getTimeouts = function getTimeouts() {
	    var timeout = this.props.timeout;
	    var exit, enter, appear;
	    exit = enter = appear = timeout;

	    if (timeout != null && typeof timeout !== 'number') {
	      exit = timeout.exit;
	      enter = timeout.enter; // TODO: remove fallback for next major

	      appear = timeout.appear !== undefined ? timeout.appear : enter;
	    }

	    return {
	      exit: exit,
	      enter: enter,
	      appear: appear
	    };
	  };

	  _proto.updateStatus = function updateStatus(mounting, nextStatus) {
	    if (mounting === void 0) {
	      mounting = false;
	    }

	    if (nextStatus !== null) {
	      // nextStatus will always be ENTERING or EXITING.
	      this.cancelNextCallback();

	      if (nextStatus === ENTERING) {
	        this.performEnter(mounting);
	      } else {
	        this.performExit();
	      }
	    } else if (this.props.unmountOnExit && this.state.status === EXITED) {
	      this.setState({
	        status: UNMOUNTED
	      });
	    }
	  };

	  _proto.performEnter = function performEnter(mounting) {
	    var _this2 = this;

	    var enter = this.props.enter;
	    var appearing = this.context ? this.context.isMounting : mounting;

	    var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],
	        maybeNode = _ref2[0],
	        maybeAppearing = _ref2[1];

	    var timeouts = this.getTimeouts();
	    var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
	    // if we are mounting and running this it means appear _must_ be set

	    if (!mounting && !enter || config.disabled) {
	      this.safeSetState({
	        status: ENTERED
	      }, function () {
	        _this2.props.onEntered(maybeNode);
	      });
	      return;
	    }

	    this.props.onEnter(maybeNode, maybeAppearing);
	    this.safeSetState({
	      status: ENTERING
	    }, function () {
	      _this2.props.onEntering(maybeNode, maybeAppearing);

	      _this2.onTransitionEnd(enterTimeout, function () {
	        _this2.safeSetState({
	          status: ENTERED
	        }, function () {
	          _this2.props.onEntered(maybeNode, maybeAppearing);
	        });
	      });
	    });
	  };

	  _proto.performExit = function performExit() {
	    var _this3 = this;

	    var exit = this.props.exit;
	    var timeouts = this.getTimeouts();
	    var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED

	    if (!exit || config.disabled) {
	      this.safeSetState({
	        status: EXITED
	      }, function () {
	        _this3.props.onExited(maybeNode);
	      });
	      return;
	    }

	    this.props.onExit(maybeNode);
	    this.safeSetState({
	      status: EXITING
	    }, function () {
	      _this3.props.onExiting(maybeNode);

	      _this3.onTransitionEnd(timeouts.exit, function () {
	        _this3.safeSetState({
	          status: EXITED
	        }, function () {
	          _this3.props.onExited(maybeNode);
	        });
	      });
	    });
	  };

	  _proto.cancelNextCallback = function cancelNextCallback() {
	    if (this.nextCallback !== null) {
	      this.nextCallback.cancel();
	      this.nextCallback = null;
	    }
	  };

	  _proto.safeSetState = function safeSetState(nextState, callback) {
	    // This shouldn't be necessary, but there are weird race conditions with
	    // setState callbacks and unmounting in testing, so always make sure that
	    // we can cancel any pending setState callbacks after we unmount.
	    callback = this.setNextCallback(callback);
	    this.setState(nextState, callback);
	  };

	  _proto.setNextCallback = function setNextCallback(callback) {
	    var _this4 = this;

	    var active = true;

	    this.nextCallback = function (event) {
	      if (active) {
	        active = false;
	        _this4.nextCallback = null;
	        callback(event);
	      }
	    };

	    this.nextCallback.cancel = function () {
	      active = false;
	    };

	    return this.nextCallback;
	  };

	  _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
	    this.setNextCallback(handler);
	    var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
	    var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;

	    if (!node || doesNotHaveTimeoutOrListener) {
	      setTimeout(this.nextCallback, 0);
	      return;
	    }

	    if (this.props.addEndListener) {
	      var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
	          maybeNode = _ref3[0],
	          maybeNextCallback = _ref3[1];

	      this.props.addEndListener(maybeNode, maybeNextCallback);
	    }

	    if (timeout != null) {
	      setTimeout(this.nextCallback, timeout);
	    }
	  };

	  _proto.render = function render() {
	    var status = this.state.status;

	    if (status === UNMOUNTED) {
	      return null;
	    }

	    var _this$props = this.props,
	        children = _this$props.children;
	        _this$props.in;
	        _this$props.mountOnEnter;
	        _this$props.unmountOnExit;
	        _this$props.appear;
	        _this$props.enter;
	        _this$props.exit;
	        _this$props.timeout;
	        _this$props.addEndListener;
	        _this$props.onEnter;
	        _this$props.onEntering;
	        _this$props.onEntered;
	        _this$props.onExit;
	        _this$props.onExiting;
	        _this$props.onExited;
	        _this$props.nodeRef;
	        var childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);

	    return (
	      /*#__PURE__*/
	      // allows for nested Transitions
	      React.createElement(TransitionGroupContext.Provider, {
	        value: null
	      }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))
	    );
	  };

	  return Transition;
	}(React.Component);

	Transition.contextType = TransitionGroupContext;
	Transition.propTypes = {}; // Name the function so it is clearer in the documentation

	function noop$1() {}

	Transition.defaultProps = {
	  in: false,
	  mountOnEnter: false,
	  unmountOnExit: false,
	  appear: false,
	  enter: true,
	  exit: true,
	  onEnter: noop$1,
	  onEntering: noop$1,
	  onEntered: noop$1,
	  onExit: noop$1,
	  onExiting: noop$1,
	  onExited: noop$1
	};
	Transition.UNMOUNTED = UNMOUNTED;
	Transition.EXITED = EXITED;
	Transition.ENTERING = ENTERING;
	Transition.ENTERED = ENTERED;
	Transition.EXITING = EXITING;

	var _addClass = function addClass$1(node, classes) {
	  return node && classes && classes.split(' ').forEach(function (c) {
	    return addClass(node, c);
	  });
	};

	var removeClass = function removeClass(node, classes) {
	  return node && classes && classes.split(' ').forEach(function (c) {
	    return removeClass$1(node, c);
	  });
	};
	/**
	 * A transition component inspired by the excellent
	 * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
	 * use it if you're using CSS transitions or animations. It's built upon the
	 * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
	 * component, so it inherits all of its props.
	 *
	 * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
	 * and `exit` states of the transition. The first class is applied and then a
	 * second `*-active` class in order to activate the CSS transition. After the
	 * transition, matching `*-done` class names are applied to persist the
	 * transition state.
	 *
	 * ```jsx
	 * function App() {
	 *   const [inProp, setInProp] = useState(false);
	 *   return (
	 *     <div>
	 *       <CSSTransition in={inProp} timeout={200} classNames="my-node">
	 *         <div>
	 *           {"I'll receive my-node-* classes"}
	 *         </div>
	 *       </CSSTransition>
	 *       <button type="button" onClick={() => setInProp(true)}>
	 *         Click to Enter
	 *       </button>
	 *     </div>
	 *   );
	 * }
	 * ```
	 *
	 * When the `in` prop is set to `true`, the child component will first receive
	 * the class `example-enter`, then the `example-enter-active` will be added in
	 * the next tick. `CSSTransition` [forces a
	 * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
	 * between before adding the `example-enter-active`. This is an important trick
	 * because it allows us to transition between `example-enter` and
	 * `example-enter-active` even though they were added immediately one after
	 * another. Most notably, this is what makes it possible for us to animate
	 * _appearance_.
	 *
	 * ```css
	 * .my-node-enter {
	 *   opacity: 0;
	 * }
	 * .my-node-enter-active {
	 *   opacity: 1;
	 *   transition: opacity 200ms;
	 * }
	 * .my-node-exit {
	 *   opacity: 1;
	 * }
	 * .my-node-exit-active {
	 *   opacity: 0;
	 *   transition: opacity 200ms;
	 * }
	 * ```
	 *
	 * `*-active` classes represent which styles you want to animate **to**, so it's
	 * important to add `transition` declaration only to them, otherwise transitions
	 * might not behave as intended! This might not be obvious when the transitions
	 * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in
	 * the example above (minus `transition`), but it becomes apparent in more
	 * complex transitions.
	 *
	 * **Note**: If you're using the
	 * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
	 * prop, make sure to define styles for `.appear-*` classes as well.
	 */


	var CSSTransition = /*#__PURE__*/function (_React$Component) {
	  _inheritsLoose$1(CSSTransition, _React$Component);

	  function CSSTransition() {
	    var _this;

	    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
	      args[_key] = arguments[_key];
	    }

	    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
	    _this.appliedClasses = {
	      appear: {},
	      enter: {},
	      exit: {}
	    };

	    _this.onEnter = function (maybeNode, maybeAppearing) {
	      var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),
	          node = _this$resolveArgument[0],
	          appearing = _this$resolveArgument[1];

	      _this.removeClasses(node, 'exit');

	      _this.addClass(node, appearing ? 'appear' : 'enter', 'base');

	      if (_this.props.onEnter) {
	        _this.props.onEnter(maybeNode, maybeAppearing);
	      }
	    };

	    _this.onEntering = function (maybeNode, maybeAppearing) {
	      var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),
	          node = _this$resolveArgument2[0],
	          appearing = _this$resolveArgument2[1];

	      var type = appearing ? 'appear' : 'enter';

	      _this.addClass(node, type, 'active');

	      if (_this.props.onEntering) {
	        _this.props.onEntering(maybeNode, maybeAppearing);
	      }
	    };

	    _this.onEntered = function (maybeNode, maybeAppearing) {
	      var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),
	          node = _this$resolveArgument3[0],
	          appearing = _this$resolveArgument3[1];

	      var type = appearing ? 'appear' : 'enter';

	      _this.removeClasses(node, type);

	      _this.addClass(node, type, 'done');

	      if (_this.props.onEntered) {
	        _this.props.onEntered(maybeNode, maybeAppearing);
	      }
	    };

	    _this.onExit = function (maybeNode) {
	      var _this$resolveArgument4 = _this.resolveArguments(maybeNode),
	          node = _this$resolveArgument4[0];

	      _this.removeClasses(node, 'appear');

	      _this.removeClasses(node, 'enter');

	      _this.addClass(node, 'exit', 'base');

	      if (_this.props.onExit) {
	        _this.props.onExit(maybeNode);
	      }
	    };

	    _this.onExiting = function (maybeNode) {
	      var _this$resolveArgument5 = _this.resolveArguments(maybeNode),
	          node = _this$resolveArgument5[0];

	      _this.addClass(node, 'exit', 'active');

	      if (_this.props.onExiting) {
	        _this.props.onExiting(maybeNode);
	      }
	    };

	    _this.onExited = function (maybeNode) {
	      var _this$resolveArgument6 = _this.resolveArguments(maybeNode),
	          node = _this$resolveArgument6[0];

	      _this.removeClasses(node, 'exit');

	      _this.addClass(node, 'exit', 'done');

	      if (_this.props.onExited) {
	        _this.props.onExited(maybeNode);
	      }
	    };

	    _this.resolveArguments = function (maybeNode, maybeAppearing) {
	      return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
	      : [maybeNode, maybeAppearing];
	    };

	    _this.getClassNames = function (type) {
	      var classNames = _this.props.classNames;
	      var isStringClassNames = typeof classNames === 'string';
	      var prefix = isStringClassNames && classNames ? classNames + "-" : '';
	      var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type];
	      var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"];
	      var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"];
	      return {
	        baseClassName: baseClassName,
	        activeClassName: activeClassName,
	        doneClassName: doneClassName
	      };
	    };

	    return _this;
	  }

	  var _proto = CSSTransition.prototype;

	  _proto.addClass = function addClass(node, type, phase) {
	    var className = this.getClassNames(type)[phase + "ClassName"];

	    var _this$getClassNames = this.getClassNames('enter'),
	        doneClassName = _this$getClassNames.doneClassName;

	    if (type === 'appear' && phase === 'done' && doneClassName) {
	      className += " " + doneClassName;
	    } // This is for to force a repaint,
	    // which is necessary in order to transition styles when adding a class name.


	    if (phase === 'active') {
	      /* eslint-disable no-unused-expressions */
	      node && node.scrollTop;
	    }

	    if (className) {
	      this.appliedClasses[type][phase] = className;

	      _addClass(node, className);
	    }
	  };

	  _proto.removeClasses = function removeClasses(node, type) {
	    var _this$appliedClasses$ = this.appliedClasses[type],
	        baseClassName = _this$appliedClasses$.base,
	        activeClassName = _this$appliedClasses$.active,
	        doneClassName = _this$appliedClasses$.done;
	    this.appliedClasses[type] = {};

	    if (baseClassName) {
	      removeClass(node, baseClassName);
	    }

	    if (activeClassName) {
	      removeClass(node, activeClassName);
	    }

	    if (doneClassName) {
	      removeClass(node, doneClassName);
	    }
	  };

	  _proto.render = function render() {
	    var _this$props = this.props;
	        _this$props.classNames;
	        var props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);

	    return /*#__PURE__*/React.createElement(Transition, _extends$3({}, props, {
	      onEnter: this.onEnter,
	      onEntered: this.onEntered,
	      onEntering: this.onEntering,
	      onExit: this.onExit,
	      onExiting: this.onExiting,
	      onExited: this.onExited
	    }));
	  };

	  return CSSTransition;
	}(React.Component);

	CSSTransition.defaultProps = {
	  classNames: ''
	};
	CSSTransition.propTypes = {};

	function _assertThisInitialized$1(self) {
	  if (self === void 0) {
	    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
	  }

	  return self;
	}

	/**
	 * Given `this.props.children`, return an object mapping key to child.
	 *
	 * @param {*} children `this.props.children`
	 * @return {object} Mapping of key to child
	 */

	function getChildMapping(children, mapFn) {
	  var mapper = function mapper(child) {
	    return mapFn && react.exports.isValidElement(child) ? mapFn(child) : child;
	  };

	  var result = Object.create(null);
	  if (children) react.exports.Children.map(children, function (c) {
	    return c;
	  }).forEach(function (child) {
	    // run the map function here instead so that the key is the computed one
	    result[child.key] = mapper(child);
	  });
	  return result;
	}
	/**
	 * When you're adding or removing children some may be added or removed in the
	 * same render pass. We want to show *both* since we want to simultaneously
	 * animate elements in and out. This function takes a previous set of keys
	 * and a new set of keys and merges them with its best guess of the correct
	 * ordering. In the future we may expose some of the utilities in
	 * ReactMultiChild to make this easy, but for now React itself does not
	 * directly have this concept of the union of prevChildren and nextChildren
	 * so we implement it here.
	 *
	 * @param {object} prev prev children as returned from
	 * `ReactTransitionChildMapping.getChildMapping()`.
	 * @param {object} next next children as returned from
	 * `ReactTransitionChildMapping.getChildMapping()`.
	 * @return {object} a key set that contains all keys in `prev` and all keys
	 * in `next` in a reasonable order.
	 */

	function mergeChildMappings(prev, next) {
	  prev = prev || {};
	  next = next || {};

	  function getValueForKey(key) {
	    return key in next ? next[key] : prev[key];
	  } // For each key of `next`, the list of keys to insert before that key in
	  // the combined list


	  var nextKeysPending = Object.create(null);
	  var pendingKeys = [];

	  for (var prevKey in prev) {
	    if (prevKey in next) {
	      if (pendingKeys.length) {
	        nextKeysPending[prevKey] = pendingKeys;
	        pendingKeys = [];
	      }
	    } else {
	      pendingKeys.push(prevKey);
	    }
	  }

	  var i;
	  var childMapping = {};

	  for (var nextKey in next) {
	    if (nextKeysPending[nextKey]) {
	      for (i = 0; i < nextKeysPending[nextKey].length; i++) {
	        var pendingNextKey = nextKeysPending[nextKey][i];
	        childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
	      }
	    }

	    childMapping[nextKey] = getValueForKey(nextKey);
	  } // Finally, add the keys which didn't appear before any key in `next`


	  for (i = 0; i < pendingKeys.length; i++) {
	    childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
	  }

	  return childMapping;
	}

	function getProp(child, prop, props) {
	  return props[prop] != null ? props[prop] : child.props[prop];
	}

	function getInitialChildMapping(props, onExited) {
	  return getChildMapping(props.children, function (child) {
	    return react.exports.cloneElement(child, {
	      onExited: onExited.bind(null, child),
	      in: true,
	      appear: getProp(child, 'appear', props),
	      enter: getProp(child, 'enter', props),
	      exit: getProp(child, 'exit', props)
	    });
	  });
	}
	function getNextChildMapping(nextProps, prevChildMapping, onExited) {
	  var nextChildMapping = getChildMapping(nextProps.children);
	  var children = mergeChildMappings(prevChildMapping, nextChildMapping);
	  Object.keys(children).forEach(function (key) {
	    var child = children[key];
	    if (!react.exports.isValidElement(child)) return;
	    var hasPrev = (key in prevChildMapping);
	    var hasNext = (key in nextChildMapping);
	    var prevChild = prevChildMapping[key];
	    var isLeaving = react.exports.isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)

	    if (hasNext && (!hasPrev || isLeaving)) {
	      // console.log('entering', key)
	      children[key] = react.exports.cloneElement(child, {
	        onExited: onExited.bind(null, child),
	        in: true,
	        exit: getProp(child, 'exit', nextProps),
	        enter: getProp(child, 'enter', nextProps)
	      });
	    } else if (!hasNext && hasPrev && !isLeaving) {
	      // item is old (exiting)
	      // console.log('leaving', key)
	      children[key] = react.exports.cloneElement(child, {
	        in: false
	      });
	    } else if (hasNext && hasPrev && react.exports.isValidElement(prevChild)) {
	      // item hasn't changed transition states
	      // copy over the last transition props;
	      // console.log('unchanged', key)
	      children[key] = react.exports.cloneElement(child, {
	        onExited: onExited.bind(null, child),
	        in: prevChild.props.in,
	        exit: getProp(child, 'exit', nextProps),
	        enter: getProp(child, 'enter', nextProps)
	      });
	    }
	  });
	  return children;
	}

	var values = Object.values || function (obj) {
	  return Object.keys(obj).map(function (k) {
	    return obj[k];
	  });
	};

	var defaultProps = {
	  component: 'div',
	  childFactory: function childFactory(child) {
	    return child;
	  }
	};
	/**
	 * The `<TransitionGroup>` component manages a set of transition components
	 * (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
	 * components, `<TransitionGroup>` is a state machine for managing the mounting
	 * and unmounting of components over time.
	 *
	 * Consider the example below. As items are removed or added to the TodoList the
	 * `in` prop is toggled automatically by the `<TransitionGroup>`.
	 *
	 * Note that `<TransitionGroup>`  does not define any animation behavior!
	 * Exactly _how_ a list item animates is up to the individual transition
	 * component. This means you can mix and match animations across different list
	 * items.
	 */

	var TransitionGroup = /*#__PURE__*/function (_React$Component) {
	  _inheritsLoose$1(TransitionGroup, _React$Component);

	  function TransitionGroup(props, context) {
	    var _this;

	    _this = _React$Component.call(this, props, context) || this;

	    var handleExited = _this.handleExited.bind(_assertThisInitialized$1(_this)); // Initial children should all be entering, dependent on appear


	    _this.state = {
	      contextValue: {
	        isMounting: true
	      },
	      handleExited: handleExited,
	      firstRender: true
	    };
	    return _this;
	  }

	  var _proto = TransitionGroup.prototype;

	  _proto.componentDidMount = function componentDidMount() {
	    this.mounted = true;
	    this.setState({
	      contextValue: {
	        isMounting: false
	      }
	    });
	  };

	  _proto.componentWillUnmount = function componentWillUnmount() {
	    this.mounted = false;
	  };

	  TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
	    var prevChildMapping = _ref.children,
	        handleExited = _ref.handleExited,
	        firstRender = _ref.firstRender;
	    return {
	      children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
	      firstRender: false
	    };
	  } // node is `undefined` when user provided `nodeRef` prop
	  ;

	  _proto.handleExited = function handleExited(child, node) {
	    var currentChildMapping = getChildMapping(this.props.children);
	    if (child.key in currentChildMapping) return;

	    if (child.props.onExited) {
	      child.props.onExited(node);
	    }

	    if (this.mounted) {
	      this.setState(function (state) {
	        var children = _extends$3({}, state.children);

	        delete children[child.key];
	        return {
	          children: children
	        };
	      });
	    }
	  };

	  _proto.render = function render() {
	    var _this$props = this.props,
	        Component = _this$props.component,
	        childFactory = _this$props.childFactory,
	        props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);

	    var contextValue = this.state.contextValue;
	    var children = values(this.state.children).map(childFactory);
	    delete props.appear;
	    delete props.enter;
	    delete props.exit;

	    if (Component === null) {
	      return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {
	        value: contextValue
	      }, children);
	    }

	    return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {
	      value: contextValue
	    }, /*#__PURE__*/React.createElement(Component, props, children));
	  };

	  return TransitionGroup;
	}(React.Component);

	TransitionGroup.propTypes = {};
	TransitionGroup.defaultProps = defaultProps;

	/**
	 * The `<ReplaceTransition>` component is a specialized `Transition` component
	 * that animates between two children.
	 *
	 * ```jsx
	 * <ReplaceTransition in>
	 *   <Fade><div>I appear first</div></Fade>
	 *   <Fade><div>I replace the above</div></Fade>
	 * </ReplaceTransition>
	 * ```
	 */

	var ReplaceTransition = /*#__PURE__*/function (_React$Component) {
	  _inheritsLoose$1(ReplaceTransition, _React$Component);

	  function ReplaceTransition() {
	    var _this;

	    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
	      _args[_key] = arguments[_key];
	    }

	    _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;

	    _this.handleEnter = function () {
	      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
	        args[_key2] = arguments[_key2];
	      }

	      return _this.handleLifecycle('onEnter', 0, args);
	    };

	    _this.handleEntering = function () {
	      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
	        args[_key3] = arguments[_key3];
	      }

	      return _this.handleLifecycle('onEntering', 0, args);
	    };

	    _this.handleEntered = function () {
	      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
	        args[_key4] = arguments[_key4];
	      }

	      return _this.handleLifecycle('onEntered', 0, args);
	    };

	    _this.handleExit = function () {
	      for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
	        args[_key5] = arguments[_key5];
	      }

	      return _this.handleLifecycle('onExit', 1, args);
	    };

	    _this.handleExiting = function () {
	      for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
	        args[_key6] = arguments[_key6];
	      }

	      return _this.handleLifecycle('onExiting', 1, args);
	    };

	    _this.handleExited = function () {
	      for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
	        args[_key7] = arguments[_key7];
	      }

	      return _this.handleLifecycle('onExited', 1, args);
	    };

	    return _this;
	  }

	  var _proto = ReplaceTransition.prototype;

	  _proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) {
	    var _child$props;

	    var children = this.props.children;
	    var child = React.Children.toArray(children)[idx];
	    if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);

	    if (this.props[handler]) {
	      var maybeNode = child.props.nodeRef ? undefined : ReactDOM.findDOMNode(this);
	      this.props[handler](maybeNode);
	    }
	  };

	  _proto.render = function render() {
	    var _this$props = this.props,
	        children = _this$props.children,
	        inProp = _this$props.in,
	        props = _objectWithoutPropertiesLoose(_this$props, ["children", "in"]);

	    var _React$Children$toArr = React.Children.toArray(children),
	        first = _React$Children$toArr[0],
	        second = _React$Children$toArr[1];

	    delete props.onEnter;
	    delete props.onEntering;
	    delete props.onEntered;
	    delete props.onExit;
	    delete props.onExiting;
	    delete props.onExited;
	    return /*#__PURE__*/React.createElement(TransitionGroup, props, inProp ? React.cloneElement(first, {
	      key: 'first',
	      onEnter: this.handleEnter,
	      onEntering: this.handleEntering,
	      onEntered: this.handleEntered
	    }) : React.cloneElement(second, {
	      key: 'second',
	      onEnter: this.handleExit,
	      onEntering: this.handleExiting,
	      onEntered: this.handleExited
	    }));
	  };

	  return ReplaceTransition;
	}(React.Component);

	ReplaceTransition.propTypes = {};

	var _leaveRenders, _enterRenders;

	function areChildrenDifferent(oldChildren, newChildren) {
	  if (oldChildren === newChildren) return false;

	  if (React.isValidElement(oldChildren) && React.isValidElement(newChildren) && oldChildren.key != null && oldChildren.key === newChildren.key) {
	    return false;
	  }

	  return true;
	}
	/**
	 * Enum of modes for SwitchTransition component
	 * @enum { string }
	 */


	var modes = {
	  out: 'out-in',
	  in: 'in-out'
	};

	var callHook = function callHook(element, name, cb) {
	  return function () {
	    var _element$props;

	    element.props[name] && (_element$props = element.props)[name].apply(_element$props, arguments);
	    cb();
	  };
	};

	var leaveRenders = (_leaveRenders = {}, _leaveRenders[modes.out] = function (_ref) {
	  var current = _ref.current,
	      changeState = _ref.changeState;
	  return React.cloneElement(current, {
	    in: false,
	    onExited: callHook(current, 'onExited', function () {
	      changeState(ENTERING, null);
	    })
	  });
	}, _leaveRenders[modes.in] = function (_ref2) {
	  var current = _ref2.current,
	      changeState = _ref2.changeState,
	      children = _ref2.children;
	  return [current, React.cloneElement(children, {
	    in: true,
	    onEntered: callHook(children, 'onEntered', function () {
	      changeState(ENTERING);
	    })
	  })];
	}, _leaveRenders);
	var enterRenders = (_enterRenders = {}, _enterRenders[modes.out] = function (_ref3) {
	  var children = _ref3.children,
	      changeState = _ref3.changeState;
	  return React.cloneElement(children, {
	    in: true,
	    onEntered: callHook(children, 'onEntered', function () {
	      changeState(ENTERED, React.cloneElement(children, {
	        in: true
	      }));
	    })
	  });
	}, _enterRenders[modes.in] = function (_ref4) {
	  var current = _ref4.current,
	      children = _ref4.children,
	      changeState = _ref4.changeState;
	  return [React.cloneElement(current, {
	    in: false,
	    onExited: callHook(current, 'onExited', function () {
	      changeState(ENTERED, React.cloneElement(children, {
	        in: true
	      }));
	    })
	  }), React.cloneElement(children, {
	    in: true
	  })];
	}, _enterRenders);
	/**
	 * A transition component inspired by the [vue transition modes](https://vuejs.org/v2/guide/transitions.html#Transition-Modes).
	 * You can use it when you want to control the render between state transitions.
	 * Based on the selected mode and the child's key which is the `Transition` or `CSSTransition` component, the `SwitchTransition` makes a consistent transition between them.
	 *
	 * If the `out-in` mode is selected, the `SwitchTransition` waits until the old child leaves and then inserts a new child.
	 * If the `in-out` mode is selected, the `SwitchTransition` inserts a new child first, waits for the new child to enter and then removes the old child.
	 *
	 * **Note**: If you want the animation to happen simultaneously
	 * (that is, to have the old child removed and a new child inserted **at the same time**),
	 * you should use
	 * [`TransitionGroup`](https://reactcommunity.org/react-transition-group/transition-group)
	 * instead.
	 *
	 * ```jsx
	 * function App() {
	 *  const [state, setState] = useState(false);
	 *  return (
	 *    <SwitchTransition>
	 *      <CSSTransition
	 *        key={state ? "Goodbye, world!" : "Hello, world!"}
	 *        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
	 *        classNames='fade'
	 *      >
	 *        <button onClick={() => setState(state => !state)}>
	 *          {state ? "Goodbye, world!" : "Hello, world!"}
	 *        </button>
	 *      </CSSTransition>
	 *    </SwitchTransition>
	 *  );
	 * }
	 * ```
	 *
	 * ```css
	 * .fade-enter{
	 *    opacity: 0;
	 * }
	 * .fade-exit{
	 *    opacity: 1;
	 * }
	 * .fade-enter-active{
	 *    opacity: 1;
	 * }
	 * .fade-exit-active{
	 *    opacity: 0;
	 * }
	 * .fade-enter-active,
	 * .fade-exit-active{
	 *    transition: opacity 500ms;
	 * }
	 * ```
	 */

	var SwitchTransition = /*#__PURE__*/function (_React$Component) {
	  _inheritsLoose$1(SwitchTransition, _React$Component);

	  function SwitchTransition() {
	    var _this;

	    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
	      args[_key] = arguments[_key];
	    }

	    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
	    _this.state = {
	      status: ENTERED,
	      current: null
	    };
	    _this.appeared = false;

	    _this.changeState = function (status, current) {
	      if (current === void 0) {
	        current = _this.state.current;
	      }

	      _this.setState({
	        status: status,
	        current: current
	      });
	    };

	    return _this;
	  }

	  var _proto = SwitchTransition.prototype;

	  _proto.componentDidMount = function componentDidMount() {
	    this.appeared = true;
	  };

	  SwitchTransition.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
	    if (props.children == null) {
	      return {
	        current: null
	      };
	    }

	    if (state.status === ENTERING && props.mode === modes.in) {
	      return {
	        status: ENTERING
	      };
	    }

	    if (state.current && areChildrenDifferent(state.current, props.children)) {
	      return {
	        status: EXITING
	      };
	    }

	    return {
	      current: React.cloneElement(props.children, {
	        in: true
	      })
	    };
	  };

	  _proto.render = function render() {
	    var _this$props = this.props,
	        children = _this$props.children,
	        mode = _this$props.mode,
	        _this$state = this.state,
	        status = _this$state.status,
	        current = _this$state.current;
	    var data = {
	      children: children,
	      current: current,
	      changeState: this.changeState,
	      status: status
	    };
	    var component;

	    switch (status) {
	      case ENTERING:
	        component = enterRenders[mode](data);
	        break;

	      case EXITING:
	        component = leaveRenders[mode](data);
	        break;

	      case ENTERED:
	        component = current;
	    }

	    return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {
	      value: {
	        isMounting: !this.appeared
	      }
	    }, component);
	  };

	  return SwitchTransition;
	}(React.Component);

	SwitchTransition.propTypes = {};
	SwitchTransition.defaultProps = {
	  mode: modes.out
	};

	var reflow = function reflow(node) {
	  return node.scrollTop;
	};
	function getTransitionProps(props, options) {
	  var timeout = props.timeout,
	      _props$style = props.style,
	      style = _props$style === void 0 ? {} : _props$style;
	  return {
	    duration: style.transitionDuration || typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,
	    delay: style.transitionDelay
	  };
	}

	var styles$1Q = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      height: 0,
	      overflow: 'hidden',
	      transition: theme.transitions.create('height')
	    },

	    /* Styles applied to the root element when the transition has entered. */
	    entered: {
	      height: 'auto',
	      overflow: 'visible'
	    },

	    /* Styles applied to the root element when the transition has exited and `collapsedSize` != 0px. */
	    hidden: {
	      visibility: 'hidden'
	    },

	    /* Styles applied to the outer wrapper element. */
	    wrapper: {
	      // Hack to get children with a negative margin to not falsify the height computation.
	      display: 'flex'
	    },

	    /* Styles applied to the inner wrapper element. */
	    wrapperInner: {
	      width: '100%'
	    }
	  };
	};
	/**
	 * The Collapse transition is used by the
	 * [Vertical Stepper](/components/steppers/#vertical-stepper) StepContent component.
	 * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
	 */

	var Collapse = /*#__PURE__*/react.exports.forwardRef(function Collapse(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      collapsedHeight = props.collapsedHeight,
	      _props$collapsedSize = props.collapsedSize,
	      collapsedSizeProp = _props$collapsedSize === void 0 ? '0px' : _props$collapsedSize,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      _props$disableStrictM = props.disableStrictModeCompat,
	      disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,
	      inProp = props.in,
	      onEnter = props.onEnter,
	      onEntered = props.onEntered,
	      onEntering = props.onEntering,
	      onExit = props.onExit,
	      onExited = props.onExited,
	      onExiting = props.onExiting,
	      style = props.style,
	      _props$timeout = props.timeout,
	      timeout = _props$timeout === void 0 ? duration.standard : _props$timeout,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "collapsedHeight", "collapsedSize", "component", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);

	  var theme = useTheme$1();
	  var timer = react.exports.useRef();
	  var wrapperRef = react.exports.useRef(null);
	  var autoTransitionDuration = react.exports.useRef();
	  var collapsedSize = typeof (collapsedHeight || collapsedSizeProp) === 'number' ? "".concat(collapsedHeight || collapsedSizeProp, "px") : collapsedHeight || collapsedSizeProp;
	  react.exports.useEffect(function () {
	    return function () {
	      clearTimeout(timer.current);
	    };
	  }, []);
	  var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
	  var nodeRef = react.exports.useRef(null);
	  var handleRef = useForkRef(ref, enableStrictModeCompat ? nodeRef : undefined);

	  var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
	    return function (nodeOrAppearing, maybeAppearing) {
	      if (callback) {
	        var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],
	            _ref2 = _slicedToArray(_ref, 2),
	            node = _ref2[0],
	            isAppearing = _ref2[1]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.


	        if (isAppearing === undefined) {
	          callback(node);
	        } else {
	          callback(node, isAppearing);
	        }
	      }
	    };
	  };

	  var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
	    node.style.height = collapsedSize;

	    if (onEnter) {
	      onEnter(node, isAppearing);
	    }
	  });
	  var handleEntering = normalizedTransitionCallback(function (node, isAppearing) {
	    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;

	    var _getTransitionProps = getTransitionProps({
	      style: style,
	      timeout: timeout
	    }, {
	      mode: 'enter'
	    }),
	        transitionDuration = _getTransitionProps.duration;

	    if (timeout === 'auto') {
	      var duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
	      node.style.transitionDuration = "".concat(duration2, "ms");
	      autoTransitionDuration.current = duration2;
	    } else {
	      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : "".concat(transitionDuration, "ms");
	    }

	    node.style.height = "".concat(wrapperHeight, "px");

	    if (onEntering) {
	      onEntering(node, isAppearing);
	    }
	  });
	  var handleEntered = normalizedTransitionCallback(function (node, isAppearing) {
	    node.style.height = 'auto';

	    if (onEntered) {
	      onEntered(node, isAppearing);
	    }
	  });
	  var handleExit = normalizedTransitionCallback(function (node) {
	    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
	    node.style.height = "".concat(wrapperHeight, "px");

	    if (onExit) {
	      onExit(node);
	    }
	  });
	  var handleExited = normalizedTransitionCallback(onExited);
	  var handleExiting = normalizedTransitionCallback(function (node) {
	    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;

	    var _getTransitionProps2 = getTransitionProps({
	      style: style,
	      timeout: timeout
	    }, {
	      mode: 'exit'
	    }),
	        transitionDuration = _getTransitionProps2.duration;

	    if (timeout === 'auto') {
	      var duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
	      node.style.transitionDuration = "".concat(duration2, "ms");
	      autoTransitionDuration.current = duration2;
	    } else {
	      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : "".concat(transitionDuration, "ms");
	    }

	    node.style.height = collapsedSize;

	    if (onExiting) {
	      onExiting(node);
	    }
	  });

	  var addEndListener = function addEndListener(nodeOrNext, maybeNext) {
	    var next = enableStrictModeCompat ? nodeOrNext : maybeNext;

	    if (timeout === 'auto') {
	      timer.current = setTimeout(next, autoTransitionDuration.current || 0);
	    }
	  };

	  return /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    in: inProp,
	    onEnter: handleEnter,
	    onEntered: handleEntered,
	    onEntering: handleEntering,
	    onExit: handleExit,
	    onExited: handleExited,
	    onExiting: handleExiting,
	    addEndListener: addEndListener,
	    nodeRef: enableStrictModeCompat ? nodeRef : undefined,
	    timeout: timeout === 'auto' ? null : timeout
	  }, other), function (state, childProps) {
	    return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	      className: clsx(classes.root, classes.container, className, {
	        'entered': classes.entered,
	        'exited': !inProp && collapsedSize === '0px' && classes.hidden
	      }[state]),
	      style: _extends$5({
	        minHeight: collapsedSize
	      }, style),
	      ref: handleRef
	    }, childProps), /*#__PURE__*/react.exports.createElement("div", {
	      className: classes.wrapper,
	      ref: wrapperRef
	    }, /*#__PURE__*/react.exports.createElement("div", {
	      className: classes.wrapperInner
	    }, children)));
	  });
	});
	Collapse.muiSupportAuto = true;
	var Collapse$1 = withStyles(styles$1Q, {
	  name: 'MuiCollapse'
	})(Collapse);

	var styles$1P = function styles(theme) {
	  var elevations = {};
	  theme.shadows.forEach(function (shadow, index) {
	    elevations["elevation".concat(index)] = {
	      boxShadow: shadow
	    };
	  });
	  return _extends$5({
	    /* Styles applied to the root element. */
	    root: {
	      backgroundColor: theme.palette.background.paper,
	      color: theme.palette.text.primary,
	      transition: theme.transitions.create('box-shadow')
	    },

	    /* Styles applied to the root element if `square={false}`. */
	    rounded: {
	      borderRadius: theme.shape.borderRadius
	    },

	    /* Styles applied to the root element if `variant="outlined"`. */
	    outlined: {
	      border: "1px solid ".concat(theme.palette.divider)
	    }
	  }, elevations);
	};
	var Paper = /*#__PURE__*/react.exports.forwardRef(function Paper(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      _props$square = props.square,
	      square = _props$square === void 0 ? false : _props$square,
	      _props$elevation = props.elevation,
	      elevation = _props$elevation === void 0 ? 1 : _props$elevation,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'elevation' : _props$variant,
	      other = _objectWithoutProperties(props, ["classes", "className", "component", "square", "elevation", "variant"]);

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className, variant === 'outlined' ? classes.outlined : classes["elevation".concat(elevation)], !square && classes.rounded),
	    ref: ref
	  }, other));
	});
	var Paper$1 = withStyles(styles$1P, {
	  name: 'MuiPaper'
	})(Paper);

	/**
	 * @ignore - internal component.
	 * @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
	 */

	var AccordionContext = react.exports.createContext({});

	var styles$1O = function styles(theme) {
	  var transition = {
	    duration: theme.transitions.duration.shortest
	  };
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'relative',
	      transition: theme.transitions.create(['margin'], transition),
	      '&:before': {
	        position: 'absolute',
	        left: 0,
	        top: -1,
	        right: 0,
	        height: 1,
	        content: '""',
	        opacity: 1,
	        backgroundColor: theme.palette.divider,
	        transition: theme.transitions.create(['opacity', 'background-color'], transition)
	      },
	      '&:first-child': {
	        '&:before': {
	          display: 'none'
	        }
	      },
	      '&$expanded': {
	        margin: '16px 0',
	        '&:first-child': {
	          marginTop: 0
	        },
	        '&:last-child': {
	          marginBottom: 0
	        },
	        '&:before': {
	          opacity: 0
	        }
	      },
	      '&$expanded + &': {
	        '&:before': {
	          display: 'none'
	        }
	      },
	      '&$disabled': {
	        backgroundColor: theme.palette.action.disabledBackground
	      }
	    },

	    /* Styles applied to the root element if `square={false}`. */
	    rounded: {
	      borderRadius: 0,
	      '&:first-child': {
	        borderTopLeftRadius: theme.shape.borderRadius,
	        borderTopRightRadius: theme.shape.borderRadius
	      },
	      '&:last-child': {
	        borderBottomLeftRadius: theme.shape.borderRadius,
	        borderBottomRightRadius: theme.shape.borderRadius,
	        // Fix a rendering issue on Edge
	        '@supports (-ms-ime-align: auto)': {
	          borderBottomLeftRadius: 0,
	          borderBottomRightRadius: 0
	        }
	      }
	    },

	    /* Styles applied to the root element if `expanded={true}`. */
	    expanded: {},

	    /* Styles applied to the root element if `disabled={true}`. */
	    disabled: {}
	  };
	};
	var Accordion = /*#__PURE__*/react.exports.forwardRef(function Accordion(props, ref) {
	  var childrenProp = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$defaultExpande = props.defaultExpanded,
	      defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      expandedProp = props.expanded,
	      onChange = props.onChange,
	      _props$square = props.square,
	      square = _props$square === void 0 ? false : _props$square,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Collapse$1 : _props$TransitionComp,
	      TransitionProps = props.TransitionProps,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "defaultExpanded", "disabled", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"]);

	  var _useControlled = useControlled({
	    controlled: expandedProp,
	    default: defaultExpanded,
	    name: 'Accordion',
	    state: 'expanded'
	  }),
	      _useControlled2 = _slicedToArray(_useControlled, 2),
	      expanded = _useControlled2[0],
	      setExpandedState = _useControlled2[1];

	  var handleChange = react.exports.useCallback(function (event) {
	    setExpandedState(!expanded);

	    if (onChange) {
	      onChange(event, !expanded);
	    }
	  }, [expanded, onChange, setExpandedState]);

	  var _React$Children$toArr = react.exports.Children.toArray(childrenProp),
	      _React$Children$toArr2 = _toArray(_React$Children$toArr),
	      summary = _React$Children$toArr2[0],
	      children = _React$Children$toArr2.slice(1);

	  var contextValue = react.exports.useMemo(function () {
	    return {
	      expanded: expanded,
	      disabled: disabled,
	      toggle: handleChange
	    };
	  }, [expanded, disabled, handleChange]);
	  return /*#__PURE__*/react.exports.createElement(Paper$1, _extends$5({
	    className: clsx(classes.root, className, expanded && classes.expanded, disabled && classes.disabled, !square && classes.rounded),
	    ref: ref,
	    square: square
	  }, other), /*#__PURE__*/react.exports.createElement(AccordionContext.Provider, {
	    value: contextValue
	  }, summary), /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    in: expanded,
	    timeout: "auto"
	  }, TransitionProps), /*#__PURE__*/react.exports.createElement("div", {
	    "aria-labelledby": summary.props.id,
	    id: summary.props['aria-controls'],
	    role: "region"
	  }, children)));
	});
	withStyles(styles$1O, {
	  name: 'MuiAccordion'
	})(Accordion);

	var styles$1N = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'flex',
	    alignItems: 'center',
	    padding: 8,
	    justifyContent: 'flex-end'
	  },

	  /* Styles applied to the root element if `disableSpacing={false}`. */
	  spacing: {
	    '& > :not(:first-child)': {
	      marginLeft: 8
	    }
	  }
	};
	var AccordionActions = /*#__PURE__*/react.exports.forwardRef(function AccordionActions(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$disableSpacing = props.disableSpacing,
	      disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,
	      other = _objectWithoutProperties(props, ["classes", "className", "disableSpacing"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, !disableSpacing && classes.spacing),
	    ref: ref
	  }, other));
	});
	withStyles(styles$1N, {
	  name: 'MuiAccordionActions'
	})(AccordionActions);

	var styles$1M = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'flex',
	      padding: theme.spacing(1, 2, 2)
	    }
	  };
	};
	var AccordionDetails = /*#__PURE__*/react.exports.forwardRef(function AccordionDetails(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      other = _objectWithoutProperties(props, ["classes", "className"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other));
	});
	withStyles(styles$1M, {
	  name: 'MuiAccordionDetails'
	})(AccordionDetails);

	function _arrayWithoutHoles(arr) {
	  if (Array.isArray(arr)) {
	    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
	      arr2[i] = arr[i];
	    }

	    return arr2;
	  }
	}

	function _nonIterableSpread() {
	  throw new TypeError("Invalid attempt to spread non-iterable instance");
	}

	function _toConsumableArray(arr) {
	  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
	}

	var useEnhancedEffect$7 = typeof window === 'undefined' ? react.exports.useEffect : react.exports.useLayoutEffect;
	/**
	 * @ignore - internal component.
	 */

	function Ripple(props) {
	  var classes = props.classes,
	      _props$pulsate = props.pulsate,
	      pulsate = _props$pulsate === void 0 ? false : _props$pulsate,
	      rippleX = props.rippleX,
	      rippleY = props.rippleY,
	      rippleSize = props.rippleSize,
	      inProp = props.in,
	      _props$onExited = props.onExited,
	      onExited = _props$onExited === void 0 ? function () {} : _props$onExited,
	      timeout = props.timeout;

	  var _React$useState = react.exports.useState(false),
	      leaving = _React$useState[0],
	      setLeaving = _React$useState[1];

	  var rippleClassName = clsx(classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
	  var rippleStyles = {
	    width: rippleSize,
	    height: rippleSize,
	    top: -(rippleSize / 2) + rippleY,
	    left: -(rippleSize / 2) + rippleX
	  };
	  var childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
	  var handleExited = useEventCallback(onExited); // Ripple is used for user feedback (e.g. click or press) so we want to apply styles with the highest priority

	  useEnhancedEffect$7(function () {
	    if (!inProp) {
	      // react-transition-group#onExit
	      setLeaving(true); // react-transition-group#onExited

	      var timeoutId = setTimeout(handleExited, timeout);
	      return function () {
	        clearTimeout(timeoutId);
	      };
	    }

	    return undefined;
	  }, [handleExited, inProp, timeout]);
	  return /*#__PURE__*/react.exports.createElement("span", {
	    className: rippleClassName,
	    style: rippleStyles
	  }, /*#__PURE__*/react.exports.createElement("span", {
	    className: childClassName
	  }));
	}

	var DURATION = 550;
	var DELAY_RIPPLE = 80;
	var styles$1L = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      overflow: 'hidden',
	      pointerEvents: 'none',
	      position: 'absolute',
	      zIndex: 0,
	      top: 0,
	      right: 0,
	      bottom: 0,
	      left: 0,
	      borderRadius: 'inherit'
	    },

	    /* Styles applied to the internal `Ripple` components `ripple` class. */
	    ripple: {
	      opacity: 0,
	      position: 'absolute'
	    },

	    /* Styles applied to the internal `Ripple` components `rippleVisible` class. */
	    rippleVisible: {
	      opacity: 0.3,
	      transform: 'scale(1)',
	      animation: "$enter ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut)
	    },

	    /* Styles applied to the internal `Ripple` components `ripplePulsate` class. */
	    ripplePulsate: {
	      animationDuration: "".concat(theme.transitions.duration.shorter, "ms")
	    },

	    /* Styles applied to the internal `Ripple` components `child` class. */
	    child: {
	      opacity: 1,
	      display: 'block',
	      width: '100%',
	      height: '100%',
	      borderRadius: '50%',
	      backgroundColor: 'currentColor'
	    },

	    /* Styles applied to the internal `Ripple` components `childLeaving` class. */
	    childLeaving: {
	      opacity: 0,
	      animation: "$exit ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut)
	    },

	    /* Styles applied to the internal `Ripple` components `childPulsate` class. */
	    childPulsate: {
	      position: 'absolute',
	      left: 0,
	      top: 0,
	      animation: "$pulsate 2500ms ".concat(theme.transitions.easing.easeInOut, " 200ms infinite")
	    },
	    '@keyframes enter': {
	      '0%': {
	        transform: 'scale(0)',
	        opacity: 0.1
	      },
	      '100%': {
	        transform: 'scale(1)',
	        opacity: 0.3
	      }
	    },
	    '@keyframes exit': {
	      '0%': {
	        opacity: 1
	      },
	      '100%': {
	        opacity: 0
	      }
	    },
	    '@keyframes pulsate': {
	      '0%': {
	        transform: 'scale(1)'
	      },
	      '50%': {
	        transform: 'scale(0.92)'
	      },
	      '100%': {
	        transform: 'scale(1)'
	      }
	    }
	  };
	};
	/**
	 * @ignore - internal component.
	 *
	 * TODO v5: Make private
	 */

	var TouchRipple = /*#__PURE__*/react.exports.forwardRef(function TouchRipple(props, ref) {
	  var _props$center = props.center,
	      centerProp = _props$center === void 0 ? false : _props$center,
	      classes = props.classes,
	      className = props.className,
	      other = _objectWithoutProperties(props, ["center", "classes", "className"]);

	  var _React$useState = react.exports.useState([]),
	      ripples = _React$useState[0],
	      setRipples = _React$useState[1];

	  var nextKey = react.exports.useRef(0);
	  var rippleCallback = react.exports.useRef(null);
	  react.exports.useEffect(function () {
	    if (rippleCallback.current) {
	      rippleCallback.current();
	      rippleCallback.current = null;
	    }
	  }, [ripples]); // Used to filter out mouse emulated events on mobile.

	  var ignoringMouseDown = react.exports.useRef(false); // We use a timer in order to only show the ripples for touch "click" like events.
	  // We don't want to display the ripple for touch scroll events.

	  var startTimer = react.exports.useRef(null); // This is the hook called once the previous timeout is ready.

	  var startTimerCommit = react.exports.useRef(null);
	  var container = react.exports.useRef(null);
	  react.exports.useEffect(function () {
	    return function () {
	      clearTimeout(startTimer.current);
	    };
	  }, []);
	  var startCommit = react.exports.useCallback(function (params) {
	    var pulsate = params.pulsate,
	        rippleX = params.rippleX,
	        rippleY = params.rippleY,
	        rippleSize = params.rippleSize,
	        cb = params.cb;
	    setRipples(function (oldRipples) {
	      return [].concat(_toConsumableArray(oldRipples), [/*#__PURE__*/react.exports.createElement(Ripple, {
	        key: nextKey.current,
	        classes: classes,
	        timeout: DURATION,
	        pulsate: pulsate,
	        rippleX: rippleX,
	        rippleY: rippleY,
	        rippleSize: rippleSize
	      })]);
	    });
	    nextKey.current += 1;
	    rippleCallback.current = cb;
	  }, [classes]);
	  var start = react.exports.useCallback(function () {
	    var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
	    var cb = arguments.length > 2 ? arguments[2] : undefined;
	    var _options$pulsate = options.pulsate,
	        pulsate = _options$pulsate === void 0 ? false : _options$pulsate,
	        _options$center = options.center,
	        center = _options$center === void 0 ? centerProp || options.pulsate : _options$center,
	        _options$fakeElement = options.fakeElement,
	        fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;

	    if (event.type === 'mousedown' && ignoringMouseDown.current) {
	      ignoringMouseDown.current = false;
	      return;
	    }

	    if (event.type === 'touchstart') {
	      ignoringMouseDown.current = true;
	    }

	    var element = fakeElement ? null : container.current;
	    var rect = element ? element.getBoundingClientRect() : {
	      width: 0,
	      height: 0,
	      left: 0,
	      top: 0
	    }; // Get the size of the ripple

	    var rippleX;
	    var rippleY;
	    var rippleSize;

	    if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
	      rippleX = Math.round(rect.width / 2);
	      rippleY = Math.round(rect.height / 2);
	    } else {
	      var _ref = event.touches ? event.touches[0] : event,
	          clientX = _ref.clientX,
	          clientY = _ref.clientY;

	      rippleX = Math.round(clientX - rect.left);
	      rippleY = Math.round(clientY - rect.top);
	    }

	    if (center) {
	      rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3); // For some reason the animation is broken on Mobile Chrome if the size if even.

	      if (rippleSize % 2 === 0) {
	        rippleSize += 1;
	      }
	    } else {
	      var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
	      var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
	      rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));
	    } // Touche devices


	    if (event.touches) {
	      // check that this isn't another touchstart due to multitouch
	      // otherwise we will only clear a single timer when unmounting while two
	      // are running
	      if (startTimerCommit.current === null) {
	        // Prepare the ripple effect.
	        startTimerCommit.current = function () {
	          startCommit({
	            pulsate: pulsate,
	            rippleX: rippleX,
	            rippleY: rippleY,
	            rippleSize: rippleSize,
	            cb: cb
	          });
	        }; // Delay the execution of the ripple effect.


	        startTimer.current = setTimeout(function () {
	          if (startTimerCommit.current) {
	            startTimerCommit.current();
	            startTimerCommit.current = null;
	          }
	        }, DELAY_RIPPLE); // We have to make a tradeoff with this value.
	      }
	    } else {
	      startCommit({
	        pulsate: pulsate,
	        rippleX: rippleX,
	        rippleY: rippleY,
	        rippleSize: rippleSize,
	        cb: cb
	      });
	    }
	  }, [centerProp, startCommit]);
	  var pulsate = react.exports.useCallback(function () {
	    start({}, {
	      pulsate: true
	    });
	  }, [start]);
	  var stop = react.exports.useCallback(function (event, cb) {
	    clearTimeout(startTimer.current); // The touch interaction occurs too quickly.
	    // We still want to show ripple effect.

	    if (event.type === 'touchend' && startTimerCommit.current) {
	      event.persist();
	      startTimerCommit.current();
	      startTimerCommit.current = null;
	      startTimer.current = setTimeout(function () {
	        stop(event, cb);
	      });
	      return;
	    }

	    startTimerCommit.current = null;
	    setRipples(function (oldRipples) {
	      if (oldRipples.length > 0) {
	        return oldRipples.slice(1);
	      }

	      return oldRipples;
	    });
	    rippleCallback.current = cb;
	  }, []);
	  react.exports.useImperativeHandle(ref, function () {
	    return {
	      pulsate: pulsate,
	      start: start,
	      stop: stop
	    };
	  }, [pulsate, start, stop]);
	  return /*#__PURE__*/react.exports.createElement("span", _extends$5({
	    className: clsx(classes.root, className),
	    ref: container
	  }, other), /*#__PURE__*/react.exports.createElement(TransitionGroup, {
	    component: null,
	    exit: true
	  }, ripples));
	});
	var TouchRipple$1 = withStyles(styles$1L, {
	  flip: false,
	  name: 'MuiTouchRipple'
	})( /*#__PURE__*/react.exports.memo(TouchRipple));

	var styles$1K = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'inline-flex',
	    alignItems: 'center',
	    justifyContent: 'center',
	    position: 'relative',
	    WebkitTapHighlightColor: 'transparent',
	    backgroundColor: 'transparent',
	    // Reset default value
	    // We disable the focus ring for mouse, touch and keyboard users.
	    outline: 0,
	    border: 0,
	    margin: 0,
	    // Remove the margin in Safari
	    borderRadius: 0,
	    padding: 0,
	    // Remove the padding in Firefox
	    cursor: 'pointer',
	    userSelect: 'none',
	    verticalAlign: 'middle',
	    '-moz-appearance': 'none',
	    // Reset
	    '-webkit-appearance': 'none',
	    // Reset
	    textDecoration: 'none',
	    // So we take precedent over the style of a native <a /> element.
	    color: 'inherit',
	    '&::-moz-focus-inner': {
	      borderStyle: 'none' // Remove Firefox dotted outline.

	    },
	    '&$disabled': {
	      pointerEvents: 'none',
	      // Disable link interactions
	      cursor: 'default'
	    },
	    '@media print': {
	      colorAdjust: 'exact'
	    }
	  },

	  /* Pseudo-class applied to the root element if `disabled={true}`. */
	  disabled: {},

	  /* Pseudo-class applied to the root element if keyboard focused. */
	  focusVisible: {}
	};
	/**
	 * `ButtonBase` contains as few styles as possible.
	 * It aims to be a simple building block for creating a button.
	 * It contains a load of style reset and some focus/ripple logic.
	 */

	var ButtonBase = /*#__PURE__*/react.exports.forwardRef(function ButtonBase(props, ref) {
	  var action = props.action,
	      buttonRefProp = props.buttonRef,
	      _props$centerRipple = props.centerRipple,
	      centerRipple = _props$centerRipple === void 0 ? false : _props$centerRipple,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      component = _props$component === void 0 ? 'button' : _props$component,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      _props$disableRipple = props.disableRipple,
	      disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,
	      _props$disableTouchRi = props.disableTouchRipple,
	      disableTouchRipple = _props$disableTouchRi === void 0 ? false : _props$disableTouchRi,
	      _props$focusRipple = props.focusRipple,
	      focusRipple = _props$focusRipple === void 0 ? false : _props$focusRipple,
	      focusVisibleClassName = props.focusVisibleClassName,
	      onBlur = props.onBlur,
	      onClick = props.onClick,
	      onFocus = props.onFocus,
	      onFocusVisible = props.onFocusVisible,
	      onKeyDown = props.onKeyDown,
	      onKeyUp = props.onKeyUp,
	      onMouseDown = props.onMouseDown,
	      onMouseLeave = props.onMouseLeave,
	      onMouseUp = props.onMouseUp,
	      onTouchEnd = props.onTouchEnd,
	      onTouchMove = props.onTouchMove,
	      onTouchStart = props.onTouchStart,
	      onDragLeave = props.onDragLeave,
	      _props$tabIndex = props.tabIndex,
	      tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
	      TouchRippleProps = props.TouchRippleProps,
	      _props$type = props.type,
	      type = _props$type === void 0 ? 'button' : _props$type,
	      other = _objectWithoutProperties(props, ["action", "buttonRef", "centerRipple", "children", "classes", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "onDragLeave", "tabIndex", "TouchRippleProps", "type"]);

	  var buttonRef = react.exports.useRef(null);

	  function getButtonNode() {
	    // #StrictMode ready
	    return reactDom.exports.findDOMNode(buttonRef.current);
	  }

	  var rippleRef = react.exports.useRef(null);

	  var _React$useState = react.exports.useState(false),
	      focusVisible = _React$useState[0],
	      setFocusVisible = _React$useState[1];

	  if (disabled && focusVisible) {
	    setFocusVisible(false);
	  }

	  var _useIsFocusVisible = useIsFocusVisible(),
	      isFocusVisible = _useIsFocusVisible.isFocusVisible,
	      onBlurVisible = _useIsFocusVisible.onBlurVisible,
	      focusVisibleRef = _useIsFocusVisible.ref;

	  react.exports.useImperativeHandle(action, function () {
	    return {
	      focusVisible: function focusVisible() {
	        setFocusVisible(true);
	        buttonRef.current.focus();
	      }
	    };
	  }, []);
	  react.exports.useEffect(function () {
	    if (focusVisible && focusRipple && !disableRipple) {
	      rippleRef.current.pulsate();
	    }
	  }, [disableRipple, focusRipple, focusVisible]);

	  function useRippleHandler(rippleAction, eventCallback) {
	    var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple;
	    return useEventCallback(function (event) {
	      if (eventCallback) {
	        eventCallback(event);
	      }

	      var ignore = skipRippleAction;

	      if (!ignore && rippleRef.current) {
	        rippleRef.current[rippleAction](event);
	      }

	      return true;
	    });
	  }

	  var handleMouseDown = useRippleHandler('start', onMouseDown);
	  var handleDragLeave = useRippleHandler('stop', onDragLeave);
	  var handleMouseUp = useRippleHandler('stop', onMouseUp);
	  var handleMouseLeave = useRippleHandler('stop', function (event) {
	    if (focusVisible) {
	      event.preventDefault();
	    }

	    if (onMouseLeave) {
	      onMouseLeave(event);
	    }
	  });
	  var handleTouchStart = useRippleHandler('start', onTouchStart);
	  var handleTouchEnd = useRippleHandler('stop', onTouchEnd);
	  var handleTouchMove = useRippleHandler('stop', onTouchMove);
	  var handleBlur = useRippleHandler('stop', function (event) {
	    if (focusVisible) {
	      onBlurVisible(event);
	      setFocusVisible(false);
	    }

	    if (onBlur) {
	      onBlur(event);
	    }
	  }, false);
	  var handleFocus = useEventCallback(function (event) {
	    // Fix for https://github.com/facebook/react/issues/7769
	    if (!buttonRef.current) {
	      buttonRef.current = event.currentTarget;
	    }

	    if (isFocusVisible(event)) {
	      setFocusVisible(true);

	      if (onFocusVisible) {
	        onFocusVisible(event);
	      }
	    }

	    if (onFocus) {
	      onFocus(event);
	    }
	  });

	  var isNonNativeButton = function isNonNativeButton() {
	    var button = getButtonNode();
	    return component && component !== 'button' && !(button.tagName === 'A' && button.href);
	  };
	  /**
	   * IE 11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
	   */


	  var keydownRef = react.exports.useRef(false);
	  var handleKeyDown = useEventCallback(function (event) {
	    // Check if key is already down to avoid repeats being counted as multiple activations
	    if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
	      keydownRef.current = true;
	      event.persist();
	      rippleRef.current.stop(event, function () {
	        rippleRef.current.start(event);
	      });
	    }

	    if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
	      event.preventDefault();
	    }

	    if (onKeyDown) {
	      onKeyDown(event);
	    } // Keyboard accessibility for non interactive elements


	    if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
	      event.preventDefault();

	      if (onClick) {
	        onClick(event);
	      }
	    }
	  });
	  var handleKeyUp = useEventCallback(function (event) {
	    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
	    // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
	    if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
	      keydownRef.current = false;
	      event.persist();
	      rippleRef.current.stop(event, function () {
	        rippleRef.current.pulsate(event);
	      });
	    }

	    if (onKeyUp) {
	      onKeyUp(event);
	    } // Keyboard accessibility for non interactive elements


	    if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
	      onClick(event);
	    }
	  });
	  var ComponentProp = component;

	  if (ComponentProp === 'button' && other.href) {
	    ComponentProp = 'a';
	  }

	  var buttonProps = {};

	  if (ComponentProp === 'button') {
	    buttonProps.type = type;
	    buttonProps.disabled = disabled;
	  } else {
	    if (ComponentProp !== 'a' || !other.href) {
	      buttonProps.role = 'button';
	    }

	    buttonProps['aria-disabled'] = disabled;
	  }

	  var handleUserRef = useForkRef(buttonRefProp, ref);
	  var handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
	  var handleRef = useForkRef(handleUserRef, handleOwnRef);

	  var _React$useState2 = react.exports.useState(false),
	      mountedState = _React$useState2[0],
	      setMountedState = _React$useState2[1];

	  react.exports.useEffect(function () {
	    setMountedState(true);
	  }, []);
	  var enableTouchRipple = mountedState && !disableRipple && !disabled;

	  return /*#__PURE__*/react.exports.createElement(ComponentProp, _extends$5({
	    className: clsx(classes.root, className, focusVisible && [classes.focusVisible, focusVisibleClassName], disabled && classes.disabled),
	    onBlur: handleBlur,
	    onClick: onClick,
	    onFocus: handleFocus,
	    onKeyDown: handleKeyDown,
	    onKeyUp: handleKeyUp,
	    onMouseDown: handleMouseDown,
	    onMouseLeave: handleMouseLeave,
	    onMouseUp: handleMouseUp,
	    onDragLeave: handleDragLeave,
	    onTouchEnd: handleTouchEnd,
	    onTouchMove: handleTouchMove,
	    onTouchStart: handleTouchStart,
	    ref: handleRef,
	    tabIndex: disabled ? -1 : tabIndex
	  }, buttonProps, other), children, enableTouchRipple ?
	  /*#__PURE__*/

	  /* TouchRipple is only needed client-side, x2 boost on the server. */
	  react.exports.createElement(TouchRipple$1, _extends$5({
	    ref: rippleRef,
	    center: centerRipple
	  }, TouchRippleProps)) : null);
	});
	var ButtonBase$1 = withStyles(styles$1K, {
	  name: 'MuiButtonBase'
	})(ButtonBase);

	var styles$1J = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      textAlign: 'center',
	      flex: '0 0 auto',
	      fontSize: theme.typography.pxToRem(24),
	      padding: 12,
	      borderRadius: '50%',
	      overflow: 'visible',
	      // Explicitly set the default value to solve a bug on IE 11.
	      color: theme.palette.action.active,
	      transition: theme.transitions.create('background-color', {
	        duration: theme.transitions.duration.shortest
	      }),
	      '&:hover': {
	        backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: 'transparent'
	        }
	      },
	      '&$disabled': {
	        backgroundColor: 'transparent',
	        color: theme.palette.action.disabled
	      }
	    },

	    /* Styles applied to the root element if `edge="start"`. */
	    edgeStart: {
	      marginLeft: -12,
	      '$sizeSmall&': {
	        marginLeft: -3
	      }
	    },

	    /* Styles applied to the root element if `edge="end"`. */
	    edgeEnd: {
	      marginRight: -12,
	      '$sizeSmall&': {
	        marginRight: -3
	      }
	    },

	    /* Styles applied to the root element if `color="inherit"`. */
	    colorInherit: {
	      color: 'inherit'
	    },

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {
	      color: theme.palette.primary.main,
	      '&:hover': {
	        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: 'transparent'
	        }
	      }
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    colorSecondary: {
	      color: theme.palette.secondary.main,
	      '&:hover': {
	        backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: 'transparent'
	        }
	      }
	    },

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the root element if `size="small"`. */
	    sizeSmall: {
	      padding: 3,
	      fontSize: theme.typography.pxToRem(18)
	    },

	    /* Styles applied to the children container element. */
	    label: {
	      width: '100%',
	      display: 'flex',
	      alignItems: 'inherit',
	      justifyContent: 'inherit'
	    }
	  };
	};
	/**
	 * Refer to the [Icons](/components/icons/) section of the documentation
	 * regarding the available icon options.
	 */

	var IconButton = /*#__PURE__*/react.exports.forwardRef(function IconButton(props, ref) {
	  var _props$edge = props.edge,
	      edge = _props$edge === void 0 ? false : _props$edge,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'default' : _props$color,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      _props$disableFocusRi = props.disableFocusRipple,
	      disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
	      _props$size = props.size,
	      size = _props$size === void 0 ? 'medium' : _props$size,
	      other = _objectWithoutProperties(props, ["edge", "children", "classes", "className", "color", "disabled", "disableFocusRipple", "size"]);

	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    className: clsx(classes.root, className, color !== 'default' && classes["color".concat(capitalize(color))], disabled && classes.disabled, size === "small" && classes["size".concat(capitalize(size))], {
	      'start': classes.edgeStart,
	      'end': classes.edgeEnd
	    }[edge]),
	    centerRipple: true,
	    focusRipple: !disableFocusRipple,
	    disabled: disabled,
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.label
	  }, children));
	});
	var IconButton$1 = withStyles(styles$1J, {
	  name: 'MuiIconButton'
	})(IconButton);

	var styles$1I = function styles(theme) {
	  var transition = {
	    duration: theme.transitions.duration.shortest
	  };
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'flex',
	      minHeight: 8 * 6,
	      transition: theme.transitions.create(['min-height', 'background-color'], transition),
	      padding: theme.spacing(0, 2),
	      '&:hover:not($disabled)': {
	        cursor: 'pointer'
	      },
	      '&$expanded': {
	        minHeight: 64
	      },
	      '&$focused, &$focusVisible': {
	        backgroundColor: theme.palette.action.focus
	      },
	      '&$disabled': {
	        opacity: theme.palette.action.disabledOpacity
	      }
	    },

	    /* Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
	    expanded: {},

	    /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
	    focused: {},

	    /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
	    focusVisible: {},

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the children wrapper element. */
	    content: {
	      display: 'flex',
	      flexGrow: 1,
	      transition: theme.transitions.create(['margin'], transition),
	      margin: '12px 0',
	      '&$expanded': {
	        margin: '20px 0'
	      }
	    },

	    /* Styles applied to the `IconButton` component when `expandIcon` is supplied. */
	    expandIcon: {
	      transform: 'rotate(0deg)',
	      transition: theme.transitions.create('transform', transition),
	      '&:hover': {
	        // Disable the hover effect for the IconButton,
	        // because a hover effect should apply to the entire Expand button and
	        // not only to the IconButton.
	        backgroundColor: 'transparent'
	      },
	      '&$expanded': {
	        transform: 'rotate(180deg)'
	      }
	    }
	  };
	};
	var AccordionSummary = /*#__PURE__*/react.exports.forwardRef(function AccordionSummary(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      expandIcon = props.expandIcon,
	      focusVisibleClassName = props.focusVisibleClassName,
	      _props$IconButtonProp = props.IconButtonProps,
	      IconButtonProps = _props$IconButtonProp === void 0 ? {} : _props$IconButtonProp,
	      onClick = props.onClick,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "expandIcon", "focusVisibleClassName", "IconButtonProps", "onClick"]);

	  var _React$useContext = react.exports.useContext(AccordionContext),
	      _React$useContext$dis = _React$useContext.disabled,
	      disabled = _React$useContext$dis === void 0 ? false : _React$useContext$dis,
	      expanded = _React$useContext.expanded,
	      toggle = _React$useContext.toggle;

	  var handleChange = function handleChange(event) {
	    if (toggle) {
	      toggle(event);
	    }

	    if (onClick) {
	      onClick(event);
	    }
	  };

	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    focusRipple: false,
	    disableRipple: true,
	    disabled: disabled,
	    component: "div",
	    "aria-expanded": expanded,
	    className: clsx(classes.root, className, disabled && classes.disabled, expanded && classes.expanded),
	    focusVisibleClassName: clsx(classes.focusVisible, classes.focused, focusVisibleClassName),
	    onClick: handleChange,
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.content, expanded && classes.expanded)
	  }, children), expandIcon && /*#__PURE__*/react.exports.createElement(IconButton$1, _extends$5({
	    className: clsx(classes.expandIcon, expanded && classes.expanded),
	    edge: "end",
	    component: "div",
	    tabIndex: null,
	    role: null,
	    "aria-hidden": true
	  }, IconButtonProps), expandIcon));
	});
	withStyles(styles$1I, {
	  name: 'MuiAccordionSummary'
	})(AccordionSummary);

	var styles$1H = function styles(theme) {
	  var backgroundColorDefault = theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'flex',
	      flexDirection: 'column',
	      width: '100%',
	      boxSizing: 'border-box',
	      // Prevent padding issue with the Modal and fixed positioned AppBar.
	      zIndex: theme.zIndex.appBar,
	      flexShrink: 0
	    },

	    /* Styles applied to the root element if `position="fixed"`. */
	    positionFixed: {
	      position: 'fixed',
	      top: 0,
	      left: 'auto',
	      right: 0,
	      '@media print': {
	        // Prevent the app bar to be visible on each printed page.
	        position: 'absolute'
	      }
	    },

	    /* Styles applied to the root element if `position="absolute"`. */
	    positionAbsolute: {
	      position: 'absolute',
	      top: 0,
	      left: 'auto',
	      right: 0
	    },

	    /* Styles applied to the root element if `position="sticky"`. */
	    positionSticky: {
	      // ⚠️ sticky is not supported by IE 11.
	      position: 'sticky',
	      top: 0,
	      left: 'auto',
	      right: 0
	    },

	    /* Styles applied to the root element if `position="static"`. */
	    positionStatic: {
	      position: 'static'
	    },

	    /* Styles applied to the root element if `position="relative"`. */
	    positionRelative: {
	      position: 'relative'
	    },

	    /* Styles applied to the root element if `color="default"`. */
	    colorDefault: {
	      backgroundColor: backgroundColorDefault,
	      color: theme.palette.getContrastText(backgroundColorDefault)
	    },

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {
	      backgroundColor: theme.palette.primary.main,
	      color: theme.palette.primary.contrastText
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    colorSecondary: {
	      backgroundColor: theme.palette.secondary.main,
	      color: theme.palette.secondary.contrastText
	    },

	    /* Styles applied to the root element if `color="inherit"`. */
	    colorInherit: {
	      color: 'inherit'
	    },

	    /* Styles applied to the root element if `color="transparent"`. */
	    colorTransparent: {
	      backgroundColor: 'transparent',
	      color: 'inherit'
	    }
	  };
	};
	var AppBar = /*#__PURE__*/react.exports.forwardRef(function AppBar(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'primary' : _props$color,
	      _props$position = props.position,
	      position = _props$position === void 0 ? 'fixed' : _props$position,
	      other = _objectWithoutProperties(props, ["classes", "className", "color", "position"]);

	  return /*#__PURE__*/react.exports.createElement(Paper$1, _extends$5({
	    square: true,
	    component: "header",
	    elevation: 4,
	    className: clsx(classes.root, classes["position".concat(capitalize(position))], classes["color".concat(capitalize(color))], className, position === 'fixed' && 'mui-fixed'),
	    ref: ref
	  }, other));
	});
	withStyles(styles$1H, {
	  name: 'MuiAppBar'
	})(AppBar);

	/**
	 * @ignore - internal component.
	 */

	var Person = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
	}));

	var styles$1G = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'relative',
	      display: 'flex',
	      alignItems: 'center',
	      justifyContent: 'center',
	      flexShrink: 0,
	      width: 40,
	      height: 40,
	      fontFamily: theme.typography.fontFamily,
	      fontSize: theme.typography.pxToRem(20),
	      lineHeight: 1,
	      borderRadius: '50%',
	      overflow: 'hidden',
	      userSelect: 'none'
	    },

	    /* Styles applied to the root element if not `src` or `srcSet`. */
	    colorDefault: {
	      color: theme.palette.background.default,
	      backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
	    },

	    /* Styles applied to the root element if `variant="circle"`. */
	    circle: {},

	    /* Styles applied to the root element if `variant="circular"`. */
	    circular: {},

	    /* Styles applied to the root element if `variant="rounded"`. */
	    rounded: {
	      borderRadius: theme.shape.borderRadius
	    },

	    /* Styles applied to the root element if `variant="square"`. */
	    square: {
	      borderRadius: 0
	    },

	    /* Styles applied to the img element if either `src` or `srcSet` is defined. */
	    img: {
	      width: '100%',
	      height: '100%',
	      textAlign: 'center',
	      // Handle non-square image. The property isn't supported by IE 11.
	      objectFit: 'cover',
	      // Hide alt text.
	      color: 'transparent',
	      // Hide the image broken icon, only works on Chrome.
	      textIndent: 10000
	    },

	    /* Styles applied to the fallback icon */
	    fallback: {
	      width: '75%',
	      height: '75%'
	    }
	  };
	};

	function useLoaded(_ref) {
	  var src = _ref.src,
	      srcSet = _ref.srcSet;

	  var _React$useState = react.exports.useState(false),
	      loaded = _React$useState[0],
	      setLoaded = _React$useState[1];

	  react.exports.useEffect(function () {
	    if (!src && !srcSet) {
	      return undefined;
	    }

	    setLoaded(false);
	    var active = true;
	    var image = new Image();
	    image.src = src;
	    image.srcSet = srcSet;

	    image.onload = function () {
	      if (!active) {
	        return;
	      }

	      setLoaded('loaded');
	    };

	    image.onerror = function () {
	      if (!active) {
	        return;
	      }

	      setLoaded('error');
	    };

	    return function () {
	      active = false;
	    };
	  }, [src, srcSet]);
	  return loaded;
	}

	var Avatar = /*#__PURE__*/react.exports.forwardRef(function Avatar(props, ref) {
	  var alt = props.alt,
	      childrenProp = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      imgProps = props.imgProps,
	      sizes = props.sizes,
	      src = props.src,
	      srcSet = props.srcSet,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'circular' : _props$variant,
	      other = _objectWithoutProperties(props, ["alt", "children", "classes", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"]);

	  var children = null; // Use a hook instead of onError on the img element to support server-side rendering.

	  var loaded = useLoaded({
	    src: src,
	    srcSet: srcSet
	  });
	  var hasImg = src || srcSet;
	  var hasImgNotFailing = hasImg && loaded !== 'error';

	  if (hasImgNotFailing) {
	    children = /*#__PURE__*/react.exports.createElement("img", _extends$5({
	      alt: alt,
	      src: src,
	      srcSet: srcSet,
	      sizes: sizes,
	      className: classes.img
	    }, imgProps));
	  } else if (childrenProp != null) {
	    children = childrenProp;
	  } else if (hasImg && alt) {
	    children = alt[0];
	  } else {
	    children = /*#__PURE__*/react.exports.createElement(Person, {
	      className: classes.fallback
	    });
	  }

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, classes.system, classes[variant], className, !hasImgNotFailing && classes.colorDefault),
	    ref: ref
	  }, other), children);
	});
	withStyles(styles$1G, {
	  name: 'MuiAvatar'
	})(Avatar);

	var styles$1F = {
	  entering: {
	    opacity: 1
	  },
	  entered: {
	    opacity: 1
	  }
	};
	var defaultTimeout$1 = {
	  enter: duration.enteringScreen,
	  exit: duration.leavingScreen
	};
	/**
	 * The Fade transition is used by the [Modal](/components/modal/) component.
	 * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
	 */

	var Fade = /*#__PURE__*/react.exports.forwardRef(function Fade(props, ref) {
	  var children = props.children,
	      _props$disableStrictM = props.disableStrictModeCompat,
	      disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,
	      inProp = props.in,
	      onEnter = props.onEnter,
	      onEntered = props.onEntered,
	      onEntering = props.onEntering,
	      onExit = props.onExit,
	      onExited = props.onExited,
	      onExiting = props.onExiting,
	      style = props.style,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
	      _props$timeout = props.timeout,
	      timeout = _props$timeout === void 0 ? defaultTimeout$1 : _props$timeout,
	      other = _objectWithoutProperties(props, ["children", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "TransitionComponent", "timeout"]);

	  var theme = useTheme$1();
	  var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
	  var nodeRef = react.exports.useRef(null);
	  var foreignRef = useForkRef(children.ref, ref);
	  var handleRef = useForkRef(enableStrictModeCompat ? nodeRef : undefined, foreignRef);

	  var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
	    return function (nodeOrAppearing, maybeAppearing) {
	      if (callback) {
	        var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],
	            _ref2 = _slicedToArray(_ref, 2),
	            node = _ref2[0],
	            isAppearing = _ref2[1]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.


	        if (isAppearing === undefined) {
	          callback(node);
	        } else {
	          callback(node, isAppearing);
	        }
	      }
	    };
	  };

	  var handleEntering = normalizedTransitionCallback(onEntering);
	  var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
	    reflow(node); // So the animation always start from the start.

	    var transitionProps = getTransitionProps({
	      style: style,
	      timeout: timeout
	    }, {
	      mode: 'enter'
	    });
	    node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
	    node.style.transition = theme.transitions.create('opacity', transitionProps);

	    if (onEnter) {
	      onEnter(node, isAppearing);
	    }
	  });
	  var handleEntered = normalizedTransitionCallback(onEntered);
	  var handleExiting = normalizedTransitionCallback(onExiting);
	  var handleExit = normalizedTransitionCallback(function (node) {
	    var transitionProps = getTransitionProps({
	      style: style,
	      timeout: timeout
	    }, {
	      mode: 'exit'
	    });
	    node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
	    node.style.transition = theme.transitions.create('opacity', transitionProps);

	    if (onExit) {
	      onExit(node);
	    }
	  });
	  var handleExited = normalizedTransitionCallback(onExited);
	  return /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    appear: true,
	    in: inProp,
	    nodeRef: enableStrictModeCompat ? nodeRef : undefined,
	    onEnter: handleEnter,
	    onEntered: handleEntered,
	    onEntering: handleEntering,
	    onExit: handleExit,
	    onExited: handleExited,
	    onExiting: handleExiting,
	    timeout: timeout
	  }, other), function (state, childProps) {
	    return /*#__PURE__*/react.exports.cloneElement(children, _extends$5({
	      style: _extends$5({
	        opacity: 0,
	        visibility: state === 'exited' && !inProp ? 'hidden' : undefined
	      }, styles$1F[state], style, children.props.style),
	      ref: handleRef
	    }, childProps));
	  });
	});

	var styles$1E = {
	  /* Styles applied to the root element. */
	  root: {
	    // Improve scrollable dialog support.
	    zIndex: -1,
	    position: 'fixed',
	    display: 'flex',
	    alignItems: 'center',
	    justifyContent: 'center',
	    right: 0,
	    bottom: 0,
	    top: 0,
	    left: 0,
	    backgroundColor: 'rgba(0, 0, 0, 0.5)',
	    WebkitTapHighlightColor: 'transparent'
	  },

	  /* Styles applied to the root element if `invisible={true}`. */
	  invisible: {
	    backgroundColor: 'transparent'
	  }
	};
	var Backdrop = /*#__PURE__*/react.exports.forwardRef(function Backdrop(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$invisible = props.invisible,
	      invisible = _props$invisible === void 0 ? false : _props$invisible,
	      open = props.open,
	      transitionDuration = props.transitionDuration,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "invisible", "open", "transitionDuration", "TransitionComponent"]);

	  return /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    in: open,
	    timeout: transitionDuration
	  }, other), /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.root, className, invisible && classes.invisible),
	    "aria-hidden": true,
	    ref: ref
	  }, children));
	});
	var Backdrop$1 = withStyles(styles$1E, {
	  name: 'MuiBackdrop'
	})(Backdrop);

	var RADIUS_STANDARD = 10;
	var RADIUS_DOT = 4;
	var styles$1D = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'relative',
	      display: 'inline-flex',
	      // For correct alignment with the text.
	      verticalAlign: 'middle',
	      flexShrink: 0
	    },

	    /* Styles applied to the badge `span` element. */
	    badge: {
	      display: 'flex',
	      flexDirection: 'row',
	      flexWrap: 'wrap',
	      justifyContent: 'center',
	      alignContent: 'center',
	      alignItems: 'center',
	      position: 'absolute',
	      boxSizing: 'border-box',
	      fontFamily: theme.typography.fontFamily,
	      fontWeight: theme.typography.fontWeightMedium,
	      fontSize: theme.typography.pxToRem(12),
	      minWidth: RADIUS_STANDARD * 2,
	      lineHeight: 1,
	      padding: '0 6px',
	      height: RADIUS_STANDARD * 2,
	      borderRadius: RADIUS_STANDARD,
	      zIndex: 1,
	      // Render the badge on top of potential ripples.
	      transition: theme.transitions.create('transform', {
	        easing: theme.transitions.easing.easeInOut,
	        duration: theme.transitions.duration.enteringScreen
	      })
	    },

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {
	      backgroundColor: theme.palette.primary.main,
	      color: theme.palette.primary.contrastText
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    colorSecondary: {
	      backgroundColor: theme.palette.secondary.main,
	      color: theme.palette.secondary.contrastText
	    },

	    /* Styles applied to the root element if `color="error"`. */
	    colorError: {
	      backgroundColor: theme.palette.error.main,
	      color: theme.palette.error.contrastText
	    },

	    /* Styles applied to the root element if `variant="dot"`. */
	    dot: {
	      borderRadius: RADIUS_DOT,
	      height: RADIUS_DOT * 2,
	      minWidth: RADIUS_DOT * 2,
	      padding: 0
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`. */
	    anchorOriginTopRightRectangle: {
	      top: 0,
	      right: 0,
	      transform: 'scale(1) translate(50%, -50%)',
	      transformOrigin: '100% 0%',
	      '&$invisible': {
	        transform: 'scale(0) translate(50%, -50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
	    anchorOriginTopRightRectangular: {
	      top: 0,
	      right: 0,
	      transform: 'scale(1) translate(50%, -50%)',
	      transformOrigin: '100% 0%',
	      '&$invisible': {
	        transform: 'scale(0) translate(50%, -50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`. */
	    anchorOriginBottomRightRectangle: {
	      bottom: 0,
	      right: 0,
	      transform: 'scale(1) translate(50%, 50%)',
	      transformOrigin: '100% 100%',
	      '&$invisible': {
	        transform: 'scale(0) translate(50%, 50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
	    anchorOriginBottomRightRectangular: {
	      bottom: 0,
	      right: 0,
	      transform: 'scale(1) translate(50%, 50%)',
	      transformOrigin: '100% 100%',
	      '&$invisible': {
	        transform: 'scale(0) translate(50%, 50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`. */
	    anchorOriginTopLeftRectangle: {
	      top: 0,
	      left: 0,
	      transform: 'scale(1) translate(-50%, -50%)',
	      transformOrigin: '0% 0%',
	      '&$invisible': {
	        transform: 'scale(0) translate(-50%, -50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
	    anchorOriginTopLeftRectangular: {
	      top: 0,
	      left: 0,
	      transform: 'scale(1) translate(-50%, -50%)',
	      transformOrigin: '0% 0%',
	      '&$invisible': {
	        transform: 'scale(0) translate(-50%, -50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`. */
	    anchorOriginBottomLeftRectangle: {
	      bottom: 0,
	      left: 0,
	      transform: 'scale(1) translate(-50%, 50%)',
	      transformOrigin: '0% 100%',
	      '&$invisible': {
	        transform: 'scale(0) translate(-50%, 50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
	    anchorOriginBottomLeftRectangular: {
	      bottom: 0,
	      left: 0,
	      transform: 'scale(1) translate(-50%, 50%)',
	      transformOrigin: '0% 100%',
	      '&$invisible': {
	        transform: 'scale(0) translate(-50%, 50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`. */
	    anchorOriginTopRightCircle: {
	      top: '14%',
	      right: '14%',
	      transform: 'scale(1) translate(50%, -50%)',
	      transformOrigin: '100% 0%',
	      '&$invisible': {
	        transform: 'scale(0) translate(50%, -50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
	    anchorOriginTopRightCircular: {
	      top: '14%',
	      right: '14%',
	      transform: 'scale(1) translate(50%, -50%)',
	      transformOrigin: '100% 0%',
	      '&$invisible': {
	        transform: 'scale(0) translate(50%, -50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`. */
	    anchorOriginBottomRightCircle: {
	      bottom: '14%',
	      right: '14%',
	      transform: 'scale(1) translate(50%, 50%)',
	      transformOrigin: '100% 100%',
	      '&$invisible': {
	        transform: 'scale(0) translate(50%, 50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
	    anchorOriginBottomRightCircular: {
	      bottom: '14%',
	      right: '14%',
	      transform: 'scale(1) translate(50%, 50%)',
	      transformOrigin: '100% 100%',
	      '&$invisible': {
	        transform: 'scale(0) translate(50%, 50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`. */
	    anchorOriginTopLeftCircle: {
	      top: '14%',
	      left: '14%',
	      transform: 'scale(1) translate(-50%, -50%)',
	      transformOrigin: '0% 0%',
	      '&$invisible': {
	        transform: 'scale(0) translate(-50%, -50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
	    anchorOriginTopLeftCircular: {
	      top: '14%',
	      left: '14%',
	      transform: 'scale(1) translate(-50%, -50%)',
	      transformOrigin: '0% 0%',
	      '&$invisible': {
	        transform: 'scale(0) translate(-50%, -50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`. */
	    anchorOriginBottomLeftCircle: {
	      bottom: '14%',
	      left: '14%',
	      transform: 'scale(1) translate(-50%, 50%)',
	      transformOrigin: '0% 100%',
	      '&$invisible': {
	        transform: 'scale(0) translate(-50%, 50%)'
	      }
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
	    anchorOriginBottomLeftCircular: {
	      bottom: '14%',
	      left: '14%',
	      transform: 'scale(1) translate(-50%, 50%)',
	      transformOrigin: '0% 100%',
	      '&$invisible': {
	        transform: 'scale(0) translate(-50%, 50%)'
	      }
	    },

	    /* Pseudo-class to the badge `span` element if `invisible={true}`. */
	    invisible: {
	      transition: theme.transitions.create('transform', {
	        easing: theme.transitions.easing.easeInOut,
	        duration: theme.transitions.duration.leavingScreen
	      })
	    }
	  };
	};
	var Badge = /*#__PURE__*/react.exports.forwardRef(function Badge(props, ref) {
	  var _props$anchorOrigin = props.anchorOrigin,
	      anchorOrigin = _props$anchorOrigin === void 0 ? {
	    vertical: 'top',
	    horizontal: 'right'
	  } : _props$anchorOrigin,
	      badgeContent = props.badgeContent,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'default' : _props$color,
	      _props$component = props.component,
	      ComponentProp = _props$component === void 0 ? 'span' : _props$component,
	      invisibleProp = props.invisible,
	      _props$max = props.max,
	      max = _props$max === void 0 ? 99 : _props$max,
	      _props$overlap = props.overlap,
	      overlap = _props$overlap === void 0 ? 'rectangle' : _props$overlap,
	      _props$showZero = props.showZero,
	      showZero = _props$showZero === void 0 ? false : _props$showZero,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'standard' : _props$variant,
	      other = _objectWithoutProperties(props, ["anchorOrigin", "badgeContent", "children", "classes", "className", "color", "component", "invisible", "max", "overlap", "showZero", "variant"]);

	  var invisible = invisibleProp;

	  if (invisibleProp == null && (badgeContent === 0 && !showZero || badgeContent == null && variant !== 'dot')) {
	    invisible = true;
	  }

	  var displayValue = '';

	  if (variant !== 'dot') {
	    displayValue = badgeContent > max ? "".concat(max, "+") : badgeContent;
	  }

	  return /*#__PURE__*/react.exports.createElement(ComponentProp, _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other), children, /*#__PURE__*/react.exports.createElement("span", {
	    className: clsx(classes.badge, classes["".concat(anchorOrigin.horizontal).concat(capitalize(anchorOrigin.vertical), "}")], classes["anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)).concat(capitalize(overlap))], color !== 'default' && classes["color".concat(capitalize(color))], invisible && classes.invisible, variant === 'dot' && classes.dot)
	  }, displayValue));
	});
	var Badge$1 = withStyles(styles$1D, {
	  name: 'MuiBadge'
	})(Badge);

	var styles$1C = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'flex',
	      justifyContent: 'center',
	      height: 56,
	      backgroundColor: theme.palette.background.paper
	    }
	  };
	};
	var BottomNavigation = /*#__PURE__*/react.exports.forwardRef(function BottomNavigation(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      onChange = props.onChange,
	      _props$showLabels = props.showLabels,
	      showLabels = _props$showLabels === void 0 ? false : _props$showLabels,
	      value = props.value,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "onChange", "showLabels", "value"]);

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other), react.exports.Children.map(children, function (child, childIndex) {
	    if (! /*#__PURE__*/react.exports.isValidElement(child)) {
	      return null;
	    }

	    var childValue = child.props.value === undefined ? childIndex : child.props.value;
	    return /*#__PURE__*/react.exports.cloneElement(child, {
	      selected: childValue === value,
	      showLabel: child.props.showLabel !== undefined ? child.props.showLabel : showLabels,
	      value: childValue,
	      onChange: onChange
	    });
	  }));
	});
	withStyles(styles$1C, {
	  name: 'MuiBottomNavigation'
	})(BottomNavigation);

	var styles$1B = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      transition: theme.transitions.create(['color', 'padding-top'], {
	        duration: theme.transitions.duration.short
	      }),
	      padding: '6px 12px 8px',
	      minWidth: 80,
	      maxWidth: 168,
	      color: theme.palette.text.secondary,
	      flex: '1',
	      '&$iconOnly': {
	        paddingTop: 16
	      },
	      '&$selected': {
	        paddingTop: 6,
	        color: theme.palette.primary.main
	      }
	    },

	    /* Pseudo-class applied to the root element if selected. */
	    selected: {},

	    /* Pseudo-class applied to the root element if `showLabel={false}` and not selected. */
	    iconOnly: {},

	    /* Styles applied to the span element that wraps the icon and label. */
	    wrapper: {
	      display: 'inline-flex',
	      alignItems: 'center',
	      justifyContent: 'center',
	      width: '100%',
	      flexDirection: 'column'
	    },

	    /* Styles applied to the label's span element. */
	    label: {
	      fontFamily: theme.typography.fontFamily,
	      fontSize: theme.typography.pxToRem(12),
	      opacity: 1,
	      transition: 'font-size 0.2s, opacity 0.2s',
	      transitionDelay: '0.1s',
	      '&$iconOnly': {
	        opacity: 0,
	        transitionDelay: '0s'
	      },
	      '&$selected': {
	        fontSize: theme.typography.pxToRem(14)
	      }
	    }
	  };
	};
	var BottomNavigationAction = /*#__PURE__*/react.exports.forwardRef(function BottomNavigationAction(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      icon = props.icon,
	      label = props.label,
	      onChange = props.onChange,
	      onClick = props.onClick,
	      selected = props.selected,
	      showLabel = props.showLabel,
	      value = props.value,
	      other = _objectWithoutProperties(props, ["classes", "className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"]);

	  var handleChange = function handleChange(event) {
	    if (onChange) {
	      onChange(event, value);
	    }

	    if (onClick) {
	      onClick(event);
	    }
	  };

	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    ref: ref,
	    className: clsx(classes.root, className, selected ? classes.selected : !showLabel && classes.iconOnly),
	    focusRipple: true,
	    onClick: handleChange
	  }, other), /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.wrapper
	  }, icon, /*#__PURE__*/react.exports.createElement("span", {
	    className: clsx(classes.label, selected ? classes.selected : !showLabel && classes.iconOnly)
	  }, label)));
	});
	withStyles(styles$1B, {
	  name: 'MuiBottomNavigationAction'
	})(BottomNavigationAction);

	var styleFunction = styleFunctionSx(compose(borders, display, flexbox, grid, positions, palette, boxShadow, sizing, spacing, typography));
	/**
	 * @ignore - do not document.
	 */

	var Box = styled('div')(styleFunction, {
	  name: 'MuiBox'
	});

	var styles$1A = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      margin: 0
	    },

	    /* Styles applied to the root element if `variant="body2"`. */
	    body2: theme.typography.body2,

	    /* Styles applied to the root element if `variant="body1"`. */
	    body1: theme.typography.body1,

	    /* Styles applied to the root element if `variant="caption"`. */
	    caption: theme.typography.caption,

	    /* Styles applied to the root element if `variant="button"`. */
	    button: theme.typography.button,

	    /* Styles applied to the root element if `variant="h1"`. */
	    h1: theme.typography.h1,

	    /* Styles applied to the root element if `variant="h2"`. */
	    h2: theme.typography.h2,

	    /* Styles applied to the root element if `variant="h3"`. */
	    h3: theme.typography.h3,

	    /* Styles applied to the root element if `variant="h4"`. */
	    h4: theme.typography.h4,

	    /* Styles applied to the root element if `variant="h5"`. */
	    h5: theme.typography.h5,

	    /* Styles applied to the root element if `variant="h6"`. */
	    h6: theme.typography.h6,

	    /* Styles applied to the root element if `variant="subtitle1"`. */
	    subtitle1: theme.typography.subtitle1,

	    /* Styles applied to the root element if `variant="subtitle2"`. */
	    subtitle2: theme.typography.subtitle2,

	    /* Styles applied to the root element if `variant="overline"`. */
	    overline: theme.typography.overline,

	    /* Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. */
	    srOnly: {
	      position: 'absolute',
	      height: 1,
	      width: 1,
	      overflow: 'hidden'
	    },

	    /* Styles applied to the root element if `align="left"`. */
	    alignLeft: {
	      textAlign: 'left'
	    },

	    /* Styles applied to the root element if `align="center"`. */
	    alignCenter: {
	      textAlign: 'center'
	    },

	    /* Styles applied to the root element if `align="right"`. */
	    alignRight: {
	      textAlign: 'right'
	    },

	    /* Styles applied to the root element if `align="justify"`. */
	    alignJustify: {
	      textAlign: 'justify'
	    },

	    /* Styles applied to the root element if `nowrap={true}`. */
	    noWrap: {
	      overflow: 'hidden',
	      textOverflow: 'ellipsis',
	      whiteSpace: 'nowrap'
	    },

	    /* Styles applied to the root element if `gutterBottom={true}`. */
	    gutterBottom: {
	      marginBottom: '0.35em'
	    },

	    /* Styles applied to the root element if `paragraph={true}`. */
	    paragraph: {
	      marginBottom: 16
	    },

	    /* Styles applied to the root element if `color="inherit"`. */
	    colorInherit: {
	      color: 'inherit'
	    },

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {
	      color: theme.palette.primary.main
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    colorSecondary: {
	      color: theme.palette.secondary.main
	    },

	    /* Styles applied to the root element if `color="textPrimary"`. */
	    colorTextPrimary: {
	      color: theme.palette.text.primary
	    },

	    /* Styles applied to the root element if `color="textSecondary"`. */
	    colorTextSecondary: {
	      color: theme.palette.text.secondary
	    },

	    /* Styles applied to the root element if `color="error"`. */
	    colorError: {
	      color: theme.palette.error.main
	    },

	    /* Styles applied to the root element if `display="inline"`. */
	    displayInline: {
	      display: 'inline'
	    },

	    /* Styles applied to the root element if `display="block"`. */
	    displayBlock: {
	      display: 'block'
	    }
	  };
	};
	var defaultVariantMapping = {
	  h1: 'h1',
	  h2: 'h2',
	  h3: 'h3',
	  h4: 'h4',
	  h5: 'h5',
	  h6: 'h6',
	  subtitle1: 'h6',
	  subtitle2: 'h6',
	  body1: 'p',
	  body2: 'p'
	};
	var Typography = /*#__PURE__*/react.exports.forwardRef(function Typography(props, ref) {
	  var _props$align = props.align,
	      align = _props$align === void 0 ? 'inherit' : _props$align,
	      classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'initial' : _props$color,
	      component = props.component,
	      _props$display = props.display,
	      display = _props$display === void 0 ? 'initial' : _props$display,
	      _props$gutterBottom = props.gutterBottom,
	      gutterBottom = _props$gutterBottom === void 0 ? false : _props$gutterBottom,
	      _props$noWrap = props.noWrap,
	      noWrap = _props$noWrap === void 0 ? false : _props$noWrap,
	      _props$paragraph = props.paragraph,
	      paragraph = _props$paragraph === void 0 ? false : _props$paragraph,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'body1' : _props$variant,
	      _props$variantMapping = props.variantMapping,
	      variantMapping = _props$variantMapping === void 0 ? defaultVariantMapping : _props$variantMapping,
	      other = _objectWithoutProperties(props, ["align", "classes", "className", "color", "component", "display", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"]);

	  var Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className, variant !== 'inherit' && classes[variant], color !== 'initial' && classes["color".concat(capitalize(color))], noWrap && classes.noWrap, gutterBottom && classes.gutterBottom, paragraph && classes.paragraph, align !== 'inherit' && classes["align".concat(capitalize(align))], display !== 'initial' && classes["display".concat(capitalize(display))]),
	    ref: ref
	  }, other));
	});
	var Typography$1 = withStyles(styles$1A, {
	  name: 'MuiTypography'
	})(Typography);

	/**
	 * @ignore - internal component.
	 */

	var MoreHorizIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
	}));

	var styles$1z = function styles(theme) {
	  return {
	    root: {
	      display: 'flex',
	      marginLeft: theme.spacing(0.5),
	      marginRight: theme.spacing(0.5),
	      backgroundColor: theme.palette.grey[100],
	      color: theme.palette.grey[700],
	      borderRadius: 2,
	      cursor: 'pointer',
	      '&:hover, &:focus': {
	        backgroundColor: theme.palette.grey[200]
	      },
	      '&:active': {
	        boxShadow: theme.shadows[0],
	        backgroundColor: emphasize(theme.palette.grey[200], 0.12)
	      }
	    },
	    icon: {
	      width: 24,
	      height: 16
	    }
	  };
	};
	/**
	 * @ignore - internal component.
	 */


	function BreadcrumbCollapsed(props) {
	  var classes = props.classes,
	      other = _objectWithoutProperties(props, ["classes"]);

	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    component: "li",
	    className: classes.root,
	    focusRipple: true
	  }, other), /*#__PURE__*/react.exports.createElement(MoreHorizIcon, {
	    className: classes.icon
	  }));
	}
	var BreadcrumbCollapsed$1 = withStyles(styles$1z, {
	  name: 'PrivateBreadcrumbCollapsed'
	})(BreadcrumbCollapsed);

	var styles$1y = {
	  /* Styles applied to the root element. */
	  root: {},

	  /* Styles applied to the ol element. */
	  ol: {
	    display: 'flex',
	    flexWrap: 'wrap',
	    alignItems: 'center',
	    padding: 0,
	    margin: 0,
	    listStyle: 'none'
	  },

	  /* Styles applied to the li element. */
	  li: {},

	  /* Styles applied to the separator element. */
	  separator: {
	    display: 'flex',
	    userSelect: 'none',
	    marginLeft: 8,
	    marginRight: 8
	  }
	};

	function insertSeparators(items, className, separator) {
	  return items.reduce(function (acc, current, index) {
	    if (index < items.length - 1) {
	      acc = acc.concat(current, /*#__PURE__*/react.exports.createElement("li", {
	        "aria-hidden": true,
	        key: "separator-".concat(index),
	        className: className
	      }, separator));
	    } else {
	      acc.push(current);
	    }

	    return acc;
	  }, []);
	}

	var Breadcrumbs = /*#__PURE__*/react.exports.forwardRef(function Breadcrumbs(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'nav' : _props$component,
	      _props$expandText = props.expandText,
	      expandText = _props$expandText === void 0 ? 'Show path' : _props$expandText,
	      _props$itemsAfterColl = props.itemsAfterCollapse,
	      itemsAfterCollapse = _props$itemsAfterColl === void 0 ? 1 : _props$itemsAfterColl,
	      _props$itemsBeforeCol = props.itemsBeforeCollapse,
	      itemsBeforeCollapse = _props$itemsBeforeCol === void 0 ? 1 : _props$itemsBeforeCol,
	      _props$maxItems = props.maxItems,
	      maxItems = _props$maxItems === void 0 ? 8 : _props$maxItems,
	      _props$separator = props.separator,
	      separator = _props$separator === void 0 ? '/' : _props$separator,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"]);

	  var _React$useState = react.exports.useState(false),
	      expanded = _React$useState[0],
	      setExpanded = _React$useState[1];

	  var renderItemsBeforeAndAfter = function renderItemsBeforeAndAfter(allItems) {
	    var handleClickExpand = function handleClickExpand(event) {
	      setExpanded(true); // The clicked element received the focus but gets removed from the DOM.
	      // Let's keep the focus in the component after expanding.

	      var focusable = event.currentTarget.parentNode.querySelector('a[href],button,[tabindex]');

	      if (focusable) {
	        focusable.focus();
	      }
	    }; // This defends against someone passing weird input, to ensure that if all
	    // items would be shown anyway, we just show all items without the EllipsisItem


	    if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {

	      return allItems;
	    }

	    return [].concat(_toConsumableArray(allItems.slice(0, itemsBeforeCollapse)), [/*#__PURE__*/react.exports.createElement(BreadcrumbCollapsed$1, {
	      "aria-label": expandText,
	      key: "ellipsis",
	      onClick: handleClickExpand
	    })], _toConsumableArray(allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)));
	  };

	  var allItems = react.exports.Children.toArray(children).filter(function (child) {

	    return /*#__PURE__*/react.exports.isValidElement(child);
	  }).map(function (child, index) {
	    return /*#__PURE__*/react.exports.createElement("li", {
	      className: classes.li,
	      key: "child-".concat(index)
	    }, child);
	  });
	  return /*#__PURE__*/react.exports.createElement(Typography$1, _extends$5({
	    ref: ref,
	    component: Component,
	    color: "textSecondary",
	    className: clsx(classes.root, className)
	  }, other), /*#__PURE__*/react.exports.createElement("ol", {
	    className: classes.ol
	  }, insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator)));
	});
	withStyles(styles$1y, {
	  name: 'MuiBreadcrumbs'
	})(Breadcrumbs);

	var styles$1x = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: _extends$5({}, theme.typography.button, {
	      boxSizing: 'border-box',
	      minWidth: 64,
	      padding: '6px 16px',
	      borderRadius: theme.shape.borderRadius,
	      color: theme.palette.text.primary,
	      transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
	        duration: theme.transitions.duration.short
	      }),
	      '&:hover': {
	        textDecoration: 'none',
	        backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: 'transparent'
	        },
	        '&$disabled': {
	          backgroundColor: 'transparent'
	        }
	      },
	      '&$disabled': {
	        color: theme.palette.action.disabled
	      }
	    }),

	    /* Styles applied to the span element that wraps the children. */
	    label: {
	      width: '100%',
	      // Ensure the correct width for iOS Safari
	      display: 'inherit',
	      alignItems: 'inherit',
	      justifyContent: 'inherit'
	    },

	    /* Styles applied to the root element if `variant="text"`. */
	    text: {
	      padding: '6px 8px'
	    },

	    /* Styles applied to the root element if `variant="text"` and `color="primary"`. */
	    textPrimary: {
	      color: theme.palette.primary.main,
	      '&:hover': {
	        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: 'transparent'
	        }
	      }
	    },

	    /* Styles applied to the root element if `variant="text"` and `color="secondary"`. */
	    textSecondary: {
	      color: theme.palette.secondary.main,
	      '&:hover': {
	        backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: 'transparent'
	        }
	      }
	    },

	    /* Styles applied to the root element if `variant="outlined"`. */
	    outlined: {
	      padding: '5px 15px',
	      border: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'),
	      '&$disabled': {
	        border: "1px solid ".concat(theme.palette.action.disabledBackground)
	      }
	    },

	    /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
	    outlinedPrimary: {
	      color: theme.palette.primary.main,
	      border: "1px solid ".concat(alpha(theme.palette.primary.main, 0.5)),
	      '&:hover': {
	        border: "1px solid ".concat(theme.palette.primary.main),
	        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: 'transparent'
	        }
	      }
	    },

	    /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
	    outlinedSecondary: {
	      color: theme.palette.secondary.main,
	      border: "1px solid ".concat(alpha(theme.palette.secondary.main, 0.5)),
	      '&:hover': {
	        border: "1px solid ".concat(theme.palette.secondary.main),
	        backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: 'transparent'
	        }
	      },
	      '&$disabled': {
	        border: "1px solid ".concat(theme.palette.action.disabled)
	      }
	    },

	    /* Styles applied to the root element if `variant="contained"`. */
	    contained: {
	      color: theme.palette.getContrastText(theme.palette.grey[300]),
	      backgroundColor: theme.palette.grey[300],
	      boxShadow: theme.shadows[2],
	      '&:hover': {
	        backgroundColor: theme.palette.grey.A100,
	        boxShadow: theme.shadows[4],
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          boxShadow: theme.shadows[2],
	          backgroundColor: theme.palette.grey[300]
	        },
	        '&$disabled': {
	          backgroundColor: theme.palette.action.disabledBackground
	        }
	      },
	      '&$focusVisible': {
	        boxShadow: theme.shadows[6]
	      },
	      '&:active': {
	        boxShadow: theme.shadows[8]
	      },
	      '&$disabled': {
	        color: theme.palette.action.disabled,
	        boxShadow: theme.shadows[0],
	        backgroundColor: theme.palette.action.disabledBackground
	      }
	    },

	    /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
	    containedPrimary: {
	      color: theme.palette.primary.contrastText,
	      backgroundColor: theme.palette.primary.main,
	      '&:hover': {
	        backgroundColor: theme.palette.primary.dark,
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: theme.palette.primary.main
	        }
	      }
	    },

	    /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
	    containedSecondary: {
	      color: theme.palette.secondary.contrastText,
	      backgroundColor: theme.palette.secondary.main,
	      '&:hover': {
	        backgroundColor: theme.palette.secondary.dark,
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: theme.palette.secondary.main
	        }
	      }
	    },

	    /* Styles applied to the root element if `disableElevation={true}`. */
	    disableElevation: {
	      boxShadow: 'none',
	      '&:hover': {
	        boxShadow: 'none'
	      },
	      '&$focusVisible': {
	        boxShadow: 'none'
	      },
	      '&:active': {
	        boxShadow: 'none'
	      },
	      '&$disabled': {
	        boxShadow: 'none'
	      }
	    },

	    /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
	    focusVisible: {},

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the root element if `color="inherit"`. */
	    colorInherit: {
	      color: 'inherit',
	      borderColor: 'currentColor'
	    },

	    /* Styles applied to the root element if `size="small"` and `variant="text"`. */
	    textSizeSmall: {
	      padding: '4px 5px',
	      fontSize: theme.typography.pxToRem(13)
	    },

	    /* Styles applied to the root element if `size="large"` and `variant="text"`. */
	    textSizeLarge: {
	      padding: '8px 11px',
	      fontSize: theme.typography.pxToRem(15)
	    },

	    /* Styles applied to the root element if `size="small"` and `variant="outlined"`. */
	    outlinedSizeSmall: {
	      padding: '3px 9px',
	      fontSize: theme.typography.pxToRem(13)
	    },

	    /* Styles applied to the root element if `size="large"` and `variant="outlined"`. */
	    outlinedSizeLarge: {
	      padding: '7px 21px',
	      fontSize: theme.typography.pxToRem(15)
	    },

	    /* Styles applied to the root element if `size="small"` and `variant="contained"`. */
	    containedSizeSmall: {
	      padding: '4px 10px',
	      fontSize: theme.typography.pxToRem(13)
	    },

	    /* Styles applied to the root element if `size="large"` and `variant="contained"`. */
	    containedSizeLarge: {
	      padding: '8px 22px',
	      fontSize: theme.typography.pxToRem(15)
	    },

	    /* Styles applied to the root element if `size="small"`. */
	    sizeSmall: {},

	    /* Styles applied to the root element if `size="large"`. */
	    sizeLarge: {},

	    /* Styles applied to the root element if `fullWidth={true}`. */
	    fullWidth: {
	      width: '100%'
	    },

	    /* Styles applied to the startIcon element if supplied. */
	    startIcon: {
	      display: 'inherit',
	      marginRight: 8,
	      marginLeft: -4,
	      '&$iconSizeSmall': {
	        marginLeft: -2
	      }
	    },

	    /* Styles applied to the endIcon element if supplied. */
	    endIcon: {
	      display: 'inherit',
	      marginRight: -4,
	      marginLeft: 8,
	      '&$iconSizeSmall': {
	        marginRight: -2
	      }
	    },

	    /* Styles applied to the icon element if supplied and `size="small"`. */
	    iconSizeSmall: {
	      '& > *:first-child': {
	        fontSize: 18
	      }
	    },

	    /* Styles applied to the icon element if supplied and `size="medium"`. */
	    iconSizeMedium: {
	      '& > *:first-child': {
	        fontSize: 20
	      }
	    },

	    /* Styles applied to the icon element if supplied and `size="large"`. */
	    iconSizeLarge: {
	      '& > *:first-child': {
	        fontSize: 22
	      }
	    }
	  };
	};
	var Button = /*#__PURE__*/react.exports.forwardRef(function Button(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'default' : _props$color,
	      _props$component = props.component,
	      component = _props$component === void 0 ? 'button' : _props$component,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      _props$disableElevati = props.disableElevation,
	      disableElevation = _props$disableElevati === void 0 ? false : _props$disableElevati,
	      _props$disableFocusRi = props.disableFocusRipple,
	      disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
	      endIconProp = props.endIcon,
	      focusVisibleClassName = props.focusVisibleClassName,
	      _props$fullWidth = props.fullWidth,
	      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
	      _props$size = props.size,
	      size = _props$size === void 0 ? 'medium' : _props$size,
	      startIconProp = props.startIcon,
	      _props$type = props.type,
	      type = _props$type === void 0 ? 'button' : _props$type,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'text' : _props$variant,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"]);

	  var startIcon = startIconProp && /*#__PURE__*/react.exports.createElement("span", {
	    className: clsx(classes.startIcon, classes["iconSize".concat(capitalize(size))])
	  }, startIconProp);
	  var endIcon = endIconProp && /*#__PURE__*/react.exports.createElement("span", {
	    className: clsx(classes.endIcon, classes["iconSize".concat(capitalize(size))])
	  }, endIconProp);
	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    className: clsx(classes.root, classes[variant], className, color === 'inherit' ? classes.colorInherit : color !== 'default' && classes["".concat(variant).concat(capitalize(color))], size !== 'medium' && [classes["".concat(variant, "Size").concat(capitalize(size))], classes["size".concat(capitalize(size))]], disableElevation && classes.disableElevation, disabled && classes.disabled, fullWidth && classes.fullWidth),
	    component: component,
	    disabled: disabled,
	    focusRipple: !disableFocusRipple,
	    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
	    ref: ref,
	    type: type
	  }, other), /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.label
	  }, startIcon, children, endIcon));
	});
	var Button$1 = withStyles(styles$1x, {
	  name: 'MuiButton'
	})(Button);

	// eslint-disable-next-line no-unused-expressions

	Button$1.styles;
	var styles$1w = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'inline-flex',
	      borderRadius: theme.shape.borderRadius
	    },

	    /* Styles applied to the root element if `variant="contained"`. */
	    contained: {
	      boxShadow: theme.shadows[2]
	    },

	    /* Styles applied to the root element if `disableElevation={true}`. */
	    disableElevation: {
	      boxShadow: 'none'
	    },

	    /* Pseudo-class applied to child elements if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the root element if `fullWidth={true}`. */
	    fullWidth: {
	      width: '100%'
	    },

	    /* Styles applied to the root element if `orientation="vertical"`. */
	    vertical: {
	      flexDirection: 'column'
	    },

	    /* Styles applied to the children. */
	    grouped: {
	      minWidth: 40
	    },

	    /* Styles applied to the children if `orientation="horizontal"`. */
	    groupedHorizontal: {
	      '&:not(:first-child)': {
	        borderTopLeftRadius: 0,
	        borderBottomLeftRadius: 0
	      },
	      '&:not(:last-child)': {
	        borderTopRightRadius: 0,
	        borderBottomRightRadius: 0
	      }
	    },

	    /* Styles applied to the children if `orientation="vertical"`. */
	    groupedVertical: {
	      '&:not(:first-child)': {
	        borderTopRightRadius: 0,
	        borderTopLeftRadius: 0
	      },
	      '&:not(:last-child)': {
	        borderBottomRightRadius: 0,
	        borderBottomLeftRadius: 0
	      }
	    },

	    /* Styles applied to the children if `variant="text"`. */
	    groupedText: {},

	    /* Styles applied to the children if `variant="text"` and `orientation="horizontal"`. */
	    groupedTextHorizontal: {
	      '&:not(:last-child)': {
	        borderRight: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
	      }
	    },

	    /* Styles applied to the children if `variant="text"` and `orientation="vertical"`. */
	    groupedTextVertical: {
	      '&:not(:last-child)': {
	        borderBottom: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
	      }
	    },

	    /* Styles applied to the children if `variant="text"` and `color="primary"`. */
	    groupedTextPrimary: {
	      '&:not(:last-child)': {
	        borderColor: alpha(theme.palette.primary.main, 0.5)
	      }
	    },

	    /* Styles applied to the children if `variant="text"` and `color="secondary"`. */
	    groupedTextSecondary: {
	      '&:not(:last-child)': {
	        borderColor: alpha(theme.palette.secondary.main, 0.5)
	      }
	    },

	    /* Styles applied to the children if `variant="outlined"`. */
	    groupedOutlined: {},

	    /* Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. */
	    groupedOutlinedHorizontal: {
	      '&:not(:first-child)': {
	        marginLeft: -1
	      },
	      '&:not(:last-child)': {
	        borderRightColor: 'transparent'
	      }
	    },

	    /* Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. */
	    groupedOutlinedVertical: {
	      '&:not(:first-child)': {
	        marginTop: -1
	      },
	      '&:not(:last-child)': {
	        borderBottomColor: 'transparent'
	      }
	    },

	    /* Styles applied to the children if `variant="outlined"` and `color="primary"`. */
	    groupedOutlinedPrimary: {
	      '&:hover': {
	        borderColor: theme.palette.primary.main
	      }
	    },

	    /* Styles applied to the children if `variant="outlined"` and `color="secondary"`. */
	    groupedOutlinedSecondary: {
	      '&:hover': {
	        borderColor: theme.palette.secondary.main
	      }
	    },

	    /* Styles applied to the children if `variant="contained"`. */
	    groupedContained: {
	      boxShadow: 'none'
	    },

	    /* Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */
	    groupedContainedHorizontal: {
	      '&:not(:last-child)': {
	        borderRight: "1px solid ".concat(theme.palette.grey[400]),
	        '&$disabled': {
	          borderRight: "1px solid ".concat(theme.palette.action.disabled)
	        }
	      }
	    },

	    /* Styles applied to the children if `variant="contained"` and `orientation="vertical"`. */
	    groupedContainedVertical: {
	      '&:not(:last-child)': {
	        borderBottom: "1px solid ".concat(theme.palette.grey[400]),
	        '&$disabled': {
	          borderBottom: "1px solid ".concat(theme.palette.action.disabled)
	        }
	      }
	    },

	    /* Styles applied to the children if `variant="contained"` and `color="primary"`. */
	    groupedContainedPrimary: {
	      '&:not(:last-child)': {
	        borderColor: theme.palette.primary.dark
	      }
	    },

	    /* Styles applied to the children if `variant="contained"` and `color="secondary"`. */
	    groupedContainedSecondary: {
	      '&:not(:last-child)': {
	        borderColor: theme.palette.secondary.dark
	      }
	    }
	  };
	};
	var ButtonGroup = /*#__PURE__*/react.exports.forwardRef(function ButtonGroup(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'default' : _props$color,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      _props$disableElevati = props.disableElevation,
	      disableElevation = _props$disableElevati === void 0 ? false : _props$disableElevati,
	      _props$disableFocusRi = props.disableFocusRipple,
	      disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
	      _props$disableRipple = props.disableRipple,
	      disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,
	      _props$fullWidth = props.fullWidth,
	      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
	      _props$orientation = props.orientation,
	      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
	      _props$size = props.size,
	      size = _props$size === void 0 ? 'medium' : _props$size,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'outlined' : _props$variant,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"]);

	  var buttonClassName = clsx(classes.grouped, classes["grouped".concat(capitalize(orientation))], classes["grouped".concat(capitalize(variant))], classes["grouped".concat(capitalize(variant)).concat(capitalize(orientation))], classes["grouped".concat(capitalize(variant)).concat(color !== 'default' ? capitalize(color) : '')], disabled && classes.disabled);
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    role: "group",
	    className: clsx(classes.root, className, fullWidth && classes.fullWidth, disableElevation && classes.disableElevation, variant === 'contained' && classes.contained, orientation === 'vertical' && classes.vertical),
	    ref: ref
	  }, other), react.exports.Children.map(children, function (child) {
	    if (! /*#__PURE__*/react.exports.isValidElement(child)) {
	      return null;
	    }

	    return /*#__PURE__*/react.exports.cloneElement(child, {
	      className: clsx(buttonClassName, child.props.className),
	      color: child.props.color || color,
	      disabled: child.props.disabled || disabled,
	      disableElevation: child.props.disableElevation || disableElevation,
	      disableFocusRipple: disableFocusRipple,
	      disableRipple: disableRipple,
	      fullWidth: fullWidth,
	      size: child.props.size || size,
	      variant: child.props.variant || variant
	    });
	  }));
	});
	withStyles(styles$1w, {
	  name: 'MuiButtonGroup'
	})(ButtonGroup);

	var styles$1v = {
	  /* Styles applied to the root element. */
	  root: {
	    overflow: 'hidden'
	  }
	};
	var Card = /*#__PURE__*/react.exports.forwardRef(function Card(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$raised = props.raised,
	      raised = _props$raised === void 0 ? false : _props$raised,
	      other = _objectWithoutProperties(props, ["classes", "className", "raised"]);

	  return /*#__PURE__*/react.exports.createElement(Paper$1, _extends$5({
	    className: clsx(classes.root, className),
	    elevation: raised ? 8 : 1,
	    ref: ref
	  }, other));
	});
	withStyles(styles$1v, {
	  name: 'MuiCard'
	})(Card);

	var styles$1u = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'block',
	      textAlign: 'inherit',
	      width: '100%',
	      '&:hover $focusHighlight': {
	        opacity: theme.palette.action.hoverOpacity
	      },
	      '&$focusVisible $focusHighlight': {
	        opacity: 0.12
	      }
	    },

	    /* Pseudo-class applied to the ButtonBase root element if the action area is keyboard focused. */
	    focusVisible: {},

	    /* Styles applied to the overlay that covers the action area when it is keyboard focused. */
	    focusHighlight: {
	      overflow: 'hidden',
	      pointerEvents: 'none',
	      position: 'absolute',
	      top: 0,
	      right: 0,
	      bottom: 0,
	      left: 0,
	      borderRadius: 'inherit',
	      opacity: 0,
	      backgroundColor: 'currentcolor',
	      transition: theme.transitions.create('opacity', {
	        duration: theme.transitions.duration.short
	      })
	    }
	  };
	};
	var CardActionArea = /*#__PURE__*/react.exports.forwardRef(function CardActionArea(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      focusVisibleClassName = props.focusVisibleClassName,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "focusVisibleClassName"]);

	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    className: clsx(classes.root, className),
	    focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
	    ref: ref
	  }, other), children, /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.focusHighlight
	  }));
	});
	withStyles(styles$1u, {
	  name: 'MuiCardActionArea'
	})(CardActionArea);

	var styles$1t = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'flex',
	    alignItems: 'center',
	    padding: 8
	  },

	  /* Styles applied to the root element if `disableSpacing={false}`. */
	  spacing: {
	    '& > :not(:first-child)': {
	      marginLeft: 8
	    }
	  }
	};
	var CardActions = /*#__PURE__*/react.exports.forwardRef(function CardActions(props, ref) {
	  var _props$disableSpacing = props.disableSpacing,
	      disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,
	      classes = props.classes,
	      className = props.className,
	      other = _objectWithoutProperties(props, ["disableSpacing", "classes", "className"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, !disableSpacing && classes.spacing),
	    ref: ref
	  }, other));
	});
	withStyles(styles$1t, {
	  name: 'MuiCardActions'
	})(CardActions);

	var styles$1s = {
	  /* Styles applied to the root element. */
	  root: {
	    padding: 16,
	    '&:last-child': {
	      paddingBottom: 24
	    }
	  }
	};
	var CardContent = /*#__PURE__*/react.exports.forwardRef(function CardContent(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      other = _objectWithoutProperties(props, ["classes", "className", "component"]);

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other));
	});
	withStyles(styles$1s, {
	  name: 'MuiCardContent'
	})(CardContent);

	var styles$1r = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'flex',
	    alignItems: 'center',
	    padding: 16
	  },

	  /* Styles applied to the avatar element. */
	  avatar: {
	    flex: '0 0 auto',
	    marginRight: 16
	  },

	  /* Styles applied to the action element. */
	  action: {
	    flex: '0 0 auto',
	    alignSelf: 'flex-start',
	    marginTop: -8,
	    marginRight: -8
	  },

	  /* Styles applied to the content wrapper element. */
	  content: {
	    flex: '1 1 auto'
	  },

	  /* Styles applied to the title Typography element. */
	  title: {},

	  /* Styles applied to the subheader Typography element. */
	  subheader: {}
	};
	var CardHeader = /*#__PURE__*/react.exports.forwardRef(function CardHeader(props, ref) {
	  var action = props.action,
	      avatar = props.avatar,
	      classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      _props$disableTypogra = props.disableTypography,
	      disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
	      subheaderProp = props.subheader,
	      subheaderTypographyProps = props.subheaderTypographyProps,
	      titleProp = props.title,
	      titleTypographyProps = props.titleTypographyProps,
	      other = _objectWithoutProperties(props, ["action", "avatar", "classes", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"]);

	  var title = titleProp;

	  if (title != null && title.type !== Typography$1 && !disableTypography) {
	    title = /*#__PURE__*/react.exports.createElement(Typography$1, _extends$5({
	      variant: avatar ? 'body2' : 'h5',
	      className: classes.title,
	      component: "span",
	      display: "block"
	    }, titleTypographyProps), title);
	  }

	  var subheader = subheaderProp;

	  if (subheader != null && subheader.type !== Typography$1 && !disableTypography) {
	    subheader = /*#__PURE__*/react.exports.createElement(Typography$1, _extends$5({
	      variant: avatar ? 'body2' : 'body1',
	      className: classes.subheader,
	      color: "textSecondary",
	      component: "span",
	      display: "block"
	    }, subheaderTypographyProps), subheader);
	  }

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other), avatar && /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.avatar
	  }, avatar), /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.content
	  }, title, subheader), action && /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.action
	  }, action));
	});
	withStyles(styles$1r, {
	  name: 'MuiCardHeader'
	})(CardHeader);

	var styles$1q = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'block',
	    backgroundSize: 'cover',
	    backgroundRepeat: 'no-repeat',
	    backgroundPosition: 'center'
	  },

	  /* Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. */
	  media: {
	    width: '100%'
	  },

	  /* Styles applied to the root element if `component="picture or img"`. */
	  img: {
	    // ⚠️ object-fit is not supported by IE 11.
	    objectFit: 'cover'
	  }
	};
	var MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
	var CardMedia = /*#__PURE__*/react.exports.forwardRef(function CardMedia(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      image = props.image,
	      src = props.src,
	      style = props.style,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "image", "src", "style"]);

	  var isMediaComponent = MEDIA_COMPONENTS.indexOf(Component) !== -1;
	  var composedStyle = !isMediaComponent && image ? _extends$5({
	    backgroundImage: "url(\"".concat(image, "\")")
	  }, style) : style;
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className, isMediaComponent && classes.media, "picture img".indexOf(Component) !== -1 && classes.img),
	    ref: ref,
	    style: composedStyle,
	    src: isMediaComponent ? image || src : undefined
	  }, other), children);
	});
	withStyles(styles$1q, {
	  name: 'MuiCardMedia'
	})(CardMedia);

	/**
	 * @ignore - internal component.
	 */

	var FormControlContext = react.exports.createContext();

	function useFormControl$1() {
	  return react.exports.useContext(FormControlContext);
	}

	function useFormControl() {
	  return react.exports.useContext(FormControlContext);
	}

	var styles$1p = {
	  root: {
	    padding: 9
	  },
	  checked: {},
	  disabled: {},
	  input: {
	    cursor: 'inherit',
	    position: 'absolute',
	    opacity: 0,
	    width: '100%',
	    height: '100%',
	    top: 0,
	    left: 0,
	    margin: 0,
	    padding: 0,
	    zIndex: 1
	  }
	};
	/**
	 * @ignore - internal component.
	 */

	var SwitchBase = /*#__PURE__*/react.exports.forwardRef(function SwitchBase(props, ref) {
	  var autoFocus = props.autoFocus,
	      checkedProp = props.checked,
	      checkedIcon = props.checkedIcon,
	      classes = props.classes,
	      className = props.className,
	      defaultChecked = props.defaultChecked,
	      disabledProp = props.disabled,
	      icon = props.icon,
	      id = props.id,
	      inputProps = props.inputProps,
	      inputRef = props.inputRef,
	      name = props.name,
	      onBlur = props.onBlur,
	      onChange = props.onChange,
	      onFocus = props.onFocus,
	      readOnly = props.readOnly,
	      required = props.required,
	      tabIndex = props.tabIndex,
	      type = props.type,
	      value = props.value,
	      other = _objectWithoutProperties(props, ["autoFocus", "checked", "checkedIcon", "classes", "className", "defaultChecked", "disabled", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"]);

	  var _useControlled = useControlled({
	    controlled: checkedProp,
	    default: Boolean(defaultChecked),
	    name: 'SwitchBase',
	    state: 'checked'
	  }),
	      _useControlled2 = _slicedToArray(_useControlled, 2),
	      checked = _useControlled2[0],
	      setCheckedState = _useControlled2[1];

	  var muiFormControl = useFormControl();

	  var handleFocus = function handleFocus(event) {
	    if (onFocus) {
	      onFocus(event);
	    }

	    if (muiFormControl && muiFormControl.onFocus) {
	      muiFormControl.onFocus(event);
	    }
	  };

	  var handleBlur = function handleBlur(event) {
	    if (onBlur) {
	      onBlur(event);
	    }

	    if (muiFormControl && muiFormControl.onBlur) {
	      muiFormControl.onBlur(event);
	    }
	  };

	  var handleInputChange = function handleInputChange(event) {
	    var newChecked = event.target.checked;
	    setCheckedState(newChecked);

	    if (onChange) {
	      // TODO v5: remove the second argument.
	      onChange(event, newChecked);
	    }
	  };

	  var disabled = disabledProp;

	  if (muiFormControl) {
	    if (typeof disabled === 'undefined') {
	      disabled = muiFormControl.disabled;
	    }
	  }

	  var hasLabelFor = type === 'checkbox' || type === 'radio';
	  return /*#__PURE__*/react.exports.createElement(IconButton$1, _extends$5({
	    component: "span",
	    className: clsx(classes.root, className, checked && classes.checked, disabled && classes.disabled),
	    disabled: disabled,
	    tabIndex: null,
	    role: undefined,
	    onFocus: handleFocus,
	    onBlur: handleBlur,
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("input", _extends$5({
	    autoFocus: autoFocus,
	    checked: checkedProp,
	    defaultChecked: defaultChecked,
	    className: classes.input,
	    disabled: disabled,
	    id: hasLabelFor && id,
	    name: name,
	    onChange: handleInputChange,
	    readOnly: readOnly,
	    ref: inputRef,
	    required: required,
	    tabIndex: tabIndex,
	    type: type,
	    value: value
	  }, inputProps)), checked ? checkedIcon : icon);
	}); // NB: If changed, please update Checkbox, Switch and Radio
	var SwitchBase$1 = withStyles(styles$1p, {
	  name: 'PrivateSwitchBase'
	})(SwitchBase);

	/**
	 * @ignore - internal component.
	 */

	var CheckBoxOutlineBlankIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
	}));

	/**
	 * @ignore - internal component.
	 */

	var CheckBoxIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
	}));

	/**
	 * @ignore - internal component.
	 */

	var IndeterminateCheckBoxIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
	}));

	var styles$1o = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      color: theme.palette.text.secondary
	    },

	    /* Pseudo-class applied to the root element if `checked={true}`. */
	    checked: {},

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Pseudo-class applied to the root element if `indeterminate={true}`. */
	    indeterminate: {},

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {
	      '&$checked': {
	        color: theme.palette.primary.main,
	        '&:hover': {
	          backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
	          // Reset on touch devices, it doesn't add specificity
	          '@media (hover: none)': {
	            backgroundColor: 'transparent'
	          }
	        }
	      },
	      '&$disabled': {
	        color: theme.palette.action.disabled
	      }
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    colorSecondary: {
	      '&$checked': {
	        color: theme.palette.secondary.main,
	        '&:hover': {
	          backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
	          // Reset on touch devices, it doesn't add specificity
	          '@media (hover: none)': {
	            backgroundColor: 'transparent'
	          }
	        }
	      },
	      '&$disabled': {
	        color: theme.palette.action.disabled
	      }
	    }
	  };
	};
	var defaultCheckedIcon$1 = /*#__PURE__*/react.exports.createElement(CheckBoxIcon, null);
	var defaultIcon$1 = /*#__PURE__*/react.exports.createElement(CheckBoxOutlineBlankIcon, null);
	var defaultIndeterminateIcon = /*#__PURE__*/react.exports.createElement(IndeterminateCheckBoxIcon, null);
	var Checkbox = /*#__PURE__*/react.exports.forwardRef(function Checkbox(props, ref) {
	  var _props$checkedIcon = props.checkedIcon,
	      checkedIcon = _props$checkedIcon === void 0 ? defaultCheckedIcon$1 : _props$checkedIcon,
	      classes = props.classes,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'secondary' : _props$color,
	      _props$icon = props.icon,
	      iconProp = _props$icon === void 0 ? defaultIcon$1 : _props$icon,
	      _props$indeterminate = props.indeterminate,
	      indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,
	      _props$indeterminateI = props.indeterminateIcon,
	      indeterminateIconProp = _props$indeterminateI === void 0 ? defaultIndeterminateIcon : _props$indeterminateI,
	      inputProps = props.inputProps,
	      _props$size = props.size,
	      size = _props$size === void 0 ? 'medium' : _props$size,
	      other = _objectWithoutProperties(props, ["checkedIcon", "classes", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"]);

	  var icon = indeterminate ? indeterminateIconProp : iconProp;
	  var indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
	  return /*#__PURE__*/react.exports.createElement(SwitchBase$1, _extends$5({
	    type: "checkbox",
	    classes: {
	      root: clsx(classes.root, classes["color".concat(capitalize(color))], indeterminate && classes.indeterminate),
	      checked: classes.checked,
	      disabled: classes.disabled
	    },
	    color: color,
	    inputProps: _extends$5({
	      'data-indeterminate': indeterminate
	    }, inputProps),
	    icon: /*#__PURE__*/react.exports.cloneElement(icon, {
	      fontSize: icon.props.fontSize === undefined && size === "small" ? size : icon.props.fontSize
	    }),
	    checkedIcon: /*#__PURE__*/react.exports.cloneElement(indeterminateIcon, {
	      fontSize: indeterminateIcon.props.fontSize === undefined && size === "small" ? size : indeterminateIcon.props.fontSize
	    }),
	    ref: ref
	  }, other));
	});
	var Checkbox$1 = withStyles(styles$1o, {
	  name: 'MuiCheckbox'
	})(Checkbox);

	/**
	 * @ignore - internal component.
	 */

	var CancelIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
	}));

	var styles$1n = function styles(theme) {
	  var backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];
	  var deleteIconColor = alpha(theme.palette.text.primary, 0.26);
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      fontFamily: theme.typography.fontFamily,
	      fontSize: theme.typography.pxToRem(13),
	      display: 'inline-flex',
	      alignItems: 'center',
	      justifyContent: 'center',
	      height: 32,
	      color: theme.palette.getContrastText(backgroundColor),
	      backgroundColor: backgroundColor,
	      borderRadius: 32 / 2,
	      whiteSpace: 'nowrap',
	      transition: theme.transitions.create(['background-color', 'box-shadow']),
	      // label will inherit this from root, then `clickable` class overrides this for both
	      cursor: 'default',
	      // We disable the focus ring for mouse, touch and keyboard users.
	      outline: 0,
	      textDecoration: 'none',
	      border: 'none',
	      // Remove `button` border
	      padding: 0,
	      // Remove `button` padding
	      verticalAlign: 'middle',
	      boxSizing: 'border-box',
	      '&$disabled': {
	        opacity: 0.5,
	        pointerEvents: 'none'
	      },
	      '& $avatar': {
	        marginLeft: 5,
	        marginRight: -6,
	        width: 24,
	        height: 24,
	        color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
	        fontSize: theme.typography.pxToRem(12)
	      },
	      '& $avatarColorPrimary': {
	        color: theme.palette.primary.contrastText,
	        backgroundColor: theme.palette.primary.dark
	      },
	      '& $avatarColorSecondary': {
	        color: theme.palette.secondary.contrastText,
	        backgroundColor: theme.palette.secondary.dark
	      },
	      '& $avatarSmall': {
	        marginLeft: 4,
	        marginRight: -4,
	        width: 18,
	        height: 18,
	        fontSize: theme.typography.pxToRem(10)
	      }
	    },

	    /* Styles applied to the root element if `size="small"`. */
	    sizeSmall: {
	      height: 24
	    },

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {
	      backgroundColor: theme.palette.primary.main,
	      color: theme.palette.primary.contrastText
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    colorSecondary: {
	      backgroundColor: theme.palette.secondary.main,
	      color: theme.palette.secondary.contrastText
	    },

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the root element if `onClick` is defined or `clickable={true}`. */
	    clickable: {
	      userSelect: 'none',
	      WebkitTapHighlightColor: 'transparent',
	      cursor: 'pointer',
	      '&:hover, &:focus': {
	        backgroundColor: emphasize(backgroundColor, 0.08)
	      },
	      '&:active': {
	        boxShadow: theme.shadows[1]
	      }
	    },

	    /* Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. */
	    clickableColorPrimary: {
	      '&:hover, &:focus': {
	        backgroundColor: emphasize(theme.palette.primary.main, 0.08)
	      }
	    },

	    /* Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */
	    clickableColorSecondary: {
	      '&:hover, &:focus': {
	        backgroundColor: emphasize(theme.palette.secondary.main, 0.08)
	      }
	    },

	    /* Styles applied to the root element if `onDelete` is defined. */
	    deletable: {
	      '&:focus': {
	        backgroundColor: emphasize(backgroundColor, 0.08)
	      }
	    },

	    /* Styles applied to the root element if `onDelete` and `color="primary"` is defined. */
	    deletableColorPrimary: {
	      '&:focus': {
	        backgroundColor: emphasize(theme.palette.primary.main, 0.2)
	      }
	    },

	    /* Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */
	    deletableColorSecondary: {
	      '&:focus': {
	        backgroundColor: emphasize(theme.palette.secondary.main, 0.2)
	      }
	    },

	    /* Styles applied to the root element if `variant="outlined"`. */
	    outlined: {
	      backgroundColor: 'transparent',
	      border: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'),
	      '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
	        backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity)
	      },
	      '& $avatar': {
	        marginLeft: 4
	      },
	      '& $avatarSmall': {
	        marginLeft: 2
	      },
	      '& $icon': {
	        marginLeft: 4
	      },
	      '& $iconSmall': {
	        marginLeft: 2
	      },
	      '& $deleteIcon': {
	        marginRight: 5
	      },
	      '& $deleteIconSmall': {
	        marginRight: 3
	      }
	    },

	    /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
	    outlinedPrimary: {
	      color: theme.palette.primary.main,
	      border: "1px solid ".concat(theme.palette.primary.main),
	      '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
	        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
	      }
	    },

	    /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
	    outlinedSecondary: {
	      color: theme.palette.secondary.main,
	      border: "1px solid ".concat(theme.palette.secondary.main),
	      '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
	        backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity)
	      }
	    },
	    // TODO v5: remove

	    /* Styles applied to the `avatar` element. */
	    avatar: {},

	    /* Styles applied to the `avatar` element if `size="small"`. */
	    avatarSmall: {},

	    /* Styles applied to the `avatar` element if `color="primary"`. */
	    avatarColorPrimary: {},

	    /* Styles applied to the `avatar` element if `color="secondary"`. */
	    avatarColorSecondary: {},

	    /* Styles applied to the `icon` element. */
	    icon: {
	      color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
	      marginLeft: 5,
	      marginRight: -6
	    },

	    /* Styles applied to the `icon` element if `size="small"`. */
	    iconSmall: {
	      width: 18,
	      height: 18,
	      marginLeft: 4,
	      marginRight: -4
	    },

	    /* Styles applied to the `icon` element if `color="primary"`. */
	    iconColorPrimary: {
	      color: 'inherit'
	    },

	    /* Styles applied to the `icon` element if `color="secondary"`. */
	    iconColorSecondary: {
	      color: 'inherit'
	    },

	    /* Styles applied to the label `span` element. */
	    label: {
	      overflow: 'hidden',
	      textOverflow: 'ellipsis',
	      paddingLeft: 12,
	      paddingRight: 12,
	      whiteSpace: 'nowrap'
	    },

	    /* Styles applied to the label `span` element if `size="small"`. */
	    labelSmall: {
	      paddingLeft: 8,
	      paddingRight: 8
	    },

	    /* Styles applied to the `deleteIcon` element. */
	    deleteIcon: {
	      WebkitTapHighlightColor: 'transparent',
	      color: deleteIconColor,
	      height: 22,
	      width: 22,
	      cursor: 'pointer',
	      margin: '0 5px 0 -6px',
	      '&:hover': {
	        color: alpha(deleteIconColor, 0.4)
	      }
	    },

	    /* Styles applied to the `deleteIcon` element if `size="small"`. */
	    deleteIconSmall: {
	      height: 16,
	      width: 16,
	      marginRight: 4,
	      marginLeft: -4
	    },

	    /* Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`. */
	    deleteIconColorPrimary: {
	      color: alpha(theme.palette.primary.contrastText, 0.7),
	      '&:hover, &:active': {
	        color: theme.palette.primary.contrastText
	      }
	    },

	    /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="default"`. */
	    deleteIconColorSecondary: {
	      color: alpha(theme.palette.secondary.contrastText, 0.7),
	      '&:hover, &:active': {
	        color: theme.palette.secondary.contrastText
	      }
	    },

	    /* Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */
	    deleteIconOutlinedColorPrimary: {
	      color: alpha(theme.palette.primary.main, 0.7),
	      '&:hover, &:active': {
	        color: theme.palette.primary.main
	      }
	    },

	    /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */
	    deleteIconOutlinedColorSecondary: {
	      color: alpha(theme.palette.secondary.main, 0.7),
	      '&:hover, &:active': {
	        color: theme.palette.secondary.main
	      }
	    }
	  };
	};

	function isDeleteKeyboardEvent(keyboardEvent) {
	  return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
	}
	/**
	 * Chips represent complex entities in small blocks, such as a contact.
	 */


	var Chip = /*#__PURE__*/react.exports.forwardRef(function Chip(props, ref) {
	  var avatarProp = props.avatar,
	      classes = props.classes,
	      className = props.className,
	      clickableProp = props.clickable,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'default' : _props$color,
	      ComponentProp = props.component,
	      deleteIconProp = props.deleteIcon,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      iconProp = props.icon,
	      label = props.label,
	      onClick = props.onClick,
	      onDelete = props.onDelete,
	      onKeyDown = props.onKeyDown,
	      onKeyUp = props.onKeyUp,
	      _props$size = props.size,
	      size = _props$size === void 0 ? 'medium' : _props$size,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'default' : _props$variant,
	      other = _objectWithoutProperties(props, ["avatar", "classes", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"]);

	  var chipRef = react.exports.useRef(null);
	  var handleRef = useForkRef(chipRef, ref);

	  var handleDeleteIconClick = function handleDeleteIconClick(event) {
	    // Stop the event from bubbling up to the `Chip`
	    event.stopPropagation();

	    if (onDelete) {
	      onDelete(event);
	    }
	  };

	  var handleKeyDown = function handleKeyDown(event) {
	    // Ignore events from children of `Chip`.
	    if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) {
	      // will be handled in keyUp, otherwise some browsers
	      // might init navigation
	      event.preventDefault();
	    }

	    if (onKeyDown) {
	      onKeyDown(event);
	    }
	  };

	  var handleKeyUp = function handleKeyUp(event) {
	    // Ignore events from children of `Chip`.
	    if (event.currentTarget === event.target) {
	      if (onDelete && isDeleteKeyboardEvent(event)) {
	        onDelete(event);
	      } else if (event.key === 'Escape' && chipRef.current) {
	        chipRef.current.blur();
	      }
	    }

	    if (onKeyUp) {
	      onKeyUp(event);
	    }
	  };

	  var clickable = clickableProp !== false && onClick ? true : clickableProp;
	  var small = size === 'small';
	  var Component = ComponentProp || (clickable ? ButtonBase$1 : 'div');
	  var moreProps = Component === ButtonBase$1 ? {
	    component: 'div'
	  } : {};
	  var deleteIcon = null;

	  if (onDelete) {
	    var customClasses = clsx(color !== 'default' && (variant === "default" ? classes["deleteIconColor".concat(capitalize(color))] : classes["deleteIconOutlinedColor".concat(capitalize(color))]), small && classes.deleteIconSmall);
	    deleteIcon = deleteIconProp && /*#__PURE__*/react.exports.isValidElement(deleteIconProp) ? /*#__PURE__*/react.exports.cloneElement(deleteIconProp, {
	      className: clsx(deleteIconProp.props.className, classes.deleteIcon, customClasses),
	      onClick: handleDeleteIconClick
	    }) : /*#__PURE__*/react.exports.createElement(CancelIcon, {
	      className: clsx(classes.deleteIcon, customClasses),
	      onClick: handleDeleteIconClick
	    });
	  }

	  var avatar = null;

	  if (avatarProp && /*#__PURE__*/react.exports.isValidElement(avatarProp)) {
	    avatar = /*#__PURE__*/react.exports.cloneElement(avatarProp, {
	      className: clsx(classes.avatar, avatarProp.props.className, small && classes.avatarSmall, color !== 'default' && classes["avatarColor".concat(capitalize(color))])
	    });
	  }

	  var icon = null;

	  if (iconProp && /*#__PURE__*/react.exports.isValidElement(iconProp)) {
	    icon = /*#__PURE__*/react.exports.cloneElement(iconProp, {
	      className: clsx(classes.icon, iconProp.props.className, small && classes.iconSmall, color !== 'default' && classes["iconColor".concat(capitalize(color))])
	    });
	  }

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    role: clickable || onDelete ? 'button' : undefined,
	    className: clsx(classes.root, className, color !== 'default' && [classes["color".concat(capitalize(color))], clickable && classes["clickableColor".concat(capitalize(color))], onDelete && classes["deletableColor".concat(capitalize(color))]], variant !== "default" && [classes.outlined, {
	      'primary': classes.outlinedPrimary,
	      'secondary': classes.outlinedSecondary
	    }[color]], disabled && classes.disabled, small && classes.sizeSmall, clickable && classes.clickable, onDelete && classes.deletable),
	    "aria-disabled": disabled ? true : undefined,
	    tabIndex: clickable || onDelete ? 0 : undefined,
	    onClick: onClick,
	    onKeyDown: handleKeyDown,
	    onKeyUp: handleKeyUp,
	    ref: handleRef
	  }, moreProps, other), avatar || icon, /*#__PURE__*/react.exports.createElement("span", {
	    className: clsx(classes.label, small && classes.labelSmall)
	  }, label), deleteIcon);
	});
	withStyles(styles$1n, {
	  name: 'MuiChip'
	})(Chip);

	var SIZE = 44;
	var styles$1m = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'inline-block'
	    },

	    /* Styles applied to the root element if `variant="static"`. */
	    static: {
	      transition: theme.transitions.create('transform')
	    },

	    /* Styles applied to the root element if `variant="indeterminate"`. */
	    indeterminate: {
	      animation: '$circular-rotate 1.4s linear infinite'
	    },

	    /* Styles applied to the root element if `variant="determinate"`. */
	    determinate: {
	      transition: theme.transitions.create('transform')
	    },

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {
	      color: theme.palette.primary.main
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    colorSecondary: {
	      color: theme.palette.secondary.main
	    },

	    /* Styles applied to the `svg` element. */
	    svg: {
	      display: 'block' // Keeps the progress centered

	    },

	    /* Styles applied to the `circle` svg path. */
	    circle: {
	      stroke: 'currentColor' // Use butt to follow the specification, by chance, it's already the default CSS value.
	      // strokeLinecap: 'butt',

	    },

	    /* Styles applied to the `circle` svg path if `variant="static"`. */
	    circleStatic: {
	      transition: theme.transitions.create('stroke-dashoffset')
	    },

	    /* Styles applied to the `circle` svg path if `variant="indeterminate"`. */
	    circleIndeterminate: {
	      animation: '$circular-dash 1.4s ease-in-out infinite',
	      // Some default value that looks fine waiting for the animation to kicks in.
	      strokeDasharray: '80px, 200px',
	      strokeDashoffset: '0px' // Add the unit to fix a Edge 16 and below bug.

	    },

	    /* Styles applied to the `circle` svg path if `variant="determinate"`. */
	    circleDeterminate: {
	      transition: theme.transitions.create('stroke-dashoffset')
	    },
	    '@keyframes circular-rotate': {
	      '0%': {
	        // Fix IE 11 wobbly
	        transformOrigin: '50% 50%'
	      },
	      '100%': {
	        transform: 'rotate(360deg)'
	      }
	    },
	    '@keyframes circular-dash': {
	      '0%': {
	        strokeDasharray: '1px, 200px',
	        strokeDashoffset: '0px'
	      },
	      '50%': {
	        strokeDasharray: '100px, 200px',
	        strokeDashoffset: '-15px'
	      },
	      '100%': {
	        strokeDasharray: '100px, 200px',
	        strokeDashoffset: '-125px'
	      }
	    },

	    /* Styles applied to the `circle` svg path if `disableShrink={true}`. */
	    circleDisableShrink: {
	      animation: 'none'
	    }
	  };
	};
	/**
	 * ## ARIA
	 *
	 * If the progress bar is describing the loading progress of a particular region of a page,
	 * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
	 * attribute to `true` on that region until it has finished loading.
	 */

	var CircularProgress = /*#__PURE__*/react.exports.forwardRef(function CircularProgress(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'primary' : _props$color,
	      _props$disableShrink = props.disableShrink,
	      disableShrink = _props$disableShrink === void 0 ? false : _props$disableShrink,
	      _props$size = props.size,
	      size = _props$size === void 0 ? 40 : _props$size,
	      style = props.style,
	      _props$thickness = props.thickness,
	      thickness = _props$thickness === void 0 ? 3.6 : _props$thickness,
	      _props$value = props.value,
	      value = _props$value === void 0 ? 0 : _props$value,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'indeterminate' : _props$variant,
	      other = _objectWithoutProperties(props, ["classes", "className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"]);

	  var circleStyle = {};
	  var rootStyle = {};
	  var rootProps = {};

	  if (variant === 'determinate' || variant === 'static') {
	    var circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
	    circleStyle.strokeDasharray = circumference.toFixed(3);
	    rootProps['aria-valuenow'] = Math.round(value);
	    circleStyle.strokeDashoffset = "".concat(((100 - value) / 100 * circumference).toFixed(3), "px");
	    rootStyle.transform = 'rotate(-90deg)';
	  }

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, color !== 'inherit' && classes["color".concat(capitalize(color))], {
	      'determinate': classes.determinate,
	      'indeterminate': classes.indeterminate,
	      'static': classes.static
	    }[variant]),
	    style: _extends$5({
	      width: size,
	      height: size
	    }, rootStyle, style),
	    ref: ref,
	    role: "progressbar"
	  }, rootProps, other), /*#__PURE__*/react.exports.createElement("svg", {
	    className: classes.svg,
	    viewBox: "".concat(SIZE / 2, " ").concat(SIZE / 2, " ").concat(SIZE, " ").concat(SIZE)
	  }, /*#__PURE__*/react.exports.createElement("circle", {
	    className: clsx(classes.circle, disableShrink && classes.circleDisableShrink, {
	      'determinate': classes.circleDeterminate,
	      'indeterminate': classes.circleIndeterminate,
	      'static': classes.circleStatic
	    }[variant]),
	    style: circleStyle,
	    cx: SIZE,
	    cy: SIZE,
	    r: (SIZE - thickness) / 2,
	    fill: "none",
	    strokeWidth: thickness
	  })));
	});
	var CircularProgress$1 = withStyles(styles$1m, {
	  name: 'MuiCircularProgress',
	  flip: false
	})(CircularProgress);

	function mapEventPropToEvent(eventProp) {
	  return eventProp.substring(2).toLowerCase();
	}

	function clickedRootScrollbar(event) {
	  return document.documentElement.clientWidth < event.clientX || document.documentElement.clientHeight < event.clientY;
	}
	/**
	 * Listen for click events that occur somewhere in the document, outside of the element itself.
	 * For instance, if you need to hide a menu when people click anywhere else on your page.
	 */


	function ClickAwayListener(props) {
	  var children = props.children,
	      _props$disableReactTr = props.disableReactTree,
	      disableReactTree = _props$disableReactTr === void 0 ? false : _props$disableReactTr,
	      _props$mouseEvent = props.mouseEvent,
	      mouseEvent = _props$mouseEvent === void 0 ? 'onClick' : _props$mouseEvent,
	      onClickAway = props.onClickAway,
	      _props$touchEvent = props.touchEvent,
	      touchEvent = _props$touchEvent === void 0 ? 'onTouchEnd' : _props$touchEvent;
	  var movedRef = react.exports.useRef(false);
	  var nodeRef = react.exports.useRef(null);
	  var activatedRef = react.exports.useRef(false);
	  var syntheticEventRef = react.exports.useRef(false);
	  react.exports.useEffect(function () {
	    // Ensure that this component is not "activated" synchronously.
	    // https://github.com/facebook/react/issues/20074
	    setTimeout(function () {
	      activatedRef.current = true;
	    }, 0);
	    return function () {
	      activatedRef.current = false;
	    };
	  }, []); // can be removed once we drop support for non ref forwarding class components

	  var handleOwnRef = react.exports.useCallback(function (instance) {
	    // #StrictMode ready
	    nodeRef.current = reactDom.exports.findDOMNode(instance);
	  }, []);
	  var handleRef = useForkRef(children.ref, handleOwnRef); // The handler doesn't take event.defaultPrevented into account:
	  //
	  // event.preventDefault() is meant to stop default behaviours like
	  // clicking a checkbox to check it, hitting a button to submit a form,
	  // and hitting left arrow to move the cursor in a text input etc.
	  // Only special HTML elements have these default behaviors.

	  var handleClickAway = useEventCallback(function (event) {
	    // Given developers can stop the propagation of the synthetic event,
	    // we can only be confident with a positive value.
	    var insideReactTree = syntheticEventRef.current;
	    syntheticEventRef.current = false; // 1. IE 11 support, which trigger the handleClickAway even after the unbind
	    // 2. The child might render null.
	    // 3. Behave like a blur listener.

	    if (!activatedRef.current || !nodeRef.current || clickedRootScrollbar(event)) {
	      return;
	    } // Do not act if user performed touchmove


	    if (movedRef.current) {
	      movedRef.current = false;
	      return;
	    }

	    var insideDOM; // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js

	    if (event.composedPath) {
	      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
	    } else {
	      // TODO v6 remove dead logic https://caniuse.com/#search=composedPath.
	      var doc = ownerDocument(nodeRef.current);
	      insideDOM = !doc.documentElement.contains(event.target) || nodeRef.current.contains(event.target);
	    }

	    if (!insideDOM && (disableReactTree || !insideReactTree)) {
	      onClickAway(event);
	    }
	  }); // Keep track of mouse/touch events that bubbled up through the portal.

	  var createHandleSynthetic = function createHandleSynthetic(handlerName) {
	    return function (event) {
	      syntheticEventRef.current = true;
	      var childrenPropsHandler = children.props[handlerName];

	      if (childrenPropsHandler) {
	        childrenPropsHandler(event);
	      }
	    };
	  };

	  var childrenProps = {
	    ref: handleRef
	  };

	  if (touchEvent !== false) {
	    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
	  }

	  react.exports.useEffect(function () {
	    if (touchEvent !== false) {
	      var mappedTouchEvent = mapEventPropToEvent(touchEvent);
	      var doc = ownerDocument(nodeRef.current);

	      var handleTouchMove = function handleTouchMove() {
	        movedRef.current = true;
	      };

	      doc.addEventListener(mappedTouchEvent, handleClickAway);
	      doc.addEventListener('touchmove', handleTouchMove);
	      return function () {
	        doc.removeEventListener(mappedTouchEvent, handleClickAway);
	        doc.removeEventListener('touchmove', handleTouchMove);
	      };
	    }

	    return undefined;
	  }, [handleClickAway, touchEvent]);

	  if (mouseEvent !== false) {
	    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
	  }

	  react.exports.useEffect(function () {
	    if (mouseEvent !== false) {
	      var mappedMouseEvent = mapEventPropToEvent(mouseEvent);
	      var doc = ownerDocument(nodeRef.current);
	      doc.addEventListener(mappedMouseEvent, handleClickAway);
	      return function () {
	        doc.removeEventListener(mappedMouseEvent, handleClickAway);
	      };
	    }

	    return undefined;
	  }, [handleClickAway, mouseEvent]);
	  return /*#__PURE__*/react.exports.createElement(react.exports.Fragment, null, /*#__PURE__*/react.exports.cloneElement(children, childrenProps));
	}

	var styles$1l = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: _defineProperty$1({
	      width: '100%',
	      marginLeft: 'auto',
	      boxSizing: 'border-box',
	      marginRight: 'auto',
	      paddingLeft: theme.spacing(2),
	      paddingRight: theme.spacing(2),
	      display: 'block'
	    }, theme.breakpoints.up('sm'), {
	      paddingLeft: theme.spacing(3),
	      paddingRight: theme.spacing(3)
	    }),

	    /* Styles applied to the root element if `disableGutters={true}`. */
	    disableGutters: {
	      paddingLeft: 0,
	      paddingRight: 0
	    },

	    /* Styles applied to the root element if `fixed={true}`. */
	    fixed: Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
	      var value = theme.breakpoints.values[breakpoint];

	      if (value !== 0) {
	        acc[theme.breakpoints.up(breakpoint)] = {
	          maxWidth: value
	        };
	      }

	      return acc;
	    }, {}),

	    /* Styles applied to the root element if `maxWidth="xs"`. */
	    maxWidthXs: _defineProperty$1({}, theme.breakpoints.up('xs'), {
	      maxWidth: Math.max(theme.breakpoints.values.xs, 444)
	    }),

	    /* Styles applied to the root element if `maxWidth="sm"`. */
	    maxWidthSm: _defineProperty$1({}, theme.breakpoints.up('sm'), {
	      maxWidth: theme.breakpoints.values.sm
	    }),

	    /* Styles applied to the root element if `maxWidth="md"`. */
	    maxWidthMd: _defineProperty$1({}, theme.breakpoints.up('md'), {
	      maxWidth: theme.breakpoints.values.md
	    }),

	    /* Styles applied to the root element if `maxWidth="lg"`. */
	    maxWidthLg: _defineProperty$1({}, theme.breakpoints.up('lg'), {
	      maxWidth: theme.breakpoints.values.lg
	    }),

	    /* Styles applied to the root element if `maxWidth="xl"`. */
	    maxWidthXl: _defineProperty$1({}, theme.breakpoints.up('xl'), {
	      maxWidth: theme.breakpoints.values.xl
	    })
	  };
	};
	var Container = /*#__PURE__*/react.exports.forwardRef(function Container(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      _props$disableGutters = props.disableGutters,
	      disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
	      _props$fixed = props.fixed,
	      fixed = _props$fixed === void 0 ? false : _props$fixed,
	      _props$maxWidth = props.maxWidth,
	      maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
	      other = _objectWithoutProperties(props, ["classes", "className", "component", "disableGutters", "fixed", "maxWidth"]);

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className, fixed && classes.fixed, disableGutters && classes.disableGutters, maxWidth !== false && classes["maxWidth".concat(capitalize(String(maxWidth)))]),
	    ref: ref
	  }, other));
	});
	withStyles(styles$1l, {
	  name: 'MuiContainer'
	})(Container);

	var html = {
	  WebkitFontSmoothing: 'antialiased',
	  // Antialiasing.
	  MozOsxFontSmoothing: 'grayscale',
	  // Antialiasing.
	  // Change from `box-sizing: content-box` so that `width`
	  // is not affected by `padding` or `border`.
	  boxSizing: 'border-box'
	};
	var body = function body(theme) {
	  return _extends$5({
	    color: theme.palette.text.primary
	  }, theme.typography.body2, {
	    backgroundColor: theme.palette.background.default,
	    '@media print': {
	      // Save printer ink.
	      backgroundColor: theme.palette.common.white
	    }
	  });
	};
	var styles$1k = function styles(theme) {
	  return {
	    '@global': {
	      html: html,
	      '*, *::before, *::after': {
	        boxSizing: 'inherit'
	      },
	      'strong, b': {
	        fontWeight: theme.typography.fontWeightBold
	      },
	      body: _extends$5({
	        margin: 0
	      }, body(theme), {
	        // Add support for document.body.requestFullScreen().
	        // Other elements, if background transparent, are not supported.
	        '&::backdrop': {
	          backgroundColor: theme.palette.background.default
	        }
	      })
	    }
	  };
	};
	/**
	 * Kickstart an elegant, consistent, and simple baseline to build upon.
	 */

	function CssBaseline(props) {
	  /* eslint-disable no-unused-vars */
	  var _props$children = props.children,
	      children = _props$children === void 0 ? null : _props$children;
	      props.classes;
	  /* eslint-enable no-unused-vars */

	  return /*#__PURE__*/react.exports.createElement(react.exports.Fragment, null, children);
	}

	withStyles(styles$1k, {
	  name: 'MuiCssBaseline'
	})(CssBaseline);

	function getContainer$1(container) {
	  container = typeof container === 'function' ? container() : container; // #StrictMode ready

	  return reactDom.exports.findDOMNode(container);
	}

	var useEnhancedEffect$6 = typeof window !== 'undefined' ? react.exports.useLayoutEffect : react.exports.useEffect;
	/**
	 * Portals provide a first-class way to render children into a DOM node
	 * that exists outside the DOM hierarchy of the parent component.
	 */

	var Portal = /*#__PURE__*/react.exports.forwardRef(function Portal(props, ref) {
	  var children = props.children,
	      container = props.container,
	      _props$disablePortal = props.disablePortal,
	      disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
	      onRendered = props.onRendered;

	  var _React$useState = react.exports.useState(null),
	      mountNode = _React$useState[0],
	      setMountNode = _React$useState[1];

	  var handleRef = useForkRef( /*#__PURE__*/react.exports.isValidElement(children) ? children.ref : null, ref);
	  useEnhancedEffect$6(function () {
	    if (!disablePortal) {
	      setMountNode(getContainer$1(container) || document.body);
	    }
	  }, [container, disablePortal]);
	  useEnhancedEffect$6(function () {
	    if (mountNode && !disablePortal) {
	      setRef(ref, mountNode);
	      return function () {
	        setRef(ref, null);
	      };
	    }

	    return undefined;
	  }, [ref, mountNode, disablePortal]);
	  useEnhancedEffect$6(function () {
	    if (onRendered && (mountNode || disablePortal)) {
	      onRendered();
	    }
	  }, [onRendered, mountNode, disablePortal]);

	  if (disablePortal) {
	    if ( /*#__PURE__*/react.exports.isValidElement(children)) {
	      return /*#__PURE__*/react.exports.cloneElement(children, {
	        ref: handleRef
	      });
	    }

	    return children;
	  }

	  return mountNode ? /*#__PURE__*/reactDom.exports.createPortal(children, mountNode) : mountNode;
	});

	function _classCallCheck(instance, Constructor) {
	  if (!(instance instanceof Constructor)) {
	    throw new TypeError("Cannot call a class as a function");
	  }
	}

	function _defineProperties(target, props) {
	  for (var i = 0; i < props.length; i++) {
	    var descriptor = props[i];
	    descriptor.enumerable = descriptor.enumerable || false;
	    descriptor.configurable = true;
	    if ("value" in descriptor) descriptor.writable = true;
	    Object.defineProperty(target, descriptor.key, descriptor);
	  }
	}

	function _createClass(Constructor, protoProps, staticProps) {
	  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
	  if (staticProps) _defineProperties(Constructor, staticProps);
	  return Constructor;
	}

	// A change of the browser zoom change the scrollbar size.
	// Credit https://github.com/twbs/bootstrap/blob/3ffe3a5d82f6f561b82ff78d82b32a7d14aed558/js/src/modal.js#L512-L519
	function getScrollbarSize() {
	  var scrollDiv = document.createElement('div');
	  scrollDiv.style.width = '99px';
	  scrollDiv.style.height = '99px';
	  scrollDiv.style.position = 'absolute';
	  scrollDiv.style.top = '-9999px';
	  scrollDiv.style.overflow = 'scroll';
	  document.body.appendChild(scrollDiv);
	  var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
	  document.body.removeChild(scrollDiv);
	  return scrollbarSize;
	}

	function isOverflowing(container) {
	  var doc = ownerDocument(container);

	  if (doc.body === container) {
	    return ownerWindow(doc).innerWidth > doc.documentElement.clientWidth;
	  }

	  return container.scrollHeight > container.clientHeight;
	}

	function ariaHidden(node, show) {
	  if (show) {
	    node.setAttribute('aria-hidden', 'true');
	  } else {
	    node.removeAttribute('aria-hidden');
	  }
	}

	function getPaddingRight(node) {
	  return parseInt(window.getComputedStyle(node)['padding-right'], 10) || 0;
	}

	function ariaHiddenSiblings(container, mountNode, currentNode) {
	  var nodesToExclude = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
	  var show = arguments.length > 4 ? arguments[4] : undefined;
	  var blacklist = [mountNode, currentNode].concat(_toConsumableArray(nodesToExclude));
	  var blacklistTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE'];
	  [].forEach.call(container.children, function (node) {
	    if (node.nodeType === 1 && blacklist.indexOf(node) === -1 && blacklistTagNames.indexOf(node.tagName) === -1) {
	      ariaHidden(node, show);
	    }
	  });
	}

	function findIndexOf(containerInfo, callback) {
	  var idx = -1;
	  containerInfo.some(function (item, index) {
	    if (callback(item)) {
	      idx = index;
	      return true;
	    }

	    return false;
	  });
	  return idx;
	}

	function handleContainer(containerInfo, props) {
	  var restoreStyle = [];
	  var restorePaddings = [];
	  var container = containerInfo.container;
	  var fixedNodes;

	  if (!props.disableScrollLock) {
	    if (isOverflowing(container)) {
	      // Compute the size before applying overflow hidden to avoid any scroll jumps.
	      var scrollbarSize = getScrollbarSize();
	      restoreStyle.push({
	        value: container.style.paddingRight,
	        key: 'padding-right',
	        el: container
	      }); // Use computed style, here to get the real padding to add our scrollbar width.

	      container.style['padding-right'] = "".concat(getPaddingRight(container) + scrollbarSize, "px"); // .mui-fixed is a global helper.

	      fixedNodes = ownerDocument(container).querySelectorAll('.mui-fixed');
	      [].forEach.call(fixedNodes, function (node) {
	        restorePaddings.push(node.style.paddingRight);
	        node.style.paddingRight = "".concat(getPaddingRight(node) + scrollbarSize, "px");
	      });
	    } // Improve Gatsby support
	    // https://css-tricks.com/snippets/css/force-vertical-scrollbar/


	    var parent = container.parentElement;
	    var scrollContainer = parent.nodeName === 'HTML' && window.getComputedStyle(parent)['overflow-y'] === 'scroll' ? parent : container; // Block the scroll even if no scrollbar is visible to account for mobile keyboard
	    // screensize shrink.

	    restoreStyle.push({
	      value: scrollContainer.style.overflow,
	      key: 'overflow',
	      el: scrollContainer
	    });
	    scrollContainer.style.overflow = 'hidden';
	  }

	  var restore = function restore() {
	    if (fixedNodes) {
	      [].forEach.call(fixedNodes, function (node, i) {
	        if (restorePaddings[i]) {
	          node.style.paddingRight = restorePaddings[i];
	        } else {
	          node.style.removeProperty('padding-right');
	        }
	      });
	    }

	    restoreStyle.forEach(function (_ref) {
	      var value = _ref.value,
	          el = _ref.el,
	          key = _ref.key;

	      if (value) {
	        el.style.setProperty(key, value);
	      } else {
	        el.style.removeProperty(key);
	      }
	    });
	  };

	  return restore;
	}

	function getHiddenSiblings(container) {
	  var hiddenSiblings = [];
	  [].forEach.call(container.children, function (node) {
	    if (node.getAttribute && node.getAttribute('aria-hidden') === 'true') {
	      hiddenSiblings.push(node);
	    }
	  });
	  return hiddenSiblings;
	}
	/**
	 * @ignore - do not document.
	 *
	 * Proper state management for containers and the modals in those containers.
	 * Simplified, but inspired by react-overlay's ModalManager class.
	 * Used by the Modal to ensure proper styling of containers.
	 */


	var ModalManager = /*#__PURE__*/function () {
	  function ModalManager() {
	    _classCallCheck(this, ModalManager);

	    // this.modals[modalIndex] = modal
	    this.modals = []; // this.containers[containerIndex] = {
	    //   modals: [],
	    //   container,
	    //   restore: null,
	    // }

	    this.containers = [];
	  }

	  _createClass(ModalManager, [{
	    key: "add",
	    value: function add(modal, container) {
	      var modalIndex = this.modals.indexOf(modal);

	      if (modalIndex !== -1) {
	        return modalIndex;
	      }

	      modalIndex = this.modals.length;
	      this.modals.push(modal); // If the modal we are adding is already in the DOM.

	      if (modal.modalRef) {
	        ariaHidden(modal.modalRef, false);
	      }

	      var hiddenSiblingNodes = getHiddenSiblings(container);
	      ariaHiddenSiblings(container, modal.mountNode, modal.modalRef, hiddenSiblingNodes, true);
	      var containerIndex = findIndexOf(this.containers, function (item) {
	        return item.container === container;
	      });

	      if (containerIndex !== -1) {
	        this.containers[containerIndex].modals.push(modal);
	        return modalIndex;
	      }

	      this.containers.push({
	        modals: [modal],
	        container: container,
	        restore: null,
	        hiddenSiblingNodes: hiddenSiblingNodes
	      });
	      return modalIndex;
	    }
	  }, {
	    key: "mount",
	    value: function mount(modal, props) {
	      var containerIndex = findIndexOf(this.containers, function (item) {
	        return item.modals.indexOf(modal) !== -1;
	      });
	      var containerInfo = this.containers[containerIndex];

	      if (!containerInfo.restore) {
	        containerInfo.restore = handleContainer(containerInfo, props);
	      }
	    }
	  }, {
	    key: "remove",
	    value: function remove(modal) {
	      var modalIndex = this.modals.indexOf(modal);

	      if (modalIndex === -1) {
	        return modalIndex;
	      }

	      var containerIndex = findIndexOf(this.containers, function (item) {
	        return item.modals.indexOf(modal) !== -1;
	      });
	      var containerInfo = this.containers[containerIndex];
	      containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
	      this.modals.splice(modalIndex, 1); // If that was the last modal in a container, clean up the container.

	      if (containerInfo.modals.length === 0) {
	        // The modal might be closed before it had the chance to be mounted in the DOM.
	        if (containerInfo.restore) {
	          containerInfo.restore();
	        }

	        if (modal.modalRef) {
	          // In case the modal wasn't in the DOM yet.
	          ariaHidden(modal.modalRef, true);
	        }

	        ariaHiddenSiblings(containerInfo.container, modal.mountNode, modal.modalRef, containerInfo.hiddenSiblingNodes, false);
	        this.containers.splice(containerIndex, 1);
	      } else {
	        // Otherwise make sure the next top modal is visible to a screen reader.
	        var nextTop = containerInfo.modals[containerInfo.modals.length - 1]; // as soon as a modal is adding its modalRef is undefined. it can't set
	        // aria-hidden because the dom element doesn't exist either
	        // when modal was unmounted before modalRef gets null

	        if (nextTop.modalRef) {
	          ariaHidden(nextTop.modalRef, false);
	        }
	      }

	      return modalIndex;
	    }
	  }, {
	    key: "isTopModal",
	    value: function isTopModal(modal) {
	      return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
	    }
	  }]);

	  return ModalManager;
	}();

	/* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex, camelcase */
	/**
	 * Utility component that locks focus inside the component.
	 */

	function Unstable_TrapFocus(props) {
	  var children = props.children,
	      _props$disableAutoFoc = props.disableAutoFocus,
	      disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
	      _props$disableEnforce = props.disableEnforceFocus,
	      disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,
	      _props$disableRestore = props.disableRestoreFocus,
	      disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,
	      getDoc = props.getDoc,
	      isEnabled = props.isEnabled,
	      open = props.open;
	  var ignoreNextEnforceFocus = react.exports.useRef();
	  var sentinelStart = react.exports.useRef(null);
	  var sentinelEnd = react.exports.useRef(null);
	  var nodeToRestore = react.exports.useRef();
	  var rootRef = react.exports.useRef(null); // can be removed once we drop support for non ref forwarding class components

	  var handleOwnRef = react.exports.useCallback(function (instance) {
	    // #StrictMode ready
	    rootRef.current = reactDom.exports.findDOMNode(instance);
	  }, []);
	  var handleRef = useForkRef(children.ref, handleOwnRef);
	  var prevOpenRef = react.exports.useRef();
	  react.exports.useEffect(function () {
	    prevOpenRef.current = open;
	  }, [open]);

	  if (!prevOpenRef.current && open && typeof window !== 'undefined') {
	    // WARNING: Potentially unsafe in concurrent mode.
	    // The way the read on `nodeToRestore` is setup could make this actually safe.
	    // Say we render `open={false}` -> `open={true}` but never commit.
	    // We have now written a state that wasn't committed. But no committed effect
	    // will read this wrong value. We only read from `nodeToRestore` in effects
	    // that were committed on `open={true}`
	    // WARNING: Prevents the instance from being garbage collected. Should only
	    // hold a weak ref.
	    nodeToRestore.current = getDoc().activeElement;
	  }

	  react.exports.useEffect(function () {
	    if (!open) {
	      return;
	    }

	    var doc = ownerDocument(rootRef.current); // We might render an empty child.

	    if (!disableAutoFocus && rootRef.current && !rootRef.current.contains(doc.activeElement)) {
	      if (!rootRef.current.hasAttribute('tabIndex')) {

	        rootRef.current.setAttribute('tabIndex', -1);
	      }

	      rootRef.current.focus();
	    }

	    var contain = function contain() {
	      var rootElement = rootRef.current; // Cleanup functions are executed lazily in React 17.
	      // Contain can be called between the component being unmounted and its cleanup function being run.

	      if (rootElement === null) {
	        return;
	      }

	      if (!doc.hasFocus() || disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {
	        ignoreNextEnforceFocus.current = false;
	        return;
	      }

	      if (rootRef.current && !rootRef.current.contains(doc.activeElement)) {
	        rootRef.current.focus();
	      }
	    };

	    var loopFocus = function loopFocus(event) {
	      // 9 = Tab
	      if (disableEnforceFocus || !isEnabled() || event.keyCode !== 9) {
	        return;
	      } // Make sure the next tab starts from the right place.


	      if (doc.activeElement === rootRef.current) {
	        // We need to ignore the next contain as
	        // it will try to move the focus back to the rootRef element.
	        ignoreNextEnforceFocus.current = true;

	        if (event.shiftKey) {
	          sentinelEnd.current.focus();
	        } else {
	          sentinelStart.current.focus();
	        }
	      }
	    };

	    doc.addEventListener('focus', contain, true);
	    doc.addEventListener('keydown', loopFocus, true); // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area
	    // e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=559561.
	    //
	    // The whatwg spec defines how the browser should behave but does not explicitly mention any events:
	    // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.

	    var interval = setInterval(function () {
	      contain();
	    }, 50);
	    return function () {
	      clearInterval(interval);
	      doc.removeEventListener('focus', contain, true);
	      doc.removeEventListener('keydown', loopFocus, true); // restoreLastFocus()

	      if (!disableRestoreFocus) {
	        // In IE 11 it is possible for document.activeElement to be null resulting
	        // in nodeToRestore.current being null.
	        // Not all elements in IE 11 have a focus method.
	        // Once IE 11 support is dropped the focus() call can be unconditional.
	        if (nodeToRestore.current && nodeToRestore.current.focus) {
	          nodeToRestore.current.focus();
	        }

	        nodeToRestore.current = null;
	      }
	    };
	  }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open]);
	  return /*#__PURE__*/react.exports.createElement(react.exports.Fragment, null, /*#__PURE__*/react.exports.createElement("div", {
	    tabIndex: 0,
	    ref: sentinelStart,
	    "data-test": "sentinelStart"
	  }), /*#__PURE__*/react.exports.cloneElement(children, {
	    ref: handleRef
	  }), /*#__PURE__*/react.exports.createElement("div", {
	    tabIndex: 0,
	    ref: sentinelEnd,
	    "data-test": "sentinelEnd"
	  }));
	}

	var styles$1j = {
	  /* Styles applied to the root element. */
	  root: {
	    zIndex: -1,
	    position: 'fixed',
	    right: 0,
	    bottom: 0,
	    top: 0,
	    left: 0,
	    backgroundColor: 'rgba(0, 0, 0, 0.5)',
	    WebkitTapHighlightColor: 'transparent'
	  },

	  /* Styles applied to the root element if `invisible={true}`. */
	  invisible: {
	    backgroundColor: 'transparent'
	  }
	};
	/**
	 * @ignore - internal component.
	 */

	var SimpleBackdrop = /*#__PURE__*/react.exports.forwardRef(function SimpleBackdrop(props, ref) {
	  var _props$invisible = props.invisible,
	      invisible = _props$invisible === void 0 ? false : _props$invisible,
	      open = props.open,
	      other = _objectWithoutProperties(props, ["invisible", "open"]);

	  return open ? /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    "aria-hidden": true,
	    ref: ref
	  }, other, {
	    style: _extends$5({}, styles$1j.root, invisible ? styles$1j.invisible : {}, other.style)
	  })) : null;
	});

	function getContainer(container) {
	  container = typeof container === 'function' ? container() : container;
	  return reactDom.exports.findDOMNode(container);
	}

	function getHasTransition(props) {
	  return props.children ? props.children.props.hasOwnProperty('in') : false;
	} // A modal manager used to track and manage the state of open Modals.
	// Modals don't open on the server so this won't conflict with concurrent requests.


	var defaultManager = new ModalManager();
	var styles$1i = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'fixed',
	      zIndex: theme.zIndex.modal,
	      right: 0,
	      bottom: 0,
	      top: 0,
	      left: 0
	    },

	    /* Styles applied to the root element if the `Modal` has exited. */
	    hidden: {
	      visibility: 'hidden'
	    }
	  };
	};
	/**
	 * Modal is a lower-level construct that is leveraged by the following components:
	 *
	 * - [Dialog](/api/dialog/)
	 * - [Drawer](/api/drawer/)
	 * - [Menu](/api/menu/)
	 * - [Popover](/api/popover/)
	 *
	 * If you are creating a modal dialog, you probably want to use the [Dialog](/api/dialog/) component
	 * rather than directly using Modal.
	 *
	 * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
	 */

	var Modal = /*#__PURE__*/react.exports.forwardRef(function Modal(inProps, ref) {
	  var theme = useTheme$2();
	  var props = getThemeProps({
	    name: 'MuiModal',
	    props: _extends$5({}, inProps),
	    theme: theme
	  });

	  var _props$BackdropCompon = props.BackdropComponent,
	      BackdropComponent = _props$BackdropCompon === void 0 ? SimpleBackdrop : _props$BackdropCompon,
	      BackdropProps = props.BackdropProps,
	      children = props.children,
	      _props$closeAfterTran = props.closeAfterTransition,
	      closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
	      container = props.container,
	      _props$disableAutoFoc = props.disableAutoFocus,
	      disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
	      _props$disableBackdro = props.disableBackdropClick,
	      disableBackdropClick = _props$disableBackdro === void 0 ? false : _props$disableBackdro,
	      _props$disableEnforce = props.disableEnforceFocus,
	      disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,
	      _props$disableEscapeK = props.disableEscapeKeyDown,
	      disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,
	      _props$disablePortal = props.disablePortal,
	      disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
	      _props$disableRestore = props.disableRestoreFocus,
	      disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,
	      _props$disableScrollL = props.disableScrollLock,
	      disableScrollLock = _props$disableScrollL === void 0 ? false : _props$disableScrollL,
	      _props$hideBackdrop = props.hideBackdrop,
	      hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
	      _props$keepMounted = props.keepMounted,
	      keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
	      _props$manager = props.manager,
	      manager = _props$manager === void 0 ? defaultManager : _props$manager,
	      onBackdropClick = props.onBackdropClick,
	      onClose = props.onClose,
	      onEscapeKeyDown = props.onEscapeKeyDown,
	      onRendered = props.onRendered,
	      open = props.open,
	      other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "children", "closeAfterTransition", "container", "disableAutoFocus", "disableBackdropClick", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onEscapeKeyDown", "onRendered", "open"]);

	  var _React$useState = react.exports.useState(true),
	      exited = _React$useState[0],
	      setExited = _React$useState[1];

	  var modal = react.exports.useRef({});
	  var mountNodeRef = react.exports.useRef(null);
	  var modalRef = react.exports.useRef(null);
	  var handleRef = useForkRef(modalRef, ref);
	  var hasTransition = getHasTransition(props);

	  var getDoc = function getDoc() {
	    return ownerDocument(mountNodeRef.current);
	  };

	  var getModal = function getModal() {
	    modal.current.modalRef = modalRef.current;
	    modal.current.mountNode = mountNodeRef.current;
	    return modal.current;
	  };

	  var handleMounted = function handleMounted() {
	    manager.mount(getModal(), {
	      disableScrollLock: disableScrollLock
	    }); // Fix a bug on Chrome where the scroll isn't initially 0.

	    modalRef.current.scrollTop = 0;
	  };

	  var handleOpen = useEventCallback(function () {
	    var resolvedContainer = getContainer(container) || getDoc().body;
	    manager.add(getModal(), resolvedContainer); // The element was already mounted.

	    if (modalRef.current) {
	      handleMounted();
	    }
	  });
	  var isTopModal = react.exports.useCallback(function () {
	    return manager.isTopModal(getModal());
	  }, [manager]);
	  var handlePortalRef = useEventCallback(function (node) {
	    mountNodeRef.current = node;

	    if (!node) {
	      return;
	    }

	    if (onRendered) {
	      onRendered();
	    }

	    if (open && isTopModal()) {
	      handleMounted();
	    } else {
	      ariaHidden(modalRef.current, true);
	    }
	  });
	  var handleClose = react.exports.useCallback(function () {
	    manager.remove(getModal());
	  }, [manager]);
	  react.exports.useEffect(function () {
	    return function () {
	      handleClose();
	    };
	  }, [handleClose]);
	  react.exports.useEffect(function () {
	    if (open) {
	      handleOpen();
	    } else if (!hasTransition || !closeAfterTransition) {
	      handleClose();
	    }
	  }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);

	  if (!keepMounted && !open && (!hasTransition || exited)) {
	    return null;
	  }

	  var handleEnter = function handleEnter() {
	    setExited(false);
	  };

	  var handleExited = function handleExited() {
	    setExited(true);

	    if (closeAfterTransition) {
	      handleClose();
	    }
	  };

	  var handleBackdropClick = function handleBackdropClick(event) {
	    if (event.target !== event.currentTarget) {
	      return;
	    }

	    if (onBackdropClick) {
	      onBackdropClick(event);
	    }

	    if (!disableBackdropClick && onClose) {
	      onClose(event, 'backdropClick');
	    }
	  };

	  var handleKeyDown = function handleKeyDown(event) {
	    // The handler doesn't take event.defaultPrevented into account:
	    //
	    // event.preventDefault() is meant to stop default behaviours like
	    // clicking a checkbox to check it, hitting a button to submit a form,
	    // and hitting left arrow to move the cursor in a text input etc.
	    // Only special HTML elements have these default behaviors.
	    if (event.key !== 'Escape' || !isTopModal()) {
	      return;
	    }

	    if (onEscapeKeyDown) {
	      onEscapeKeyDown(event);
	    }

	    if (!disableEscapeKeyDown) {
	      // Swallow the event, in case someone is listening for the escape key on the body.
	      event.stopPropagation();

	      if (onClose) {
	        onClose(event, 'escapeKeyDown');
	      }
	    }
	  };

	  var inlineStyle = styles$1i(theme || {
	    zIndex: zIndex
	  });
	  var childProps = {};

	  if (children.props.tabIndex === undefined) {
	    childProps.tabIndex = children.props.tabIndex || '-1';
	  } // It's a Transition like component


	  if (hasTransition) {
	    childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);
	    childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
	  }

	  return /*#__PURE__*/react.exports.createElement(Portal, {
	    ref: handlePortalRef,
	    container: container,
	    disablePortal: disablePortal
	  }, /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    ref: handleRef,
	    onKeyDown: handleKeyDown,
	    role: "presentation"
	  }, other, {
	    style: _extends$5({}, inlineStyle.root, !open && exited ? inlineStyle.hidden : {}, other.style)
	  }), hideBackdrop ? null : /*#__PURE__*/react.exports.createElement(BackdropComponent, _extends$5({
	    open: open,
	    onClick: handleBackdropClick
	  }, BackdropProps)), /*#__PURE__*/react.exports.createElement(Unstable_TrapFocus, {
	    disableEnforceFocus: disableEnforceFocus,
	    disableAutoFocus: disableAutoFocus,
	    disableRestoreFocus: disableRestoreFocus,
	    getDoc: getDoc,
	    isEnabled: isTopModal,
	    open: open
	  }, /*#__PURE__*/react.exports.cloneElement(children, childProps))));
	});

	var styles$1h = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      '@media print': {
	        // Use !important to override the Modal inline-style.
	        position: 'absolute !important'
	      }
	    },

	    /* Styles applied to the container element if `scroll="paper"`. */
	    scrollPaper: {
	      display: 'flex',
	      justifyContent: 'center',
	      alignItems: 'center'
	    },

	    /* Styles applied to the container element if `scroll="body"`. */
	    scrollBody: {
	      overflowY: 'auto',
	      overflowX: 'hidden',
	      textAlign: 'center',
	      '&:after': {
	        content: '""',
	        display: 'inline-block',
	        verticalAlign: 'middle',
	        height: '100%',
	        width: '0'
	      }
	    },

	    /* Styles applied to the container element. */
	    container: {
	      height: '100%',
	      '@media print': {
	        height: 'auto'
	      },
	      // We disable the focus ring for mouse, touch and keyboard users.
	      outline: 0
	    },

	    /* Styles applied to the `Paper` component. */
	    paper: {
	      margin: 32,
	      position: 'relative',
	      overflowY: 'auto',
	      // Fix IE 11 issue, to remove at some point.
	      '@media print': {
	        overflowY: 'visible',
	        boxShadow: 'none'
	      }
	    },

	    /* Styles applied to the `Paper` component if `scroll="paper"`. */
	    paperScrollPaper: {
	      display: 'flex',
	      flexDirection: 'column',
	      maxHeight: 'calc(100% - 64px)'
	    },

	    /* Styles applied to the `Paper` component if `scroll="body"`. */
	    paperScrollBody: {
	      display: 'inline-block',
	      verticalAlign: 'middle',
	      textAlign: 'left' // 'initial' doesn't work on IE 11

	    },

	    /* Styles applied to the `Paper` component if `maxWidth=false`. */
	    paperWidthFalse: {
	      maxWidth: 'calc(100% - 64px)'
	    },

	    /* Styles applied to the `Paper` component if `maxWidth="xs"`. */
	    paperWidthXs: {
	      maxWidth: Math.max(theme.breakpoints.values.xs, 444),
	      '&$paperScrollBody': _defineProperty$1({}, theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2), {
	        maxWidth: 'calc(100% - 64px)'
	      })
	    },

	    /* Styles applied to the `Paper` component if `maxWidth="sm"`. */
	    paperWidthSm: {
	      maxWidth: theme.breakpoints.values.sm,
	      '&$paperScrollBody': _defineProperty$1({}, theme.breakpoints.down(theme.breakpoints.values.sm + 32 * 2), {
	        maxWidth: 'calc(100% - 64px)'
	      })
	    },

	    /* Styles applied to the `Paper` component if `maxWidth="md"`. */
	    paperWidthMd: {
	      maxWidth: theme.breakpoints.values.md,
	      '&$paperScrollBody': _defineProperty$1({}, theme.breakpoints.down(theme.breakpoints.values.md + 32 * 2), {
	        maxWidth: 'calc(100% - 64px)'
	      })
	    },

	    /* Styles applied to the `Paper` component if `maxWidth="lg"`. */
	    paperWidthLg: {
	      maxWidth: theme.breakpoints.values.lg,
	      '&$paperScrollBody': _defineProperty$1({}, theme.breakpoints.down(theme.breakpoints.values.lg + 32 * 2), {
	        maxWidth: 'calc(100% - 64px)'
	      })
	    },

	    /* Styles applied to the `Paper` component if `maxWidth="xl"`. */
	    paperWidthXl: {
	      maxWidth: theme.breakpoints.values.xl,
	      '&$paperScrollBody': _defineProperty$1({}, theme.breakpoints.down(theme.breakpoints.values.xl + 32 * 2), {
	        maxWidth: 'calc(100% - 64px)'
	      })
	    },

	    /* Styles applied to the `Paper` component if `fullWidth={true}`. */
	    paperFullWidth: {
	      width: 'calc(100% - 64px)'
	    },

	    /* Styles applied to the `Paper` component if `fullScreen={true}`. */
	    paperFullScreen: {
	      margin: 0,
	      width: '100%',
	      maxWidth: '100%',
	      height: '100%',
	      maxHeight: 'none',
	      borderRadius: 0,
	      '&$paperScrollBody': {
	        margin: 0,
	        maxWidth: '100%'
	      }
	    }
	  };
	};
	var defaultTransitionDuration$1 = {
	  enter: duration.enteringScreen,
	  exit: duration.leavingScreen
	};
	/**
	 * Dialogs are overlaid modal paper based components with a backdrop.
	 */

	var Dialog = /*#__PURE__*/react.exports.forwardRef(function Dialog(props, ref) {
	  var BackdropProps = props.BackdropProps,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$disableBackdro = props.disableBackdropClick,
	      disableBackdropClick = _props$disableBackdro === void 0 ? false : _props$disableBackdro,
	      _props$disableEscapeK = props.disableEscapeKeyDown,
	      disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,
	      _props$fullScreen = props.fullScreen,
	      fullScreen = _props$fullScreen === void 0 ? false : _props$fullScreen,
	      _props$fullWidth = props.fullWidth,
	      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
	      _props$maxWidth = props.maxWidth,
	      maxWidth = _props$maxWidth === void 0 ? 'sm' : _props$maxWidth,
	      onBackdropClick = props.onBackdropClick,
	      onClose = props.onClose,
	      onEnter = props.onEnter,
	      onEntered = props.onEntered,
	      onEntering = props.onEntering,
	      onEscapeKeyDown = props.onEscapeKeyDown,
	      onExit = props.onExit,
	      onExited = props.onExited,
	      onExiting = props.onExiting,
	      open = props.open,
	      _props$PaperComponent = props.PaperComponent,
	      PaperComponent = _props$PaperComponent === void 0 ? Paper$1 : _props$PaperComponent,
	      _props$PaperProps = props.PaperProps,
	      PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
	      _props$scroll = props.scroll,
	      scroll = _props$scroll === void 0 ? 'paper' : _props$scroll,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
	      _props$transitionDura = props.transitionDuration,
	      transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration$1 : _props$transitionDura,
	      TransitionProps = props.TransitionProps,
	      ariaDescribedby = props['aria-describedby'],
	      ariaLabelledby = props['aria-labelledby'],
	      other = _objectWithoutProperties(props, ["BackdropProps", "children", "classes", "className", "disableBackdropClick", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClose", "onEnter", "onEntered", "onEntering", "onEscapeKeyDown", "onExit", "onExited", "onExiting", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps", "aria-describedby", "aria-labelledby"]);

	  var mouseDownTarget = react.exports.useRef();

	  var handleMouseDown = function handleMouseDown(event) {
	    mouseDownTarget.current = event.target;
	  };

	  var handleBackdropClick = function handleBackdropClick(event) {
	    // Ignore the events not coming from the "backdrop"
	    // We don't want to close the dialog when clicking the dialog content.
	    if (event.target !== event.currentTarget) {
	      return;
	    } // Make sure the event starts and ends on the same DOM element.


	    if (event.target !== mouseDownTarget.current) {
	      return;
	    }

	    mouseDownTarget.current = null;

	    if (onBackdropClick) {
	      onBackdropClick(event);
	    }

	    if (!disableBackdropClick && onClose) {
	      onClose(event, 'backdropClick');
	    }
	  };

	  return /*#__PURE__*/react.exports.createElement(Modal, _extends$5({
	    className: clsx(classes.root, className),
	    BackdropComponent: Backdrop$1,
	    BackdropProps: _extends$5({
	      transitionDuration: transitionDuration
	    }, BackdropProps),
	    closeAfterTransition: true
	  }, disableBackdropClick ? {
	    disableBackdropClick: disableBackdropClick
	  } : {}, {
	    disableEscapeKeyDown: disableEscapeKeyDown,
	    onEscapeKeyDown: onEscapeKeyDown,
	    onClose: onClose,
	    open: open,
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    appear: true,
	    in: open,
	    timeout: transitionDuration,
	    onEnter: onEnter,
	    onEntering: onEntering,
	    onEntered: onEntered,
	    onExit: onExit,
	    onExiting: onExiting,
	    onExited: onExited,
	    role: "none presentation"
	  }, TransitionProps), /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.container, classes["scroll".concat(capitalize(scroll))]),
	    onMouseUp: handleBackdropClick,
	    onMouseDown: handleMouseDown
	  }, /*#__PURE__*/react.exports.createElement(PaperComponent, _extends$5({
	    elevation: 24,
	    role: "dialog",
	    "aria-describedby": ariaDescribedby,
	    "aria-labelledby": ariaLabelledby
	  }, PaperProps, {
	    className: clsx(classes.paper, classes["paperScroll".concat(capitalize(scroll))], classes["paperWidth".concat(capitalize(String(maxWidth)))], PaperProps.className, fullScreen && classes.paperFullScreen, fullWidth && classes.paperFullWidth)
	  }), children))));
	});
	withStyles(styles$1h, {
	  name: 'MuiDialog'
	})(Dialog);

	var styles$1g = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'flex',
	    alignItems: 'center',
	    padding: 8,
	    justifyContent: 'flex-end',
	    flex: '0 0 auto'
	  },

	  /* Styles applied to the root element if `disableSpacing={false}`. */
	  spacing: {
	    '& > :not(:first-child)': {
	      marginLeft: 8
	    }
	  }
	};
	var DialogActions = /*#__PURE__*/react.exports.forwardRef(function DialogActions(props, ref) {
	  var _props$disableSpacing = props.disableSpacing,
	      disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,
	      classes = props.classes,
	      className = props.className,
	      other = _objectWithoutProperties(props, ["disableSpacing", "classes", "className"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, !disableSpacing && classes.spacing),
	    ref: ref
	  }, other));
	});
	withStyles(styles$1g, {
	  name: 'MuiDialogActions'
	})(DialogActions);

	var styles$1f = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      flex: '1 1 auto',
	      WebkitOverflowScrolling: 'touch',
	      // Add iOS momentum scrolling.
	      overflowY: 'auto',
	      padding: '8px 24px',
	      '&:first-child': {
	        // dialog without title
	        paddingTop: 20
	      }
	    },

	    /* Styles applied to the root element if `dividers={true}`. */
	    dividers: {
	      padding: '16px 24px',
	      borderTop: "1px solid ".concat(theme.palette.divider),
	      borderBottom: "1px solid ".concat(theme.palette.divider)
	    }
	  };
	};
	var DialogContent = /*#__PURE__*/react.exports.forwardRef(function DialogContent(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$dividers = props.dividers,
	      dividers = _props$dividers === void 0 ? false : _props$dividers,
	      other = _objectWithoutProperties(props, ["classes", "className", "dividers"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, dividers && classes.dividers),
	    ref: ref
	  }, other));
	});
	withStyles(styles$1f, {
	  name: 'MuiDialogContent'
	})(DialogContent);

	var styles$1e = {
	  /* Styles applied to the root element. */
	  root: {
	    marginBottom: 12
	  }
	};
	var DialogContentText = /*#__PURE__*/react.exports.forwardRef(function DialogContentText(props, ref) {
	  return /*#__PURE__*/react.exports.createElement(Typography$1, _extends$5({
	    component: "p",
	    variant: "body1",
	    color: "textSecondary",
	    ref: ref
	  }, props));
	});
	withStyles(styles$1e, {
	  name: 'MuiDialogContentText'
	})(DialogContentText);

	var styles$1d = {
	  /* Styles applied to the root element. */
	  root: {
	    margin: 0,
	    padding: '16px 24px',
	    flex: '0 0 auto'
	  }
	};
	var DialogTitle = /*#__PURE__*/react.exports.forwardRef(function DialogTitle(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$disableTypogra = props.disableTypography,
	      disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "disableTypography"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other), disableTypography ? children : /*#__PURE__*/react.exports.createElement(Typography$1, {
	    component: "h2",
	    variant: "h6"
	  }, children));
	});
	withStyles(styles$1d, {
	  name: 'MuiDialogTitle'
	})(DialogTitle);

	var styles$1c = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      height: 1,
	      margin: 0,
	      // Reset browser default style.
	      border: 'none',
	      flexShrink: 0,
	      backgroundColor: theme.palette.divider
	    },

	    /* Styles applied to the root element if `absolute={true}`. */
	    absolute: {
	      position: 'absolute',
	      bottom: 0,
	      left: 0,
	      width: '100%'
	    },

	    /* Styles applied to the root element if `variant="inset"`. */
	    inset: {
	      marginLeft: 72
	    },

	    /* Styles applied to the root element if `light={true}`. */
	    light: {
	      backgroundColor: alpha(theme.palette.divider, 0.08)
	    },

	    /* Styles applied to the root element if `variant="middle"`. */
	    middle: {
	      marginLeft: theme.spacing(2),
	      marginRight: theme.spacing(2)
	    },

	    /* Styles applied to the root element if `orientation="vertical"`. */
	    vertical: {
	      height: '100%',
	      width: 1
	    },

	    /* Styles applied to the root element if `flexItem={true}`. */
	    flexItem: {
	      alignSelf: 'stretch',
	      height: 'auto'
	    }
	  };
	};
	var Divider = /*#__PURE__*/react.exports.forwardRef(function Divider(props, ref) {
	  var _props$absolute = props.absolute,
	      absolute = _props$absolute === void 0 ? false : _props$absolute,
	      classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'hr' : _props$component,
	      _props$flexItem = props.flexItem,
	      flexItem = _props$flexItem === void 0 ? false : _props$flexItem,
	      _props$light = props.light,
	      light = _props$light === void 0 ? false : _props$light,
	      _props$orientation = props.orientation,
	      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
	      _props$role = props.role,
	      role = _props$role === void 0 ? Component !== 'hr' ? 'separator' : undefined : _props$role,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'fullWidth' : _props$variant,
	      other = _objectWithoutProperties(props, ["absolute", "classes", "className", "component", "flexItem", "light", "orientation", "role", "variant"]);

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className, variant !== 'fullWidth' && classes[variant], absolute && classes.absolute, flexItem && classes.flexItem, light && classes.light, orientation === 'vertical' && classes.vertical),
	    role: role,
	    ref: ref
	  }, other));
	});
	var Divider$1 = withStyles(styles$1c, {
	  name: 'MuiDivider'
	})(Divider);

	// Later, we gonna translate back the node to his original location
	// with `none`.`

	function getTranslateValue(direction, node) {
	  var rect = node.getBoundingClientRect();
	  var transform;

	  if (node.fakeTransform) {
	    transform = node.fakeTransform;
	  } else {
	    var computedStyle = window.getComputedStyle(node);
	    transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
	  }

	  var offsetX = 0;
	  var offsetY = 0;

	  if (transform && transform !== 'none' && typeof transform === 'string') {
	    var transformValues = transform.split('(')[1].split(')')[0].split(',');
	    offsetX = parseInt(transformValues[4], 10);
	    offsetY = parseInt(transformValues[5], 10);
	  }

	  if (direction === 'left') {
	    return "translateX(".concat(window.innerWidth, "px) translateX(").concat(offsetX - rect.left, "px)");
	  }

	  if (direction === 'right') {
	    return "translateX(-".concat(rect.left + rect.width - offsetX, "px)");
	  }

	  if (direction === 'up') {
	    return "translateY(".concat(window.innerHeight, "px) translateY(").concat(offsetY - rect.top, "px)");
	  } // direction === 'down'


	  return "translateY(-".concat(rect.top + rect.height - offsetY, "px)");
	}

	function setTranslateValue(direction, node) {
	  var transform = getTranslateValue(direction, node);

	  if (transform) {
	    node.style.webkitTransform = transform;
	    node.style.transform = transform;
	  }
	}
	var defaultTimeout = {
	  enter: duration.enteringScreen,
	  exit: duration.leavingScreen
	};
	/**
	 * The Slide transition is used by the [Drawer](/components/drawers/) component.
	 * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
	 */

	var Slide = /*#__PURE__*/react.exports.forwardRef(function Slide(props, ref) {
	  var children = props.children,
	      _props$direction = props.direction,
	      direction = _props$direction === void 0 ? 'down' : _props$direction,
	      inProp = props.in,
	      onEnter = props.onEnter,
	      onEntered = props.onEntered,
	      onEntering = props.onEntering,
	      onExit = props.onExit,
	      onExited = props.onExited,
	      onExiting = props.onExiting,
	      style = props.style,
	      _props$timeout = props.timeout,
	      timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
	      other = _objectWithoutProperties(props, ["children", "direction", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);

	  var theme = useTheme$1();
	  var childrenRef = react.exports.useRef(null);
	  /**
	   * used in cloneElement(children, { ref: handleRef })
	   */

	  var handleOwnRef = react.exports.useCallback(function (instance) {
	    // #StrictMode ready
	    childrenRef.current = reactDom.exports.findDOMNode(instance);
	  }, []);
	  var handleRefIntermediary = useForkRef(children.ref, handleOwnRef);
	  var handleRef = useForkRef(handleRefIntermediary, ref);

	  var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
	    return function (isAppearing) {
	      if (callback) {
	        // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
	        if (isAppearing === undefined) {
	          callback(childrenRef.current);
	        } else {
	          callback(childrenRef.current, isAppearing);
	        }
	      }
	    };
	  };

	  var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
	    setTranslateValue(direction, node);
	    reflow(node);

	    if (onEnter) {
	      onEnter(node, isAppearing);
	    }
	  });
	  var handleEntering = normalizedTransitionCallback(function (node, isAppearing) {
	    var transitionProps = getTransitionProps({
	      timeout: timeout,
	      style: style
	    }, {
	      mode: 'enter'
	    });
	    node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends$5({}, transitionProps, {
	      easing: theme.transitions.easing.easeOut
	    }));
	    node.style.transition = theme.transitions.create('transform', _extends$5({}, transitionProps, {
	      easing: theme.transitions.easing.easeOut
	    }));
	    node.style.webkitTransform = 'none';
	    node.style.transform = 'none';

	    if (onEntering) {
	      onEntering(node, isAppearing);
	    }
	  });
	  var handleEntered = normalizedTransitionCallback(onEntered);
	  var handleExiting = normalizedTransitionCallback(onExiting);
	  var handleExit = normalizedTransitionCallback(function (node) {
	    var transitionProps = getTransitionProps({
	      timeout: timeout,
	      style: style
	    }, {
	      mode: 'exit'
	    });
	    node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends$5({}, transitionProps, {
	      easing: theme.transitions.easing.sharp
	    }));
	    node.style.transition = theme.transitions.create('transform', _extends$5({}, transitionProps, {
	      easing: theme.transitions.easing.sharp
	    }));
	    setTranslateValue(direction, node);

	    if (onExit) {
	      onExit(node);
	    }
	  });
	  var handleExited = normalizedTransitionCallback(function (node) {
	    // No need for transitions when the component is hidden
	    node.style.webkitTransition = '';
	    node.style.transition = '';

	    if (onExited) {
	      onExited(node);
	    }
	  });
	  var updatePosition = react.exports.useCallback(function () {
	    if (childrenRef.current) {
	      setTranslateValue(direction, childrenRef.current);
	    }
	  }, [direction]);
	  react.exports.useEffect(function () {
	    // Skip configuration where the position is screen size invariant.
	    if (inProp || direction === 'down' || direction === 'right') {
	      return undefined;
	    }

	    var handleResize = debounce$1(function () {
	      if (childrenRef.current) {
	        setTranslateValue(direction, childrenRef.current);
	      }
	    });
	    window.addEventListener('resize', handleResize);
	    return function () {
	      handleResize.clear();
	      window.removeEventListener('resize', handleResize);
	    };
	  }, [direction, inProp]);
	  react.exports.useEffect(function () {
	    if (!inProp) {
	      // We need to update the position of the drawer when the direction change and
	      // when it's hidden.
	      updatePosition();
	    }
	  }, [inProp, updatePosition]);
	  return /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    nodeRef: childrenRef,
	    onEnter: handleEnter,
	    onEntered: handleEntered,
	    onEntering: handleEntering,
	    onExit: handleExit,
	    onExited: handleExited,
	    onExiting: handleExiting,
	    appear: true,
	    in: inProp,
	    timeout: timeout
	  }, other), function (state, childProps) {
	    return /*#__PURE__*/react.exports.cloneElement(children, _extends$5({
	      ref: handleRef,
	      style: _extends$5({
	        visibility: state === 'exited' && !inProp ? 'hidden' : undefined
	      }, style, children.props.style)
	    }, childProps));
	  });
	});

	var styles$1b = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {},

	    /* Styles applied to the root element if `variant="permanent or persistent"`. */
	    docked: {
	      flex: '0 0 auto'
	    },

	    /* Styles applied to the `Paper` component. */
	    paper: {
	      overflowY: 'auto',
	      display: 'flex',
	      flexDirection: 'column',
	      height: '100%',
	      flex: '1 0 auto',
	      zIndex: theme.zIndex.drawer,
	      WebkitOverflowScrolling: 'touch',
	      // Add iOS momentum scrolling.
	      // temporary style
	      position: 'fixed',
	      top: 0,
	      // We disable the focus ring for mouse, touch and keyboard users.
	      // At some point, it would be better to keep it for keyboard users.
	      // :focus-ring CSS pseudo-class will help.
	      outline: 0
	    },

	    /* Styles applied to the `Paper` component if `anchor="left"`. */
	    paperAnchorLeft: {
	      left: 0,
	      right: 'auto'
	    },

	    /* Styles applied to the `Paper` component if `anchor="right"`. */
	    paperAnchorRight: {
	      left: 'auto',
	      right: 0
	    },

	    /* Styles applied to the `Paper` component if `anchor="top"`. */
	    paperAnchorTop: {
	      top: 0,
	      left: 0,
	      bottom: 'auto',
	      right: 0,
	      height: 'auto',
	      maxHeight: '100%'
	    },

	    /* Styles applied to the `Paper` component if `anchor="bottom"`. */
	    paperAnchorBottom: {
	      top: 'auto',
	      left: 0,
	      bottom: 0,
	      right: 0,
	      height: 'auto',
	      maxHeight: '100%'
	    },

	    /* Styles applied to the `Paper` component if `anchor="left"` and `variant` is not "temporary". */
	    paperAnchorDockedLeft: {
	      borderRight: "1px solid ".concat(theme.palette.divider)
	    },

	    /* Styles applied to the `Paper` component if `anchor="top"` and `variant` is not "temporary". */
	    paperAnchorDockedTop: {
	      borderBottom: "1px solid ".concat(theme.palette.divider)
	    },

	    /* Styles applied to the `Paper` component if `anchor="right"` and `variant` is not "temporary". */
	    paperAnchorDockedRight: {
	      borderLeft: "1px solid ".concat(theme.palette.divider)
	    },

	    /* Styles applied to the `Paper` component if `anchor="bottom"` and `variant` is not "temporary". */
	    paperAnchorDockedBottom: {
	      borderTop: "1px solid ".concat(theme.palette.divider)
	    },

	    /* Styles applied to the `Modal` component. */
	    modal: {}
	  };
	};
	var oppositeDirection = {
	  left: 'right',
	  right: 'left',
	  top: 'down',
	  bottom: 'up'
	};
	function isHorizontal(anchor) {
	  return ['left', 'right'].indexOf(anchor) !== -1;
	}
	function getAnchor(theme, anchor) {
	  return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
	}
	var defaultTransitionDuration = {
	  enter: duration.enteringScreen,
	  exit: duration.leavingScreen
	};
	/**
	 * The props of the [Modal](/api/modal/) component are available
	 * when `variant="temporary"` is set.
	 */

	var Drawer = /*#__PURE__*/react.exports.forwardRef(function Drawer(props, ref) {
	  var _props$anchor = props.anchor,
	      anchorProp = _props$anchor === void 0 ? 'left' : _props$anchor,
	      BackdropProps = props.BackdropProps,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$elevation = props.elevation,
	      elevation = _props$elevation === void 0 ? 16 : _props$elevation,
	      _props$ModalProps = props.ModalProps;
	  _props$ModalProps = _props$ModalProps === void 0 ? {} : _props$ModalProps;

	  var BackdropPropsProp = _props$ModalProps.BackdropProps,
	      ModalProps = _objectWithoutProperties(_props$ModalProps, ["BackdropProps"]),
	      onClose = props.onClose,
	      _props$open = props.open,
	      open = _props$open === void 0 ? false : _props$open,
	      _props$PaperProps = props.PaperProps,
	      PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
	      SlideProps = props.SlideProps,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Slide : _props$TransitionComp,
	      _props$transitionDura = props.transitionDuration,
	      transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'temporary' : _props$variant,
	      other = _objectWithoutProperties(props, ["anchor", "BackdropProps", "children", "classes", "className", "elevation", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"]);

	  var theme = useTheme$1(); // Let's assume that the Drawer will always be rendered on user space.
	  // We use this state is order to skip the appear transition during the
	  // initial mount of the component.

	  var mounted = react.exports.useRef(false);
	  react.exports.useEffect(function () {
	    mounted.current = true;
	  }, []);
	  var anchor = getAnchor(theme, anchorProp);
	  var drawer = /*#__PURE__*/react.exports.createElement(Paper$1, _extends$5({
	    elevation: variant === 'temporary' ? elevation : 0,
	    square: true
	  }, PaperProps, {
	    className: clsx(classes.paper, classes["paperAnchor".concat(capitalize(anchor))], PaperProps.className, variant !== 'temporary' && classes["paperAnchorDocked".concat(capitalize(anchor))])
	  }), children);

	  if (variant === 'permanent') {
	    return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	      className: clsx(classes.root, classes.docked, className),
	      ref: ref
	    }, other), drawer);
	  }

	  var slidingDrawer = /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    in: open,
	    direction: oppositeDirection[anchor],
	    timeout: transitionDuration,
	    appear: mounted.current
	  }, SlideProps), drawer);

	  if (variant === 'persistent') {
	    return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	      className: clsx(classes.root, classes.docked, className),
	      ref: ref
	    }, other), slidingDrawer);
	  } // variant === temporary


	  return /*#__PURE__*/react.exports.createElement(Modal, _extends$5({
	    BackdropProps: _extends$5({}, BackdropProps, BackdropPropsProp, {
	      transitionDuration: transitionDuration
	    }),
	    BackdropComponent: Backdrop$1,
	    className: clsx(classes.root, classes.modal, className),
	    open: open,
	    onClose: onClose,
	    ref: ref
	  }, other, ModalProps), slidingDrawer);
	});
	withStyles(styles$1b, {
	  name: 'MuiDrawer',
	  flip: false
	})(Drawer);

	/**
	 * @ignore - internal component.
	 * @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
	 */

	var ExpansionPanelContext = react.exports.createContext({});

	var styles$1a = function styles(theme) {
	  var transition = {
	    duration: theme.transitions.duration.shortest
	  };
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'relative',
	      transition: theme.transitions.create(['margin'], transition),
	      '&:before': {
	        position: 'absolute',
	        left: 0,
	        top: -1,
	        right: 0,
	        height: 1,
	        content: '""',
	        opacity: 1,
	        backgroundColor: theme.palette.divider,
	        transition: theme.transitions.create(['opacity', 'background-color'], transition)
	      },
	      '&:first-child': {
	        '&:before': {
	          display: 'none'
	        }
	      },
	      '&$expanded': {
	        margin: '16px 0',
	        '&:first-child': {
	          marginTop: 0
	        },
	        '&:last-child': {
	          marginBottom: 0
	        },
	        '&:before': {
	          opacity: 0
	        }
	      },
	      '&$expanded + &': {
	        '&:before': {
	          display: 'none'
	        }
	      },
	      '&$disabled': {
	        backgroundColor: theme.palette.action.disabledBackground
	      }
	    },

	    /* Styles applied to the root element if `square={false}`. */
	    rounded: {
	      borderRadius: 0,
	      '&:first-child': {
	        borderTopLeftRadius: theme.shape.borderRadius,
	        borderTopRightRadius: theme.shape.borderRadius
	      },
	      '&:last-child': {
	        borderBottomLeftRadius: theme.shape.borderRadius,
	        borderBottomRightRadius: theme.shape.borderRadius,
	        // Fix a rendering issue on Edge
	        '@supports (-ms-ime-align: auto)': {
	          borderBottomLeftRadius: 0,
	          borderBottomRightRadius: 0
	        }
	      }
	    },

	    /* Styles applied to the root element if `expanded={true}`. */
	    expanded: {},

	    /* Styles applied to the root element if `disabled={true}`. */
	    disabled: {}
	  };
	};
	/**
	 * ⚠️ The ExpansionPanel component was renamed to Accordion to use a more common naming convention.
	 *
	 * You should use `import { Accordion } from '@material-ui/core'`
	 * or `import Accordion from '@material-ui/core/Accordion'`.
	 */

	var ExpansionPanel = /*#__PURE__*/react.exports.forwardRef(function ExpansionPanel(props, ref) {

	  var childrenProp = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$defaultExpande = props.defaultExpanded,
	      defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      expandedProp = props.expanded,
	      onChange = props.onChange,
	      _props$square = props.square,
	      square = _props$square === void 0 ? false : _props$square,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Collapse$1 : _props$TransitionComp,
	      TransitionProps = props.TransitionProps,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "defaultExpanded", "disabled", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"]);

	  var _useControlled = useControlled({
	    controlled: expandedProp,
	    default: defaultExpanded,
	    name: 'ExpansionPanel',
	    state: 'expanded'
	  }),
	      _useControlled2 = _slicedToArray(_useControlled, 2),
	      expanded = _useControlled2[0],
	      setExpandedState = _useControlled2[1];

	  var handleChange = react.exports.useCallback(function (event) {
	    setExpandedState(!expanded);

	    if (onChange) {
	      onChange(event, !expanded);
	    }
	  }, [expanded, onChange, setExpandedState]);

	  var _React$Children$toArr = react.exports.Children.toArray(childrenProp),
	      _React$Children$toArr2 = _toArray(_React$Children$toArr),
	      summary = _React$Children$toArr2[0],
	      children = _React$Children$toArr2.slice(1);

	  var contextValue = react.exports.useMemo(function () {
	    return {
	      expanded: expanded,
	      disabled: disabled,
	      toggle: handleChange
	    };
	  }, [expanded, disabled, handleChange]);
	  return /*#__PURE__*/react.exports.createElement(Paper$1, _extends$5({
	    className: clsx(classes.root, className, expanded && classes.expanded, disabled && classes.disabled, !square && classes.rounded),
	    ref: ref,
	    square: square
	  }, other), /*#__PURE__*/react.exports.createElement(ExpansionPanelContext.Provider, {
	    value: contextValue
	  }, summary), /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    in: expanded,
	    timeout: "auto"
	  }, TransitionProps), /*#__PURE__*/react.exports.createElement("div", {
	    "aria-labelledby": summary.props.id,
	    id: summary.props['aria-controls'],
	    role: "region"
	  }, children)));
	});
	withStyles(styles$1a, {
	  name: 'MuiExpansionPanel'
	})(ExpansionPanel);

	var styles$19 = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'flex',
	    alignItems: 'center',
	    padding: 8,
	    justifyContent: 'flex-end'
	  },

	  /* Styles applied to the root element if `disableSpacing={false}`. */
	  spacing: {
	    '& > :not(:first-child)': {
	      marginLeft: 8
	    }
	  }
	};
	/**
	 * ⚠️ The ExpansionPanelActions component was renamed to AccordionActions to use a more common naming convention.
	 *
	 * You should use `import { AccordionActions } from '@material-ui/core'`
	 * or `import AccordionActions from '@material-ui/core/AccordionActions'`.
	 */

	var ExpansionPanelActions = /*#__PURE__*/react.exports.forwardRef(function ExpansionPanelActions(props, ref) {

	  var classes = props.classes,
	      className = props.className,
	      _props$disableSpacing = props.disableSpacing,
	      disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,
	      other = _objectWithoutProperties(props, ["classes", "className", "disableSpacing"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, !disableSpacing && classes.spacing),
	    ref: ref
	  }, other));
	});
	withStyles(styles$19, {
	  name: 'MuiExpansionPanelActions'
	})(ExpansionPanelActions);

	var styles$18 = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'flex',
	      padding: theme.spacing(1, 2, 2)
	    }
	  };
	};
	/**
	 * ⚠️ The ExpansionPanelDetails component was renamed to AccordionDetails to use a more common naming convention.
	 *
	 * You should use `import { AccordionDetails } from '@material-ui/core'`
	 * or `import AccordionDetails from '@material-ui/core/AccordionDetails'`.
	 */

	var ExpansionPanelDetails = /*#__PURE__*/react.exports.forwardRef(function ExpansionPanelDetails(props, ref) {

	  var classes = props.classes,
	      className = props.className,
	      other = _objectWithoutProperties(props, ["classes", "className"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other));
	});
	withStyles(styles$18, {
	  name: 'MuiExpansionPanelDetails'
	})(ExpansionPanelDetails);

	var styles$17 = function styles(theme) {
	  var transition = {
	    duration: theme.transitions.duration.shortest
	  };
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'flex',
	      minHeight: 8 * 6,
	      transition: theme.transitions.create(['min-height', 'background-color'], transition),
	      padding: theme.spacing(0, 2),
	      '&:hover:not($disabled)': {
	        cursor: 'pointer'
	      },
	      '&$expanded': {
	        minHeight: 64
	      },
	      '&$focused': {
	        backgroundColor: theme.palette.action.focus
	      },
	      '&$disabled': {
	        opacity: theme.palette.action.disabledOpacity
	      }
	    },

	    /* Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
	    expanded: {},

	    /* Pseudo-class applied to the root element if `focused={true}`. */
	    focused: {},

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the children wrapper element. */
	    content: {
	      display: 'flex',
	      flexGrow: 1,
	      transition: theme.transitions.create(['margin'], transition),
	      margin: '12px 0',
	      '&$expanded': {
	        margin: '20px 0'
	      }
	    },

	    /* Styles applied to the `IconButton` component when `expandIcon` is supplied. */
	    expandIcon: {
	      transform: 'rotate(0deg)',
	      transition: theme.transitions.create('transform', transition),
	      '&:hover': {
	        // Disable the hover effect for the IconButton,
	        // because a hover effect should apply to the entire Expand button and
	        // not only to the IconButton.
	        backgroundColor: 'transparent'
	      },
	      '&$expanded': {
	        transform: 'rotate(180deg)'
	      }
	    }
	  };
	};
	/**
	 * ⚠️ The ExpansionPanelSummary component was renamed to AccordionSummary to use a more common naming convention.
	 *
	 * You should use `import { AccordionSummary } from '@material-ui/core'`
	 * or `import AccordionSummary from '@material-ui/core/AccordionSummary'`.
	 */

	var ExpansionPanelSummary = /*#__PURE__*/react.exports.forwardRef(function ExpansionPanelSummary(props, ref) {

	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      expandIcon = props.expandIcon,
	      IconButtonProps = props.IconButtonProps,
	      onBlur = props.onBlur,
	      onClick = props.onClick,
	      onFocusVisible = props.onFocusVisible,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "expandIcon", "IconButtonProps", "onBlur", "onClick", "onFocusVisible"]);

	  var _React$useState = react.exports.useState(false),
	      focusedState = _React$useState[0],
	      setFocusedState = _React$useState[1];

	  var handleFocusVisible = function handleFocusVisible(event) {
	    setFocusedState(true);

	    if (onFocusVisible) {
	      onFocusVisible(event);
	    }
	  };

	  var handleBlur = function handleBlur(event) {
	    setFocusedState(false);

	    if (onBlur) {
	      onBlur(event);
	    }
	  };

	  var _React$useContext = react.exports.useContext(ExpansionPanelContext),
	      _React$useContext$dis = _React$useContext.disabled,
	      disabled = _React$useContext$dis === void 0 ? false : _React$useContext$dis,
	      expanded = _React$useContext.expanded,
	      toggle = _React$useContext.toggle;

	  var handleChange = function handleChange(event) {
	    if (toggle) {
	      toggle(event);
	    }

	    if (onClick) {
	      onClick(event);
	    }
	  };

	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    focusRipple: false,
	    disableRipple: true,
	    disabled: disabled,
	    component: "div",
	    "aria-expanded": expanded,
	    className: clsx(classes.root, className, disabled && classes.disabled, expanded && classes.expanded, focusedState && classes.focused),
	    onFocusVisible: handleFocusVisible,
	    onBlur: handleBlur,
	    onClick: handleChange,
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.content, expanded && classes.expanded)
	  }, children), expandIcon && /*#__PURE__*/react.exports.createElement(IconButton$1, _extends$5({
	    className: clsx(classes.expandIcon, expanded && classes.expanded),
	    edge: "end",
	    component: "div",
	    tabIndex: null,
	    role: null,
	    "aria-hidden": true
	  }, IconButtonProps), expandIcon));
	});
	withStyles(styles$17, {
	  name: 'MuiExpansionPanelSummary'
	})(ExpansionPanelSummary);

	var styles$16 = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: _extends$5({}, theme.typography.button, {
	      boxSizing: 'border-box',
	      minHeight: 36,
	      transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
	        duration: theme.transitions.duration.short
	      }),
	      borderRadius: '50%',
	      padding: 0,
	      minWidth: 0,
	      width: 56,
	      height: 56,
	      boxShadow: theme.shadows[6],
	      '&:active': {
	        boxShadow: theme.shadows[12]
	      },
	      color: theme.palette.getContrastText(theme.palette.grey[300]),
	      backgroundColor: theme.palette.grey[300],
	      '&:hover': {
	        backgroundColor: theme.palette.grey.A100,
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: theme.palette.grey[300]
	        },
	        '&$disabled': {
	          backgroundColor: theme.palette.action.disabledBackground
	        },
	        textDecoration: 'none'
	      },
	      '&$focusVisible': {
	        boxShadow: theme.shadows[6]
	      },
	      '&$disabled': {
	        color: theme.palette.action.disabled,
	        boxShadow: theme.shadows[0],
	        backgroundColor: theme.palette.action.disabledBackground
	      }
	    }),

	    /* Styles applied to the span element that wraps the children. */
	    label: {
	      width: '100%',
	      // assure the correct width for iOS Safari
	      display: 'inherit',
	      alignItems: 'inherit',
	      justifyContent: 'inherit'
	    },

	    /* Styles applied to the root element if `color="primary"`. */
	    primary: {
	      color: theme.palette.primary.contrastText,
	      backgroundColor: theme.palette.primary.main,
	      '&:hover': {
	        backgroundColor: theme.palette.primary.dark,
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: theme.palette.primary.main
	        }
	      }
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    secondary: {
	      color: theme.palette.secondary.contrastText,
	      backgroundColor: theme.palette.secondary.main,
	      '&:hover': {
	        backgroundColor: theme.palette.secondary.dark,
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: theme.palette.secondary.main
	        }
	      }
	    },

	    /* Styles applied to the root element if `variant="extended"`. */
	    extended: {
	      borderRadius: 48 / 2,
	      padding: '0 16px',
	      width: 'auto',
	      minHeight: 'auto',
	      minWidth: 48,
	      height: 48,
	      '&$sizeSmall': {
	        width: 'auto',
	        padding: '0 8px',
	        borderRadius: 34 / 2,
	        minWidth: 34,
	        height: 34
	      },
	      '&$sizeMedium': {
	        width: 'auto',
	        padding: '0 16px',
	        borderRadius: 40 / 2,
	        minWidth: 40,
	        height: 40
	      }
	    },

	    /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
	    focusVisible: {},

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the root element if `color="inherit"`. */
	    colorInherit: {
	      color: 'inherit'
	    },

	    /* Styles applied to the root element if `size="small"``. */
	    sizeSmall: {
	      width: 40,
	      height: 40
	    },

	    /* Styles applied to the root element if `size="medium"``. */
	    sizeMedium: {
	      width: 48,
	      height: 48
	    }
	  };
	};
	var Fab = /*#__PURE__*/react.exports.forwardRef(function Fab(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'default' : _props$color,
	      _props$component = props.component,
	      component = _props$component === void 0 ? 'button' : _props$component,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      _props$disableFocusRi = props.disableFocusRipple,
	      disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
	      focusVisibleClassName = props.focusVisibleClassName,
	      _props$size = props.size,
	      size = _props$size === void 0 ? 'large' : _props$size,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'circular' : _props$variant,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "variant"]);

	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    className: clsx(classes.root, className, size !== 'large' && classes["size".concat(capitalize(size))], disabled && classes.disabled, variant === 'extended' && classes.extended, {
	      'primary': classes.primary,
	      'secondary': classes.secondary,
	      'inherit': classes.colorInherit
	    }[color]),
	    component: component,
	    disabled: disabled,
	    focusRipple: !disableFocusRipple,
	    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.label
	  }, children));
	});
	withStyles(styles$16, {
	  name: 'MuiFab'
	})(Fab);

	function formControlState(_ref) {
	  var props = _ref.props,
	      states = _ref.states,
	      muiFormControl = _ref.muiFormControl;
	  return states.reduce(function (acc, state) {
	    acc[state] = props[state];

	    if (muiFormControl) {
	      if (typeof props[state] === 'undefined') {
	        acc[state] = muiFormControl[state];
	      }
	    }

	    return acc;
	  }, {});
	}

	function getStyleValue(computedStyle, property) {
	  return parseInt(computedStyle[property], 10) || 0;
	}

	var useEnhancedEffect$5 = typeof window !== 'undefined' ? react.exports.useLayoutEffect : react.exports.useEffect;
	var styles$15 = {
	  /* Styles applied to the shadow textarea element. */
	  shadow: {
	    // Visibility needed to hide the extra text area on iPads
	    visibility: 'hidden',
	    // Remove from the content flow
	    position: 'absolute',
	    // Ignore the scrollbar width
	    overflow: 'hidden',
	    height: 0,
	    top: 0,
	    left: 0,
	    // Create a new layer, increase the isolation of the computed values
	    transform: 'translateZ(0)'
	  }
	};
	var TextareaAutosize = /*#__PURE__*/react.exports.forwardRef(function TextareaAutosize(props, ref) {
	  var onChange = props.onChange,
	      rows = props.rows,
	      rowsMax = props.rowsMax,
	      rowsMinProp = props.rowsMin,
	      maxRowsProp = props.maxRows,
	      _props$minRows = props.minRows,
	      minRowsProp = _props$minRows === void 0 ? 1 : _props$minRows,
	      style = props.style,
	      value = props.value,
	      other = _objectWithoutProperties(props, ["onChange", "rows", "rowsMax", "rowsMin", "maxRows", "minRows", "style", "value"]);

	  var maxRows = maxRowsProp || rowsMax;
	  var minRows = rows || rowsMinProp || minRowsProp;

	  var _React$useRef = react.exports.useRef(value != null),
	      isControlled = _React$useRef.current;

	  var inputRef = react.exports.useRef(null);
	  var handleRef = useForkRef(ref, inputRef);
	  var shadowRef = react.exports.useRef(null);
	  var renders = react.exports.useRef(0);

	  var _React$useState = react.exports.useState({}),
	      state = _React$useState[0],
	      setState = _React$useState[1];

	  var syncHeight = react.exports.useCallback(function () {
	    var input = inputRef.current;
	    var computedStyle = window.getComputedStyle(input);
	    var inputShallow = shadowRef.current;
	    inputShallow.style.width = computedStyle.width;
	    inputShallow.value = input.value || props.placeholder || 'x';

	    if (inputShallow.value.slice(-1) === '\n') {
	      // Certain fonts which overflow the line height will cause the textarea
	      // to report a different scrollHeight depending on whether the last line
	      // is empty. Make it non-empty to avoid this issue.
	      inputShallow.value += ' ';
	    }

	    var boxSizing = computedStyle['box-sizing'];
	    var padding = getStyleValue(computedStyle, 'padding-bottom') + getStyleValue(computedStyle, 'padding-top');
	    var border = getStyleValue(computedStyle, 'border-bottom-width') + getStyleValue(computedStyle, 'border-top-width'); // The height of the inner content

	    var innerHeight = inputShallow.scrollHeight - padding; // Measure height of a textarea with a single row

	    inputShallow.value = 'x';
	    var singleRowHeight = inputShallow.scrollHeight - padding; // The height of the outer content

	    var outerHeight = innerHeight;

	    if (minRows) {
	      outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
	    }

	    if (maxRows) {
	      outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
	    }

	    outerHeight = Math.max(outerHeight, singleRowHeight); // Take the box sizing into account for applying this value as a style.

	    var outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
	    var overflow = Math.abs(outerHeight - innerHeight) <= 1;
	    setState(function (prevState) {
	      // Need a large enough difference to update the height.
	      // This prevents infinite rendering loop.
	      if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
	        renders.current += 1;
	        return {
	          overflow: overflow,
	          outerHeightStyle: outerHeightStyle
	        };
	      }

	      return prevState;
	    });
	  }, [maxRows, minRows, props.placeholder]);
	  react.exports.useEffect(function () {
	    var handleResize = debounce$1(function () {
	      renders.current = 0;
	      syncHeight();
	    });
	    window.addEventListener('resize', handleResize);
	    return function () {
	      handleResize.clear();
	      window.removeEventListener('resize', handleResize);
	    };
	  }, [syncHeight]);
	  useEnhancedEffect$5(function () {
	    syncHeight();
	  });
	  react.exports.useEffect(function () {
	    renders.current = 0;
	  }, [value]);

	  var handleChange = function handleChange(event) {
	    renders.current = 0;

	    if (!isControlled) {
	      syncHeight();
	    }

	    if (onChange) {
	      onChange(event);
	    }
	  };

	  return /*#__PURE__*/react.exports.createElement(react.exports.Fragment, null, /*#__PURE__*/react.exports.createElement("textarea", _extends$5({
	    value: value,
	    onChange: handleChange,
	    ref: handleRef // Apply the rows prop to get a "correct" first SSR paint
	    ,
	    rows: minRows,
	    style: _extends$5({
	      height: state.outerHeightStyle,
	      // Need a large enough difference to allow scrolling.
	      // This prevents infinite rendering loop.
	      overflow: state.overflow ? 'hidden' : null
	    }, style)
	  }, other)), /*#__PURE__*/react.exports.createElement("textarea", {
	    "aria-hidden": true,
	    className: props.className,
	    readOnly: true,
	    ref: shadowRef,
	    tabIndex: -1,
	    style: _extends$5({}, styles$15.shadow, style)
	  }));
	});

	// Supports determination of isControlled().
	// Controlled input accepts its current value as a prop.
	//
	// @see https://facebook.github.io/react/docs/forms.html#controlled-components
	// @param value
	// @returns {boolean} true if string (including '') or number (including zero)
	function hasValue(value) {
	  return value != null && !(Array.isArray(value) && value.length === 0);
	} // Determine if field is empty or filled.
	// Response determines if label is presented above field or as placeholder.
	//
	// @param obj
	// @param SSR
	// @returns {boolean} False when not present or empty string.
	//                    True when any number or string with length.

	function isFilled(obj) {
	  var SSR = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
	  return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
	} // Determine if an Input is adorned on start.
	// It's corresponding to the left with LTR.
	//
	// @param obj
	// @returns {boolean} False when no adornments.
	//                    True when adorned at the start.

	function isAdornedStart(obj) {
	  return obj.startAdornment;
	}

	var styles$14 = function styles(theme) {
	  var light = theme.palette.type === 'light';
	  var placeholder = {
	    color: 'currentColor',
	    opacity: light ? 0.42 : 0.5,
	    transition: theme.transitions.create('opacity', {
	      duration: theme.transitions.duration.shorter
	    })
	  };
	  var placeholderHidden = {
	    opacity: '0 !important'
	  };
	  var placeholderVisible = {
	    opacity: light ? 0.42 : 0.5
	  };
	  return {
	    '@global': {
	      '@keyframes mui-auto-fill': {},
	      '@keyframes mui-auto-fill-cancel': {}
	    },

	    /* Styles applied to the root element. */
	    root: _extends$5({}, theme.typography.body1, {
	      color: theme.palette.text.primary,
	      lineHeight: '1.1876em',
	      // Reset (19px), match the native input line-height
	      boxSizing: 'border-box',
	      // Prevent padding issue with fullWidth.
	      position: 'relative',
	      cursor: 'text',
	      display: 'inline-flex',
	      alignItems: 'center',
	      '&$disabled': {
	        color: theme.palette.text.disabled,
	        cursor: 'default'
	      }
	    }),

	    /* Styles applied to the root element if the component is a descendant of `FormControl`. */
	    formControl: {},

	    /* Styles applied to the root element if the component is focused. */
	    focused: {},

	    /* Styles applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the root element if `startAdornment` is provided. */
	    adornedStart: {},

	    /* Styles applied to the root element if `endAdornment` is provided. */
	    adornedEnd: {},

	    /* Pseudo-class applied to the root element if `error={true}`. */
	    error: {},

	    /* Styles applied to the `input` element if `margin="dense"`. */
	    marginDense: {},

	    /* Styles applied to the root element if `multiline={true}`. */
	    multiline: {
	      padding: "".concat(8 - 2, "px 0 ").concat(8 - 1, "px"),
	      '&$marginDense': {
	        paddingTop: 4 - 1
	      }
	    },

	    /* Styles applied to the root element if the color is secondary. */
	    colorSecondary: {},

	    /* Styles applied to the root element if `fullWidth={true}`. */
	    fullWidth: {
	      width: '100%'
	    },

	    /* Styles applied to the `input` element. */
	    input: {
	      font: 'inherit',
	      letterSpacing: 'inherit',
	      color: 'currentColor',
	      padding: "".concat(8 - 2, "px 0 ").concat(8 - 1, "px"),
	      border: 0,
	      boxSizing: 'content-box',
	      background: 'none',
	      height: '1.1876em',
	      // Reset (19px), match the native input line-height
	      margin: 0,
	      // Reset for Safari
	      WebkitTapHighlightColor: 'transparent',
	      display: 'block',
	      // Make the flex item shrink with Firefox
	      minWidth: 0,
	      width: '100%',
	      // Fix IE 11 width issue
	      animationName: 'mui-auto-fill-cancel',
	      animationDuration: '10ms',
	      '&::-webkit-input-placeholder': placeholder,
	      '&::-moz-placeholder': placeholder,
	      // Firefox 19+
	      '&:-ms-input-placeholder': placeholder,
	      // IE 11
	      '&::-ms-input-placeholder': placeholder,
	      // Edge
	      '&:focus': {
	        outline: 0
	      },
	      // Reset Firefox invalid required input style
	      '&:invalid': {
	        boxShadow: 'none'
	      },
	      '&::-webkit-search-decoration': {
	        // Remove the padding when type=search.
	        '-webkit-appearance': 'none'
	      },
	      // Show and hide the placeholder logic
	      'label[data-shrink=false] + $formControl &': {
	        '&::-webkit-input-placeholder': placeholderHidden,
	        '&::-moz-placeholder': placeholderHidden,
	        // Firefox 19+
	        '&:-ms-input-placeholder': placeholderHidden,
	        // IE 11
	        '&::-ms-input-placeholder': placeholderHidden,
	        // Edge
	        '&:focus::-webkit-input-placeholder': placeholderVisible,
	        '&:focus::-moz-placeholder': placeholderVisible,
	        // Firefox 19+
	        '&:focus:-ms-input-placeholder': placeholderVisible,
	        // IE 11
	        '&:focus::-ms-input-placeholder': placeholderVisible // Edge

	      },
	      '&$disabled': {
	        opacity: 1 // Reset iOS opacity

	      },
	      '&:-webkit-autofill': {
	        animationDuration: '5000s',
	        animationName: 'mui-auto-fill'
	      }
	    },

	    /* Styles applied to the `input` element if `margin="dense"`. */
	    inputMarginDense: {
	      paddingTop: 4 - 1
	    },

	    /* Styles applied to the `input` element if `multiline={true}`. */
	    inputMultiline: {
	      height: 'auto',
	      resize: 'none',
	      padding: 0
	    },

	    /* Styles applied to the `input` element if `type="search"`. */
	    inputTypeSearch: {
	      // Improve type search style.
	      '-moz-appearance': 'textfield',
	      '-webkit-appearance': 'textfield'
	    },

	    /* Styles applied to the `input` element if `startAdornment` is provided. */
	    inputAdornedStart: {},

	    /* Styles applied to the `input` element if `endAdornment` is provided. */
	    inputAdornedEnd: {},

	    /* Styles applied to the `input` element if `hiddenLabel={true}`. */
	    inputHiddenLabel: {}
	  };
	};
	var useEnhancedEffect$4 = typeof window === 'undefined' ? react.exports.useEffect : react.exports.useLayoutEffect;
	/**
	 * `InputBase` contains as few styles as possible.
	 * It aims to be a simple building block for creating an input.
	 * It contains a load of style reset and some state logic.
	 */

	var InputBase = /*#__PURE__*/react.exports.forwardRef(function InputBase(props, ref) {
	  var ariaDescribedby = props['aria-describedby'],
	      autoComplete = props.autoComplete,
	      autoFocus = props.autoFocus,
	      classes = props.classes,
	      className = props.className;
	      props.color;
	      var defaultValue = props.defaultValue,
	      disabled = props.disabled,
	      endAdornment = props.endAdornment;
	      props.error;
	      var _props$fullWidth = props.fullWidth,
	      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
	      id = props.id,
	      _props$inputComponent = props.inputComponent,
	      inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
	      _props$inputProps = props.inputProps,
	      inputPropsProp = _props$inputProps === void 0 ? {} : _props$inputProps,
	      inputRefProp = props.inputRef;
	      props.margin;
	      var _props$multiline = props.multiline,
	      multiline = _props$multiline === void 0 ? false : _props$multiline,
	      name = props.name,
	      onBlur = props.onBlur,
	      onChange = props.onChange,
	      onClick = props.onClick,
	      onFocus = props.onFocus,
	      onKeyDown = props.onKeyDown,
	      onKeyUp = props.onKeyUp,
	      placeholder = props.placeholder,
	      readOnly = props.readOnly,
	      renderSuffix = props.renderSuffix,
	      rows = props.rows,
	      rowsMax = props.rowsMax,
	      rowsMin = props.rowsMin,
	      maxRows = props.maxRows,
	      minRows = props.minRows,
	      startAdornment = props.startAdornment,
	      _props$type = props.type,
	      type = _props$type === void 0 ? 'text' : _props$type,
	      valueProp = props.value,
	      other = _objectWithoutProperties(props, ["aria-describedby", "autoComplete", "autoFocus", "classes", "className", "color", "defaultValue", "disabled", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "rowsMax", "rowsMin", "maxRows", "minRows", "startAdornment", "type", "value"]);

	  var value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;

	  var _React$useRef = react.exports.useRef(value != null),
	      isControlled = _React$useRef.current;

	  var inputRef = react.exports.useRef();
	  var handleInputRefWarning = react.exports.useCallback(function (instance) {
	  }, []);
	  var handleInputPropsRefProp = useForkRef(inputPropsProp.ref, handleInputRefWarning);
	  var handleInputRefProp = useForkRef(inputRefProp, handleInputPropsRefProp);
	  var handleInputRef = useForkRef(inputRef, handleInputRefProp);

	  var _React$useState = react.exports.useState(false),
	      focused = _React$useState[0],
	      setFocused = _React$useState[1];

	  var muiFormControl = useFormControl$1();

	  var fcs = formControlState({
	    props: props,
	    muiFormControl: muiFormControl,
	    states: ['color', 'disabled', 'error', 'hiddenLabel', 'margin', 'required', 'filled']
	  });
	  fcs.focused = muiFormControl ? muiFormControl.focused : focused; // The blur won't fire when the disabled state is set on a focused input.
	  // We need to book keep the focused state manually.

	  react.exports.useEffect(function () {
	    if (!muiFormControl && disabled && focused) {
	      setFocused(false);

	      if (onBlur) {
	        onBlur();
	      }
	    }
	  }, [muiFormControl, disabled, focused, onBlur]);
	  var onFilled = muiFormControl && muiFormControl.onFilled;
	  var onEmpty = muiFormControl && muiFormControl.onEmpty;
	  var checkDirty = react.exports.useCallback(function (obj) {
	    if (isFilled(obj)) {
	      if (onFilled) {
	        onFilled();
	      }
	    } else if (onEmpty) {
	      onEmpty();
	    }
	  }, [onFilled, onEmpty]);
	  useEnhancedEffect$4(function () {
	    if (isControlled) {
	      checkDirty({
	        value: value
	      });
	    }
	  }, [value, checkDirty, isControlled]);

	  var handleFocus = function handleFocus(event) {
	    // Fix a bug with IE 11 where the focus/blur events are triggered
	    // while the input is disabled.
	    if (fcs.disabled) {
	      event.stopPropagation();
	      return;
	    }

	    if (onFocus) {
	      onFocus(event);
	    }

	    if (inputPropsProp.onFocus) {
	      inputPropsProp.onFocus(event);
	    }

	    if (muiFormControl && muiFormControl.onFocus) {
	      muiFormControl.onFocus(event);
	    } else {
	      setFocused(true);
	    }
	  };

	  var handleBlur = function handleBlur(event) {
	    if (onBlur) {
	      onBlur(event);
	    }

	    if (inputPropsProp.onBlur) {
	      inputPropsProp.onBlur(event);
	    }

	    if (muiFormControl && muiFormControl.onBlur) {
	      muiFormControl.onBlur(event);
	    } else {
	      setFocused(false);
	    }
	  };

	  var handleChange = function handleChange(event) {
	    if (!isControlled) {
	      var element = event.target || inputRef.current;

	      if (element == null) {
	        throw new Error(formatMuiErrorMessage(1));
	      }

	      checkDirty({
	        value: element.value
	      });
	    }

	    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
	      args[_key - 1] = arguments[_key];
	    }

	    if (inputPropsProp.onChange) {
	      inputPropsProp.onChange.apply(inputPropsProp, [event].concat(args));
	    } // Perform in the willUpdate


	    if (onChange) {
	      onChange.apply(void 0, [event].concat(args));
	    }
	  }; // Check the input state on mount, in case it was filled by the user
	  // or auto filled by the browser before the hydration (for SSR).


	  react.exports.useEffect(function () {
	    checkDirty(inputRef.current);
	  }, []); // eslint-disable-line react-hooks/exhaustive-deps

	  var handleClick = function handleClick(event) {
	    if (inputRef.current && event.currentTarget === event.target) {
	      inputRef.current.focus();
	    }

	    if (onClick) {
	      onClick(event);
	    }
	  };

	  var InputComponent = inputComponent;

	  var inputProps = _extends$5({}, inputPropsProp, {
	    ref: handleInputRef
	  });

	  if (typeof InputComponent !== 'string') {
	    inputProps = _extends$5({
	      // Rename ref to inputRef as we don't know the
	      // provided `inputComponent` structure.
	      inputRef: handleInputRef,
	      type: type
	    }, inputProps, {
	      ref: null
	    });
	  } else if (multiline) {
	    if (rows && !maxRows && !minRows && !rowsMax && !rowsMin) {
	      InputComponent = 'textarea';
	    } else {
	      inputProps = _extends$5({
	        minRows: rows || minRows,
	        rowsMax: rowsMax,
	        maxRows: maxRows
	      }, inputProps);
	      InputComponent = TextareaAutosize;
	    }
	  } else {
	    inputProps = _extends$5({
	      type: type
	    }, inputProps);
	  }

	  var handleAutoFill = function handleAutoFill(event) {
	    // Provide a fake value as Chrome might not let you access it for security reasons.
	    checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : {
	      value: 'x'
	    });
	  };

	  react.exports.useEffect(function () {
	    if (muiFormControl) {
	      muiFormControl.setAdornedStart(Boolean(startAdornment));
	    }
	  }, [muiFormControl, startAdornment]);
	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, classes["color".concat(capitalize(fcs.color || 'primary'))], className, fcs.disabled && classes.disabled, fcs.error && classes.error, fullWidth && classes.fullWidth, fcs.focused && classes.focused, muiFormControl && classes.formControl, multiline && classes.multiline, startAdornment && classes.adornedStart, endAdornment && classes.adornedEnd, fcs.margin === 'dense' && classes.marginDense),
	    onClick: handleClick,
	    ref: ref
	  }, other), startAdornment, /*#__PURE__*/react.exports.createElement(FormControlContext.Provider, {
	    value: null
	  }, /*#__PURE__*/react.exports.createElement(InputComponent, _extends$5({
	    "aria-invalid": fcs.error,
	    "aria-describedby": ariaDescribedby,
	    autoComplete: autoComplete,
	    autoFocus: autoFocus,
	    defaultValue: defaultValue,
	    disabled: fcs.disabled,
	    id: id,
	    onAnimationStart: handleAutoFill,
	    name: name,
	    placeholder: placeholder,
	    readOnly: readOnly,
	    required: fcs.required,
	    rows: rows,
	    value: value,
	    onKeyDown: onKeyDown,
	    onKeyUp: onKeyUp
	  }, inputProps, {
	    className: clsx(classes.input, inputPropsProp.className, fcs.disabled && classes.disabled, multiline && classes.inputMultiline, fcs.hiddenLabel && classes.inputHiddenLabel, startAdornment && classes.inputAdornedStart, endAdornment && classes.inputAdornedEnd, type === 'search' && classes.inputTypeSearch, fcs.margin === 'dense' && classes.inputMarginDense),
	    onBlur: handleBlur,
	    onChange: handleChange,
	    onFocus: handleFocus
	  }))), endAdornment, renderSuffix ? renderSuffix(_extends$5({}, fcs, {
	    startAdornment: startAdornment
	  })) : null);
	});
	var InputBase$1 = withStyles(styles$14, {
	  name: 'MuiInputBase'
	})(InputBase);

	var styles$13 = function styles(theme) {
	  var light = theme.palette.type === 'light';
	  var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
	  var backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'relative',
	      backgroundColor: backgroundColor,
	      borderTopLeftRadius: theme.shape.borderRadius,
	      borderTopRightRadius: theme.shape.borderRadius,
	      transition: theme.transitions.create('background-color', {
	        duration: theme.transitions.duration.shorter,
	        easing: theme.transitions.easing.easeOut
	      }),
	      '&:hover': {
	        backgroundColor: light ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)',
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: backgroundColor
	        }
	      },
	      '&$focused': {
	        backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)'
	      },
	      '&$disabled': {
	        backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'
	      }
	    },

	    /* Styles applied to the root element if color secondary. */
	    colorSecondary: {
	      '&$underline:after': {
	        borderBottomColor: theme.palette.secondary.main
	      }
	    },

	    /* Styles applied to the root element if `disableUnderline={false}`. */
	    underline: {
	      '&:after': {
	        borderBottom: "2px solid ".concat(theme.palette.primary.main),
	        left: 0,
	        bottom: 0,
	        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
	        content: '""',
	        position: 'absolute',
	        right: 0,
	        transform: 'scaleX(0)',
	        transition: theme.transitions.create('transform', {
	          duration: theme.transitions.duration.shorter,
	          easing: theme.transitions.easing.easeOut
	        }),
	        pointerEvents: 'none' // Transparent to the hover style.

	      },
	      '&$focused:after': {
	        transform: 'scaleX(1)'
	      },
	      '&$error:after': {
	        borderBottomColor: theme.palette.error.main,
	        transform: 'scaleX(1)' // error is always underlined in red

	      },
	      '&:before': {
	        borderBottom: "1px solid ".concat(bottomLineColor),
	        left: 0,
	        bottom: 0,
	        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
	        content: '"\\00a0"',
	        position: 'absolute',
	        right: 0,
	        transition: theme.transitions.create('border-bottom-color', {
	          duration: theme.transitions.duration.shorter
	        }),
	        pointerEvents: 'none' // Transparent to the hover style.

	      },
	      '&:hover:before': {
	        borderBottom: "1px solid ".concat(theme.palette.text.primary)
	      },
	      '&$disabled:before': {
	        borderBottomStyle: 'dotted'
	      }
	    },

	    /* Pseudo-class applied to the root element if the component is focused. */
	    focused: {},

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the root element if `startAdornment` is provided. */
	    adornedStart: {
	      paddingLeft: 12
	    },

	    /* Styles applied to the root element if `endAdornment` is provided. */
	    adornedEnd: {
	      paddingRight: 12
	    },

	    /* Pseudo-class applied to the root element if `error={true}`. */
	    error: {},

	    /* Styles applied to the `input` element if `margin="dense"`. */
	    marginDense: {},

	    /* Styles applied to the root element if `multiline={true}`. */
	    multiline: {
	      padding: '27px 12px 10px',
	      '&$marginDense': {
	        paddingTop: 23,
	        paddingBottom: 6
	      }
	    },

	    /* Styles applied to the `input` element. */
	    input: {
	      padding: '27px 12px 10px',
	      '&:-webkit-autofill': {
	        WebkitBoxShadow: theme.palette.type === 'light' ? null : '0 0 0 100px #266798 inset',
	        WebkitTextFillColor: theme.palette.type === 'light' ? null : '#fff',
	        caretColor: theme.palette.type === 'light' ? null : '#fff',
	        borderTopLeftRadius: 'inherit',
	        borderTopRightRadius: 'inherit'
	      }
	    },

	    /* Styles applied to the `input` element if `margin="dense"`. */
	    inputMarginDense: {
	      paddingTop: 23,
	      paddingBottom: 6
	    },

	    /* Styles applied to the `input` if in `<FormControl hiddenLabel />`. */
	    inputHiddenLabel: {
	      paddingTop: 18,
	      paddingBottom: 19,
	      '&$inputMarginDense': {
	        paddingTop: 10,
	        paddingBottom: 11
	      }
	    },

	    /* Styles applied to the `input` element if `multiline={true}`. */
	    inputMultiline: {
	      padding: 0
	    },

	    /* Styles applied to the `input` element if `startAdornment` is provided. */
	    inputAdornedStart: {
	      paddingLeft: 0
	    },

	    /* Styles applied to the `input` element if `endAdornment` is provided. */
	    inputAdornedEnd: {
	      paddingRight: 0
	    }
	  };
	};
	var FilledInput = /*#__PURE__*/react.exports.forwardRef(function FilledInput(props, ref) {
	  var disableUnderline = props.disableUnderline,
	      classes = props.classes,
	      _props$fullWidth = props.fullWidth,
	      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
	      _props$inputComponent = props.inputComponent,
	      inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
	      _props$multiline = props.multiline,
	      multiline = _props$multiline === void 0 ? false : _props$multiline,
	      _props$type = props.type,
	      type = _props$type === void 0 ? 'text' : _props$type,
	      other = _objectWithoutProperties(props, ["disableUnderline", "classes", "fullWidth", "inputComponent", "multiline", "type"]);

	  return /*#__PURE__*/react.exports.createElement(InputBase$1, _extends$5({
	    classes: _extends$5({}, classes, {
	      root: clsx(classes.root, !disableUnderline && classes.underline),
	      underline: null
	    }),
	    fullWidth: fullWidth,
	    inputComponent: inputComponent,
	    multiline: multiline,
	    ref: ref,
	    type: type
	  }, other));
	});
	FilledInput.muiName = 'Input';
	var FilledInput$1 = withStyles(styles$13, {
	  name: 'MuiFilledInput'
	})(FilledInput);

	var styles$12 = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'inline-flex',
	    flexDirection: 'column',
	    position: 'relative',
	    // Reset fieldset default style.
	    minWidth: 0,
	    padding: 0,
	    margin: 0,
	    border: 0,
	    verticalAlign: 'top' // Fix alignment issue on Safari.

	  },

	  /* Styles applied to the root element if `margin="normal"`. */
	  marginNormal: {
	    marginTop: 16,
	    marginBottom: 8
	  },

	  /* Styles applied to the root element if `margin="dense"`. */
	  marginDense: {
	    marginTop: 8,
	    marginBottom: 4
	  },

	  /* Styles applied to the root element if `fullWidth={true}`. */
	  fullWidth: {
	    width: '100%'
	  }
	};
	/**
	 * Provides context such as filled/focused/error/required for form inputs.
	 * Relying on the context provides high flexibility and ensures that the state always stays
	 * consistent across the children of the `FormControl`.
	 * This context is used by the following components:
	 *
	 *  - FormLabel
	 *  - FormHelperText
	 *  - Input
	 *  - InputLabel
	 *
	 * You can find one composition example below and more going to [the demos](/components/text-fields/#components).
	 *
	 * ```jsx
	 * <FormControl>
	 *   <InputLabel htmlFor="my-input">Email address</InputLabel>
	 *   <Input id="my-input" aria-describedby="my-helper-text" />
	 *   <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
	 * </FormControl>
	 * ```
	 *
	 * ⚠️Only one input can be used within a FormControl.
	 */

	var FormControl = /*#__PURE__*/react.exports.forwardRef(function FormControl(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'primary' : _props$color,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      _props$error = props.error,
	      error = _props$error === void 0 ? false : _props$error,
	      _props$fullWidth = props.fullWidth,
	      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
	      visuallyFocused = props.focused,
	      _props$hiddenLabel = props.hiddenLabel,
	      hiddenLabel = _props$hiddenLabel === void 0 ? false : _props$hiddenLabel,
	      _props$margin = props.margin,
	      margin = _props$margin === void 0 ? 'none' : _props$margin,
	      _props$required = props.required,
	      required = _props$required === void 0 ? false : _props$required,
	      size = props.size,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'standard' : _props$variant,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "error", "fullWidth", "focused", "hiddenLabel", "margin", "required", "size", "variant"]);

	  var _React$useState = react.exports.useState(function () {
	    // We need to iterate through the children and find the Input in order
	    // to fully support server-side rendering.
	    var initialAdornedStart = false;

	    if (children) {
	      react.exports.Children.forEach(children, function (child) {
	        if (!isMuiElement(child, ['Input', 'Select'])) {
	          return;
	        }

	        var input = isMuiElement(child, ['Select']) ? child.props.input : child;

	        if (input && isAdornedStart(input.props)) {
	          initialAdornedStart = true;
	        }
	      });
	    }

	    return initialAdornedStart;
	  }),
	      adornedStart = _React$useState[0],
	      setAdornedStart = _React$useState[1];

	  var _React$useState2 = react.exports.useState(function () {
	    // We need to iterate through the children and find the Input in order
	    // to fully support server-side rendering.
	    var initialFilled = false;

	    if (children) {
	      react.exports.Children.forEach(children, function (child) {
	        if (!isMuiElement(child, ['Input', 'Select'])) {
	          return;
	        }

	        if (isFilled(child.props, true)) {
	          initialFilled = true;
	        }
	      });
	    }

	    return initialFilled;
	  }),
	      filled = _React$useState2[0],
	      setFilled = _React$useState2[1];

	  var _React$useState3 = react.exports.useState(false),
	      _focused = _React$useState3[0],
	      setFocused = _React$useState3[1];

	  var focused = visuallyFocused !== undefined ? visuallyFocused : _focused;

	  if (disabled && focused) {
	    setFocused(false);
	  }

	  var registerEffect;

	  var onFilled = react.exports.useCallback(function () {
	    setFilled(true);
	  }, []);
	  var onEmpty = react.exports.useCallback(function () {
	    setFilled(false);
	  }, []);
	  var childContext = {
	    adornedStart: adornedStart,
	    setAdornedStart: setAdornedStart,
	    color: color,
	    disabled: disabled,
	    error: error,
	    filled: filled,
	    focused: focused,
	    fullWidth: fullWidth,
	    hiddenLabel: hiddenLabel,
	    margin: (size === 'small' ? 'dense' : undefined) || margin,
	    onBlur: function onBlur() {
	      setFocused(false);
	    },
	    onEmpty: onEmpty,
	    onFilled: onFilled,
	    onFocus: function onFocus() {
	      setFocused(true);
	    },
	    registerEffect: registerEffect,
	    required: required,
	    variant: variant
	  };
	  return /*#__PURE__*/react.exports.createElement(FormControlContext.Provider, {
	    value: childContext
	  }, /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className, margin !== 'none' && classes["margin".concat(capitalize(margin))], fullWidth && classes.fullWidth),
	    ref: ref
	  }, other), children));
	});
	var FormControl$1 = withStyles(styles$12, {
	  name: 'MuiFormControl'
	})(FormControl);

	var styles$11 = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'inline-flex',
	      alignItems: 'center',
	      cursor: 'pointer',
	      // For correct alignment with the text.
	      verticalAlign: 'middle',
	      WebkitTapHighlightColor: 'transparent',
	      marginLeft: -11,
	      marginRight: 16,
	      // used for row presentation of radio/checkbox
	      '&$disabled': {
	        cursor: 'default'
	      }
	    },

	    /* Styles applied to the root element if `labelPlacement="start"`. */
	    labelPlacementStart: {
	      flexDirection: 'row-reverse',
	      marginLeft: 16,
	      // used for row presentation of radio/checkbox
	      marginRight: -11
	    },

	    /* Styles applied to the root element if `labelPlacement="top"`. */
	    labelPlacementTop: {
	      flexDirection: 'column-reverse',
	      marginLeft: 16
	    },

	    /* Styles applied to the root element if `labelPlacement="bottom"`. */
	    labelPlacementBottom: {
	      flexDirection: 'column',
	      marginLeft: 16
	    },

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the label's Typography component. */
	    label: {
	      '&$disabled': {
	        color: theme.palette.text.disabled
	      }
	    }
	  };
	};
	/**
	 * Drop in replacement of the `Radio`, `Switch` and `Checkbox` component.
	 * Use this component if you want to display an extra label.
	 */

	var FormControlLabel = /*#__PURE__*/react.exports.forwardRef(function FormControlLabel(props, ref) {
	  props.checked;
	      var classes = props.classes,
	      className = props.className,
	      control = props.control,
	      disabledProp = props.disabled;
	      props.inputRef;
	      var label = props.label,
	      _props$labelPlacement = props.labelPlacement,
	      labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement;
	      props.name;
	      props.onChange;
	      props.value;
	      var other = _objectWithoutProperties(props, ["checked", "classes", "className", "control", "disabled", "inputRef", "label", "labelPlacement", "name", "onChange", "value"]);

	  var muiFormControl = useFormControl();
	  var disabled = disabledProp;

	  if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
	    disabled = control.props.disabled;
	  }

	  if (typeof disabled === 'undefined' && muiFormControl) {
	    disabled = muiFormControl.disabled;
	  }

	  var controlProps = {
	    disabled: disabled
	  };
	  ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(function (key) {
	    if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
	      controlProps[key] = props[key];
	    }
	  });
	  return /*#__PURE__*/react.exports.createElement("label", _extends$5({
	    className: clsx(classes.root, className, labelPlacement !== 'end' && classes["labelPlacement".concat(capitalize(labelPlacement))], disabled && classes.disabled),
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.cloneElement(control, controlProps), /*#__PURE__*/react.exports.createElement(Typography$1, {
	    component: "span",
	    className: clsx(classes.label, disabled && classes.disabled)
	  }, label));
	});
	var FormControlLabel$1 = withStyles(styles$11, {
	  name: 'MuiFormControlLabel'
	})(FormControlLabel);

	var styles$10 = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'flex',
	    flexDirection: 'column',
	    flexWrap: 'wrap'
	  },

	  /* Styles applied to the root element if `row={true}`. */
	  row: {
	    flexDirection: 'row'
	  }
	};
	/**
	 * `FormGroup` wraps controls such as `Checkbox` and `Switch`.
	 * It provides compact row layout.
	 * For the `Radio`, you should be using the `RadioGroup` component instead of this one.
	 */

	var FormGroup = /*#__PURE__*/react.exports.forwardRef(function FormGroup(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$row = props.row,
	      row = _props$row === void 0 ? false : _props$row,
	      other = _objectWithoutProperties(props, ["classes", "className", "row"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, row && classes.row),
	    ref: ref
	  }, other));
	});
	withStyles(styles$10, {
	  name: 'MuiFormGroup'
	})(FormGroup);

	var styles$$ = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: _extends$5({
	      color: theme.palette.text.secondary
	    }, theme.typography.caption, {
	      textAlign: 'left',
	      marginTop: 3,
	      margin: 0,
	      '&$disabled': {
	        color: theme.palette.text.disabled
	      },
	      '&$error': {
	        color: theme.palette.error.main
	      }
	    }),

	    /* Pseudo-class applied to the root element if `error={true}`. */
	    error: {},

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the root element if `margin="dense"`. */
	    marginDense: {
	      marginTop: 4
	    },

	    /* Styles applied to the root element if `variant="filled"` or `variant="outlined"`. */
	    contained: {
	      marginLeft: 14,
	      marginRight: 14
	    },

	    /* Pseudo-class applied to the root element if `focused={true}`. */
	    focused: {},

	    /* Pseudo-class applied to the root element if `filled={true}`. */
	    filled: {},

	    /* Pseudo-class applied to the root element if `required={true}`. */
	    required: {}
	  };
	};
	var FormHelperText = /*#__PURE__*/react.exports.forwardRef(function FormHelperText(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'p' : _props$component;
	      props.disabled;
	      props.error;
	      props.filled;
	      props.focused;
	      props.margin;
	      props.required;
	      props.variant;
	      var other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"]);

	  var muiFormControl = useFormControl();
	  var fcs = formControlState({
	    props: props,
	    muiFormControl: muiFormControl,
	    states: ['variant', 'margin', 'disabled', 'error', 'filled', 'focused', 'required']
	  });
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, (fcs.variant === 'filled' || fcs.variant === 'outlined') && classes.contained, className, fcs.disabled && classes.disabled, fcs.error && classes.error, fcs.filled && classes.filled, fcs.focused && classes.focused, fcs.required && classes.required, fcs.margin === 'dense' && classes.marginDense),
	    ref: ref
	  }, other), children === ' ' ?
	  /*#__PURE__*/
	  // eslint-disable-next-line react/no-danger
	  react.exports.createElement("span", {
	    dangerouslySetInnerHTML: {
	      __html: '&#8203;'
	    }
	  }) : children);
	});
	var FormHelperText$1 = withStyles(styles$$, {
	  name: 'MuiFormHelperText'
	})(FormHelperText);

	var styles$_ = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: _extends$5({
	      color: theme.palette.text.secondary
	    }, theme.typography.body1, {
	      lineHeight: 1,
	      padding: 0,
	      '&$focused': {
	        color: theme.palette.primary.main
	      },
	      '&$disabled': {
	        color: theme.palette.text.disabled
	      },
	      '&$error': {
	        color: theme.palette.error.main
	      }
	    }),

	    /* Styles applied to the root element if the color is secondary. */
	    colorSecondary: {
	      '&$focused': {
	        color: theme.palette.secondary.main
	      }
	    },

	    /* Pseudo-class applied to the root element if `focused={true}`. */
	    focused: {},

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Pseudo-class applied to the root element if `error={true}`. */
	    error: {},

	    /* Pseudo-class applied to the root element if `filled={true}`. */
	    filled: {},

	    /* Pseudo-class applied to the root element if `required={true}`. */
	    required: {},

	    /* Styles applied to the asterisk element. */
	    asterisk: {
	      '&$error': {
	        color: theme.palette.error.main
	      }
	    }
	  };
	};
	var FormLabel = /*#__PURE__*/react.exports.forwardRef(function FormLabel(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className;
	      props.color;
	      var _props$component = props.component,
	      Component = _props$component === void 0 ? 'label' : _props$component;
	      props.disabled;
	      props.error;
	      props.filled;
	      props.focused;
	      props.required;
	      var other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "error", "filled", "focused", "required"]);

	  var muiFormControl = useFormControl();
	  var fcs = formControlState({
	    props: props,
	    muiFormControl: muiFormControl,
	    states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
	  });
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, classes["color".concat(capitalize(fcs.color || 'primary'))], className, fcs.disabled && classes.disabled, fcs.error && classes.error, fcs.filled && classes.filled, fcs.focused && classes.focused, fcs.required && classes.required),
	    ref: ref
	  }, other), children, fcs.required && /*#__PURE__*/react.exports.createElement("span", {
	    "aria-hidden": true,
	    className: clsx(classes.asterisk, fcs.error && classes.error)
	  }, "\u2009", '*'));
	});
	var FormLabel$1 = withStyles(styles$_, {
	  name: 'MuiFormLabel'
	})(FormLabel);

	var SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
	var GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

	function generateGrid(globalStyles, theme, breakpoint) {
	  var styles = {};
	  GRID_SIZES.forEach(function (size) {
	    var key = "grid-".concat(breakpoint, "-").concat(size);

	    if (size === true) {
	      // For the auto layouting
	      styles[key] = {
	        flexBasis: 0,
	        flexGrow: 1,
	        maxWidth: '100%'
	      };
	      return;
	    }

	    if (size === 'auto') {
	      styles[key] = {
	        flexBasis: 'auto',
	        flexGrow: 0,
	        maxWidth: 'none'
	      };
	      return;
	    } // Keep 7 significant numbers.


	    var width = "".concat(Math.round(size / 12 * 10e7) / 10e5, "%"); // Close to the bootstrap implementation:
	    // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41

	    styles[key] = {
	      flexBasis: width,
	      flexGrow: 0,
	      maxWidth: width
	    };
	  }); // No need for a media query for the first size.

	  if (breakpoint === 'xs') {
	    _extends$5(globalStyles, styles);
	  } else {
	    globalStyles[theme.breakpoints.up(breakpoint)] = styles;
	  }
	}

	function getOffset(val) {
	  var div = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
	  var parse = parseFloat(val);
	  return "".concat(parse / div).concat(String(val).replace(String(parse), '') || 'px');
	}

	function generateGutter(theme, breakpoint) {
	  var styles = {};
	  SPACINGS.forEach(function (spacing) {
	    var themeSpacing = theme.spacing(spacing);

	    if (themeSpacing === 0) {
	      return;
	    }

	    styles["spacing-".concat(breakpoint, "-").concat(spacing)] = {
	      margin: "-".concat(getOffset(themeSpacing, 2)),
	      width: "calc(100% + ".concat(getOffset(themeSpacing), ")"),
	      '& > $item': {
	        padding: getOffset(themeSpacing, 2)
	      }
	    };
	  });
	  return styles;
	} // Default CSS values
	// flex: '0 1 auto',
	// flexDirection: 'row',
	// alignItems: 'flex-start',
	// flexWrap: 'nowrap',
	// justifyContent: 'flex-start',


	var styles$Z = function styles(theme) {
	  return _extends$5({
	    /* Styles applied to the root element. */
	    root: {},

	    /* Styles applied to the root element if `container={true}`. */
	    container: {
	      boxSizing: 'border-box',
	      display: 'flex',
	      flexWrap: 'wrap',
	      width: '100%'
	    },

	    /* Styles applied to the root element if `item={true}`. */
	    item: {
	      boxSizing: 'border-box',
	      margin: '0' // For instance, it's useful when used with a `figure` element.

	    },

	    /* Styles applied to the root element if `zeroMinWidth={true}`. */
	    zeroMinWidth: {
	      minWidth: 0
	    },

	    /* Styles applied to the root element if `direction="column"`. */
	    'direction-xs-column': {
	      flexDirection: 'column'
	    },

	    /* Styles applied to the root element if `direction="column-reverse"`. */
	    'direction-xs-column-reverse': {
	      flexDirection: 'column-reverse'
	    },

	    /* Styles applied to the root element if `direction="row-reverse"`. */
	    'direction-xs-row-reverse': {
	      flexDirection: 'row-reverse'
	    },

	    /* Styles applied to the root element if `wrap="nowrap"`. */
	    'wrap-xs-nowrap': {
	      flexWrap: 'nowrap'
	    },

	    /* Styles applied to the root element if `wrap="reverse"`. */
	    'wrap-xs-wrap-reverse': {
	      flexWrap: 'wrap-reverse'
	    },

	    /* Styles applied to the root element if `alignItems="center"`. */
	    'align-items-xs-center': {
	      alignItems: 'center'
	    },

	    /* Styles applied to the root element if `alignItems="flex-start"`. */
	    'align-items-xs-flex-start': {
	      alignItems: 'flex-start'
	    },

	    /* Styles applied to the root element if `alignItems="flex-end"`. */
	    'align-items-xs-flex-end': {
	      alignItems: 'flex-end'
	    },

	    /* Styles applied to the root element if `alignItems="baseline"`. */
	    'align-items-xs-baseline': {
	      alignItems: 'baseline'
	    },

	    /* Styles applied to the root element if `alignContent="center"`. */
	    'align-content-xs-center': {
	      alignContent: 'center'
	    },

	    /* Styles applied to the root element if `alignContent="flex-start"`. */
	    'align-content-xs-flex-start': {
	      alignContent: 'flex-start'
	    },

	    /* Styles applied to the root element if `alignContent="flex-end"`. */
	    'align-content-xs-flex-end': {
	      alignContent: 'flex-end'
	    },

	    /* Styles applied to the root element if `alignContent="space-between"`. */
	    'align-content-xs-space-between': {
	      alignContent: 'space-between'
	    },

	    /* Styles applied to the root element if `alignContent="space-around"`. */
	    'align-content-xs-space-around': {
	      alignContent: 'space-around'
	    },

	    /* Styles applied to the root element if `justifyContent="center"`. */
	    'justify-content-xs-center': {
	      justifyContent: 'center'
	    },

	    /* Styles applied to the root element if `justifyContent="flex-end"`. */
	    'justify-content-xs-flex-end': {
	      justifyContent: 'flex-end'
	    },

	    /* Styles applied to the root element if `justifyContent="space-between"`. */
	    'justify-content-xs-space-between': {
	      justifyContent: 'space-between'
	    },

	    /* Styles applied to the root element if `justifyContent="space-around"`. */
	    'justify-content-xs-space-around': {
	      justifyContent: 'space-around'
	    },

	    /* Styles applied to the root element if `justifyContent="space-evenly"`. */
	    'justify-content-xs-space-evenly': {
	      justifyContent: 'space-evenly'
	    }
	  }, generateGutter(theme, 'xs'), theme.breakpoints.keys.reduce(function (accumulator, key) {
	    // Use side effect over immutability for better performance.
	    generateGrid(accumulator, theme, key);
	    return accumulator;
	  }, {}));
	};
	var Grid = /*#__PURE__*/react.exports.forwardRef(function Grid(props, ref) {
	  var _props$alignContent = props.alignContent,
	      alignContent = _props$alignContent === void 0 ? 'stretch' : _props$alignContent,
	      _props$alignItems = props.alignItems,
	      alignItems = _props$alignItems === void 0 ? 'stretch' : _props$alignItems,
	      classes = props.classes,
	      classNameProp = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      _props$container = props.container,
	      container = _props$container === void 0 ? false : _props$container,
	      _props$direction = props.direction,
	      direction = _props$direction === void 0 ? 'row' : _props$direction,
	      _props$item = props.item,
	      item = _props$item === void 0 ? false : _props$item,
	      justify = props.justify,
	      _props$justifyContent = props.justifyContent,
	      justifyContent = _props$justifyContent === void 0 ? 'flex-start' : _props$justifyContent,
	      _props$lg = props.lg,
	      lg = _props$lg === void 0 ? false : _props$lg,
	      _props$md = props.md,
	      md = _props$md === void 0 ? false : _props$md,
	      _props$sm = props.sm,
	      sm = _props$sm === void 0 ? false : _props$sm,
	      _props$spacing = props.spacing,
	      spacing = _props$spacing === void 0 ? 0 : _props$spacing,
	      _props$wrap = props.wrap,
	      wrap = _props$wrap === void 0 ? 'wrap' : _props$wrap,
	      _props$xl = props.xl,
	      xl = _props$xl === void 0 ? false : _props$xl,
	      _props$xs = props.xs,
	      xs = _props$xs === void 0 ? false : _props$xs,
	      _props$zeroMinWidth = props.zeroMinWidth,
	      zeroMinWidth = _props$zeroMinWidth === void 0 ? false : _props$zeroMinWidth,
	      other = _objectWithoutProperties(props, ["alignContent", "alignItems", "classes", "className", "component", "container", "direction", "item", "justify", "justifyContent", "lg", "md", "sm", "spacing", "wrap", "xl", "xs", "zeroMinWidth"]);

	  var className = clsx(classes.root, classNameProp, container && [classes.container, spacing !== 0 && classes["spacing-xs-".concat(String(spacing))]], item && classes.item, zeroMinWidth && classes.zeroMinWidth, direction !== 'row' && classes["direction-xs-".concat(String(direction))], wrap !== 'wrap' && classes["wrap-xs-".concat(String(wrap))], alignItems !== 'stretch' && classes["align-items-xs-".concat(String(alignItems))], alignContent !== 'stretch' && classes["align-content-xs-".concat(String(alignContent))], (justify || justifyContent) !== 'flex-start' && classes["justify-content-xs-".concat(String(justify || justifyContent))], xs !== false && classes["grid-xs-".concat(String(xs))], sm !== false && classes["grid-sm-".concat(String(sm))], md !== false && classes["grid-md-".concat(String(md))], lg !== false && classes["grid-lg-".concat(String(lg))], xl !== false && classes["grid-xl-".concat(String(xl))]);
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: className,
	    ref: ref
	  }, other));
	});
	var StyledGrid = withStyles(styles$Z, {
	  name: 'MuiGrid'
	})(Grid);

	var styles$Y = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'flex',
	    flexWrap: 'wrap',
	    overflowY: 'auto',
	    listStyle: 'none',
	    padding: 0,
	    WebkitOverflowScrolling: 'touch' // Add iOS momentum scrolling.

	  }
	};
	/**
	 * ⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming.
	 *
	 * You should use `import { ImageList } from '@material-ui/core'`
	 * or `import ImageList from '@material-ui/core/ImageList'`.
	 */

	var GridList = /*#__PURE__*/react.exports.forwardRef(function GridList(props, ref) {

	  var _props$cellHeight = props.cellHeight,
	      cellHeight = _props$cellHeight === void 0 ? 180 : _props$cellHeight,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$cols = props.cols,
	      cols = _props$cols === void 0 ? 2 : _props$cols,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'ul' : _props$component,
	      _props$spacing = props.spacing,
	      spacing = _props$spacing === void 0 ? 4 : _props$spacing,
	      style = props.style,
	      other = _objectWithoutProperties(props, ["cellHeight", "children", "classes", "className", "cols", "component", "spacing", "style"]);

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref,
	    style: _extends$5({
	      margin: -spacing / 2
	    }, style)
	  }, other), react.exports.Children.map(children, function (child) {
	    if (! /*#__PURE__*/react.exports.isValidElement(child)) {
	      return null;
	    }

	    var childCols = child.props.cols || 1;
	    var childRows = child.props.rows || 1;
	    return /*#__PURE__*/react.exports.cloneElement(child, {
	      style: _extends$5({
	        width: "".concat(100 / cols * childCols, "%"),
	        height: cellHeight === 'auto' ? 'auto' : cellHeight * childRows + spacing,
	        padding: spacing / 2
	      }, child.props.style)
	    });
	  }));
	});
	withStyles(styles$Y, {
	  name: 'MuiGridList'
	})(GridList);

	var styles$X = {
	  /* Styles applied to the root element. */
	  root: {
	    boxSizing: 'border-box',
	    flexShrink: 0
	  },

	  /* Styles applied to the `div` element that wraps the children. */
	  tile: {
	    position: 'relative',
	    display: 'block',
	    // In case it's not rendered with a div.
	    height: '100%',
	    overflow: 'hidden'
	  },

	  /* Styles applied to an `img` element child, if needed to ensure it covers the tile. */
	  imgFullHeight: {
	    height: '100%',
	    transform: 'translateX(-50%)',
	    position: 'relative',
	    left: '50%'
	  },

	  /* Styles applied to an `img` element child, if needed to ensure it covers the tile. */
	  imgFullWidth: {
	    width: '100%',
	    position: 'relative',
	    transform: 'translateY(-50%)',
	    top: '50%'
	  }
	};

	var fit$1 = function fit(imgEl, classes) {
	  if (!imgEl || !imgEl.complete) {
	    return;
	  }

	  if (imgEl.width / imgEl.height > imgEl.parentElement.offsetWidth / imgEl.parentElement.offsetHeight) {
	    var _imgEl$classList, _imgEl$classList2;

	    (_imgEl$classList = imgEl.classList).remove.apply(_imgEl$classList, _toConsumableArray(classes.imgFullWidth.split(' ')));

	    (_imgEl$classList2 = imgEl.classList).add.apply(_imgEl$classList2, _toConsumableArray(classes.imgFullHeight.split(' ')));
	  } else {
	    var _imgEl$classList3, _imgEl$classList4;

	    (_imgEl$classList3 = imgEl.classList).remove.apply(_imgEl$classList3, _toConsumableArray(classes.imgFullHeight.split(' ')));

	    (_imgEl$classList4 = imgEl.classList).add.apply(_imgEl$classList4, _toConsumableArray(classes.imgFullWidth.split(' ')));
	  }
	};

	function ensureImageCover$1(imgEl, classes) {
	  if (!imgEl) {
	    return;
	  }

	  if (imgEl.complete) {
	    fit$1(imgEl, classes);
	  } else {
	    imgEl.addEventListener('load', function () {
	      fit$1(imgEl, classes);
	    });
	  }
	}
	/**
	 * ⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming.
	 *
	 * You should use `import { ImageListItem } from '@material-ui/core'`
	 * or `import ImageListItem from '@material-ui/core/ImageListItem'`.
	 */

	var GridListTile = /*#__PURE__*/react.exports.forwardRef(function GridListTile(props, ref) {


	  var children = props.children,
	      classes = props.classes,
	      className = props.className;
	      props.cols;
	      var _props$component = props.component,
	      Component = _props$component === void 0 ? 'li' : _props$component;
	      props.rows;
	      var other = _objectWithoutProperties(props, ["children", "classes", "className", "cols", "component", "rows"]);

	  var imgRef = react.exports.useRef(null);
	  react.exports.useEffect(function () {
	    ensureImageCover$1(imgRef.current, classes);
	  });
	  react.exports.useEffect(function () {
	    var handleResize = debounce$1(function () {
	      fit$1(imgRef.current, classes);
	    });
	    window.addEventListener('resize', handleResize);
	    return function () {
	      handleResize.clear();
	      window.removeEventListener('resize', handleResize);
	    };
	  }, [classes]);
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.tile
	  }, react.exports.Children.map(children, function (child) {
	    if (! /*#__PURE__*/react.exports.isValidElement(child)) {
	      return null;
	    }

	    if (child.type === 'img' || isMuiElement(child, ['Image'])) {
	      return /*#__PURE__*/react.exports.cloneElement(child, {
	        ref: imgRef
	      });
	    }

	    return child;
	  })));
	});
	withStyles(styles$X, {
	  name: 'MuiGridListTile'
	})(GridListTile);

	var styles$W = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'absolute',
	      left: 0,
	      right: 0,
	      height: 48,
	      background: 'rgba(0, 0, 0, 0.5)',
	      display: 'flex',
	      alignItems: 'center',
	      fontFamily: theme.typography.fontFamily
	    },

	    /* Styles applied to the root element if `titlePosition="bottom"`. */
	    titlePositionBottom: {
	      bottom: 0
	    },

	    /* Styles applied to the root element if `titlePosition="top"`. */
	    titlePositionTop: {
	      top: 0
	    },

	    /* Styles applied to the root element if a `subtitle` is provided. */
	    rootSubtitle: {
	      height: 68
	    },

	    /* Styles applied to the title and subtitle container element. */
	    titleWrap: {
	      flexGrow: 1,
	      marginLeft: 16,
	      marginRight: 16,
	      color: theme.palette.common.white,
	      overflow: 'hidden'
	    },

	    /* Styles applied to the container element if `actionPosition="left"`. */
	    titleWrapActionPosLeft: {
	      marginLeft: 0
	    },

	    /* Styles applied to the container element if `actionPosition="right"`. */
	    titleWrapActionPosRight: {
	      marginRight: 0
	    },

	    /* Styles applied to the title container element. */
	    title: {
	      fontSize: theme.typography.pxToRem(16),
	      lineHeight: '24px',
	      textOverflow: 'ellipsis',
	      overflow: 'hidden',
	      whiteSpace: 'nowrap'
	    },

	    /* Styles applied to the subtitle container element. */
	    subtitle: {
	      fontSize: theme.typography.pxToRem(12),
	      lineHeight: 1,
	      textOverflow: 'ellipsis',
	      overflow: 'hidden',
	      whiteSpace: 'nowrap'
	    },

	    /* Styles applied to the actionIcon if supplied. */
	    actionIcon: {},

	    /* Styles applied to the actionIcon if `actionPosition="left"`. */
	    actionIconActionPosLeft: {
	      order: -1
	    }
	  };
	};
	/**
	 * ⚠️ The GridListTileBar component was renamed to ImageListItemBar to align with the current Material Design naming.
	 *
	 * You should use `import { ImageListItemBar } from '@material-ui/core'`
	 * or `import ImageListItemBar from '@material-ui/core/ImageListItemBar'`.
	 */

	var GridListTileBar = /*#__PURE__*/react.exports.forwardRef(function GridListTileBar(props, ref) {

	  var actionIcon = props.actionIcon,
	      _props$actionPosition = props.actionPosition,
	      actionPosition = _props$actionPosition === void 0 ? 'right' : _props$actionPosition,
	      classes = props.classes,
	      className = props.className,
	      subtitle = props.subtitle,
	      title = props.title,
	      _props$titlePosition = props.titlePosition,
	      titlePosition = _props$titlePosition === void 0 ? 'bottom' : _props$titlePosition,
	      other = _objectWithoutProperties(props, ["actionIcon", "actionPosition", "classes", "className", "subtitle", "title", "titlePosition"]);

	  var actionPos = actionIcon && actionPosition;
	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, titlePosition === 'top' ? classes.titlePositionTop : classes.titlePositionBottom, subtitle && classes.rootSubtitle),
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.titleWrap, {
	      'left': classes.titleWrapActionPosLeft,
	      'right': classes.titleWrapActionPosRight
	    }[actionPos])
	  }, /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.title
	  }, title), subtitle ? /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.subtitle
	  }, subtitle) : null), actionIcon ? /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.actionIcon, actionPos === 'left' && classes.actionIconActionPosLeft)
	  }, actionIcon) : null);
	});
	withStyles(styles$W, {
	  name: 'MuiGridListTileBar'
	})(GridListTileBar);

	function getScale(value) {
	  return "scale(".concat(value, ", ").concat(Math.pow(value, 2), ")");
	}

	var styles$V = {
	  entering: {
	    opacity: 1,
	    transform: getScale(1)
	  },
	  entered: {
	    opacity: 1,
	    transform: 'none'
	  }
	};
	/**
	 * The Grow transition is used by the [Tooltip](/components/tooltips/) and
	 * [Popover](/components/popover/) components.
	 * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
	 */

	var Grow = /*#__PURE__*/react.exports.forwardRef(function Grow(props, ref) {
	  var children = props.children,
	      _props$disableStrictM = props.disableStrictModeCompat,
	      disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,
	      inProp = props.in,
	      onEnter = props.onEnter,
	      onEntered = props.onEntered,
	      onEntering = props.onEntering,
	      onExit = props.onExit,
	      onExited = props.onExited,
	      onExiting = props.onExiting,
	      style = props.style,
	      _props$timeout = props.timeout,
	      timeout = _props$timeout === void 0 ? 'auto' : _props$timeout,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
	      other = _objectWithoutProperties(props, ["children", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);

	  var timer = react.exports.useRef();
	  var autoTimeout = react.exports.useRef();
	  var theme = useTheme$1();
	  var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
	  var nodeRef = react.exports.useRef(null);
	  var foreignRef = useForkRef(children.ref, ref);
	  var handleRef = useForkRef(enableStrictModeCompat ? nodeRef : undefined, foreignRef);

	  var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
	    return function (nodeOrAppearing, maybeAppearing) {
	      if (callback) {
	        var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],
	            _ref2 = _slicedToArray(_ref, 2),
	            node = _ref2[0],
	            isAppearing = _ref2[1]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.


	        if (isAppearing === undefined) {
	          callback(node);
	        } else {
	          callback(node, isAppearing);
	        }
	      }
	    };
	  };

	  var handleEntering = normalizedTransitionCallback(onEntering);
	  var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
	    reflow(node); // So the animation always start from the start.

	    var _getTransitionProps = getTransitionProps({
	      style: style,
	      timeout: timeout
	    }, {
	      mode: 'enter'
	    }),
	        transitionDuration = _getTransitionProps.duration,
	        delay = _getTransitionProps.delay;

	    var duration;

	    if (timeout === 'auto') {
	      duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
	      autoTimeout.current = duration;
	    } else {
	      duration = transitionDuration;
	    }

	    node.style.transition = [theme.transitions.create('opacity', {
	      duration: duration,
	      delay: delay
	    }), theme.transitions.create('transform', {
	      duration: duration * 0.666,
	      delay: delay
	    })].join(',');

	    if (onEnter) {
	      onEnter(node, isAppearing);
	    }
	  });
	  var handleEntered = normalizedTransitionCallback(onEntered);
	  var handleExiting = normalizedTransitionCallback(onExiting);
	  var handleExit = normalizedTransitionCallback(function (node) {
	    var _getTransitionProps2 = getTransitionProps({
	      style: style,
	      timeout: timeout
	    }, {
	      mode: 'exit'
	    }),
	        transitionDuration = _getTransitionProps2.duration,
	        delay = _getTransitionProps2.delay;

	    var duration;

	    if (timeout === 'auto') {
	      duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
	      autoTimeout.current = duration;
	    } else {
	      duration = transitionDuration;
	    }

	    node.style.transition = [theme.transitions.create('opacity', {
	      duration: duration,
	      delay: delay
	    }), theme.transitions.create('transform', {
	      duration: duration * 0.666,
	      delay: delay || duration * 0.333
	    })].join(',');
	    node.style.opacity = '0';
	    node.style.transform = getScale(0.75);

	    if (onExit) {
	      onExit(node);
	    }
	  });
	  var handleExited = normalizedTransitionCallback(onExited);

	  var addEndListener = function addEndListener(nodeOrNext, maybeNext) {
	    var next = enableStrictModeCompat ? nodeOrNext : maybeNext;

	    if (timeout === 'auto') {
	      timer.current = setTimeout(next, autoTimeout.current || 0);
	    }
	  };

	  react.exports.useEffect(function () {
	    return function () {
	      clearTimeout(timer.current);
	    };
	  }, []);
	  return /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    appear: true,
	    in: inProp,
	    nodeRef: enableStrictModeCompat ? nodeRef : undefined,
	    onEnter: handleEnter,
	    onEntered: handleEntered,
	    onEntering: handleEntering,
	    onExit: handleExit,
	    onExited: handleExited,
	    onExiting: handleExiting,
	    addEndListener: addEndListener,
	    timeout: timeout === 'auto' ? null : timeout
	  }, other), function (state, childProps) {
	    return /*#__PURE__*/react.exports.cloneElement(children, _extends$5({
	      style: _extends$5({
	        opacity: 0,
	        transform: getScale(0.75),
	        visibility: state === 'exited' && !inProp ? 'hidden' : undefined
	      }, styles$V[state], style, children.props.style),
	      ref: handleRef
	    }, childProps));
	  });
	});
	Grow.muiSupportAuto = true;

	function useMediaQuery(queryInput) {
	  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
	  var theme = useTheme$2();
	  var props = getThemeProps({
	    theme: theme,
	    name: 'MuiUseMediaQuery',
	    props: {}
	  });

	  var query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
	  query = query.replace(/^@media( ?)/m, ''); // Wait for jsdom to support the match media feature.
	  // All the browsers Material-UI support have this built-in.
	  // This defensive check is here for simplicity.
	  // Most of the time, the match media logic isn't central to people tests.

	  var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';

	  var _props$options = _extends$5({}, props, options),
	      _props$options$defaul = _props$options.defaultMatches,
	      defaultMatches = _props$options$defaul === void 0 ? false : _props$options$defaul,
	      _props$options$matchM = _props$options.matchMedia,
	      matchMedia = _props$options$matchM === void 0 ? supportMatchMedia ? window.matchMedia : null : _props$options$matchM,
	      _props$options$noSsr = _props$options.noSsr,
	      noSsr = _props$options$noSsr === void 0 ? false : _props$options$noSsr,
	      _props$options$ssrMat = _props$options.ssrMatchMedia,
	      ssrMatchMedia = _props$options$ssrMat === void 0 ? null : _props$options$ssrMat;

	  var _React$useState = react.exports.useState(function () {
	    if (noSsr && supportMatchMedia) {
	      return matchMedia(query).matches;
	    }

	    if (ssrMatchMedia) {
	      return ssrMatchMedia(query).matches;
	    } // Once the component is mounted, we rely on the
	    // event listeners to return the correct matches value.


	    return defaultMatches;
	  }),
	      match = _React$useState[0],
	      setMatch = _React$useState[1];

	  react.exports.useEffect(function () {
	    var active = true;

	    if (!supportMatchMedia) {
	      return undefined;
	    }

	    var queryList = matchMedia(query);

	    var updateMatch = function updateMatch() {
	      // Workaround Safari wrong implementation of matchMedia
	      // TODO can we remove it?
	      // https://github.com/mui-org/material-ui/pull/17315#issuecomment-528286677
	      if (active) {
	        setMatch(queryList.matches);
	      }
	    };

	    updateMatch();
	    queryList.addListener(updateMatch);
	    return function () {
	      active = false;
	      queryList.removeListener(updateMatch);
	    };
	  }, [query, matchMedia, supportMatchMedia]);

	  return match;
	}

	var isWidthUp = function isWidthUp(breakpoint, width) {
	  var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

	  if (inclusive) {
	    return keys.indexOf(breakpoint) <= keys.indexOf(width);
	  }

	  return keys.indexOf(breakpoint) < keys.indexOf(width);
	}; // By default, returns true if screen width is the same or less than the given breakpoint.

	var isWidthDown = function isWidthDown(breakpoint, width) {
	  var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

	  if (inclusive) {
	    return keys.indexOf(width) <= keys.indexOf(breakpoint);
	  }

	  return keys.indexOf(width) < keys.indexOf(breakpoint);
	};
	var useEnhancedEffect$3 = typeof window === 'undefined' ? react.exports.useEffect : react.exports.useLayoutEffect;

	var withWidth = function withWidth() {
	  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  return function (Component) {
	    var _options$withTheme = options.withTheme,
	        withThemeOption = _options$withTheme === void 0 ? false : _options$withTheme,
	        _options$noSSR = options.noSSR,
	        noSSR = _options$noSSR === void 0 ? false : _options$noSSR,
	        initialWidthOption = options.initialWidth;

	    function WithWidth(props) {
	      var contextTheme = useTheme$1();
	      var theme = props.theme || contextTheme;

	      var _getThemeProps = getThemeProps({
	        theme: theme,
	        name: 'MuiWithWidth',
	        props: _extends$5({}, props)
	      }),
	          initialWidth = _getThemeProps.initialWidth,
	          width = _getThemeProps.width,
	          other = _objectWithoutProperties(_getThemeProps, ["initialWidth", "width"]);

	      var _React$useState = react.exports.useState(false),
	          mountedState = _React$useState[0],
	          setMountedState = _React$useState[1];

	      useEnhancedEffect$3(function () {
	        setMountedState(true);
	      }, []);
	      /**
	       * innerWidth |xs      sm      md      lg      xl
	       *            |-------|-------|-------|-------|------>
	       * width      |  xs   |  sm   |  md   |  lg   |  xl
	       */

	      var keys = theme.breakpoints.keys.slice().reverse();
	      var widthComputed = keys.reduce(function (output, key) {
	        // eslint-disable-next-line react-hooks/rules-of-hooks
	        var matches = useMediaQuery(theme.breakpoints.up(key));
	        return !output && matches ? key : output;
	      }, null);

	      var more = _extends$5({
	        width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption
	      }, withThemeOption ? {
	        theme: theme
	      } : {}, other); // When rendering the component on the server,
	      // we have no idea about the client browser screen width.
	      // In order to prevent blinks and help the reconciliation of the React tree
	      // we are not rendering the child component.
	      //
	      // An alternative is to use the `initialWidth` property.


	      if (more.width === undefined) {
	        return null;
	      }

	      return /*#__PURE__*/react.exports.createElement(Component, more);
	    }

	    hoistNonReactStatics_cjs(WithWidth, Component);
	    return WithWidth;
	  };
	};

	/**
	 * @ignore - internal component.
	 */

	function HiddenJs(props) {
	  var children = props.children,
	      only = props.only,
	      width = props.width;
	  var theme = useTheme$1();
	  var visible = true; // `only` check is faster to get out sooner if used.

	  if (only) {
	    if (Array.isArray(only)) {
	      for (var i = 0; i < only.length; i += 1) {
	        var breakpoint = only[i];

	        if (width === breakpoint) {
	          visible = false;
	          break;
	        }
	      }
	    } else if (only && width === only) {
	      visible = false;
	    }
	  } // Allow `only` to be combined with other props. If already hidden, no need to check others.


	  if (visible) {
	    // determine visibility based on the smallest size up
	    for (var _i = 0; _i < theme.breakpoints.keys.length; _i += 1) {
	      var _breakpoint = theme.breakpoints.keys[_i];
	      var breakpointUp = props["".concat(_breakpoint, "Up")];
	      var breakpointDown = props["".concat(_breakpoint, "Down")];

	      if (breakpointUp && isWidthUp(_breakpoint, width) || breakpointDown && isWidthDown(_breakpoint, width)) {
	        visible = false;
	        break;
	      }
	    }
	  }

	  if (!visible) {
	    return null;
	  }

	  return children;
	}

	HiddenJs.propTypes = {
	  /**
	   * The content of the component.
	   */
	  children: propTypes.exports.node,

	  /**
	   * @ignore
	   */
	  className: propTypes.exports.string,

	  /**
	   * Specify which implementation to use.  'js' is the default, 'css' works better for
	   * server-side rendering.
	   */
	  implementation: propTypes.exports.oneOf(['js', 'css']),

	  /**
	   * You can use this prop when choosing the `js` implementation with server-side rendering.
	   *
	   * As `window.innerWidth` is unavailable on the server,
	   * we default to rendering an empty component during the first mount.
	   * You might want to use an heuristic to approximate
	   * the screen width of the client browser screen width.
	   *
	   * For instance, you could be using the user-agent or the client-hints.
	   * https://caniuse.com/#search=client%20hint
	   */
	  initialWidth: propTypes.exports.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),

	  /**
	   * If `true`, screens this size and down will be hidden.
	   */
	  lgDown: propTypes.exports.bool,

	  /**
	   * If `true`, screens this size and up will be hidden.
	   */
	  lgUp: propTypes.exports.bool,

	  /**
	   * If `true`, screens this size and down will be hidden.
	   */
	  mdDown: propTypes.exports.bool,

	  /**
	   * If `true`, screens this size and up will be hidden.
	   */
	  mdUp: propTypes.exports.bool,

	  /**
	   * Hide the given breakpoint(s).
	   */
	  only: propTypes.exports.oneOfType([propTypes.exports.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), propTypes.exports.arrayOf(propTypes.exports.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),

	  /**
	   * If `true`, screens this size and down will be hidden.
	   */
	  smDown: propTypes.exports.bool,

	  /**
	   * If `true`, screens this size and up will be hidden.
	   */
	  smUp: propTypes.exports.bool,

	  /**
	   * @ignore
	   * width prop provided by withWidth decorator.
	   */
	  width: propTypes.exports.string.isRequired,

	  /**
	   * If `true`, screens this size and down will be hidden.
	   */
	  xlDown: propTypes.exports.bool,

	  /**
	   * If `true`, screens this size and up will be hidden.
	   */
	  xlUp: propTypes.exports.bool,

	  /**
	   * If `true`, screens this size and down will be hidden.
	   */
	  xsDown: propTypes.exports.bool,

	  /**
	   * If `true`, screens this size and up will be hidden.
	   */
	  xsUp: propTypes.exports.bool
	};

	withWidth()(HiddenJs);

	var styles$U = function styles(theme) {
	  var hidden = {
	    display: 'none'
	  };
	  return theme.breakpoints.keys.reduce(function (acc, key) {
	    acc["only".concat(capitalize(key))] = _defineProperty$1({}, theme.breakpoints.only(key), hidden);
	    acc["".concat(key, "Up")] = _defineProperty$1({}, theme.breakpoints.up(key), hidden);
	    acc["".concat(key, "Down")] = _defineProperty$1({}, theme.breakpoints.down(key), hidden);
	    return acc;
	  }, {});
	};
	/**
	 * @ignore - internal component.
	 */


	function HiddenCss(props) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      only = props.only;
	      _objectWithoutProperties(props, ["children", "classes", "className", "only"]);

	  var theme = useTheme$1();

	  var clsx = [];

	  if (className) {
	    clsx.push(className);
	  }

	  for (var i = 0; i < theme.breakpoints.keys.length; i += 1) {
	    var breakpoint = theme.breakpoints.keys[i];
	    var breakpointUp = props["".concat(breakpoint, "Up")];
	    var breakpointDown = props["".concat(breakpoint, "Down")];

	    if (breakpointUp) {
	      clsx.push(classes["".concat(breakpoint, "Up")]);
	    }

	    if (breakpointDown) {
	      clsx.push(classes["".concat(breakpoint, "Down")]);
	    }
	  }

	  if (only) {
	    var onlyBreakpoints = Array.isArray(only) ? only : [only];
	    onlyBreakpoints.forEach(function (breakpoint) {
	      clsx.push(classes["only".concat(capitalize(breakpoint))]);
	    });
	  }

	  return /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx.join(' ')
	  }, children);
	}
	withStyles(styles$U, {
	  name: 'PrivateHiddenCss'
	})(HiddenCss);

	var styles$T = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      userSelect: 'none',
	      fontSize: theme.typography.pxToRem(24),
	      width: '1em',
	      height: '1em',
	      // Chrome fix for https://bugs.chromium.org/p/chromium/issues/detail?id=820541
	      // To remove at some point.
	      overflow: 'hidden',
	      flexShrink: 0
	    },

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {
	      color: theme.palette.primary.main
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    colorSecondary: {
	      color: theme.palette.secondary.main
	    },

	    /* Styles applied to the root element if `color="action"`. */
	    colorAction: {
	      color: theme.palette.action.active
	    },

	    /* Styles applied to the root element if `color="error"`. */
	    colorError: {
	      color: theme.palette.error.main
	    },

	    /* Styles applied to the root element if `color="disabled"`. */
	    colorDisabled: {
	      color: theme.palette.action.disabled
	    },

	    /* Styles applied to the root element if `fontSize="inherit"`. */
	    fontSizeInherit: {
	      fontSize: 'inherit'
	    },

	    /* Styles applied to the root element if `fontSize="small"`. */
	    fontSizeSmall: {
	      fontSize: theme.typography.pxToRem(20)
	    },

	    /* Styles applied to the root element if `fontSize="large"`. */
	    fontSizeLarge: {
	      fontSize: theme.typography.pxToRem(36)
	    }
	  };
	};
	var Icon = /*#__PURE__*/react.exports.forwardRef(function Icon(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'inherit' : _props$color,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'span' : _props$component,
	      _props$fontSize = props.fontSize,
	      fontSize = _props$fontSize === void 0 ? 'medium' : _props$fontSize,
	      other = _objectWithoutProperties(props, ["classes", "className", "color", "component", "fontSize"]);

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx('material-icons', classes.root, className, color !== 'inherit' && classes["color".concat(capitalize(color))], fontSize !== 'default' && fontSize !== 'medium' && classes["fontSize".concat(capitalize(fontSize))]),
	    "aria-hidden": true,
	    ref: ref
	  }, other));
	});
	Icon.muiName = 'Icon';
	var Icon$1 = withStyles(styles$T, {
	  name: 'MuiIcon'
	})(Icon);

	var styles$S = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'flex',
	    flexWrap: 'wrap',
	    overflowY: 'auto',
	    listStyle: 'none',
	    padding: 0,
	    WebkitOverflowScrolling: 'touch' // Add iOS momentum scrolling.

	  }
	};
	var ImageList = /*#__PURE__*/react.exports.forwardRef(function ImageList(props, ref) {
	  var cellHeight = props.cellHeight,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$cols = props.cols,
	      cols = _props$cols === void 0 ? 2 : _props$cols,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'ul' : _props$component,
	      _props$gap = props.gap,
	      gapProp = _props$gap === void 0 ? 4 : _props$gap,
	      _props$rowHeight = props.rowHeight,
	      rowHeightProp = _props$rowHeight === void 0 ? 180 : _props$rowHeight,
	      spacing = props.spacing,
	      style = props.style,
	      other = _objectWithoutProperties(props, ["cellHeight", "children", "classes", "className", "cols", "component", "gap", "rowHeight", "spacing", "style"]);

	  var gap = spacing || gapProp;
	  var rowHeight = cellHeight || rowHeightProp;
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref,
	    style: _extends$5({
	      margin: -gap / 2
	    }, style)
	  }, other), react.exports.Children.map(children, function (child) {
	    if (! /*#__PURE__*/react.exports.isValidElement(child)) {
	      return null;
	    }

	    var childCols = child.props.cols || 1;
	    var childRows = child.props.rows || 1;
	    return /*#__PURE__*/react.exports.cloneElement(child, {
	      style: _extends$5({
	        width: "".concat(100 / cols * childCols, "%"),
	        height: rowHeight === 'auto' ? 'auto' : rowHeight * childRows + gap,
	        padding: gap / 2
	      }, child.props.style)
	    });
	  }));
	});
	withStyles(styles$S, {
	  name: 'MuiImageList'
	})(ImageList);

	var styles$R = {
	  /* Styles applied to the root element. */
	  root: {
	    boxSizing: 'border-box',
	    flexShrink: 0
	  },

	  /* Styles applied to the `div` element that wraps the children. */
	  item: {
	    position: 'relative',
	    display: 'block',
	    // In case it's not rendered with a div.
	    height: '100%',
	    overflow: 'hidden'
	  },

	  /* Styles applied to an `img` element child, if needed to ensure it covers the item. */
	  imgFullHeight: {
	    height: '100%',
	    transform: 'translateX(-50%)',
	    position: 'relative',
	    left: '50%'
	  },

	  /* Styles applied to an `img` element child, if needed to ensure it covers the item. */
	  imgFullWidth: {
	    width: '100%',
	    position: 'relative',
	    transform: 'translateY(-50%)',
	    top: '50%'
	  }
	};

	var fit = function fit(imgEl, classes) {
	  if (!imgEl || !imgEl.complete) {
	    return;
	  }

	  if (imgEl.width / imgEl.height > imgEl.parentElement.offsetWidth / imgEl.parentElement.offsetHeight) {
	    var _imgEl$classList, _imgEl$classList2;

	    (_imgEl$classList = imgEl.classList).remove.apply(_imgEl$classList, _toConsumableArray(classes.imgFullWidth.split(' ')));

	    (_imgEl$classList2 = imgEl.classList).add.apply(_imgEl$classList2, _toConsumableArray(classes.imgFullHeight.split(' ')));
	  } else {
	    var _imgEl$classList3, _imgEl$classList4;

	    (_imgEl$classList3 = imgEl.classList).remove.apply(_imgEl$classList3, _toConsumableArray(classes.imgFullHeight.split(' ')));

	    (_imgEl$classList4 = imgEl.classList).add.apply(_imgEl$classList4, _toConsumableArray(classes.imgFullWidth.split(' ')));
	  }
	};

	function ensureImageCover(imgEl, classes) {
	  if (!imgEl) {
	    return;
	  }

	  if (imgEl.complete) {
	    fit(imgEl, classes);
	  } else {
	    imgEl.addEventListener('load', function () {
	      fit(imgEl, classes);
	    });
	  }
	}

	var ImageListItem = /*#__PURE__*/react.exports.forwardRef(function ImageListItem(props, ref) {
	  // cols rows default values are for docs only
	  var children = props.children,
	      classes = props.classes,
	      className = props.className;
	      props.cols;
	      var _props$component = props.component,
	      Component = _props$component === void 0 ? 'li' : _props$component;
	      props.rows;
	      var other = _objectWithoutProperties(props, ["children", "classes", "className", "cols", "component", "rows"]);

	  var imgRef = react.exports.useRef(null);
	  react.exports.useEffect(function () {
	    ensureImageCover(imgRef.current, classes);
	  });
	  react.exports.useEffect(function () {
	    var handleResize = debounce$1(function () {
	      fit(imgRef.current, classes);
	    });
	    window.addEventListener('resize', handleResize);
	    return function () {
	      handleResize.clear();
	      window.removeEventListener('resize', handleResize);
	    };
	  }, [classes]);
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.item
	  }, react.exports.Children.map(children, function (child) {
	    if (! /*#__PURE__*/react.exports.isValidElement(child)) {
	      return null;
	    }

	    if (child.type === 'img' || isMuiElement(child, ['Image'])) {
	      return /*#__PURE__*/react.exports.cloneElement(child, {
	        ref: imgRef
	      });
	    }

	    return child;
	  })));
	});
	withStyles(styles$R, {
	  name: 'MuiImageListItem'
	})(ImageListItem);

	var styles$Q = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'absolute',
	      left: 0,
	      right: 0,
	      height: 48,
	      background: 'rgba(0, 0, 0, 0.5)',
	      display: 'flex',
	      alignItems: 'center',
	      fontFamily: theme.typography.fontFamily
	    },

	    /* Styles applied to the root element if `position="bottom"`. */
	    positionBottom: {
	      bottom: 0
	    },

	    /* Styles applied to the root element if `position="top"`. */
	    positionTop: {
	      top: 0
	    },

	    /* Styles applied to the root element if a `subtitle` is provided. */
	    rootSubtitle: {
	      height: 68
	    },

	    /* Styles applied to the title and subtitle container element. */
	    titleWrap: {
	      flexGrow: 1,
	      marginLeft: 16,
	      marginRight: 16,
	      color: theme.palette.common.white,
	      overflow: 'hidden'
	    },

	    /* Styles applied to the container element if `actionPosition="left"`. */
	    titleWrapActionPosLeft: {
	      marginLeft: 0
	    },

	    /* Styles applied to the container element if `actionPosition="right"`. */
	    titleWrapActionPosRight: {
	      marginRight: 0
	    },

	    /* Styles applied to the title container element. */
	    title: {
	      fontSize: theme.typography.pxToRem(16),
	      lineHeight: '24px',
	      textOverflow: 'ellipsis',
	      overflow: 'hidden',
	      whiteSpace: 'nowrap'
	    },

	    /* Styles applied to the subtitle container element. */
	    subtitle: {
	      fontSize: theme.typography.pxToRem(12),
	      lineHeight: 1,
	      textOverflow: 'ellipsis',
	      overflow: 'hidden',
	      whiteSpace: 'nowrap'
	    },

	    /* Styles applied to the actionIcon if supplied. */
	    actionIcon: {},

	    /* Styles applied to the actionIcon if `actionPosition="left"`. */
	    actionIconActionPosLeft: {
	      order: -1
	    }
	  };
	};
	var ImageListItemBar = /*#__PURE__*/react.exports.forwardRef(function ImageListItemBar(props, ref) {
	  var actionIcon = props.actionIcon,
	      _props$actionPosition = props.actionPosition,
	      actionPosition = _props$actionPosition === void 0 ? 'right' : _props$actionPosition,
	      classes = props.classes,
	      className = props.className,
	      subtitle = props.subtitle,
	      title = props.title,
	      _props$position = props.position,
	      positionProp = _props$position === void 0 ? 'bottom' : _props$position,
	      titlePosition = props.titlePosition,
	      other = _objectWithoutProperties(props, ["actionIcon", "actionPosition", "classes", "className", "subtitle", "title", "position", "titlePosition"]);

	  var position = titlePosition || positionProp;
	  var actionPos = actionIcon && actionPosition;
	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, subtitle && classes.rootSubtitle, {
	      'bottom': classes.positionBottom,
	      'top': classes.positionTop
	    }[position]),
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.titleWrap, {
	      'left': classes.titleWrapActionPosLeft,
	      'right': classes.titleWrapActionPosRight
	    }[actionPos])
	  }, /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.title
	  }, title), subtitle ? /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.subtitle
	  }, subtitle) : null), actionIcon ? /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.actionIcon, actionPos === 'left' && classes.actionIconActionPosLeft)
	  }, actionIcon) : null);
	});
	withStyles(styles$Q, {
	  name: 'MuiImageListItemBar'
	})(ImageListItemBar);

	var styles$P = function styles(theme) {
	  var light = theme.palette.type === 'light';
	  var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'relative'
	    },

	    /* Styles applied to the root element if the component is a descendant of `FormControl`. */
	    formControl: {
	      'label + &': {
	        marginTop: 16
	      }
	    },

	    /* Styles applied to the root element if the component is focused. */
	    focused: {},

	    /* Styles applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the root element if color secondary. */
	    colorSecondary: {
	      '&$underline:after': {
	        borderBottomColor: theme.palette.secondary.main
	      }
	    },

	    /* Styles applied to the root element if `disableUnderline={false}`. */
	    underline: {
	      '&:after': {
	        borderBottom: "2px solid ".concat(theme.palette.primary.main),
	        left: 0,
	        bottom: 0,
	        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
	        content: '""',
	        position: 'absolute',
	        right: 0,
	        transform: 'scaleX(0)',
	        transition: theme.transitions.create('transform', {
	          duration: theme.transitions.duration.shorter,
	          easing: theme.transitions.easing.easeOut
	        }),
	        pointerEvents: 'none' // Transparent to the hover style.

	      },
	      '&$focused:after': {
	        transform: 'scaleX(1)'
	      },
	      '&$error:after': {
	        borderBottomColor: theme.palette.error.main,
	        transform: 'scaleX(1)' // error is always underlined in red

	      },
	      '&:before': {
	        borderBottom: "1px solid ".concat(bottomLineColor),
	        left: 0,
	        bottom: 0,
	        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
	        content: '"\\00a0"',
	        position: 'absolute',
	        right: 0,
	        transition: theme.transitions.create('border-bottom-color', {
	          duration: theme.transitions.duration.shorter
	        }),
	        pointerEvents: 'none' // Transparent to the hover style.

	      },
	      '&:hover:not($disabled):before': {
	        borderBottom: "2px solid ".concat(theme.palette.text.primary),
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          borderBottom: "1px solid ".concat(bottomLineColor)
	        }
	      },
	      '&$disabled:before': {
	        borderBottomStyle: 'dotted'
	      }
	    },

	    /* Pseudo-class applied to the root element if `error={true}`. */
	    error: {},

	    /* Styles applied to the `input` element if `margin="dense"`. */
	    marginDense: {},

	    /* Styles applied to the root element if `multiline={true}`. */
	    multiline: {},

	    /* Styles applied to the root element if `fullWidth={true}`. */
	    fullWidth: {},

	    /* Styles applied to the `input` element. */
	    input: {},

	    /* Styles applied to the `input` element if `margin="dense"`. */
	    inputMarginDense: {},

	    /* Styles applied to the `input` element if `multiline={true}`. */
	    inputMultiline: {},

	    /* Styles applied to the `input` element if `type="search"`. */
	    inputTypeSearch: {}
	  };
	};
	var Input = /*#__PURE__*/react.exports.forwardRef(function Input(props, ref) {
	  var disableUnderline = props.disableUnderline,
	      classes = props.classes,
	      _props$fullWidth = props.fullWidth,
	      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
	      _props$inputComponent = props.inputComponent,
	      inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
	      _props$multiline = props.multiline,
	      multiline = _props$multiline === void 0 ? false : _props$multiline,
	      _props$type = props.type,
	      type = _props$type === void 0 ? 'text' : _props$type,
	      other = _objectWithoutProperties(props, ["disableUnderline", "classes", "fullWidth", "inputComponent", "multiline", "type"]);

	  return /*#__PURE__*/react.exports.createElement(InputBase$1, _extends$5({
	    classes: _extends$5({}, classes, {
	      root: clsx(classes.root, !disableUnderline && classes.underline),
	      underline: null
	    }),
	    fullWidth: fullWidth,
	    inputComponent: inputComponent,
	    multiline: multiline,
	    ref: ref,
	    type: type
	  }, other));
	});
	Input.muiName = 'Input';
	var Input$1 = withStyles(styles$P, {
	  name: 'MuiInput'
	})(Input);

	var styles$O = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'flex',
	    height: '0.01em',
	    // Fix IE 11 flexbox alignment. To remove at some point.
	    maxHeight: '2em',
	    alignItems: 'center',
	    whiteSpace: 'nowrap'
	  },

	  /* Styles applied to the root element if `variant="filled"`. */
	  filled: {
	    '&$positionStart:not($hiddenLabel)': {
	      marginTop: 16
	    }
	  },

	  /* Styles applied to the root element if `position="start"`. */
	  positionStart: {
	    marginRight: 8
	  },

	  /* Styles applied to the root element if `position="end"`. */
	  positionEnd: {
	    marginLeft: 8
	  },

	  /* Styles applied to the root element if `disablePointerEvents=true`. */
	  disablePointerEvents: {
	    pointerEvents: 'none'
	  },

	  /* Styles applied if the adornment is used inside <FormControl hiddenLabel />. */
	  hiddenLabel: {},

	  /* Styles applied if the adornment is used inside <FormControl margin="dense" />. */
	  marginDense: {}
	};
	var InputAdornment = /*#__PURE__*/react.exports.forwardRef(function InputAdornment(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      _props$disablePointer = props.disablePointerEvents,
	      disablePointerEvents = _props$disablePointer === void 0 ? false : _props$disablePointer,
	      _props$disableTypogra = props.disableTypography,
	      disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
	      position = props.position,
	      variantProp = props.variant,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"]);

	  var muiFormControl = useFormControl$1() || {};
	  var variant = variantProp;

	  if (variantProp && muiFormControl.variant) ;

	  if (muiFormControl && !variant) {
	    variant = muiFormControl.variant;
	  }

	  return /*#__PURE__*/react.exports.createElement(FormControlContext.Provider, {
	    value: null
	  }, /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className, position === 'end' ? classes.positionEnd : classes.positionStart, disablePointerEvents && classes.disablePointerEvents, muiFormControl.hiddenLabel && classes.hiddenLabel, variant === 'filled' && classes.filled, muiFormControl.margin === 'dense' && classes.marginDense),
	    ref: ref
	  }, other), typeof children === 'string' && !disableTypography ? /*#__PURE__*/react.exports.createElement(Typography$1, {
	    color: "textSecondary"
	  }, children) : children));
	});
	var InputAdornment$1 = withStyles(styles$O, {
	  name: 'MuiInputAdornment'
	})(InputAdornment);

	var styles$N = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'block',
	      transformOrigin: 'top left'
	    },

	    /* Pseudo-class applied to the root element if `focused={true}`. */
	    focused: {},

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Pseudo-class applied to the root element if `error={true}`. */
	    error: {},

	    /* Pseudo-class applied to the root element if `required={true}`. */
	    required: {},

	    /* Pseudo-class applied to the asterisk element. */
	    asterisk: {},

	    /* Styles applied to the root element if the component is a descendant of `FormControl`. */
	    formControl: {
	      position: 'absolute',
	      left: 0,
	      top: 0,
	      // slight alteration to spec spacing to match visual spec result
	      transform: 'translate(0, 24px) scale(1)'
	    },

	    /* Styles applied to the root element if `margin="dense"`. */
	    marginDense: {
	      // Compensation for the `Input.inputDense` style.
	      transform: 'translate(0, 21px) scale(1)'
	    },

	    /* Styles applied to the `input` element if `shrink={true}`. */
	    shrink: {
	      transform: 'translate(0, 1.5px) scale(0.75)',
	      transformOrigin: 'top left'
	    },

	    /* Styles applied to the `input` element if `disableAnimation={false}`. */
	    animated: {
	      transition: theme.transitions.create(['color', 'transform'], {
	        duration: theme.transitions.duration.shorter,
	        easing: theme.transitions.easing.easeOut
	      })
	    },

	    /* Styles applied to the root element if `variant="filled"`. */
	    filled: {
	      // Chrome's autofill feature gives the input field a yellow background.
	      // Since the input field is behind the label in the HTML tree,
	      // the input field is drawn last and hides the label with an opaque background color.
	      // zIndex: 1 will raise the label above opaque background-colors of input.
	      zIndex: 1,
	      pointerEvents: 'none',
	      transform: 'translate(12px, 20px) scale(1)',
	      '&$marginDense': {
	        transform: 'translate(12px, 17px) scale(1)'
	      },
	      '&$shrink': {
	        transform: 'translate(12px, 10px) scale(0.75)',
	        '&$marginDense': {
	          transform: 'translate(12px, 7px) scale(0.75)'
	        }
	      }
	    },

	    /* Styles applied to the root element if `variant="outlined"`. */
	    outlined: {
	      // see comment above on filled.zIndex
	      zIndex: 1,
	      pointerEvents: 'none',
	      transform: 'translate(14px, 20px) scale(1)',
	      '&$marginDense': {
	        transform: 'translate(14px, 12px) scale(1)'
	      },
	      '&$shrink': {
	        transform: 'translate(14px, -6px) scale(0.75)'
	      }
	    }
	  };
	};
	var InputLabel = /*#__PURE__*/react.exports.forwardRef(function InputLabel(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$disableAnimati = props.disableAnimation,
	      disableAnimation = _props$disableAnimati === void 0 ? false : _props$disableAnimati;
	      props.margin;
	      var shrinkProp = props.shrink;
	      props.variant;
	      var other = _objectWithoutProperties(props, ["classes", "className", "disableAnimation", "margin", "shrink", "variant"]);

	  var muiFormControl = useFormControl();
	  var shrink = shrinkProp;

	  if (typeof shrink === 'undefined' && muiFormControl) {
	    shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
	  }

	  var fcs = formControlState({
	    props: props,
	    muiFormControl: muiFormControl,
	    states: ['margin', 'variant']
	  });
	  return /*#__PURE__*/react.exports.createElement(FormLabel$1, _extends$5({
	    "data-shrink": shrink,
	    className: clsx(classes.root, className, muiFormControl && classes.formControl, !disableAnimation && classes.animated, shrink && classes.shrink, fcs.margin === 'dense' && classes.marginDense, {
	      'filled': classes.filled,
	      'outlined': classes.outlined
	    }[fcs.variant]),
	    classes: {
	      focused: classes.focused,
	      disabled: classes.disabled,
	      error: classes.error,
	      required: classes.required,
	      asterisk: classes.asterisk
	    },
	    ref: ref
	  }, other));
	});
	var InputLabel$1 = withStyles(styles$N, {
	  name: 'MuiInputLabel'
	})(InputLabel);

	var TRANSITION_DURATION = 4; // seconds

	var styles$M = function styles(theme) {
	  var getColor = function getColor(color) {
	    return theme.palette.type === 'light' ? lighten(color, 0.62) : darken(color, 0.5);
	  };

	  var backgroundPrimary = getColor(theme.palette.primary.main);
	  var backgroundSecondary = getColor(theme.palette.secondary.main);
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'relative',
	      overflow: 'hidden',
	      height: 4,
	      '@media print': {
	        colorAdjust: 'exact'
	      }
	    },

	    /* Styles applied to the root and bar2 element if `color="primary"`; bar2 if `variant="buffer"`. */
	    colorPrimary: {
	      backgroundColor: backgroundPrimary
	    },

	    /* Styles applied to the root and bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`. */
	    colorSecondary: {
	      backgroundColor: backgroundSecondary
	    },

	    /* Styles applied to the root element if `variant="determinate"`. */
	    determinate: {},

	    /* Styles applied to the root element if `variant="indeterminate"`. */
	    indeterminate: {},

	    /* Styles applied to the root element if `variant="buffer"`. */
	    buffer: {
	      backgroundColor: 'transparent'
	    },

	    /* Styles applied to the root element if `variant="query"`. */
	    query: {
	      transform: 'rotate(180deg)'
	    },

	    /* Styles applied to the additional bar element if `variant="buffer"`. */
	    dashed: {
	      position: 'absolute',
	      marginTop: 0,
	      height: '100%',
	      width: '100%',
	      animation: '$buffer 3s infinite linear'
	    },

	    /* Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`. */
	    dashedColorPrimary: {
	      backgroundImage: "radial-gradient(".concat(backgroundPrimary, " 0%, ").concat(backgroundPrimary, " 16%, transparent 42%)"),
	      backgroundSize: '10px 10px',
	      backgroundPosition: '0 -23px'
	    },

	    /* Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. */
	    dashedColorSecondary: {
	      backgroundImage: "radial-gradient(".concat(backgroundSecondary, " 0%, ").concat(backgroundSecondary, " 16%, transparent 42%)"),
	      backgroundSize: '10px 10px',
	      backgroundPosition: '0 -23px'
	    },

	    /* Styles applied to the layered bar1 and bar2 elements. */
	    bar: {
	      width: '100%',
	      position: 'absolute',
	      left: 0,
	      bottom: 0,
	      top: 0,
	      transition: 'transform 0.2s linear',
	      transformOrigin: 'left'
	    },

	    /* Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". */
	    barColorPrimary: {
	      backgroundColor: theme.palette.primary.main
	    },

	    /* Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". */
	    barColorSecondary: {
	      backgroundColor: theme.palette.secondary.main
	    },

	    /* Styles applied to the bar1 element if `variant="indeterminate or query"`. */
	    bar1Indeterminate: {
	      width: 'auto',
	      animation: '$indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite'
	    },

	    /* Styles applied to the bar1 element if `variant="determinate"`. */
	    bar1Determinate: {
	      transition: "transform .".concat(TRANSITION_DURATION, "s linear")
	    },

	    /* Styles applied to the bar1 element if `variant="buffer"`. */
	    bar1Buffer: {
	      zIndex: 1,
	      transition: "transform .".concat(TRANSITION_DURATION, "s linear")
	    },

	    /* Styles applied to the bar2 element if `variant="indeterminate or query"`. */
	    bar2Indeterminate: {
	      width: 'auto',
	      animation: '$indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite'
	    },

	    /* Styles applied to the bar2 element if `variant="buffer"`. */
	    bar2Buffer: {
	      transition: "transform .".concat(TRANSITION_DURATION, "s linear")
	    },
	    // Legends:
	    // || represents the viewport
	    // -  represents a light background
	    // x  represents a dark background
	    '@keyframes indeterminate1': {
	      //  |-----|---x-||-----||-----|
	      '0%': {
	        left: '-35%',
	        right: '100%'
	      },
	      //  |-----|-----||-----||xxxx-|
	      '60%': {
	        left: '100%',
	        right: '-90%'
	      },
	      '100%': {
	        left: '100%',
	        right: '-90%'
	      }
	    },
	    '@keyframes indeterminate2': {
	      //  |xxxxx|xxxxx||-----||-----|
	      '0%': {
	        left: '-200%',
	        right: '100%'
	      },
	      //  |-----|-----||-----||-x----|
	      '60%': {
	        left: '107%',
	        right: '-8%'
	      },
	      '100%': {
	        left: '107%',
	        right: '-8%'
	      }
	    },
	    '@keyframes buffer': {
	      '0%': {
	        opacity: 1,
	        backgroundPosition: '0 -23px'
	      },
	      '50%': {
	        opacity: 0,
	        backgroundPosition: '0 -23px'
	      },
	      '100%': {
	        opacity: 1,
	        backgroundPosition: '-200px -23px'
	      }
	    }
	  };
	};
	/**
	 * ## ARIA
	 *
	 * If the progress bar is describing the loading progress of a particular region of a page,
	 * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
	 * attribute to `true` on that region until it has finished loading.
	 */

	var LinearProgress = /*#__PURE__*/react.exports.forwardRef(function LinearProgress(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'primary' : _props$color,
	      value = props.value,
	      valueBuffer = props.valueBuffer,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'indeterminate' : _props$variant,
	      other = _objectWithoutProperties(props, ["classes", "className", "color", "value", "valueBuffer", "variant"]);

	  var theme = useTheme$1();
	  var rootProps = {};
	  var inlineStyles = {
	    bar1: {},
	    bar2: {}
	  };

	  if (variant === 'determinate' || variant === 'buffer') {
	    if (value !== undefined) {
	      rootProps['aria-valuenow'] = Math.round(value);
	      rootProps['aria-valuemin'] = 0;
	      rootProps['aria-valuemax'] = 100;
	      var transform = value - 100;

	      if (theme.direction === 'rtl') {
	        transform = -transform;
	      }

	      inlineStyles.bar1.transform = "translateX(".concat(transform, "%)");
	    }
	  }

	  if (variant === 'buffer') {
	    if (valueBuffer !== undefined) {
	      var _transform = (valueBuffer || 0) - 100;

	      if (theme.direction === 'rtl') {
	        _transform = -_transform;
	      }

	      inlineStyles.bar2.transform = "translateX(".concat(_transform, "%)");
	    }
	  }

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, classes["color".concat(capitalize(color))], className, {
	      'determinate': classes.determinate,
	      'indeterminate': classes.indeterminate,
	      'buffer': classes.buffer,
	      'query': classes.query
	    }[variant]),
	    role: "progressbar"
	  }, rootProps, {
	    ref: ref
	  }, other), variant === 'buffer' ? /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.dashed, classes["dashedColor".concat(capitalize(color))])
	  }) : null, /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.bar, classes["barColor".concat(capitalize(color))], (variant === 'indeterminate' || variant === 'query') && classes.bar1Indeterminate, {
	      'determinate': classes.bar1Determinate,
	      'buffer': classes.bar1Buffer
	    }[variant]),
	    style: inlineStyles.bar1
	  }), variant === 'determinate' ? null : /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.bar, (variant === 'indeterminate' || variant === 'query') && classes.bar2Indeterminate, variant === 'buffer' ? [classes["color".concat(capitalize(color))], classes.bar2Buffer] : classes["barColor".concat(capitalize(color))]),
	    style: inlineStyles.bar2
	  }));
	});
	var LinearProgress$1 = withStyles(styles$M, {
	  name: 'MuiLinearProgress'
	})(LinearProgress);

	var styles$L = {
	  /* Styles applied to the root element. */
	  root: {},

	  /* Styles applied to the root element if `underline="none"`. */
	  underlineNone: {
	    textDecoration: 'none'
	  },

	  /* Styles applied to the root element if `underline="hover"`. */
	  underlineHover: {
	    textDecoration: 'none',
	    '&:hover': {
	      textDecoration: 'underline'
	    }
	  },

	  /* Styles applied to the root element if `underline="always"`. */
	  underlineAlways: {
	    textDecoration: 'underline'
	  },
	  // Same reset as ButtonBase.root

	  /* Styles applied to the root element if `component="button"`. */
	  button: {
	    position: 'relative',
	    WebkitTapHighlightColor: 'transparent',
	    backgroundColor: 'transparent',
	    // Reset default value
	    // We disable the focus ring for mouse, touch and keyboard users.
	    outline: 0,
	    border: 0,
	    margin: 0,
	    // Remove the margin in Safari
	    borderRadius: 0,
	    padding: 0,
	    // Remove the padding in Firefox
	    cursor: 'pointer',
	    userSelect: 'none',
	    verticalAlign: 'middle',
	    '-moz-appearance': 'none',
	    // Reset
	    '-webkit-appearance': 'none',
	    // Reset
	    '&::-moz-focus-inner': {
	      borderStyle: 'none' // Remove Firefox dotted outline.

	    },
	    '&$focusVisible': {
	      outline: 'auto'
	    }
	  },

	  /* Pseudo-class applied to the root element if the link is keyboard focused. */
	  focusVisible: {}
	};
	var Link = /*#__PURE__*/react.exports.forwardRef(function Link(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'primary' : _props$color,
	      _props$component = props.component,
	      component = _props$component === void 0 ? 'a' : _props$component,
	      onBlur = props.onBlur,
	      onFocus = props.onFocus,
	      TypographyClasses = props.TypographyClasses,
	      _props$underline = props.underline,
	      underline = _props$underline === void 0 ? 'hover' : _props$underline,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'inherit' : _props$variant,
	      other = _objectWithoutProperties(props, ["classes", "className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"]);

	  var _useIsFocusVisible = useIsFocusVisible(),
	      isFocusVisible = _useIsFocusVisible.isFocusVisible,
	      onBlurVisible = _useIsFocusVisible.onBlurVisible,
	      focusVisibleRef = _useIsFocusVisible.ref;

	  var _React$useState = react.exports.useState(false),
	      focusVisible = _React$useState[0],
	      setFocusVisible = _React$useState[1];

	  var handlerRef = useForkRef(ref, focusVisibleRef);

	  var handleBlur = function handleBlur(event) {
	    if (focusVisible) {
	      onBlurVisible();
	      setFocusVisible(false);
	    }

	    if (onBlur) {
	      onBlur(event);
	    }
	  };

	  var handleFocus = function handleFocus(event) {
	    if (isFocusVisible(event)) {
	      setFocusVisible(true);
	    }

	    if (onFocus) {
	      onFocus(event);
	    }
	  };

	  return /*#__PURE__*/react.exports.createElement(Typography$1, _extends$5({
	    className: clsx(classes.root, classes["underline".concat(capitalize(underline))], className, focusVisible && classes.focusVisible, component === 'button' && classes.button),
	    classes: TypographyClasses,
	    color: color,
	    component: component,
	    onBlur: handleBlur,
	    onFocus: handleFocus,
	    ref: handlerRef,
	    variant: variant
	  }, other));
	});
	withStyles(styles$L, {
	  name: 'MuiLink'
	})(Link);

	/**
	 * @ignore - internal component.
	 */

	var ListContext = react.exports.createContext({});

	var styles$K = {
	  /* Styles applied to the root element. */
	  root: {
	    listStyle: 'none',
	    margin: 0,
	    padding: 0,
	    position: 'relative'
	  },

	  /* Styles applied to the root element if `disablePadding={false}`. */
	  padding: {
	    paddingTop: 8,
	    paddingBottom: 8
	  },

	  /* Styles applied to the root element if dense. */
	  dense: {},

	  /* Styles applied to the root element if a `subheader` is provided. */
	  subheader: {
	    paddingTop: 0
	  }
	};
	var List = /*#__PURE__*/react.exports.forwardRef(function List(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'ul' : _props$component,
	      _props$dense = props.dense,
	      dense = _props$dense === void 0 ? false : _props$dense,
	      _props$disablePadding = props.disablePadding,
	      disablePadding = _props$disablePadding === void 0 ? false : _props$disablePadding,
	      subheader = props.subheader,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "dense", "disablePadding", "subheader"]);

	  var context = react.exports.useMemo(function () {
	    return {
	      dense: dense
	    };
	  }, [dense]);
	  return /*#__PURE__*/react.exports.createElement(ListContext.Provider, {
	    value: context
	  }, /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className, dense && classes.dense, !disablePadding && classes.padding, subheader && classes.subheader),
	    ref: ref
	  }, other), subheader, children));
	});
	var List$1 = withStyles(styles$K, {
	  name: 'MuiList'
	})(List);

	var styles$J = function styles(theme) {
	  return {
	    /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
	    root: {
	      display: 'flex',
	      justifyContent: 'flex-start',
	      alignItems: 'center',
	      position: 'relative',
	      textDecoration: 'none',
	      width: '100%',
	      boxSizing: 'border-box',
	      textAlign: 'left',
	      paddingTop: 8,
	      paddingBottom: 8,
	      '&$focusVisible': {
	        backgroundColor: theme.palette.action.selected
	      },
	      '&$selected, &$selected:hover': {
	        backgroundColor: theme.palette.action.selected
	      },
	      '&$disabled': {
	        opacity: 0.5
	      }
	    },

	    /* Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. */
	    container: {
	      position: 'relative'
	    },

	    /* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
	    focusVisible: {},

	    /* Styles applied to the `component` element if dense. */
	    dense: {
	      paddingTop: 4,
	      paddingBottom: 4
	    },

	    /* Styles applied to the `component` element if `alignItems="flex-start"`. */
	    alignItemsFlexStart: {
	      alignItems: 'flex-start'
	    },

	    /* Pseudo-class applied to the inner `component` element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the inner `component` element if `divider={true}`. */
	    divider: {
	      borderBottom: "1px solid ".concat(theme.palette.divider),
	      backgroundClip: 'padding-box'
	    },

	    /* Styles applied to the inner `component` element if `disableGutters={false}`. */
	    gutters: {
	      paddingLeft: 16,
	      paddingRight: 16
	    },

	    /* Styles applied to the inner `component` element if `button={true}`. */
	    button: {
	      transition: theme.transitions.create('background-color', {
	        duration: theme.transitions.duration.shortest
	      }),
	      '&:hover': {
	        textDecoration: 'none',
	        backgroundColor: theme.palette.action.hover,
	        // Reset on touch devices, it doesn't add specificity
	        '@media (hover: none)': {
	          backgroundColor: 'transparent'
	        }
	      }
	    },

	    /* Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. */
	    secondaryAction: {
	      // Add some space to avoid collision as `ListItemSecondaryAction`
	      // is absolutely positioned.
	      paddingRight: 48
	    },

	    /* Pseudo-class applied to the root element if `selected={true}`. */
	    selected: {}
	  };
	};
	var useEnhancedEffect$2 = typeof window === 'undefined' ? react.exports.useEffect : react.exports.useLayoutEffect;
	/**
	 * Uses an additional container component if `ListItemSecondaryAction` is the last child.
	 */

	var ListItem = /*#__PURE__*/react.exports.forwardRef(function ListItem(props, ref) {
	  var _props$alignItems = props.alignItems,
	      alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,
	      _props$autoFocus = props.autoFocus,
	      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
	      _props$button = props.button,
	      button = _props$button === void 0 ? false : _props$button,
	      childrenProp = props.children,
	      classes = props.classes,
	      className = props.className,
	      componentProp = props.component,
	      _props$ContainerCompo = props.ContainerComponent,
	      ContainerComponent = _props$ContainerCompo === void 0 ? 'li' : _props$ContainerCompo,
	      _props$ContainerProps = props.ContainerProps;
	  _props$ContainerProps = _props$ContainerProps === void 0 ? {} : _props$ContainerProps;

	  var ContainerClassName = _props$ContainerProps.className,
	      ContainerProps = _objectWithoutProperties(_props$ContainerProps, ["className"]),
	      _props$dense = props.dense,
	      dense = _props$dense === void 0 ? false : _props$dense,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      _props$disableGutters = props.disableGutters,
	      disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
	      _props$divider = props.divider,
	      divider = _props$divider === void 0 ? false : _props$divider,
	      focusVisibleClassName = props.focusVisibleClassName,
	      _props$selected = props.selected,
	      selected = _props$selected === void 0 ? false : _props$selected,
	      other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "button", "children", "classes", "className", "component", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "divider", "focusVisibleClassName", "selected"]);

	  var context = react.exports.useContext(ListContext);
	  var childContext = {
	    dense: dense || context.dense || false,
	    alignItems: alignItems
	  };
	  var listItemRef = react.exports.useRef(null);
	  useEnhancedEffect$2(function () {
	    if (autoFocus) {
	      if (listItemRef.current) {
	        listItemRef.current.focus();
	      }
	    }
	  }, [autoFocus]);
	  var children = react.exports.Children.toArray(childrenProp);
	  var hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
	  var handleOwnRef = react.exports.useCallback(function (instance) {
	    // #StrictMode ready
	    listItemRef.current = reactDom.exports.findDOMNode(instance);
	  }, []);
	  var handleRef = useForkRef(handleOwnRef, ref);

	  var componentProps = _extends$5({
	    className: clsx(classes.root, className, childContext.dense && classes.dense, !disableGutters && classes.gutters, divider && classes.divider, disabled && classes.disabled, button && classes.button, alignItems !== "center" && classes.alignItemsFlexStart, hasSecondaryAction && classes.secondaryAction, selected && classes.selected),
	    disabled: disabled
	  }, other);

	  var Component = componentProp || 'li';

	  if (button) {
	    componentProps.component = componentProp || 'div';
	    componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);
	    Component = ButtonBase$1;
	  }

	  if (hasSecondaryAction) {
	    // Use div by default.
	    Component = !componentProps.component && !componentProp ? 'div' : Component; // Avoid nesting of li > li.

	    if (ContainerComponent === 'li') {
	      if (Component === 'li') {
	        Component = 'div';
	      } else if (componentProps.component === 'li') {
	        componentProps.component = 'div';
	      }
	    }

	    return /*#__PURE__*/react.exports.createElement(ListContext.Provider, {
	      value: childContext
	    }, /*#__PURE__*/react.exports.createElement(ContainerComponent, _extends$5({
	      className: clsx(classes.container, ContainerClassName),
	      ref: handleRef
	    }, ContainerProps), /*#__PURE__*/react.exports.createElement(Component, componentProps, children), children.pop()));
	  }

	  return /*#__PURE__*/react.exports.createElement(ListContext.Provider, {
	    value: childContext
	  }, /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    ref: handleRef
	  }, componentProps), children));
	});
	var ListItem$1 = withStyles(styles$J, {
	  name: 'MuiListItem'
	})(ListItem);

	var styles$I = {
	  /* Styles applied to the root element. */
	  root: {
	    minWidth: 56,
	    flexShrink: 0
	  },

	  /* Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
	  alignItemsFlexStart: {
	    marginTop: 8
	  }
	};
	/**
	 * A simple wrapper to apply `List` styles to an `Avatar`.
	 */

	var ListItemAvatar = /*#__PURE__*/react.exports.forwardRef(function ListItemAvatar(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      other = _objectWithoutProperties(props, ["classes", "className"]);

	  var context = react.exports.useContext(ListContext);
	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, context.alignItems === 'flex-start' && classes.alignItemsFlexStart),
	    ref: ref
	  }, other));
	});
	withStyles(styles$I, {
	  name: 'MuiListItemAvatar'
	})(ListItemAvatar);

	var styles$H = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      minWidth: 56,
	      color: theme.palette.action.active,
	      flexShrink: 0,
	      display: 'inline-flex'
	    },

	    /* Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
	    alignItemsFlexStart: {
	      marginTop: 8
	    }
	  };
	};
	/**
	 * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
	 */

	var ListItemIcon = /*#__PURE__*/react.exports.forwardRef(function ListItemIcon(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      other = _objectWithoutProperties(props, ["classes", "className"]);

	  var context = react.exports.useContext(ListContext);
	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, context.alignItems === 'flex-start' && classes.alignItemsFlexStart),
	    ref: ref
	  }, other));
	});
	var ListItemIcon$1 = withStyles(styles$H, {
	  name: 'MuiListItemIcon'
	})(ListItemIcon);

	var styles$G = {
	  /* Styles applied to the root element. */
	  root: {
	    position: 'absolute',
	    right: 16,
	    top: '50%',
	    transform: 'translateY(-50%)'
	  }
	};
	/**
	 * Must be used as the last child of ListItem to function properly.
	 */

	var ListItemSecondaryAction = /*#__PURE__*/react.exports.forwardRef(function ListItemSecondaryAction(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      other = _objectWithoutProperties(props, ["classes", "className"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other));
	});
	ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
	withStyles(styles$G, {
	  name: 'MuiListItemSecondaryAction'
	})(ListItemSecondaryAction);

	var styles$F = {
	  /* Styles applied to the root element. */
	  root: {
	    flex: '1 1 auto',
	    minWidth: 0,
	    marginTop: 4,
	    marginBottom: 4
	  },

	  /* Styles applied to the `Typography` components if primary and secondary are set. */
	  multiline: {
	    marginTop: 6,
	    marginBottom: 6
	  },

	  /* Styles applied to the `Typography` components if dense. */
	  dense: {},

	  /* Styles applied to the root element if `inset={true}`. */
	  inset: {
	    paddingLeft: 56
	  },

	  /* Styles applied to the primary `Typography` component. */
	  primary: {},

	  /* Styles applied to the secondary `Typography` component. */
	  secondary: {}
	};
	var ListItemText = /*#__PURE__*/react.exports.forwardRef(function ListItemText(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$disableTypogra = props.disableTypography,
	      disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
	      _props$inset = props.inset,
	      inset = _props$inset === void 0 ? false : _props$inset,
	      primaryProp = props.primary,
	      primaryTypographyProps = props.primaryTypographyProps,
	      secondaryProp = props.secondary,
	      secondaryTypographyProps = props.secondaryTypographyProps,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"]);

	  var _React$useContext = react.exports.useContext(ListContext),
	      dense = _React$useContext.dense;

	  var primary = primaryProp != null ? primaryProp : children;

	  if (primary != null && primary.type !== Typography$1 && !disableTypography) {
	    primary = /*#__PURE__*/react.exports.createElement(Typography$1, _extends$5({
	      variant: dense ? 'body2' : 'body1',
	      className: classes.primary,
	      component: "span",
	      display: "block"
	    }, primaryTypographyProps), primary);
	  }

	  var secondary = secondaryProp;

	  if (secondary != null && secondary.type !== Typography$1 && !disableTypography) {
	    secondary = /*#__PURE__*/react.exports.createElement(Typography$1, _extends$5({
	      variant: "body2",
	      className: classes.secondary,
	      color: "textSecondary",
	      display: "block"
	    }, secondaryTypographyProps), secondary);
	  }

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, dense && classes.dense, inset && classes.inset, primary && secondary && classes.multiline),
	    ref: ref
	  }, other), primary, secondary);
	});
	withStyles(styles$F, {
	  name: 'MuiListItemText'
	})(ListItemText);

	var styles$E = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      boxSizing: 'border-box',
	      lineHeight: '48px',
	      listStyle: 'none',
	      color: theme.palette.text.secondary,
	      fontFamily: theme.typography.fontFamily,
	      fontWeight: theme.typography.fontWeightMedium,
	      fontSize: theme.typography.pxToRem(14)
	    },

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {
	      color: theme.palette.primary.main
	    },

	    /* Styles applied to the root element if `color="inherit"`. */
	    colorInherit: {
	      color: 'inherit'
	    },

	    /* Styles applied to the inner `component` element if `disableGutters={false}`. */
	    gutters: {
	      paddingLeft: 16,
	      paddingRight: 16
	    },

	    /* Styles applied to the root element if `inset={true}`. */
	    inset: {
	      paddingLeft: 72
	    },

	    /* Styles applied to the root element if `disableSticky={false}`. */
	    sticky: {
	      position: 'sticky',
	      top: 0,
	      zIndex: 1,
	      backgroundColor: 'inherit'
	    }
	  };
	};
	var ListSubheader = /*#__PURE__*/react.exports.forwardRef(function ListSubheader(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'default' : _props$color,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'li' : _props$component,
	      _props$disableGutters = props.disableGutters,
	      disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
	      _props$disableSticky = props.disableSticky,
	      disableSticky = _props$disableSticky === void 0 ? false : _props$disableSticky,
	      _props$inset = props.inset,
	      inset = _props$inset === void 0 ? false : _props$inset,
	      other = _objectWithoutProperties(props, ["classes", "className", "color", "component", "disableGutters", "disableSticky", "inset"]);

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className, color !== 'default' && classes["color".concat(capitalize(color))], inset && classes.inset, !disableSticky && classes.sticky, !disableGutters && classes.gutters),
	    ref: ref
	  }, other));
	});
	withStyles(styles$E, {
	  name: 'MuiListSubheader'
	})(ListSubheader);

	function getOffsetTop(rect, vertical) {
	  var offset = 0;

	  if (typeof vertical === 'number') {
	    offset = vertical;
	  } else if (vertical === 'center') {
	    offset = rect.height / 2;
	  } else if (vertical === 'bottom') {
	    offset = rect.height;
	  }

	  return offset;
	}
	function getOffsetLeft(rect, horizontal) {
	  var offset = 0;

	  if (typeof horizontal === 'number') {
	    offset = horizontal;
	  } else if (horizontal === 'center') {
	    offset = rect.width / 2;
	  } else if (horizontal === 'right') {
	    offset = rect.width;
	  }

	  return offset;
	}

	function getTransformOriginValue(transformOrigin) {
	  return [transformOrigin.horizontal, transformOrigin.vertical].map(function (n) {
	    return typeof n === 'number' ? "".concat(n, "px") : n;
	  }).join(' ');
	} // Sum the scrollTop between two elements.


	function getScrollParent$1(parent, child) {
	  var element = child;
	  var scrollTop = 0;

	  while (element && element !== parent) {
	    element = element.parentElement;
	    scrollTop += element.scrollTop;
	  }

	  return scrollTop;
	}

	function getAnchorEl$1(anchorEl) {
	  return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
	}

	var styles$D = {
	  /* Styles applied to the root element. */
	  root: {},

	  /* Styles applied to the `Paper` component. */
	  paper: {
	    position: 'absolute',
	    overflowY: 'auto',
	    overflowX: 'hidden',
	    // So we see the popover when it's empty.
	    // It's most likely on issue on userland.
	    minWidth: 16,
	    minHeight: 16,
	    maxWidth: 'calc(100% - 32px)',
	    maxHeight: 'calc(100% - 32px)',
	    // We disable the focus ring for mouse, touch and keyboard users.
	    outline: 0
	  }
	};
	var Popover = /*#__PURE__*/react.exports.forwardRef(function Popover(props, ref) {
	  var action = props.action,
	      anchorEl = props.anchorEl,
	      _props$anchorOrigin = props.anchorOrigin,
	      anchorOrigin = _props$anchorOrigin === void 0 ? {
	    vertical: 'top',
	    horizontal: 'left'
	  } : _props$anchorOrigin,
	      anchorPosition = props.anchorPosition,
	      _props$anchorReferenc = props.anchorReference,
	      anchorReference = _props$anchorReferenc === void 0 ? 'anchorEl' : _props$anchorReferenc,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      containerProp = props.container,
	      _props$elevation = props.elevation,
	      elevation = _props$elevation === void 0 ? 8 : _props$elevation,
	      getContentAnchorEl = props.getContentAnchorEl,
	      _props$marginThreshol = props.marginThreshold,
	      marginThreshold = _props$marginThreshol === void 0 ? 16 : _props$marginThreshol,
	      onEnter = props.onEnter,
	      onEntered = props.onEntered,
	      onEntering = props.onEntering,
	      onExit = props.onExit,
	      onExited = props.onExited,
	      onExiting = props.onExiting,
	      open = props.open,
	      _props$PaperProps = props.PaperProps,
	      PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
	      _props$transformOrigi = props.transformOrigin,
	      transformOrigin = _props$transformOrigi === void 0 ? {
	    vertical: 'top',
	    horizontal: 'left'
	  } : _props$transformOrigi,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
	      _props$transitionDura = props.transitionDuration,
	      transitionDurationProp = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
	      _props$TransitionProp = props.TransitionProps,
	      TransitionProps = _props$TransitionProp === void 0 ? {} : _props$TransitionProp,
	      other = _objectWithoutProperties(props, ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "classes", "className", "container", "elevation", "getContentAnchorEl", "marginThreshold", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"]);

	  var paperRef = react.exports.useRef(); // Returns the top/left offset of the position
	  // to attach to on the anchor element (or body if none is provided)

	  var getAnchorOffset = react.exports.useCallback(function (contentAnchorOffset) {
	    if (anchorReference === 'anchorPosition') {

	      return anchorPosition;
	    }

	    var resolvedAnchorEl = getAnchorEl$1(anchorEl); // If an anchor element wasn't provided, just use the parent body element of this Popover

	    var anchorElement = resolvedAnchorEl && resolvedAnchorEl.nodeType === 1 ? resolvedAnchorEl : ownerDocument(paperRef.current).body;
	    var anchorRect = anchorElement.getBoundingClientRect();

	    var anchorVertical = contentAnchorOffset === 0 ? anchorOrigin.vertical : 'center';
	    return {
	      top: anchorRect.top + getOffsetTop(anchorRect, anchorVertical),
	      left: anchorRect.left + getOffsetLeft(anchorRect, anchorOrigin.horizontal)
	    };
	  }, [anchorEl, anchorOrigin.horizontal, anchorOrigin.vertical, anchorPosition, anchorReference]); // Returns the vertical offset of inner content to anchor the transform on if provided

	  var getContentAnchorOffset = react.exports.useCallback(function (element) {
	    var contentAnchorOffset = 0;

	    if (getContentAnchorEl && anchorReference === 'anchorEl') {
	      var contentAnchorEl = getContentAnchorEl(element);

	      if (contentAnchorEl && element.contains(contentAnchorEl)) {
	        var scrollTop = getScrollParent$1(element, contentAnchorEl);
	        contentAnchorOffset = contentAnchorEl.offsetTop + contentAnchorEl.clientHeight / 2 - scrollTop || 0;
	      } // != the default value
	    }

	    return contentAnchorOffset;
	  }, [anchorOrigin.vertical, anchorReference, getContentAnchorEl]); // Return the base transform origin using the element
	  // and taking the content anchor offset into account if in use

	  var getTransformOrigin = react.exports.useCallback(function (elemRect) {
	    var contentAnchorOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
	    return {
	      vertical: getOffsetTop(elemRect, transformOrigin.vertical) + contentAnchorOffset,
	      horizontal: getOffsetLeft(elemRect, transformOrigin.horizontal)
	    };
	  }, [transformOrigin.horizontal, transformOrigin.vertical]);
	  var getPositioningStyle = react.exports.useCallback(function (element) {
	    // Check if the parent has requested anchoring on an inner content node
	    var contentAnchorOffset = getContentAnchorOffset(element);
	    var elemRect = {
	      width: element.offsetWidth,
	      height: element.offsetHeight
	    }; // Get the transform origin point on the element itself

	    var elemTransformOrigin = getTransformOrigin(elemRect, contentAnchorOffset);

	    if (anchorReference === 'none') {
	      return {
	        top: null,
	        left: null,
	        transformOrigin: getTransformOriginValue(elemTransformOrigin)
	      };
	    } // Get the offset of of the anchoring element


	    var anchorOffset = getAnchorOffset(contentAnchorOffset); // Calculate element positioning

	    var top = anchorOffset.top - elemTransformOrigin.vertical;
	    var left = anchorOffset.left - elemTransformOrigin.horizontal;
	    var bottom = top + elemRect.height;
	    var right = left + elemRect.width; // Use the parent window of the anchorEl if provided

	    var containerWindow = ownerWindow(getAnchorEl$1(anchorEl)); // Window thresholds taking required margin into account

	    var heightThreshold = containerWindow.innerHeight - marginThreshold;
	    var widthThreshold = containerWindow.innerWidth - marginThreshold; // Check if the vertical axis needs shifting

	    if (top < marginThreshold) {
	      var diff = top - marginThreshold;
	      top -= diff;
	      elemTransformOrigin.vertical += diff;
	    } else if (bottom > heightThreshold) {
	      var _diff = bottom - heightThreshold;

	      top -= _diff;
	      elemTransformOrigin.vertical += _diff;
	    }


	    if (left < marginThreshold) {
	      var _diff2 = left - marginThreshold;

	      left -= _diff2;
	      elemTransformOrigin.horizontal += _diff2;
	    } else if (right > widthThreshold) {
	      var _diff3 = right - widthThreshold;

	      left -= _diff3;
	      elemTransformOrigin.horizontal += _diff3;
	    }

	    return {
	      top: "".concat(Math.round(top), "px"),
	      left: "".concat(Math.round(left), "px"),
	      transformOrigin: getTransformOriginValue(elemTransformOrigin)
	    };
	  }, [anchorEl, anchorReference, getAnchorOffset, getContentAnchorOffset, getTransformOrigin, marginThreshold]);
	  var setPositioningStyles = react.exports.useCallback(function () {
	    var element = paperRef.current;

	    if (!element) {
	      return;
	    }

	    var positioning = getPositioningStyle(element);

	    if (positioning.top !== null) {
	      element.style.top = positioning.top;
	    }

	    if (positioning.left !== null) {
	      element.style.left = positioning.left;
	    }

	    element.style.transformOrigin = positioning.transformOrigin;
	  }, [getPositioningStyle]);

	  var handleEntering = function handleEntering(element, isAppearing) {
	    if (onEntering) {
	      onEntering(element, isAppearing);
	    }

	    setPositioningStyles();
	  };

	  var handlePaperRef = react.exports.useCallback(function (instance) {
	    // #StrictMode ready
	    paperRef.current = reactDom.exports.findDOMNode(instance);
	  }, []);
	  react.exports.useEffect(function () {
	    if (open) {
	      setPositioningStyles();
	    }
	  });
	  react.exports.useImperativeHandle(action, function () {
	    return open ? {
	      updatePosition: function updatePosition() {
	        setPositioningStyles();
	      }
	    } : null;
	  }, [open, setPositioningStyles]);
	  react.exports.useEffect(function () {
	    if (!open) {
	      return undefined;
	    }

	    var handleResize = debounce$1(function () {
	      setPositioningStyles();
	    });
	    window.addEventListener('resize', handleResize);
	    return function () {
	      handleResize.clear();
	      window.removeEventListener('resize', handleResize);
	    };
	  }, [open, setPositioningStyles]);
	  var transitionDuration = transitionDurationProp;

	  if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
	    transitionDuration = undefined;
	  } // If the container prop is provided, use that
	  // If the anchorEl prop is provided, use its parent body element as the container
	  // If neither are provided let the Modal take care of choosing the container


	  var container = containerProp || (anchorEl ? ownerDocument(getAnchorEl$1(anchorEl)).body : undefined);
	  return /*#__PURE__*/react.exports.createElement(Modal, _extends$5({
	    container: container,
	    open: open,
	    ref: ref,
	    BackdropProps: {
	      invisible: true
	    },
	    className: clsx(classes.root, className)
	  }, other), /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    appear: true,
	    in: open,
	    onEnter: onEnter,
	    onEntered: onEntered,
	    onExit: onExit,
	    onExited: onExited,
	    onExiting: onExiting,
	    timeout: transitionDuration
	  }, TransitionProps, {
	    onEntering: createChainedFunction(handleEntering, TransitionProps.onEntering)
	  }), /*#__PURE__*/react.exports.createElement(Paper$1, _extends$5({
	    elevation: elevation,
	    ref: handlePaperRef
	  }, PaperProps, {
	    className: clsx(classes.paper, PaperProps.className)
	  }), children)));
	});
	var Popover$1 = withStyles(styles$D, {
	  name: 'MuiPopover'
	})(Popover);

	function nextItem(list, item, disableListWrap) {
	  if (list === item) {
	    return list.firstChild;
	  }

	  if (item && item.nextElementSibling) {
	    return item.nextElementSibling;
	  }

	  return disableListWrap ? null : list.firstChild;
	}

	function previousItem(list, item, disableListWrap) {
	  if (list === item) {
	    return disableListWrap ? list.firstChild : list.lastChild;
	  }

	  if (item && item.previousElementSibling) {
	    return item.previousElementSibling;
	  }

	  return disableListWrap ? null : list.lastChild;
	}

	function textCriteriaMatches(nextFocus, textCriteria) {
	  if (textCriteria === undefined) {
	    return true;
	  }

	  var text = nextFocus.innerText;

	  if (text === undefined) {
	    // jsdom doesn't support innerText
	    text = nextFocus.textContent;
	  }

	  text = text.trim().toLowerCase();

	  if (text.length === 0) {
	    return false;
	  }

	  if (textCriteria.repeating) {
	    return text[0] === textCriteria.keys[0];
	  }

	  return text.indexOf(textCriteria.keys.join('')) === 0;
	}

	function moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, traversalFunction, textCriteria) {
	  var wrappedOnce = false;
	  var nextFocus = traversalFunction(list, currentFocus, currentFocus ? disableListWrap : false);

	  while (nextFocus) {
	    // Prevent infinite loop.
	    if (nextFocus === list.firstChild) {
	      if (wrappedOnce) {
	        return;
	      }

	      wrappedOnce = true;
	    } // Same logic as useAutocomplete.js


	    var nextFocusDisabled = disabledItemsFocusable ? false : nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';

	    if (!nextFocus.hasAttribute('tabindex') || !textCriteriaMatches(nextFocus, textCriteria) || nextFocusDisabled) {
	      // Move to the next element.
	      nextFocus = traversalFunction(list, nextFocus, disableListWrap);
	    } else {
	      nextFocus.focus();
	      return;
	    }
	  }
	}

	var useEnhancedEffect$1 = typeof window === 'undefined' ? react.exports.useEffect : react.exports.useLayoutEffect;
	/**
	 * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton.
	 * It's exposed to help customization of the [`Menu`](/api/menu/) component. If you
	 * use it separately you need to move focus into the component manually. Once
	 * the focus is placed inside the component it is fully keyboard accessible.
	 */

	var MenuList = /*#__PURE__*/react.exports.forwardRef(function MenuList(props, ref) {
	  var actions = props.actions,
	      _props$autoFocus = props.autoFocus,
	      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
	      _props$autoFocusItem = props.autoFocusItem,
	      autoFocusItem = _props$autoFocusItem === void 0 ? false : _props$autoFocusItem,
	      children = props.children,
	      className = props.className,
	      _props$disabledItemsF = props.disabledItemsFocusable,
	      disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,
	      _props$disableListWra = props.disableListWrap,
	      disableListWrap = _props$disableListWra === void 0 ? false : _props$disableListWra,
	      onKeyDown = props.onKeyDown,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'selectedMenu' : _props$variant,
	      other = _objectWithoutProperties(props, ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"]);

	  var listRef = react.exports.useRef(null);
	  var textCriteriaRef = react.exports.useRef({
	    keys: [],
	    repeating: true,
	    previousKeyMatched: true,
	    lastTime: null
	  });
	  useEnhancedEffect$1(function () {
	    if (autoFocus) {
	      listRef.current.focus();
	    }
	  }, [autoFocus]);
	  react.exports.useImperativeHandle(actions, function () {
	    return {
	      adjustStyleForScrollbar: function adjustStyleForScrollbar(containerElement, theme) {
	        // Let's ignore that piece of logic if users are already overriding the width
	        // of the menu.
	        var noExplicitWidth = !listRef.current.style.width;

	        if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
	          var scrollbarSize = "".concat(getScrollbarSize(), "px");
	          listRef.current.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
	          listRef.current.style.width = "calc(100% + ".concat(scrollbarSize, ")");
	        }

	        return listRef.current;
	      }
	    };
	  }, []);

	  var handleKeyDown = function handleKeyDown(event) {
	    var list = listRef.current;
	    var key = event.key;
	    /**
	     * @type {Element} - will always be defined since we are in a keydown handler
	     * attached to an element. A keydown event is either dispatched to the activeElement
	     * or document.body or document.documentElement. Only the first case will
	     * trigger this specific handler.
	     */

	    var currentFocus = ownerDocument(list).activeElement;

	    if (key === 'ArrowDown') {
	      // Prevent scroll of the page
	      event.preventDefault();
	      moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, nextItem);
	    } else if (key === 'ArrowUp') {
	      event.preventDefault();
	      moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, previousItem);
	    } else if (key === 'Home') {
	      event.preventDefault();
	      moveFocus(list, null, disableListWrap, disabledItemsFocusable, nextItem);
	    } else if (key === 'End') {
	      event.preventDefault();
	      moveFocus(list, null, disableListWrap, disabledItemsFocusable, previousItem);
	    } else if (key.length === 1) {
	      var criteria = textCriteriaRef.current;
	      var lowerKey = key.toLowerCase();
	      var currTime = performance.now();

	      if (criteria.keys.length > 0) {
	        // Reset
	        if (currTime - criteria.lastTime > 500) {
	          criteria.keys = [];
	          criteria.repeating = true;
	          criteria.previousKeyMatched = true;
	        } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
	          criteria.repeating = false;
	        }
	      }

	      criteria.lastTime = currTime;
	      criteria.keys.push(lowerKey);
	      var keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);

	      if (criteria.previousKeyMatched && (keepFocusOnCurrent || moveFocus(list, currentFocus, false, disabledItemsFocusable, nextItem, criteria))) {
	        event.preventDefault();
	      } else {
	        criteria.previousKeyMatched = false;
	      }
	    }

	    if (onKeyDown) {
	      onKeyDown(event);
	    }
	  };

	  var handleOwnRef = react.exports.useCallback(function (instance) {
	    // #StrictMode ready
	    listRef.current = reactDom.exports.findDOMNode(instance);
	  }, []);
	  var handleRef = useForkRef(handleOwnRef, ref);
	  /**
	   * the index of the item should receive focus
	   * in a `variant="selectedMenu"` it's the first `selected` item
	   * otherwise it's the very first item.
	   */

	  var activeItemIndex = -1; // since we inject focus related props into children we have to do a lookahead
	  // to check if there is a `selected` item. We're looking for the last `selected`
	  // item and use the first valid item as a fallback

	  react.exports.Children.forEach(children, function (child, index) {
	    if (! /*#__PURE__*/react.exports.isValidElement(child)) {
	      return;
	    }

	    if (!child.props.disabled) {
	      if (variant === 'selectedMenu' && child.props.selected) {
	        activeItemIndex = index;
	      } else if (activeItemIndex === -1) {
	        activeItemIndex = index;
	      }
	    }
	  });
	  var items = react.exports.Children.map(children, function (child, index) {
	    if (index === activeItemIndex) {
	      var newChildProps = {};

	      if (autoFocusItem) {
	        newChildProps.autoFocus = true;
	      }

	      if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
	        newChildProps.tabIndex = 0;
	      }

	      return /*#__PURE__*/react.exports.cloneElement(child, newChildProps);
	    }

	    return child;
	  });
	  return /*#__PURE__*/react.exports.createElement(List$1, _extends$5({
	    role: "menu",
	    ref: handleRef,
	    className: className,
	    onKeyDown: handleKeyDown,
	    tabIndex: autoFocus ? 0 : -1
	  }, other), items);
	});

	var RTL_ORIGIN = {
	  vertical: 'top',
	  horizontal: 'right'
	};
	var LTR_ORIGIN = {
	  vertical: 'top',
	  horizontal: 'left'
	};
	var styles$C = {
	  /* Styles applied to the `Paper` component. */
	  paper: {
	    // specZ: The maximum height of a simple menu should be one or more rows less than the view
	    // height. This ensures a tapable area outside of the simple menu with which to dismiss
	    // the menu.
	    maxHeight: 'calc(100% - 96px)',
	    // Add iOS momentum scrolling.
	    WebkitOverflowScrolling: 'touch'
	  },

	  /* Styles applied to the `List` component via `MenuList`. */
	  list: {
	    // We disable the focus ring for mouse, touch and keyboard users.
	    outline: 0
	  }
	};
	var Menu = /*#__PURE__*/react.exports.forwardRef(function Menu(props, ref) {
	  var _props$autoFocus = props.autoFocus,
	      autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
	      children = props.children,
	      classes = props.classes,
	      _props$disableAutoFoc = props.disableAutoFocusItem,
	      disableAutoFocusItem = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
	      _props$MenuListProps = props.MenuListProps,
	      MenuListProps = _props$MenuListProps === void 0 ? {} : _props$MenuListProps,
	      onClose = props.onClose,
	      onEnteringProp = props.onEntering,
	      open = props.open,
	      _props$PaperProps = props.PaperProps,
	      PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
	      PopoverClasses = props.PopoverClasses,
	      _props$transitionDura = props.transitionDuration,
	      transitionDuration = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
	      _props$TransitionProp = props.TransitionProps;
	  _props$TransitionProp = _props$TransitionProp === void 0 ? {} : _props$TransitionProp;

	  var onEntering = _props$TransitionProp.onEntering,
	      TransitionProps = _objectWithoutProperties(_props$TransitionProp, ["onEntering"]),
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'selectedMenu' : _props$variant,
	      other = _objectWithoutProperties(props, ["autoFocus", "children", "classes", "disableAutoFocusItem", "MenuListProps", "onClose", "onEntering", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"]);

	  var theme = useTheme$1();
	  var autoFocusItem = autoFocus && !disableAutoFocusItem && open;
	  var menuListActionsRef = react.exports.useRef(null);
	  var contentAnchorRef = react.exports.useRef(null);

	  var getContentAnchorEl = function getContentAnchorEl() {
	    return contentAnchorRef.current;
	  };

	  var handleEntering = function handleEntering(element, isAppearing) {
	    if (menuListActionsRef.current) {
	      menuListActionsRef.current.adjustStyleForScrollbar(element, theme);
	    }

	    if (onEnteringProp) {
	      onEnteringProp(element, isAppearing);
	    }

	    if (onEntering) {
	      onEntering(element, isAppearing);
	    }
	  };

	  var handleListKeyDown = function handleListKeyDown(event) {
	    if (event.key === 'Tab') {
	      event.preventDefault();

	      if (onClose) {
	        onClose(event, 'tabKeyDown');
	      }
	    }
	  };
	  /**
	   * the index of the item should receive focus
	   * in a `variant="selectedMenu"` it's the first `selected` item
	   * otherwise it's the very first item.
	   */


	  var activeItemIndex = -1; // since we inject focus related props into children we have to do a lookahead
	  // to check if there is a `selected` item. We're looking for the last `selected`
	  // item and use the first valid item as a fallback

	  react.exports.Children.map(children, function (child, index) {
	    if (! /*#__PURE__*/react.exports.isValidElement(child)) {
	      return;
	    }

	    if (!child.props.disabled) {
	      if (variant !== "menu" && child.props.selected) {
	        activeItemIndex = index;
	      } else if (activeItemIndex === -1) {
	        activeItemIndex = index;
	      }
	    }
	  });
	  var items = react.exports.Children.map(children, function (child, index) {
	    if (index === activeItemIndex) {
	      return /*#__PURE__*/react.exports.cloneElement(child, {
	        ref: function ref(instance) {
	          // #StrictMode ready
	          contentAnchorRef.current = reactDom.exports.findDOMNode(instance);
	          setRef(child.ref, instance);
	        }
	      });
	    }

	    return child;
	  });
	  return /*#__PURE__*/react.exports.createElement(Popover$1, _extends$5({
	    getContentAnchorEl: getContentAnchorEl,
	    classes: PopoverClasses,
	    onClose: onClose,
	    TransitionProps: _extends$5({
	      onEntering: handleEntering
	    }, TransitionProps),
	    anchorOrigin: theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN,
	    transformOrigin: theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN,
	    PaperProps: _extends$5({}, PaperProps, {
	      classes: _extends$5({}, PaperProps.classes, {
	        root: classes.paper
	      })
	    }),
	    open: open,
	    ref: ref,
	    transitionDuration: transitionDuration
	  }, other), /*#__PURE__*/react.exports.createElement(MenuList, _extends$5({
	    onKeyDown: handleListKeyDown,
	    actions: menuListActionsRef,
	    autoFocus: autoFocus && (activeItemIndex === -1 || disableAutoFocusItem),
	    autoFocusItem: autoFocusItem,
	    variant: variant
	  }, MenuListProps, {
	    className: clsx(classes.list, MenuListProps.className)
	  }), items));
	});
	var Menu$1 = withStyles(styles$C, {
	  name: 'MuiMenu'
	})(Menu);

	var styles$B = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: _extends$5({}, theme.typography.body1, _defineProperty$1({
	      minHeight: 48,
	      paddingTop: 6,
	      paddingBottom: 6,
	      boxSizing: 'border-box',
	      width: 'auto',
	      overflow: 'hidden',
	      whiteSpace: 'nowrap'
	    }, theme.breakpoints.up('sm'), {
	      minHeight: 'auto'
	    })),
	    // TODO v5: remove

	    /* Styles applied to the root element if `disableGutters={false}`. */
	    gutters: {},

	    /* Styles applied to the root element if `selected={true}`. */
	    selected: {},

	    /* Styles applied to the root element if dense. */
	    dense: _extends$5({}, theme.typography.body2, {
	      minHeight: 'auto'
	    })
	  };
	};
	var MenuItem = /*#__PURE__*/react.exports.forwardRef(function MenuItem(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      component = _props$component === void 0 ? 'li' : _props$component,
	      _props$disableGutters = props.disableGutters,
	      disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
	      ListItemClasses = props.ListItemClasses,
	      _props$role = props.role,
	      role = _props$role === void 0 ? 'menuitem' : _props$role,
	      selected = props.selected,
	      tabIndexProp = props.tabIndex,
	      other = _objectWithoutProperties(props, ["classes", "className", "component", "disableGutters", "ListItemClasses", "role", "selected", "tabIndex"]);

	  var tabIndex;

	  if (!props.disabled) {
	    tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
	  }

	  return /*#__PURE__*/react.exports.createElement(ListItem$1, _extends$5({
	    button: true,
	    role: role,
	    tabIndex: tabIndex,
	    component: component,
	    selected: selected,
	    disableGutters: disableGutters,
	    classes: _extends$5({
	      dense: classes.dense
	    }, ListItemClasses),
	    className: clsx(classes.root, className, selected && classes.selected, !disableGutters && classes.gutters),
	    ref: ref
	  }, other));
	});
	var MenuItem$1 = withStyles(styles$B, {
	  name: 'MuiMenuItem'
	})(MenuItem);

	var styles$A = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'flex',
	      flexDirection: 'row',
	      justifyContent: 'space-between',
	      alignItems: 'center',
	      background: theme.palette.background.default,
	      padding: 8
	    },

	    /* Styles applied to the root element if `position="bottom"`. */
	    positionBottom: {
	      position: 'fixed',
	      bottom: 0,
	      left: 0,
	      right: 0,
	      zIndex: theme.zIndex.mobileStepper
	    },

	    /* Styles applied to the root element if `position="top"`. */
	    positionTop: {
	      position: 'fixed',
	      top: 0,
	      left: 0,
	      right: 0,
	      zIndex: theme.zIndex.mobileStepper
	    },

	    /* Styles applied to the root element if `position="static"`. */
	    positionStatic: {},

	    /* Styles applied to the dots container if `variant="dots"`. */
	    dots: {
	      display: 'flex',
	      flexDirection: 'row'
	    },

	    /* Styles applied to each dot if `variant="dots"`. */
	    dot: {
	      backgroundColor: theme.palette.action.disabled,
	      borderRadius: '50%',
	      width: 8,
	      height: 8,
	      margin: '0 2px'
	    },

	    /* Styles applied to a dot if `variant="dots"` and this is the active step. */
	    dotActive: {
	      backgroundColor: theme.palette.primary.main
	    },

	    /* Styles applied to the Linear Progress component if `variant="progress"`. */
	    progress: {
	      width: '50%'
	    }
	  };
	};
	var MobileStepper = /*#__PURE__*/react.exports.forwardRef(function MobileStepper(props, ref) {
	  var _props$activeStep = props.activeStep,
	      activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
	      backButton = props.backButton,
	      classes = props.classes,
	      className = props.className,
	      LinearProgressProps = props.LinearProgressProps,
	      nextButton = props.nextButton,
	      _props$position = props.position,
	      position = _props$position === void 0 ? 'bottom' : _props$position,
	      steps = props.steps,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'dots' : _props$variant,
	      other = _objectWithoutProperties(props, ["activeStep", "backButton", "classes", "className", "LinearProgressProps", "nextButton", "position", "steps", "variant"]);

	  return /*#__PURE__*/react.exports.createElement(Paper$1, _extends$5({
	    square: true,
	    elevation: 0,
	    className: clsx(classes.root, classes["position".concat(capitalize(position))], className),
	    ref: ref
	  }, other), backButton, variant === 'text' && /*#__PURE__*/react.exports.createElement(react.exports.Fragment, null, activeStep + 1, " / ", steps), variant === 'dots' && /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.dots
	  }, _toConsumableArray(new Array(steps)).map(function (_, index) {
	    return /*#__PURE__*/react.exports.createElement("div", {
	      key: index,
	      className: clsx(classes.dot, index === activeStep && classes.dotActive)
	    });
	  })), variant === 'progress' && /*#__PURE__*/react.exports.createElement(LinearProgress$1, _extends$5({
	    className: classes.progress,
	    variant: "determinate",
	    value: Math.ceil(activeStep / (steps - 1) * 100)
	  }, LinearProgressProps)), nextButton);
	});
	withStyles(styles$A, {
	  name: 'MuiMobileStepper'
	})(MobileStepper);

	/**
	 * @ignore - internal component.
	 */

	var NativeSelectInput = /*#__PURE__*/react.exports.forwardRef(function NativeSelectInput(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      disabled = props.disabled,
	      IconComponent = props.IconComponent,
	      inputRef = props.inputRef,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'standard' : _props$variant,
	      other = _objectWithoutProperties(props, ["classes", "className", "disabled", "IconComponent", "inputRef", "variant"]);

	  return /*#__PURE__*/react.exports.createElement(react.exports.Fragment, null, /*#__PURE__*/react.exports.createElement("select", _extends$5({
	    className: clsx(classes.root, // TODO v5: merge root and select
	    classes.select, classes[variant], className, disabled && classes.disabled),
	    disabled: disabled,
	    ref: inputRef || ref
	  }, other)), props.multiple ? null : /*#__PURE__*/react.exports.createElement(IconComponent, {
	    className: clsx(classes.icon, classes["icon".concat(capitalize(variant))], disabled && classes.disabled)
	  }));
	});

	/**
	 * @ignore - internal component.
	 */

	var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M7 10l5 5 5-5z"
	}));

	var styles$z = function styles(theme) {
	  return {
	    /* Styles applied to the select component `root` class. */
	    root: {},

	    /* Styles applied to the select component `select` class. */
	    select: {
	      '-moz-appearance': 'none',
	      // Reset
	      '-webkit-appearance': 'none',
	      // Reset
	      // When interacting quickly, the text can end up selected.
	      // Native select can't be selected either.
	      userSelect: 'none',
	      borderRadius: 0,
	      // Reset
	      minWidth: 16,
	      // So it doesn't collapse.
	      cursor: 'pointer',
	      '&:focus': {
	        // Show that it's not an text input
	        backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
	        borderRadius: 0 // Reset Chrome style

	      },
	      // Remove IE 11 arrow
	      '&::-ms-expand': {
	        display: 'none'
	      },
	      '&$disabled': {
	        cursor: 'default'
	      },
	      '&[multiple]': {
	        height: 'auto'
	      },
	      '&:not([multiple]) option, &:not([multiple]) optgroup': {
	        backgroundColor: theme.palette.background.paper
	      },
	      '&&': {
	        paddingRight: 24
	      }
	    },

	    /* Styles applied to the select component if `variant="filled"`. */
	    filled: {
	      '&&': {
	        paddingRight: 32
	      }
	    },

	    /* Styles applied to the select component if `variant="outlined"`. */
	    outlined: {
	      borderRadius: theme.shape.borderRadius,
	      '&&': {
	        paddingRight: 32
	      }
	    },

	    /* Styles applied to the select component `selectMenu` class. */
	    selectMenu: {
	      height: 'auto',
	      // Resets for multpile select with chips
	      minHeight: '1.1876em',
	      // Required for select\text-field height consistency
	      textOverflow: 'ellipsis',
	      whiteSpace: 'nowrap',
	      overflow: 'hidden'
	    },

	    /* Pseudo-class applied to the select component `disabled` class. */
	    disabled: {},

	    /* Styles applied to the icon component. */
	    icon: {
	      // We use a position absolute over a flexbox in order to forward the pointer events
	      // to the input and to support wrapping tags..
	      position: 'absolute',
	      right: 0,
	      top: 'calc(50% - 12px)',
	      // Center vertically
	      pointerEvents: 'none',
	      // Don't block pointer events on the select under the icon.
	      color: theme.palette.action.active,
	      '&$disabled': {
	        color: theme.palette.action.disabled
	      }
	    },

	    /* Styles applied to the icon component if the popup is open. */
	    iconOpen: {
	      transform: 'rotate(180deg)'
	    },

	    /* Styles applied to the icon component if `variant="filled"`. */
	    iconFilled: {
	      right: 7
	    },

	    /* Styles applied to the icon component if `variant="outlined"`. */
	    iconOutlined: {
	      right: 7
	    },

	    /* Styles applied to the underlying native input component. */
	    nativeInput: {
	      bottom: 0,
	      left: 0,
	      position: 'absolute',
	      opacity: 0,
	      pointerEvents: 'none',
	      width: '100%'
	    }
	  };
	};
	var defaultInput = /*#__PURE__*/react.exports.createElement(Input$1, null);
	/**
	 * An alternative to `<Select native />` with a much smaller bundle size footprint.
	 */

	var NativeSelect = /*#__PURE__*/react.exports.forwardRef(function NativeSelect(props, ref) {
	  var children = props.children,
	      classes = props.classes,
	      _props$IconComponent = props.IconComponent,
	      IconComponent = _props$IconComponent === void 0 ? ArrowDropDownIcon : _props$IconComponent,
	      _props$input = props.input,
	      input = _props$input === void 0 ? defaultInput : _props$input,
	      inputProps = props.inputProps;
	      props.variant;
	      var other = _objectWithoutProperties(props, ["children", "classes", "IconComponent", "input", "inputProps", "variant"]);

	  var muiFormControl = useFormControl();
	  var fcs = formControlState({
	    props: props,
	    muiFormControl: muiFormControl,
	    states: ['variant']
	  });
	  return /*#__PURE__*/react.exports.cloneElement(input, _extends$5({
	    // Most of the logic is implemented in `NativeSelectInput`.
	    // The `Select` component is a simple API wrapper to expose something better to play with.
	    inputComponent: NativeSelectInput,
	    inputProps: _extends$5({
	      children: children,
	      classes: classes,
	      IconComponent: IconComponent,
	      variant: fcs.variant,
	      type: undefined
	    }, inputProps, input ? input.props.inputProps : {}),
	    ref: ref
	  }, other));
	});
	NativeSelect.muiName = 'Select';
	withStyles(styles$z, {
	  name: 'MuiNativeSelect'
	})(NativeSelect);

	var styles$y = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'absolute',
	      bottom: 0,
	      right: 0,
	      top: -5,
	      left: 0,
	      margin: 0,
	      padding: '0 8px',
	      pointerEvents: 'none',
	      borderRadius: 'inherit',
	      borderStyle: 'solid',
	      borderWidth: 1,
	      overflow: 'hidden'
	    },

	    /* Styles applied to the legend element when `labelWidth` is provided. */
	    legend: {
	      textAlign: 'left',
	      padding: 0,
	      lineHeight: '11px',
	      // sync with `height` in `legend` styles
	      transition: theme.transitions.create('width', {
	        duration: 150,
	        easing: theme.transitions.easing.easeOut
	      })
	    },

	    /* Styles applied to the legend element. */
	    legendLabelled: {
	      display: 'block',
	      width: 'auto',
	      textAlign: 'left',
	      padding: 0,
	      height: 11,
	      // sync with `lineHeight` in `legend` styles
	      fontSize: '0.75em',
	      visibility: 'hidden',
	      maxWidth: 0.01,
	      transition: theme.transitions.create('max-width', {
	        duration: 50,
	        easing: theme.transitions.easing.easeOut
	      }),
	      '& > span': {
	        paddingLeft: 5,
	        paddingRight: 5,
	        display: 'inline-block'
	      }
	    },

	    /* Styles applied to the legend element is notched. */
	    legendNotched: {
	      maxWidth: 1000,
	      transition: theme.transitions.create('max-width', {
	        duration: 100,
	        easing: theme.transitions.easing.easeOut,
	        delay: 50
	      })
	    }
	  };
	};
	/**
	 * @ignore - internal component.
	 */

	var NotchedOutline = /*#__PURE__*/react.exports.forwardRef(function NotchedOutline(props, ref) {
	  props.children;
	      var classes = props.classes,
	      className = props.className,
	      label = props.label,
	      labelWidthProp = props.labelWidth,
	      notched = props.notched,
	      style = props.style,
	      other = _objectWithoutProperties(props, ["children", "classes", "className", "label", "labelWidth", "notched", "style"]);

	  var theme = useTheme$1();
	  var align = theme.direction === 'rtl' ? 'right' : 'left';

	  if (label !== undefined) {
	    return /*#__PURE__*/react.exports.createElement("fieldset", _extends$5({
	      "aria-hidden": true,
	      className: clsx(classes.root, className),
	      ref: ref,
	      style: style
	    }, other), /*#__PURE__*/react.exports.createElement("legend", {
	      className: clsx(classes.legendLabelled, notched && classes.legendNotched)
	    }, label ? /*#__PURE__*/react.exports.createElement("span", null, label) : /*#__PURE__*/react.exports.createElement("span", {
	      dangerouslySetInnerHTML: {
	        __html: '&#8203;'
	      }
	    })));
	  }

	  var labelWidth = labelWidthProp > 0 ? labelWidthProp * 0.75 + 8 : 0.01;
	  return /*#__PURE__*/react.exports.createElement("fieldset", _extends$5({
	    "aria-hidden": true,
	    style: _extends$5(_defineProperty$1({}, "padding".concat(capitalize(align)), 8), style),
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("legend", {
	    className: classes.legend,
	    style: {
	      // IE 11: fieldset with legend does not render
	      // a border radius. This maintains consistency
	      // by always having a legend rendered
	      width: notched ? labelWidth : 0.01
	    }
	  }, /*#__PURE__*/react.exports.createElement("span", {
	    dangerouslySetInnerHTML: {
	      __html: '&#8203;'
	    }
	  })));
	});
	var NotchedOutline$1 = withStyles(styles$y, {
	  name: 'PrivateNotchedOutline'
	})(NotchedOutline);

	var styles$x = function styles(theme) {
	  var borderColor = theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'relative',
	      borderRadius: theme.shape.borderRadius,
	      '&:hover $notchedOutline': {
	        borderColor: theme.palette.text.primary
	      },
	      // Reset on touch devices, it doesn't add specificity
	      '@media (hover: none)': {
	        '&:hover $notchedOutline': {
	          borderColor: borderColor
	        }
	      },
	      '&$focused $notchedOutline': {
	        borderColor: theme.palette.primary.main,
	        borderWidth: 2
	      },
	      '&$error $notchedOutline': {
	        borderColor: theme.palette.error.main
	      },
	      '&$disabled $notchedOutline': {
	        borderColor: theme.palette.action.disabled
	      }
	    },

	    /* Styles applied to the root element if the color is secondary. */
	    colorSecondary: {
	      '&$focused $notchedOutline': {
	        borderColor: theme.palette.secondary.main
	      }
	    },

	    /* Styles applied to the root element if the component is focused. */
	    focused: {},

	    /* Styles applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the root element if `startAdornment` is provided. */
	    adornedStart: {
	      paddingLeft: 14
	    },

	    /* Styles applied to the root element if `endAdornment` is provided. */
	    adornedEnd: {
	      paddingRight: 14
	    },

	    /* Pseudo-class applied to the root element if `error={true}`. */
	    error: {},

	    /* Styles applied to the `input` element if `margin="dense"`. */
	    marginDense: {},

	    /* Styles applied to the root element if `multiline={true}`. */
	    multiline: {
	      padding: '18.5px 14px',
	      '&$marginDense': {
	        paddingTop: 10.5,
	        paddingBottom: 10.5
	      }
	    },

	    /* Styles applied to the `NotchedOutline` element. */
	    notchedOutline: {
	      borderColor: borderColor
	    },

	    /* Styles applied to the `input` element. */
	    input: {
	      padding: '18.5px 14px',
	      '&:-webkit-autofill': {
	        WebkitBoxShadow: theme.palette.type === 'light' ? null : '0 0 0 100px #266798 inset',
	        WebkitTextFillColor: theme.palette.type === 'light' ? null : '#fff',
	        caretColor: theme.palette.type === 'light' ? null : '#fff',
	        borderRadius: 'inherit'
	      }
	    },

	    /* Styles applied to the `input` element if `margin="dense"`. */
	    inputMarginDense: {
	      paddingTop: 10.5,
	      paddingBottom: 10.5
	    },

	    /* Styles applied to the `input` element if `multiline={true}`. */
	    inputMultiline: {
	      padding: 0
	    },

	    /* Styles applied to the `input` element if `startAdornment` is provided. */
	    inputAdornedStart: {
	      paddingLeft: 0
	    },

	    /* Styles applied to the `input` element if `endAdornment` is provided. */
	    inputAdornedEnd: {
	      paddingRight: 0
	    }
	  };
	};
	var OutlinedInput = /*#__PURE__*/react.exports.forwardRef(function OutlinedInput(props, ref) {
	  var classes = props.classes,
	      _props$fullWidth = props.fullWidth,
	      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
	      _props$inputComponent = props.inputComponent,
	      inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
	      label = props.label,
	      _props$labelWidth = props.labelWidth,
	      labelWidth = _props$labelWidth === void 0 ? 0 : _props$labelWidth,
	      _props$multiline = props.multiline,
	      multiline = _props$multiline === void 0 ? false : _props$multiline,
	      notched = props.notched,
	      _props$type = props.type,
	      type = _props$type === void 0 ? 'text' : _props$type,
	      other = _objectWithoutProperties(props, ["classes", "fullWidth", "inputComponent", "label", "labelWidth", "multiline", "notched", "type"]);

	  return /*#__PURE__*/react.exports.createElement(InputBase$1, _extends$5({
	    renderSuffix: function renderSuffix(state) {
	      return /*#__PURE__*/react.exports.createElement(NotchedOutline$1, {
	        className: classes.notchedOutline,
	        label: label,
	        labelWidth: labelWidth,
	        notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
	      });
	    },
	    classes: _extends$5({}, classes, {
	      root: clsx(classes.root, classes.underline),
	      notchedOutline: null
	    }),
	    fullWidth: fullWidth,
	    inputComponent: inputComponent,
	    multiline: multiline,
	    ref: ref,
	    type: type
	  }, other));
	});
	OutlinedInput.muiName = 'Input';
	var OutlinedInput$1 = withStyles(styles$x, {
	  name: 'MuiOutlinedInput'
	})(OutlinedInput);

	/**!
	 * @fileOverview Kickass library to create and place poppers near their reference elements.
	 * @version 1.16.1-lts
	 * @license
	 * Copyright (c) 2016 Federico Zivolo and contributors
	 *
	 * Permission is hereby granted, free of charge, to any person obtaining a copy
	 * of this software and associated documentation files (the "Software"), to deal
	 * in the Software without restriction, including without limitation the rights
	 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	 * copies of the Software, and to permit persons to whom the Software is
	 * furnished to do so, subject to the following conditions:
	 *
	 * The above copyright notice and this permission notice shall be included in all
	 * copies or substantial portions of the Software.
	 *
	 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
	 * SOFTWARE.
	 */
	var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';

	var timeoutDuration = function () {
	  var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
	  for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
	    if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
	      return 1;
	    }
	  }
	  return 0;
	}();

	function microtaskDebounce(fn) {
	  var called = false;
	  return function () {
	    if (called) {
	      return;
	    }
	    called = true;
	    window.Promise.resolve().then(function () {
	      called = false;
	      fn();
	    });
	  };
	}

	function taskDebounce(fn) {
	  var scheduled = false;
	  return function () {
	    if (!scheduled) {
	      scheduled = true;
	      setTimeout(function () {
	        scheduled = false;
	        fn();
	      }, timeoutDuration);
	    }
	  };
	}

	var supportsMicroTasks = isBrowser && window.Promise;

	/**
	* Create a debounced version of a method, that's asynchronously deferred
	* but called in the minimum time possible.
	*
	* @method
	* @memberof Popper.Utils
	* @argument {Function} fn
	* @returns {Function}
	*/
	var debounce = supportsMicroTasks ? microtaskDebounce : taskDebounce;

	/**
	 * Check if the given variable is a function
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Any} functionToCheck - variable to check
	 * @returns {Boolean} answer to: is a function?
	 */
	function isFunction$1(functionToCheck) {
	  var getType = {};
	  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
	}

	/**
	 * Get CSS computed property of the given element
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Eement} element
	 * @argument {String} property
	 */
	function getStyleComputedProperty(element, property) {
	  if (element.nodeType !== 1) {
	    return [];
	  }
	  // NOTE: 1 DOM access here
	  var window = element.ownerDocument.defaultView;
	  var css = window.getComputedStyle(element, null);
	  return property ? css[property] : css;
	}

	/**
	 * Returns the parentNode or the host of the element
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Element} element
	 * @returns {Element} parent
	 */
	function getParentNode(element) {
	  if (element.nodeName === 'HTML') {
	    return element;
	  }
	  return element.parentNode || element.host;
	}

	/**
	 * Returns the scrolling parent of the given element
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Element} element
	 * @returns {Element} scroll parent
	 */
	function getScrollParent(element) {
	  // Return body, `getScroll` will take care to get the correct `scrollTop` from it
	  if (!element) {
	    return document.body;
	  }

	  switch (element.nodeName) {
	    case 'HTML':
	    case 'BODY':
	      return element.ownerDocument.body;
	    case '#document':
	      return element.body;
	  }

	  // Firefox want us to check `-x` and `-y` variations as well

	  var _getStyleComputedProp = getStyleComputedProperty(element),
	      overflow = _getStyleComputedProp.overflow,
	      overflowX = _getStyleComputedProp.overflowX,
	      overflowY = _getStyleComputedProp.overflowY;

	  if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
	    return element;
	  }

	  return getScrollParent(getParentNode(element));
	}

	/**
	 * Returns the reference node of the reference object, or the reference object itself.
	 * @method
	 * @memberof Popper.Utils
	 * @param {Element|Object} reference - the reference element (the popper will be relative to this)
	 * @returns {Element} parent
	 */
	function getReferenceNode(reference) {
	  return reference && reference.referenceNode ? reference.referenceNode : reference;
	}

	var isIE11 = isBrowser && !!(window.MSInputMethodContext && document.documentMode);
	var isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent);

	/**
	 * Determines if the browser is Internet Explorer
	 * @method
	 * @memberof Popper.Utils
	 * @param {Number} version to check
	 * @returns {Boolean} isIE
	 */
	function isIE(version) {
	  if (version === 11) {
	    return isIE11;
	  }
	  if (version === 10) {
	    return isIE10;
	  }
	  return isIE11 || isIE10;
	}

	/**
	 * Returns the offset parent of the given element
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Element} element
	 * @returns {Element} offset parent
	 */
	function getOffsetParent(element) {
	  if (!element) {
	    return document.documentElement;
	  }

	  var noOffsetParent = isIE(10) ? document.body : null;

	  // NOTE: 1 DOM access here
	  var offsetParent = element.offsetParent || null;
	  // Skip hidden elements which don't have an offsetParent
	  while (offsetParent === noOffsetParent && element.nextElementSibling) {
	    offsetParent = (element = element.nextElementSibling).offsetParent;
	  }

	  var nodeName = offsetParent && offsetParent.nodeName;

	  if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
	    return element ? element.ownerDocument.documentElement : document.documentElement;
	  }

	  // .offsetParent will return the closest TH, TD or TABLE in case
	  // no offsetParent is present, I hate this job...
	  if (['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {
	    return getOffsetParent(offsetParent);
	  }

	  return offsetParent;
	}

	function isOffsetContainer(element) {
	  var nodeName = element.nodeName;

	  if (nodeName === 'BODY') {
	    return false;
	  }
	  return nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element;
	}

	/**
	 * Finds the root node (document, shadowDOM root) of the given element
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Element} node
	 * @returns {Element} root node
	 */
	function getRoot(node) {
	  if (node.parentNode !== null) {
	    return getRoot(node.parentNode);
	  }

	  return node;
	}

	/**
	 * Finds the offset parent common to the two provided nodes
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Element} element1
	 * @argument {Element} element2
	 * @returns {Element} common offset parent
	 */
	function findCommonOffsetParent(element1, element2) {
	  // This check is needed to avoid errors in case one of the elements isn't defined for any reason
	  if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
	    return document.documentElement;
	  }

	  // Here we make sure to give as "start" the element that comes first in the DOM
	  var order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
	  var start = order ? element1 : element2;
	  var end = order ? element2 : element1;

	  // Get common ancestor container
	  var range = document.createRange();
	  range.setStart(start, 0);
	  range.setEnd(end, 0);
	  var commonAncestorContainer = range.commonAncestorContainer;

	  // Both nodes are inside #document

	  if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) {
	    if (isOffsetContainer(commonAncestorContainer)) {
	      return commonAncestorContainer;
	    }

	    return getOffsetParent(commonAncestorContainer);
	  }

	  // one of the nodes is inside shadowDOM, find which one
	  var element1root = getRoot(element1);
	  if (element1root.host) {
	    return findCommonOffsetParent(element1root.host, element2);
	  } else {
	    return findCommonOffsetParent(element1, getRoot(element2).host);
	  }
	}

	/**
	 * Gets the scroll value of the given element in the given side (top and left)
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Element} element
	 * @argument {String} side `top` or `left`
	 * @returns {number} amount of scrolled pixels
	 */
	function getScroll(element) {
	  var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';

	  var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
	  var nodeName = element.nodeName;

	  if (nodeName === 'BODY' || nodeName === 'HTML') {
	    var html = element.ownerDocument.documentElement;
	    var scrollingElement = element.ownerDocument.scrollingElement || html;
	    return scrollingElement[upperSide];
	  }

	  return element[upperSide];
	}

	/*
	 * Sum or subtract the element scroll values (left and top) from a given rect object
	 * @method
	 * @memberof Popper.Utils
	 * @param {Object} rect - Rect object you want to change
	 * @param {HTMLElement} element - The element from the function reads the scroll values
	 * @param {Boolean} subtract - set to true if you want to subtract the scroll values
	 * @return {Object} rect - The modifier rect object
	 */
	function includeScroll(rect, element) {
	  var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

	  var scrollTop = getScroll(element, 'top');
	  var scrollLeft = getScroll(element, 'left');
	  var modifier = subtract ? -1 : 1;
	  rect.top += scrollTop * modifier;
	  rect.bottom += scrollTop * modifier;
	  rect.left += scrollLeft * modifier;
	  rect.right += scrollLeft * modifier;
	  return rect;
	}

	/*
	 * Helper to detect borders of a given element
	 * @method
	 * @memberof Popper.Utils
	 * @param {CSSStyleDeclaration} styles
	 * Result of `getStyleComputedProperty` on the given element
	 * @param {String} axis - `x` or `y`
	 * @return {number} borders - The borders size of the given axis
	 */

	function getBordersSize(styles, axis) {
	  var sideA = axis === 'x' ? 'Left' : 'Top';
	  var sideB = sideA === 'Left' ? 'Right' : 'Bottom';

	  return parseFloat(styles['border' + sideA + 'Width']) + parseFloat(styles['border' + sideB + 'Width']);
	}

	function getSize(axis, body, html, computedStyle) {
	  return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? parseInt(html['offset' + axis]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')]) : 0);
	}

	function getWindowSizes(document) {
	  var body = document.body;
	  var html = document.documentElement;
	  var computedStyle = isIE(10) && getComputedStyle(html);

	  return {
	    height: getSize('Height', body, html, computedStyle),
	    width: getSize('Width', body, html, computedStyle)
	  };
	}

	var classCallCheck$2 = function (instance, Constructor) {
	  if (!(instance instanceof Constructor)) {
	    throw new TypeError("Cannot call a class as a function");
	  }
	};

	var createClass$2 = function () {
	  function defineProperties(target, props) {
	    for (var i = 0; i < props.length; i++) {
	      var descriptor = props[i];
	      descriptor.enumerable = descriptor.enumerable || false;
	      descriptor.configurable = true;
	      if ("value" in descriptor) descriptor.writable = true;
	      Object.defineProperty(target, descriptor.key, descriptor);
	    }
	  }

	  return function (Constructor, protoProps, staticProps) {
	    if (protoProps) defineProperties(Constructor.prototype, protoProps);
	    if (staticProps) defineProperties(Constructor, staticProps);
	    return Constructor;
	  };
	}();





	var defineProperty = function (obj, key, value) {
	  if (key in obj) {
	    Object.defineProperty(obj, key, {
	      value: value,
	      enumerable: true,
	      configurable: true,
	      writable: true
	    });
	  } else {
	    obj[key] = value;
	  }

	  return obj;
	};

	var _extends$2 = Object.assign || function (target) {
	  for (var i = 1; i < arguments.length; i++) {
	    var source = arguments[i];

	    for (var key in source) {
	      if (Object.prototype.hasOwnProperty.call(source, key)) {
	        target[key] = source[key];
	      }
	    }
	  }

	  return target;
	};

	/**
	 * Given element offsets, generate an output similar to getBoundingClientRect
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Object} offsets
	 * @returns {Object} ClientRect like output
	 */
	function getClientRect(offsets) {
	  return _extends$2({}, offsets, {
	    right: offsets.left + offsets.width,
	    bottom: offsets.top + offsets.height
	  });
	}

	/**
	 * Get bounding client rect of given element
	 * @method
	 * @memberof Popper.Utils
	 * @param {HTMLElement} element
	 * @return {Object} client rect
	 */
	function getBoundingClientRect(element) {
	  var rect = {};

	  // IE10 10 FIX: Please, don't ask, the element isn't
	  // considered in DOM in some circumstances...
	  // This isn't reproducible in IE10 compatibility mode of IE11
	  try {
	    if (isIE(10)) {
	      rect = element.getBoundingClientRect();
	      var scrollTop = getScroll(element, 'top');
	      var scrollLeft = getScroll(element, 'left');
	      rect.top += scrollTop;
	      rect.left += scrollLeft;
	      rect.bottom += scrollTop;
	      rect.right += scrollLeft;
	    } else {
	      rect = element.getBoundingClientRect();
	    }
	  } catch (e) {}

	  var result = {
	    left: rect.left,
	    top: rect.top,
	    width: rect.right - rect.left,
	    height: rect.bottom - rect.top
	  };

	  // subtract scrollbar size from sizes
	  var sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
	  var width = sizes.width || element.clientWidth || result.width;
	  var height = sizes.height || element.clientHeight || result.height;

	  var horizScrollbar = element.offsetWidth - width;
	  var vertScrollbar = element.offsetHeight - height;

	  // if an hypothetical scrollbar is detected, we must be sure it's not a `border`
	  // we make this check conditional for performance reasons
	  if (horizScrollbar || vertScrollbar) {
	    var styles = getStyleComputedProperty(element);
	    horizScrollbar -= getBordersSize(styles, 'x');
	    vertScrollbar -= getBordersSize(styles, 'y');

	    result.width -= horizScrollbar;
	    result.height -= vertScrollbar;
	  }

	  return getClientRect(result);
	}

	function getOffsetRectRelativeToArbitraryNode(children, parent) {
	  var fixedPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

	  var isIE10 = isIE(10);
	  var isHTML = parent.nodeName === 'HTML';
	  var childrenRect = getBoundingClientRect(children);
	  var parentRect = getBoundingClientRect(parent);
	  var scrollParent = getScrollParent(children);

	  var styles = getStyleComputedProperty(parent);
	  var borderTopWidth = parseFloat(styles.borderTopWidth);
	  var borderLeftWidth = parseFloat(styles.borderLeftWidth);

	  // In cases where the parent is fixed, we must ignore negative scroll in offset calc
	  if (fixedPosition && isHTML) {
	    parentRect.top = Math.max(parentRect.top, 0);
	    parentRect.left = Math.max(parentRect.left, 0);
	  }
	  var offsets = getClientRect({
	    top: childrenRect.top - parentRect.top - borderTopWidth,
	    left: childrenRect.left - parentRect.left - borderLeftWidth,
	    width: childrenRect.width,
	    height: childrenRect.height
	  });
	  offsets.marginTop = 0;
	  offsets.marginLeft = 0;

	  // Subtract margins of documentElement in case it's being used as parent
	  // we do this only on HTML because it's the only element that behaves
	  // differently when margins are applied to it. The margins are included in
	  // the box of the documentElement, in the other cases not.
	  if (!isIE10 && isHTML) {
	    var marginTop = parseFloat(styles.marginTop);
	    var marginLeft = parseFloat(styles.marginLeft);

	    offsets.top -= borderTopWidth - marginTop;
	    offsets.bottom -= borderTopWidth - marginTop;
	    offsets.left -= borderLeftWidth - marginLeft;
	    offsets.right -= borderLeftWidth - marginLeft;

	    // Attach marginTop and marginLeft because in some circumstances we may need them
	    offsets.marginTop = marginTop;
	    offsets.marginLeft = marginLeft;
	  }

	  if (isIE10 && !fixedPosition ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') {
	    offsets = includeScroll(offsets, parent);
	  }

	  return offsets;
	}

	function getViewportOffsetRectRelativeToArtbitraryNode(element) {
	  var excludeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

	  var html = element.ownerDocument.documentElement;
	  var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
	  var width = Math.max(html.clientWidth, window.innerWidth || 0);
	  var height = Math.max(html.clientHeight, window.innerHeight || 0);

	  var scrollTop = !excludeScroll ? getScroll(html) : 0;
	  var scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;

	  var offset = {
	    top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
	    left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
	    width: width,
	    height: height
	  };

	  return getClientRect(offset);
	}

	/**
	 * Check if the given element is fixed or is inside a fixed parent
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Element} element
	 * @argument {Element} customContainer
	 * @returns {Boolean} answer to "isFixed?"
	 */
	function isFixed(element) {
	  var nodeName = element.nodeName;
	  if (nodeName === 'BODY' || nodeName === 'HTML') {
	    return false;
	  }
	  if (getStyleComputedProperty(element, 'position') === 'fixed') {
	    return true;
	  }
	  var parentNode = getParentNode(element);
	  if (!parentNode) {
	    return false;
	  }
	  return isFixed(parentNode);
	}

	/**
	 * Finds the first parent of an element that has a transformed property defined
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Element} element
	 * @returns {Element} first transformed parent or documentElement
	 */

	function getFixedPositionOffsetParent(element) {
	  // This check is needed to avoid errors in case one of the elements isn't defined for any reason
	  if (!element || !element.parentElement || isIE()) {
	    return document.documentElement;
	  }
	  var el = element.parentElement;
	  while (el && getStyleComputedProperty(el, 'transform') === 'none') {
	    el = el.parentElement;
	  }
	  return el || document.documentElement;
	}

	/**
	 * Computed the boundaries limits and return them
	 * @method
	 * @memberof Popper.Utils
	 * @param {HTMLElement} popper
	 * @param {HTMLElement} reference
	 * @param {number} padding
	 * @param {HTMLElement} boundariesElement - Element used to define the boundaries
	 * @param {Boolean} fixedPosition - Is in fixed position mode
	 * @returns {Object} Coordinates of the boundaries
	 */
	function getBoundaries(popper, reference, padding, boundariesElement) {
	  var fixedPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;

	  // NOTE: 1 DOM access here

	  var boundaries = { top: 0, left: 0 };
	  var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));

	  // Handle viewport case
	  if (boundariesElement === 'viewport') {
	    boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
	  } else {
	    // Handle other cases based on DOM element used as boundaries
	    var boundariesNode = void 0;
	    if (boundariesElement === 'scrollParent') {
	      boundariesNode = getScrollParent(getParentNode(reference));
	      if (boundariesNode.nodeName === 'BODY') {
	        boundariesNode = popper.ownerDocument.documentElement;
	      }
	    } else if (boundariesElement === 'window') {
	      boundariesNode = popper.ownerDocument.documentElement;
	    } else {
	      boundariesNode = boundariesElement;
	    }

	    var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition);

	    // In case of HTML, we need a different computation
	    if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
	      var _getWindowSizes = getWindowSizes(popper.ownerDocument),
	          height = _getWindowSizes.height,
	          width = _getWindowSizes.width;

	      boundaries.top += offsets.top - offsets.marginTop;
	      boundaries.bottom = height + offsets.top;
	      boundaries.left += offsets.left - offsets.marginLeft;
	      boundaries.right = width + offsets.left;
	    } else {
	      // for all the other DOM elements, this one is good
	      boundaries = offsets;
	    }
	  }

	  // Add paddings
	  padding = padding || 0;
	  var isPaddingNumber = typeof padding === 'number';
	  boundaries.left += isPaddingNumber ? padding : padding.left || 0;
	  boundaries.top += isPaddingNumber ? padding : padding.top || 0;
	  boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
	  boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0;

	  return boundaries;
	}

	function getArea(_ref) {
	  var width = _ref.width,
	      height = _ref.height;

	  return width * height;
	}

	/**
	 * Utility used to transform the `auto` placement to the placement with more
	 * available space.
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Object} data - The data object generated by update method
	 * @argument {Object} options - Modifiers configuration and options
	 * @returns {Object} The data object, properly modified
	 */
	function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) {
	  var padding = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;

	  if (placement.indexOf('auto') === -1) {
	    return placement;
	  }

	  var boundaries = getBoundaries(popper, reference, padding, boundariesElement);

	  var rects = {
	    top: {
	      width: boundaries.width,
	      height: refRect.top - boundaries.top
	    },
	    right: {
	      width: boundaries.right - refRect.right,
	      height: boundaries.height
	    },
	    bottom: {
	      width: boundaries.width,
	      height: boundaries.bottom - refRect.bottom
	    },
	    left: {
	      width: refRect.left - boundaries.left,
	      height: boundaries.height
	    }
	  };

	  var sortedAreas = Object.keys(rects).map(function (key) {
	    return _extends$2({
	      key: key
	    }, rects[key], {
	      area: getArea(rects[key])
	    });
	  }).sort(function (a, b) {
	    return b.area - a.area;
	  });

	  var filteredAreas = sortedAreas.filter(function (_ref2) {
	    var width = _ref2.width,
	        height = _ref2.height;
	    return width >= popper.clientWidth && height >= popper.clientHeight;
	  });

	  var computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;

	  var variation = placement.split('-')[1];

	  return computedPlacement + (variation ? '-' + variation : '');
	}

	/**
	 * Get offsets to the reference element
	 * @method
	 * @memberof Popper.Utils
	 * @param {Object} state
	 * @param {Element} popper - the popper element
	 * @param {Element} reference - the reference element (the popper will be relative to this)
	 * @param {Element} fixedPosition - is in fixed position mode
	 * @returns {Object} An object containing the offsets which will be applied to the popper
	 */
	function getReferenceOffsets(state, popper, reference) {
	  var fixedPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;

	  var commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
	  return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
	}

	/**
	 * Get the outer sizes of the given element (offset size + margins)
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Element} element
	 * @returns {Object} object containing width and height properties
	 */
	function getOuterSizes(element) {
	  var window = element.ownerDocument.defaultView;
	  var styles = window.getComputedStyle(element);
	  var x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
	  var y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
	  var result = {
	    width: element.offsetWidth + y,
	    height: element.offsetHeight + x
	  };
	  return result;
	}

	/**
	 * Get the opposite placement of the given one
	 * @method
	 * @memberof Popper.Utils
	 * @argument {String} placement
	 * @returns {String} flipped placement
	 */
	function getOppositePlacement(placement) {
	  var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
	  return placement.replace(/left|right|bottom|top/g, function (matched) {
	    return hash[matched];
	  });
	}

	/**
	 * Get offsets to the popper
	 * @method
	 * @memberof Popper.Utils
	 * @param {Object} position - CSS position the Popper will get applied
	 * @param {HTMLElement} popper - the popper element
	 * @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this)
	 * @param {String} placement - one of the valid placement options
	 * @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper
	 */
	function getPopperOffsets(popper, referenceOffsets, placement) {
	  placement = placement.split('-')[0];

	  // Get popper node sizes
	  var popperRect = getOuterSizes(popper);

	  // Add position, width and height to our offsets object
	  var popperOffsets = {
	    width: popperRect.width,
	    height: popperRect.height
	  };

	  // depending by the popper placement we have to compute its offsets slightly differently
	  var isHoriz = ['right', 'left'].indexOf(placement) !== -1;
	  var mainSide = isHoriz ? 'top' : 'left';
	  var secondarySide = isHoriz ? 'left' : 'top';
	  var measurement = isHoriz ? 'height' : 'width';
	  var secondaryMeasurement = !isHoriz ? 'height' : 'width';

	  popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2;
	  if (placement === secondarySide) {
	    popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
	  } else {
	    popperOffsets[secondarySide] = referenceOffsets[getOppositePlacement(secondarySide)];
	  }

	  return popperOffsets;
	}

	/**
	 * Mimics the `find` method of Array
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Array} arr
	 * @argument prop
	 * @argument value
	 * @returns index or -1
	 */
	function find(arr, check) {
	  // use native find if supported
	  if (Array.prototype.find) {
	    return arr.find(check);
	  }

	  // use `filter` to obtain the same behavior of `find`
	  return arr.filter(check)[0];
	}

	/**
	 * Return the index of the matching object
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Array} arr
	 * @argument prop
	 * @argument value
	 * @returns index or -1
	 */
	function findIndex(arr, prop, value) {
	  // use native findIndex if supported
	  if (Array.prototype.findIndex) {
	    return arr.findIndex(function (cur) {
	      return cur[prop] === value;
	    });
	  }

	  // use `find` + `indexOf` if `findIndex` isn't supported
	  var match = find(arr, function (obj) {
	    return obj[prop] === value;
	  });
	  return arr.indexOf(match);
	}

	/**
	 * Loop trough the list of modifiers and run them in order,
	 * each of them will then edit the data object.
	 * @method
	 * @memberof Popper.Utils
	 * @param {dataObject} data
	 * @param {Array} modifiers
	 * @param {String} ends - Optional modifier name used as stopper
	 * @returns {dataObject}
	 */
	function runModifiers(modifiers, data, ends) {
	  var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));

	  modifiersToRun.forEach(function (modifier) {
	    if (modifier['function']) {
	      // eslint-disable-line dot-notation
	      console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
	    }
	    var fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
	    if (modifier.enabled && isFunction$1(fn)) {
	      // Add properties to offsets to make them a complete clientRect object
	      // we do this before each modifier to make sure the previous one doesn't
	      // mess with these values
	      data.offsets.popper = getClientRect(data.offsets.popper);
	      data.offsets.reference = getClientRect(data.offsets.reference);

	      data = fn(data, modifier);
	    }
	  });

	  return data;
	}

	/**
	 * Updates the position of the popper, computing the new offsets and applying
	 * the new style.<br />
	 * Prefer `scheduleUpdate` over `update` because of performance reasons.
	 * @method
	 * @memberof Popper
	 */
	function update() {
	  // if popper is destroyed, don't perform any further update
	  if (this.state.isDestroyed) {
	    return;
	  }

	  var data = {
	    instance: this,
	    styles: {},
	    arrowStyles: {},
	    attributes: {},
	    flipped: false,
	    offsets: {}
	  };

	  // compute reference element offsets
	  data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference, this.options.positionFixed);

	  // compute auto placement, store placement inside the data object,
	  // modifiers will be able to edit `placement` if needed
	  // and refer to originalPlacement to know the original value
	  data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding);

	  // store the computed placement inside `originalPlacement`
	  data.originalPlacement = data.placement;

	  data.positionFixed = this.options.positionFixed;

	  // compute the popper offsets
	  data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement);

	  data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute';

	  // run the modifiers
	  data = runModifiers(this.modifiers, data);

	  // the first `update` will call `onCreate` callback
	  // the other ones will call `onUpdate` callback
	  if (!this.state.isCreated) {
	    this.state.isCreated = true;
	    this.options.onCreate(data);
	  } else {
	    this.options.onUpdate(data);
	  }
	}

	/**
	 * Helper used to know if the given modifier is enabled.
	 * @method
	 * @memberof Popper.Utils
	 * @returns {Boolean}
	 */
	function isModifierEnabled(modifiers, modifierName) {
	  return modifiers.some(function (_ref) {
	    var name = _ref.name,
	        enabled = _ref.enabled;
	    return enabled && name === modifierName;
	  });
	}

	/**
	 * Get the prefixed supported property name
	 * @method
	 * @memberof Popper.Utils
	 * @argument {String} property (camelCase)
	 * @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)
	 */
	function getSupportedPropertyName(property) {
	  var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
	  var upperProp = property.charAt(0).toUpperCase() + property.slice(1);

	  for (var i = 0; i < prefixes.length; i++) {
	    var prefix = prefixes[i];
	    var toCheck = prefix ? '' + prefix + upperProp : property;
	    if (typeof document.body.style[toCheck] !== 'undefined') {
	      return toCheck;
	    }
	  }
	  return null;
	}

	/**
	 * Destroys the popper.
	 * @method
	 * @memberof Popper
	 */
	function destroy() {
	  this.state.isDestroyed = true;

	  // touch DOM only if `applyStyle` modifier is enabled
	  if (isModifierEnabled(this.modifiers, 'applyStyle')) {
	    this.popper.removeAttribute('x-placement');
	    this.popper.style.position = '';
	    this.popper.style.top = '';
	    this.popper.style.left = '';
	    this.popper.style.right = '';
	    this.popper.style.bottom = '';
	    this.popper.style.willChange = '';
	    this.popper.style[getSupportedPropertyName('transform')] = '';
	  }

	  this.disableEventListeners();

	  // remove the popper if user explicitly asked for the deletion on destroy
	  // do not use `remove` because IE11 doesn't support it
	  if (this.options.removeOnDestroy) {
	    this.popper.parentNode.removeChild(this.popper);
	  }
	  return this;
	}

	/**
	 * Get the window associated with the element
	 * @argument {Element} element
	 * @returns {Window}
	 */
	function getWindow(element) {
	  var ownerDocument = element.ownerDocument;
	  return ownerDocument ? ownerDocument.defaultView : window;
	}

	function attachToScrollParents(scrollParent, event, callback, scrollParents) {
	  var isBody = scrollParent.nodeName === 'BODY';
	  var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
	  target.addEventListener(event, callback, { passive: true });

	  if (!isBody) {
	    attachToScrollParents(getScrollParent(target.parentNode), event, callback, scrollParents);
	  }
	  scrollParents.push(target);
	}

	/**
	 * Setup needed event listeners used to update the popper position
	 * @method
	 * @memberof Popper.Utils
	 * @private
	 */
	function setupEventListeners(reference, options, state, updateBound) {
	  // Resize event listener on window
	  state.updateBound = updateBound;
	  getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });

	  // Scroll event listener on scroll parents
	  var scrollElement = getScrollParent(reference);
	  attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);
	  state.scrollElement = scrollElement;
	  state.eventsEnabled = true;

	  return state;
	}

	/**
	 * It will add resize/scroll events and start recalculating
	 * position of the popper element when they are triggered.
	 * @method
	 * @memberof Popper
	 */
	function enableEventListeners() {
	  if (!this.state.eventsEnabled) {
	    this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate);
	  }
	}

	/**
	 * Remove event listeners used to update the popper position
	 * @method
	 * @memberof Popper.Utils
	 * @private
	 */
	function removeEventListeners(reference, state) {
	  // Remove resize event listener on window
	  getWindow(reference).removeEventListener('resize', state.updateBound);

	  // Remove scroll event listener on scroll parents
	  state.scrollParents.forEach(function (target) {
	    target.removeEventListener('scroll', state.updateBound);
	  });

	  // Reset state
	  state.updateBound = null;
	  state.scrollParents = [];
	  state.scrollElement = null;
	  state.eventsEnabled = false;
	  return state;
	}

	/**
	 * It will remove resize/scroll events and won't recalculate popper position
	 * when they are triggered. It also won't trigger `onUpdate` callback anymore,
	 * unless you call `update` method manually.
	 * @method
	 * @memberof Popper
	 */
	function disableEventListeners() {
	  if (this.state.eventsEnabled) {
	    cancelAnimationFrame(this.scheduleUpdate);
	    this.state = removeEventListeners(this.reference, this.state);
	  }
	}

	/**
	 * Tells if a given input is a number
	 * @method
	 * @memberof Popper.Utils
	 * @param {*} input to check
	 * @return {Boolean}
	 */
	function isNumeric(n) {
	  return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
	}

	/**
	 * Set the style to the given popper
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Element} element - Element to apply the style to
	 * @argument {Object} styles
	 * Object with a list of properties and values which will be applied to the element
	 */
	function setStyles(element, styles) {
	  Object.keys(styles).forEach(function (prop) {
	    var unit = '';
	    // add unit if the value is numeric and is one of the following
	    if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
	      unit = 'px';
	    }
	    element.style[prop] = styles[prop] + unit;
	  });
	}

	/**
	 * Set the attributes to the given popper
	 * @method
	 * @memberof Popper.Utils
	 * @argument {Element} element - Element to apply the attributes to
	 * @argument {Object} styles
	 * Object with a list of properties and values which will be applied to the element
	 */
	function setAttributes(element, attributes) {
	  Object.keys(attributes).forEach(function (prop) {
	    var value = attributes[prop];
	    if (value !== false) {
	      element.setAttribute(prop, attributes[prop]);
	    } else {
	      element.removeAttribute(prop);
	    }
	  });
	}

	/**
	 * @function
	 * @memberof Modifiers
	 * @argument {Object} data - The data object generated by `update` method
	 * @argument {Object} data.styles - List of style properties - values to apply to popper element
	 * @argument {Object} data.attributes - List of attribute properties - values to apply to popper element
	 * @argument {Object} options - Modifiers configuration and options
	 * @returns {Object} The same data object
	 */
	function applyStyle(data) {
	  // any property present in `data.styles` will be applied to the popper,
	  // in this way we can make the 3rd party modifiers add custom styles to it
	  // Be aware, modifiers could override the properties defined in the previous
	  // lines of this modifier!
	  setStyles(data.instance.popper, data.styles);

	  // any property present in `data.attributes` will be applied to the popper,
	  // they will be set as HTML attributes of the element
	  setAttributes(data.instance.popper, data.attributes);

	  // if arrowElement is defined and arrowStyles has some properties
	  if (data.arrowElement && Object.keys(data.arrowStyles).length) {
	    setStyles(data.arrowElement, data.arrowStyles);
	  }

	  return data;
	}

	/**
	 * Set the x-placement attribute before everything else because it could be used
	 * to add margins to the popper margins needs to be calculated to get the
	 * correct popper offsets.
	 * @method
	 * @memberof Popper.modifiers
	 * @param {HTMLElement} reference - The reference element used to position the popper
	 * @param {HTMLElement} popper - The HTML element used as popper
	 * @param {Object} options - Popper.js options
	 */
	function applyStyleOnLoad(reference, popper, options, modifierOptions, state) {
	  // compute reference element offsets
	  var referenceOffsets = getReferenceOffsets(state, popper, reference, options.positionFixed);

	  // compute auto placement, store placement inside the data object,
	  // modifiers will be able to edit `placement` if needed
	  // and refer to originalPlacement to know the original value
	  var placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding);

	  popper.setAttribute('x-placement', placement);

	  // Apply `position` to popper before anything else because
	  // without the position applied we can't guarantee correct computations
	  setStyles(popper, { position: options.positionFixed ? 'fixed' : 'absolute' });

	  return options;
	}

	/**
	 * @function
	 * @memberof Popper.Utils
	 * @argument {Object} data - The data object generated by `update` method
	 * @argument {Boolean} shouldRound - If the offsets should be rounded at all
	 * @returns {Object} The popper's position offsets rounded
	 *
	 * The tale of pixel-perfect positioning. It's still not 100% perfect, but as
	 * good as it can be within reason.
	 * Discussion here: https://github.com/FezVrasta/popper.js/pull/715
	 *
	 * Low DPI screens cause a popper to be blurry if not using full pixels (Safari
	 * as well on High DPI screens).
	 *
	 * Firefox prefers no rounding for positioning and does not have blurriness on
	 * high DPI screens.
	 *
	 * Only horizontal placement and left/right values need to be considered.
	 */
	function getRoundedOffsets(data, shouldRound) {
	  var _data$offsets = data.offsets,
	      popper = _data$offsets.popper,
	      reference = _data$offsets.reference;
	  var round = Math.round,
	      floor = Math.floor;

	  var noRound = function noRound(v) {
	    return v;
	  };

	  var referenceWidth = round(reference.width);
	  var popperWidth = round(popper.width);

	  var isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
	  var isVariation = data.placement.indexOf('-') !== -1;
	  var sameWidthParity = referenceWidth % 2 === popperWidth % 2;
	  var bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;

	  var horizontalToInteger = !shouldRound ? noRound : isVertical || isVariation || sameWidthParity ? round : floor;
	  var verticalToInteger = !shouldRound ? noRound : round;

	  return {
	    left: horizontalToInteger(bothOddWidth && !isVariation && shouldRound ? popper.left - 1 : popper.left),
	    top: verticalToInteger(popper.top),
	    bottom: verticalToInteger(popper.bottom),
	    right: horizontalToInteger(popper.right)
	  };
	}

	var isFirefox = isBrowser && /Firefox/i.test(navigator.userAgent);

	/**
	 * @function
	 * @memberof Modifiers
	 * @argument {Object} data - The data object generated by `update` method
	 * @argument {Object} options - Modifiers configuration and options
	 * @returns {Object} The data object, properly modified
	 */
	function computeStyle(data, options) {
	  var x = options.x,
	      y = options.y;
	  var popper = data.offsets.popper;

	  // Remove this legacy support in Popper.js v2

	  var legacyGpuAccelerationOption = find(data.instance.modifiers, function (modifier) {
	    return modifier.name === 'applyStyle';
	  }).gpuAcceleration;
	  if (legacyGpuAccelerationOption !== undefined) {
	    console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
	  }
	  var gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration;

	  var offsetParent = getOffsetParent(data.instance.popper);
	  var offsetParentRect = getBoundingClientRect(offsetParent);

	  // Styles
	  var styles = {
	    position: popper.position
	  };

	  var offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox);

	  var sideA = x === 'bottom' ? 'top' : 'bottom';
	  var sideB = y === 'right' ? 'left' : 'right';

	  // if gpuAcceleration is set to `true` and transform is supported,
	  //  we use `translate3d` to apply the position to the popper we
	  // automatically use the supported prefixed version if needed
	  var prefixedProperty = getSupportedPropertyName('transform');

	  // now, let's make a step back and look at this code closely (wtf?)
	  // If the content of the popper grows once it's been positioned, it
	  // may happen that the popper gets misplaced because of the new content
	  // overflowing its reference element
	  // To avoid this problem, we provide two options (x and y), which allow
	  // the consumer to define the offset origin.
	  // If we position a popper on top of a reference element, we can set
	  // `x` to `top` to make the popper grow towards its top instead of
	  // its bottom.
	  var left = void 0,
	      top = void 0;
	  if (sideA === 'bottom') {
	    // when offsetParent is <html> the positioning is relative to the bottom of the screen (excluding the scrollbar)
	    // and not the bottom of the html element
	    if (offsetParent.nodeName === 'HTML') {
	      top = -offsetParent.clientHeight + offsets.bottom;
	    } else {
	      top = -offsetParentRect.height + offsets.bottom;
	    }
	  } else {
	    top = offsets.top;
	  }
	  if (sideB === 'right') {
	    if (offsetParent.nodeName === 'HTML') {
	      left = -offsetParent.clientWidth + offsets.right;
	    } else {
	      left = -offsetParentRect.width + offsets.right;
	    }
	  } else {
	    left = offsets.left;
	  }
	  if (gpuAcceleration && prefixedProperty) {
	    styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
	    styles[sideA] = 0;
	    styles[sideB] = 0;
	    styles.willChange = 'transform';
	  } else {
	    // othwerise, we use the standard `top`, `left`, `bottom` and `right` properties
	    var invertTop = sideA === 'bottom' ? -1 : 1;
	    var invertLeft = sideB === 'right' ? -1 : 1;
	    styles[sideA] = top * invertTop;
	    styles[sideB] = left * invertLeft;
	    styles.willChange = sideA + ', ' + sideB;
	  }

	  // Attributes
	  var attributes = {
	    'x-placement': data.placement
	  };

	  // Update `data` attributes, styles and arrowStyles
	  data.attributes = _extends$2({}, attributes, data.attributes);
	  data.styles = _extends$2({}, styles, data.styles);
	  data.arrowStyles = _extends$2({}, data.offsets.arrow, data.arrowStyles);

	  return data;
	}

	/**
	 * Helper used to know if the given modifier depends from another one.<br />
	 * It checks if the needed modifier is listed and enabled.
	 * @method
	 * @memberof Popper.Utils
	 * @param {Array} modifiers - list of modifiers
	 * @param {String} requestingName - name of requesting modifier
	 * @param {String} requestedName - name of requested modifier
	 * @returns {Boolean}
	 */
	function isModifierRequired(modifiers, requestingName, requestedName) {
	  var requesting = find(modifiers, function (_ref) {
	    var name = _ref.name;
	    return name === requestingName;
	  });

	  var isRequired = !!requesting && modifiers.some(function (modifier) {
	    return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
	  });

	  if (!isRequired) {
	    var _requesting = '`' + requestingName + '`';
	    var requested = '`' + requestedName + '`';
	    console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
	  }
	  return isRequired;
	}

	/**
	 * @function
	 * @memberof Modifiers
	 * @argument {Object} data - The data object generated by update method
	 * @argument {Object} options - Modifiers configuration and options
	 * @returns {Object} The data object, properly modified
	 */
	function arrow(data, options) {
	  var _data$offsets$arrow;

	  // arrow depends on keepTogether in order to work
	  if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
	    return data;
	  }

	  var arrowElement = options.element;

	  // if arrowElement is a string, suppose it's a CSS selector
	  if (typeof arrowElement === 'string') {
	    arrowElement = data.instance.popper.querySelector(arrowElement);

	    // if arrowElement is not found, don't run the modifier
	    if (!arrowElement) {
	      return data;
	    }
	  } else {
	    // if the arrowElement isn't a query selector we must check that the
	    // provided DOM node is child of its popper node
	    if (!data.instance.popper.contains(arrowElement)) {
	      console.warn('WARNING: `arrow.element` must be child of its popper element!');
	      return data;
	    }
	  }

	  var placement = data.placement.split('-')[0];
	  var _data$offsets = data.offsets,
	      popper = _data$offsets.popper,
	      reference = _data$offsets.reference;

	  var isVertical = ['left', 'right'].indexOf(placement) !== -1;

	  var len = isVertical ? 'height' : 'width';
	  var sideCapitalized = isVertical ? 'Top' : 'Left';
	  var side = sideCapitalized.toLowerCase();
	  var altSide = isVertical ? 'left' : 'top';
	  var opSide = isVertical ? 'bottom' : 'right';
	  var arrowElementSize = getOuterSizes(arrowElement)[len];

	  //
	  // extends keepTogether behavior making sure the popper and its
	  // reference have enough pixels in conjunction
	  //

	  // top/left side
	  if (reference[opSide] - arrowElementSize < popper[side]) {
	    data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize);
	  }
	  // bottom/right side
	  if (reference[side] + arrowElementSize > popper[opSide]) {
	    data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide];
	  }
	  data.offsets.popper = getClientRect(data.offsets.popper);

	  // compute center of the popper
	  var center = reference[side] + reference[len] / 2 - arrowElementSize / 2;

	  // Compute the sideValue using the updated popper offsets
	  // take popper margin in account because we don't have this info available
	  var css = getStyleComputedProperty(data.instance.popper);
	  var popperMarginSide = parseFloat(css['margin' + sideCapitalized]);
	  var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width']);
	  var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;

	  // prevent arrowElement from being placed not contiguously to its popper
	  sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);

	  data.arrowElement = arrowElement;
	  data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty(_data$offsets$arrow, altSide, ''), _data$offsets$arrow);

	  return data;
	}

	/**
	 * Get the opposite placement variation of the given one
	 * @method
	 * @memberof Popper.Utils
	 * @argument {String} placement variation
	 * @returns {String} flipped placement variation
	 */
	function getOppositeVariation(variation) {
	  if (variation === 'end') {
	    return 'start';
	  } else if (variation === 'start') {
	    return 'end';
	  }
	  return variation;
	}

	/**
	 * List of accepted placements to use as values of the `placement` option.<br />
	 * Valid placements are:
	 * - `auto`
	 * - `top`
	 * - `right`
	 * - `bottom`
	 * - `left`
	 *
	 * Each placement can have a variation from this list:
	 * - `-start`
	 * - `-end`
	 *
	 * Variations are interpreted easily if you think of them as the left to right
	 * written languages. Horizontally (`top` and `bottom`), `start` is left and `end`
	 * is right.<br />
	 * Vertically (`left` and `right`), `start` is top and `end` is bottom.
	 *
	 * Some valid examples are:
	 * - `top-end` (on top of reference, right aligned)
	 * - `right-start` (on right of reference, top aligned)
	 * - `bottom` (on bottom, centered)
	 * - `auto-end` (on the side with more space available, alignment depends by placement)
	 *
	 * @static
	 * @type {Array}
	 * @enum {String}
	 * @readonly
	 * @method placements
	 * @memberof Popper
	 */
	var placements = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'];

	// Get rid of `auto` `auto-start` and `auto-end`
	var validPlacements = placements.slice(3);

	/**
	 * Given an initial placement, returns all the subsequent placements
	 * clockwise (or counter-clockwise).
	 *
	 * @method
	 * @memberof Popper.Utils
	 * @argument {String} placement - A valid placement (it accepts variations)
	 * @argument {Boolean} counter - Set to true to walk the placements counterclockwise
	 * @returns {Array} placements including their variations
	 */
	function clockwise(placement) {
	  var counter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

	  var index = validPlacements.indexOf(placement);
	  var arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index));
	  return counter ? arr.reverse() : arr;
	}

	var BEHAVIORS = {
	  FLIP: 'flip',
	  CLOCKWISE: 'clockwise',
	  COUNTERCLOCKWISE: 'counterclockwise'
	};

	/**
	 * @function
	 * @memberof Modifiers
	 * @argument {Object} data - The data object generated by update method
	 * @argument {Object} options - Modifiers configuration and options
	 * @returns {Object} The data object, properly modified
	 */
	function flip(data, options) {
	  // if `inner` modifier is enabled, we can't use the `flip` modifier
	  if (isModifierEnabled(data.instance.modifiers, 'inner')) {
	    return data;
	  }

	  if (data.flipped && data.placement === data.originalPlacement) {
	    // seems like flip is trying to loop, probably there's not enough space on any of the flippable sides
	    return data;
	  }

	  var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement, data.positionFixed);

	  var placement = data.placement.split('-')[0];
	  var placementOpposite = getOppositePlacement(placement);
	  var variation = data.placement.split('-')[1] || '';

	  var flipOrder = [];

	  switch (options.behavior) {
	    case BEHAVIORS.FLIP:
	      flipOrder = [placement, placementOpposite];
	      break;
	    case BEHAVIORS.CLOCKWISE:
	      flipOrder = clockwise(placement);
	      break;
	    case BEHAVIORS.COUNTERCLOCKWISE:
	      flipOrder = clockwise(placement, true);
	      break;
	    default:
	      flipOrder = options.behavior;
	  }

	  flipOrder.forEach(function (step, index) {
	    if (placement !== step || flipOrder.length === index + 1) {
	      return data;
	    }

	    placement = data.placement.split('-')[0];
	    placementOpposite = getOppositePlacement(placement);

	    var popperOffsets = data.offsets.popper;
	    var refOffsets = data.offsets.reference;

	    // using floor because the reference offsets may contain decimals we are not going to consider here
	    var floor = Math.floor;
	    var overlapsRef = placement === 'left' && floor(popperOffsets.right) > floor(refOffsets.left) || placement === 'right' && floor(popperOffsets.left) < floor(refOffsets.right) || placement === 'top' && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === 'bottom' && floor(popperOffsets.top) < floor(refOffsets.bottom);

	    var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);
	    var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);
	    var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);
	    var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);

	    var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom;

	    // flip the variation if required
	    var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;

	    // flips variation if reference element overflows boundaries
	    var flippedVariationByRef = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom);

	    // flips variation if popper content overflows boundaries
	    var flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === 'start' && overflowsRight || isVertical && variation === 'end' && overflowsLeft || !isVertical && variation === 'start' && overflowsBottom || !isVertical && variation === 'end' && overflowsTop);

	    var flippedVariation = flippedVariationByRef || flippedVariationByContent;

	    if (overlapsRef || overflowsBoundaries || flippedVariation) {
	      // this boolean to detect any flip loop
	      data.flipped = true;

	      if (overlapsRef || overflowsBoundaries) {
	        placement = flipOrder[index + 1];
	      }

	      if (flippedVariation) {
	        variation = getOppositeVariation(variation);
	      }

	      data.placement = placement + (variation ? '-' + variation : '');

	      // this object contains `position`, we want to preserve it along with
	      // any additional property we may add in the future
	      data.offsets.popper = _extends$2({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));

	      data = runModifiers(data.instance.modifiers, data, 'flip');
	    }
	  });
	  return data;
	}

	/**
	 * @function
	 * @memberof Modifiers
	 * @argument {Object} data - The data object generated by update method
	 * @argument {Object} options - Modifiers configuration and options
	 * @returns {Object} The data object, properly modified
	 */
	function keepTogether(data) {
	  var _data$offsets = data.offsets,
	      popper = _data$offsets.popper,
	      reference = _data$offsets.reference;

	  var placement = data.placement.split('-')[0];
	  var floor = Math.floor;
	  var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
	  var side = isVertical ? 'right' : 'bottom';
	  var opSide = isVertical ? 'left' : 'top';
	  var measurement = isVertical ? 'width' : 'height';

	  if (popper[side] < floor(reference[opSide])) {
	    data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];
	  }
	  if (popper[opSide] > floor(reference[side])) {
	    data.offsets.popper[opSide] = floor(reference[side]);
	  }

	  return data;
	}

	/**
	 * Converts a string containing value + unit into a px value number
	 * @function
	 * @memberof {modifiers~offset}
	 * @private
	 * @argument {String} str - Value + unit string
	 * @argument {String} measurement - `height` or `width`
	 * @argument {Object} popperOffsets
	 * @argument {Object} referenceOffsets
	 * @returns {Number|String}
	 * Value in pixels, or original string if no values were extracted
	 */
	function toValue(str, measurement, popperOffsets, referenceOffsets) {
	  // separate value from unit
	  var split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/);
	  var value = +split[1];
	  var unit = split[2];

	  // If it's not a number it's an operator, I guess
	  if (!value) {
	    return str;
	  }

	  if (unit.indexOf('%') === 0) {
	    var element = void 0;
	    switch (unit) {
	      case '%p':
	        element = popperOffsets;
	        break;
	      case '%':
	      case '%r':
	      default:
	        element = referenceOffsets;
	    }

	    var rect = getClientRect(element);
	    return rect[measurement] / 100 * value;
	  } else if (unit === 'vh' || unit === 'vw') {
	    // if is a vh or vw, we calculate the size based on the viewport
	    var size = void 0;
	    if (unit === 'vh') {
	      size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
	    } else {
	      size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
	    }
	    return size / 100 * value;
	  } else {
	    // if is an explicit pixel unit, we get rid of the unit and keep the value
	    // if is an implicit unit, it's px, and we return just the value
	    return value;
	  }
	}

	/**
	 * Parse an `offset` string to extrapolate `x` and `y` numeric offsets.
	 * @function
	 * @memberof {modifiers~offset}
	 * @private
	 * @argument {String} offset
	 * @argument {Object} popperOffsets
	 * @argument {Object} referenceOffsets
	 * @argument {String} basePlacement
	 * @returns {Array} a two cells array with x and y offsets in numbers
	 */
	function parseOffset(offset, popperOffsets, referenceOffsets, basePlacement) {
	  var offsets = [0, 0];

	  // Use height if placement is left or right and index is 0 otherwise use width
	  // in this way the first offset will use an axis and the second one
	  // will use the other one
	  var useHeight = ['right', 'left'].indexOf(basePlacement) !== -1;

	  // Split the offset string to obtain a list of values and operands
	  // The regex addresses values with the plus or minus sign in front (+10, -20, etc)
	  var fragments = offset.split(/(\+|\-)/).map(function (frag) {
	    return frag.trim();
	  });

	  // Detect if the offset string contains a pair of values or a single one
	  // they could be separated by comma or space
	  var divider = fragments.indexOf(find(fragments, function (frag) {
	    return frag.search(/,|\s/) !== -1;
	  }));

	  if (fragments[divider] && fragments[divider].indexOf(',') === -1) {
	    console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
	  }

	  // If divider is found, we divide the list of values and operands to divide
	  // them by ofset X and Y.
	  var splitRegex = /\s*,\s*|\s+/;
	  var ops = divider !== -1 ? [fragments.slice(0, divider).concat([fragments[divider].split(splitRegex)[0]]), [fragments[divider].split(splitRegex)[1]].concat(fragments.slice(divider + 1))] : [fragments];

	  // Convert the values with units to absolute pixels to allow our computations
	  ops = ops.map(function (op, index) {
	    // Most of the units rely on the orientation of the popper
	    var measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width';
	    var mergeWithPrevious = false;
	    return op
	    // This aggregates any `+` or `-` sign that aren't considered operators
	    // e.g.: 10 + +5 => [10, +, +5]
	    .reduce(function (a, b) {
	      if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {
	        a[a.length - 1] = b;
	        mergeWithPrevious = true;
	        return a;
	      } else if (mergeWithPrevious) {
	        a[a.length - 1] += b;
	        mergeWithPrevious = false;
	        return a;
	      } else {
	        return a.concat(b);
	      }
	    }, [])
	    // Here we convert the string values into number values (in px)
	    .map(function (str) {
	      return toValue(str, measurement, popperOffsets, referenceOffsets);
	    });
	  });

	  // Loop trough the offsets arrays and execute the operations
	  ops.forEach(function (op, index) {
	    op.forEach(function (frag, index2) {
	      if (isNumeric(frag)) {
	        offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);
	      }
	    });
	  });
	  return offsets;
	}

	/**
	 * @function
	 * @memberof Modifiers
	 * @argument {Object} data - The data object generated by update method
	 * @argument {Object} options - Modifiers configuration and options
	 * @argument {Number|String} options.offset=0
	 * The offset value as described in the modifier description
	 * @returns {Object} The data object, properly modified
	 */
	function offset(data, _ref) {
	  var offset = _ref.offset;
	  var placement = data.placement,
	      _data$offsets = data.offsets,
	      popper = _data$offsets.popper,
	      reference = _data$offsets.reference;

	  var basePlacement = placement.split('-')[0];

	  var offsets = void 0;
	  if (isNumeric(+offset)) {
	    offsets = [+offset, 0];
	  } else {
	    offsets = parseOffset(offset, popper, reference, basePlacement);
	  }

	  if (basePlacement === 'left') {
	    popper.top += offsets[0];
	    popper.left -= offsets[1];
	  } else if (basePlacement === 'right') {
	    popper.top += offsets[0];
	    popper.left += offsets[1];
	  } else if (basePlacement === 'top') {
	    popper.left += offsets[0];
	    popper.top -= offsets[1];
	  } else if (basePlacement === 'bottom') {
	    popper.left += offsets[0];
	    popper.top += offsets[1];
	  }

	  data.popper = popper;
	  return data;
	}

	/**
	 * @function
	 * @memberof Modifiers
	 * @argument {Object} data - The data object generated by `update` method
	 * @argument {Object} options - Modifiers configuration and options
	 * @returns {Object} The data object, properly modified
	 */
	function preventOverflow(data, options) {
	  var boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper);

	  // If offsetParent is the reference element, we really want to
	  // go one step up and use the next offsetParent as reference to
	  // avoid to make this modifier completely useless and look like broken
	  if (data.instance.reference === boundariesElement) {
	    boundariesElement = getOffsetParent(boundariesElement);
	  }

	  // NOTE: DOM access here
	  // resets the popper's position so that the document size can be calculated excluding
	  // the size of the popper element itself
	  var transformProp = getSupportedPropertyName('transform');
	  var popperStyles = data.instance.popper.style; // assignment to help minification
	  var top = popperStyles.top,
	      left = popperStyles.left,
	      transform = popperStyles[transformProp];

	  popperStyles.top = '';
	  popperStyles.left = '';
	  popperStyles[transformProp] = '';

	  var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement, data.positionFixed);

	  // NOTE: DOM access here
	  // restores the original style properties after the offsets have been computed
	  popperStyles.top = top;
	  popperStyles.left = left;
	  popperStyles[transformProp] = transform;

	  options.boundaries = boundaries;

	  var order = options.priority;
	  var popper = data.offsets.popper;

	  var check = {
	    primary: function primary(placement) {
	      var value = popper[placement];
	      if (popper[placement] < boundaries[placement] && !options.escapeWithReference) {
	        value = Math.max(popper[placement], boundaries[placement]);
	      }
	      return defineProperty({}, placement, value);
	    },
	    secondary: function secondary(placement) {
	      var mainSide = placement === 'right' ? 'left' : 'top';
	      var value = popper[mainSide];
	      if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {
	        value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));
	      }
	      return defineProperty({}, mainSide, value);
	    }
	  };

	  order.forEach(function (placement) {
	    var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
	    popper = _extends$2({}, popper, check[side](placement));
	  });

	  data.offsets.popper = popper;

	  return data;
	}

	/**
	 * @function
	 * @memberof Modifiers
	 * @argument {Object} data - The data object generated by `update` method
	 * @argument {Object} options - Modifiers configuration and options
	 * @returns {Object} The data object, properly modified
	 */
	function shift(data) {
	  var placement = data.placement;
	  var basePlacement = placement.split('-')[0];
	  var shiftvariation = placement.split('-')[1];

	  // if shift shiftvariation is specified, run the modifier
	  if (shiftvariation) {
	    var _data$offsets = data.offsets,
	        reference = _data$offsets.reference,
	        popper = _data$offsets.popper;

	    var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
	    var side = isVertical ? 'left' : 'top';
	    var measurement = isVertical ? 'width' : 'height';

	    var shiftOffsets = {
	      start: defineProperty({}, side, reference[side]),
	      end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
	    };

	    data.offsets.popper = _extends$2({}, popper, shiftOffsets[shiftvariation]);
	  }

	  return data;
	}

	/**
	 * @function
	 * @memberof Modifiers
	 * @argument {Object} data - The data object generated by update method
	 * @argument {Object} options - Modifiers configuration and options
	 * @returns {Object} The data object, properly modified
	 */
	function hide(data) {
	  if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {
	    return data;
	  }

	  var refRect = data.offsets.reference;
	  var bound = find(data.instance.modifiers, function (modifier) {
	    return modifier.name === 'preventOverflow';
	  }).boundaries;

	  if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
	    // Avoid unnecessary DOM access if visibility hasn't changed
	    if (data.hide === true) {
	      return data;
	    }

	    data.hide = true;
	    data.attributes['x-out-of-boundaries'] = '';
	  } else {
	    // Avoid unnecessary DOM access if visibility hasn't changed
	    if (data.hide === false) {
	      return data;
	    }

	    data.hide = false;
	    data.attributes['x-out-of-boundaries'] = false;
	  }

	  return data;
	}

	/**
	 * @function
	 * @memberof Modifiers
	 * @argument {Object} data - The data object generated by `update` method
	 * @argument {Object} options - Modifiers configuration and options
	 * @returns {Object} The data object, properly modified
	 */
	function inner(data) {
	  var placement = data.placement;
	  var basePlacement = placement.split('-')[0];
	  var _data$offsets = data.offsets,
	      popper = _data$offsets.popper,
	      reference = _data$offsets.reference;

	  var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;

	  var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;

	  popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);

	  data.placement = getOppositePlacement(placement);
	  data.offsets.popper = getClientRect(popper);

	  return data;
	}

	/**
	 * Modifier function, each modifier can have a function of this type assigned
	 * to its `fn` property.<br />
	 * These functions will be called on each update, this means that you must
	 * make sure they are performant enough to avoid performance bottlenecks.
	 *
	 * @function ModifierFn
	 * @argument {dataObject} data - The data object generated by `update` method
	 * @argument {Object} options - Modifiers configuration and options
	 * @returns {dataObject} The data object, properly modified
	 */

	/**
	 * Modifiers are plugins used to alter the behavior of your poppers.<br />
	 * Popper.js uses a set of 9 modifiers to provide all the basic functionalities
	 * needed by the library.
	 *
	 * Usually you don't want to override the `order`, `fn` and `onLoad` props.
	 * All the other properties are configurations that could be tweaked.
	 * @namespace modifiers
	 */
	var modifiers = {
	  /**
	   * Modifier used to shift the popper on the start or end of its reference
	   * element.<br />
	   * It will read the variation of the `placement` property.<br />
	   * It can be one either `-end` or `-start`.
	   * @memberof modifiers
	   * @inner
	   */
	  shift: {
	    /** @prop {number} order=100 - Index used to define the order of execution */
	    order: 100,
	    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
	    enabled: true,
	    /** @prop {ModifierFn} */
	    fn: shift
	  },

	  /**
	   * The `offset` modifier can shift your popper on both its axis.
	   *
	   * It accepts the following units:
	   * - `px` or unit-less, interpreted as pixels
	   * - `%` or `%r`, percentage relative to the length of the reference element
	   * - `%p`, percentage relative to the length of the popper element
	   * - `vw`, CSS viewport width unit
	   * - `vh`, CSS viewport height unit
	   *
	   * For length is intended the main axis relative to the placement of the popper.<br />
	   * This means that if the placement is `top` or `bottom`, the length will be the
	   * `width`. In case of `left` or `right`, it will be the `height`.
	   *
	   * You can provide a single value (as `Number` or `String`), or a pair of values
	   * as `String` divided by a comma or one (or more) white spaces.<br />
	   * The latter is a deprecated method because it leads to confusion and will be
	   * removed in v2.<br />
	   * Additionally, it accepts additions and subtractions between different units.
	   * Note that multiplications and divisions aren't supported.
	   *
	   * Valid examples are:
	   * ```
	   * 10
	   * '10%'
	   * '10, 10'
	   * '10%, 10'
	   * '10 + 10%'
	   * '10 - 5vh + 3%'
	   * '-10px + 5vh, 5px - 6%'
	   * ```
	   * > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap
	   * > with their reference element, unfortunately, you will have to disable the `flip` modifier.
	   * > You can read more on this at this [issue](https://github.com/FezVrasta/popper.js/issues/373).
	   *
	   * @memberof modifiers
	   * @inner
	   */
	  offset: {
	    /** @prop {number} order=200 - Index used to define the order of execution */
	    order: 200,
	    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
	    enabled: true,
	    /** @prop {ModifierFn} */
	    fn: offset,
	    /** @prop {Number|String} offset=0
	     * The offset value as described in the modifier description
	     */
	    offset: 0
	  },

	  /**
	   * Modifier used to prevent the popper from being positioned outside the boundary.
	   *
	   * A scenario exists where the reference itself is not within the boundaries.<br />
	   * We can say it has "escaped the boundaries" — or just "escaped".<br />
	   * In this case we need to decide whether the popper should either:
	   *
	   * - detach from the reference and remain "trapped" in the boundaries, or
	   * - if it should ignore the boundary and "escape with its reference"
	   *
	   * When `escapeWithReference` is set to`true` and reference is completely
	   * outside its boundaries, the popper will overflow (or completely leave)
	   * the boundaries in order to remain attached to the edge of the reference.
	   *
	   * @memberof modifiers
	   * @inner
	   */
	  preventOverflow: {
	    /** @prop {number} order=300 - Index used to define the order of execution */
	    order: 300,
	    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
	    enabled: true,
	    /** @prop {ModifierFn} */
	    fn: preventOverflow,
	    /**
	     * @prop {Array} [priority=['left','right','top','bottom']]
	     * Popper will try to prevent overflow following these priorities by default,
	     * then, it could overflow on the left and on top of the `boundariesElement`
	     */
	    priority: ['left', 'right', 'top', 'bottom'],
	    /**
	     * @prop {number} padding=5
	     * Amount of pixel used to define a minimum distance between the boundaries
	     * and the popper. This makes sure the popper always has a little padding
	     * between the edges of its container
	     */
	    padding: 5,
	    /**
	     * @prop {String|HTMLElement} boundariesElement='scrollParent'
	     * Boundaries used by the modifier. Can be `scrollParent`, `window`,
	     * `viewport` or any DOM element.
	     */
	    boundariesElement: 'scrollParent'
	  },

	  /**
	   * Modifier used to make sure the reference and its popper stay near each other
	   * without leaving any gap between the two. Especially useful when the arrow is
	   * enabled and you want to ensure that it points to its reference element.
	   * It cares only about the first axis. You can still have poppers with margin
	   * between the popper and its reference element.
	   * @memberof modifiers
	   * @inner
	   */
	  keepTogether: {
	    /** @prop {number} order=400 - Index used to define the order of execution */
	    order: 400,
	    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
	    enabled: true,
	    /** @prop {ModifierFn} */
	    fn: keepTogether
	  },

	  /**
	   * This modifier is used to move the `arrowElement` of the popper to make
	   * sure it is positioned between the reference element and its popper element.
	   * It will read the outer size of the `arrowElement` node to detect how many
	   * pixels of conjunction are needed.
	   *
	   * It has no effect if no `arrowElement` is provided.
	   * @memberof modifiers
	   * @inner
	   */
	  arrow: {
	    /** @prop {number} order=500 - Index used to define the order of execution */
	    order: 500,
	    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
	    enabled: true,
	    /** @prop {ModifierFn} */
	    fn: arrow,
	    /** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */
	    element: '[x-arrow]'
	  },

	  /**
	   * Modifier used to flip the popper's placement when it starts to overlap its
	   * reference element.
	   *
	   * Requires the `preventOverflow` modifier before it in order to work.
	   *
	   * **NOTE:** this modifier will interrupt the current update cycle and will
	   * restart it if it detects the need to flip the placement.
	   * @memberof modifiers
	   * @inner
	   */
	  flip: {
	    /** @prop {number} order=600 - Index used to define the order of execution */
	    order: 600,
	    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
	    enabled: true,
	    /** @prop {ModifierFn} */
	    fn: flip,
	    /**
	     * @prop {String|Array} behavior='flip'
	     * The behavior used to change the popper's placement. It can be one of
	     * `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
	     * placements (with optional variations)
	     */
	    behavior: 'flip',
	    /**
	     * @prop {number} padding=5
	     * The popper will flip if it hits the edges of the `boundariesElement`
	     */
	    padding: 5,
	    /**
	     * @prop {String|HTMLElement} boundariesElement='viewport'
	     * The element which will define the boundaries of the popper position.
	     * The popper will never be placed outside of the defined boundaries
	     * (except if `keepTogether` is enabled)
	     */
	    boundariesElement: 'viewport',
	    /**
	     * @prop {Boolean} flipVariations=false
	     * The popper will switch placement variation between `-start` and `-end` when
	     * the reference element overlaps its boundaries.
	     *
	     * The original placement should have a set variation.
	     */
	    flipVariations: false,
	    /**
	     * @prop {Boolean} flipVariationsByContent=false
	     * The popper will switch placement variation between `-start` and `-end` when
	     * the popper element overlaps its reference boundaries.
	     *
	     * The original placement should have a set variation.
	     */
	    flipVariationsByContent: false
	  },

	  /**
	   * Modifier used to make the popper flow toward the inner of the reference element.
	   * By default, when this modifier is disabled, the popper will be placed outside
	   * the reference element.
	   * @memberof modifiers
	   * @inner
	   */
	  inner: {
	    /** @prop {number} order=700 - Index used to define the order of execution */
	    order: 700,
	    /** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */
	    enabled: false,
	    /** @prop {ModifierFn} */
	    fn: inner
	  },

	  /**
	   * Modifier used to hide the popper when its reference element is outside of the
	   * popper boundaries. It will set a `x-out-of-boundaries` attribute which can
	   * be used to hide with a CSS selector the popper when its reference is
	   * out of boundaries.
	   *
	   * Requires the `preventOverflow` modifier before it in order to work.
	   * @memberof modifiers
	   * @inner
	   */
	  hide: {
	    /** @prop {number} order=800 - Index used to define the order of execution */
	    order: 800,
	    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
	    enabled: true,
	    /** @prop {ModifierFn} */
	    fn: hide
	  },

	  /**
	   * Computes the style that will be applied to the popper element to gets
	   * properly positioned.
	   *
	   * Note that this modifier will not touch the DOM, it just prepares the styles
	   * so that `applyStyle` modifier can apply it. This separation is useful
	   * in case you need to replace `applyStyle` with a custom implementation.
	   *
	   * This modifier has `850` as `order` value to maintain backward compatibility
	   * with previous versions of Popper.js. Expect the modifiers ordering method
	   * to change in future major versions of the library.
	   *
	   * @memberof modifiers
	   * @inner
	   */
	  computeStyle: {
	    /** @prop {number} order=850 - Index used to define the order of execution */
	    order: 850,
	    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
	    enabled: true,
	    /** @prop {ModifierFn} */
	    fn: computeStyle,
	    /**
	     * @prop {Boolean} gpuAcceleration=true
	     * If true, it uses the CSS 3D transformation to position the popper.
	     * Otherwise, it will use the `top` and `left` properties
	     */
	    gpuAcceleration: true,
	    /**
	     * @prop {string} [x='bottom']
	     * Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
	     * Change this if your popper should grow in a direction different from `bottom`
	     */
	    x: 'bottom',
	    /**
	     * @prop {string} [x='left']
	     * Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
	     * Change this if your popper should grow in a direction different from `right`
	     */
	    y: 'right'
	  },

	  /**
	   * Applies the computed styles to the popper element.
	   *
	   * All the DOM manipulations are limited to this modifier. This is useful in case
	   * you want to integrate Popper.js inside a framework or view library and you
	   * want to delegate all the DOM manipulations to it.
	   *
	   * Note that if you disable this modifier, you must make sure the popper element
	   * has its position set to `absolute` before Popper.js can do its work!
	   *
	   * Just disable this modifier and define your own to achieve the desired effect.
	   *
	   * @memberof modifiers
	   * @inner
	   */
	  applyStyle: {
	    /** @prop {number} order=900 - Index used to define the order of execution */
	    order: 900,
	    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
	    enabled: true,
	    /** @prop {ModifierFn} */
	    fn: applyStyle,
	    /** @prop {Function} */
	    onLoad: applyStyleOnLoad,
	    /**
	     * @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
	     * @prop {Boolean} gpuAcceleration=true
	     * If true, it uses the CSS 3D transformation to position the popper.
	     * Otherwise, it will use the `top` and `left` properties
	     */
	    gpuAcceleration: undefined
	  }
	};

	/**
	 * The `dataObject` is an object containing all the information used by Popper.js.
	 * This object is passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
	 * @name dataObject
	 * @property {Object} data.instance The Popper.js instance
	 * @property {String} data.placement Placement applied to popper
	 * @property {String} data.originalPlacement Placement originally defined on init
	 * @property {Boolean} data.flipped True if popper has been flipped by flip modifier
	 * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper
	 * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
	 * @property {Object} data.styles Any CSS property defined here will be applied to the popper. It expects the JavaScript nomenclature (eg. `marginBottom`)
	 * @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow. It expects the JavaScript nomenclature (eg. `marginBottom`)
	 * @property {Object} data.boundaries Offsets of the popper boundaries
	 * @property {Object} data.offsets The measurements of popper, reference and arrow elements
	 * @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
	 * @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
	 * @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0
	 */

	/**
	 * Default options provided to Popper.js constructor.<br />
	 * These can be overridden using the `options` argument of Popper.js.<br />
	 * To override an option, simply pass an object with the same
	 * structure of the `options` object, as the 3rd argument. For example:
	 * ```
	 * new Popper(ref, pop, {
	 *   modifiers: {
	 *     preventOverflow: { enabled: false }
	 *   }
	 * })
	 * ```
	 * @type {Object}
	 * @static
	 * @memberof Popper
	 */
	var Defaults = {
	  /**
	   * Popper's placement.
	   * @prop {Popper.placements} placement='bottom'
	   */
	  placement: 'bottom',

	  /**
	   * Set this to true if you want popper to position it self in 'fixed' mode
	   * @prop {Boolean} positionFixed=false
	   */
	  positionFixed: false,

	  /**
	   * Whether events (resize, scroll) are initially enabled.
	   * @prop {Boolean} eventsEnabled=true
	   */
	  eventsEnabled: true,

	  /**
	   * Set to true if you want to automatically remove the popper when
	   * you call the `destroy` method.
	   * @prop {Boolean} removeOnDestroy=false
	   */
	  removeOnDestroy: false,

	  /**
	   * Callback called when the popper is created.<br />
	   * By default, it is set to no-op.<br />
	   * Access Popper.js instance with `data.instance`.
	   * @prop {onCreate}
	   */
	  onCreate: function onCreate() {},

	  /**
	   * Callback called when the popper is updated. This callback is not called
	   * on the initialization/creation of the popper, but only on subsequent
	   * updates.<br />
	   * By default, it is set to no-op.<br />
	   * Access Popper.js instance with `data.instance`.
	   * @prop {onUpdate}
	   */
	  onUpdate: function onUpdate() {},

	  /**
	   * List of modifiers used to modify the offsets before they are applied to the popper.
	   * They provide most of the functionalities of Popper.js.
	   * @prop {modifiers}
	   */
	  modifiers: modifiers
	};

	/**
	 * @callback onCreate
	 * @param {dataObject} data
	 */

	/**
	 * @callback onUpdate
	 * @param {dataObject} data
	 */

	// Utils
	// Methods
	var Popper$1 = function () {
	  /**
	   * Creates a new Popper.js instance.
	   * @class Popper
	   * @param {Element|referenceObject} reference - The reference element used to position the popper
	   * @param {Element} popper - The HTML / XML element used as the popper
	   * @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)
	   * @return {Object} instance - The generated Popper.js instance
	   */
	  function Popper(reference, popper) {
	    var _this = this;

	    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
	    classCallCheck$2(this, Popper);

	    this.scheduleUpdate = function () {
	      return requestAnimationFrame(_this.update);
	    };

	    // make update() debounced, so that it only runs at most once-per-tick
	    this.update = debounce(this.update.bind(this));

	    // with {} we create a new object with the options inside it
	    this.options = _extends$2({}, Popper.Defaults, options);

	    // init state
	    this.state = {
	      isDestroyed: false,
	      isCreated: false,
	      scrollParents: []
	    };

	    // get reference and popper elements (allow jQuery wrappers)
	    this.reference = reference && reference.jquery ? reference[0] : reference;
	    this.popper = popper && popper.jquery ? popper[0] : popper;

	    // Deep merge modifiers options
	    this.options.modifiers = {};
	    Object.keys(_extends$2({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
	      _this.options.modifiers[name] = _extends$2({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
	    });

	    // Refactoring modifiers' list (Object => Array)
	    this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
	      return _extends$2({
	        name: name
	      }, _this.options.modifiers[name]);
	    })
	    // sort the modifiers by order
	    .sort(function (a, b) {
	      return a.order - b.order;
	    });

	    // modifiers have the ability to execute arbitrary code when Popper.js get inited
	    // such code is executed in the same order of its modifier
	    // they could add new properties to their options configuration
	    // BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`!
	    this.modifiers.forEach(function (modifierOptions) {
	      if (modifierOptions.enabled && isFunction$1(modifierOptions.onLoad)) {
	        modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state);
	      }
	    });

	    // fire the first update to position the popper in the right place
	    this.update();

	    var eventsEnabled = this.options.eventsEnabled;
	    if (eventsEnabled) {
	      // setup event listeners, they will take care of update the position in specific situations
	      this.enableEventListeners();
	    }

	    this.state.eventsEnabled = eventsEnabled;
	  }

	  // We can't use class properties because they don't get listed in the
	  // class prototype and break stuff like Sinon stubs


	  createClass$2(Popper, [{
	    key: 'update',
	    value: function update$$1() {
	      return update.call(this);
	    }
	  }, {
	    key: 'destroy',
	    value: function destroy$$1() {
	      return destroy.call(this);
	    }
	  }, {
	    key: 'enableEventListeners',
	    value: function enableEventListeners$$1() {
	      return enableEventListeners.call(this);
	    }
	  }, {
	    key: 'disableEventListeners',
	    value: function disableEventListeners$$1() {
	      return disableEventListeners.call(this);
	    }

	    /**
	     * Schedules an update. It will run on the next UI update available.
	     * @method scheduleUpdate
	     * @memberof Popper
	     */


	    /**
	     * Collection of utilities useful when writing custom modifiers.
	     * Starting from version 1.7, this method is available only if you
	     * include `popper-utils.js` before `popper.js`.
	     *
	     * **DEPRECATION**: This way to access PopperUtils is deprecated
	     * and will be removed in v2! Use the PopperUtils module directly instead.
	     * Due to the high instability of the methods contained in Utils, we can't
	     * guarantee them to follow semver. Use them at your own risk!
	     * @static
	     * @private
	     * @type {Object}
	     * @deprecated since version 1.8
	     * @member Utils
	     * @memberof Popper
	     */

	  }]);
	  return Popper;
	}();

	/**
	 * The `referenceObject` is an object that provides an interface compatible with Popper.js
	 * and lets you use it as replacement of a real DOM node.<br />
	 * You can use this method to position a popper relatively to a set of coordinates
	 * in case you don't have a DOM node to use as reference.
	 *
	 * ```
	 * new Popper(referenceObject, popperNode);
	 * ```
	 *
	 * NB: This feature isn't supported in Internet Explorer 10.
	 * @name referenceObject
	 * @property {Function} data.getBoundingClientRect
	 * A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.
	 * @property {number} data.clientWidth
	 * An ES6 getter that will return the width of the virtual reference element.
	 * @property {number} data.clientHeight
	 * An ES6 getter that will return the height of the virtual reference element.
	 */


	Popper$1.Utils = (typeof window !== 'undefined' ? window : global).PopperUtils;
	Popper$1.placements = placements;
	Popper$1.Defaults = Defaults;

	function flipPlacement(placement, theme) {
	  var direction = theme && theme.direction || 'ltr';

	  if (direction === 'ltr') {
	    return placement;
	  }

	  switch (placement) {
	    case 'bottom-end':
	      return 'bottom-start';

	    case 'bottom-start':
	      return 'bottom-end';

	    case 'top-end':
	      return 'top-start';

	    case 'top-start':
	      return 'top-end';

	    default:
	      return placement;
	  }
	}

	function getAnchorEl(anchorEl) {
	  return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
	}

	var useEnhancedEffect = typeof window !== 'undefined' ? react.exports.useLayoutEffect : react.exports.useEffect;
	var defaultPopperOptions = {};
	/**
	 * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v1/) for positioning.
	 */

	var Popper = /*#__PURE__*/react.exports.forwardRef(function Popper(props, ref) {
	  var anchorEl = props.anchorEl,
	      children = props.children,
	      container = props.container,
	      _props$disablePortal = props.disablePortal,
	      disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
	      _props$keepMounted = props.keepMounted,
	      keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
	      modifiers = props.modifiers,
	      open = props.open,
	      _props$placement = props.placement,
	      initialPlacement = _props$placement === void 0 ? 'bottom' : _props$placement,
	      _props$popperOptions = props.popperOptions,
	      popperOptions = _props$popperOptions === void 0 ? defaultPopperOptions : _props$popperOptions,
	      popperRefProp = props.popperRef,
	      style = props.style,
	      _props$transition = props.transition,
	      transition = _props$transition === void 0 ? false : _props$transition,
	      other = _objectWithoutProperties(props, ["anchorEl", "children", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"]);

	  var tooltipRef = react.exports.useRef(null);
	  var ownRef = useForkRef(tooltipRef, ref);
	  var popperRef = react.exports.useRef(null);
	  var handlePopperRef = useForkRef(popperRef, popperRefProp);
	  var handlePopperRefRef = react.exports.useRef(handlePopperRef);
	  useEnhancedEffect(function () {
	    handlePopperRefRef.current = handlePopperRef;
	  }, [handlePopperRef]);
	  react.exports.useImperativeHandle(popperRefProp, function () {
	    return popperRef.current;
	  }, []);

	  var _React$useState = react.exports.useState(true),
	      exited = _React$useState[0],
	      setExited = _React$useState[1];

	  var theme = useTheme$2();
	  var rtlPlacement = flipPlacement(initialPlacement, theme);
	  /**
	   * placement initialized from prop but can change during lifetime if modifiers.flip.
	   * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
	   */

	  var _React$useState2 = react.exports.useState(rtlPlacement),
	      placement = _React$useState2[0],
	      setPlacement = _React$useState2[1];

	  react.exports.useEffect(function () {
	    if (popperRef.current) {
	      popperRef.current.update();
	    }
	  });
	  var handleOpen = react.exports.useCallback(function () {
	    if (!tooltipRef.current || !anchorEl || !open) {
	      return;
	    }

	    if (popperRef.current) {
	      popperRef.current.destroy();
	      handlePopperRefRef.current(null);
	    }

	    var handlePopperUpdate = function handlePopperUpdate(data) {
	      setPlacement(data.placement);
	    };

	    getAnchorEl(anchorEl);

	    var popper = new Popper$1(getAnchorEl(anchorEl), tooltipRef.current, _extends$5({
	      placement: rtlPlacement
	    }, popperOptions, {
	      modifiers: _extends$5({}, disablePortal ? {} : {
	        // It's using scrollParent by default, we can use the viewport when using a portal.
	        preventOverflow: {
	          boundariesElement: 'window'
	        }
	      }, modifiers, popperOptions.modifiers),
	      // We could have been using a custom modifier like react-popper is doing.
	      // But it seems this is the best public API for this use case.
	      onCreate: createChainedFunction(handlePopperUpdate, popperOptions.onCreate),
	      onUpdate: createChainedFunction(handlePopperUpdate, popperOptions.onUpdate)
	    }));
	    handlePopperRefRef.current(popper);
	  }, [anchorEl, disablePortal, modifiers, open, rtlPlacement, popperOptions]);
	  var handleRef = react.exports.useCallback(function (node) {
	    setRef(ownRef, node);
	    handleOpen();
	  }, [ownRef, handleOpen]);

	  var handleEnter = function handleEnter() {
	    setExited(false);
	  };

	  var handleClose = function handleClose() {
	    if (!popperRef.current) {
	      return;
	    }

	    popperRef.current.destroy();
	    handlePopperRefRef.current(null);
	  };

	  var handleExited = function handleExited() {
	    setExited(true);
	    handleClose();
	  };

	  react.exports.useEffect(function () {
	    return function () {
	      handleClose();
	    };
	  }, []);
	  react.exports.useEffect(function () {
	    if (!open && !transition) {
	      // Otherwise handleExited will call this.
	      handleClose();
	    }
	  }, [open, transition]);

	  if (!keepMounted && !open && (!transition || exited)) {
	    return null;
	  }

	  var childProps = {
	    placement: placement
	  };

	  if (transition) {
	    childProps.TransitionProps = {
	      in: open,
	      onEnter: handleEnter,
	      onExited: handleExited
	    };
	  }

	  return /*#__PURE__*/react.exports.createElement(Portal, {
	    disablePortal: disablePortal,
	    container: container
	  }, /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    ref: handleRef,
	    role: "tooltip"
	  }, other, {
	    style: _extends$5({
	      // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
	      position: 'fixed',
	      // Fix Popper.js display issue
	      top: 0,
	      left: 0,
	      display: !open && keepMounted && !transition ? 'none' : null
	    }, style)
	  }), typeof children === 'function' ? children(childProps) : children));
	});

	/**
	 * @ignore - internal component.
	 */

	var RadioButtonUncheckedIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
	}));

	/**
	 * @ignore - internal component.
	 */

	var RadioButtonCheckedIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
	}));

	var styles$w = function styles(theme) {
	  return {
	    root: {
	      position: 'relative',
	      display: 'flex',
	      '&$checked $layer': {
	        transform: 'scale(1)',
	        transition: theme.transitions.create('transform', {
	          easing: theme.transitions.easing.easeOut,
	          duration: theme.transitions.duration.shortest
	        })
	      }
	    },
	    layer: {
	      left: 0,
	      position: 'absolute',
	      transform: 'scale(0)',
	      transition: theme.transitions.create('transform', {
	        easing: theme.transitions.easing.easeIn,
	        duration: theme.transitions.duration.shortest
	      })
	    },
	    checked: {}
	  };
	};
	/**
	 * @ignore - internal component.
	 */

	function RadioButtonIcon(props) {
	  var checked = props.checked,
	      classes = props.classes,
	      fontSize = props.fontSize;
	  return /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.root, checked && classes.checked)
	  }, /*#__PURE__*/react.exports.createElement(RadioButtonUncheckedIcon, {
	    fontSize: fontSize
	  }), /*#__PURE__*/react.exports.createElement(RadioButtonCheckedIcon, {
	    fontSize: fontSize,
	    className: classes.layer
	  }));
	}
	var RadioButtonIcon$1 = withStyles(styles$w, {
	  name: 'PrivateRadioButtonIcon'
	})(RadioButtonIcon);

	/**
	 * @ignore - internal component.
	 */

	var RadioGroupContext = react.exports.createContext();

	function useRadioGroup() {
	  return react.exports.useContext(RadioGroupContext);
	}

	var styles$v = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      color: theme.palette.text.secondary
	    },

	    /* Pseudo-class applied to the root element if `checked={true}`. */
	    checked: {},

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {
	      '&$checked': {
	        color: theme.palette.primary.main,
	        '&:hover': {
	          backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
	          // Reset on touch devices, it doesn't add specificity
	          '@media (hover: none)': {
	            backgroundColor: 'transparent'
	          }
	        }
	      },
	      '&$disabled': {
	        color: theme.palette.action.disabled
	      }
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    colorSecondary: {
	      '&$checked': {
	        color: theme.palette.secondary.main,
	        '&:hover': {
	          backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
	          // Reset on touch devices, it doesn't add specificity
	          '@media (hover: none)': {
	            backgroundColor: 'transparent'
	          }
	        }
	      },
	      '&$disabled': {
	        color: theme.palette.action.disabled
	      }
	    }
	  };
	};
	var defaultCheckedIcon = /*#__PURE__*/react.exports.createElement(RadioButtonIcon$1, {
	  checked: true
	});
	var defaultIcon = /*#__PURE__*/react.exports.createElement(RadioButtonIcon$1, null);
	var Radio = /*#__PURE__*/react.exports.forwardRef(function Radio(props, ref) {
	  var checkedProp = props.checked,
	      classes = props.classes,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'secondary' : _props$color,
	      nameProp = props.name,
	      onChangeProp = props.onChange,
	      _props$size = props.size,
	      size = _props$size === void 0 ? 'medium' : _props$size,
	      other = _objectWithoutProperties(props, ["checked", "classes", "color", "name", "onChange", "size"]);

	  var radioGroup = useRadioGroup();
	  var checked = checkedProp;
	  var onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
	  var name = nameProp;

	  if (radioGroup) {
	    if (typeof checked === 'undefined') {
	      checked = radioGroup.value === props.value;
	    }

	    if (typeof name === 'undefined') {
	      name = radioGroup.name;
	    }
	  }

	  return /*#__PURE__*/react.exports.createElement(SwitchBase$1, _extends$5({
	    color: color,
	    type: "radio",
	    icon: /*#__PURE__*/react.exports.cloneElement(defaultIcon, {
	      fontSize: size === 'small' ? 'small' : 'medium'
	    }),
	    checkedIcon: /*#__PURE__*/react.exports.cloneElement(defaultCheckedIcon, {
	      fontSize: size === 'small' ? 'small' : 'medium'
	    }),
	    classes: {
	      root: clsx(classes.root, classes["color".concat(capitalize(color))]),
	      checked: classes.checked,
	      disabled: classes.disabled
	    },
	    name: name,
	    checked: checked,
	    onChange: onChange,
	    ref: ref
	  }, other));
	});
	var Radio$1 = withStyles(styles$v, {
	  name: 'MuiRadio'
	})(Radio);

	function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }

	function _typeof(obj) {
	  if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
	    _typeof = function _typeof(obj) {
	      return _typeof2(obj);
	    };
	  } else {
	    _typeof = function _typeof(obj) {
	      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj);
	    };
	  }

	  return _typeof(obj);
	}

	function areEqualValues(a, b) {
	  if (_typeof(b) === 'object' && b !== null) {
	    return a === b;
	  }

	  return String(a) === String(b);
	}

	function isEmpty$1(display) {
	  return display == null || typeof display === 'string' && !display.trim();
	}
	/**
	 * @ignore - internal component.
	 */


	var SelectInput = /*#__PURE__*/react.exports.forwardRef(function SelectInput(props, ref) {
	  var ariaLabel = props['aria-label'],
	      autoFocus = props.autoFocus,
	      autoWidth = props.autoWidth,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      defaultValue = props.defaultValue,
	      disabled = props.disabled,
	      displayEmpty = props.displayEmpty,
	      IconComponent = props.IconComponent,
	      inputRefProp = props.inputRef,
	      labelId = props.labelId,
	      _props$MenuProps = props.MenuProps,
	      MenuProps = _props$MenuProps === void 0 ? {} : _props$MenuProps,
	      multiple = props.multiple,
	      name = props.name,
	      onBlur = props.onBlur,
	      onChange = props.onChange,
	      onClose = props.onClose,
	      onFocus = props.onFocus,
	      onOpen = props.onOpen,
	      openProp = props.open,
	      readOnly = props.readOnly,
	      renderValue = props.renderValue,
	      _props$SelectDisplayP = props.SelectDisplayProps,
	      SelectDisplayProps = _props$SelectDisplayP === void 0 ? {} : _props$SelectDisplayP,
	      tabIndexProp = props.tabIndex;
	      props.type;
	      var valueProp = props.value,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'standard' : _props$variant,
	      other = _objectWithoutProperties(props, ["aria-label", "autoFocus", "autoWidth", "children", "classes", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"]);

	  var _useControlled = useControlled({
	    controlled: valueProp,
	    default: defaultValue,
	    name: 'Select'
	  }),
	      _useControlled2 = _slicedToArray(_useControlled, 2),
	      value = _useControlled2[0],
	      setValue = _useControlled2[1];

	  var inputRef = react.exports.useRef(null);

	  var _React$useState = react.exports.useState(null),
	      displayNode = _React$useState[0],
	      setDisplayNode = _React$useState[1];

	  var _React$useRef = react.exports.useRef(openProp != null),
	      isOpenControlled = _React$useRef.current;

	  var _React$useState2 = react.exports.useState(),
	      menuMinWidthState = _React$useState2[0],
	      setMenuMinWidthState = _React$useState2[1];

	  var _React$useState3 = react.exports.useState(false),
	      openState = _React$useState3[0],
	      setOpenState = _React$useState3[1];

	  var handleRef = useForkRef(ref, inputRefProp);
	  react.exports.useImperativeHandle(handleRef, function () {
	    return {
	      focus: function focus() {
	        displayNode.focus();
	      },
	      node: inputRef.current,
	      value: value
	    };
	  }, [displayNode, value]);
	  react.exports.useEffect(function () {
	    if (autoFocus && displayNode) {
	      displayNode.focus();
	    }
	  }, [autoFocus, displayNode]);
	  react.exports.useEffect(function () {
	    if (displayNode) {
	      var label = ownerDocument(displayNode).getElementById(labelId);

	      if (label) {
	        var handler = function handler() {
	          if (getSelection().isCollapsed) {
	            displayNode.focus();
	          }
	        };

	        label.addEventListener('click', handler);
	        return function () {
	          label.removeEventListener('click', handler);
	        };
	      }
	    }

	    return undefined;
	  }, [labelId, displayNode]);

	  var update = function update(open, event) {
	    if (open) {
	      if (onOpen) {
	        onOpen(event);
	      }
	    } else if (onClose) {
	      onClose(event);
	    }

	    if (!isOpenControlled) {
	      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
	      setOpenState(open);
	    }
	  };

	  var handleMouseDown = function handleMouseDown(event) {
	    // Ignore everything but left-click
	    if (event.button !== 0) {
	      return;
	    } // Hijack the default focus behavior.


	    event.preventDefault();
	    displayNode.focus();
	    update(true, event);
	  };

	  var handleClose = function handleClose(event) {
	    update(false, event);
	  };

	  var childrenArray = react.exports.Children.toArray(children); // Support autofill.

	  var handleChange = function handleChange(event) {
	    var index = childrenArray.map(function (child) {
	      return child.props.value;
	    }).indexOf(event.target.value);

	    if (index === -1) {
	      return;
	    }

	    var child = childrenArray[index];
	    setValue(child.props.value);

	    if (onChange) {
	      onChange(event, child);
	    }
	  };

	  var handleItemClick = function handleItemClick(child) {
	    return function (event) {
	      if (!multiple) {
	        update(false, event);
	      }

	      var newValue;

	      if (multiple) {
	        newValue = Array.isArray(value) ? value.slice() : [];
	        var itemIndex = value.indexOf(child.props.value);

	        if (itemIndex === -1) {
	          newValue.push(child.props.value);
	        } else {
	          newValue.splice(itemIndex, 1);
	        }
	      } else {
	        newValue = child.props.value;
	      }

	      if (child.props.onClick) {
	        child.props.onClick(event);
	      }

	      if (value === newValue) {
	        return;
	      }

	      setValue(newValue);

	      if (onChange) {
	        event.persist(); // Preact support, target is read only property on a native event.

	        Object.defineProperty(event, 'target', {
	          writable: true,
	          value: {
	            value: newValue,
	            name: name
	          }
	        });
	        onChange(event, child);
	      }
	    };
	  };

	  var handleKeyDown = function handleKeyDown(event) {
	    if (!readOnly) {
	      var validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on MacOS, but it's recommended by
	      // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
	      'Enter'];

	      if (validKeys.indexOf(event.key) !== -1) {
	        event.preventDefault();
	        update(true, event);
	      }
	    }
	  };

	  var open = displayNode !== null && (isOpenControlled ? openProp : openState);

	  var handleBlur = function handleBlur(event) {
	    // if open event.stopImmediatePropagation
	    if (!open && onBlur) {
	      event.persist(); // Preact support, target is read only property on a native event.

	      Object.defineProperty(event, 'target', {
	        writable: true,
	        value: {
	          value: value,
	          name: name
	        }
	      });
	      onBlur(event);
	    }
	  };

	  delete other['aria-invalid'];
	  var display;
	  var displaySingle;
	  var displayMultiple = [];
	  var computeDisplay = false;

	  if (isFilled({
	    value: value
	  }) || displayEmpty) {
	    if (renderValue) {
	      display = renderValue(value);
	    } else {
	      computeDisplay = true;
	    }
	  }

	  var items = childrenArray.map(function (child) {
	    if (! /*#__PURE__*/react.exports.isValidElement(child)) {
	      return null;
	    }

	    var selected;

	    if (multiple) {
	      if (!Array.isArray(value)) {
	        throw new Error(formatMuiErrorMessage(2));
	      }

	      selected = value.some(function (v) {
	        return areEqualValues(v, child.props.value);
	      });

	      if (selected && computeDisplay) {
	        displayMultiple.push(child.props.children);
	      }
	    } else {
	      selected = areEqualValues(value, child.props.value);

	      if (selected && computeDisplay) {
	        displaySingle = child.props.children;
	      }
	    }

	    return /*#__PURE__*/react.exports.cloneElement(child, {
	      'aria-selected': selected ? 'true' : undefined,
	      onClick: handleItemClick(child),
	      onKeyUp: function onKeyUp(event) {
	        if (event.key === ' ') {
	          // otherwise our MenuItems dispatches a click event
	          // it's not behavior of the native <option> and causes
	          // the select to close immediately since we open on space keydown
	          event.preventDefault();
	        }

	        if (child.props.onKeyUp) {
	          child.props.onKeyUp(event);
	        }
	      },
	      role: 'option',
	      selected: selected,
	      value: undefined,
	      // The value is most likely not a valid HTML attribute.
	      'data-value': child.props.value // Instead, we provide it as a data attribute.

	    });
	  });

	  if (computeDisplay) {
	    display = multiple ? displayMultiple.join(', ') : displaySingle;
	  } // Avoid performing a layout computation in the render method.


	  var menuMinWidth = menuMinWidthState;

	  if (!autoWidth && isOpenControlled && displayNode) {
	    menuMinWidth = displayNode.clientWidth;
	  }

	  var tabIndex;

	  if (typeof tabIndexProp !== 'undefined') {
	    tabIndex = tabIndexProp;
	  } else {
	    tabIndex = disabled ? null : 0;
	  }

	  var buttonId = SelectDisplayProps.id || (name ? "mui-component-select-".concat(name) : undefined);
	  return /*#__PURE__*/react.exports.createElement(react.exports.Fragment, null, /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, // TODO v5: merge root and select
	    classes.select, classes.selectMenu, classes[variant], className, disabled && classes.disabled),
	    ref: setDisplayNode,
	    tabIndex: tabIndex,
	    role: "button",
	    "aria-disabled": disabled ? 'true' : undefined,
	    "aria-expanded": open ? 'true' : undefined,
	    "aria-haspopup": "listbox",
	    "aria-label": ariaLabel,
	    "aria-labelledby": [labelId, buttonId].filter(Boolean).join(' ') || undefined,
	    onKeyDown: handleKeyDown,
	    onMouseDown: disabled || readOnly ? null : handleMouseDown,
	    onBlur: handleBlur,
	    onFocus: onFocus
	  }, SelectDisplayProps, {
	    // The id is required for proper a11y
	    id: buttonId
	  }), isEmpty$1(display) ?
	  /*#__PURE__*/
	  // eslint-disable-next-line react/no-danger
	  react.exports.createElement("span", {
	    dangerouslySetInnerHTML: {
	      __html: '&#8203;'
	    }
	  }) : display), /*#__PURE__*/react.exports.createElement("input", _extends$5({
	    value: Array.isArray(value) ? value.join(',') : value,
	    name: name,
	    ref: inputRef,
	    "aria-hidden": true,
	    onChange: handleChange,
	    tabIndex: -1,
	    className: classes.nativeInput,
	    autoFocus: autoFocus
	  }, other)), /*#__PURE__*/react.exports.createElement(IconComponent, {
	    className: clsx(classes.icon, classes["icon".concat(capitalize(variant))], open && classes.iconOpen, disabled && classes.disabled)
	  }), /*#__PURE__*/react.exports.createElement(Menu$1, _extends$5({
	    id: "menu-".concat(name || ''),
	    anchorEl: displayNode,
	    open: open,
	    onClose: handleClose
	  }, MenuProps, {
	    MenuListProps: _extends$5({
	      'aria-labelledby': labelId,
	      role: 'listbox',
	      disableListWrap: true
	    }, MenuProps.MenuListProps),
	    PaperProps: _extends$5({}, MenuProps.PaperProps, {
	      style: _extends$5({
	        minWidth: menuMinWidth
	      }, MenuProps.PaperProps != null ? MenuProps.PaperProps.style : null)
	    })
	  }), items));
	});

	var styles$u = styles$z;

	var _ref$3 = /*#__PURE__*/react.exports.createElement(Input$1, null);

	var _ref2$2 = /*#__PURE__*/react.exports.createElement(FilledInput$1, null);

	var Select = /*#__PURE__*/react.exports.forwardRef(function Select(props, ref) {
	  var _props$autoWidth = props.autoWidth,
	      autoWidth = _props$autoWidth === void 0 ? false : _props$autoWidth,
	      children = props.children,
	      classes = props.classes,
	      _props$displayEmpty = props.displayEmpty,
	      displayEmpty = _props$displayEmpty === void 0 ? false : _props$displayEmpty,
	      _props$IconComponent = props.IconComponent,
	      IconComponent = _props$IconComponent === void 0 ? ArrowDropDownIcon : _props$IconComponent,
	      id = props.id,
	      input = props.input,
	      inputProps = props.inputProps,
	      label = props.label,
	      labelId = props.labelId,
	      _props$labelWidth = props.labelWidth,
	      labelWidth = _props$labelWidth === void 0 ? 0 : _props$labelWidth,
	      MenuProps = props.MenuProps,
	      _props$multiple = props.multiple,
	      multiple = _props$multiple === void 0 ? false : _props$multiple,
	      _props$native = props.native,
	      native = _props$native === void 0 ? false : _props$native,
	      onClose = props.onClose,
	      onOpen = props.onOpen,
	      open = props.open,
	      renderValue = props.renderValue,
	      SelectDisplayProps = props.SelectDisplayProps,
	      _props$variant = props.variant,
	      variantProps = _props$variant === void 0 ? 'standard' : _props$variant,
	      other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "labelWidth", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);

	  var inputComponent = native ? NativeSelectInput : SelectInput;
	  var muiFormControl = useFormControl();
	  var fcs = formControlState({
	    props: props,
	    muiFormControl: muiFormControl,
	    states: ['variant']
	  });
	  var variant = fcs.variant || variantProps;
	  var InputComponent = input || {
	    standard: _ref$3,
	    outlined: /*#__PURE__*/react.exports.createElement(OutlinedInput$1, {
	      label: label,
	      labelWidth: labelWidth
	    }),
	    filled: _ref2$2
	  }[variant];
	  return /*#__PURE__*/react.exports.cloneElement(InputComponent, _extends$5({
	    // Most of the logic is implemented in `SelectInput`.
	    // The `Select` component is a simple API wrapper to expose something better to play with.
	    inputComponent: inputComponent,
	    inputProps: _extends$5({
	      children: children,
	      IconComponent: IconComponent,
	      variant: variant,
	      type: undefined,
	      // We render a select. We can ignore the type provided by the `Input`.
	      multiple: multiple
	    }, native ? {
	      id: id
	    } : {
	      autoWidth: autoWidth,
	      displayEmpty: displayEmpty,
	      labelId: labelId,
	      MenuProps: MenuProps,
	      onClose: onClose,
	      onOpen: onOpen,
	      open: open,
	      renderValue: renderValue,
	      SelectDisplayProps: _extends$5({
	        id: id
	      }, SelectDisplayProps)
	    }, inputProps, {
	      classes: inputProps ? mergeClasses({
	        baseClasses: classes,
	        newClasses: inputProps.classes,
	        Component: Select
	      }) : classes
	    }, input ? input.props.inputProps : {}),
	    ref: ref
	  }, other));
	});
	Select.muiName = 'Select';
	var Select$1 = withStyles(styles$u, {
	  name: 'MuiSelect'
	})(Select);

	var styles$t = function styles(theme) {
	  return {
	    thumb: {
	      '&$open': {
	        '& $offset': {
	          transform: 'scale(1) translateY(-10px)'
	        }
	      }
	    },
	    open: {},
	    offset: _extends$5({
	      zIndex: 1
	    }, theme.typography.body2, {
	      fontSize: theme.typography.pxToRem(12),
	      lineHeight: 1.2,
	      transition: theme.transitions.create(['transform'], {
	        duration: theme.transitions.duration.shortest
	      }),
	      top: -34,
	      transformOrigin: 'bottom center',
	      transform: 'scale(0)',
	      position: 'absolute'
	    }),
	    circle: {
	      display: 'flex',
	      alignItems: 'center',
	      justifyContent: 'center',
	      width: 32,
	      height: 32,
	      borderRadius: '50% 50% 50% 0',
	      backgroundColor: 'currentColor',
	      transform: 'rotate(-45deg)'
	    },
	    label: {
	      color: theme.palette.primary.contrastText,
	      transform: 'rotate(45deg)'
	    }
	  };
	};
	/**
	 * @ignore - internal component.
	 */


	function ValueLabel(props) {
	  var children = props.children,
	      classes = props.classes,
	      className = props.className,
	      open = props.open,
	      value = props.value,
	      valueLabelDisplay = props.valueLabelDisplay;

	  if (valueLabelDisplay === 'off') {
	    return children;
	  }

	  return /*#__PURE__*/react.exports.cloneElement(children, {
	    className: clsx(children.props.className, (open || valueLabelDisplay === 'on') && classes.open, classes.thumb)
	  }, /*#__PURE__*/react.exports.createElement("span", {
	    className: clsx(classes.offset, className)
	  }, /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.circle
	  }, /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.label
	  }, value))));
	}

	var ValueLabel$1 = withStyles(styles$t, {
	  name: 'PrivateValueLabel'
	})(ValueLabel);

	function asc(a, b) {
	  return a - b;
	}

	function clamp(value, min, max) {
	  return Math.min(Math.max(min, value), max);
	}

	function findClosest(values, currentValue) {
	  var _values$reduce = values.reduce(function (acc, value, index) {
	    var distance = Math.abs(currentValue - value);

	    if (acc === null || distance < acc.distance || distance === acc.distance) {
	      return {
	        distance: distance,
	        index: index
	      };
	    }

	    return acc;
	  }, null),
	      closestIndex = _values$reduce.index;

	  return closestIndex;
	}

	function trackFinger(event, touchId) {
	  if (touchId.current !== undefined && event.changedTouches) {
	    for (var i = 0; i < event.changedTouches.length; i += 1) {
	      var touch = event.changedTouches[i];

	      if (touch.identifier === touchId.current) {
	        return {
	          x: touch.clientX,
	          y: touch.clientY
	        };
	      }
	    }

	    return false;
	  }

	  return {
	    x: event.clientX,
	    y: event.clientY
	  };
	}

	function valueToPercent(value, min, max) {
	  return (value - min) * 100 / (max - min);
	}

	function percentToValue(percent, min, max) {
	  return (max - min) * percent + min;
	}

	function getDecimalPrecision(num) {
	  // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
	  // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
	  if (Math.abs(num) < 1) {
	    var parts = num.toExponential().split('e-');
	    var matissaDecimalPart = parts[0].split('.')[1];
	    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
	  }

	  var decimalPart = num.toString().split('.')[1];
	  return decimalPart ? decimalPart.length : 0;
	}

	function roundValueToStep(value, step, min) {
	  var nearest = Math.round((value - min) / step) * step + min;
	  return Number(nearest.toFixed(getDecimalPrecision(step)));
	}

	function setValueIndex(_ref) {
	  var values = _ref.values,
	      source = _ref.source,
	      newValue = _ref.newValue,
	      index = _ref.index;

	  // Performance shortcut
	  if (values[index] === newValue) {
	    return source;
	  }

	  var output = values.slice();
	  output[index] = newValue;
	  return output;
	}

	function focusThumb(_ref2) {
	  var sliderRef = _ref2.sliderRef,
	      activeIndex = _ref2.activeIndex,
	      setActive = _ref2.setActive;

	  if (!sliderRef.current.contains(document.activeElement) || Number(document.activeElement.getAttribute('data-index')) !== activeIndex) {
	    sliderRef.current.querySelector("[role=\"slider\"][data-index=\"".concat(activeIndex, "\"]")).focus();
	  }

	  if (setActive) {
	    setActive(activeIndex);
	  }
	}

	var axisProps = {
	  horizontal: {
	    offset: function offset(percent) {
	      return {
	        left: "".concat(percent, "%")
	      };
	    },
	    leap: function leap(percent) {
	      return {
	        width: "".concat(percent, "%")
	      };
	    }
	  },
	  'horizontal-reverse': {
	    offset: function offset(percent) {
	      return {
	        right: "".concat(percent, "%")
	      };
	    },
	    leap: function leap(percent) {
	      return {
	        width: "".concat(percent, "%")
	      };
	    }
	  },
	  vertical: {
	    offset: function offset(percent) {
	      return {
	        bottom: "".concat(percent, "%")
	      };
	    },
	    leap: function leap(percent) {
	      return {
	        height: "".concat(percent, "%")
	      };
	    }
	  }
	};

	var Identity = function Identity(x) {
	  return x;
	};

	var styles$s = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      height: 2,
	      width: '100%',
	      boxSizing: 'content-box',
	      padding: '13px 0',
	      display: 'inline-block',
	      position: 'relative',
	      cursor: 'pointer',
	      touchAction: 'none',
	      color: theme.palette.primary.main,
	      WebkitTapHighlightColor: 'transparent',
	      '&$disabled': {
	        pointerEvents: 'none',
	        cursor: 'default',
	        color: theme.palette.grey[400]
	      },
	      '&$vertical': {
	        width: 2,
	        height: '100%',
	        padding: '0 13px'
	      },
	      // The primary input mechanism of the device includes a pointing device of limited accuracy.
	      '@media (pointer: coarse)': {
	        // Reach 42px touch target, about ~8mm on screen.
	        padding: '20px 0',
	        '&$vertical': {
	          padding: '0 20px'
	        }
	      },
	      '@media print': {
	        colorAdjust: 'exact'
	      }
	    },

	    /* Styles applied to the root element if `color="primary"`. */
	    colorPrimary: {// TODO v5: move the style here
	    },

	    /* Styles applied to the root element if `color="secondary"`. */
	    colorSecondary: {
	      color: theme.palette.secondary.main
	    },

	    /* Styles applied to the root element if `marks` is provided with at least one label. */
	    marked: {
	      marginBottom: 20,
	      '&$vertical': {
	        marginBottom: 'auto',
	        marginRight: 20
	      }
	    },

	    /* Pseudo-class applied to the root element if `orientation="vertical"`. */
	    vertical: {},

	    /* Pseudo-class applied to the root and thumb element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the rail element. */
	    rail: {
	      display: 'block',
	      position: 'absolute',
	      width: '100%',
	      height: 2,
	      borderRadius: 1,
	      backgroundColor: 'currentColor',
	      opacity: 0.38,
	      '$vertical &': {
	        height: '100%',
	        width: 2
	      }
	    },

	    /* Styles applied to the track element. */
	    track: {
	      display: 'block',
	      position: 'absolute',
	      height: 2,
	      borderRadius: 1,
	      backgroundColor: 'currentColor',
	      '$vertical &': {
	        width: 2
	      }
	    },

	    /* Styles applied to the track element if `track={false}`. */
	    trackFalse: {
	      '& $track': {
	        display: 'none'
	      }
	    },

	    /* Styles applied to the track element if `track="inverted"`. */
	    trackInverted: {
	      '& $track': {
	        backgroundColor: // Same logic as the LinearProgress track color
	        theme.palette.type === 'light' ? lighten(theme.palette.primary.main, 0.62) : darken(theme.palette.primary.main, 0.5)
	      },
	      '& $rail': {
	        opacity: 1
	      }
	    },

	    /* Styles applied to the thumb element. */
	    thumb: {
	      position: 'absolute',
	      width: 12,
	      height: 12,
	      marginLeft: -6,
	      marginTop: -5,
	      boxSizing: 'border-box',
	      borderRadius: '50%',
	      outline: 0,
	      backgroundColor: 'currentColor',
	      display: 'flex',
	      alignItems: 'center',
	      justifyContent: 'center',
	      transition: theme.transitions.create(['box-shadow'], {
	        duration: theme.transitions.duration.shortest
	      }),
	      '&::after': {
	        position: 'absolute',
	        content: '""',
	        borderRadius: '50%',
	        // reach 42px hit target (2 * 15 + thumb diameter)
	        left: -15,
	        top: -15,
	        right: -15,
	        bottom: -15
	      },
	      '&$focusVisible,&:hover': {
	        boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette.primary.main, 0.16)),
	        '@media (hover: none)': {
	          boxShadow: 'none'
	        }
	      },
	      '&$active': {
	        boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette.primary.main, 0.16))
	      },
	      '&$disabled': {
	        width: 8,
	        height: 8,
	        marginLeft: -4,
	        marginTop: -3,
	        '&:hover': {
	          boxShadow: 'none'
	        }
	      },
	      '$vertical &': {
	        marginLeft: -5,
	        marginBottom: -6
	      },
	      '$vertical &$disabled': {
	        marginLeft: -3,
	        marginBottom: -4
	      }
	    },

	    /* Styles applied to the thumb element if `color="primary"`. */
	    thumbColorPrimary: {// TODO v5: move the style here
	    },

	    /* Styles applied to the thumb element if `color="secondary"`. */
	    thumbColorSecondary: {
	      '&$focusVisible,&:hover': {
	        boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette.secondary.main, 0.16))
	      },
	      '&$active': {
	        boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette.secondary.main, 0.16))
	      }
	    },

	    /* Pseudo-class applied to the thumb element if it's active. */
	    active: {},

	    /* Pseudo-class applied to the thumb element if keyboard focused. */
	    focusVisible: {},

	    /* Styles applied to the thumb label element. */
	    valueLabel: {
	      // IE 11 centering bug, to remove from the customization demos once no longer supported
	      left: 'calc(-50% - 4px)'
	    },

	    /* Styles applied to the mark element. */
	    mark: {
	      position: 'absolute',
	      width: 2,
	      height: 2,
	      borderRadius: 1,
	      backgroundColor: 'currentColor'
	    },

	    /* Styles applied to the mark element if active (depending on the value). */
	    markActive: {
	      backgroundColor: theme.palette.background.paper,
	      opacity: 0.8
	    },

	    /* Styles applied to the mark label element. */
	    markLabel: _extends$5({}, theme.typography.body2, {
	      color: theme.palette.text.secondary,
	      position: 'absolute',
	      top: 26,
	      transform: 'translateX(-50%)',
	      whiteSpace: 'nowrap',
	      '$vertical &': {
	        top: 'auto',
	        left: 26,
	        transform: 'translateY(50%)'
	      },
	      '@media (pointer: coarse)': {
	        top: 40,
	        '$vertical &': {
	          left: 31
	        }
	      }
	    }),

	    /* Styles applied to the mark label element if active (depending on the value). */
	    markLabelActive: {
	      color: theme.palette.text.primary
	    }
	  };
	};
	var Slider = /*#__PURE__*/react.exports.forwardRef(function Slider(props, ref) {
	  var ariaLabel = props['aria-label'],
	      ariaLabelledby = props['aria-labelledby'],
	      ariaValuetext = props['aria-valuetext'],
	      classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'primary' : _props$color,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'span' : _props$component,
	      defaultValue = props.defaultValue,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      getAriaLabel = props.getAriaLabel,
	      getAriaValueText = props.getAriaValueText,
	      _props$marks = props.marks,
	      marksProp = _props$marks === void 0 ? false : _props$marks,
	      _props$max = props.max,
	      max = _props$max === void 0 ? 100 : _props$max,
	      _props$min = props.min,
	      min = _props$min === void 0 ? 0 : _props$min,
	      name = props.name,
	      onChange = props.onChange,
	      onChangeCommitted = props.onChangeCommitted,
	      onMouseDown = props.onMouseDown,
	      _props$orientation = props.orientation,
	      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
	      _props$scale = props.scale,
	      scale = _props$scale === void 0 ? Identity : _props$scale,
	      _props$step = props.step,
	      step = _props$step === void 0 ? 1 : _props$step,
	      _props$ThumbComponent = props.ThumbComponent,
	      ThumbComponent = _props$ThumbComponent === void 0 ? 'span' : _props$ThumbComponent,
	      _props$track = props.track,
	      track = _props$track === void 0 ? 'normal' : _props$track,
	      valueProp = props.value,
	      _props$ValueLabelComp = props.ValueLabelComponent,
	      ValueLabelComponent = _props$ValueLabelComp === void 0 ? ValueLabel$1 : _props$ValueLabelComp,
	      _props$valueLabelDisp = props.valueLabelDisplay,
	      valueLabelDisplay = _props$valueLabelDisp === void 0 ? 'off' : _props$valueLabelDisp,
	      _props$valueLabelForm = props.valueLabelFormat,
	      valueLabelFormat = _props$valueLabelForm === void 0 ? Identity : _props$valueLabelForm,
	      other = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "aria-valuetext", "classes", "className", "color", "component", "defaultValue", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "ThumbComponent", "track", "value", "ValueLabelComponent", "valueLabelDisplay", "valueLabelFormat"]);

	  var theme = useTheme$1();
	  var touchId = react.exports.useRef(); // We can't use the :active browser pseudo-classes.
	  // - The active state isn't triggered when clicking on the rail.
	  // - The active state isn't transfered when inversing a range slider.

	  var _React$useState = react.exports.useState(-1),
	      active = _React$useState[0],
	      setActive = _React$useState[1];

	  var _React$useState2 = react.exports.useState(-1),
	      open = _React$useState2[0],
	      setOpen = _React$useState2[1];

	  var _useControlled = useControlled({
	    controlled: valueProp,
	    default: defaultValue,
	    name: 'Slider'
	  }),
	      _useControlled2 = _slicedToArray(_useControlled, 2),
	      valueDerived = _useControlled2[0],
	      setValueState = _useControlled2[1];

	  var range = Array.isArray(valueDerived);
	  var values = range ? valueDerived.slice().sort(asc) : [valueDerived];
	  values = values.map(function (value) {
	    return clamp(value, min, max);
	  });
	  var marks = marksProp === true && step !== null ? _toConsumableArray(Array(Math.floor((max - min) / step) + 1)).map(function (_, index) {
	    return {
	      value: min + step * index
	    };
	  }) : marksProp || [];

	  var _useIsFocusVisible = useIsFocusVisible(),
	      isFocusVisible = _useIsFocusVisible.isFocusVisible,
	      onBlurVisible = _useIsFocusVisible.onBlurVisible,
	      focusVisibleRef = _useIsFocusVisible.ref;

	  var _React$useState3 = react.exports.useState(-1),
	      focusVisible = _React$useState3[0],
	      setFocusVisible = _React$useState3[1];

	  var sliderRef = react.exports.useRef();
	  var handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
	  var handleRef = useForkRef(ref, handleFocusRef);
	  var handleFocus = useEventCallback(function (event) {
	    var index = Number(event.currentTarget.getAttribute('data-index'));

	    if (isFocusVisible(event)) {
	      setFocusVisible(index);
	    }

	    setOpen(index);
	  });
	  var handleBlur = useEventCallback(function () {
	    if (focusVisible !== -1) {
	      setFocusVisible(-1);
	      onBlurVisible();
	    }

	    setOpen(-1);
	  });
	  var handleMouseOver = useEventCallback(function (event) {
	    var index = Number(event.currentTarget.getAttribute('data-index'));
	    setOpen(index);
	  });
	  var handleMouseLeave = useEventCallback(function () {
	    setOpen(-1);
	  });
	  var isRtl = theme.direction === 'rtl';
	  var handleKeyDown = useEventCallback(function (event) {
	    var index = Number(event.currentTarget.getAttribute('data-index'));
	    var value = values[index];
	    var tenPercents = (max - min) / 10;
	    var marksValues = marks.map(function (mark) {
	      return mark.value;
	    });
	    var marksIndex = marksValues.indexOf(value);
	    var newValue;
	    var increaseKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
	    var decreaseKey = isRtl ? 'ArrowRight' : 'ArrowLeft';

	    switch (event.key) {
	      case 'Home':
	        newValue = min;
	        break;

	      case 'End':
	        newValue = max;
	        break;

	      case 'PageUp':
	        if (step) {
	          newValue = value + tenPercents;
	        }

	        break;

	      case 'PageDown':
	        if (step) {
	          newValue = value - tenPercents;
	        }

	        break;

	      case increaseKey:
	      case 'ArrowUp':
	        if (step) {
	          newValue = value + step;
	        } else {
	          newValue = marksValues[marksIndex + 1] || marksValues[marksValues.length - 1];
	        }

	        break;

	      case decreaseKey:
	      case 'ArrowDown':
	        if (step) {
	          newValue = value - step;
	        } else {
	          newValue = marksValues[marksIndex - 1] || marksValues[0];
	        }

	        break;

	      default:
	        return;
	    } // Prevent scroll of the page


	    event.preventDefault();

	    if (step) {
	      newValue = roundValueToStep(newValue, step, min);
	    }

	    newValue = clamp(newValue, min, max);

	    if (range) {
	      var previousValue = newValue;
	      newValue = setValueIndex({
	        values: values,
	        source: valueDerived,
	        newValue: newValue,
	        index: index
	      }).sort(asc);
	      focusThumb({
	        sliderRef: sliderRef,
	        activeIndex: newValue.indexOf(previousValue)
	      });
	    }

	    setValueState(newValue);
	    setFocusVisible(index);

	    if (onChange) {
	      onChange(event, newValue);
	    }

	    if (onChangeCommitted) {
	      onChangeCommitted(event, newValue);
	    }
	  });
	  var previousIndex = react.exports.useRef();
	  var axis = orientation;

	  if (isRtl && orientation !== "vertical") {
	    axis += '-reverse';
	  }

	  var getFingerNewValue = function getFingerNewValue(_ref3) {
	    var finger = _ref3.finger,
	        _ref3$move = _ref3.move,
	        move = _ref3$move === void 0 ? false : _ref3$move,
	        values2 = _ref3.values,
	        source = _ref3.source;
	    var slider = sliderRef.current;

	    var _slider$getBoundingCl = slider.getBoundingClientRect(),
	        width = _slider$getBoundingCl.width,
	        height = _slider$getBoundingCl.height,
	        bottom = _slider$getBoundingCl.bottom,
	        left = _slider$getBoundingCl.left;

	    var percent;

	    if (axis.indexOf('vertical') === 0) {
	      percent = (bottom - finger.y) / height;
	    } else {
	      percent = (finger.x - left) / width;
	    }

	    if (axis.indexOf('-reverse') !== -1) {
	      percent = 1 - percent;
	    }

	    var newValue;
	    newValue = percentToValue(percent, min, max);

	    if (step) {
	      newValue = roundValueToStep(newValue, step, min);
	    } else {
	      var marksValues = marks.map(function (mark) {
	        return mark.value;
	      });
	      var closestIndex = findClosest(marksValues, newValue);
	      newValue = marksValues[closestIndex];
	    }

	    newValue = clamp(newValue, min, max);
	    var activeIndex = 0;

	    if (range) {
	      if (!move) {
	        activeIndex = findClosest(values2, newValue);
	      } else {
	        activeIndex = previousIndex.current;
	      }

	      var previousValue = newValue;
	      newValue = setValueIndex({
	        values: values2,
	        source: source,
	        newValue: newValue,
	        index: activeIndex
	      }).sort(asc);
	      activeIndex = newValue.indexOf(previousValue);
	      previousIndex.current = activeIndex;
	    }

	    return {
	      newValue: newValue,
	      activeIndex: activeIndex
	    };
	  };

	  var handleTouchMove = useEventCallback(function (event) {
	    var finger = trackFinger(event, touchId);

	    if (!finger) {
	      return;
	    }

	    var _getFingerNewValue = getFingerNewValue({
	      finger: finger,
	      move: true,
	      values: values,
	      source: valueDerived
	    }),
	        newValue = _getFingerNewValue.newValue,
	        activeIndex = _getFingerNewValue.activeIndex;

	    focusThumb({
	      sliderRef: sliderRef,
	      activeIndex: activeIndex,
	      setActive: setActive
	    });
	    setValueState(newValue);

	    if (onChange) {
	      onChange(event, newValue);
	    }
	  });
	  var handleTouchEnd = useEventCallback(function (event) {
	    var finger = trackFinger(event, touchId);

	    if (!finger) {
	      return;
	    }

	    var _getFingerNewValue2 = getFingerNewValue({
	      finger: finger,
	      values: values,
	      source: valueDerived
	    }),
	        newValue = _getFingerNewValue2.newValue;

	    setActive(-1);

	    if (event.type === 'touchend') {
	      setOpen(-1);
	    }

	    if (onChangeCommitted) {
	      onChangeCommitted(event, newValue);
	    }

	    touchId.current = undefined;
	    var doc = ownerDocument(sliderRef.current);
	    doc.removeEventListener('mousemove', handleTouchMove);
	    doc.removeEventListener('mouseup', handleTouchEnd);
	    doc.removeEventListener('touchmove', handleTouchMove);
	    doc.removeEventListener('touchend', handleTouchEnd);
	  });
	  var handleTouchStart = useEventCallback(function (event) {
	    // Workaround as Safari has partial support for touchAction: 'none'.
	    event.preventDefault();
	    var touch = event.changedTouches[0];

	    if (touch != null) {
	      // A number that uniquely identifies the current finger in the touch session.
	      touchId.current = touch.identifier;
	    }

	    var finger = trackFinger(event, touchId);

	    var _getFingerNewValue3 = getFingerNewValue({
	      finger: finger,
	      values: values,
	      source: valueDerived
	    }),
	        newValue = _getFingerNewValue3.newValue,
	        activeIndex = _getFingerNewValue3.activeIndex;

	    focusThumb({
	      sliderRef: sliderRef,
	      activeIndex: activeIndex,
	      setActive: setActive
	    });
	    setValueState(newValue);

	    if (onChange) {
	      onChange(event, newValue);
	    }

	    var doc = ownerDocument(sliderRef.current);
	    doc.addEventListener('touchmove', handleTouchMove);
	    doc.addEventListener('touchend', handleTouchEnd);
	  });
	  react.exports.useEffect(function () {
	    var slider = sliderRef.current;
	    slider.addEventListener('touchstart', handleTouchStart);
	    var doc = ownerDocument(slider);
	    return function () {
	      slider.removeEventListener('touchstart', handleTouchStart);
	      doc.removeEventListener('mousemove', handleTouchMove);
	      doc.removeEventListener('mouseup', handleTouchEnd);
	      doc.removeEventListener('touchmove', handleTouchMove);
	      doc.removeEventListener('touchend', handleTouchEnd);
	    };
	  }, [handleTouchEnd, handleTouchMove, handleTouchStart]);
	  var handleMouseDown = useEventCallback(function (event) {
	    if (onMouseDown) {
	      onMouseDown(event);
	    }

	    event.preventDefault();
	    var finger = trackFinger(event, touchId);

	    var _getFingerNewValue4 = getFingerNewValue({
	      finger: finger,
	      values: values,
	      source: valueDerived
	    }),
	        newValue = _getFingerNewValue4.newValue,
	        activeIndex = _getFingerNewValue4.activeIndex;

	    focusThumb({
	      sliderRef: sliderRef,
	      activeIndex: activeIndex,
	      setActive: setActive
	    });
	    setValueState(newValue);

	    if (onChange) {
	      onChange(event, newValue);
	    }

	    var doc = ownerDocument(sliderRef.current);
	    doc.addEventListener('mousemove', handleTouchMove);
	    doc.addEventListener('mouseup', handleTouchEnd);
	  });
	  var trackOffset = valueToPercent(range ? values[0] : min, min, max);
	  var trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;

	  var trackStyle = _extends$5({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    ref: handleRef,
	    className: clsx(classes.root, classes["color".concat(capitalize(color))], className, disabled && classes.disabled, marks.length > 0 && marks.some(function (mark) {
	      return mark.label;
	    }) && classes.marked, track === false && classes.trackFalse, orientation === 'vertical' && classes.vertical, track === 'inverted' && classes.trackInverted),
	    onMouseDown: handleMouseDown
	  }, other), /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.rail
	  }), /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.track,
	    style: trackStyle
	  }), /*#__PURE__*/react.exports.createElement("input", {
	    value: values.join(','),
	    name: name,
	    type: "hidden"
	  }), marks.map(function (mark, index) {
	    var percent = valueToPercent(mark.value, min, max);
	    var style = axisProps[axis].offset(percent);
	    var markActive;

	    if (track === false) {
	      markActive = values.indexOf(mark.value) !== -1;
	    } else {
	      markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
	    }

	    return /*#__PURE__*/react.exports.createElement(react.exports.Fragment, {
	      key: mark.value
	    }, /*#__PURE__*/react.exports.createElement("span", {
	      style: style,
	      "data-index": index,
	      className: clsx(classes.mark, markActive && classes.markActive)
	    }), mark.label != null ? /*#__PURE__*/react.exports.createElement("span", {
	      "aria-hidden": true,
	      "data-index": index,
	      style: style,
	      className: clsx(classes.markLabel, markActive && classes.markLabelActive)
	    }, mark.label) : null);
	  }), values.map(function (value, index) {
	    var percent = valueToPercent(value, min, max);
	    var style = axisProps[axis].offset(percent);
	    return /*#__PURE__*/react.exports.createElement(ValueLabelComponent, {
	      key: index,
	      valueLabelFormat: valueLabelFormat,
	      valueLabelDisplay: valueLabelDisplay,
	      className: classes.valueLabel,
	      value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
	      index: index,
	      open: open === index || active === index || valueLabelDisplay === 'on',
	      disabled: disabled
	    }, /*#__PURE__*/react.exports.createElement(ThumbComponent, {
	      className: clsx(classes.thumb, classes["thumbColor".concat(capitalize(color))], active === index && classes.active, disabled && classes.disabled, focusVisible === index && classes.focusVisible),
	      tabIndex: disabled ? null : 0,
	      role: "slider",
	      style: style,
	      "data-index": index,
	      "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
	      "aria-labelledby": ariaLabelledby,
	      "aria-orientation": orientation,
	      "aria-valuemax": scale(max),
	      "aria-valuemin": scale(min),
	      "aria-valuenow": scale(value),
	      "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
	      onKeyDown: handleKeyDown,
	      onFocus: handleFocus,
	      onBlur: handleBlur,
	      onMouseOver: handleMouseOver,
	      onMouseLeave: handleMouseLeave
	    }));
	  }));
	});
	withStyles(styles$s, {
	  name: 'MuiSlider'
	})(Slider);

	var styles$r = function styles(theme) {
	  var emphasis = theme.palette.type === 'light' ? 0.8 : 0.98;
	  var backgroundColor = emphasize(theme.palette.background.default, emphasis);
	  return {
	    /* Styles applied to the root element. */
	    root: _extends$5({}, theme.typography.body2, _defineProperty$1({
	      color: theme.palette.getContrastText(backgroundColor),
	      backgroundColor: backgroundColor,
	      display: 'flex',
	      alignItems: 'center',
	      flexWrap: 'wrap',
	      padding: '6px 16px',
	      borderRadius: theme.shape.borderRadius,
	      flexGrow: 1
	    }, theme.breakpoints.up('sm'), {
	      flexGrow: 'initial',
	      minWidth: 288
	    })),

	    /* Styles applied to the message wrapper element. */
	    message: {
	      padding: '8px 0'
	    },

	    /* Styles applied to the action wrapper element if `action` is provided. */
	    action: {
	      display: 'flex',
	      alignItems: 'center',
	      marginLeft: 'auto',
	      paddingLeft: 16,
	      marginRight: -8
	    }
	  };
	};
	var SnackbarContent = /*#__PURE__*/react.exports.forwardRef(function SnackbarContent(props, ref) {
	  var action = props.action,
	      classes = props.classes,
	      className = props.className,
	      message = props.message,
	      _props$role = props.role,
	      role = _props$role === void 0 ? 'alert' : _props$role,
	      other = _objectWithoutProperties(props, ["action", "classes", "className", "message", "role"]);

	  return /*#__PURE__*/react.exports.createElement(Paper$1, _extends$5({
	    role: role,
	    square: true,
	    elevation: 6,
	    className: clsx(classes.root, className),
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.message
	  }, message), action ? /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.action
	  }, action) : null);
	});
	var SnackbarContent$1 = withStyles(styles$r, {
	  name: 'MuiSnackbarContent'
	})(SnackbarContent);

	var styles$q = function styles(theme) {
	  var top1 = {
	    top: 8
	  };
	  var bottom1 = {
	    bottom: 8
	  };
	  var right = {
	    justifyContent: 'flex-end'
	  };
	  var left = {
	    justifyContent: 'flex-start'
	  };
	  var top3 = {
	    top: 24
	  };
	  var bottom3 = {
	    bottom: 24
	  };
	  var right3 = {
	    right: 24
	  };
	  var left3 = {
	    left: 24
	  };
	  var center = {
	    left: '50%',
	    right: 'auto',
	    transform: 'translateX(-50%)'
	  };
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      zIndex: theme.zIndex.snackbar,
	      position: 'fixed',
	      display: 'flex',
	      left: 8,
	      right: 8,
	      justifyContent: 'center',
	      alignItems: 'center'
	    },

	    /* Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`. */
	    anchorOriginTopCenter: _extends$5({}, top1, _defineProperty$1({}, theme.breakpoints.up('sm'), _extends$5({}, top3, center))),

	    /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'center' }}`. */
	    anchorOriginBottomCenter: _extends$5({}, bottom1, _defineProperty$1({}, theme.breakpoints.up('sm'), _extends$5({}, bottom3, center))),

	    /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`. */
	    anchorOriginTopRight: _extends$5({}, top1, right, _defineProperty$1({}, theme.breakpoints.up('sm'), _extends$5({
	      left: 'auto'
	    }, top3, right3))),

	    /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }}`. */
	    anchorOriginBottomRight: _extends$5({}, bottom1, right, _defineProperty$1({}, theme.breakpoints.up('sm'), _extends$5({
	      left: 'auto'
	    }, bottom3, right3))),

	    /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }}`. */
	    anchorOriginTopLeft: _extends$5({}, top1, left, _defineProperty$1({}, theme.breakpoints.up('sm'), _extends$5({
	      right: 'auto'
	    }, top3, left3))),

	    /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }}`. */
	    anchorOriginBottomLeft: _extends$5({}, bottom1, left, _defineProperty$1({}, theme.breakpoints.up('sm'), _extends$5({
	      right: 'auto'
	    }, bottom3, left3)))
	  };
	};
	var Snackbar = /*#__PURE__*/react.exports.forwardRef(function Snackbar(props, ref) {
	  var action = props.action,
	      _props$anchorOrigin = props.anchorOrigin;
	  _props$anchorOrigin = _props$anchorOrigin === void 0 ? {
	    vertical: 'bottom',
	    horizontal: 'center'
	  } : _props$anchorOrigin;

	  var vertical = _props$anchorOrigin.vertical,
	      horizontal = _props$anchorOrigin.horizontal,
	      _props$autoHideDurati = props.autoHideDuration,
	      autoHideDuration = _props$autoHideDurati === void 0 ? null : _props$autoHideDurati,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      ClickAwayListenerProps = props.ClickAwayListenerProps,
	      ContentProps = props.ContentProps,
	      _props$disableWindowB = props.disableWindowBlurListener,
	      disableWindowBlurListener = _props$disableWindowB === void 0 ? false : _props$disableWindowB,
	      message = props.message,
	      onClose = props.onClose,
	      onEnter = props.onEnter,
	      onEntered = props.onEntered,
	      onEntering = props.onEntering,
	      onExit = props.onExit,
	      onExited = props.onExited,
	      onExiting = props.onExiting,
	      onMouseEnter = props.onMouseEnter,
	      onMouseLeave = props.onMouseLeave,
	      open = props.open,
	      resumeHideDuration = props.resumeHideDuration,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
	      _props$transitionDura = props.transitionDuration,
	      transitionDuration = _props$transitionDura === void 0 ? {
	    enter: duration.enteringScreen,
	    exit: duration.leavingScreen
	  } : _props$transitionDura,
	      TransitionProps = props.TransitionProps,
	      other = _objectWithoutProperties(props, ["action", "anchorOrigin", "autoHideDuration", "children", "classes", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onClose", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"]);

	  var timerAutoHide = react.exports.useRef();

	  var _React$useState = react.exports.useState(true),
	      exited = _React$useState[0],
	      setExited = _React$useState[1];

	  var handleClose = useEventCallback(function () {
	    if (onClose) {
	      onClose.apply(void 0, arguments);
	    }
	  });
	  var setAutoHideTimer = useEventCallback(function (autoHideDurationParam) {
	    if (!onClose || autoHideDurationParam == null) {
	      return;
	    }

	    clearTimeout(timerAutoHide.current);
	    timerAutoHide.current = setTimeout(function () {
	      handleClose(null, 'timeout');
	    }, autoHideDurationParam);
	  });
	  react.exports.useEffect(function () {
	    if (open) {
	      setAutoHideTimer(autoHideDuration);
	    }

	    return function () {
	      clearTimeout(timerAutoHide.current);
	    };
	  }, [open, autoHideDuration, setAutoHideTimer]); // Pause the timer when the user is interacting with the Snackbar
	  // or when the user hide the window.

	  var handlePause = function handlePause() {
	    clearTimeout(timerAutoHide.current);
	  }; // Restart the timer when the user is no longer interacting with the Snackbar
	  // or when the window is shown back.


	  var handleResume = react.exports.useCallback(function () {
	    if (autoHideDuration != null) {
	      setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
	    }
	  }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);

	  var handleMouseEnter = function handleMouseEnter(event) {
	    if (onMouseEnter) {
	      onMouseEnter(event);
	    }

	    handlePause();
	  };

	  var handleMouseLeave = function handleMouseLeave(event) {
	    if (onMouseLeave) {
	      onMouseLeave(event);
	    }

	    handleResume();
	  };

	  var handleClickAway = function handleClickAway(event) {
	    if (onClose) {
	      onClose(event, 'clickaway');
	    }
	  };

	  var handleExited = function handleExited() {
	    setExited(true);
	  };

	  var handleEnter = function handleEnter() {
	    setExited(false);
	  };

	  react.exports.useEffect(function () {
	    if (!disableWindowBlurListener && open) {
	      window.addEventListener('focus', handleResume);
	      window.addEventListener('blur', handlePause);
	      return function () {
	        window.removeEventListener('focus', handleResume);
	        window.removeEventListener('blur', handlePause);
	      };
	    }

	    return undefined;
	  }, [disableWindowBlurListener, handleResume, open]); // So we only render active snackbars.

	  if (!open && exited) {
	    return null;
	  }

	  return /*#__PURE__*/react.exports.createElement(ClickAwayListener, _extends$5({
	    onClickAway: handleClickAway
	  }, ClickAwayListenerProps), /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, classes["anchorOrigin".concat(capitalize(vertical)).concat(capitalize(horizontal))], className),
	    onMouseEnter: handleMouseEnter,
	    onMouseLeave: handleMouseLeave,
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    appear: true,
	    in: open,
	    onEnter: createChainedFunction(handleEnter, onEnter),
	    onEntered: onEntered,
	    onEntering: onEntering,
	    onExit: onExit,
	    onExited: createChainedFunction(handleExited, onExited),
	    onExiting: onExiting,
	    timeout: transitionDuration,
	    direction: vertical === 'top' ? 'down' : 'up'
	  }, TransitionProps), children || /*#__PURE__*/react.exports.createElement(SnackbarContent$1, _extends$5({
	    message: message,
	    action: action
	  }, ContentProps)))));
	});
	withStyles(styles$q, {
	  flip: false,
	  name: 'MuiSnackbar'
	})(Snackbar);

	var styles$p = {
	  /* Styles applied to the root element. */
	  root: {},

	  /* Styles applied to the root element if `orientation="horizontal"`. */
	  horizontal: {
	    paddingLeft: 8,
	    paddingRight: 8
	  },

	  /* Styles applied to the root element if `orientation="vertical"`. */
	  vertical: {},

	  /* Styles applied to the root element if `alternativeLabel={true}`. */
	  alternativeLabel: {
	    flex: 1,
	    position: 'relative'
	  },

	  /* Pseudo-class applied to the root element if `completed={true}`. */
	  completed: {}
	};
	var Step = /*#__PURE__*/react.exports.forwardRef(function Step(props, ref) {
	  var _props$active = props.active,
	      active = _props$active === void 0 ? false : _props$active,
	      alternativeLabel = props.alternativeLabel,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$completed = props.completed,
	      completed = _props$completed === void 0 ? false : _props$completed,
	      connectorProp = props.connector,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      _props$expanded = props.expanded,
	      expanded = _props$expanded === void 0 ? false : _props$expanded,
	      index = props.index,
	      last = props.last,
	      orientation = props.orientation,
	      other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "connector", "disabled", "expanded", "index", "last", "orientation"]);

	  var connector = connectorProp ? /*#__PURE__*/react.exports.cloneElement(connectorProp, {
	    orientation: orientation,
	    alternativeLabel: alternativeLabel,
	    index: index,
	    active: active,
	    completed: completed,
	    disabled: disabled
	  }) : null;
	  var newChildren = /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel, completed && classes.completed),
	    ref: ref
	  }, other), connector && alternativeLabel && index !== 0 ? connector : null, react.exports.Children.map(children, function (child) {
	    if (! /*#__PURE__*/react.exports.isValidElement(child)) {
	      return null;
	    }

	    return /*#__PURE__*/react.exports.cloneElement(child, _extends$5({
	      active: active,
	      alternativeLabel: alternativeLabel,
	      completed: completed,
	      disabled: disabled,
	      expanded: expanded,
	      last: last,
	      icon: index + 1,
	      orientation: orientation
	    }, child.props));
	  }));

	  if (connector && !alternativeLabel && index !== 0) {
	    return /*#__PURE__*/react.exports.createElement(react.exports.Fragment, null, connector, newChildren);
	  }

	  return newChildren;
	});
	withStyles(styles$p, {
	  name: 'MuiStep'
	})(Step);

	/**
	 * @ignore - internal component.
	 */

	var CheckCircle = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"
	}));

	/**
	 * @ignore - internal component.
	 */

	var Warning = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
	}));

	var styles$o = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'block',
	      color: theme.palette.text.disabled,
	      '&$completed': {
	        color: theme.palette.primary.main
	      },
	      '&$active': {
	        color: theme.palette.primary.main
	      },
	      '&$error': {
	        color: theme.palette.error.main
	      }
	    },

	    /* Styles applied to the SVG text element. */
	    text: {
	      fill: theme.palette.primary.contrastText,
	      fontSize: theme.typography.caption.fontSize,
	      fontFamily: theme.typography.fontFamily
	    },

	    /* Pseudo-class applied to the root element if `active={true}`. */
	    active: {},

	    /* Pseudo-class applied to the root element if `completed={true}`. */
	    completed: {},

	    /* Pseudo-class applied to the root element if `error={true}`. */
	    error: {}
	  };
	};

	var _ref$2 = /*#__PURE__*/react.exports.createElement("circle", {
	  cx: "12",
	  cy: "12",
	  r: "12"
	});

	var StepIcon = /*#__PURE__*/react.exports.forwardRef(function StepIcon(props, ref) {
	  var _props$completed = props.completed,
	      completed = _props$completed === void 0 ? false : _props$completed,
	      icon = props.icon,
	      _props$active = props.active,
	      active = _props$active === void 0 ? false : _props$active,
	      _props$error = props.error,
	      error = _props$error === void 0 ? false : _props$error,
	      classes = props.classes;

	  if (typeof icon === 'number' || typeof icon === 'string') {
	    var className = clsx(classes.root, active && classes.active, error && classes.error, completed && classes.completed);

	    if (error) {
	      return /*#__PURE__*/react.exports.createElement(Warning, {
	        className: className,
	        ref: ref
	      });
	    }

	    if (completed) {
	      return /*#__PURE__*/react.exports.createElement(CheckCircle, {
	        className: className,
	        ref: ref
	      });
	    }

	    return /*#__PURE__*/react.exports.createElement(SvgIcon$2, {
	      className: className,
	      ref: ref
	    }, _ref$2, /*#__PURE__*/react.exports.createElement("text", {
	      className: classes.text,
	      x: "12",
	      y: "16",
	      textAnchor: "middle"
	    }, icon));
	  }

	  return icon;
	});
	var StepIcon$1 = withStyles(styles$o, {
	  name: 'MuiStepIcon'
	})(StepIcon);

	var styles$n = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'flex',
	      alignItems: 'center',
	      '&$alternativeLabel': {
	        flexDirection: 'column'
	      },
	      '&$disabled': {
	        cursor: 'default'
	      }
	    },

	    /* Styles applied to the root element if `orientation="horizontal"`. */
	    horizontal: {},

	    /* Styles applied to the root element if `orientation="vertical"`. */
	    vertical: {},

	    /* Styles applied to the `Typography` component which wraps `children`. */
	    label: {
	      color: theme.palette.text.secondary,
	      '&$active': {
	        color: theme.palette.text.primary,
	        fontWeight: 500
	      },
	      '&$completed': {
	        color: theme.palette.text.primary,
	        fontWeight: 500
	      },
	      '&$alternativeLabel': {
	        textAlign: 'center',
	        marginTop: 16
	      },
	      '&$error': {
	        color: theme.palette.error.main
	      }
	    },

	    /* Pseudo-class applied to the `Typography` component if `active={true}`. */
	    active: {},

	    /* Pseudo-class applied to the `Typography` component if `completed={true}`. */
	    completed: {},

	    /* Pseudo-class applied to the root element and `Typography` component if `error={true}`. */
	    error: {},

	    /* Pseudo-class applied to the root element and `Typography` component if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the `icon` container element. */
	    iconContainer: {
	      flexShrink: 0,
	      // Fix IE 11 issue
	      display: 'flex',
	      paddingRight: 8,
	      '&$alternativeLabel': {
	        paddingRight: 0
	      }
	    },

	    /* Pseudo-class applied to the root and icon container and `Typography` if `alternativeLabel={true}`. */
	    alternativeLabel: {},

	    /* Styles applied to the container element which wraps `Typography` and `optional`. */
	    labelContainer: {
	      width: '100%'
	    }
	  };
	};
	var StepLabel = /*#__PURE__*/react.exports.forwardRef(function StepLabel(props, ref) {
	  var _props$active = props.active,
	      active = _props$active === void 0 ? false : _props$active,
	      _props$alternativeLab = props.alternativeLabel,
	      alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$completed = props.completed,
	      completed = _props$completed === void 0 ? false : _props$completed,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      _props$error = props.error,
	      error = _props$error === void 0 ? false : _props$error;
	      props.expanded;
	      var icon = props.icon;
	      props.last;
	      var optional = props.optional,
	      _props$orientation = props.orientation,
	      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
	      StepIconComponentProp = props.StepIconComponent,
	      StepIconProps = props.StepIconProps,
	      other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "disabled", "error", "expanded", "icon", "last", "optional", "orientation", "StepIconComponent", "StepIconProps"]);

	  var StepIconComponent = StepIconComponentProp;

	  if (icon && !StepIconComponent) {
	    StepIconComponent = StepIcon$1;
	  }

	  return /*#__PURE__*/react.exports.createElement("span", _extends$5({
	    className: clsx(classes.root, classes[orientation], className, disabled && classes.disabled, alternativeLabel && classes.alternativeLabel, error && classes.error),
	    ref: ref
	  }, other), icon || StepIconComponent ? /*#__PURE__*/react.exports.createElement("span", {
	    className: clsx(classes.iconContainer, alternativeLabel && classes.alternativeLabel)
	  }, /*#__PURE__*/react.exports.createElement(StepIconComponent, _extends$5({
	    completed: completed,
	    active: active,
	    error: error,
	    icon: icon
	  }, StepIconProps))) : null, /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.labelContainer
	  }, children ? /*#__PURE__*/react.exports.createElement(Typography$1, {
	    variant: "body2",
	    component: "span",
	    display: "block",
	    className: clsx(classes.label, alternativeLabel && classes.alternativeLabel, completed && classes.completed, active && classes.active, error && classes.error)
	  }, children) : null, optional));
	});
	StepLabel.muiName = 'StepLabel';
	var StepLabel$1 = withStyles(styles$n, {
	  name: 'MuiStepLabel'
	})(StepLabel);

	var styles$m = {
	  /* Styles applied to the root element. */
	  root: {
	    width: '100%',
	    padding: '24px 16px',
	    margin: '-24px -16px',
	    boxSizing: 'content-box'
	  },

	  /* Styles applied to the root element if `orientation="horizontal"`. */
	  horizontal: {},

	  /* Styles applied to the root element if `orientation="vertical"`. */
	  vertical: {
	    justifyContent: 'flex-start',
	    padding: '8px',
	    margin: '-8px'
	  },

	  /* Styles applied to the `ButtonBase` touch-ripple. */
	  touchRipple: {
	    color: 'rgba(0, 0, 0, 0.3)'
	  }
	};
	var StepButton = /*#__PURE__*/react.exports.forwardRef(function StepButton(props, ref) {
	  var active = props.active,
	      alternativeLabel = props.alternativeLabel,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      completed = props.completed,
	      disabled = props.disabled;
	      props.expanded;
	      var icon = props.icon;
	      props.last;
	      var optional = props.optional,
	      orientation = props.orientation,
	      other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "disabled", "expanded", "icon", "last", "optional", "orientation"]);

	  var childProps = {
	    active: active,
	    alternativeLabel: alternativeLabel,
	    completed: completed,
	    disabled: disabled,
	    icon: icon,
	    optional: optional,
	    orientation: orientation
	  };
	  var child = isMuiElement(children, ['StepLabel']) ? /*#__PURE__*/react.exports.cloneElement(children, childProps) : /*#__PURE__*/react.exports.createElement(StepLabel$1, childProps, children);
	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    focusRipple: true,
	    disabled: disabled,
	    TouchRippleProps: {
	      className: classes.touchRipple
	    },
	    className: clsx(classes.root, classes[orientation], className),
	    ref: ref
	  }, other), child);
	});
	withStyles(styles$m, {
	  name: 'MuiStepButton'
	})(StepButton);

	var styles$l = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      flex: '1 1 auto'
	    },

	    /* Styles applied to the root element if `orientation="horizontal"`. */
	    horizontal: {},

	    /* Styles applied to the root element if `orientation="vertical"`. */
	    vertical: {
	      marginLeft: 12,
	      // half icon
	      padding: '0 0 8px'
	    },

	    /* Styles applied to the root element if `alternativeLabel={true}`. */
	    alternativeLabel: {
	      position: 'absolute',
	      top: 8 + 4,
	      left: 'calc(-50% + 20px)',
	      right: 'calc(50% + 20px)'
	    },

	    /* Pseudo-class applied to the root element if `active={true}`. */
	    active: {},

	    /* Pseudo-class applied to the root element if `completed={true}`. */
	    completed: {},

	    /* Pseudo-class applied to the root element if `disabled={true}`. */
	    disabled: {},

	    /* Styles applied to the line element. */
	    line: {
	      display: 'block',
	      borderColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
	    },

	    /* Styles applied to the root element if `orientation="horizontal"`. */
	    lineHorizontal: {
	      borderTopStyle: 'solid',
	      borderTopWidth: 1
	    },

	    /* Styles applied to the root element if `orientation="vertical"`. */
	    lineVertical: {
	      borderLeftStyle: 'solid',
	      borderLeftWidth: 1,
	      minHeight: 24
	    }
	  };
	};
	var StepConnector = /*#__PURE__*/react.exports.forwardRef(function StepConnector(props, ref) {
	  var active = props.active,
	      _props$alternativeLab = props.alternativeLabel,
	      alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
	      classes = props.classes,
	      className = props.className,
	      completed = props.completed,
	      disabled = props.disabled;
	      props.index;
	      var _props$orientation = props.orientation,
	      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
	      other = _objectWithoutProperties(props, ["active", "alternativeLabel", "classes", "className", "completed", "disabled", "index", "orientation"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel, active && classes.active, completed && classes.completed, disabled && classes.disabled),
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement("span", {
	    className: clsx(classes.line, {
	      'horizontal': classes.lineHorizontal,
	      'vertical': classes.lineVertical
	    }[orientation])
	  }));
	});
	var StepConnector$1 = withStyles(styles$l, {
	  name: 'MuiStepConnector'
	})(StepConnector);

	var styles$k = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      marginTop: 8,
	      marginLeft: 12,
	      // half icon
	      paddingLeft: 8 + 12,
	      // margin + half icon
	      paddingRight: 8,
	      borderLeft: "1px solid ".concat(theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600])
	    },

	    /* Styles applied to the root element if `last={true}` (controlled by `Step`). */
	    last: {
	      borderLeft: 'none'
	    },

	    /* Styles applied to the Transition component. */
	    transition: {}
	  };
	};
	var StepContent = /*#__PURE__*/react.exports.forwardRef(function StepContent(props, ref) {
	  var active = props.active;
	      props.alternativeLabel;
	      var children = props.children,
	      classes = props.classes,
	      className = props.className;
	      props.completed;
	      var expanded = props.expanded,
	      last = props.last;
	      props.optional;
	      props.orientation;
	      var _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Collapse$1 : _props$TransitionComp,
	      _props$transitionDura = props.transitionDuration,
	      transitionDurationProp = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
	      TransitionProps = props.TransitionProps,
	      other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "expanded", "last", "optional", "orientation", "TransitionComponent", "transitionDuration", "TransitionProps"]);

	  var transitionDuration = transitionDurationProp;

	  if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
	    transitionDuration = undefined;
	  }

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, className, last && classes.last),
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	    in: active || expanded,
	    className: classes.transition,
	    timeout: transitionDuration,
	    unmountOnExit: true
	  }, TransitionProps), children));
	});
	withStyles(styles$k, {
	  name: 'MuiStepContent'
	})(StepContent);

	var styles$j = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'flex',
	    padding: 24
	  },

	  /* Styles applied to the root element if `orientation="horizontal"`. */
	  horizontal: {
	    flexDirection: 'row',
	    alignItems: 'center'
	  },

	  /* Styles applied to the root element if `orientation="vertical"`. */
	  vertical: {
	    flexDirection: 'column'
	  },

	  /* Styles applied to the root element if `alternativeLabel={true}`. */
	  alternativeLabel: {
	    alignItems: 'flex-start'
	  }
	};
	var defaultConnector = /*#__PURE__*/react.exports.createElement(StepConnector$1, null);
	var Stepper = /*#__PURE__*/react.exports.forwardRef(function Stepper(props, ref) {
	  var _props$activeStep = props.activeStep,
	      activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
	      _props$alternativeLab = props.alternativeLabel,
	      alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$connector = props.connector,
	      connectorProp = _props$connector === void 0 ? defaultConnector : _props$connector,
	      _props$nonLinear = props.nonLinear,
	      nonLinear = _props$nonLinear === void 0 ? false : _props$nonLinear,
	      _props$orientation = props.orientation,
	      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
	      other = _objectWithoutProperties(props, ["activeStep", "alternativeLabel", "children", "classes", "className", "connector", "nonLinear", "orientation"]);

	  var connector = /*#__PURE__*/react.exports.isValidElement(connectorProp) ? /*#__PURE__*/react.exports.cloneElement(connectorProp, {
	    orientation: orientation
	  }) : null;
	  var childrenArray = react.exports.Children.toArray(children);
	  var steps = childrenArray.map(function (step, index) {
	    var state = {
	      index: index,
	      active: false,
	      completed: false,
	      disabled: false
	    };

	    if (activeStep === index) {
	      state.active = true;
	    } else if (!nonLinear && activeStep > index) {
	      state.completed = true;
	    } else if (!nonLinear && activeStep < index) {
	      state.disabled = true;
	    }

	    return /*#__PURE__*/react.exports.cloneElement(step, _extends$5({
	      alternativeLabel: alternativeLabel,
	      connector: connector,
	      last: index + 1 === childrenArray.length,
	      orientation: orientation
	    }, state, step.props));
	  });
	  return /*#__PURE__*/react.exports.createElement(Paper$1, _extends$5({
	    square: true,
	    elevation: 0,
	    className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel),
	    ref: ref
	  }, other), steps);
	});
	withStyles(styles$j, {
	  name: 'MuiStepper'
	})(Stepper);

	var styles$i = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'fixed',
	      top: 0,
	      left: 0,
	      bottom: 0,
	      zIndex: theme.zIndex.drawer - 1
	    },
	    anchorLeft: {
	      right: 'auto'
	    },
	    anchorRight: {
	      left: 'auto',
	      right: 0
	    },
	    anchorTop: {
	      bottom: 'auto',
	      right: 0
	    },
	    anchorBottom: {
	      top: 'auto',
	      bottom: 0,
	      right: 0
	    }
	  };
	};
	/**
	 * @ignore - internal component.
	 */

	var SwipeArea = /*#__PURE__*/react.exports.forwardRef(function SwipeArea(props, ref) {
	  var anchor = props.anchor,
	      classes = props.classes,
	      className = props.className,
	      width = props.width,
	      other = _objectWithoutProperties(props, ["anchor", "classes", "className", "width"]);

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    className: clsx(classes.root, classes["anchor".concat(capitalize(anchor))], className),
	    ref: ref,
	    style: _defineProperty$1({}, isHorizontal(anchor) ? 'width' : 'height', width)
	  }, other));
	});
	withStyles(styles$i, {
	  name: 'PrivateSwipeArea'
	})(SwipeArea);

	typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
	({
	  enter: duration.enteringScreen,
	  exit: duration.leavingScreen
	});

	var styles$h = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'inline-flex',
	      width: 34 + 12 * 2,
	      height: 14 + 12 * 2,
	      overflow: 'hidden',
	      padding: 12,
	      boxSizing: 'border-box',
	      position: 'relative',
	      flexShrink: 0,
	      zIndex: 0,
	      // Reset the stacking context.
	      verticalAlign: 'middle',
	      // For correct alignment with the text.
	      '@media print': {
	        colorAdjust: 'exact'
	      }
	    },

	    /* Styles applied to the root element if `edge="start"`. */
	    edgeStart: {
	      marginLeft: -8
	    },

	    /* Styles applied to the root element if `edge="end"`. */
	    edgeEnd: {
	      marginRight: -8
	    },

	    /* Styles applied to the internal `SwitchBase` component's `root` class. */
	    switchBase: {
	      position: 'absolute',
	      top: 0,
	      left: 0,
	      zIndex: 1,
	      // Render above the focus ripple.
	      color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
	      transition: theme.transitions.create(['left', 'transform'], {
	        duration: theme.transitions.duration.shortest
	      }),
	      '&$checked': {
	        transform: 'translateX(20px)'
	      },
	      '&$disabled': {
	        color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
	      },
	      '&$checked + $track': {
	        opacity: 0.5
	      },
	      '&$disabled + $track': {
	        opacity: theme.palette.type === 'light' ? 0.12 : 0.1
	      }
	    },

	    /* Styles applied to the internal SwitchBase component's root element if `color="primary"`. */
	    colorPrimary: {
	      '&$checked': {
	        color: theme.palette.primary.main,
	        '&:hover': {
	          backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
	          '@media (hover: none)': {
	            backgroundColor: 'transparent'
	          }
	        }
	      },
	      '&$disabled': {
	        color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
	      },
	      '&$checked + $track': {
	        backgroundColor: theme.palette.primary.main
	      },
	      '&$disabled + $track': {
	        backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
	      }
	    },

	    /* Styles applied to the internal SwitchBase component's root element if `color="secondary"`. */
	    colorSecondary: {
	      '&$checked': {
	        color: theme.palette.secondary.main,
	        '&:hover': {
	          backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
	          '@media (hover: none)': {
	            backgroundColor: 'transparent'
	          }
	        }
	      },
	      '&$disabled': {
	        color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
	      },
	      '&$checked + $track': {
	        backgroundColor: theme.palette.secondary.main
	      },
	      '&$disabled + $track': {
	        backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
	      }
	    },

	    /* Styles applied to the root element if `size="small"`. */
	    sizeSmall: {
	      width: 40,
	      height: 24,
	      padding: 7,
	      '& $thumb': {
	        width: 16,
	        height: 16
	      },
	      '& $switchBase': {
	        padding: 4,
	        '&$checked': {
	          transform: 'translateX(16px)'
	        }
	      }
	    },

	    /* Pseudo-class applied to the internal `SwitchBase` component's `checked` class. */
	    checked: {},

	    /* Pseudo-class applied to the internal SwitchBase component's disabled class. */
	    disabled: {},

	    /* Styles applied to the internal SwitchBase component's input element. */
	    input: {
	      left: '-100%',
	      width: '300%'
	    },

	    /* Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop. */
	    thumb: {
	      boxShadow: theme.shadows[1],
	      backgroundColor: 'currentColor',
	      width: 20,
	      height: 20,
	      borderRadius: '50%'
	    },

	    /* Styles applied to the track element. */
	    track: {
	      height: '100%',
	      width: '100%',
	      borderRadius: 14 / 2,
	      zIndex: -1,
	      transition: theme.transitions.create(['opacity', 'background-color'], {
	        duration: theme.transitions.duration.shortest
	      }),
	      backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
	      opacity: theme.palette.type === 'light' ? 0.38 : 0.3
	    }
	  };
	};
	var Switch = /*#__PURE__*/react.exports.forwardRef(function Switch(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'secondary' : _props$color,
	      _props$edge = props.edge,
	      edge = _props$edge === void 0 ? false : _props$edge,
	      _props$size = props.size,
	      size = _props$size === void 0 ? 'medium' : _props$size,
	      other = _objectWithoutProperties(props, ["classes", "className", "color", "edge", "size"]);

	  var icon = /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.thumb
	  });
	  return /*#__PURE__*/react.exports.createElement("span", {
	    className: clsx(classes.root, className, {
	      'start': classes.edgeStart,
	      'end': classes.edgeEnd
	    }[edge], size === "small" && classes["size".concat(capitalize(size))])
	  }, /*#__PURE__*/react.exports.createElement(SwitchBase$1, _extends$5({
	    type: "checkbox",
	    icon: icon,
	    checkedIcon: icon,
	    classes: {
	      root: clsx(classes.switchBase, classes["color".concat(capitalize(color))]),
	      input: classes.input,
	      checked: classes.checked,
	      disabled: classes.disabled
	    },
	    ref: ref
	  }, other)), /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.track
	  }));
	});
	withStyles(styles$h, {
	  name: 'MuiSwitch'
	})(Switch);

	var styles$g = function styles(theme) {
	  var _extends2;

	  return {
	    /* Styles applied to the root element. */
	    root: _extends$5({}, theme.typography.button, (_extends2 = {
	      maxWidth: 264,
	      minWidth: 72,
	      position: 'relative',
	      boxSizing: 'border-box',
	      minHeight: 48,
	      flexShrink: 0,
	      padding: '6px 12px'
	    }, _defineProperty$1(_extends2, theme.breakpoints.up('sm'), {
	      padding: '6px 24px'
	    }), _defineProperty$1(_extends2, "overflow", 'hidden'), _defineProperty$1(_extends2, "whiteSpace", 'normal'), _defineProperty$1(_extends2, "textAlign", 'center'), _defineProperty$1(_extends2, theme.breakpoints.up('sm'), {
	      minWidth: 160
	    }), _extends2)),

	    /* Styles applied to the root element if both `icon` and `label` are provided. */
	    labelIcon: {
	      minHeight: 72,
	      paddingTop: 9,
	      '& $wrapper > *:first-child': {
	        marginBottom: 6
	      }
	    },

	    /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="inherit"`. */
	    textColorInherit: {
	      color: 'inherit',
	      opacity: 0.7,
	      '&$selected': {
	        opacity: 1
	      },
	      '&$disabled': {
	        opacity: 0.5
	      }
	    },

	    /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="primary"`. */
	    textColorPrimary: {
	      color: theme.palette.text.secondary,
	      '&$selected': {
	        color: theme.palette.primary.main
	      },
	      '&$disabled': {
	        color: theme.palette.text.disabled
	      }
	    },

	    /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="secondary"`. */
	    textColorSecondary: {
	      color: theme.palette.text.secondary,
	      '&$selected': {
	        color: theme.palette.secondary.main
	      },
	      '&$disabled': {
	        color: theme.palette.text.disabled
	      }
	    },

	    /* Pseudo-class applied to the root element if `selected={true}` (controlled by the Tabs component). */
	    selected: {},

	    /* Pseudo-class applied to the root element if `disabled={true}` (controlled by the Tabs component). */
	    disabled: {},

	    /* Styles applied to the root element if `fullWidth={true}` (controlled by the Tabs component). */
	    fullWidth: {
	      flexShrink: 1,
	      flexGrow: 1,
	      flexBasis: 0,
	      maxWidth: 'none'
	    },

	    /* Styles applied to the root element if `wrapped={true}`. */
	    wrapped: {
	      fontSize: theme.typography.pxToRem(12),
	      lineHeight: 1.5
	    },

	    /* Styles applied to the `icon` and `label`'s wrapper element. */
	    wrapper: {
	      display: 'inline-flex',
	      alignItems: 'center',
	      justifyContent: 'center',
	      width: '100%',
	      flexDirection: 'column'
	    }
	  };
	};
	var Tab = /*#__PURE__*/react.exports.forwardRef(function Tab(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      _props$disableFocusRi = props.disableFocusRipple,
	      disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
	      fullWidth = props.fullWidth,
	      icon = props.icon,
	      indicator = props.indicator,
	      label = props.label,
	      onChange = props.onChange,
	      onClick = props.onClick,
	      onFocus = props.onFocus,
	      selected = props.selected,
	      selectionFollowsFocus = props.selectionFollowsFocus,
	      _props$textColor = props.textColor,
	      textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,
	      value = props.value,
	      _props$wrapped = props.wrapped,
	      wrapped = _props$wrapped === void 0 ? false : _props$wrapped,
	      other = _objectWithoutProperties(props, ["classes", "className", "disabled", "disableFocusRipple", "fullWidth", "icon", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"]);

	  var handleClick = function handleClick(event) {
	    if (onChange) {
	      onChange(event, value);
	    }

	    if (onClick) {
	      onClick(event);
	    }
	  };

	  var handleFocus = function handleFocus(event) {
	    if (selectionFollowsFocus && !selected && onChange) {
	      onChange(event, value);
	    }

	    if (onFocus) {
	      onFocus(event);
	    }
	  };

	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    focusRipple: !disableFocusRipple,
	    className: clsx(classes.root, classes["textColor".concat(capitalize(textColor))], className, disabled && classes.disabled, selected && classes.selected, label && icon && classes.labelIcon, fullWidth && classes.fullWidth, wrapped && classes.wrapped),
	    ref: ref,
	    role: "tab",
	    "aria-selected": selected,
	    disabled: disabled,
	    onClick: handleClick,
	    onFocus: handleFocus,
	    tabIndex: selected ? 0 : -1
	  }, other), /*#__PURE__*/react.exports.createElement("span", {
	    className: classes.wrapper
	  }, icon, label), indicator);
	});
	withStyles(styles$g, {
	  name: 'MuiTab'
	})(Tab);

	/**
	 * @ignore - internal component.
	 */

	var TableContext = react.exports.createContext();

	var styles$f = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      display: 'table',
	      width: '100%',
	      borderCollapse: 'collapse',
	      borderSpacing: 0,
	      '& caption': _extends$5({}, theme.typography.body2, {
	        padding: theme.spacing(2),
	        color: theme.palette.text.secondary,
	        textAlign: 'left',
	        captionSide: 'bottom'
	      })
	    },

	    /* Styles applied to the root element if `stickyHeader={true}`. */
	    stickyHeader: {
	      borderCollapse: 'separate'
	    }
	  };
	};
	var defaultComponent$5 = 'table';
	var Table = /*#__PURE__*/react.exports.forwardRef(function Table(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? defaultComponent$5 : _props$component,
	      _props$padding = props.padding,
	      padding = _props$padding === void 0 ? 'normal' : _props$padding,
	      _props$size = props.size,
	      size = _props$size === void 0 ? 'medium' : _props$size,
	      _props$stickyHeader = props.stickyHeader,
	      stickyHeader = _props$stickyHeader === void 0 ? false : _props$stickyHeader,
	      other = _objectWithoutProperties(props, ["classes", "className", "component", "padding", "size", "stickyHeader"]);

	  var table = react.exports.useMemo(function () {
	    return {
	      padding: padding,
	      size: size,
	      stickyHeader: stickyHeader
	    };
	  }, [padding, size, stickyHeader]);
	  return /*#__PURE__*/react.exports.createElement(TableContext.Provider, {
	    value: table
	  }, /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    role: Component === defaultComponent$5 ? null : 'table',
	    ref: ref,
	    className: clsx(classes.root, className, stickyHeader && classes.stickyHeader)
	  }, other)));
	});
	withStyles(styles$f, {
	  name: 'MuiTable'
	})(Table);

	/**
	 * @ignore - internal component.
	 */

	var Tablelvl2Context = react.exports.createContext();

	var styles$e = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'table-row-group'
	  }
	};
	var tablelvl2$2 = {
	  variant: 'body'
	};
	var defaultComponent$4 = 'tbody';
	var TableBody = /*#__PURE__*/react.exports.forwardRef(function TableBody(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? defaultComponent$4 : _props$component,
	      other = _objectWithoutProperties(props, ["classes", "className", "component"]);

	  return /*#__PURE__*/react.exports.createElement(Tablelvl2Context.Provider, {
	    value: tablelvl2$2
	  }, /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref,
	    role: Component === defaultComponent$4 ? null : 'rowgroup'
	  }, other)));
	});
	withStyles(styles$e, {
	  name: 'MuiTableBody'
	})(TableBody);

	var styles$d = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: _extends$5({}, theme.typography.body2, {
	      display: 'table-cell',
	      verticalAlign: 'inherit',
	      // Workaround for a rendering bug with spanned columns in Chrome 62.0.
	      // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
	      borderBottom: "1px solid\n    ".concat(theme.palette.type === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)),
	      textAlign: 'left',
	      padding: 16
	    }),

	    /* Styles applied to the root element if `variant="head"` or `context.table.head`. */
	    head: {
	      color: theme.palette.text.primary,
	      lineHeight: theme.typography.pxToRem(24),
	      fontWeight: theme.typography.fontWeightMedium
	    },

	    /* Styles applied to the root element if `variant="body"` or `context.table.body`. */
	    body: {
	      color: theme.palette.text.primary
	    },

	    /* Styles applied to the root element if `variant="footer"` or `context.table.footer`. */
	    footer: {
	      color: theme.palette.text.secondary,
	      lineHeight: theme.typography.pxToRem(21),
	      fontSize: theme.typography.pxToRem(12)
	    },

	    /* Styles applied to the root element if `size="small"`. */
	    sizeSmall: {
	      padding: '6px 24px 6px 16px',
	      '&:last-child': {
	        paddingRight: 16
	      },
	      '&$paddingCheckbox': {
	        width: 24,
	        // prevent the checkbox column from growing
	        padding: '0 12px 0 16px',
	        '&:last-child': {
	          paddingLeft: 12,
	          paddingRight: 16
	        },
	        '& > *': {
	          padding: 0
	        }
	      }
	    },

	    /* Styles applied to the root element if `padding="checkbox"`. */
	    paddingCheckbox: {
	      width: 48,
	      // prevent the checkbox column from growing
	      padding: '0 0 0 4px',
	      '&:last-child': {
	        paddingLeft: 0,
	        paddingRight: 4
	      }
	    },

	    /* Styles applied to the root element if `padding="none"`. */
	    paddingNone: {
	      padding: 0,
	      '&:last-child': {
	        padding: 0
	      }
	    },

	    /* Styles applied to the root element if `align="left"`. */
	    alignLeft: {
	      textAlign: 'left'
	    },

	    /* Styles applied to the root element if `align="center"`. */
	    alignCenter: {
	      textAlign: 'center'
	    },

	    /* Styles applied to the root element if `align="right"`. */
	    alignRight: {
	      textAlign: 'right',
	      flexDirection: 'row-reverse'
	    },

	    /* Styles applied to the root element if `align="justify"`. */
	    alignJustify: {
	      textAlign: 'justify'
	    },

	    /* Styles applied to the root element if `context.table.stickyHeader={true}`. */
	    stickyHeader: {
	      position: 'sticky',
	      top: 0,
	      left: 0,
	      zIndex: 2,
	      backgroundColor: theme.palette.background.default
	    }
	  };
	};
	/**
	 * The component renders a `<th>` element when the parent context is a header
	 * or otherwise a `<td>` element.
	 */

	var TableCell = /*#__PURE__*/react.exports.forwardRef(function TableCell(props, ref) {
	  var _props$align = props.align,
	      align = _props$align === void 0 ? 'inherit' : _props$align,
	      classes = props.classes,
	      className = props.className,
	      component = props.component,
	      paddingProp = props.padding,
	      scopeProp = props.scope,
	      sizeProp = props.size,
	      sortDirection = props.sortDirection,
	      variantProp = props.variant,
	      other = _objectWithoutProperties(props, ["align", "classes", "className", "component", "padding", "scope", "size", "sortDirection", "variant"]);

	  var table = react.exports.useContext(TableContext);
	  var tablelvl2 = react.exports.useContext(Tablelvl2Context);
	  var isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
	  var role;
	  var Component;

	  if (component) {
	    Component = component;
	    role = isHeadCell ? 'columnheader' : 'cell';
	  } else {
	    Component = isHeadCell ? 'th' : 'td';
	  }

	  var scope = scopeProp;

	  if (!scope && isHeadCell) {
	    scope = 'col';
	  }

	  var padding = paddingProp || (table && table.padding ? table.padding : 'normal');
	  var size = sizeProp || (table && table.size ? table.size : 'medium');
	  var variant = variantProp || tablelvl2 && tablelvl2.variant;
	  var ariaSort = null;

	  if (sortDirection) {
	    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
	  }

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    ref: ref,
	    className: clsx(classes.root, classes[variant], className, align !== 'inherit' && classes["align".concat(capitalize(align))], padding !== 'normal' && classes["padding".concat(capitalize(padding))], size !== 'medium' && classes["size".concat(capitalize(size))], variant === 'head' && table && table.stickyHeader && classes.stickyHeader),
	    "aria-sort": ariaSort,
	    role: role,
	    scope: scope
	  }, other));
	});
	var TableCell$1 = withStyles(styles$d, {
	  name: 'MuiTableCell'
	})(TableCell);

	var styles$c = {
	  /* Styles applied to the root element. */
	  root: {
	    width: '100%',
	    overflowX: 'auto'
	  }
	};
	var TableContainer = /*#__PURE__*/react.exports.forwardRef(function TableContainer(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      other = _objectWithoutProperties(props, ["classes", "className", "component"]);

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    ref: ref,
	    className: clsx(classes.root, className)
	  }, other));
	});
	withStyles(styles$c, {
	  name: 'MuiTableContainer'
	})(TableContainer);

	var styles$b = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'table-footer-group'
	  }
	};
	var tablelvl2$1 = {
	  variant: 'footer'
	};
	var defaultComponent$3 = 'tfoot';
	var TableFooter = /*#__PURE__*/react.exports.forwardRef(function TableFooter(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? defaultComponent$3 : _props$component,
	      other = _objectWithoutProperties(props, ["classes", "className", "component"]);

	  return /*#__PURE__*/react.exports.createElement(Tablelvl2Context.Provider, {
	    value: tablelvl2$1
	  }, /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref,
	    role: Component === defaultComponent$3 ? null : 'rowgroup'
	  }, other)));
	});
	withStyles(styles$b, {
	  name: 'MuiTableFooter'
	})(TableFooter);

	var styles$a = {
	  /* Styles applied to the root element. */
	  root: {
	    display: 'table-header-group'
	  }
	};
	var tablelvl2 = {
	  variant: 'head'
	};
	var defaultComponent$2 = 'thead';
	var TableHead = /*#__PURE__*/react.exports.forwardRef(function TableHead(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? defaultComponent$2 : _props$component,
	      other = _objectWithoutProperties(props, ["classes", "className", "component"]);

	  return /*#__PURE__*/react.exports.createElement(Tablelvl2Context.Provider, {
	    value: tablelvl2
	  }, /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className),
	    ref: ref,
	    role: Component === defaultComponent$2 ? null : 'rowgroup'
	  }, other)));
	});
	withStyles(styles$a, {
	  name: 'MuiTableHead'
	})(TableHead);

	var styles$9 = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      position: 'relative',
	      display: 'flex',
	      alignItems: 'center'
	    },

	    /* Styles applied to the root element if `disableGutters={false}`. */
	    gutters: _defineProperty$1({
	      paddingLeft: theme.spacing(2),
	      paddingRight: theme.spacing(2)
	    }, theme.breakpoints.up('sm'), {
	      paddingLeft: theme.spacing(3),
	      paddingRight: theme.spacing(3)
	    }),

	    /* Styles applied to the root element if `variant="regular"`. */
	    regular: theme.mixins.toolbar,

	    /* Styles applied to the root element if `variant="dense"`. */
	    dense: {
	      minHeight: 48
	    }
	  };
	};
	var Toolbar = /*#__PURE__*/react.exports.forwardRef(function Toolbar(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      _props$disableGutters = props.disableGutters,
	      disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'regular' : _props$variant,
	      other = _objectWithoutProperties(props, ["classes", "className", "component", "disableGutters", "variant"]);

	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, classes[variant], className, !disableGutters && classes.gutters),
	    ref: ref
	  }, other));
	});
	var Toolbar$1 = withStyles(styles$9, {
	  name: 'MuiToolbar'
	})(Toolbar);

	/**
	 * @ignore - internal component.
	 */

	var KeyboardArrowLeft = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
	}));

	/**
	 * @ignore - internal component.
	 */

	var KeyboardArrowRight = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
	}));

	/**
	 * @ignore - internal component.
	 */

	var _ref$1 = /*#__PURE__*/react.exports.createElement(KeyboardArrowRight, null);

	var _ref2$1 = /*#__PURE__*/react.exports.createElement(KeyboardArrowLeft, null);

	var _ref3 = /*#__PURE__*/react.exports.createElement(KeyboardArrowLeft, null);

	var _ref4 = /*#__PURE__*/react.exports.createElement(KeyboardArrowRight, null);

	var TablePaginationActions = /*#__PURE__*/react.exports.forwardRef(function TablePaginationActions(props, ref) {
	  var backIconButtonProps = props.backIconButtonProps,
	      count = props.count,
	      nextIconButtonProps = props.nextIconButtonProps,
	      _props$onChangePage = props.onChangePage,
	      onChangePage = _props$onChangePage === void 0 ? function () {} : _props$onChangePage,
	      _props$onPageChange = props.onPageChange,
	      onPageChange = _props$onPageChange === void 0 ? function () {} : _props$onPageChange,
	      page = props.page,
	      rowsPerPage = props.rowsPerPage,
	      other = _objectWithoutProperties(props, ["backIconButtonProps", "count", "nextIconButtonProps", "onChangePage", "onPageChange", "page", "rowsPerPage"]);

	  var theme = useTheme$1();

	  var handleBackButtonClick = function handleBackButtonClick(event) {
	    onChangePage(event, page - 1);
	    onPageChange(event, page - 1);
	  };

	  var handleNextButtonClick = function handleNextButtonClick(event) {
	    onChangePage(event, page + 1);
	    onPageChange(event, page + 1);
	  };

	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement(IconButton$1, _extends$5({
	    onClick: handleBackButtonClick,
	    disabled: page === 0,
	    color: "inherit"
	  }, backIconButtonProps), theme.direction === 'rtl' ? _ref$1 : _ref2$1), /*#__PURE__*/react.exports.createElement(IconButton$1, _extends$5({
	    onClick: handleNextButtonClick,
	    disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
	    color: "inherit"
	  }, nextIconButtonProps), theme.direction === 'rtl' ? _ref3 : _ref4));
	});

	var styles$8 = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      color: theme.palette.text.primary,
	      fontSize: theme.typography.pxToRem(14),
	      overflow: 'auto',
	      // Increase the specificity to override TableCell.
	      '&:last-child': {
	        padding: 0
	      }
	    },

	    /* Styles applied to the Toolbar component. */
	    toolbar: {
	      minHeight: 52,
	      paddingRight: 2
	    },

	    /* Styles applied to the spacer element. */
	    spacer: {
	      flex: '1 1 100%'
	    },

	    /* Styles applied to the caption Typography components if `variant="caption"`. */
	    caption: {
	      flexShrink: 0
	    },
	    // TODO v5: `.selectRoot` should be merged with `.input`

	    /* Styles applied to the Select component root element. */
	    selectRoot: {
	      marginRight: 32,
	      marginLeft: 8
	    },

	    /* Styles applied to the Select component `select` class. */
	    select: {
	      paddingLeft: 8,
	      paddingRight: 24,
	      textAlign: 'right',
	      textAlignLast: 'right' // Align <select> on Chrome.

	    },
	    // TODO v5: remove

	    /* Styles applied to the Select component `icon` class. */
	    selectIcon: {},

	    /* Styles applied to the `InputBase` component. */
	    input: {
	      color: 'inherit',
	      fontSize: 'inherit',
	      flexShrink: 0
	    },

	    /* Styles applied to the MenuItem component. */
	    menuItem: {},

	    /* Styles applied to the internal `TablePaginationActions` component. */
	    actions: {
	      flexShrink: 0,
	      marginLeft: 20
	    }
	  };
	};

	var defaultLabelDisplayedRows = function defaultLabelDisplayedRows(_ref) {
	  var from = _ref.from,
	      to = _ref.to,
	      count = _ref.count;
	  return "".concat(from, "-").concat(to, " of ").concat(count !== -1 ? count : "more than ".concat(to));
	};

	var defaultRowsPerPageOptions = [10, 25, 50, 100];
	/**
	 * A `TableCell` based component for placing inside `TableFooter` for pagination.
	 */

	var TablePagination = /*#__PURE__*/react.exports.forwardRef(function TablePagination(props, ref) {
	  var _props$ActionsCompone = props.ActionsComponent,
	      ActionsComponent = _props$ActionsCompone === void 0 ? TablePaginationActions : _props$ActionsCompone,
	      backIconButtonProps = props.backIconButtonProps,
	      _props$backIconButton = props.backIconButtonText,
	      backIconButtonText = _props$backIconButton === void 0 ? 'Previous page' : _props$backIconButton,
	      classes = props.classes,
	      className = props.className,
	      colSpanProp = props.colSpan,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? TableCell$1 : _props$component,
	      count = props.count,
	      _props$labelDisplayed = props.labelDisplayedRows,
	      labelDisplayedRows = _props$labelDisplayed === void 0 ? defaultLabelDisplayedRows : _props$labelDisplayed,
	      _props$labelRowsPerPa = props.labelRowsPerPage,
	      labelRowsPerPage = _props$labelRowsPerPa === void 0 ? 'Rows per page:' : _props$labelRowsPerPa,
	      nextIconButtonProps = props.nextIconButtonProps,
	      _props$nextIconButton = props.nextIconButtonText,
	      nextIconButtonText = _props$nextIconButton === void 0 ? 'Next page' : _props$nextIconButton,
	      onChangePage = props.onChangePage,
	      onPageChange = props.onPageChange,
	      onChangeRowsPerPageProp = props.onChangeRowsPerPage,
	      onRowsPerPageChangeProp = props.onRowsPerPageChange,
	      page = props.page,
	      rowsPerPage = props.rowsPerPage,
	      _props$rowsPerPageOpt = props.rowsPerPageOptions,
	      rowsPerPageOptions = _props$rowsPerPageOpt === void 0 ? defaultRowsPerPageOptions : _props$rowsPerPageOpt,
	      _props$SelectProps = props.SelectProps,
	      SelectProps = _props$SelectProps === void 0 ? {} : _props$SelectProps,
	      other = _objectWithoutProperties(props, ["ActionsComponent", "backIconButtonProps", "backIconButtonText", "classes", "className", "colSpan", "component", "count", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "nextIconButtonText", "onChangePage", "onPageChange", "onChangeRowsPerPage", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps"]);

	  var onChangeRowsPerPage = onChangeRowsPerPageProp || onRowsPerPageChangeProp;
	  var colSpan;

	  if (Component === TableCell$1 || Component === 'td') {
	    colSpan = colSpanProp || 1000; // col-span over everything
	  }

	  var selectId = useId();
	  var labelId = useId();
	  var MenuItemComponent = SelectProps.native ? 'option' : MenuItem$1;
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className),
	    colSpan: colSpan,
	    ref: ref
	  }, other), /*#__PURE__*/react.exports.createElement(Toolbar$1, {
	    className: classes.toolbar
	  }, /*#__PURE__*/react.exports.createElement("div", {
	    className: classes.spacer
	  }), rowsPerPageOptions.length > 1 && /*#__PURE__*/react.exports.createElement(Typography$1, {
	    color: "inherit",
	    variant: "body2",
	    className: classes.caption,
	    id: labelId
	  }, labelRowsPerPage), rowsPerPageOptions.length > 1 && /*#__PURE__*/react.exports.createElement(Select$1, _extends$5({
	    classes: {
	      select: classes.select,
	      icon: classes.selectIcon
	    },
	    input: /*#__PURE__*/react.exports.createElement(InputBase$1, {
	      className: clsx(classes.input, classes.selectRoot)
	    }),
	    value: rowsPerPage,
	    onChange: onChangeRowsPerPage,
	    id: selectId,
	    labelId: labelId
	  }, SelectProps), rowsPerPageOptions.map(function (rowsPerPageOption) {
	    return /*#__PURE__*/react.exports.createElement(MenuItemComponent, {
	      className: classes.menuItem,
	      key: rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption,
	      value: rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption
	    }, rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption);
	  })), /*#__PURE__*/react.exports.createElement(Typography$1, {
	    color: "inherit",
	    variant: "body2",
	    className: classes.caption
	  }, labelDisplayedRows({
	    from: count === 0 ? 0 : page * rowsPerPage + 1,
	    to: count !== -1 ? Math.min(count, (page + 1) * rowsPerPage) : (page + 1) * rowsPerPage,
	    count: count === -1 ? -1 : count,
	    page: page
	  })), /*#__PURE__*/react.exports.createElement(ActionsComponent, {
	    className: classes.actions,
	    backIconButtonProps: _extends$5({
	      title: backIconButtonText,
	      'aria-label': backIconButtonText
	    }, backIconButtonProps),
	    count: count,
	    nextIconButtonProps: _extends$5({
	      title: nextIconButtonText,
	      'aria-label': nextIconButtonText
	    }, nextIconButtonProps),
	    onChangePage: onChangePage,
	    onPageChange: onPageChange,
	    page: page,
	    rowsPerPage: rowsPerPage
	  })));
	});
	withStyles(styles$8, {
	  name: 'MuiTablePagination'
	})(TablePagination);

	var styles$7 = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      color: 'inherit',
	      display: 'table-row',
	      verticalAlign: 'middle',
	      // We disable the focus ring for mouse, touch and keyboard users.
	      outline: 0,
	      '&$hover:hover': {
	        backgroundColor: theme.palette.action.hover
	      },
	      '&$selected, &$selected:hover': {
	        backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity)
	      }
	    },

	    /* Pseudo-class applied to the root element if `selected={true}`. */
	    selected: {},

	    /* Pseudo-class applied to the root element if `hover={true}`. */
	    hover: {},

	    /* Styles applied to the root element if table variant="head". */
	    head: {},

	    /* Styles applied to the root element if table variant="footer". */
	    footer: {}
	  };
	};
	var defaultComponent$1 = 'tr';
	/**
	 * Will automatically set dynamic row height
	 * based on the material table element parent (head, body, etc).
	 */

	var TableRow = /*#__PURE__*/react.exports.forwardRef(function TableRow(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? defaultComponent$1 : _props$component,
	      _props$hover = props.hover,
	      hover = _props$hover === void 0 ? false : _props$hover,
	      _props$selected = props.selected,
	      selected = _props$selected === void 0 ? false : _props$selected,
	      other = _objectWithoutProperties(props, ["classes", "className", "component", "hover", "selected"]);

	  var tablelvl2 = react.exports.useContext(Tablelvl2Context);
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    ref: ref,
	    className: clsx(classes.root, className, tablelvl2 && {
	      'head': classes.head,
	      'footer': classes.footer
	    }[tablelvl2.variant], hover && classes.hover, selected && classes.selected),
	    role: Component === defaultComponent$1 ? null : 'row'
	  }, other));
	});
	withStyles(styles$7, {
	  name: 'MuiTableRow'
	})(TableRow);

	/**
	 * @ignore - internal component.
	 */

	var ArrowDownwardIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
	  d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
	}));

	var styles$6 = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      cursor: 'pointer',
	      display: 'inline-flex',
	      justifyContent: 'flex-start',
	      flexDirection: 'inherit',
	      alignItems: 'center',
	      '&:focus': {
	        color: theme.palette.text.secondary
	      },
	      '&:hover': {
	        color: theme.palette.text.secondary,
	        '& $icon': {
	          opacity: 0.5
	        }
	      },
	      '&$active': {
	        color: theme.palette.text.primary,
	        // && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
	        '&& $icon': {
	          opacity: 1,
	          color: theme.palette.text.secondary
	        }
	      }
	    },

	    /* Pseudo-class applied to the root element if `active={true}`. */
	    active: {},

	    /* Styles applied to the icon component. */
	    icon: {
	      fontSize: 18,
	      marginRight: 4,
	      marginLeft: 4,
	      opacity: 0,
	      transition: theme.transitions.create(['opacity', 'transform'], {
	        duration: theme.transitions.duration.shorter
	      }),
	      userSelect: 'none'
	    },

	    /* Styles applied to the icon component if `direction="desc"`. */
	    iconDirectionDesc: {
	      transform: 'rotate(0deg)'
	    },

	    /* Styles applied to the icon component if `direction="asc"`. */
	    iconDirectionAsc: {
	      transform: 'rotate(180deg)'
	    }
	  };
	};
	/**
	 * A button based label for placing inside `TableCell` for column sorting.
	 */

	var TableSortLabel = /*#__PURE__*/react.exports.forwardRef(function TableSortLabel(props, ref) {
	  var _props$active = props.active,
	      active = _props$active === void 0 ? false : _props$active,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$direction = props.direction,
	      direction = _props$direction === void 0 ? 'asc' : _props$direction,
	      _props$hideSortIcon = props.hideSortIcon,
	      hideSortIcon = _props$hideSortIcon === void 0 ? false : _props$hideSortIcon,
	      _props$IconComponent = props.IconComponent,
	      IconComponent = _props$IconComponent === void 0 ? ArrowDownwardIcon : _props$IconComponent,
	      other = _objectWithoutProperties(props, ["active", "children", "classes", "className", "direction", "hideSortIcon", "IconComponent"]);

	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    className: clsx(classes.root, className, active && classes.active),
	    component: "span",
	    disableRipple: true,
	    ref: ref
	  }, other), children, hideSortIcon && !active ? null : /*#__PURE__*/react.exports.createElement(IconComponent, {
	    className: clsx(classes.icon, classes["iconDirection".concat(capitalize(direction))])
	  }));
	});
	withStyles(styles$6, {
	  name: 'MuiTableSortLabel'
	})(TableSortLabel);

	// Source from https://github.com/alitaheri/normalize-scroll-left
	var cachedType;
	/**
	 * Based on the jquery plugin https://github.com/othree/jquery.rtl-scroll-type
	 *
	 * Types of scrollLeft, assuming scrollWidth=100 and direction is rtl.
	 *
	 * Type             | <- Most Left | Most Right -> | Initial
	 * ---------------- | ------------ | ------------- | -------
	 * default          | 0            | 100           | 100
	 * negative (spec*) | -100         | 0             | 0
	 * reverse          | 100          | 0             | 0
	 *
	 * Edge 85: default
	 * Safari 14: negative
	 * Chrome 85: negative
	 * Firefox 81: negative
	 * IE 11: reverse
	 *
	 * spec* https://drafts.csswg.org/cssom-view/#dom-window-scroll
	 */

	function detectScrollType() {
	  if (cachedType) {
	    return cachedType;
	  }

	  var dummy = document.createElement('div');
	  var container = document.createElement('div');
	  container.style.width = '10px';
	  container.style.height = '1px';
	  dummy.appendChild(container);
	  dummy.dir = 'rtl';
	  dummy.style.fontSize = '14px';
	  dummy.style.width = '4px';
	  dummy.style.height = '1px';
	  dummy.style.position = 'absolute';
	  dummy.style.top = '-1000px';
	  dummy.style.overflow = 'scroll';
	  document.body.appendChild(dummy);
	  cachedType = 'reverse';

	  if (dummy.scrollLeft > 0) {
	    cachedType = 'default';
	  } else {
	    dummy.scrollLeft = 1;

	    if (dummy.scrollLeft === 0) {
	      cachedType = 'negative';
	    }
	  }

	  document.body.removeChild(dummy);
	  return cachedType;
	} // Based on https://stackoverflow.com/a/24394376

	function getNormalizedScrollLeft(element, direction) {
	  var scrollLeft = element.scrollLeft; // Perform the calculations only when direction is rtl to avoid messing up the ltr bahavior

	  if (direction !== 'rtl') {
	    return scrollLeft;
	  }

	  var type = detectScrollType();

	  switch (type) {
	    case 'negative':
	      return element.scrollWidth - element.clientWidth + scrollLeft;

	    case 'reverse':
	      return element.scrollWidth - element.clientWidth - scrollLeft;

	    default:
	      return scrollLeft;
	  }
	}

	function easeInOutSin(time) {
	  return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
	}

	function animate(property, element, to) {
	  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
	  var cb = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : function () {};
	  var _options$ease = options.ease,
	      ease = _options$ease === void 0 ? easeInOutSin : _options$ease,
	      _options$duration = options.duration,
	      duration = _options$duration === void 0 ? 300 : _options$duration;
	  var start = null;
	  var from = element[property];
	  var cancelled = false;

	  var cancel = function cancel() {
	    cancelled = true;
	  };

	  var step = function step(timestamp) {
	    if (cancelled) {
	      cb(new Error('Animation cancelled'));
	      return;
	    }

	    if (start === null) {
	      start = timestamp;
	    }

	    var time = Math.min(1, (timestamp - start) / duration);
	    element[property] = ease(time) * (to - from) + from;

	    if (time >= 1) {
	      requestAnimationFrame(function () {
	        cb(null);
	      });
	      return;
	    }

	    requestAnimationFrame(step);
	  };

	  if (from === to) {
	    cb(new Error('Element already at target position'));
	    return cancel;
	  }

	  requestAnimationFrame(step);
	  return cancel;
	}

	var styles$5 = {
	  width: 99,
	  height: 99,
	  position: 'absolute',
	  top: -9999,
	  overflow: 'scroll'
	};
	/**
	 * @ignore - internal component.
	 * The component originates from https://github.com/STORIS/react-scrollbar-size.
	 * It has been moved into the core in order to minimize the bundle size.
	 */

	function ScrollbarSize(props) {
	  var onChange = props.onChange,
	      other = _objectWithoutProperties(props, ["onChange"]);

	  var scrollbarHeight = react.exports.useRef();
	  var nodeRef = react.exports.useRef(null);

	  var setMeasurements = function setMeasurements() {
	    scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
	  };

	  react.exports.useEffect(function () {
	    var handleResize = debounce$1(function () {
	      var prevHeight = scrollbarHeight.current;
	      setMeasurements();

	      if (prevHeight !== scrollbarHeight.current) {
	        onChange(scrollbarHeight.current);
	      }
	    });
	    window.addEventListener('resize', handleResize);
	    return function () {
	      handleResize.clear();
	      window.removeEventListener('resize', handleResize);
	    };
	  }, [onChange]);
	  react.exports.useEffect(function () {
	    setMeasurements();
	    onChange(scrollbarHeight.current);
	  }, [onChange]);
	  return /*#__PURE__*/react.exports.createElement("div", _extends$5({
	    style: styles$5,
	    ref: nodeRef
	  }, other));
	}

	var styles$4 = function styles(theme) {
	  return {
	    root: {
	      position: 'absolute',
	      height: 2,
	      bottom: 0,
	      width: '100%',
	      transition: theme.transitions.create()
	    },
	    colorPrimary: {
	      backgroundColor: theme.palette.primary.main
	    },
	    colorSecondary: {
	      backgroundColor: theme.palette.secondary.main
	    },
	    vertical: {
	      height: '100%',
	      width: 2,
	      right: 0
	    }
	  };
	};
	/**
	 * @ignore - internal component.
	 */

	var TabIndicator = /*#__PURE__*/react.exports.forwardRef(function TabIndicator(props, ref) {
	  var classes = props.classes,
	      className = props.className,
	      color = props.color,
	      orientation = props.orientation,
	      other = _objectWithoutProperties(props, ["classes", "className", "color", "orientation"]);

	  return /*#__PURE__*/react.exports.createElement("span", _extends$5({
	    className: clsx(classes.root, classes["color".concat(capitalize(color))], className, orientation === 'vertical' && classes.vertical),
	    ref: ref
	  }, other));
	});
	var TabIndicator$1 = withStyles(styles$4, {
	  name: 'PrivateTabIndicator'
	})(TabIndicator);

	var styles$3 = {
	  /* Styles applied to the root element. */
	  root: {
	    width: 40,
	    flexShrink: 0,
	    opacity: 0.8,
	    '&$disabled': {
	      opacity: 0
	    }
	  },

	  /* Styles applied to the root element if `orientation="vertical"`. */
	  vertical: {
	    width: '100%',
	    height: 40,
	    '& svg': {
	      transform: 'rotate(90deg)'
	    }
	  },

	  /* Pseudo-class applied to the root element if `disabled={true}`. */
	  disabled: {}
	};

	var _ref = /*#__PURE__*/react.exports.createElement(KeyboardArrowLeft, {
	  fontSize: "small"
	});

	var _ref2 = /*#__PURE__*/react.exports.createElement(KeyboardArrowRight, {
	  fontSize: "small"
	});

	var TabScrollButton = /*#__PURE__*/react.exports.forwardRef(function TabScrollButton(props, ref) {
	  var classes = props.classes,
	      classNameProp = props.className,
	      direction = props.direction,
	      orientation = props.orientation,
	      disabled = props.disabled,
	      other = _objectWithoutProperties(props, ["classes", "className", "direction", "orientation", "disabled"]);

	  return /*#__PURE__*/react.exports.createElement(ButtonBase$1, _extends$5({
	    component: "div",
	    className: clsx(classes.root, classNameProp, disabled && classes.disabled, orientation === 'vertical' && classes.vertical),
	    ref: ref,
	    role: null,
	    tabIndex: null
	  }, other), direction === 'left' ? _ref : _ref2);
	});
	var TabScrollButton$1 = withStyles(styles$3, {
	  name: 'MuiTabScrollButton'
	})(TabScrollButton);

	var styles$2 = function styles(theme) {
	  return {
	    /* Styles applied to the root element. */
	    root: {
	      overflow: 'hidden',
	      minHeight: 48,
	      WebkitOverflowScrolling: 'touch',
	      // Add iOS momentum scrolling.
	      display: 'flex'
	    },

	    /* Styles applied to the root element if `orientation="vertical"`. */
	    vertical: {
	      flexDirection: 'column'
	    },

	    /* Styles applied to the flex container element. */
	    flexContainer: {
	      display: 'flex'
	    },

	    /* Styles applied to the flex container element if `orientation="vertical"`. */
	    flexContainerVertical: {
	      flexDirection: 'column'
	    },

	    /* Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`. */
	    centered: {
	      justifyContent: 'center'
	    },

	    /* Styles applied to the tablist element. */
	    scroller: {
	      position: 'relative',
	      display: 'inline-block',
	      flex: '1 1 auto',
	      whiteSpace: 'nowrap'
	    },

	    /* Styles applied to the tablist element if `!variant="scrollable"`. */
	    fixed: {
	      overflowX: 'hidden',
	      width: '100%'
	    },

	    /* Styles applied to the tablist element if `variant="scrollable"`. */
	    scrollable: {
	      overflowX: 'scroll',
	      // Hide dimensionless scrollbar on MacOS
	      scrollbarWidth: 'none',
	      // Firefox
	      '&::-webkit-scrollbar': {
	        display: 'none' // Safari + Chrome

	      }
	    },

	    /* Styles applied to the `ScrollButtonComponent` component. */
	    scrollButtons: {},

	    /* Styles applied to the `ScrollButtonComponent` component if `scrollButtons="auto"` or scrollButtons="desktop"`. */
	    scrollButtonsDesktop: _defineProperty$1({}, theme.breakpoints.down('xs'), {
	      display: 'none'
	    }),

	    /* Styles applied to the `TabIndicator` component. */
	    indicator: {}
	  };
	};
	var Tabs = /*#__PURE__*/react.exports.forwardRef(function Tabs(props, ref) {
	  var ariaLabel = props['aria-label'],
	      ariaLabelledBy = props['aria-labelledby'],
	      action = props.action,
	      _props$centered = props.centered,
	      centered = _props$centered === void 0 ? false : _props$centered,
	      childrenProp = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$component = props.component,
	      Component = _props$component === void 0 ? 'div' : _props$component,
	      _props$indicatorColor = props.indicatorColor,
	      indicatorColor = _props$indicatorColor === void 0 ? 'secondary' : _props$indicatorColor,
	      onChange = props.onChange,
	      _props$orientation = props.orientation,
	      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
	      _props$ScrollButtonCo = props.ScrollButtonComponent,
	      ScrollButtonComponent = _props$ScrollButtonCo === void 0 ? TabScrollButton$1 : _props$ScrollButtonCo,
	      _props$scrollButtons = props.scrollButtons,
	      scrollButtons = _props$scrollButtons === void 0 ? 'auto' : _props$scrollButtons,
	      selectionFollowsFocus = props.selectionFollowsFocus,
	      _props$TabIndicatorPr = props.TabIndicatorProps,
	      TabIndicatorProps = _props$TabIndicatorPr === void 0 ? {} : _props$TabIndicatorPr,
	      TabScrollButtonProps = props.TabScrollButtonProps,
	      _props$textColor = props.textColor,
	      textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,
	      value = props.value,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'standard' : _props$variant,
	      other = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "action", "centered", "children", "classes", "className", "component", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant"]);

	  var theme = useTheme$1();
	  var scrollable = variant === 'scrollable';
	  var isRtl = theme.direction === 'rtl';
	  var vertical = orientation === 'vertical';
	  var scrollStart = vertical ? 'scrollTop' : 'scrollLeft';
	  var start = vertical ? 'top' : 'left';
	  var end = vertical ? 'bottom' : 'right';
	  var clientSize = vertical ? 'clientHeight' : 'clientWidth';
	  var size = vertical ? 'height' : 'width';

	  var _React$useState = react.exports.useState(false),
	      mounted = _React$useState[0],
	      setMounted = _React$useState[1];

	  var _React$useState2 = react.exports.useState({}),
	      indicatorStyle = _React$useState2[0],
	      setIndicatorStyle = _React$useState2[1];

	  var _React$useState3 = react.exports.useState({
	    start: false,
	    end: false
	  }),
	      displayScroll = _React$useState3[0],
	      setDisplayScroll = _React$useState3[1];

	  var _React$useState4 = react.exports.useState({
	    overflow: 'hidden',
	    marginBottom: null
	  }),
	      scrollerStyle = _React$useState4[0],
	      setScrollerStyle = _React$useState4[1];

	  var valueToIndex = new Map();
	  var tabsRef = react.exports.useRef(null);
	  var tabListRef = react.exports.useRef(null);

	  var getTabsMeta = function getTabsMeta() {
	    var tabsNode = tabsRef.current;
	    var tabsMeta;

	    if (tabsNode) {
	      var rect = tabsNode.getBoundingClientRect(); // create a new object with ClientRect class props + scrollLeft

	      tabsMeta = {
	        clientWidth: tabsNode.clientWidth,
	        scrollLeft: tabsNode.scrollLeft,
	        scrollTop: tabsNode.scrollTop,
	        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, theme.direction),
	        scrollWidth: tabsNode.scrollWidth,
	        top: rect.top,
	        bottom: rect.bottom,
	        left: rect.left,
	        right: rect.right
	      };
	    }

	    var tabMeta;

	    if (tabsNode && value !== false) {
	      var _children = tabListRef.current.children;

	      if (_children.length > 0) {
	        var tab = _children[valueToIndex.get(value)];

	        tabMeta = tab ? tab.getBoundingClientRect() : null;
	      }
	    }

	    return {
	      tabsMeta: tabsMeta,
	      tabMeta: tabMeta
	    };
	  };

	  var updateIndicatorState = useEventCallback(function () {
	    var _newIndicatorStyle;

	    var _getTabsMeta = getTabsMeta(),
	        tabsMeta = _getTabsMeta.tabsMeta,
	        tabMeta = _getTabsMeta.tabMeta;

	    var startValue = 0;

	    if (tabMeta && tabsMeta) {
	      if (vertical) {
	        startValue = tabMeta.top - tabsMeta.top + tabsMeta.scrollTop;
	      } else {
	        var correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;
	        startValue = tabMeta.left - tabsMeta.left + correction;
	      }
	    }

	    var newIndicatorStyle = (_newIndicatorStyle = {}, _defineProperty$1(_newIndicatorStyle, start, startValue), _defineProperty$1(_newIndicatorStyle, size, tabMeta ? tabMeta[size] : 0), _newIndicatorStyle);

	    if (isNaN(indicatorStyle[start]) || isNaN(indicatorStyle[size])) {
	      setIndicatorStyle(newIndicatorStyle);
	    } else {
	      var dStart = Math.abs(indicatorStyle[start] - newIndicatorStyle[start]);
	      var dSize = Math.abs(indicatorStyle[size] - newIndicatorStyle[size]);

	      if (dStart >= 1 || dSize >= 1) {
	        setIndicatorStyle(newIndicatorStyle);
	      }
	    }
	  });

	  var scroll = function scroll(scrollValue) {
	    animate(scrollStart, tabsRef.current, scrollValue);
	  };

	  var moveTabsScroll = function moveTabsScroll(delta) {
	    var scrollValue = tabsRef.current[scrollStart];

	    if (vertical) {
	      scrollValue += delta;
	    } else {
	      scrollValue += delta * (isRtl ? -1 : 1); // Fix for Edge

	      scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1;
	    }

	    scroll(scrollValue);
	  };

	  var handleStartScrollClick = function handleStartScrollClick() {
	    moveTabsScroll(-tabsRef.current[clientSize]);
	  };

	  var handleEndScrollClick = function handleEndScrollClick() {
	    moveTabsScroll(tabsRef.current[clientSize]);
	  };

	  var handleScrollbarSizeChange = react.exports.useCallback(function (scrollbarHeight) {
	    setScrollerStyle({
	      overflow: null,
	      marginBottom: -scrollbarHeight
	    });
	  }, []);

	  var getConditionalElements = function getConditionalElements() {
	    var conditionalElements = {};
	    conditionalElements.scrollbarSizeListener = scrollable ? /*#__PURE__*/react.exports.createElement(ScrollbarSize, {
	      className: classes.scrollable,
	      onChange: handleScrollbarSizeChange
	    }) : null;
	    var scrollButtonsActive = displayScroll.start || displayScroll.end;
	    var showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === 'desktop' || scrollButtons === 'on');
	    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/react.exports.createElement(ScrollButtonComponent, _extends$5({
	      orientation: orientation,
	      direction: isRtl ? 'right' : 'left',
	      onClick: handleStartScrollClick,
	      disabled: !displayScroll.start,
	      className: clsx(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)
	    }, TabScrollButtonProps)) : null;
	    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/react.exports.createElement(ScrollButtonComponent, _extends$5({
	      orientation: orientation,
	      direction: isRtl ? 'left' : 'right',
	      onClick: handleEndScrollClick,
	      disabled: !displayScroll.end,
	      className: clsx(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)
	    }, TabScrollButtonProps)) : null;
	    return conditionalElements;
	  };

	  var scrollSelectedIntoView = useEventCallback(function () {
	    var _getTabsMeta2 = getTabsMeta(),
	        tabsMeta = _getTabsMeta2.tabsMeta,
	        tabMeta = _getTabsMeta2.tabMeta;

	    if (!tabMeta || !tabsMeta) {
	      return;
	    }

	    if (tabMeta[start] < tabsMeta[start]) {
	      // left side of button is out of view
	      var nextScrollStart = tabsMeta[scrollStart] + (tabMeta[start] - tabsMeta[start]);
	      scroll(nextScrollStart);
	    } else if (tabMeta[end] > tabsMeta[end]) {
	      // right side of button is out of view
	      var _nextScrollStart = tabsMeta[scrollStart] + (tabMeta[end] - tabsMeta[end]);

	      scroll(_nextScrollStart);
	    }
	  });
	  var updateScrollButtonState = useEventCallback(function () {
	    if (scrollable && scrollButtons !== 'off') {
	      var _tabsRef$current = tabsRef.current,
	          scrollTop = _tabsRef$current.scrollTop,
	          scrollHeight = _tabsRef$current.scrollHeight,
	          clientHeight = _tabsRef$current.clientHeight,
	          scrollWidth = _tabsRef$current.scrollWidth,
	          clientWidth = _tabsRef$current.clientWidth;
	      var showStartScroll;
	      var showEndScroll;

	      if (vertical) {
	        showStartScroll = scrollTop > 1;
	        showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
	      } else {
	        var scrollLeft = getNormalizedScrollLeft(tabsRef.current, theme.direction); // use 1 for the potential rounding error with browser zooms.

	        showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
	        showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
	      }

	      if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {
	        setDisplayScroll({
	          start: showStartScroll,
	          end: showEndScroll
	        });
	      }
	    }
	  });
	  react.exports.useEffect(function () {
	    var handleResize = debounce$1(function () {
	      updateIndicatorState();
	      updateScrollButtonState();
	    });
	    var win = ownerWindow(tabsRef.current);
	    win.addEventListener('resize', handleResize);
	    return function () {
	      handleResize.clear();
	      win.removeEventListener('resize', handleResize);
	    };
	  }, [updateIndicatorState, updateScrollButtonState]);
	  var handleTabsScroll = react.exports.useCallback(debounce$1(function () {
	    updateScrollButtonState();
	  }));
	  react.exports.useEffect(function () {
	    return function () {
	      handleTabsScroll.clear();
	    };
	  }, [handleTabsScroll]);
	  react.exports.useEffect(function () {
	    setMounted(true);
	  }, []);
	  react.exports.useEffect(function () {
	    updateIndicatorState();
	    updateScrollButtonState();
	  });
	  react.exports.useEffect(function () {
	    scrollSelectedIntoView();
	  }, [scrollSelectedIntoView, indicatorStyle]);
	  react.exports.useImperativeHandle(action, function () {
	    return {
	      updateIndicator: updateIndicatorState,
	      updateScrollButtons: updateScrollButtonState
	    };
	  }, [updateIndicatorState, updateScrollButtonState]);
	  var indicator = /*#__PURE__*/react.exports.createElement(TabIndicator$1, _extends$5({
	    className: classes.indicator,
	    orientation: orientation,
	    color: indicatorColor
	  }, TabIndicatorProps, {
	    style: _extends$5({}, indicatorStyle, TabIndicatorProps.style)
	  }));
	  var childIndex = 0;
	  var children = react.exports.Children.map(childrenProp, function (child) {
	    if (! /*#__PURE__*/react.exports.isValidElement(child)) {
	      return null;
	    }

	    var childValue = child.props.value === undefined ? childIndex : child.props.value;
	    valueToIndex.set(childValue, childIndex);
	    var selected = childValue === value;
	    childIndex += 1;
	    return /*#__PURE__*/react.exports.cloneElement(child, {
	      fullWidth: variant === 'fullWidth',
	      indicator: selected && !mounted && indicator,
	      selected: selected,
	      selectionFollowsFocus: selectionFollowsFocus,
	      onChange: onChange,
	      textColor: textColor,
	      value: childValue
	    });
	  });

	  var handleKeyDown = function handleKeyDown(event) {
	    var target = event.target; // Keyboard navigation assumes that [role="tab"] are siblings
	    // though we might warn in the future about nested, interactive elements
	    // as a a11y violation

	    var role = target.getAttribute('role');

	    if (role !== 'tab') {
	      return;
	    }

	    var newFocusTarget = null;
	    var previousItemKey = orientation !== "vertical" ? 'ArrowLeft' : 'ArrowUp';
	    var nextItemKey = orientation !== "vertical" ? 'ArrowRight' : 'ArrowDown';

	    if (orientation !== "vertical" && theme.direction === 'rtl') {
	      // swap previousItemKey with nextItemKey
	      previousItemKey = 'ArrowRight';
	      nextItemKey = 'ArrowLeft';
	    }

	    switch (event.key) {
	      case previousItemKey:
	        newFocusTarget = target.previousElementSibling || tabListRef.current.lastChild;
	        break;

	      case nextItemKey:
	        newFocusTarget = target.nextElementSibling || tabListRef.current.firstChild;
	        break;

	      case 'Home':
	        newFocusTarget = tabListRef.current.firstChild;
	        break;

	      case 'End':
	        newFocusTarget = tabListRef.current.lastChild;
	        break;
	    }

	    if (newFocusTarget !== null) {
	      newFocusTarget.focus();
	      event.preventDefault();
	    }
	  };

	  var conditionalElements = getConditionalElements();
	  return /*#__PURE__*/react.exports.createElement(Component, _extends$5({
	    className: clsx(classes.root, className, vertical && classes.vertical),
	    ref: ref
	  }, other), conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, /*#__PURE__*/react.exports.createElement("div", {
	    className: clsx(classes.scroller, scrollable ? classes.scrollable : classes.fixed),
	    style: scrollerStyle,
	    ref: tabsRef,
	    onScroll: handleTabsScroll
	  }, /*#__PURE__*/react.exports.createElement("div", {
	    "aria-label": ariaLabel,
	    "aria-labelledby": ariaLabelledBy,
	    className: clsx(classes.flexContainer, vertical && classes.flexContainerVertical, centered && !scrollable && classes.centered),
	    onKeyDown: handleKeyDown,
	    ref: tabListRef,
	    role: "tablist"
	  }, children), mounted && indicator), conditionalElements.scrollButtonEnd);
	});
	withStyles(styles$2, {
	  name: 'MuiTabs'
	})(Tabs);

	var variantComponent = {
	  standard: Input$1,
	  filled: FilledInput$1,
	  outlined: OutlinedInput$1
	};
	var styles$1 = {
	  /* Styles applied to the root element. */
	  root: {}
	};
	/**
	 * The `TextField` is a convenience wrapper for the most common cases (80%).
	 * It cannot be all things to all people, otherwise the API would grow out of control.
	 *
	 * ## Advanced Configuration
	 *
	 * It's important to understand that the text field is a simple abstraction
	 * on top of the following components:
	 *
	 * - [FormControl](/api/form-control/)
	 * - [InputLabel](/api/input-label/)
	 * - [FilledInput](/api/filled-input/)
	 * - [OutlinedInput](/api/outlined-input/)
	 * - [Input](/api/input/)
	 * - [FormHelperText](/api/form-helper-text/)
	 *
	 * If you wish to alter the props applied to the `input` element, you can do so as follows:
	 *
	 * ```jsx
	 * const inputProps = {
	 *   step: 300,
	 * };
	 *
	 * return <TextField id="time" type="time" inputProps={inputProps} />;
	 * ```
	 *
	 * For advanced cases, please look at the source of TextField by clicking on the
	 * "Edit this page" button above. Consider either:
	 *
	 * - using the upper case props for passing values directly to the components
	 * - using the underlying components directly as shown in the demos
	 */

	var TextField = /*#__PURE__*/react.exports.forwardRef(function TextField(props, ref) {
	  var autoComplete = props.autoComplete,
	      _props$autoFocus = props.autoFocus,
	      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
	      children = props.children,
	      classes = props.classes,
	      className = props.className,
	      _props$color = props.color,
	      color = _props$color === void 0 ? 'primary' : _props$color,
	      defaultValue = props.defaultValue,
	      _props$disabled = props.disabled,
	      disabled = _props$disabled === void 0 ? false : _props$disabled,
	      _props$error = props.error,
	      error = _props$error === void 0 ? false : _props$error,
	      FormHelperTextProps = props.FormHelperTextProps,
	      _props$fullWidth = props.fullWidth,
	      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
	      helperText = props.helperText,
	      hiddenLabel = props.hiddenLabel,
	      id = props.id,
	      InputLabelProps = props.InputLabelProps,
	      inputProps = props.inputProps,
	      InputProps = props.InputProps,
	      inputRef = props.inputRef,
	      label = props.label,
	      _props$multiline = props.multiline,
	      multiline = _props$multiline === void 0 ? false : _props$multiline,
	      name = props.name,
	      onBlur = props.onBlur,
	      onChange = props.onChange,
	      onFocus = props.onFocus,
	      placeholder = props.placeholder,
	      _props$required = props.required,
	      required = _props$required === void 0 ? false : _props$required,
	      rows = props.rows,
	      rowsMax = props.rowsMax,
	      maxRows = props.maxRows,
	      minRows = props.minRows,
	      _props$select = props.select,
	      select = _props$select === void 0 ? false : _props$select,
	      SelectProps = props.SelectProps,
	      type = props.type,
	      value = props.value,
	      _props$variant = props.variant,
	      variant = _props$variant === void 0 ? 'standard' : _props$variant,
	      other = _objectWithoutProperties(props, ["autoComplete", "autoFocus", "children", "classes", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "hiddenLabel", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "rowsMax", "maxRows", "minRows", "select", "SelectProps", "type", "value", "variant"]);

	  var InputMore = {};

	  if (variant === 'outlined') {
	    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
	      InputMore.notched = InputLabelProps.shrink;
	    }

	    if (label) {
	      var _InputLabelProps$requ;

	      var displayRequired = (_InputLabelProps$requ = InputLabelProps === null || InputLabelProps === void 0 ? void 0 : InputLabelProps.required) !== null && _InputLabelProps$requ !== void 0 ? _InputLabelProps$requ : required;
	      InputMore.label = /*#__PURE__*/react.exports.createElement(react.exports.Fragment, null, label, displayRequired && "\xA0*");
	    }
	  }

	  if (select) {
	    // unset defaults from textbox inputs
	    if (!SelectProps || !SelectProps.native) {
	      InputMore.id = undefined;
	    }

	    InputMore['aria-describedby'] = undefined;
	  }

	  var helperTextId = helperText && id ? "".concat(id, "-helper-text") : undefined;
	  var inputLabelId = label && id ? "".concat(id, "-label") : undefined;
	  var InputComponent = variantComponent[variant];
	  var InputElement = /*#__PURE__*/react.exports.createElement(InputComponent, _extends$5({
	    "aria-describedby": helperTextId,
	    autoComplete: autoComplete,
	    autoFocus: autoFocus,
	    defaultValue: defaultValue,
	    fullWidth: fullWidth,
	    multiline: multiline,
	    name: name,
	    rows: rows,
	    rowsMax: rowsMax,
	    maxRows: maxRows,
	    minRows: minRows,
	    type: type,
	    value: value,
	    id: id,
	    inputRef: inputRef,
	    onBlur: onBlur,
	    onChange: onChange,
	    onFocus: onFocus,
	    placeholder: placeholder,
	    inputProps: inputProps
	  }, InputMore, InputProps));
	  return /*#__PURE__*/react.exports.createElement(FormControl$1, _extends$5({
	    className: clsx(classes.root, className),
	    disabled: disabled,
	    error: error,
	    fullWidth: fullWidth,
	    hiddenLabel: hiddenLabel,
	    ref: ref,
	    required: required,
	    color: color,
	    variant: variant
	  }, other), label && /*#__PURE__*/react.exports.createElement(InputLabel$1, _extends$5({
	    htmlFor: id,
	    id: inputLabelId
	  }, InputLabelProps), label), select ? /*#__PURE__*/react.exports.createElement(Select$1, _extends$5({
	    "aria-describedby": helperTextId,
	    id: id,
	    labelId: inputLabelId,
	    value: value,
	    input: InputElement
	  }, SelectProps), children) : InputElement, helperText && /*#__PURE__*/react.exports.createElement(FormHelperText$1, _extends$5({
	    id: helperTextId
	  }, FormHelperTextProps), helperText));
	});
	withStyles(styles$1, {
	  name: 'MuiTextField'
	})(TextField);

	function round(value) {
	  return Math.round(value * 1e5) / 1e5;
	}

	function arrowGenerator() {
	  return {
	    '&[x-placement*="bottom"] $arrow': {
	      top: 0,
	      left: 0,
	      marginTop: '-0.71em',
	      marginLeft: 4,
	      marginRight: 4,
	      '&::before': {
	        transformOrigin: '0 100%'
	      }
	    },
	    '&[x-placement*="top"] $arrow': {
	      bottom: 0,
	      left: 0,
	      marginBottom: '-0.71em',
	      marginLeft: 4,
	      marginRight: 4,
	      '&::before': {
	        transformOrigin: '100% 0'
	      }
	    },
	    '&[x-placement*="right"] $arrow': {
	      left: 0,
	      marginLeft: '-0.71em',
	      height: '1em',
	      width: '0.71em',
	      marginTop: 4,
	      marginBottom: 4,
	      '&::before': {
	        transformOrigin: '100% 100%'
	      }
	    },
	    '&[x-placement*="left"] $arrow': {
	      right: 0,
	      marginRight: '-0.71em',
	      height: '1em',
	      width: '0.71em',
	      marginTop: 4,
	      marginBottom: 4,
	      '&::before': {
	        transformOrigin: '0 0'
	      }
	    }
	  };
	}

	var styles = function styles(theme) {
	  return {
	    /* Styles applied to the Popper component. */
	    popper: {
	      zIndex: theme.zIndex.tooltip,
	      pointerEvents: 'none' // disable jss-rtl plugin

	    },

	    /* Styles applied to the Popper component if `interactive={true}`. */
	    popperInteractive: {
	      pointerEvents: 'auto'
	    },

	    /* Styles applied to the Popper component if `arrow={true}`. */
	    popperArrow: arrowGenerator(),

	    /* Styles applied to the tooltip (label wrapper) element. */
	    tooltip: {
	      backgroundColor: alpha(theme.palette.grey[700], 0.9),
	      borderRadius: theme.shape.borderRadius,
	      color: theme.palette.common.white,
	      fontFamily: theme.typography.fontFamily,
	      padding: '4px 8px',
	      fontSize: theme.typography.pxToRem(10),
	      lineHeight: "".concat(round(14 / 10), "em"),
	      maxWidth: 300,
	      wordWrap: 'break-word',
	      fontWeight: theme.typography.fontWeightMedium
	    },

	    /* Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
	    tooltipArrow: {
	      position: 'relative',
	      margin: '0'
	    },

	    /* Styles applied to the arrow element. */
	    arrow: {
	      overflow: 'hidden',
	      position: 'absolute',
	      width: '1em',
	      height: '0.71em'
	      /* = width / sqrt(2) = (length of the hypotenuse) */
	      ,
	      boxSizing: 'border-box',
	      color: alpha(theme.palette.grey[700], 0.9),
	      '&::before': {
	        content: '""',
	        margin: 'auto',
	        display: 'block',
	        width: '100%',
	        height: '100%',
	        backgroundColor: 'currentColor',
	        transform: 'rotate(45deg)'
	      }
	    },

	    /* Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
	    touch: {
	      padding: '8px 16px',
	      fontSize: theme.typography.pxToRem(14),
	      lineHeight: "".concat(round(16 / 14), "em"),
	      fontWeight: theme.typography.fontWeightRegular
	    },

	    /* Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
	    tooltipPlacementLeft: _defineProperty$1({
	      transformOrigin: 'right center',
	      margin: '0 24px '
	    }, theme.breakpoints.up('sm'), {
	      margin: '0 14px'
	    }),

	    /* Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
	    tooltipPlacementRight: _defineProperty$1({
	      transformOrigin: 'left center',
	      margin: '0 24px'
	    }, theme.breakpoints.up('sm'), {
	      margin: '0 14px'
	    }),

	    /* Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
	    tooltipPlacementTop: _defineProperty$1({
	      transformOrigin: 'center bottom',
	      margin: '24px 0'
	    }, theme.breakpoints.up('sm'), {
	      margin: '14px 0'
	    }),

	    /* Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
	    tooltipPlacementBottom: _defineProperty$1({
	      transformOrigin: 'center top',
	      margin: '24px 0'
	    }, theme.breakpoints.up('sm'), {
	      margin: '14px 0'
	    })
	  };
	};
	var hystersisOpen = false;
	var hystersisTimer = null;
	var Tooltip = /*#__PURE__*/react.exports.forwardRef(function Tooltip(props, ref) {
	  var _props$arrow = props.arrow,
	      arrow = _props$arrow === void 0 ? false : _props$arrow,
	      children = props.children,
	      classes = props.classes,
	      _props$disableFocusLi = props.disableFocusListener,
	      disableFocusListener = _props$disableFocusLi === void 0 ? false : _props$disableFocusLi,
	      _props$disableHoverLi = props.disableHoverListener,
	      disableHoverListener = _props$disableHoverLi === void 0 ? false : _props$disableHoverLi,
	      _props$disableTouchLi = props.disableTouchListener,
	      disableTouchListener = _props$disableTouchLi === void 0 ? false : _props$disableTouchLi,
	      _props$enterDelay = props.enterDelay,
	      enterDelay = _props$enterDelay === void 0 ? 100 : _props$enterDelay,
	      _props$enterNextDelay = props.enterNextDelay,
	      enterNextDelay = _props$enterNextDelay === void 0 ? 0 : _props$enterNextDelay,
	      _props$enterTouchDela = props.enterTouchDelay,
	      enterTouchDelay = _props$enterTouchDela === void 0 ? 700 : _props$enterTouchDela,
	      idProp = props.id,
	      _props$interactive = props.interactive,
	      interactive = _props$interactive === void 0 ? false : _props$interactive,
	      _props$leaveDelay = props.leaveDelay,
	      leaveDelay = _props$leaveDelay === void 0 ? 0 : _props$leaveDelay,
	      _props$leaveTouchDela = props.leaveTouchDelay,
	      leaveTouchDelay = _props$leaveTouchDela === void 0 ? 1500 : _props$leaveTouchDela,
	      onClose = props.onClose,
	      onOpen = props.onOpen,
	      openProp = props.open,
	      _props$placement = props.placement,
	      placement = _props$placement === void 0 ? 'bottom' : _props$placement,
	      _props$PopperComponen = props.PopperComponent,
	      PopperComponent = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,
	      PopperProps = props.PopperProps,
	      title = props.title,
	      _props$TransitionComp = props.TransitionComponent,
	      TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
	      TransitionProps = props.TransitionProps,
	      other = _objectWithoutProperties(props, ["arrow", "children", "classes", "disableFocusListener", "disableHoverListener", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "id", "interactive", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"]);

	  var theme = useTheme$1();

	  var _React$useState = react.exports.useState(),
	      childNode = _React$useState[0],
	      setChildNode = _React$useState[1];

	  var _React$useState2 = react.exports.useState(null),
	      arrowRef = _React$useState2[0],
	      setArrowRef = _React$useState2[1];

	  var ignoreNonTouchEvents = react.exports.useRef(false);
	  var closeTimer = react.exports.useRef();
	  var enterTimer = react.exports.useRef();
	  var leaveTimer = react.exports.useRef();
	  var touchTimer = react.exports.useRef();

	  var _useControlled = useControlled({
	    controlled: openProp,
	    default: false,
	    name: 'Tooltip',
	    state: 'open'
	  }),
	      _useControlled2 = _slicedToArray(_useControlled, 2),
	      openState = _useControlled2[0],
	      setOpenState = _useControlled2[1];

	  var open = openState;

	  var id = useId(idProp);
	  react.exports.useEffect(function () {
	    return function () {
	      clearTimeout(closeTimer.current);
	      clearTimeout(enterTimer.current);
	      clearTimeout(leaveTimer.current);
	      clearTimeout(touchTimer.current);
	    };
	  }, []);

	  var handleOpen = function handleOpen(event) {
	    clearTimeout(hystersisTimer);
	    hystersisOpen = true; // The mouseover event will trigger for every nested element in the tooltip.
	    // We can skip rerendering when the tooltip is already open.
	    // We are using the mouseover event instead of the mouseenter event to fix a hide/show issue.

	    setOpenState(true);

	    if (onOpen) {
	      onOpen(event);
	    }
	  };

	  var handleEnter = function handleEnter() {
	    var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
	    return function (event) {
	      var childrenProps = children.props;

	      if (event.type === 'mouseover' && childrenProps.onMouseOver && forward) {
	        childrenProps.onMouseOver(event);
	      }

	      if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
	        return;
	      } // Remove the title ahead of time.
	      // We don't want to wait for the next render commit.
	      // We would risk displaying two tooltips at the same time (native + this one).


	      if (childNode) {
	        childNode.removeAttribute('title');
	      }

	      clearTimeout(enterTimer.current);
	      clearTimeout(leaveTimer.current);

	      if (enterDelay || hystersisOpen && enterNextDelay) {
	        event.persist();
	        enterTimer.current = setTimeout(function () {
	          handleOpen(event);
	        }, hystersisOpen ? enterNextDelay : enterDelay);
	      } else {
	        handleOpen(event);
	      }
	    };
	  };

	  var _useIsFocusVisible = useIsFocusVisible(),
	      isFocusVisible = _useIsFocusVisible.isFocusVisible,
	      onBlurVisible = _useIsFocusVisible.onBlurVisible,
	      focusVisibleRef = _useIsFocusVisible.ref;

	  var _React$useState3 = react.exports.useState(false),
	      childIsFocusVisible = _React$useState3[0],
	      setChildIsFocusVisible = _React$useState3[1];

	  var handleBlur = function handleBlur() {
	    if (childIsFocusVisible) {
	      setChildIsFocusVisible(false);
	      onBlurVisible();
	    }
	  };

	  var handleFocus = function handleFocus() {
	    var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
	    return function (event) {
	      // Workaround for https://github.com/facebook/react/issues/7769
	      // The autoFocus of React might trigger the event before the componentDidMount.
	      // We need to account for this eventuality.
	      if (!childNode) {
	        setChildNode(event.currentTarget);
	      }

	      if (isFocusVisible(event)) {
	        setChildIsFocusVisible(true);
	        handleEnter()(event);
	      }

	      var childrenProps = children.props;

	      if (childrenProps.onFocus && forward) {
	        childrenProps.onFocus(event);
	      }
	    };
	  };

	  var handleClose = function handleClose(event) {
	    clearTimeout(hystersisTimer);
	    hystersisTimer = setTimeout(function () {
	      hystersisOpen = false;
	    }, 800 + leaveDelay);
	    setOpenState(false);

	    if (onClose) {
	      onClose(event);
	    }

	    clearTimeout(closeTimer.current);
	    closeTimer.current = setTimeout(function () {
	      ignoreNonTouchEvents.current = false;
	    }, theme.transitions.duration.shortest);
	  };

	  var handleLeave = function handleLeave() {
	    var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
	    return function (event) {
	      var childrenProps = children.props;

	      if (event.type === 'blur') {
	        if (childrenProps.onBlur && forward) {
	          childrenProps.onBlur(event);
	        }

	        handleBlur();
	      }

	      if (event.type === 'mouseleave' && childrenProps.onMouseLeave && event.currentTarget === childNode) {
	        childrenProps.onMouseLeave(event);
	      }

	      clearTimeout(enterTimer.current);
	      clearTimeout(leaveTimer.current);
	      event.persist();
	      leaveTimer.current = setTimeout(function () {
	        handleClose(event);
	      }, leaveDelay);
	    };
	  };

	  var detectTouchStart = function detectTouchStart(event) {
	    ignoreNonTouchEvents.current = true;
	    var childrenProps = children.props;

	    if (childrenProps.onTouchStart) {
	      childrenProps.onTouchStart(event);
	    }
	  };

	  var handleTouchStart = function handleTouchStart(event) {
	    detectTouchStart(event);
	    clearTimeout(leaveTimer.current);
	    clearTimeout(closeTimer.current);
	    clearTimeout(touchTimer.current);
	    event.persist();
	    touchTimer.current = setTimeout(function () {
	      handleEnter()(event);
	    }, enterTouchDelay);
	  };

	  var handleTouchEnd = function handleTouchEnd(event) {
	    if (children.props.onTouchEnd) {
	      children.props.onTouchEnd(event);
	    }

	    clearTimeout(touchTimer.current);
	    clearTimeout(leaveTimer.current);
	    event.persist();
	    leaveTimer.current = setTimeout(function () {
	      handleClose(event);
	    }, leaveTouchDelay);
	  };

	  var handleUseRef = useForkRef(setChildNode, ref);
	  var handleFocusRef = useForkRef(focusVisibleRef, handleUseRef); // can be removed once we drop support for non ref forwarding class components

	  var handleOwnRef = react.exports.useCallback(function (instance) {
	    // #StrictMode ready
	    setRef(handleFocusRef, reactDom.exports.findDOMNode(instance));
	  }, [handleFocusRef]);
	  var handleRef = useForkRef(children.ref, handleOwnRef); // There is no point in displaying an empty tooltip.

	  if (title === '') {
	    open = false;
	  } // For accessibility and SEO concerns, we render the title to the DOM node when
	  // the tooltip is hidden. However, we have made a tradeoff when
	  // `disableHoverListener` is set. This title logic is disabled.
	  // It's allowing us to keep the implementation size minimal.
	  // We are open to change the tradeoff.


	  var shouldShowNativeTitle = !open && !disableHoverListener;

	  var childrenProps = _extends$5({
	    'aria-describedby': open ? id : null,
	    title: shouldShowNativeTitle && typeof title === 'string' ? title : null
	  }, other, children.props, {
	    className: clsx(other.className, children.props.className),
	    onTouchStart: detectTouchStart,
	    ref: handleRef
	  });

	  var interactiveWrapperListeners = {};

	  if (!disableTouchListener) {
	    childrenProps.onTouchStart = handleTouchStart;
	    childrenProps.onTouchEnd = handleTouchEnd;
	  }

	  if (!disableHoverListener) {
	    childrenProps.onMouseOver = handleEnter();
	    childrenProps.onMouseLeave = handleLeave();

	    if (interactive) {
	      interactiveWrapperListeners.onMouseOver = handleEnter(false);
	      interactiveWrapperListeners.onMouseLeave = handleLeave(false);
	    }
	  }

	  if (!disableFocusListener) {
	    childrenProps.onFocus = handleFocus();
	    childrenProps.onBlur = handleLeave();

	    if (interactive) {
	      interactiveWrapperListeners.onFocus = handleFocus(false);
	      interactiveWrapperListeners.onBlur = handleLeave(false);
	    }
	  }

	  var mergedPopperProps = react.exports.useMemo(function () {
	    return deepmerge({
	      popperOptions: {
	        modifiers: {
	          arrow: {
	            enabled: Boolean(arrowRef),
	            element: arrowRef
	          }
	        }
	      }
	    }, PopperProps);
	  }, [arrowRef, PopperProps]);
	  return /*#__PURE__*/react.exports.createElement(react.exports.Fragment, null, /*#__PURE__*/react.exports.cloneElement(children, childrenProps), /*#__PURE__*/react.exports.createElement(PopperComponent, _extends$5({
	    className: clsx(classes.popper, interactive && classes.popperInteractive, arrow && classes.popperArrow),
	    placement: placement,
	    anchorEl: childNode,
	    open: childNode ? open : false,
	    id: childrenProps['aria-describedby'],
	    transition: true
	  }, interactiveWrapperListeners, mergedPopperProps), function (_ref) {
	    var placementInner = _ref.placement,
	        TransitionPropsInner = _ref.TransitionProps;
	    return /*#__PURE__*/react.exports.createElement(TransitionComponent, _extends$5({
	      timeout: theme.transitions.duration.shorter
	    }, TransitionPropsInner, TransitionProps), /*#__PURE__*/react.exports.createElement("div", {
	      className: clsx(classes.tooltip, classes["tooltipPlacement".concat(capitalize(placementInner.split('-')[0]))], ignoreNonTouchEvents.current && classes.touch, arrow && classes.tooltipArrow)
	    }, title, arrow ? /*#__PURE__*/react.exports.createElement("span", {
	      className: classes.arrow,
	      ref: setArrowRef
	    }) : null));
	  }));
	});
	withStyles(styles, {
	  name: 'MuiTooltip',
	  flip: false
	})(Tooltip);

	({
	  enter: duration.enteringScreen,
	  exit: duration.leavingScreen
	});

	function useRect$1() {
	  const [node, setNode] = react.exports.useState();
	  const [rect, setRect] = react.exports.useState();
	  const callbackRef = react.exports.useCallback(ref => {
	    if (!ref) {
	      return;
	    }

	    setNode(ref);
	  }, []);

	  const handleResize = () => {
	    const {
	      left,
	      top,
	      width,
	      height
	    } = node.getBoundingClientRect();
	    setRect({
	      left,
	      top,
	      width,
	      height
	    });
	  };

	  react.exports.useLayoutEffect(() => {
	    if (!node) {
	      return undefined;
	    }

	    if (typeof ResizeObserver === 'function') {
	      let resizeObserver = new ResizeObserver(handleResize);
	      resizeObserver.observe(node);
	      return () => {
	        resizeObserver.unobserve(node);
	        resizeObserver.disconnect(node);
	        resizeObserver = null;
	      };
	    }

	    handleResize();
	    window.addEventListener('resize', handleResize);
	    return () => {
	      window.removeEventListener('resize', handleResize);
	    };
	  }, [node]);
	  return [callbackRef, rect, node];
	}

	function getFontSize(size) {
	  if (size === 'large') {
	    return '20px';
	  }

	  if (size === 'small') {
	    return '12px';
	  }

	  return '16px';
	}

	function SvgIcon(_ref) {
	  let {
	    size,
	    style = {},
	    viewBox = '0 0 16 16',
	    shapes = []
	  } = _ref;

	  const s = _objectSpread2({
	    fontSize: getFontSize(size),
	    display: 'inline-block',
	    fontStyle: 'normal',
	    lineHeight: '0',
	    textAlign: 'center',
	    textTransform: 'none',
	    verticalAlign: '-.125em',
	    textRendering: 'optimizeLegibility',
	    WebkitFontSmoothing: 'antialiased',
	    MozOsxFontSmoothing: 'grayscale'
	  }, style);

	  return /*#__PURE__*/React.createElement("i", {
	    style: s
	  }, /*#__PURE__*/React.createElement("svg", {
	    xmlns: "http://www.w3.org/2000/svg",
	    width: "1em",
	    height: "1em",
	    viewBox: viewBox,
	    fill: "currentColor"
	  }, shapes.map((_ref2, ix) => {
	    let {
	      type: Type,
	      attrs
	    } = _ref2;
	    return (
	      /*#__PURE__*/
	      // eslint-disable-next-line react/no-array-index-key
	      React.createElement(Type, _extends$b({
	        key: ix
	      }, attrs))
	    );
	  })));
	}

	const remove = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M9.41421356,8 L11.8890873,5.52512627 C12.065864,5.34834957 12.0305087,4.95944084 11.8183766,4.74730881 L11.2526912,4.18162338 C11.0405592,3.96949135 10.6516504,3.93413601 10.4748737,4.1109127 L8,6.58578644 L5.52512627,4.1109127 C5.34834957,3.93413601 4.95944084,3.96949135 4.74730881,4.18162338 L4.25233406,4.67659813 C3.96949135,4.95944084 3.93413601,5.34834957 4.1109127,5.52512627 L6.58578644,8 L4.1109127,10.4748737 C3.93413601,10.6516504 3.96949135,11.0405592 4.18162338,11.2526912 L4.67659813,11.7476659 C4.95944084,12.0305087 5.34834957,12.065864 5.52512627,11.8890873 L8,9.41421356 L10.4748737,11.8890873 C10.6516504,12.065864 11.0405592,12.0305087 11.2526912,11.8183766 L11.8183766,11.2526912 C12.0305087,11.0405592 12.065864,10.6516504 11.8890873,10.4748737 L9.41421356,8 Z M8,0 C12.4,0 16,3.6 16,8 C16,12.4 12.4,16 8,16 C3.6,16 0,12.4 0,8 C0,3.6 3.6,0 8,0 Z'
	    }
	  }]
	});

	var Remove = (props => SvgIcon(remove(props)));

	const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M13,7 L8,7 L13,7 L13,4.98151367 C13,2.23029964 10.7614237,0 8,0 C5.23857625,0 3,2.23029964 3,4.98151367 L3,7 L3.75,7 L3,7 L4.5,7 L4.5,5.33193359 C4.5,3.21561511 5.54860291,1.5 8,1.5 C10.4513971,1.5 11.5,3.21561511 11.5,5.33193359 L11.5,7 L12.25,7 L3,7 C2.44771525,7 2,7.44771525 2,8 L2,15 C2,15.5522847 2.44771525,16 3,16 L13,16 C13.5522847,16 14,15.5522847 14,15 L14,8 C14,7.44771525 13.5522847,7 13,7 L3,7 L13,7 Z'
	    }
	  }]
	});

	var Lock = (props => SvgIcon(lock(props)));

	const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M2.5,7 L11,7 C11.5522847,7 12,7.44771525 12,8 L12,15 C12,15.5522847 11.5522847,16 11,16 L1,16 C0.44771525,16 0,15.5522847 0,15 L0,8 C0,7.44771525 0.44771525,7 1,7 L1,4.98151367 C1,2.23029964 3.23857625,0 6,0 C8.4241995,0 10.4454541,1.71883353 10.9029715,4 L9.34209114,4 C8.9671727,2.54028848 7.9088888,1.5 6,1.5 C3.54860291,1.5 2.5,3.21561511 2.5,5.33193359 L2.5,7 Z'
	    }
	  }]
	});

	var Unlock = (props => SvgIcon(unlock(props)));

	function _extends$1() {
	  _extends$1 = Object.assign || function (target) {
	    for (var i = 1; i < arguments.length; i++) {
	      var source = arguments[i];

	      for (var key in source) {
	        if (Object.prototype.hasOwnProperty.call(source, key)) {
	          target[key] = source[key];
	        }
	      }
	    }

	    return target;
	  };

	  return _extends$1.apply(this, arguments);
	}

	function _assertThisInitialized(self) {
	  if (self === void 0) {
	    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
	  }

	  return self;
	}

	function _inheritsLoose(subClass, superClass) {
	  subClass.prototype = Object.create(superClass.prototype);
	  subClass.prototype.constructor = subClass;
	  subClass.__proto__ = superClass;
	}

	function areInputsEqual(newInputs, lastInputs) {
	  if (newInputs.length !== lastInputs.length) {
	    return false;
	  }

	  for (var i = 0; i < newInputs.length; i++) {
	    if (newInputs[i] !== lastInputs[i]) {
	      return false;
	    }
	  }

	  return true;
	}

	function index$1 (resultFn, isEqual) {
	  if (isEqual === void 0) {
	    isEqual = areInputsEqual;
	  }

	  var lastThis;
	  var lastArgs = [];
	  var lastResult;
	  var calledOnce = false;

	  var result = function result() {
	    for (var _len = arguments.length, newArgs = new Array(_len), _key = 0; _key < _len; _key++) {
	      newArgs[_key] = arguments[_key];
	    }

	    if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
	      return lastResult;
	    }

	    lastResult = resultFn.apply(this, newArgs);
	    calledOnce = true;
	    lastThis = this;
	    lastArgs = newArgs;
	    return lastResult;
	  };

	  return result;
	}

	// Animation frame based implementation of setTimeout.
	// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
	var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
	var now = hasNativePerformanceNow ? function () {
	  return performance.now();
	} : function () {
	  return Date.now();
	};
	function cancelTimeout(timeoutID) {
	  cancelAnimationFrame(timeoutID.id);
	}
	function requestTimeout(callback, delay) {
	  var start = now();

	  function tick() {
	    if (now() - start >= delay) {
	      callback.call(null);
	    } else {
	      timeoutID.id = requestAnimationFrame(tick);
	    }
	  }

	  var timeoutID = {
	    id: requestAnimationFrame(tick)
	  };
	  return timeoutID;
	}
	var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
	// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
	// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
	// The safest way to check this is to intentionally set a negative offset,
	// and then verify that the subsequent "scroll" event matches the negative offset.
	// If it does not match, then we can assume a non-standard RTL scroll implementation.

	function getRTLOffsetType(recalculate) {
	  if (recalculate === void 0) {
	    recalculate = false;
	  }

	  if (cachedRTLResult === null || recalculate) {
	    var outerDiv = document.createElement('div');
	    var outerStyle = outerDiv.style;
	    outerStyle.width = '50px';
	    outerStyle.height = '50px';
	    outerStyle.overflow = 'scroll';
	    outerStyle.direction = 'rtl';
	    var innerDiv = document.createElement('div');
	    var innerStyle = innerDiv.style;
	    innerStyle.width = '100px';
	    innerStyle.height = '100px';
	    outerDiv.appendChild(innerDiv);
	    document.body.appendChild(outerDiv);

	    if (outerDiv.scrollLeft > 0) {
	      cachedRTLResult = 'positive-descending';
	    } else {
	      outerDiv.scrollLeft = 1;

	      if (outerDiv.scrollLeft === 0) {
	        cachedRTLResult = 'negative';
	      } else {
	        cachedRTLResult = 'positive-ascending';
	      }
	    }

	    document.body.removeChild(outerDiv);
	    return cachedRTLResult;
	  }

	  return cachedRTLResult;
	}

	var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;

	var defaultItemKey$1 = function defaultItemKey(index, data) {
	  return index;
	}; // In DEV mode, this Set helps us only log a warning once per component instance.

	function createListComponent(_ref) {
	  var _class;

	  var getItemOffset = _ref.getItemOffset,
	      getEstimatedTotalSize = _ref.getEstimatedTotalSize,
	      getItemSize = _ref.getItemSize,
	      getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
	      getStartIndexForOffset = _ref.getStartIndexForOffset,
	      getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
	      initInstanceProps = _ref.initInstanceProps,
	      shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
	      validateProps = _ref.validateProps;
	  return _class = /*#__PURE__*/function (_PureComponent) {
	    _inheritsLoose(List, _PureComponent);

	    // Always use explicit constructor for React components.
	    // It produces less code after transpilation. (#26)
	    // eslint-disable-next-line no-useless-constructor
	    function List(props) {
	      var _this;

	      _this = _PureComponent.call(this, props) || this;
	      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_this));
	      _this._outerRef = void 0;
	      _this._resetIsScrollingTimeoutId = null;
	      _this.state = {
	        instance: _assertThisInitialized(_this),
	        isScrolling: false,
	        scrollDirection: 'forward',
	        scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
	        scrollUpdateWasRequested: false
	      };
	      _this._callOnItemsRendered = void 0;
	      _this._callOnItemsRendered = index$1(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
	        return _this.props.onItemsRendered({
	          overscanStartIndex: overscanStartIndex,
	          overscanStopIndex: overscanStopIndex,
	          visibleStartIndex: visibleStartIndex,
	          visibleStopIndex: visibleStopIndex
	        });
	      });
	      _this._callOnScroll = void 0;
	      _this._callOnScroll = index$1(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
	        return _this.props.onScroll({
	          scrollDirection: scrollDirection,
	          scrollOffset: scrollOffset,
	          scrollUpdateWasRequested: scrollUpdateWasRequested
	        });
	      });
	      _this._getItemStyle = void 0;

	      _this._getItemStyle = function (index) {
	        var _this$props = _this.props,
	            direction = _this$props.direction,
	            itemSize = _this$props.itemSize,
	            layout = _this$props.layout;

	        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);

	        var style;

	        if (itemStyleCache.hasOwnProperty(index)) {
	          style = itemStyleCache[index];
	        } else {
	          var _offset = getItemOffset(_this.props, index, _this._instanceProps);

	          var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"

	          var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
	          var isRtl = direction === 'rtl';
	          var offsetHorizontal = isHorizontal ? _offset : 0;
	          itemStyleCache[index] = style = {
	            position: 'absolute',
	            left: isRtl ? undefined : offsetHorizontal,
	            right: isRtl ? offsetHorizontal : undefined,
	            top: !isHorizontal ? _offset : 0,
	            height: !isHorizontal ? size : '100%',
	            width: isHorizontal ? size : '100%'
	          };
	        }

	        return style;
	      };

	      _this._getItemStyleCache = void 0;
	      _this._getItemStyleCache = index$1(function (_, __, ___) {
	        return {};
	      });

	      _this._onScrollHorizontal = function (event) {
	        var _event$currentTarget = event.currentTarget,
	            clientWidth = _event$currentTarget.clientWidth,
	            scrollLeft = _event$currentTarget.scrollLeft,
	            scrollWidth = _event$currentTarget.scrollWidth;

	        _this.setState(function (prevState) {
	          if (prevState.scrollOffset === scrollLeft) {
	            // Scroll position may have been updated by cDM/cDU,
	            // In which case we don't need to trigger another render,
	            // And we don't want to update state.isScrolling.
	            return null;
	          }

	          var direction = _this.props.direction;
	          var scrollOffset = scrollLeft;

	          if (direction === 'rtl') {
	            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
	            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
	            // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
	            // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
	            switch (getRTLOffsetType()) {
	              case 'negative':
	                scrollOffset = -scrollLeft;
	                break;

	              case 'positive-descending':
	                scrollOffset = scrollWidth - clientWidth - scrollLeft;
	                break;
	            }
	          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.


	          scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
	          return {
	            isScrolling: true,
	            scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
	            scrollOffset: scrollOffset,
	            scrollUpdateWasRequested: false
	          };
	        }, _this._resetIsScrollingDebounced);
	      };

	      _this._onScrollVertical = function (event) {
	        var _event$currentTarget2 = event.currentTarget,
	            clientHeight = _event$currentTarget2.clientHeight,
	            scrollHeight = _event$currentTarget2.scrollHeight,
	            scrollTop = _event$currentTarget2.scrollTop;

	        _this.setState(function (prevState) {
	          if (prevState.scrollOffset === scrollTop) {
	            // Scroll position may have been updated by cDM/cDU,
	            // In which case we don't need to trigger another render,
	            // And we don't want to update state.isScrolling.
	            return null;
	          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.


	          var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
	          return {
	            isScrolling: true,
	            scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
	            scrollOffset: scrollOffset,
	            scrollUpdateWasRequested: false
	          };
	        }, _this._resetIsScrollingDebounced);
	      };

	      _this._outerRefSetter = function (ref) {
	        var outerRef = _this.props.outerRef;
	        _this._outerRef = ref;

	        if (typeof outerRef === 'function') {
	          outerRef(ref);
	        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
	          outerRef.current = ref;
	        }
	      };

	      _this._resetIsScrollingDebounced = function () {
	        if (_this._resetIsScrollingTimeoutId !== null) {
	          cancelTimeout(_this._resetIsScrollingTimeoutId);
	        }

	        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
	      };

	      _this._resetIsScrolling = function () {
	        _this._resetIsScrollingTimeoutId = null;

	        _this.setState({
	          isScrolling: false
	        }, function () {
	          // Clear style cache after state update has been committed.
	          // This way we don't break pure sCU for items that don't use isScrolling param.
	          _this._getItemStyleCache(-1, null);
	        });
	      };

	      return _this;
	    }

	    List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
	      validateSharedProps$1(nextProps, prevState);
	      validateProps(nextProps);
	      return null;
	    };

	    var _proto = List.prototype;

	    _proto.scrollTo = function scrollTo(scrollOffset) {
	      scrollOffset = Math.max(0, scrollOffset);
	      this.setState(function (prevState) {
	        if (prevState.scrollOffset === scrollOffset) {
	          return null;
	        }

	        return {
	          scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
	          scrollOffset: scrollOffset,
	          scrollUpdateWasRequested: true
	        };
	      }, this._resetIsScrollingDebounced);
	    };

	    _proto.scrollToItem = function scrollToItem(index, align) {
	      if (align === void 0) {
	        align = 'auto';
	      }

	      var itemCount = this.props.itemCount;
	      var scrollOffset = this.state.scrollOffset;
	      index = Math.max(0, Math.min(index, itemCount - 1));
	      this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));
	    };

	    _proto.componentDidMount = function componentDidMount() {
	      var _this$props2 = this.props,
	          direction = _this$props2.direction,
	          initialScrollOffset = _this$props2.initialScrollOffset,
	          layout = _this$props2.layout;

	      if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
	        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"

	        if (direction === 'horizontal' || layout === 'horizontal') {
	          outerRef.scrollLeft = initialScrollOffset;
	        } else {
	          outerRef.scrollTop = initialScrollOffset;
	        }
	      }

	      this._callPropsCallbacks();
	    };

	    _proto.componentDidUpdate = function componentDidUpdate() {
	      var _this$props3 = this.props,
	          direction = _this$props3.direction,
	          layout = _this$props3.layout;
	      var _this$state = this.state,
	          scrollOffset = _this$state.scrollOffset,
	          scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;

	      if (scrollUpdateWasRequested && this._outerRef != null) {
	        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"

	        if (direction === 'horizontal' || layout === 'horizontal') {
	          if (direction === 'rtl') {
	            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
	            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
	            // So we need to determine which browser behavior we're dealing with, and mimic it.
	            switch (getRTLOffsetType()) {
	              case 'negative':
	                outerRef.scrollLeft = -scrollOffset;
	                break;

	              case 'positive-ascending':
	                outerRef.scrollLeft = scrollOffset;
	                break;

	              default:
	                var clientWidth = outerRef.clientWidth,
	                    scrollWidth = outerRef.scrollWidth;
	                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
	                break;
	            }
	          } else {
	            outerRef.scrollLeft = scrollOffset;
	          }
	        } else {
	          outerRef.scrollTop = scrollOffset;
	        }
	      }

	      this._callPropsCallbacks();
	    };

	    _proto.componentWillUnmount = function componentWillUnmount() {
	      if (this._resetIsScrollingTimeoutId !== null) {
	        cancelTimeout(this._resetIsScrollingTimeoutId);
	      }
	    };

	    _proto.render = function render() {
	      var _this$props4 = this.props,
	          children = _this$props4.children,
	          className = _this$props4.className,
	          direction = _this$props4.direction,
	          height = _this$props4.height,
	          innerRef = _this$props4.innerRef,
	          innerElementType = _this$props4.innerElementType,
	          innerTagName = _this$props4.innerTagName,
	          itemCount = _this$props4.itemCount,
	          itemData = _this$props4.itemData,
	          _this$props4$itemKey = _this$props4.itemKey,
	          itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,
	          layout = _this$props4.layout,
	          outerElementType = _this$props4.outerElementType,
	          outerTagName = _this$props4.outerTagName,
	          style = _this$props4.style,
	          useIsScrolling = _this$props4.useIsScrolling,
	          width = _this$props4.width;
	      var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"

	      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
	      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;

	      var _this$_getRangeToRend = this._getRangeToRender(),
	          startIndex = _this$_getRangeToRend[0],
	          stopIndex = _this$_getRangeToRend[1];

	      var items = [];

	      if (itemCount > 0) {
	        for (var _index = startIndex; _index <= stopIndex; _index++) {
	          items.push(react.exports.createElement(children, {
	            data: itemData,
	            key: itemKey(_index, itemData),
	            index: _index,
	            isScrolling: useIsScrolling ? isScrolling : undefined,
	            style: this._getItemStyle(_index)
	          }));
	        }
	      } // Read this value AFTER items have been created,
	      // So their actual sizes (if variable) are taken into consideration.


	      var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
	      return react.exports.createElement(outerElementType || outerTagName || 'div', {
	        className: className,
	        onScroll: onScroll,
	        ref: this._outerRefSetter,
	        style: _extends$1({
	          position: 'relative',
	          height: height,
	          width: width,
	          overflow: 'auto',
	          WebkitOverflowScrolling: 'touch',
	          willChange: 'transform',
	          direction: direction
	        }, style)
	      }, react.exports.createElement(innerElementType || innerTagName || 'div', {
	        children: items,
	        ref: innerRef,
	        style: {
	          height: isHorizontal ? '100%' : estimatedTotalSize,
	          pointerEvents: isScrolling ? 'none' : undefined,
	          width: isHorizontal ? estimatedTotalSize : '100%'
	        }
	      }));
	    };

	    _proto._callPropsCallbacks = function _callPropsCallbacks() {
	      if (typeof this.props.onItemsRendered === 'function') {
	        var itemCount = this.props.itemCount;

	        if (itemCount > 0) {
	          var _this$_getRangeToRend2 = this._getRangeToRender(),
	              _overscanStartIndex = _this$_getRangeToRend2[0],
	              _overscanStopIndex = _this$_getRangeToRend2[1],
	              _visibleStartIndex = _this$_getRangeToRend2[2],
	              _visibleStopIndex = _this$_getRangeToRend2[3];

	          this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
	        }
	      }

	      if (typeof this.props.onScroll === 'function') {
	        var _this$state2 = this.state,
	            _scrollDirection = _this$state2.scrollDirection,
	            _scrollOffset = _this$state2.scrollOffset,
	            _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;

	        this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
	      }
	    } // Lazily create and cache item styles while scrolling,
	    // So that pure component sCU will prevent re-renders.
	    // We maintain this cache, and pass a style prop rather than index,
	    // So that List can clear cached styles and force item re-render if necessary.
	    ;

	    _proto._getRangeToRender = function _getRangeToRender() {
	      var _this$props5 = this.props,
	          itemCount = _this$props5.itemCount,
	          overscanCount = _this$props5.overscanCount;
	      var _this$state3 = this.state,
	          isScrolling = _this$state3.isScrolling,
	          scrollDirection = _this$state3.scrollDirection,
	          scrollOffset = _this$state3.scrollOffset;

	      if (itemCount === 0) {
	        return [0, 0, 0, 0];
	      }

	      var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
	      var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
	      // If there isn't at least one extra item, tab loops back around.

	      var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
	      var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
	      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
	    };

	    return List;
	  }(react.exports.PureComponent), _class.defaultProps = {
	    direction: 'ltr',
	    itemData: undefined,
	    layout: 'vertical',
	    overscanCount: 2,
	    useIsScrolling: false
	  }, _class;
	} // NOTE: I considered further wrapping individual items with a pure ListItem component.
	// This would avoid ever calling the render function for the same index more than once,
	// But it would also add the overhead of a lot of components/fibers.
	// I assume people already do this (render function returning a class component),
	// So my doing it would just unnecessarily double the wrappers.

	var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
	  _ref2.children;
	      _ref2.direction;
	      _ref2.height;
	      _ref2.layout;
	      _ref2.innerTagName;
	      _ref2.outerTagName;
	      _ref2.width;
	  _ref3.instance;
	};

	var FixedSizeList = /*#__PURE__*/createListComponent({
	  getItemOffset: function getItemOffset(_ref, index) {
	    var itemSize = _ref.itemSize;
	    return index * itemSize;
	  },
	  getItemSize: function getItemSize(_ref2, index) {
	    var itemSize = _ref2.itemSize;
	    return itemSize;
	  },
	  getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
	    var itemCount = _ref3.itemCount,
	        itemSize = _ref3.itemSize;
	    return itemSize * itemCount;
	  },
	  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {
	    var direction = _ref4.direction,
	        height = _ref4.height,
	        itemCount = _ref4.itemCount,
	        itemSize = _ref4.itemSize,
	        layout = _ref4.layout,
	        width = _ref4.width;
	    // TODO Deprecate direction "horizontal"
	    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
	    var size = isHorizontal ? width : height;
	    var lastItemOffset = Math.max(0, itemCount * itemSize - size);
	    var maxOffset = Math.min(lastItemOffset, index * itemSize);
	    var minOffset = Math.max(0, index * itemSize - size + itemSize);

	    if (align === 'smart') {
	      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
	        align = 'auto';
	      } else {
	        align = 'center';
	      }
	    }

	    switch (align) {
	      case 'start':
	        return maxOffset;

	      case 'end':
	        return minOffset;

	      case 'center':
	        {
	          // "Centered" offset is usually the average of the min and max.
	          // But near the edges of the list, this doesn't hold true.
	          var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);

	          if (middleOffset < Math.ceil(size / 2)) {
	            return 0; // near the beginning
	          } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
	            return lastItemOffset; // near the end
	          } else {
	            return middleOffset;
	          }
	        }

	      case 'auto':
	      default:
	        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
	          return scrollOffset;
	        } else if (scrollOffset < minOffset) {
	          return minOffset;
	        } else {
	          return maxOffset;
	        }

	    }
	  },
	  getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
	    var itemCount = _ref5.itemCount,
	        itemSize = _ref5.itemSize;
	    return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
	  },
	  getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
	    var direction = _ref6.direction,
	        height = _ref6.height,
	        itemCount = _ref6.itemCount,
	        itemSize = _ref6.itemSize,
	        layout = _ref6.layout,
	        width = _ref6.width;
	    // TODO Deprecate direction "horizontal"
	    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
	    var offset = startIndex * itemSize;
	    var size = isHorizontal ? width : height;
	    var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
	    return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
	    ));
	  },
	  initInstanceProps: function initInstanceProps(props) {// Noop
	  },
	  shouldResetStyleCacheOnItemSizeChange: true,
	  validateProps: function validateProps(_ref7) {
	    _ref7.itemSize;
	  }
	});

	function isRangeVisible(_ref) {
	  var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
	      lastRenderedStopIndex = _ref.lastRenderedStopIndex,
	      startIndex = _ref.startIndex,
	      stopIndex = _ref.stopIndex;

	  return !(startIndex > lastRenderedStopIndex || stopIndex < lastRenderedStartIndex);
	}

	function scanForUnloadedRanges(_ref) {
	  var isItemLoaded = _ref.isItemLoaded,
	      itemCount = _ref.itemCount,
	      minimumBatchSize = _ref.minimumBatchSize,
	      startIndex = _ref.startIndex,
	      stopIndex = _ref.stopIndex;

	  var unloadedRanges = [];

	  var rangeStartIndex = null;
	  var rangeStopIndex = null;

	  for (var _index = startIndex; _index <= stopIndex; _index++) {
	    var loaded = isItemLoaded(_index);

	    if (!loaded) {
	      rangeStopIndex = _index;
	      if (rangeStartIndex === null) {
	        rangeStartIndex = _index;
	      }
	    } else if (rangeStopIndex !== null) {
	      unloadedRanges.push(rangeStartIndex, rangeStopIndex);

	      rangeStartIndex = rangeStopIndex = null;
	    }
	  }

	  // If :rangeStopIndex is not null it means we haven't ran out of unloaded rows.
	  // Scan forward to try filling our :minimumBatchSize.
	  if (rangeStopIndex !== null) {
	    var potentialStopIndex = Math.min(Math.max(rangeStopIndex, rangeStartIndex + minimumBatchSize - 1), itemCount - 1);

	    for (var _index2 = rangeStopIndex + 1; _index2 <= potentialStopIndex; _index2++) {
	      if (!isItemLoaded(_index2)) {
	        rangeStopIndex = _index2;
	      } else {
	        break;
	      }
	    }

	    unloadedRanges.push(rangeStartIndex, rangeStopIndex);
	  }

	  // Check to see if our first range ended prematurely.
	  // In this case we should scan backwards to try filling our :minimumBatchSize.
	  if (unloadedRanges.length) {
	    while (unloadedRanges[1] - unloadedRanges[0] + 1 < minimumBatchSize && unloadedRanges[0] > 0) {
	      var _index3 = unloadedRanges[0] - 1;

	      if (!isItemLoaded(_index3)) {
	        unloadedRanges[0] = _index3;
	      } else {
	        break;
	      }
	    }
	  }

	  return unloadedRanges;
	}

	var classCallCheck$1 = function (instance, Constructor) {
	  if (!(instance instanceof Constructor)) {
	    throw new TypeError("Cannot call a class as a function");
	  }
	};

	var createClass$1 = function () {
	  function defineProperties(target, props) {
	    for (var i = 0; i < props.length; i++) {
	      var descriptor = props[i];
	      descriptor.enumerable = descriptor.enumerable || false;
	      descriptor.configurable = true;
	      if ("value" in descriptor) descriptor.writable = true;
	      Object.defineProperty(target, descriptor.key, descriptor);
	    }
	  }

	  return function (Constructor, protoProps, staticProps) {
	    if (protoProps) defineProperties(Constructor.prototype, protoProps);
	    if (staticProps) defineProperties(Constructor, staticProps);
	    return Constructor;
	  };
	}();

	var inherits$1 = function (subClass, superClass) {
	  if (typeof superClass !== "function" && superClass !== null) {
	    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
	  }

	  subClass.prototype = Object.create(superClass && superClass.prototype, {
	    constructor: {
	      value: subClass,
	      enumerable: false,
	      writable: true,
	      configurable: true
	    }
	  });
	  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
	};

	var possibleConstructorReturn$1 = function (self, call) {
	  if (!self) {
	    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
	  }

	  return call && (typeof call === "object" || typeof call === "function") ? call : self;
	};

	var InfiniteLoader = function (_PureComponent) {
	  inherits$1(InfiniteLoader, _PureComponent);

	  function InfiniteLoader() {
	    var _ref;

	    var _temp, _this, _ret;

	    classCallCheck$1(this, InfiniteLoader);

	    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
	      args[_key] = arguments[_key];
	    }

	    return _ret = (_temp = (_this = possibleConstructorReturn$1(this, (_ref = InfiniteLoader.__proto__ || Object.getPrototypeOf(InfiniteLoader)).call.apply(_ref, [this].concat(args))), _this), _this._lastRenderedStartIndex = -1, _this._lastRenderedStopIndex = -1, _this._memoizedUnloadedRanges = [], _this._onItemsRendered = function (_ref2) {
	      var visibleStartIndex = _ref2.visibleStartIndex,
	          visibleStopIndex = _ref2.visibleStopIndex;

	      _this._lastRenderedStartIndex = visibleStartIndex;
	      _this._lastRenderedStopIndex = visibleStopIndex;

	      _this._ensureRowsLoaded(visibleStartIndex, visibleStopIndex);
	    }, _this._setRef = function (listRef) {
	      _this._listRef = listRef;
	    }, _temp), possibleConstructorReturn$1(_this, _ret);
	  }

	  createClass$1(InfiniteLoader, [{
	    key: 'resetloadMoreItemsCache',
	    value: function resetloadMoreItemsCache() {
	      var autoReload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

	      this._memoizedUnloadedRanges = [];

	      if (autoReload) {
	        this._ensureRowsLoaded(this._lastRenderedStartIndex, this._lastRenderedStopIndex);
	      }
	    }
	  }, {
	    key: 'componentDidMount',
	    value: function componentDidMount() {
	    }
	  }, {
	    key: 'render',
	    value: function render() {
	      var children = this.props.children;


	      return children({
	        onItemsRendered: this._onItemsRendered,
	        ref: this._setRef
	      });
	    }
	  }, {
	    key: '_ensureRowsLoaded',
	    value: function _ensureRowsLoaded(startIndex, stopIndex) {
	      var _props = this.props,
	          isItemLoaded = _props.isItemLoaded,
	          itemCount = _props.itemCount,
	          _props$minimumBatchSi = _props.minimumBatchSize,
	          minimumBatchSize = _props$minimumBatchSi === undefined ? 10 : _props$minimumBatchSi,
	          _props$threshold = _props.threshold,
	          threshold = _props$threshold === undefined ? 15 : _props$threshold;


	      var unloadedRanges = scanForUnloadedRanges({
	        isItemLoaded: isItemLoaded,
	        itemCount: itemCount,
	        minimumBatchSize: minimumBatchSize,
	        startIndex: Math.max(0, startIndex - threshold),
	        stopIndex: Math.min(itemCount - 1, stopIndex + threshold)
	      });

	      // Avoid calling load-rows unless range has changed.
	      // This shouldn't be strictly necessary, but is maybe nice to do.
	      if (this._memoizedUnloadedRanges.length !== unloadedRanges.length || this._memoizedUnloadedRanges.some(function (startOrStop, index) {
	        return unloadedRanges[index] !== startOrStop;
	      })) {
	        this._memoizedUnloadedRanges = unloadedRanges;
	        this._loadUnloadedRanges(unloadedRanges);
	      }
	    }
	  }, {
	    key: '_loadUnloadedRanges',
	    value: function _loadUnloadedRanges(unloadedRanges) {
	      var _this2 = this;

	      // loadMoreRows was renamed to loadMoreItems in v1.0.3; will be removed in v2.0
	      var loadMoreItems = this.props.loadMoreItems || this.props.loadMoreRows;

	      var _loop = function _loop(i) {
	        var startIndex = unloadedRanges[i];
	        var stopIndex = unloadedRanges[i + 1];
	        var promise = loadMoreItems(startIndex, stopIndex);
	        if (promise != null) {
	          promise.then(function () {
	            // Refresh the visible rows if any of them have just been loaded.
	            // Otherwise they will remain in their unloaded visual state.
	            if (isRangeVisible({
	              lastRenderedStartIndex: _this2._lastRenderedStartIndex,
	              lastRenderedStopIndex: _this2._lastRenderedStopIndex,
	              startIndex: startIndex,
	              stopIndex: stopIndex
	            })) {
	              // Handle an unmount while promises are still in flight.
	              if (_this2._listRef == null) {
	                return;
	              }

	              // Resize cached row sizes for VariableSizeList,
	              // otherwise just re-render the list.
	              if (typeof _this2._listRef.resetAfterIndex === 'function') {
	                _this2._listRef.resetAfterIndex(startIndex, true);
	              } else {
	                // HACK reset temporarily cached item styles to force PureComponent to re-render.
	                // This is pretty gross, but I'm okay with it for now.
	                // Don't judge me.
	                if (typeof _this2._listRef._getItemStyleCache === 'function') {
	                  _this2._listRef._getItemStyleCache(-1);
	                }
	                _this2._listRef.forceUpdate();
	              }
	            }
	          });
	        }
	      };

	      for (var i = 0; i < unloadedRanges.length; i += 2) {
	        _loop(i);
	      }
	    }
	  }]);
	  return InfiniteLoader;
	}(react.exports.PureComponent);

	const SELECTED_STATES = ['S', 'XS'];

	const flatten = arr => arr.reduce((prev, cur) => prev.concat(cur));

	function isStateSelected(qState) {
	  return SELECTED_STATES.includes(qState);
	}

	function getUniques(arr) {
	  return Array.isArray(arr) ? Array.from(new Set(arr)) : undefined;
	}
	function getSelectedValues(pages) {
	  if (!pages || !pages.length) {
	    return [];
	  }

	  const elementNbrs = pages.map(page => {
	    const elementNumbers = page.qMatrix.map(p => {
	      const [p0] = p;
	      return isStateSelected(p0.qState) ? p0.qElemNumber : false;
	    });
	    return elementNumbers.filter(n => n !== false);
	  });
	  return flatten(elementNbrs);
	}
	function applySelectionsOnPages(pages, elmNumbers) {
	  let clearAllButElmNumbers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

	  const getNewSelectionState = qState => elmNumbers.length <= 1 && isStateSelected(qState) ? 'A' : 'S';

	  const matrices = pages.map(page => {
	    const qMatrix = page.qMatrix.map(p => {
	      const [p0] = p;
	      const selectionMatchesElement = elmNumbers.includes(p0.qElemNumber);
	      let qState;

	      if (clearAllButElmNumbers) {
	        qState = selectionMatchesElement ? 'S' : 'A';
	      } else {
	        qState = selectionMatchesElement ? getNewSelectionState(p0.qState) : p0.qState;
	      }

	      return [_objectSpread2(_objectSpread2({}, p0), {}, {
	        qState
	      }), p.slice(1)];
	    });
	    return _objectSpread2(_objectSpread2({}, page), {}, {
	      qMatrix
	    });
	  });
	  return matrices;
	}
	async function selectValues(_ref) {
	  let {
	    selections,
	    elemNumbers,
	    isSingleSelect = false
	  } = _ref;
	  let resolved = Promise.resolve(false);
	  const hasNanValues = elemNumbers.some(elemNumber => Number.isNaN(elemNumber));

	  if (!hasNanValues) {
	    const elemNumbersToSelect = elemNumbers;
	    resolved = selections.select({
	      method: 'selectListObjectValues',
	      params: ['/qListObjectDef', elemNumbersToSelect, !isSingleSelect]
	    }).then(success => success !== false).catch(() => false);
	  }

	  return resolved;
	}
	function getElemNumbersFromPages(pages) {
	  if (!pages || !pages.length) {
	    return [];
	  }

	  const elemNumbersArr = pages.map(page => {
	    const qElemNumbers = page.qMatrix.map(p => {
	      const [{
	        qElemNumber
	      }] = p;
	      return qElemNumber;
	    });
	    return qElemNumbers;
	  });
	  const elemNumbers = flatten(elemNumbersArr);
	  return elemNumbers;
	}
	/**
	 * @ignore
	 * @interface MinMaxResult
	 * @property {number} min
	 * @property {number} max
	 */

	/**
	 * Returns the min and max indices of elemNumbersOrdered which contains
	 * all numbers in elementNbrs.
	 *
	 * @ignore
	 * @param {number[]} elementNbrs
	 * @param {number[]} elemNumbersOrdered
	 * @returns {MinMaxResult}
	 */

	function getMinMax(elementNbrs, elemNumbersOrdered) {
	  let min = Infinity;
	  let max = -Infinity;
	  elementNbrs.forEach(nbr => {
	    const index = elemNumbersOrdered.indexOf(nbr);
	    min = index < min ? index : min;
	    max = index > max ? index : max;
	  });
	  return {
	    min,
	    max
	  };
	}

	function fillRange(elementNbrs, elemNumbersOrdered) {
	  if (!elementNbrs) {
	    return [];
	  }

	  if (elementNbrs.length <= 1) {
	    return elementNbrs;
	  } // Interpolate values algorithm


	  const {
	    min,
	    max
	  } = getMinMax(elementNbrs, elemNumbersOrdered);
	  return elemNumbersOrdered.slice(min, max + 1);
	}

	function useSelectionsInteractions(_ref) {
	  let {
	    layout,
	    selections,
	    pages = [],
	    checkboxes = false,
	    selectDisabled,
	    doc = document,
	    isSingleSelect: singleSelect = false
	  } = _ref;
	  const [instantPages, setInstantPages] = react.exports.useState(pages);
	  const [mouseDown, setMouseDown] = react.exports.useState(false);
	  const [selectingValues, setSelectingValues] = react.exports.useState(false);
	  const [isSingleSelect, setIsSingleSelect] = react.exports.useState(singleSelect);
	  const [selected, setSelected] = react.exports.useState([]);
	  const [isRangeSelection, setIsRangeSelection] = react.exports.useState(false);
	  const [preSelected, setPreSelected] = react.exports.useState([]);
	  const elemNumbersOrdered = getElemNumbersFromPages(pages);
	  react.exports.useEffect(() => {
	    setIsSingleSelect(singleSelect);
	  }, [singleSelect]); // Select values for real, by calling the backend.

	  const select = async function () {
	    let elemNumbers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
	    let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

	    if (selectDisabled()) {
	      return;
	    }

	    setSelectingValues(true);
	    const filtered = additive ? elemNumbers.filter(n => !selected.includes(n)) : elemNumbers;
	    await selectValues({
	      selections,
	      elemNumbers: filtered,
	      isSingleSelect
	    });
	    setSelectingValues(false);
	    setPreSelected([]);
	  }; // Show estimated selection states instantly before applying the selections for real.


	  const preSelect = function (elemNumbers) {
	    let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

	    if (selectDisabled()) {
	      return;
	    }

	    setPreSelected(existing => {
	      const uniques = getUniques([...existing, ...elemNumbers]);
	      const filtered = additive ? uniques.filter(n => !selected.includes(n)) : uniques;
	      const filled = additive ? fillRange(uniques, elemNumbersOrdered) : filtered;
	      return filled;
	    });
	  };

	  const selectManually = function () {
	    let elementIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
	    let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
	    setIsRangeSelection(false); // range is not supported for manual select

	    setMouseDown(true);
	    preSelect(elementIds, additive || isRangeSelection);
	    const p = select(elementIds, additive || isRangeSelection);
	    setMouseDown(false);
	    return p;
	  };

	  const handleSingleSelectKey = event => {
	    if (event.ctrlKey || event.metaKey) {
	      setIsSingleSelect(true);
	      event.currentTarget.focus(); // will not be focused otherwise

	      event.preventDefault();
	    }
	  };

	  const onClick = react.exports.useCallback(event => {
	    if (selectingValues || selectDisabled()) {
	      return;
	    }

	    const elemNumber = +event.currentTarget.getAttribute('data-n');
	    setPreSelected([elemNumber]);
	    handleSingleSelectKey(event);
	  }, [selectingValues, selectDisabled]);
	  const onMouseDown = react.exports.useCallback(event => {
	    if (selectingValues || selectDisabled()) {
	      return;
	    }

	    setIsRangeSelection(false);
	    setMouseDown(true);
	    const elemNumber = +event.currentTarget.getAttribute('data-n');
	    setPreSelected([elemNumber]);
	    handleSingleSelectKey(event);
	  }, [selectingValues, selectDisabled]);
	  const onMouseUp = react.exports.useCallback(event => {
	    const elemNumber = +event.currentTarget.getAttribute('data-n');

	    if (isSingleSelect || !mouseDown || selectingValues || preSelected.length === 1 && preSelected[0] === elemNumber // prevent toggling again on mouseup
	    ) {
	      return;
	    }

	    preSelect([elemNumber]);
	  }, [mouseDown, selectingValues, preSelected, selected, isRangeSelection, selectDisabled]);
	  const onMouseUpDoc = react.exports.useCallback(() => {
	    // Ensure we end interactions when mouseup happens outside the Listbox.
	    setMouseDown(false);
	    setSelectingValues(false);
	    setIsRangeSelection(false);
	    setIsSingleSelect(singleSelect);
	  }, [singleSelect]);
	  const onMouseEnter = react.exports.useCallback(event => {
	    if (isSingleSelect || !mouseDown || selectingValues || selectDisabled()) {
	      return;
	    }

	    setIsRangeSelection(true);
	    const elemNumber = +event.currentTarget.getAttribute('data-n');
	    preSelect([elemNumber], true);
	  }, [mouseDown, selectingValues, isRangeSelection, preSelected, selected, selectDisabled, layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne]);
	  react.exports.useEffect(() => {
	    // Perform selections of pre-selected values. This can
	    // happen only when interactions have finished (mouseup).
	    const interactionIsFinished = !mouseDown;

	    if (!preSelected || !preSelected.length || selectingValues || !interactionIsFinished || !layout) {
	      return;
	    }

	    select(preSelected, isRangeSelection);
	  }, [preSelected, mouseDown, selectDisabled()]);
	  react.exports.useEffect(() => {
	    doc.addEventListener('mouseup', onMouseUpDoc);
	    return () => {
	      doc.removeEventListener('mouseup', onMouseUpDoc);
	    };
	  }, [onMouseUpDoc]);
	  react.exports.useEffect(() => {
	    if (selectingValues || mouseDown) {
	      return;
	    } // Keep track of (truely) selected fields so we can prevent toggling them on range select.


	    const alreadySelected = getSelectedValues(pages);
	    setSelected(alreadySelected);
	  }, [pages]);
	  react.exports.useEffect(() => {
	    if (selectingValues || !pages || !checkboxes && !mouseDown) {
	      return;
	    } // Render pre-selections before they have been selected in Engine.


	    const newPages = applySelectionsOnPages(pages, preSelected, isSingleSelect);
	    setInstantPages(newPages);
	  }, [preSelected]);
	  const interactionEvents = {};

	  if (checkboxes) {
	    Object.assign(interactionEvents, {
	      onClick
	    });
	  } else {
	    Object.assign(interactionEvents, {
	      onMouseUp,
	      onMouseDown,
	      onMouseEnter
	    });
	  }

	  return {
	    instantPages,
	    interactionEvents,
	    select: selectManually // preselect and select without having to trigger an event

	  };
	}

	const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M6,10 L13,3 L15,5 L8,12 L6,14 L1,9 L3,7 L6,10 Z'
	    }
	  }]
	});

	var Tick = (props => SvgIcon(tick(props)));

	const CheckboxChecked = "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")";

	const borderRadius = 3;
	const useStyles$e = makeStyles$1(theme => ({
	  cbIcon: {
	    borderRadius,
	    width: 16,
	    height: 16,
	    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
	    backgroundColor: '#f5f8fa',
	    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
	    display: 'flex',
	    alignItems: 'center',
	    justifyContent: 'center'
	  },
	  cbIconChecked: {
	    borderRadius,
	    backgroundColor: theme.palette.selected.main,
	    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
	    '&:before': {
	      display: 'block',
	      width: 16,
	      height: 16,
	      backgroundImage: CheckboxChecked,
	      content: '""'
	    }
	  },
	  cbIconExcluded: {
	    borderRadius: borderRadius - 1,
	    width: 12,
	    height: 12,
	    backgroundColor: theme.palette.selected.excluded
	  },
	  cbIconAlternative: {
	    borderRadius: borderRadius - 1,
	    width: 12,
	    height: 12,
	    backgroundColor: theme.palette.selected.alternative
	  },
	  checkbox: {
	    margin: 0,
	    '&:hover': {
	      backgroundColor: 'inherit !important'
	    }
	  },
	  dense: {
	    padding: '4px 8px'
	  }
	}));

	const getIcon = function (styles) {
	  let showGray = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
	  let excluded = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
	  let alternative = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
	  return /*#__PURE__*/React.createElement("span", {
	    className: styles.cbIcon
	  }, (excluded || alternative) && /*#__PURE__*/React.createElement("span", {
	    className: [showGray && excluded && styles.cbIconExcluded, showGray && alternative && styles.cbIconAlternative].filter(Boolean).join(' ')
	  }));
	};

	function ListboxCheckbox(_ref) {
	  let {
	    checked,
	    label,
	    dense,
	    excluded,
	    alternative,
	    showGray = true
	  } = _ref;
	  const styles = useStyles$e();
	  return /*#__PURE__*/React.createElement(Checkbox$1, {
	    edge: "start",
	    checked: checked,
	    disableRipple: true,
	    className: [styles.checkbox, dense && styles.dense].filter(Boolean).join(' '),
	    inputProps: {
	      'aria-labelledby': label
	    },
	    name: label,
	    icon: getIcon(styles, showGray, excluded, alternative),
	    checkedIcon: /*#__PURE__*/React.createElement("span", {
	      className: styles.cbIconChecked
	    })
	  });
	}

	/**
	 * @ignore
	 * @interface Range
	 * @property {number} qCharPos The (absolute) index where the highlighted range starts.
	 * @property {number} qCharCount The length of the sub-string (starting from qChartPos) that should be highlighted.
	 */

	/**
	 * @ignore
	 * @interface Segment
	 * @property {string} segment The sub-string/segment cut out from the original label.
	 * @property {boolean} highlighted A flag which tells whether the segment should be highlighted or not.
	 */

	/**
	 * @ignore
	 * @param {string} label The label we want to create segments out of.
	 * @param {Range} range The indexes which define how to create the segments.
	 * @param {number=} [startIndex] An optional index which tells where we want to start the first segment from
	 *   (only relevant for creating the first unhighlighted segment of a string/sub-string).
	 * @returns {Segment[]} An array of segments.
	 */
	function getSegmentsFromRange(label, range) {
	  let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
	  const {
	    qCharPos,
	    qCharCount
	  } = range;
	  const segments = [];

	  if (qCharPos > startIndex) {
	    // Create a non-highlighted section before the highighted section.
	    segments.push([label.slice(startIndex, qCharPos), false]);
	  } // Highlighted segment.


	  segments.push([label.slice(qCharPos, qCharPos + qCharCount), true]);
	  return segments;
	}
	/**
	 * @ignore
	 * @param {string} label The label we want to create segments out of.
	 * @param {Range[]} ranges The ranges defining indices for cutting the string into segments.
	 * @returns {Segment[]} An array of segments, covering the entire string label.
	 */


	function getSegmentsFromRanges(label, ranges) {
	  if (!ranges.length) {
	    return [];
	  }

	  const labels = ranges.reduce((acc, curr, ix) => {
	    const startIndex = ix === 0 ? 0 : ranges[ix - 1].qCharPos + ranges[ix - 1].qCharCount;
	    acc.push(...getSegmentsFromRange(label, curr, startIndex)); // Last non highlighted segment

	    const isLastRange = ix === ranges.length - 1;
	    const endIndex = ranges[ix].qCharPos + ranges[ix].qCharCount;

	    if (isLastRange && endIndex < label.length) {
	      acc.push([label.slice(endIndex), false]);
	    }

	    return acc;
	  }, []);
	  return labels;
	}

	const useStyles$d = makeStyles$1(() => ({
	  denseRadioButton: {
	    height: '100%',
	    boxSizing: 'border-box',
	    '& svg': {
	      width: '0.7em',
	      height: '0.7em'
	    }
	  },
	  radioButton: {
	    right: '5px'
	  }
	}));
	function ListBoxRadioButton(_ref) {
	  let {
	    checked,
	    label,
	    dense
	  } = _ref;
	  const styles = useStyles$d();
	  return /*#__PURE__*/React.createElement(Radio$1, {
	    checked: checked,
	    value: label,
	    name: label,
	    inputProps: {
	      'aria-labelledby': label
	    },
	    className: dense ? styles.denseRadioButton : styles.radioButton,
	    style: {
	      backgroundColor: 'transparent'
	    },
	    disableRipple: true
	  });
	}

	const KEYS = Object.freeze({
	  ENTER: 13,
	  ESCAPE: 27,
	  SPACE: 32,
	  TAB: 9,
	  BACKSPACE: 8,
	  DELETE: 46,
	  ALT: 18,
	  CTRL: 17,
	  SHIFT: 16,
	  ARROW_UP: 38,
	  ARROW_DOWN: 40,
	  ARROW_LEFT: 37,
	  ARROW_RIGHT: 39,
	  PAGE_DOWN: 34,
	  PAGE_UP: 33,
	  HOME: 36,
	  END: 35,
	  F10: 121,
	  A: 65,
	  F: 70,
	  ZERO: 48,
	  NINE: 57,
	  NUMPAD_ZERO: 96,
	  NUMPAD_NINE: 105,
	  SUBTRACTION: 189,
	  DECIMAL: 190,
	  NUMPAD_DECIMAL: 110,
	  isArrow: key => key === KEYS.ARROW_UP || key === KEYS.ARROW_DOWN || key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT
	});

	function getFieldKeyboardNavigation(_ref) {
	  let {
	    select,
	    confirm,
	    cancel
	  } = _ref;

	  const getElement = function (elm) {
	    let next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
	    const parentElm = elm && elm.parentElement[next ? 'nextElementSibling' : 'previousElementSibling'];
	    return parentElm && parentElm.querySelector('[role]');
	  };

	  let startedRange = false;

	  const setStartedRange = val => {
	    startedRange = val;
	  };

	  const handleKeyDown = event => {
	    let elementToFocus;
	    const {
	      keyCode,
	      shiftKey = false
	    } = event.nativeEvent;

	    switch (keyCode) {
	      case KEYS.SHIFT:
	        // This is to ensure we include the first value when starting a range selection.
	        setStartedRange(true);
	        break;

	      case KEYS.SPACE:
	        select([+event.currentTarget.getAttribute('data-n')]);
	        break;

	      case KEYS.ARROW_DOWN:
	      case KEYS.ARROW_RIGHT:
	        elementToFocus = getElement(event.currentTarget, true);

	        if (shiftKey && elementToFocus) {
	          if (startedRange) {
	            select([+event.currentTarget.getAttribute('data-n')], true);
	            setStartedRange(false);
	          }

	          select([+elementToFocus.getAttribute('data-n')], true);
	        }

	        break;

	      case KEYS.ARROW_UP:
	      case KEYS.ARROW_LEFT:
	        elementToFocus = getElement(event.currentTarget, false);

	        if (shiftKey && elementToFocus) {
	          if (startedRange) {
	            select([+event.currentTarget.getAttribute('data-n')], true);
	            setStartedRange(false);
	          }

	          select([+elementToFocus.getAttribute('data-n')], true);
	        }

	        break;

	      case KEYS.ENTER:
	        confirm();
	        break;

	      case KEYS.ESCAPE:
	        cancel();
	        return;
	      // let it propagate to top-level

	      default:
	        return;
	      // don't stop propagation since we want to outsource keydown to other handlers.
	    }

	    if (elementToFocus) {
	      elementToFocus.focus();
	    }

	    event.preventDefault();
	    event.stopPropagation();
	  };

	  return handleKeyDown;
	}
	function getListboxInlineKeyboardNavigation(_ref2) {
	  let {
	    setKeyboardActive
	  } = _ref2;

	  const focusInsideListbox = element => {
	    const fieldElement = element.querySelector('.search input, .value.selector, .value');
	    setKeyboardActive(true);

	    if (fieldElement) {
	      fieldElement.focus();
	    }
	  };

	  const focusContainer = element => {
	    setKeyboardActive(false);
	    element.focus();
	  };

	  const handleKeyDown = event => {
	    const {
	      keyCode
	    } = event.nativeEvent;

	    switch (keyCode) {
	      // case KEYS.TAB: TODO: Focus confirm button using keyboard.focusSelection when we can access the useKeyboard hook.
	      case KEYS.ENTER:
	      case KEYS.SPACE:
	        focusInsideListbox(event.currentTarget);
	        break;

	      case KEYS.ESCAPE:
	        focusContainer(event.currentTarget);
	        break;

	      default:
	        return;
	    } // Note: We should not stop propagation here as it will block the containing app
	    // from handling keydown events.


	    event.preventDefault();
	  };

	  return handleKeyDown;
	}

	const ellipsis = {
	  width: '100%',
	  overflow: 'hidden',
	  textOverflow: 'ellipsis'
	};
	const barPadPx = 4;
	const barBorderWidthPx = 1;
	const barWithCheckboxLeftPadPx = 29;
	const frequencyTextNone = '0';

	const getSelectedStyle = _ref => {
	  let {
	    theme
	  } = _ref;
	  return {
	    background: theme.palette.selected.main,
	    color: theme.palette.selected.mainContrastText,
	    '&:focus': {
	      boxShadow: "inset 0 0 0 2px rgba(0, 0, 0, 0.3)",
	      outline: 'none'
	    },
	    '& $cell': {
	      paddingRight: 0
	    }
	  };
	};

	const useStyles$c = makeStyles$1(theme => ({
	  row: {
	    flexWrap: 'nowrap',
	    color: theme.palette.text.primary
	  },
	  rowBorderBottom: {
	    borderBottom: "1px solid ".concat(theme.palette.divider)
	  },
	  column: {
	    flexWrap: 'nowrap',
	    borderRight: "1px solid ".concat(theme.palette.divider),
	    color: theme.palette.text.primary
	  },
	  fieldRoot: {
	    '&:focus': {
	      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
	    },
	    '&:focus-visible': {
	      outline: 'none'
	    }
	  },
	  // The interior wrapper for all field content.
	  cell: {
	    display: 'flex',
	    alignItems: 'center',
	    minWidth: 0,
	    flexGrow: 1,
	    // Note that this padding is overridden when using checkboxes.
	    paddingLeft: '9px',
	    paddingRight: '9px'
	  },
	  // The leaf node, containing the label text.
	  labelText: _objectSpread2({
	    flexBasis: 'max-content',
	    lineHeight: '16px',
	    userSelect: 'none',
	    whiteSpace: 'pre'
	  }, ellipsis),
	  labelDense: {
	    fontSize: 12
	  },
	  // Highlight is added to labelText spans, which are created as siblings to original labelText,
	  // when a search string is matched.
	  highlighted: {
	    overflow: 'visible',
	    width: '100%',
	    '& > span': {
	      width: '100%',
	      backgroundColor: '#FFC72A'
	    }
	  },
	  // Checkbox and label container.
	  checkboxLabel: {
	    margin: 0,
	    width: '100%',
	    height: '100%',
	    // The checkbox's span
	    '& > span:nth-child(1)': {
	      paddingRight: '8px'
	    },
	    // The checkbox's label container.
	    '& > span:nth-child(2)': _objectSpread2(_objectSpread2({}, ellipsis), {}, {
	      display: 'flex',
	      alignItems: 'center',
	      paddingLeft: 0
	    })
	  },
	  // The icons container holding tick and lock, shown inside fields.
	  icon: {
	    display: 'flex',
	    padding: theme.spacing(1, 1, 1, 0)
	  },
	  // Selection styles (S=Selected, XS=ExcludedSelected, A=Available, X=Excluded).
	  S: _objectSpread2({}, getSelectedStyle({
	    theme
	  })),
	  XS: _objectSpread2(_objectSpread2({}, getSelectedStyle({
	    theme
	  })), {}, {
	    background: theme.palette.selected.excluded,
	    color: theme.palette.selected.mainContrastText
	  }),
	  A: {
	    background: theme.palette.selected.alternative,
	    color: theme.palette.selected.alternativeContrastText
	  },
	  X: {
	    background: theme.palette.selected.excluded,
	    color: theme.palette.selected.mainContrastText
	  },
	  frequencyCount: {
	    paddingLeft: '8px',
	    paddingRight: '8px'
	  },
	  barContainer: {
	    position: 'relative'
	  },
	  bar: {
	    border: "".concat(barBorderWidthPx, "px solid"),
	    borderColor: '#D9D9D9',
	    height: '16px',
	    position: 'absolute',
	    zIndex: '-1',
	    alignSelf: 'center',
	    left: "".concat(barPadPx, "px"),
	    transition: 'width 0.2s',
	    backgroundColor: '#FAFAFA'
	  },
	  barSelected: {
	    opacity: '30%',
	    zIndex: '0',
	    background: theme.palette.background.lighter
	  },
	  barWithCheckbox: {
	    left: "".concat(barWithCheckboxLeftPadPx, "px")
	  },
	  barSelectedWithCheckbox: {
	    background: '#BFE5D0',
	    borderColor: '#BFE5D0'
	  },
	  excludedTextWithCheckbox: {
	    color: '#828282'
	  }
	}));

	function RowColumn(_ref2) {
	  let {
	    index,
	    style,
	    data,
	    column = false
	  } = _ref2;
	  const {
	    onClick,
	    onMouseDown,
	    onMouseUp,
	    onMouseEnter,
	    pages,
	    isLocked,
	    checkboxes = false,
	    dense = false,
	    frequencyMode = 'N',
	    isSingleSelect,
	    actions,
	    frequencyMax = '',
	    histogram = false,
	    keyboard,
	    showGray = true
	  } = data;
	  const handleKeyDownCallback = react.exports.useCallback(getFieldKeyboardNavigation(actions), [actions]);
	  const [isSelected, setSelected] = react.exports.useState(false);
	  const [cell, setCell] = react.exports.useState();
	  const classes = useStyles$c();
	  const [classArr, setClassArr] = react.exports.useState([]);
	  react.exports.useEffect(() => {
	    if (!pages) {
	      return;
	    }

	    let c;
	    const page = pages.filter(p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight)[0];

	    if (page) {
	      const area = page.qArea;

	      if (index >= area.qTop && index < area.qTop + area.qHeight) {
	        [c] = page.qMatrix[index - area.qTop];
	      }
	    }

	    setCell(c);
	  }, [pages]);

	  const isExcluded = c => c ? c.qState === 'X' || c.qState === 'XS' || c.qState === 'XL' : null;

	  const isAlternative = c => c ? c.qState === 'A' : null;

	  react.exports.useEffect(() => {
	    if (!cell) {
	      return;
	    }

	    const selected = cell.qState === 'S' || cell.qState === 'XS' || cell.qState === 'L';
	    setSelected(selected);
	    const clazzArr = [column ? classes.column : classes.row];
	    if (!(histogram && dense)) clazzArr.push(classes.rowBorderBottom);

	    if (!checkboxes) {
	      if (cell.qState === 'XS') {
	        clazzArr.push(showGray ? classes.XS : classes.S);
	      } else if (cell.qState === 'S' || cell.qState === 'L') {
	        clazzArr.push(classes.S);
	      } else if (showGray && isAlternative(cell)) {
	        clazzArr.push(classes.A);
	      } else if (showGray && isExcluded(cell)) {
	        clazzArr.push(classes.X);
	      }
	    }

	    setClassArr(clazzArr);
	  }, [cell && cell.qState]);

	  const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim();

	  const excludedOrAlternative = () => (isAlternative(cell) || isExcluded(cell)) && checkboxes;

	  const getValueField = _ref3 => {
	    let {
	      lbl,
	      ix,
	      color,
	      highlighted = false
	    } = _ref3;
	    return /*#__PURE__*/React.createElement(Typography$1, {
	      component: "span",
	      variant: "body2",
	      key: ix,
	      className: joinClassNames([classes.labelText, highlighted && classes.highlighted, dense && classes.labelDense, showGray && excludedOrAlternative() && classes.excludedTextWithCheckbox]),
	      color: color
	    }, /*#__PURE__*/React.createElement("span", {
	      style: {
	        whiteSpace: 'pre'
	      }
	    }, lbl));
	  };

	  const preventContextMenu = event => {
	    if (checkboxes) {
	      // Event will not propagate in the checkbox/radiobutton case
	      onClick(event);
	    }

	    event.preventDefault();
	  };

	  const getCheckboxField = _ref4 => {
	    let {
	      lbl,
	      color,
	      qElemNumber
	    } = _ref4;
	    const cb = /*#__PURE__*/React.createElement(ListboxCheckbox, {
	      label: lbl,
	      checked: isSelected,
	      dense: dense,
	      excluded: isExcluded(cell),
	      alternative: isAlternative(cell),
	      showGray: showGray
	    });
	    const rb = /*#__PURE__*/React.createElement(ListBoxRadioButton, {
	      label: lbl,
	      checked: isSelected,
	      dense: dense
	    });
	    const labelTag = typeof lbl === 'string' ? getValueField({
	      lbl,
	      color,
	      highlighted: false
	    }) : lbl;
	    return /*#__PURE__*/React.createElement(FormControlLabel$1, {
	      color: color,
	      control: isSingleSelect ? rb : cb,
	      className: classes.checkboxLabel,
	      label: labelTag,
	      key: qElemNumber
	    });
	  };

	  const label = cell ? cell.qText : '';

	  const getFrequencyText = () => {
	    if (cell) {
	      return cell.qFrequency ? cell.qFrequency : frequencyTextNone;
	    }

	    return '';
	  }; // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.


	  const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
	  const labels = getSegmentsFromRanges(label, ranges);
	  const getField = checkboxes ? getCheckboxField : getValueField;

	  const getFieldWithRanges = _ref5 => {
	    let {
	      lbls
	    } = _ref5;
	    const labelsWithRanges = lbls.map((_ref6, ix) => {
	      let [lbl, highlighted] = _ref6;
	      return getValueField({
	        ix,
	        highlighted,
	        lbl
	      });
	    });
	    return checkboxes ? getCheckboxField({
	      lbl: labelsWithRanges
	    }) : labelsWithRanges;
	  };

	  const iconStyles = {
	    alignItems: 'center',
	    display: 'flex'
	  };
	  const showLock = isSelected && isLocked;
	  const showTick = !checkboxes && isSelected && !isLocked;
	  const cellStyle = {
	    display: 'flex',
	    alignItems: 'center',
	    minWidth: 0,
	    flexGrow: 1,
	    padding: checkboxes ? 0 : undefined
	  };

	  const hasHistogramBar = () => cell && histogram && getFrequencyText() !== frequencyTextNone;

	  const getBarWidth = qFrequency => {
	    const freqStr = String(qFrequency);
	    const isPercent = freqStr.substring(freqStr.length - 1) === '%';
	    const freq = parseFloat(isPercent ? freqStr : qFrequency);
	    const rightSlice = checkboxes ? "(".concat(barWithCheckboxLeftPadPx, "px + ").concat(barPadPx + barBorderWidthPx * 2, "px)") : "".concat(barPadPx * 2 + barBorderWidthPx * 2, "px");
	    const width = isPercent ? freq : freq / frequencyMax * 100;
	    return "calc(".concat(width, "% - ").concat(rightSlice, ")");
	  };

	  const isFirstElement = index === 0;
	  return /*#__PURE__*/React.createElement("div", {
	    className: classes.barContainer
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    spacing: 0,
	    className: joinClassNames(['value', ...classArr]),
	    classes: {
	      root: classes.fieldRoot
	    },
	    style: style,
	    onClick: onClick,
	    onMouseDown: onMouseDown,
	    onMouseUp: onMouseUp,
	    onMouseEnter: onMouseEnter,
	    onKeyDown: handleKeyDownCallback,
	    onContextMenu: preventContextMenu,
	    role: column ? 'column' : 'row',
	    tabIndex: isFirstElement && (!keyboard.enabled || keyboard.active) ? 0 : -1,
	    "data-n": cell && cell.qElemNumber
	  }, hasHistogramBar() && /*#__PURE__*/React.createElement("div", {
	    className: joinClassNames([classes.bar, checkboxes && classes.barWithCheckbox, isSelected && (checkboxes ? classes.barSelectedWithCheckbox : classes.barSelected)]),
	    style: {
	      width: getBarWidth(cell.qFrequency)
	    }
	  }), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    style: cellStyle,
	    className: joinClassNames([classes.cell, classes.selectedCell]),
	    title: "".concat(label)
	  }, ranges.length === 0 ? getField({
	    lbl: label,
	    color: 'inherit'
	  }) : getFieldWithRanges({
	    lbls: labels
	  })), frequencyMode !== 'N' && /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    style: {
	      display: 'flex',
	      alignItems: 'center'
	    },
	    className: classes.frequencyCount
	  }, /*#__PURE__*/React.createElement(Typography$1, {
	    noWrap: true,
	    color: "inherit",
	    variant: "body2",
	    className: joinClassNames([dense && classes.labelDense, classes.labelText, showGray && excludedOrAlternative() && classes.excludedTextWithCheckbox])
	  }, getFrequencyText())), (showLock || showTick) && /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    className: classes.icon
	  }, showLock && /*#__PURE__*/React.createElement(Lock, {
	    style: iconStyles,
	    size: "small"
	  }), showTick && /*#__PURE__*/React.createElement(Tick, {
	    style: iconStyles,
	    size: "small"
	  }))));
	}

	const scrollBarThumb = '#BBB';
	const scrollBarThumbHover = '#555';
	const scrollBarBackground = '#f1f1f1';
	const useStyles$b = makeStyles$1(() => ({
	  styledScrollbars: {
	    scrollbarColor: "".concat(scrollBarThumb, " ").concat(scrollBarBackground),
	    '&::-webkit-scrollbar': {
	      width: 10,
	      height: 10
	    },
	    '&::-webkit-scrollbar-track': {
	      backgroundColor: scrollBarBackground
	    },
	    '&::-webkit-scrollbar-thumb': {
	      backgroundColor: scrollBarThumb,
	      borderRadius: '1rem'
	    },
	    '&::-webkit-scrollbar-thumb:hover': {
	      backgroundColor: scrollBarThumbHover
	    }
	  }
	}));

	function getSizeInfo(_ref) {
	  let {
	    isVertical,
	    checkboxes,
	    dense,
	    height
	  } = _ref;
	  let sizeVertical = checkboxes ? 40 : 33;

	  if (dense) {
	    sizeVertical = 20;
	  }

	  const itemSize = isVertical ? sizeVertical : 200;
	  const listHeight = height || 8 * itemSize;
	  return {
	    itemSize,
	    listHeight
	  };
	}

	function ListBox(_ref2) {
	  let {
	    model,
	    selections,
	    direction,
	    height,
	    width,
	    listLayout = 'vertical',
	    frequencyMode = 'N',
	    histogram = false,
	    checkboxes = false,
	    update = undefined,
	    fetchStart = undefined,
	    dense = false,
	    keyboard = {},
	    showGray = true,
	    scrollState,
	    sortByState,
	    selectDisabled = () => false,
	    setCount
	  } = _ref2;
	  const [layout] = useLayout$1(model);
	  const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
	  const [pages, setPages] = react.exports.useState(null);
	  const [isLoadingData, setIsLoadingData] = react.exports.useState(false);
	  const styles = useStyles$b();
	  const {
	    instantPages = [],
	    interactionEvents,
	    select
	  } = useSelectionsInteractions({
	    layout,
	    selections,
	    pages,
	    checkboxes,
	    selectDisabled,
	    doc: document,
	    isSingleSelect
	  });
	  const loaderRef = react.exports.useRef(null);
	  const local = react.exports.useRef({
	    queue: [],
	    validPages: false
	  });
	  const listData = react.exports.useRef({
	    pages: []
	  });
	  const isItemLoaded = react.exports.useCallback(index => {
	    if (!pages || !local.current.validPages) {
	      return false;
	    }

	    local.current.checkIdx = index;

	    const isLoaded = p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight;

	    const page = pages.filter(p => isLoaded(p))[0];
	    return page && isLoaded(page);
	  }, [layout, pages]); // The time from scroll end until new data is being fetched, may be exposed in API later on.

	  const scrollTimeout = 0;
	  const loadMoreItems = react.exports.useCallback((startIndex, stopIndex) => {
	    local.current.queue.push({
	      start: startIndex,
	      stop: stopIndex
	    });
	    const isScrolling = loaderRef.current ? loaderRef.current._listRef.state.isScrolling : false;

	    if (local.current.queue.length > 10) {
	      local.current.queue.shift();
	    }

	    clearTimeout(local.current.timeout);
	    setIsLoadingData(true);
	    return new Promise(resolve => {
	      local.current.timeout = setTimeout(() => {
	        const sorted = local.current.queue.slice(-2).sort((a, b) => a.start - b.start);
	        const reqPromise = model.getListObjectData('/qListObjectDef', sorted.map(s => ({
	          qTop: s.start,
	          qHeight: s.stop - s.start + 1,
	          qLeft: 0,
	          qWidth: 1
	        }))).then(p => {
	          local.current.validPages = true;
	          listData.current.pages = p;
	          setPages(p);
	          setIsLoadingData(false);
	          resolve();
	        });
	        fetchStart && fetchStart(reqPromise);
	      }, isScrolling ? scrollTimeout : 0);
	    });
	  }, [layout]);

	  const fetchData = () => {
	    local.current.queue = [];
	    local.current.validPages = false;

	    if (loaderRef.current) {
	      loaderRef.current.resetloadMoreItemsCache(true); // Skip scrollToItem if we are in selections, or if we dont sort by state.

	      if (layout && layout.qSelectionInfo.qInSelections || sortByState === 0) {
	        return;
	      }

	      loaderRef.current._listRef.scrollToItem(0);
	    }
	  };

	  if (update) {
	    // Hand over the update function for manual refresh from hosting application.
	    update.call(null, fetchData);
	  }

	  react.exports.useEffect(() => {
	    fetchData();

	    if (typeof setCount === 'function' && layout) {
	      setCount(layout.qListObject.qSize.qcy);
	    }
	  }, [layout]);
	  react.exports.useEffect(() => {
	    if (!instantPages || isLoadingData) {
	      return;
	    }

	    setPages(instantPages);
	  }, [instantPages]);
	  const [initScrollPosIsSet, setInitScrollPosIsSet] = react.exports.useState(false);
	  react.exports.useEffect(() => {
	    if (scrollState && !initScrollPosIsSet && loaderRef.current) {
	      loaderRef.current._listRef.scrollToItem(scrollState.initScrollPos);

	      setInitScrollPosIsSet(true);
	    }
	  }, [loaderRef.current]);

	  if (!layout) {
	    return null;
	  }

	  const isVertical = listLayout !== 'horizontal';
	  const count = layout.qListObject.qSize.qcy;
	  const {
	    itemSize,
	    listHeight
	  } = getSizeInfo({
	    isVertical,
	    checkboxes,
	    dense,
	    height
	  });
	  const isLocked = layout && layout.qListObject.qDimensionInfo.qLocked;
	  const {
	    frequencyMax
	  } = layout;
	  return /*#__PURE__*/React.createElement(InfiniteLoader, {
	    isItemLoaded: isItemLoaded,
	    itemCount: count,
	    loadMoreItems: loadMoreItems,
	    threshold: 0,
	    minimumBatchSize: 100,
	    ref: loaderRef
	  }, _ref3 => {
	    let {
	      onItemsRendered,
	      ref
	    } = _ref3;
	    local.current.listRef = ref;
	    return /*#__PURE__*/React.createElement(FixedSizeList, {
	      direction: direction,
	      "data-testid": "fixed-size-list",
	      useIsScrolling: true,
	      style: {},
	      height: listHeight,
	      width: width,
	      itemCount: count,
	      layout: listLayout,
	      className: styles.styledScrollbars,
	      itemData: _objectSpread2(_objectSpread2({
	        isLocked,
	        column: !isVertical,
	        pages
	      }, isLocked || selectDisabled() ? {} : interactionEvents), {}, {
	        checkboxes,
	        dense,
	        frequencyMode,
	        isSingleSelect,
	        actions: {
	          select,
	          confirm: () => selections && selections.confirm.call(selections),
	          cancel: () => selections && selections.cancel.call(selections)
	        },
	        frequencyMax,
	        histogram,
	        keyboard,
	        showGray
	      }),
	      itemSize: itemSize,
	      onItemsRendered: renderProps => {
	        if (scrollState) {
	          scrollState.setScrollPos(renderProps.visibleStopIndex);
	        }

	        onItemsRendered(_objectSpread2({}, renderProps));
	      },
	      ref: ref
	    }, RowColumn);
	  });
	}

	const selectAll = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M15.4,9 C15.8,9 16,9.3 16,9.6 L16,15.4 C16,15.7 15.8,16 15.4,16 L9.6,16 C9.3,16 9,15.8 9,15.4 L9,9.6 C9,9.3 9.3,9 9.6,9 L15.4,9 Z M15,10 L10,10 L10,15 L15,15 L15,10 Z M6.5,0 C6.8,0 7,0.3 7,0.6 L7,6.4 C7,6.8 6.8,7 6.5,7 L0.6,7 C0.3,7 0,6.8 0,6.5 L0,0.6 C0,0.3 0.3,0 0.6,0 L6.5,0 Z M6,2.8 C6.3,2.5 6.3,2.1 6.1,1.8 C5.9,1.5 5.4,1.6 5.1,1.9 L3.1,3.9 L2.4,3.2 C2.1,2.9 1.7,2.9 1.4,3.1 C1.2,3.3 1.2,3.8 1.5,4.1 L2.7,5.3 C3,5.6 3.4,5.6 3.7,5.3 L3.8,5.3 L6,2.8 Z M6.5,9 C6.8,9 7,9.3 7,9.6 L7,15.4 C7,15.8 6.8,16 6.5,16 L0.6,16 C0.3,16 0,15.8 0,15.4 L0,9.6 C0,9.3 0.3,9 0.6,9 L6.5,9 Z M6,11.8 C6.3,11.5 6.3,11.1 6.1,10.8 C5.9,10.6 5.4,10.6 5.1,10.8 L3.1,12.8 L2.3,12 C2,11.7 1.6,11.7 1.3,12 C1.1,12.3 1.1,12.7 1.4,13 L2.6,14.2 C2.9,14.5 3.3,14.5 3.6,14.3 L3.7,14.2 L6,11.8 Z M15.4,0 C15.8,0 16,0.3 16,0.6 L16,6.4 C16,6.8 15.8,7 15.4,7 L9.6,7 C9.3,7 9,6.8 9,6.5 L9,0.6 C9,0.3 9.3,0 9.6,0 L15.4,0 Z M15,2.8 C15.3,2.5 15.3,2.1 15.1,1.8 C14.9,1.5 14.4,1.6 14.1,1.9 L12.1,3.9 L11.3,3.1 C11,2.8 10.6,2.8 10.3,3 C10,3.2 10.1,3.7 10.3,4 L11.5,5.2 C11.8,5.5 12.2,5.5 12.5,5.2 L15,2.8 Z'
	    }
	  }]
	});

	const selectAlternative = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M6,15.5 C6,15.2238576 6.22385763,15 6.5,15 L9.5,15 C9.77614237,15 10,15.2238576 10,15.5 C10,15.7761424 9.77614237,16 9.5,16 L6.5,16 C6.22385763,16 6,15.7761424 6,15.5 Z M1,13.5 L1,14.5 C1,14.7761424 1.22385763,15 1.5,15 L2.5,15 C2.77614237,15 3,15.2238576 3,15.5 C3,15.7761424 2.77614237,16 2.5,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,13.5 C-3.38176876e-17,13.2238576 0.223857625,13 0.5,13 C0.776142375,13 1,13.2238576 1,13.5 Z M15,13.5 C15,13.2238576 15.2238576,13 15.5,13 C15.7761424,13 16,13.2238576 16,13.5 L16,15 C16,15.5522847 15.5522847,16 15,16 L13.5,16 C13.2238576,16 13,15.7761424 13,15.5 C13,15.2238576 13.2238576,15 13.5,15 L14.5,15 C14.7761424,15 15,14.7761424 15,14.5 L15,13.5 Z M1,6.5 L1,9.5 C1,9.77614237 0.776142375,10 0.5,10 C0.223857625,10 3.38176876e-17,9.77614237 0,9.5 L0,6.5 C-3.38176876e-17,6.22385763 0.223857625,6 0.5,6 C0.776142375,6 1,6.22385763 1,6.5 Z M16,6.5 L16,9.5 C16,9.77614237 15.7761424,10 15.5,10 C15.2238576,10 15,9.77614237 15,9.5 L15,6.5 C15,6.22385763 15.2238576,6 15.5,6 C15.7761424,6 16,6.22385763 16,6.5 Z M0,2.5 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L2.5,0 C2.77614237,-5.07265313e-17 3,0.223857625 3,0.5 C3,0.776142375 2.77614237,1 2.5,1 L1.5,1 C1.22385763,1 1,1.22385763 1,1.5 L1,2.5 C1,2.77614237 0.776142375,3 0.5,3 C0.223857625,3 3.38176876e-17,2.77614237 0,2.5 Z M6,0.5 C6,0.223857625 6.22385763,5.07265313e-17 6.5,0 L9.5,0 C9.77614237,-5.07265313e-17 10,0.223857625 10,0.5 C10,0.776142375 9.77614237,1 9.5,1 L6.5,1 C6.22385763,1 6,0.776142375 6,0.5 Z M15,2.5 L15,1.5 C15,1.22385763 14.7761424,1 14.5,1 L13.5,1 C13.2238576,1 13,0.776142375 13,0.5 C13,0.223857625 13.2238576,5.07265313e-17 13.5,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,2.5 C16,2.77614237 15.7761424,3 15.5,3 C15.2238576,3 15,2.77614237 15,2.5 Z M4,4 L4,12 L12,4 L4,4 Z M4,3 L12,3 C12.5522847,3 13,3.44771525 13,4 L13,12 C13,12.5522847 12.5522847,13 12,13 L4,13 C3.44771525,13 3,12.5522847 3,12 L3,4 C3,3.44771525 3.44771525,3 4,3 Z'
	    }
	  }]
	});

	const selectPossible = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M6,15.5 C6,15.2238576 6.22385763,15 6.5,15 L9.5,15 C9.77614237,15 10,15.2238576 10,15.5 C10,15.7761424 9.77614237,16 9.5,16 L6.5,16 C6.22385763,16 6,15.7761424 6,15.5 Z M1,13.5 L1,14.5 C1,14.7761424 1.22385763,15 1.5,15 L2.5,15 C2.77614237,15 3,15.2238576 3,15.5 C3,15.7761424 2.77614237,16 2.5,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,13.5 C-3.38176876e-17,13.2238576 0.223857625,13 0.5,13 C0.776142375,13 1,13.2238576 1,13.5 Z M15,13.5 C15,13.2238576 15.2238576,13 15.5,13 C15.7761424,13 16,13.2238576 16,13.5 L16,15 C16,15.5522847 15.5522847,16 15,16 L13.5,16 C13.2238576,16 13,15.7761424 13,15.5 C13,15.2238576 13.2238576,15 13.5,15 L14.5,15 C14.7761424,15 15,14.7761424 15,14.5 L15,13.5 Z M1,6.5 L1,9.5 C1,9.77614237 0.776142375,10 0.5,10 C0.223857625,10 3.38176876e-17,9.77614237 0,9.5 L0,6.5 C-3.38176876e-17,6.22385763 0.223857625,6 0.5,6 C0.776142375,6 1,6.22385763 1,6.5 Z M16,6.5 L16,9.5 C16,9.77614237 15.7761424,10 15.5,10 C15.2238576,10 15,9.77614237 15,9.5 L15,6.5 C15,6.22385763 15.2238576,6 15.5,6 C15.7761424,6 16,6.22385763 16,6.5 Z M0,2.5 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L2.5,0 C2.77614237,-5.07265313e-17 3,0.223857625 3,0.5 C3,0.776142375 2.77614237,1 2.5,1 L1.5,1 C1.22385763,1 1,1.22385763 1,1.5 L1,2.5 C1,2.77614237 0.776142375,3 0.5,3 C0.223857625,3 3.38176876e-17,2.77614237 0,2.5 Z M6,0.5 C6,0.223857625 6.22385763,5.07265313e-17 6.5,0 L9.5,0 C9.77614237,-5.07265313e-17 10,0.223857625 10,0.5 C10,0.776142375 9.77614237,1 9.5,1 L6.5,1 C6.22385763,1 6,0.776142375 6,0.5 Z M15,2.5 L15,1.5 C15,1.22385763 14.7761424,1 14.5,1 L13.5,1 C13.2238576,1 13,0.776142375 13,0.5 C13,0.223857625 13.2238576,5.07265313e-17 13.5,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,2.5 C16,2.77614237 15.7761424,3 15.5,3 C15.2238576,3 15,2.77614237 15,2.5 Z M4,4 L4,12 L12,12 L12,4 L4,4 Z M4,3 L12,3 C12.5522847,3 13,3.44771525 13,4 L13,12 C13,12.5522847 12.5522847,13 12,13 L4,13 C3.44771525,13 3,12.5522847 3,12 L3,4 C3,3.44771525 3.44771525,3 4,3 Z'
	    }
	  }]
	});

	const selectExcluded = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M6,15.5 C6,15.2238576 6.22385763,15 6.5,15 L9.5,15 C9.77614237,15 10,15.2238576 10,15.5 C10,15.7761424 9.77614237,16 9.5,16 L6.5,16 C6.22385763,16 6,15.7761424 6,15.5 Z M1,13.5 L1,14.5 C1,14.7761424 1.22385763,15 1.5,15 L2.5,15 C2.77614237,15 3,15.2238576 3,15.5 C3,15.7761424 2.77614237,16 2.5,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,13.5 C-3.38176876e-17,13.2238576 0.223857625,13 0.5,13 C0.776142375,13 1,13.2238576 1,13.5 Z M15,13.5 C15,13.2238576 15.2238576,13 15.5,13 C15.7761424,13 16,13.2238576 16,13.5 L16,15 C16,15.5522847 15.5522847,16 15,16 L13.5,16 C13.2238576,16 13,15.7761424 13,15.5 C13,15.2238576 13.2238576,15 13.5,15 L14.5,15 C14.7761424,15 15,14.7761424 15,14.5 L15,13.5 Z M1,6.5 L1,9.5 C1,9.77614237 0.776142375,10 0.5,10 C0.223857625,10 3.38176876e-17,9.77614237 0,9.5 L0,6.5 C-3.38176876e-17,6.22385763 0.223857625,6 0.5,6 C0.776142375,6 1,6.22385763 1,6.5 Z M16,6.5 L16,9.5 C16,9.77614237 15.7761424,10 15.5,10 C15.2238576,10 15,9.77614237 15,9.5 L15,6.5 C15,6.22385763 15.2238576,6 15.5,6 C15.7761424,6 16,6.22385763 16,6.5 Z M0,2.5 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L2.5,0 C2.77614237,-5.07265313e-17 3,0.223857625 3,0.5 C3,0.776142375 2.77614237,1 2.5,1 L1.5,1 C1.22385763,1 1,1.22385763 1,1.5 L1,2.5 C1,2.77614237 0.776142375,3 0.5,3 C0.223857625,3 3.38176876e-17,2.77614237 0,2.5 Z M6,0.5 C6,0.223857625 6.22385763,5.07265313e-17 6.5,0 L9.5,0 C9.77614237,-5.07265313e-17 10,0.223857625 10,0.5 C10,0.776142375 9.77614237,1 9.5,1 L6.5,1 C6.22385763,1 6,0.776142375 6,0.5 Z M15,2.5 L15,1.5 C15,1.22385763 14.7761424,1 14.5,1 L13.5,1 C13.2238576,1 13,0.776142375 13,0.5 C13,0.223857625 13.2238576,5.07265313e-17 13.5,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,2.5 C16,2.77614237 15.7761424,3 15.5,3 C15.2238576,3 15,2.77614237 15,2.5 Z M4,3 L12,3 C12.5522847,3 13,3.44771525 13,4 L13,12 C13,12.5522847 12.5522847,13 12,13 L4,13 C3.44771525,13 3,12.5522847 3,12 L3,4 C3,3.44771525 3.44771525,3 4,3 Z'
	    }
	  }]
	});

	var createListboxSelectionToolbar = (_ref => {
	  let {
	    layout,
	    model,
	    translator
	  } = _ref;

	  if (layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne) {
	    return [];
	  }

	  const canSelectAll = () => ['qOption', 'qAlternative', 'qExcluded', 'qDeselected'].some(sc => layout.qListObject.qDimensionInfo.qStateCounts[sc] > 0);

	  const canSelectPossible = () => ['qOption'].some(sc => layout.qListObject.qDimensionInfo.qStateCounts[sc] > 0);

	  const canSelectAlternative = () => ['qAlternative'].some(sc => layout.qListObject.qDimensionInfo.qStateCounts[sc] > 0);

	  const canSelectExcluded = () => ['qAlternative', 'qExcluded'].some(sc => layout.qListObject.qDimensionInfo.qStateCounts[sc] > 0);

	  return [{
	    key: 'selectAll',
	    type: 'menu-icon-button',
	    label: translator.get('Selection.SelectAll'),
	    getSvgIconShape: selectAll,
	    enabled: canSelectAll,
	    action: () => {
	      model.selectListObjectAll('/qListObjectDef');
	    }
	  }, {
	    key: 'selectPossible',
	    type: 'menu-icon-button',
	    label: translator.get('Selection.SelectPossible'),
	    getSvgIconShape: selectPossible,
	    enabled: canSelectPossible,
	    action: () => {
	      model.selectListObjectPossible('/qListObjectDef');
	    }
	  }, {
	    key: 'selectAlternative',
	    type: 'menu-icon-button',
	    label: translator.get('Selection.SelectAlternative'),
	    getSvgIconShape: selectAlternative,
	    enabled: canSelectAlternative,
	    action: () => {
	      model.selectListObjectAlternative('/qListObjectDef');
	    }
	  }, {
	    key: 'selectExcluded',
	    type: 'menu-icon-button',
	    label: translator.get('Selection.SelectExcluded'),
	    getSvgIconShape: selectExcluded,
	    enabled: canSelectExcluded,
	    action: () => {
	      model.selectListObjectExcluded('/qListObjectDef');
	    }
	  }];
	});

	const more = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M2,6.5 L3,6.5 C3.55228475,6.5 4,6.94771525 4,7.5 L4,8.5 C4,9.05228475 3.55228475,9.5 3,9.5 L2,9.5 C1.44771525,9.5 1,9.05228475 1,8.5 L1,7.5 C1,6.94771525 1.44771525,6.5 2,6.5 Z M7.5,6.5 L8.5,6.5 C9.05228475,6.5 9.5,6.94771525 9.5,7.5 L9.5,8.5 C9.5,9.05228475 9.05228475,9.5 8.5,9.5 L7.5,9.5 C6.94771525,9.5 6.5,9.05228475 6.5,8.5 L6.5,7.5 C6.5,6.94771525 6.94771525,6.5 7.5,6.5 Z M13,6.5 L14,6.5 C14.5522847,6.5 15,6.94771525 15,7.5 L15,8.5 C15,9.05228475 14.5522847,9.5 14,9.5 L13,9.5 C12.4477153,9.5 12,9.05228475 12,8.5 L12,7.5 C12,6.94771525 12.4477153,6.5 13,6.5 Z'
	    }
	  }]
	});

	function useActionState(item) {
	  const theme = useTheme$2();
	  const disabled = typeof item.enabled === 'function' ? !item.enabled() : !!item.disabled;
	  const hasSvgIconShape = typeof item.getSvgIconShape === 'function';
	  return {
	    hidden: item.hidden === true,
	    disabled,
	    style: {
	      backgroundColor: item.active ? theme.palette.btn.active : undefined
	    },
	    hasSvgIconShape
	  };
	}

	/**
	 * @interface
	 * @extends HTMLElement
	 * @since 2.0.0
	 */

	const ActionElement = {
	  /** @type {'njs-cell-action'} */
	  className: 'njs-cell-action'
	};
	const Item = React.forwardRef((_ref, ref) => {
	  let {
	    item,
	    addAnchor = false
	  } = _ref;
	  const theme = useTheme$2();
	  const {
	    hidden,
	    disabled,
	    style,
	    hasSvgIconShape
	  } = useActionState(item);
	  if (hidden) return null;
	  const handleKeyDown = item.keyboardAction ? e => ['Enter', ' ', 'Spacebar'].includes(e.key) && item.keyboardAction() : null;
	  return /*#__PURE__*/React.createElement(IconButton$1, {
	    ref: !addAnchor ? ref : null,
	    title: item.label,
	    onClick: item.action,
	    onKeyDown: handleKeyDown,
	    disabled: disabled,
	    style: style,
	    className: ActionElement.className
	  }, hasSvgIconShape && SvgIcon(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React.createElement("div", {
	    ref: ref,
	    style: {
	      bottom: -theme.spacing(0.5),
	      right: 0,
	      position: 'absolute',
	      width: '100%',
	      height: 0
	    }
	  }));
	});

	const close = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M9.34535242,8 L13.3273238,11.9819714 C13.6988326,12.3534802 13.6988326,12.955815 13.3273238,13.3273238 C12.955815,13.6988326 12.3534802,13.6988326 11.9819714,13.3273238 L8,9.34535242 L4.01802863,13.3273238 C3.64651982,13.6988326 3.04418502,13.6988326 2.67267621,13.3273238 C2.3011674,12.955815 2.3011674,12.3534802 2.67267621,11.9819714 L6.65464758,8 L2.67267621,4.01802863 C2.3011674,3.64651982 2.3011674,3.04418502 2.67267621,2.67267621 C3.04418502,2.3011674 3.64651982,2.3011674 4.01802863,2.67267621 L8,6.65464758 L11.9819714,2.67267621 C12.3534802,2.3011674 12.955815,2.3011674 13.3273238,2.67267621 C13.6988326,3.04418502 13.6988326,3.64651982 13.3273238,4.01802863 L9.34535242,8 Z'
	    }
	  }]
	});

	const clearSelections = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M6,15.5 L6,15.5 C6,15.2238576 6.22385763,15 6.5,15 L9.5,15 C9.77614237,15 10,15.2238576 10,15.5 L10,15.5 C10,15.7761424 9.77614237,16 9.5,16 L6.5,16 C6.22385763,16 6,15.7761424 6,15.5 Z M1,13.5 L1,14.5 C1,14.7761424 1.22385763,15 1.5,15 L2.5,15 C2.77614237,15 3,15.2238576 3,15.5 L3,15.5 C3,15.7761424 2.77614237,16 2.5,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,13.5 C-3.38176876e-17,13.2238576 0.223857625,13 0.5,13 L0.5,13 C0.776142375,13 1,13.2238576 1,13.5 Z M1,6.5 L1,9.5 C1,9.77614237 0.776142375,10 0.5,10 L0.5,10 C0.223857625,10 3.38176876e-17,9.77614237 0,9.5 L0,6.5 C-3.38176876e-17,6.22385763 0.223857625,6 0.5,6 L0.5,6 C0.776142375,6 1,6.22385763 1,6.5 Z M0,2.5 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L2.5,0 C2.77614237,-5.07265313e-17 3,0.223857625 3,0.5 L3,0.5 C3,0.776142375 2.77614237,1 2.5,1 L1.5,1 C1.22385763,1 1,1.22385763 1,1.5 L1,2.5 C1,2.77614237 0.776142375,3 0.5,3 L0.5,3 C0.223857625,3 3.38176876e-17,2.77614237 0,2.5 Z M6,0.5 L6,0.5 C6,0.223857625 6.22385763,5.07265313e-17 6.5,0 L9.5,0 C9.77614237,-5.07265313e-17 10,0.223857625 10,0.5 L10,0.5 C10,0.776142375 9.77614237,1 9.5,1 L6.5,1 C6.22385763,1 6,0.776142375 6,0.5 Z M15,2.5 L15,1.5 C15,1.22385763 14.7761424,1 14.5,1 L13.5,1 C13.2238576,1 13,0.776142375 13,0.5 L13,0.5 C13,0.223857625 13.2238576,5.07265313e-17 13.5,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,2.5 C16,2.77614237 15.7761424,3 15.5,3 L15.5,3 C15.2238576,3 15,2.77614237 15,2.5 Z M9.1661442,6.1661442 C10.7210031,4.61128527 13.2789969,4.61128527 14.8338558,6.1661442 C16.3887147,7.72100313 16.3887147,10.2789969 14.8338558,11.8338558 C13.2789969,13.3887147 10.7210031,13.3887147 9.1661442,11.8338558 C7.61128527,10.2789969 7.61128527,7.77115987 9.1661442,6.1661442 Z M14.1316614,7.72100313 C14.3322884,7.52037618 14.3824451,7.169279 14.1316614,6.9184953 C13.8808777,6.6677116 13.5297806,6.71786834 13.3291536,6.9184953 L12.0250784,8.22257053 L10.7210031,6.9184953 C10.5203762,6.6677116 10.1191223,6.6677116 9.9184953,6.9184953 C9.6677116,7.11912226 9.6677116,7.52037618 9.9184953,7.72100313 L11.2225705,9.02507837 L9.9184953,10.3291536 C9.6677116,10.5297806 9.6677116,10.8808777 9.9184953,11.1316614 C10.169279,11.3824451 10.5203762,11.3824451 10.7210031,11.1316614 L12.0250784,9.82758621 L13.3291536,11.1316614 C13.5297806,11.3824451 13.8808777,11.3824451 14.1316614,11.1316614 C14.3322884,10.9310345 14.3824451,10.5297806 14.1316614,10.3291536 L12.8275862,9.02507837 L14.1316614,7.72100313 Z'
	    }
	  }]
	});

	var ClearSelections = (props => SvgIcon(clearSelections(props)));

	function useDefaultSelectionActions(_ref) {
	  let {
	    api,
	    onConfirm = () => {},
	    onCancel = () => {},
	    onKeyDeactivate = () => {}
	  } = _ref;
	  const {
	    translator
	  } = react.exports.useContext(InstanceContext);
	  return [{
	    key: 'clear',
	    type: 'icon-button',
	    label: translator.get('Selection.Clear'),
	    enabled: () => api.canClear(),
	    action: () => api.clear(),
	    getSvgIconShape: clearSelections
	  }, {
	    key: 'cancel',
	    type: 'icon-button',
	    label: translator.get('Selection.Cancel'),
	    enabled: () => api.canCancel(),
	    action: () => {
	      onCancel();
	      api.cancel();
	    },
	    keyboardAction: e => {
	      onKeyDeactivate(e);
	      onCancel();
	      api.cancel();
	    },
	    getSvgIconShape: close
	  }, {
	    key: 'confirm',
	    type: 'icon-button',
	    label: translator.get('Selection.Confirm'),
	    enabled: () => api.canConfirm(),
	    action: () => {
	      onConfirm();
	      api.confirm();
	    },
	    keyboardAction: e => {
	      onKeyDeactivate(e);
	      onConfirm();
	      api.confirm();
	    },
	    getSvgIconShape: tick
	  }];
	}

	const useStyles$a = makeStyles(theme => ({
	  icon: {
	    color: theme.palette.text.primary
	  }
	}));

	function MoreItem(_ref) {
	  let {
	    item,
	    onActionClick = () => {}
	  } = _ref;
	  const {
	    hidden,
	    disabled,
	    hasSvgIconShape
	  } = useActionState(item);
	  const {
	    icon
	  } = useStyles$a();

	  const handleClick = () => {
	    item.action();
	    onActionClick();
	  };

	  return !hidden ? /*#__PURE__*/React.createElement(MenuItem$1, {
	    title: item.label,
	    onClick: handleClick,
	    disabled: disabled
	  }, hasSvgIconShape && /*#__PURE__*/React.createElement(ListItemIcon$1, {
	    className: icon
	  }, SvgIcon(item.getSvgIconShape())), /*#__PURE__*/React.createElement(Typography$1, {
	    noWrap: true
	  }, item.label)) : null;
	}

	const More$1 = React.forwardRef((_ref2, ref) => {
	  let {
	    actions = [],
	    show = true,
	    alignTo,
	    popoverProps = {},
	    popoverPaperStyle = {},
	    onCloseOrActionClick = () => {}
	  } = _ref2;
	  const showActions = actions.length > 0;
	  return showActions && /*#__PURE__*/React.createElement(Popover$1 // eslint-disable-next-line react/jsx-props-no-spreading
	  , _extends$b({}, popoverProps, {
	    onClose: onCloseOrActionClick,
	    ref: ref,
	    open: show,
	    anchorEl: alignTo.current,
	    getContentAnchorEl: null,
	    container: alignTo.current,
	    disablePortal: true,
	    hideBackdrop: true,
	    style: {
	      pointerEvents: 'none'
	    },
	    transitionDuration: 0,
	    anchorOrigin: {
	      vertical: 'bottom',
	      horizontal: 'right'
	    },
	    transformOrigin: {
	      vertical: 'top',
	      horizontal: 'right'
	    },
	    PaperProps: {
	      style: _objectSpread2({
	        pointerEvents: 'auto',
	        maxWidth: '250px'
	      }, popoverPaperStyle)
	    }
	  }), /*#__PURE__*/React.createElement(MenuList, null, actions.map((item, ix) =>
	  /*#__PURE__*/
	  // eslint-disable-next-line react/no-array-index-key
	  React.createElement(MoreItem, {
	    key: ix,
	    item: item,
	    onActionClick: onCloseOrActionClick
	  }))));
	});

	/**
	 * @interface
	 * @extends HTMLElement
	 * @since 2.1.0
	 */

	const ActionToolbarElement = {
	  /** @type {'njs-action-toolbar-popover'} */
	  className: 'njs-action-toolbar-popover'
	};
	const useStyles$9 = makeStyles(theme => ({
	  itemSpacing: {
	    padding: theme.spacing(0, 0.5)
	  },
	  firstItemSpacing: {
	    padding: theme.spacing(0, 0.5, 0, 0)
	  },
	  lastItemSpacing: {
	    padding: theme.spacing(0, 0, 0, 0.5)
	  }
	}));
	const ActionsGroup = React.forwardRef((_ref, ref) => {
	  let {
	    actions = [],
	    first = false,
	    last = false,
	    addAnchor = false
	  } = _ref;
	  const {
	    itemSpacing,
	    firstItemSpacing,
	    lastItemSpacing
	  } = useStyles$9();
	  return actions.length > 0 ? /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    container: true,
	    spacing: 0,
	    wrap: "nowrap"
	  }, actions.map((e, ix) => {
	    let cls = [];
	    const isFirstItem = first && ix === 0;
	    const isLastItem = last && actions.length - 1 === ix;

	    if (isFirstItem && !isLastItem) {
	      cls = [firstItemSpacing];
	    }

	    if (isLastItem && !isFirstItem) {
	      cls = [...cls, lastItemSpacing];
	    }

	    if (!isFirstItem && !isLastItem && cls.length === 0) {
	      cls = [itemSpacing];
	    }

	    return /*#__PURE__*/React.createElement(StyledGrid, {
	      item: true,
	      key: e.key,
	      className: cls.join(' ').trim()
	    }, /*#__PURE__*/React.createElement(Item, {
	      key: e.key,
	      item: e,
	      ref: ix === 0 ? ref : null,
	      addAnchor: addAnchor
	    }));
	  })) : null;
	});
	const popoverStyle = {
	  pointerEvents: 'none'
	};
	const popoverAnchorOrigin = {
	  vertical: 'top',
	  horizontal: 'right'
	};
	const popoverTransformOrigin = {
	  vertical: 'bottom',
	  horizontal: 'right'
	};

	function ActionsToolbar(_ref2) {
	  let {
	    show = true,
	    actions = [],
	    maxItems = 3,
	    selections = {
	      show: false,
	      api: null,
	      onConfirm: () => {},
	      onCancel: () => {}
	    },
	    more: more$1 = {
	      enabled: false,
	      actions: [],
	      alignTo: null,
	      popoverProps: {},
	      popoverPaperStyle: {}
	    },
	    popover = {
	      show: false,
	      anchorEl: null
	    },
	    focusHandler = null,
	    actionsRefMock = null // for testing

	  } = _ref2;
	  const defaultSelectionActions = useDefaultSelectionActions(selections);
	  const {
	    itemSpacing
	  } = useStyles$9();
	  const {
	    translator,
	    keyboardNavigation
	  } = react.exports.useContext(InstanceContext);
	  const [showMoreItems, setShowMoreItems] = react.exports.useState(false);
	  const [moreEnabled, setMoreEnabled] = react.exports.useState(more$1.enabled);
	  const [moreActions, setMoreActions] = react.exports.useState(more$1.actions);
	  const [moreAlignTo, setMoreAlignTo] = react.exports.useState(more$1.alignTo);
	  const moreRef = react.exports.useRef();
	  const actionsRef = react.exports.useRef();
	  const theme = useTheme$2();
	  const dividerStyle = react.exports.useMemo(() => ({
	    margin: theme.spacing(0.5, 0)
	  }));

	  const getEnabledButton = last => {
	    const actionsElement = actionsRef.current || actionsRefMock;
	    if (!actionsElement) return null;
	    const buttons = actionsElement.querySelectorAll('button:not(.Mui-disabled)');
	    return buttons[last ? buttons.length - 1 : 0];
	  };

	  react.exports.useEffect(() => () => setShowMoreItems(false), [popover.show]);
	  react.exports.useEffect(() => {
	    setMoreEnabled(more$1.enabled);
	  }, [more$1.enabled]);
	  react.exports.useEffect(() => {
	    if (!focusHandler) return;

	    const focusFirst = () => {
	      const enabledButton = getEnabledButton(false);
	      enabledButton && enabledButton.focus();
	    };

	    const focusLast = () => {
	      const enabledButton = getEnabledButton(true);
	      enabledButton && enabledButton.focus();
	    };

	    focusHandler.on('focus_toolbar_first', focusFirst);
	    focusHandler.on('focus_toolbar_last', focusLast);
	  }, []);
	  const newActions = react.exports.useMemo(() => actions.filter(a => !a.hidden), [actions]);
	  if (!selections.show && newActions.length === 0) return null;

	  const handleCloseShowMoreItems = () => {
	    setShowMoreItems(false);
	  };

	  const moreItem = {
	    key: 'more',
	    label: translator.get('Menu.More'),
	    // TODO: Add translation
	    getSvgIconShape: more,
	    hidden: false,
	    enabled: () => moreEnabled,
	    action: () => setShowMoreItems(!showMoreItems)
	  };

	  if (newActions.length > maxItems) {
	    const newMoreActions = newActions.splice(-(newActions.length - maxItems) - 1);
	    setMoreEnabled(true);
	    setMoreActions([...newMoreActions, ...more$1.actions]);
	    setMoreAlignTo(moreRef);
	  }

	  const tabCallback = // if keyboardNavigation is true, create a callback to handle tabbing from the first/last button in the toolbar that resets focus on the content
	  keyboardNavigation && focusHandler && focusHandler.refocusContent ? evt => {
	    if (evt.key !== 'Tab') return;
	    const isTabbingOut = evt.shiftKey && getEnabledButton(false) === evt.target || !evt.shiftKey && getEnabledButton(true) === evt.target;

	    if (isTabbingOut) {
	      evt.preventDefault();
	      evt.stopPropagation();
	      focusHandler.refocusContent();
	    }
	  } : null;
	  const showActions = newActions.length > 0;
	  const showMore = moreActions.length > 0;
	  const showDivider = showActions && selections.show || showMore && selections.show;
	  const Actions = /*#__PURE__*/React.createElement(StyledGrid, {
	    ref: actionsRef,
	    onKeyDown: tabCallback,
	    container: true,
	    spacing: 0,
	    wrap: "nowrap"
	  }, showActions && /*#__PURE__*/React.createElement(ActionsGroup, {
	    actions: newActions,
	    first: true,
	    last: !showMore && !selections.show
	  }), showMore && /*#__PURE__*/React.createElement(ActionsGroup, {
	    ref: moreRef,
	    actions: [moreItem],
	    first: !showActions,
	    last: !selections.show,
	    addAnchor: true
	  }), showDivider && /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    className: itemSpacing,
	    style: dividerStyle
	  }, /*#__PURE__*/React.createElement(Divider$1, {
	    orientation: "vertical"
	  })), selections.show && /*#__PURE__*/React.createElement(ActionsGroup, {
	    actions: defaultSelectionActions,
	    first: !showActions && !showMore,
	    last: true
	  }), showMoreItems && /*#__PURE__*/React.createElement(More$1, {
	    show: showMoreItems,
	    actions: moreActions,
	    alignTo: moreAlignTo,
	    popoverProps: more$1.popoverProps,
	    popoverPaperStyle: more$1.popoverPaperStyle,
	    onCloseOrActionClick: handleCloseShowMoreItems
	  }));
	  return popover.show ? /*#__PURE__*/React.createElement(Popover$1, {
	    disableEnforceFocus: true,
	    disableAutoFocus: true,
	    disableRestoreFocus: true,
	    open: popover.show,
	    anchorEl: popover.anchorEl,
	    anchorOrigin: popoverAnchorOrigin,
	    transformOrigin: popoverTransformOrigin,
	    hideBackdrop: true,
	    style: popoverStyle,
	    PaperProps: {
	      className: ActionToolbarElement.className,
	      style: {
	        pointerEvents: 'auto',
	        padding: theme.spacing(1, 1)
	      }
	    }
	  }, Actions) : show && Actions;
	}

	const search = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M15.7873809,13.80959 C16.1870614,14.209868 15.9872212,15.1104934 15.4876205,15.5107714 C15.08794,15.9110493 14.1886588,16.2112578 13.7889782,15.8109798 L11.0911347,13.1091035 L10.9912145,12.5086866 L10.2917736,11.8082001 C9.19265216,12.5086866 7.89369045,13.0090341 6.49480859,13.0090341 C2.89768383,13.0090341 0,10.1070188 0,6.50451703 C0,2.90201529 2.89768383,0 6.49480859,0 C10.0919334,0 12.9896172,2.90201529 12.9896172,6.50451703 C12.9896172,7.90548992 12.4900165,9.20639333 11.7905756,10.3071577 L12.4900165,11.0076442 L13.0895373,11.1077137 L15.7873809,13.80959 Z M11.2909749,6.50451703 C11.2909749,5.20361362 10.7913743,4.00277971 9.89209309,3.00208478 C8.9928119,2.10145935 7.79377031,1.60111188 6.49480859,1.60111188 C5.19584688,1.60111188 3.99680529,2.10145935 2.99760397,3.00208478 C2.09832278,4.00277971 1.59872212,5.20361362 1.59872212,6.50451703 C1.59872212,7.80542043 2.09832278,9.00625434 2.99760397,9.90687978 C3.89688516,10.8075052 5.09592674,11.3078527 6.49480859,11.3078527 C7.79377031,11.4079222 8.9928119,10.9075747 9.89209309,9.90687978 C10.7913743,9.00625434 11.2909749,7.80542043 11.2909749,6.50451703 Z'
	    }
	  }]
	});

	var SearchIcon = (props => SvgIcon(search(props)));

	const useStyles$8 = makeStyles$1(theme => ({
	  root: {
	    border: 'none',
	    borderRadius: 0,
	    '& fieldset': {
	      border: "1px solid ".concat(theme.palette.divider),
	      borderWidth: '1px 0 1px 0',
	      borderRadius: 0
	    },
	    '&:hover': {
	      border: 'none'
	    }
	  },
	  dense: {
	    fontSize: 12,
	    paddingLeft: theme.spacing(1),
	    '& input': {
	      paddingTop: '5px',
	      paddingBottom: '5px'
	    }
	  }
	}));
	const TREE_PATH = '/qListObjectDef';
	function ListBoxSearch(_ref) {
	  let {
	    model,
	    keyboard,
	    dense = false
	  } = _ref;
	  const {
	    translator
	  } = react.exports.useContext(InstanceContext);
	  const [value, setValue] = react.exports.useState('');

	  const onChange = e => {
	    setValue(e.target.value);
	    model.searchListObjectFor(TREE_PATH, e.target.value);
	  };

	  const onKeyDown = e => {
	    switch (e.key) {
	      case 'Enter':
	        model.acceptListObjectSearch(TREE_PATH, true);
	        setValue('');
	        break;

	      case 'Escape':
	        model.abortListObjectSearch(TREE_PATH);
	        break;
	    }
	  };

	  const classes = useStyles$8();
	  return /*#__PURE__*/React.createElement(OutlinedInput$1, {
	    startAdornment: /*#__PURE__*/React.createElement(InputAdornment$1, {
	      position: "start"
	    }, /*#__PURE__*/React.createElement(SearchIcon, {
	      size: dense ? 'small' : 'normal'
	    })),
	    className: ['search', classes.root, dense && classes.dense].filter(Boolean).join(' '),
	    margin: "dense",
	    fullWidth: true,
	    placeholder: translator.get('Listbox.Search'),
	    value: value,
	    onChange: onChange,
	    onKeyDown: onKeyDown,
	    inputProps: {
	      tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1
	    }
	  });
	}

	function eventmixin (obj) {
	  /* eslint no-param-reassign: 0 */
	  Object.keys(nodeEventEmitter.prototype).forEach(key => {
	    obj[key] = nodeEventEmitter.prototype[key];
	  });
	  nodeEventEmitter.init(obj);
	  return obj;
	}

	/* eslint no-underscore-dangle: 0 */

	const event = () => {
	  let prevented = false;
	  return {
	    isPrevented: () => prevented,
	    preventDefault: () => {
	      prevented = true;
	    }
	  };
	};

	function createObjectSelections(_ref) {
	  let {
	    appSelections,
	    appModal,
	    model
	  } = _ref;
	  let layout;
	  let isActive = false;
	  let hasSelected = false;
	  /**
	   * @class
	   * @alias ObjectSelections
	   */

	  const api =
	  /** @lends ObjectSelections# */
	  {
	    // model,
	    id: model.id,

	    setLayout(lyt) {
	      layout = lyt;
	    },

	    /**
	     * @param {string[]} paths
	     * @returns {Promise<undefined>}
	     */
	    begin(paths) {
	      const e = event(); // TODO - event as parameter?

	      this.emit('activate', e);

	      if (e.isPrevented()) {
	        return Promise.resolve();
	      }

	      isActive = true;
	      this.emit('activated');
	      return appModal.begin(model, paths, true);
	    },

	    /**
	     * @returns {Promise<undefined>}
	     */
	    clear() {
	      hasSelected = false;
	      this.emit('cleared');

	      if (layout.qListObject) {
	        return model.clearSelections('/qListObjectDef');
	      }

	      return model.resetMadeSelections();
	    },

	    /**
	     * @returns {Promise<undefined>}
	     */
	    confirm() {
	      hasSelected = false;
	      isActive = false;
	      this.emit('confirmed');
	      this.emit('deactivated');
	      return appModal.end(true);
	    },

	    /**
	     * @returns {Promise<undefined>}
	     */
	    cancel() {
	      hasSelected = false;
	      isActive = false;
	      this.emit('canceled'); // FIXME - spelling?

	      this.emit('deactivated');
	      return appModal.end(false);
	    },

	    /**
	     * @param {object} s
	     * @param {string} s.method
	     * @param {any[]} s.params
	     * @returns {Promise<boolean>}
	     */
	    async select(s) {
	      const b = this.begin([s.params[0]]);

	      if (!appSelections.isModal()) {
	        return false;
	      }

	      await b;
	      const qSuccess = await model[s.method](...s.params);
	      hasSelected = s.method !== 'resetMadeSelections';

	      if (!qSuccess) {
	        model.resetMadeSelections();
	        return false;
	      }

	      return true;
	    },

	    /**
	     * @returns {boolean}
	     */
	    canClear() {
	      if (layout && layout.qListObject && layout.qListObject.qDimensionInfo) {
	        return !layout.qListObject.qDimensionInfo.qLocked && !layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne;
	      }

	      return hasSelected;
	    },

	    /**
	     * @returns {boolean}
	     */
	    canConfirm() {
	      if (layout && layout.qListObject && layout.qListObject.qDimensionInfo) {
	        return !layout.qListObject.qDimensionInfo.qLocked;
	      }

	      return hasSelected;
	    },

	    /**
	     * @returns {boolean}
	     */
	    canCancel() {
	      if (layout && layout.qListObject && layout.qListObject.qDimensionInfo) {
	        return !layout.qListObject.qDimensionInfo.qLocked;
	      }

	      return true;
	    },

	    /**
	     * @returns {boolean}
	     */
	    isActive: () => isActive,

	    /**
	     * @returns {boolean}
	     */
	    isModal: () => appSelections.isModal(model),

	    /**
	     * @param {string[]} paths
	     * @returns {Promise<undefined>}
	     */
	    goModal: paths => appModal.begin(model, paths, false),

	    /**
	     * @param {boolean} [accept=false]
	     * @returns {Promise<undefined>}
	     */
	    noModal: function () {
	      let accept = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
	      return appModal.end(accept);
	    }
	  };
	  eventmixin(api);
	  return api;
	}

	function useObjectSelections(app, model) {
	  const [appSelections] = useAppSelections(app);
	  const [layout] = useLayout$1(model);
	  const key = model ? model.id : null;
	  const [appModalStore] = useAppModalStore();
	  const [objectSelectionsStore] = useObjectSelectionsStore();
	  const appModal = appModalStore.get(app.id);
	  let objectSelections = objectSelectionsStore.get(key);
	  react.exports.useEffect(() => {
	    if (!appSelections || !model || objectSelections) return;
	    objectSelections = createObjectSelections({
	      appSelections,
	      appModal,
	      model
	    });
	    objectSelectionsStore.set(key, objectSelections);
	    objectSelectionsStore.dispatch(true);
	  }, [appSelections, model]);
	  react.exports.useEffect(() => {
	    if (!objectSelections) return;
	    objectSelections.setLayout(layout);
	  }, [objectSelections, layout]);
	  return [objectSelections];
	}

	function ListBoxPopover(_ref) {
	  let {
	    alignTo,
	    show,
	    close,
	    app,
	    fieldName,
	    stateName = '$'
	  } = _ref;
	  const open = show && Boolean(alignTo.current);
	  const theme = useTheme$2();
	  const [model] = useSessionModel({
	    qInfo: {
	      qType: 'njsListbox'
	    },
	    qListObjectDef: {
	      qStateName: stateName,
	      qShowAlternatives: true,
	      qInitialDataFetch: [{
	        qTop: 0,
	        qLeft: 0,
	        qWidth: 0,
	        qHeight: 0
	      }],
	      qDef: {
	        qSortCriterias: [{
	          qSortByState: 1,
	          qSortByAscii: 1,
	          qSortByNumeric: 1,
	          qSortByLoadOrder: 1
	        }],
	        qFieldDefs: [fieldName]
	      }
	    }
	  }, app, fieldName, stateName);
	  const lock = react.exports.useCallback(() => {
	    model.lock('/qListObjectDef');
	  }, [model]);
	  const unlock = react.exports.useCallback(() => {
	    model.unlock('/qListObjectDef');
	  }, [model]);
	  const {
	    translator
	  } = react.exports.useContext(InstanceContext);
	  const moreAlignTo = react.exports.useRef();
	  const [selections] = useObjectSelections(app, model);
	  const [layout] = useLayout$1(model);
	  react.exports.useEffect(() => {
	    if (selections && open) {
	      if (!selections.isModal(model)) {
	        selections.goModal('/qListObjectDef');
	      }
	    }
	  }, [selections, open]);

	  if (!model || !layout || !translator) {
	    return null;
	  }

	  const isLocked = layout.qListObject.qDimensionInfo.qLocked === true;

	  const popoverClose = (e, reason) => {
	    const accept = reason !== 'escapeKeyDown';
	    selections.noModal(accept);
	    close();
	  };

	  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
	    layout,
	    model,
	    translator
	  });
	  const counts = layout.qListObject.qDimensionInfo.qStateCounts;
	  const hasSelections = counts.qSelected + counts.qSelectedExcluded + counts.qLocked + counts.qLockedExcluded > 0;
	  return /*#__PURE__*/React.createElement(Popover$1, {
	    open: open,
	    onClose: popoverClose,
	    anchorEl: alignTo.current,
	    anchorOrigin: {
	      vertical: 'bottom',
	      horizontal: 'center'
	    },
	    transformOrigin: {
	      vertical: 'top',
	      horizontal: 'center'
	    },
	    PaperProps: {
	      style: {
	        minWidth: '250px'
	      }
	    }
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    direction: "column",
	    spacing: 0
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    container: true,
	    style: {
	      padding: theme.spacing(1)
	    }
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, isLocked ? /*#__PURE__*/React.createElement(IconButton$1, {
	    onClick: unlock,
	    disabled: !isLocked
	  }, /*#__PURE__*/React.createElement(Lock, {
	    title: translator.get('Listbox.Unlock')
	  })) : /*#__PURE__*/React.createElement(IconButton$1, {
	    onClick: lock,
	    disabled: !hasSelections
	  }, /*#__PURE__*/React.createElement(Unlock, {
	    title: translator.get('Listbox.Lock')
	  }))), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    xs: true
	  }), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(ActionsToolbar, {
	    more: {
	      enabled: !isLocked,
	      actions: listboxSelectionToolbarItems,
	      alignTo: moreAlignTo,
	      popoverProps: {
	        elevation: 0
	      },
	      popoverPaperStyle: {
	        boxShadow: '0 12px 8px -8px rgba(0, 0, 0, 0.2)',
	        minWidth: '250px'
	      }
	    },
	    selections: {
	      show: true,
	      api: selections,
	      onConfirm: popoverClose,
	      onCancel: () => popoverClose(null, 'escapeKeyDown')
	    }
	  }))), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    xs: true
	  }, /*#__PURE__*/React.createElement("div", {
	    ref: moreAlignTo
	  }), /*#__PURE__*/React.createElement(ListBoxSearch, {
	    model: model
	  }), /*#__PURE__*/React.createElement(ListBox, {
	    model: model,
	    selections: selections,
	    direction: "ltr"
	  }))));
	}

	const useStyles$7 = makeStyles$1(theme => ({
	  item: {
	    backgroundColor: theme.palette.background.paper,
	    position: 'relative',
	    cursor: 'pointer',
	    padding: '4px',
	    '&:hover': {
	      backgroundColor: theme.palette.action.hover
	    }
	  }
	}));
	function OneField(_ref) {
	  let {
	    field,
	    api,
	    stateIx = 0,
	    skipHandleShowListBoxPopover = false,
	    moreAlignTo = null,
	    onClose = () => {}
	  } = _ref;
	  const {
	    translator
	  } = react.exports.useContext(InstanceContext);
	  const alignTo = moreAlignTo || react.exports.useRef();
	  const theme = useTheme$2();
	  const [showListBoxPopover, setShowListBoxPopover] = react.exports.useState(false);
	  const classes = useStyles$7();

	  const handleShowListBoxPopover = e => {
	    if (e.currentTarget.contains(e.target)) {
	      // because click in popover will propagate to parent
	      setShowListBoxPopover(!showListBoxPopover);
	    }
	  };

	  const handleCloseShowListBoxPopover = () => {
	    setShowListBoxPopover(false);
	    onClose();
	  };

	  const selection = field.selections[stateIx];

	  if (typeof selection.qTotal === 'undefined') {
	    selection.qTotal = 0;
	  }

	  const counts = selection.qStateCounts || {
	    qSelected: 0,
	    qLocked: 0,
	    qExcluded: 0,
	    qLockedExcluded: 0,
	    qSelectedExcluded: 0,
	    qAlternative: 0
	  };
	  const green = (counts.qSelected + counts.qLocked) / selection.qTotal;
	  const white = counts.qAlternative / selection.qTotal;
	  const grey = (counts.qExcluded + counts.qLockedExcluded + counts.qSelectedExcluded) / selection.qTotal;
	  const numSelected = counts.qSelected + counts.qSelectedExcluded + counts.qLocked + counts.qLockedExcluded; // Maintain modal state in app selections

	  const noSegments = numSelected === 0 && selection.qTotal === 0;
	  let label = '';

	  if (selection.qTotal === numSelected && selection.qTotal > 1) {
	    label = translator.get('CurrentSelections.All');
	  } else if (numSelected > 1 && selection.qTotal) {
	    label = translator.get('CurrentSelections.Of', [numSelected, selection.qTotal]);
	  } else if (selection.qSelectedFieldSelectionInfo) {
	    label = selection.qSelectedFieldSelectionInfo.map(v => v.qName).join(', ');
	  }

	  if (field.states[stateIx] !== '$') {
	    label = "".concat(field.states[stateIx], ": ").concat(label);
	  }

	  const segments = [{
	    color: theme.palette.selected.main,
	    ratio: green
	  }, {
	    color: theme.palette.selected.alternative,
	    ratio: white
	  }, {
	    color: theme.palette.selected.excluded,
	    ratio: grey
	  }];
	  segments.forEach((s, i) => {
	    s.offset = i ? segments[i - 1].offset + segments[i - 1].ratio : 0; // eslint-disable-line
	  });
	  let Header = null;
	  let Icon = null;
	  let SegmentsIndicator = null;
	  let Component = null;

	  if (!moreAlignTo) {
	    Header = /*#__PURE__*/React.createElement(StyledGrid, {
	      item: true,
	      xs: true,
	      style: {
	        minWidth: 0,
	        flexGrow: 1,
	        opacity: selection.qLocked ? '0.3' : ''
	      }
	    }, /*#__PURE__*/React.createElement(Typography$1, {
	      noWrap: true,
	      style: {
	        fontSize: '12px',
	        lineHeight: '16px',
	        fontWeight: 600
	      }
	    }, selection.qField), /*#__PURE__*/React.createElement(Typography$1, {
	      noWrap: true,
	      style: {
	        fontSize: '12px',
	        opacity: 0.55,
	        lineHeight: '16px'
	      }
	    }, label));

	    if (selection.qLocked) {
	      Icon = /*#__PURE__*/React.createElement(StyledGrid, {
	        item: true
	      }, /*#__PURE__*/React.createElement(IconButton$1, null, /*#__PURE__*/React.createElement(Lock, null)));
	    } else if (!selection.qOneAndOnlyOne) {
	      Icon = /*#__PURE__*/React.createElement(StyledGrid, {
	        item: true
	      }, /*#__PURE__*/React.createElement(IconButton$1, {
	        title: translator.get('Selection.Clear'),
	        onClick: e => {
	          e.stopPropagation();
	          api.clearField(selection.qField, field.states[stateIx]);
	        }
	      }, /*#__PURE__*/React.createElement(Remove, null)));
	    }

	    SegmentsIndicator = /*#__PURE__*/React.createElement("div", {
	      style: {
	        height: '4px',
	        position: 'absolute',
	        bottom: '0',
	        left: '0',
	        width: '100%'
	      }
	    }, noSegments === false && segments.map(s => /*#__PURE__*/React.createElement("div", {
	      key: s.color,
	      style: {
	        position: 'absolute',
	        background: s.color,
	        height: '100%',
	        top: 0,
	        width: "".concat(s.ratio * 100, "%"),
	        left: "".concat(s.offset * 100, "%")
	      }
	    })));
	    Component = /*#__PURE__*/React.createElement(StyledGrid, {
	      container: true,
	      spacing: 0,
	      ref: alignTo,
	      className: classes.item,
	      onClick: skipHandleShowListBoxPopover === false && handleShowListBoxPopover || null
	    }, Header, Icon, SegmentsIndicator, showListBoxPopover && /*#__PURE__*/React.createElement(ListBoxPopover, {
	      alignTo: alignTo,
	      show: showListBoxPopover,
	      close: handleCloseShowListBoxPopover,
	      app: api.model,
	      fieldName: selection.qField,
	      stateName: field.states[stateIx]
	    }));
	  }

	  return moreAlignTo ? /*#__PURE__*/React.createElement(ListBoxPopover, {
	    alignTo: alignTo,
	    show: true,
	    close: handleCloseShowListBoxPopover,
	    app: api.model,
	    fieldName: selection.qField,
	    stateName: field.states[stateIx]
	  }) : Component;
	}

	const downArrow = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M8,9 L12.5,4.5 L14,6 L9.5,10.5 L8,12 L2,6 L3.5,4.5 L8,9 Z'
	    }
	  }]
	});

	var DownArrow = (props => SvgIcon(downArrow(props)));

	const useStyles$6 = makeStyles$1(theme => ({
	  item: {
	    backgroundColor: theme.palette.background.paper,
	    position: 'relative',
	    cursor: 'pointer',
	    padding: '4px',
	    '&:hover': {
	      backgroundColor: theme.palette.action.hover
	    },
	    height: '100%',
	    alignItems: 'center'
	  },
	  badge: {
	    padding: theme.spacing(0, 1)
	  }
	}));
	function MultiState(_ref) {
	  let {
	    field,
	    api,
	    moreAlignTo = null,
	    onClose = () => {}
	  } = _ref;
	  const classes = useStyles$6(); // If originated from the `more` item show fields directly

	  const [showFields, setShowFields] = react.exports.useState(!!moreAlignTo);
	  const [showStateIx, setShowStateIx] = react.exports.useState(-1); // If originated from the `more` item align it

	  const [anchorEl, setAnchorEl] = react.exports.useState(moreAlignTo ? moreAlignTo.current : null);
	  const alignTo = moreAlignTo || react.exports.useRef();
	  const {
	    translator
	  } = react.exports.useContext(InstanceContext);
	  const clearAllStates = translator.get('Selection.ClearAllStates');

	  const handleShowFields = e => {
	    if (e.currentTarget.contains(e.target)) {
	      // because click in popover will propagate to parent
	      setAnchorEl(e.currentTarget);
	      alignTo.current = e.currentTarget;
	      setShowFields(!showFields);
	    }
	  };

	  const handleCloseShowFields = () => {
	    setShowFields(false);
	    onClose();
	  };

	  const handleShowState = (e, ix) => {
	    e.stopPropagation();
	    setShowFields(false);
	    setShowStateIx(ix);
	  };

	  const handleCloseShowState = () => {
	    setShowStateIx(-1);
	    onClose();
	  };

	  const handleClearAllStates = () => {
	    field.states.forEach(s => api.clearField(field.name, s));
	  };

	  let Header = null;

	  if (!moreAlignTo) {
	    Header = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledGrid, {
	      item: true,
	      xs: true,
	      zeroMinWidth: true
	    }, /*#__PURE__*/React.createElement(Badge$1, {
	      className: classes.badge,
	      color: "secondary",
	      badgeContent: field.states.length
	    }, /*#__PURE__*/React.createElement(Typography$1, {
	      component: "span",
	      noWrap: true,
	      style: {
	        fontSize: '12px',
	        lineHeight: '16px',
	        fontWeight: 600
	      }
	    }, field.name))), /*#__PURE__*/React.createElement(StyledGrid, {
	      item: true
	    }, /*#__PURE__*/React.createElement("div", {
	      style: {
	        width: '12px'
	      }
	    })), /*#__PURE__*/React.createElement(StyledGrid, {
	      item: true
	    }, /*#__PURE__*/React.createElement(IconButton$1, null, /*#__PURE__*/React.createElement(DownArrow, null))));
	  }

	  const Fields = /*#__PURE__*/React.createElement(List$1, {
	    dense: true
	  }, /*#__PURE__*/React.createElement(ListItem$1, {
	    title: clearAllStates,
	    onClick: handleClearAllStates
	  }, /*#__PURE__*/React.createElement(Button$1, {
	    variant: "contained",
	    fullWidth: true
	  }, clearAllStates)), field.states.map((s, ix) =>
	  /*#__PURE__*/
	  // eslint-disable-next-line react/no-array-index-key
	  React.createElement(ListItem$1, {
	    key: ix,
	    title: field.name,
	    onClick: e => handleShowState(e, ix)
	  }, /*#__PURE__*/React.createElement(Box, {
	    border: 1,
	    width: "100%",
	    borderRadius: "borderRadius",
	    borderColor: "divider"
	  }, /*#__PURE__*/React.createElement(OneField, {
	    field: field,
	    api: api,
	    stateIx: ix,
	    skipHandleShowListBoxPopover: true
	  })))));
	  const PopoverFields = /*#__PURE__*/React.createElement(Popover$1, {
	    open: showFields,
	    onClose: handleCloseShowFields,
	    anchorEl: anchorEl,
	    anchorOrigin: {
	      vertical: 'bottom',
	      horizontal: 'center'
	    },
	    transformOrigin: {
	      vertical: 'top',
	      horizontal: 'center'
	    },
	    PaperProps: {
	      style: {
	        minWidth: '200px',
	        width: '200px',
	        pointerEvents: 'auto'
	      }
	    }
	  }, Fields);
	  const Component = moreAlignTo ? PopoverFields : /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    spacing: 0,
	    className: classes.item,
	    onClick: handleShowFields
	  }, Header, showFields && PopoverFields, showStateIx > -1 && /*#__PURE__*/React.createElement(ListBoxPopover, {
	    alignTo: alignTo,
	    show: showStateIx > -1,
	    close: handleCloseShowState,
	    app: api.model,
	    fieldName: field.selections[showStateIx].qField,
	    stateName: field.states[showStateIx]
	  }));
	  return moreAlignTo && showStateIx > -1 ? /*#__PURE__*/React.createElement(ListBoxPopover, {
	    alignTo: alignTo,
	    show: showStateIx > -1,
	    close: handleCloseShowState,
	    app: api.model,
	    fieldName: field.selections[showStateIx].qField,
	    stateName: field.states[showStateIx]
	  }) : Component;
	}

	const useStyles$5 = makeStyles$1(theme => ({
	  item: {
	    backgroundColor: theme.palette.background.paper,
	    position: 'relative',
	    cursor: 'pointer',
	    padding: '4px',
	    '&:hover': {
	      backgroundColor: theme.palette.action.hover
	    },
	    height: '100%',
	    alignItems: 'center'
	  },
	  badge: {
	    padding: theme.spacing(0, 1)
	  }
	}));
	function More(_ref) {
	  let {
	    items = [],
	    api
	  } = _ref;
	  const classes = useStyles$5();
	  const theme = useTheme$2();
	  const [showMoreItems, setShowMoreItems] = react.exports.useState(false);
	  const [showItemIx, setShowItemIx] = react.exports.useState(-1);
	  const [anchorEl, setAnchorEl] = react.exports.useState(null);
	  const alignTo = react.exports.useRef();

	  const handleShowMoreItems = e => {
	    if (e.currentTarget.contains(e.target)) {
	      // because click in popover will propagate to parent
	      setAnchorEl(e.currentTarget);
	      alignTo.current = e.currentTarget;
	      setShowMoreItems(!showMoreItems);
	    }
	  };

	  const handleCloseShowMoreItem = () => {
	    setShowMoreItems(false);
	  };

	  const handleShowItem = (e, ix) => {
	    e.stopPropagation();
	    setShowMoreItems(false);
	    setShowItemIx(ix);
	  };

	  const handleCloseShowItem = () => {
	    setShowItemIx(-1);
	  };

	  let CurrentItem = null;

	  if (showItemIx > -1) {
	    CurrentItem = items[showItemIx].states.length > 1 ? /*#__PURE__*/React.createElement(MultiState, {
	      field: items[showItemIx],
	      api: api,
	      moreAlignTo: alignTo,
	      onClose: handleCloseShowItem
	    }) : /*#__PURE__*/React.createElement(OneField, {
	      field: items[showItemIx],
	      api: api,
	      skipHandleShowListBoxPopover: true,
	      moreAlignTo: alignTo,
	      onClose: handleCloseShowItem
	    });
	  }

	  return /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    spacing: 0,
	    className: classes.item,
	    onClick: handleShowMoreItems
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(Box, {
	    borderRadius: theme.shape.borderRadius,
	    style: {
	      padding: '4px 8px 4px 8px',
	      backgroundColor: theme.palette.selected.main,
	      color: theme.palette.selected.mainContrastText
	    }
	  }, /*#__PURE__*/React.createElement(Typography$1, {
	    noWrap: true,
	    style: {
	      fontSize: '12px',
	      lineHeight: '16px',
	      fontWeight: 600
	    },
	    color: "inherit"
	  }, "+", items.length))), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(IconButton$1, null, /*#__PURE__*/React.createElement(DownArrow, null))), showMoreItems && /*#__PURE__*/React.createElement(Popover$1, {
	    open: showMoreItems,
	    onClose: handleCloseShowMoreItem,
	    anchorEl: anchorEl,
	    anchorOrigin: {
	      vertical: 'bottom',
	      horizontal: 'center'
	    },
	    transformOrigin: {
	      vertical: 'top',
	      horizontal: 'center'
	    },
	    PaperProps: {
	      style: {
	        minWidth: '200px',
	        width: '200px',
	        pointerEvents: 'auto'
	      }
	    }
	  }, /*#__PURE__*/React.createElement(List$1, {
	    dense: true
	  }, items.map((s, ix) =>
	  /*#__PURE__*/
	  // eslint-disable-next-line react/no-array-index-key
	  React.createElement(ListItem$1, {
	    key: ix,
	    title: s.name,
	    onClick: e => handleShowItem(e, ix)
	  }, /*#__PURE__*/React.createElement(Box, {
	    border: 1,
	    width: "100%",
	    borderRadius: "borderRadius",
	    borderColor: "divider"
	  }, s.states.length > 1 ? /*#__PURE__*/React.createElement(MultiState, {
	    field: s,
	    api: api
	  }) : /*#__PURE__*/React.createElement(OneField, {
	    field: s,
	    api: api
	  })))))), CurrentItem);
	}

	const MIN_WIDTH$1 = 120;
	const MIN_WIDTH_MORE = 72;

	function collect(qSelectionObject, fields) {
	  let state = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '$';
	  qSelectionObject.qSelections.forEach(selection => {
	    const name = selection.qField;
	    const field = fields[name] = fields[name] || {
	      name,
	      states: [],
	      selections: []
	    }; // eslint-disable-line

	    if (field.states.indexOf(state) === -1) {
	      field.states.push(state);
	      field.selections.push(selection);
	    }
	  });
	}

	function getItems(layout) {
	  if (!layout) {
	    return [];
	  }

	  const fields = {};

	  if (layout.qSelectionObject) {
	    collect(layout.qSelectionObject, fields);
	  }

	  if (layout.alternateStates) {
	    layout.alternateStates.forEach(s => collect(s.qSelectionObject, fields, s.stateName));
	  }

	  return Object.keys(fields).map(key => fields[key]);
	}

	function SelectedFields(_ref) {
	  let {
	    api,
	    app
	  } = _ref;
	  const theme = useTheme$2();
	  const [currentSelectionsModel] = useCurrentSelectionsModel(app);
	  const [layout] = useLayout$1(currentSelectionsModel);
	  const [state, setState] = react.exports.useState({
	    items: [],
	    more: []
	  });
	  const [modalObjectStore] = useModalObjectStore();
	  const [containerRef, containerRect] = useRect$1();
	  const [maxItems, setMaxItems] = react.exports.useState(0);

	  const isInListboxPopover = () => {
	    const object = modalObjectStore.get(app.id);
	    return object && object.genericType === 'njsListbox';
	  };

	  react.exports.useEffect(() => {
	    if (!containerRect) return;
	    const {
	      width
	    } = containerRect;
	    const maxWidth = Math.floor(width) - MIN_WIDTH_MORE;
	    const items = Math.floor(maxWidth / MIN_WIDTH$1);
	    setMaxItems(items);
	  }, [containerRect]);
	  react.exports.useEffect(() => {
	    if (!app || !currentSelectionsModel || !layout || !maxItems) {
	      return;
	    }

	    const items = getItems(layout);
	    setState(currState => {
	      const newItems = items; // Maintain modal state in app selections

	      if (isInListboxPopover() && newItems.length + 1 === currState.items.length) {
	        const lastDeselectedField = currState.items.filter(f1 => newItems.some(f2 => f1.name === f2.name) === false)[0];
	        const {
	          qField
	        } = lastDeselectedField.selections[0];
	        lastDeselectedField.selections = [{
	          qField
	        }];
	        const wasIx = currState.items.indexOf(lastDeselectedField);
	        newItems.splice(wasIx, 0, lastDeselectedField);
	      }

	      let newMoreItems = [];

	      if (maxItems < newItems.length) {
	        newMoreItems = newItems.splice(maxItems - newItems.length);
	      }

	      return {
	        items: newItems,
	        more: newMoreItems
	      };
	    });
	  }, [app, currentSelectionsModel, layout, api.isInModal(), maxItems]);
	  return /*#__PURE__*/React.createElement(StyledGrid, {
	    ref: containerRef,
	    container: true,
	    spacing: 0,
	    wrap: "nowrap",
	    style: {
	      height: '100%'
	    }
	  }, state.items.map(s => /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    key: "".concat(s.states.join('::'), "::").concat(s.name),
	    style: {
	      position: 'relative',
	      maxWidth: '240px',
	      minWidth: "".concat(MIN_WIDTH$1, "px"),
	      background: theme.palette.background.paper,
	      borderRight: "1px solid ".concat(theme.palette.divider)
	    }
	  }, s.states.length > 1 ? /*#__PURE__*/React.createElement(MultiState, {
	    field: s,
	    api: api
	  }) : /*#__PURE__*/React.createElement(OneField, {
	    field: s,
	    api: api
	  }))), state.more.length > 0 && /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    style: {
	      position: 'relative',
	      maxWidth: '98px',
	      minWidth: "".concat(MIN_WIDTH_MORE, "px"),
	      background: theme.palette.background.paper,
	      borderRight: "1px solid ".concat(theme.palette.divider)
	    }
	  }, /*#__PURE__*/React.createElement(More, {
	    items: state.more,
	    api: api
	  })));
	}

	const selectionsBack = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M10,15.5 C10,15.7761424 9.77614237,16 9.5,16 L6.5,16 C6.22385763,16 6,15.7761424 6,15.5 C6,15.2238576 6.22385763,15 6.5,15 L9.5,15 C9.77614237,15 10,15.2238576 10,15.5 Z M15,13.5 C15,13.2238576 15.2238576,13 15.5,13 C15.7761424,13 16,13.2238576 16,13.5 L16,15 C16,15.5522847 15.5522847,16 15,16 L13.5,16 C13.2238576,16 13,15.7761424 13,15.5 C13,15.2238576 13.2238576,15 13.5,15 L14.5,15 C14.7761424,15 15,14.7761424 15,14.5 L15,13.5 Z M15,6.5 C15,6.22385763 15.2238576,6 15.5,6 C15.7761424,6 16,6.22385763 16,6.5 L16,9.5 C16,9.77614237 15.7761424,10 15.5,10 C15.2238576,10 15,9.77614237 15,9.5 L15,6.5 Z M16,2.5 C16,2.77614237 15.7761424,3 15.5,3 C15.2238576,3 15,2.77614237 15,2.5 L15,1.5 C15,1.22385763 14.7761424,1 14.5,1 L13.5,1 C13.2238576,1 13,0.776142375 13,0.5 C13,0.223857625 13.2238576,-5.07265313e-17 13.5,0 L15,0 C15.5522847,1.01453063e-16 16,0.44771525 16,1 L16,2.5 Z M10,0.5 C10,0.776142375 9.77614237,1 9.5,1 L6.5,1 C6.22385763,1 6,0.776142375 6,0.5 C6,0.223857625 6.22385763,-5.07265313e-17 6.5,0 L9.5,0 C9.77614237,5.07265313e-17 10,0.223857625 10,0.5 Z M1,2.5 C1,2.77614237 0.776142375,3 0.5,3 C0.223857625,3 5.18696197e-13,2.77614237 5.18696197e-13,2.5 L5.18696197e-13,1 C5.18696197e-13,0.44771525 0.44771525,-1.01453063e-16 1,0 L2.5,0 C2.77614237,5.07265313e-17 3,0.223857625 3,0.5 C3,0.776142375 2.77614237,1 2.5,1 L1.5,1 C1.22385763,1 1,1.22385763 1,1.5 L1,2.5 Z M1,13.5 L1,14.5 C1,14.7761424 1.22385763,15 1.5,15 L2.5,15 C2.77614237,15 3,15.2238576 3,15.5 C3,15.7761424 2.77614237,16 2.5,16 L1,16 C0.44771525,16 5.18696197e-13,15.5522847 5.18696197e-13,15 L5.18696197e-13,13.5 C5.18696197e-13,13.2238576 0.223857625,13 0.5,13 C0.776142375,13 1,13.2238576 1,13.5 Z M4,7 C7.49095643,7 10,10.1337595 10,12.1872632 C10,12.1872632 8.16051135,9.86624054 4,10 L4,12 C4,12 2.66666667,10.8333333 -1.0658141e-14,8.5 C-2.59348099e-13,8.5 1.33333333,7.33333333 4,5 C4,5 4,5.66666667 4,7 Z'
	    }
	  }]
	});

	var SelectionsBack = (props => SvgIcon(selectionsBack(props)));

	const selectionsForward = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M6,15.5 L6,15.5 C6,15.2238576 6.22385763,15 6.5,15 L9.5,15 C9.77614237,15 10,15.2238576 10,15.5 L10,15.5 C10,15.7761424 9.77614237,16 9.5,16 L6.5,16 C6.22385763,16 6,15.7761424 6,15.5 Z M1,13.5 L1,14.5 C1,14.7761424 1.22385763,15 1.5,15 L2.5,15 C2.77614237,15 3,15.2238576 3,15.5 L3,15.5 C3,15.7761424 2.77614237,16 2.5,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,13.5 C-3.38176876e-17,13.2238576 0.223857625,13 0.5,13 L0.5,13 C0.776142375,13 1,13.2238576 1,13.5 Z M1,6.5 L1,9.5 C1,9.77614237 0.776142375,10 0.5,10 L0.5,10 C0.223857625,10 3.38176876e-17,9.77614237 0,9.5 L0,6.5 C-3.38176876e-17,6.22385763 0.223857625,6 0.5,6 L0.5,6 C0.776142375,6 1,6.22385763 1,6.5 Z M0,2.5 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L2.5,0 C2.77614237,-5.07265313e-17 3,0.223857625 3,0.5 L3,0.5 C3,0.776142375 2.77614237,1 2.5,1 L1.5,1 C1.22385763,1 1,1.22385763 1,1.5 L1,2.5 C1,2.77614237 0.776142375,3 0.5,3 L0.5,3 C0.223857625,3 3.38176876e-17,2.77614237 0,2.5 Z M6,0.5 L6,0.5 C6,0.223857625 6.22385763,5.07265313e-17 6.5,0 L9.5,0 C9.77614237,-5.07265313e-17 10,0.223857625 10,0.5 L10,0.5 C10,0.776142375 9.77614237,1 9.5,1 L6.5,1 C6.22385763,1 6,0.776142375 6,0.5 Z M15,2.5 L15,1.5 C15,1.22385763 14.7761424,1 14.5,1 L13.5,1 C13.2238576,1 13,0.776142375 13,0.5 L13,0.5 C13,0.223857625 13.2238576,5.07265313e-17 13.5,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,2.5 C16,2.77614237 15.7761424,3 15.5,3 L15.5,3 C15.2238576,3 15,2.77614237 15,2.5 Z M15,13.5 C15,13.2238576 15.2238576,13 15.5,13 C15.7761424,13 16,13.2238576 16,13.5 L16,15 C16,15.5522847 15.5522847,16 15,16 L13.5,16 C13.2238576,16 13,15.7761424 13,15.5 C13,15.2238576 13.2238576,15 13.5,15 L14.5,15 C14.7761424,15 15,14.7761424 15,14.5 L15,13.5 Z M12,7 C12,5.66666667 12,5 12,5 C14.6666667,7.33333333 16,8.5 16,8.5 C13.3333333,10.8333333 12,12 12,12 L12,10 C7.83948865,9.86624054 6,12.1872632 6,12.1872632 C6,10.1337595 8.50904357,7 12,7 Z'
	    }
	  }]
	});

	var SelectionsForward = (props => SvgIcon(selectionsForward(props)));

	function Nav(_ref) {
	  let {
	    api,
	    app
	  } = _ref;
	  const {
	    translator
	  } = react.exports.useContext(InstanceContext);
	  const [navState] = useAppSelectionsNavigation(app);
	  return /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    wrap: "nowrap",
	    style: {
	      height: '100%',
	      alignItems: 'center',
	      padding: '0 8px'
	    }
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(IconButton$1, {
	    style: {
	      marginRight: '8px'
	    },
	    disabled: !navState || !navState.canGoBack,
	    title: translator.get('Navigate.Back'),
	    onClick: () => api.back()
	  }, /*#__PURE__*/React.createElement(SelectionsBack, null))), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(IconButton$1, {
	    style: {
	      marginRight: '8px'
	    },
	    disabled: !navState || !navState.canGoForward,
	    title: translator.get('Navigate.Forward'),
	    onClick: () => api.forward()
	  }, /*#__PURE__*/React.createElement(SelectionsForward, null))), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(IconButton$1, {
	    disabled: !navState || !navState.canClear,
	    title: translator.get('Selection.ClearAll'),
	    onClick: () => api.clear()
	  }, /*#__PURE__*/React.createElement(ClearSelections, null))));
	}

	function AppSelections(_ref) {
	  let {
	    app
	  } = _ref;
	  const theme = useTheme$2();
	  const [appSelections] = useAppSelections(app);
	  if (!appSelections) return null;
	  return /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    spacing: 0,
	    wrap: "nowrap",
	    style: {
	      backgroundColor: theme.palette.background.paper,
	      minHeight: '40px'
	    }
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    style: {
	      borderRight: "1px solid ".concat(theme.palette.divider)
	    }
	  }, /*#__PURE__*/React.createElement(Nav, {
	    api: appSelections,
	    app: app
	  })), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    xs: true,
	    style: {
	      backgroundColor: theme.palette.background.darker,
	      overflow: 'hidden'
	    }
	  }, /*#__PURE__*/React.createElement(SelectedFields, {
	    api: appSelections,
	    app: app
	  })));
	}
	function mount(_ref2) {
	  let {
	    element,
	    app
	  } = _ref2;
	  return ReactDOM.createPortal( /*#__PURE__*/React.createElement(AppSelections, {
	    app: app
	  }), element);
	}

	var classCallCheck = function (instance, Constructor) {
	  if (!(instance instanceof Constructor)) {
	    throw new TypeError("Cannot call a class as a function");
	  }
	};

	var createClass = function () {
	  function defineProperties(target, props) {
	    for (var i = 0; i < props.length; i++) {
	      var descriptor = props[i];
	      descriptor.enumerable = descriptor.enumerable || false;
	      descriptor.configurable = true;
	      if ("value" in descriptor) descriptor.writable = true;
	      Object.defineProperty(target, descriptor.key, descriptor);
	    }
	  }

	  return function (Constructor, protoProps, staticProps) {
	    if (protoProps) defineProperties(Constructor.prototype, protoProps);
	    if (staticProps) defineProperties(Constructor, staticProps);
	    return Constructor;
	  };
	}();

	var _extends = Object.assign || function (target) {
	  for (var i = 1; i < arguments.length; i++) {
	    var source = arguments[i];

	    for (var key in source) {
	      if (Object.prototype.hasOwnProperty.call(source, key)) {
	        target[key] = source[key];
	      }
	    }
	  }

	  return target;
	};

	var inherits = function (subClass, superClass) {
	  if (typeof superClass !== "function" && superClass !== null) {
	    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
	  }

	  subClass.prototype = Object.create(superClass && superClass.prototype, {
	    constructor: {
	      value: subClass,
	      enumerable: false,
	      writable: true,
	      configurable: true
	    }
	  });
	  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
	};

	var possibleConstructorReturn = function (self, call) {
	  if (!self) {
	    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
	  }

	  return call && (typeof call === "object" || typeof call === "function") ? call : self;
	};

	var slicedToArray = function () {
	  function sliceIterator(arr, i) {
	    var _arr = [];
	    var _n = true;
	    var _d = false;
	    var _e = undefined;

	    try {
	      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
	        _arr.push(_s.value);

	        if (i && _arr.length === i) break;
	      }
	    } catch (err) {
	      _d = true;
	      _e = err;
	    } finally {
	      try {
	        if (!_n && _i["return"]) _i["return"]();
	      } finally {
	        if (_d) throw _e;
	      }
	    }

	    return _arr;
	  }

	  return function (arr, i) {
	    if (Array.isArray(arr)) {
	      return arr;
	    } else if (Symbol.iterator in Object(arr)) {
	      return sliceIterator(arr, i);
	    } else {
	      throw new TypeError("Invalid attempt to destructure non-iterable instance");
	    }
	  };
	}();

	/**
	 * Detect Element Resize.
	 * https://github.com/sdecima/javascript-detect-element-resize
	 * Sebastian Decima
	 *
	 * Forked from version 0.5.3; includes the following modifications:
	 * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
	 * 2) Defer initialization code via a top-level function wrapper (to support SSR).
	 * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
	 * 4) Add nonce for style element.
	 **/

	// Check `document` and `window` in case of server-side rendering
	var windowObject = void 0;
	if (typeof window !== 'undefined') {
	  windowObject = window;

	  // eslint-disable-next-line no-restricted-globals
	} else if (typeof self !== 'undefined') {
	  // eslint-disable-next-line no-restricted-globals
	  windowObject = self;
	} else {
	  windowObject = global;
	}

	var cancelFrame = null;
	var requestFrame = null;

	var TIMEOUT_DURATION = 20;

	var clearTimeoutFn = windowObject.clearTimeout;
	var setTimeoutFn = windowObject.setTimeout;

	var cancelAnimationFrameFn = windowObject.cancelAnimationFrame || windowObject.mozCancelAnimationFrame || windowObject.webkitCancelAnimationFrame;

	var requestAnimationFrameFn = windowObject.requestAnimationFrame || windowObject.mozRequestAnimationFrame || windowObject.webkitRequestAnimationFrame;

	if (cancelAnimationFrameFn == null || requestAnimationFrameFn == null) {
	  // For environments that don't support animation frame,
	  // fallback to a setTimeout based approach.
	  cancelFrame = clearTimeoutFn;
	  requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
	    return setTimeoutFn(callback, TIMEOUT_DURATION);
	  };
	} else {
	  // Counter intuitively, environments that support animation frames can be trickier.
	  // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
	  // In this case, we should fallback to a setTimeout() implementation.
	  cancelFrame = function cancelFrame(_ref) {
	    var _ref2 = slicedToArray(_ref, 2),
	        animationFrameID = _ref2[0],
	        timeoutID = _ref2[1];

	    cancelAnimationFrameFn(animationFrameID);
	    clearTimeoutFn(timeoutID);
	  };
	  requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
	    var animationFrameID = requestAnimationFrameFn(function animationFrameCallback() {
	      clearTimeoutFn(timeoutID);
	      callback();
	    });

	    var timeoutID = setTimeoutFn(function timeoutCallback() {
	      cancelAnimationFrameFn(animationFrameID);
	      callback();
	    }, TIMEOUT_DURATION);

	    return [animationFrameID, timeoutID];
	  };
	}

	function createDetectElementResize(nonce) {
	  var animationKeyframes = void 0;
	  var animationName = void 0;
	  var animationStartEvent = void 0;
	  var animationStyle = void 0;
	  var checkTriggers = void 0;
	  var resetTriggers = void 0;
	  var scrollListener = void 0;

	  var attachEvent = typeof document !== 'undefined' && document.attachEvent;
	  if (!attachEvent) {
	    resetTriggers = function resetTriggers(element) {
	      var triggers = element.__resizeTriggers__,
	          expand = triggers.firstElementChild,
	          contract = triggers.lastElementChild,
	          expandChild = expand.firstElementChild;
	      contract.scrollLeft = contract.scrollWidth;
	      contract.scrollTop = contract.scrollHeight;
	      expandChild.style.width = expand.offsetWidth + 1 + 'px';
	      expandChild.style.height = expand.offsetHeight + 1 + 'px';
	      expand.scrollLeft = expand.scrollWidth;
	      expand.scrollTop = expand.scrollHeight;
	    };

	    checkTriggers = function checkTriggers(element) {
	      return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
	    };

	    scrollListener = function scrollListener(e) {
	      // Don't measure (which forces) reflow for scrolls that happen inside of children!
	      if (e.target.className && typeof e.target.className.indexOf === 'function' && e.target.className.indexOf('contract-trigger') < 0 && e.target.className.indexOf('expand-trigger') < 0) {
	        return;
	      }

	      var element = this;
	      resetTriggers(this);
	      if (this.__resizeRAF__) {
	        cancelFrame(this.__resizeRAF__);
	      }
	      this.__resizeRAF__ = requestFrame(function animationFrame() {
	        if (checkTriggers(element)) {
	          element.__resizeLast__.width = element.offsetWidth;
	          element.__resizeLast__.height = element.offsetHeight;
	          element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
	            fn.call(element, e);
	          });
	        }
	      });
	    };

	    /* Detect CSS Animations support to detect element display/re-attach */
	    var animation = false;
	    var keyframeprefix = '';
	    animationStartEvent = 'animationstart';
	    var domPrefixes = 'Webkit Moz O ms'.split(' ');
	    var startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
	    var pfx = '';
	    {
	      var elm = document.createElement('fakeelement');
	      if (elm.style.animationName !== undefined) {
	        animation = true;
	      }

	      if (animation === false) {
	        for (var i = 0; i < domPrefixes.length; i++) {
	          if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
	            pfx = domPrefixes[i];
	            keyframeprefix = '-' + pfx.toLowerCase() + '-';
	            animationStartEvent = startEvents[i];
	            animation = true;
	            break;
	          }
	        }
	      }
	    }

	    animationName = 'resizeanim';
	    animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
	    animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
	  }

	  var createStyles = function createStyles(doc) {
	    if (!doc.getElementById('detectElementResize')) {
	      //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
	      var css = (animationKeyframes ? animationKeyframes : '') + '.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
	          head = doc.head || doc.getElementsByTagName('head')[0],
	          style = doc.createElement('style');

	      style.id = 'detectElementResize';
	      style.type = 'text/css';

	      if (nonce != null) {
	        style.setAttribute('nonce', nonce);
	      }

	      if (style.styleSheet) {
	        style.styleSheet.cssText = css;
	      } else {
	        style.appendChild(doc.createTextNode(css));
	      }

	      head.appendChild(style);
	    }
	  };

	  var addResizeListener = function addResizeListener(element, fn) {
	    if (attachEvent) {
	      element.attachEvent('onresize', fn);
	    } else {
	      if (!element.__resizeTriggers__) {
	        var doc = element.ownerDocument;
	        var elementStyle = windowObject.getComputedStyle(element);
	        if (elementStyle && elementStyle.position === 'static') {
	          element.style.position = 'relative';
	        }
	        createStyles(doc);
	        element.__resizeLast__ = {};
	        element.__resizeListeners__ = [];
	        (element.__resizeTriggers__ = doc.createElement('div')).className = 'resize-triggers';
	        var expandTrigger = doc.createElement('div');
	        expandTrigger.className = 'expand-trigger';
	        expandTrigger.appendChild(doc.createElement('div'));
	        var contractTrigger = doc.createElement('div');
	        contractTrigger.className = 'contract-trigger';
	        element.__resizeTriggers__.appendChild(expandTrigger);
	        element.__resizeTriggers__.appendChild(contractTrigger);
	        element.appendChild(element.__resizeTriggers__);
	        resetTriggers(element);
	        element.addEventListener('scroll', scrollListener, true);

	        /* Listen for a css animation to detect element display/re-attach */
	        if (animationStartEvent) {
	          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
	            if (e.animationName === animationName) {
	              resetTriggers(element);
	            }
	          };
	          element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
	        }
	      }
	      element.__resizeListeners__.push(fn);
	    }
	  };

	  var removeResizeListener = function removeResizeListener(element, fn) {
	    if (attachEvent) {
	      element.detachEvent('onresize', fn);
	    } else {
	      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
	      if (!element.__resizeListeners__.length) {
	        element.removeEventListener('scroll', scrollListener, true);
	        if (element.__resizeTriggers__.__animationListener__) {
	          element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
	          element.__resizeTriggers__.__animationListener__ = null;
	        }
	        try {
	          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
	        } catch (e) {
	          // Preact compat; see developit/preact-compat/issues/228
	        }
	      }
	    }
	  };

	  return {
	    addResizeListener: addResizeListener,
	    removeResizeListener: removeResizeListener
	  };
	}

	var AutoSizer = function (_React$PureComponent) {
	  inherits(AutoSizer, _React$PureComponent);

	  function AutoSizer() {
	    var _ref;

	    var _temp, _this, _ret;

	    classCallCheck(this, AutoSizer);

	    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
	      args[_key] = arguments[_key];
	    }

	    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = AutoSizer.__proto__ || Object.getPrototypeOf(AutoSizer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
	      height: _this.props.defaultHeight || 0,
	      width: _this.props.defaultWidth || 0
	    }, _this._onResize = function () {
	      var _this$props = _this.props,
	          disableHeight = _this$props.disableHeight,
	          disableWidth = _this$props.disableWidth,
	          onResize = _this$props.onResize;


	      if (_this._parentNode) {
	        // Guard against AutoSizer component being removed from the DOM immediately after being added.
	        // This can result in invalid style values which can result in NaN values if we don't handle them.
	        // See issue #150 for more context.

	        var _height = _this._parentNode.offsetHeight || 0;
	        var _width = _this._parentNode.offsetWidth || 0;

	        var _style = window.getComputedStyle(_this._parentNode) || {};
	        var paddingLeft = parseInt(_style.paddingLeft, 10) || 0;
	        var paddingRight = parseInt(_style.paddingRight, 10) || 0;
	        var paddingTop = parseInt(_style.paddingTop, 10) || 0;
	        var paddingBottom = parseInt(_style.paddingBottom, 10) || 0;

	        var newHeight = _height - paddingTop - paddingBottom;
	        var newWidth = _width - paddingLeft - paddingRight;

	        if (!disableHeight && _this.state.height !== newHeight || !disableWidth && _this.state.width !== newWidth) {
	          _this.setState({
	            height: _height - paddingTop - paddingBottom,
	            width: _width - paddingLeft - paddingRight
	          });

	          onResize({ height: _height, width: _width });
	        }
	      }
	    }, _this._setRef = function (autoSizer) {
	      _this._autoSizer = autoSizer;
	    }, _temp), possibleConstructorReturn(_this, _ret);
	  }

	  createClass(AutoSizer, [{
	    key: 'componentDidMount',
	    value: function componentDidMount() {
	      var nonce = this.props.nonce;

	      if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
	        // Delay access of parentNode until mount.
	        // This handles edge-cases where the component has already been unmounted before its ref has been set,
	        // As well as libraries like react-lite which have a slightly different lifecycle.
	        this._parentNode = this._autoSizer.parentNode;

	        // Defer requiring resize handler in order to support server-side rendering.
	        // See issue #41
	        this._detectElementResize = createDetectElementResize(nonce);
	        this._detectElementResize.addResizeListener(this._parentNode, this._onResize);

	        this._onResize();
	      }
	    }
	  }, {
	    key: 'componentWillUnmount',
	    value: function componentWillUnmount() {
	      if (this._detectElementResize && this._parentNode) {
	        this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
	      }
	    }
	  }, {
	    key: 'render',
	    value: function render() {
	      var _props = this.props,
	          children = _props.children,
	          className = _props.className,
	          disableHeight = _props.disableHeight,
	          disableWidth = _props.disableWidth,
	          style = _props.style;
	      var _state = this.state,
	          height = _state.height,
	          width = _state.width;

	      // Outer div should not force width/height since that may prevent containers from shrinking.
	      // Inner component should overflow and use calculated width/height.
	      // See issue #68 for more information.

	      var outerStyle = { overflow: 'visible' };
	      var childParams = {};

	      // Avoid rendering children before the initial measurements have been collected.
	      // At best this would just be wasting cycles.
	      var bailoutOnChildren = false;

	      if (!disableHeight) {
	        if (height === 0) {
	          bailoutOnChildren = true;
	        }
	        outerStyle.height = 0;
	        childParams.height = height;
	      }

	      if (!disableWidth) {
	        if (width === 0) {
	          bailoutOnChildren = true;
	        }
	        outerStyle.width = 0;
	        childParams.width = width;
	      }

	      return react.exports.createElement(
	        'div',
	        {
	          className: className,
	          ref: this._setRef,
	          style: _extends({}, outerStyle, style)
	        },
	        !bailoutOnChildren && children(childParams)
	      );
	    }
	  }]);
	  return AutoSizer;
	}(react.exports.PureComponent);

	AutoSizer.defaultProps = {
	  onResize: function onResize() {},
	  disableHeight: false,
	  disableWidth: false,
	  style: {}
	};

	/**
	 * Hook that confirms selection when
	 * user interact outside of passed element ref.
	 */

	function useConfirmUnfocus(ref, selections) {
	  const [_isConfirmed, _setIsConfirmed] = react.exports.useState(false); // Wrap state in ref to use inside eventListener callback

	  const isConfirmedRef = react.exports.useRef(_isConfirmed);

	  const setIsConfirmed = c => {
	    isConfirmedRef.current = c;

	    _setIsConfirmed(c);
	  };

	  react.exports.useEffect(() => {
	    const handleEvent = event => {
	      const interactInside = ref.current && ref.current.contains(event.target);
	      const isConfirmed = isConfirmedRef.current;

	      if (!interactInside && !isConfirmed) {
	        selections && selections.confirm.call(selections);
	        setIsConfirmed(true);
	      } else if (interactInside) {
	        setIsConfirmed(false);
	      }
	    };

	    document.addEventListener('mousedown', handleEvent);
	    document.addEventListener('keydown', handleEvent);
	    return () => {
	      document.removeEventListener('mousedown', handleEvent);
	      document.removeEventListener('keydown', handleEvent);
	    };
	  }, [ref, selections]);
	}

	const useStyles$4 = makeStyles$1(() => ({
	  listBoxHeader: {
	    alignSelf: 'center',
	    display: 'inline-flex'
	  }
	}));
	function ListBoxInline(_ref) {
	  let {
	    app,
	    fieldIdentifier,
	    stateName = '$',
	    options = {},
	    fieldDef
	  } = _ref;
	  const {
	    title,
	    direction,
	    listLayout,
	    search = true,
	    focusSearch = false,
	    toolbar = true,
	    rangeSelect = true,
	    checkboxes = false,
	    properties = {},
	    sessionModel = undefined,
	    selectionsApi = undefined,
	    update = undefined,
	    fetchStart = undefined,
	    dense = false,
	    selectDisabled = () => false,
	    showGray = true,
	    sortByState = 1,
	    scrollState = undefined,
	    setCount = undefined
	  } = options;
	  let {
	    frequencyMode,
	    histogram = false
	  } = options;

	  if (fieldDef && fieldDef.failedToFetchFieldDef) {
	    histogram = false;
	    frequencyMode = 'N';
	  }

	  switch (true) {
	    case ['none', 'N', 'NX_FREQUENCY_NONE'].includes(frequencyMode):
	      frequencyMode = 'N';
	      break;

	    case ['value', 'V', 'NX_FREQUENCY_VALUE', 'default'].includes(frequencyMode):
	      frequencyMode = 'V';
	      break;

	    case ['percent', 'P', 'NX_FREQUENCY_PERCENT'].includes(frequencyMode):
	      frequencyMode = 'P';
	      break;

	    case ['relative', 'R', 'NX_FREQUENCY_RELATIVE'].includes(frequencyMode):
	      frequencyMode = 'R';
	      break;

	    default:
	      frequencyMode = 'N';
	      break;
	  }

	  const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode; // Hook that will trigger update when used in useEffects.
	  // Modified from: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780


	  const useRefWithCallback = () => {
	    const [ref, setInternalRef] = react.exports.useState({});
	    const setRef = react.exports.useCallback(node => {
	      setInternalRef({
	        current: node
	      });
	    }, [setInternalRef]);
	    return [ref, setRef];
	  };

	  const listdef = _objectSpread2({
	    qInfo: {
	      qType: 'njsListbox'
	    },
	    qListObjectDef: {
	      qStateName: stateName,
	      qShowAlternatives: true,
	      qFrequencyMode: getListdefFrequencyMode(),
	      qInitialDataFetch: [{
	        qTop: 0,
	        qLeft: 0,
	        qWidth: 0,
	        qHeight: 0
	      }],
	      qDef: {
	        qSortCriterias: [{
	          qSortByState: sortByState,
	          qSortByAscii: 1,
	          qSortByNumeric: 1,
	          qSortByLoadOrder: 1
	        }]
	      }
	    },
	    title
	  }, properties); // Something something lib dimension


	  let fieldName;

	  if (fieldIdentifier.qLibraryId) {
	    listdef.qListObjectDef.qLibraryId = fieldIdentifier.qLibraryId;
	    fieldName = fieldIdentifier.qLibraryId;
	  } else {
	    listdef.qListObjectDef.qDef.qFieldDefs = [fieldIdentifier];
	    fieldName = fieldIdentifier;
	  }

	  if (frequencyMode !== 'N' || histogram) {
	    const field = fieldIdentifier.qLibraryId ? fieldDef : fieldName;
	    listdef.frequencyMax = {
	      qValueExpression: "Max(AGGR(Count([".concat(field, "]), [").concat(field, "]))")
	    };
	  }

	  let [model] = useSessionModel(listdef, sessionModel ? null : app, fieldName, stateName);

	  if (sessionModel) {
	    model = sessionModel;
	  }

	  let selections = useObjectSelections(selectionsApi ? {} : app, model)[0];

	  if (selectionsApi) {
	    selections = selectionsApi;
	  }

	  const theme = useTheme$2();
	  const classes = useStyles$4();
	  const lock = react.exports.useCallback(() => {
	    model.lock('/qListObjectDef');
	  }, [model]);
	  const unlock = react.exports.useCallback(() => {
	    model.unlock('/qListObjectDef');
	  }, [model]);
	  const {
	    translator,
	    keyboardNavigation
	  } = react.exports.useContext(InstanceContext);
	  const moreAlignTo = react.exports.useRef();
	  const [searchContainer, searchContainerRef] = useRefWithCallback();
	  const [layout] = useLayout$1(model);
	  const [showToolbar, setShowToolbar] = react.exports.useState(false);
	  const [showSearch, setShowSearch] = react.exports.useState(false);
	  const [keyboardActive, setKeyboardActive] = react.exports.useState(false);
	  const handleKeyDown = getListboxInlineKeyboardNavigation({
	    setKeyboardActive
	  }); // Expose the keyboard flags in the same way as the keyboard hook does.

	  const keyboard = {
	    enabled: keyboardNavigation,
	    // this will be static until we can access the useKeyboard hook
	    active: keyboardActive
	  };
	  react.exports.useEffect(() => {
	    const show = () => setShowToolbar(true);

	    const hide = () => setShowToolbar(false);

	    if (selections) {
	      if (!selections.isModal(model)) {
	        selections.on('deactivated', hide);
	        selections.on('activated', show);
	      }
	    }

	    return () => {
	      if (selections) {
	        selections.removeListener('deactivated', show);
	        selections.removeListener('activated', hide);
	      }
	    };
	  }, [selections]);
	  react.exports.useEffect(() => {
	    if (selections) {
	      setShowToolbar(selections.isActive());
	    }
	  }, [selections]);
	  const listBoxRef = react.exports.useRef(null);
	  useConfirmUnfocus(listBoxRef, selections);
	  react.exports.useEffect(() => {
	    if (!searchContainer || !searchContainer.current) {
	      return;
	    } // Focus search field on toggle-show or when focusSearch is true.


	    if (search && focusSearch || search === 'toggle' && showSearch) {
	      const input = searchContainer.current.querySelector('input');
	      input && input.focus();
	    }
	  }, [searchContainer && searchContainer.current, showSearch, search, focusSearch]);

	  if (!model || !layout || !translator) {
	    return null;
	  }

	  const isLocked = layout.qListObject.qDimensionInfo.qLocked === true;
	  const listboxSelectionToolbarItems = toolbar ? createListboxSelectionToolbar({
	    layout,
	    model,
	    translator
	  }) : [];
	  const counts = layout.qListObject.qDimensionInfo.qStateCounts;
	  const hasSelections = counts.qSelected + counts.qSelectedExcluded + counts.qLocked + counts.qLockedExcluded > 0;
	  const searchVisible = (search === true || search === 'toggle' && showSearch) && !selectDisabled();
	  const minHeight = 49 + (searchVisible ? 40 : 0) + 49;

	  const onShowSearch = () => {
	    const newValue = !showSearch;
	    setShowSearch(newValue);
	  };

	  const getSearchOrUnlock = () => search === 'toggle' && !hasSelections ? /*#__PURE__*/React.createElement(IconButton$1, {
	    onClick: onShowSearch,
	    tabIndex: -1,
	    title: translator.get('Listbox.Search')
	  }, /*#__PURE__*/React.createElement(SearchIcon, null)) : /*#__PURE__*/React.createElement(IconButton$1, {
	    onClick: lock,
	    tabIndex: -1,
	    disabled: !hasSelections
	  }, /*#__PURE__*/React.createElement(Unlock, null));

	  return /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    tabIndex: keyboard.enabled && !keyboard.active ? 0 : -1,
	    direction: "column",
	    spacing: 0,
	    style: {
	      height: '100%',
	      minHeight: "".concat(minHeight, "px")
	    },
	    onKeyDown: handleKeyDown,
	    ref: listBoxRef
	  }, toolbar && /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    container: true,
	    style: {
	      padding: theme.spacing(1)
	    }
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, isLocked ? /*#__PURE__*/React.createElement(IconButton$1, {
	    tabIndex: -1,
	    onClick: unlock,
	    disabled: !isLocked
	  }, /*#__PURE__*/React.createElement(Lock, {
	    title: translator.get('Listbox.Unlock')
	  })) : getSearchOrUnlock()), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    className: classes.listBoxHeader
	  }, /*#__PURE__*/React.createElement(Typography$1, {
	    variant: "h6",
	    noWrap: true
	  }, layout.title || layout.qListObject.qDimensionInfo.qFallbackTitle)), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    xs: true
	  }), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(ActionsToolbar, {
	    more: {
	      enabled: !isLocked,
	      actions: listboxSelectionToolbarItems,
	      alignTo: moreAlignTo,
	      popoverProps: {
	        elevation: 0
	      },
	      popoverPaperStyle: {
	        boxShadow: '0 12px 8px -8px rgba(0, 0, 0, 0.2)',
	        minWidth: '250px'
	      }
	    },
	    selections: {
	      show: showToolbar,
	      api: selections,
	      onConfirm: () => {},
	      onCancel: () => {}
	    }
	  }))), searchVisible && /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    ref: searchContainerRef
	  }, /*#__PURE__*/React.createElement(ListBoxSearch, {
	    model: model,
	    dense: dense,
	    keyboard: keyboard
	  })), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    xs: true
	  }, /*#__PURE__*/React.createElement("div", {
	    ref: moreAlignTo
	  }), /*#__PURE__*/React.createElement(AutoSizer, null, _ref2 => {
	    let {
	      height,
	      width
	    } = _ref2;
	    return /*#__PURE__*/React.createElement(ListBox, {
	      model: model,
	      selections: selections,
	      direction: direction,
	      listLayout: listLayout,
	      frequencyMode: frequencyMode,
	      histogram: histogram,
	      rangeSelect: rangeSelect,
	      checkboxes: checkboxes,
	      height: height,
	      width: width,
	      update: update,
	      fetchStart: fetchStart,
	      dense: dense,
	      selectDisabled: selectDisabled,
	      keyboard: keyboard,
	      showGray: showGray,
	      scrollState: scrollState,
	      sortByState: sortByState,
	      setCount: setCount
	    });
	  })));
	}

	function ListBoxFetchMasterItem(_ref) {
	  let {
	    app,
	    fieldIdentifier,
	    stateName = '$',
	    options = {}
	  } = _ref;
	  const [fieldDef, setFieldDef] = react.exports.useState('');
	  const [isFetchingData, setIsFetchingData] = react.exports.useState(false);
	  react.exports.useEffect(() => {
	    async function fetchData() {
	      setIsFetchingData(true);

	      try {
	        const dim = await app.getDimension(fieldIdentifier.qLibraryId);
	        const dimLayout = await dim.getLayout();
	        setFieldDef(dimLayout.qDim.qFieldDefs ? dimLayout.qDim.qFieldDefs[0] : '');
	        setIsFetchingData(false);
	      } catch (e) {
	        setIsFetchingData(false);
	        setFieldDef({
	          failedToFetchFieldDef: true
	        });
	        throw new Error("Disabling frequency count and histogram: ".concat(e && e.message));
	      }
	    }

	    fetchData();
	  }, []);

	  if (isFetchingData) {
	    return null;
	  }

	  return /*#__PURE__*/React.createElement(ListBoxInline, {
	    app: app,
	    fieldIdentifier: fieldIdentifier,
	    stateName: stateName,
	    options: options,
	    fieldDef: fieldDef
	  });
	}
	function ListBoxPortal(_ref2) {
	  let {
	    app,
	    fieldIdentifier,
	    stateName,
	    element,
	    options
	  } = _ref2;
	  const isFrequencyMaxNeeded = options.histogram || options.frequencyMode !== 'N';
	  const TheComponent = fieldIdentifier.qLibraryId && isFrequencyMaxNeeded ? ListBoxFetchMasterItem : ListBoxInline;
	  return ReactDOM.createPortal( /*#__PURE__*/React.createElement(TheComponent, {
	    app: app,
	    fieldIdentifier: fieldIdentifier,
	    stateName: stateName,
	    element: element,
	    options: options
	  }), element);
	}

	const idGen = [[10, 31], [0, 31], [0, 31], [0, 31], [0, 31], [0, 31]];

	function toChar(_ref) {
	  let [min, max] = _ref;
	  return (min + (Math.random() * (max - min) | 0)).toString(32);
	}

	function uid() {
	  return idGen.map(toChar).join('');
	}

	function addIndex(array, index) {
	  for (let i = 0; i < array.length; ++i) {
	    if (array[i] >= 0 && array[i] >= index) {
	      ++array[i];
	    }
	  }

	  array.push(index);
	}

	function removeIndex(array, index) {
	  let removeIdx = 0;

	  for (let i = 0; i < array.length; ++i) {
	    if (array[i] > index) {
	      --array[i];
	    } else if (array[i] === index) {
	      removeIdx = i;
	    }
	  }

	  array.splice(removeIdx, 1);
	  return removeIdx;
	}

	const nxDimension = f => ({
	  qDef: {
	    qFieldDefs: [f]
	  }
	});

	const nxMeasure = f => ({
	  qDef: {
	    qDef: f
	  }
	});

	function hcHandler(_ref) {
	  let {
	    dc: hc,
	    def,
	    properties
	  } = _ref;
	  hc.qDimensions = hc.qDimensions || [];
	  hc.qMeasures = hc.qMeasures || [];
	  hc.qInterColumnSortOrder = hc.qInterColumnSortOrder || [];
	  hc.qInitialDataFetch = hc.qInitialDataFetch || [];
	  hc.qColumnOrder = hc.qColumnOrder || [];
	  hc.qExpansionState = hc.qExpansionState || [];
	  const objectProperties = properties;
	  const handler = {
	    dimensions() {
	      return hc.qDimensions;
	    },

	    measures() {
	      return hc.qMeasures;
	    },

	    addDimension(d) {
	      const dimension = typeof d === 'string' ? nxDimension(d) : _objectSpread2(_objectSpread2({}, d), {}, {
	        qDef: d.qDef || {}
	      });
	      dimension.qDef.cId = dimension.qDef.cId || uid(); // ====== add default objects and arrays for NxDimension =====
	      // TODO - apply autosort properties based on tags

	      dimension.qDef.qSortCriterias = dimension.qDef.qSortCriterias || [{
	        qSortByLoadOrder: 1,
	        qSortByNumeric: 1,
	        qSortByAscii: 1
	      }];
	      dimension.qOtherTotalSpec = dimension.qOtherTotalSpec || {};
	      dimension.qAttributeExpressions = dimension.qAttributeExpressions || [];
	      dimension.qAttributeDimensions = dimension.qAttributeDimensions || []; // ========= end defaults =============

	      if (hc.qDimensions.length < handler.maxDimensions()) {
	        hc.qDimensions.push(dimension);
	        addIndex(hc.qInterColumnSortOrder, hc.qDimensions.length - 1);
	        def.dimensions.added(dimension, objectProperties);
	      } else {
	        hc.qLayoutExclude = hc.qLayoutExclude || {};
	        hc.qLayoutExclude.qHyperCubeDef = hc.qLayoutExclude.qHyperCubeDef || {};
	        hc.qLayoutExclude.qHyperCubeDef.qDimensions = hc.qLayoutExclude.qHyperCubeDef.qDimensions || [];
	        hc.qLayoutExclude.qHyperCubeDef.qMeasures = hc.qLayoutExclude.qHyperCubeDef.qMeasures || [];
	        hc.qLayoutExclude.qHyperCubeDef.qDimensions.push(dimension);
	      }
	    },

	    removeDimension(idx) {
	      const dimension = hc.qDimensions.splice(idx, 1)[0];
	      removeIndex(hc.qInterColumnSortOrder, idx);
	      def.dimensions.removed(dimension, objectProperties, idx);
	    },

	    addMeasure(m) {
	      const measure = typeof m === 'string' ? nxMeasure(m) : _objectSpread2(_objectSpread2({}, m), {}, {
	        qDef: m.qDef || {}
	      });
	      measure.qDef.cId = measure.qDef.cId || uid(); // ====== add default objects and arrays for NxMeasure =====

	      measure.qSortBy = measure.qSortBy || {
	        qSortByLoadOrder: 1,
	        qSortByNumeric: -1
	      };
	      measure.qAttributeDimensions = measure.qAttributeDimensions || [];
	      measure.qAttributeExpressions = measure.qAttributeExpressions || [];

	      if (hc.qMeasures.length < handler.maxMeasures()) {
	        hc.qMeasures.push(measure);
	        addIndex(hc.qInterColumnSortOrder, hc.qDimensions.length + hc.qMeasures.length - 1);
	        def.measures.added(measure, objectProperties);
	      } else {
	        hc.qLayoutExclude = hc.qLayoutExclude || {};
	        hc.qLayoutExclude.qHyperCubeDef = hc.qLayoutExclude.qHyperCubeDef || {};
	        hc.qLayoutExclude.qHyperCubeDef.qDimensions = hc.qLayoutExclude.qHyperCubeDef.qDimensions || [];
	        hc.qLayoutExclude.qHyperCubeDef.qMeasures = hc.qLayoutExclude.qHyperCubeDef.qMeasures || [];
	        hc.qLayoutExclude.qHyperCubeDef.qMeasures.push(measure);
	      }
	    },

	    removeMeasure(idx) {
	      const measure = hc.qMeasures.splice(idx, 1)[0];
	      removeIndex(hc.qInterColumnSortOrder, hc.qDimensions.length + idx);
	      def.measures.removed(measure, objectProperties, idx);
	    },

	    maxDimensions() {
	      return def.dimensions.max(hc.qMeasures.length);
	    },

	    maxMeasures() {
	      return def.measures.max(hc.qDimensions.length);
	    },

	    canAddDimension() {
	      return hc.qDimensions.length < handler.maxDimensions();
	    },

	    canAddMeasure() {
	      return hc.qMeasures.length < handler.maxMeasures();
	    }

	  };
	  return handler;
	}

	/**
	 * @interface LibraryField
	 * @property {string} qLibraryId
	 * @property {'dimension'|'measure'} type
	 */

	function fieldType(f) {
	  if ( // a string starting with '=' is just a convention we use
	  typeof f === 'string' && f[0] === '=' || // based on NxMeasure and NxInlineMeasureDef
	  typeof f === 'object' && f.qDef && f.qDef.qDef || // use 'type' instead of 'qType' since this is not a real property
	  typeof f === 'object' && f.qLibraryId && f.type === 'measure') {
	    return 'measure';
	  }

	  return 'dimension';
	}
	function populateData(_ref) {
	  let {
	    sn,
	    properties,
	    fields
	  } = _ref;

	  if (!fields.length) {
	    return;
	  }

	  const target = sn.qae.data.targets[0];

	  if (!target) {
	    {
	      console.warn('Attempting to add fields to an object without a specified data target'); // eslint-disable-line no-console
	    }

	    return;
	  }

	  const {
	    propertyPath
	  } = target;
	  const parts = propertyPath.split('/');
	  let p = properties;

	  for (let i = 0; i < parts.length; i++) {
	    const s = parts[i];
	    p = s ? p[s] : p;
	  }

	  const hc = hcHandler({
	    dc: p,
	    def: target,
	    properties
	  });
	  fields.forEach(f => {
	    const type = fieldType(f);

	    if (type === 'measure') {
	      hc.addMeasure(f);
	    } else {
	      hc.addDimension(f);
	    }
	  });
	}

	/**
	 * Used for exporting and importing properties between backend models. An object that exports to
	 * ExportFormat should put dimensions and measures inside one data group. If an object has two hypercubes,
	 * each of the cubes should export dimensions and measures in two separate data groups.
	 * An object that imports from this structure is responsible for putting the existing properties where they should be
	 * in the new model.
	 * @interface ExportFormat
	 * @since 1.1.0
	 * @property {(ExportDataDef[])=} data
	 * @property {object=} properties
	 */

	/**
	 * @since 1.1.0
	 * @interface ExportDataDef
	 * @property {EngineAPI.INxDimension[]} dimensions
	 * @property {EngineAPI.INxMeasure[]} measures
	 * @property {EngineAPI.INxDimension[]} excludedDimensions
	 * @property {EngineAPI.INxMeasure[]} excludedMeasures
	 * @property {number[]} interColumnSortOrder
	 */

	/**
	 * @since 1.1.0
	 * @ignore
	 * @param {number} nDataGroups
	 * @return {ExportFormat}
	 */
	function createExportFormat() {
	  let nDataGroups = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
	  const exportFormat = {
	    data: [],
	    properties: {}
	  };

	  for (let i = 0; i < nDataGroups; ++i) {
	    exportFormat.data.push({
	      dimensions: [],
	      measures: [],
	      excludedDimensions: [],
	      excludedMeasures: [],
	      interColumnSortOrder: []
	    });
	  }

	  return exportFormat;
	}

	/**
	 * Gets a value from a data object structure.
	 *
	 * @ignore
	 * @param data The data object.
	 * @param reference Reference to the value.
	 * @param defaultValue Default value to return if no value was found.
	 * @returns {*} The default value if specified, otherwise undefined.
	 */
	const getValue = (data, reference, defaultValue) => {
	  if (data === undefined || data === null || reference === undefined || reference === null) {
	    return defaultValue;
	  }

	  const steps = reference.split('.');
	  let dataContainer = data;

	  for (let i = 0; i < steps.length; ++i) {
	    const step = steps[i];

	    if (step === '') {
	      continue; // eslint-disable-line no-continue
	    }

	    if (dataContainer[step] === undefined || dataContainer[step] === null) {
	      return defaultValue;
	    }

	    dataContainer = dataContainer[step];
	  }

	  return dataContainer;
	};
	/**
	 * Sets a value in a data object using a dot notated reference to point out the path.
	 *
	 * Example:
	 * If data is an empty object, reference is "my.value" and value the is "x", then
	 * the resulting data object will be: { my:	{ value: "x" } }
	 *
	 * @ignore
	 * @param data The data object. Must be an object.
	 * @param reference Reference to the value.
	 * @param value Arbitrary value to set. If the value is set to undefined, the value property will be removed.
	 */


	const setValue = (data, reference, value) => {
	  if (data === undefined || data === null || reference === undefined || reference === null) {
	    return;
	  }

	  const steps = reference.split('.');
	  const propertyName = steps[steps.length - 1];
	  let dataContainer = data;

	  for (let i = 0; i < steps.length - 1; ++i) {
	    const step = steps[i];

	    if (dataContainer[step] === undefined || dataContainer[step] === null) {
	      dataContainer[step] = Number.isNaN(+steps[i + 1]) ? {} : [];
	    }

	    dataContainer = dataContainer[step];
	  }

	  if (typeof value !== 'undefined' && propertyName !== '__proto__' && propertyName !== 'constructor') {
	    dataContainer[propertyName] = value;
	  } else {
	    delete dataContainer[propertyName];
	  }
	};

	const isEmpty = object => Object.keys(object).length === 0 && object.constructor === Object;

	var utils = {
	  getValue,
	  setValue,
	  isEmpty
	};

	/* eslint-disable no-param-reassign */

	/**
	 * Returns true if the second array is a ordered subset of the first.
	 *
	 * @ignore
	 * @param array1
	 * @param array2
	 * @returns {boolean}
	 */
	function isOrderedSubset(outer, subset) {
	  if (!outer || !subset || !outer.length || !subset.length) {
	    return false;
	  }

	  let start = outer.indexOf(subset[0]);

	  if (start !== -1) {
	    for (let i = 0; i < subset.length; i++) {
	      const next = outer.indexOf(subset[i]);

	      if (start > next) {
	        return false;
	      }

	      start = next;
	    }

	    return true;
	  }

	  return false;
	}
	/**
	 * Used for adding an index to an index array. An index array contains indices from 0-N in any order and
	 * is used for keeping track of how items in another arrayed could be presented in a specific order.
	 *
	 * @ignore
	 * @param array
	 * @param index
	 */


	function indexAdded(array, index) {
	  let i;

	  for (i = 0; i < array.length; ++i) {
	    if (array[i] >= 0 && array[i] >= index) {
	      ++array[i];
	    }
	  }

	  array.push(index);
	}
	/**
	 * Used for removing an index from an index array. An index array contains indices from 0-N in any order and
	 * is used for keeping track of how items in another arrayed could be presented in a specific order.
	 *
	 * @ignore
	 * @param array
	 * @param index
	 */


	function indexRemoved(array, index) {
	  let removeIndex = 0;
	  let i;

	  for (i = 0; i < array.length; ++i) {
	    if (array[i] > index) {
	      --array[i];
	    } else if (array[i] === index) {
	      removeIndex = i;
	    }
	  }

	  array.splice(removeIndex, 1);
	  return removeIndex;
	}

	var arrayUtils = {
	  isOrderedSubset,
	  indexAdded,
	  indexRemoved
	};

	/* eslint-disable no-prototype-builtins */
	const MAX_SAFE_INTEGER = 2 ** 53 - 1;
	/**
	 * Restore properties that were temporarily changed during conversion.
	 *
	 * @ignore
	 * @param properties PropertyTree
	 */

	function restoreChangedProperties(properties) {
	  Object.keys(properties.qLayoutExclude.changed).forEach(property => {
	    if (properties.qLayoutExclude.changed[property].to === utils.getValue(properties, property)) {
	      // only revert back to old value if the current value is the same as it was changed to during conversion
	      utils.setValue(properties, property, properties.qLayoutExclude.changed[property].from);
	    }
	  });
	}
	/**
	 * Used to check if a property key is part of the master item information
	 *
	 * @ignore
	 * @param propertyName Name of the key in the properties object
	 * @returns {boolean}
	 */


	function isMasterItemProperty(propertyName) {
	  return ['qMetaDef', 'descriptionExpression', 'labelExpression'].indexOf(propertyName) !== -1;
	}

	function importCommonProperties(newProperties, exportFormat, initialProperties) {
	  // always copy type and visualization
	  const qType = utils.getValue(exportFormat, 'properties.qInfo.qType') === 'masterobject' ? 'masterobject' : utils.getValue(initialProperties, 'qInfo.qType');
	  utils.setValue(newProperties, 'qInfo.qType', qType);
	  newProperties.visualization = initialProperties.visualization;
	}

	function copyPropertyIfExist(propertyName, source, target) {
	  if (source.hasOwnProperty(propertyName)) {
	    target[propertyName] = source[propertyName];
	  }
	}

	function copyPropertyOrSetDefault(propertyName, source, target, defaultValue) {
	  if (source.hasOwnProperty(propertyName)) {
	    target[propertyName] = source[propertyName];
	  } else {
	    target[propertyName] = defaultValue;
	  }
	}

	function getOthersLabel() {
	  return 'Others'; // TODO: translator.get('properties.dimensionLimits.others')
	}

	function createDefaultDimension(dimensionDef, dimensionProperties) {
	  const def = extend$2(true, {}, dimensionProperties, dimensionDef);

	  if (!utils.getValue(def, 'qOtherTotalSpec.qOtherCounted')) {
	    utils.setValue(def, 'qOtherTotalSpec.qOtherCounted', {
	      qv: '10'
	    });
	  }

	  if (!utils.getValue(def, 'qOtherTotalSpec.qOtherLimit')) {
	    utils.setValue(def, 'qOtherTotalSpec.qOtherLimit', {
	      qv: '0'
	    });
	  }

	  if (!def.hasOwnProperty('othersLabel')) {
	    def.othersLabel = getOthersLabel();
	  }

	  return def;
	}

	function createDefaultMeasure(measureDef, measureProperties) {
	  return extend$2(true, {}, measureProperties, measureDef);
	}

	function resolveValue$1(data, input, defaultValue) {
	  if (typeof data === 'function') {
	    return data(input);
	  }

	  return !Number.isNaN(+data) ? data : defaultValue;
	}

	function getHypercubePath(qae) {
	  const path = utils.getValue(qae, 'data.targets.0.propertyPath', '');
	  const steps = path.split('/');

	  if (steps.length && steps[steps.length - 1] === 'qHyperCubeDef') {
	    steps.length -= 1;
	  }

	  return steps.join('.');
	}

	function getDefaultDimension() {
	  return {
	    qDef: {
	      autoSort: true,
	      cId: '',
	      othersLabel: getOthersLabel()
	    },
	    qLibraryId: '',
	    qNullSuppression: false,
	    qOtherLabel: 'Others',
	    qOtherTotalSpec: {
	      qOtherLimitMode: 'OTHER_GE_LIMIT',
	      qOtherMode: 'OTHER_OFF',
	      qOtherSortMode: 'OTHER_SORT_DESCENDING',
	      qSuppressOther: false
	    }
	  };
	}

	function getDefaultMeasure() {
	  return {
	    qDef: {
	      autoSort: true,
	      cId: '',
	      numFormatFromTemplate: true
	    },
	    qLibraryId: '',
	    qTrendLines: []
	  };
	}

	function setInterColumnSortOrder(_ref) {
	  let {
	    exportFormat,
	    newHyperCubeDef
	  } = _ref;
	  const dataGroup = exportFormat.data[0];
	  const nCols = newHyperCubeDef.qDimensions.length + newHyperCubeDef.qMeasures.length;
	  newHyperCubeDef.qInterColumnSortOrder = dataGroup.interColumnSortOrder.concat();
	  let i = newHyperCubeDef.qInterColumnSortOrder.length;

	  if (i !== nCols) {
	    if (newHyperCubeDef.qLayoutExclude) {
	      // Store them if needed
	      newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qInterColumnSortOrder = dataGroup.interColumnSortOrder.concat();
	    }

	    while (i !== nCols) {
	      if (i < nCols) {
	        arrayUtils.indexAdded(newHyperCubeDef.qInterColumnSortOrder, i);
	        ++i;
	      } else {
	        --i;
	        arrayUtils.indexRemoved(newHyperCubeDef.qInterColumnSortOrder, i);
	      }
	    }
	  }
	}

	function createNewProperties(_ref2) {
	  let {
	    exportFormat,
	    initialProperties,
	    hypercubePath
	  } = _ref2;
	  let newProperties = {
	    qLayoutExclude: {
	      disabled: {},
	      quarantine: {}
	    }
	  };
	  Object.keys(exportFormat.properties).forEach(key => {
	    if (key === 'qLayoutExclude') {
	      if (exportFormat.properties[key].quarantine) {
	        newProperties.qLayoutExclude.quarantine = extend$2(true, {}, exportFormat.properties[key].quarantine);
	      }
	    } else if (key === 'qHyperCubeDef' && hypercubePath) {
	      utils.setValue(newProperties, "".concat(hypercubePath, ".qHyperCubeDef"), exportFormat.properties.qHyperCubeDef);
	    } else if (initialProperties.hasOwnProperty(key) || isMasterItemProperty(key)) {
	      // TODO: qExtendsId ??
	      newProperties[key] = exportFormat.properties[key];
	    } else {
	      newProperties.qLayoutExclude.disabled[key] = exportFormat.properties[key];
	    }
	  });
	  newProperties = extend$2(true, {}, initialProperties, newProperties);

	  if (newProperties.components === null) {
	    newProperties.components = [];
	  }

	  return newProperties;
	}

	function getMaxMinDimensionMeasure(_ref3) {
	  let {
	    exportFormat,
	    dataDefinition = {}
	  } = _ref3;
	  const dataGroup = exportFormat.data[0];
	  const dimensionDef = dataDefinition.dimensions || {
	    max: 0
	  };
	  const measureDef = dataDefinition.measures || {
	    max: 0
	  };
	  const maxMeasures = resolveValue$1(measureDef.max, dataGroup.dimensions.length, MAX_SAFE_INTEGER);
	  const minMeasures = resolveValue$1(measureDef.min, dataGroup.dimensions.length, 0);
	  const maxDimensions = resolveValue$1(dimensionDef.max, maxMeasures, MAX_SAFE_INTEGER);
	  const minDimensions = resolveValue$1(dimensionDef.min, minMeasures, 0);
	  return {
	    maxDimensions,
	    minDimensions,
	    maxMeasures,
	    minMeasures
	  };
	}

	function shouldInitLayoutExclude(_ref4) {
	  let {
	    exportFormat,
	    maxDimensions,
	    minDimensions,
	    maxMeasures,
	    minMeasures
	  } = _ref4;
	  const dataGroup = exportFormat.data[0];
	  return dataGroup.dimensions.length > maxDimensions && maxDimensions > 0 || dataGroup.measures.length > maxMeasures && maxMeasures > 0 || dataGroup.excludedDimensions.length > 0 && dataGroup.dimensions.length + dataGroup.excludedDimensions.length > minDimensions || dataGroup.excludedMeasures.length > 0 && dataGroup.measures.length + dataGroup.excludedMeasures.length > minMeasures || !maxMeasures && dataGroup.measures.length > 0 || !maxDimensions && dataGroup.dimensions.length > 0;
	}

	function initLayoutExclude(_ref5) {
	  let {
	    exportFormat,
	    maxDimensions,
	    minDimensions,
	    maxMeasures,
	    minMeasures,
	    newHyperCubeDef
	  } = _ref5;
	  const dataGroup = exportFormat.data[0];

	  if (!newHyperCubeDef.qLayoutExclude) {
	    newHyperCubeDef.qLayoutExclude = {};
	  }

	  if (!newHyperCubeDef.qLayoutExclude.qHyperCubeDef) {
	    newHyperCubeDef.qLayoutExclude.qHyperCubeDef = {};
	  }

	  if (dataGroup.dimensions.length > maxDimensions && maxDimensions > 0 || dataGroup.excludedDimensions && dataGroup.excludedDimensions.length && dataGroup.dimensions.length + dataGroup.excludedDimensions.length > minDimensions) {
	    if (!newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qDimensions) {
	      newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qDimensions = [];
	    }
	  }

	  if (dataGroup.measures.length > maxMeasures && maxMeasures > 0 || dataGroup.excludedMeasures && dataGroup.excludedMeasures.length && dataGroup.measures.length + dataGroup.excludedMeasures.length > minMeasures) {
	    if (!newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qMeasures) {
	      newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qMeasures = [];
	    }
	  }

	  if (!maxMeasures && dataGroup.measures.length) {
	    // if the object don't support measures put them in alternative measures instead
	    if (!newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qMeasures) {
	      newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qMeasures = [];
	    }
	  }

	  if (!maxDimensions && dataGroup.dimensions.length) {
	    // if the object don't support dimensions put them in alternative dimensions instead
	    if (!newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qDimensions) {
	      newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qDimensions = [];
	    }
	  }
	}

	function addDefaultDimensions(_ref6) {
	  let {
	    exportFormat,
	    maxDimensions,
	    minDimensions,
	    newHyperCubeDef,
	    defaultDimension
	  } = _ref6;
	  const dataGroup = exportFormat.data[0];
	  let i;

	  if (maxDimensions > 0) {
	    for (i = 0; i < dataGroup.dimensions.length; ++i) {
	      if (newHyperCubeDef.qDimensions.length < maxDimensions) {
	        newHyperCubeDef.qDimensions.push(createDefaultDimension(dataGroup.dimensions[i], defaultDimension));
	      } else {
	        newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qDimensions.push(createDefaultDimension(dataGroup.dimensions[i], defaultDimension));
	      }
	    }
	  } else if (dataGroup.dimensions.length) {
	    for (i = 0; i < dataGroup.dimensions.length; ++i) {
	      newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qDimensions.push(createDefaultDimension(dataGroup.dimensions[i], defaultDimension));
	    }
	  }

	  if (dataGroup.excludedDimensions.length) {
	    for (i = 0; i < dataGroup.excludedDimensions.length; ++i) {
	      if (newHyperCubeDef.qDimensions.length < minDimensions) {
	        newHyperCubeDef.qDimensions.push(createDefaultDimension(dataGroup.excludedDimensions[i], defaultDimension));
	      } else {
	        newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qDimensions.push(createDefaultDimension(dataGroup.excludedDimensions[i], defaultDimension));
	      }
	    }
	  }
	}

	function addDefaultMeasures(_ref7) {
	  let {
	    exportFormat,
	    maxMeasures,
	    minMeasures,
	    newHyperCubeDef,
	    defaultMeasure
	  } = _ref7;
	  const dataGroup = exportFormat.data[0];
	  let i;

	  if (maxMeasures > 0) {
	    for (i = 0; i < dataGroup.measures.length; ++i) {
	      if (newHyperCubeDef.qMeasures.length < maxMeasures) {
	        newHyperCubeDef.qMeasures.push(createDefaultMeasure(dataGroup.measures[i], defaultMeasure));
	      } else {
	        newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qMeasures.push(createDefaultMeasure(dataGroup.measures[i], defaultMeasure));
	      }
	    }
	  } else if (dataGroup.measures.length) {
	    for (i = 0; i < dataGroup.measures.length; ++i) {
	      newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qMeasures.push(createDefaultMeasure(dataGroup.measures[i], defaultMeasure));
	    }
	  }

	  if (dataGroup.excludedMeasures.length) {
	    for (i = 0; i < dataGroup.excludedMeasures.length; ++i) {
	      if (newHyperCubeDef.qMeasures.length < minMeasures) {
	        newHyperCubeDef.qMeasures.push(createDefaultMeasure(dataGroup.excludedMeasures[i], defaultMeasure));
	      } else {
	        newHyperCubeDef.qLayoutExclude.qHyperCubeDef.qMeasures.push(createDefaultMeasure(dataGroup.excludedMeasures[i], defaultMeasure));
	      }
	    }
	  }
	}

	function updateDimensionsOnAdded(_ref8) {
	  let {
	    newProperties,
	    dataDefinition,
	    hypercubePath
	  } = _ref8;

	  if (dataDefinition.dimensions && typeof dataDefinition.dimensions.added === 'function') {
	    const newHyperCubeDef = utils.getValue(newProperties, hypercubePath || '').qHyperCubeDef;
	    const dimensions = [...newHyperCubeDef.qDimensions];
	    newHyperCubeDef.qDimensions = [];
	    dimensions.forEach(dimension => {
	      newHyperCubeDef.qDimensions.push(dimension);
	      dataDefinition.dimensions.added(dimension, newProperties);
	    });
	  }
	}

	function updateMeasuresOnAdded(_ref9) {
	  let {
	    newProperties,
	    dataDefinition,
	    hypercubePath
	  } = _ref9;

	  if (dataDefinition.measures && typeof dataDefinition.measures.added === 'function') {
	    const newHyperCubeDef = utils.getValue(newProperties, hypercubePath || '').qHyperCubeDef;
	    const measures = [...newHyperCubeDef.qMeasures];
	    newHyperCubeDef.qMeasures = [];
	    measures.forEach(measure => {
	      newHyperCubeDef.qMeasures.push(measure);
	      dataDefinition.measures.added(measure, newProperties);
	    });
	  }
	}

	var helpers = {
	  restoreChangedProperties,
	  isMasterItemProperty,
	  importCommonProperties,
	  copyPropertyIfExist,
	  copyPropertyOrSetDefault,
	  createDefaultDimension,
	  createDefaultMeasure,
	  resolveValue: resolveValue$1,
	  getHypercubePath,
	  getDefaultDimension,
	  getDefaultMeasure,
	  setInterColumnSortOrder,
	  createNewProperties,
	  getMaxMinDimensionMeasure,
	  shouldInitLayoutExclude,
	  initLayoutExclude,
	  addDefaultDimensions,
	  addDefaultMeasures,
	  updateDimensionsOnAdded,
	  updateMeasuresOnAdded
	};

	/* eslint-disable no-prototype-builtins */
	function exportProperties(_ref) {
	  let {
	    propertyTree,
	    hypercubePath
	  } = _ref;
	  const exportFormat = createExportFormat();
	  const properties = propertyTree.qProperty;
	  const hcdParent = utils.getValue(properties, hypercubePath || '');
	  const hcd = hcdParent.qHyperCubeDef;
	  const dataGroup = exportFormat.data[0];

	  if (!hcd.qInterColumnSortOrder) {
	    hcd.qInterColumnSortOrder = [];
	  } // export dimensions


	  dataGroup.dimensions.push(...hcd.qDimensions); // excluded dimensions

	  if (hcd.qLayoutExclude && hcd.qLayoutExclude.qHyperCubeDef && hcd.qLayoutExclude.qHyperCubeDef.qDimensions) {
	    dataGroup.excludedDimensions.push(...hcd.qLayoutExclude.qHyperCubeDef.qDimensions);
	  } // export measures


	  dataGroup.measures.push(...hcd.qMeasures); // excluded measures

	  if (hcd.qLayoutExclude && hcd.qLayoutExclude.qHyperCubeDef && hcd.qLayoutExclude.qHyperCubeDef.qMeasures) {
	    dataGroup.excludedMeasures.push(...hcd.qLayoutExclude.qHyperCubeDef.qMeasures);
	  } // export sort order


	  dataGroup.interColumnSortOrder = hcd.qInterColumnSortOrder.concat(); // if we have a excluded sort order, try apply that instead

	  if (hcd.qLayoutExclude && hcd.qLayoutExclude.qHyperCubeDef && hcd.qLayoutExclude.qHyperCubeDef.qInterColumnSortOrder) {
	    const order = hcd.qLayoutExclude.qHyperCubeDef.qInterColumnSortOrder.concat(); // If the exporting sort order hasn't changed compared to the excluded we can apply the full excluded instead

	    if (arrayUtils.isOrderedSubset(order, dataGroup.interColumnSortOrder)) {
	      dataGroup.interColumnSortOrder = order;
	    }
	  }

	  delete hcd.qLayoutExclude;
	  Object.keys(properties).forEach(prop => {
	    exportFormat.properties[prop] = properties[prop];
	  });

	  if (hypercubePath) {
	    exportFormat.properties.qHyperCubeDef = hcdParent.qHyperCubeDef;
	    delete hcdParent.qHyperCubeDef;
	  }

	  if (!properties.qLayoutExclude) {
	    properties.qLayoutExclude = {};
	  }

	  if (properties.qLayoutExclude.disabled) {
	    Object.keys(properties.qLayoutExclude.disabled).forEach(prop => {
	      if (!exportFormat.properties.hasOwnProperty(prop)) {
	        exportFormat.properties[prop] = properties.qLayoutExclude.disabled[prop];
	      }
	    });
	    delete properties.qLayoutExclude.disabled;
	  }

	  if (properties.qLayoutExclude.changed) {
	    helpers.restoreChangedProperties(properties);
	    delete properties.qLayoutExclude.changed;
	  }

	  if (!properties.qLayoutExclude.quarantine || utils.isEmpty(properties.qLayoutExclude.quarantine)) {
	    delete properties.qLayoutExclude;
	  }

	  return exportFormat;
	}

	/* eslint-disable no-param-reassign */
	function importProperties(_ref) {
	  let {
	    exportFormat,
	    initialProperties = {},
	    dataDefinition = {},
	    defaultPropertyValues = {},
	    hypercubePath
	  } = _ref;
	  const newPropertyTree = {
	    qChildren: []
	  };
	  const newProperties = helpers.createNewProperties({
	    exportFormat,
	    initialProperties,
	    hypercubePath
	  });
	  const initHyperCubeDef = utils.getValue(initialProperties, hypercubePath || '').qHyperCubeDef;
	  const newHyperCubeDef = utils.getValue(newProperties, hypercubePath || '').qHyperCubeDef;
	  const {
	    maxDimensions,
	    minDimensions,
	    maxMeasures,
	    minMeasures
	  } = helpers.getMaxMinDimensionMeasure({
	    exportFormat,
	    dataDefinition
	  });
	  const {
	    defaultDimension = helpers.getDefaultDimension(),
	    defaultMeasure = helpers.getDefaultMeasure()
	  } = defaultPropertyValues; // empty dimensions and measures of new hypercube

	  newHyperCubeDef.qDimensions.length = 0;
	  newHyperCubeDef.qMeasures.length = 0; // create layout exclude structures if needed

	  if (helpers.shouldInitLayoutExclude({
	    exportFormat,
	    maxDimensions,
	    minDimensions,
	    maxMeasures,
	    minMeasures
	  })) {
	    helpers.initLayoutExclude({
	      exportFormat,
	      maxDimensions,
	      minDimensions,
	      maxMeasures,
	      minMeasures,
	      newHyperCubeDef
	    });
	  } // and now fill them in.


	  helpers.addDefaultDimensions({
	    exportFormat,
	    maxDimensions,
	    minDimensions,
	    newHyperCubeDef,
	    defaultDimension
	  });
	  helpers.addDefaultMeasures({
	    exportFormat,
	    maxMeasures,
	    minMeasures,
	    newHyperCubeDef,
	    defaultMeasure
	  });
	  helpers.setInterColumnSortOrder({
	    exportFormat,
	    newHyperCubeDef
	  });
	  helpers.copyPropertyIfExist('qMaxStackedCells', initHyperCubeDef, newHyperCubeDef);
	  helpers.copyPropertyIfExist('qNoOfLeftDims', initHyperCubeDef, newHyperCubeDef);
	  helpers.copyPropertyOrSetDefault('qInitialDataFetch', initHyperCubeDef, newHyperCubeDef, [{
	    qTop: 0,
	    qLeft: 0,
	    qWidth: 0,
	    qHeight: 0
	  }]);
	  helpers.copyPropertyOrSetDefault('qMode', initHyperCubeDef, newHyperCubeDef, 'S');
	  helpers.copyPropertyOrSetDefault('qReductionMode', initHyperCubeDef, newHyperCubeDef, 'N');
	  helpers.copyPropertyOrSetDefault('qSortbyYValue', initHyperCubeDef, newHyperCubeDef);
	  helpers.copyPropertyOrSetDefault('qIndentMode', initHyperCubeDef, newHyperCubeDef);
	  helpers.copyPropertyOrSetDefault('qShowTotalsAbove', initHyperCubeDef, newHyperCubeDef); // always copy type and visualization

	  helpers.importCommonProperties(newProperties, exportFormat, initialProperties);
	  helpers.updateDimensionsOnAdded({
	    newProperties,
	    dataDefinition,
	    hypercubePath
	  });
	  helpers.updateMeasuresOnAdded({
	    newProperties,
	    dataDefinition,
	    hypercubePath
	  });
	  newPropertyTree.qProperty = newProperties;
	  return newPropertyTree;
	}

	/**
	 * @interface hyperCubeConversion
	 * @since 1.1.0
	 * @implements {ConversionType}
	 */

	var hypercube = /** @lends hyperCubeConversion */
	{
	  exportProperties: ar => exportProperties(ar),
	  importProperties: ar => importProperties(ar)
	};

	const getType$1 = async _ref => {
	  let {
	    halo,
	    name,
	    version
	  } = _ref;
	  const {
	    types
	  } = halo;
	  const SN = await types.get({
	    name,
	    version
	  }).supernova();
	  return SN;
	};

	const getPath = qae => utils.getValue(qae, 'data.targets.0.propertyPath');

	const getDefaultExportPropertiesFn = path => {
	  const steps = path.split('/');

	  if (steps.indexOf('qHyperCubeDef') > -1) {
	    return hypercube.exportProperties;
	  }

	  return undefined; // TODO: add listbox and other
	};

	const getExportPropertiesFnc = qae => {
	  if (qae.exportProperties) {
	    return qae.exportProperties;
	  }

	  const path = getPath(qae);
	  return getDefaultExportPropertiesFn(path);
	};

	const getDefaultImportPropertiesFnc = path => {
	  const steps = path.split('/');

	  if (steps.indexOf('qHyperCubeDef') > -1) {
	    return hypercube.importProperties;
	  }

	  return undefined; // TODO: add listbox and other
	};

	const getImportPropertiesFnc = qae => {
	  if (qae.importProperties) {
	    return qae.importProperties;
	  }

	  const path = getPath(qae);
	  return getDefaultImportPropertiesFnc(path);
	};

	const convertTo = async _ref2 => {
	  let {
	    halo,
	    model,
	    cellRef,
	    newType
	  } = _ref2;
	  const propertyTree = await model.getFullPropertyTree();
	  const sourceQae = cellRef.current.getQae();
	  const exportProperties = getExportPropertiesFnc(sourceQae);
	  const targetSnType = await getType$1({
	    halo,
	    name: newType
	  });
	  const targetQae = targetSnType.qae;
	  const importProperties = getImportPropertiesFnc(targetQae);
	  const exportFormat = exportProperties({
	    propertyTree,
	    hypercubePath: helpers.getHypercubePath(sourceQae)
	  });
	  const initial = utils.getValue(targetQae, 'properties.initial', {});

	  const initialProperties = _objectSpread2({
	    qInfo: {
	      qType: newType
	    },
	    visualization: newType
	  }, initial);

	  const newPropertyTree = importProperties({
	    exportFormat,
	    initialProperties,
	    dataDefinition: utils.getValue(targetQae, 'data.targets.0.', {}),
	    hypercubePath: helpers.getHypercubePath(targetQae)
	  });
	  return newPropertyTree;
	};
	/**
	 * @interface ConversionType
	 * @since 1.1.0
	 * @property {importProperties} importProperties
	 * @property {exportProperties} exportProperties
	 */

	/**
	 * @interface
	 * @alias Conversion
	 * @since 1.1.0
	 * @description Provides conversion functionality to extensions.
	 * @example
	 * import { conversion } from '@nebula.js/stardust';
	 *
	 * export default function() {
	 *   return {
	 *     qae: {
	 *       ...
	 *       importProperties: ( exportFormat, initialProperties ) =>  conversion.hyperCube.importProperties(exportFormat, initialProperties),
	 *       exportProperties: ( fullPropertyTree ) => conversion.hyperCube.exportProperties(fullPropertyTree)
	 *     },
	 *     ...
	 *   };
	 * }
	 *
	 */

	const conversion = {
	  /**
	   * @type {hyperCubeConversion}
	   * @since 1.1.0
	   * @description Provides conversion functionality to extensions with hyperCubes.
	   */
	  hypercube
	};

	const warning = props => _objectSpread2(_objectSpread2({}, props), {}, {
	  shapes: [{
	    type: 'path',
	    attrs: {
	      d: 'M8.86225926,1.6 L15.7815749,13.5 C16.2829746,14.3 15.8818548,15 14.9793354,15 L1.04042422,15 C0.0853772072,15 -0.232971797,14.3650794 0.172002787,13.6135407 L7.05722041,1.6 C7.55862009,0.8 8.36085958,0.8 8.86225926,1.6 Z M7.962,2.007 C7.95987183,2.02476599 7.95607967,2.03712023 7.94920396,2.05249845 L1.1033193,14 L14.915544,14 L7.99777452,2.10265906 L7.97779697,2.06138411 L7.96394459,2.01964415 L7.962,2.007 Z M7.5,11 L8.5,11 C8.76666667,11 8.95432099,11.1580247 8.99272977,11.4038409 L9,11.5 L9,12.5 C9,12.7666667 8.84197531,12.954321 8.59615912,12.9927298 L8.5,13 L7.5,13 C7.23333333,13 7.04567901,12.8419753 7.00727023,12.5961591 L7,12.5 L7,11.5 C7,11.2333333 7.15802469,11.045679 7.40384088,11.0072702 L7.5,11 L8.5,11 L7.5,11 Z M7.5,5 L8.5,5 C8.76666667,5 8.95432099,5.15802469 8.99272977,5.40384088 L9,5.5 L9,9.5 C9,9.76666667 8.84197531,9.95432099 8.59615912,9.99272977 L8.5,10 L7.5,10 C7.23333333,10 7.04567901,9.84197531 7.00727023,9.59615912 L7,9.5 L7,5.5 C7,5.23333333 7.15802469,5.04567901 7.40384088,5.00727023 L7.5,5 L8.5,5 L7.5,5 Z'
	    }
	  }]
	});

	var WarningTriangle = (props => SvgIcon(warning(props)));

	/* eslint-disable react/no-array-index-key */

	function DescriptionRow(_ref) {
	  let {
	    d
	  } = _ref;
	  const theme = useTheme$2();
	  let color = 'inherit';
	  let styleColor = theme.palette.success.main;

	  if (d.missing) {
	    styleColor = theme.palette.warning.main;
	  } else if (d.error) {
	    color = 'error';
	    styleColor = theme.palette.error.main;
	  }

	  const style = {
	    color: styleColor
	  };
	  const WrappedIcon = /*#__PURE__*/React.createElement(Typography$1, {
	    style: {
	      lineHeight: '30px',
	      paddingRight: theme.spacing(1)
	    }
	  }, /*#__PURE__*/React.createElement(Icon$1, null, d.missing || d.error ? /*#__PURE__*/React.createElement(WarningTriangle, {
	    style: style
	  }) : /*#__PURE__*/React.createElement(Tick, {
	    style: style
	  })));
	  return /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    container: true,
	    alignItems: "center",
	    wrap: "nowrap"
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, WrappedIcon), /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    item: true,
	    zeroMinWidth: true,
	    wrap: "nowrap"
	  }, /*#__PURE__*/React.createElement(Typography$1, {
	    noWrap: true,
	    component: "p"
	  }, /*#__PURE__*/React.createElement(Typography$1, {
	    component: "span",
	    variant: "subtitle2",
	    color: color
	  }, d.description), /*#__PURE__*/React.createElement(Typography$1, {
	    component: "span"
	  }, " "), /*#__PURE__*/React.createElement(Typography$1, {
	    component: "span",
	    variant: "subtitle2",
	    color: d.error ? 'error' : 'inherit',
	    style: {
	      fontWeight: 400
	    }
	  }, d.label))));
	}

	function Descriptions(_ref2) {
	  let {
	    data
	  } = _ref2;
	  const theme = useTheme$2();
	  return /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    item: true,
	    style: {
	      maxWidth: '300px',
	      overflow: 'hidden'
	    }
	  }, data.map((e, ix) => {
	    const Rows = e.descriptions.map((d, dix) => /*#__PURE__*/React.createElement(DescriptionRow, {
	      d: d,
	      key: dix
	    }));
	    return Rows.length > 0 && /*#__PURE__*/React.createElement(StyledGrid, {
	      container: true,
	      item: true,
	      key: ix,
	      direction: "column",
	      style: {
	        paddingBottom: theme.spacing(2)
	      }
	    }, /*#__PURE__*/React.createElement(Typography$1, {
	      noWrap: true,
	      key: ix,
	      variant: "subtitle1",
	      align: "left",
	      color: "textSecondary"
	    }, e.title), Rows);
	  }));
	}

	function Error$1(_ref3) {
	  let {
	    title = 'Error',
	    message = '',
	    data = []
	  } = _ref3;
	  return /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    direction: "column",
	    alignItems: "center",
	    justifyContent: "center",
	    style: {
	      position: 'relative',
	      height: '100%',
	      width: '100%'
	    }
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(WarningTriangle, {
	    style: {
	      fontSize: '38px'
	    }
	  })), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(Typography$1, {
	    variant: "h6",
	    align: "center",
	    "data-tid": "error-title"
	  }, title)), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(Typography$1, {
	    variant: "subtitle1",
	    align: "center",
	    "data-tid": "error-message"
	  }, message)), /*#__PURE__*/React.createElement(Descriptions, {
	    data: data
	  }));
	}

	const _excluded$2 = ["size"];
	const useStyles$3 = makeStyles$1(theme => ({
	  root: {
	    position: 'relative',
	    display: 'inline-block'
	  },
	  front: {
	    color: theme.palette.secondary.main,
	    animationDuration: '1500ms',
	    position: 'absolute',
	    left: 0
	  },
	  back: {
	    color: theme.palette.divider
	  }
	}));
	const SIZES = {
	  small: 16,
	  medium: 32,
	  large: 64,
	  xlarge: 128
	};
	function Progress(_ref) {
	  let {
	    size = 'medium'
	  } = _ref,
	      props = _objectWithoutProperties$2(_ref, _excluded$2);

	  const classes = useStyles$3();
	  const s = SIZES[size];
	  return /*#__PURE__*/React.createElement("div", {
	    className: classes.root
	  }, /*#__PURE__*/React.createElement(CircularProgress$1, _extends$b({
	    variant: "determinate",
	    value: 100,
	    className: classes.back,
	    size: s,
	    thickness: 3
	  }, props)), /*#__PURE__*/React.createElement(CircularProgress$1, _extends$b({
	    variant: "indeterminate",
	    disableShrink: true,
	    className: classes.front,
	    size: s,
	    thickness: 3
	  }, props)));
	}

	const _excluded$1 = ["cancel", "translator"],
	      _excluded2 = ["retry", "translator"];
	const useStyles$2 = makeStyles(() => ({
	  stripes: {
	    '&::before': {
	      position: 'absolute',
	      height: '100%',
	      width: '100%',
	      top: 0,
	      left: 0,
	      content: '""',
	      backgroundSize: '14.14px 14.14px',
	      backgroundImage: 'linear-gradient(135deg, currentColor 10%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 50%, currentColor 50%, currentColor 59%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 103%)',
	      opacity: 0.1
	    }
	  }
	}));
	function Cancel(_ref) {
	  let {
	    cancel,
	    translator
	  } = _ref,
	      props = _objectWithoutProperties$2(_ref, _excluded$1);

	  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    item: true,
	    direction: "column",
	    alignItems: "center",
	    spacing: 2
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(Progress, null)), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(Typography$1, {
	    variant: "h6",
	    align: "center",
	    "data-tid": "update-active"
	  }, translator.get('Object.Update.Active')))), /*#__PURE__*/React.createElement(StyledGrid, _extends$b({
	    item: true
	  }, props), /*#__PURE__*/React.createElement(Button$1, {
	    variant: "contained",
	    onClick: cancel
	  }, translator.get('Cancel'))));
	}
	function Retry(_ref2) {
	  let {
	    retry,
	    translator
	  } = _ref2,
	      props = _objectWithoutProperties$2(_ref2, _excluded2);

	  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(WarningTriangle, {
	    style: {
	      fontSize: '38px'
	    }
	  })), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(Typography$1, {
	    variant: "h6",
	    align: "center",
	    "data-tid": "update-cancelled"
	  }, translator.get('Object.Update.Cancelled'))), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, /*#__PURE__*/React.createElement(Button$1, _extends$b({
	    variant: "contained",
	    onClick: retry
	  }, props), translator.get('Retry'))));
	}
	function LongRunningQuery(_ref3) {
	  let {
	    canCancel,
	    canRetry,
	    api
	  } = _ref3;
	  const {
	    stripes,
	    cancel,
	    retry
	  } = useStyles$2();
	  const {
	    translator
	  } = react.exports.useContext(InstanceContext);
	  return /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    direction: "column",
	    alignItems: "center",
	    justifyContent: "center",
	    className: stripes,
	    style: {
	      position: 'absolute',
	      width: '100%',
	      height: '100%',
	      left: 0,
	      top: 0
	    },
	    spacing: 2
	  }, canCancel && /*#__PURE__*/React.createElement(Cancel, {
	    cancel: api.cancel,
	    translator: translator,
	    className: cancel
	  }), canRetry && /*#__PURE__*/React.createElement(Retry, {
	    retry: api.retry,
	    translator: translator,
	    className: retry
	  }));
	}

	/* eslint-disable react/jsx-props-no-spreading */
	function Loading() {
	  return /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    direction: "column",
	    alignItems: "center",
	    justifyContent: "center",
	    style: {
	      position: 'absolute',
	      width: '100%',
	      height: '100%',
	      left: 0,
	      top: 0
	    },
	    spacing: 2
	  }, /*#__PURE__*/React.createElement(Progress, {
	    size: "large"
	  }));
	}

	const ITEM_WIDTH = 32;
	const ITEM_SPACING = 4;
	const DIVIDER = 1;
	const NUMBER_OF_ITEMS = 6;
	const MIN_WIDTH = (ITEM_WIDTH + ITEM_SPACING) * NUMBER_OF_ITEMS + DIVIDER + ITEM_SPACING;
	/**
	 * @interface
	 * @extends HTMLElement
	 * @since 2.0.0
	 */

	const CellTitle = {
	  /** @type {'njs-cell-title'} */
	  className: 'njs-cell-title'
	};
	/**
	 * @interface
	 * @extends HTMLElement
	 * @since 2.0.0
	 */

	const CellSubTitle = {
	  /** @type {'njs-cell-sub-title'} */
	  className: 'njs-cell-sub-title'
	};
	const useStyles$1 = makeStyles(theme => ({
	  containerStyle: {
	    flexGrow: 0
	  },
	  containerTitleStyle: {
	    paddingBottom: theme.spacing(1)
	  }
	}));

	function Header(_ref) {
	  let {
	    layout,
	    sn,
	    anchorEl,
	    hovering,
	    focusHandler
	  } = _ref;
	  const showTitle = layout.showTitles && !!layout.title;
	  const showSubtitle = layout.showTitles && !!layout.subtitle;
	  const showInSelectionActions = layout.qSelectionInfo && layout.qSelectionInfo.qInSelections;
	  const [actions, setActions] = react.exports.useState([]);
	  const {
	    containerStyle,
	    containerTitleStyle
	  } = useStyles$1();
	  const [containerRef, containerRect] = useRect$1();
	  const [shouldShowPopoverToolbar, setShouldShowPopoverToolbar] = react.exports.useState(false);
	  react.exports.useEffect(() => {
	    if (!sn || !sn.component || !sn.component.isHooked) {
	      return;
	    }

	    sn.component.observeActions(a => {
	      setActions([...a, ...(sn && sn.selectionToolbar && sn.selectionToolbar.items || [])]);
	    });
	  }, [sn]);
	  react.exports.useEffect(() => {
	    if (!containerRect) return;
	    const {
	      width
	    } = containerRect;
	    setShouldShowPopoverToolbar(width < MIN_WIDTH);
	  }, [containerRect]);
	  const showTitles = showTitle || showSubtitle;
	  const classes = [containerStyle, ...(showTitles ? [containerTitleStyle] : [])];
	  const showPopoverToolbar = (hovering || showInSelectionActions) && (shouldShowPopoverToolbar || !showTitles);
	  const showToolbar = showTitles && !showPopoverToolbar && !shouldShowPopoverToolbar;
	  const Toolbar = /*#__PURE__*/React.createElement(ActionsToolbar, {
	    show: showToolbar,
	    selections: {
	      show: showInSelectionActions,
	      api: sn.component.selections,
	      onKeyDeactivate: focusHandler.refocusContent
	    },
	    actions: actions,
	    popover: {
	      show: showPopoverToolbar,
	      anchorEl
	    },
	    focusHandler: focusHandler
	  });
	  return /*#__PURE__*/React.createElement(StyledGrid, {
	    ref: containerRef,
	    item: true,
	    container: true,
	    wrap: "nowrap",
	    className: classes.join(' ')
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    zeroMinWidth: true,
	    xs: true
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    wrap: "nowrap",
	    direction: "column"
	  }, showTitle && /*#__PURE__*/React.createElement(Typography$1, {
	    variant: "h6",
	    noWrap: true,
	    className: CellTitle.className
	  }, layout.title), showSubtitle && /*#__PURE__*/React.createElement(Typography$1, {
	    variant: "body2",
	    noWrap: true,
	    className: CellSubTitle.className
	  }, layout.subtitle))), /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true
	  }, Toolbar));
	}

	/**
	 * @interface
	 * @extends HTMLElement
	 * @since 2.0.0
	 */

	const CellFooter = {
	  /** @type {'njs-cell-footer'} */
	  className: 'njs-cell-footer'
	};
	const useStyles = makeStyles(theme => ({
	  itemStyle: {
	    minWidth: 0,
	    paddingTop: theme.spacing(1)
	  }
	}));

	function Footer(_ref) {
	  let {
	    layout
	  } = _ref;
	  const {
	    itemStyle
	  } = useStyles();
	  return layout && layout.showTitles && layout.footnote ? /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    item: true,
	    className: itemStyle
	  }, /*#__PURE__*/React.createElement(Typography$1, {
	    noWrap: true,
	    variant: "body2",
	    className: CellFooter.className
	  }, layout.footnote))) : null;
	}

	class RenderDebouncer {
	  constructor() {
	    this.timer = null;
	    this.next = null;
	    this.running = false;
	  }

	  start() {
	    if (this.running) {
	      return;
	    }

	    this.running = true;
	    this.scheduleNext();
	  }

	  scheduleNext() {
	    this.timer = setTimeout(() => {
	      this.doNext();
	    }, 10);
	  }

	  async doNext() {
	    const fn = this.next;
	    this.next = null;

	    if (fn) {
	      await fn();
	      this.scheduleNext();
	    } else {
	      this.stop();
	    }
	  }

	  schedule(fn) {
	    this.next = fn;
	    this.start();
	  }

	  stop() {
	    if (!this.running) {
	      return;
	    }

	    clearTimeout(this.timer);
	    this.timer = null;
	    this.running = false;
	  }

	}

	/**
	 * @interface VizElementAttributes
	 * @extends NamedNodeMap
	 * @property {string} data-render-count
	 */

	/**
	 * @interface
	 * @extends HTMLElement
	 * @property {VizElementAttributes} attributes
	 */

	const VizElement = {
	  /** @type {'njs-viz'} */
	  className: 'njs-viz'
	};

	function Supernova(_ref) {
	  let {
	    sn,
	    snOptions: options,
	    snPlugins: plugins,
	    layout,
	    appLayout,
	    halo
	  } = _ref;
	  const {
	    component
	  } = sn;
	  const {
	    theme: themeName,
	    language,
	    constraints,
	    keyboardNavigation
	  } = react.exports.useContext(InstanceContext);
	  const [renderDebouncer] = react.exports.useState(() => new RenderDebouncer());
	  const [isMounted, setIsMounted] = react.exports.useState(false);
	  const [renderCnt, setRenderCnt] = react.exports.useState(0);
	  const [containerRef, containerRect, containerNode] = useRect$1();
	  const [snNode, setSnNode] = react.exports.useState(null);
	  const snRef = react.exports.useCallback(ref => {
	    if (!ref) {
	      return;
	    }

	    setSnNode(ref);
	  }, []); // Mount / Unmount

	  react.exports.useEffect(() => {
	    if (!snNode) return undefined;
	    component.created({
	      options
	    });
	    component.mounted(snNode);
	    setIsMounted(true);
	    return () => {
	      renderDebouncer.stop();
	      component.willUnmount();
	    };
	  }, [snNode, component]); // Render

	  react.exports.useEffect(() => {
	    if (!isMounted || !snNode || !containerRect) {
	      return;
	    } // TODO remove in-selections guard for old component API


	    if (!component.isHooked && layout && layout.qSelectionInfo && layout.qSelectionInfo.qInSelections) {
	      return;
	    }

	    renderDebouncer.schedule(() => {
	      const permissions = [];

	      if (!constraints.passive) {
	        permissions.push('passive');
	      }

	      if (!constraints.active) {
	        permissions.push('interact');
	      }

	      if (!constraints.select) {
	        permissions.push('select');
	      }

	      if (halo.app && halo.app.session) {
	        permissions.push('fetch');
	      }

	      return Promise.resolve(component.render({
	        layout,
	        options,
	        plugins,
	        embed: halo.public.nebbie,
	        context: _objectSpread2({
	          constraints,
	          // halo.public.theme is a singleton so themeName is used as dep to make sure this effect is triggered
	          theme: halo.public.theme,
	          appLayout,
	          keyboardNavigation
	        }, component.isHooked ? {} : {
	          logicalSize: sn.logicalSize({
	            layout
	          }),
	          localeInfo: (appLayout || {}).qLocaleInfo,
	          permissions
	        })
	      })).then(done => {
	        if (done === false) {
	          return;
	        }

	        if (renderCnt === 0 && typeof options.onInitialRender === 'function') {
	          options.onInitialRender.call(null);
	        }

	        setRenderCnt(renderCnt + 1);
	      });
	    });
	  }, [containerRect, options, plugins, snNode, containerNode, layout, appLayout, themeName, language, constraints, isMounted, keyboardNavigation]);
	  return /*#__PURE__*/React.createElement("div", {
	    ref: containerRef,
	    "data-render-count": renderCnt,
	    style: {
	      position: 'relative',
	      height: '100%'
	    },
	    className: VizElement.className
	  }, /*#__PURE__*/React.createElement("div", {
	    ref: snRef,
	    style: {
	      position: 'absolute',
	      width: '100%',
	      height: '100%'
	    }
	  }));
	}

	/**
	 * @interface
	 * @extends HTMLElement
	 */

	const CellElement = {
	  /** @type {'njs-cell'} */
	  className: 'njs-cell'
	};

	const initialState = err => ({
	  loading: false,
	  loaded: false,
	  longRunningQuery: false,
	  error: err ? {
	    title: err.message
	  } : null,
	  sn: null,
	  visualization: null
	});

	const contentReducer = (state, action) => {
	  // console.log('content reducer', action.type);
	  switch (action.type) {
	    case 'LOADING':
	      {
	        return _objectSpread2(_objectSpread2({}, state), {}, {
	          loading: true
	        });
	      }

	    case 'LOADED':
	      {
	        return _objectSpread2(_objectSpread2({}, state), {}, {
	          loaded: true,
	          loading: false,
	          longRunningQuery: false,
	          error: null,
	          sn: action.sn,
	          visualization: action.visualization
	        });
	      }

	    case 'RENDER':
	      {
	        return _objectSpread2(_objectSpread2({}, state), {}, {
	          loaded: true,
	          loading: false,
	          longRunningQuery: false,
	          error: null
	        });
	      }

	    case 'LONG_RUNNING_QUERY':
	      {
	        return _objectSpread2(_objectSpread2({}, state), {}, {
	          longRunningQuery: true
	        });
	      }

	    case 'ERROR':
	      {
	        return _objectSpread2(_objectSpread2({}, state), {}, {
	          loading: false,
	          longRunningQuery: false,
	          error: action.error
	        });
	      }

	    default:
	      {
	        throw new Error("Unhandled type: ".concat(action.type));
	      }
	  }
	};

	function LoadingSn(_ref) {
	  let {
	    delay = 750
	  } = _ref;
	  const [showLoading, setShowLoading] = react.exports.useState(false);
	  react.exports.useEffect(() => {
	    const handle = setTimeout(() => setShowLoading(true), delay);
	    return () => clearTimeout(handle);
	  }, []);
	  return showLoading ? /*#__PURE__*/React.createElement(Loading, null) : null;
	}

	const handleModal = _ref2 => {
	  let {
	    sn,
	    layout,
	    model
	  } = _ref2;
	  const selections = sn && sn.component && sn.component.selections;

	  if (!selections || !selections.id || !model.id) {
	    return;
	  }

	  if (selections.id === model.id) {
	    if (layout && layout.qSelectionInfo && layout.qSelectionInfo.qInSelections && !selections.isModal()) {
	      const {
	        targets
	      } = sn.generator.qae.data;
	      const firstPropertyPath = targets[0].propertyPath;
	      selections.goModal(firstPropertyPath);
	    }

	    if (!layout.qSelectionInfo || !layout.qSelectionInfo.qInSelections) {
	      if (selections.isModal()) {
	        selections.noModal();
	      }
	    }
	  }
	};

	const filterData = d => d.qError ? d.qError.qErrorCode === 7005 : true;

	const validateInfo = (min, info, getDescription, translatedError, translatedCalcCond) => [...Array(min).keys()].map(i => {
	  const exists = !!(info && info[i]);
	  const softError = exists && info[i].qError && info[i].qError.qErrorCode === 7005;
	  const error = exists && !softError && info[i].qError;
	  const delimiter = ':';
	  const calcCondMsg = softError && info[i].qCalcCondMsg;
	  const label = "".concat( // eslint-disable-next-line no-nested-ternary
	  error ? translatedError : softError ? calcCondMsg || translatedCalcCond : exists && info[i].qFallbackTitle || '');
	  const customDescription = getDescription(i);
	  const description = customDescription ? "".concat(customDescription).concat(label.length ? delimiter : '') : null;
	  return {
	    description,
	    label,
	    missing: info && !exists && !error && i >= info.length || softError,
	    error
	  };
	});

	const getInfo = info => info && (Array.isArray(info) ? info : [info]) || [];

	const validateTarget = (translator, layout, properties, def) => {
	  const minD = def.dimensions.min();
	  const minM = def.measures.min();
	  const c = def.resolveLayout(layout);
	  const reqDimErrors = validateInfo(minD, getInfo(c.qDimensionInfo), i => def.dimensions.description(properties, i), translator.get('Visualization.Invalid.Dimension'), translator.get('Visualization.UnfulfilledCalculationCondition'));
	  const reqMeasErrors = validateInfo(minM, getInfo(c.qMeasureInfo), i => def.measures.description(properties, i), translator.get('Visualization.Invalid.Measure'), translator.get('Visualization.UnfulfilledCalculationCondition'));
	  return {
	    reqDimErrors,
	    reqMeasErrors
	  };
	};

	const validateCubes = (translator, targets, layout) => {
	  let hasUnfulfilledErrors = false;
	  let aggMinD = 0;
	  let aggMinM = 0;
	  let hasLayoutErrors = false;
	  let hasLayoutUnfulfilledCalculcationCondition = false;
	  const layoutErrors = [];

	  for (let i = 0; i < targets.length; ++i) {
	    const def = targets[i];
	    const minD = def.dimensions.min();
	    const minM = def.measures.min();
	    const c = def.resolveLayout(layout);
	    const d = getInfo(c.qDimensionInfo).filter(filterData); // Filter out optional calc conditions

	    const m = getInfo(c.qMeasureInfo).filter(filterData); // Filter out optional calc conditions

	    aggMinD += minD;
	    aggMinM += minM;

	    if (d.length < minD || m.length < minM) {
	      hasUnfulfilledErrors = true;
	    }

	    if (c.qError) {
	      hasLayoutErrors = true;
	      hasLayoutUnfulfilledCalculcationCondition = c.qError.qErrorCode === 7005;
	      const title = // eslint-disable-next-line no-nested-ternary
	      hasLayoutUnfulfilledCalculcationCondition && c.qCalcCondMsg ? c.qCalcCondMsg : hasLayoutUnfulfilledCalculcationCondition ? translator.get('Visualization.UnfulfilledCalculationCondition') : translator.get('Visualization.LayoutError');
	      layoutErrors.push({
	        title,
	        descriptions: []
	      });
	    }
	  }

	  return {
	    hasUnfulfilledErrors,
	    aggMinD,
	    aggMinM,
	    hasLayoutErrors,
	    layoutErrors
	  };
	};

	const validateTargets = async (translator, layout, _ref3, model) => {
	  let {
	    targets
	  } = _ref3;
	  // Use a flattened requirements structure to combine all targets
	  const {
	    hasUnfulfilledErrors,
	    aggMinD,
	    aggMinM,
	    hasLayoutErrors,
	    layoutErrors
	  } = validateCubes(translator, targets, layout);
	  const reqDimErrors = [];
	  const reqMeasErrors = [];
	  let loopCacheProperties = null;

	  for (let i = 0; i < targets.length; ++i) {
	    const def = targets[i];

	    if (!hasLayoutErrors && hasUnfulfilledErrors) {
	      // eslint-disable-next-line no-await-in-loop
	      const properties = loopCacheProperties || (await model.getProperties());
	      loopCacheProperties = properties;
	      const res = validateTarget(translator, layout, properties, def);
	      reqDimErrors.push(...res.reqDimErrors);
	      reqMeasErrors.push(...res.reqMeasErrors);
	    }
	  }

	  const fulfilledDims = reqDimErrors.filter(e => !(e.missing || e.error)).length;
	  const reqDimErrorsTitle = translator.get('Visualization.Incomplete.Dimensions', [fulfilledDims, aggMinD]);
	  const fulfilledMeas = reqMeasErrors.filter(e => !(e.missing || e.error)).length;
	  const reqMeasErrorsTitle = translator.get('Visualization.Incomplete.Measures', [fulfilledMeas, aggMinM]);
	  const reqErrors = [{
	    title: reqDimErrorsTitle,
	    descriptions: [...reqDimErrors]
	  }, {
	    title: reqMeasErrorsTitle,
	    descriptions: [...reqMeasErrors]
	  }];
	  const showError = hasLayoutErrors || hasUnfulfilledErrors;
	  const data = hasLayoutErrors ? layoutErrors : reqErrors;
	  const title = hasLayoutErrors ? layoutErrors[0].title : translator.get('Visualization.Incomplete');
	  return [showError, {
	    title,
	    data
	  }];
	};

	const getType = async _ref4 => {
	  let {
	    types,
	    name,
	    version
	  } = _ref4;
	  const SN = await types.get({
	    name,
	    version
	  }).supernova();
	  return SN;
	};

	const loadType = async _ref5 => {
	  let {
	    dispatch,
	    types,
	    visualization,
	    version,
	    model,
	    app,
	    selections,
	    nebbie,
	    focusHandler
	  } = _ref5;

	  try {
	    const snType = await getType({
	      types,
	      name: visualization,
	      version
	    });
	    const sn = snType.create({
	      model,
	      app,
	      selections,
	      nebbie,
	      focusHandler
	    });
	    return sn;
	  } catch (err) {
	    dispatch({
	      type: 'ERROR',
	      error: {
	        title: err.message
	      }
	    });
	  }

	  return undefined;
	};

	const Cell = react.exports.forwardRef((_ref6, ref) => {
	  let {
	    halo,
	    model,
	    initialSnOptions,
	    initialSnPlugins,
	    initialError,
	    onMount,
	    currentId
	  } = _ref6;
	  const {
	    app,
	    types
	  } = halo;
	  const {
	    nebbie
	  } = halo.public;
	  const {
	    disableCellPadding = false
	  } = halo.context || {};
	  const {
	    translator,
	    language,
	    keyboardNavigation
	  } = react.exports.useContext(InstanceContext);
	  const theme = useTheme$2();
	  const [cellRef, cellRect, cellNode] = useRect$1();
	  const [state, dispatch] = react.exports.useReducer(contentReducer, initialState(initialError));
	  const [layout, {
	    validating,
	    canCancel,
	    canRetry
	  }, longrunning] = useLayout$1(model);
	  const [appLayout] = useAppLayout$1(app);
	  const [contentRef, contentRect, contentNode] = useRect$1();
	  const [snOptions, setSnOptions] = react.exports.useState(initialSnOptions);
	  const [snPlugins, setSnPlugins] = react.exports.useState(initialSnPlugins);
	  const [selections] = useObjectSelections(app, model);
	  const [hovering, setHover] = react.exports.useState(false);
	  const hoveringDebouncer = react.exports.useRef({
	    enter: null,
	    leave: null
	  });
	  const focusHandler = react.exports.useRef({
	    focusToolbarButton(last) {
	      // eslint-disable-next-line react/no-this-in-sfc
	      this.emit(last ? 'focus_toolbar_last' : 'focus_toolbar_first');
	    }

	  });
	  react.exports.useEffect(() => {
	    eventmixin(focusHandler.current);
	  }, []);

	  focusHandler.current.blurCallback = resetFocus => {
	    halo.root.toggleFocusOfCells();

	    if (resetFocus && contentNode) {
	      contentNode.focus();
	    }
	  };

	  focusHandler.current.refocusContent = () => {
	    state.sn.component && typeof state.sn.component.focus === 'function' && state.sn.component.focus();
	  };

	  const handleOnMouseEnter = () => {
	    if (hoveringDebouncer.current.leave) {
	      clearTimeout(hoveringDebouncer.current.leave);
	    }

	    if (hoveringDebouncer.enter) return;
	    hoveringDebouncer.current.enter = setTimeout(() => {
	      setHover(true);
	      hoveringDebouncer.current.enter = null;
	    }, 250);
	  };

	  const handleOnMouseLeave = () => {
	    if (hoveringDebouncer.current.enter) {
	      clearTimeout(hoveringDebouncer.current.enter);
	    }

	    if (hoveringDebouncer.current.leave) return;
	    hoveringDebouncer.current.leave = setTimeout(() => {
	      setHover(false);
	      hoveringDebouncer.current.leave = null;
	    }, 750);
	  };

	  const handleKeyDown = e => {
	    // Enter or space
	    if (['Enter', ' ', 'Spacebar'].includes(e.key)) {
	      halo.root.toggleFocusOfCells(currentId);
	    }
	  };

	  react.exports.useEffect(() => {
	    if (initialError || !appLayout || !layout) {
	      return undefined;
	    }

	    const validate = async sn => {
	      const [showError, error] = await validateTargets(translator, layout, sn.generator.qae.data, model);

	      if (showError) {
	        dispatch({
	          type: 'ERROR',
	          error
	        });
	      } else {
	        dispatch({
	          type: 'RENDER'
	        });
	      }

	      handleModal({
	        sn: state.sn,
	        layout,
	        model
	      });
	    };

	    const load = async (visualization, version) => {
	      dispatch({
	        type: 'LOADING'
	      });
	      const sn = await loadType({
	        dispatch,
	        types,
	        visualization,
	        version,
	        model,
	        app,
	        selections,
	        nebbie,
	        focusHandler: focusHandler.current
	      });

	      if (sn) {
	        dispatch({
	          type: 'LOADED',
	          sn,
	          visualization
	        });
	        onMount();
	      }

	      return undefined;
	    }; // Validate if it's still the same type


	    if (state.visualization === layout.visualization && state.sn) {
	      validate(state.sn);
	      return undefined;
	    } // Load supernova


	    const withVersion = types.getSupportedVersion(layout.visualization, layout.version);

	    if (!withVersion) {
	      dispatch({
	        type: 'ERROR',
	        error: {
	          title: "Could not find a version of '".concat(layout.visualization, "' that supports current object version. Did you forget to register ").concat(layout.visualization, "?")
	        }
	      });
	      return undefined;
	    }

	    load(layout.visualization, withVersion);
	    return () => {};
	  }, [types, state.sn, model, layout, appLayout, language]); // Long running query

	  react.exports.useEffect(() => {
	    if (!validating) {
	      return undefined;
	    }

	    const handle = setTimeout(() => dispatch({
	      type: 'LONG_RUNNING_QUERY'
	    }), 2000);
	    return () => clearTimeout(handle);
	  }, [validating]); // Expose cell ref api

	  react.exports.useImperativeHandle(ref, () => ({
	    getQae() {
	      return state.sn.generator.qae;
	    },

	    toggleFocus(active) {
	      if (typeof state.sn.component.focus === 'function') {
	        if (active) {
	          state.sn.component.focus();
	        } else {
	          state.sn.component.blur();
	        }
	      }
	    },

	    setSnOptions,
	    setSnPlugins,

	    async takeSnapshot() {
	      const {
	        width,
	        height
	      } = cellRect; // clone layout to avoid mutation

	      let clonedLayout = JSON.parse(JSON.stringify(layout));

	      if (typeof state.sn.component.setSnapshotData === 'function') {
	        clonedLayout = (await state.sn.component.setSnapshotData(clonedLayout)) || clonedLayout;
	      }

	      return {
	        // TODO - this snapshot format needs to be documented and governed
	        key: String(+Date.now()),
	        meta: {
	          language: translator.language(),
	          theme: theme.name,
	          appLayout,
	          // direction: 'ltr',
	          size: {
	            width: Math.round(width),
	            height: Math.round(height)
	          }
	        },
	        layout: clonedLayout
	      };
	    },

	    async exportImage() {
	      if (typeof halo.config.snapshot.capture !== 'function') {
	        throw new Error('Stardust embed has not been configured with snapshot.capture callback');
	      }

	      const snapshot = await this.takeSnapshot(); // eslint-disable-line

	      return halo.config.snapshot.capture(snapshot);
	    }

	  }), [state.sn, contentRect, cellRect, layout, theme.name, appLayout]); // console.log('content', state);

	  let Content = null;

	  if (state.loading && !state.longRunningQuery) {
	    Content = /*#__PURE__*/React.createElement(LoadingSn, null);
	  } else if (state.error) {
	    Content = /*#__PURE__*/React.createElement(Error$1, state.error);
	  } else if (state.loaded) {
	    Content = /*#__PURE__*/React.createElement(Supernova, {
	      key: layout.visualization,
	      sn: state.sn,
	      halo: halo,
	      snOptions: snOptions,
	      snPlugins: snPlugins,
	      layout: layout,
	      appLayout: appLayout
	    });
	  }

	  return /*#__PURE__*/React.createElement(Paper$1, {
	    style: {
	      position: 'relative',
	      width: '100%',
	      height: '100%',
	      overflow: 'hidden'
	    },
	    elevation: 0,
	    square: true,
	    className: CellElement.className,
	    ref: cellRef,
	    onMouseEnter: handleOnMouseEnter,
	    onMouseLeave: handleOnMouseLeave
	  }, /*#__PURE__*/React.createElement(StyledGrid, {
	    container: true,
	    direction: "column",
	    spacing: 0,
	    style: _objectSpread2(_objectSpread2({
	      position: 'relative',
	      width: '100%',
	      height: '100%'
	    }, !disableCellPadding ? {
	      padding: theme.spacing(1)
	    } : {}), state.longRunningQuery ? {
	      opacity: '0.3'
	    } : {})
	  }, cellNode && layout && state.sn && /*#__PURE__*/React.createElement(Header, {
	    layout: layout,
	    sn: state.sn,
	    anchorEl: cellNode,
	    hovering: hovering,
	    focusHandler: focusHandler.current
	  }, "\xA0"), /*#__PURE__*/React.createElement(StyledGrid, {
	    tabIndex: keyboardNavigation ? 0 : -1,
	    onKeyDown: keyboardNavigation ? handleKeyDown : null,
	    item: true,
	    xs: true,
	    style: {
	      height: '100%'
	    },
	    ref: contentRef
	  }, Content), /*#__PURE__*/React.createElement(Footer, {
	    layout: layout
	  })), state.longRunningQuery && /*#__PURE__*/React.createElement(LongRunningQuery, {
	    canCancel: canCancel,
	    canRetry: canRetry,
	    api: longrunning
	  }));
	});

	function glue(_ref) {
	  let {
	    halo,
	    element,
	    model,
	    initialSnOptions,
	    initialSnPlugins,
	    onMount,
	    initialError
	  } = _ref;
	  const {
	    root
	  } = halo;
	  const cellRef = React.createRef();
	  const currentId = uid();
	  const portal = ReactDOM.createPortal( /*#__PURE__*/React.createElement(Cell, {
	    ref: cellRef,
	    halo: halo,
	    model: model,
	    currentId: currentId,
	    initialSnOptions: initialSnOptions,
	    initialSnPlugins: initialSnPlugins,
	    initialError: initialError,
	    onMount: onMount
	  }), element, model.id);

	  const unmount = () => {
	    root.remove(portal);
	    model.removeListener('closed', unmount);
	  };

	  model.on('closed', unmount);
	  root.add(portal); // Cannot use model.id as it is not unique in a given mashup

	  root.addCell(currentId, cellRef);
	  return [unmount, cellRef];
	}

	function isObject$1(v) {
	  return v != null && !Array.isArray(v) && typeof v === 'object';
	}

	function isEqual(a, b) {
	  if (isObject$1(a) && isObject$1(b)) {
	    return JSON.stringify(a) === JSON.stringify(b);
	  }

	  if (Array.isArray(a) || Array.isArray(b)) {
	    return false;
	  }

	  return a === b;
	} // eslint-disable-next-line default-param-last


	function getPatches() {
	  let path = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '/';
	  let obj = arguments.length > 1 ? arguments[1] : undefined;
	  let old = arguments.length > 2 ? arguments[2] : undefined;
	  const patches = [];
	  Object.keys(obj).forEach(prop => {
	    const v = obj[prop];

	    if (typeof old[prop] === 'object' && typeof v === 'object' && !Array.isArray(v)) {
	      patches.push(...getPatches("".concat(path).concat(prop, "/"), obj[prop], old[prop]));
	    } else if (!isEqual(v, old[prop])) {
	      patches.push({
	        qPath: path + prop,
	        qOp: 'add',
	        qValue: JSON.stringify(obj[prop])
	      });
	    }
	  });
	  return patches;
	}

	/**
	 * An object literal containing meta information about the plugin and a function containing the plugin implementation.
	 * @interface Plugin
	 * @property {object} info Object that can hold various meta info about the plugin
	 * @property {string} info.name The name of the plugin
	 * @property {function} fn The implementation of the plugin. Input and return value is up to the plugin implementation to decide based on its purpose.
	 * @experimental
	 * @since 1.2.0
	 * @example
	 * const plugin = {
	 *   info: {
	 *     name: "example-plugin",
	 *     type: "meta-type",
	 *   },
	 *   fn: () => {
	 *     // Plugin implementation goes here
	 *   }
	 * };
	 */
	function validatePlugins(plugins) {
	  if (!Array.isArray(plugins)) {
	    throw new Error('Invalid plugin format: plugins should be an array!');
	  }

	  plugins.forEach(p => {
	    if (typeof p !== 'object') {
	      throw new Error('Invalid plugin format: a plugin should be an object');
	    }

	    if (typeof p.info !== 'object' || typeof p.info.name !== 'string') {
	      throw new Error('Invalid plugin format: a plugin should have an info object containing a name');
	    }

	    if (typeof p.fn !== 'function') {
	      throw new Error("Invalid plugin format: The plugin \"".concat(p.info.name, "\" has no \"fn\" function"));
	    }
	  });
	}

	const noopi = () => {};

	function viz() {
	  let {
	    model,
	    halo,
	    initialError,
	    onDestroy = async () => {}
	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  let unmountCell = noopi;
	  let cellRef = null;
	  let mountedReference = null;
	  let onMount = null;
	  const mounted = new Promise(resolve => {
	    onMount = resolve;
	  });
	  let initialSnOptions = {};
	  let initialSnPlugins = [];

	  const setSnOptions = async opts => {
	    if (mountedReference) {
	      (async () => {
	        await mounted;
	        cellRef.current.setSnOptions(_objectSpread2(_objectSpread2({}, initialSnOptions), opts));
	      })();
	    } else {
	      // Handle setting options before mount
	      initialSnOptions = _objectSpread2(_objectSpread2({}, initialSnOptions), opts);
	    }
	  };

	  const setSnPlugins = async plugins => {
	    validatePlugins(plugins);

	    if (mountedReference) {
	      (async () => {
	        await mounted;
	        cellRef.current.setSnPlugins(plugins);
	      })();
	    } else {
	      // Handle setting plugins before mount
	      initialSnPlugins = plugins;
	    }
	  };
	  /**
	   * @class
	   * @alias Viz
	   * @classdesc A controller to further modify a visualization after it has been rendered.
	   * @example
	   * const viz = await embed(app).render({
	   *   element,
	   *   type: 'barchart'
	   * });
	   * viz.destroy();
	   */


	  const api =
	  /** @lends Viz# */
	  {
	    /**
	     * The id of this visualization's generic object.
	     * @type {string}
	     */
	    id: model.id,

	    /**
	     * Destroys the visualization and removes it from the the DOM.
	     * @example
	     * const viz = await embed(app).render({
	     *   element,
	     *   id: 'abc'
	     * });
	     * viz.destroy();
	     */
	    async destroy() {
	      await onDestroy();
	      unmountCell();
	      unmountCell = noopi;
	    },

	    /**
	     * Converts the visualization to a different registered type
	     * @since 1.1.0
	     * @param {string} newType - Which registered type to convert to.
	     * @param {boolean=} forceUpdate - Whether to run setProperties or not, defaults to true.
	     * @returns {Promise<object>} Promise object that resolves to the full property tree of the converted visualization.
	     * @example
	     * const viz = await embed(app).render({
	     *   element,
	     *   id: 'abc'
	     * });
	     * viz.convertTo('barChart');
	     */
	    async convertTo(newType) {
	      let forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
	      const propertyTree = await convertTo({
	        halo,
	        model,
	        cellRef,
	        newType
	      });

	      if (forceUpdate) {
	        if (model.__snInterceptor) {
	          await model.__snInterceptor.setProperties.call(model, propertyTree.qProperty);
	        } else {
	          await model.setProperties(propertyTree.qProperty);
	        }
	      }

	      return propertyTree;
	    },

	    // ===== unexposed experimental API - use at own risk ======
	    __DO_NOT_USE__: {
	      mount(element) {
	        if (mountedReference) {
	          throw new Error('Already mounted');
	        }

	        mountedReference = element;
	        [unmountCell, cellRef] = glue({
	          halo,
	          element,
	          model,
	          initialSnOptions,
	          initialSnPlugins,
	          initialError,
	          onMount
	        });
	        return mounted;
	      },

	      async applyProperties(props) {
	        const current = await model.getEffectiveProperties();
	        const patches = getPatches('/', props, current);

	        if (patches.length) {
	          return model.applyPatches(patches, true);
	        }

	        return undefined;
	      },

	      options(opts) {
	        setSnOptions(opts);
	      },

	      plugins(plugins) {
	        setSnPlugins(plugins);
	      },

	      exportImage() {
	        return cellRef.current.exportImage();
	      },

	      takeSnapshot() {
	        return cellRef.current.takeSnapshot();
	      },

	      getModel() {
	        return model;
	      }

	    } // old QVisualization API
	    // close() {},
	    // exportData() {},
	    // exportImg() {},
	    // exportPdf() {},
	    // setOptions() {}, // applied soft patch
	    // resize() {},
	    // show() {},
	    // toggleDataView() {},

	  };
	  return api;
	}

	/* eslint no-underscore-dangle:0 */
	async function init(model, optional, halo, initialError) {
	  let onDestroy = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : async () => {};
	  const api = viz({
	    model,
	    halo,
	    initialError,
	    onDestroy
	  });

	  if (optional.options) {
	    api.__DO_NOT_USE__.options(optional.options);
	  }

	  if (optional.plugins) {
	    api.__DO_NOT_USE__.plugins(optional.plugins);
	  }

	  if (optional.element) {
	    await api.__DO_NOT_USE__.mount(optional.element);
	  }

	  return api;
	}

	/**
	 * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
	 */

	/**
	 * @interface CreateConfig
	 * @description Rendering configuration for creating and rendering a new object
	 * @extends BaseConfig
	 * @property {string} type
	 * @property {string=} version
	 * @property {(Field[])=} fields
	 * @property {EngineAPI.IGenericObjectProperties=} properties
	 */

	async function createSessionObject(_ref, halo) {
	  let {
	    type,
	    version,
	    fields,
	    properties,
	    options,
	    plugins,
	    element
	  } = _ref;
	  let mergedProps = {};
	  let error;

	  try {
	    const t = halo.types.get({
	      name: type,
	      version
	    });
	    mergedProps = await t.initialProperties(properties);
	    const sn = await t.supernova();

	    if (fields) {
	      populateData({
	        sn,
	        properties: mergedProps,
	        fields
	      }, halo);
	    }

	    if (properties && sn && sn.qae.properties.onChange) {
	      sn.qae.properties.onChange.call({}, mergedProps);
	    }
	  } catch (e) {
	    error = e; // minimal dummy object properties to allow it to be created
	    // and rendered with the error

	    mergedProps = {
	      qInfo: {
	        qType: type
	      },
	      visualization: type
	    }; // console.error(e); // eslint-disable-line
	  }

	  const model = await halo.app.createSessionObject(mergedProps);
	  modelStore.set(model.id, model);
	  const unsubscribe = subscribe(model);

	  const onDestroy = async () => {
	    await halo.app.destroySessionObject(model.id);
	    unsubscribe();
	  };

	  return init(model, {
	    options,
	    plugins,
	    element
	  }, halo, error, onDestroy);
	}

	/**
	 * @interface BaseConfig
	 * @description Basic rendering configuration for rendering an object
	 * @property {HTMLElement} element
	 * @property {object=} options
	 * @property {Plugin[]} [plugins]
	 */

	/**
	 * @interface GetConfig
	 * @description Rendering configuration for rendering an existing object
	 * @extends BaseConfig
	 * @property {string} id
	 */

	async function getObject(_ref, halo) {
	  let {
	    id,
	    options,
	    plugins,
	    element
	  } = _ref;
	  const key = "".concat(id);
	  let rpc = rpcRequestModelStore.get(key);

	  if (!rpc) {
	    rpc = halo.app.getObject(id);
	    rpcRequestModelStore.set(key, rpc);
	  }

	  const model = await rpc;
	  modelStore.set(key, model);
	  return init(model, {
	    options,
	    plugins,
	    element
	  }, halo);
	}

	function flagsFn () {
	  let flags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

	  /**
	   * @interface Flags
	   */
	  return (
	    /** @lends Flags */
	    {
	      /**
	       * Checks whether the specified flag is enabled.
	       * @param {string} flag - The value flag to check.
	       * @returns {boolean} True if the specified flag is enabled, false otherwise.
	       */
	      isEnabled: f => flags[f] === true
	    }
	  );
	}

	/* eslint no-param-reassign: 0, no-restricted-globals: 0 */
	const extend = extend$2.bind(null, true);
	const JSONPatch = {};
	const {
	  isArray
	} = Array;

	function isObject(v) {
	  return v != null && !Array.isArray(v) && typeof v === 'object';
	}

	function isUndef(v) {
	  return typeof v === 'undefined';
	}

	function isFunction(v) {
	  return typeof v === 'function';
	}
	/**
	 * Generate an exact duplicate (with no references) of a specific value.
	 *
	 * @private
	 * @param {Object} The value to duplicate
	 * @returns {Object} a unique, duplicated value
	 */


	function generateValue(val) {
	  if (val) {
	    return extend({}, {
	      val
	    }).val;
	  }

	  return val;
	}
	/**
	 * An additional type checker used to determine if the property is of internal
	 * use or not a type that can be translated into JSON (like functions).
	 *
	 * @private
	 * @param {Object} obj The object which has the property to check
	 * @param {String} The property name to check
	 * @returns {Boolean} Whether the property is deemed special or not
	 */


	function isSpecialProperty(obj, key) {
	  return isFunction(obj[key]) || key.substring(0, 2) === '$$' || key.substring(0, 1) === '_';
	}
	/**
	 * Finds the parent object from a JSON-Pointer ("/foo/bar/baz" = "bar" is "baz" parent),
	 * also creates the object structure needed.
	 *
	 * @private
	 * @param {Object} data The root object to traverse through
	 * @param {String} The JSON-Pointer string to use when traversing
	 * @returns {Object} The parent object
	 */


	function getParent(data, str) {
	  const seperator = '/';
	  const parts = str.substring(1).split(seperator).slice(0, -1);
	  let numPart;
	  parts.forEach((part, i) => {
	    if (i === parts.length) {
	      return;
	    }

	    numPart = +part;
	    const newPart = !isNaN(numPart) ? [] : {};
	    data[numPart || part] = isUndef(data[numPart || part]) ? newPart : data[part];
	    data = data[numPart || part];
	  });
	  return data;
	}
	/**
	 * Cleans an object of all its properties, unless they're deemed special or
	 * cannot be removed by configuration.
	 *
	 * @private
	 * @param {Object} obj The object to clean
	 */


	function emptyObject(obj) {
	  Object.keys(obj).forEach(key => {
	    const config = Object.getOwnPropertyDescriptor(obj, key);

	    if (config.configurable && !isSpecialProperty(obj, key)) {
	      delete obj[key];
	    }
	  });
	}
	/**
	 * Compare an object with another, could be object, array, number, string, bool.
	 * @private
	 *
	 * @param {Object} a The first object to compare
	 * @param {Object} a The second object to compare
	 * @returns {Boolean} Whether the objects are identical
	 */


	function compare(a, b) {
	  let isIdentical = true;

	  if (isObject(a) && isObject(b)) {
	    if (Object.keys(a).length !== Object.keys(b).length) {
	      return false;
	    }

	    Object.keys(a).forEach(key => {
	      if (!compare(a[key], b[key])) {
	        isIdentical = false;
	      }
	    });
	    return isIdentical;
	  }

	  if (isArray(a) && isArray(b)) {
	    if (a.length !== b.length) {
	      return false;
	    }

	    for (let i = 0, l = a.length; i < l; i += 1) {
	      if (!compare(a[i], b[i])) {
	        return false;
	      }
	    }

	    return true;
	  }

	  return a === b;
	}
	/**
	 * Generates patches by comparing two arrays.
	 *
	 * @private
	 * @param {Array} oldA The old (original) array, which will be patched
	 * @param {Array} newA The new array, which will be used to compare against
	 * @returns {Array} An array of patches (if any)
	 */


	function patchArray(original, newA, basePath) {
	  let patches = [];
	  const oldA = original.slice();
	  let tmpIdx = -1;

	  function findIndex(a, id, idx) {
	    if (a[idx] && isUndef(a[idx].qInfo)) {
	      return null;
	    }

	    if (a[idx] && a[idx].qInfo.qId === id) {
	      // shortcut if identical
	      return idx;
	    }

	    for (let ii = 0, ll = a.length; ii < ll; ii += 1) {
	      if (a[ii] && a[ii].qInfo.qId === id) {
	        return ii;
	      }
	    }

	    return -1;
	  }

	  if (compare(newA, oldA)) {
	    // array is unchanged
	    return patches;
	  }

	  if (!isUndef(newA[0]) && isUndef(newA[0].qInfo)) {
	    // we cannot create patches without unique identifiers, replace array...
	    patches.push({
	      op: 'replace',
	      path: basePath,
	      value: newA
	    });
	    return patches;
	  }

	  for (let i = oldA.length - 1; i >= 0; i -= 1) {
	    tmpIdx = findIndex(newA, oldA[i].qInfo && oldA[i].qInfo.qId, i);

	    if (tmpIdx === -1) {
	      patches.push({
	        op: 'remove',
	        path: "".concat(basePath, "/").concat(i)
	      });
	      oldA.splice(i, 1);
	    } else {
	      patches = patches.concat(JSONPatch.generate(oldA[i], newA[tmpIdx], "".concat(basePath, "/").concat(i)));
	    }
	  }

	  for (let i = 0, l = newA.length; i < l; i += 1) {
	    tmpIdx = findIndex(oldA, newA[i].qInfo && newA[i].qInfo.qId);

	    if (tmpIdx === -1) {
	      patches.push({
	        op: 'add',
	        path: "".concat(basePath, "/").concat(i),
	        value: newA[i]
	      });
	      oldA.splice(i, 0, newA[i]);
	    } else if (tmpIdx !== i) {
	      patches.push({
	        op: 'move',
	        path: "".concat(basePath, "/").concat(i),
	        from: "".concat(basePath, "/").concat(tmpIdx)
	      });
	      oldA.splice(i, 0, oldA.splice(tmpIdx, 1)[0]);
	    }
	  }

	  return patches;
	}
	/**
	 * Generate an array of JSON-Patch:es following the JSON-Patch Specification Draft.
	 *
	 * See [specification draft](http://tools.ietf.org/html/draft-ietf-appsawg-json-patch-10)
	 *
	 * Does NOT currently generate patches for arrays (will replace them)
	 * @private
	 *
	 * @param {Object} original The object to patch to
	 * @param {Object} newData The object to patch from
	 * @param {String} [basePath] The base path to use when generating the paths for
	 *                            the patches (normally not used)
	 * @returns {Array} An array of patches
	 */


	JSONPatch.generate = function generate(original, newData, basePath) {
	  basePath = basePath || '';
	  let patches = [];
	  Object.keys(newData).forEach(key => {
	    const val = generateValue(newData[key]);
	    const oldVal = original[key];
	    const tmpPath = "".concat(basePath, "/").concat(key);

	    if (compare(val, oldVal) || isSpecialProperty(newData, key)) {
	      return;
	    }

	    if (isUndef(oldVal)) {
	      // property does not previously exist
	      patches.push({
	        op: 'add',
	        path: tmpPath,
	        value: val
	      });
	    } else if (isObject(val) && isObject(oldVal)) {
	      // we need to generate sub-patches for this, since it already exist
	      patches = patches.concat(JSONPatch.generate(oldVal, val, tmpPath));
	    } else if (isArray(val) && isArray(oldVal)) {
	      patches = patches.concat(patchArray(oldVal, val, tmpPath));
	    } else {
	      // it's a simple property (bool, string, number)
	      patches.push({
	        op: 'replace',
	        path: "".concat(basePath, "/").concat(key),
	        value: val
	      });
	    }
	  });
	  Object.keys(original).forEach(key => {
	    if (isUndef(newData[key]) && !isSpecialProperty(original, key)) {
	      // this property does not exist anymore
	      patches.push({
	        op: 'remove',
	        path: "".concat(basePath, "/").concat(key)
	      });
	    }
	  });
	  return patches;
	};
	/**
	 * Apply a list of patches to an object.
	 * @private
	 *
	 * @param {Object} original The object to patch
	 * @param {Array} patches The list of patches to apply
	 */


	JSONPatch.apply = function apply(original, patches) {
	  patches.forEach(patch => {
	    let parent = getParent(original, patch.path);
	    let key = patch.path.split('/').splice(-1)[0];
	    let target = key && isNaN(+key) ? parent[key] : parent[+key] || parent;
	    const from = patch.from ? patch.from.split('/').splice(-1)[0] : null;

	    if (patch.path === '/') {
	      parent = null;
	      target = original;
	    }

	    if (patch.op === 'add' || patch.op === 'replace') {
	      if (isArray(parent)) {
	        // trust indexes from patches, so don't replace the index if it's an add
	        if (key === '-') {
	          key = parent.length;
	        }

	        parent.splice(+key, patch.op === 'add' ? 0 : 1, patch.value);
	      } else if (isArray(target) && isArray(patch.value)) {
	        const newValues = patch.value.slice(); // keep array reference if possible...

	        target.length = 0;
	        target.push(...newValues);
	      } else if (isObject(target) && isObject(patch.value)) {
	        // keep object reference if possible...
	        emptyObject(target);
	        extend(target, patch.value);
	      } else if (!parent) {
	        throw new Error('Patchee is not an object we can patch');
	      } else {
	        // simple value
	        parent[key] = patch.value;
	      }
	    } else if (patch.op === 'move') {
	      const oldParent = getParent(original, patch.from);

	      if (isArray(parent)) {
	        parent.splice(+key, 0, oldParent.splice(+from, 1)[0]);
	      } else {
	        parent[key] = oldParent[from];
	        delete oldParent[from];
	      }
	    } else if (patch.op === 'remove') {
	      if (isArray(parent)) {
	        parent.splice(+key, 1);
	      } else {
	        delete parent[key];
	      }
	    }
	  });
	};
	/**
	 * Deep clone an object.
	 * @private
	 *
	 * @param {Object} obj The object to clone
	 * @returns {Object} A new object identical to the `obj`
	 */


	JSONPatch.clone = function clone(obj) {
	  return extend({}, obj);
	};
	/**
	 * Creates a JSON-patch.
	 * @private
	 *
	 * @param {String} op The operation of the patch. Available values: "add", "remove", "move"
	 * @param {Object} [val] The value to set the `path` to. If `op` is `move`, `val`
	 *                       is the "from JSON-path" path
	 * @param {String} path The JSON-path for the property to change (e.g. "/qHyperCubeDef/columnOrder")
	 * @returns {Object} A patch following the JSON-patch specification
	 */


	JSONPatch.createPatch = function createPatch(op, val, path) {
	  const patch = {
	    op: op.toLowerCase(),
	    path
	  };

	  if (patch.op === 'move') {
	    patch.from = val;
	  } else if (typeof val !== 'undefined') {
	    patch.value = val;
	  }

	  return patch;
	};
	/**
	 * Apply the differences of two objects (keeping references if possible).
	 * Identical to running `JSONPatch.apply(original, JSONPatch.generate(original, newData));`
	 * @private
	 *
	 * @param {Object} original The object to update/patch
	 * @param {Object} newData the object to diff against
	 *
	 * @example
	 * var obj1 = { foo: [1,2,3], bar: { baz: true, qux: 1 } };
	 * var obj2 = { foo: [4,5,6], bar: { baz: false } };
	 * JSONPatch.updateObject(obj1, obj2);
	 * // => { foo: [4,5,6], bar: { baz: false } };
	 */


	JSONPatch.updateObject = function updateObject(original, newData) {
	  if (!Object.keys(original).length) {
	    extend(original, newData);
	    return;
	  }

	  JSONPatch.apply(original, JSONPatch.generate(original, newData));
	};

	const mixin$1 = obj => {
	  /* eslint no-param-reassign: 0 */
	  Object.keys(nodeEventEmitter.prototype).forEach(key => {
	    obj[key] = nodeEventEmitter.prototype[key];
	  });
	  nodeEventEmitter.init(obj);
	  return obj;
	};

	const actionWrapper = component => item => {
	  const wrapped = mixin$1(_objectSpread2(_objectSpread2({}, item), {}, {
	    action() {
	      if (typeof item.action === 'function') {
	        item.action.call(wrapped, component);
	      }

	      wrapped.emit('changed');
	    },

	    enabled() {
	      if (typeof item.enabled === 'function') {
	        return item.enabled.call(wrapped, component);
	      }

	      return true;
	    },

	    active: typeof item.active === 'function' ? function active() {
	      return item.active.call(wrapped, component);
	    } : undefined
	  }));
	  return wrapped;
	};

	function actionhero (_ref) {
	  let {
	    sn,
	    component
	  } = _ref;
	  const actions = {};
	  const selectionToolbarItems = [];
	  const w = actionWrapper(component);
	  ((sn.definition.selectionToolbar || {}).items || []).forEach(item => {
	    const wrapped = w(item); // TODO - check if key exists

	    actions[item.key] = wrapped;
	    selectionToolbarItems.push(wrapped);
	  });
	  (sn.definition.actions || []).forEach(item => {
	    const wrapped = w(item); // TODO - check if key exists

	    actions[item.key] = wrapped;
	  });
	  return {
	    actions,
	    selectionToolbarItems,

	    destroy() {
	      selectionToolbarItems.length = 0;
	    }

	  };
	}

	/* eslint no-underscore-dangle: 0 */

	/* eslint no-param-reassign: 0 */

	/* eslint no-console: 0 */

	/* eslint no-use-before-define: 0 */
	// Hooks implementation heavily inspired by preact hooks
	let currentComponent;
	let currentIndex;

	function depsChanged(prevDeps, deps) {
	  if (!prevDeps) {
	    return true;
	  }

	  if (deps.length !== prevDeps.length) {
	    return true;
	  }

	  for (let i = 0; i < deps.length; i++) {
	    if (prevDeps[i] !== deps[i]) {
	      return true;
	    }
	  }

	  return false;
	}

	function initiate(component) {
	  let {
	    explicitResize = false
	  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
	  component.__hooks = {
	    obsolete: false,
	    error: false,
	    waitForData: false,
	    chain: {
	      promise: null,
	      resolve: () => {}
	    },
	    list: [],
	    snaps: [],
	    actions: {
	      list: []
	    },
	    pendingEffects: [],
	    pendingLayoutEffects: [],
	    pendingPromises: [],
	    resizer: {
	      setters: [],
	      explicitResize
	    },
	    accessibility: {
	      setter: null
	    }
	  };
	}
	function teardown(component) {
	  flushPending(component.__hooks.list, true);
	  component.__hooks.obsolete = true;
	  component.__hooks.list.length = 0;
	  component.__hooks.pendingEffects.length = 0;
	  component.__hooks.pendingLayoutEffects.length = 0;
	  component.__hooks.actions = null;
	  component.__hooks.imperativeHandle = null;
	  component.__hooks.resizer = null;
	  component.__hooks.accessibility = null;
	  component.__actionsDispatch = null;
	  clearTimeout(component.__hooks.micro);
	  cancelAnimationFrame(component.__hooks.macro);
	}
	async function run(component) {
	  if (component.__hooks.obsolete) {
	    return Promise.resolve();
	  }

	  currentIndex = -1;
	  currentComponent = component;
	  let num = -1;

	  if (currentComponent.__hooks.initiated) {
	    num = currentComponent.__hooks.list.length;
	  }

	  try {
	    currentComponent.fn.call(null);
	  } catch (e) {
	    console.error(e);
	  }

	  currentComponent.__hooks.initiated = true;

	  {
	    if (num > -1 && num !== currentComponent.__hooks.list.length) {
	      console.error('Detected a change in the order of hooks called.');
	    }
	  }

	  const hooks = currentComponent.__hooks;
	  dispatchActions(currentComponent);
	  currentIndex = undefined;
	  currentComponent = undefined;

	  if (!hooks.chain.promise) {
	    hooks.chain.promise = new Promise(resolve => {
	      hooks.chain.resolve = resolve;
	    });
	  }

	  flushMicro(hooks);
	  scheduleMacro(hooks);
	  return hooks.chain.promise;
	}

	function flushPending(list, skipUpdate) {
	  try {
	    list.forEach(fx => {
	      // teardown existing
	      typeof fx.teardown === 'function' ? fx.teardown() : null; // update

	      if (!skipUpdate) {
	        fx.teardown = fx.value[0]();
	      }
	    });
	  } catch (e) {
	    console.error(e);
	  }

	  list.length = 0;
	}

	function flushMicro(hooks) {
	  flushPending(hooks.pendingLayoutEffects);
	}

	function flushMacro(hooks) {
	  flushPending(hooks.pendingEffects);
	  hooks.macro = null;
	  maybeEndChain(hooks); // eslint-disable-line no-use-before-define
	}

	function maybeEndChain(hooks) {
	  if (hooks.pendingPromises.length || hooks.micro || hooks.macro) {
	    return;
	  }

	  hooks.chain.promise = null;
	  hooks.chain.resolve(!hooks.waitForData);
	}

	function runSnaps(component, layout) {
	  try {
	    return Promise.all(component.__hooks.snaps.map(h => Promise.resolve(h.fn(layout)))).then(snaps => snaps[snaps.length - 1]);
	  } catch (e) {
	    console.error(e);
	  }

	  return Promise.resolve();
	}
	function getImperativeHandle(component) {
	  return component.__hooks.imperativeHandle;
	}

	function dispatchActions(component) {
	  if (component.__actionsDispatch && component.__hooks.actions.changed) {
	    component.__actionsDispatch(component.__hooks.actions.list.slice());

	    component.__hooks.actions.changed = false;
	  }
	}

	function observeActions(component, callback) {
	  component.__actionsDispatch = callback;

	  if (component.__hooks) {
	    component.__hooks.actions.changed = true;
	    dispatchActions(component);
	  }
	}

	function getHook(idx) {
	  if (typeof currentComponent === 'undefined') {
	    throw new Error('Invalid stardust hook call. Hooks can only be called inside a visualization component.');
	  }

	  const hooks = currentComponent.__hooks;

	  if (idx >= hooks.list.length) {
	    hooks.list.push({});
	  }

	  return hooks.list[idx];
	}

	function scheduleMicro(component) {
	  if (component.__hooks.micro) {
	    return;
	  }

	  component.__hooks.micro = setTimeout(() => {
	    component.__hooks.micro = null;
	    run(component);
	  }, 0);
	}

	function scheduleMacro(hooks) {
	  if (hooks.macro) {
	    return;
	  }

	  hooks.macro = requestAnimationFrame(() => {
	    flushMacro(hooks);
	  });
	}

	function useInternalContext(name) {
	  getHook(++currentIndex);
	  const ctx = currentComponent.context;
	  return ctx[name];
	}

	function updateRectOnNextRun(component) {
	  if (component.__hooks) {
	    component.__hooks.resizer.update = true;
	  }
	} // ========  EXTERNAL =========

	function hook(cb) {
	  return {
	    __hooked: true,
	    fn: cb,
	    initiate,
	    run,
	    teardown,
	    runSnaps,
	    focus,
	    blur,
	    observeActions,
	    getImperativeHandle,
	    updateRectOnNextRun
	  };
	}
	/**
	 * @template S
	 * @interface SetStateFn
	 * @param {S|function(S):S} newState - The new state
	 */

	/**
	 * Creates a stateful value.
	 * @entry
	 * @template S
	 * @param {S|function():S} initialState - The initial state.
	 * @returns {Array<S,SetStateFn<S>>} The value and a function to update it.
	 * @example
	 * import { useState } from '@nebula.js/stardust';
	 * // ...
	 * // initiate with simple primitive value
	 * const [zoomed, setZoomed] = useState(false);
	 *
	 * // update
	 * setZoomed(true);
	 *
	 * // lazy initiation
	 * const [value, setValue] = useState(() => heavy());
	 *
	 */

	function useState(initial) {
	  const h = getHook(++currentIndex);

	  if (!h.value) {
	    // initiate
	    h.component = currentComponent;

	    const setState = s => {
	      if (h.component.__hooks.obsolete) {
	        {
	          throw new Error('Calling setState on an unmounted component is a no-op and indicates a memory leak in your component.');
	        }
	      }

	      const v = typeof s === 'function' ? s(h.value[0]) : s;

	      if (v !== h.value[0]) {
	        h.value[0] = v;
	        scheduleMicro(h.component);
	      }
	    };

	    h.value = [typeof initial === 'function' ? initial() : initial, setState];
	  }

	  return h.value;
	}
	/**
	 * @typedef {function():(void | function():void)} EffectCallback
	 */

	/**
	 * Triggers a callback function when a dependent value changes.
	 * @entry
	 * @param {EffectCallback} effect - The callback.
	 * @param {Array<any>=} deps - The dependencies that should trigger the callback.
	 * @example
	 * import { useEffect } from '@nebula.js/stardust';
	 * // ...
	 * useEffect(() => {
	 *   console.log('mounted');
	 *   return () => {
	 *     console.log('unmounted');
	 *   };
	 * }, []);
	 */

	function useEffect(cb, deps) {
	  {
	    if (typeof deps !== 'undefined' && !Array.isArray(deps)) {
	      throw new Error('Invalid dependencies. Second argument must be an array.');
	    }
	  }

	  const h = getHook(++currentIndex);

	  if (depsChanged(h.value ? h.value[1] : undefined, deps)) {
	    h.value = [cb, deps];

	    if (currentComponent.__hooks.pendingEffects.indexOf(h) === -1) {
	      currentComponent.__hooks.pendingEffects.push(h);
	    }
	  }
	} // don't expose this hook since it's no different than useEffect except for the timing

	function useLayoutEffect(cb, deps) {
	  {
	    if (typeof deps !== 'undefined' && !Array.isArray(deps)) {
	      throw new Error('Invalid dependencies. Second argument must be an array.');
	    }
	  }

	  const h = getHook(++currentIndex);

	  if (depsChanged(h.value ? h.value[1] : undefined, deps)) {
	    h.value = [cb, deps];

	    currentComponent.__hooks.pendingLayoutEffects.push(h);
	  }
	}
	/**
	 * Creates a stateful value when a dependent changes.
	 * @entry
	 * @template T
	 * @param {function():T} factory - The factory function.
	 * @param {Array<any>} deps - The dependencies.
	 * @returns {T} The value returned from the factory function.
	 * @example
	 * import { useMemo } from '@nebula.js/stardust';
	 * // ...
	 * const v = useMemo(() => {
	 *   return doSomeHeavyCalculation();
	 * }), []);
	 */


	function useMemo(fn, deps) {
	  {
	    if (!deps) {
	      console.warn('useMemo called without dependencies.');
	    }
	  }

	  const h = getHook(++currentIndex);

	  if (depsChanged(h.value ? h.value[0] : undefined, deps)) {
	    h.value = [deps, fn()];
	  }

	  return h.value[1];
	}
	/**
	 * Runs a callback function when a dependent changes.
	 * @entry
	 * @template P
	 * @param {function():Promise<P>} factory - The factory function that calls the promise.
	 * @param {Array<any>=} deps - The dependencies.
	 * @returns {Array<P,Error>} The resolved value.
	 * @example
	 * import { usePromise } from '@nebula.js/stardust';
	 * import { useModel } from '@nebula.js/stardust';
	 * // ...
	 * const model = useModel();
	 * const [resolved, rejected] = usePromise(() => model.getLayout(), []);
	 */

	function usePromise(p, deps) {
	  const [obj, setObj] = useState(() => ({
	    resolved: undefined,
	    rejected: undefined,
	    state: 'pending'
	  }));
	  const h = getHook(++currentIndex);

	  if (!h.component) {
	    h.component = currentComponent;
	  }

	  useLayoutEffect(() => {
	    let canceled = false;

	    h.teardown = () => {
	      canceled = true;
	      h.teardown = null;

	      const idx = h.component.__hooks.pendingPromises.indexOf(h);

	      if (idx > -1) {
	        h.component.__hooks.pendingPromises.splice(idx, 1);
	      }
	    }; // setObj({
	    //   ...obj,
	    //   state: 'pending',
	    // });


	    p().then(v => {
	      if (canceled) {
	        return;
	      }

	      h.teardown && h.teardown();
	      setObj({
	        resolved: v,
	        rejected: undefined,
	        state: 'resolved'
	      });
	    }).catch(e => {
	      if (canceled) {
	        return;
	      }

	      h.teardown && h.teardown();
	      setObj({
	        resolved: undefined,
	        rejected: e,
	        state: 'resolved'
	      });
	    });

	    h.component.__hooks.pendingPromises.push(h);

	    return () => {
	      h.teardown && h.teardown();
	    };
	  }, deps);
	  return [obj.resolved, obj.rejected];
	} // ---- composed hooks ------

	/**
	 * Gets the HTMLElement this visualization is rendered into.
	 * @entry
	 * @returns {HTMLElement}
	 * @example
	 * import { useElement } from '@nebula.js/stardust';
	 * // ...
	 * const el = useElement();
	 * el.innerHTML = 'Hello!';
	 */

	function useElement() {
	  return useInternalContext('element');
	}
	/**
	 * @interface Rect
	 * @property {number} top
	 * @property {number} left
	 * @property {number} width
	 * @property {number} height
	 */

	/**
	 * Gets the size of the HTMLElement the visualization is rendered into.
	 * @entry
	 * @returns {Rect} The size of the element.
	 * @example
	 * import { useRect } from '@nebula.js/stardust';
	 * // ...
	 * const rect = useRect();
	 * useEffect(() => {
	 *   console.log('resize');
	 * }, [rect.width, rect.height])
	 */

	function useRect() {
	  const element = useElement();
	  const ref = currentComponent.__hooks.resizer;
	  const [rect, setRect] = useState(() => {
	    const {
	      left,
	      top,
	      width,
	      height
	    } = element.getBoundingClientRect();
	    return {
	      left,
	      top,
	      width,
	      height
	    };
	  });
	  ref.current = rect;

	  if (ref.setters.indexOf(setRect) === -1) {
	    ref.setters.push(setRect);
	  } // a forced resize should alwas update size regardless of whether ResizeObserver is available


	  if (ref.update && ref.resize) {
	    ref.update = false;
	    ref.resize();
	  }

	  useLayoutEffect(() => {
	    if (ref.initiated) {
	      return undefined;
	    }

	    ref.initiated = true;

	    const handleResize = () => {
	      // TODO - should we really care about left/top?
	      const {
	        left,
	        top,
	        width,
	        height
	      } = element.getBoundingClientRect();
	      const r = ref.current;

	      if (r.width !== width || r.height !== height || r.left !== left || r.top !== top) {
	        ref.setters.forEach(setR => setR({
	          left,
	          top,
	          width,
	          height
	        }));
	      }
	    };

	    ref.resize = () => {
	      handleResize();
	    }; // if component is configured with explicitResize, then we skip the
	    // size observer and let the user control the resize themselves


	    if (ref.explicitResize) {
	      return () => {
	        ref.resize = undefined;
	      };
	    } // TODO - document that ResizeObserver needs to be polyfilled by the user
	    // if they want auto resize to work


	    if (typeof ResizeObserver === 'function') {
	      let resizeObserver = new ResizeObserver(handleResize);
	      resizeObserver.observe(element);
	      return () => {
	        resizeObserver.unobserve(element);
	        resizeObserver.disconnect(element);
	        resizeObserver = null;
	        ref.resize = undefined;
	      };
	    }

	    return undefined;
	  }, [element]);
	  return rect;
	}
	/**
	 * Gets the layout of the generic object associated with this visualization.
	 * @entry
	 * @returns {EngineAPI.IGenericObjectLayout}
	 * @example
	 * import { useLayout } from '@nebula.js/stardust';
	 * // ...
	 * const layout = useLayout();
	 * console.log(layout);
	 */

	function useLayout() {
	  return useInternalContext('layout');
	}
	/**
	 * Gets the layout of the generic object associated with this visualization.
	 *
	 * Unlike the regular layout, a _stale_ layout is not changed when a generic object enters
	 * the modal state. This is mostly notable in that `qSelectionInfo.qInSelections` in the layout is
	 * always `false`.
	 * The returned value from `useStaleLayout()` and `useLayout()` are identical when the object
	 * is not in a modal state.
	 * @entry
	 * @returns {EngineAPI.IGenericObjectLayout}
	 * @example
	 * import { useStaleLayout } from '@nebula.js/stardust';
	 * // ...
	 * const staleLayout = useStaleLayout();
	 * console.log(staleLayout);
	 */

	function useStaleLayout() {
	  const layout = useInternalContext('layout');
	  const [ref] = useState({
	    current: layout
	  });

	  if (!layout.qSelectionInfo || !layout.qSelectionInfo.qInSelections) {
	    ref.current = layout;
	  }

	  return ref.current;
	}
	/**
	 * Gets the layout of the app associated with this visualization.
	 * @entry
	 * @returns {EngineAPI.INxAppLayout} The app layout
	 * @example
	 * import { useAppLayout } from '@nebula.js/stardust';
	 * // ...
	 * const appLayout = useAppLayout();
	 * console.log(appLayout.qLocaleInfo);
	 */

	function useAppLayout() {
	  return useInternalContext('appLayout');
	}
	/**
	 * Gets the generic object API of the generic object connected to this visualization.
	 * @entry
	 * @returns {EngineAPI.IGenericObject|undefined}
	 * @example
	 * import { useModel } from '@nebula.js/stardust';
	 * // ...
	 * const model = useModel();
	 * useEffect(() => {
	 *   model.getInfo().then(info => {
	 *     console.log(info);
	 *   })
	 * }, []);
	 */

	function useModel() {
	  const model = useInternalContext('model');
	  return model && model.session ? model : undefined;
	}
	/**
	 * Gets the doc API.
	 * @entry
	 * @returns {EngineAPI.IApp|undefined} The doc API.
	 * @example
	 * import { useApp } from '@nebula.js/stardust';
	 * // ...
	 * const app = useApp();
	 * useEffect(() => {
	 *   app.getAllInfos().then(infos => {
	 *     console.log(infos);
	 *   })
	 * }, []);
	 */

	function useApp() {
	  const app = useInternalContext('app');
	  return app && app.session ? app : undefined;
	}
	/**
	 * Gets the global API.
	 * @entry
	 * @returns {EngineAPI.IGlobal|undefined} The global API.
	 * @example
	 * import { useGlobal } from '@nebula.js/stardust';
	 *
	 * // ...
	 * const g = useGlobal();
	 * useEffect(() => {
	 *   g.engineVersion().then(version => {
	 *     console.log(version);
	 *   })
	 * }, []);
	 */

	function useGlobal() {
	  const global = useInternalContext('global');
	  return global && global.session ? global : undefined;
	}
	/**
	 * Gets the object selections.
	 * @entry
	 * @returns {ObjectSelections} The object selections.
	 * @example
	 * import { useSelections } from '@nebula.js/stardust';
	 * import { useElement } from '@nebula.js/stardust';
	 * import { useEffect } from '@nebula.js/stardust';
	 * // ...
	 * const selections = useSelections();
	 * const element = useElement();
	 * useEffect(() => {
	 *   const onClick = () => {
	 *     selections.begin('/qHyperCubeDef');
	 *   };
	 *   element.addEventListener('click', onClick);
	 *   return () => {
	 *     element.removeEventListener('click', onClick);
	 *   };
	 * }, []);
	 */

	function useSelections() {
	  return useInternalContext('selections');
	}
	/**
	 * Gets the theme.
	 * @entry
	 * @returns {Theme} The theme.
	 * @example
	 * import { useTheme } from '@nebula.js/stardust';
	 *
	 * const theme = useTheme();
	 * console.log(theme.getContrastinColorTo('#ff0000'));
	 */

	function useTheme() {
	  return useInternalContext('theme');
	}
	/**
	 * Gets the embed instance used.
	 * @entry
	 * @experimental
	 * @since 1.7.0
	 * @returns {Embed} The embed instance used.
	 * @example
	 * import { useEmbed } from '@nebula.js/stardust';
	 *
	 * const embed = useEmbed();
	 * embed.render(...)
	 */

	function useEmbed() {
	  return useInternalContext('nebbie');
	}
	/**
	 * Gets the translator.
	 * @entry
	 * @returns {Translator} The translator.
	 * @example
	 * import { useTranslator } from '@nebula.js/stardust';
	 * // ...
	 * const translator = useTranslator();
	 * console.log(translator.get('SomeString'));
	 */

	function useTranslator() {
	  return useInternalContext('translator');
	}
	/**
	 * Gets the device type. ('touch' or 'desktop')
	 * @entry
	 * @returns {string} device type.
	 * @example
	 * import { useDeviceType } from '@nebula.js/stardust';
	 * // ...
	 * const deviceType = useDeviceType();
	 * if (deviceType === 'touch') { ... };
	 */

	function useDeviceType() {
	  return useInternalContext('deviceType');
	}
	/**
	 * Gets the array of plugins provided when rendering the visualization.
	 * @entry
	 * @returns {Plugin[]} array of plugins.
	 * @example
	 * // provide plugins that can be used when rendering
	 * embed(app).render({
	 *   element,
	 *   type: 'my-chart',
	 *   plugins: [plugin]
	 * });
	 *
	 * @example
	 * // It's up to the chart implementation to make use of plugins in any way
	 * import { usePlugins } from '@nebula.js/stardust';
	 * // ...
	 * const plugins = usePlugins();
	 * plugins.forEach((plugin) => {
	 *   // Invoke plugin
	 *   plugin.fn();
	 * });
	 */

	function usePlugins() {
	  return useInternalContext('plugins');
	}
	/**
	 * @template A
	 * @interface ActionDefinition
	 * @property {A} action
	 * @property {boolean=} hidden
	 * @property {boolean=} disabled
	 * @property {object=} icon
	 * @property {string} [icon.viewBox="0 0 16 16"]
	 * @property {Array<object>} icon.shapes
	 * @property {string} icon.shapes[].type
	 * @property {object=} icon.shapes[].attrs
	 */

	/**
	 * Registers a custom action.
	 * @entry
	 * @template A
	 * @param {function():ActionDefinition<A>} factory
	 * @param {Array<any>=} deps
	 * @returns {A}
	 *
	 * @example
	 * import { useAction } from '@nebula.js/stardust';
	 * // ...
	 * const [zoomed, setZoomed] = useState(false);
	 * const act = useAction(() => ({
	 *   hidden: false,
	 *   disabled: zoomed,
	 *   action() {
	 *     setZoomed(prev => !prev);
	 *   },
	 *   icon: {}
	 * }), [zoomed]);
	 */

	function useAction(fn, deps) {
	  const [ref] = useState({
	    action() {
	      ref._config.action.call(null);
	    }

	  });

	  if (!ref.component) {
	    ref.component = currentComponent;

	    currentComponent.__hooks.actions.list.push(ref);
	  }

	  useMemo(() => {
	    const a = fn();
	    ref._config = a;
	    ref.active = a.active || false;
	    ref.disabled = a.disabled || false;
	    ref.hidden = a.hidden || false;
	    ref.label = a.label || '';
	    ref.getSvgIconShape = a.icon ? () => a.icon : undefined;
	    ref.key = a.key || ref.component.__hooks.actions.list.length;
	    ref.component.__hooks.actions.changed = true;
	  }, deps);
	  return ref.action;
	}
	/**
	 * @interface Constraints
	 * @property {boolean=} passive Whether or not passive constraints are on. Should block any passive interaction by users, ie: tooltips
	 * @property {boolean=} active Whether or not active constraints are on. Should block any active interaction by users, ie: scroll, click
	 * @property {boolean=} select Whether or not active select are on. Should block any selection action. Implied when active is true.
	 */

	/**
	 * Gets the desired constraints that should be applied when rendering the visualization.
	 *
	 * The constraints are set on the embed configuration before the visualization is rendered
	 * and should respected by you when implementing the visualization.
	 * @entry
	 * @returns {Constraints}
	 * @example
	 * // configure embed to disallow active interactions when rendering
	 * embed(app, {
	 *  context: {
	 *    constraints: {
	 *      active: true, // do not allow interactions
	 *    }
	 *  }
	 * }).render({ element, id: 'sdfsdf' });
	 *
	 * @example
	 * import { useConstraints } from '@nebula.js/stardust';
	 * // ...
	 * const constraints = useConstraints();
	 * useEffect(() => {
	 *   if (constraints.active) {
	 *     // do not add any event listener if active constraint is set
	 *     return undefined;
	 *   }
	 *   const listener = () => {};
	 *   element.addEventListener('click', listener);
	 *   return () => {
	 *     element.removeEventListener('click', listener);
	 *   };
	 * }, [constraints])
	 *
	 */

	function useConstraints() {
	  return useInternalContext('constraints');
	}
	/**
	 * Gets the options object provided when rendering the visualization.
	 *
	 * This is an empty object by default but enables customization of the visualization through this object.
	 * Options are different from setting properties on the generic object in that options
	 * are only temporary settings applied to the visualization when rendered.
	 *
	 * You have the responsibility to provide documentation of the options you support, if any.
	 * @entry
	 * @returns {object}
	 *
	 * @example
	 * // when embedding the visualization, anything can be set in options
	 * embed(app).render({
	 *   element,
	 *   type: 'my-chart',
	 *   options: {
	 *     showNavigation: true,
	 *   }
	 * });
	 *
	 * @example
	 * // it is up to you use and implement the provided options
	 * import { useOptions } from '@nebula.js/stardust';
	 * import { useEffect } from '@nebula.js/stardust';
	 * // ...
	 * const options = useOptions();
	 * useEffect(() => {
	 *   if (!options.showNavigation) {
	 *     // hide navigation
	 *   } else {
	 *     // show navigation
	 *   }
	 * }, [options.showNavigation]);
	 *
	 */

	function useOptions() {
	  return useInternalContext('options');
	}
	/**
	 * TODO before making public - expose getImperativeHandle on Viz
	 * Exposes an API to the external environment.
	 *
	 * This is an empty object by default, but enables you to provide a custom API of your visualization to
	 * make it possible to control after it has been rendered.
	 *
	 * You can only use this hook once, calling it more than once is considered an error.
	 * @entry
	 * @private
	 * @template T
	 * @param {function():T} factory
	 * @param {Array<any>=} deps
	 * @example
	 * import { useImperativeHandle } form '@nebula.js/stardust';
	 * // ...
	 * useImperativeHandle(() => ({
	 *   resetZoom() {
	 *     setZoomed(false);
	 *   }
	 * }));
	 *
	 * @example
	 * // when embedding the visualization, you can get a handle to this API
	 * // and use it to control the visualization
	 * const ctl = await embed(app).render({
	 *   element,
	 *   type: 'my-chart',
	 * });
	 * ctl.getImperativeHandle().resetZoom();
	 */

	function useImperativeHandle(fn, deps) {
	  const h = getHook(++currentIndex);

	  if (!h.imperative) {
	    {
	      if (currentComponent.__hooks.imperativeHandle) {
	        throw new Error('useImperativeHandle already used.');
	      }
	    }

	    h.imperative = true;
	  }

	  if (depsChanged(h.value ? h.value[0] : undefined, deps)) {
	    const v = fn();
	    h.value = [deps, v];
	    currentComponent.__hooks.imperativeHandle = v;
	  }
	}
	/**
	 * Registers a callback that is called when a snapshot is taken.
	 * @entry
	 * @param {function(EngineAPI.IGenericObjectLayout): Promise<EngineAPI.IGenericObjectLayout>} snapshotCallback
	 * @example
	 * import { onTakeSnapshot } from '@nebula.js/stardust';
	 * import { useState } from '@nebula.js/stardust';
	 * import { useLayout } from '@nebula.js/stardust';
	 *
	 * const layout = useLayout();
	 * const [zoomed] = useState(layout.isZoomed || false);
	 *
	 * onTakeSnapshot((copyOfLayout) => {
	 *   copyOfLayout.isZoomed = zoomed;
	 *   return Promise.resolve(copyOfLayout);
	 * });
	 */

	function onTakeSnapshot(cb) {
	  const h = getHook(++currentIndex);

	  if (!h.value) {
	    h.value = 1;

	    currentComponent.__hooks.snaps.push(h);
	  }

	  h.fn = cb;
	}
	/**
	 * @interface RenderState
	 * @property {any} pending
	 * @property {any} restore
	 */

	/**
	 * Gets render state instance.
	 *
	 * Used to update properties and get a new layout without triggering onInitialRender.
	 * @entry
	 * @experimental
	 * @returns {RenderState} The render state.
	 * @example
	 * import { useRenderState } from '@nebula.js/stardust';
	 *
	 * const renderState = useRenderState();
	 * useState(() => {
	 *   if(needProperteisUpdate(...)) {
	 *      useRenderState.pending();
	 *      updateProperties(...);
	 *   } else {
	 *      useRenderState.restore();
	 *      ...
	 *   }
	 * }, [...]);
	 */

	function useRenderState() {
	  getHook(++currentIndex);
	  const hooks = currentComponent.__hooks;
	  return {
	    pending: () => {
	      hooks.waitForData = true;
	    },
	    restore: () => {
	      hooks.waitForData = false;
	    }
	  };
	}
	/**
	 * @experimental
	 * @interface Keyboard
	 * @property {boolean} enabled Whether or not Nebula handles keyboard navigation or not.
	 * @property {boolean} active Set to true when the chart is activated, ie a user tabs to the chart and presses Enter or Space.
	 * @property {function=} blur Function used by the visualization to tell Nebula to it wants to relinquish focus
	 * @property {function=} focus Function used by the visualization to tell Nebula to it wants focus
	 * @property {function=} focusSelection Function used by the visualization to tell Nebula to focus the selection toolbar
	 */

	/**
	 * Gets the desired keyboard settings and status to applied when rendering the visualization.
	 * A visualization should in general only have tab stops if either `keyboard.enabled` is false or if active is true.
	 * This means that either Nebula isn't configured to handle keyboard input or the chart is currently focused.
	 * Enabling or disabling keyboardNavigation are set on the embed configuration and
	 * should be respected by the visualization.
	 * @entry
	 * @returns {Keyboard}
	 * @example
	 * // configure nebula to enable navigation between charts
	 * embed(app, {
	 *   context: {
	 *     keyboardNavigation: true, // tell Nebula to handle navigation
	 *   }
	 * }).render({ element, id: 'sdfsdf' });
	 *
	 * @example
	 * import { useKeyboard } from '@nebula.js/stardust';
	 * // ...
	 * const keyboard = useKeyboard();
	 * useEffect(() => {
	 *  // Set a tab stop on our button if in focus or if Nebulas navigation is disabled
	 *  button.setAttribute('tabIndex', keyboard.active || !keyboard.enabled ? 0 : -1);
	 *  // If navigation is enabled and focus has shifted, lets focus the button
	 *  keyboard.enabled && keyboard.active && button.focus();
	 * }, [keyboard])
	 *
	 */

	function useKeyboard() {
	  const keyboardNavigation = useInternalContext('keyboardNavigation');
	  const focusHandler = useInternalContext('focusHandler');

	  if (!currentComponent.__hooks.accessibility.exitFunction) {
	    const exitFunction = function (resetFocus) {
	      const acc = this.__hooks.accessibility;

	      if (acc.enabled && acc.active) {
	        blur(this);
	        focusHandler && focusHandler.blurCallback && focusHandler.blurCallback(resetFocus);
	      }
	    }.bind(currentComponent);

	    currentComponent.__hooks.accessibility.exitFunction = exitFunction;

	    const focusFunction = function () {
	      const acc = this.__hooks.accessibility;

	      if (acc.enabled && !acc.active) {
	        focusHandler && focusHandler.blurCallback && focusHandler.blurCallback(false);
	        focus(this);
	      }
	    }.bind(currentComponent);

	    currentComponent.__hooks.accessibility.focusFunction = focusFunction;

	    const focusSelectionFunction = function (focusLast) {
	      const acc = this.__hooks.accessibility;

	      if (acc.enabled) {
	        focusHandler && focusHandler.focusToolbarButton && focusHandler.focusToolbarButton(focusLast);
	      }
	    }.bind(currentComponent);

	    currentComponent.__hooks.accessibility.focusSelectionFunction = focusSelectionFunction;
	  }

	  const focusFunc = currentComponent.__hooks.accessibility.focusFunction;
	  const exitFunc = currentComponent.__hooks.accessibility.exitFunction;
	  const focusSelectionFunc = currentComponent.__hooks.accessibility.focusSelectionFunction;
	  const [acc, setAcc] = useState({
	    active: false,
	    enabled: keyboardNavigation,
	    blur: exitFunc,
	    focus: focusFunc,
	    focusSelection: focusSelectionFunc
	  });
	  currentComponent.__hooks.accessibility.setter = setAcc;
	  currentComponent.__hooks.accessibility.enabled = keyboardNavigation;
	  useEffect(() => setAcc({
	    active: false,
	    enabled: keyboardNavigation,
	    blur: exitFunc,
	    focus: focusFunc,
	    focusSelection: focusSelectionFunc
	  }), [keyboardNavigation]);
	  return acc;
	}
	function focus(component) {
	  const acc = component.__hooks.accessibility;

	  if (acc.active) {
	    return;
	  }

	  acc.active = true;

	  if (acc && acc.setter) {
	    acc.setter({
	      active: true,
	      enabled: acc.enabled,
	      blur: acc.exitFunction,
	      focus: acc.focusFunction,
	      focusSelection: acc.focusSelectionFunction
	    });
	  }
	}
	function blur(component) {
	  const acc = component.__hooks.accessibility; // Incomplete/Invalid/Legacy viz hasn't been initialized with hooks

	  if (!acc || !acc.active) {
	    return;
	  }

	  acc.active = false;

	  if (acc && acc.setter) {
	    acc.setter({
	      active: false,
	      enabled: acc.enabled,
	      blur: acc.exitFunction,
	      focus: acc.focusFunction,
	      focusSelection: acc.focusSelectionFunction
	    });
	  }
	}

	const defaultComponent = {
	  app: null,
	  model: null,
	  actions: null,
	  selections: null,
	  created: () => {},
	  mounted: () => {},
	  render: () => {},
	  resize: () => {},
	  willUnmount: () => {},
	  destroy: () => {},
	  emit: () => {},
	  getViewState: () => {},

	  // temporary
	  observeActions() {},

	  setSnapshotData: snapshot => Promise.resolve(snapshot)
	};
	const reservedKeys = Object.keys(defaultComponent);

	const mixin = obj => {
	  /* eslint no-param-reassign: 0 */
	  Object.keys(nodeEventEmitter.prototype).forEach(key => {
	    obj[key] = nodeEventEmitter.prototype[key];
	  });
	  nodeEventEmitter.init(obj);
	  return obj;
	};

	function createWithHooks(generator, opts, galaxy) {
	  {
	    if (generator.component.run !== run) {
	      // eslint-disable-next-line no-console
	      console.warn('Detected multiple supernova modules, this might cause problems.');
	    }
	  }

	  const qGlobal = opts.app && opts.app.session ? opts.app.session.getObjectApi({
	    handle: -1
	  }) : undefined; // use a deep comparison for 'small' objects

	  let hasRun = false;
	  const current = {};
	  const deepCheck = ['appLayout', 'constraints'];
	  const forcedConstraints = {}; // select should be a constraint when a real model is not available

	  if (!opts.model || !opts.model.session) {
	    forcedConstraints.select = true;
	  }

	  const c = {
	    context: {
	      // static values that are not expected to
	      // change during the component's life
	      // --------------------
	      model: opts.model,
	      app: opts.app,
	      global: qGlobal,
	      selections: opts.selections,
	      nebbie: opts.nebbie,
	      element: undefined,
	      // set on mount
	      // ---- singletons ----
	      deviceType: galaxy.deviceType,
	      theme: undefined,
	      translator: galaxy.translator,
	      // --- dynamic values ---
	      layout: {},
	      appLayout: {},
	      keyboardNavigation: opts.keyboardNavigation,
	      focusHandler: opts.focusHandler,
	      constraints: forcedConstraints,
	      options: {},
	      plugins: []
	    },
	    fn: generator.component.fn,

	    created() {},

	    mounted(element) {
	      this.context.element = element;
	      generator.component.initiate(c, {
	        explicitResize: !!opts.explicitResize
	      });
	    },

	    render(r) {
	      let changed = !hasRun || false;

	      if (r) {
	        if (r.layout && r.layout !== this.context.layout) {
	          changed = true;
	          this.context.layout = r.layout;
	        }

	        if (r.context && r.context.theme) {
	          // changed is set further down only if the name is different
	          this.context.theme = r.context.theme;
	        } // false equals undefined, so we to cast to bool here


	        if (r.context && !!r.context.keyboardNavigation !== !!this.context.keyboardNavigation) {
	          this.context.keyboardNavigation = !!r.context.keyboardNavigation;
	          changed = true;
	        }

	        if (r.context && r.context.focusHandler) {
	          // Needs to be added here due to how the client renders
	          this.context.focusHandler = r.context.focusHandler;
	        }

	        if (r.options) {
	          // options could contain anything including methods, classes, cyclical references
	          // so we can't use JSON parse for comparison.
	          // but we can do a shallow reference check on the first level to check if
	          // options have changed. if it has changed then create a new reference for
	          // the options object to ensure callbacks are triggered
	          const op = {};
	          let opChanged = false;
	          Object.keys(r.options).forEach(key => {
	            op[key] = r.options[key];

	            if (this.context.options[key] !== r.options[key]) {
	              opChanged = true;
	            }
	          });

	          if (opChanged) {
	            this.context.options = op;
	            changed = true;
	          }
	        }

	        if (r.plugins) {
	          let pluginsChanged = this.context.plugins.length !== r.plugins.length;
	          r.plugins.forEach((plugin, index) => {
	            if (this.context.plugins[index] !== plugin) {
	              pluginsChanged = true;
	            }
	          });

	          if (pluginsChanged) {
	            this.context.plugins = [...r.plugins];
	            changed = true;
	          }
	        } // do a deep check on 'small' objects


	        deepCheck.forEach(key => {
	          const ref = r.context;

	          if (ref && Object.prototype.hasOwnProperty.call(ref, key)) {
	            let s = JSON.stringify(ref[key]);

	            if (key === 'constraints') {
	              s = JSON.stringify(_objectSpread2(_objectSpread2({}, ref[key]), forcedConstraints));
	            }

	            if (s !== current[key]) {
	              changed = true;
	              current[key] = s; // create new object reference to ensure useEffect/useMemo/useCallback
	              // is triggered if the object is used a dependency

	              this.context[key] = JSON.parse(s);
	            }
	          }
	        });
	      } else {
	        changed = true;
	      } // theme and translator are singletons so their reference won't change, we do
	      // however need to observe if their internal content has changed (name, language) and
	      // trigger an update if they have


	      if (this.context.theme && this.context.theme.name() !== current.themeName) {
	        changed = true;
	        current.themeName = this.context.theme.name();
	      }

	      if (this.context.translator.language() !== current.language) {
	        changed = true;
	        current.language = c.context.translator.language();
	      } // TODO - observe what hooks are used, and only trigger run if values associated
	      // with those hooks have changed, i.e. if layout has changed but useLayout() isn't called
	      // then there is no need to call run


	      if (changed) {
	        hasRun = true;
	        this.currentResult = generator.component.run(this);
	        return this.currentResult;
	      }

	      return this.currentResult || Promise.resolve();
	    },

	    resize() {
	      // resize should never really by necesseary since the ResizeObserver
	      // in useRect observes changes on the size of the object, the only time it might
	      // be necessary is on IE 11 when the object is resized without the window changing size
	      generator.component.updateRectOnNextRun(this);
	      return this.render();
	    },

	    willUnmount() {
	      generator.component.teardown(this);
	    },

	    setSnapshotData(layout) {
	      return generator.component.runSnaps(this, layout);
	    },

	    focus() {
	      generator.component.focus(this);
	    },

	    blur() {
	      generator.component.blur(this);
	    },

	    getImperativeHandle() {
	      return generator.component.getImperativeHandle(this);
	    },

	    destroy() {},

	    observeActions(callback) {
	      generator.component.observeActions(this, callback);
	    },

	    isHooked: true
	  };
	  deepCheck.forEach(key => {
	    current[key] = JSON.stringify(c.context[key]);
	  });
	  current.themeName = c.context.theme ? c.context.theme.name() : undefined;
	  current.language = c.context.translator ? c.context.translator.language() : undefined;
	  Object.assign(c, {
	    selections: opts.selections
	  });
	  return [c, null];
	}

	function createClassical(generator, opts) {
	  {
	    // eslint-disable-next-line no-console
	    console.warn('Obsolete API - time to get hooked!');
	  }

	  const componentInstance = _objectSpread2({}, defaultComponent);

	  mixin(componentInstance);
	  const userInstance = {
	    emit() {
	      componentInstance.emit(...arguments);
	    }

	  };
	  Object.keys(generator.component || {}).forEach(key => {
	    if (reservedKeys.indexOf(key) !== -1) {
	      componentInstance[key] = generator.component[key].bind(userInstance);
	    } else {
	      userInstance[key] = generator.component[key];
	    }
	  });
	  const hero = actionhero({
	    sn: generator,
	    component: userInstance
	  });
	  const qGlobal = opts.app && opts.app.session ? opts.app.session.getObjectApi({
	    handle: -1
	  }) : null;
	  Object.assign(userInstance, {
	    model: opts.model,
	    app: opts.app,
	    global: qGlobal,
	    selections: opts.selections,
	    actions: hero.actions
	  });
	  Object.assign(componentInstance, {
	    actions: hero.actions,
	    model: opts.model,
	    app: opts.app,
	    selections: opts.selections
	  });
	  return [componentInstance, hero];
	}

	function create$2(generator, opts, galaxy) {
	  if (typeof generator.component === 'function') {
	    generator.component = hook(generator.component);
	  }

	  const [componentInstance, hero] = generator.component && generator.component.__hooked ? createWithHooks(generator, opts, galaxy) : createClassical(generator, opts);
	  const teardowns = [];

	  if (opts.model.__snInterceptor) {
	    // remove old hook - happens only when proper cleanup hasn't been done
	    opts.model.__snInterceptor.teardown();
	  }

	  if (generator.qae.properties.onChange) {
	    // TODO - handle multiple sn
	    // TODO - check privileges
	    opts.model.__snInterceptor = {
	      setProperties: opts.model.setProperties,
	      applyPatches: opts.model.applyPatches,
	      teardown: undefined
	    };

	    opts.model.setProperties = function setProperties() {
	      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
	        args[_key] = arguments[_key];
	      }

	      generator.qae.properties.onChange.call({
	        model: opts.model
	      }, ...args);
	      return opts.model.__snInterceptor.setProperties.call(this, ...args);
	    };

	    opts.model.applyPatches = function applyPatches(qPatches, qSoftPatch) {
	      const method = qSoftPatch ? 'getEffectiveProperties' : 'getProperties';
	      return opts.model[method]().then(currentProperties => {
	        // apply patches to current props
	        const original = JSONPatch.clone(currentProperties);
	        const patches = qPatches.map(p => ({
	          op: p.qOp,
	          value: JSON.parse(p.qValue),
	          path: p.qPath
	        }));
	        JSONPatch.apply(currentProperties, patches);
	        generator.qae.properties.onChange.call({
	          model: opts.model
	        }, currentProperties); // calculate new patches from after change

	        const newPatches = JSONPatch.generate(original, currentProperties).map(p => ({
	          qOp: p.op,
	          qValue: JSON.stringify(p.value),
	          qPath: p.path
	        }));
	        return opts.model.__snInterceptor.applyPatches.call(this, newPatches, qSoftPatch);
	      });
	    };

	    opts.model.__snInterceptor.teardown = () => {
	      opts.model.setProperties = opts.model.__snInterceptor.setProperties;
	      delete opts.model.__snInterceptor;
	    };

	    teardowns.push(opts.model.__snInterceptor.teardown);
	  }

	  return {
	    generator,
	    component: componentInstance,
	    selectionToolbar: {
	      items: hero ? hero.selectionToolbarItems : []
	    },

	    destroy() {
	      teardowns.forEach(t => t());
	    },

	    logicalSize: generator.definition.logicalSize || (() => false)
	  };
	}

	const noop = () => {};
	/**
	 * @function importProperties
	 * @description Imports properties for a chart with a hypercube.
	 * @since 1.1.0
	 * @param {Object} args
	 * @param {ExportFormat} args.exportFormat The export object which is the output of exportProperties.
	 * @param {Object=} args.initialProperties Initial properties of the target chart.
	 * @param {Object=} args.dataDefinition Data definition of the target chart.
	 * @param {Object=} args.defaultPropertyValues Default values for a number of properties of the target chart.
	 * @param {string} args.hypercubePath Reference to the qHyperCubeDef.
	 * @returns {Object} A properties tree
	 */

	/**
	 * @function exportProperties
	 * @description Exports properties for a chart with a hypercube.
	 * @since 1.1.0
	 * @param {Object} args
	 * @param {Object} args.propertyTree
	 * @param {string} args.hypercubePath Reference to the qHyperCubeDef.
	 * @returns {ExportFormat}
	 */

	/**
	 * @interface QAEDefinition
	 * @property {EngineAPI.IGenericObjectProperties=} properties
	 * @property {object=} data
	 * @property {DataTarget[]} data.targets
	 * @property {importProperties=} importProperties
	 * @property {exportProperties=} exportProperties
	 */

	/**
	 * @interface DataTarget
	 * @property {string} path
	 * @property {FieldTarget<EngineAPI.INxDimension>=} dimensions
	 * @property {FieldTarget<EngineAPI.INxMeasure>=} measures
	 */

	/**
	 * @callback fieldTargetAddedCallback
	 * @template T
	 * @param {T} field
	 * @param {EngineAPI.IGenericObjectProperties} properties
	 */

	/**
	 * @callback fieldTargetRemovedCallback
	 * @template T
	 * @param {T} field
	 * @param {EngineAPI.IGenericObjectProperties} properties
	 * @param {number} index
	 */

	/**
	 * @interface FieldTarget
	 * @template T
	 * @property {function():number} [min]
	 * @property {function():number} [max]
	 * @property {fieldTargetAddedCallback<T>} [added]
	 * @property {fieldTargetRemovedCallback<T>} [removed]
	 */


	function fallback(x, value) {
	  if (typeof x === 'undefined') {
	    return () => value;
	  }

	  return () => x;
	}

	function defFn(input) {
	  const def = input || {};
	  return {
	    min: typeof def.min === 'function' ? def.min : fallback(def.min, 0),
	    max: typeof def.max === 'function' ? def.max : fallback(def.max, 1000),
	    added: def.added || def.add || noop,
	    // TODO - deprecate add in favour of added
	    description: def.description || noop,
	    moved: def.moved || def.move || noop,
	    removed: def.removed || def.remove || noop,
	    replaced: def.replaced || def.replace || noop,
	    isDefined: () => !!input
	  };
	}

	const resolveValue = (data, reference, defaultValue) => {
	  const steps = reference.split('/');
	  let dataContainer = data;

	  if (dataContainer === undefined) {
	    return defaultValue;
	  }

	  for (let i = 0; i < steps.length; ++i) {
	    if (steps[i] === '') {
	      continue; // eslint-disable-line no-continue
	    }

	    if (typeof dataContainer[steps[i]] === 'undefined') {
	      return defaultValue;
	    }

	    dataContainer = dataContainer[steps[i]];
	  }

	  return dataContainer;
	};

	function target(def) {
	  const propertyPath = def.path || '/qHyperCubeDef';
	  const layoutPath = propertyPath.slice(0, -3);

	  if (/\/(qHyperCube|qListObject)$/.test(layoutPath) === false) {
	    const d = layoutPath.includes('/qHyperCube') ? 'qHyperCubeDef' : 'qListObjectDef';
	    throw new Error("Incorrect definition for ".concat(d, " at ").concat(propertyPath, ". Valid paths include /qHyperCubeDef or /qListObjectDef, e.g. data/qHyperCubeDef"));
	  }

	  return {
	    propertyPath,
	    layoutPath,
	    resolveLayout: layout => resolveValue(layout, layoutPath, {}),
	    dimensions: defFn(def.dimensions),
	    measures: defFn(def.measures)
	  };
	}

	function qae() {
	  let def = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  let initial = def.properties || {};
	  let onChange;

	  if (def.properties && (def.properties.initial || def.properties.onChange)) {
	    initial = def.properties.initial;
	    onChange = def.properties.onChange;
	  }

	  const q = {
	    properties: {
	      initial,
	      onChange
	    },
	    data: {
	      targets: ((def.data || {}).targets || []).map(target)
	    },
	    exportProperties: def.exportProperties,
	    importProperties: def.importProperties
	  };
	  return q;
	}

	/**
	 * The entry point for defining a visualization.
	 * @interface Visualization
	 * @param {Galaxy} galaxy
	 * @returns {VisualizationDefinition}
	 * @example
	 * import { useElement, useLayout } from '@nebula.js/stardust';
	 *
	 * export default function() {
	 *   return {
	 *     qae: {
	 *       properties: {
	 *         dude: 'Heisenberg',
	 *       }
	 *     },
	 *     component() {
	 *       const el = useElement();
	 *       const layout = useLayout();
	 *       el.innerHTML = `What's my name? ${layout.dude}!!!`;
	 *     }
	 *   };
	 * }
	 */

	/**
	 * @interface VisualizationDefinition
	 * @property {QAEDefinition} qae
	 * @property {function():void} component
	 */

	/**
	 * @interface snGenerator
	 * @param {Visualization} Sn
	 * @param {Galaxy} galaxy
	 * @returns {generator}
	 * @private
	 */

	function generatorFn(UserSN, galaxy) {
	  let sn; // TODO validate galaxy API

	  if (typeof UserSN === 'function') {
	    sn = UserSN(galaxy);
	  } else {
	    sn = UserSN;
	  }
	  /**
	   * @alias generator
	   * @private
	   */


	  const generator =
	  /** @lends generator */
	  {
	    /**
	     * @type {QAE}
	     */
	    qae: qae(sn.qae),

	    /**
	     * @type {SnComponent}
	     */
	    component: sn.component || {},

	    /**
	     * @param {object} p
	     * @param {EnigmaAppModel} p.app
	     * @param {EnigmaObjectModel} p.model
	     * @param {ObjectSelections} p.selections
	     */
	    create(params) {
	      const ss = create$2(generator, params, galaxy);
	      return ss;
	    },

	    definition: {}
	  };
	  Object.keys(sn).forEach(key => {
	    if (!generator[key]) {
	      generator.definition[key] = sn[key];
	    }
	  });
	  return generator;
	}

	var semver = {exports: {}};

	(function (module, exports) {
		exports = module.exports = SemVer;

		var debug;
		/* istanbul ignore next */
		if (typeof process === 'object' &&
		    process.env &&
		    process.env.NODE_DEBUG &&
		    /\bsemver\b/i.test(process.env.NODE_DEBUG)) {
		  debug = function () {
		    var args = Array.prototype.slice.call(arguments, 0);
		    args.unshift('SEMVER');
		    console.log.apply(console, args);
		  };
		} else {
		  debug = function () {};
		}

		// Note: this is the semver.org version of the spec that it implements
		// Not necessarily the package version of this code.
		exports.SEMVER_SPEC_VERSION = '2.0.0';

		var MAX_LENGTH = 256;
		var MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER ||
		  /* istanbul ignore next */ 9007199254740991;

		// Max safe segment length for coercion.
		var MAX_SAFE_COMPONENT_LENGTH = 16;

		// The actual regexps go on exports.re
		var re = exports.re = [];
		var src = exports.src = [];
		var t = exports.tokens = {};
		var R = 0;

		function tok (n) {
		  t[n] = R++;
		}

		// The following Regular Expressions can be used for tokenizing,
		// validating, and parsing SemVer version strings.

		// ## Numeric Identifier
		// A single `0`, or a non-zero digit followed by zero or more digits.

		tok('NUMERICIDENTIFIER');
		src[t.NUMERICIDENTIFIER] = '0|[1-9]\\d*';
		tok('NUMERICIDENTIFIERLOOSE');
		src[t.NUMERICIDENTIFIERLOOSE] = '[0-9]+';

		// ## Non-numeric Identifier
		// Zero or more digits, followed by a letter or hyphen, and then zero or
		// more letters, digits, or hyphens.

		tok('NONNUMERICIDENTIFIER');
		src[t.NONNUMERICIDENTIFIER] = '\\d*[a-zA-Z-][a-zA-Z0-9-]*';

		// ## Main Version
		// Three dot-separated numeric identifiers.

		tok('MAINVERSION');
		src[t.MAINVERSION] = '(' + src[t.NUMERICIDENTIFIER] + ')\\.' +
		                   '(' + src[t.NUMERICIDENTIFIER] + ')\\.' +
		                   '(' + src[t.NUMERICIDENTIFIER] + ')';

		tok('MAINVERSIONLOOSE');
		src[t.MAINVERSIONLOOSE] = '(' + src[t.NUMERICIDENTIFIERLOOSE] + ')\\.' +
		                        '(' + src[t.NUMERICIDENTIFIERLOOSE] + ')\\.' +
		                        '(' + src[t.NUMERICIDENTIFIERLOOSE] + ')';

		// ## Pre-release Version Identifier
		// A numeric identifier, or a non-numeric identifier.

		tok('PRERELEASEIDENTIFIER');
		src[t.PRERELEASEIDENTIFIER] = '(?:' + src[t.NUMERICIDENTIFIER] +
		                            '|' + src[t.NONNUMERICIDENTIFIER] + ')';

		tok('PRERELEASEIDENTIFIERLOOSE');
		src[t.PRERELEASEIDENTIFIERLOOSE] = '(?:' + src[t.NUMERICIDENTIFIERLOOSE] +
		                                 '|' + src[t.NONNUMERICIDENTIFIER] + ')';

		// ## Pre-release Version
		// Hyphen, followed by one or more dot-separated pre-release version
		// identifiers.

		tok('PRERELEASE');
		src[t.PRERELEASE] = '(?:-(' + src[t.PRERELEASEIDENTIFIER] +
		                  '(?:\\.' + src[t.PRERELEASEIDENTIFIER] + ')*))';

		tok('PRERELEASELOOSE');
		src[t.PRERELEASELOOSE] = '(?:-?(' + src[t.PRERELEASEIDENTIFIERLOOSE] +
		                       '(?:\\.' + src[t.PRERELEASEIDENTIFIERLOOSE] + ')*))';

		// ## Build Metadata Identifier
		// Any combination of digits, letters, or hyphens.

		tok('BUILDIDENTIFIER');
		src[t.BUILDIDENTIFIER] = '[0-9A-Za-z-]+';

		// ## Build Metadata
		// Plus sign, followed by one or more period-separated build metadata
		// identifiers.

		tok('BUILD');
		src[t.BUILD] = '(?:\\+(' + src[t.BUILDIDENTIFIER] +
		             '(?:\\.' + src[t.BUILDIDENTIFIER] + ')*))';

		// ## Full Version String
		// A main version, followed optionally by a pre-release version and
		// build metadata.

		// Note that the only major, minor, patch, and pre-release sections of
		// the version string are capturing groups.  The build metadata is not a
		// capturing group, because it should not ever be used in version
		// comparison.

		tok('FULL');
		tok('FULLPLAIN');
		src[t.FULLPLAIN] = 'v?' + src[t.MAINVERSION] +
		                  src[t.PRERELEASE] + '?' +
		                  src[t.BUILD] + '?';

		src[t.FULL] = '^' + src[t.FULLPLAIN] + '$';

		// like full, but allows v1.2.3 and =1.2.3, which people do sometimes.
		// also, 1.0.0alpha1 (prerelease without the hyphen) which is pretty
		// common in the npm registry.
		tok('LOOSEPLAIN');
		src[t.LOOSEPLAIN] = '[v=\\s]*' + src[t.MAINVERSIONLOOSE] +
		                  src[t.PRERELEASELOOSE] + '?' +
		                  src[t.BUILD] + '?';

		tok('LOOSE');
		src[t.LOOSE] = '^' + src[t.LOOSEPLAIN] + '$';

		tok('GTLT');
		src[t.GTLT] = '((?:<|>)?=?)';

		// Something like "2.*" or "1.2.x".
		// Note that "x.x" is a valid xRange identifer, meaning "any version"
		// Only the first item is strictly required.
		tok('XRANGEIDENTIFIERLOOSE');
		src[t.XRANGEIDENTIFIERLOOSE] = src[t.NUMERICIDENTIFIERLOOSE] + '|x|X|\\*';
		tok('XRANGEIDENTIFIER');
		src[t.XRANGEIDENTIFIER] = src[t.NUMERICIDENTIFIER] + '|x|X|\\*';

		tok('XRANGEPLAIN');
		src[t.XRANGEPLAIN] = '[v=\\s]*(' + src[t.XRANGEIDENTIFIER] + ')' +
		                   '(?:\\.(' + src[t.XRANGEIDENTIFIER] + ')' +
		                   '(?:\\.(' + src[t.XRANGEIDENTIFIER] + ')' +
		                   '(?:' + src[t.PRERELEASE] + ')?' +
		                   src[t.BUILD] + '?' +
		                   ')?)?';

		tok('XRANGEPLAINLOOSE');
		src[t.XRANGEPLAINLOOSE] = '[v=\\s]*(' + src[t.XRANGEIDENTIFIERLOOSE] + ')' +
		                        '(?:\\.(' + src[t.XRANGEIDENTIFIERLOOSE] + ')' +
		                        '(?:\\.(' + src[t.XRANGEIDENTIFIERLOOSE] + ')' +
		                        '(?:' + src[t.PRERELEASELOOSE] + ')?' +
		                        src[t.BUILD] + '?' +
		                        ')?)?';

		tok('XRANGE');
		src[t.XRANGE] = '^' + src[t.GTLT] + '\\s*' + src[t.XRANGEPLAIN] + '$';
		tok('XRANGELOOSE');
		src[t.XRANGELOOSE] = '^' + src[t.GTLT] + '\\s*' + src[t.XRANGEPLAINLOOSE] + '$';

		// Coercion.
		// Extract anything that could conceivably be a part of a valid semver
		tok('COERCE');
		src[t.COERCE] = '(^|[^\\d])' +
		              '(\\d{1,' + MAX_SAFE_COMPONENT_LENGTH + '})' +
		              '(?:\\.(\\d{1,' + MAX_SAFE_COMPONENT_LENGTH + '}))?' +
		              '(?:\\.(\\d{1,' + MAX_SAFE_COMPONENT_LENGTH + '}))?' +
		              '(?:$|[^\\d])';
		tok('COERCERTL');
		re[t.COERCERTL] = new RegExp(src[t.COERCE], 'g');

		// Tilde ranges.
		// Meaning is "reasonably at or greater than"
		tok('LONETILDE');
		src[t.LONETILDE] = '(?:~>?)';

		tok('TILDETRIM');
		src[t.TILDETRIM] = '(\\s*)' + src[t.LONETILDE] + '\\s+';
		re[t.TILDETRIM] = new RegExp(src[t.TILDETRIM], 'g');
		var tildeTrimReplace = '$1~';

		tok('TILDE');
		src[t.TILDE] = '^' + src[t.LONETILDE] + src[t.XRANGEPLAIN] + '$';
		tok('TILDELOOSE');
		src[t.TILDELOOSE] = '^' + src[t.LONETILDE] + src[t.XRANGEPLAINLOOSE] + '$';

		// Caret ranges.
		// Meaning is "at least and backwards compatible with"
		tok('LONECARET');
		src[t.LONECARET] = '(?:\\^)';

		tok('CARETTRIM');
		src[t.CARETTRIM] = '(\\s*)' + src[t.LONECARET] + '\\s+';
		re[t.CARETTRIM] = new RegExp(src[t.CARETTRIM], 'g');
		var caretTrimReplace = '$1^';

		tok('CARET');
		src[t.CARET] = '^' + src[t.LONECARET] + src[t.XRANGEPLAIN] + '$';
		tok('CARETLOOSE');
		src[t.CARETLOOSE] = '^' + src[t.LONECARET] + src[t.XRANGEPLAINLOOSE] + '$';

		// A simple gt/lt/eq thing, or just "" to indicate "any version"
		tok('COMPARATORLOOSE');
		src[t.COMPARATORLOOSE] = '^' + src[t.GTLT] + '\\s*(' + src[t.LOOSEPLAIN] + ')$|^$';
		tok('COMPARATOR');
		src[t.COMPARATOR] = '^' + src[t.GTLT] + '\\s*(' + src[t.FULLPLAIN] + ')$|^$';

		// An expression to strip any whitespace between the gtlt and the thing
		// it modifies, so that `> 1.2.3` ==> `>1.2.3`
		tok('COMPARATORTRIM');
		src[t.COMPARATORTRIM] = '(\\s*)' + src[t.GTLT] +
		                      '\\s*(' + src[t.LOOSEPLAIN] + '|' + src[t.XRANGEPLAIN] + ')';

		// this one has to use the /g flag
		re[t.COMPARATORTRIM] = new RegExp(src[t.COMPARATORTRIM], 'g');
		var comparatorTrimReplace = '$1$2$3';

		// Something like `1.2.3 - 1.2.4`
		// Note that these all use the loose form, because they'll be
		// checked against either the strict or loose comparator form
		// later.
		tok('HYPHENRANGE');
		src[t.HYPHENRANGE] = '^\\s*(' + src[t.XRANGEPLAIN] + ')' +
		                   '\\s+-\\s+' +
		                   '(' + src[t.XRANGEPLAIN] + ')' +
		                   '\\s*$';

		tok('HYPHENRANGELOOSE');
		src[t.HYPHENRANGELOOSE] = '^\\s*(' + src[t.XRANGEPLAINLOOSE] + ')' +
		                        '\\s+-\\s+' +
		                        '(' + src[t.XRANGEPLAINLOOSE] + ')' +
		                        '\\s*$';

		// Star ranges basically just allow anything at all.
		tok('STAR');
		src[t.STAR] = '(<|>)?=?\\s*\\*';

		// Compile to actual regexp objects.
		// All are flag-free, unless they were created above with a flag.
		for (var i = 0; i < R; i++) {
		  debug(i, src[i]);
		  if (!re[i]) {
		    re[i] = new RegExp(src[i]);
		  }
		}

		exports.parse = parse;
		function parse (version, options) {
		  if (!options || typeof options !== 'object') {
		    options = {
		      loose: !!options,
		      includePrerelease: false
		    };
		  }

		  if (version instanceof SemVer) {
		    return version
		  }

		  if (typeof version !== 'string') {
		    return null
		  }

		  if (version.length > MAX_LENGTH) {
		    return null
		  }

		  var r = options.loose ? re[t.LOOSE] : re[t.FULL];
		  if (!r.test(version)) {
		    return null
		  }

		  try {
		    return new SemVer(version, options)
		  } catch (er) {
		    return null
		  }
		}

		exports.valid = valid;
		function valid (version, options) {
		  var v = parse(version, options);
		  return v ? v.version : null
		}

		exports.clean = clean;
		function clean (version, options) {
		  var s = parse(version.trim().replace(/^[=v]+/, ''), options);
		  return s ? s.version : null
		}

		exports.SemVer = SemVer;

		function SemVer (version, options) {
		  if (!options || typeof options !== 'object') {
		    options = {
		      loose: !!options,
		      includePrerelease: false
		    };
		  }
		  if (version instanceof SemVer) {
		    if (version.loose === options.loose) {
		      return version
		    } else {
		      version = version.version;
		    }
		  } else if (typeof version !== 'string') {
		    throw new TypeError('Invalid Version: ' + version)
		  }

		  if (version.length > MAX_LENGTH) {
		    throw new TypeError('version is longer than ' + MAX_LENGTH + ' characters')
		  }

		  if (!(this instanceof SemVer)) {
		    return new SemVer(version, options)
		  }

		  debug('SemVer', version, options);
		  this.options = options;
		  this.loose = !!options.loose;

		  var m = version.trim().match(options.loose ? re[t.LOOSE] : re[t.FULL]);

		  if (!m) {
		    throw new TypeError('Invalid Version: ' + version)
		  }

		  this.raw = version;

		  // these are actually numbers
		  this.major = +m[1];
		  this.minor = +m[2];
		  this.patch = +m[3];

		  if (this.major > MAX_SAFE_INTEGER || this.major < 0) {
		    throw new TypeError('Invalid major version')
		  }

		  if (this.minor > MAX_SAFE_INTEGER || this.minor < 0) {
		    throw new TypeError('Invalid minor version')
		  }

		  if (this.patch > MAX_SAFE_INTEGER || this.patch < 0) {
		    throw new TypeError('Invalid patch version')
		  }

		  // numberify any prerelease numeric ids
		  if (!m[4]) {
		    this.prerelease = [];
		  } else {
		    this.prerelease = m[4].split('.').map(function (id) {
		      if (/^[0-9]+$/.test(id)) {
		        var num = +id;
		        if (num >= 0 && num < MAX_SAFE_INTEGER) {
		          return num
		        }
		      }
		      return id
		    });
		  }

		  this.build = m[5] ? m[5].split('.') : [];
		  this.format();
		}

		SemVer.prototype.format = function () {
		  this.version = this.major + '.' + this.minor + '.' + this.patch;
		  if (this.prerelease.length) {
		    this.version += '-' + this.prerelease.join('.');
		  }
		  return this.version
		};

		SemVer.prototype.toString = function () {
		  return this.version
		};

		SemVer.prototype.compare = function (other) {
		  debug('SemVer.compare', this.version, this.options, other);
		  if (!(other instanceof SemVer)) {
		    other = new SemVer(other, this.options);
		  }

		  return this.compareMain(other) || this.comparePre(other)
		};

		SemVer.prototype.compareMain = function (other) {
		  if (!(other instanceof SemVer)) {
		    other = new SemVer(other, this.options);
		  }

		  return compareIdentifiers(this.major, other.major) ||
		         compareIdentifiers(this.minor, other.minor) ||
		         compareIdentifiers(this.patch, other.patch)
		};

		SemVer.prototype.comparePre = function (other) {
		  if (!(other instanceof SemVer)) {
		    other = new SemVer(other, this.options);
		  }

		  // NOT having a prerelease is > having one
		  if (this.prerelease.length && !other.prerelease.length) {
		    return -1
		  } else if (!this.prerelease.length && other.prerelease.length) {
		    return 1
		  } else if (!this.prerelease.length && !other.prerelease.length) {
		    return 0
		  }

		  var i = 0;
		  do {
		    var a = this.prerelease[i];
		    var b = other.prerelease[i];
		    debug('prerelease compare', i, a, b);
		    if (a === undefined && b === undefined) {
		      return 0
		    } else if (b === undefined) {
		      return 1
		    } else if (a === undefined) {
		      return -1
		    } else if (a === b) {
		      continue
		    } else {
		      return compareIdentifiers(a, b)
		    }
		  } while (++i)
		};

		SemVer.prototype.compareBuild = function (other) {
		  if (!(other instanceof SemVer)) {
		    other = new SemVer(other, this.options);
		  }

		  var i = 0;
		  do {
		    var a = this.build[i];
		    var b = other.build[i];
		    debug('prerelease compare', i, a, b);
		    if (a === undefined && b === undefined) {
		      return 0
		    } else if (b === undefined) {
		      return 1
		    } else if (a === undefined) {
		      return -1
		    } else if (a === b) {
		      continue
		    } else {
		      return compareIdentifiers(a, b)
		    }
		  } while (++i)
		};

		// preminor will bump the version up to the next minor release, and immediately
		// down to pre-release. premajor and prepatch work the same way.
		SemVer.prototype.inc = function (release, identifier) {
		  switch (release) {
		    case 'premajor':
		      this.prerelease.length = 0;
		      this.patch = 0;
		      this.minor = 0;
		      this.major++;
		      this.inc('pre', identifier);
		      break
		    case 'preminor':
		      this.prerelease.length = 0;
		      this.patch = 0;
		      this.minor++;
		      this.inc('pre', identifier);
		      break
		    case 'prepatch':
		      // If this is already a prerelease, it will bump to the next version
		      // drop any prereleases that might already exist, since they are not
		      // relevant at this point.
		      this.prerelease.length = 0;
		      this.inc('patch', identifier);
		      this.inc('pre', identifier);
		      break
		    // If the input is a non-prerelease version, this acts the same as
		    // prepatch.
		    case 'prerelease':
		      if (this.prerelease.length === 0) {
		        this.inc('patch', identifier);
		      }
		      this.inc('pre', identifier);
		      break

		    case 'major':
		      // If this is a pre-major version, bump up to the same major version.
		      // Otherwise increment major.
		      // 1.0.0-5 bumps to 1.0.0
		      // 1.1.0 bumps to 2.0.0
		      if (this.minor !== 0 ||
		          this.patch !== 0 ||
		          this.prerelease.length === 0) {
		        this.major++;
		      }
		      this.minor = 0;
		      this.patch = 0;
		      this.prerelease = [];
		      break
		    case 'minor':
		      // If this is a pre-minor version, bump up to the same minor version.
		      // Otherwise increment minor.
		      // 1.2.0-5 bumps to 1.2.0
		      // 1.2.1 bumps to 1.3.0
		      if (this.patch !== 0 || this.prerelease.length === 0) {
		        this.minor++;
		      }
		      this.patch = 0;
		      this.prerelease = [];
		      break
		    case 'patch':
		      // If this is not a pre-release version, it will increment the patch.
		      // If it is a pre-release it will bump up to the same patch version.
		      // 1.2.0-5 patches to 1.2.0
		      // 1.2.0 patches to 1.2.1
		      if (this.prerelease.length === 0) {
		        this.patch++;
		      }
		      this.prerelease = [];
		      break
		    // This probably shouldn't be used publicly.
		    // 1.0.0 "pre" would become 1.0.0-0 which is the wrong direction.
		    case 'pre':
		      if (this.prerelease.length === 0) {
		        this.prerelease = [0];
		      } else {
		        var i = this.prerelease.length;
		        while (--i >= 0) {
		          if (typeof this.prerelease[i] === 'number') {
		            this.prerelease[i]++;
		            i = -2;
		          }
		        }
		        if (i === -1) {
		          // didn't increment anything
		          this.prerelease.push(0);
		        }
		      }
		      if (identifier) {
		        // 1.2.0-beta.1 bumps to 1.2.0-beta.2,
		        // 1.2.0-beta.fooblz or 1.2.0-beta bumps to 1.2.0-beta.0
		        if (this.prerelease[0] === identifier) {
		          if (isNaN(this.prerelease[1])) {
		            this.prerelease = [identifier, 0];
		          }
		        } else {
		          this.prerelease = [identifier, 0];
		        }
		      }
		      break

		    default:
		      throw new Error('invalid increment argument: ' + release)
		  }
		  this.format();
		  this.raw = this.version;
		  return this
		};

		exports.inc = inc;
		function inc (version, release, loose, identifier) {
		  if (typeof (loose) === 'string') {
		    identifier = loose;
		    loose = undefined;
		  }

		  try {
		    return new SemVer(version, loose).inc(release, identifier).version
		  } catch (er) {
		    return null
		  }
		}

		exports.diff = diff;
		function diff (version1, version2) {
		  if (eq(version1, version2)) {
		    return null
		  } else {
		    var v1 = parse(version1);
		    var v2 = parse(version2);
		    var prefix = '';
		    if (v1.prerelease.length || v2.prerelease.length) {
		      prefix = 'pre';
		      var defaultResult = 'prerelease';
		    }
		    for (var key in v1) {
		      if (key === 'major' || key === 'minor' || key === 'patch') {
		        if (v1[key] !== v2[key]) {
		          return prefix + key
		        }
		      }
		    }
		    return defaultResult // may be undefined
		  }
		}

		exports.compareIdentifiers = compareIdentifiers;

		var numeric = /^[0-9]+$/;
		function compareIdentifiers (a, b) {
		  var anum = numeric.test(a);
		  var bnum = numeric.test(b);

		  if (anum && bnum) {
		    a = +a;
		    b = +b;
		  }

		  return a === b ? 0
		    : (anum && !bnum) ? -1
		    : (bnum && !anum) ? 1
		    : a < b ? -1
		    : 1
		}

		exports.rcompareIdentifiers = rcompareIdentifiers;
		function rcompareIdentifiers (a, b) {
		  return compareIdentifiers(b, a)
		}

		exports.major = major;
		function major (a, loose) {
		  return new SemVer(a, loose).major
		}

		exports.minor = minor;
		function minor (a, loose) {
		  return new SemVer(a, loose).minor
		}

		exports.patch = patch;
		function patch (a, loose) {
		  return new SemVer(a, loose).patch
		}

		exports.compare = compare;
		function compare (a, b, loose) {
		  return new SemVer(a, loose).compare(new SemVer(b, loose))
		}

		exports.compareLoose = compareLoose;
		function compareLoose (a, b) {
		  return compare(a, b, true)
		}

		exports.compareBuild = compareBuild;
		function compareBuild (a, b, loose) {
		  var versionA = new SemVer(a, loose);
		  var versionB = new SemVer(b, loose);
		  return versionA.compare(versionB) || versionA.compareBuild(versionB)
		}

		exports.rcompare = rcompare;
		function rcompare (a, b, loose) {
		  return compare(b, a, loose)
		}

		exports.sort = sort;
		function sort (list, loose) {
		  return list.sort(function (a, b) {
		    return exports.compareBuild(a, b, loose)
		  })
		}

		exports.rsort = rsort;
		function rsort (list, loose) {
		  return list.sort(function (a, b) {
		    return exports.compareBuild(b, a, loose)
		  })
		}

		exports.gt = gt;
		function gt (a, b, loose) {
		  return compare(a, b, loose) > 0
		}

		exports.lt = lt;
		function lt (a, b, loose) {
		  return compare(a, b, loose) < 0
		}

		exports.eq = eq;
		function eq (a, b, loose) {
		  return compare(a, b, loose) === 0
		}

		exports.neq = neq;
		function neq (a, b, loose) {
		  return compare(a, b, loose) !== 0
		}

		exports.gte = gte;
		function gte (a, b, loose) {
		  return compare(a, b, loose) >= 0
		}

		exports.lte = lte;
		function lte (a, b, loose) {
		  return compare(a, b, loose) <= 0
		}

		exports.cmp = cmp;
		function cmp (a, op, b, loose) {
		  switch (op) {
		    case '===':
		      if (typeof a === 'object')
		        a = a.version;
		      if (typeof b === 'object')
		        b = b.version;
		      return a === b

		    case '!==':
		      if (typeof a === 'object')
		        a = a.version;
		      if (typeof b === 'object')
		        b = b.version;
		      return a !== b

		    case '':
		    case '=':
		    case '==':
		      return eq(a, b, loose)

		    case '!=':
		      return neq(a, b, loose)

		    case '>':
		      return gt(a, b, loose)

		    case '>=':
		      return gte(a, b, loose)

		    case '<':
		      return lt(a, b, loose)

		    case '<=':
		      return lte(a, b, loose)

		    default:
		      throw new TypeError('Invalid operator: ' + op)
		  }
		}

		exports.Comparator = Comparator;
		function Comparator (comp, options) {
		  if (!options || typeof options !== 'object') {
		    options = {
		      loose: !!options,
		      includePrerelease: false
		    };
		  }

		  if (comp instanceof Comparator) {
		    if (comp.loose === !!options.loose) {
		      return comp
		    } else {
		      comp = comp.value;
		    }
		  }

		  if (!(this instanceof Comparator)) {
		    return new Comparator(comp, options)
		  }

		  debug('comparator', comp, options);
		  this.options = options;
		  this.loose = !!options.loose;
		  this.parse(comp);

		  if (this.semver === ANY) {
		    this.value = '';
		  } else {
		    this.value = this.operator + this.semver.version;
		  }

		  debug('comp', this);
		}

		var ANY = {};
		Comparator.prototype.parse = function (comp) {
		  var r = this.options.loose ? re[t.COMPARATORLOOSE] : re[t.COMPARATOR];
		  var m = comp.match(r);

		  if (!m) {
		    throw new TypeError('Invalid comparator: ' + comp)
		  }

		  this.operator = m[1] !== undefined ? m[1] : '';
		  if (this.operator === '=') {
		    this.operator = '';
		  }

		  // if it literally is just '>' or '' then allow anything.
		  if (!m[2]) {
		    this.semver = ANY;
		  } else {
		    this.semver = new SemVer(m[2], this.options.loose);
		  }
		};

		Comparator.prototype.toString = function () {
		  return this.value
		};

		Comparator.prototype.test = function (version) {
		  debug('Comparator.test', version, this.options.loose);

		  if (this.semver === ANY || version === ANY) {
		    return true
		  }

		  if (typeof version === 'string') {
		    try {
		      version = new SemVer(version, this.options);
		    } catch (er) {
		      return false
		    }
		  }

		  return cmp(version, this.operator, this.semver, this.options)
		};

		Comparator.prototype.intersects = function (comp, options) {
		  if (!(comp instanceof Comparator)) {
		    throw new TypeError('a Comparator is required')
		  }

		  if (!options || typeof options !== 'object') {
		    options = {
		      loose: !!options,
		      includePrerelease: false
		    };
		  }

		  var rangeTmp;

		  if (this.operator === '') {
		    if (this.value === '') {
		      return true
		    }
		    rangeTmp = new Range(comp.value, options);
		    return satisfies(this.value, rangeTmp, options)
		  } else if (comp.operator === '') {
		    if (comp.value === '') {
		      return true
		    }
		    rangeTmp = new Range(this.value, options);
		    return satisfies(comp.semver, rangeTmp, options)
		  }

		  var sameDirectionIncreasing =
		    (this.operator === '>=' || this.operator === '>') &&
		    (comp.operator === '>=' || comp.operator === '>');
		  var sameDirectionDecreasing =
		    (this.operator === '<=' || this.operator === '<') &&
		    (comp.operator === '<=' || comp.operator === '<');
		  var sameSemVer = this.semver.version === comp.semver.version;
		  var differentDirectionsInclusive =
		    (this.operator === '>=' || this.operator === '<=') &&
		    (comp.operator === '>=' || comp.operator === '<=');
		  var oppositeDirectionsLessThan =
		    cmp(this.semver, '<', comp.semver, options) &&
		    ((this.operator === '>=' || this.operator === '>') &&
		    (comp.operator === '<=' || comp.operator === '<'));
		  var oppositeDirectionsGreaterThan =
		    cmp(this.semver, '>', comp.semver, options) &&
		    ((this.operator === '<=' || this.operator === '<') &&
		    (comp.operator === '>=' || comp.operator === '>'));

		  return sameDirectionIncreasing || sameDirectionDecreasing ||
		    (sameSemVer && differentDirectionsInclusive) ||
		    oppositeDirectionsLessThan || oppositeDirectionsGreaterThan
		};

		exports.Range = Range;
		function Range (range, options) {
		  if (!options || typeof options !== 'object') {
		    options = {
		      loose: !!options,
		      includePrerelease: false
		    };
		  }

		  if (range instanceof Range) {
		    if (range.loose === !!options.loose &&
		        range.includePrerelease === !!options.includePrerelease) {
		      return range
		    } else {
		      return new Range(range.raw, options)
		    }
		  }

		  if (range instanceof Comparator) {
		    return new Range(range.value, options)
		  }

		  if (!(this instanceof Range)) {
		    return new Range(range, options)
		  }

		  this.options = options;
		  this.loose = !!options.loose;
		  this.includePrerelease = !!options.includePrerelease;

		  // First, split based on boolean or ||
		  this.raw = range;
		  this.set = range.split(/\s*\|\|\s*/).map(function (range) {
		    return this.parseRange(range.trim())
		  }, this).filter(function (c) {
		    // throw out any that are not relevant for whatever reason
		    return c.length
		  });

		  if (!this.set.length) {
		    throw new TypeError('Invalid SemVer Range: ' + range)
		  }

		  this.format();
		}

		Range.prototype.format = function () {
		  this.range = this.set.map(function (comps) {
		    return comps.join(' ').trim()
		  }).join('||').trim();
		  return this.range
		};

		Range.prototype.toString = function () {
		  return this.range
		};

		Range.prototype.parseRange = function (range) {
		  var loose = this.options.loose;
		  range = range.trim();
		  // `1.2.3 - 1.2.4` => `>=1.2.3 <=1.2.4`
		  var hr = loose ? re[t.HYPHENRANGELOOSE] : re[t.HYPHENRANGE];
		  range = range.replace(hr, hyphenReplace);
		  debug('hyphen replace', range);
		  // `> 1.2.3 < 1.2.5` => `>1.2.3 <1.2.5`
		  range = range.replace(re[t.COMPARATORTRIM], comparatorTrimReplace);
		  debug('comparator trim', range, re[t.COMPARATORTRIM]);

		  // `~ 1.2.3` => `~1.2.3`
		  range = range.replace(re[t.TILDETRIM], tildeTrimReplace);

		  // `^ 1.2.3` => `^1.2.3`
		  range = range.replace(re[t.CARETTRIM], caretTrimReplace);

		  // normalize spaces
		  range = range.split(/\s+/).join(' ');

		  // At this point, the range is completely trimmed and
		  // ready to be split into comparators.

		  var compRe = loose ? re[t.COMPARATORLOOSE] : re[t.COMPARATOR];
		  var set = range.split(' ').map(function (comp) {
		    return parseComparator(comp, this.options)
		  }, this).join(' ').split(/\s+/);
		  if (this.options.loose) {
		    // in loose mode, throw out any that are not valid comparators
		    set = set.filter(function (comp) {
		      return !!comp.match(compRe)
		    });
		  }
		  set = set.map(function (comp) {
		    return new Comparator(comp, this.options)
		  }, this);

		  return set
		};

		Range.prototype.intersects = function (range, options) {
		  if (!(range instanceof Range)) {
		    throw new TypeError('a Range is required')
		  }

		  return this.set.some(function (thisComparators) {
		    return (
		      isSatisfiable(thisComparators, options) &&
		      range.set.some(function (rangeComparators) {
		        return (
		          isSatisfiable(rangeComparators, options) &&
		          thisComparators.every(function (thisComparator) {
		            return rangeComparators.every(function (rangeComparator) {
		              return thisComparator.intersects(rangeComparator, options)
		            })
		          })
		        )
		      })
		    )
		  })
		};

		// take a set of comparators and determine whether there
		// exists a version which can satisfy it
		function isSatisfiable (comparators, options) {
		  var result = true;
		  var remainingComparators = comparators.slice();
		  var testComparator = remainingComparators.pop();

		  while (result && remainingComparators.length) {
		    result = remainingComparators.every(function (otherComparator) {
		      return testComparator.intersects(otherComparator, options)
		    });

		    testComparator = remainingComparators.pop();
		  }

		  return result
		}

		// Mostly just for testing and legacy API reasons
		exports.toComparators = toComparators;
		function toComparators (range, options) {
		  return new Range(range, options).set.map(function (comp) {
		    return comp.map(function (c) {
		      return c.value
		    }).join(' ').trim().split(' ')
		  })
		}

		// comprised of xranges, tildes, stars, and gtlt's at this point.
		// already replaced the hyphen ranges
		// turn into a set of JUST comparators.
		function parseComparator (comp, options) {
		  debug('comp', comp, options);
		  comp = replaceCarets(comp, options);
		  debug('caret', comp);
		  comp = replaceTildes(comp, options);
		  debug('tildes', comp);
		  comp = replaceXRanges(comp, options);
		  debug('xrange', comp);
		  comp = replaceStars(comp, options);
		  debug('stars', comp);
		  return comp
		}

		function isX (id) {
		  return !id || id.toLowerCase() === 'x' || id === '*'
		}

		// ~, ~> --> * (any, kinda silly)
		// ~2, ~2.x, ~2.x.x, ~>2, ~>2.x ~>2.x.x --> >=2.0.0 <3.0.0
		// ~2.0, ~2.0.x, ~>2.0, ~>2.0.x --> >=2.0.0 <2.1.0
		// ~1.2, ~1.2.x, ~>1.2, ~>1.2.x --> >=1.2.0 <1.3.0
		// ~1.2.3, ~>1.2.3 --> >=1.2.3 <1.3.0
		// ~1.2.0, ~>1.2.0 --> >=1.2.0 <1.3.0
		function replaceTildes (comp, options) {
		  return comp.trim().split(/\s+/).map(function (comp) {
		    return replaceTilde(comp, options)
		  }).join(' ')
		}

		function replaceTilde (comp, options) {
		  var r = options.loose ? re[t.TILDELOOSE] : re[t.TILDE];
		  return comp.replace(r, function (_, M, m, p, pr) {
		    debug('tilde', comp, _, M, m, p, pr);
		    var ret;

		    if (isX(M)) {
		      ret = '';
		    } else if (isX(m)) {
		      ret = '>=' + M + '.0.0 <' + (+M + 1) + '.0.0';
		    } else if (isX(p)) {
		      // ~1.2 == >=1.2.0 <1.3.0
		      ret = '>=' + M + '.' + m + '.0 <' + M + '.' + (+m + 1) + '.0';
		    } else if (pr) {
		      debug('replaceTilde pr', pr);
		      ret = '>=' + M + '.' + m + '.' + p + '-' + pr +
		            ' <' + M + '.' + (+m + 1) + '.0';
		    } else {
		      // ~1.2.3 == >=1.2.3 <1.3.0
		      ret = '>=' + M + '.' + m + '.' + p +
		            ' <' + M + '.' + (+m + 1) + '.0';
		    }

		    debug('tilde return', ret);
		    return ret
		  })
		}

		// ^ --> * (any, kinda silly)
		// ^2, ^2.x, ^2.x.x --> >=2.0.0 <3.0.0
		// ^2.0, ^2.0.x --> >=2.0.0 <3.0.0
		// ^1.2, ^1.2.x --> >=1.2.0 <2.0.0
		// ^1.2.3 --> >=1.2.3 <2.0.0
		// ^1.2.0 --> >=1.2.0 <2.0.0
		function replaceCarets (comp, options) {
		  return comp.trim().split(/\s+/).map(function (comp) {
		    return replaceCaret(comp, options)
		  }).join(' ')
		}

		function replaceCaret (comp, options) {
		  debug('caret', comp, options);
		  var r = options.loose ? re[t.CARETLOOSE] : re[t.CARET];
		  return comp.replace(r, function (_, M, m, p, pr) {
		    debug('caret', comp, _, M, m, p, pr);
		    var ret;

		    if (isX(M)) {
		      ret = '';
		    } else if (isX(m)) {
		      ret = '>=' + M + '.0.0 <' + (+M + 1) + '.0.0';
		    } else if (isX(p)) {
		      if (M === '0') {
		        ret = '>=' + M + '.' + m + '.0 <' + M + '.' + (+m + 1) + '.0';
		      } else {
		        ret = '>=' + M + '.' + m + '.0 <' + (+M + 1) + '.0.0';
		      }
		    } else if (pr) {
		      debug('replaceCaret pr', pr);
		      if (M === '0') {
		        if (m === '0') {
		          ret = '>=' + M + '.' + m + '.' + p + '-' + pr +
		                ' <' + M + '.' + m + '.' + (+p + 1);
		        } else {
		          ret = '>=' + M + '.' + m + '.' + p + '-' + pr +
		                ' <' + M + '.' + (+m + 1) + '.0';
		        }
		      } else {
		        ret = '>=' + M + '.' + m + '.' + p + '-' + pr +
		              ' <' + (+M + 1) + '.0.0';
		      }
		    } else {
		      debug('no pr');
		      if (M === '0') {
		        if (m === '0') {
		          ret = '>=' + M + '.' + m + '.' + p +
		                ' <' + M + '.' + m + '.' + (+p + 1);
		        } else {
		          ret = '>=' + M + '.' + m + '.' + p +
		                ' <' + M + '.' + (+m + 1) + '.0';
		        }
		      } else {
		        ret = '>=' + M + '.' + m + '.' + p +
		              ' <' + (+M + 1) + '.0.0';
		      }
		    }

		    debug('caret return', ret);
		    return ret
		  })
		}

		function replaceXRanges (comp, options) {
		  debug('replaceXRanges', comp, options);
		  return comp.split(/\s+/).map(function (comp) {
		    return replaceXRange(comp, options)
		  }).join(' ')
		}

		function replaceXRange (comp, options) {
		  comp = comp.trim();
		  var r = options.loose ? re[t.XRANGELOOSE] : re[t.XRANGE];
		  return comp.replace(r, function (ret, gtlt, M, m, p, pr) {
		    debug('xRange', comp, ret, gtlt, M, m, p, pr);
		    var xM = isX(M);
		    var xm = xM || isX(m);
		    var xp = xm || isX(p);
		    var anyX = xp;

		    if (gtlt === '=' && anyX) {
		      gtlt = '';
		    }

		    // if we're including prereleases in the match, then we need
		    // to fix this to -0, the lowest possible prerelease value
		    pr = options.includePrerelease ? '-0' : '';

		    if (xM) {
		      if (gtlt === '>' || gtlt === '<') {
		        // nothing is allowed
		        ret = '<0.0.0-0';
		      } else {
		        // nothing is forbidden
		        ret = '*';
		      }
		    } else if (gtlt && anyX) {
		      // we know patch is an x, because we have any x at all.
		      // replace X with 0
		      if (xm) {
		        m = 0;
		      }
		      p = 0;

		      if (gtlt === '>') {
		        // >1 => >=2.0.0
		        // >1.2 => >=1.3.0
		        // >1.2.3 => >= 1.2.4
		        gtlt = '>=';
		        if (xm) {
		          M = +M + 1;
		          m = 0;
		          p = 0;
		        } else {
		          m = +m + 1;
		          p = 0;
		        }
		      } else if (gtlt === '<=') {
		        // <=0.7.x is actually <0.8.0, since any 0.7.x should
		        // pass.  Similarly, <=7.x is actually <8.0.0, etc.
		        gtlt = '<';
		        if (xm) {
		          M = +M + 1;
		        } else {
		          m = +m + 1;
		        }
		      }

		      ret = gtlt + M + '.' + m + '.' + p + pr;
		    } else if (xm) {
		      ret = '>=' + M + '.0.0' + pr + ' <' + (+M + 1) + '.0.0' + pr;
		    } else if (xp) {
		      ret = '>=' + M + '.' + m + '.0' + pr +
		        ' <' + M + '.' + (+m + 1) + '.0' + pr;
		    }

		    debug('xRange return', ret);

		    return ret
		  })
		}

		// Because * is AND-ed with everything else in the comparator,
		// and '' means "any version", just remove the *s entirely.
		function replaceStars (comp, options) {
		  debug('replaceStars', comp, options);
		  // Looseness is ignored here.  star is always as loose as it gets!
		  return comp.trim().replace(re[t.STAR], '')
		}

		// This function is passed to string.replace(re[t.HYPHENRANGE])
		// M, m, patch, prerelease, build
		// 1.2 - 3.4.5 => >=1.2.0 <=3.4.5
		// 1.2.3 - 3.4 => >=1.2.0 <3.5.0 Any 3.4.x will do
		// 1.2 - 3.4 => >=1.2.0 <3.5.0
		function hyphenReplace ($0,
		  from, fM, fm, fp, fpr, fb,
		  to, tM, tm, tp, tpr, tb) {
		  if (isX(fM)) {
		    from = '';
		  } else if (isX(fm)) {
		    from = '>=' + fM + '.0.0';
		  } else if (isX(fp)) {
		    from = '>=' + fM + '.' + fm + '.0';
		  } else {
		    from = '>=' + from;
		  }

		  if (isX(tM)) {
		    to = '';
		  } else if (isX(tm)) {
		    to = '<' + (+tM + 1) + '.0.0';
		  } else if (isX(tp)) {
		    to = '<' + tM + '.' + (+tm + 1) + '.0';
		  } else if (tpr) {
		    to = '<=' + tM + '.' + tm + '.' + tp + '-' + tpr;
		  } else {
		    to = '<=' + to;
		  }

		  return (from + ' ' + to).trim()
		}

		// if ANY of the sets match ALL of its comparators, then pass
		Range.prototype.test = function (version) {
		  if (!version) {
		    return false
		  }

		  if (typeof version === 'string') {
		    try {
		      version = new SemVer(version, this.options);
		    } catch (er) {
		      return false
		    }
		  }

		  for (var i = 0; i < this.set.length; i++) {
		    if (testSet(this.set[i], version, this.options)) {
		      return true
		    }
		  }
		  return false
		};

		function testSet (set, version, options) {
		  for (var i = 0; i < set.length; i++) {
		    if (!set[i].test(version)) {
		      return false
		    }
		  }

		  if (version.prerelease.length && !options.includePrerelease) {
		    // Find the set of versions that are allowed to have prereleases
		    // For example, ^1.2.3-pr.1 desugars to >=1.2.3-pr.1 <2.0.0
		    // That should allow `1.2.3-pr.2` to pass.
		    // However, `1.2.4-alpha.notready` should NOT be allowed,
		    // even though it's within the range set by the comparators.
		    for (i = 0; i < set.length; i++) {
		      debug(set[i].semver);
		      if (set[i].semver === ANY) {
		        continue
		      }

		      if (set[i].semver.prerelease.length > 0) {
		        var allowed = set[i].semver;
		        if (allowed.major === version.major &&
		            allowed.minor === version.minor &&
		            allowed.patch === version.patch) {
		          return true
		        }
		      }
		    }

		    // Version has a -pre, but it's not one of the ones we like.
		    return false
		  }

		  return true
		}

		exports.satisfies = satisfies;
		function satisfies (version, range, options) {
		  try {
		    range = new Range(range, options);
		  } catch (er) {
		    return false
		  }
		  return range.test(version)
		}

		exports.maxSatisfying = maxSatisfying;
		function maxSatisfying (versions, range, options) {
		  var max = null;
		  var maxSV = null;
		  try {
		    var rangeObj = new Range(range, options);
		  } catch (er) {
		    return null
		  }
		  versions.forEach(function (v) {
		    if (rangeObj.test(v)) {
		      // satisfies(v, range, options)
		      if (!max || maxSV.compare(v) === -1) {
		        // compare(max, v, true)
		        max = v;
		        maxSV = new SemVer(max, options);
		      }
		    }
		  });
		  return max
		}

		exports.minSatisfying = minSatisfying;
		function minSatisfying (versions, range, options) {
		  var min = null;
		  var minSV = null;
		  try {
		    var rangeObj = new Range(range, options);
		  } catch (er) {
		    return null
		  }
		  versions.forEach(function (v) {
		    if (rangeObj.test(v)) {
		      // satisfies(v, range, options)
		      if (!min || minSV.compare(v) === 1) {
		        // compare(min, v, true)
		        min = v;
		        minSV = new SemVer(min, options);
		      }
		    }
		  });
		  return min
		}

		exports.minVersion = minVersion;
		function minVersion (range, loose) {
		  range = new Range(range, loose);

		  var minver = new SemVer('0.0.0');
		  if (range.test(minver)) {
		    return minver
		  }

		  minver = new SemVer('0.0.0-0');
		  if (range.test(minver)) {
		    return minver
		  }

		  minver = null;
		  for (var i = 0; i < range.set.length; ++i) {
		    var comparators = range.set[i];

		    comparators.forEach(function (comparator) {
		      // Clone to avoid manipulating the comparator's semver object.
		      var compver = new SemVer(comparator.semver.version);
		      switch (comparator.operator) {
		        case '>':
		          if (compver.prerelease.length === 0) {
		            compver.patch++;
		          } else {
		            compver.prerelease.push(0);
		          }
		          compver.raw = compver.format();
		          /* fallthrough */
		        case '':
		        case '>=':
		          if (!minver || gt(minver, compver)) {
		            minver = compver;
		          }
		          break
		        case '<':
		        case '<=':
		          /* Ignore maximum versions */
		          break
		        /* istanbul ignore next */
		        default:
		          throw new Error('Unexpected operation: ' + comparator.operator)
		      }
		    });
		  }

		  if (minver && range.test(minver)) {
		    return minver
		  }

		  return null
		}

		exports.validRange = validRange;
		function validRange (range, options) {
		  try {
		    // Return '*' instead of '' so that truthiness works.
		    // This will throw if it's invalid anyway
		    return new Range(range, options).range || '*'
		  } catch (er) {
		    return null
		  }
		}

		// Determine if version is less than all the versions possible in the range
		exports.ltr = ltr;
		function ltr (version, range, options) {
		  return outside(version, range, '<', options)
		}

		// Determine if version is greater than all the versions possible in the range.
		exports.gtr = gtr;
		function gtr (version, range, options) {
		  return outside(version, range, '>', options)
		}

		exports.outside = outside;
		function outside (version, range, hilo, options) {
		  version = new SemVer(version, options);
		  range = new Range(range, options);

		  var gtfn, ltefn, ltfn, comp, ecomp;
		  switch (hilo) {
		    case '>':
		      gtfn = gt;
		      ltefn = lte;
		      ltfn = lt;
		      comp = '>';
		      ecomp = '>=';
		      break
		    case '<':
		      gtfn = lt;
		      ltefn = gte;
		      ltfn = gt;
		      comp = '<';
		      ecomp = '<=';
		      break
		    default:
		      throw new TypeError('Must provide a hilo val of "<" or ">"')
		  }

		  // If it satisifes the range it is not outside
		  if (satisfies(version, range, options)) {
		    return false
		  }

		  // From now on, variable terms are as if we're in "gtr" mode.
		  // but note that everything is flipped for the "ltr" function.

		  for (var i = 0; i < range.set.length; ++i) {
		    var comparators = range.set[i];

		    var high = null;
		    var low = null;

		    comparators.forEach(function (comparator) {
		      if (comparator.semver === ANY) {
		        comparator = new Comparator('>=0.0.0');
		      }
		      high = high || comparator;
		      low = low || comparator;
		      if (gtfn(comparator.semver, high.semver, options)) {
		        high = comparator;
		      } else if (ltfn(comparator.semver, low.semver, options)) {
		        low = comparator;
		      }
		    });

		    // If the edge version comparator has a operator then our version
		    // isn't outside it
		    if (high.operator === comp || high.operator === ecomp) {
		      return false
		    }

		    // If the lowest version comparator has an operator and our version
		    // is less than it then it isn't higher than the range
		    if ((!low.operator || low.operator === comp) &&
		        ltefn(version, low.semver)) {
		      return false
		    } else if (low.operator === ecomp && ltfn(version, low.semver)) {
		      return false
		    }
		  }
		  return true
		}

		exports.prerelease = prerelease;
		function prerelease (version, options) {
		  var parsed = parse(version, options);
		  return (parsed && parsed.prerelease.length) ? parsed.prerelease : null
		}

		exports.intersects = intersects;
		function intersects (r1, r2, options) {
		  r1 = new Range(r1, options);
		  r2 = new Range(r2, options);
		  return r1.intersects(r2)
		}

		exports.coerce = coerce;
		function coerce (version, options) {
		  if (version instanceof SemVer) {
		    return version
		  }

		  if (typeof version === 'number') {
		    version = String(version);
		  }

		  if (typeof version !== 'string') {
		    return null
		  }

		  options = options || {};

		  var match = null;
		  if (!options.rtl) {
		    match = version.match(re[t.COERCE]);
		  } else {
		    // Find the right-most coercible string that does not share
		    // a terminus with a more left-ward coercible string.
		    // Eg, '1.2.3.4' wants to coerce '2.3.4', not '3.4' or '4'
		    //
		    // Walk through the string checking with a /g regexp
		    // Manually set the index so as to pick up overlapping matches.
		    // Stop when we get a match that ends at the string end, since no
		    // coercible string can be more right-ward without the same terminus.
		    var next;
		    while ((next = re[t.COERCERTL].exec(version)) &&
		      (!match || match.index + match[0].length !== version.length)
		    ) {
		      if (!match ||
		          next.index + next[0].length !== match.index + match[0].length) {
		        match = next;
		      }
		      re[t.COERCERTL].lastIndex = next.index + next[1].length + next[2].length;
		    }
		    // leave it in a clean state
		    re[t.COERCERTL].lastIndex = -1;
		  }

		  if (match === null) {
		    return null
		  }

		  return parse(match[2] +
		    '.' + (match[3] || '0') +
		    '.' + (match[4] || '0'), options)
		}
	} (semver, semver.exports));

	const LOADED = {};
	/**
	 * @interface LoadType
	 * @param {object} type
	 * @param {string} type.name
	 * @param {string} type.version
	 * @returns {Promise<Visualization>}
	 */

	async function load(name, version, _ref, loader) {
	  let {
	    config
	  } = _ref;
	  const key = "".concat(name, "__").concat(version);

	  if (!LOADED[key]) {
	    const sKey = "".concat(name).concat(version && " v".concat(version) || '');

	    if (loader && typeof loader !== 'function') {
	      throw new Error("load of visualization '".concat(sKey, "' is not a fuction, wrap load promise in function"));
	    }

	    const p = (loader || config.load)({
	      name,
	      version
	    });
	    const prom = Promise.resolve(p);
	    LOADED[key] = prom.then(sn => {
	      if (!sn) {
	        // TODO - improve validation
	        throw new Error("load() of visualization '".concat(sKey, "' resolved to an invalid object"));
	      }

	      return sn;
	    }).catch(e => {
	      {
	        console.warn(e); // eslint-disable-line no-console
	      }

	      throw new Error("Failed to load visualization: '".concat(sKey, "'"));
	    });
	  }

	  return LOADED[key];
	}
	function clearFromCache(name) {
	  Object.keys(LOADED).forEach(key => {
	    if (key.split('__')[0] === name) {
	      LOADED[key] = undefined;
	    }
	  });
	}

	/**
	 * @interface TypeInfo
	 * @property {string} name
	 * @property {string=} version
	 * @property {LoadType} load
	 * @property {object=} meta
	 */

	function create$1(info, halo) {
	  let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
	  let sn;
	  let stringified;
	  const {
	    meta
	  } = opts;
	  const type = {
	    name: info.name,
	    version: info.version,

	    supportsPropertiesVersion(v) {
	      if (v && meta && meta.deps && meta.deps.properties) {
	        return semver.exports.satisfies(v, meta.deps.properties);
	      }

	      return true;
	    },

	    supernova: () => load(type.name, type.version, halo, opts.load).then(SNDefinition => {
	      sn = sn || generatorFn(SNDefinition, halo.public.galaxy);
	      stringified = JSON.stringify(sn.qae.properties.initial);
	      return sn;
	    }),

	    initialProperties(initial) {
	      return this.supernova().then(() => {
	        const props = _objectSpread2(_objectSpread2({
	          qInfo: {
	            qType: type.name
	          },
	          visualization: type.name,
	          version: type.version,
	          showTitles: true
	        }, JSON.parse(stringified)), initial);

	        return props;
	      });
	    }

	  };
	  return type;
	}

	function semverSort(arr) {
	  const unversioned = arr.filter(v => v === 'undefined');
	  return [...unversioned, ...arr.filter(v => v !== 'undefined').map(v => v.split('.').map(n => parseInt(n, 10))).sort((a, b) => a[0] - b[0] || a[1] - b[1] || a[2] - b[2]).map(n => n.join('.'))];
	}
	function typeCollection(name, halo) {
	  const versions = {};
	  let sortedVersions = null;
	  return {
	    get: version => versions[version],
	    register: (version, opts) => {
	      if (versions[version]) {
	        throw new Error("Supernova '".concat(name, "@").concat(version, "' already registered."));
	      }

	      versions[version] = create$1({
	        name,
	        version
	      }, halo, opts);
	      sortedVersions = null;
	    },
	    getMatchingVersionFromProperties: propertyVersion => {
	      if (!sortedVersions) {
	        sortedVersions = semverSort(Object.keys(versions));
	      }

	      for (let i = sortedVersions.length - 1; i >= 0; i--) {
	        const t = versions[sortedVersions[i]];

	        if (t.supportsPropertiesVersion(propertyVersion)) {
	          return sortedVersions[i];
	        }
	      }

	      return null;
	    },
	    versions
	  };
	}
	function create(_ref) {
	  let {
	    halo,
	    parent
	  } = _ref;
	  const tc = {};
	  const p = parent || {
	    get: () => undefined
	  };
	  return {
	    register: (typeInfo, opts) => {
	      if (!tc[typeInfo.name]) {
	        tc[typeInfo.name] = typeCollection(typeInfo.name, halo);
	      }

	      tc[typeInfo.name].register(typeInfo.version, opts);
	    },
	    getSupportedVersion: (name, propertyVersion) => {
	      if (!tc[name]) {
	        return null;
	      }

	      return tc[name].getMatchingVersionFromProperties(propertyVersion);
	    },

	    get(typeInfo) {
	      const {
	        name
	      } = typeInfo;
	      let {
	        version
	      } = typeInfo;

	      if (!tc[name]) {
	        // Fall back to existing version
	        {
	          console.warn("Visualization ".concat(name, " is not registered.")); // eslint-disable-line no-console
	        }

	        this.register({
	          name,
	          version
	        });
	      } else if (!tc[name].versions[version]) {
	        // Fall back to existing version
	        const versionToUse = Object.keys(tc[name].versions)[0];

	        {
	          console.warn("Version ".concat(version, " of ").concat(name, " is not registered. Falling back to version ").concat(versionToUse)); // eslint-disable-line no-console
	        }

	        version = versionToUse;
	      }

	      return tc[name].get(version) || p.get(typeInfo);
	    },

	    getList: () => Object.keys(tc).map(key => ({
	      name: key,
	      versions: Object.keys(tc[key].versions).map(v => v === 'undefined' ? undefined : v)
	    })),
	    clearFromCache: name => {
	      if (tc[name]) {
	        tc[name] = undefined;
	      }

	      clearFromCache(name);
	    }
	  };
	}

	const _excluded = ["__DO_NOT_USE__"];
	/**
	 * @interface Context
	 * @property {boolean=} keyboardNavigation
	 * @property {object=} constraints
	 * @property {boolean=} constraints.active
	 * @property {boolean=} constraints.passive
	 * @property {boolean=} constraints.select
	 */

	const DEFAULT_CONTEXT =
	/** @lends Context */
	{
	  /** @type {string=} */
	  theme: 'light',

	  /** @type {string=} */
	  language: 'en-US',

	  /** @type {string=} */
	  deviceType: 'auto',
	  constraints: {},
	  keyboardNavigation: false,
	  disableCellPadding: false
	};
	/**
	 * @interface SnapshotConfiguration
	 * @private
	 */

	const DEFAULT_SNAPSHOT_CONFIG =
	/** @lends SnapshotConfiguration */
	{
	  /**
	   * @param {string} id
	   * @returns {Promise<SnapshotLayout>}
	   */
	  get: async id => {
	    const res = await fetch("/njs/snapshot/".concat(id));

	    if (!res.ok) {
	      throw new Error(res.statusText);
	    }

	    return res.json();
	  },

	  capture(payload) {
	    return fetch("/njs/capture", {
	      method: 'POST',
	      headers: {
	        'Content-Type': 'application/json'
	      },
	      body: JSON.stringify(payload)
	    }).then(res => res.json());
	  }

	};
	/**
	 * @interface Configuration
	 */

	const DEFAULT_CONFIG =
	/** @lends Configuration */
	{
	  /**
	   * @type {Context=}
	   */
	  context: DEFAULT_CONTEXT,
	  load: () => undefined,

	  /**
	   * @type {(TypeInfo[])=}
	   */
	  types: [],

	  /**
	   * @type {(ThemeInfo[])=}
	   */
	  themes: [],

	  /** @type {object=} */
	  anything: {},

	  /**
	   * @type {SnapshotConfiguration=}
	   * @private
	   */
	  snapshot: DEFAULT_SNAPSHOT_CONFIG
	};
	/**
	 * @interface Galaxy
	 */

	const mergeObj = function () {
	  let o1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  let o2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
	  return _objectSpread2(_objectSpread2({}, o1), o2);
	};

	const mergeArray = function () {
	  let a1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
	  let a2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
	  return (// Simple merge and deduplication
	    [...a1, ...a2].filter((v, i, a) => a.indexOf(v) === i)
	  );
	};

	const mergeConfigs = (base, c) => ({
	  context: mergeObj(base.context, c.context),
	  load: c.load || base.load,
	  snapshot: _objectSpread2({}, c.snapshot || base.snapshot),
	  types: mergeArray(base.types, c.types),
	  themes: mergeArray(base.themes, c.themes),
	  flags: mergeObj(base.flags, c.flags),
	  anything: mergeObj(base.anything, c.anything)
	});
	/**
	 * @ignore
	 * @typedef {function(promise)} PromiseFunction A callback function which receives a request promise as the first argument.
	 */

	/**
	 * @ignore
	 * @typedef {function(function)} ReceiverFunction A callback function which receives another function as input.
	 */

	/**
	 * @ignore
	 * @typedef {object} DoNotUseOptions Options strictly recommended not to use as they might change anytime. Documenting them to keep track of them, but not exposing them to API docs.
	 * @property {boolean=} [focusSearch=false] Initialize the Listbox with the search input focused. Only applicable when
	 *    search is true, since toggling will always focus the search input on show.
	 * @property {boolean=} [options.showGray=true] Render fields or checkboxes in shades of gray instead of white when their state is excluded or alternative.
	 * @property {object} [options.sessionModel] Use a custom sessionModel.
	 * @property {object} [options.selectionsApi] Use a custom selectionsApi to customize how values are selected.
	 * @property {function():boolean} [options.selectDisabled=] Define a function which tells when selections are disabled (true) or enabled (false). By default, always returns false.
	 * @property {PromiseFunction} [options.fetchStart] A function called when the Listbox starts fetching data. Receives the fetch request promise as an argument.
	 * @property {ReceiverFunction} [options.update] A function which receives an update function which upon call will trigger a data fetch.
	 * @property {{setScrollPos:function(number):void, initScrollPos:number}} [options.scrollState=] Object including a setScrollPos function that sets current scroll position index. A initial scroll position index.
	 * @property {number=} [options.sortByState=1] Sort by state, detault 1 = sort descending, 0 = no sorting, -1 sort ascending.
	 * @property {function(number):void} [options.setCount=] A function that gets called with the length of the data in the Listbox.
	 */

	/**
	 * @ignore
	 * @param {object} usersOptions Options sent in to fieldInstance.mount.
	 * @param {DoNotUseOptions} __DO_NOT_USE__
	 * @returns {object} Squashed options with defaults given for non-exposed options.
	 */


	const getOptions = function () {
	  let usersOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

	  const {
	    __DO_NOT_USE__ = {}
	  } = usersOptions,
	        exposedOptions = _objectWithoutProperties$2(usersOptions, _excluded);

	  const DO_NOT_USE_DEFAULTS = {
	    update: undefined,
	    fetchStart: undefined,
	    showGray: true,
	    focusSearch: false,
	    sessionModel: undefined,
	    selectionsApi: undefined,
	    selectDisabled: undefined
	  };

	  const squashedOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, exposedOptions), DO_NOT_USE_DEFAULTS), __DO_NOT_USE__);

	  return squashedOptions;
	};

	function nuked() {
	  let configuration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	  const locale = appLocaleFn(configuration.context.language);
	  /**
	   * Initiates a new `Embed` instance using the specified enigma `app`.
	   * @entry
	   * @function embed
	   * @param {EngineAPI.IApp} app
	   * @param {Configuration=} instanceConfig
	   * @returns {Embed}
	   * @example
	   * import { embed } from '@nebula.js/stardust'
	   * const n = embed(app);
	   * n.render({ id: 'abc' });
	   */

	  function embed(app, instanceConfig) {
	    if (instanceConfig) {
	      return embed.createConfiguration(instanceConfig)(app);
	    }

	    let currentContext = _objectSpread2(_objectSpread2({}, configuration.context), {}, {
	      translator: locale.translator
	    });

	    const [root] = boot({
	      app,
	      context: currentContext
	    });
	    const appTheme$1 = appTheme({
	      themes: configuration.themes,
	      root
	    });
	    const publicAPIs = {
	      galaxy:
	      /** @lends Galaxy */
	      {
	        /** @type {Translator} */
	        translator: locale.translator,
	        // TODO - validate flags input

	        /** @type {Flags} */
	        flags: flagsFn(configuration.flags),

	        /** @type {string} */
	        deviceType: deviceTypeFn(configuration.context.deviceType),

	        /** @type {object} */
	        anything: configuration.anything
	      },
	      theme: appTheme$1.externalAPI,
	      translator: locale.translator,
	      nebbie: null // actual value is set further down

	    };
	    const halo = {
	      app,
	      root,
	      config: configuration,
	      public: publicAPIs,
	      context: currentContext,
	      types: null
	    };
	    const types = create({
	      halo
	    });
	    configuration.types.forEach(t => types.register({
	      name: t.name,
	      version: t.version
	    }, {
	      meta: t.meta,
	      load: t.load
	    }));
	    let currentThemePromise = appTheme$1.setTheme(configuration.context.theme);
	    let selectionsApi = null;
	    let selectionsComponentReference = null;
	    /**
	     * @class
	     * @alias Embed
	     */

	    const api =
	    /** @lends Embed# */
	    {
	      /**
	       * Renders a visualization into an HTMLElement.
	       * @param {CreateConfig | GetConfig} cfg - The render configuration.
	       * @returns {Promise<Viz>} A controller to the rendered visualization.
	       * @example
	       * // render from existing object
	       * n.render({
	       *   element: el,
	       *   id: 'abcdef'
	       * });
	       * @example
	       * // render on the fly
	       * n.render({
	       *   element: el,
	       *   type: 'barchart',
	       *   fields: ['Product', { qLibraryId: 'u378hn', type: 'measure' }]
	       * });
	       */
	      render: async cfg => {
	        await currentThemePromise;

	        if (cfg.id) {
	          return getObject(cfg, halo);
	        }

	        return createSessionObject(cfg, halo);
	      },

	      /**
	       * Updates the current context of this embed instance.
	       * Use this when you want to change some part of the current context, like theme.
	       * @param {Context} ctx - The context to update.
	       * @returns {Promise<undefined>}
	       * @example
	       * // change theme
	       * n.context({ theme: 'dark'});
	       * @example
	       * // limit constraints
	       * n.context({ constraints: { active: true } });
	       */
	      context: async ctx => {
	        // filter valid values to avoid triggering unnecessary rerender
	        let changes;
	        ['theme', 'language', 'constraints', 'keyboardNavigation'].forEach(key => {
	          if (Object.prototype.hasOwnProperty.call(ctx, key) && ctx[key] !== currentContext[key]) {
	            if (!changes) {
	              changes = {};
	            }

	            changes[key] = ctx[key];
	          }
	        });

	        if (!changes) {
	          return;
	        }

	        currentContext = _objectSpread2(_objectSpread2(_objectSpread2({}, currentContext), changes), {}, {
	          translator: locale.translator
	        });
	        halo.context = currentContext;

	        if (changes.theme) {
	          currentThemePromise = appTheme$1.setTheme(changes.theme);
	          await currentThemePromise;
	        }

	        if (changes.language) {
	          halo.public.translator.language(changes.language);
	        }

	        root.context(currentContext);
	      },

	      /**
	       * Gets the app selections of this instance.
	       * @returns {Promise<AppSelections>}
	       * @example
	       * const selections = await n.selections();
	       * selections.mount(element);
	       */
	      selections: async () => {
	        if (!selectionsApi) {
	          // const appSelections = await root.getAppSelections(); // Don't expose this for now
	          selectionsApi =
	          /** @lends AppSelections# */
	          {
	            /**
	             * Mounts the app selection UI into the provided HTMLElement.
	             * @param {HTMLElement} element
	             * @example
	             * selections.mount(element);
	             */
	            mount(element) {
	              if (selectionsComponentReference) {
	                {
	                  console.error('Already mounted'); // eslint-disable-line no-console
	                }

	                return;
	              }

	              selectionsComponentReference = mount({
	                element,
	                app
	              });
	              root.add(selectionsComponentReference);
	            },

	            /**
	             * Unmounts the app selection UI from the DOM.
	             * @example
	             * selections.unmount();
	             */
	            unmount() {
	              if (selectionsComponentReference) {
	                root.remove(selectionsComponentReference);
	                selectionsComponentReference = null;
	              }
	            }

	          };
	        }

	        return selectionsApi;
	      },

	      /**
	       * Gets the listbox instance of the specified field
	       * @param {string|LibraryField} fieldIdentifier Fieldname as a string or a Library dimension
	       * @returns {Promise<FieldInstance>}
	       * @since 1.1.0
	       * @example
	       * const fieldInstance = await n.field("MyField");
	       * fieldInstance.mount(element, { title: "Hello Field"});
	       */
	      field: async fieldIdentifier => {
	        const fieldName = typeof fieldIdentifier === 'string' ? fieldIdentifier : fieldIdentifier.qLibraryId;

	        if (!fieldName) {
	          throw new Error("Field identifier must be provided");
	        }
	        /**
	         * @typedef { 'ltr' | 'rtl' } Direction
	         */

	        /**
	         * @typedef { 'vertical' | 'horizontal' } ListLayout
	         */

	        /**
	         * @typedef { 'none' | 'value' | 'percent' | 'relative' } FrequencyMode
	         */

	        /**
	         * @typedef { boolean | 'toggle' } SearchMode
	         */

	        /**
	         * @class
	         * @alias FieldInstance
	         * @since 1.1.0
	         */


	        const fieldSels = {
	          fieldName,

	          /**
	           * Mounts the field as a listbox into the provided HTMLElement.
	           * @param {HTMLElement} element
	           * @param {object=} options Settings for the embedded listbox
	           * @param {string=} options.title Custom title, defaults to fieldname
	           * @param {Direction=} [options.direction=ltr] Direction setting ltr|rtl.
	           * @param {ListLayout=} [options.listLayout=vertical] Layout direction vertical|horizontal
	           * @param {FrequencyMode=} [options.frequencyMode=none] Show frequency none|value|percent|relative
	           * @param {boolean=} [options.histogram=false] Show histogram bar
	           * @param {SearchMode=} [options.search=true] Show the search bar permanently or using the toggle button: false|true|toggle|toggleShow
	           * @param {boolean=} [options.toolbar=true] Show the toolbar
	           * @param {boolean=} [options.checkboxes=false] Show values as checkboxes instead of as fields
	           * @param {boolean=} [options.dense=false] Reduces padding and text size
	           * @param {boolean=} [options.stateName="$"] Sets the state to make selections in
	           * @param {object=} [options.properties={}] Properties object to extend default properties with
	           *
	           * @since 1.1.0
	           * @instance
	           * @example
	           * fieldInstance.mount(element);
	           */
	          mount(element) {
	            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

	            if (!element) {
	              throw new Error("Element for ".concat(fieldName, " not provided"));
	            }

	            if (this._instance) {
	              throw new Error("Field ".concat(fieldName, " already mounted"));
	            }

	            this._instance = ListBoxPortal({
	              element,
	              app,
	              fieldIdentifier,
	              options: getOptions(options),
	              stateName: options.stateName || '$'
	            });
	            root.add(this._instance);
	          },

	          /**
	           * Unmounts the field listbox from the DOM.
	           * @since 1.1.0
	           * @instance
	           * @example
	           * listbox.unmount();
	           */
	          unmount() {
	            if (this._instance) {
	              root.remove(this._instance);
	              this._instance = null;
	            }
	          }

	        };
	        return fieldSels;
	      },

	      /**
	       * Gets a list of registered visualization types and versions
	       * @function
	       * @returns {Array<Object>} types
	       * @example
	       * const types = n.getRegisteredTypes();
	       * // Contains
	       * //[
	       * // {
	       * //   name: "barchart"
	       * //   versions:[undefined, "1.2.0"]
	       * // }
	       * //]
	       */
	      getRegisteredTypes: types.getList,
	      __DO_NOT_USE__: {
	        types
	      }
	    };
	    halo.public.nebbie = api;
	    halo.types = types;
	    return api;
	  }
	  /**
	   * Creates a new `embed` scope bound to the specified `configuration`.
	   *
	   * The configuration is merged with all previous scopes.
	   * @memberof embed
	   * @param {Configuration} configuration - The configuration object
	   * @returns {embed}
	   * @example
	   * import { embed } from '@nebula.js/stardust';
	   * // create a 'master' config which registers all types
	   * const m = embed.createConfiguration({
	   *   types: [{
	   *     name: 'mekko',
	   *     version: '1.0.0',
	   *     load: () => Promise.resolve(mekko)
	   *   }],
	   * });
	   *
	   * // create an alternate config with dark theme
	   * // and inherit the config from the previous
	   * const d = m.createConfiguration({
	   *  context: {
	   *    theme: 'dark'
	   *  }
	   * });
	   *
	   * m(app).render({ type: 'mekko' }); // will render the object with default theme
	   * d(app).render({ type: 'mekko' }); // will render the object with 'dark' theme
	   * embed(app).render({ type: 'mekko' }); // will throw error since 'mekko' is not a register type on the default instance
	   */


	  embed.createConfiguration = c => nuked(mergeConfigs(configuration, c));

	  embed.config = configuration;
	  return embed;
	}
	/**
	 * @typedef {any} ThemeJSON
	 */

	/**
	 * @interface ThemeInfo
	 * @property {string} id Theme identifier
	 * @property {function(): Promise<ThemeJSON>} load A function that should return a Promise that resolves to a raw JSON theme.
	 */


	var index = nuked(DEFAULT_CONFIG);

	var enigmaMocker = {exports: {}};

	var enigmaMocker_dev = {exports: {}};

	/*
	* @nebula.js/enigma-mocker v2.11.0
	* Copyright (c) 2022 QlikTech International AB
	* Released under the MIT license.
	*/

	(function (module, exports) {
	  (function (global, factory) {
	    module.exports = factory() ;
	  })(commonjsGlobal, function () {

	    function SessionMock() {
	      return {
	        getObjectApi() {
	          return Promise.resolve({
	            id: "sessapi - ".concat(+Date.now())
	          });
	        }

	      };
	    }

	    function ownKeys(object, enumerableOnly) {
	      var keys = Object.keys(object);

	      if (Object.getOwnPropertySymbols) {
	        var symbols = Object.getOwnPropertySymbols(object);
	        enumerableOnly && (symbols = symbols.filter(function (sym) {
	          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
	        })), keys.push.apply(keys, symbols);
	      }

	      return keys;
	    }

	    function _objectSpread2(target) {
	      for (var i = 1; i < arguments.length; i++) {
	        var source = null != arguments[i] ? arguments[i] : {};
	        i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
	          _defineProperty(target, key, source[key]);
	        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
	          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
	        });
	      }

	      return target;
	    }

	    function _defineProperty(obj, key, value) {
	      if (key in obj) {
	        Object.defineProperty(obj, key, {
	          value: value,
	          enumerable: true,
	          configurable: true,
	          writable: true
	        });
	      } else {
	        obj[key] = value;
	      }

	      return obj;
	    }

	    function _objectWithoutPropertiesLoose(source, excluded) {
	      if (source == null) return {};
	      var target = {};
	      var sourceKeys = Object.keys(source);
	      var key, i;

	      for (i = 0; i < sourceKeys.length; i++) {
	        key = sourceKeys[i];
	        if (excluded.indexOf(key) >= 0) continue;
	        target[key] = source[key];
	      }

	      return target;
	    }

	    function _objectWithoutProperties(source, excluded) {
	      if (source == null) return {};

	      var target = _objectWithoutPropertiesLoose(source, excluded);

	      var key, i;

	      if (Object.getOwnPropertySymbols) {
	        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

	        for (i = 0; i < sourceSymbolKeys.length; i++) {
	          key = sourceSymbolKeys[i];
	          if (excluded.indexOf(key) >= 0) continue;
	          if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
	          target[key] = source[key];
	        }
	      }

	      return target;
	    }

	    var hasOwn = Object.prototype.hasOwnProperty;
	    var toStr = Object.prototype.toString;
	    var defineProperty = Object.defineProperty;
	    var gOPD = Object.getOwnPropertyDescriptor;

	    var isArray = function isArray(arr) {
	      if (typeof Array.isArray === 'function') {
	        return Array.isArray(arr);
	      }

	      return toStr.call(arr) === '[object Array]';
	    };

	    var isPlainObject = function isPlainObject(obj) {
	      if (!obj || toStr.call(obj) !== '[object Object]') {
	        return false;
	      }

	      var hasOwnConstructor = hasOwn.call(obj, 'constructor');
	      var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf'); // Not own constructor property must be Object

	      if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
	        return false;
	      } // Own properties are enumerated firstly, so to speed up,
	      // if last one is own, then all properties are own.


	      var key;

	      for (key in obj) {
	        /**/
	      }

	      return typeof key === 'undefined' || hasOwn.call(obj, key);
	    }; // If name is '__proto__', and Object.defineProperty is available, define __proto__ as an own property on target


	    var setProperty = function setProperty(target, options) {
	      if (defineProperty && options.name === '__proto__') {
	        defineProperty(target, options.name, {
	          enumerable: true,
	          configurable: true,
	          value: options.newValue,
	          writable: true
	        });
	      } else {
	        target[options.name] = options.newValue;
	      }
	    }; // Return undefined instead of __proto__ if '__proto__' is not an own property


	    var getProperty = function getProperty(obj, name) {
	      if (name === '__proto__') {
	        if (!hasOwn.call(obj, name)) {
	          return void 0;
	        } else if (gOPD) {
	          // In early versions of node, obj['__proto__'] is buggy when obj has
	          // __proto__ as an own property. Object.getOwnPropertyDescriptor() works.
	          return gOPD(obj, name).value;
	        }
	      }

	      return obj[name];
	    };

	    var extend = function extend() {
	      var options, name, src, copy, copyIsArray, clone;
	      var target = arguments[0];
	      var i = 1;
	      var length = arguments.length;
	      var deep = false; // Handle a deep copy situation

	      if (typeof target === 'boolean') {
	        deep = target;
	        target = arguments[1] || {}; // skip the boolean and the target

	        i = 2;
	      }

	      if (target == null || typeof target !== 'object' && typeof target !== 'function') {
	        target = {};
	      }

	      for (; i < length; ++i) {
	        options = arguments[i]; // Only deal with non-null/undefined values

	        if (options != null) {
	          // Extend the base object
	          for (name in options) {
	            src = getProperty(target, name);
	            copy = getProperty(options, name); // Prevent never-ending loop

	            if (target !== copy) {
	              // Recurse if we're merging plain objects or arrays
	              if (deep && copy && (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
	                if (copyIsArray) {
	                  copyIsArray = false;
	                  clone = src && isArray(src) ? src : [];
	                } else {
	                  clone = src && isPlainObject(src) ? src : {};
	                } // Never move original objects, clone them


	                setProperty(target, {
	                  name: name,
	                  newValue: extend(deep, clone, copy)
	                }); // Don't bring in undefined values
	              } else if (typeof copy !== 'undefined') {
	                setProperty(target, {
	                  name: name,
	                  newValue: copy
	                });
	              }
	            }
	          }
	        }
	      } // Return the modified object


	      return target;
	    }; // eslint-disable-next-line no-undef


	    const crt = globalThis.crypto || {
	      getRandomValues: () => 123456
	    }; // https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
	    // Not using crypto.randomUUID due to missing safari support < 15

	    function uuidv4() {
	      return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crt.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
	    }

	    function CreateSessionObjectMock() {
	      return props => {
	        const properties = extend({}, props);
	        properties.qInfo = properties.qInfo || {};
	        properties.qInfo.qId = properties.qInfo.qId || "mock-".concat(uuidv4());
	        const mockedInclusions = properties._mock;
	        let layout = properties;

	        if (mockedInclusions) {
	          delete properties._mock;
	          layout = extend({}, properties, mockedInclusions);
	        }

	        return Promise.resolve(_objectSpread2({
	          on: () => {},
	          once: () => {},
	          getLayout: () => Promise.resolve(layout),
	          getProperties: () => Promise.resolve(properties),
	          getEffectiveProperties: () => Promise.resolve(properties),
	          id: properties.qInfo.qId
	        }, properties));
	      };
	    }
	    /**
	     * Get value for a fixture property.
	     *
	     * The value is either static (e.g. pass a string / object / similar) or dynamic when passing a function.
	     *
	     * It falls back to the default value in case the fixture has no value specified.
	     *
	     * Example
	     * ```js
	     * const fixture = {
	     *  id: 'grid-chart-1',
	     * };
	     * const app = {
	     *   id: getValue(fixture.id, { defaultValue: 'object-id-${+Date.now()}'}),
	     * }
	     * ```
	     *
	     * @param {any} prop Fixture property. Either a fixed value (string / object / boolean / ...) or a function invoked when the value is needed.
	     * @param {object} options Options.
	     * @param {Array<any>} options.args Arguments used to evaluate the property value.
	     * @param {any} options.defaultValue Default value in case not value is defined in fixture.
	     * @returns The property value.
	     */


	    const getPropValue = function (prop) {
	      let {
	        args = [],
	        defaultValue
	      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

	      if (typeof prop === 'function') {
	        return prop(...args);
	      }

	      if (prop !== undefined) {
	        return prop;
	      }

	      return defaultValue;
	    };
	    /**
	     * Get function for a fixture property.
	     *
	     * When the returned function is invoked it resolves the value - using `defaultValue` as fallback - and returns it. The value is returned as a promise if `option.usePromise` is `true`.
	     *
	     * Example:
	     * ```js
	     * const fixture = {
	     *   getHyperCubeData(path, page) {
	     *     return [ ... ];
	     *   }
	     * }
	     * const app = {
	     *   getHyperCubeData: getPropFn(fixture.getHyperCubeData, { defaultValue: [], usePromise: true })
	     * };
	     * ```
	     *
	     * @param {any} prop Fixture property. Either a fixed value (string / object / boolean / ...) or a function invoked when the value is needed.
	     * @param {object} options Options.
	     * @param {any} options.defaultValue Default value in case not value is defined in fixture.
	     * @param {boolean} options.async When `true` the returns value is wrapped in a promise, otherwise the value is directly returned.
	     * @param {number} options.number Delay before value is returned.
	     * @returns A fixture property function
	     */


	    const getPropFn = function (prop) {
	      let {
	        defaultValue,
	        async = true,
	        delay = 0
	      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
	      return function () {
	        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
	          args[_key] = arguments[_key];
	        }

	        const value = getPropValue(prop, {
	          defaultValue,
	          args
	        });
	        return async ? new Promise(resolve => {
	          setTimeout(() => resolve(value), delay);
	        }) : value;
	      };
	    };

	    const _excluded = ["id", "session"];
	    /**
	     * Properties on `getObject()` operating synchronously.
	     */

	    const PROPS_SYNC = ['addListener', 'emit', 'listeners', 'on', 'once', 'removeAllListeners', 'removeListener', 'setMaxListerners'];
	    /**
	     * Is property operating asynchrously.
	     * @param {string} name Property name.
	     * @returns `true` if property is operating asynchrously, otherwise `false`.
	     */

	    function isPropAsync(name) {
	      return !PROPS_SYNC.includes(name);
	    }
	    /**
	     * Get `qId` for visualization.
	     * @param {object} genericObject Generic object describing behaviour of mock
	     * @returns The `qId`, undefined if not present
	     */


	    function getQId(genericObject) {
	      const layout = getPropValue(genericObject.getLayout);
	      return layout.qInfo && layout.qInfo.qId;
	    }
	    /**
	     * Create a mock of a generic object. Mandatory properties are added, functions returns async values where applicable etc.
	     * @param {object} genericObject Generic object describing behaviour of mock
	     * @param {EnigmaMockerOptions} options Options.
	     * @returns The mocked object
	     */


	    function createMock(genericObject, options) {
	      const qId = getQId(genericObject);
	      const {
	        delay
	      } = options;

	      const {
	        id,
	        session
	      } = genericObject,
	            props = _objectWithoutProperties(genericObject, _excluded);

	      const mock = _objectSpread2({
	        id: getPropValue(id, {
	          defaultValue: "object - ".concat(+Date.now())
	        }),
	        session: getPropValue(session, {
	          defaultValue: true
	        }),
	        on: () => {},
	        once: () => {}
	      }, Object.entries(props).reduce((fns, _ref) => {
	        let [name, value] = _ref;
	        return _objectSpread2(_objectSpread2({}, fns), {}, {
	          [name]: getPropFn(value, {
	            async: isPropAsync(name),
	            delay
	          })
	        });
	      }, {}));

	      return {
	        [qId]: mock
	      };
	    }
	    /**
	     * Create mocked objects from list of generic objects.
	     * @param {Array<object>} genericObjects Generic objects describing behaviour of mock
	     * @param {EnigmaMockerOptions} options options
	     * @returns Object with mocks where key is `qId` and value is the mocked object.
	     */


	    function createMocks(genericObjects, options) {
	      return genericObjects.reduce((mocks, genericObject) => _objectSpread2(_objectSpread2({}, mocks), createMock(genericObject, options)), {});
	    }
	    /**
	     * Validates if mandatory information is available.
	     * @param {object} genericObject Generic object to validate
	     * @throws {}
	     * <ul>
	     *   <li>{Error} If getLayout is missing</li>
	     *   <li>{Error} If getLayout.qInfo.qId is missing</li>
	     * </ul>
	     */


	    function validate(genericObject) {
	      if (!genericObject.getLayout) {
	        throw new Error('Generic object is missing "getLayout"');
	      }

	      const qId = getQId(genericObject);

	      if (!qId) {
	        throw new Error('Generic object is missing "qId" for path "getLayout().qInfo.qId"');
	      }
	    }
	    /**
	     * Creates mock of `getObject(id)` based on an array of generic objects.
	     * @param {Array<object>} genericObjects Generic objects.
	     * @param {EnigmaMockerOptions} options Options.
	     * @returns Function to retrieve the mocked generic object with the corresponding id.
	     */


	    function GetObjectMock() {
	      let genericObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
	      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

	      if (!Array.isArray(genericObjects) || genericObjects.length === 0) {
	        return () => {
	          throw new Error('No "genericObjects" specified');
	        };
	      }

	      genericObjects.forEach(validate);
	      const mocks = createMocks(genericObjects, options);
	      return async id => Promise.resolve(mocks[id]);
	    }

	    function GetAppLayoutMock() {
	      return () => Promise.resolve({
	        id: 'app-layout'
	      });
	    }
	    /**
	     * @interface EnigmaMockerOptions
	     * @property {number} delay Simulate delay (in ms) for calls in enigma-mocker.
	     */

	    /**
	     * Mocks Engima app functionality. It accepts one / many generic objects as input argument and returns the mocked Enigma app. Each generic object represents one visulization and specifies how it behaves. For example, what layout to use the data to present.
	     *
	     * The generic object is represented with a Javascript object with a number of properties. The name of the property correlates to the name in the Enigma model for `app.getObject(id)`. For example, the property `getLayout` in the generic object is used to define `app.getObject(id).getLayout()`. Any property can be added to the fixture (just make sure it exists and behaves as in the Enigma model!).
	     *
	     * The value for each property is either fixed (string / boolean / number / object) or a function. Arguments are forwarded to the function to allow for greater flexibility. For example, this can be used to return different hypercube data when scrolling in the chart.
	     *
	     * @param {Array<object>} genericObjects Generic objects controling behaviour of visualizations.
	     * @param {EnigmaMockerOptions} options Options
	     * @returns {Promise<enigma.Doc>}
	     * @example
	     * const genericObject = {
	     *   getLayout() {
	     *     return {
	     *       qInfo: {
	     *         qId: 'qqj4zx',
	     *         qType: 'sn-grid-chart'
	     *       },
	     *       ...
	     *     }
	     *   },
	     *   getHyperCubeData(path, page) {
	     *     return [ ... ];
	     *   }
	     * };
	     * const app = await EnigmaMocker.fromGenericObjects([genericObject]);
	     */


	    var fromGenericObjects = function (genericObjects) {
	      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
	      const session = new SessionMock();
	      const createSessionObject = new CreateSessionObjectMock();
	      const getObject = new GetObjectMock(genericObjects, options);
	      const getAppLayout = new GetAppLayoutMock();
	      const app = {
	        id: "app - ".concat(+Date.now()),
	        session,
	        createSessionObject,
	        getObject,
	        getAppLayout
	      };
	      return Promise.resolve(app);
	    };

	    var index = {
	      fromGenericObjects
	    };
	    return index;
	  });
	})(enigmaMocker_dev);

	(function (module) {
	  module.exports = enigmaMocker_dev.exports;
	})(enigmaMocker);

	var EnigmaMocker = /*@__PURE__*/getDefaultExportFromCjs(enigmaMocker.exports);

	/* eslint no-underscore-dangle: 0 */

	const __DO_NOT_USE__ = {
	  generator: generatorFn,
	  hook,
	  theme,
	  locale,
	  EnigmaMocker
	};

	exports.__DO_NOT_USE__ = __DO_NOT_USE__;
	exports.conversion = conversion;
	exports.embed = index;
	exports.onTakeSnapshot = onTakeSnapshot;
	exports.useAction = useAction;
	exports.useApp = useApp;
	exports.useAppLayout = useAppLayout;
	exports.useConstraints = useConstraints;
	exports.useDeviceType = useDeviceType;
	exports.useEffect = useEffect;
	exports.useElement = useElement;
	exports.useEmbed = useEmbed;
	exports.useGlobal = useGlobal;
	exports.useImperativeHandle = useImperativeHandle;
	exports.useKeyboard = useKeyboard;
	exports.useLayout = useLayout;
	exports.useMemo = useMemo;
	exports.useModel = useModel;
	exports.useOptions = useOptions;
	exports.usePlugins = usePlugins;
	exports.usePromise = usePromise;
	exports.useRect = useRect;
	exports.useRenderState = useRenderState;
	exports.useSelections = useSelections;
	exports.useStaleLayout = useStaleLayout;
	exports.useState = useState;
	exports.useTheme = useTheme;
	exports.useTranslator = useTranslator;

	Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=stardust.dev.js.map