From 45c662e4d4abe49453e6f0558d0efcba5b37d3e5 Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Thu, 12 May 2022 20:53:22 -0400
Subject: [PATCH 01/33] Initializing Importing for empty Pull Request


From a05edbf106487367bbf3a5504784161be54439b0 Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Thu, 12 May 2022 20:55:58 -0400
Subject: [PATCH 02/33] Functional API call, prototype interface

---
 docs/index.html               |  64 ++++++++++
 docs/js/app.js                | 220 ++++++++++++++++++++++++----------
 src/index.html                |  64 ++++++++++
 src/js/app.js                 |  22 ++--
 src/js/constants.js           |   2 +-
 src/js/encounter.js           |  20 ++--
 src/js/{lib.js => helpers.js} |   0
 src/js/importer.js            |  22 ++++
 src/js/monster.js             |   6 +-
 9 files changed, 335 insertions(+), 85 deletions(-)
 rename src/js/{lib.js => helpers.js} (100%)
 create mode 100644 src/js/importer.js

diff --git a/docs/index.html b/docs/index.html
index eac642b0..ac88a257 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -103,6 +103,7 @@
 					</div>
 					<div class="hidden lg:flex text-white lg:-my-px lg:ml-6 lg:space-x-8 items-center">
                         <a @click="showKeyboardModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Keyboard Shortcuts <span class="inline-flex items-center px-1 py-0.5 rounded text-xs font-medium bg-emerald-800 text-emerald-100 ml-1">Ctrl+/</span></a>
+                        <a @click="showImporterModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Import Custom Monsters</a>
                         <a href="https://fantasy-calendar.com/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Fantasy Calendar</a>
                         <a href="https://fantasycomputer.works/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">About</a>
 						<a x-tippy="Toggle light mode (ctrl+shift+\)" @click="toggleTheme()" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300 h-full">
@@ -1311,6 +1312,69 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 			</div>
 		</div>
 
+		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
+			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+				<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
+					 x-show="showImporterModal"
+					 x-transition:enter="ease-out duration-300"
+					 x-transition:enter-start="opacity-0"
+					 x-transition:enter-end="opacity-100"
+					 x-transition:leave="ease-in duration-200"
+					 x-transition:leave-start="opacity-100"
+					 x-transition:leave-end="opacity-0"
+				></div>
+
+				<!-- This element is to trick the browser into centering the modal contents. -->
+				<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+				<div @mousedown.outside="showImporterModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+					 x-show="showImporterModal"
+					 x-transition:enter="ease-out duration-300"
+					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+					 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+					 x-transition:leave="ease-in duration-200"
+					 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+					 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+				>
+					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
+						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
+							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
+							importerSourceType: 'sheets',
+							async doImport() {
+								console.log(await Importer.import({
+									type: this.importerSourceType,
+									resourceLocator: this.importerResourceLocator
+								}));
+							}
+							
+						}">
+							<div class="w-full flex pb-3">
+								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keyboard Shortcuts</h3>
+							</div>
+
+							<div class="my-3 sm:mt-0 w-full">
+								<label for="importer_source">Import from</label>
+								<select x-model="importerSourceType" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
+									<optgroup label="More to come...">
+										<option value="google-sheets">Google Sheets</option>
+									</optgroup>
+								</select>
+
+								<label for="import_resource_locator">Sheets ID</label>
+								<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
+
+								<button class="button-primary-md" @click="doImport">Import</button>
+							</div>
+						</div>
+					</div>
+
+					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
+						<button @click="showImporterModal = false" type="button" class="button-primary-md">Close</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
 
 		<div aria-live="assertive" class="fixed inset-0 flex items-end z-50 px-4 py-6 pointer-events-none sm:p-6 sm:items-end" x-data="{ notifications: [], notification: function($event){ this.notifications.push($event.detail) } }" @notification.window="notification">
 		<div class="w-full flex flex-col items-center space-y-4 sm:items-end">
diff --git a/docs/js/app.js b/docs/js/app.js
index 6e347b74..2ac772f8 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9161,15 +9161,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var choices_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! choices.js */ "./node_modules/choices.js/public/assets/scripts/choices.js");
 /* harmony import */ var choices_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(choices_js__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var hotkeys_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! hotkeys-js */ "./node_modules/hotkeys-js/dist/hotkeys.esm.js");
-/* harmony import */ var _encounter_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./encounter.js */ "./src/js/encounter.js");
-/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! nouislider */ "./node_modules/nouislider/dist/nouislider.js");
-/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(nouislider__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _lib_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./lib.js */ "./src/js/lib.js");
-/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./constants.js */ "./src/js/constants.js");
-/* harmony import */ var _monster_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./monster.js */ "./src/js/monster.js");
-/* harmony import */ var tippy_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! tippy.js */ "./node_modules/tippy.js/dist/tippy.esm.js");
-/* harmony import */ var _alpinejs_persist__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @alpinejs/persist */ "./node_modules/@alpinejs/persist/dist/module.esm.js");
-/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! alpinejs */ "./node_modules/alpinejs/dist/module.esm.js");
+/* harmony import */ var _encounter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./encounter */ "./src/js/encounter.js");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers */ "./src/js/helpers.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./constants */ "./src/js/constants.js");
+/* harmony import */ var _monster__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./monster */ "./src/js/monster.js");
+/* harmony import */ var _importer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./importer */ "./src/js/importer.js");
+/* harmony import */ var tippy_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! tippy.js */ "./node_modules/tippy.js/dist/tippy.esm.js");
+/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! nouislider */ "./node_modules/nouislider/dist/nouislider.js");
+/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(nouislider__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var _alpinejs_persist__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @alpinejs/persist */ "./node_modules/@alpinejs/persist/dist/module.esm.js");
+/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! alpinejs */ "./node_modules/alpinejs/dist/module.esm.js");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -9206,29 +9207,31 @@ __webpack_require__(/*! @fortawesome/fontawesome-free */ "./node_modules/@fortaw
 
 
 
+
 var internationalNumberFormat = new Intl.NumberFormat('en-US');
 
 function app() {
   return {
     sourcesVersion: "2.1.0",
-    storedSourcesVersion: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist("2.0.0").as('storedSourcesVersion'),
+    storedSourcesVersion: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("2.0.0").as('storedSourcesVersion'),
     menu: false,
     showFilters: false,
     showSourcesModal: false,
     showEncounterModal: false,
     showPartyModal: false,
     showKeyboardModal: false,
+    showImporterModal: true,
     mobileEncounterTab: false,
     filters: {},
     searchPlaceholder: "",
     nonDefaultFiltersCount: 0,
-    loadedSources: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist([]).as('sources'),
-    loadedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist([]).as('monsters'),
-    encounterHistory: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist([]).as('encounterHistory'),
-    savedEncounters: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist([]).as('savedEncounters'),
-    loadedEncounterIndex: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist(null).as('loadedEncounterIndex'),
-    loadedLastEncounter: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist(false).as('loadedLastEncounter'),
-    savedParties: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist([]).as('savedParties'),
+    loadedSources: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('sources'),
+    loadedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('monsters'),
+    encounterHistory: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('encounterHistory'),
+    savedEncounters: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('savedEncounters'),
+    loadedEncounterIndex: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(null).as('loadedEncounterIndex'),
+    loadedLastEncounter: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(false).as('loadedLastEncounter'),
+    savedParties: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('savedParties'),
     sources: {},
     enabledSources: [],
     allMonsters: [],
@@ -9236,23 +9239,23 @@ function app() {
     monsterLookupTable: {},
     environments: {},
     totalPages: 1,
-    currentPage: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist(1).as('currentPage'),
+    currentPage: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(1).as('currentPage'),
     pagination: [],
-    monstersPerPage: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist(10).as("monstersPerPage"),
-    encounterType: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist("random").as("encounterType"),
+    monstersPerPage: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(10).as("monstersPerPage"),
+    encounterType: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("random").as("encounterType"),
     encounterTypeSelectOpen: false,
-    encounterTypes: Object.fromEntries(Object.entries(_constants_js__WEBPACK_IMPORTED_MODULE_6__["default"].ENCOUNTER_TYPES).map(function (entry) {
+    encounterTypes: Object.fromEntries(Object.entries(_constants__WEBPACK_IMPORTED_MODULE_5__["default"].ENCOUNTER_TYPES).map(function (entry) {
       return [entry[0], {
         key: entry[0],
         label: entry[1].name
       }];
     })),
     difficultySelectOpen: false,
-    difficulty: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist("medium").as("difficulty"),
-    search: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist("").as("search"),
-    encounter: _encounter_js__WEBPACK_IMPORTED_MODULE_3__["default"],
-    sortBy: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist("name").as("sortBy"),
-    sortByDesc: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist(true).as("sortByDesc"),
+    difficulty: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("medium").as("difficulty"),
+    search: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("").as("search"),
+    encounter: _encounter__WEBPACK_IMPORTED_MODULE_3__["default"],
+    sortBy: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("name").as("sortBy"),
+    sortByDesc: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(true).as("sortByDesc"),
     setSortBy: function setSortBy(type) {
       if (type === this.sortBy) {
         this.sortByDesc = !this.sortByDesc;
@@ -9329,7 +9332,7 @@ function app() {
     },
 
     party: {
-      groups: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist([{
+      groups: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([{
         players: 4,
         level: 1,
         getsXP: true
@@ -9356,7 +9359,7 @@ function app() {
       getGroupExperience: function getGroupExperience(acc, group) {
         var _acc$easy, _group$players, _acc$medium, _group$players2, _acc$hard, _group$players3, _acc$deadly, _group$players4, _acc$daily, _group$players5;
 
-        var groupExp = _constants_js__WEBPACK_IMPORTED_MODULE_6__["default"].EXP[group.level];
+        var groupExp = _constants__WEBPACK_IMPORTED_MODULE_5__["default"].EXP[group.level];
         return {
           easy: ((_acc$easy = acc === null || acc === void 0 ? void 0 : acc.easy) !== null && _acc$easy !== void 0 ? _acc$easy : 0) + groupExp.easy * ((_group$players = group === null || group === void 0 ? void 0 : group.players) !== null && _group$players !== void 0 ? _group$players : 1),
           medium: ((_acc$medium = acc === null || acc === void 0 ? void 0 : acc.medium) !== null && _acc$medium !== void 0 ? _acc$medium : 0) + groupExp.medium * ((_group$players2 = group === null || group === void 0 ? void 0 : group.players) !== null && _group$players2 !== void 0 ? _group$players2 : 1),
@@ -9463,7 +9466,7 @@ function app() {
 
                 _context.t2.formatMonsters.call(_context.t2, _context.t3);
 
-                _this2.searchPlaceholder = _lib_js__WEBPACK_IMPORTED_MODULE_5__.randomArrayElement(_this2.allMonsters).name;
+                _this2.searchPlaceholder = _helpers__WEBPACK_IMPORTED_MODULE_4__.randomArrayElement(_this2.allMonsters).name;
 
                 if (_this2.loadedEncounterIndex !== null) {
                   _this2.encounter.load(_this2.savedEncounters[_this2.loadedEncounterIndex]);
@@ -9574,7 +9577,7 @@ function app() {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                if (!(_this4.loadedSources.length > 0 && _lib_js__WEBPACK_IMPORTED_MODULE_5__.versionCompare(_this4.sourcesVersion, _this4.storedSourcesVersion) === 0)) {
+                if (!(_this4.loadedSources.length && _helpers__WEBPACK_IMPORTED_MODULE_4__.versionCompare(_this4.sourcesVersion, _this4.storedSourcesVersion) === 0)) {
                   _context2.next = 2;
                   break;
                 }
@@ -9630,7 +9633,7 @@ function app() {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
-                if (!(_this5.loadedMonsters.length > 0 && _lib_js__WEBPACK_IMPORTED_MODULE_5__.versionCompare(_this5.storedSourcesVersion, _this5.sourcesVersion) === 0)) {
+                if (!(_this5.loadedSources.length && _helpers__WEBPACK_IMPORTED_MODULE_4__.versionCompare(_this5.storedSourcesVersion, _this5.sourcesVersion) === 0)) {
                   _context3.next = 2;
                   break;
                 }
@@ -9685,7 +9688,7 @@ function app() {
       var _this6 = this;
 
       this.allMonsters = data.map(function (data) {
-        var monster = new _monster_js__WEBPACK_IMPORTED_MODULE_7__["default"](_this6, data);
+        var monster = new _monster__WEBPACK_IMPORTED_MODULE_6__["default"](_this6, data);
         _this6.monsterLookupTable[monster.slug] = monster;
         return monster;
       });
@@ -9741,7 +9744,7 @@ function app() {
             return filter.min !== 0 || filter.max !== 30;
 
           case "alignment":
-            return filter !== _constants_js__WEBPACK_IMPORTED_MODULE_6__["default"].ALL_ALIGNMENTS;
+            return filter !== _constants__WEBPACK_IMPORTED_MODULE_5__["default"].ALL_ALIGNMENTS;
 
           default:
             return filter.length && !filter.includes('any');
@@ -9870,7 +9873,7 @@ function app() {
           return player.active;
         }).forEach(function (player, playerIndex) {
           data.Combatants.push({
-            Id: _lib_js__WEBPACK_IMPORTED_MODULE_5__.slugify("".concat(party.name, "-").concat(player.name)),
+            Id: _helpers__WEBPACK_IMPORTED_MODULE_4__.slugify("".concat(party.name, "-").concat(player.name)),
             Name: player.name,
             InitiativeModifier: player.initiativeMod,
             InitiativeAdvantage: player.initiativeAdvantage,
@@ -9913,14 +9916,14 @@ function multiSlider($el, name, options, updateCallback) {
       max: '30'
     },
     options: options,
-    value: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist({
+    value: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist({
       min: '0',
       max: '30'
     }).as(name),
     init: function init() {
       var _this10 = this;
 
-      this.slider = nouislider__WEBPACK_IMPORTED_MODULE_4___default().create($el, {
+      this.slider = nouislider__WEBPACK_IMPORTED_MODULE_8___default().create($el, {
         start: [options.findIndex(function (option) {
           return option.value === _this10.value.min;
         }), options.findIndex(function (option) {
@@ -9951,8 +9954,8 @@ function multiSlider($el, name, options, updateCallback) {
         detail: {
           name: "cr",
           value: {
-            min: _constants_js__WEBPACK_IMPORTED_MODULE_6__["default"].CR[this.value.min].numeric,
-            max: _constants_js__WEBPACK_IMPORTED_MODULE_6__["default"].CR[this.value.max].numeric
+            min: _constants__WEBPACK_IMPORTED_MODULE_5__["default"].CR[this.value.min].numeric,
+            max: _constants__WEBPACK_IMPORTED_MODULE_5__["default"].CR[this.value.max].numeric
           }
         }
       }));
@@ -9990,7 +9993,7 @@ function multiSlider($el, name, options, updateCallback) {
 function multiSelect($el, name, options) {
   return {
     multiple: true,
-    value: alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].$persist(['any']).as(name),
+    value: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(['any']).as(name),
     name: name,
     options: options,
     init: function init() {
@@ -10069,12 +10072,13 @@ window.hotkeys = hotkeys_js__WEBPACK_IMPORTED_MODULE_2__["default"];
 window.app = app;
 window.multiSelect = multiSelect;
 window.multiSlider = multiSlider;
-window.noUiSlider = (nouislider__WEBPACK_IMPORTED_MODULE_4___default());
+window.noUiSlider = (nouislider__WEBPACK_IMPORTED_MODULE_8___default());
 window.Choices = (choices_js__WEBPACK_IMPORTED_MODULE_1___default());
-window.tippy = tippy_js__WEBPACK_IMPORTED_MODULE_10__["default"];
-window.Alpine = alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"];
-alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].plugin(_alpinejs_persist__WEBPACK_IMPORTED_MODULE_8__["default"]);
-alpinejs__WEBPACK_IMPORTED_MODULE_9__["default"].start();
+window.tippy = tippy_js__WEBPACK_IMPORTED_MODULE_11__["default"];
+window.Importer = _importer__WEBPACK_IMPORTED_MODULE_7__["default"];
+window.Alpine = alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"];
+alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].plugin(_alpinejs_persist__WEBPACK_IMPORTED_MODULE_9__["default"]);
+alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].start();
 
 /***/ }),
 
@@ -10089,7 +10093,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _lib_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./lib.js */ "./src/js/lib.js");
+/* harmony import */ var _helpers_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./helpers.js */ "./src/js/helpers.js");
 
 var CONST = {
   EXP: {
@@ -10640,7 +10644,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _lib_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./lib.js */ "./src/js/lib.js");
+/* harmony import */ var _helpers_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./helpers.js */ "./src/js/helpers.js");
 /* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants.js */ "./src/js/constants.js");
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -10723,11 +10727,11 @@ var encounter = {
           upperKey = _levels$i[0],
           upperValue = _levels$i[1];
 
-      var _ratio = _lib_js__WEBPACK_IMPORTED_MODULE_0__.ratio(lowerValue, upperValue, exp);
+      var _ratio = _helpers_js__WEBPACK_IMPORTED_MODULE_0__.ratio(lowerValue, upperValue, exp);
 
       if (upperKey === "daily" && _ratio >= 0.0) {
         if (_ratio >= 0.2) {
-          return _ratio >= 1.0 ? "like " + _lib_js__WEBPACK_IMPORTED_MODULE_0__.randomArrayElement(this.insaneDifficultyStrings) : _ratio >= 0.6 ? 'extremely deadly' : "really deadly";
+          return _ratio >= 1.0 ? "like " + _helpers_js__WEBPACK_IMPORTED_MODULE_0__.randomArrayElement(this.insaneDifficultyStrings) : _ratio >= 0.6 ? 'extremely deadly' : "really deadly";
         }
 
         return lowerKey;
@@ -10740,7 +10744,7 @@ var encounter = {
       }
     }
 
-    var ratio = _lib_js__WEBPACK_IMPORTED_MODULE_0__.ratio(0, levels[0][1], exp);
+    var ratio = _helpers_js__WEBPACK_IMPORTED_MODULE_0__.ratio(0, levels[0][1], exp);
     return ratio > 0.5 ? "like a nuisance" : "like a minor nuisance";
   },
 
@@ -10884,13 +10888,13 @@ var encounter = {
       });
     }
 
-    return _lib_js__WEBPACK_IMPORTED_MODULE_0__.randomArrayElement(monsterList);
+    return _helpers_js__WEBPACK_IMPORTED_MODULE_0__.randomArrayElement(monsterList);
   },
   getEncounterTemplate: function getEncounterTemplate() {
-    var template = _lib_js__WEBPACK_IMPORTED_MODULE_0__.clone(_constants_js__WEBPACK_IMPORTED_MODULE_1__["default"].ENCOUNTER_TYPES[this.app.encounterType]);
+    var template = _helpers_js__WEBPACK_IMPORTED_MODULE_0__.clone(_constants_js__WEBPACK_IMPORTED_MODULE_1__["default"].ENCOUNTER_TYPES[this.app.encounterType]);
 
     if (template.samples) {
-      template = _lib_js__WEBPACK_IMPORTED_MODULE_0__.randomArrayElement(template.samples);
+      template = _helpers_js__WEBPACK_IMPORTED_MODULE_0__.randomArrayElement(template.samples);
 
       if (this.app.encounterType === "random") {
         template = {
@@ -10911,7 +10915,7 @@ var encounter = {
           part = part.replaceAll("players", players);
           return eval(part);
         });
-        group.count = parts.length > 1 ? _lib_js__WEBPACK_IMPORTED_MODULE_0__.randomIntBetween.apply(_lib_js__WEBPACK_IMPORTED_MODULE_0__, _toConsumableArray(parts)) : parts[0];
+        group.count = parts.length > 1 ? _helpers_js__WEBPACK_IMPORTED_MODULE_0__.randomIntBetween.apply(_helpers_js__WEBPACK_IMPORTED_MODULE_0__, _toConsumableArray(parts)) : parts[0];
       }
 
       return group;
@@ -10964,7 +10968,7 @@ var encounter = {
       });
     });
     if (!monsterList.length) return;
-    group.monster = _lib_js__WEBPACK_IMPORTED_MODULE_0__.randomArrayElement(monsterList);
+    group.monster = _helpers_js__WEBPACK_IMPORTED_MODULE_0__.randomArrayElement(monsterList);
     this.saveToHistory();
   },
   addMonster: function addMonster(monster) {
@@ -11075,7 +11079,7 @@ var encounter = {
   load: function load(encounter) {
     var _this2 = this;
 
-    var groups = _lib_js__WEBPACK_IMPORTED_MODULE_0__.clone(encounter).map(function (group) {
+    var groups = _helpers_js__WEBPACK_IMPORTED_MODULE_0__.clone(encounter).map(function (group) {
       group.monster = _this2.app.monsterLookupTable[group.monster.slug];
       if (!group.monster) return false;
       return group;
@@ -11119,10 +11123,10 @@ var encounter = {
 
 /***/ }),
 
-/***/ "./src/js/lib.js":
-/*!***********************!*\
-  !*** ./src/js/lib.js ***!
-  \***********************/
+/***/ "./src/js/helpers.js":
+/*!***************************!*\
+  !*** ./src/js/helpers.js ***!
+  \***************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -11271,6 +11275,98 @@ function versionCompare(v1, v2, options) {
   return 0;
 }
 
+/***/ }),
+
+/***/ "./src/js/importer.js":
+/*!****************************!*\
+  !*** ./src/js/importer.js ***!
+  \****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ Importer)
+/* harmony export */ });
+/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js");
+/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);
+
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+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; }
+
+var Importer = /*#__PURE__*/function () {
+  function Importer() {
+    _classCallCheck(this, Importer);
+  }
+
+  _createClass(Importer, null, [{
+    key: "import",
+    value:
+    /* import({
+    *      resourceLocator = false,
+    *      type = 'google-sheets',
+    * }={})
+    *
+    * <- Exact format needed for localStorage
+    *
+     */
+    function () {
+      var _import2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee() {
+        var _ref,
+            _ref$resourceLocator,
+            resourceLocator,
+            _ref$type,
+            type,
+            results,
+            _args = arguments;
+
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _ref = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, _ref$resourceLocator = _ref.resourceLocator, resourceLocator = _ref$resourceLocator === void 0 ? false : _ref$resourceLocator, _ref$type = _ref.type, type = _ref$type === void 0 ? 'google-sheets' : _ref$type;
+                _context.next = 3;
+                return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Monsters?") + new URLSearchParams({
+                  key: this.key
+                }));
+
+              case 3:
+                results = _context.sent;
+                return _context.abrupt("return", results);
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function _import() {
+        return _import2.apply(this, arguments);
+      }
+
+      return _import;
+    }()
+  }]);
+
+  return Importer;
+}();
+
+_defineProperty(Importer, "key", 'AIzaSyASDsLebocDQEHt3-MV_a_tI8r25CHotT4');
+
+
+
 /***/ }),
 
 /***/ "./src/js/monster.js":
@@ -11285,7 +11381,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (/* binding */ Monster)
 /* harmony export */ });
 /* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants.js */ "./src/js/constants.js");
-/* harmony import */ var _lib_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./lib.js */ "./src/js/lib.js");
+/* harmony import */ var _helpers_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helpers.js */ "./src/js/helpers.js");
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -11320,7 +11416,7 @@ var Monster = /*#__PURE__*/function () {
     this.app = app;
     this.data = data;
     this.cr = _constants_js__WEBPACK_IMPORTED_MODULE_0__["default"].CR[this.data.cr];
-    this.slug = _lib_js__WEBPACK_IMPORTED_MODULE_1__.slugify(this.data.name + '-' + this.data.sources + "-" + this.cr.string);
+    this.slug = _helpers_js__WEBPACK_IMPORTED_MODULE_1__.slugify(this.data.name + '-' + this.data.sources + "-" + this.cr.string);
     this.tags = this.data.tags ? this.data.tags.split(/\s*,\s*/).sort() : null;
     this.special = !!this.data.special;
     this.legendary = !!this.data.legendary;
@@ -11349,7 +11445,7 @@ var Monster = /*#__PURE__*/function () {
       if (!isNaN(location)) {
         source.reference = _this.app.sources[book];
         source.page = location;
-      } else if (_lib_js__WEBPACK_IMPORTED_MODULE_1__.isValidHttpUrl(location)) {
+      } else if (_helpers_js__WEBPACK_IMPORTED_MODULE_1__.isValidHttpUrl(location)) {
         source.reference = {
           name: book,
           shortname: book,
diff --git a/src/index.html b/src/index.html
index eac642b0..ac88a257 100644
--- a/src/index.html
+++ b/src/index.html
@@ -103,6 +103,7 @@
 					</div>
 					<div class="hidden lg:flex text-white lg:-my-px lg:ml-6 lg:space-x-8 items-center">
                         <a @click="showKeyboardModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Keyboard Shortcuts <span class="inline-flex items-center px-1 py-0.5 rounded text-xs font-medium bg-emerald-800 text-emerald-100 ml-1">Ctrl+/</span></a>
+                        <a @click="showImporterModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Import Custom Monsters</a>
                         <a href="https://fantasy-calendar.com/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Fantasy Calendar</a>
                         <a href="https://fantasycomputer.works/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">About</a>
 						<a x-tippy="Toggle light mode (ctrl+shift+\)" @click="toggleTheme()" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300 h-full">
@@ -1311,6 +1312,69 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 			</div>
 		</div>
 
+		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
+			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+				<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
+					 x-show="showImporterModal"
+					 x-transition:enter="ease-out duration-300"
+					 x-transition:enter-start="opacity-0"
+					 x-transition:enter-end="opacity-100"
+					 x-transition:leave="ease-in duration-200"
+					 x-transition:leave-start="opacity-100"
+					 x-transition:leave-end="opacity-0"
+				></div>
+
+				<!-- This element is to trick the browser into centering the modal contents. -->
+				<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+				<div @mousedown.outside="showImporterModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+					 x-show="showImporterModal"
+					 x-transition:enter="ease-out duration-300"
+					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+					 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+					 x-transition:leave="ease-in duration-200"
+					 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+					 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+				>
+					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
+						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
+							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
+							importerSourceType: 'sheets',
+							async doImport() {
+								console.log(await Importer.import({
+									type: this.importerSourceType,
+									resourceLocator: this.importerResourceLocator
+								}));
+							}
+							
+						}">
+							<div class="w-full flex pb-3">
+								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keyboard Shortcuts</h3>
+							</div>
+
+							<div class="my-3 sm:mt-0 w-full">
+								<label for="importer_source">Import from</label>
+								<select x-model="importerSourceType" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
+									<optgroup label="More to come...">
+										<option value="google-sheets">Google Sheets</option>
+									</optgroup>
+								</select>
+
+								<label for="import_resource_locator">Sheets ID</label>
+								<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
+
+								<button class="button-primary-md" @click="doImport">Import</button>
+							</div>
+						</div>
+					</div>
+
+					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
+						<button @click="showImporterModal = false" type="button" class="button-primary-md">Close</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
 
 		<div aria-live="assertive" class="fixed inset-0 flex items-end z-50 px-4 py-6 pointer-events-none sm:p-6 sm:items-end" x-data="{ notifications: [], notification: function($event){ this.notifications.push($event.detail) } }" @notification.window="notification">
 		<div class="w-full flex flex-col items-center space-y-4 sm:items-end">
diff --git a/src/js/app.js b/src/js/app.js
index b390a474..4e51aaa7 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -2,12 +2,14 @@ require('@fortawesome/fontawesome-free')
 
 import Choices from 'choices.js';
 import hotkeys from 'hotkeys-js';
-import encounter from "./encounter.js";
-import noUiSlider from "nouislider";
-import * as lib from "./lib.js";
-import CONST from "./constants.js";
-import Monster from "./monster.js";
+import encounter from "./encounter";
+import * as helpers from "./helpers";
+import CONST from "./constants";
+import Monster from "./monster";
+import Importer from "./importer";
+
 import tippy from 'tippy.js';
+import noUiSlider from "nouislider";
 
 import persist from '@alpinejs/persist'
 import Alpine from 'alpinejs'
@@ -27,6 +29,7 @@ function app() {
         showEncounterModal: false,
         showPartyModal: false,
         showKeyboardModal: false,
+        showImporterModal: true,
 
         mobileEncounterTab: false,
 
@@ -252,7 +255,7 @@ function app() {
         async fetchData() {
             this.formatSources(await this.fetchSources());
             this.formatMonsters(await this.fetchMonsters());
-            this.searchPlaceholder = lib.randomArrayElement(this.allMonsters).name;
+            this.searchPlaceholder = helpers.randomArrayElement(this.allMonsters).name;
 
             if (this.loadedEncounterIndex !== null){
                 this.encounter.load(this.savedEncounters[this.loadedEncounterIndex]);
@@ -323,7 +326,7 @@ function app() {
 
         async fetchSources(){
 
-            if(this.loadedSources.length > 0 && lib.versionCompare(this.sourcesVersion, this.storedSourcesVersion) === 0){
+            if(this.loadedSources.length && helpers.versionCompare(this.sourcesVersion, this.storedSourcesVersion) === 0){
                 return this.loadedSources;
             }
 
@@ -358,7 +361,7 @@ function app() {
 
         async fetchMonsters(){
 
-            if(this.loadedMonsters.length > 0 && lib.versionCompare(this.storedSourcesVersion, this.sourcesVersion) === 0){
+            if(this.loadedSources.length && helpers.versionCompare(this.storedSourcesVersion, this.sourcesVersion) === 0){
                 return this.loadedMonsters;
             }
 
@@ -541,7 +544,7 @@ function app() {
             this.savedParties.forEach((party, partyIndex) => {
                 party.players.filter(player => player.active).forEach((player, playerIndex) => {
                     data.Combatants.push({
-                        Id: lib.slugify(`${party.name}-${player.name}`),
+                        Id: helpers.slugify(`${party.name}-${player.name}`),
                         Name: player.name,
                         InitiativeModifier: player.initiativeMod,
                         InitiativeAdvantage: player.initiativeAdvantage,
@@ -719,6 +722,7 @@ window.multiSlider = multiSlider;
 window.noUiSlider = noUiSlider;
 window.Choices = Choices;
 window.tippy = tippy;
+window.Importer = Importer;
 
 window.Alpine = Alpine
 
diff --git a/src/js/constants.js b/src/js/constants.js
index 09c57ea4..c1f6125c 100644
--- a/src/js/constants.js
+++ b/src/js/constants.js
@@ -1,4 +1,4 @@
-import * as lib from "./lib.js";
+import * as helpers from "./helpers.js";
 
 const CONST = {
 
diff --git a/src/js/encounter.js b/src/js/encounter.js
index c0df118d..65cc1614 100644
--- a/src/js/encounter.js
+++ b/src/js/encounter.js
@@ -1,4 +1,4 @@
-import * as lib from "./lib.js";
+import * as helpers from "./helpers.js";
 import CONST from "./constants.js";
 
 const encounter = {
@@ -60,12 +60,12 @@ const encounter = {
         for(let i = 1; i < levels.length; i++){
             const [lowerKey, lowerValue] = levels[i-1];
             const [upperKey, upperValue] = levels[i];
-            const ratio = lib.ratio(lowerValue, upperValue, exp);
+            const ratio = helpers.ratio(lowerValue, upperValue, exp);
 
             if(upperKey === "daily" && ratio >= 0.0) {
                 if (ratio >= 0.2) {
                     return ratio >= 1.0
-                        ? "like " + lib.randomArrayElement(this.insaneDifficultyStrings)
+                        ? "like " + helpers.randomArrayElement(this.insaneDifficultyStrings)
                         : ratio >= 0.6 ? 'extremely deadly' : "really deadly";
                 }
                 return lowerKey;
@@ -77,7 +77,7 @@ const encounter = {
             }
         }
 
-        const ratio = lib.ratio(0, levels[0][1], exp);
+        const ratio = helpers.ratio(0, levels[0][1], exp);
         return ratio > 0.5 ? "like a nuisance" : "like a minor nuisance";
     },
 
@@ -216,16 +216,16 @@ const encounter = {
 
         }
 
-        return lib.randomArrayElement(monsterList);
+        return helpers.randomArrayElement(monsterList);
 
     },
 
     getEncounterTemplate() {
 
-        let template = lib.clone(CONST.ENCOUNTER_TYPES[this.app.encounterType]);
+        let template = helpers.clone(CONST.ENCOUNTER_TYPES[this.app.encounterType]);
 
         if (template.samples) {
-            template = lib.randomArrayElement(template.samples);
+            template = helpers.randomArrayElement(template.samples);
             if (this.app.encounterType === "random") {
                 template = {
                     subtractive: true,
@@ -243,7 +243,7 @@ const encounter = {
                     part = part.replaceAll("players", players);
                     return eval(part);
                 });
-                group.count = parts.length > 1 ? lib.randomIntBetween(...parts) : parts[0];
+                group.count = parts.length > 1 ? helpers.randomIntBetween(...parts) : parts[0];
             }
             return group;
         });
@@ -293,7 +293,7 @@ const encounter = {
             return !this.groups.some(group => group.monster === monster);
         });
         if (!monsterList.length) return;
-        group.monster = lib.randomArrayElement(monsterList);
+        group.monster = helpers.randomArrayElement(monsterList);
         this.saveToHistory();
     },
 
@@ -389,7 +389,7 @@ const encounter = {
     },
 
     load(encounter){
-        const groups = lib.clone(encounter).map(group => {
+        const groups = helpers.clone(encounter).map(group => {
             group.monster = this.app.monsterLookupTable[group.monster.slug];
             if (!group.monster) return false;
             return group;
diff --git a/src/js/lib.js b/src/js/helpers.js
similarity index 100%
rename from src/js/lib.js
rename to src/js/helpers.js
diff --git a/src/js/importer.js b/src/js/importer.js
new file mode 100644
index 00000000..7cf92dac
--- /dev/null
+++ b/src/js/importer.js
@@ -0,0 +1,22 @@
+export default class Importer {
+    static key = 'AIzaSyASDsLebocDQEHt3-MV_a_tI8r25CHotT4';
+
+    /* import({
+    *      resourceLocator = false,
+    *      type = 'google-sheets',
+    * }={})
+    *
+    * <- Exact format needed for localStorage
+    *
+     */
+    static async import({
+                    resourceLocator = false,
+                    type = 'google-sheets'
+                  } = {}) {
+        let results = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Monsters?` + new URLSearchParams({
+            key: this.key
+        }));
+        // HI!
+        return results;
+    }
+}
\ No newline at end of file
diff --git a/src/js/monster.js b/src/js/monster.js
index dce9f082..2690c767 100644
--- a/src/js/monster.js
+++ b/src/js/monster.js
@@ -1,5 +1,5 @@
 import CONST from "./constants.js";
-import * as lib from "./lib.js";
+import * as helpers from "./helpers.js";
 
 const regexCache = {};
 let lastRegex = "";
@@ -11,7 +11,7 @@ export default class Monster {
         this.data = data;
         this.cr = CONST.CR[this.data.cr];
 
-        this.slug = lib.slugify(this.data.name+'-'+this.data.sources+"-"+this.cr.string);
+        this.slug = helpers.slugify(this.data.name+'-'+this.data.sources+"-"+this.cr.string);
 
         this.tags = this.data.tags ? this.data.tags.split(/\s*,\s*/).sort() : null;
 
@@ -48,7 +48,7 @@ export default class Monster {
             if (!isNaN(location)) {
                 source.reference = this.app.sources[book];
                 source.page = location;
-            } else if (lib.isValidHttpUrl(location)) {
+            } else if (helpers.isValidHttpUrl(location)) {
                 source.reference = {
                     name: book,
                     shortname: book,

From cc5bf19b7636ef20ed951aaae9e2909561080513 Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Thu, 12 May 2022 22:08:58 -0400
Subject: [PATCH 03/33] Mostly functional importer

---
 docs/css/styles.css |  30 +++++++++++
 docs/index.html     | 125 ++++++++++++++++++++++++++++++++++++++++----
 docs/js/app.js      | 109 ++++++++++++++++++++++++++++++++------
 src/index.html      | 125 ++++++++++++++++++++++++++++++++++++++++----
 src/js/app.js       |  16 +++---
 src/js/importer.js  |  63 +++++++++++++++++++---
 6 files changed, 420 insertions(+), 48 deletions(-)

diff --git a/docs/css/styles.css b/docs/css/styles.css
index 93f6cf99..760d25bc 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -8580,6 +8580,9 @@ input[type=text]:disabled{
 .col-span-6{
   grid-column: span 6 / span 6;
 }
+.col-span-5{
+  grid-column: span 5 / span 5;
+}
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
@@ -8604,6 +8607,10 @@ input[type=text]:disabled{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
+.-my-2{
+  margin-top: -0.5rem;
+  margin-bottom: -0.5rem;
+}
 .ml-1{
   margin-left: 0.25rem;
 }
@@ -9380,6 +9387,9 @@ input[type=text]:disabled{
 .pr-8{
   padding-right: 2rem;
 }
+.pl-4{
+  padding-left: 1rem;
+}
 .pt-0\.5{
   padding-top: 0.125rem;
 }
@@ -9395,6 +9405,9 @@ input[type=text]:disabled{
 .text-right{
   text-align: right;
 }
+.align-middle{
+  vertical-align: middle;
+}
 .align-bottom{
   vertical-align: bottom;
 }
@@ -10618,6 +10631,10 @@ body .choices__input:focus{
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
+.dark .dark\:even\:bg-gray-600:nth-child(even){
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
 .dark .dark\:hover\:border-gray-600:hover{
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -10787,6 +10804,10 @@ body .choices__input:focus{
     max-width: 42rem;
   }
 
+  .sm\:max-w-4xl{
+    max-width: 56rem;
+  }
+
   .sm\:translate-y-0{
     --tw-translate-y: 0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -11026,6 +11047,11 @@ body .choices__input:focus{
     margin-bottom: -1px;
   }
 
+  .lg\:-mx-8{
+    margin-left: -2rem;
+    margin-right: -2rem;
+  }
+
   .lg\:ml-6{
     margin-left: 1.5rem;
   }
@@ -11099,6 +11125,10 @@ body .choices__input:focus{
   .lg\:pl-0{
     padding-left: 0px;
   }
+
+  .lg\:pl-8{
+    padding-left: 2rem;
+  }
 }
 @media (min-width: 1536px){
 
diff --git a/docs/index.html b/docs/index.html
index ac88a257..26f3ad94 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1327,7 +1327,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 				<!-- This element is to trick the browser into centering the modal contents. -->
 				<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-				<div @mousedown.outside="showImporterModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+				<div @mousedown.outside="showImporterModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"
 					 x-show="showImporterModal"
 					 x-transition:enter="ease-out duration-300"
 					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -1339,20 +1339,31 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
 						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
 							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
-							importerSourceType: 'sheets',
-							async doImport() {
-								console.log(await Importer.import({
+							importerSourceType: 'google-sheets',
+							step: 1,
+							stagedMonsters: [],
+							stagedSources: [],
+							async startImport() {
+								importResults = await Importer.import({
 									type: this.importerSourceType,
 									resourceLocator: this.importerResourceLocator
-								}));
+								});
+
+								this.stagedMonsters = importResults.monsters;
+								this.stagedSources = importResults.sources;
+
+								this.step = 2;
+							},
+							finishImport() {
+								formatSources(this.stagedSources);
+								formatMonsters(this.stagedMonsters);
 							}
-							
 						}">
 							<div class="w-full flex pb-3">
-								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keyboard Shortcuts</h3>
+								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Import Custom Monsters</h3>
 							</div>
 
-							<div class="my-3 sm:mt-0 w-full">
+							<div class="my-3 sm:mt-0 w-full" x-show="step === 1">
 								<label for="importer_source">Import from</label>
 								<select x-model="importerSourceType" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
 									<optgroup label="More to come...">
@@ -1363,7 +1374,103 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 								<label for="import_resource_locator">Sheets ID</label>
 								<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
 
-								<button class="button-primary-md" @click="doImport">Import</button>
+								<button class="button-primary-md" @click="startImport">Import</button>
+							</div>
+
+							<div class="my-3 sm:mt-0 w-full" x-show="step === 2">
+								<div class="text-lg">New Sources</div>
+
+								<div class="px-4 sm:px-6 lg:px-8">
+									<div class="mt-2 flex flex-col">
+										<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+											<div class="inline-block min-w-full py-2 align-middle">
+												<div class="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
+													<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
+														<thead class="bg-gray-50 dark:bg-gray-700">
+														<tr>
+															<th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none group whitespace-nowrap w-64">Name</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none sm:table-cell group whitespace-nowrap w-32">Type</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Short Name</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Link</th>
+														</tr>
+														</thead>
+														<tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800">
+														<template x-for="source in stagedSources">
+															<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
+																<td class="whitespace-nowrap py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-200" x-text="source.name"></td>
+																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.type"></td>
+																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.short_name"></td>
+																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.link"></td>
+															</tr>
+														</template>
+														</tbody>
+													</table>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<div class="text-lg mt-4">New Monsters (Preview)</div>
+
+								<div class="px-4 sm:px-6 lg:px-8">
+									<div class="mt-2 flex flex-col">
+										<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+											<div class="inline-block min-w-full py-2 align-middle">
+												<div class="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
+													<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
+														<thead class="bg-gray-50 dark:bg-gray-700">
+														<tr>
+															<th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none group whitespace-nowrap w-64">Name</th>
+															<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none table-cell group whitespace-nowrap w-32">Size</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none sm:table-cell group whitespace-nowrap w-32">CR</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Type</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Alignment</th>
+														</tr>
+														</thead>
+														<tbody class="divide-y divide-gray-200 dark:divide-gray-600 bg-white dark:bg-gray-900">
+														<template x-for="monster in stagedMonsters.slice(0, 6)">
+															<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
+																<td class="w-full max-w-0 py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-100 w-64 max-w-64 truncate">
+																	<span class="truncate" x-text="monster.name"></span>
+																	<dl class="font-normal">
+																		<dt class="sr-only">Sources</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400" x-text="monster.sources"></dd>
+																		<dt class="sr-only sm:hidden">Type</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.type"></dd>
+																	</dl>
+																</td>
+																<td class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300 table-cell w-32 max-w-32 truncate">
+																	<span class="truncate" x-text="monster.size"></span>
+																	<dl class="font-normal">
+																		<dt class="sr-only sm:hidden">CR</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 sm:hidden">CR <span x-text="monster.cr"></span></dd>
+																		<dt class="sr-only sm:hidden">Alignment</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.alignment"></dd>
+																	</dl>
+																</td>
+																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 sm:table-cell w-32">
+																	<span x-text="monster.cr"></span>
+																</td>
+																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.type"></td>
+																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.alignment"></td>
+															</tr>
+														</template>
+
+														<tr x-show="stagedMonsters.length > 6" class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
+															<td colspan="5" class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300 table-cell text-center">
+																And <span x-text="stagedMonsters.length - 6"></span> more.
+															</td>
+														</tr>
+														</tbody>
+													</table>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<button class="button-primary-md" @click="finishImport">FINISH IMPORT BAYBEEEE</button>
 							</div>
 						</div>
 					</div>
diff --git a/docs/js/app.js b/docs/js/app.js
index 2ac772f8..66a75f2b 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9226,7 +9226,9 @@ function app() {
     searchPlaceholder: "",
     nonDefaultFiltersCount: 0,
     loadedSources: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('sources'),
+    importedSources: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('importedSources'),
     loadedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('monsters'),
+    importedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('importedMonsters'),
     encounterHistory: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('encounterHistory'),
     savedEncounters: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('savedEncounters'),
     loadedEncounterIndex: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(null).as('loadedEncounterIndex'),
@@ -9682,26 +9684,26 @@ function app() {
       this.sources = data.reduce(function (acc, source) {
         acc[source.name] = source;
         return acc;
-      }, {});
+      }, this.sources);
     },
     formatMonsters: function formatMonsters(data) {
       var _this6 = this;
 
-      this.allMonsters = data.map(function (data) {
+      this.allMonsters = this.allMonsters.concat(data.map(function (data) {
         var monster = new _monster__WEBPACK_IMPORTED_MODULE_6__["default"](_this6, data);
         _this6.monsterLookupTable[monster.slug] = monster;
         return monster;
-      });
-      this.environments = Object.values(this.environments);
-      this.environments.sort(function (a, b) {
+      }));
+      var environments = Object.values(this.environments);
+      environments.sort(function (a, b) {
         return a.value > b.label ? -1 : 1;
       });
-      this.environments.unshift({
+      environments.unshift({
         value: "any",
         label: "Any Environment"
       });
       window.dispatchEvent(new CustomEvent('set-environments', {
-        detail: this.environments
+        detail: environments
       }));
     },
     filterMonsters: function filterMonsters() {
@@ -11327,7 +11329,6 @@ var Importer = /*#__PURE__*/function () {
             resourceLocator,
             _ref$type,
             type,
-            results,
             _args = arguments;
 
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee$(_context) {
@@ -11335,16 +11336,10 @@ var Importer = /*#__PURE__*/function () {
             switch (_context.prev = _context.next) {
               case 0:
                 _ref = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, _ref$resourceLocator = _ref.resourceLocator, resourceLocator = _ref$resourceLocator === void 0 ? false : _ref$resourceLocator, _ref$type = _ref.type, type = _ref$type === void 0 ? 'google-sheets' : _ref$type;
-                _context.next = 3;
-                return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Monsters?") + new URLSearchParams({
-                  key: this.key
-                }));
+                console.log(type, this.loaders[type]);
+                return _context.abrupt("return", this.loaders[type](resourceLocator));
 
               case 3:
-                results = _context.sent;
-                return _context.abrupt("return", results);
-
-              case 5:
               case "end":
                 return _context.stop();
             }
@@ -11363,7 +11358,87 @@ var Importer = /*#__PURE__*/function () {
   return Importer;
 }();
 
-_defineProperty(Importer, "key", 'AIzaSyASDsLebocDQEHt3-MV_a_tI8r25CHotT4');
+_defineProperty(Importer, "loaders", {
+  'google-sheets': function () {
+    var _googleSheets = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee2(resourceLocator) {
+      var monsters, sources;
+      return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Monsters?") + new URLSearchParams({
+                key: Importer.key
+              })).then(function (response) {
+                return response.json();
+              }).then(function (jsonifiedBody) {
+                var headers = jsonifiedBody.values.splice(0, 1)[0];
+                return jsonifiedBody.values.map(function (item) {
+                  return {
+                    "name": item[headers.indexOf("name")],
+                    "cr": item[headers.indexOf("cr")],
+                    "size": item[headers.indexOf("size")],
+                    "type": item[headers.indexOf("type")],
+                    "tags": item[headers.indexOf("tags")],
+                    "section": item[headers.indexOf("section")],
+                    "alignment": item[headers.indexOf("alignment")],
+                    "environment": item[headers.indexOf("environment")],
+                    "ac": item[headers.indexOf("ac")],
+                    "hp": item[headers.indexOf("hp")],
+                    "init": item[headers.indexOf("init")],
+                    "lair": item[headers.indexOf("lair?")],
+                    "legendary": item[headers.indexOf("legendary?")],
+                    "unique": item[headers.indexOf("unique?")],
+                    "sources": item[headers.indexOf("sources")]
+                  };
+                });
+              })["catch"](function (err) {
+                return console.log(err);
+              });
+
+            case 2:
+              monsters = _context2.sent;
+              _context2.next = 5;
+              return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Sources?") + new URLSearchParams({
+                key: Importer.key
+              })).then(function (response) {
+                return response.json();
+              }).then(function (jsonifiedBody) {
+                var headers = jsonifiedBody.values.splice(0, 1)[0];
+                return jsonifiedBody.values.map(function (item) {
+                  return {
+                    "name": item[headers.indexOf("name")],
+                    "type": 'Custom',
+                    "short_name": item[headers.indexOf("short name")],
+                    "link": item[headers.indexOf("link")]
+                  };
+                });
+              })["catch"](function (err) {
+                return console.log(err);
+              });
+
+            case 5:
+              sources = _context2.sent;
+              return _context2.abrupt("return", {
+                sources: sources,
+                monsters: monsters
+              });
+
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    function googleSheets(_x) {
+      return _googleSheets.apply(this, arguments);
+    }
+
+    return googleSheets;
+  }()
+});
 
 
 
diff --git a/src/index.html b/src/index.html
index ac88a257..26f3ad94 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1327,7 +1327,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 				<!-- This element is to trick the browser into centering the modal contents. -->
 				<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-				<div @mousedown.outside="showImporterModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+				<div @mousedown.outside="showImporterModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"
 					 x-show="showImporterModal"
 					 x-transition:enter="ease-out duration-300"
 					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -1339,20 +1339,31 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
 						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
 							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
-							importerSourceType: 'sheets',
-							async doImport() {
-								console.log(await Importer.import({
+							importerSourceType: 'google-sheets',
+							step: 1,
+							stagedMonsters: [],
+							stagedSources: [],
+							async startImport() {
+								importResults = await Importer.import({
 									type: this.importerSourceType,
 									resourceLocator: this.importerResourceLocator
-								}));
+								});
+
+								this.stagedMonsters = importResults.monsters;
+								this.stagedSources = importResults.sources;
+
+								this.step = 2;
+							},
+							finishImport() {
+								formatSources(this.stagedSources);
+								formatMonsters(this.stagedMonsters);
 							}
-							
 						}">
 							<div class="w-full flex pb-3">
-								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keyboard Shortcuts</h3>
+								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Import Custom Monsters</h3>
 							</div>
 
-							<div class="my-3 sm:mt-0 w-full">
+							<div class="my-3 sm:mt-0 w-full" x-show="step === 1">
 								<label for="importer_source">Import from</label>
 								<select x-model="importerSourceType" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
 									<optgroup label="More to come...">
@@ -1363,7 +1374,103 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 								<label for="import_resource_locator">Sheets ID</label>
 								<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
 
-								<button class="button-primary-md" @click="doImport">Import</button>
+								<button class="button-primary-md" @click="startImport">Import</button>
+							</div>
+
+							<div class="my-3 sm:mt-0 w-full" x-show="step === 2">
+								<div class="text-lg">New Sources</div>
+
+								<div class="px-4 sm:px-6 lg:px-8">
+									<div class="mt-2 flex flex-col">
+										<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+											<div class="inline-block min-w-full py-2 align-middle">
+												<div class="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
+													<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
+														<thead class="bg-gray-50 dark:bg-gray-700">
+														<tr>
+															<th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none group whitespace-nowrap w-64">Name</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none sm:table-cell group whitespace-nowrap w-32">Type</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Short Name</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Link</th>
+														</tr>
+														</thead>
+														<tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800">
+														<template x-for="source in stagedSources">
+															<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
+																<td class="whitespace-nowrap py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-200" x-text="source.name"></td>
+																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.type"></td>
+																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.short_name"></td>
+																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.link"></td>
+															</tr>
+														</template>
+														</tbody>
+													</table>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<div class="text-lg mt-4">New Monsters (Preview)</div>
+
+								<div class="px-4 sm:px-6 lg:px-8">
+									<div class="mt-2 flex flex-col">
+										<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+											<div class="inline-block min-w-full py-2 align-middle">
+												<div class="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
+													<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
+														<thead class="bg-gray-50 dark:bg-gray-700">
+														<tr>
+															<th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none group whitespace-nowrap w-64">Name</th>
+															<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none table-cell group whitespace-nowrap w-32">Size</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none sm:table-cell group whitespace-nowrap w-32">CR</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Type</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Alignment</th>
+														</tr>
+														</thead>
+														<tbody class="divide-y divide-gray-200 dark:divide-gray-600 bg-white dark:bg-gray-900">
+														<template x-for="monster in stagedMonsters.slice(0, 6)">
+															<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
+																<td class="w-full max-w-0 py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-100 w-64 max-w-64 truncate">
+																	<span class="truncate" x-text="monster.name"></span>
+																	<dl class="font-normal">
+																		<dt class="sr-only">Sources</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400" x-text="monster.sources"></dd>
+																		<dt class="sr-only sm:hidden">Type</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.type"></dd>
+																	</dl>
+																</td>
+																<td class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300 table-cell w-32 max-w-32 truncate">
+																	<span class="truncate" x-text="monster.size"></span>
+																	<dl class="font-normal">
+																		<dt class="sr-only sm:hidden">CR</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 sm:hidden">CR <span x-text="monster.cr"></span></dd>
+																		<dt class="sr-only sm:hidden">Alignment</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.alignment"></dd>
+																	</dl>
+																</td>
+																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 sm:table-cell w-32">
+																	<span x-text="monster.cr"></span>
+																</td>
+																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.type"></td>
+																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.alignment"></td>
+															</tr>
+														</template>
+
+														<tr x-show="stagedMonsters.length > 6" class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
+															<td colspan="5" class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300 table-cell text-center">
+																And <span x-text="stagedMonsters.length - 6"></span> more.
+															</td>
+														</tr>
+														</tbody>
+													</table>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<button class="button-primary-md" @click="finishImport">FINISH IMPORT BAYBEEEE</button>
 							</div>
 						</div>
 					</div>
diff --git a/src/js/app.js b/src/js/app.js
index 4e51aaa7..a23b88f7 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -38,7 +38,9 @@ function app() {
         nonDefaultFiltersCount: 0,
 
         loadedSources: Alpine.$persist([]).as('sources'),
+        importedSources: Alpine.$persist([]).as('importedSources'),
         loadedMonsters: Alpine.$persist([]).as('monsters'),
+        importedMonsters: Alpine.$persist([]).as('importedMonsters'),
 
         encounterHistory: Alpine.$persist([]).as('encounterHistory'),
         savedEncounters: Alpine.$persist([]).as('savedEncounters'),
@@ -396,21 +398,21 @@ function app() {
             this.sources = data.reduce((acc, source) => {
                 acc[source.name] = source;
                 return acc;
-            }, {});
+            }, this.sources);
         },
 
         formatMonsters(data){
-            this.allMonsters = data.map(data => {
+            this.allMonsters = this.allMonsters.concat(data.map(data => {
                 const monster = new Monster(this, data);
                 this.monsterLookupTable[monster.slug] = monster;
                 return monster;
-            });
-            this.environments = Object.values(this.environments);
-            this.environments.sort((a, b) => {
+            }));
+            let environments = Object.values(this.environments);
+            environments.sort((a, b) => {
                 return a.value > b.label ? -1 : 1;
             });
-            this.environments.unshift({ value: "any", label: "Any Environment" });
-            window.dispatchEvent(new CustomEvent('set-environments', { detail: this.environments }));
+            environments.unshift({ value: "any", label: "Any Environment" });
+            window.dispatchEvent(new CustomEvent('set-environments', { detail: environments }));
         },
 
         filterMonsters(crString = false, filterCallback = () => { return true; }){
diff --git a/src/js/importer.js b/src/js/importer.js
index 7cf92dac..ee432add 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -1,5 +1,58 @@
 export default class Importer {
-    static key = 'AIzaSyASDsLebocDQEHt3-MV_a_tI8r25CHotT4';
+    
+
+    static loaders = {
+        'google-sheets': async (resourceLocator) => {
+            let monsters = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Monsters?` + new URLSearchParams({
+                key: this.key
+            }))
+                .then(response => response.json())
+                .then(jsonifiedBody => {
+                    let headers = jsonifiedBody.values.splice(0, 1)[0];
+
+                    return jsonifiedBody.values.map((item) => ({
+                        "name": item[headers.indexOf("name")],
+                        "cr": item[headers.indexOf("cr")],
+                        "size": item[headers.indexOf("size")],
+                        "type": item[headers.indexOf("type")],
+                        "tags": item[headers.indexOf("tags")],
+                        "section": item[headers.indexOf("section")],
+                        "alignment": item[headers.indexOf("alignment")],
+                        "environment": item[headers.indexOf("environment")],
+                        "ac": item[headers.indexOf("ac")],
+                        "hp": item[headers.indexOf("hp")],
+                        "init": item[headers.indexOf("init")],
+                        "lair": item[headers.indexOf("lair?")],
+                        "legendary": item[headers.indexOf("legendary?")],
+                        "unique": item[headers.indexOf("unique?")],
+                        "sources": item[headers.indexOf("sources")],
+                    }));
+                })
+                .catch(
+                    err => console.log(err)
+                );
+
+            let sources = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Sources?` + new URLSearchParams({
+                key: this.key
+            }))
+                .then(response => response.json())
+                .then(jsonifiedBody => {
+                    let headers = jsonifiedBody.values.splice(0, 1)[0];
+
+                    return jsonifiedBody.values.map((item) => ({
+                        "name": item[headers.indexOf("name")],
+                        "type": 'Custom',
+                        "short_name": item[headers.indexOf("short name")],
+                        "link": item[headers.indexOf("link")],
+                    }));
+                })
+                .catch(
+                    err => console.log(err)
+                );
+
+            return {sources, monsters};
+        }
+    }
 
     /* import({
     *      resourceLocator = false,
@@ -13,10 +66,8 @@ export default class Importer {
                     resourceLocator = false,
                     type = 'google-sheets'
                   } = {}) {
-        let results = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Monsters?` + new URLSearchParams({
-            key: this.key
-        }));
-        // HI!
-        return results;
+        console.log(type, this.loaders[type]);
+
+        return this.loaders[type](resourceLocator);
     }
 }
\ No newline at end of file

From 7521bcdcb4c32546089aaa7651989618da729fa0 Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Thu, 12 May 2022 22:36:54 -0400
Subject: [PATCH 04/33] short_name -> shortname

---
 docs/js/app.js     | 9 ++++++++-
 src/js/app.js      | 7 +++++++
 src/js/importer.js | 2 +-
 src/js/monster.js  | 2 ++
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/docs/js/app.js b/docs/js/app.js
index 66a75f2b..66344912 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9998,6 +9998,7 @@ function multiSelect($el, name, options) {
     value: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(['any']).as(name),
     name: name,
     options: options,
+    completedSetup: false,
     init: function init() {
       var _this11 = this;
 
@@ -10009,6 +10010,10 @@ function multiSelect($el, name, options) {
     setUp: function setUp() {
       var _this12 = this;
 
+      if (this.completedSetup) {
+        return;
+      }
+
       var choices = new (choices_js__WEBPACK_IMPORTED_MODULE_1___default())($el, {
         allowHTML: true,
         removeItemButton: true
@@ -10053,6 +10058,7 @@ function multiSelect($el, name, options) {
         return refreshChoices();
       });
       this.onFiltersChanged();
+      this.completedSetup = true;
     },
     onFiltersChanged: function onFiltersChanged() {
       window.dispatchEvent(new CustomEvent('filters-changed', {
@@ -11409,7 +11415,7 @@ _defineProperty(Importer, "loaders", {
                   return {
                     "name": item[headers.indexOf("name")],
                     "type": 'Custom',
-                    "short_name": item[headers.indexOf("short name")],
+                    "shortname": item[headers.indexOf("short name")],
                     "link": item[headers.indexOf("link")]
                   };
                 });
@@ -11531,6 +11537,7 @@ var Monster = /*#__PURE__*/function () {
       source.fullText = source.reference.name + (source.page ? ' p.' + source.page : '');
       return source;
     });
+    console.log(this.sources);
     this.sources.sort(function (a, b) {
       return a.fullText.localeCompare(b.fullText, 'en', {
         sensitivity: "base"
diff --git a/src/js/app.js b/src/js/app.js
index a23b88f7..2fa734d9 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -657,6 +657,7 @@ function multiSelect($el, name, options) {
         value: Alpine.$persist(['any']).as(name),
         name: name,
         options: options,
+        completedSetup: false,
         init() {
             if(!options.length) return;
             this.$nextTick(() => {
@@ -664,6 +665,10 @@ function multiSelect($el, name, options) {
             })
         },
         setUp(){
+            if(this.completedSetup) {
+                return;
+            }
+
             let choices = new Choices($el, {
                 allowHTML: true,
                 removeItemButton: true
@@ -702,6 +707,8 @@ function multiSelect($el, name, options) {
             this.$watch('options', () => refreshChoices())
 
             this.onFiltersChanged();
+
+            this.completedSetup = true;
         },
         onFiltersChanged() {
             window.dispatchEvent(new CustomEvent('filters-changed', { detail: {
diff --git a/src/js/importer.js b/src/js/importer.js
index ee432add..4d14a369 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -42,7 +42,7 @@ export default class Importer {
                     return jsonifiedBody.values.map((item) => ({
                         "name": item[headers.indexOf("name")],
                         "type": 'Custom',
-                        "short_name": item[headers.indexOf("short name")],
+                        "shortname": item[headers.indexOf("short name")],
                         "link": item[headers.indexOf("link")],
                     }));
                 })
diff --git a/src/js/monster.js b/src/js/monster.js
index 2690c767..03172089 100644
--- a/src/js/monster.js
+++ b/src/js/monster.js
@@ -60,6 +60,8 @@ export default class Monster {
             return source;
         });
 
+        console.log(this.sources);
+
         this.sources.sort((a, b) => a.fullText.localeCompare(b.fullText, 'en', { sensitivity: "base" }))
 
     }

From 750610b7985eafb00f52849437ec71745a214aca Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Thu, 12 May 2022 22:37:52 -0400
Subject: [PATCH 05/33] Remove debugt

---
 docs/js/app.js    | 1 -
 src/js/monster.js | 2 --
 2 files changed, 3 deletions(-)

diff --git a/docs/js/app.js b/docs/js/app.js
index 66344912..be4562bc 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -11537,7 +11537,6 @@ var Monster = /*#__PURE__*/function () {
       source.fullText = source.reference.name + (source.page ? ' p.' + source.page : '');
       return source;
     });
-    console.log(this.sources);
     this.sources.sort(function (a, b) {
       return a.fullText.localeCompare(b.fullText, 'en', {
         sensitivity: "base"
diff --git a/src/js/monster.js b/src/js/monster.js
index 03172089..2690c767 100644
--- a/src/js/monster.js
+++ b/src/js/monster.js
@@ -60,8 +60,6 @@ export default class Monster {
             return source;
         });
 
-        console.log(this.sources);
-
         this.sources.sort((a, b) => a.fullText.localeCompare(b.fullText, 'en', { sensitivity: "base" }))
 
     }

From 5f28a77fc88ba6ecf458c07e4e289b90cabfbff2 Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Thu, 12 May 2022 22:43:22 -0400
Subject: [PATCH 06/33] Enable source upon import

---
 docs/index.html    | 7 +++++++
 docs/js/app.js     | 3 ++-
 src/index.html     | 7 +++++++
 src/js/importer.js | 1 +
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/docs/index.html b/docs/index.html
index 26f3ad94..7f041e56 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1355,8 +1355,15 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 								this.step = 2;
 							},
 							finishImport() {
+								importedSources.push(this.stagedSources)
 								formatSources(this.stagedSources);
+								this.stagedSources = [];
+
+								importedMonsters.push(this.stagedMonsters)
 								formatMonsters(this.stagedMonsters);
+								this.stagedMonsters = [];
+
+								showImporterModal = false;
 							}
 						}">
 							<div class="w-full flex pb-3">
diff --git a/docs/js/app.js b/docs/js/app.js
index be4562bc..f6b21c40 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -11416,7 +11416,8 @@ _defineProperty(Importer, "loaders", {
                     "name": item[headers.indexOf("name")],
                     "type": 'Custom',
                     "shortname": item[headers.indexOf("short name")],
-                    "link": item[headers.indexOf("link")]
+                    "link": item[headers.indexOf("link")],
+                    "enabled": true
                   };
                 });
               })["catch"](function (err) {
diff --git a/src/index.html b/src/index.html
index 26f3ad94..7f041e56 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1355,8 +1355,15 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 								this.step = 2;
 							},
 							finishImport() {
+								importedSources.push(this.stagedSources)
 								formatSources(this.stagedSources);
+								this.stagedSources = [];
+
+								importedMonsters.push(this.stagedMonsters)
 								formatMonsters(this.stagedMonsters);
+								this.stagedMonsters = [];
+
+								showImporterModal = false;
 							}
 						}">
 							<div class="w-full flex pb-3">
diff --git a/src/js/importer.js b/src/js/importer.js
index 4d14a369..3164c2ed 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -44,6 +44,7 @@ export default class Importer {
                         "type": 'Custom',
                         "shortname": item[headers.indexOf("short name")],
                         "link": item[headers.indexOf("link")],
+                        "enabled": true,
                     }));
                 })
                 .catch(

From 3defbfaef2dedf5d82c6c6960f517f20a8ba7937 Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Thu, 12 May 2022 22:50:10 -0400
Subject: [PATCH 07/33] Fix short name in preview

---
 docs/index.html    | 5 ++++-
 docs/js/app.js     | 3 +--
 src/index.html     | 5 ++++-
 src/js/importer.js | 2 --
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 7f041e56..7428f6c1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1363,6 +1363,9 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 								formatMonsters(this.stagedMonsters);
 								this.stagedMonsters = [];
 
+								dispatchEvent(new CustomEvent('notification', {detail: {title: 'Import complete!', body: 'Your new source(s) have been imported'}}));
+
+								this.step = 1;
 								showImporterModal = false;
 							}
 						}">
@@ -1406,7 +1409,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 															<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
 																<td class="whitespace-nowrap py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-200" x-text="source.name"></td>
 																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.type"></td>
-																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.short_name"></td>
+																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.shortname"></td>
 																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.link"></td>
 															</tr>
 														</template>
diff --git a/docs/js/app.js b/docs/js/app.js
index f6b21c40..904a27e9 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -11342,10 +11342,9 @@ var Importer = /*#__PURE__*/function () {
             switch (_context.prev = _context.next) {
               case 0:
                 _ref = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, _ref$resourceLocator = _ref.resourceLocator, resourceLocator = _ref$resourceLocator === void 0 ? false : _ref$resourceLocator, _ref$type = _ref.type, type = _ref$type === void 0 ? 'google-sheets' : _ref$type;
-                console.log(type, this.loaders[type]);
                 return _context.abrupt("return", this.loaders[type](resourceLocator));
 
-              case 3:
+              case 2:
               case "end":
                 return _context.stop();
             }
diff --git a/src/index.html b/src/index.html
index 7f041e56..7428f6c1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1363,6 +1363,9 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 								formatMonsters(this.stagedMonsters);
 								this.stagedMonsters = [];
 
+								dispatchEvent(new CustomEvent('notification', {detail: {title: 'Import complete!', body: 'Your new source(s) have been imported'}}));
+
+								this.step = 1;
 								showImporterModal = false;
 							}
 						}">
@@ -1406,7 +1409,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 															<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
 																<td class="whitespace-nowrap py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-200" x-text="source.name"></td>
 																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.type"></td>
-																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.short_name"></td>
+																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.shortname"></td>
 																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.link"></td>
 															</tr>
 														</template>
diff --git a/src/js/importer.js b/src/js/importer.js
index 3164c2ed..3a2ee435 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -67,8 +67,6 @@ export default class Importer {
                     resourceLocator = false,
                     type = 'google-sheets'
                   } = {}) {
-        console.log(type, this.loaders[type]);
-
         return this.loaders[type](resourceLocator);
     }
 }
\ No newline at end of file

From 15c6331db50b7b2f1a041eea363db222ca0d3a4c Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Thu, 12 May 2022 23:03:44 -0400
Subject: [PATCH 08/33] make the import button less goofy

---
 docs/css/styles.css | 3 +++
 docs/index.html     | 2 +-
 src/index.html      | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/css/styles.css b/docs/css/styles.css
index 760d25bc..2c95b4f2 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -8583,6 +8583,9 @@ input[type=text]:disabled{
 .col-span-5{
   grid-column: span 5 / span 5;
 }
+.float-right{
+  float: right;
+}
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
diff --git a/docs/index.html b/docs/index.html
index 7428f6c1..265bb652 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1480,7 +1480,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 									</div>
 								</div>
 
-								<button class="button-primary-md" @click="finishImport">FINISH IMPORT BAYBEEEE</button>
+								<button class="float-right mt-4 button-primary-md" @click="finishImport">Looks Good, Import Them!</button>
 							</div>
 						</div>
 					</div>
diff --git a/src/index.html b/src/index.html
index 7428f6c1..265bb652 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1480,7 +1480,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 									</div>
 								</div>
 
-								<button class="button-primary-md" @click="finishImport">FINISH IMPORT BAYBEEEE</button>
+								<button class="float-right mt-4 button-primary-md" @click="finishImport">Looks Good, Import Them!</button>
 							</div>
 						</div>
 					</div>

From 8ea2be00138fc76e969fa4d3d6ecee98718a066f Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Fri, 13 May 2022 13:50:13 +0100
Subject: [PATCH 09/33] JSON loaders, babeeyyyyy

---
 docs/css/styles.css |  10 --
 docs/index.html     |   7 +-
 docs/js/app.js      | 234 +++++++++++++++++++++++++++++---------------
 src/index.html      |   7 +-
 src/js/app.js       |   4 +
 src/js/importer.js  | 137 +++++++++++++++-----------
 6 files changed, 249 insertions(+), 150 deletions(-)

diff --git a/docs/css/styles.css b/docs/css/styles.css
index 2c95b4f2..efe8a21e 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -8580,9 +8580,6 @@ input[type=text]:disabled{
 .col-span-6{
   grid-column: span 6 / span 6;
 }
-.col-span-5{
-  grid-column: span 5 / span 5;
-}
 .float-right{
   float: right;
 }
@@ -9390,9 +9387,6 @@ input[type=text]:disabled{
 .pr-8{
   padding-right: 2rem;
 }
-.pl-4{
-  padding-left: 1rem;
-}
 .pt-0\.5{
   padding-top: 0.125rem;
 }
@@ -11128,10 +11122,6 @@ body .choices__input:focus{
   .lg\:pl-0{
     padding-left: 0px;
   }
-
-  .lg\:pl-8{
-    padding-left: 2rem;
-  }
 }
 @media (min-width: 1536px){
 
diff --git a/docs/index.html b/docs/index.html
index 265bb652..f661e5df 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1339,7 +1339,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
 						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
 							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
-							importerSourceType: 'google-sheets',
+							importerSourceType: 'json-file',
 							step: 1,
 							stagedMonsters: [],
 							stagedSources: [],
@@ -1355,11 +1355,11 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 								this.step = 2;
 							},
 							finishImport() {
-								importedSources.push(this.stagedSources)
+								importedSources = importedSources.push(this.stagedSources)
 								formatSources(this.stagedSources);
 								this.stagedSources = [];
 
-								importedMonsters.push(this.stagedMonsters)
+								importedMonsters = importedMonsters.concat(this.stagedMonsters)
 								formatMonsters(this.stagedMonsters);
 								this.stagedMonsters = [];
 
@@ -1383,6 +1383,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 
 								<label for="import_resource_locator">Sheets ID</label>
 								<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
+                                <!--<input id="import_resource_locator" type="file" accept="text/json, text/csv" @change="importerResourceLocator = $event.target.files[0]">-->
 
 								<button class="button-primary-md" @click="startImport">Import</button>
 							</div>
diff --git a/docs/js/app.js b/docs/js/app.js
index 904a27e9..832b9ece 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9459,15 +9459,19 @@ function app() {
 
                 _context.t0.formatSources.call(_context.t0, _context.t1);
 
+                _this2.formatSources(_this2.importedSources);
+
                 _context.t2 = _this2;
-                _context.next = 8;
+                _context.next = 9;
                 return _this2.fetchMonsters();
 
-              case 8:
+              case 9:
                 _context.t3 = _context.sent;
 
                 _context.t2.formatMonsters.call(_context.t2, _context.t3);
 
+                _this2.formatMonsters(_this2.importedMonsters);
+
                 _this2.searchPlaceholder = _helpers__WEBPACK_IMPORTED_MODULE_4__.randomArrayElement(_this2.allMonsters).name;
 
                 if (_this2.loadedEncounterIndex !== null) {
@@ -9476,7 +9480,7 @@ function app() {
                   _this2.encounter.load(_this2.encounterHistory[_this2.encounterHistory.length - 1]);
                 }
 
-              case 12:
+              case 14:
               case "end":
                 return _context.stop();
             }
@@ -11358,92 +11362,164 @@ var Importer = /*#__PURE__*/function () {
 
       return _import;
     }()
-  }]);
+  }, {
+    key: "_importJsonFile",
+    value: function () {
+      var _importJsonFile2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee2(resourceLocator) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                return _context2.abrupt("return", new Promise(function (resolve, reject) {
+                  var reader = new FileReader();
+                  reader.addEventListener('load', function () {
+                    try {
+                      var data = JSON.parse(reader.result);
+                      resolve(data);
+                    } catch (err) {
+                      console.error(err);
+                      reject(err);
+                    }
+                  });
+                  reader.readAsText(resourceLocator);
+                }));
 
-  return Importer;
-}();
+              case 1:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
 
-_defineProperty(Importer, "loaders", {
-  'google-sheets': function () {
-    var _googleSheets = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee2(resourceLocator) {
-      var monsters, sources;
-      return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Monsters?") + new URLSearchParams({
-                key: Importer.key
-              })).then(function (response) {
-                return response.json();
-              }).then(function (jsonifiedBody) {
-                var headers = jsonifiedBody.values.splice(0, 1)[0];
-                return jsonifiedBody.values.map(function (item) {
-                  return {
-                    "name": item[headers.indexOf("name")],
-                    "cr": item[headers.indexOf("cr")],
-                    "size": item[headers.indexOf("size")],
-                    "type": item[headers.indexOf("type")],
-                    "tags": item[headers.indexOf("tags")],
-                    "section": item[headers.indexOf("section")],
-                    "alignment": item[headers.indexOf("alignment")],
-                    "environment": item[headers.indexOf("environment")],
-                    "ac": item[headers.indexOf("ac")],
-                    "hp": item[headers.indexOf("hp")],
-                    "init": item[headers.indexOf("init")],
-                    "lair": item[headers.indexOf("lair?")],
-                    "legendary": item[headers.indexOf("legendary?")],
-                    "unique": item[headers.indexOf("unique?")],
-                    "sources": item[headers.indexOf("sources")]
-                  };
+      function _importJsonFile(_x) {
+        return _importJsonFile2.apply(this, arguments);
+      }
+
+      return _importJsonFile;
+    }()
+  }, {
+    key: "_importJson",
+    value: function () {
+      var _importJson2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee3(resourceLocator) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.prev = 0;
+                return _context3.abrupt("return", JSON.parse(resourceLocator));
+
+              case 4:
+                _context3.prev = 4;
+                _context3.t0 = _context3["catch"](0);
+                console.error(_context3.t0);
+                return _context3.abrupt("return", false);
+
+              case 8:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, null, [[0, 4]]);
+      }));
+
+      function _importJson(_x2) {
+        return _importJson2.apply(this, arguments);
+      }
+
+      return _importJson;
+    }()
+  }, {
+    key: "_importGoogleSheets",
+    value: function () {
+      var _importGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee4(resourceLocator) {
+        var monsters, sources;
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                _context4.next = 2;
+                return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Monsters?") + new URLSearchParams({
+                  key: this.key
+                })).then(function (response) {
+                  return response.json();
+                }).then(function (jsonifiedBody) {
+                  var headers = jsonifiedBody.values.splice(0, 1)[0];
+                  return jsonifiedBody.values.map(function (item) {
+                    return {
+                      "name": item[headers.indexOf("name")],
+                      "cr": item[headers.indexOf("cr")],
+                      "size": item[headers.indexOf("size")],
+                      "type": item[headers.indexOf("type")],
+                      "tags": item[headers.indexOf("tags")],
+                      "section": item[headers.indexOf("section")],
+                      "alignment": item[headers.indexOf("alignment")],
+                      "environment": item[headers.indexOf("environment")],
+                      "ac": item[headers.indexOf("ac")],
+                      "hp": item[headers.indexOf("hp")],
+                      "init": item[headers.indexOf("init")],
+                      "lair": item[headers.indexOf("lair?")],
+                      "legendary": item[headers.indexOf("legendary?")],
+                      "unique": item[headers.indexOf("unique?")],
+                      "sources": item[headers.indexOf("sources")]
+                    };
+                  });
+                })["catch"](function (err) {
+                  return console.error(err);
                 });
-              })["catch"](function (err) {
-                return console.log(err);
-              });
 
-            case 2:
-              monsters = _context2.sent;
-              _context2.next = 5;
-              return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Sources?") + new URLSearchParams({
-                key: Importer.key
-              })).then(function (response) {
-                return response.json();
-              }).then(function (jsonifiedBody) {
-                var headers = jsonifiedBody.values.splice(0, 1)[0];
-                return jsonifiedBody.values.map(function (item) {
-                  return {
-                    "name": item[headers.indexOf("name")],
-                    "type": 'Custom',
-                    "shortname": item[headers.indexOf("short name")],
-                    "link": item[headers.indexOf("link")],
-                    "enabled": true
-                  };
+              case 2:
+                monsters = _context4.sent;
+                _context4.next = 5;
+                return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Sources?") + new URLSearchParams({
+                  key: this.key
+                })).then(function (response) {
+                  return response.json();
+                }).then(function (jsonifiedBody) {
+                  var headers = jsonifiedBody.values.splice(0, 1)[0];
+                  return jsonifiedBody.values.map(function (item) {
+                    return {
+                      "name": item[headers.indexOf("name")],
+                      "type": 'Custom',
+                      "shortname": item[headers.indexOf("short name")],
+                      "link": item[headers.indexOf("link")],
+                      "enabled": true
+                    };
+                  });
+                })["catch"](function (err) {
+                  return console.error(err);
                 });
-              })["catch"](function (err) {
-                return console.log(err);
-              });
 
-            case 5:
-              sources = _context2.sent;
-              return _context2.abrupt("return", {
-                sources: sources,
-                monsters: monsters
-              });
+              case 5:
+                sources = _context4.sent;
+                return _context4.abrupt("return", {
+                  sources: sources,
+                  monsters: monsters
+                });
 
-            case 7:
-            case "end":
-              return _context2.stop();
+              case 7:
+              case "end":
+                return _context4.stop();
+            }
           }
-        }
-      }, _callee2);
-    }));
+        }, _callee4, this);
+      }));
 
-    function googleSheets(_x) {
-      return _googleSheets.apply(this, arguments);
-    }
+      function _importGoogleSheets(_x3) {
+        return _importGoogleSheets2.apply(this, arguments);
+      }
+
+      return _importGoogleSheets;
+    }()
+  }]);
 
-    return googleSheets;
-  }()
+  return Importer;
+}();
+
+_defineProperty(Importer, "loaders", {
+  'google-sheets': Importer._importGoogleSheets,
+  'json-raw': Importer._importJson,
+  'json-file': Importer._importJsonFile
 });
 
 
diff --git a/src/index.html b/src/index.html
index 265bb652..f661e5df 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1339,7 +1339,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
 						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
 							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
-							importerSourceType: 'google-sheets',
+							importerSourceType: 'json-file',
 							step: 1,
 							stagedMonsters: [],
 							stagedSources: [],
@@ -1355,11 +1355,11 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 								this.step = 2;
 							},
 							finishImport() {
-								importedSources.push(this.stagedSources)
+								importedSources = importedSources.push(this.stagedSources)
 								formatSources(this.stagedSources);
 								this.stagedSources = [];
 
-								importedMonsters.push(this.stagedMonsters)
+								importedMonsters = importedMonsters.concat(this.stagedMonsters)
 								formatMonsters(this.stagedMonsters);
 								this.stagedMonsters = [];
 
@@ -1383,6 +1383,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 
 								<label for="import_resource_locator">Sheets ID</label>
 								<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
+                                <!--<input id="import_resource_locator" type="file" accept="text/json, text/csv" @change="importerResourceLocator = $event.target.files[0]">-->
 
 								<button class="button-primary-md" @click="startImport">Import</button>
 							</div>
diff --git a/src/js/app.js b/src/js/app.js
index 2fa734d9..70b26b0b 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -256,7 +256,11 @@ function app() {
 
         async fetchData() {
             this.formatSources(await this.fetchSources());
+            this.formatSources(this.importedSources);
+
             this.formatMonsters(await this.fetchMonsters());
+            this.formatMonsters(this.importedMonsters);
+
             this.searchPlaceholder = helpers.randomArrayElement(this.allMonsters).name;
 
             if (this.loadedEncounterIndex !== null){
diff --git a/src/js/importer.js b/src/js/importer.js
index 3a2ee435..4d01bc92 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -2,57 +2,9 @@ export default class Importer {
     
 
     static loaders = {
-        'google-sheets': async (resourceLocator) => {
-            let monsters = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Monsters?` + new URLSearchParams({
-                key: this.key
-            }))
-                .then(response => response.json())
-                .then(jsonifiedBody => {
-                    let headers = jsonifiedBody.values.splice(0, 1)[0];
-
-                    return jsonifiedBody.values.map((item) => ({
-                        "name": item[headers.indexOf("name")],
-                        "cr": item[headers.indexOf("cr")],
-                        "size": item[headers.indexOf("size")],
-                        "type": item[headers.indexOf("type")],
-                        "tags": item[headers.indexOf("tags")],
-                        "section": item[headers.indexOf("section")],
-                        "alignment": item[headers.indexOf("alignment")],
-                        "environment": item[headers.indexOf("environment")],
-                        "ac": item[headers.indexOf("ac")],
-                        "hp": item[headers.indexOf("hp")],
-                        "init": item[headers.indexOf("init")],
-                        "lair": item[headers.indexOf("lair?")],
-                        "legendary": item[headers.indexOf("legendary?")],
-                        "unique": item[headers.indexOf("unique?")],
-                        "sources": item[headers.indexOf("sources")],
-                    }));
-                })
-                .catch(
-                    err => console.log(err)
-                );
-
-            let sources = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Sources?` + new URLSearchParams({
-                key: this.key
-            }))
-                .then(response => response.json())
-                .then(jsonifiedBody => {
-                    let headers = jsonifiedBody.values.splice(0, 1)[0];
-
-                    return jsonifiedBody.values.map((item) => ({
-                        "name": item[headers.indexOf("name")],
-                        "type": 'Custom',
-                        "shortname": item[headers.indexOf("short name")],
-                        "link": item[headers.indexOf("link")],
-                        "enabled": true,
-                    }));
-                })
-                .catch(
-                    err => console.log(err)
-                );
-
-            return {sources, monsters};
-        }
+        'google-sheets': this._importGoogleSheets,
+        'json-raw': this._importJson,
+        'json-file': this._importJsonFile,
     }
 
     /* import({
@@ -63,10 +15,85 @@ export default class Importer {
     * <- Exact format needed for localStorage
     *
      */
-    static async import({
-                    resourceLocator = false,
-                    type = 'google-sheets'
-                  } = {}) {
+    static async import({ resourceLocator = false, type = 'google-sheets' } = {}) {
         return this.loaders[type](resourceLocator);
     }
+
+    static async _importJsonFile(resourceLocator) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.addEventListener('load', function() {
+                try {
+                    const data = JSON.parse(reader.result);
+                    resolve(data);
+                }catch (err) {
+                    console.error(err);
+                    reject(err);
+                }
+            });
+            reader.readAsText(resourceLocator);
+        });
+    }
+
+    static async _importJson(resourceLocator) {
+        try {
+            return JSON.parse(resourceLocator);
+        }catch (err) {
+            console.error(err);
+            return false;
+        }
+    }
+
+    static async _importGoogleSheets(resourceLocator) {
+        let monsters = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Monsters?` + new URLSearchParams({
+            key: this.key
+        }))
+            .then(response => response.json())
+            .then(jsonifiedBody => {
+                let headers = jsonifiedBody.values.splice(0, 1)[0];
+
+                return jsonifiedBody.values.map((item) => ({
+                    "name": item[headers.indexOf("name")],
+                    "cr": item[headers.indexOf("cr")],
+                    "size": item[headers.indexOf("size")],
+                    "type": item[headers.indexOf("type")],
+                    "tags": item[headers.indexOf("tags")],
+                    "section": item[headers.indexOf("section")],
+                    "alignment": item[headers.indexOf("alignment")],
+                    "environment": item[headers.indexOf("environment")],
+                    "ac": item[headers.indexOf("ac")],
+                    "hp": item[headers.indexOf("hp")],
+                    "init": item[headers.indexOf("init")],
+                    "lair": item[headers.indexOf("lair?")],
+                    "legendary": item[headers.indexOf("legendary?")],
+                    "unique": item[headers.indexOf("unique?")],
+                    "sources": item[headers.indexOf("sources")],
+                }));
+            })
+            .catch(
+                err => console.error(err)
+            );
+
+        let sources = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Sources?` + new URLSearchParams({
+            key: this.key
+        }))
+            .then(response => response.json())
+            .then(jsonifiedBody => {
+                let headers = jsonifiedBody.values.splice(0, 1)[0];
+
+                return jsonifiedBody.values.map((item) => ({
+                    "name": item[headers.indexOf("name")],
+                    "type": 'Custom',
+                    "shortname": item[headers.indexOf("short name")],
+                    "link": item[headers.indexOf("link")],
+                    "enabled": true,
+                }));
+            })
+            .catch(
+                err => console.error(err)
+            );
+
+        return {sources, monsters};
+    }
+
 }
\ No newline at end of file

From adf4600ee87ae63570d73bc3e5dbd475688ecb74 Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Fri, 13 May 2022 13:52:33 +0100
Subject: [PATCH 10/33] textarea works

---
 docs/index.html | 5 ++++-
 src/index.html  | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index f661e5df..2eb8e29e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1339,7 +1339,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
 						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
 							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
-							importerSourceType: 'json-file',
+							importerSourceType: 'google-sheet',
 							step: 1,
 							stagedMonsters: [],
 							stagedSources: [],
@@ -1378,11 +1378,14 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 								<select x-model="importerSourceType" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
 									<optgroup label="More to come...">
 										<option value="google-sheets">Google Sheets</option>
+										<option value="json-raw">Raw JSON</option>
+										<option value="json-file">JSON File</option>
 									</optgroup>
 								</select>
 
 								<label for="import_resource_locator">Sheets ID</label>
 								<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
+                                <!--<textarea id="import_resource_locator" x-model="importerResourceLocator" cols="30" rows="10"></textarea>-->
                                 <!--<input id="import_resource_locator" type="file" accept="text/json, text/csv" @change="importerResourceLocator = $event.target.files[0]">-->
 
 								<button class="button-primary-md" @click="startImport">Import</button>
diff --git a/src/index.html b/src/index.html
index f661e5df..2eb8e29e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1339,7 +1339,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
 						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
 							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
-							importerSourceType: 'json-file',
+							importerSourceType: 'google-sheet',
 							step: 1,
 							stagedMonsters: [],
 							stagedSources: [],
@@ -1378,11 +1378,14 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 								<select x-model="importerSourceType" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
 									<optgroup label="More to come...">
 										<option value="google-sheets">Google Sheets</option>
+										<option value="json-raw">Raw JSON</option>
+										<option value="json-file">JSON File</option>
 									</optgroup>
 								</select>
 
 								<label for="import_resource_locator">Sheets ID</label>
 								<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
+                                <!--<textarea id="import_resource_locator" x-model="importerResourceLocator" cols="30" rows="10"></textarea>-->
                                 <!--<input id="import_resource_locator" type="file" accept="text/json, text/csv" @change="importerResourceLocator = $event.target.files[0]">-->
 
 								<button class="button-primary-md" @click="startImport">Import</button>

From c470377ce8690b63706da27a9289db518408ddcd Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Fri, 13 May 2022 13:55:04 +0100
Subject: [PATCH 11/33] concat

---
 docs/index.html | 2 +-
 src/index.html  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 2eb8e29e..1b871ac5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1355,7 +1355,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 								this.step = 2;
 							},
 							finishImport() {
-								importedSources = importedSources.push(this.stagedSources)
+								importedSources = importedSources.concat(this.stagedSources)
 								formatSources(this.stagedSources);
 								this.stagedSources = [];
 
diff --git a/src/index.html b/src/index.html
index 2eb8e29e..1b871ac5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1355,7 +1355,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 								this.step = 2;
 							},
 							finishImport() {
-								importedSources = importedSources.push(this.stagedSources)
+								importedSources = importedSources.concat(this.stagedSources)
 								formatSources(this.stagedSources);
 								this.stagedSources = [];
 

From aece9447f27dc6707cb08a1bc64d5507adc69db4 Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Fri, 13 May 2022 14:26:12 +0100
Subject: [PATCH 12/33] Added deleteImportedSource

---
 docs/index.html    |  2 +-
 docs/js/app.js     | 24 ++++++++++++++++++++++--
 src/index.html     |  2 +-
 src/js/app.js      | 20 ++++++++++++++++++++
 src/js/importer.js |  6 ++++--
 src/js/monster.js  |  3 ++-
 6 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 1b871ac5..f5828786 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1339,7 +1339,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
 						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
 							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
-							importerSourceType: 'google-sheet',
+							importerSourceType: 'google-sheets',
 							step: 1,
 							stagedMonsters: [],
 							stagedSources: [],
diff --git a/docs/js/app.js b/docs/js/app.js
index 832b9ece..43c8e855 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9710,6 +9710,23 @@ function app() {
         detail: environments
       }));
     },
+    deleteImportedSource: function deleteImportedSource(sourceName) {
+      var sourceToDelete = this.sources[sourceName];
+      this.allMonsters = this.allMonsters.filter(function (monster) {
+        return !monster.sources.find(function (source) {
+          return source.actual_source === sourceToDelete;
+        });
+      });
+      this.importedMonsters = this.importedMonsters.filter(function (monster) {
+        return !monster.sources.startsWith(sourceName);
+      });
+      delete this.sources[sourceName];
+      var index = this.importedSources.findIndex(function (source) {
+        return source.name === sourceName;
+      });
+      this.importedSources.splice(index, 1);
+      this.updateFilteredMonsters();
+    },
     filterMonsters: function filterMonsters() {
       var _this7 = this;
 
@@ -11346,7 +11363,7 @@ var Importer = /*#__PURE__*/function () {
             switch (_context.prev = _context.next) {
               case 0:
                 _ref = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, _ref$resourceLocator = _ref.resourceLocator, resourceLocator = _ref$resourceLocator === void 0 ? false : _ref$resourceLocator, _ref$type = _ref.type, type = _ref$type === void 0 ? 'google-sheets' : _ref$type;
-                return _context.abrupt("return", this.loaders[type](resourceLocator));
+                return _context.abrupt("return", this.loaders[type].bind(this)(resourceLocator));
 
               case 2:
               case "end":
@@ -11516,6 +11533,8 @@ var Importer = /*#__PURE__*/function () {
   return Importer;
 }();
 
+_defineProperty(Importer, "key", "AIzaSyA6AlaWOOlyFIXE6KSs1QsiALp26JbHzdI");
+
 _defineProperty(Importer, "loaders", {
   'google-sheets': Importer._importGoogleSheets,
   'json-raw': Importer._importJson,
@@ -11598,9 +11617,10 @@ var Monster = /*#__PURE__*/function () {
           location = _str$split2[1];
 
       var source = {};
+      source.actual_source = _this.app.sources[book];
 
       if (!isNaN(location)) {
-        source.reference = _this.app.sources[book];
+        source.reference = source.actual_source;
         source.page = location;
       } else if (_helpers_js__WEBPACK_IMPORTED_MODULE_1__.isValidHttpUrl(location)) {
         source.reference = {
diff --git a/src/index.html b/src/index.html
index 1b871ac5..f5828786 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1339,7 +1339,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
 						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
 							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
-							importerSourceType: 'google-sheet',
+							importerSourceType: 'google-sheets',
 							step: 1,
 							stagedMonsters: [],
 							stagedSources: [],
diff --git a/src/js/app.js b/src/js/app.js
index 70b26b0b..d55b6e58 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -419,6 +419,26 @@ function app() {
             window.dispatchEvent(new CustomEvent('set-environments', { detail: environments }));
         },
 
+        deleteImportedSource(sourceName){
+
+            const sourceToDelete = this.sources[sourceName];
+
+            this.allMonsters = this.allMonsters.filter(monster => {
+                return !monster.sources.find(source => source.actual_source === sourceToDelete);
+            });
+
+            this.importedMonsters = this.importedMonsters.filter(monster => {
+                return !monster.sources.startsWith(sourceName);
+            });
+
+            delete this.sources[sourceName];
+            const index = this.importedSources.findIndex(source => source.name === sourceName);
+            this.importedSources.splice(index, 1);
+
+            this.updateFilteredMonsters();
+
+        },
+
         filterMonsters(crString = false, filterCallback = () => { return true; }){
             const monsters = this.allMonsters.filter(monster => {
                 return monster.sourceEnabled && filterCallback(monster) && monster.filter(this.search, this.filters, crString);
diff --git a/src/js/importer.js b/src/js/importer.js
index 4d01bc92..23a6be87 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -1,5 +1,6 @@
 export default class Importer {
-    
+
+    static key = "AIzaSyA6AlaWOOlyFIXE6KSs1QsiALp26JbHzdI"
 
     static loaders = {
         'google-sheets': this._importGoogleSheets,
@@ -16,7 +17,7 @@ export default class Importer {
     *
      */
     static async import({ resourceLocator = false, type = 'google-sheets' } = {}) {
-        return this.loaders[type](resourceLocator);
+        return this.loaders[type].bind(this)(resourceLocator);
     }
 
     static async _importJsonFile(resourceLocator) {
@@ -45,6 +46,7 @@ export default class Importer {
     }
 
     static async _importGoogleSheets(resourceLocator) {
+
         let monsters = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Monsters?` + new URLSearchParams({
             key: this.key
         }))
diff --git a/src/js/monster.js b/src/js/monster.js
index 2690c767..a502cdc2 100644
--- a/src/js/monster.js
+++ b/src/js/monster.js
@@ -45,8 +45,9 @@ export default class Monster {
         this.sources = this.data.sources.split(', ').map(str => {
             const [book, location] = str.split(": ");
             let source = {};
+            source.actual_source = this.app.sources[book];
             if (!isNaN(location)) {
-                source.reference = this.app.sources[book];
+                source.reference = source.actual_source;
                 source.page = location;
             } else if (helpers.isValidHttpUrl(location)) {
                 source.reference = {

From 0101b5cc83dc227a9d4c752a8aaf9b0956742eef Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Fri, 13 May 2022 14:50:49 +0100
Subject: [PATCH 13/33] Remove key...

---
 docs/js/app.js     | 2 --
 src/js/importer.js | 2 --
 2 files changed, 4 deletions(-)

diff --git a/docs/js/app.js b/docs/js/app.js
index 43c8e855..c750175a 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -11533,8 +11533,6 @@ var Importer = /*#__PURE__*/function () {
   return Importer;
 }();
 
-_defineProperty(Importer, "key", "AIzaSyA6AlaWOOlyFIXE6KSs1QsiALp26JbHzdI");
-
 _defineProperty(Importer, "loaders", {
   'google-sheets': Importer._importGoogleSheets,
   'json-raw': Importer._importJson,
diff --git a/src/js/importer.js b/src/js/importer.js
index 23a6be87..d739aef4 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -1,7 +1,5 @@
 export default class Importer {
 
-    static key = "AIzaSyA6AlaWOOlyFIXE6KSs1QsiALp26JbHzdI"
-
     static loaders = {
         'google-sheets': this._importGoogleSheets,
         'json-raw': this._importJson,

From 39c7b9c16cc624be99cae73ef80744c451e2bffb Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Fri, 13 May 2022 21:49:48 -0400
Subject: [PATCH 14/33] Various adjustments

---
 docs/css/styles.css | 137 ++++++++++++++++++++++++++++++++------------
 docs/index.html     |  82 +++++++++++++++++++-------
 docs/js/app.js      |   6 +-
 src/css/kobold.css  |  13 +++--
 src/index.html      |  82 +++++++++++++++++++-------
 src/js/app.js       |   4 +-
 src/js/importer.js  |   1 +
 7 files changed, 236 insertions(+), 89 deletions(-)

diff --git a/docs/css/styles.css b/docs/css/styles.css
index efe8a21e..d56c786a 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -8806,6 +8806,9 @@ input[type=text]:disabled{
 .w-screen{
   width: 100vw;
 }
+.w-\[42px\]{
+  width: 42px;
+}
 .w-\[30px\]{
   width: 30px;
 }
@@ -8916,6 +8919,15 @@ input[type=text]:disabled{
 .grid-cols-\[12px_12px_repeat\(12\2c _minmax\(0\2c _1fr\)\)\]{
   grid-template-columns: 12px 12px repeat(12, minmax(0, 1fr));
 }
+.grid-cols-6{
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+.grid-cols-\[1fr_42px\]{
+  grid-template-columns: 1fr 42px;
+}
+.grid-cols-\[42px_1fr_42px\]{
+  grid-template-columns: 42px 1fr 42px;
+}
 .grid-cols-\[30px_1fr\]{
   grid-template-columns: 30px 1fr;
 }
@@ -9314,6 +9326,10 @@ input[type=text]:disabled{
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.\!px-0{
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
 .py-5{
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -9405,9 +9421,6 @@ input[type=text]:disabled{
 .align-middle{
   vertical-align: middle;
 }
-.align-bottom{
-  vertical-align: bottom;
-}
 .font-sans{
   font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -9453,9 +9466,6 @@ input[type=text]:disabled{
 .italic{
   font-style: italic;
 }
-.leading-4{
-  line-height: 1rem;
-}
 .leading-6{
   line-height: 1.5rem;
 }
@@ -9547,6 +9557,10 @@ input[type=text]:disabled{
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
+.text-orange-500{
+  --tw-text-opacity: 1;
+  color: rgb(249 115 22 / var(--tw-text-opacity));
+}
 .text-red-700{
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
@@ -9851,13 +9865,13 @@ body .choices__list--multiple .choices__item{
   margin-bottom: 0px;
   border-radius: 0.375rem;
   --tw-border-opacity: 1;
-  border-color: rgb(6 95 70 / var(--tw-border-opacity));
+  border-color: rgb(4 120 87 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
+  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
 }
 body .choices__list--multiple .choices__item:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
+  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
 }
 body .choices__list--single{
   padding-top: 0px;
@@ -9924,7 +9938,7 @@ body .choices__input:focus{
 }
 .noUi-connect{
   --tw-bg-opacity: 1;
-  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
+  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
 }
 .dark .noUi-connect{
   --tw-bg-opacity: 1;
@@ -9983,7 +9997,7 @@ body .choices__input:focus{
   border-width: 1px;
   border-color: transparent;
   --tw-bg-opacity: 1;
-  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
+  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -10000,7 +10014,7 @@ body .choices__input:focus{
 
 .button-primary-md:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
+  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
 }
 
 .button-primary-md:focus{
@@ -10015,14 +10029,12 @@ body .choices__input:focus{
 }
 
 .button-primary-md:disabled{
-  --tw-bg-opacity: 1;
-  background-color: rgb(110 231 183 / var(--tw-bg-opacity));
   opacity: 0.7;
 }
 
 .button-primary-md:hover:disabled{
   --tw-bg-opacity: 1;
-  background-color: rgb(110 231 183 / var(--tw-bg-opacity));
+  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
 }
 
 .dark .button-primary-md{
@@ -10044,6 +10056,51 @@ body .choices__input:focus{
   --tw-bg-opacity: 1;
   background-color: rgb(6 78 59 / var(--tw-bg-opacity));
 }
+.button-primary-outline-md{
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(16 185 129 / var(--tw-border-opacity));
+  background-color: transparent;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(5 150 105 / var(--tw-text-opacity));
+}
+.button-primary-outline-md:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
+}
+.button-primary-outline-md:focus{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
+  --tw-ring-offset-width: 2px;
+}
+.dark .button-primary-outline-md{
+  --tw-border-opacity: 1;
+  border-color: rgb(6 95 70 / var(--tw-border-opacity));
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(5 150 105 / var(--tw-text-opacity));
+}
+.dark .button-primary-outline-md:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(6 95 70 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .button-secondary-md{
   display: inline-flex;
   align-items: center;
@@ -10154,9 +10211,9 @@ body .choices__input:focus{
   align-items: center;
   border-radius: 0.375rem;
   border-width: 1px;
-  border-color: transparent;
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+  background-color: transparent;
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -10165,11 +10222,11 @@ body .choices__input:focus{
   line-height: 1.25rem;
   font-weight: 500;
   --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
+  color: rgb(220 38 38 / var(--tw-text-opacity));
 }
 .button-danger-outline-md:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 .button-danger-outline-md:focus{
   outline: 2px solid transparent;
@@ -10283,10 +10340,6 @@ body .choices__input:focus{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-.hover\:bg-red-700:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
-}
 .hover\:bg-emerald-600:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(5 150 105 / var(--tw-bg-opacity));
@@ -10295,6 +10348,10 @@ body .choices__input:focus{
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
+.hover\:bg-emerald-700:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
+}
 .hover\:bg-gray-50:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -10587,6 +10644,10 @@ body .choices__input:focus{
   --tw-text-opacity: 1;
   color: rgb(209 250 229 / var(--tw-text-opacity));
 }
+.dark .dark\:text-orange-700{
+  --tw-text-opacity: 1;
+  color: rgb(194 65 12 / var(--tw-text-opacity));
+}
 .dark .dark\:text-red-400{
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -10785,10 +10846,6 @@ body .choices__input:focus{
     height: 2.5rem;
   }
 
-  .sm\:w-full{
-    width: 100%;
-  }
-
   .sm\:w-10{
     width: 2.5rem;
   }
@@ -10797,12 +10854,12 @@ body .choices__input:focus{
     width: auto;
   }
 
-  .sm\:max-w-2xl{
-    max-width: 42rem;
+  .sm\:max-w-xl{
+    max-width: 36rem;
   }
 
-  .sm\:max-w-4xl{
-    max-width: 56rem;
+  .sm\:max-w-2xl{
+    max-width: 42rem;
   }
 
   .sm\:translate-y-0{
@@ -10891,10 +10948,6 @@ body .choices__input:focus{
     text-align: left;
   }
 
-  .sm\:align-middle{
-    vertical-align: middle;
-  }
-
   .sm\:text-sm{
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -10980,6 +11033,10 @@ body .choices__input:focus{
     width: auto;
   }
 
+  .md\:max-w-2xl{
+    max-width: 42rem;
+  }
+
   .md\:transform-none{
     transform: none;
   }
@@ -10988,8 +11045,8 @@ body .choices__input:focus{
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  .md\:grid-cols-2{
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .md\:grid-cols-12{
+    grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
   .md\:grid-cols-\[60px_1fr_50px_75px_150px_30px\]{
@@ -11081,6 +11138,10 @@ body .choices__input:focus{
     width: auto;
   }
 
+  .lg\:max-w-4xl{
+    max-width: 56rem;
+  }
+
   .lg\:flex-row{
     flex-direction: row;
   }
diff --git a/docs/index.html b/docs/index.html
index f5828786..accd4e04 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -389,7 +389,7 @@
 										<input type="checkbox" x-model="group.getsXP" class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 disabled:opacity-70 border-gray-300 rounded">
 									</div>
 
-									<button @click="party.removePlayerGroup(index)" type="button" class="inline-flex items-center px-3 py-1 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white dark:bg-red-800 dark:hover:bg-red-700 hover:bg-red-700 focus:outline-none">
+									<button @click="party.removePlayerGroup(index)" type="button" class="button-danger-outline-md justify-center">
 										<i class="fas fa-times"></i>
 									</button>
 								</div>
@@ -398,7 +398,7 @@
 						</div>
 
 						<div class="w-full">
-							<button @click="party.addPlayerGroup()" type="button" class="button-secondary-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
+							<button @click="party.addPlayerGroup()" type="button" class="button-primary-outline-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
 								<span>
 									<i class="fas fa-plus mr-2"></i> Add Generic Group
 								</span>
@@ -406,7 +406,7 @@
 						</div>
 
 						<div class="w-full" x-show="!(activePlayers.length || party.groups.length)">
-							<button @click="enablePartyModal" type="button" class="button-secondary-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
+							<button @click="enablePartyModal" type="button" class="button-primary-outline-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
 								<span>
 									<i class="fas fa-plus mr-2"></i> Use Detailed Party
 								</span>
@@ -663,7 +663,7 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 											<span class="w-full text-center">Manage sources</span>
 										</button>
 
-										<button :disabled="!nonDefaultFiltersCount" @click="$dispatch('reset-filters')" class="w-full button-secondary-md disabled:opacity-70 disabled:bg-slate-200 disabled:hover:bg-slate-200 disabled:dark:bg-slate-700 disabled:dark:hover:bg-slate-700 disabled:hover:text-emerald-700 disabled:dark:hover:text-emerald-600 grid place-items-center text-center hidden 2xl:block ml-2">
+										<button :disabled="!nonDefaultFiltersCount" @click="$dispatch('reset-filters')" class="w-full button-primary-outline-md disabled:opacity-70 disabled:bg-slate-200 disabled:hover:bg-slate-200 disabled:dark:bg-slate-700 disabled:dark:hover:bg-slate-700 disabled:hover:text-emerald-700 disabled:dark:hover:text-emerald-600 grid place-items-center text-center hidden 2xl:block ml-2">
 											<span class="inline-block w-full"><i class="fa fa-undo pr-1"></i> Reset Filters</span>
 										</button>
 									</div>
@@ -816,7 +816,7 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 												},
 												classes(value) {
 													return {
-														'bg-emerald-700 hover:bg-emerald-600 dark:bg-emerald-800 dark:hover:bg-emerald-900 text-white': this.total & value,
+														'bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900 text-white': this.total & value,
 														'bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border text-gray-700 dark:text-white': !(this.total & value),
 														'cursor-pointer grid place-items-center text-center select-none text-white': true,
 													};
@@ -846,8 +846,8 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 											<div @click="toggle(chaotic_evil)" :class="classes(chaotic_evil)" class="col-span-4 h-12" x-tippy="Chaotic Evil">CE</div>
 
 											<div @click="toggle((lawful_evil | neutral | chaotic_good))" :class="classes(lawful_evil | neutral | chaotic_good)" class="col-span-2 rounded-bl-md"></div>
-											<div @click="total = (total === 1023) ? 0 : 1023" :class="{ 'bg-emerald-700 text-white hover:bg-emerald-600 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 1023) === 1023, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 1023) !== 1023 }" class="select-none text-gray-900 col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Any</div>
-											<div @click="total = total ^ 512" :class="{ 'bg-emerald-700 text-white hover:bg-emerald-600 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 512) === 512, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 512) !== 512 }" class="select-none text-gray-900 rounded-br-md col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Unaligned</div>
+											<div @click="total = (total === 1023) ? 0 : 1023" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 1023) === 1023, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 1023) !== 1023 }" class="select-none text-gray-900 col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Any</div>
+											<div @click="total = total ^ 512" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 512) === 512, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 512) !== 512 }" class="select-none text-gray-900 rounded-br-md col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Unaligned</div>
 										</div>
 									</div>
 
@@ -936,9 +936,9 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 				></div>
 
 				<!-- This element is to trick the browser into centering the modal contents. -->
-				<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-				<div @mousedown.outside="showSourcesModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+				<div @mousedown.outside="showSourcesModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle max-w-full sm:max-w-xl md:max-w-2xl lg:max-w-4xl w-full"
 					 x-show="showSourcesModal"
 					 x-transition:enter="ease-out duration-300"
 					x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -960,11 +960,50 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="m
 
 									<template x-for="type of sourcesByType">
 										<div class="mb-4">
-											<h4 class="font-bold text-gray-900 dark:text-gray-300 leading-6 mb-2" x-text="type.title"></h4>
+											<h4 class="text-gray-700 dark:text-gray-300 leading-6 mb-2" x-text="type.title"></h4>
 
-											<div class="grid gap-2 md:grid-cols-2 w-full">
+											<div class="grid gap-2 grid-cols-6 md:grid-cols-12 w-full">
 												<template x-for="source of type.sources">
-													<button class="text-left" @click="source.enabled =! source.enabled; updateFilteredMonsters();" :class="{ 'button-secondary-md': !source.enabled, 'button-primary-md': source.enabled }" x-text="source.name"></button>
+													<div class="col-span-6 grid gap-2"
+														 :class="{
+														 	'grid-cols-[1fr_42px]': type.title === 'Custom' && !deleting,
+														 	'grid-cols-[42px_1fr_42px]': type.title === 'Custom' && deleting
+														 }"
+														 x-data="{ deleting: false }"
+														 @click.away="deleting = false"
+													>
+														<button class="text-left text-sm max-w-full truncate"
+																x-show="!deleting"
+																@click="source.enabled =! source.enabled; updateFilteredMonsters();"
+																:title="source.name"
+																:class="{
+																'button-primary-outline-md': !source.enabled,
+																'button-primary-md': source.enabled
+															}">
+															<i class="fa pr-1" :class="{
+																'fa-toggle-on': source.enabled,
+																'fa-toggle-off': !source.enabled
+															}"></i>
+															<span class="truncate" x-text="source.name"></span>
+														</button>
+
+														<button x-show="type.title === 'Custom' && !deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleting = true">
+															<i class="fa fa-trash"></i>
+														</button>
+
+														<button x-show="deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleteImportedSource(source.name)">
+															<i class="fa fa-check"></i>
+														</button>
+
+														<div x-show="deleting" class="border dark:border-gray-700 rounded-md inline-flex items-center px-4 py-2">
+															<i class="fa fa-exclamation-triangle pr-1 text-orange-500 dark:text-orange-700"></i>
+															Are you sure?
+														</div>
+
+														<button x-show="deleting" class="!px-0 w-[42px] justify-center button-primary-outline-md" @click="deleting = false">
+															<i class="fa fa-times"></i>
+														</button>
+													</div>
 												</template>
 											</div>
 										</div>
@@ -974,6 +1013,7 @@ <h4 class="font-bold text-gray-900 dark:text-gray-300 leading-6 mb-2" x-text="ty
 							</div>
 						</div>
 					</div>
+
 					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
 						<button @click="showSourcesModal = false" type="button" class="button-primary-md">Done</button>
 <!--						<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>-->
@@ -996,9 +1036,9 @@ <h4 class="font-bold text-gray-900 dark:text-gray-300 leading-6 mb-2" x-text="ty
                 ></div>
 
                 <!-- This element is to trick the browser into centering the modal contents. -->
-                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+                <span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-                <div @mousedown.outside="showEncounterModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+                <div @mousedown.outside="showEncounterModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
                      x-show="showEncounterModal"
                      x-transition:enter="ease-out duration-300"
                      x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -1118,9 +1158,9 @@ <h4 class="font-bold text-gray-900 dark:text-gray-300 leading-6 mb-2" x-text="ty
 			></div>
 
 			<!-- This element is to trick the browser into centering the modal contents. -->
-			<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+			<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-			<div @mousedown.outside="showPartyModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+			<div @mousedown.outside="showPartyModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
 				 x-show="showPartyModal"
 				 x-transition:enter="ease-out duration-300"
 				 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -1236,7 +1276,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Manag
 													</div>
 												</template>
 
-												<button @click="createPlayer(partyIndex)" type="button" class="button-secondary-md col-span-6 justify-center" :class="{ 'h-24': !party.players.length }"> Create player </button>
+												<button @click="createPlayer(partyIndex)" type="button" class="button-primary-outline-md col-span-6 justify-center" :class="{ 'h-24': !party.players.length }"> Create player </button>
 												<button x-show="!party.players.length" @click="deleteParty(partyIndex)" type="button" class="button-danger-outline-md col-span-6 justify-center"> Delete Party </button>
 											</div>
 										</div>
@@ -1273,9 +1313,9 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Manag
 				></div>
 
 				<!-- This element is to trick the browser into centering the modal contents. -->
-				<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-				<div @mousedown.outside="showKeyboardModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+				<div @mousedown.outside="showKeyboardModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
 					 x-show="showKeyboardModal"
 					 x-transition:enter="ease-out duration-300"
 					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -1325,9 +1365,9 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 				></div>
 
 				<!-- This element is to trick the browser into centering the modal contents. -->
-				<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-				<div @mousedown.outside="showImporterModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"
+				<div @mousedown.outside="showImporterModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-xl md:max-w-2xl lg:max-w-4xl w-full"
 					 x-show="showImporterModal"
 					 x-transition:enter="ease-out duration-300"
 					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
diff --git a/docs/js/app.js b/docs/js/app.js
index c750175a..c2a0de5b 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9216,11 +9216,11 @@ function app() {
     storedSourcesVersion: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("2.0.0").as('storedSourcesVersion'),
     menu: false,
     showFilters: false,
-    showSourcesModal: false,
+    showSourcesModal: true,
     showEncounterModal: false,
     showPartyModal: false,
     showKeyboardModal: false,
-    showImporterModal: true,
+    showImporterModal: false,
     mobileEncounterTab: false,
     filters: {},
     searchPlaceholder: "",
@@ -11533,6 +11533,8 @@ var Importer = /*#__PURE__*/function () {
   return Importer;
 }();
 
+_defineProperty(Importer, "key", 'AIzaSyA6AlaWOOlyFIXE6KSs1QsiALp26JbHzdI');
+
 _defineProperty(Importer, "loaders", {
   'google-sheets': Importer._importGoogleSheets,
   'json-raw': Importer._importJson,
diff --git a/src/css/kobold.css b/src/css/kobold.css
index 4b799df6..23927081 100644
--- a/src/css/kobold.css
+++ b/src/css/kobold.css
@@ -86,9 +86,9 @@ body .choices .choices__inner {
     rounded-md;
 }
 body .choices__list--multiple .choices__item { 
-    @apply bg-emerald-700 border-emerald-800 rounded-md mb-0; 
+    @apply bg-emerald-600 border-emerald-700 rounded-md mb-0;
 }
-body .choices__list--multiple .choices__item:hover { @apply bg-emerald-600; }
+body .choices__list--multiple .choices__item:hover { @apply bg-emerald-700; }
 body .choices__list--single { @apply py-0; }
 body .choices__item { @apply text-gray-700 dark:text-gray-300; }
 body .choices__placeholder { @apply opacity-100; }
@@ -101,7 +101,7 @@ body .choices__input { @apply focus:ring-0 border-none px-0; }
     @apply border-none shadow-none bg-gray-100 dark:bg-gray-800;
 }
 .noUi-connect {
-    @apply bg-emerald-700 dark:bg-emerald-700;
+    @apply bg-emerald-600 dark:bg-emerald-700;
 }
 .noUi-handle {
     @apply shadow-none hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 after:content-none before:content-none rounded-md p-0;
@@ -111,7 +111,10 @@ body .choices__input { @apply focus:ring-0 border-none px-0; }
 }
 
 .button-primary-md {
-    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-700 disabled:bg-emerald-300 dark:disabled:bg-emerald-900 disabled:hover:bg-emerald-300 dark:disabled:hover:bg-emerald-900 disabled:opacity-70 hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500;
+    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-emerald-600 dark:bg-emerald-800 dark:hover:bg-emerald-700 disabled:opacity-75 dark:disabled:bg-emerald-900 disabled:hover:bg-emerald-600 dark:disabled:hover:bg-emerald-900 disabled:opacity-70 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500;
+}
+.button-primary-outline-md {
+    @apply inline-flex items-center px-4 py-2 border border-emerald-500 dark:border-emerald-800 text-sm font-medium rounded-md text-emerald-600 bg-transparent dark:bg-transparent dark:text-emerald-600 dark:hover:bg-emerald-800 dark:hover:text-white hover:bg-emerald-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500;
 }
 .button-secondary-md {
     @apply inline-flex items-center px-4 py-2 border border-transparent dark:border-emerald-800 text-sm font-medium rounded-md text-emerald-700 bg-emerald-100 dark:bg-transparent dark:text-emerald-600 dark:hover:bg-emerald-800 dark:hover:text-white hover:bg-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500;
@@ -120,7 +123,7 @@ body .choices__input { @apply focus:ring-0 border-none px-0; }
     @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-700 dark:bg-red-800 dark:hover:bg-red-700 disabled:bg-red-300 dark:disabled:bg-red-900 disabled:hover:bg-red-300 dark:disabled:hover:bg-red-900 disabled:opacity-70 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
 }
 .button-danger-outline-md {
-    @apply inline-flex items-center px-4 py-2 border border-transparent dark:border-red-800 text-sm font-medium rounded-md text-red-700 bg-red-100 dark:bg-transparent dark:text-red-600 dark:hover:bg-red-800 dark:hover:text-white hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
+    @apply inline-flex items-center px-4 py-2 border border-red-500 dark:border-red-800 text-sm font-medium rounded-md text-red-600 bg-transparent dark:bg-transparent dark:text-red-600 dark:hover:bg-red-800 dark:hover:text-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
 }
 [x-cloak] {
     @apply hidden;
diff --git a/src/index.html b/src/index.html
index f5828786..accd4e04 100644
--- a/src/index.html
+++ b/src/index.html
@@ -389,7 +389,7 @@
 										<input type="checkbox" x-model="group.getsXP" class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 disabled:opacity-70 border-gray-300 rounded">
 									</div>
 
-									<button @click="party.removePlayerGroup(index)" type="button" class="inline-flex items-center px-3 py-1 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white dark:bg-red-800 dark:hover:bg-red-700 hover:bg-red-700 focus:outline-none">
+									<button @click="party.removePlayerGroup(index)" type="button" class="button-danger-outline-md justify-center">
 										<i class="fas fa-times"></i>
 									</button>
 								</div>
@@ -398,7 +398,7 @@
 						</div>
 
 						<div class="w-full">
-							<button @click="party.addPlayerGroup()" type="button" class="button-secondary-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
+							<button @click="party.addPlayerGroup()" type="button" class="button-primary-outline-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
 								<span>
 									<i class="fas fa-plus mr-2"></i> Add Generic Group
 								</span>
@@ -406,7 +406,7 @@
 						</div>
 
 						<div class="w-full" x-show="!(activePlayers.length || party.groups.length)">
-							<button @click="enablePartyModal" type="button" class="button-secondary-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
+							<button @click="enablePartyModal" type="button" class="button-primary-outline-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
 								<span>
 									<i class="fas fa-plus mr-2"></i> Use Detailed Party
 								</span>
@@ -663,7 +663,7 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 											<span class="w-full text-center">Manage sources</span>
 										</button>
 
-										<button :disabled="!nonDefaultFiltersCount" @click="$dispatch('reset-filters')" class="w-full button-secondary-md disabled:opacity-70 disabled:bg-slate-200 disabled:hover:bg-slate-200 disabled:dark:bg-slate-700 disabled:dark:hover:bg-slate-700 disabled:hover:text-emerald-700 disabled:dark:hover:text-emerald-600 grid place-items-center text-center hidden 2xl:block ml-2">
+										<button :disabled="!nonDefaultFiltersCount" @click="$dispatch('reset-filters')" class="w-full button-primary-outline-md disabled:opacity-70 disabled:bg-slate-200 disabled:hover:bg-slate-200 disabled:dark:bg-slate-700 disabled:dark:hover:bg-slate-700 disabled:hover:text-emerald-700 disabled:dark:hover:text-emerald-600 grid place-items-center text-center hidden 2xl:block ml-2">
 											<span class="inline-block w-full"><i class="fa fa-undo pr-1"></i> Reset Filters</span>
 										</button>
 									</div>
@@ -816,7 +816,7 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 												},
 												classes(value) {
 													return {
-														'bg-emerald-700 hover:bg-emerald-600 dark:bg-emerald-800 dark:hover:bg-emerald-900 text-white': this.total & value,
+														'bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900 text-white': this.total & value,
 														'bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border text-gray-700 dark:text-white': !(this.total & value),
 														'cursor-pointer grid place-items-center text-center select-none text-white': true,
 													};
@@ -846,8 +846,8 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 											<div @click="toggle(chaotic_evil)" :class="classes(chaotic_evil)" class="col-span-4 h-12" x-tippy="Chaotic Evil">CE</div>
 
 											<div @click="toggle((lawful_evil | neutral | chaotic_good))" :class="classes(lawful_evil | neutral | chaotic_good)" class="col-span-2 rounded-bl-md"></div>
-											<div @click="total = (total === 1023) ? 0 : 1023" :class="{ 'bg-emerald-700 text-white hover:bg-emerald-600 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 1023) === 1023, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 1023) !== 1023 }" class="select-none text-gray-900 col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Any</div>
-											<div @click="total = total ^ 512" :class="{ 'bg-emerald-700 text-white hover:bg-emerald-600 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 512) === 512, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 512) !== 512 }" class="select-none text-gray-900 rounded-br-md col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Unaligned</div>
+											<div @click="total = (total === 1023) ? 0 : 1023" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 1023) === 1023, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 1023) !== 1023 }" class="select-none text-gray-900 col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Any</div>
+											<div @click="total = total ^ 512" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 512) === 512, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 512) !== 512 }" class="select-none text-gray-900 rounded-br-md col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Unaligned</div>
 										</div>
 									</div>
 
@@ -936,9 +936,9 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 				></div>
 
 				<!-- This element is to trick the browser into centering the modal contents. -->
-				<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-				<div @mousedown.outside="showSourcesModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+				<div @mousedown.outside="showSourcesModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle max-w-full sm:max-w-xl md:max-w-2xl lg:max-w-4xl w-full"
 					 x-show="showSourcesModal"
 					 x-transition:enter="ease-out duration-300"
 					x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -960,11 +960,50 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="m
 
 									<template x-for="type of sourcesByType">
 										<div class="mb-4">
-											<h4 class="font-bold text-gray-900 dark:text-gray-300 leading-6 mb-2" x-text="type.title"></h4>
+											<h4 class="text-gray-700 dark:text-gray-300 leading-6 mb-2" x-text="type.title"></h4>
 
-											<div class="grid gap-2 md:grid-cols-2 w-full">
+											<div class="grid gap-2 grid-cols-6 md:grid-cols-12 w-full">
 												<template x-for="source of type.sources">
-													<button class="text-left" @click="source.enabled =! source.enabled; updateFilteredMonsters();" :class="{ 'button-secondary-md': !source.enabled, 'button-primary-md': source.enabled }" x-text="source.name"></button>
+													<div class="col-span-6 grid gap-2"
+														 :class="{
+														 	'grid-cols-[1fr_42px]': type.title === 'Custom' && !deleting,
+														 	'grid-cols-[42px_1fr_42px]': type.title === 'Custom' && deleting
+														 }"
+														 x-data="{ deleting: false }"
+														 @click.away="deleting = false"
+													>
+														<button class="text-left text-sm max-w-full truncate"
+																x-show="!deleting"
+																@click="source.enabled =! source.enabled; updateFilteredMonsters();"
+																:title="source.name"
+																:class="{
+																'button-primary-outline-md': !source.enabled,
+																'button-primary-md': source.enabled
+															}">
+															<i class="fa pr-1" :class="{
+																'fa-toggle-on': source.enabled,
+																'fa-toggle-off': !source.enabled
+															}"></i>
+															<span class="truncate" x-text="source.name"></span>
+														</button>
+
+														<button x-show="type.title === 'Custom' && !deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleting = true">
+															<i class="fa fa-trash"></i>
+														</button>
+
+														<button x-show="deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleteImportedSource(source.name)">
+															<i class="fa fa-check"></i>
+														</button>
+
+														<div x-show="deleting" class="border dark:border-gray-700 rounded-md inline-flex items-center px-4 py-2">
+															<i class="fa fa-exclamation-triangle pr-1 text-orange-500 dark:text-orange-700"></i>
+															Are you sure?
+														</div>
+
+														<button x-show="deleting" class="!px-0 w-[42px] justify-center button-primary-outline-md" @click="deleting = false">
+															<i class="fa fa-times"></i>
+														</button>
+													</div>
 												</template>
 											</div>
 										</div>
@@ -974,6 +1013,7 @@ <h4 class="font-bold text-gray-900 dark:text-gray-300 leading-6 mb-2" x-text="ty
 							</div>
 						</div>
 					</div>
+
 					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
 						<button @click="showSourcesModal = false" type="button" class="button-primary-md">Done</button>
 <!--						<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>-->
@@ -996,9 +1036,9 @@ <h4 class="font-bold text-gray-900 dark:text-gray-300 leading-6 mb-2" x-text="ty
                 ></div>
 
                 <!-- This element is to trick the browser into centering the modal contents. -->
-                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+                <span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-                <div @mousedown.outside="showEncounterModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+                <div @mousedown.outside="showEncounterModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
                      x-show="showEncounterModal"
                      x-transition:enter="ease-out duration-300"
                      x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -1118,9 +1158,9 @@ <h4 class="font-bold text-gray-900 dark:text-gray-300 leading-6 mb-2" x-text="ty
 			></div>
 
 			<!-- This element is to trick the browser into centering the modal contents. -->
-			<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+			<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-			<div @mousedown.outside="showPartyModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+			<div @mousedown.outside="showPartyModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
 				 x-show="showPartyModal"
 				 x-transition:enter="ease-out duration-300"
 				 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -1236,7 +1276,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Manag
 													</div>
 												</template>
 
-												<button @click="createPlayer(partyIndex)" type="button" class="button-secondary-md col-span-6 justify-center" :class="{ 'h-24': !party.players.length }"> Create player </button>
+												<button @click="createPlayer(partyIndex)" type="button" class="button-primary-outline-md col-span-6 justify-center" :class="{ 'h-24': !party.players.length }"> Create player </button>
 												<button x-show="!party.players.length" @click="deleteParty(partyIndex)" type="button" class="button-danger-outline-md col-span-6 justify-center"> Delete Party </button>
 											</div>
 										</div>
@@ -1273,9 +1313,9 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Manag
 				></div>
 
 				<!-- This element is to trick the browser into centering the modal contents. -->
-				<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-				<div @mousedown.outside="showKeyboardModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
+				<div @mousedown.outside="showKeyboardModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
 					 x-show="showKeyboardModal"
 					 x-transition:enter="ease-out duration-300"
 					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -1325,9 +1365,9 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 				></div>
 
 				<!-- This element is to trick the browser into centering the modal contents. -->
-				<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-				<div @mousedown.outside="showImporterModal = false" class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"
+				<div @mousedown.outside="showImporterModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-xl md:max-w-2xl lg:max-w-4xl w-full"
 					 x-show="showImporterModal"
 					 x-transition:enter="ease-out duration-300"
 					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
diff --git a/src/js/app.js b/src/js/app.js
index d55b6e58..72c622cf 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -25,11 +25,11 @@ function app() {
 
         menu: false,
         showFilters: false,
-        showSourcesModal: false,
+        showSourcesModal: true,
         showEncounterModal: false,
         showPartyModal: false,
         showKeyboardModal: false,
-        showImporterModal: true,
+        showImporterModal: false,
 
         mobileEncounterTab: false,
 
diff --git a/src/js/importer.js b/src/js/importer.js
index d739aef4..f050466b 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -1,4 +1,5 @@
 export default class Importer {
+    static key = 'AIzaSyA6AlaWOOlyFIXE6KSs1QsiALp26JbHzdI';
 
     static loaders = {
         'google-sheets': this._importGoogleSheets,

From 885855ec88f6f65ef87f0c5f05d3906643a0c0d2 Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Sat, 14 May 2022 12:22:32 +0100
Subject: [PATCH 15/33] Added importer html based on importer type

---
 docs/css/styles.css | 39 +++++++++++++++++++
 docs/index.html     | 91 ++++++++++++++++++++++++++-------------------
 docs/js/app.js      | 29 ++++++++-------
 src/index.html      | 91 ++++++++++++++++++++++++++-------------------
 src/js/app.js       |  4 +-
 src/js/importer.js  | 32 +++++++++++-----
 6 files changed, 185 insertions(+), 101 deletions(-)

diff --git a/docs/css/styles.css b/docs/css/styles.css
index d56c786a..5dc05f51 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -8583,6 +8583,12 @@ input[type=text]:disabled{
 .float-right{
   float: right;
 }
+.float-left{
+  float: left;
+}
+.m-0{
+  margin: 0px;
+}
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
@@ -8689,6 +8695,9 @@ input[type=text]:disabled{
 .\!mb-0{
   margin-bottom: 0px !important;
 }
+.mb-5{
+  margin-bottom: 1.25rem;
+}
 .block{
   display: block;
 }
@@ -9136,6 +9145,9 @@ input[type=text]:disabled{
 .border-b-2{
   border-bottom-width: 2px;
 }
+.border-solid{
+  border-style: solid;
+}
 .border-dashed{
   border-style: dashed;
 }
@@ -9231,6 +9243,9 @@ input[type=text]:disabled{
 .to-transparent{
   --tw-gradient-to: transparent;
 }
+.bg-clip-padding{
+  background-clip: padding-box;
+}
 .fill-white{
   fill: #fff;
 }
@@ -10399,6 +10414,18 @@ body .choices__input:focus{
   --tw-border-opacity: 1;
   border-color: rgb(16 185 129 / var(--tw-border-opacity));
 }
+.focus\:border-blue-600:focus{
+  --tw-border-opacity: 1;
+  border-color: rgb(37 99 235 / var(--tw-border-opacity));
+}
+.focus\:bg-white:focus{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.focus\:text-gray-700:focus{
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
 .focus\:outline-none:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -10676,6 +10703,18 @@ body .choices__input:focus{
   -webkit-text-decoration-color: #6b7280;
           text-decoration-color: #6b7280;
 }
+.dark .dark\:placeholder-gray-400::-moz-placeholder{
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+.dark .dark\:placeholder-gray-400:-ms-input-placeholder{
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+.dark .dark\:placeholder-gray-400::placeholder{
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
 .dark .dark\:shadow-xl{
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
diff --git a/docs/index.html b/docs/index.html
index accd4e04..c2ee1da9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1352,7 +1352,52 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 			</div>
 		</div>
 
-		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
+		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" x-cloak aria-modal="true" x-data="{
+            importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
+            importerSourceType: 'json-file',
+            importerHtml: '',
+            step: 1,
+            stagedMonsters: [],
+            stagedSources: [],
+            init(){
+                this.loadImporter();
+            },
+            loadImporter(){
+                this.importerHtml = '';
+                this.importerHtml = Importer.loadersHtml[this.importerSourceType]();
+            },
+            async startImport() {
+                const importResults = await Importer.import({
+                    type: this.importerSourceType,
+                    resourceLocator: this.importerResourceLocator
+                });
+
+                this.stagedMonsters = importResults.monsters;
+                this.stagedSources = importResults.sources;
+
+                this.step = 2;
+            },
+            finishImport() {
+                importedSources = importedSources.concat(this.stagedSources)
+                formatSources(this.stagedSources);
+                this.stagedSources = [];
+
+                importedMonsters = importedMonsters.concat(this.stagedMonsters)
+                formatMonsters(this.stagedMonsters);
+                this.stagedMonsters = [];
+
+                dispatchEvent(new CustomEvent('notification', {detail: {title: 'Import complete!', body: 'Your new source(s) have been imported'}}));
+
+                this.step = 1;
+                showImporterModal = false;
+            },
+            abortImport() {
+                this.loadImporter();
+                this.stagedSources = [];
+                this.stagedMonsters = [];
+                this.step = 1;
+            }
+        }">
 			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 				<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
 					 x-show="showImporterModal"
@@ -1377,45 +1422,14 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 					 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 				>
 					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
-						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
-							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
-							importerSourceType: 'google-sheets',
-							step: 1,
-							stagedMonsters: [],
-							stagedSources: [],
-							async startImport() {
-								importResults = await Importer.import({
-									type: this.importerSourceType,
-									resourceLocator: this.importerResourceLocator
-								});
-
-								this.stagedMonsters = importResults.monsters;
-								this.stagedSources = importResults.sources;
-
-								this.step = 2;
-							},
-							finishImport() {
-								importedSources = importedSources.concat(this.stagedSources)
-								formatSources(this.stagedSources);
-								this.stagedSources = [];
-
-								importedMonsters = importedMonsters.concat(this.stagedMonsters)
-								formatMonsters(this.stagedMonsters);
-								this.stagedMonsters = [];
-
-								dispatchEvent(new CustomEvent('notification', {detail: {title: 'Import complete!', body: 'Your new source(s) have been imported'}}));
-
-								this.step = 1;
-								showImporterModal = false;
-							}
-						}">
+						<div class="sm:flex flex-col sm:items-start w-full">
 							<div class="w-full flex pb-3">
 								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Import Custom Monsters</h3>
 							</div>
 
 							<div class="my-3 sm:mt-0 w-full" x-show="step === 1">
 								<label for="importer_source">Import from</label>
-								<select x-model="importerSourceType" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
+								<select x-model="importerSourceType" @change="loadImporter" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
 									<optgroup label="More to come...">
 										<option value="google-sheets">Google Sheets</option>
 										<option value="json-raw">Raw JSON</option>
@@ -1423,8 +1437,8 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 									</optgroup>
 								</select>
 
-								<label for="import_resource_locator">Sheets ID</label>
-								<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
+                                <div class="mb-4" x-html="importerHtml"></div>
+								<!--<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">-->
                                 <!--<textarea id="import_resource_locator" x-model="importerResourceLocator" cols="30" rows="10"></textarea>-->
                                 <!--<input id="import_resource_locator" type="file" accept="text/json, text/csv" @change="importerResourceLocator = $event.target.files[0]">-->
 
@@ -1524,13 +1538,14 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 									</div>
 								</div>
 
+								<button class="float-left mt-4 button-danger-outline-md" @click="abortImport">Nope, go back!</button>
 								<button class="float-right mt-4 button-primary-md" @click="finishImport">Looks Good, Import Them!</button>
 							</div>
 						</div>
 					</div>
 
-					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
-						<button @click="showImporterModal = false" type="button" class="button-primary-md">Close</button>
+					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between" x-show="step === 1">
+						<button @click="showImporterModal = false; if(step === 2){ abortImport() };" type="button" class="button-primary-md">Close</button>
 					</div>
 				</div>
 			</div>
diff --git a/docs/js/app.js b/docs/js/app.js
index c2a0de5b..36203e2b 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9216,11 +9216,11 @@ function app() {
     storedSourcesVersion: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("2.0.0").as('storedSourcesVersion'),
     menu: false,
     showFilters: false,
-    showSourcesModal: true,
+    showSourcesModal: false,
     showEncounterModal: false,
     showPartyModal: false,
     showKeyboardModal: false,
-    showImporterModal: false,
+    showImporterModal: true,
     mobileEncounterTab: false,
     filters: {},
     searchPlaceholder: "",
@@ -11340,16 +11340,7 @@ var Importer = /*#__PURE__*/function () {
 
   _createClass(Importer, null, [{
     key: "import",
-    value:
-    /* import({
-    *      resourceLocator = false,
-    *      type = 'google-sheets',
-    * }={})
-    *
-    * <- Exact format needed for localStorage
-    *
-     */
-    function () {
+    value: function () {
       var _import2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee() {
         var _ref,
             _ref$resourceLocator,
@@ -11533,14 +11524,24 @@ var Importer = /*#__PURE__*/function () {
   return Importer;
 }();
 
-_defineProperty(Importer, "key", 'AIzaSyA6AlaWOOlyFIXE6KSs1QsiALp26JbHzdI');
-
 _defineProperty(Importer, "loaders", {
   'google-sheets': Importer._importGoogleSheets,
   'json-raw': Importer._importJson,
   'json-file': Importer._importJsonFile
 });
 
+_defineProperty(Importer, "loadersHtml", {
+  'google-sheets': function googleSheets() {
+    return "\n                <label for=\"import_resource_locator\">Sheets ID</label>\n                <input name=\"import_resource_locator\" id=\"import_resource_locator\" type=\"text\" x-model=\"importerResourceLocator\">\n            ";
+  },
+  'json-raw': function jsonRaw() {
+    return "\n                <label for=\"import_resource_locator\">Raw JSON</label>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
+  },
+  'json-file': function jsonFile() {
+    return "\n                <label for=\"import_resource_locator\" class=\"block mb-2 text-gray-900 dark:text-gray-300\">Upload JSON file</label>\n                <input id=\"import_resource_locator\" type=\"file\" accept=\"text/json\" @change=\"importerResourceLocator = $event.target.files[0]\" class=\"block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\">\n            ";
+  }
+});
+
 
 
 /***/ }),
diff --git a/src/index.html b/src/index.html
index accd4e04..c2ee1da9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1352,7 +1352,52 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 			</div>
 		</div>
 
-		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
+		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" x-cloak aria-modal="true" x-data="{
+            importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
+            importerSourceType: 'json-file',
+            importerHtml: '',
+            step: 1,
+            stagedMonsters: [],
+            stagedSources: [],
+            init(){
+                this.loadImporter();
+            },
+            loadImporter(){
+                this.importerHtml = '';
+                this.importerHtml = Importer.loadersHtml[this.importerSourceType]();
+            },
+            async startImport() {
+                const importResults = await Importer.import({
+                    type: this.importerSourceType,
+                    resourceLocator: this.importerResourceLocator
+                });
+
+                this.stagedMonsters = importResults.monsters;
+                this.stagedSources = importResults.sources;
+
+                this.step = 2;
+            },
+            finishImport() {
+                importedSources = importedSources.concat(this.stagedSources)
+                formatSources(this.stagedSources);
+                this.stagedSources = [];
+
+                importedMonsters = importedMonsters.concat(this.stagedMonsters)
+                formatMonsters(this.stagedMonsters);
+                this.stagedMonsters = [];
+
+                dispatchEvent(new CustomEvent('notification', {detail: {title: 'Import complete!', body: 'Your new source(s) have been imported'}}));
+
+                this.step = 1;
+                showImporterModal = false;
+            },
+            abortImport() {
+                this.loadImporter();
+                this.stagedSources = [];
+                this.stagedMonsters = [];
+                this.step = 1;
+            }
+        }">
 			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 				<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
 					 x-show="showImporterModal"
@@ -1377,45 +1422,14 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 					 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 				>
 					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
-						<div class="sm:flex flex-col sm:items-start w-full" x-data="{
-							importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
-							importerSourceType: 'google-sheets',
-							step: 1,
-							stagedMonsters: [],
-							stagedSources: [],
-							async startImport() {
-								importResults = await Importer.import({
-									type: this.importerSourceType,
-									resourceLocator: this.importerResourceLocator
-								});
-
-								this.stagedMonsters = importResults.monsters;
-								this.stagedSources = importResults.sources;
-
-								this.step = 2;
-							},
-							finishImport() {
-								importedSources = importedSources.concat(this.stagedSources)
-								formatSources(this.stagedSources);
-								this.stagedSources = [];
-
-								importedMonsters = importedMonsters.concat(this.stagedMonsters)
-								formatMonsters(this.stagedMonsters);
-								this.stagedMonsters = [];
-
-								dispatchEvent(new CustomEvent('notification', {detail: {title: 'Import complete!', body: 'Your new source(s) have been imported'}}));
-
-								this.step = 1;
-								showImporterModal = false;
-							}
-						}">
+						<div class="sm:flex flex-col sm:items-start w-full">
 							<div class="w-full flex pb-3">
 								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Import Custom Monsters</h3>
 							</div>
 
 							<div class="my-3 sm:mt-0 w-full" x-show="step === 1">
 								<label for="importer_source">Import from</label>
-								<select x-model="importerSourceType" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
+								<select x-model="importerSourceType" @change="loadImporter" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
 									<optgroup label="More to come...">
 										<option value="google-sheets">Google Sheets</option>
 										<option value="json-raw">Raw JSON</option>
@@ -1423,8 +1437,8 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 									</optgroup>
 								</select>
 
-								<label for="import_resource_locator">Sheets ID</label>
-								<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
+                                <div class="mb-4" x-html="importerHtml"></div>
+								<!--<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">-->
                                 <!--<textarea id="import_resource_locator" x-model="importerResourceLocator" cols="30" rows="10"></textarea>-->
                                 <!--<input id="import_resource_locator" type="file" accept="text/json, text/csv" @change="importerResourceLocator = $event.target.files[0]">-->
 
@@ -1524,13 +1538,14 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 									</div>
 								</div>
 
+								<button class="float-left mt-4 button-danger-outline-md" @click="abortImport">Nope, go back!</button>
 								<button class="float-right mt-4 button-primary-md" @click="finishImport">Looks Good, Import Them!</button>
 							</div>
 						</div>
 					</div>
 
-					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
-						<button @click="showImporterModal = false" type="button" class="button-primary-md">Close</button>
+					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between" x-show="step === 1">
+						<button @click="showImporterModal = false; if(step === 2){ abortImport() };" type="button" class="button-primary-md">Close</button>
 					</div>
 				</div>
 			</div>
diff --git a/src/js/app.js b/src/js/app.js
index 72c622cf..d55b6e58 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -25,11 +25,11 @@ function app() {
 
         menu: false,
         showFilters: false,
-        showSourcesModal: true,
+        showSourcesModal: false,
         showEncounterModal: false,
         showPartyModal: false,
         showKeyboardModal: false,
-        showImporterModal: false,
+        showImporterModal: true,
 
         mobileEncounterTab: false,
 
diff --git a/src/js/importer.js b/src/js/importer.js
index f050466b..f2fbae87 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -1,5 +1,4 @@
 export default class Importer {
-    static key = 'AIzaSyA6AlaWOOlyFIXE6KSs1QsiALp26JbHzdI';
 
     static loaders = {
         'google-sheets': this._importGoogleSheets,
@@ -7,14 +6,29 @@ export default class Importer {
         'json-file': this._importJsonFile,
     }
 
-    /* import({
-    *      resourceLocator = false,
-    *      type = 'google-sheets',
-    * }={})
-    *
-    * <- Exact format needed for localStorage
-    *
-     */
+    static loadersHtml = {
+        'google-sheets': () => {
+            return `
+                <label for="import_resource_locator">Sheets ID</label>
+                <input name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
+            `;
+        },
+        'json-raw': () => {
+            return `
+                <label for="import_resource_locator">Raw JSON</label>
+                <div class="mt-1">
+                    <textarea id="import_resource_locator" x-model="importerResourceLocator" rows="4" name="comment" class="border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600"></textarea>
+                </div>
+            `;
+        },
+        'json-file': () => {
+            return `
+                <label for="import_resource_locator" class="block mb-2 text-gray-900 dark:text-gray-300">Upload JSON file</label>
+                <input id="import_resource_locator" type="file" accept="text/json" @change="importerResourceLocator = $event.target.files[0]" class="block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
+            `;
+        },
+    }
+
     static async import({ resourceLocator = false, type = 'google-sheets' } = {}) {
         return this.loaders[type].bind(this)(resourceLocator);
     }

From bda7c244eaf57b04a0297b76f87abffa06e3a932 Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Sat, 14 May 2022 12:41:38 +0100
Subject: [PATCH 16/33] Added download JSON example

---
 docs/css/styles.css |   24 -
 docs/index.html     | 1625 -------------------------------------------
 docs/js/app.js      |  216 +++---
 src/index.html      |    3 +
 src/js/importer.js  |  118 +++-
 5 files changed, 230 insertions(+), 1756 deletions(-)
 delete mode 100644 docs/index.html

diff --git a/docs/css/styles.css b/docs/css/styles.css
index 5dc05f51..dc76a454 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -8586,9 +8586,6 @@ input[type=text]:disabled{
 .float-left{
   float: left;
 }
-.m-0{
-  margin: 0px;
-}
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
@@ -8695,9 +8692,6 @@ input[type=text]:disabled{
 .\!mb-0{
   margin-bottom: 0px !important;
 }
-.mb-5{
-  margin-bottom: 1.25rem;
-}
 .block{
   display: block;
 }
@@ -9145,9 +9139,6 @@ input[type=text]:disabled{
 .border-b-2{
   border-bottom-width: 2px;
 }
-.border-solid{
-  border-style: solid;
-}
 .border-dashed{
   border-style: dashed;
 }
@@ -9243,9 +9234,6 @@ input[type=text]:disabled{
 .to-transparent{
   --tw-gradient-to: transparent;
 }
-.bg-clip-padding{
-  background-clip: padding-box;
-}
 .fill-white{
   fill: #fff;
 }
@@ -10414,18 +10402,6 @@ body .choices__input:focus{
   --tw-border-opacity: 1;
   border-color: rgb(16 185 129 / var(--tw-border-opacity));
 }
-.focus\:border-blue-600:focus{
-  --tw-border-opacity: 1;
-  border-color: rgb(37 99 235 / var(--tw-border-opacity));
-}
-.focus\:bg-white:focus{
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-.focus\:text-gray-700:focus{
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
 .focus\:outline-none:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
diff --git a/docs/index.html b/docs/index.html
deleted file mode 100644
index c2ee1da9..00000000
--- a/docs/index.html
+++ /dev/null
@@ -1,1625 +0,0 @@
-<!DOCTYPE html>
-<html class="h-full" xmlns:x-transition="http://www.w3.org/1999/xhtml">
-<head>
-	<title>Kobold Plus Fight Club - The first rule of Kobold Fight Club is 'Yip Yip!'</title>
-	<meta charset="utf-8">
-	<link rel="manifest" href="manifest.json">
-	<link rel="apple-touch-icon" href="images/logo.png" sizes="600x600">
-	<link rel="icon" href="images/logo.png" sizes="600x600">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-	<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-	<script defer src="js/app.js"></script>
-
-	<link href="css/styles.css" rel="stylesheet">
-
-	<script>
-		// On page load or when changing themes, best to add inline in `head` to avoid FOUC
-		if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-			window.theme = 'dark'
-			document.documentElement.classList.add('dark')
-			localStorage.theme = 'dark'
-		} else {
-			window.theme = 'light'
-			document.documentElement.classList.remove('dark')
-			localStorage.theme = 'light'
-		}
-
-		if(window.navigator.userAgent.includes('Surface Duo') && !window.navigator.userAgent.includes('Surface Duo 2')) {
-			document.documentElement.classList.add('surface-duo');
-		}
-		if(window.navigator.userAgent.includes('Surface Duo 2')) {
-			document.documentElement.classList.add('surface-duo-2');
-		}
-
-		document.addEventListener('alpine:init', () => {
-			tippy.setDefaultProps({
-				delay: 700
-			});
-
-			// Magic: $tooltip
-			Alpine.magic('tooltip', el => message => {
-				let instance = tippy(el, { content: message, trigger: 'manual' })
-
-				instance.show()
-
-				setTimeout(() => {
-					instance.hide()
-
-					setTimeout(() => instance.destroy(), 150)
-				}, 2000)
-			})
-
-			// Directive: x-tooltip
-			Alpine.directive('tooltip', (el, { expression }, { evaluateLater, effect }) => {
-				let createMessage = evaluateLater(expression);
-
-				effect(() => {
-					createMessage(tooltipString => {
-						if(el._tippy) {
-							el._tippy.destroy();
-						}
-
-						tippy(el, {
-							content: tooltipString,
-							delay: 200,
-							theme: window.theme ?? 'dark'
-						});
-					})
-				})
-			})
-
-			Alpine.directive('tippy', (el, { expression }) => {
-				tippy(el, { content: expression, theme: window.theme ?? 'dark' });
-			})
-		})
-	</script>
-</head>
-
-<body class="h-full"
-	  x-data="window.app()"
-	  @filters-changed.window="filtersChanged"
-	  @reset-filters.window="resetFilters"
-	  @resize.window.debounce.50ms="showFilters = (Math.max(
-    document.body.scrollWidth,
-    document.documentElement.scrollWidth,
-    document.body.offsetWidth,
-    document.documentElement.offsetWidth,
-    document.documentElement.clientWidth
-  ) > 1535)"
->
-	<div
-		class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-300 flex flex-col"
-	>
-
-		<nav class="bg-emerald-700 border-b border-gray-200 dark:border-gray-900 shrink-0">
-			<div class="mx-auto px-4 sm:px-6 lg:px-6">
-				<div class="flex justify-between h-16 w-full">
-					<div class="flex">
-						<div class="flex-shrink-0 flex items-center">
-							<a href="" class="flex items-center">
-								<img class="h-8 w-auto" src="images/header_logo.png" alt="Fantasy Calendar"> <span class="hidden md:inline pl-2 text-lg font-bold text-white">Kobold+ Fight Club</span>
-							</a>
-						</div>
-					</div>
-					<div class="hidden lg:flex text-white lg:-my-px lg:ml-6 lg:space-x-8 items-center">
-                        <a @click="showKeyboardModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Keyboard Shortcuts <span class="inline-flex items-center px-1 py-0.5 rounded text-xs font-medium bg-emerald-800 text-emerald-100 ml-1">Ctrl+/</span></a>
-                        <a @click="showImporterModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Import Custom Monsters</a>
-                        <a href="https://fantasy-calendar.com/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Fantasy Calendar</a>
-                        <a href="https://fantasycomputer.works/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">About</a>
-						<a x-tippy="Toggle light mode (ctrl+shift+\)" @click="toggleTheme()" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300 h-full">
-							<i :class="{ 'fa-moon': theme === 'light', 'fa-sun': theme === 'dark' }" class="fa"></i>
-						</a>
-					</div>
-					<div class="-mr-2 flex items-center lg:hidden">
-						<button class="inline-flex items-center justify-center p-2 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white" @click="menu = !menu">
-							<span class="sr-only">Open main menu</span>
-							<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-							</svg>
-							<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-							</svg>
-						</button>
-					</div>
-				</div>
-			</div>
-
-			<div class="transition-all duration-400 ease-in-out overflow-hidden hidden" :class="{ 'block': menu, 'hidden': !menu }">
-				<div class="pt-2 pb-3 space-y-1">
-					<a href="https://fantasy-calendar.com/" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-emerald-300 hover:text-white hover:border-gray-300">Fantasy Calendar</a>
-					<a href="javascript:" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-emerald-300 hover:text-white hover:border-gray-300">About</a>
-                    <a x-tippy="Toggle light mode (ctrl+shift+\)" @click="toggleTheme()" href="javascript:" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-emerald-300 hover:text-white hover:border-gray-300">
-                        <i :class="theme === 'light' ? 'fa-moon' : 'fa-sun'" class="fa"></i> <span x-text="`Toggle theme`"></span>
-                    </a>
-				</div>
-			</div>
-		</nav>
-
-		<div class="flex py-4 sm:py-6 lg:py-8 w-full max-w-[2560px] relative grow mx-auto flex-col md:flex-row">
-			<div class="relative self-center mb-6 bg-gray-200 dark:bg-gray-800 rounded-lg p-0.5 flex sm:mt-8 h-10 md:hidden">
-				<div class="absolute bg-gray-100 dark:bg-gray-700 w-1/2 transition-all duration-300 inset-y-1 rounded-md" :class="{ 'translate-x-full -ml-1.5': mobileEncounterTab, 'left-1': !mobileEncounterTab }"></div>
-				<button @click="mobileEncounterTab = false" type="button" :class="{ 'text-gray-900 ': !mobileEncounterTab, 'text-gray-700': mobileEncounterTab }" class="relative border-gray-200 rounded-md shadow-sm py-2 text-sm font-medium dark:text-gray-100 whitespace-nowrap focus:outline-none focus:z-10 w-40">Encounter <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-300 dark:bg-gray-300 text-gray-800" x-text="encounter.groups.reduce((carry, item) => carry + item.count, 0)" x-show="encounter.groups.length"></span></button>
-				<button @click="mobileEncounterTab = true" type="button" :class="{ 'text-gray-900 ': mobileEncounterTab, 'text-gray-700': !mobileEncounterTab }" class="ml-0.5 relative border border-transparent rounded-md py-2 text-sm font-medium whitespace-nowrap dark:text-gray-100 focus:outline-none focus:z-10 w-40">Monsters</button>
-			</div>
-
-			<div id="monsters_box" :class="{ 'hidden md:block': !mobileEncounterTab }" class="grow px-4 md:pr-0 md:absolute md:inset-y-0 md:py-8 left-0 right-0 md:inset-none md:pl-[28rem] 2xl:right-[24rem] overflow-y-auto scrollbar">
-				<label for="search" class="max-w-full block text-sm font-medium text-gray-700 sr-only">Search monsters</label>
-
-				<div class="px-4 sm:px-6 lg:px-8">
-					<div class="max-w-full mt-1 flex flex-col lg:flex-row rounded-md shadow-sm">
-						<div class="relative items-stretch grow focus-within:z-10">
-							<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-								<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-									<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-								</svg>
-							</div>
-
-							<input type="search" name="search" id="search" x-model="search" @input.debounce="updateFilteredMonsters" class="border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none pl-10 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600" :placeholder="searchPlaceholder">
-
-							<div class="absolute inset-y-0 right-0 flex py-1.5 pr-2 hidden md:block">
-								<kbd class="inline-flex items-center border border-gray-200 dark:border-gray-600 rounded px-2 text-sm font-sans font-medium text-gray-400" x-text="navigator.platform.toLowerCase().includes('mac') ? '⌘K' : 'Ctrl K'"></kbd>
-							</div>
-						</div>
-
-						<div class="flex w-full lg:w-auto mt-2 lg:mt-0">
-							<div class="w-full lg:w-auto">
-								<select id="monstersPerPage" @change="setMonstersPerPage(Number($event.target.value))" name="location" class="block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-l-md lg:rounded-none 2xl:rounded-r-md border-gray-300 border-l-0 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
-									<option value="10" :selected="monstersPerPage === 10">10 per page</option>
-									<option value="25" :selected="monstersPerPage === 25">25 per page</option>
-									<option value="50" :selected="monstersPerPage === 50">50 per page</option>
-									<option value="100" :selected="monstersPerPage === 100">100 per page</option>
-								</select>
-							</div>
-
-							<div class="relative inline-block text-left 2xl:hidden" x-data="{ filtersMenu: true }" x-tippy="Filter monsters (Ctrl+L)">
-								<button @click="showFilters =! showFilters" type="button" class="-ml-px h-full relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md bg-white disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 dark:text-gray-400 text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500">
-									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-										<path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-									</svg>
-									<span>Filter</span>
-									<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-300 text-gray-800" x-show="nonDefaultFiltersCount > 0" x-text="nonDefaultFiltersCount"></span>
-								</button>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- This example requires Tailwind CSS v2.0+ -->
-				<div class="px-4 sm:px-6 lg:px-8">
-
-					<div class="-mx-4 mt-8 overflow-x-auto shadow ring-1 ring-black ring-opacity-5 sm:-mx-6 md:mx-0 md:rounded-lg">
-						<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
-							<thead class="bg-gray-50 dark:bg-gray-700">
-							<tr>
-								<th scope="col" class="py-3.5 px-3 text-center text-sm font-semibold text-gray-900 sm:pl-6 w-8 max-w-8">
-									<span class="sr-only">Add to encounter</span>
-								</th>
-								<th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none cursor-pointer group whitespace-nowrap w-64" @click="setSortBy('name')">
-									Name
-									<span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" :class="{ 'invisible': sortBy !== 'name' }">
-                                        <i class="fa-solid" :class="{
-                                            'fa-chevron-down': sortByDesc || sortBy !== 'name',
-                                            'fa-chevron-up': !sortByDesc && sortBy === 'name'
-                                        }"></i>
-                                    </span>
-								</th>
-								<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none cursor-pointer table-cell group whitespace-nowrap w-32" @click="setSortBy('size')">
-									Size
-									<span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" :class="{ 'invisible': sortBy !== 'size' }">
-                                        <i class="fa-solid" :class="{
-                                            'fa-chevron-down': sortByDesc || sortBy !== 'size',
-                                            'fa-chevron-up': !sortByDesc && sortBy === 'size'
-                                        }"></i>
-                                    </span>
-								</th>
-								<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none cursor-pointer sm:table-cell group whitespace-nowrap w-32" @click="setSortBy('cr')">
-									CR
-									<span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" :class="{ 'invisible': sortBy !== 'cr' }">
-                                        <i class="fa-solid" :class="{
-                                            'fa-chevron-down': sortByDesc || sortBy !== 'cr',
-                                            'fa-chevron-up': !sortByDesc && sortBy === 'cr'
-                                        }"></i>
-                                    </span>
-								</th>
-								<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none cursor-pointer lg:table-cell group whitespace-nowrap w-32" @click="setSortBy('type')">
-									Type
-									<span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" :class="{ 'invisible': sortBy !== 'type' }">
-                                        <i class="fa-solid" :class="{
-                                            'fa-chevron-down': sortByDesc || sortBy !== 'type',
-                                            'fa-chevron-up': !sortByDesc && sortBy === 'type'
-                                        }"></i>
-                                    </span>
-								</th>
-								<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none cursor-pointer lg:table-cell group whitespace-nowrap w-32" @click="setSortBy('alignment')">
-									Alignment
-									<span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" :class="{ 'invisible': sortBy !== 'alignment' }">
-                                        <i class="fa-solid" :class="{
-                                            'fa-chevron-down': sortByDesc || sortBy !== 'alignment',
-                                            'fa-chevron-up': !sortByDesc && sortBy === 'alignment'
-                                        }"></i>
-                                    </span>
-								</th>
-							</tr>
-							</thead>
-							<tbody class="divide-y divide-gray-200 dark:divide-gray-600 bg-white dark:bg-gray-900">
-							<template x-for="monster in monsters">
-								<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-800">
-									<td class="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-300 text-center w-8 max-w-8">
-										<span class="primary-link cursor-pointer select-none"
-											@click="encounter.addMonster(monster)"
-											x-tooltip="encounter.getDifficultyFromExperience(monster.cr.exp)"
-											>Add</span>
-									</td>
-									<td class="w-full max-w-0 py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-100 w-64 max-w-64 truncate">
-										<span class="truncate" x-text="monster.name"></span>
-										<dl class="font-normal">
-											<dt class="sr-only">Sources</dt>
-											<dd class="mt-1 truncate text-gray-500 dark:text-gray-400">
-                                                <template x-for="(source, index) of monster.sources">
-                                                    <span x-tooltip="source.fullText"
-															x-html="
-                                                        `<span class='underline decoration-dotted cursor-help underline-offset-2 decoration-gray-400 dark:decoration-gray-500'>${source.reference.shortname}</span>`
-                                                        + (index < monster.sources.length-1 ? ', ' : '')
-                                                    "></span>
-                                                </template>
-											</dd>
-											<dt class="sr-only sm:hidden">Type</dt>
-											<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.type"></dd>
-										</dl>
-									</td>
-									<td class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300 table-cell w-32 max-w-32 truncate">
-										<span class="truncate" x-text="monster.size"></span>
-										<dl class="font-normal">
-											<dt class="sr-only sm:hidden">CR</dt>
-											<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 sm:hidden">CR <span x-text="monster.cr.string" :class="{
-												'text-indigo-300 dark:text-indigo-600': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Trivial',
-												'text-green-300 dark:text-green-600': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Easy',
-												'text-yellow-300 dark:text-yellow-600': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Medium',
-												'text-amber-300 dark:text-orange-600': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Hard',
-												'text-rose-300 dark:text-rose-600': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Deadly'
-											}"></span></dd>
-											<dt class="sr-only sm:hidden">Alignment</dt>
-											<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.alignment.string"></dd>
-										</dl>
-									</td>
-									<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 sm:table-cell w-32">
-										<span :class="{
-												'text-cyan-600 dark:text-cyan-400': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Trivial',
-												'text-green-600 dark:text-green-400': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Easy',
-												'text-yellow-600 dark:text-yellow-400': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Medium',
-												'text-amber-600 dark:text-orange-400': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Hard',
-												'text-rose-600 dark:text-rose-500': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Deadly'
-											}">
-											<span x-text="monster.cr.string"></span>
-											<span x-text="'(' + encounter.getDifficultyFromExperience(monster.cr.exp) + ')'" class="text-xs"></span>
-										</span>
-									</td>
-									<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.type"></td>
-									<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.alignment.string"></td>
-								</tr>
-							</template>
-							</tbody>
-						</table>
-					</div>
-
-					<div x-show="enabledSources.length === 0" class="w-full text-center text-lg my-4">No sources are enabled - <span class="primary-link select-none cursor-pointer" @click="showSourcesModal = true">enable some now</span></div>
-					<div x-show="enabledSources.length > 0 && filteredMonsters.length === 0" class="w-full text-center text-lg my-4" x-cloak>No monsters found with the current filter - <span class="primary-link select-none cursor-pointer" @click="$dispatch('reset-filters')">reset filters</span></div>
-
-					<!-- This example requires Tailwind CSS v2.0+ -->
-					<nav x-show="totalPages > 1" x-cloak class="border-t border-gray-300 mt-4 dark:border-gray-700 px-4 flex items-center justify-between sm:px-0">
-						<div class="-mt-px w-0 flex-1 flex">
-							<a @click="setPageNumber(currentPage-1)" :disabled="currentPage === 1" href="#" class="border-t-2 border-transparent pt-4 px-2 lg:pr-1 lg:pl-0 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-400 hover:border-gray-400">
-								<!-- Heroicon name: solid/arrow-narrow-left -->
-								<svg class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-									<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
-								</svg>
-								<span class="hidden lg:inline">Previous</span>
-							</a>
-						</div>
-						<div class="hidden md:-mt-px md:flex">
-							<template x-for="page of pagination">
-								<span :class="{
-									'cursor-pointer select-none border-emerald-600 text-emerald-600 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium': page.active && !page.divider,
-									'cursor-pointer select-none border-transparent text-gray-500 hover:text-gray-400 hover:border-gray-400 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium hidden lg:inline-block first-of-type:inline-block last-of-type:inline-block': !page.active && !page.divider,
-									'select-none border-transparent text-gray-500 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium': page.divider,
-								}" x-text="page.divider ? '...' : page.number" @click="setPage(page)" :key="page.number"></span>
-							</template>
-						</div>
-						<div class="-mt-px w-0 flex-1 flex justify-end">
-							<a href="#" @click="setPageNumber(currentPage+1)" class="border-t-2 border-transparent pt-4 px-2 lg:pr-1 lg:pl-0 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-400 hover:border-gray-400">
-								<span class="hidden lg:inline">Next</span>
-								<!-- Heroicon name: solid/arrow-narrow-right -->
-								<svg class="ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-									<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
-								</svg>
-							</a>
-						</div>
-					</nav>
-				</div>
-			</div>
-
-			<div id="encounter_box" :class="{ 'hidden md:flex': mobileEncounterTab }" class="hidden md:absolute md:inset-y-0 md:py-8 md:left-4 md:pr-4 md:pl-4 pb-8 md:flex w-full px-8 2xl:pr-4 flex-col flex-shrink-0 md:w-[28rem] overflow-y-auto scrollbar">
-				<div class="grid grid-cols-3 md:pr-2 md:grid-cols-5 pb-4 flex-col w-full">
-
-					<div class="col-span-3 space-y-2">
-						<div class="flex justify-between items-end">
-							<div class="mb-1 text-gray-600 dark:text-gray-400">
-								Party
-							</div>
-
-							<a class="primary-link text-sm" @click="showPartyModal = true" href="javascript:">
-								Manage
-							</a>
-						</div>
-
-						<div class="grid grid-cols-[1fr_34px] gap-y-2 align-center mb-2" x-show="activePlayers.length">
-
-						    <template x-for="party in savedParties">
-                                    <template x-for="player in party.players.filter(player => player.active)">
-                                    <div class="contents">
-                                        <div x-text="player.name"></div>
-
-                                        <button @click="player.active = false" type="button" class="button-danger-outline-md inline-flex justify-center !py-0">
-                                            <i class="fas fa-times"></i>
-                                        </button>
-                                    </div>
-                                    </template>
-						    </template>
-
-						</div>
-
-						<div x-show="party.groups.length" class="w-full grid grid-rows-[18px_1fr] grid-cols-[1fr_40px_1fr_50px_36px] gap-y-2 align-center mb-2" x-show="party.totalPlayers">
-							<label class="col-span-2 text-sm text-gray-700 dark:text-gray-300">Players</label>
-							<label class="text-sm text-gray-700 dark:text-gray-300">Level</label>
-							<label class="text-center text-sm text-gray-700 dark:text-gray-300" x-tippy="Determines whether these characters get a share of XP from the encounter.">XP</label>
-							<div>&nbsp;</div>
-
-
-						    <template x-for="(group, index) in party.groups">
-								<div class="contents">
-									<input type="number" min="1" :value="group.players" @change="group.players = Math.max(1, $event.target.value)" class="border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 block w-full p-1.5 pr-0 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600 rounded-md" value="4">
-
-									<div class="text-center grid place-items-center text-gray-600 dark:text-gray-400 scale-150 md:transform-none">
-										<i class="fa fa-times"></i>
-									</div>
-
-									<input type="number" min="1" max="20" :value="group.level" @change="group.level = Math.max(1, Math.min(20, $event.target.value))" class="border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 block w-full p-1.5 pr-0 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600 rounded-md" value="4">
-
-									<div class="flex items-center justify-center scale-150 md:transform-none">
-										<input type="checkbox" x-model="group.getsXP" class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 disabled:opacity-70 border-gray-300 rounded">
-									</div>
-
-									<button @click="party.removePlayerGroup(index)" type="button" class="button-danger-outline-md justify-center">
-										<i class="fas fa-times"></i>
-									</button>
-								</div>
-						    </template>
-
-						</div>
-
-						<div class="w-full">
-							<button @click="party.addPlayerGroup()" type="button" class="button-primary-outline-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
-								<span>
-									<i class="fas fa-plus mr-2"></i> Add Generic Group
-								</span>
-							</button>
-						</div>
-
-						<div class="w-full" x-show="!(activePlayers.length || party.groups.length)">
-							<button @click="enablePartyModal" type="button" class="button-primary-outline-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
-								<span>
-									<i class="fas fa-plus mr-2"></i> Use Detailed Party
-								</span>
-							</button>
-						</div>
-					</div>
-
-					<div class="hidden md:block col-span-2">
-						<div class="grid text-sm text-right">
-							<div class="hidden md:block mb-1 col-span-2 text-gray-600 text-base dark:text-gray-400">XP Goals</div>
-							<div :class="{ 'font-semibold': encounter.actualDifficulty === 'Easy'}">Easy</div><div :class="{ 'font-semibold': encounter.actualDifficulty === 'Easy'}" x-text="formatNumber(party.experience['easy'])"></div>
-							<div :class="{ 'font-semibold': encounter.actualDifficulty === 'Medium'}">Medium</div><div :class="{ 'font-semibold': encounter.actualDifficulty === 'Medium'}" x-text="formatNumber(party.experience['medium'])"></div>
-							<div :class="{ 'font-semibold': encounter.actualDifficulty === 'Hard'}">Hard</div><div :class="{ 'font-semibold': encounter.actualDifficulty === 'Hard'}" x-text="formatNumber(party.experience['hard'])"></div>
-							<div :class="{ 'font-semibold': encounter.actualDifficulty === 'Deadly'}">Deadly</div><div :class="{ 'font-semibold': encounter.actualDifficulty === 'Deadly'}" x-text="formatNumber(party.experience['deadly'])"></div>
-
-							<div class="mt-4">Daily budget</div>
-							<div class="mt-4" x-text="formatNumber(party.experience.daily)"></div>
-						</div>
-					</div>
-
-					<div class="md:hidden col-span-3 pt-4" x-show="party.experience.daily">
-						<div class="mb-1 col-span-2 text-gray-600 text-base dark:text-gray-400">XP Goal</div>
-						<div class="flex justify-between">
-							<div>
-								Daily budget <span x-text="formatNumber(party.experience.daily)"></span>
-							</div>
-							<div>
-								<span class="font-semibold" x-show="['Easy', 'Medium', 'Hard', 'Deadly'].includes(encounter.actualDifficulty)" x-text="encounter.actualDifficulty + ' ' + formatNumber(party.experience[encounter.actualDifficulty.toLowerCase()])"></span>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="border-t border-gray-200 dark:border-gray-700">
-					<div class="flex pt-4 justify-between items-center mb-1">
-						<span class="text-gray-600 dark:text-gray-400">Encounter</span>
-
-						<a href="javascript:" class="primary-link text-sm" @click="showEncounterModal = true">History</a>
-					</div>
-
-					<div class="flex flex-col sm:flex-row pb-4 w-full space-x-2 items-end justify-between pb-4">
-						<div class="grid gap-2 w-full place-items-end sm:grid-cols-8 grow">
-							<div class="w-full col-span-1 sm:col-span-3">
-								<label id="difficulty-label" class="sr-only"> Difficulty </label>
-								<div class="mt-1 relative" @click.outside="difficultySelectOpen = false">
-									<button @click="difficultySelectOpen = true" type="button" class="bg-white dark:bg-gray-700 relative w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
-										<span class="block truncate" x-text="(difficulty.slice(0,1).toUpperCase() + difficulty.slice(1))"></span>
-										<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-										<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-										  <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
-										</svg>
-									  </span>
-									</button>
-
-									<ul x-show="difficultySelectOpen" class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-700 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="listbox-label"
-										x-transition:enter=""
-										x-transition:enter-start=""
-										x-transition:enter-end=""
-										x-transition:leave="transition ease-in duration-100"
-										x-transition:leave-start="opacity-100"
-										x-transition:leave-end="opacity-0"
-									>
-										<template x-for="option of ['easy', 'medium', 'hard', 'deadly']">
-											<li @click="difficulty = option; difficultySelectOpen = false;" :class="{ 'text-white bg-emerald-600': difficulty === option, 'text-gray-900 dark:text-gray-300': difficulty !== option }" class="group text-gray-900 hover:text-white hover:bg-emerald-600 cursor-default select-none relative py-2 pl-3 pr-9" role="option">
-												<span class="group-hover:text-white font-normal block truncate" x-html="(option.slice(0,1).toUpperCase() + option.slice(1))"> </span>
-												<span :class="{ 'text-gray-200': difficulty === option, 'text-gray-600 dark:text-gray-400': difficulty !== option }" class="text-xs group-hover:text-gray-200" x-text="formatNumber(party.experience[option]) + 'xp'"></span>
-
-												<span x-show="difficulty === option" :class="{ 'text-white': difficulty === option, 'text-emerald-600': difficulty !== option }" class="absolute inset-y-0 right-0 flex items-center pr-4">
-												  <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-													<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-												  </svg>
-											</span>
-											</li>
-										</template>
-									</ul>
-								</div>
-							</div>
-
-							<div class="w-full col-span-1 sm:col-span-5">
-								<label id="composition-label" class="sr-only"> Composition </label>
-								<div class="mt-1 relative" @click.outside="encounterTypeSelectOpen = false">
-									<button @click="encounterTypeSelectOpen = true" type="button" class="bg-white dark:bg-gray-700 relative w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="composition-label">
-										<span class="block truncate" x-text="encounterTypes[encounterType].label"></span>
-										<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-										<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-										  <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
-										</svg>
-									  </span>
-									</button>
-
-									<ul x-show="encounterTypeSelectOpen" class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-700 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="composition-label"
-										x-transition:enter=""
-										x-transition:enter-start=""
-										x-transition:enter-end=""
-										x-transition:leave="transition ease-in duration-100"
-										x-transition:leave-start="opacity-100"
-										x-transition:leave-end="opacity-0"
-									>
-										<template x-for="type of Object.values(encounterTypes)">
-											<li @click="encounterType = type.key; encounterTypeSelectOpen = false;" :class="{ 'text-white bg-emerald-600': encounterType === type.key, 'text-gray-900 dark:text-gray-300': encounterType !== type.key }" class="text-gray-900 hover:text-white hover:bg-emerald-600 cursor-default select-none relative py-2 pl-3 pr-9" role="option">
-												<span class="font-normal block truncate" x-text="type.label"> </span>
-
-												<span :class="{ 'text-white': encounterType === type.key, 'text-emerald-600': encounterType !== type.key }" class="absolute inset-y-0 right-0 flex items-center pr-4">
-											  <svg x-show="encounterType === type.key" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-												<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-											  </svg>
-											</span>
-											</li>
-										</template>
-									</ul>
-								</div>
-							</div>
-						</div>
-
-						<div class="w-full md:w-auto shrink mt-3 md:mt-0" :class="{ 'hidden md:block': !encounter.groups.length }">
-							<button @click="encounter.generateRandom()" class="button-primary-md w-full md:w-auto">
-								<span class="md:hidden w-full text-center">
-									Generate
-								</span>
-								<span class="hidden md:inline">
-									<i class="fa fa-refresh"></i>
-								</span>
-							</button>
-						</div>
-					</div>
-				</div>
-
-				<div class="border-t border-gray-200 dark:border-gray-700 pt-4" x-show="encounter.groups.length">
-					<template x-for="(group, index) in encounter.groups" :key="group.monster.slug">
-						<div class="flex flex-row w-full mb-4 relative">
-							<div class="grow pb-2 min-w-0">
-								<div class="grid grid-cols-[1fr_20px] mb-2">
-									<span x-tooltip="group.monster.name" data-tippy-placement="top-start" data-tippy-delay="1000" class="text-lg pr-3 font-semibold max-w-full overflow-ellipsis truncate" x-text="group.monster.name"></span>
-									<div x-tippy="Shuffle monster" @click="encounter.getNewMonster(group)" class="grid place-items-center text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200 cursor-pointer"><i class="fas fa-random"></i></div>
-								</div>
-
-								<div>
-									<span class="text-base" x-text="'CR: ' + group.monster.cr.string"></span>
-									<span class="text-base ml-4" x-text="'XP: ' + formatNumber(group.monster.cr.exp)"></span>
-									<div class='overflow-hidden whitespace-nowrap overflow-ellipsis pr-40'>
-										<ul class="list-none text-s italic max-w-full">
-											<template x-for="source in group.monster.sources">
-												<li class="max-w-full truncate" x-tooltip="source.fullText" data-tippy-delay="1000" x-html="source.reference.link ? `<a class='primary-link' href='${source.reference.link}' target='_blank'>${source.fullText}</a>` : source.fullText"></li>
-											</template>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="absolute bottom-3 right-0 flex shrink-0 items-center">
-								<div class="flex rounded-md shadow-sm">
-									<button @click="encounter.addCount(index)" class="inline-flex items-center px-2 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-600 dark:text-gray-300 bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-500 sm:text-sm">
-										<i class="fa fa-plus w-5"></i>
-									</button>
-									<label for="monster-number"></label>
-									<input id="monster-number" type="number" min="1" class="flex-1 min-w-0 block w-16 px-3 py-2 rounded-none dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300" :value="group.count" @change="group.count = Math.max(0, $event.target.value)">
-									<button @click="encounter.subtractCount(index)" :class="{ 'border-gray-300 dark:border-gray-600 dark:text-gray-300 bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-500': group.count > 1, 'border-red-200 dark:border-red-700 dark:text-red-300 bg-red-50 hover:bg-red-100 dark:bg-red-800 dark:hover:bg-red-700 text-red-500': group.count === 1 }" class="inline-flex items-center px-2 rounded-r-md border border-l-0 sm:text-sm">
-										<i :class="{ 'fa-minus': group.count > 1, 'fa-times': group.count === 1 }" class="fa w-5"></i>
-									</button>
-								</div>
-							</div>
-						</div>
-					</template>
-
-					<div x-show="encounter.groups.length" class="-mt-2 text-center pb-4">
-						<a @click="encounter.clear()" class="select-none text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" href="javascript:"><i class="fa fa-times"></i> Clear encounter</a>
-					</div>
-				</div>
-
-				<div x-show="!encounter.groups.length" class="pb-4">
-					<button @click="encounter.generateRandom()" type="button" class="relative block w-full border-2 border-gray-300 dark:border-gray-700 dark:hover:border-gray-600 border-dashed rounded-lg p-6 md:p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
-						<i class="fa-solid fa-wand-sparkles text-2xl h-12 w-12 mx-auto text-gray-400 dark:text-gray-300"></i>
-						<span class="mt-2 block text-sm font-medium text-gray-900 dark:text-gray-200"> Generate an encounter </span>
-					</button>
-				</div>
-
-				<div class="border-t border-gray-200 dark:border-gray-700">
-					<dl class="space-y-1 divide-y divide-dashed divide-gray-400 dark:divide-gray-700">
-						<div class="flex items-center justify-between">
-							<dt class="mt-1 text-sm text-gray-600 dark:text-gray-200">
-								<span class="block">Difficulty</span>
-							</dt>
-							<dd class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-300 text-right">
-								<span class="block" x-text="encounter.actualDifficulty"></span>
-								<span class="block text-gray-500 dark:text-gray-400 text-sm" x-show="encounter.difficultyFeel && encounter.actualDifficulty.toLowerCase() !== encounter.difficultyFeel.toLowerCase()" x-text="'Feels '+encounter.difficultyFeel"></span>
-							</dd>
-						</div>
-
-						<div class="flex items-center justify-between">
-							<dt class="mt-1 text-sm text-gray-600 dark:text-gray-200">Total XP</dt>
-							<dd class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-300" x-text="encounter.totalExp > 0 ? formatNumber(encounter.totalExp) + ' (' + formatNumber(Math.round(encounter.totalExp / party.totalPlayersToGainXP)) + '/player)' : 'N/A'"></dd>
-						</div>
-
-						<div class="flex items-center justify-between">
-							<dt class="mt-1 text-sm text-gray-600 dark:text-gray-200">Adjusted XP</dt>
-							<dd class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-300" x-text="encounter.adjustedExp > 0 ? formatNumber(encounter.adjustedExp) + ' (' + formatNumber(Math.round(encounter.adjustedExp / party.totalPlayersToGainXP)) + '/player)' : 'N/A'"></dd>
-						</div>
-					</dl>
-
-					<div class="mt-4 flex space-x-2">
-						<button :disabled="!encounter.groups.length" class="grow text-center button-primary-md" @click="sendToImprovedInitiative">
-							<span class="inline-flex justify-center w-full">
-								<img class="mr-2 fill-white" style="height:20px;" src="images/improved-initiative-logo.svg" alt="II"/> Send to Improved Initiative
-							</span>
-						</button>
-
-						<button  :disabled="!encounter.groups.length" class="button-primary-md shrink-0" @click="encounter.save()">
-							<i class="fa fa-save"></i>
-						</button>
-					</div>
-				</div>
-			</div>
-
-			<div class="fixed 2xl:static 2xl:pointer-events-none inset-0 z-50 2xl:z-0 overflow-hidden" aria-labelledby="slide-over-title" role="dialog" aria-modal="true" x-show="showFilters" x-cloak>
-				<div class="absolute 2xl:static inset-0 overflow-hidden">
-					<!-- Background overlay, show/hide based on slide-over state. -->
-					<div @click="showFilters = false" class="absolute 2xl:hidden inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity 2xl:duration-0" aria-hidden="true"
-						 x-transition:enter="ease-in-out duration-200"
-						 x-transition:enter-start="opacity-0 2xl:opacity-100"
-						 x-transition:enter-end="opacity-100"
-						 x-transition:leave="ease-in-out duration-200"
-						 x-transition:leave-start="opacity-100"
-						 x-transition:leave-end="opacity-0 2xl:opacity-100"
-						 x-show="showFilters"
-					></div>
-
-					<div class="pointer-events-none fixed 2xl:static inset-y-0 right-0 flex max-w-full pl-10">
-						<div class="pointer-events-auto w-screen max-w-md 2xl:!duration-[0ms] sm:duration-700"
-							 x-transition:enter="transform transition ease-in-out duration-200"
-							 x-transition:enter-start="translate-x-full"
-							 x-transition:enter-end="translate-x-0"
-							 x-transition:leave="transform transition ease-in-out duration-200"
-							 x-transition:leave-start="translate-x-0"
-							 x-transition:leave-end="translate-x-full"
-							 x-show="showFilters"
-						>
-							<div class="relative 2xl:static flex max-h-screen h-full flex-col overflow-y-hidden bg-white dark:bg-gray-800 shadow-xl">
-								<div class="px-4 sm:px-6 border-b dark:border-gray-700 py-6 2xl:hidden">
-									<div class="flex items-start justify-between">
-										<h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-title">Filter monsters</h2>
-										<div class="ml-3 flex h-7 items-center">
-											<button @click="showFilters = false" type="button" class="rounded-md bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-500 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2">
-												<span class="sr-only">Close panel</span>
-												<!-- Heroicon name: outline/x -->
-												<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-												</svg>
-											</button>
-										</div>
-									</div>
-								</div>
-								<div class="flex h-full flex-col relative 2xl:absolute 2xl:inset-y-0 2xl:w-[24rem] 2xl:right-0 2xl:py-8 flex-1 px-4 py-6 sm:px-6 space-y-4 overflow-y-auto scrollbar">
-									<div class="flex">
-										<button @click="showSourcesModal = true" class="button-primary-md w-full">
-											<span class="w-full text-center">Manage sources</span>
-										</button>
-
-										<button :disabled="!nonDefaultFiltersCount" @click="$dispatch('reset-filters')" class="w-full button-primary-outline-md disabled:opacity-70 disabled:bg-slate-200 disabled:hover:bg-slate-200 disabled:dark:bg-slate-700 disabled:dark:hover:bg-slate-700 disabled:hover:text-emerald-700 disabled:dark:hover:text-emerald-600 grid place-items-center text-center hidden 2xl:block ml-2">
-											<span class="inline-block w-full"><i class="fa fa-undo pr-1"></i> Reset Filters</span>
-										</button>
-									</div>
-
-									<div x-data="{ minCr: 0, maxCr: 0 }">
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">
-											Challenge Rating
-										</div>
-
-										<div class="relative px-6 pt-1 pb-2 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 rounded-md" x-data="{
-											crValues: [
-														{ value: '0', label: '0' },
-														{ value: '1/8', label: '1/8' },
-														{ value: '1/4', label: '1/4' },
-														{ value: '1/2', label: '1/2' },
-														{ value: '1', label: '1' },
-														{ value: '2', label: '2' },
-														{ value: '3', label: '3' },
-														{ value: '4', label: '4' },
-														{ value: '5', label: '5' },
-														{ value: '6', label: '6' },
-														{ value: '7', label: '7' },
-														{ value: '8', label: '8' },
-														{ value: '9', label: '9' },
-														{ value: '10', label: '10' },
-														{ value: '11', label: '11' },
-														{ value: '12', label: '12' },
-														{ value: '13', label: '13' },
-														{ value: '14', label: '14' },
-														{ value: '15', label: '15' },
-														{ value: '16', label: '16' },
-														{ value: '17', label: '17' },
-														{ value: '18', label: '18' },
-														{ value: '19', label: '19' },
-														{ value: '20', label: '20' },
-														{ value: '21', label: '21' },
-														{ value: '22', label: '22' },
-														{ value: '23', label: '23' },
-														{ value: '24', label: '24' },
-														{ value: '25', label: '25' },
-														{ value: '26', label: '26' },
-														{ value: '27', label: '27' },
-														{ value: '28', label: '28' },
-														{ value: '29', label: '29' },
-														{ value: '30', label: '30' }
-													]
-										}">
-
-											<div x-ref="cr_slider" class="my-4 mx-2" x-data="multiSlider($el, 'challenge_rating', crValues, (lower, upper) => {
-														minCr = lower;
-														maxCr = upper;
-													})"
-												 @set-cr-slider.window="set($event)"
-												 @reset-cr-slider.window="reset()"
-												 @reset-filters.window="reset()"
-											></div>
-
-											<div class="flex justify-between items-center">
-												<div class="grow">
-													<select class="w-full border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 block w-full py-1.5 pl-2.5 pr-0 sm:text-sm disabled:text-gray-600 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600 rounded-md"
-															x-ref="min_cr_select"
-															name="min_cr"
-															id="min_cr_select"
-															@filters-changed.window="$el.value = minCr.value"
-															@change="$dispatch('set-cr-slider', [{ value: $event.target.value, label: $event.target.value }, maxCr]);"
-													>
-														<template x-for="option in crValues">
-															<option :value="option.value" x-text="option.label" :disabled="parseInt(option.value) > parseInt(maxCr.value)"></option>
-														</template>
-													</select>
-												</div>
-												<div class="grow text-center text-gray-500 dark:text-gray-400 user-select-none">&le; CR &le;</div>
-												<div class="grow">
-													<select class="w-full border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 block w-full py-1.5 pl-2.5 pr-0 sm:text-sm disabled:text-gray-600 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600 rounded-md"
-															x-ref="max_cr_select"
-															name="max_cr"
-															id="max_cr_select"
-															@filters-changed.window="$el.value = maxCr.value"
-															@change="$dispatch('set-cr-slider', [minCr, { value: $event.target.value, label: $event.target.value }]);"
-													>
-														<template x-for="option in crValues">
-															<option :value="option.value" x-text="option.label" :disabled="parseInt(option.value) < parseInt(minCr.value)"></option>
-														</template>
-													</select>
-												</div>
-											</div>
-
-											<span @click="$dispatch('reset-cr-slider')" x-show="!(minCr.value == 0 && maxCr.value == 30)" class="absolute top-1 right-1 text-center cursor-pointer">
-												<i class="fa fa-undo text-sm h-6 w-6 text-gray-800 dark:text-gray-300"></i>
-											</span>
-										</div>
-									</div>
-
-
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">
-											Alignment
-										</div>
-
-										<div class="grid grid-cols-[12px_12px_repeat(12,_minmax(0,_1fr))] divide divide-gray-200 dark:divide-gray-600 gap-2 rounded-md bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 overflow-hidden p-2" x-data="{
-												lawful_good: 1,
-												neutral_good: 2,
-												chaotic_good: 4,
-												lawful_neutral: 8,
-												neutral: 16,
-												chaotic_neutral: 32,
-												lawful_evil: 64,
-												neutral_evil: 128,
-												chaotic_evil: 256,
-												total: $persist(1023).as('alignment'),
-												randomIconIndex: 0,
-												icons: [
-														'fa-solid fa-dumpster-fire',
-														'fa-solid fa-poo-storm',
-														'fa-solid fa-meteor',
-														'fa-solid fa-arrows-split-up-and-left',
-														'fa-solid fa-arrows-turn-to-dots',
-														'fa-solid fa-candy-cane',
-														'fa-solid fa-stroopwafel',
-														'fa-solid fa-cake-candles',
-														'fa-solid fa-bowling-ball',
-														'fa-solid fa-bath',
-														'fa-solid fa-bomb',
-														'fa-solid fa-business-time',
-														'fa-solid fa-dragon',
-														'fa-solid fa-arrow-up-right-dots',
-														'fa-solid fa-fire',
-														'fa-solid fa-arrows-to-circle',
-														'fa-solid fa-cloud-meatball',
-														'fa-solid fa-arrows-down-to-people',
-														'fa-solid fa-person-walking-arrow-loop-left',
-														'fa-solid fa-person-walking-dashed-line-arrow-right',
-													],
-												init() {
-													this.$watch('total', (total) => {
-														let newIndex = Math.floor(Math.random() * this.icons.length);
-														this.randomIconIndex = (newIndex === this.randomIconIndex) ? (newIndex + 1) % this.icons.length : newIndex;
-														this.onFiltersChanged();
-													});
-													this.onFiltersChanged();
-												},
-												onFiltersChanged() {
-													window.dispatchEvent(new CustomEvent('filters-changed', { detail: { name: 'alignment', value: this.total }}));
-												},
-												get randomIcon() {
-													return this.icons[this.randomIconIndex];
-												},
-												toggle(value) {
-													this.total = ((this.total & value) > 0) ? ((this.total | value) ^ value) : (this.total | value);
-												},
-												classes(value) {
-													return {
-														'bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900 text-white': this.total & value,
-														'bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border text-gray-700 dark:text-white': !(this.total & value),
-														'cursor-pointer grid place-items-center text-center select-none text-white': true,
-													};
-												},
-												reset(){
-													this.total = 1023;
-												}
-											}" @reset-filters.window="reset()">
-											<div @click="toggle((lawful_good | neutral | chaotic_evil))" :class="classes(lawful_good | neutral | chaotic_evil)" class="col-span-2 rounded-tl-md dark:border-gray-600"></div>
-											<div @click="toggle((lawful_good | lawful_neutral | lawful_evil))" :class="classes(lawful_good | lawful_neutral | lawful_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-gavel"></i></div>
-											<div @click="toggle((neutral_good | neutral | neutral_evil))" :class="classes(neutral_good | neutral | neutral_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-scale-balanced"></i></div>
-											<div @click="toggle((chaotic_good | chaotic_neutral | chaotic_evil))" :class="classes(chaotic_good | chaotic_neutral | chaotic_evil)" class="col-span-4 h-8 rounded-t-md"><i :class="{ [randomIcon]: true }"></i></div>
-
-											<div @click="toggle((lawful_good | neutral_good | chaotic_good))" :class="classes(lawful_good | neutral_good | chaotic_good)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-dove"></i></div>
-											<div @click="toggle(lawful_good)" :class="classes(lawful_good)" class="col-span-4 h-12" x-tippy="Lawful Good">LG</div>
-											<div @click="toggle(neutral_good)" :class="classes(neutral_good)" class="col-span-4 h-12" x-tippy="Neutral Good">NG</div>
-											<div @click="toggle(chaotic_good)" :class="classes(chaotic_good)" class="col-span-4 h-12" x-tippy="Chaotic Good">CG</div>
-
-											<div @click="toggle((lawful_neutral | neutral | chaotic_neutral))" :class="classes(lawful_neutral | neutral | chaotic_neutral)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-face-meh"></i></div>
-											<div @click="toggle(lawful_neutral)" :class="classes(lawful_neutral)" class="col-span-4 h-12" x-tippy="Lawful Neutral">LN</div>
-											<div @click="toggle(neutral)" :class="classes(neutral)" class="col-span-4 h-12" x-tippy="Neutral">N</div>
-											<div @click="toggle(chaotic_neutral)" :class="classes(chaotic_neutral)" class="col-span-4 h-12" x-tippy="Chaotic Neutral">CN</div>
-
-											<div @click="toggle((lawful_evil | neutral_evil | chaotic_evil))" :class="classes(lawful_evil | neutral_evil | chaotic_evil)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-skull"></i></div>
-											<div @click="toggle(lawful_evil)" :class="classes(lawful_evil)" class="col-span-4 h-12" x-tippy="Lawful Evil">LE</div>
-											<div @click="toggle(neutral_evil)" :class="classes(neutral_evil)" class="col-span-4 h-12" x-tippy="Neutral Evil">NE</div>
-											<div @click="toggle(chaotic_evil)" :class="classes(chaotic_evil)" class="col-span-4 h-12" x-tippy="Chaotic Evil">CE</div>
-
-											<div @click="toggle((lawful_evil | neutral | chaotic_good))" :class="classes(lawful_evil | neutral | chaotic_good)" class="col-span-2 rounded-bl-md"></div>
-											<div @click="total = (total === 1023) ? 0 : 1023" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 1023) === 1023, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 1023) !== 1023 }" class="select-none text-gray-900 col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Any</div>
-											<div @click="total = total ^ 512" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 512) === 512, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 512) !== 512 }" class="select-none text-gray-900 rounded-br-md col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Unaligned</div>
-										</div>
-									</div>
-
-
-									<!-- Multi Select -->
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Size category</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.sizes, 'size', [
-												{value: 'any', label: 'Any Size' },
-												{value: 'tiny', label: 'Tiny' },
-												{value: 'small', label: 'Small' },
-												{value: 'medium', label: 'Medium' },
-												{value: 'large', label: 'Large' },
-												{value: 'huge', label: 'Huge' },
-												{value: 'gargantuan', label: 'Gargantuan' }
-											])" @reset-filters.window="reset()">
-											<select x-ref="sizes" :multiple="multiple" class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
-
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Creature type</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.creature_type, 'type', [
-												{ value: 'any', label: 'Any Type' },
-												{ value: 'aberration', label: 'Aberration' },
-												{ value: 'beast', label: 'Beast' },
-												{ value: 'celestial', label: 'Celestial' },
-												{ value: 'construct', label: 'Construct' },
-												{ value: 'dragon', label: 'Dragon' },
-												{ value: 'elemental', label: 'Elemental' },
-												{ value: 'fey', label: 'Fey' },
-												{ value: 'fiend', label: 'Fiend' },
-												{ value: 'giant', label: 'Giant' },
-												{ value: 'humanoid', label: 'Humanoid' },
-												{ value: 'monstrosity', label: 'Monstrosity' },
-												{ value: 'ooze', label: 'Ooze' },
-												{ value: 'plant', label: 'Plant' },
-												{ value: 'undead', label: 'Undead' },
-											])" @reset-filters.window="reset()">
-											<select x-ref="creature_type" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
-
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Native environment</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.environment, 'environment', [])" @reset-filters.window="reset()" @set-environments.window="options = $event.detail; setUp();">
-											<select x-ref="environment" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
-
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Legendary Status</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.legendary, 'legendary', [
-												{ value: 'any', label: 'Any Legendary'},
-												{ value: 'ordinary', label: 'Ordinary'},
-												{ value: 'legendary', label: 'Legendary'},
-												{ value: 'legendary_lair', label: 'Legendary (in lair)'},
-											])" @reset-filters.window="reset()">
-											<select x-ref="legendary" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-
-		<!-- This example requires Tailwind CSS v2.0+ -->
-		<div x-show="showSourcesModal" class="fixed z-50 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
-			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-				<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
-					 x-show="showSourcesModal"
-					 x-transition:enter="ease-out duration-300"
-					 x-transition:enter-start="opacity-0"
-					 x-transition:enter-end="opacity-100"
-					 x-transition:leave="ease-in duration-200"
-					 x-transition:leave-start="opacity-100"
-					 x-transition:leave-end="opacity-0"
-				></div>
-
-				<!-- This element is to trick the browser into centering the modal contents. -->
-				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-				<div @mousedown.outside="showSourcesModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle max-w-full sm:max-w-xl md:max-w-2xl lg:max-w-4xl w-full"
-					 x-show="showSourcesModal"
-					 x-transition:enter="ease-out duration-300"
-					x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-					x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-					x-transition:leave="ease-in duration-200"
-					x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-					x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-				>
-					<div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-						<div class="sm:flex sm:items-start">
-							<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-emerald-100 dark:bg-emerald-600 sm:mx-0 sm:h-10 sm:w-10">
-								<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-600 dark:text-emerald-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-									<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
-								</svg>
-							</div>
-							<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">Select your sources</h3>
-								<div class="mt-2 max-h-96 overflow-y-auto px-1 scrollbar scrollbar-dark">
-
-									<template x-for="type of sourcesByType">
-										<div class="mb-4">
-											<h4 class="text-gray-700 dark:text-gray-300 leading-6 mb-2" x-text="type.title"></h4>
-
-											<div class="grid gap-2 grid-cols-6 md:grid-cols-12 w-full">
-												<template x-for="source of type.sources">
-													<div class="col-span-6 grid gap-2"
-														 :class="{
-														 	'grid-cols-[1fr_42px]': type.title === 'Custom' && !deleting,
-														 	'grid-cols-[42px_1fr_42px]': type.title === 'Custom' && deleting
-														 }"
-														 x-data="{ deleting: false }"
-														 @click.away="deleting = false"
-													>
-														<button class="text-left text-sm max-w-full truncate"
-																x-show="!deleting"
-																@click="source.enabled =! source.enabled; updateFilteredMonsters();"
-																:title="source.name"
-																:class="{
-																'button-primary-outline-md': !source.enabled,
-																'button-primary-md': source.enabled
-															}">
-															<i class="fa pr-1" :class="{
-																'fa-toggle-on': source.enabled,
-																'fa-toggle-off': !source.enabled
-															}"></i>
-															<span class="truncate" x-text="source.name"></span>
-														</button>
-
-														<button x-show="type.title === 'Custom' && !deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleting = true">
-															<i class="fa fa-trash"></i>
-														</button>
-
-														<button x-show="deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleteImportedSource(source.name)">
-															<i class="fa fa-check"></i>
-														</button>
-
-														<div x-show="deleting" class="border dark:border-gray-700 rounded-md inline-flex items-center px-4 py-2">
-															<i class="fa fa-exclamation-triangle pr-1 text-orange-500 dark:text-orange-700"></i>
-															Are you sure?
-														</div>
-
-														<button x-show="deleting" class="!px-0 w-[42px] justify-center button-primary-outline-md" @click="deleting = false">
-															<i class="fa fa-times"></i>
-														</button>
-													</div>
-												</template>
-											</div>
-										</div>
-									</template>
-
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-						<button @click="showSourcesModal = false" type="button" class="button-primary-md">Done</button>
-<!--						<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>-->
-					</div>
-				</div>
-			</div>
-		</div>
-
-        <!-- This example requires Tailwind CSS v2.0+ -->
-        <div x-show="showEncounterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
-            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-                <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
-                     x-show="showEncounterModal"
-                     x-transition:enter="ease-out duration-300"
-                     x-transition:enter-start="opacity-0"
-                     x-transition:enter-end="opacity-100"
-                     x-transition:leave="ease-in duration-200"
-                     x-transition:leave-start="opacity-100"
-                     x-transition:leave-end="opacity-0"
-                ></div>
-
-                <!-- This element is to trick the browser into centering the modal contents. -->
-                <span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-                <div @mousedown.outside="showEncounterModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
-                     x-show="showEncounterModal"
-                     x-transition:enter="ease-out duration-300"
-                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-                     x-transition:leave="ease-in duration-200"
-                     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-                     x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-					 x-data="{ tab: 'history' }"
-                >
-                    <div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
-                        <div class="sm:flex flex-col sm:items-start w-full">
-							<div class="w-full flex pb-3">
-								<div class="sm:hidden w-full">
-									<label for="tabs" class="sr-only">Select a tab</label>
-									<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
-									<select x-model="tab" id="tabs" name="tabs" class="text-center border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 block w-full p-1.5 pr-0 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600 rounded-md">
-										<option value="history" selected>Encounter History</option>
-
-										<option value="saved">Saved Encounters</option>
-									</select>
-								</div>
-								<div class="hidden w-full sm:block">
-									<div class="border-b-2 border-gray-200 dark:border-gray-700">
-										<nav class="-mb-[2px] justify-center flex space-x-8" aria-label="Tabs">
-											<!-- Current: "border-emerald-500 text-emerald-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
-											<a @click="tab = 'history'" href="javascript:" :class="{ 'border-emerald-500 text-emerald-600': tab === 'history', 'border-transparent text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-500 hover:text-gray-700 hover:border-gray-300': tab !== 'history' }" class="inline-block whitespace-nowrap py-4 px-1 border-b-2 font-medium">
-												<i class="fa fa-history pr-2"></i> Encounter History
-											</a>
-
-											<a @click="tab = 'saved'" href="javascript:" :class="{ 'border-emerald-500 text-emerald-600': tab === 'saved', 'border-transparent text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-500 hover:text-gray-700 hover:border-gray-300': tab !== 'saved' }" class="inline-block whitespace-nowrap py-4 px-1 border-b-2 font-medium">
-												<i class="fa fa-save pr-2"></i> Saved Encounters
-											</a>
-										</nav>
-									</div>
-								</div>
-							</div>
-
-							<div x-show="tab === 'saved'" class="my-3 sm:mt-0 w-full">
-								<div class="mt-2 max-h-96 overflow-y-auto scrollbar divide-y divide-gray-200 dark:divide-gray-700 text-gray-700 dark:text-gray-300">
-									<template x-for="(_, index) of savedEncounters">
-										<div @click="(loadedEncounterIndex !== savedEncounters.length-index-1) && encounter.loadFromSaved(savedEncounters.length-index-1)" class="flex px-2 py-4 dark:border-gray-700 w-100 relative"
-											 x-tooltip="savedEncounters[savedEncounters.length-index-1].map(group => `${group.monster.name} x${group.count}`).join(', ')"
-											 :key="index"
-											 :class="{ 'group hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': loadedEncounterIndex !== savedEncounters.length-index-1 }"
-										>
-											<div class="grow flex items-center mr-2 grow truncate overflow-ellipsis" :class="{ 'font-medium': loadedEncounterIndex === savedEncounters.length-index-1 }">
-                                                <span x-text="savedEncounters[savedEncounters.length-index-1] ? savedEncounters[savedEncounters.length-index-1].map(group => `${group.monster.name} x${group.count}`).join(', ') : ''"
-												></span>
-											</div>
-											<div class="shrink-0 grid grid-cols-[30px_1fr] place-items-center h-full absolute inset-y-0 right-0" type="button">
-												<div class="w-full h-full bg-gradient-to-l from-white dark:from-gray-800 group-hover:from-gray-50 dark:group-hover:from-gray-700 to-transparent"></div>
-												<div class="flex px-3 bg-white group-hover:bg-gray-50 dark:bg-gray-800 dark:group-hover:bg-gray-700 min-w-4 h-full text-right inset-y-0 right-0 space-x-2 absolute">
-													<div x-show="loadedEncounterIndex === savedEncounters.length-index-1" class="text-emerald-600 h-full flex items-center justify-center"><i class="fa fa-check-circle pr-1"></i> Loaded</div>
-                                                    <div x-show="loadedEncounterIndex !== savedEncounters.length-index-1" class="items-center h-full justify-center cursor-pointer select-none hidden group-hover:flex text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"><i class="pr-1 fas fa-upload"></i> Load</div>
-                                                    <div class="items-center justify-center h-full cursor-pointer select-none hidden group-hover:flex text-red-700 dark:text-red-400 hover:text-red-900 dark:hover:text-red-600" @click="encounter.deleteSaved(index)"><i class="pr-1 fas fa-times"></i> Delete</div>
-                                                </div>
-											</div>
-										</div>
-									</template>
-								</div>
-
-								<div x-show="!savedEncounters.length" type="button" class="relative block w-full border-2 border-gray-300 dark:border-gray-700 border-dashed rounded-lg p-12 text-center">
-									<span class="mt-2 block text-sm font-medium text-gray-900 dark:text-gray-200"> You have no encounters saved </span>
-								</div>
-							</div>
-
-                            <div x-show="tab === 'history'" class="my-3 sm:mt-0 w-full">
-                                <div class="mt-2 max-h-96 overflow-y-auto scrollbar divide-y divide-gray-200 dark:divide-gray-700 text-gray-700 dark:text-gray-300">
-                                    <template x-for="(_, index) of encounterHistory">
-                                        <div class="flex px-2 py-4 dark:border-gray-700 w-100 relative"
-											 x-tooltip="encounterHistory[encounterHistory.length-index-1].map(group => `${group.monster.name} x${group.count}`).join(', ')"
-											 :class="{ 'group hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': !(loadedEncounterIndex === null && index === 0 && encounter.groups.length) }"
-											 @click="!(loadedEncounterIndex === null && index === 0 && encounter.groups.length) && encounter.loadFromHistory(encounterHistory.length-index-1)"
-                                             :key="index"
-										>
-                                            <div class="grow flex flex-col justify-center mr-2 grow truncate overflow-ellipsis" :class="{ 'font-medium': loadedEncounterIndex === null && index === 0 && encounter.groups.length }">
-                                                <span x-text="encounterHistory[encounterHistory.length-index-1] ? encounterHistory[encounterHistory.length-index-1].map(group => `${group.monster.name} x${group.count}`).join(', ') : ''"
-												></span>
-                                            </div>
-                                            <div class="shrink-0 grid grid-cols-[30px_1fr] place-items-center h-full absolute inset-y-0 right-0" type="button">
-												<div class="w-full h-full bg-gradient-to-l from-white dark:from-gray-800 group-hover:from-gray-50 dark:group-hover:from-gray-700 to-transparent"></div>
-												<div class="px-3 bg-white group-hover:bg-gray-50 dark:bg-gray-800 dark:group-hover:bg-gray-700 min-w-4 h-full grid place-items-center">
-													<div class="hidden group-hover:block text-gray-900 dark:text-gray-100">Load <i class="fa fa-arrow-right"></i></div>
-													<div x-show="loadedEncounterIndex === null && index === 0 && encounter.groups.length" class="text-emerald-600"><i class="fa fa-check-circle"></i></div>
-												</div>
-											</div>
-                                        </div>
-                                    </template>
-                                </div>
-
-								<button x-show="!encounterHistory.length" @click="encounter.generateRandom(); showEncounterModal = false;" type="button" class="relative block w-full border-2 border-gray-300 dark:border-gray-700 dark:hover:border-gray-600 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
-									<i class="fa-solid fa-dice-d20 text-2xl h-12 w-12 mx-auto text-gray-400 dark:text-gray-300"></i>
-									<span class="mt-2 block text-sm font-medium text-gray-900 dark:text-gray-200"> Roll for history </span>
-								</button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
-                        <button @click="showEncounterModal = false" type="button" class="button-primary-md">Close</button>
-                        <button x-show="tab === 'history'" @click="encounterHistory = []" type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-emerald-700 dark:bg-emerald-100 dark:bg-transparent dark:text-emerald-500 dark:hover:bg-emerald-800 dark:hover:text-white hover:bg-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> <i class="fa fa-times mr-1"></i> Clear History </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-	<div x-show="showPartyModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
-		<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-			<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
-				 x-show="showPartyModal"
-				 x-transition:enter="ease-out duration-300"
-				 x-transition:enter-start="opacity-0"
-				 x-transition:enter-end="opacity-100"
-				 x-transition:leave="ease-in duration-200"
-				 x-transition:leave-start="opacity-100"
-				 x-transition:leave-end="opacity-0"
-			></div>
-
-			<!-- This element is to trick the browser into centering the modal contents. -->
-			<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-			<div @mousedown.outside="showPartyModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
-				 x-show="showPartyModal"
-				 x-transition:enter="ease-out duration-300"
-				 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-				 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-				 x-transition:leave="ease-in duration-200"
-				 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-				 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-			>
-				<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
-					<div class="sm:flex flex-col sm:items-start w-full">
-						<div class="w-full flex pb-3">
-							<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Manage your parties and players</h3>
-						</div>
-
-						<div class="my-3 sm:mt-0 w-full">
-							<div class="my-2 max-h-96 overflow-y-auto scrollbar overflow-x-hidden text-gray-700 dark:text-gray-300">
-								<div x-show="savedParties.length" class="bg-gray-50 dark:bg-gray-700 rounded shadow overflow-hidden border-b dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-800 ">
-									<template x-for="(party, partyIndex) of savedParties">
-
-										<div>
-											<div class="flex px-4 py-4 dark:border-gray-700 w-100 relative cursor-pointer group hover:bg-gray-100 dark:hover:bg-gray-600"
-												 :class="{ 'bg-gray-100 hover:bg-gray-50 dark:bg-gray-700': party.editing }"
-												 x-tooltip="party.name"
-												 :key="partyIndex"
-												 @click="party.editing =! party.editing"
-											>
-												<div class="grow flex flex-col justify-center mr-2 grow truncate overflow-ellipsis">
-													<span x-text="party.name"></span>
-												</div>
-												<div class="shrink-0 grid grid-cols-[30px_1fr] place-items-center h-full absolute inset-y-0 right-0">
-													<div class="w-full h-full bg-gradient-to-l from-gray-50 dark:from-gray-700 group-hover:from-gray-100 dark:group-hover:from-gray-600 to-transparent"></div>
-													<div class="px-3 bg-gray-50 group-hover:bg-gray-100 dark:bg-gray-700 dark:group-hover:bg-gray-600 min-w-4 h-full grid place-items-center">
-														<div @click.stop="activateParty(partyIndex)" x-show="!party.players.filter((player) => player.active).length" class="h-full hidden place-items-center group-hover:grid text-gray-900 dark:text-gray-100">
-															<div>Make all active <i class="fa fa-users"></i></div>
-														</div>
-														<div @click.stop="deactivateParty(partyIndex)" x-show="party.players.filter((player) => player.active).length" class="h-full hidden place-items-center group-hover:grid text-gray-900 dark:text-gray-100">
-															<div>Deactivate all <i class="fa fa-users-slash"></i></div>
-														</div>
-													</div>
-												</div>
-											</div>
-
-											<div x-show="party.editing" class="border-x border-gray-50 dark:border-gray-700 dark:bg-gray-800 flex flex-col gap-x-1 gap-y-2 px-6 py-3">
-												<div class="flex items-center">
-													<input x-model="party.name"
-														   type="text"
-														   class="!mb-0 py-0.5 text-xl"
-													>
-													<div class="w-[30px] ml-2 flex justify-center">
-														<i @click.stop="deleteParty(partyIndex)" x-tooltip="'Delete ' + party.name" class="fa fa-trash hover:text-red-400 dark:hover:text-red-600 cursor-pointer"></i>
-													</div>
-												</div>
-
-												<div class="text-gray-600 dark:text-gray-300 grid gap-2 grid-cols-[60px_1fr_1fr] md:grid-cols-[60px_1fr_50px_75px_150px_30px]">
-													<div>Active</div>
-													<div>Name<span class="md:hidden">/Init.</span></div>
-													<div>Level<span class="md:hidden">/HP</span></div>
-													<div class="hidden md:block md:order-6"></div>
-													<div class="hidden md:block">Initiative</div>
-													<div class="hidden md:block">HP</div>
-												</div>
-
-												<template x-for="(player, playerIndex) of party.players">
-													<div class="grid gap-2 grid-cols-[60px_1fr_1fr] md:grid-cols-[60px_1fr_50px_75px_150px_30px]">
-														<div class='order-1 flex justify-center md:justify-start'>
-															<input type="checkbox" class="hidden" x-model="player.active">
-
-															<button
-																	@click="player.active = !player.active"
-																	type="button"
-																	:class="{'bg-gray-200 dark:bg-gray-700': !player.active, 'bg-emerald-600': player.active}"
-																	class="bg-gray-200 dark:bg-gray-700 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"
-																	role="switch"
-																	aria-checked="false"
-																	aria-labelledby="availability-label"
-																	aria-describedby="availability-description"
-															>
-																<span aria-hidden="true" :class="{'translate-x-0': !player.active, 'translate-x-5': player.active}" class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
-															</button>
-														</div>
-
-
-														<div class="order-2">
-															<input type="text" :id="'name_'+playerIndex" x-model="player.name" class="px-1 py-1 !mb-0 block w-full sm:text-sm rounded-md dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300">
-														</div>
-														<div class="order-3">
-															<input type="number" :id="'level_'+playerIndex" x-model.number="player.level" class="px-1 py-1 block w-full sm:text-sm rounded-md dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300">
-														</div>
-
-														<div class="relative order-5 md:order-4 mb-2 md:mb-0">
-															<input type="number" :id="'initiativeMod_'+playerIndex" x-model.number="player.initiativeMod" class="pl-1 pr-8 py-1 block w-full sm:text-sm rounded-md dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300">
-															<div :class="{ 'text-emerald-600 hover:text-emerald-700 dark:text-emerald-600 dark:hover:text-emerald-700': player.initiativeAdvantage, 'text-gray-400 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-400': !player.initiativeAdvantage }" class="text-2xl text-center w-6 cursor-pointer select-none absolute inset-y-0 right-1 flex justify-center items-center" @click="player.initiativeAdvantage =! player.initiativeAdvantage" x-tippy="Advantage on Initiative">
-																<svg xmlns="http://www.w3.org/2000/svg" width="18.5" height="28" viewbox="0 0 173.20508075688772 200" style="fill: currentColor;"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path></svg>
-															</div>
-															<div class="pointer-events-none text-lg text-center text-white dark:text-gray-700 font-bold w-6 cursor-pointer select-none absolute inset-y-0 right-1 flex justify-center items-center">
-																A
-															</div>
-														</div>
-
-														<div class="order-6 md:order-5 justify-center md:justify-start flex -space-x-px mb-2 md:mb-0">
-															<div class="w-1/2 flex-1 min-w-0">
-																<input min="0" @change="if(player.currentHp > player.maxHp) { player.maxHp = player.currentHp }" @blur="if(player.currentHp > player.maxHp) { player.maxHp = player.currentHp }" type="number" x-model.number="player.currentHp" class="px-1 py-1 text-right border-r-0 relative block w-full rounded-none rounded-l-md sm:text-sm dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300"/>
-															</div>
-															<div class="grid place-items-center px-1 shrink rounded-none border border-y-1 bg-white dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300"> / </div>
-															<div class="flex-1 min-w-0">
-																<input min="1" type="number" x-model.number="player.maxHp" class="px-1 py-1 relative border-l-0 block w-full rounded-none rounded-r-md sm:text-sm dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300"/>
-															</div>
-														</div>
-
-														<div @click="deletePlayer(partyIndex, playerIndex)" class="order-4 md:order-6 group cursor-pointer grid place-items-center mb-2 md:mb-0">
-															<i class="fa fa-times text-red-500 dark:text-red-500 group-hover:text-red-600 dark:group-hover:text-red-700"></i>
-														</div>
-													</div>
-												</template>
-
-												<button @click="createPlayer(partyIndex)" type="button" class="button-primary-outline-md col-span-6 justify-center" :class="{ 'h-24': !party.players.length }"> Create player </button>
-												<button x-show="!party.players.length" @click="deleteParty(partyIndex)" type="button" class="button-danger-outline-md col-span-6 justify-center"> Delete Party </button>
-											</div>
-										</div>
-									</template>
-								</div>
-							</div>
-
-							<button x-show="!savedParties.length" @click="createParty" type="button" class="relative block w-full border-2 border-gray-300 dark:border-gray-700 dark:hover:border-gray-600 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
-								<i class="fa-solid fa-users text-2xl h-12 w-12 mx-auto text-gray-400 dark:text-gray-300"></i>
-								<span class="mt-2 block text-sm font-medium text-gray-900 dark:text-gray-200"> Create player party </span>
-							</button>
-						</div>
-					</div>
-				</div>
-
-				<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
-					<button @click="showPartyModal = false" type="button" class="button-primary-md">Close</button>
-					<button @click="createParty" type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-emerald-700 dark:bg-emerald-100 dark:bg-transparent dark:text-emerald-500 dark:hover:bg-emerald-800 dark:hover:text-white hover:bg-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> <i class="fa fa-plus mr-1"></i> Create party </button>
-				</div>
-			</div>
-		</div>
-	</div>
-
-		<div x-show="showKeyboardModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
-			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-				<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
-					 x-show="showKeyboardModal"
-					 x-transition:enter="ease-out duration-300"
-					 x-transition:enter-start="opacity-0"
-					 x-transition:enter-end="opacity-100"
-					 x-transition:leave="ease-in duration-200"
-					 x-transition:leave-start="opacity-100"
-					 x-transition:leave-end="opacity-0"
-				></div>
-
-				<!-- This element is to trick the browser into centering the modal contents. -->
-				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-				<div @mousedown.outside="showKeyboardModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
-					 x-show="showKeyboardModal"
-					 x-transition:enter="ease-out duration-300"
-					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-					 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-					 x-transition:leave="ease-in duration-200"
-					 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-					 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-				>
-					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
-						<div class="sm:flex flex-col sm:items-start w-full">
-							<div class="w-full flex pb-3">
-								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keyboard Shortcuts</h3>
-							</div>
-
-							<div class="my-3 sm:mt-0 w-full">
-								<div class="my-2 max-h-96 overflow-y-auto overflow-x-hidden text-gray-700 dark:text-gray-300">
-									<div class="grid grid-cols-2 gap-x-4 gap-y-2">
-										<template x-for="shortcut in keyboardHelp">
-											<div class="flex justify-between">
-												<kbd class="inline-flex items-center border border-gray-200 dark:border-gray-600 rounded px-2 text-sm font-sans font-medium text-gray-400" x-text="shortcut.key"></kbd>
-												<div x-text="shortcut.description"></div>
-											</div>
-										</template>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
-						<button @click="showKeyboardModal = false" type="button" class="button-primary-md">Close</button>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" x-cloak aria-modal="true" x-data="{
-            importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
-            importerSourceType: 'json-file',
-            importerHtml: '',
-            step: 1,
-            stagedMonsters: [],
-            stagedSources: [],
-            init(){
-                this.loadImporter();
-            },
-            loadImporter(){
-                this.importerHtml = '';
-                this.importerHtml = Importer.loadersHtml[this.importerSourceType]();
-            },
-            async startImport() {
-                const importResults = await Importer.import({
-                    type: this.importerSourceType,
-                    resourceLocator: this.importerResourceLocator
-                });
-
-                this.stagedMonsters = importResults.monsters;
-                this.stagedSources = importResults.sources;
-
-                this.step = 2;
-            },
-            finishImport() {
-                importedSources = importedSources.concat(this.stagedSources)
-                formatSources(this.stagedSources);
-                this.stagedSources = [];
-
-                importedMonsters = importedMonsters.concat(this.stagedMonsters)
-                formatMonsters(this.stagedMonsters);
-                this.stagedMonsters = [];
-
-                dispatchEvent(new CustomEvent('notification', {detail: {title: 'Import complete!', body: 'Your new source(s) have been imported'}}));
-
-                this.step = 1;
-                showImporterModal = false;
-            },
-            abortImport() {
-                this.loadImporter();
-                this.stagedSources = [];
-                this.stagedMonsters = [];
-                this.step = 1;
-            }
-        }">
-			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-				<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
-					 x-show="showImporterModal"
-					 x-transition:enter="ease-out duration-300"
-					 x-transition:enter-start="opacity-0"
-					 x-transition:enter-end="opacity-100"
-					 x-transition:leave="ease-in duration-200"
-					 x-transition:leave-start="opacity-100"
-					 x-transition:leave-end="opacity-0"
-				></div>
-
-				<!-- This element is to trick the browser into centering the modal contents. -->
-				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-				<div @mousedown.outside="showImporterModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-xl md:max-w-2xl lg:max-w-4xl w-full"
-					 x-show="showImporterModal"
-					 x-transition:enter="ease-out duration-300"
-					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-					 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-					 x-transition:leave="ease-in duration-200"
-					 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-					 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-				>
-					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
-						<div class="sm:flex flex-col sm:items-start w-full">
-							<div class="w-full flex pb-3">
-								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Import Custom Monsters</h3>
-							</div>
-
-							<div class="my-3 sm:mt-0 w-full" x-show="step === 1">
-								<label for="importer_source">Import from</label>
-								<select x-model="importerSourceType" @change="loadImporter" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
-									<optgroup label="More to come...">
-										<option value="google-sheets">Google Sheets</option>
-										<option value="json-raw">Raw JSON</option>
-										<option value="json-file">JSON File</option>
-									</optgroup>
-								</select>
-
-                                <div class="mb-4" x-html="importerHtml"></div>
-								<!--<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">-->
-                                <!--<textarea id="import_resource_locator" x-model="importerResourceLocator" cols="30" rows="10"></textarea>-->
-                                <!--<input id="import_resource_locator" type="file" accept="text/json, text/csv" @change="importerResourceLocator = $event.target.files[0]">-->
-
-								<button class="button-primary-md" @click="startImport">Import</button>
-							</div>
-
-							<div class="my-3 sm:mt-0 w-full" x-show="step === 2">
-								<div class="text-lg">New Sources</div>
-
-								<div class="px-4 sm:px-6 lg:px-8">
-									<div class="mt-2 flex flex-col">
-										<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
-											<div class="inline-block min-w-full py-2 align-middle">
-												<div class="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
-													<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
-														<thead class="bg-gray-50 dark:bg-gray-700">
-														<tr>
-															<th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none group whitespace-nowrap w-64">Name</th>
-															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none sm:table-cell group whitespace-nowrap w-32">Type</th>
-															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Short Name</th>
-															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Link</th>
-														</tr>
-														</thead>
-														<tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800">
-														<template x-for="source in stagedSources">
-															<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
-																<td class="whitespace-nowrap py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-200" x-text="source.name"></td>
-																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.type"></td>
-																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.shortname"></td>
-																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.link"></td>
-															</tr>
-														</template>
-														</tbody>
-													</table>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-
-								<div class="text-lg mt-4">New Monsters (Preview)</div>
-
-								<div class="px-4 sm:px-6 lg:px-8">
-									<div class="mt-2 flex flex-col">
-										<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
-											<div class="inline-block min-w-full py-2 align-middle">
-												<div class="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
-													<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
-														<thead class="bg-gray-50 dark:bg-gray-700">
-														<tr>
-															<th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none group whitespace-nowrap w-64">Name</th>
-															<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none table-cell group whitespace-nowrap w-32">Size</th>
-															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none sm:table-cell group whitespace-nowrap w-32">CR</th>
-															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Type</th>
-															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Alignment</th>
-														</tr>
-														</thead>
-														<tbody class="divide-y divide-gray-200 dark:divide-gray-600 bg-white dark:bg-gray-900">
-														<template x-for="monster in stagedMonsters.slice(0, 6)">
-															<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
-																<td class="w-full max-w-0 py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-100 w-64 max-w-64 truncate">
-																	<span class="truncate" x-text="monster.name"></span>
-																	<dl class="font-normal">
-																		<dt class="sr-only">Sources</dt>
-																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400" x-text="monster.sources"></dd>
-																		<dt class="sr-only sm:hidden">Type</dt>
-																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.type"></dd>
-																	</dl>
-																</td>
-																<td class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300 table-cell w-32 max-w-32 truncate">
-																	<span class="truncate" x-text="monster.size"></span>
-																	<dl class="font-normal">
-																		<dt class="sr-only sm:hidden">CR</dt>
-																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 sm:hidden">CR <span x-text="monster.cr"></span></dd>
-																		<dt class="sr-only sm:hidden">Alignment</dt>
-																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.alignment"></dd>
-																	</dl>
-																</td>
-																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 sm:table-cell w-32">
-																	<span x-text="monster.cr"></span>
-																</td>
-																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.type"></td>
-																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.alignment"></td>
-															</tr>
-														</template>
-
-														<tr x-show="stagedMonsters.length > 6" class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
-															<td colspan="5" class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300 table-cell text-center">
-																And <span x-text="stagedMonsters.length - 6"></span> more.
-															</td>
-														</tr>
-														</tbody>
-													</table>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-
-								<button class="float-left mt-4 button-danger-outline-md" @click="abortImport">Nope, go back!</button>
-								<button class="float-right mt-4 button-primary-md" @click="finishImport">Looks Good, Import Them!</button>
-							</div>
-						</div>
-					</div>
-
-					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between" x-show="step === 1">
-						<button @click="showImporterModal = false; if(step === 2){ abortImport() };" type="button" class="button-primary-md">Close</button>
-					</div>
-				</div>
-			</div>
-		</div>
-
-
-		<div aria-live="assertive" class="fixed inset-0 flex items-end z-50 px-4 py-6 pointer-events-none sm:p-6 sm:items-end" x-data="{ notifications: [], notification: function($event){ this.notifications.push($event.detail) } }" @notification.window="notification">
-		<div class="w-full flex flex-col items-center space-y-4 sm:items-end">
-			<template x-for="(notification, index) in notifications">
-				<div class="max-w-sm w-full relative bg-white dark:bg-gray-700 dark:shadow-xl shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
-					 x-data="{
-                            info: notification,
-                            show:false,
-                            init: function() {
-                                setTimeout(() => this.show = true, 100);
-                                if(!this.info.sticky) {
-                                    setTimeout(() => this.show = false, 3000);
-                                    setTimeout(() => delete notifications[index], 4000);
-                                }
-                            },
-                            remove: function() {
-                                this.show = false;
-                            }
-                         }"
-					 x-show="show"
-					 x-transition:enter="transform ease-out duration-300 transition"
-					 x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-					 x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
-					 x-transition:leave="transition ease-in duration-100"
-					 x-transition:leave-start="opacity-100"
-					 x-transition:leave-end="opacity-0">
-					<div class="p-4" :class="{ 'mb-2' : !info.sticky }">
-						<div class="flex items-start">
-							<div class="flex-shrink-0">
-								<i class="fa" :class="{
-                                'fa-check-circle': !info.icon,
-                                'text-emerald-400': !info.icon_color,
-                                [info.icon]: info.icon,
-                                [info.icon_color]: info.icon_color,
-                            }"></i>
-							</div>
-							<div class="ml-3 w-0 flex-1 pt-0.5">
-								<p class="text-sm font-medium text-gray-900 dark:text-gray-300" x-text="info.title"></p>
-								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400" x-show="info.body" x-html="info.body"></p>
-							</div>
-							<div class="ml-4 flex-shrink-0 flex">
-								<button class="bg-white dark:bg-gray-500 dark:text-gray-800 rounded-md inline-flex text-gray-400 dark:text-gray-800 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500" @click="remove">
-									<span class="sr-only">Close</span>
-									<!-- Heroicon name: solid/x -->
-									<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-										<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
-									</svg>
-								</button>
-							</div>
-						</div>
-					</div>
-
-					<div class="absolute inset-x-0 bottom-0 bg-gray-50 dark:bg-gray-700 h-2" x-show="!info.sticky">
-						<div class="absolute inset-x-0 left-0 h-full"
-							 :class="{
-                            'bg-emerald-500': !info.icon_color,
-                            [info.icon_color?.replace('text-', 'bg-')]: info.icon_color
-                         }"
-							 x-show="!show"
-							 x-transition:leave="transition-all ease-linear duration-[2900ms]"
-							 x-transition:leave-start="w-full"
-							 x-transition:leave-end="w-0"
-						></div>
-					</div>
-				</div>
-			</template>
-		</div>
-	</div>
-
-	</div><!-- This example requires Tailwind CSS v2.0+ -->
-</body>
-</html>
diff --git a/docs/js/app.js b/docs/js/app.js
index 36203e2b..1f2e6f92 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -11370,83 +11370,16 @@ var Importer = /*#__PURE__*/function () {
 
       return _import;
     }()
-  }, {
-    key: "_importJsonFile",
-    value: function () {
-      var _importJsonFile2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee2(resourceLocator) {
-        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                return _context2.abrupt("return", new Promise(function (resolve, reject) {
-                  var reader = new FileReader();
-                  reader.addEventListener('load', function () {
-                    try {
-                      var data = JSON.parse(reader.result);
-                      resolve(data);
-                    } catch (err) {
-                      console.error(err);
-                      reject(err);
-                    }
-                  });
-                  reader.readAsText(resourceLocator);
-                }));
-
-              case 1:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2);
-      }));
-
-      function _importJsonFile(_x) {
-        return _importJsonFile2.apply(this, arguments);
-      }
-
-      return _importJsonFile;
-    }()
-  }, {
-    key: "_importJson",
-    value: function () {
-      var _importJson2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee3(resourceLocator) {
-        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                _context3.prev = 0;
-                return _context3.abrupt("return", JSON.parse(resourceLocator));
-
-              case 4:
-                _context3.prev = 4;
-                _context3.t0 = _context3["catch"](0);
-                console.error(_context3.t0);
-                return _context3.abrupt("return", false);
-
-              case 8:
-              case "end":
-                return _context3.stop();
-            }
-          }
-        }, _callee3, null, [[0, 4]]);
-      }));
-
-      function _importJson(_x2) {
-        return _importJson2.apply(this, arguments);
-      }
-
-      return _importJson;
-    }()
   }, {
     key: "_importGoogleSheets",
     value: function () {
-      var _importGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee4(resourceLocator) {
+      var _importGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee2(resourceLocator) {
         var monsters, sources;
-        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee4$(_context4) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee2$(_context2) {
           while (1) {
-            switch (_context4.prev = _context4.next) {
+            switch (_context2.prev = _context2.next) {
               case 0:
-                _context4.next = 2;
+                _context2.next = 2;
                 return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Monsters?") + new URLSearchParams({
                   key: this.key
                 })).then(function (response) {
@@ -11477,8 +11410,8 @@ var Importer = /*#__PURE__*/function () {
                 });
 
               case 2:
-                monsters = _context4.sent;
-                _context4.next = 5;
+                monsters = _context2.sent;
+                _context2.next = 5;
                 return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Sources?") + new URLSearchParams({
                   key: this.key
                 })).then(function (response) {
@@ -11499,26 +11432,149 @@ var Importer = /*#__PURE__*/function () {
                 });
 
               case 5:
-                sources = _context4.sent;
-                return _context4.abrupt("return", {
+                sources = _context2.sent;
+                return _context2.abrupt("return", {
                   sources: sources,
                   monsters: monsters
                 });
 
               case 7:
               case "end":
-                return _context4.stop();
+                return _context2.stop();
             }
           }
-        }, _callee4, this);
+        }, _callee2, this);
       }));
 
-      function _importGoogleSheets(_x3) {
+      function _importGoogleSheets(_x) {
         return _importGoogleSheets2.apply(this, arguments);
       }
 
       return _importGoogleSheets;
     }()
+  }, {
+    key: "_importJsonFile",
+    value: function () {
+      var _importJsonFile2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee3(resourceLocator) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                return _context3.abrupt("return", new Promise(function (resolve, reject) {
+                  var reader = new FileReader();
+                  reader.addEventListener('load', function () {
+                    try {
+                      var data = JSON.parse(reader.result);
+                      resolve(data);
+                    } catch (err) {
+                      console.error(err);
+                      reject(err);
+                    }
+                  });
+                  reader.readAsText(resourceLocator);
+                }));
+
+              case 1:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }));
+
+      function _importJsonFile(_x2) {
+        return _importJsonFile2.apply(this, arguments);
+      }
+
+      return _importJsonFile;
+    }()
+  }, {
+    key: "_importJson",
+    value: function () {
+      var _importJson2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee4(resourceLocator) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                _context4.prev = 0;
+                return _context4.abrupt("return", JSON.parse(resourceLocator));
+
+              case 4:
+                _context4.prev = 4;
+                _context4.t0 = _context4["catch"](0);
+                console.error(_context4.t0);
+                return _context4.abrupt("return", false);
+
+              case 8:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4, null, [[0, 4]]);
+      }));
+
+      function _importJson(_x3) {
+        return _importJson2.apply(this, arguments);
+      }
+
+      return _importJson;
+    }()
+  }, {
+    key: "downloadExampleJson",
+    value: function downloadExampleJson() {
+      var jsonExample = {
+        "sources": [{
+          "name": "Custom Source",
+          "shortname": "CS",
+          "link": ""
+        }, {
+          "name": "Another Custom Source",
+          "shortname": "ACS",
+          "link": ""
+        }],
+        "monsters": [{
+          "name": "Zombie",
+          "cr": "1/4",
+          "size": "Medium",
+          "type": "Undead",
+          "tags": "",
+          "section": "Zombies",
+          "alignment": "neutral evil",
+          "environment": "aquatic, arctic, cave, coast, desert, dungeon, forest, grassland, mountain, ruins, swamp, underground, urban",
+          "ac": 8,
+          "hp": 22,
+          "init": -2,
+          "lair?": "",
+          "legendary": "",
+          "unique": "",
+          "sources": "Custom Source: 5"
+        }, {
+          "name": "Bigger Zombie",
+          "cr": "1/2",
+          "size": "Large",
+          "type": "Undead",
+          "tags": "",
+          "section": "Zombies",
+          "alignment": "neutral evil",
+          "environment": "my custom place",
+          "ac": 10,
+          "hp": 41,
+          "init": -2,
+          "lair?": "",
+          "legendary": "legendary",
+          "unique": "unique",
+          "sources": "Another Custom Source: 32"
+        }]
+      };
+      var a = document.createElement("a");
+      var file = new Blob([JSON.stringify(jsonExample, null, 4)], {
+        type: "text/json"
+      });
+      a.href = URL.createObjectURL(file);
+      a.download = "example.json";
+      a.click();
+      a.remove();
+    }
   }]);
 
   return Importer;
@@ -11535,10 +11591,10 @@ _defineProperty(Importer, "loadersHtml", {
     return "\n                <label for=\"import_resource_locator\">Sheets ID</label>\n                <input name=\"import_resource_locator\" id=\"import_resource_locator\" type=\"text\" x-model=\"importerResourceLocator\">\n            ";
   },
   'json-raw': function jsonRaw() {
-    return "\n                <label for=\"import_resource_locator\">Raw JSON</label>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
+    return "\n                <label for=\"import_resource_locator\">Raw JSON</label> - <a href=\"javascript:true\" @click=\"downloadExampleJson\">download example</a>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
   },
   'json-file': function jsonFile() {
-    return "\n                <label for=\"import_resource_locator\" class=\"block mb-2 text-gray-900 dark:text-gray-300\">Upload JSON file</label>\n                <input id=\"import_resource_locator\" type=\"file\" accept=\"text/json\" @change=\"importerResourceLocator = $event.target.files[0]\" class=\"block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\">\n            ";
+    return "\n                <label for=\"import_resource_locator\" class=\"block mb-2 text-gray-900 dark:text-gray-300\">Upload JSON file</label> - <a href=\"javascript:true\" @click=\"downloadExampleJson\">download example</a>\n                <input id=\"import_resource_locator\" type=\"file\" accept=\"text/json\" @change=\"importerResourceLocator = $event.target.files[0]\" class=\"block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\">\n            ";
   }
 });
 
diff --git a/src/index.html b/src/index.html
index c2ee1da9..7799dfb5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1396,6 +1396,9 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
                 this.stagedSources = [];
                 this.stagedMonsters = [];
                 this.step = 1;
+            },
+            downloadExampleJson(){
+                Importer.downloadExampleJson();
             }
         }">
 			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
diff --git a/src/js/importer.js b/src/js/importer.js
index f2fbae87..718721f1 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -15,7 +15,7 @@ export default class Importer {
         },
         'json-raw': () => {
             return `
-                <label for="import_resource_locator">Raw JSON</label>
+                <label for="import_resource_locator">Raw JSON</label> - <a href="javascript:true" @click="downloadExampleJson">download example</a>
                 <div class="mt-1">
                     <textarea id="import_resource_locator" x-model="importerResourceLocator" rows="4" name="comment" class="border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600"></textarea>
                 </div>
@@ -23,41 +23,17 @@ export default class Importer {
         },
         'json-file': () => {
             return `
-                <label for="import_resource_locator" class="block mb-2 text-gray-900 dark:text-gray-300">Upload JSON file</label>
+                <label for="import_resource_locator" class="block mb-2 text-gray-900 dark:text-gray-300">Upload JSON file</label> - <a href="javascript:true" @click="downloadExampleJson">download example</a>
                 <input id="import_resource_locator" type="file" accept="text/json" @change="importerResourceLocator = $event.target.files[0]" class="block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
             `;
         },
     }
 
+
     static async import({ resourceLocator = false, type = 'google-sheets' } = {}) {
         return this.loaders[type].bind(this)(resourceLocator);
     }
 
-    static async _importJsonFile(resourceLocator) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.addEventListener('load', function() {
-                try {
-                    const data = JSON.parse(reader.result);
-                    resolve(data);
-                }catch (err) {
-                    console.error(err);
-                    reject(err);
-                }
-            });
-            reader.readAsText(resourceLocator);
-        });
-    }
-
-    static async _importJson(resourceLocator) {
-        try {
-            return JSON.parse(resourceLocator);
-        }catch (err) {
-            console.error(err);
-            return false;
-        }
-    }
-
     static async _importGoogleSheets(resourceLocator) {
 
         let monsters = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Monsters?` + new URLSearchParams({
@@ -111,4 +87,92 @@ export default class Importer {
         return {sources, monsters};
     }
 
+    static async _importJsonFile(resourceLocator) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.addEventListener('load', function() {
+                try {
+                    const data = JSON.parse(reader.result);
+                    resolve(data);
+                }catch (err) {
+                    console.error(err);
+                    reject(err);
+                }
+            });
+            reader.readAsText(resourceLocator);
+        });
+    }
+
+    static async _importJson(resourceLocator) {
+        try {
+            return JSON.parse(resourceLocator);
+        }catch (err) {
+            console.error(err);
+            return false;
+        }
+    }
+
+
+    static downloadExampleJson(){
+
+        const jsonExample = {
+            "sources": [
+                {
+                    "name": "Custom Source",
+                    "shortname": "CS",
+                    "link": ""
+                },
+                {
+                    "name": "Another Custom Source",
+                    "shortname": "ACS",
+                    "link": ""
+                },
+            ],
+            "monsters": [
+                {
+                    "name": "Zombie",
+                    "cr": "1/4",
+                    "size": "Medium",
+                    "type": "Undead",
+                    "tags": "",
+                    "section": "Zombies",
+                    "alignment": "neutral evil",
+                    "environment": "aquatic, arctic, cave, coast, desert, dungeon, forest, grassland, mountain, ruins, swamp, underground, urban",
+                    "ac": 8,
+                    "hp": 22,
+                    "init": -2,
+                    "lair?": "",
+                    "legendary": "",
+                    "unique": "",
+                    "sources": "Custom Source: 5"
+                },
+                {
+                    "name": "Bigger Zombie",
+                    "cr": "1/2",
+                    "size": "Large",
+                    "type": "Undead",
+                    "tags": "",
+                    "section": "Zombies",
+                    "alignment": "neutral evil",
+                    "environment": "my custom place",
+                    "ac": 10,
+                    "hp": 41,
+                    "init": -2,
+                    "lair?": "",
+                    "legendary": "legendary",
+                    "unique": "unique",
+                    "sources": "Another Custom Source: 32"
+                },
+            ]
+        };
+
+        const a = document.createElement("a");
+        const file = new Blob([JSON.stringify(jsonExample, null, 4)], { type: "text/json" });
+        a.href = URL.createObjectURL(file);
+        a.download = "example.json";
+        a.click();
+        a.remove();
+
+    }
+
 }
\ No newline at end of file

From d02d4dcfd416e57b0bc58bb45c2f168451786875 Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Sat, 14 May 2022 14:10:40 -0400
Subject: [PATCH 17/33] Various adjustments to the importer

---
 docs/css/styles.css |  487 +++++-
 docs/index.html     | 1639 +++++++++++++++++++
 docs/js/app.js      | 3815 +++++++++++++++++++++++++++++++++++++++++--
 package-lock.json   |   19 +
 package.json        |    1 +
 src/css/kobold.css  |    1 +
 src/index.html      |   35 +-
 src/js/app.js       |    3 +-
 src/js/helpers.js   |   22 +-
 src/js/importer.js  |   82 +-
 tailwind.config.js  |    3 +-
 11 files changed, 5919 insertions(+), 188 deletions(-)
 create mode 100644 docs/index.html

diff --git a/docs/css/styles.css b/docs/css/styles.css
index dc76a454..54dce7a9 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -7781,6 +7781,7 @@ readers do not read off random characters that represent icons */
 .choices{position:relative;overflow:hidden;margin-bottom:24px;font-size:16px}.choices:focus{outline:0}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices [hidden]{display:none!important}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:.25}.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover{opacity:1}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px #00bcd4}.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button{display:none}.choices[data-type*=select-one]::after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent;border-width:5px;position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-one].is-open::after{border-color:transparent transparent #333;margin-top:-7.5px}.choices[data-type*=select-one][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin:0 -4px 0 8px;padding-left:16px;border-left:1px solid #008fa1;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);background-size:8px;width:8px;line-height:1;opacity:.75;border-radius:0}.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover{opacity:1}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#f9f9f9;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;min-height:44px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}[dir=rtl] .choices__list--single{padding-right:4px;padding-left:16px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:#00a5bb;border:1px solid #008fa1}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown,.choices__list[aria-expanded]{visibility:hidden;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;overflow:hidden;word-break:break-all;will-change:visibility}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{visibility:visible}.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded]{border-color:#b7b7b7}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{position:relative;padding:10px;font-size:14px}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable,.choices__list[aria-expanded] .choices__item--selectable{padding-right:100px}.choices__list--dropdown .choices__item--selectable::after,.choices__list[aria-expanded] .choices__item--selectable::after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable{text-align:right;padding-left:100px;padding-right:10px}[dir=rtl] .choices__list--dropdown .choices__item--selectable::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus,.choices__input:focus{outline:0}.choices__input{display:inline-block;vertical-align:baseline;background-color:#f9f9f9;font-size:14px;margin-bottom:5px;border:0;border-radius:0;max-width:100%;padding:4px 0 4px 2px}.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:.5}
 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
 .tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}
+/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#9ca3af;opacity:1}input::-moz-placeholder, textarea::-moz-placeholder{color:#9ca3af;opacity:1}input:-ms-input-placeholder, textarea:-ms-input-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],select,textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,select:focus,textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#1c64f2;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#1c64f2;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#6b7280;opacity:1}input::-moz-placeholder, textarea::-moz-placeholder{color:#6b7280;opacity:1}input:-ms-input-placeholder, textarea:-ms-input-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}select{-webkit-print-color-adjust:exact;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;color-adjust:exact;padding-right:2.5rem}[multiple]{-webkit-print-color-adjust:unset;background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;color-adjust:unset;padding-right:.75rem}[type=checkbox],[type=radio]{-webkit-print-color-adjust:exact;--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-origin:border-box;border-color:#6b7280;border-width:1px;color:#1c64f2;color-adjust:exact;display:inline-block;flex-shrink:0;height:1rem;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#1c64f2;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px}.dark [type=checkbox]:checked,.dark [type=radio]:checked,[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:transparent}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px auto inherit}input[type=file]::-webkit-file-upload-button{-webkit-margin-start:-1rem;-webkit-margin-end:1rem;background:#1f2937;border:0;color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;margin-inline-end:1rem;margin-inline-start:-1rem;padding:.625rem 1rem .625rem 2rem}input[type=file]::file-selector-button{-webkit-margin-start:-1rem;-webkit-margin-end:1rem;background:#1f2937;border:0;color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;margin-inline-end:1rem;margin-inline-start:-1rem;padding:.625rem 1rem .625rem 2rem}input[type=file]::-webkit-file-upload-button:hover{background:#374151}input[type=file]::file-selector-button:hover{background:#374151}.dark input[type=file]::-webkit-file-upload-button{background:#4b5563;color:#fff}.dark input[type=file]::file-selector-button{background:#4b5563;color:#fff}.dark input[type=file]::-webkit-file-upload-button:hover{background:#6b7280}.dark input[type=file]::file-selector-button:hover{background:#6b7280}input[type=range]::-webkit-slider-thumb{appearance:none;-moz-appearance:none;-webkit-appearance:none;background:#1c64f2;border:0;border-radius:9999px;cursor:pointer;height:1.25rem;width:1.25rem}input[type=range]:disabled::-webkit-slider-thumb{background:#9ca3af}.dark input[type=range]:disabled::-webkit-slider-thumb{background:#6b7280}input[type=range]:focus::-webkit-slider-thumb{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1px;--tw-ring-color:rgb(164 202 254/var(--tw-ring-opacity));box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);outline:2px solid transparent;outline-offset:2px}input[type=range]::-moz-range-thumb{appearance:none;-moz-appearance:none;-webkit-appearance:none;background:#1c64f2;border:0;border-radius:9999px;cursor:pointer;height:1.25rem;width:1.25rem}input[type=range]:disabled::-moz-range-thumb{background:#9ca3af}.dark input[type=range]:disabled::-moz-range-thumb{background:#6b7280}input[type=range]::-moz-range-progress{background:#3f83f8}input[type=range]::-ms-fill-lower{background:#3f83f8}input[type=range].range-sm::-webkit-slider-thumb{height:1rem;width:1rem}input[type=range].range-lg::-webkit-slider-thumb{height:1.5rem;width:1.5rem}input[type=range].range-sm::-moz-range-thumb{height:1rem;width:1rem}input[type=range].range-lg::-moz-range-thumb{height:1.5rem;width:1.5rem}.toggle-bg:after{background:#fff;border-color:#d1d5db;border-radius:9999px;border-width:1px;box-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);content:"";height:1.25rem;left:.125rem;position:absolute;top:.125rem;transition-duration:.15s;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;width:1.25rem}input:checked+.toggle-bg:after{border-color:#fff;transform:translateX(100%);}input:checked+.toggle-bg{background:#1c64f2;border-color:#1c64f2}.tooltip-arrow,.tooltip-arrow:before{background:inherit;height:8px;position:absolute;width:8px}.tooltip-arrow{visibility:hidden}.tooltip-arrow:before{content:"";transform:rotate(45deg);visibility:visible}[data-tooltip-style^=light]+.tooltip>.tooltip-arrow:before{border-color:#e5e7eb;border-style:solid}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=top]>.tooltip-arrow:before{border-bottom-width:1px;border-right-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=right]>.tooltip-arrow:before{border-bottom-width:1px;border-left-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=bottom]>.tooltip-arrow:before{border-left-width:1px;border-top-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=left]>.tooltip-arrow:before{border-right-width:1px;border-top-width:1px}.tooltip[data-popper-placement^=top]>.tooltip-arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.tooltip-arrow{top:-4px}.tooltip[data-popper-placement^=left]>.tooltip-arrow{right:-4px}.tooltip[data-popper-placement^=right]>.tooltip-arrow{left:-4px}.tooltip.invisible>.tooltip-arrow:before{visibility:hidden}*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(63,131,248,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.inset-0{left:0;right:0}.inset-0,.inset-y-0{bottom:0;top:0}.left-0{left:0}.top-12{top:3rem}.right-5{right:1.25rem}.bottom-5{bottom:1.25rem}.top-0{top:0}.-left-1{left:-.25rem}.left-7{left:1.75rem}.left-8{left:2rem}.bottom-0{bottom:0}.top-1\/2{top:50%}.left-1\/2{left:50%}.right-0{right:0}.top-3{top:.75rem}.right-2\.5{right:.625rem}.right-2{right:.5rem}.-left-1\.5{left:-.375rem}.-left-3{left:-.75rem}.top-5{top:1.25rem}.left-5{left:1.25rem}.top-4{top:1rem}.left-2\.5{left:.625rem}.left-2{left:.5rem}.top-2{top:.5rem}.left-1{left:.25rem}.top-1{top:.25rem}.bottom-2\.5{bottom:.625rem}.bottom-2{bottom:.5rem}.z-20{z-index:20}.z-10{z-index:10}.z-40{z-index:40}.z-30{z-index:30}.z-0{z-index:0}.-z-10{z-index:-10}.z-50{z-index:50}.col-span-2{grid-column:span 2/span 2}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-bottom:2rem;margin-top:2rem}.my-3{margin-bottom:.75rem;margin-top:.75rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-10{margin-bottom:2.5rem;margin-top:2.5rem}.-mx-1\.5{margin-left:-.375rem;margin-right:-.375rem}.-my-1\.5{margin-bottom:-.375rem;margin-top:-.375rem}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.-my-1{margin-bottom:-.25rem;margin-top:-.25rem}.my-7{margin-bottom:1.75rem;margin-top:1.75rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.mx-1\.5{margin-left:.375rem;margin-right:.375rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-12{margin-bottom:3rem;margin-top:3rem}.mb-10{margin-bottom:2.5rem}.mb-5{margin-bottom:1.25rem}.mr-3{margin-right:.75rem}.ml-2{margin-left:.5rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-6{margin-top:1.5rem}.mb-8{margin-bottom:2rem}.mr-8{margin-right:2rem}.mr-2{margin-right:.5rem}.ml-auto{margin-left:auto}.mb-3{margin-bottom:.75rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.ml-3{margin-left:.75rem}.mb-0{margin-bottom:0}.mt-8{margin-top:2rem}.mt-3{margin-top:.75rem}.-mb-5{margin-bottom:-1.25rem}.mt-2{margin-top:.5rem}.-ml-0\.5{margin-left:-.125rem}.-ml-0{margin-left:0}.-ml-1{margin-left:-.25rem}.-mr-1{margin-right:-.25rem}.mb-1{margin-bottom:.25rem}.mt-4{margin-top:1rem}.mt-2\.5{margin-top:.625rem}.-mt-1{margin-top:-.25rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.ml-0{margin-left:0}.mr-1\.5{margin-right:.375rem}.ml-4{margin-left:1rem}.-mb-px{margin-bottom:-1px}.mt-1\.5{margin-top:.375rem}.mr-5{margin-right:1.25rem}.mt-10{margin-top:2.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-9{height:2.25rem}.h-full{height:100%}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-3\.5{height:.875rem}.h-3{height:.75rem}.h-20{height:5rem}.h-36{height:9rem}.h-96{height:24rem}.h-24{height:6rem}.h-7{height:1.75rem}.h-56{height:14rem}.h-48{height:12rem}.h-modal{height:calc(100% - 2rem)}.h-14{height:3.5rem}.h-2\.5{height:.625rem}.h-2{height:.5rem}.h-1\.5{height:.375rem}.h-1{height:.25rem}.h-0\.5{height:.125rem}.h-0{height:0}.h-64{height:16rem}.w-64{width:16rem}.w-1\/2{width:50%}.w-full{width:100%}.w-72{width:18rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-48{width:12rem}.w-8{width:2rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-3\.5{width:.875rem}.w-3{width:.75rem}.w-44{width:11rem}.w-20{width:5rem}.w-36{width:9rem}.w-7{width:1.75rem}.w-24{width:6rem}.w-11{width:2.75rem}.w-14{width:3.5rem}.w-1{width:.25rem}.w-2\/4{width:50%}.w-80{width:20rem}.w-32{width:8rem}.w-9{width:2.25rem}.min-w-0{min-width:0}.max-w-8xl{max-width:90rem}.max-w-4xl{max-width:56rem}.max-w-lg{max-width:32rem}.max-w-2xs{max-width:16rem}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-2xl{max-width:42rem}.max-w-7xl{max-width:80rem}.max-w-xs{max-width:20rem}.flex-none{flex:none}.flex-auto{flex:1 1 auto}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.origin-\[0\]{transform-origin:0}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.translate-y-1\/4{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-1\/4{--tw-translate-y:25%}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-6{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-6{--tw-translate-y:-1.5rem}.-translate-y-4{--tw-translate-y:-1rem}.-translate-y-3,.-translate-y-4{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-3{--tw-translate-y:-0.75rem}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-x-0{--tw-translate-x:0px}.rotate-180,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.scale-75{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-75{--tw-scale-x:.75;--tw-scale-y:.75}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.list-inside{list-style-position:inside}.list-outside{list-style-position:outside}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-12{gap:3rem}.gap-8{gap:2rem}.gap-2{gap:.5rem}.gap-6{gap:1.5rem}.gap-y-3{row-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.-space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(-1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(-1rem*var(--tw-space-x-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.5rem*var(--tw-space-x-reverse))}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.25rem*var(--tw-space-y-reverse));margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.-space-x-px>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(-1px*(1 - var(--tw-space-x-reverse)));margin-right:calc(-1px*var(--tw-space-x-reverse))}.space-x-5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.25rem*var(--tw-space-x-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)));border-right-width:calc(1px*var(--tw-divide-x-reverse))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-xl{border-radius:.75rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-l-lg{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem}.rounded-r-lg{border-bottom-right-radius:.5rem;border-top-right-radius:.5rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.rounded-r-md{border-bottom-right-radius:.375rem;border-top-right-radius:.375rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.rounded-l-md{border-bottom-left-radius:.375rem;border-top-left-radius:.375rem}.rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-b{border-bottom-right-radius:.25rem}.rounded-b,.rounded-l{border-bottom-left-radius:.25rem}.rounded-l{border-top-left-radius:.25rem}.rounded-r{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-2{border-width:2px}.border-0{border-width:0}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0}.border-t-0{border-top-width:0}.border-t-4{border-top-width:4px}.border-t{border-top-width:1px}.border-b-2{border-bottom-width:2px}.border-r-0{border-right-width:0}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-dashed{border-style:dashed}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(63 131 248/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(240 82 82/var(--tw-border-opacity))}.border-green-500{--tw-border-opacity:1;border-color:rgb(14 159 110/var(--tw-border-opacity))}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(194 120 3/var(--tw-border-opacity))}.border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.border-blue-700{--tw-border-opacity:1;border-color:rgb(26 86 219/var(--tw-border-opacity))}.border-red-700{--tw-border-opacity:1;border-color:rgb(200 30 30/var(--tw-border-opacity))}.border-green-700{--tw-border-opacity:1;border-color:rgb(4 108 78/var(--tw-border-opacity))}.border-yellow-700{--tw-border-opacity:1;border-color:rgb(142 75 16/var(--tw-border-opacity))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-gray-900{--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity))}.border-yellow-400{--tw-border-opacity:1;border-color:rgb(227 160 8/var(--tw-border-opacity))}.border-purple-700{--tw-border-opacity:1;border-color:rgb(108 43 217/var(--tw-border-opacity))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-blue-300{--tw-border-opacity:1;border-color:rgb(164 202 254/var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-blue-600{--tw-border-opacity:1;border-color:rgb(28 100 242/var(--tw-border-opacity))}.border-green-600{--tw-border-opacity:1;border-color:rgb(5 122 85/var(--tw-border-opacity))}.border-red-600{--tw-border-opacity:1;border-color:rgb(224 36 36/var(--tw-border-opacity))}.border-l-gray-100{--tw-border-opacity:1;border-left-color:rgb(243 244 246/var(--tw-border-opacity))}.border-l-gray-50{--tw-border-opacity:1;border-left-color:rgb(249 250 251/var(--tw-border-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-900\/50{background-color:rgba(17,24,39,.5)}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(28 100 242/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(14 159 110/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(26 86 219/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(225 239 254/var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(253 232 232/var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(222 247 236/var(--tw-bg-opacity))}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(253 246 178/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(200 30 30/var(--tw-bg-opacity))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(4 108 78/var(--tw-bg-opacity))}.bg-yellow-700{--tw-bg-opacity:1;background-color:rgb(142 75 16/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(49 196 141/var(--tw-bg-opacity))}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(249 128 128/var(--tw-bg-opacity))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(229 237 255/var(--tw-bg-opacity))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(237 235 254/var(--tw-bg-opacity))}.bg-pink-100{--tw-bg-opacity:1;background-color:rgb(252 232 243/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(227 160 8/var(--tw-bg-opacity))}.bg-purple-700{--tw-bg-opacity:1;background-color:rgb(108 43 217/var(--tw-bg-opacity))}.bg-\[\#3b5998\]{--tw-bg-opacity:1;background-color:rgb(59 89 152/var(--tw-bg-opacity))}.bg-\[\#1da1f2\]{--tw-bg-opacity:1;background-color:rgb(29 161 242/var(--tw-bg-opacity))}.bg-\[\#24292F\]{--tw-bg-opacity:1;background-color:rgb(36 41 47/var(--tw-bg-opacity))}.bg-\[\#4285F4\]{--tw-bg-opacity:1;background-color:rgb(66 133 244/var(--tw-bg-opacity))}.bg-\[\#050708\]{--tw-bg-opacity:1;background-color:rgb(5 7 8/var(--tw-bg-opacity))}.bg-\[\#FF9119\]{--tw-bg-opacity:1;background-color:rgb(255 145 25/var(--tw-bg-opacity))}.bg-\[\#F7BE38\]{--tw-bg-opacity:1;background-color:rgb(247 190 56/var(--tw-bg-opacity))}.bg-\[\#2557D6\]{--tw-bg-opacity:1;background-color:rgb(37 87 214/var(--tw-bg-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(195 221 253/var(--tw-bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(118 169 250/var(--tw-bg-opacity))}.bg-white\/30{background-color:hsla(0,0%,100%,.3)}.bg-white\/50{background-color:hsla(0,0%,100%,.5)}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(243 250 247/var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(253 242 242/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(224 36 36/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(63 131 248/var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(235 245 255/var(--tw-bg-opacity))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(5 122 85/var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(88 80 236/var(--tw-bg-opacity))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(126 58 242/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(254 236 220/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(251 213 213/var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity:1;background-color:rgb(248 180 180/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(240 82 82/var(--tw-bg-opacity))}.bg-red-800{--tw-bg-opacity:1;background-color:rgb(155 28 28/var(--tw-bg-opacity))}.bg-red-900{--tw-bg-opacity:1;background-color:rgb(119 29 29/var(--tw-bg-opacity))}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(253 253 234/var(--tw-bg-opacity))}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgb(252 233 106/var(--tw-bg-opacity))}.bg-yellow-300{--tw-bg-opacity:1;background-color:rgb(250 202 21/var(--tw-bg-opacity))}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(194 120 3/var(--tw-bg-opacity))}.bg-yellow-600{--tw-bg-opacity:1;background-color:rgb(159 88 10/var(--tw-bg-opacity))}.bg-yellow-800{--tw-bg-opacity:1;background-color:rgb(114 59 19/var(--tw-bg-opacity))}.bg-yellow-900{--tw-bg-opacity:1;background-color:rgb(99 49 18/var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity:1;background-color:rgb(188 240 218/var(--tw-bg-opacity))}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(132 225 188/var(--tw-bg-opacity))}.bg-green-800{--tw-bg-opacity:1;background-color:rgb(3 84 63/var(--tw-bg-opacity))}.bg-green-900{--tw-bg-opacity:1;background-color:rgb(1 71 55/var(--tw-bg-opacity))}.bg-blue-300{--tw-bg-opacity:1;background-color:rgb(164 202 254/var(--tw-bg-opacity))}.bg-blue-800{--tw-bg-opacity:1;background-color:rgb(30 66 159/var(--tw-bg-opacity))}.bg-blue-900{--tw-bg-opacity:1;background-color:rgb(35 56 118/var(--tw-bg-opacity))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(240 245 255/var(--tw-bg-opacity))}.bg-indigo-200{--tw-bg-opacity:1;background-color:rgb(205 219 254/var(--tw-bg-opacity))}.bg-indigo-300{--tw-bg-opacity:1;background-color:rgb(180 198 252/var(--tw-bg-opacity))}.bg-indigo-400{--tw-bg-opacity:1;background-color:rgb(141 162 251/var(--tw-bg-opacity))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(104 117 245/var(--tw-bg-opacity))}.bg-indigo-700{--tw-bg-opacity:1;background-color:rgb(81 69 205/var(--tw-bg-opacity))}.bg-indigo-800{--tw-bg-opacity:1;background-color:rgb(66 56 157/var(--tw-bg-opacity))}.bg-indigo-900{--tw-bg-opacity:1;background-color:rgb(54 47 120/var(--tw-bg-opacity))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(246 245 255/var(--tw-bg-opacity))}.bg-purple-200{--tw-bg-opacity:1;background-color:rgb(220 215 254/var(--tw-bg-opacity))}.bg-purple-300{--tw-bg-opacity:1;background-color:rgb(202 191 253/var(--tw-bg-opacity))}.bg-purple-400{--tw-bg-opacity:1;background-color:rgb(172 148 250/var(--tw-bg-opacity))}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(144 97 249/var(--tw-bg-opacity))}.bg-purple-800{--tw-bg-opacity:1;background-color:rgb(85 33 181/var(--tw-bg-opacity))}.bg-purple-900{--tw-bg-opacity:1;background-color:rgb(74 29 150/var(--tw-bg-opacity))}.bg-pink-50{--tw-bg-opacity:1;background-color:rgb(253 242 248/var(--tw-bg-opacity))}.bg-pink-200{--tw-bg-opacity:1;background-color:rgb(250 209 232/var(--tw-bg-opacity))}.bg-pink-300{--tw-bg-opacity:1;background-color:rgb(248 180 217/var(--tw-bg-opacity))}.bg-pink-400{--tw-bg-opacity:1;background-color:rgb(241 126 184/var(--tw-bg-opacity))}.bg-pink-500{--tw-bg-opacity:1;background-color:rgb(231 70 148/var(--tw-bg-opacity))}.bg-pink-600{--tw-bg-opacity:1;background-color:rgb(214 31 105/var(--tw-bg-opacity))}.bg-pink-700{--tw-bg-opacity:1;background-color:rgb(191 18 93/var(--tw-bg-opacity))}.bg-pink-800{--tw-bg-opacity:1;background-color:rgb(153 21 75/var(--tw-bg-opacity))}.bg-pink-900{--tw-bg-opacity:1;background-color:rgb(117 26 61/var(--tw-bg-opacity))}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3f83f8;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(63,131,248,0))}.from-green-400{--tw-gradient-from:#31c48d;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(49,196,141,0))}.from-cyan-400{--tw-gradient-from:#22d3ee;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(34,211,238,0))}.from-teal-400{--tw-gradient-from:#16bdca;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(22,189,202,0))}.from-lime-200{--tw-gradient-from:#d9f99d;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,hsla(81,88%,80%,0))}.from-red-400{--tw-gradient-from:#f98080;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,hsla(0,91%,74%,0))}.from-pink-400{--tw-gradient-from:#f17eb8;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(241,126,184,0))}.from-purple-500{--tw-gradient-from:#9061f9;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(144,97,249,0))}.from-purple-600{--tw-gradient-from:#7e3af2;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(126,58,242,0))}.from-cyan-500{--tw-gradient-from:#06b6d4;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(6,182,212,0))}.from-pink-500{--tw-gradient-from:#e74694;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(231,70,148,0))}.from-teal-200{--tw-gradient-from:#afecef;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(175,236,239,0))}.from-red-200{--tw-gradient-from:#fbd5d5;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,hsla(0,83%,91%,0))}.from-teal-300{--tw-gradient-from:#7edce2;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(126,220,226,0))}.via-blue-600{--tw-gradient-stops:var(--tw-gradient-from),#1c64f2,var(--tw-gradient-to,rgba(28,100,242,0))}.via-green-500{--tw-gradient-stops:var(--tw-gradient-from),#0e9f6e,var(--tw-gradient-to,rgba(14,159,110,0))}.via-cyan-500{--tw-gradient-stops:var(--tw-gradient-from),#06b6d4,var(--tw-gradient-to,rgba(6,182,212,0))}.via-teal-500{--tw-gradient-stops:var(--tw-gradient-from),#0694a2,var(--tw-gradient-to,rgba(6,148,162,0))}.via-lime-400{--tw-gradient-stops:var(--tw-gradient-from),#a3e635,var(--tw-gradient-to,rgba(163,230,53,0))}.via-red-500{--tw-gradient-stops:var(--tw-gradient-from),#f05252,var(--tw-gradient-to,rgba(240,82,82,0))}.via-pink-500{--tw-gradient-stops:var(--tw-gradient-from),#e74694,var(--tw-gradient-to,rgba(231,70,148,0))}.via-purple-600{--tw-gradient-stops:var(--tw-gradient-from),#7e3af2,var(--tw-gradient-to,rgba(126,58,242,0))}.via-red-300{--tw-gradient-stops:var(--tw-gradient-from),#f8b4b4,var(--tw-gradient-to,hsla(0,83%,84%,0))}.to-blue-700{--tw-gradient-to:#1a56db}.to-green-600{--tw-gradient-to:#057a55}.to-cyan-600{--tw-gradient-to:#0891b2}.to-teal-600{--tw-gradient-to:#047481}.to-lime-500{--tw-gradient-to:#84cc16}.to-red-600{--tw-gradient-to:#e02424}.to-pink-600{--tw-gradient-to:#d61f69}.to-purple-700{--tw-gradient-to:#6c2bd9}.to-blue-500{--tw-gradient-to:#3f83f8}.to-blue-600{--tw-gradient-to:#1c64f2}.to-pink-500{--tw-gradient-to:#e74694}.to-orange-400{--tw-gradient-to:#ff8a4c}.to-lime-200{--tw-gradient-to:#d9f99d}.to-yellow-200{--tw-gradient-to:#fce96a}.to-lime-300{--tw-gradient-to:#bef264}.fill-current{fill:currentColor}.fill-blue-600{fill:#1c64f2}.fill-gray-600{fill:#4b5563}.fill-green-500{fill:#0e9f6e}.fill-red-600{fill:#e02424}.fill-yellow-400{fill:#e3a008}.fill-pink-600{fill:#d61f69}.fill-purple-600{fill:#7e3af2}.object-cover{-o-object-fit:cover;object-fit:cover}.p-4{padding:1rem}.p-2\.5{padding:.625rem}.p-2{padding:.5rem}.p-6{padding:1.5rem}.p-5{padding:1.25rem}.p-1\.5{padding:.375rem}.p-1{padding:.25rem}.p-0\.5{padding:.125rem}.p-0{padding:0}.p-8{padding:2rem}.p-3{padding:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-bottom:1rem;padding-top:1rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-3\.5{padding-bottom:.875rem;padding-top:.875rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.px-0{padding-left:0;padding-right:0}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.pt-4{padding-top:1rem}.pb-4{padding-bottom:1rem}.pt-6{padding-top:1.5rem}.pr-4{padding-right:1rem}.pl-3{padding-left:.75rem}.pl-10{padding-left:2.5rem}.pl-8{padding-left:2rem}.pt-10{padding-top:2.5rem}.pb-6{padding-bottom:1.5rem}.pt-16{padding-top:4rem}.pb-10{padding-bottom:2.5rem}.pl-5{padding-left:1.25rem}.pb-5{padding-bottom:1.25rem}.pt-3{padding-top:.75rem}.pb-0{padding-bottom:0}.pl-4{padding-left:1rem}.pl-11{padding-left:2.75rem}.pl-2\.5{padding-left:.625rem}.pl-2{padding-left:.5rem}.pt-5{padding-top:1.25rem}.pb-2\.5{padding-bottom:.625rem}.pb-2{padding-bottom:.5rem}.pb-1\.5{padding-bottom:.375rem}.pb-1{padding-bottom:.25rem}.pr-3{padding-right:.75rem}.pl-0{padding-left:0}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem}.text-lg,.text-xl{line-height:1.75rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-2xs{font-size:.625rem}.text-5xl{font-size:3rem;line-height:1}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-6xl{font-size:3.75rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}.text-9xl{font-size:8rem;line-height:1}.font-medium{font-weight:500}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.font-normal{font-weight:400}.font-bold{font-weight:700}.font-light{font-weight:300}.font-thin{font-weight:100}.font-extralight{font-weight:200}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-6{line-height:1.5rem}.leading-9{line-height:2.25rem}.leading-normal{line-height:1.5}.leading-none{line-height:1}.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-loose{line-height:2}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-\[\#ff2d20\]{--tw-text-opacity:1;color:rgb(255 45 32/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(28 100 242/var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgb(4 108 78/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgb(26 86 219/var(--tw-text-opacity))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 66 159/var(--tw-text-opacity))}.text-red-700{--tw-text-opacity:1;color:rgb(200 30 30/var(--tw-text-opacity))}.text-yellow-700{--tw-text-opacity:1;color:rgb(142 75 16/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(63 131 248/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(240 82 82/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(14 159 110/var(--tw-text-opacity))}.text-yellow-500{--tw-text-opacity:1;color:rgb(194 120 3/var(--tw-text-opacity))}.text-purple-600{--tw-text-opacity:1;color:rgb(126 58 242/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(155 28 28/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(3 84 63/var(--tw-text-opacity))}.text-yellow-800{--tw-text-opacity:1;color:rgb(114 59 19/var(--tw-text-opacity))}.text-indigo-800{--tw-text-opacity:1;color:rgb(66 56 157/var(--tw-text-opacity))}.text-purple-800{--tw-text-opacity:1;color:rgb(85 33 181/var(--tw-text-opacity))}.text-pink-800{--tw-text-opacity:1;color:rgb(153 21 75/var(--tw-text-opacity))}.text-\[\#626890\]{--tw-text-opacity:1;color:rgb(98 104 144/var(--tw-text-opacity))}.text-yellow-400{--tw-text-opacity:1;color:rgb(227 160 8/var(--tw-text-opacity))}.text-purple-700{--tw-text-opacity:1;color:rgb(108 43 217/var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgb(224 36 36/var(--tw-text-opacity))}.text-yellow-300{--tw-text-opacity:1;color:rgb(250 202 21/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-green-900{--tw-text-opacity:1;color:rgb(1 71 55/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(5 122 85/var(--tw-text-opacity))}.text-red-900{--tw-text-opacity:1;color:rgb(119 29 29/var(--tw-text-opacity))}.text-blue-100{--tw-text-opacity:1;color:rgb(225 239 254/var(--tw-text-opacity))}.text-indigo-700{--tw-text-opacity:1;color:rgb(81 69 205/var(--tw-text-opacity))}.text-orange-800{--tw-text-opacity:1;color:rgb(138 44 13/var(--tw-text-opacity))}.text-blue-900{--tw-text-opacity:1;color:rgb(35 56 118/var(--tw-text-opacity))}.text-orange-500{--tw-text-opacity:1;color:rgb(255 90 31/var(--tw-text-opacity))}.text-teal-600{--tw-text-opacity:1;color:rgb(4 116 129/var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.line-through{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.decoration-gray-500{-webkit-text-decoration-color:#6b7280;text-decoration-color:#6b7280}.placeholder-green-700::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(4 108 78/var(--tw-placeholder-opacity))}.placeholder-green-700:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgb(4 108 78/var(--tw-placeholder-opacity))}.placeholder-green-700::placeholder{--tw-placeholder-opacity:1;color:rgb(4 108 78/var(--tw-placeholder-opacity))}.placeholder-red-700::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(200 30 30/var(--tw-placeholder-opacity))}.placeholder-red-700:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgb(200 30 30/var(--tw-placeholder-opacity))}.placeholder-red-700::placeholder{--tw-placeholder-opacity:1;color:rgb(200 30 30/var(--tw-placeholder-opacity))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-blue-500\/50{--tw-shadow-color:rgba(63,131,248,.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-green-500\/50{--tw-shadow-color:rgba(14,159,110,.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-cyan-500\/50{--tw-shadow-color:rgba(6,182,212,.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-teal-500\/50{--tw-shadow-color:rgba(6,148,162,.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-lime-500\/50{--tw-shadow-color:rgba(132,204,22,.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-red-500\/50{--tw-shadow-color:rgba(240,82,82,.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-pink-500\/50{--tw-shadow-color:rgba(231,70,148,.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-purple-500\/50{--tw-shadow-color:rgba(144,97,249,.5);--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2,.ring-8{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-8{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-0,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-inset{--tw-ring-inset:inset}.ring-gray-300{--tw-ring-opacity:1;--tw-ring-color:rgb(209 213 219/var(--tw-ring-opacity))}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity))}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity))}.ring-opacity-0{--tw-ring-opacity:0}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-75{transition-duration:75ms}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{transition-timing-function:linear}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:top-0\.5:after{content:var(--tw-content);top:.125rem}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:top-0:after{content:var(--tw-content);top:0}.after\:top-\[2px\]:after{content:var(--tw-content);top:2px}.after\:left-\[4px\]:after{content:var(--tw-content);left:4px}.after\:h-5:after{content:var(--tw-content);height:1.25rem}.after\:h-4:after{content:var(--tw-content);height:1rem}.after\:h-6:after{content:var(--tw-content);height:1.5rem}.after\:w-5:after{content:var(--tw-content);width:1.25rem}.after\:w-4:after{content:var(--tw-content);width:1rem}.after\:w-6:after{content:var(--tw-content);width:1.5rem}.after\:rounded-full:after{border-radius:9999px;content:var(--tw-content)}.after\:border:after{border-width:1px;content:var(--tw-content)}.after\:border-gray-300:after{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity));content:var(--tw-content)}.after\:bg-white:after{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));content:var(--tw-content)}.after\:transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.odd\:bg-white:nth-child(odd){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.even\:bg-gray-50:nth-child(2n){--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.hover\:bg-blue-800:hover{--tw-bg-opacity:1;background-color:rgb(30 66 159/var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(225 239 254/var(--tw-bg-opacity))}.hover\:bg-blue-200:hover{--tw-bg-opacity:1;background-color:rgb(195 221 253/var(--tw-bg-opacity))}.hover\:bg-red-200:hover{--tw-bg-opacity:1;background-color:rgb(251 213 213/var(--tw-bg-opacity))}.hover\:bg-green-200:hover{--tw-bg-opacity:1;background-color:rgb(188 240 218/var(--tw-bg-opacity))}.hover\:bg-yellow-200:hover{--tw-bg-opacity:1;background-color:rgb(252 233 106/var(--tw-bg-opacity))}.hover\:bg-red-800:hover{--tw-bg-opacity:1;background-color:rgb(155 28 28/var(--tw-bg-opacity))}.hover\:bg-green-800:hover{--tw-bg-opacity:1;background-color:rgb(3 84 63/var(--tw-bg-opacity))}.hover\:bg-yellow-800:hover{--tw-bg-opacity:1;background-color:rgb(114 59 19/var(--tw-bg-opacity))}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}.hover\:bg-gray-900:hover{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.hover\:bg-yellow-500:hover{--tw-bg-opacity:1;background-color:rgb(194 120 3/var(--tw-bg-opacity))}.hover\:bg-purple-800:hover{--tw-bg-opacity:1;background-color:rgb(85 33 181/var(--tw-bg-opacity))}.hover\:bg-\[\#3b5998\]\/90:hover{background-color:rgba(59,89,152,.9)}.hover\:bg-\[\#1da1f2\]\/90:hover{background-color:rgba(29,161,242,.9)}.hover\:bg-\[\#24292F\]\/90:hover{background-color:rgba(36,41,47,.9)}.hover\:bg-\[\#4285F4\]\/90:hover{background-color:rgba(66,133,244,.9)}.hover\:bg-\[\#050708\]\/90:hover{background-color:rgba(5,7,8,.9)}.hover\:bg-\[\#FF9119\]\/80:hover{background-color:rgba(255,145,25,.8)}.hover\:bg-\[\#F7BE38\]\/90:hover{background-color:rgba(247,190,56,.9)}.hover\:bg-\[\#050708\]\/80:hover{background-color:rgba(5,7,8,.8)}.hover\:bg-\[\#2557D6\]\/90:hover{background-color:rgba(37,87,214,.9)}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(26 86 219/var(--tw-bg-opacity))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-gradient-to-br:hover{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.hover\:bg-gradient-to-bl:hover{background-image:linear-gradient(to bottom left,var(--tw-gradient-stops))}.hover\:bg-gradient-to-l:hover{background-image:linear-gradient(to left,var(--tw-gradient-stops))}.hover\:from-teal-200:hover{--tw-gradient-from:#afecef;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(175,236,239,0))}.hover\:to-lime-200:hover{--tw-gradient-to:#d9f99d}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(28 100 242/var(--tw-text-opacity))}.hover\:text-blue-700:hover{--tw-text-opacity:1;color:rgb(26 86 219/var(--tw-text-opacity))}.hover\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 66 159/var(--tw-text-opacity))}.hover\:text-red-800:hover{--tw-text-opacity:1;color:rgb(155 28 28/var(--tw-text-opacity))}.hover\:text-green-800:hover{--tw-text-opacity:1;color:rgb(3 84 63/var(--tw-text-opacity))}.hover\:text-yellow-800:hover{--tw-text-opacity:1;color:rgb(114 59 19/var(--tw-text-opacity))}.hover\:text-gray-800:hover{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\:no-underline:hover{-webkit-text-decoration-line:none;text-decoration-line:none}.hover\:shadow:hover{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:z-10:focus{z-index:10}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(63 131 248/var(--tw-border-opacity))}.focus\:border-blue-600:focus{--tw-border-opacity:1;border-color:rgb(28 100 242/var(--tw-border-opacity))}.focus\:border-green-500:focus{--tw-border-opacity:1;border-color:rgb(14 159 110/var(--tw-border-opacity))}.focus\:border-red-500:focus{--tw-border-opacity:1;border-color:rgb(240 82 82/var(--tw-border-opacity))}.focus\:border-green-600:focus{--tw-border-opacity:1;border-color:rgb(5 122 85/var(--tw-border-opacity))}.focus\:border-red-600:focus{--tw-border-opacity:1;border-color:rgb(224 36 36/var(--tw-border-opacity))}.focus\:border-gray-200:focus{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.focus\:bg-gray-100:focus{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.focus\:bg-gray-900:focus{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.focus\:text-blue-700:focus{--tw-text-opacity:1;color:rgb(26 86 219/var(--tw-text-opacity))}.focus\:text-white:focus{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-2:focus,.focus\:ring-4:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(63 131 248/var(--tw-ring-opacity))}.focus\:ring-blue-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(164 202 254/var(--tw-ring-opacity))}.focus\:ring-gray-100:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(243 244 246/var(--tw-ring-opacity))}.focus\:ring-gray-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}.focus\:ring-gray-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(209 213 219/var(--tw-ring-opacity))}.focus\:ring-blue-700:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(26 86 219/var(--tw-ring-opacity))}.focus\:ring-blue-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(195 221 253/var(--tw-ring-opacity))}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(118 169 250/var(--tw-ring-opacity))}.focus\:ring-red-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(249 128 128/var(--tw-ring-opacity))}.focus\:ring-green-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(49 196 141/var(--tw-ring-opacity))}.focus\:ring-yellow-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(227 160 8/var(--tw-ring-opacity))}.focus\:ring-gray-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(156 163 175/var(--tw-ring-opacity))}.focus\:ring-red-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(248 180 180/var(--tw-ring-opacity))}.focus\:ring-green-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(132 225 188/var(--tw-ring-opacity))}.focus\:ring-yellow-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(250 202 21/var(--tw-ring-opacity))}.focus\:ring-gray-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(75 85 99/var(--tw-ring-opacity))}.focus\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity))}.focus\:ring-purple-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(202 191 253/var(--tw-ring-opacity))}.focus\:ring-cyan-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(103 232 249/var(--tw-ring-opacity))}.focus\:ring-teal-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(126 220 226/var(--tw-ring-opacity))}.focus\:ring-lime-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(190 242 100/var(--tw-ring-opacity))}.focus\:ring-pink-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(248 180 217/var(--tw-ring-opacity))}.focus\:ring-green-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(188 240 218/var(--tw-ring-opacity))}.focus\:ring-purple-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(220 215 254/var(--tw-ring-opacity))}.focus\:ring-pink-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(250 209 232/var(--tw-ring-opacity))}.focus\:ring-lime-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(217 249 157/var(--tw-ring-opacity))}.focus\:ring-red-100:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(253 232 232/var(--tw-ring-opacity))}.focus\:ring-cyan-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(165 243 252/var(--tw-ring-opacity))}.focus\:ring-\[\#3b5998\]\/50:focus{--tw-ring-color:rgba(59,89,152,.5)}.focus\:ring-\[\#1da1f2\]\/50:focus{--tw-ring-color:rgba(29,161,242,.5)}.focus\:ring-\[\#24292F\]\/50:focus{--tw-ring-color:rgba(36,41,47,.5)}.focus\:ring-\[\#4285F4\]\/50:focus{--tw-ring-color:rgba(66,133,244,.5)}.focus\:ring-\[\#050708\]\/50:focus{--tw-ring-color:rgba(5,7,8,.5)}.focus\:ring-\[\#FF9119\]\/50:focus{--tw-ring-color:rgba(255,145,25,.5)}.focus\:ring-\[\#F7BE38\]\/50:focus{--tw-ring-color:rgba(247,190,56,.5)}.focus\:ring-\[\#2557D6\]\/50:focus{--tw-ring-color:rgba(37,87,214,.5)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(14 159 110/var(--tw-ring-opacity))}.focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(240 82 82/var(--tw-ring-opacity))}.focus\:ring-purple-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(144 97 249/var(--tw-ring-opacity))}.focus\:ring-teal-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(6 148 162/var(--tw-ring-opacity))}.focus\:ring-yellow-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(194 120 3/var(--tw-ring-opacity))}.focus\:ring-orange-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(255 90 31/var(--tw-ring-opacity))}.group:hover .group-hover\:bg-white\/50{background-color:hsla(0,0%,100%,.5)}.group:hover .group-hover\:bg-opacity-0{--tw-bg-opacity:0}.group:hover .group-hover\:from-purple-600{--tw-gradient-from:#7e3af2;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(126,58,242,0))}.group:hover .group-hover\:from-cyan-500{--tw-gradient-from:#06b6d4;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(6,182,212,0))}.group:hover .group-hover\:from-green-400{--tw-gradient-from:#31c48d;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(49,196,141,0))}.group:hover .group-hover\:from-purple-500{--tw-gradient-from:#9061f9;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(144,97,249,0))}.group:hover .group-hover\:from-pink-500{--tw-gradient-from:#e74694;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(231,70,148,0))}.group:hover .group-hover\:from-teal-300{--tw-gradient-from:#7edce2;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(126,220,226,0))}.group:hover .group-hover\:from-red-200{--tw-gradient-from:#fbd5d5;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,hsla(0,83%,91%,0))}.group:hover .group-hover\:via-red-300{--tw-gradient-stops:var(--tw-gradient-from),#f8b4b4,var(--tw-gradient-to,hsla(0,83%,84%,0))}.group:hover .group-hover\:to-blue-500{--tw-gradient-to:#3f83f8}.group:hover .group-hover\:to-blue-600{--tw-gradient-to:#1c64f2}.group:hover .group-hover\:to-pink-500{--tw-gradient-to:#e74694}.group:hover .group-hover\:to-orange-400{--tw-gradient-to:#ff8a4c}.group:hover .group-hover\:to-lime-300{--tw-gradient-to:#bef264}.group:hover .group-hover\:to-yellow-200{--tw-gradient-to:#fce96a}.group:hover .group-hover\:text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.group:hover .group-hover\:text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.group:focus .group-focus\:outline-none{outline:2px solid transparent;outline-offset:2px}.group:focus .group-focus\:ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.group:focus .group-focus\:ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity))}.peer:checked~.peer-checked\:bg-blue-600{--tw-bg-opacity:1;background-color:rgb(28 100 242/var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-red-600{--tw-bg-opacity:1;background-color:rgb(224 36 36/var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-green-600{--tw-bg-opacity:1;background-color:rgb(5 122 85/var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-purple-600{--tw-bg-opacity:1;background-color:rgb(126 58 242/var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(227 160 8/var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-teal-600{--tw-bg-opacity:1;background-color:rgb(4 116 129/var(--tw-bg-opacity))}.peer:checked~.peer-checked\:bg-orange-500{--tw-bg-opacity:1;background-color:rgb(255 90 31/var(--tw-bg-opacity))}.peer:checked~.peer-checked\:after\:translate-x-full:after{--tw-translate-x:100%;content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked~.peer-checked\:after\:border-white:after{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity));content:var(--tw-content)}.peer:-moz-placeholder-shown~.peer-placeholder-shown\:top-1\/2{top:50%}.peer:-ms-input-placeholder~.peer-placeholder-shown\:top-1\/2{top:50%}.peer:placeholder-shown~.peer-placeholder-shown\:top-1\/2{top:50%}.peer:-moz-placeholder-shown~.peer-placeholder-shown\:translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:-ms-input-placeholder~.peer-placeholder-shown\:translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:placeholder-shown~.peer-placeholder-shown\:translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:-moz-placeholder-shown~.peer-placeholder-shown\:-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:-ms-input-placeholder~.peer-placeholder-shown\:-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:placeholder-shown~.peer-placeholder-shown\:-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:-moz-placeholder-shown~.peer-placeholder-shown\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:-ms-input-placeholder~.peer-placeholder-shown\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:placeholder-shown~.peer-placeholder-shown\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:focus~.peer-focus\:left-0{left:0}.peer:focus~.peer-focus\:top-2{top:.5rem}.peer:focus~.peer-focus\:top-1{top:.25rem}.peer:focus~.peer-focus\:-translate-y-6{--tw-translate-y:-1.5rem}.peer:focus~.peer-focus\:-translate-y-4,.peer:focus~.peer-focus\:-translate-y-6{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:focus~.peer-focus\:-translate-y-4{--tw-translate-y:-1rem}.peer:focus~.peer-focus\:-translate-y-3{--tw-translate-y:-0.75rem}.peer:focus~.peer-focus\:-translate-y-3,.peer:focus~.peer-focus\:scale-75{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:focus~.peer-focus\:scale-75{--tw-scale-x:.75;--tw-scale-y:.75}.peer:focus~.peer-focus\:px-2{padding-left:.5rem;padding-right:.5rem}.peer:focus~.peer-focus\:font-medium{font-weight:500}.peer:focus~.peer-focus\:text-blue-600{--tw-text-opacity:1;color:rgb(28 100 242/var(--tw-text-opacity))}.peer:focus~.peer-focus\:outline-none{outline:2px solid transparent;outline-offset:2px}.peer:focus~.peer-focus\:ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus~.peer-focus\:ring-blue-300{--tw-ring-opacity:1;--tw-ring-color:rgb(164 202 254/var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-red-300{--tw-ring-opacity:1;--tw-ring-color:rgb(248 180 180/var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-green-300{--tw-ring-opacity:1;--tw-ring-color:rgb(132 225 188/var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-purple-300{--tw-ring-opacity:1;--tw-ring-color:rgb(202 191 253/var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-yellow-300{--tw-ring-opacity:1;--tw-ring-color:rgb(250 202 21/var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-teal-300{--tw-ring-opacity:1;--tw-ring-color:rgb(126 220 226/var(--tw-ring-opacity))}.peer:focus~.peer-focus\:ring-orange-300{--tw-ring-opacity:1;--tw-ring-color:rgb(253 186 140/var(--tw-ring-opacity))}.dark .dark\:divide-gray-600>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(75 85 99/var(--tw-divide-opacity))}.dark .dark\:divide-gray-700>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(55 65 81/var(--tw-divide-opacity))}.dark .dark\:border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity))}.dark .dark\:border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}.dark .dark\:border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.dark .dark\:border-blue-800{--tw-border-opacity:1;border-color:rgb(30 66 159/var(--tw-border-opacity))}.dark .dark\:border-red-800{--tw-border-opacity:1;border-color:rgb(155 28 28/var(--tw-border-opacity))}.dark .dark\:border-green-800{--tw-border-opacity:1;border-color:rgb(3 84 63/var(--tw-border-opacity))}.dark .dark\:border-yellow-800{--tw-border-opacity:1;border-color:rgb(114 59 19/var(--tw-border-opacity))}.dark .dark\:border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.dark .dark\:border-blue-500{--tw-border-opacity:1;border-color:rgb(63 131 248/var(--tw-border-opacity))}.dark .dark\:border-green-500{--tw-border-opacity:1;border-color:rgb(14 159 110/var(--tw-border-opacity))}.dark .dark\:border-red-500{--tw-border-opacity:1;border-color:rgb(240 82 82/var(--tw-border-opacity))}.dark .dark\:border-yellow-300{--tw-border-opacity:1;border-color:rgb(250 202 21/var(--tw-border-opacity))}.dark .dark\:border-purple-400{--tw-border-opacity:1;border-color:rgb(172 148 250/var(--tw-border-opacity))}.dark .dark\:border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.dark .dark\:border-green-400{--tw-border-opacity:1;border-color:rgb(49 196 141/var(--tw-border-opacity))}.dark .dark\:border-red-400{--tw-border-opacity:1;border-color:rgb(249 128 128/var(--tw-border-opacity))}.dark .dark\:border-gray-900{--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity))}.dark .dark\:border-transparent{border-color:transparent}.dark .dark\:border-l-gray-700{--tw-border-opacity:1;border-left-color:rgb(55 65 81/var(--tw-border-opacity))}.dark .dark\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.dark .dark\:bg-gray-900\/60{background-color:rgba(17,24,39,.6)}.dark .dark\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.dark .dark\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.dark .dark\:bg-blue-600{--tw-bg-opacity:1;background-color:rgb(28 100 242/var(--tw-bg-opacity))}.dark .dark\:bg-blue-200{--tw-bg-opacity:1;background-color:rgb(195 221 253/var(--tw-bg-opacity))}.dark .dark\:bg-red-200{--tw-bg-opacity:1;background-color:rgb(251 213 213/var(--tw-bg-opacity))}.dark .dark\:bg-green-200{--tw-bg-opacity:1;background-color:rgb(188 240 218/var(--tw-bg-opacity))}.dark .dark\:bg-yellow-200{--tw-bg-opacity:1;background-color:rgb(252 233 106/var(--tw-bg-opacity))}.dark .dark\:bg-blue-800{--tw-bg-opacity:1;background-color:rgb(30 66 159/var(--tw-bg-opacity))}.dark .dark\:bg-red-800{--tw-bg-opacity:1;background-color:rgb(155 28 28/var(--tw-bg-opacity))}.dark .dark\:bg-green-800{--tw-bg-opacity:1;background-color:rgb(3 84 63/var(--tw-bg-opacity))}.dark .dark\:bg-yellow-800{--tw-bg-opacity:1;background-color:rgb(114 59 19/var(--tw-bg-opacity))}.dark .dark\:bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}.dark .dark\:bg-indigo-200{--tw-bg-opacity:1;background-color:rgb(205 219 254/var(--tw-bg-opacity))}.dark .dark\:bg-purple-200{--tw-bg-opacity:1;background-color:rgb(220 215 254/var(--tw-bg-opacity))}.dark .dark\:bg-pink-200{--tw-bg-opacity:1;background-color:rgb(250 209 232/var(--tw-bg-opacity))}.dark .dark\:bg-green-600{--tw-bg-opacity:1;background-color:rgb(5 122 85/var(--tw-bg-opacity))}.dark .dark\:bg-red-600{--tw-bg-opacity:1;background-color:rgb(224 36 36/var(--tw-bg-opacity))}.dark .dark\:bg-purple-600{--tw-bg-opacity:1;background-color:rgb(126 58 242/var(--tw-bg-opacity))}.dark .dark\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.dark .dark\:bg-blue-500{--tw-bg-opacity:1;background-color:rgb(63 131 248/var(--tw-bg-opacity))}.dark .dark\:bg-gray-800\/30{background-color:rgba(31,41,55,.3)}.dark .dark\:bg-gray-800\/50{background-color:rgba(31,41,55,.5)}.dark .dark\:bg-green-100{--tw-bg-opacity:1;background-color:rgb(222 247 236/var(--tw-bg-opacity))}.dark .dark\:bg-red-100{--tw-bg-opacity:1;background-color:rgb(253 232 232/var(--tw-bg-opacity))}.dark .dark\:bg-blue-400{--tw-bg-opacity:1;background-color:rgb(118 169 250/var(--tw-bg-opacity))}.dark .dark\:bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.dark .dark\:bg-red-500{--tw-bg-opacity:1;background-color:rgb(240 82 82/var(--tw-bg-opacity))}.dark .dark\:bg-green-500{--tw-bg-opacity:1;background-color:rgb(14 159 110/var(--tw-bg-opacity))}.dark .dark\:bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(104 117 245/var(--tw-bg-opacity))}.dark .dark\:bg-purple-500{--tw-bg-opacity:1;background-color:rgb(144 97 249/var(--tw-bg-opacity))}.dark .dark\:bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.dark .dark\:bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.dark .dark\:bg-blue-900{--tw-bg-opacity:1;background-color:rgb(35 56 118/var(--tw-bg-opacity))}.dark .dark\:bg-orange-200{--tw-bg-opacity:1;background-color:rgb(252 217 189/var(--tw-bg-opacity))}.dark .dark\:bg-orange-700{--tw-bg-opacity:1;background-color:rgb(180 52 3/var(--tw-bg-opacity))}.dark .dark\:bg-opacity-80{--tw-bg-opacity:0.8}.dark .dark\:fill-gray-300{fill:#d1d5db}.dark .dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark .dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.dark .dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.dark .dark\:text-blue-500{--tw-text-opacity:1;color:rgb(63 131 248/var(--tw-text-opacity))}.dark .dark\:text-green-600{--tw-text-opacity:1;color:rgb(5 122 85/var(--tw-text-opacity))}.dark .dark\:text-blue-900{--tw-text-opacity:1;color:rgb(35 56 118/var(--tw-text-opacity))}.dark .dark\:text-blue-400{--tw-text-opacity:1;color:rgb(118 169 250/var(--tw-text-opacity))}.dark .dark\:text-blue-800{--tw-text-opacity:1;color:rgb(30 66 159/var(--tw-text-opacity))}.dark .dark\:text-red-800{--tw-text-opacity:1;color:rgb(155 28 28/var(--tw-text-opacity))}.dark .dark\:text-green-800{--tw-text-opacity:1;color:rgb(3 84 63/var(--tw-text-opacity))}.dark .dark\:text-yellow-800{--tw-text-opacity:1;color:rgb(114 59 19/var(--tw-text-opacity))}.dark .dark\:text-blue-600{--tw-text-opacity:1;color:rgb(28 100 242/var(--tw-text-opacity))}.dark .dark\:text-red-600{--tw-text-opacity:1;color:rgb(224 36 36/var(--tw-text-opacity))}.dark .dark\:text-yellow-600{--tw-text-opacity:1;color:rgb(159 88 10/var(--tw-text-opacity))}.dark .dark\:text-purple-400{--tw-text-opacity:1;color:rgb(172 148 250/var(--tw-text-opacity))}.dark .dark\:text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.dark .dark\:text-red-900{--tw-text-opacity:1;color:rgb(119 29 29/var(--tw-text-opacity))}.dark .dark\:text-green-900{--tw-text-opacity:1;color:rgb(1 71 55/var(--tw-text-opacity))}.dark .dark\:text-yellow-900{--tw-text-opacity:1;color:rgb(99 49 18/var(--tw-text-opacity))}.dark .dark\:text-indigo-900{--tw-text-opacity:1;color:rgb(54 47 120/var(--tw-text-opacity))}.dark .dark\:text-purple-900{--tw-text-opacity:1;color:rgb(74 29 150/var(--tw-text-opacity))}.dark .dark\:text-pink-900{--tw-text-opacity:1;color:rgb(117 26 61/var(--tw-text-opacity))}.dark .dark\:text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.dark .dark\:text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.dark .dark\:text-green-500{--tw-text-opacity:1;color:rgb(14 159 110/var(--tw-text-opacity))}.dark .dark\:text-red-500{--tw-text-opacity:1;color:rgb(240 82 82/var(--tw-text-opacity))}.dark .dark\:text-yellow-300{--tw-text-opacity:1;color:rgb(250 202 21/var(--tw-text-opacity))}.dark .dark\:text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.dark .dark\:text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.dark .dark\:text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.dark .dark\:text-yellow-500{--tw-text-opacity:1;color:rgb(194 120 3/var(--tw-text-opacity))}.dark .dark\:text-indigo-500{--tw-text-opacity:1;color:rgb(104 117 245/var(--tw-text-opacity))}.dark .dark\:text-purple-500{--tw-text-opacity:1;color:rgb(144 97 249/var(--tw-text-opacity))}.dark .dark\:text-blue-200{--tw-text-opacity:1;color:rgb(195 221 253/var(--tw-text-opacity))}.dark .dark\:text-orange-900{--tw-text-opacity:1;color:rgb(119 29 29/var(--tw-text-opacity))}.dark .dark\:text-blue-300{--tw-text-opacity:1;color:rgb(164 202 254/var(--tw-text-opacity))}.dark .dark\:text-green-200{--tw-text-opacity:1;color:rgb(188 240 218/var(--tw-text-opacity))}.dark .dark\:text-red-200{--tw-text-opacity:1;color:rgb(251 213 213/var(--tw-text-opacity))}.dark .dark\:text-orange-200{--tw-text-opacity:1;color:rgb(252 217 189/var(--tw-text-opacity))}.dark .dark\:text-green-400{--tw-text-opacity:1;color:rgb(49 196 141/var(--tw-text-opacity))}.dark .dark\:text-red-400{--tw-text-opacity:1;color:rgb(249 128 128/var(--tw-text-opacity))}.dark .dark\:placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.dark .dark\:placeholder-gray-400:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.dark .dark\:placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.dark .dark\:placeholder-green-500::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(14 159 110/var(--tw-placeholder-opacity))}.dark .dark\:placeholder-green-500:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgb(14 159 110/var(--tw-placeholder-opacity))}.dark .dark\:placeholder-green-500::placeholder{--tw-placeholder-opacity:1;color:rgb(14 159 110/var(--tw-placeholder-opacity))}.dark .dark\:placeholder-red-500::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(240 82 82/var(--tw-placeholder-opacity))}.dark .dark\:placeholder-red-500:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgb(240 82 82/var(--tw-placeholder-opacity))}.dark .dark\:placeholder-red-500::placeholder{--tw-placeholder-opacity:1;color:rgb(240 82 82/var(--tw-placeholder-opacity))}.dark .dark\:shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.dark .dark\:shadow-lg,.dark .dark\:shadow-sm-light{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.dark .dark\:shadow-sm-light{--tw-shadow:0 2px 5px 0px hsla(0,0%,100%,.08);--tw-shadow-colored:0 2px 5px 0px var(--tw-shadow-color)}.dark .dark\:shadow-blue-800\/80{--tw-shadow-color:rgba(30,66,159,.8);--tw-shadow:var(--tw-shadow-colored)}.dark .dark\:shadow-green-800\/80{--tw-shadow-color:rgba(3,84,63,.8);--tw-shadow:var(--tw-shadow-colored)}.dark .dark\:shadow-cyan-800\/80{--tw-shadow-color:rgba(21,94,117,.8);--tw-shadow:var(--tw-shadow-colored)}.dark .dark\:shadow-teal-800\/80{--tw-shadow-color:rgba(5,80,92,.8);--tw-shadow:var(--tw-shadow-colored)}.dark .dark\:shadow-lime-800\/80{--tw-shadow-color:rgba(63,98,18,.8);--tw-shadow:var(--tw-shadow-colored)}.dark .dark\:shadow-red-800\/80{--tw-shadow-color:rgba(155,28,28,.8);--tw-shadow:var(--tw-shadow-colored)}.dark .dark\:shadow-pink-800\/80{--tw-shadow-color:rgba(153,21,75,.8);--tw-shadow:var(--tw-shadow-colored)}.dark .dark\:shadow-purple-800\/80{--tw-shadow-color:rgba(85,33,181,.8);--tw-shadow:var(--tw-shadow-colored)}.dark .dark\:ring-gray-500{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity))}.dark .dark\:ring-gray-900{--tw-ring-opacity:1;--tw-ring-color:rgb(17 24 39/var(--tw-ring-opacity))}.dark .dark\:ring-offset-gray-800{--tw-ring-offset-color:#1f2937}.dark .odd\:dark\:bg-gray-800:nth-child(odd){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.dark .even\:dark\:bg-gray-700:nth-child(2n){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.dark .dark\:hover\:border-gray-600:hover{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.dark .dark\:hover\:border-gray-700:hover{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}.dark .dark\:hover\:border-gray-500:hover{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.dark .dark\:hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(26 86 219/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-blue-300:hover{--tw-bg-opacity:1;background-color:rgb(164 202 254/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-red-300:hover{--tw-bg-opacity:1;background-color:rgb(248 180 180/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-green-300:hover{--tw-bg-opacity:1;background-color:rgb(132 225 188/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-yellow-300:hover{--tw-bg-opacity:1;background-color:rgb(250 202 21/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-blue-900:hover{--tw-bg-opacity:1;background-color:rgb(35 56 118/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-red-900:hover{--tw-bg-opacity:1;background-color:rgb(119 29 29/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-green-900:hover{--tw-bg-opacity:1;background-color:rgb(1 71 55/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-yellow-900:hover{--tw-bg-opacity:1;background-color:rgb(99 49 18/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-gray-500:hover{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(4 108 78/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(200 30 30/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-purple-700:hover{--tw-bg-opacity:1;background-color:rgb(108 43 217/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-\[\#050708\]\/30:hover{background-color:rgba(5,7,8,.3)}.dark .dark\:hover\:bg-\[\#FF9119\]\/80:hover{background-color:rgba(255,145,25,.8)}.dark .dark\:hover\:bg-\[\#050708\]\/40:hover{background-color:rgba(5,7,8,.4)}.dark .dark\:hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(28 100 242/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(5 122 85/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(224 36 36/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-yellow-400:hover{--tw-bg-opacity:1;background-color:rgb(227 160 8/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-purple-500:hover{--tw-bg-opacity:1;background-color:rgb(144 97 249/var(--tw-bg-opacity))}.dark .dark\:hover\:bg-blue-800:hover{--tw-bg-opacity:1;background-color:rgb(30 66 159/var(--tw-bg-opacity))}.dark .dark\:hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark .dark\:hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(63 131 248/var(--tw-text-opacity))}.dark .dark\:hover\:text-blue-900:hover{--tw-text-opacity:1;color:rgb(35 56 118/var(--tw-text-opacity))}.dark .dark\:hover\:text-red-900:hover{--tw-text-opacity:1;color:rgb(119 29 29/var(--tw-text-opacity))}.dark .dark\:hover\:text-green-900:hover{--tw-text-opacity:1;color:rgb(1 71 55/var(--tw-text-opacity))}.dark .dark\:hover\:text-yellow-900:hover{--tw-text-opacity:1;color:rgb(99 49 18/var(--tw-text-opacity))}.dark .dark\:hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.dark .dark\:hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(164 202 254/var(--tw-text-opacity))}.dark .dark\:hover\:text-gray-300:hover{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.dark .dark\:hover\:text-blue-400:hover{--tw-text-opacity:1;color:rgb(118 169 250/var(--tw-text-opacity))}.dark .dark\:focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(63 131 248/var(--tw-border-opacity))}.dark .dark\:focus\:border-green-500:focus{--tw-border-opacity:1;border-color:rgb(14 159 110/var(--tw-border-opacity))}.dark .dark\:focus\:border-red-500:focus{--tw-border-opacity:1;border-color:rgb(240 82 82/var(--tw-border-opacity))}.dark .dark\:focus\:bg-gray-700:focus{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.dark .dark\:focus\:bg-blue-600:focus{--tw-bg-opacity:1;background-color:rgb(28 100 242/var(--tw-bg-opacity))}.dark .dark\:focus\:text-white:focus{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark .dark\:focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(63 131 248/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-blue-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(30 66 159/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-gray-700:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(55 65 81/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-gray-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(31 41 55/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-gray-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(75 85 99/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-green-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(3 84 63/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-red-900:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(119 29 29/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-yellow-900:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 49 18/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-purple-900:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(74 29 150/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-cyan-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(21 94 117/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-teal-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(5 80 92/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-lime-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(63 98 18/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-red-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(155 28 28/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-pink-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(153 21 75/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-purple-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(85 33 181/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-teal-700:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(3 102 114/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-red-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(249 128 128/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-\[\#050708\]\/50:focus{--tw-ring-color:rgba(5,7,8,.5)}.dark .dark\:focus\:ring-\[\#FF9119\]\/40:focus{--tw-ring-color:rgba(255,145,25,.4)}.dark .dark\:focus\:ring-\[\#F7BE38\]\/50:focus{--tw-ring-color:rgba(247,190,56,.5)}.dark .dark\:focus\:ring-\[\#2557D6\]\/50:focus{--tw-ring-color:rgba(37,87,214,.5)}.dark .dark\:focus\:ring-blue-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(28 100 242/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-blue-900:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(35 56 118/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-red-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(224 36 36/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-green-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(5 122 85/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-purple-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(126 58 242/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-teal-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(4 116 129/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-yellow-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(159 88 10/var(--tw-ring-opacity))}.dark .dark\:focus\:ring-orange-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(208 56 1/var(--tw-ring-opacity))}.dark .group:hover .dark\:group-hover\:bg-gray-800\/60{background-color:rgba(31,41,55,.6)}.dark .group:hover .dark\:group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark .group:hover .dark\:group-hover\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.dark .group:focus .dark\:group-focus\:ring-gray-800\/70{--tw-ring-color:rgba(31,41,55,.7)}.peer:focus~.dark .peer-focus\:dark\:text-blue-500{--tw-text-opacity:1;color:rgb(63 131 248/var(--tw-text-opacity))}.dark .peer:focus~.dark\:peer-focus\:ring-blue-800{--tw-ring-opacity:1;--tw-ring-color:rgb(30 66 159/var(--tw-ring-opacity))}.dark .peer:focus~.dark\:peer-focus\:ring-red-800{--tw-ring-opacity:1;--tw-ring-color:rgb(155 28 28/var(--tw-ring-opacity))}.dark .peer:focus~.dark\:peer-focus\:ring-green-800{--tw-ring-opacity:1;--tw-ring-color:rgb(3 84 63/var(--tw-ring-opacity))}.dark .peer:focus~.dark\:peer-focus\:ring-purple-800{--tw-ring-opacity:1;--tw-ring-color:rgb(85 33 181/var(--tw-ring-opacity))}.dark .peer:focus~.dark\:peer-focus\:ring-yellow-800{--tw-ring-opacity:1;--tw-ring-color:rgb(114 59 19/var(--tw-ring-opacity))}.dark .peer:focus~.dark\:peer-focus\:ring-teal-800{--tw-ring-opacity:1;--tw-ring-color:rgb(5 80 92/var(--tw-ring-opacity))}.dark .peer:focus~.dark\:peer-focus\:ring-orange-800{--tw-ring-opacity:1;--tw-ring-color:rgb(138 44 13/var(--tw-ring-opacity))}@media (min-width:640px){.sm\:order-last{order:9999}.sm\:mx-auto{margin-left:auto;margin-right:auto}.sm\:mt-0{margin-top:0}.sm\:mb-0{margin-bottom:0}.sm\:ml-auto{margin-left:auto}.sm\:inline-block{display:inline-block}.sm\:flex{display:flex}.sm\:grid{display:grid}.sm\:hidden{display:none}.sm\:h-64{height:16rem}.sm\:h-10{height:2.5rem}.sm\:h-6{height:1.5rem}.sm\:h-9{height:2.25rem}.sm\:h-7{height:1.75rem}.sm\:w-auto{width:auto}.sm\:w-10{width:2.5rem}.sm\:w-6{width:1.5rem}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-center{justify-content:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-6{gap:1.5rem}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px*var(--tw-space-y-reverse));margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))}.sm\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.sm\:divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)));border-right-width:calc(1px*var(--tw-divide-x-reverse))}.sm\:rounded-lg{border-radius:.5rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:py-4{padding-bottom:1rem;padding-top:1rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:pt-4{padding-top:1rem}.sm\:pr-8{padding-right:2rem}.sm\:pr-4{padding-right:1rem}.sm\:pl-4{padding-left:1rem}.sm\:pl-2{padding-left:.5rem}.sm\:text-center{text-align:center}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-xs{font-size:.75rem;line-height:1rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:ring-8{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}}@media (min-width:768px){.md\:inset-0{bottom:0;left:0;right:0;top:0}.md\:order-2{order:2}.md\:order-1{order:1}.md\:ml-2{margin-left:.5rem}.md\:mt-0{margin-top:0}.md\:mb-0{margin-bottom:0}.md\:mr-6{margin-right:1.5rem}.md\:mr-0{margin-right:0}.md\:block{display:block}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:h-auto{height:auto}.md\:h-full{height:100%}.md\:w-48{width:12rem}.md\:w-auto{width:auto}.md\:max-w-xl{max-width:36rem}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-8{gap:2rem}.md\:space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.md\:space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(2rem*var(--tw-space-x-reverse))}.md\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px*var(--tw-space-y-reverse));margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))}.md\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.md\:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.md\:rounded-none{border-radius:0}.md\:rounded-l-lg{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem}.md\:border-0{border-width:0}.md\:bg-transparent{background-color:transparent}.md\:p-0{padding:0}.md\:p-6{padding:1.5rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:py-8{padding-bottom:2rem;padding-top:2rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:font-medium{font-weight:500}.md\:text-blue-700{--tw-text-opacity:1;color:rgb(26 86 219/var(--tw-text-opacity))}.md\:hover\:bg-transparent:hover{background-color:transparent}.md\:hover\:text-blue-700:hover{--tw-text-opacity:1;color:rgb(26 86 219/var(--tw-text-opacity))}.dark .md\:dark\:bg-transparent{background-color:transparent}.dark .md\:dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark .md\:dark\:hover\:bg-transparent:hover{background-color:transparent}.dark .md\:dark\:hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}}@media (min-width:1024px){.lg\:static{position:static}.lg\:sticky{position:-webkit-sticky;position:sticky}.lg\:top-12{top:3rem}.lg\:my-12{margin-bottom:3rem;margin-top:3rem}.lg\:my-8{margin-bottom:2rem;margin-top:2rem}.lg\:mb-0{margin-bottom:0}.lg\:mr-0{margin-right:0}.lg\:mt-6{margin-top:1.5rem}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:h-auto{height:auto}.lg\:h-screen{height:100vh}.lg\:max-h-full{max-height:100%}.lg\:w-48{width:12rem}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:gap-8{gap:2rem}.lg\:self-center{align-self:center}.lg\:overflow-visible{overflow:visible}.lg\:overflow-y-visible{overflow-y:visible}.lg\:p-8{padding:2rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:px-4{padding-left:1rem;padding-right:1rem}.lg\:py-0{padding-bottom:0;padding-top:0}.lg\:px-2{padding-left:.5rem;padding-right:.5rem}.lg\:pt-0{padding-top:0}.lg\:pt-10{padding-top:2.5rem}.lg\:pb-16{padding-bottom:4rem}.lg\:pl-0{padding-left:0}.lg\:pt-2{padding-top:.5rem}.lg\:pb-20{padding-bottom:5rem}.lg\:text-xs{font-size:.75rem;line-height:1rem}.lg\:text-sm{font-size:.875rem;line-height:1.25rem}.lg\:text-xl{font-size:1.25rem;line-height:1.75rem}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}}@media (min-width:1280px){.xl\:ml-16{margin-left:4rem}.xl\:block{display:block}.xl\:inline{display:inline}.xl\:h-80{height:20rem}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:gap-24{gap:6rem}.xl\:gap-6{gap:1.5rem}.xl\:py-24{padding-bottom:6rem;padding-top:6rem}.xl\:px-3{padding-left:.75rem;padding-right:.75rem}.xl\:pb-24{padding-bottom:6rem}.xl\:pl-4{padding-left:1rem}.xl\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:1536px){.\32xl\:block{display:block}.\32xl\:h-96{height:24rem}.\32xl\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.\32xl\:gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.\32xl\:space-x-0>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(0px*(1 - var(--tw-space-x-reverse)));margin-right:calc(0px*var(--tw-space-x-reverse))}}
 /*
 ! tailwindcss v3.0.15 | MIT License | https://tailwindcss.com
 */
@@ -7796,7 +7797,7 @@ readers do not read off random characters that represent icons */
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: #e5e7eb; /* 2 */
+  border-color: #E5E7EB; /* 2 */
 }
 
 ::before,
@@ -8099,18 +8100,18 @@ textarea {
 
 input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
+  color: #9CA3AF; /* 2 */
 }
 
 input:-ms-input-placeholder, textarea:-ms-input-placeholder {
   opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
+  color: #9CA3AF; /* 2 */
 }
 
 input::placeholder,
 textarea::placeholder {
   opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
+  color: #9CA3AF; /* 2 */
 }
 
 /*
@@ -8171,7 +8172,7 @@ Ensure the default browser behavior of the `hidden` attribute.
      -moz-appearance: none;
           appearance: none;
   background-color: #fff;
-  border-color: #6b7280;
+  border-color: #6B7280;
   border-width: 1px;
   border-radius: 0px;
   padding-top: 0.5rem;
@@ -8189,25 +8190,25 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: #2563eb;
+  --tw-ring-color: #1C64F2;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  border-color: #2563eb;
+  border-color: #1C64F2;
 }
 
 input::-moz-placeholder, textarea::-moz-placeholder{
-  color: #6b7280;
+  color: #6B7280;
   opacity: 1;
 }
 
 input:-ms-input-placeholder, textarea:-ms-input-placeholder{
-  color: #6b7280;
+  color: #6B7280;
   opacity: 1;
 }
 
 input::placeholder,textarea::placeholder{
-  color: #6b7280;
+  color: #6B7280;
   opacity: 1;
 }
 
@@ -8225,7 +8226,7 @@ input::placeholder,textarea::placeholder{
 }
 
 select{
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
   background-position: right 0.5rem center;
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
@@ -8261,9 +8262,9 @@ select{
   flex-shrink: 0;
   height: 1rem;
   width: 1rem;
-  color: #2563eb;
+  color: #1C64F2;
   background-color: #fff;
-  border-color: #6b7280;
+  border-color: #6B7280;
   border-width: 1px;
   --tw-shadow: 0 0 #0000;
 }
@@ -8282,7 +8283,7 @@ select{
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 2px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: #2563eb;
+  --tw-ring-color: #1C64F2;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -8337,6 +8338,330 @@ select{
   outline: 1px auto -webkit-focus-ring-color;
 }
 
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #6B7280;
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #1C64F2;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-color: #1C64F2;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder{
+  color: #6B7280;
+  opacity: 1;
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder{
+  color: #6B7280;
+  opacity: 1;
+}
+
+input::placeholder,textarea::placeholder{
+  color: #6B7280;
+  opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper{
+  padding: 0;
+}
+
+::-webkit-date-and-time-value{
+  min-height: 1.5em;
+}
+
+select{
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+          color-adjust: exact;
+}
+
+[multiple]{
+  background-image: initial;
+  background-position: initial;
+  background-repeat: unset;
+  background-size: initial;
+  padding-right: 0.75rem;
+  -webkit-print-color-adjust: unset;
+          color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio']{
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+          color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #1C64F2;
+  background-color: #fff;
+  border-color: #6B7280;
+  border-width: 1px;
+  --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox']{
+  border-radius: 0px;
+}
+
+[type='radio']{
+  border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #1C64F2;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+[type='checkbox']:checked,[type='radio']:checked,.dark [type='checkbox']:checked,.dark [type='radio']:checked{
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked{
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked{
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:indeterminate{
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='file']{
+  background: unset;
+  border-color: inherit;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-size: unset;
+  line-height: inherit;
+}
+
+[type='file']:focus{
+  outline: 1px auto inherit;
+}
+
+input[type=file]::-webkit-file-upload-button{
+  color: white;
+  background: #1F2937;
+  border: 0;
+  font-weight: 500;
+  font-size: 0.875rem;
+  cursor: pointer;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  padding-left: 2rem;
+  padding-right: 1rem;
+  -webkit-margin-start: -1rem;
+          margin-inline-start: -1rem;
+  -webkit-margin-end: 1rem;
+          margin-inline-end: 1rem;
+}
+
+input[type=file]::file-selector-button{
+  color: white;
+  background: #1F2937;
+  border: 0;
+  font-weight: 500;
+  font-size: 0.875rem;
+  cursor: pointer;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  padding-left: 2rem;
+  padding-right: 1rem;
+  -webkit-margin-start: -1rem;
+          margin-inline-start: -1rem;
+  -webkit-margin-end: 1rem;
+          margin-inline-end: 1rem;
+}
+
+input[type=file]::-webkit-file-upload-button:hover{
+  background: #374151;
+}
+
+input[type=file]::file-selector-button:hover{
+  background: #374151;
+}
+
+.dark input[type=file]::-webkit-file-upload-button{
+  color: white;
+  background: #4B5563;
+}
+
+.dark input[type=file]::file-selector-button{
+  color: white;
+  background: #4B5563;
+}
+
+.dark input[type=file]::-webkit-file-upload-button:hover{
+  background: #6B7280;
+}
+
+.dark input[type=file]::file-selector-button:hover{
+  background: #6B7280;
+}
+
+input[type="range"]::-webkit-slider-thumb{
+  height: 1.25rem;
+  width: 1.25rem;
+  background: #1C64F2;
+  border-radius: 9999px;
+  border: 0;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+input[type="range"]:disabled::-webkit-slider-thumb{
+  background: #9CA3AF;
+}
+
+.dark input[type="range"]:disabled::-webkit-slider-thumb{
+  background: #6B7280;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1px;
+  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
+}
+
+input[type="range"]::-moz-range-thumb{
+  height: 1.25rem;
+  width: 1.25rem;
+  background: #1C64F2;
+  border-radius: 9999px;
+  border: 0;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+input[type="range"]:disabled::-moz-range-thumb{
+  background: #9CA3AF;
+}
+
+.dark input[type="range"]:disabled::-moz-range-thumb{
+  background: #6B7280;
+}
+
+input[type="range"]::-moz-range-progress{
+  background: #3F83F8;
+}
+
+input[type="range"]::-ms-fill-lower{
+  background: #3F83F8;
+}
+
+[data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before{
+  border-style: solid;
+  border-color: #E5E7EB;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before{
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow:before{
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow:before{
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > .tooltip-arrow:before{
+  border-top-width: 1px;
+  border-right-width: 1px;
+}
+
+.tooltip[data-popper-placement^='top'] > .tooltip-arrow{
+  bottom: -4px;
+}
+
+.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow{
+  top: -4px;
+}
+
+.tooltip[data-popper-placement^='left'] > .tooltip-arrow{
+  right: -4px;
+}
+
+.tooltip[data-popper-placement^='right'] > .tooltip-arrow{
+  left: -4px;
+}
+
+.tooltip.invisible > .tooltip-arrow:before{
+  visibility: hidden;
+}
+
 *, ::before, ::after{
   --tw-translate-x: 0;
   --tw-translate-y: 0;
@@ -8357,7 +8682,7 @@ select{
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-color: rgb(63 131 248 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -8692,6 +9017,9 @@ input[type=text]:disabled{
 .\!mb-0{
   margin-bottom: 0px !important;
 }
+.mb-3{
+  margin-bottom: 0.75rem;
+}
 .block{
   display: block;
 }
@@ -8755,6 +9083,9 @@ input[type=text]:disabled{
 .h-2{
   height: 0.5rem;
 }
+.h-48{
+  height: 12rem;
+}
 .max-h-60{
   max-height: 15rem;
 }
@@ -8818,6 +9149,9 @@ input[type=text]:disabled{
 .w-11{
   width: 2.75rem;
 }
+.w-10{
+  width: 2.5rem;
+}
 .min-w-full{
   min-width: 100%;
 }
@@ -9159,7 +9493,7 @@ input[type=text]:disabled{
 }
 .border-red-200{
   --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity));
+  border-color: rgb(251 213 213 / var(--tw-border-opacity));
 }
 .border-emerald-500{
   --tw-border-opacity: 1;
@@ -9203,7 +9537,7 @@ input[type=text]:disabled{
 }
 .bg-red-50{
   --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+  background-color: rgb(253 242 242 / var(--tw-bg-opacity));
 }
 .bg-gray-500{
   --tw-bg-opacity: 1;
@@ -9224,18 +9558,18 @@ input[type=text]:disabled{
   background-image: linear-gradient(to left, var(--tw-gradient-stops));
 }
 .from-white{
-  --tw-gradient-from: #fff;
+  --tw-gradient-from: #ffffff;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0));
 }
 .from-gray-50{
-  --tw-gradient-from: #f9fafb;
+  --tw-gradient-from: #F9FAFB;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(249 250 251 / 0));
 }
 .to-transparent{
   --tw-gradient-to: transparent;
 }
 .fill-white{
-  fill: #fff;
+  fill: #ffffff;
 }
 .p-2{
   padding: 0.5rem;
@@ -9412,6 +9746,9 @@ input[type=text]:disabled{
 .pt-0{
   padding-top: 0px;
 }
+.pb-6{
+  padding-bottom: 1.5rem;
+}
 .text-left{
   text-align: left;
 }
@@ -9510,15 +9847,15 @@ input[type=text]:disabled{
 }
 .text-indigo-300{
   --tw-text-opacity: 1;
-  color: rgb(165 180 252 / var(--tw-text-opacity));
+  color: rgb(180 198 252 / var(--tw-text-opacity));
 }
 .text-green-300{
   --tw-text-opacity: 1;
-  color: rgb(134 239 172 / var(--tw-text-opacity));
+  color: rgb(132 225 188 / var(--tw-text-opacity));
 }
 .text-yellow-300{
   --tw-text-opacity: 1;
-  color: rgb(253 224 71 / var(--tw-text-opacity));
+  color: rgb(250 202 21 / var(--tw-text-opacity));
 }
 .text-amber-300{
   --tw-text-opacity: 1;
@@ -9534,11 +9871,11 @@ input[type=text]:disabled{
 }
 .text-green-600{
   --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
+  color: rgb(5 122 85 / var(--tw-text-opacity));
 }
 .text-yellow-600{
   --tw-text-opacity: 1;
-  color: rgb(202 138 4 / var(--tw-text-opacity));
+  color: rgb(159 88 10 / var(--tw-text-opacity));
 }
 .text-amber-600{
   --tw-text-opacity: 1;
@@ -9558,15 +9895,15 @@ input[type=text]:disabled{
 }
 .text-red-500{
   --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+  color: rgb(240 82 82 / var(--tw-text-opacity));
 }
 .text-orange-500{
   --tw-text-opacity: 1;
-  color: rgb(249 115 22 / var(--tw-text-opacity));
+  color: rgb(255 90 31 / var(--tw-text-opacity));
 }
 .text-red-700{
   --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
+  color: rgb(200 30 30 / var(--tw-text-opacity));
 }
 .text-emerald-700{
   --tw-text-opacity: 1;
@@ -9578,15 +9915,15 @@ input[type=text]:disabled{
 }
 .text-red-400{
   --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
+  color: rgb(249 128 128 / var(--tw-text-opacity));
 }
 .underline{
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
 .decoration-gray-400{
-  -webkit-text-decoration-color: #9ca3af;
-          text-decoration-color: #9ca3af;
+  -webkit-text-decoration-color: #9CA3AF;
+          text-decoration-color: #9CA3AF;
 }
 .decoration-dotted{
   -webkit-text-decoration-style: dotted;
@@ -10156,7 +10493,7 @@ body .choices__input:focus{
   border-width: 1px;
   border-color: transparent;
   --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+  background-color: rgb(200 30 30 / var(--tw-bg-opacity));
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -10172,7 +10509,7 @@ body .choices__input:focus{
 }
 .button-danger-md:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+  background-color: rgb(224 36 36 / var(--tw-bg-opacity));
 }
 .button-danger-md:focus{
   outline: 2px solid transparent;
@@ -10181,33 +10518,33 @@ body .choices__input:focus{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity));
   --tw-ring-offset-width: 2px;
 }
 .button-danger-md:disabled{
   --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+  background-color: rgb(248 180 180 / var(--tw-bg-opacity));
   opacity: 0.7;
 }
 .button-danger-md:hover:disabled{
   --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+  background-color: rgb(248 180 180 / var(--tw-bg-opacity));
 }
 .dark .button-danger-md{
   --tw-bg-opacity: 1;
-  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+  background-color: rgb(155 28 28 / var(--tw-bg-opacity));
 }
 .dark .button-danger-md:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+  background-color: rgb(200 30 30 / var(--tw-bg-opacity));
 }
 .dark .button-danger-md:disabled{
   --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+  background-color: rgb(119 29 29 / var(--tw-bg-opacity));
 }
 .dark .button-danger-md:hover:disabled{
   --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+  background-color: rgb(119 29 29 / var(--tw-bg-opacity));
 }
 .button-danger-outline-md{
   display: inline-flex;
@@ -10215,7 +10552,7 @@ body .choices__input:focus{
   border-radius: 0.375rem;
   border-width: 1px;
   --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+  border-color: rgb(240 82 82 / var(--tw-border-opacity));
   background-color: transparent;
   padding-left: 1rem;
   padding-right: 1rem;
@@ -10225,11 +10562,11 @@ body .choices__input:focus{
   line-height: 1.25rem;
   font-weight: 500;
   --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
+  color: rgb(224 36 36 / var(--tw-text-opacity));
 }
 .button-danger-outline-md:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+  background-color: rgb(253 242 242 / var(--tw-bg-opacity));
 }
 .button-danger-outline-md:focus{
   outline: 2px solid transparent;
@@ -10238,19 +10575,19 @@ body .choices__input:focus{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity));
   --tw-ring-offset-width: 2px;
 }
 .dark .button-danger-outline-md{
   --tw-border-opacity: 1;
-  border-color: rgb(153 27 27 / var(--tw-border-opacity));
+  border-color: rgb(155 28 28 / var(--tw-border-opacity));
   background-color: transparent;
   --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
+  color: rgb(224 36 36 / var(--tw-text-opacity));
 }
 .dark .button-danger-outline-md:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+  background-color: rgb(155 28 28 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
@@ -10349,7 +10686,7 @@ body .choices__input:focus{
 }
 .hover\:bg-red-100:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+  background-color: rgb(253 232 232 / var(--tw-bg-opacity));
 }
 .hover\:bg-emerald-700:hover{
   --tw-bg-opacity: 1;
@@ -10385,11 +10722,11 @@ body .choices__input:focus{
 }
 .hover\:text-red-900:hover{
   --tw-text-opacity: 1;
-  color: rgb(127 29 29 / var(--tw-text-opacity));
+  color: rgb(119 29 29 / var(--tw-text-opacity));
 }
 .hover\:text-red-400:hover{
   --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
+  color: rgb(249 128 128 / var(--tw-text-opacity));
 }
 .hover\:text-emerald-700:hover{
   --tw-text-opacity: 1;
@@ -10475,11 +10812,11 @@ body .choices__input:focus{
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 .group:hover .group-hover\:from-gray-50{
-  --tw-gradient-from: #f9fafb;
+  --tw-gradient-from: #F9FAFB;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(249 250 251 / 0));
 }
 .group:hover .group-hover\:from-gray-100{
-  --tw-gradient-from: #f3f4f6;
+  --tw-gradient-from: #F3F4F6;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(243 244 246 / 0));
 }
 .group:hover .group-hover\:text-white{
@@ -10492,7 +10829,7 @@ body .choices__input:focus{
 }
 .group:hover .group-hover\:text-red-600{
   --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
+  color: rgb(224 36 36 / var(--tw-text-opacity));
 }
 .group:focus .group-focus\:visible{
   visibility: visible;
@@ -10523,7 +10860,7 @@ body .choices__input:focus{
 }
 .dark .dark\:border-red-700{
   --tw-border-opacity: 1;
-  border-color: rgb(185 28 28 / var(--tw-border-opacity));
+  border-color: rgb(200 30 30 / var(--tw-border-opacity));
 }
 .dark .dark\:bg-gray-900{
   --tw-bg-opacity: 1;
@@ -10543,7 +10880,7 @@ body .choices__input:focus{
 }
 .dark .dark\:bg-red-800{
   --tw-bg-opacity: 1;
-  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+  background-color: rgb(155 28 28 / var(--tw-bg-opacity));
 }
 .dark .dark\:bg-emerald-800{
   --tw-bg-opacity: 1;
@@ -10568,7 +10905,7 @@ body .choices__input:focus{
   --tw-bg-opacity: 0.75;
 }
 .dark .dark\:from-gray-800{
-  --tw-gradient-from: #1f2937;
+  --tw-gradient-from: #1F2937;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(31 41 55 / 0));
 }
 .dark .dark\:from-gray-700{
@@ -10589,19 +10926,19 @@ body .choices__input:focus{
 }
 .dark .dark\:text-indigo-600{
   --tw-text-opacity: 1;
-  color: rgb(79 70 229 / var(--tw-text-opacity));
+  color: rgb(88 80 236 / var(--tw-text-opacity));
 }
 .dark .dark\:text-green-600{
   --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
+  color: rgb(5 122 85 / var(--tw-text-opacity));
 }
 .dark .dark\:text-yellow-600{
   --tw-text-opacity: 1;
-  color: rgb(202 138 4 / var(--tw-text-opacity));
+  color: rgb(159 88 10 / var(--tw-text-opacity));
 }
 .dark .dark\:text-orange-600{
   --tw-text-opacity: 1;
-  color: rgb(234 88 12 / var(--tw-text-opacity));
+  color: rgb(208 56 1 / var(--tw-text-opacity));
 }
 .dark .dark\:text-rose-600{
   --tw-text-opacity: 1;
@@ -10613,15 +10950,15 @@ body .choices__input:focus{
 }
 .dark .dark\:text-green-400{
   --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
+  color: rgb(49 196 141 / var(--tw-text-opacity));
 }
 .dark .dark\:text-yellow-400{
   --tw-text-opacity: 1;
-  color: rgb(250 204 21 / var(--tw-text-opacity));
+  color: rgb(227 160 8 / var(--tw-text-opacity));
 }
 .dark .dark\:text-orange-400{
   --tw-text-opacity: 1;
-  color: rgb(251 146 60 / var(--tw-text-opacity));
+  color: rgb(255 138 76 / var(--tw-text-opacity));
 }
 .dark .dark\:text-rose-500{
   --tw-text-opacity: 1;
@@ -10633,7 +10970,7 @@ body .choices__input:focus{
 }
 .dark .dark\:text-red-300{
   --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
+  color: rgb(248 180 180 / var(--tw-text-opacity));
 }
 .dark .dark\:text-gray-200{
   --tw-text-opacity: 1;
@@ -10649,11 +10986,11 @@ body .choices__input:focus{
 }
 .dark .dark\:text-orange-700{
   --tw-text-opacity: 1;
-  color: rgb(194 65 12 / var(--tw-text-opacity));
+  color: rgb(180 52 3 / var(--tw-text-opacity));
 }
 .dark .dark\:text-red-400{
   --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
+  color: rgb(249 128 128 / var(--tw-text-opacity));
 }
 .dark .dark\:text-emerald-500{
   --tw-text-opacity: 1;
@@ -10669,15 +11006,19 @@ body .choices__input:focus{
 }
 .dark .dark\:text-red-500{
   --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+  color: rgb(240 82 82 / var(--tw-text-opacity));
 }
 .dark .dark\:text-gray-800{
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
+.dark .dark\:text-red-600{
+  --tw-text-opacity: 1;
+  color: rgb(224 36 36 / var(--tw-text-opacity));
+}
 .dark .dark\:decoration-gray-500{
-  -webkit-text-decoration-color: #6b7280;
-          text-decoration-color: #6b7280;
+  -webkit-text-decoration-color: #6B7280;
+          text-decoration-color: #6B7280;
 }
 .dark .dark\:placeholder-gray-400::-moz-placeholder{
   --tw-placeholder-opacity: 1;
@@ -10722,7 +11063,7 @@ body .choices__input:focus{
 }
 .dark .dark\:hover\:bg-red-700:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+  background-color: rgb(200 30 30 / var(--tw-bg-opacity));
 }
 .dark .dark\:hover\:bg-emerald-900:hover{
   --tw-bg-opacity: 1;
@@ -10746,7 +11087,7 @@ body .choices__input:focus{
 }
 .dark .dark\:hover\:text-red-600:hover{
   --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
+  color: rgb(224 36 36 / var(--tw-text-opacity));
 }
 .dark .dark\:hover\:text-white:hover{
   --tw-text-opacity: 1;
@@ -10785,12 +11126,12 @@ body .choices__input:focus{
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(55 65 81 / 0));
 }
 .dark .group:hover .dark\:group-hover\:from-gray-600{
-  --tw-gradient-from: #4b5563;
+  --tw-gradient-from: #4B5563;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(75 85 99 / 0));
 }
 .dark .group:hover .dark\:group-hover\:text-red-700{
   --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
+  color: rgb(200 30 30 / var(--tw-text-opacity));
 }
 @media (min-width: 640px){
 
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..b0056eff
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,1639 @@
+<!DOCTYPE html>
+<html class="h-full" xmlns:x-transition="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Kobold Plus Fight Club - The first rule of Kobold Fight Club is 'Yip Yip!'</title>
+	<meta charset="utf-8">
+	<link rel="manifest" href="manifest.json">
+	<link rel="apple-touch-icon" href="images/logo.png" sizes="600x600">
+	<link rel="icon" href="images/logo.png" sizes="600x600">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+	<script defer src="js/app.js"></script>
+
+	<link href="css/styles.css" rel="stylesheet">
+
+	<script>
+		// On page load or when changing themes, best to add inline in `head` to avoid FOUC
+		if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+			window.theme = 'dark'
+			document.documentElement.classList.add('dark')
+			localStorage.theme = 'dark'
+		} else {
+			window.theme = 'light'
+			document.documentElement.classList.remove('dark')
+			localStorage.theme = 'light'
+		}
+
+		if(window.navigator.userAgent.includes('Surface Duo') && !window.navigator.userAgent.includes('Surface Duo 2')) {
+			document.documentElement.classList.add('surface-duo');
+		}
+		if(window.navigator.userAgent.includes('Surface Duo 2')) {
+			document.documentElement.classList.add('surface-duo-2');
+		}
+
+		document.addEventListener('alpine:init', () => {
+			tippy.setDefaultProps({
+				delay: 700
+			});
+
+			// Magic: $tooltip
+			Alpine.magic('tooltip', el => message => {
+				let instance = tippy(el, { content: message, trigger: 'manual' })
+
+				instance.show()
+
+				setTimeout(() => {
+					instance.hide()
+
+					setTimeout(() => instance.destroy(), 150)
+				}, 2000)
+			})
+
+			// Directive: x-tooltip
+			Alpine.directive('tooltip', (el, { expression }, { evaluateLater, effect }) => {
+				let createMessage = evaluateLater(expression);
+
+				effect(() => {
+					createMessage(tooltipString => {
+						if(el._tippy) {
+							el._tippy.destroy();
+						}
+
+						tippy(el, {
+							content: tooltipString,
+							delay: 200,
+							theme: window.theme ?? 'dark'
+						});
+					})
+				})
+			})
+
+			Alpine.directive('tippy', (el, { expression }) => {
+				tippy(el, { content: expression, theme: window.theme ?? 'dark' });
+			})
+		})
+	</script>
+</head>
+
+<body class="h-full"
+	  x-data="window.app()"
+	  @filters-changed.window="filtersChanged"
+	  @reset-filters.window="resetFilters"
+	  @resize.window.debounce.50ms="showFilters = (Math.max(
+    document.body.scrollWidth,
+    document.documentElement.scrollWidth,
+    document.body.offsetWidth,
+    document.documentElement.offsetWidth,
+    document.documentElement.clientWidth
+  ) > 1535)"
+>
+	<div
+		class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-300 flex flex-col"
+	>
+
+		<nav class="bg-emerald-700 border-b border-gray-200 dark:border-gray-900 shrink-0">
+			<div class="mx-auto px-4 sm:px-6 lg:px-6">
+				<div class="flex justify-between h-16 w-full">
+					<div class="flex">
+						<div class="flex-shrink-0 flex items-center">
+							<a href="" class="flex items-center">
+								<img class="h-8 w-auto" src="images/header_logo.png" alt="Fantasy Calendar"> <span class="hidden md:inline pl-2 text-lg font-bold text-white">Kobold+ Fight Club</span>
+							</a>
+						</div>
+					</div>
+					<div class="hidden lg:flex text-white lg:-my-px lg:ml-6 lg:space-x-8 items-center">
+                        <a @click="showKeyboardModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Keyboard Shortcuts <span class="inline-flex items-center px-1 py-0.5 rounded text-xs font-medium bg-emerald-800 text-emerald-100 ml-1">Ctrl+/</span></a>
+                        <a @click="showImporterModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Import Custom Monsters</a>
+                        <a href="https://fantasy-calendar.com/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Fantasy Calendar</a>
+                        <a href="https://fantasycomputer.works/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">About</a>
+						<a x-tippy="Toggle light mode (ctrl+shift+\)" @click="toggleTheme()" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300 h-full">
+							<i :class="{ 'fa-moon': theme === 'light', 'fa-sun': theme === 'dark' }" class="fa"></i>
+						</a>
+					</div>
+					<div class="-mr-2 flex items-center lg:hidden">
+						<button class="inline-flex items-center justify-center p-2 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white" @click="menu = !menu">
+							<span class="sr-only">Open main menu</span>
+							<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+							</svg>
+							<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+							</svg>
+						</button>
+					</div>
+				</div>
+			</div>
+
+			<div class="transition-all duration-400 ease-in-out overflow-hidden hidden" :class="{ 'block': menu, 'hidden': !menu }">
+				<div class="pt-2 pb-3 space-y-1">
+					<a href="https://fantasy-calendar.com/" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-emerald-300 hover:text-white hover:border-gray-300">Fantasy Calendar</a>
+					<a href="javascript:" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-emerald-300 hover:text-white hover:border-gray-300">About</a>
+                    <a x-tippy="Toggle light mode (ctrl+shift+\)" @click="toggleTheme()" href="javascript:" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-emerald-300 hover:text-white hover:border-gray-300">
+                        <i :class="theme === 'light' ? 'fa-moon' : 'fa-sun'" class="fa"></i> <span x-text="`Toggle theme`"></span>
+                    </a>
+				</div>
+			</div>
+		</nav>
+
+		<div class="flex py-4 sm:py-6 lg:py-8 w-full max-w-[2560px] relative grow mx-auto flex-col md:flex-row">
+			<div class="relative self-center mb-6 bg-gray-200 dark:bg-gray-800 rounded-lg p-0.5 flex sm:mt-8 h-10 md:hidden">
+				<div class="absolute bg-gray-100 dark:bg-gray-700 w-1/2 transition-all duration-300 inset-y-1 rounded-md" :class="{ 'translate-x-full -ml-1.5': mobileEncounterTab, 'left-1': !mobileEncounterTab }"></div>
+				<button @click="mobileEncounterTab = false" type="button" :class="{ 'text-gray-900 ': !mobileEncounterTab, 'text-gray-700': mobileEncounterTab }" class="relative border-gray-200 rounded-md shadow-sm py-2 text-sm font-medium dark:text-gray-100 whitespace-nowrap focus:outline-none focus:z-10 w-40">Encounter <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-300 dark:bg-gray-300 text-gray-800" x-text="encounter.groups.reduce((carry, item) => carry + item.count, 0)" x-show="encounter.groups.length"></span></button>
+				<button @click="mobileEncounterTab = true" type="button" :class="{ 'text-gray-900 ': mobileEncounterTab, 'text-gray-700': !mobileEncounterTab }" class="ml-0.5 relative border border-transparent rounded-md py-2 text-sm font-medium whitespace-nowrap dark:text-gray-100 focus:outline-none focus:z-10 w-40">Monsters</button>
+			</div>
+
+			<div id="monsters_box" :class="{ 'hidden md:block': !mobileEncounterTab }" class="grow px-4 md:pr-0 md:absolute md:inset-y-0 md:py-8 left-0 right-0 md:inset-none md:pl-[28rem] 2xl:right-[24rem] overflow-y-auto scrollbar">
+				<label for="search" class="max-w-full block text-sm font-medium text-gray-700 sr-only">Search monsters</label>
+
+				<div class="px-4 sm:px-6 lg:px-8">
+					<div class="max-w-full mt-1 flex flex-col lg:flex-row rounded-md shadow-sm">
+						<div class="relative items-stretch grow focus-within:z-10">
+							<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+								<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+								</svg>
+							</div>
+
+							<input type="search" name="search" id="search" x-model="search" @input.debounce="updateFilteredMonsters" class="border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none pl-10 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600" :placeholder="searchPlaceholder">
+
+							<div class="absolute inset-y-0 right-0 flex py-1.5 pr-2 hidden md:block">
+								<kbd class="inline-flex items-center border border-gray-200 dark:border-gray-600 rounded px-2 text-sm font-sans font-medium text-gray-400" x-text="navigator.platform.toLowerCase().includes('mac') ? '⌘K' : 'Ctrl K'"></kbd>
+							</div>
+						</div>
+
+						<div class="flex w-full lg:w-auto mt-2 lg:mt-0">
+							<div class="w-full lg:w-auto">
+								<select id="monstersPerPage" @change="setMonstersPerPage(Number($event.target.value))" name="location" class="block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-l-md lg:rounded-none 2xl:rounded-r-md border-gray-300 border-l-0 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
+									<option value="10" :selected="monstersPerPage === 10">10 per page</option>
+									<option value="25" :selected="monstersPerPage === 25">25 per page</option>
+									<option value="50" :selected="monstersPerPage === 50">50 per page</option>
+									<option value="100" :selected="monstersPerPage === 100">100 per page</option>
+								</select>
+							</div>
+
+							<div class="relative inline-block text-left 2xl:hidden" x-data="{ filtersMenu: true }" x-tippy="Filter monsters (Ctrl+L)">
+								<button @click="showFilters =! showFilters" type="button" class="-ml-px h-full relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md bg-white disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 dark:text-gray-400 text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500">
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+									</svg>
+									<span>Filter</span>
+									<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-300 text-gray-800" x-show="nonDefaultFiltersCount > 0" x-text="nonDefaultFiltersCount"></span>
+								</button>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- This example requires Tailwind CSS v2.0+ -->
+				<div class="px-4 sm:px-6 lg:px-8">
+
+					<div class="-mx-4 mt-8 overflow-x-auto shadow ring-1 ring-black ring-opacity-5 sm:-mx-6 md:mx-0 md:rounded-lg">
+						<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
+							<thead class="bg-gray-50 dark:bg-gray-700">
+							<tr>
+								<th scope="col" class="py-3.5 px-3 text-center text-sm font-semibold text-gray-900 sm:pl-6 w-8 max-w-8">
+									<span class="sr-only">Add to encounter</span>
+								</th>
+								<th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none cursor-pointer group whitespace-nowrap w-64" @click="setSortBy('name')">
+									Name
+									<span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" :class="{ 'invisible': sortBy !== 'name' }">
+                                        <i class="fa-solid" :class="{
+                                            'fa-chevron-down': sortByDesc || sortBy !== 'name',
+                                            'fa-chevron-up': !sortByDesc && sortBy === 'name'
+                                        }"></i>
+                                    </span>
+								</th>
+								<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none cursor-pointer table-cell group whitespace-nowrap w-32" @click="setSortBy('size')">
+									Size
+									<span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" :class="{ 'invisible': sortBy !== 'size' }">
+                                        <i class="fa-solid" :class="{
+                                            'fa-chevron-down': sortByDesc || sortBy !== 'size',
+                                            'fa-chevron-up': !sortByDesc && sortBy === 'size'
+                                        }"></i>
+                                    </span>
+								</th>
+								<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none cursor-pointer sm:table-cell group whitespace-nowrap w-32" @click="setSortBy('cr')">
+									CR
+									<span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" :class="{ 'invisible': sortBy !== 'cr' }">
+                                        <i class="fa-solid" :class="{
+                                            'fa-chevron-down': sortByDesc || sortBy !== 'cr',
+                                            'fa-chevron-up': !sortByDesc && sortBy === 'cr'
+                                        }"></i>
+                                    </span>
+								</th>
+								<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none cursor-pointer lg:table-cell group whitespace-nowrap w-32" @click="setSortBy('type')">
+									Type
+									<span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" :class="{ 'invisible': sortBy !== 'type' }">
+                                        <i class="fa-solid" :class="{
+                                            'fa-chevron-down': sortByDesc || sortBy !== 'type',
+                                            'fa-chevron-up': !sortByDesc && sortBy === 'type'
+                                        }"></i>
+                                    </span>
+								</th>
+								<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none cursor-pointer lg:table-cell group whitespace-nowrap w-32" @click="setSortBy('alignment')">
+									Alignment
+									<span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" :class="{ 'invisible': sortBy !== 'alignment' }">
+                                        <i class="fa-solid" :class="{
+                                            'fa-chevron-down': sortByDesc || sortBy !== 'alignment',
+                                            'fa-chevron-up': !sortByDesc && sortBy === 'alignment'
+                                        }"></i>
+                                    </span>
+								</th>
+							</tr>
+							</thead>
+							<tbody class="divide-y divide-gray-200 dark:divide-gray-600 bg-white dark:bg-gray-900">
+							<template x-for="monster in monsters">
+								<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-800">
+									<td class="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-300 text-center w-8 max-w-8">
+										<span class="primary-link cursor-pointer select-none"
+											@click="encounter.addMonster(monster)"
+											x-tooltip="encounter.getDifficultyFromExperience(monster.cr.exp)"
+											>Add</span>
+									</td>
+									<td class="w-full max-w-0 py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-100 w-64 max-w-64 truncate">
+										<span class="truncate" x-text="monster.name"></span>
+										<dl class="font-normal">
+											<dt class="sr-only">Sources</dt>
+											<dd class="mt-1 truncate text-gray-500 dark:text-gray-400">
+                                                <template x-for="(source, index) of monster.sources">
+                                                    <span x-tooltip="source.fullText"
+															x-html="
+                                                        `<span class='underline decoration-dotted cursor-help underline-offset-2 decoration-gray-400 dark:decoration-gray-500'>${source.reference.shortname}</span>`
+                                                        + (index < monster.sources.length-1 ? ', ' : '')
+                                                    "></span>
+                                                </template>
+											</dd>
+											<dt class="sr-only sm:hidden">Type</dt>
+											<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.type"></dd>
+										</dl>
+									</td>
+									<td class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300 table-cell w-32 max-w-32 truncate">
+										<span class="truncate" x-text="monster.size"></span>
+										<dl class="font-normal">
+											<dt class="sr-only sm:hidden">CR</dt>
+											<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 sm:hidden">CR <span x-text="monster.cr.string" :class="{
+												'text-indigo-300 dark:text-indigo-600': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Trivial',
+												'text-green-300 dark:text-green-600': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Easy',
+												'text-yellow-300 dark:text-yellow-600': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Medium',
+												'text-amber-300 dark:text-orange-600': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Hard',
+												'text-rose-300 dark:text-rose-600': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Deadly'
+											}"></span></dd>
+											<dt class="sr-only sm:hidden">Alignment</dt>
+											<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.alignment.string"></dd>
+										</dl>
+									</td>
+									<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 sm:table-cell w-32">
+										<span :class="{
+												'text-cyan-600 dark:text-cyan-400': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Trivial',
+												'text-green-600 dark:text-green-400': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Easy',
+												'text-yellow-600 dark:text-yellow-400': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Medium',
+												'text-amber-600 dark:text-orange-400': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Hard',
+												'text-rose-600 dark:text-rose-500': encounter.getDifficultyFromExperience(monster.cr.exp) === 'Deadly'
+											}">
+											<span x-text="monster.cr.string"></span>
+											<span x-text="'(' + encounter.getDifficultyFromExperience(monster.cr.exp) + ')'" class="text-xs"></span>
+										</span>
+									</td>
+									<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.type"></td>
+									<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.alignment.string"></td>
+								</tr>
+							</template>
+							</tbody>
+						</table>
+					</div>
+
+					<div x-show="enabledSources.length === 0" class="w-full text-center text-lg my-4">No sources are enabled - <span class="primary-link select-none cursor-pointer" @click="showSourcesModal = true">enable some now</span></div>
+					<div x-show="enabledSources.length > 0 && filteredMonsters.length === 0" class="w-full text-center text-lg my-4" x-cloak>No monsters found with the current filter - <span class="primary-link select-none cursor-pointer" @click="$dispatch('reset-filters')">reset filters</span></div>
+
+					<!-- This example requires Tailwind CSS v2.0+ -->
+					<nav x-show="totalPages > 1" x-cloak class="border-t border-gray-300 mt-4 dark:border-gray-700 px-4 flex items-center justify-between sm:px-0">
+						<div class="-mt-px w-0 flex-1 flex">
+							<a @click="setPageNumber(currentPage-1)" :disabled="currentPage === 1" href="#" class="border-t-2 border-transparent pt-4 px-2 lg:pr-1 lg:pl-0 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-400 hover:border-gray-400">
+								<!-- Heroicon name: solid/arrow-narrow-left -->
+								<svg class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+									<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
+								</svg>
+								<span class="hidden lg:inline">Previous</span>
+							</a>
+						</div>
+						<div class="hidden md:-mt-px md:flex">
+							<template x-for="page of pagination">
+								<span :class="{
+									'cursor-pointer select-none border-emerald-600 text-emerald-600 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium': page.active && !page.divider,
+									'cursor-pointer select-none border-transparent text-gray-500 hover:text-gray-400 hover:border-gray-400 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium hidden lg:inline-block first-of-type:inline-block last-of-type:inline-block': !page.active && !page.divider,
+									'select-none border-transparent text-gray-500 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium': page.divider,
+								}" x-text="page.divider ? '...' : page.number" @click="setPage(page)" :key="page.number"></span>
+							</template>
+						</div>
+						<div class="-mt-px w-0 flex-1 flex justify-end">
+							<a href="#" @click="setPageNumber(currentPage+1)" class="border-t-2 border-transparent pt-4 px-2 lg:pr-1 lg:pl-0 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-400 hover:border-gray-400">
+								<span class="hidden lg:inline">Next</span>
+								<!-- Heroicon name: solid/arrow-narrow-right -->
+								<svg class="ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+									<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+								</svg>
+							</a>
+						</div>
+					</nav>
+				</div>
+			</div>
+
+			<div id="encounter_box" :class="{ 'hidden md:flex': mobileEncounterTab }" class="hidden md:absolute md:inset-y-0 md:py-8 md:left-4 md:pr-4 md:pl-4 pb-8 md:flex w-full px-8 2xl:pr-4 flex-col flex-shrink-0 md:w-[28rem] overflow-y-auto scrollbar">
+				<div class="grid grid-cols-3 md:pr-2 md:grid-cols-5 pb-4 flex-col w-full">
+
+					<div class="col-span-3 space-y-2">
+						<div class="flex justify-between items-end">
+							<div class="mb-1 text-gray-600 dark:text-gray-400">
+								Party
+							</div>
+
+							<a class="primary-link text-sm" @click="showPartyModal = true" href="javascript:">
+								Manage
+							</a>
+						</div>
+
+						<div class="grid grid-cols-[1fr_34px] gap-y-2 align-center mb-2" x-show="activePlayers.length">
+
+						    <template x-for="party in savedParties">
+                                    <template x-for="player in party.players.filter(player => player.active)">
+                                    <div class="contents">
+                                        <div x-text="player.name"></div>
+
+                                        <button @click="player.active = false" type="button" class="button-danger-outline-md inline-flex justify-center !py-0">
+                                            <i class="fas fa-times"></i>
+                                        </button>
+                                    </div>
+                                    </template>
+						    </template>
+
+						</div>
+
+						<div x-show="party.groups.length" class="w-full grid grid-rows-[18px_1fr] grid-cols-[1fr_40px_1fr_50px_36px] gap-y-2 align-center mb-2" x-show="party.totalPlayers">
+							<label class="col-span-2 text-sm text-gray-700 dark:text-gray-300">Players</label>
+							<label class="text-sm text-gray-700 dark:text-gray-300">Level</label>
+							<label class="text-center text-sm text-gray-700 dark:text-gray-300" x-tippy="Determines whether these characters get a share of XP from the encounter.">XP</label>
+							<div>&nbsp;</div>
+
+
+						    <template x-for="(group, index) in party.groups">
+								<div class="contents">
+									<input type="number" min="1" :value="group.players" @change="group.players = Math.max(1, $event.target.value)" class="border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 block w-full p-1.5 pr-0 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600 rounded-md" value="4">
+
+									<div class="text-center grid place-items-center text-gray-600 dark:text-gray-400 scale-150 md:transform-none">
+										<i class="fa fa-times"></i>
+									</div>
+
+									<input type="number" min="1" max="20" :value="group.level" @change="group.level = Math.max(1, Math.min(20, $event.target.value))" class="border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 block w-full p-1.5 pr-0 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600 rounded-md" value="4">
+
+									<div class="flex items-center justify-center scale-150 md:transform-none">
+										<input type="checkbox" x-model="group.getsXP" class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 disabled:opacity-70 border-gray-300 rounded">
+									</div>
+
+									<button @click="party.removePlayerGroup(index)" type="button" class="button-danger-outline-md justify-center">
+										<i class="fas fa-times"></i>
+									</button>
+								</div>
+						    </template>
+
+						</div>
+
+						<div class="w-full">
+							<button @click="party.addPlayerGroup()" type="button" class="button-primary-outline-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
+								<span>
+									<i class="fas fa-plus mr-2"></i> Add Generic Group
+								</span>
+							</button>
+						</div>
+
+						<div class="w-full" x-show="!(activePlayers.length || party.groups.length)">
+							<button @click="enablePartyModal" type="button" class="button-primary-outline-md align-self-start w-full md:mt-4 md:mt-auto flex justify-center">
+								<span>
+									<i class="fas fa-plus mr-2"></i> Use Detailed Party
+								</span>
+							</button>
+						</div>
+					</div>
+
+					<div class="hidden md:block col-span-2">
+						<div class="grid text-sm text-right">
+							<div class="hidden md:block mb-1 col-span-2 text-gray-600 text-base dark:text-gray-400">XP Goals</div>
+							<div :class="{ 'font-semibold': encounter.actualDifficulty === 'Easy'}">Easy</div><div :class="{ 'font-semibold': encounter.actualDifficulty === 'Easy'}" x-text="formatNumber(party.experience['easy'])"></div>
+							<div :class="{ 'font-semibold': encounter.actualDifficulty === 'Medium'}">Medium</div><div :class="{ 'font-semibold': encounter.actualDifficulty === 'Medium'}" x-text="formatNumber(party.experience['medium'])"></div>
+							<div :class="{ 'font-semibold': encounter.actualDifficulty === 'Hard'}">Hard</div><div :class="{ 'font-semibold': encounter.actualDifficulty === 'Hard'}" x-text="formatNumber(party.experience['hard'])"></div>
+							<div :class="{ 'font-semibold': encounter.actualDifficulty === 'Deadly'}">Deadly</div><div :class="{ 'font-semibold': encounter.actualDifficulty === 'Deadly'}" x-text="formatNumber(party.experience['deadly'])"></div>
+
+							<div class="mt-4">Daily budget</div>
+							<div class="mt-4" x-text="formatNumber(party.experience.daily)"></div>
+						</div>
+					</div>
+
+					<div class="md:hidden col-span-3 pt-4" x-show="party.experience.daily">
+						<div class="mb-1 col-span-2 text-gray-600 text-base dark:text-gray-400">XP Goal</div>
+						<div class="flex justify-between">
+							<div>
+								Daily budget <span x-text="formatNumber(party.experience.daily)"></span>
+							</div>
+							<div>
+								<span class="font-semibold" x-show="['Easy', 'Medium', 'Hard', 'Deadly'].includes(encounter.actualDifficulty)" x-text="encounter.actualDifficulty + ' ' + formatNumber(party.experience[encounter.actualDifficulty.toLowerCase()])"></span>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="border-t border-gray-200 dark:border-gray-700">
+					<div class="flex pt-4 justify-between items-center mb-1">
+						<span class="text-gray-600 dark:text-gray-400">Encounter</span>
+
+						<a href="javascript:" class="primary-link text-sm" @click="showEncounterModal = true">History</a>
+					</div>
+
+					<div class="flex flex-col sm:flex-row pb-4 w-full space-x-2 items-end justify-between pb-4">
+						<div class="grid gap-2 w-full place-items-end sm:grid-cols-8 grow">
+							<div class="w-full col-span-1 sm:col-span-3">
+								<label id="difficulty-label" class="sr-only"> Difficulty </label>
+								<div class="mt-1 relative" @click.outside="difficultySelectOpen = false">
+									<button @click="difficultySelectOpen = true" type="button" class="bg-white dark:bg-gray-700 relative w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
+										<span class="block truncate" x-text="(difficulty.slice(0,1).toUpperCase() + difficulty.slice(1))"></span>
+										<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+										<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+										  <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+										</svg>
+									  </span>
+									</button>
+
+									<ul x-show="difficultySelectOpen" class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-700 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="listbox-label"
+										x-transition:enter=""
+										x-transition:enter-start=""
+										x-transition:enter-end=""
+										x-transition:leave="transition ease-in duration-100"
+										x-transition:leave-start="opacity-100"
+										x-transition:leave-end="opacity-0"
+									>
+										<template x-for="option of ['easy', 'medium', 'hard', 'deadly']">
+											<li @click="difficulty = option; difficultySelectOpen = false;" :class="{ 'text-white bg-emerald-600': difficulty === option, 'text-gray-900 dark:text-gray-300': difficulty !== option }" class="group text-gray-900 hover:text-white hover:bg-emerald-600 cursor-default select-none relative py-2 pl-3 pr-9" role="option">
+												<span class="group-hover:text-white font-normal block truncate" x-html="(option.slice(0,1).toUpperCase() + option.slice(1))"> </span>
+												<span :class="{ 'text-gray-200': difficulty === option, 'text-gray-600 dark:text-gray-400': difficulty !== option }" class="text-xs group-hover:text-gray-200" x-text="formatNumber(party.experience[option]) + 'xp'"></span>
+
+												<span x-show="difficulty === option" :class="{ 'text-white': difficulty === option, 'text-emerald-600': difficulty !== option }" class="absolute inset-y-0 right-0 flex items-center pr-4">
+												  <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+													<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+												  </svg>
+											</span>
+											</li>
+										</template>
+									</ul>
+								</div>
+							</div>
+
+							<div class="w-full col-span-1 sm:col-span-5">
+								<label id="composition-label" class="sr-only"> Composition </label>
+								<div class="mt-1 relative" @click.outside="encounterTypeSelectOpen = false">
+									<button @click="encounterTypeSelectOpen = true" type="button" class="bg-white dark:bg-gray-700 relative w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="composition-label">
+										<span class="block truncate" x-text="encounterTypes[encounterType].label"></span>
+										<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+										<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+										  <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+										</svg>
+									  </span>
+									</button>
+
+									<ul x-show="encounterTypeSelectOpen" class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-700 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="composition-label"
+										x-transition:enter=""
+										x-transition:enter-start=""
+										x-transition:enter-end=""
+										x-transition:leave="transition ease-in duration-100"
+										x-transition:leave-start="opacity-100"
+										x-transition:leave-end="opacity-0"
+									>
+										<template x-for="type of Object.values(encounterTypes)">
+											<li @click="encounterType = type.key; encounterTypeSelectOpen = false;" :class="{ 'text-white bg-emerald-600': encounterType === type.key, 'text-gray-900 dark:text-gray-300': encounterType !== type.key }" class="text-gray-900 hover:text-white hover:bg-emerald-600 cursor-default select-none relative py-2 pl-3 pr-9" role="option">
+												<span class="font-normal block truncate" x-text="type.label"> </span>
+
+												<span :class="{ 'text-white': encounterType === type.key, 'text-emerald-600': encounterType !== type.key }" class="absolute inset-y-0 right-0 flex items-center pr-4">
+											  <svg x-show="encounterType === type.key" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+												<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+											  </svg>
+											</span>
+											</li>
+										</template>
+									</ul>
+								</div>
+							</div>
+						</div>
+
+						<div class="w-full md:w-auto shrink mt-3 md:mt-0" :class="{ 'hidden md:block': !encounter.groups.length }">
+							<button @click="encounter.generateRandom()" class="button-primary-md w-full md:w-auto">
+								<span class="md:hidden w-full text-center">
+									Generate
+								</span>
+								<span class="hidden md:inline">
+									<i class="fa fa-refresh"></i>
+								</span>
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<div class="border-t border-gray-200 dark:border-gray-700 pt-4" x-show="encounter.groups.length">
+					<template x-for="(group, index) in encounter.groups" :key="group.monster.slug">
+						<div class="flex flex-row w-full mb-4 relative">
+							<div class="grow pb-2 min-w-0">
+								<div class="grid grid-cols-[1fr_20px] mb-2">
+									<span x-tooltip="group.monster.name" data-tippy-placement="top-start" data-tippy-delay="1000" class="text-lg pr-3 font-semibold max-w-full overflow-ellipsis truncate" x-text="group.monster.name"></span>
+									<div x-tippy="Shuffle monster" @click="encounter.getNewMonster(group)" class="grid place-items-center text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200 cursor-pointer"><i class="fas fa-random"></i></div>
+								</div>
+
+								<div>
+									<span class="text-base" x-text="'CR: ' + group.monster.cr.string"></span>
+									<span class="text-base ml-4" x-text="'XP: ' + formatNumber(group.monster.cr.exp)"></span>
+									<div class='overflow-hidden whitespace-nowrap overflow-ellipsis pr-40'>
+										<ul class="list-none text-s italic max-w-full">
+											<template x-for="source in group.monster.sources">
+												<li class="max-w-full truncate" x-tooltip="source.fullText" data-tippy-delay="1000" x-html="source.reference.link ? `<a class='primary-link' href='${source.reference.link}' target='_blank'>${source.fullText}</a>` : source.fullText"></li>
+											</template>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="absolute bottom-3 right-0 flex shrink-0 items-center">
+								<div class="flex rounded-md shadow-sm">
+									<button @click="encounter.addCount(index)" class="inline-flex items-center px-2 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-600 dark:text-gray-300 bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-500 sm:text-sm">
+										<i class="fa fa-plus w-5"></i>
+									</button>
+									<label for="monster-number"></label>
+									<input id="monster-number" type="number" min="1" class="flex-1 min-w-0 block w-16 px-3 py-2 rounded-none dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300" :value="group.count" @change="group.count = Math.max(0, $event.target.value)">
+									<button @click="encounter.subtractCount(index)" :class="{ 'border-gray-300 dark:border-gray-600 dark:text-gray-300 bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-500': group.count > 1, 'border-red-200 dark:border-red-700 dark:text-red-300 bg-red-50 hover:bg-red-100 dark:bg-red-800 dark:hover:bg-red-700 text-red-500': group.count === 1 }" class="inline-flex items-center px-2 rounded-r-md border border-l-0 sm:text-sm">
+										<i :class="{ 'fa-minus': group.count > 1, 'fa-times': group.count === 1 }" class="fa w-5"></i>
+									</button>
+								</div>
+							</div>
+						</div>
+					</template>
+
+					<div x-show="encounter.groups.length" class="-mt-2 text-center pb-4">
+						<a @click="encounter.clear()" class="select-none text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" href="javascript:"><i class="fa fa-times"></i> Clear encounter</a>
+					</div>
+				</div>
+
+				<div x-show="!encounter.groups.length" class="pb-4">
+					<button @click="encounter.generateRandom()" type="button" class="relative block w-full border-2 border-gray-300 dark:border-gray-700 dark:hover:border-gray-600 border-dashed rounded-lg p-6 md:p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
+						<i class="fa-solid fa-wand-sparkles text-2xl h-12 w-12 mx-auto text-gray-400 dark:text-gray-300"></i>
+						<span class="mt-2 block text-sm font-medium text-gray-900 dark:text-gray-200"> Generate an encounter </span>
+					</button>
+				</div>
+
+				<div class="border-t border-gray-200 dark:border-gray-700">
+					<dl class="space-y-1 divide-y divide-dashed divide-gray-400 dark:divide-gray-700">
+						<div class="flex items-center justify-between">
+							<dt class="mt-1 text-sm text-gray-600 dark:text-gray-200">
+								<span class="block">Difficulty</span>
+							</dt>
+							<dd class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-300 text-right">
+								<span class="block" x-text="encounter.actualDifficulty"></span>
+								<span class="block text-gray-500 dark:text-gray-400 text-sm" x-show="encounter.difficultyFeel && encounter.actualDifficulty.toLowerCase() !== encounter.difficultyFeel.toLowerCase()" x-text="'Feels '+encounter.difficultyFeel"></span>
+							</dd>
+						</div>
+
+						<div class="flex items-center justify-between">
+							<dt class="mt-1 text-sm text-gray-600 dark:text-gray-200">Total XP</dt>
+							<dd class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-300" x-text="encounter.totalExp > 0 ? formatNumber(encounter.totalExp) + ' (' + formatNumber(Math.round(encounter.totalExp / party.totalPlayersToGainXP)) + '/player)' : 'N/A'"></dd>
+						</div>
+
+						<div class="flex items-center justify-between">
+							<dt class="mt-1 text-sm text-gray-600 dark:text-gray-200">Adjusted XP</dt>
+							<dd class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-300" x-text="encounter.adjustedExp > 0 ? formatNumber(encounter.adjustedExp) + ' (' + formatNumber(Math.round(encounter.adjustedExp / party.totalPlayersToGainXP)) + '/player)' : 'N/A'"></dd>
+						</div>
+					</dl>
+
+					<div class="mt-4 flex space-x-2">
+						<button :disabled="!encounter.groups.length" class="grow text-center button-primary-md" @click="sendToImprovedInitiative">
+							<span class="inline-flex justify-center w-full">
+								<img class="mr-2 fill-white" style="height:20px;" src="images/improved-initiative-logo.svg" alt="II"/> Send to Improved Initiative
+							</span>
+						</button>
+
+						<button  :disabled="!encounter.groups.length" class="button-primary-md shrink-0" @click="encounter.save()">
+							<i class="fa fa-save"></i>
+						</button>
+					</div>
+				</div>
+			</div>
+
+			<div class="fixed 2xl:static 2xl:pointer-events-none inset-0 z-50 2xl:z-0 overflow-hidden" aria-labelledby="slide-over-title" role="dialog" aria-modal="true" x-show="showFilters" x-cloak>
+				<div class="absolute 2xl:static inset-0 overflow-hidden">
+					<!-- Background overlay, show/hide based on slide-over state. -->
+					<div @click="showFilters = false" class="absolute 2xl:hidden inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity 2xl:duration-0" aria-hidden="true"
+						 x-transition:enter="ease-in-out duration-200"
+						 x-transition:enter-start="opacity-0 2xl:opacity-100"
+						 x-transition:enter-end="opacity-100"
+						 x-transition:leave="ease-in-out duration-200"
+						 x-transition:leave-start="opacity-100"
+						 x-transition:leave-end="opacity-0 2xl:opacity-100"
+						 x-show="showFilters"
+					></div>
+
+					<div class="pointer-events-none fixed 2xl:static inset-y-0 right-0 flex max-w-full pl-10">
+						<div class="pointer-events-auto w-screen max-w-md 2xl:!duration-[0ms] sm:duration-700"
+							 x-transition:enter="transform transition ease-in-out duration-200"
+							 x-transition:enter-start="translate-x-full"
+							 x-transition:enter-end="translate-x-0"
+							 x-transition:leave="transform transition ease-in-out duration-200"
+							 x-transition:leave-start="translate-x-0"
+							 x-transition:leave-end="translate-x-full"
+							 x-show="showFilters"
+						>
+							<div class="relative 2xl:static flex max-h-screen h-full flex-col overflow-y-hidden bg-white dark:bg-gray-800 shadow-xl">
+								<div class="px-4 sm:px-6 border-b dark:border-gray-700 py-6 2xl:hidden">
+									<div class="flex items-start justify-between">
+										<h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-title">Filter monsters</h2>
+										<div class="ml-3 flex h-7 items-center">
+											<button @click="showFilters = false" type="button" class="rounded-md bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-500 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2">
+												<span class="sr-only">Close panel</span>
+												<!-- Heroicon name: outline/x -->
+												<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+								<div class="flex h-full flex-col relative 2xl:absolute 2xl:inset-y-0 2xl:w-[24rem] 2xl:right-0 2xl:py-8 flex-1 px-4 py-6 sm:px-6 space-y-4 overflow-y-auto scrollbar">
+									<div class="flex">
+										<button @click="showSourcesModal = true" class="button-primary-md w-full">
+											<span class="w-full text-center">Manage sources</span>
+										</button>
+
+										<button :disabled="!nonDefaultFiltersCount" @click="$dispatch('reset-filters')" class="w-full button-primary-outline-md disabled:opacity-70 disabled:bg-slate-200 disabled:hover:bg-slate-200 disabled:dark:bg-slate-700 disabled:dark:hover:bg-slate-700 disabled:hover:text-emerald-700 disabled:dark:hover:text-emerald-600 grid place-items-center text-center hidden 2xl:block ml-2">
+											<span class="inline-block w-full"><i class="fa fa-undo pr-1"></i> Reset Filters</span>
+										</button>
+									</div>
+
+									<div x-data="{ minCr: 0, maxCr: 0 }">
+										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">
+											Challenge Rating
+										</div>
+
+										<div class="relative px-6 pt-1 pb-2 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 rounded-md" x-data="{
+											crValues: [
+														{ value: '0', label: '0' },
+														{ value: '1/8', label: '1/8' },
+														{ value: '1/4', label: '1/4' },
+														{ value: '1/2', label: '1/2' },
+														{ value: '1', label: '1' },
+														{ value: '2', label: '2' },
+														{ value: '3', label: '3' },
+														{ value: '4', label: '4' },
+														{ value: '5', label: '5' },
+														{ value: '6', label: '6' },
+														{ value: '7', label: '7' },
+														{ value: '8', label: '8' },
+														{ value: '9', label: '9' },
+														{ value: '10', label: '10' },
+														{ value: '11', label: '11' },
+														{ value: '12', label: '12' },
+														{ value: '13', label: '13' },
+														{ value: '14', label: '14' },
+														{ value: '15', label: '15' },
+														{ value: '16', label: '16' },
+														{ value: '17', label: '17' },
+														{ value: '18', label: '18' },
+														{ value: '19', label: '19' },
+														{ value: '20', label: '20' },
+														{ value: '21', label: '21' },
+														{ value: '22', label: '22' },
+														{ value: '23', label: '23' },
+														{ value: '24', label: '24' },
+														{ value: '25', label: '25' },
+														{ value: '26', label: '26' },
+														{ value: '27', label: '27' },
+														{ value: '28', label: '28' },
+														{ value: '29', label: '29' },
+														{ value: '30', label: '30' }
+													]
+										}">
+
+											<div x-ref="cr_slider" class="my-4 mx-2" x-data="multiSlider($el, 'challenge_rating', crValues, (lower, upper) => {
+														minCr = lower;
+														maxCr = upper;
+													})"
+												 @set-cr-slider.window="set($event)"
+												 @reset-cr-slider.window="reset()"
+												 @reset-filters.window="reset()"
+											></div>
+
+											<div class="flex justify-between items-center">
+												<div class="grow">
+													<select class="w-full border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 block w-full py-1.5 pl-2.5 pr-0 sm:text-sm disabled:text-gray-600 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600 rounded-md"
+															x-ref="min_cr_select"
+															name="min_cr"
+															id="min_cr_select"
+															@filters-changed.window="$el.value = minCr.value"
+															@change="$dispatch('set-cr-slider', [{ value: $event.target.value, label: $event.target.value }, maxCr]);"
+													>
+														<template x-for="option in crValues">
+															<option :value="option.value" x-text="option.label" :disabled="parseInt(option.value) > parseInt(maxCr.value)"></option>
+														</template>
+													</select>
+												</div>
+												<div class="grow text-center text-gray-500 dark:text-gray-400 user-select-none">&le; CR &le;</div>
+												<div class="grow">
+													<select class="w-full border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 block w-full py-1.5 pl-2.5 pr-0 sm:text-sm disabled:text-gray-600 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600 rounded-md"
+															x-ref="max_cr_select"
+															name="max_cr"
+															id="max_cr_select"
+															@filters-changed.window="$el.value = maxCr.value"
+															@change="$dispatch('set-cr-slider', [minCr, { value: $event.target.value, label: $event.target.value }]);"
+													>
+														<template x-for="option in crValues">
+															<option :value="option.value" x-text="option.label" :disabled="parseInt(option.value) < parseInt(minCr.value)"></option>
+														</template>
+													</select>
+												</div>
+											</div>
+
+											<span @click="$dispatch('reset-cr-slider')" x-show="!(minCr.value == 0 && maxCr.value == 30)" class="absolute top-1 right-1 text-center cursor-pointer">
+												<i class="fa fa-undo text-sm h-6 w-6 text-gray-800 dark:text-gray-300"></i>
+											</span>
+										</div>
+									</div>
+
+
+									<div>
+										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">
+											Alignment
+										</div>
+
+										<div class="grid grid-cols-[12px_12px_repeat(12,_minmax(0,_1fr))] divide divide-gray-200 dark:divide-gray-600 gap-2 rounded-md bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 overflow-hidden p-2" x-data="{
+												lawful_good: 1,
+												neutral_good: 2,
+												chaotic_good: 4,
+												lawful_neutral: 8,
+												neutral: 16,
+												chaotic_neutral: 32,
+												lawful_evil: 64,
+												neutral_evil: 128,
+												chaotic_evil: 256,
+												total: $persist(1023).as('alignment'),
+												randomIconIndex: 0,
+												icons: [
+														'fa-solid fa-dumpster-fire',
+														'fa-solid fa-poo-storm',
+														'fa-solid fa-meteor',
+														'fa-solid fa-arrows-split-up-and-left',
+														'fa-solid fa-arrows-turn-to-dots',
+														'fa-solid fa-candy-cane',
+														'fa-solid fa-stroopwafel',
+														'fa-solid fa-cake-candles',
+														'fa-solid fa-bowling-ball',
+														'fa-solid fa-bath',
+														'fa-solid fa-bomb',
+														'fa-solid fa-business-time',
+														'fa-solid fa-dragon',
+														'fa-solid fa-arrow-up-right-dots',
+														'fa-solid fa-fire',
+														'fa-solid fa-arrows-to-circle',
+														'fa-solid fa-cloud-meatball',
+														'fa-solid fa-arrows-down-to-people',
+														'fa-solid fa-person-walking-arrow-loop-left',
+														'fa-solid fa-person-walking-dashed-line-arrow-right',
+													],
+												init() {
+													this.$watch('total', (total) => {
+														let newIndex = Math.floor(Math.random() * this.icons.length);
+														this.randomIconIndex = (newIndex === this.randomIconIndex) ? (newIndex + 1) % this.icons.length : newIndex;
+														this.onFiltersChanged();
+													});
+													this.onFiltersChanged();
+												},
+												onFiltersChanged() {
+													window.dispatchEvent(new CustomEvent('filters-changed', { detail: { name: 'alignment', value: this.total }}));
+												},
+												get randomIcon() {
+													return this.icons[this.randomIconIndex];
+												},
+												toggle(value) {
+													this.total = ((this.total & value) > 0) ? ((this.total | value) ^ value) : (this.total | value);
+												},
+												classes(value) {
+													return {
+														'bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900 text-white': this.total & value,
+														'bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border text-gray-700 dark:text-white': !(this.total & value),
+														'cursor-pointer grid place-items-center text-center select-none text-white': true,
+													};
+												},
+												reset(){
+													this.total = 1023;
+												}
+											}" @reset-filters.window="reset()">
+											<div @click="toggle((lawful_good | neutral | chaotic_evil))" :class="classes(lawful_good | neutral | chaotic_evil)" class="col-span-2 rounded-tl-md dark:border-gray-600"></div>
+											<div @click="toggle((lawful_good | lawful_neutral | lawful_evil))" :class="classes(lawful_good | lawful_neutral | lawful_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-gavel"></i></div>
+											<div @click="toggle((neutral_good | neutral | neutral_evil))" :class="classes(neutral_good | neutral | neutral_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-scale-balanced"></i></div>
+											<div @click="toggle((chaotic_good | chaotic_neutral | chaotic_evil))" :class="classes(chaotic_good | chaotic_neutral | chaotic_evil)" class="col-span-4 h-8 rounded-t-md"><i :class="{ [randomIcon]: true }"></i></div>
+
+											<div @click="toggle((lawful_good | neutral_good | chaotic_good))" :class="classes(lawful_good | neutral_good | chaotic_good)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-dove"></i></div>
+											<div @click="toggle(lawful_good)" :class="classes(lawful_good)" class="col-span-4 h-12" x-tippy="Lawful Good">LG</div>
+											<div @click="toggle(neutral_good)" :class="classes(neutral_good)" class="col-span-4 h-12" x-tippy="Neutral Good">NG</div>
+											<div @click="toggle(chaotic_good)" :class="classes(chaotic_good)" class="col-span-4 h-12" x-tippy="Chaotic Good">CG</div>
+
+											<div @click="toggle((lawful_neutral | neutral | chaotic_neutral))" :class="classes(lawful_neutral | neutral | chaotic_neutral)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-face-meh"></i></div>
+											<div @click="toggle(lawful_neutral)" :class="classes(lawful_neutral)" class="col-span-4 h-12" x-tippy="Lawful Neutral">LN</div>
+											<div @click="toggle(neutral)" :class="classes(neutral)" class="col-span-4 h-12" x-tippy="Neutral">N</div>
+											<div @click="toggle(chaotic_neutral)" :class="classes(chaotic_neutral)" class="col-span-4 h-12" x-tippy="Chaotic Neutral">CN</div>
+
+											<div @click="toggle((lawful_evil | neutral_evil | chaotic_evil))" :class="classes(lawful_evil | neutral_evil | chaotic_evil)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-skull"></i></div>
+											<div @click="toggle(lawful_evil)" :class="classes(lawful_evil)" class="col-span-4 h-12" x-tippy="Lawful Evil">LE</div>
+											<div @click="toggle(neutral_evil)" :class="classes(neutral_evil)" class="col-span-4 h-12" x-tippy="Neutral Evil">NE</div>
+											<div @click="toggle(chaotic_evil)" :class="classes(chaotic_evil)" class="col-span-4 h-12" x-tippy="Chaotic Evil">CE</div>
+
+											<div @click="toggle((lawful_evil | neutral | chaotic_good))" :class="classes(lawful_evil | neutral | chaotic_good)" class="col-span-2 rounded-bl-md"></div>
+											<div @click="total = (total === 1023) ? 0 : 1023" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 1023) === 1023, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 1023) !== 1023 }" class="select-none text-gray-900 col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Any</div>
+											<div @click="total = total ^ 512" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 512) === 512, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 512) !== 512 }" class="select-none text-gray-900 rounded-br-md col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Unaligned</div>
+										</div>
+									</div>
+
+
+									<!-- Multi Select -->
+									<div>
+										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Size category</div>
+
+										<div @mousedown.stop x-data="multiSelect($refs.sizes, 'size', [
+												{value: 'any', label: 'Any Size' },
+												{value: 'tiny', label: 'Tiny' },
+												{value: 'small', label: 'Small' },
+												{value: 'medium', label: 'Medium' },
+												{value: 'large', label: 'Large' },
+												{value: 'huge', label: 'Huge' },
+												{value: 'gargantuan', label: 'Gargantuan' }
+											])" @reset-filters.window="reset()">
+											<select x-ref="sizes" :multiple="multiple" class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
+										</div>
+									</div>
+
+									<div>
+										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Creature type</div>
+
+										<div @mousedown.stop x-data="multiSelect($refs.creature_type, 'type', [
+												{ value: 'any', label: 'Any Type' },
+												{ value: 'aberration', label: 'Aberration' },
+												{ value: 'beast', label: 'Beast' },
+												{ value: 'celestial', label: 'Celestial' },
+												{ value: 'construct', label: 'Construct' },
+												{ value: 'dragon', label: 'Dragon' },
+												{ value: 'elemental', label: 'Elemental' },
+												{ value: 'fey', label: 'Fey' },
+												{ value: 'fiend', label: 'Fiend' },
+												{ value: 'giant', label: 'Giant' },
+												{ value: 'humanoid', label: 'Humanoid' },
+												{ value: 'monstrosity', label: 'Monstrosity' },
+												{ value: 'ooze', label: 'Ooze' },
+												{ value: 'plant', label: 'Plant' },
+												{ value: 'undead', label: 'Undead' },
+											])" @reset-filters.window="reset()">
+											<select x-ref="creature_type" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
+										</div>
+									</div>
+
+									<div>
+										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Native environment</div>
+
+										<div @mousedown.stop x-data="multiSelect($refs.environment, 'environment', [])" @reset-filters.window="reset()" @set-environments.window="options = $event.detail; setUp();">
+											<select x-ref="environment" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
+										</div>
+									</div>
+
+									<div>
+										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Legendary Status</div>
+
+										<div @mousedown.stop x-data="multiSelect($refs.legendary, 'legendary', [
+												{ value: 'any', label: 'Any Legendary'},
+												{ value: 'ordinary', label: 'Ordinary'},
+												{ value: 'legendary', label: 'Legendary'},
+												{ value: 'legendary_lair', label: 'Legendary (in lair)'},
+											])" @reset-filters.window="reset()">
+											<select x-ref="legendary" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+		<!-- This example requires Tailwind CSS v2.0+ -->
+		<div x-show="showSourcesModal" class="fixed z-50 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
+			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+				<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
+					 x-show="showSourcesModal"
+					 x-transition:enter="ease-out duration-300"
+					 x-transition:enter-start="opacity-0"
+					 x-transition:enter-end="opacity-100"
+					 x-transition:leave="ease-in duration-200"
+					 x-transition:leave-start="opacity-100"
+					 x-transition:leave-end="opacity-0"
+				></div>
+
+				<!-- This element is to trick the browser into centering the modal contents. -->
+				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+				<div @mousedown.outside="showSourcesModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle max-w-full sm:max-w-xl md:max-w-2xl lg:max-w-4xl w-full"
+					 x-show="showSourcesModal"
+					 x-transition:enter="ease-out duration-300"
+					x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+					x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+					x-transition:leave="ease-in duration-200"
+					x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+					x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+				>
+					<div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+						<div class="sm:flex sm:items-start">
+							<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-emerald-100 dark:bg-emerald-600 sm:mx-0 sm:h-10 sm:w-10">
+								<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-600 dark:text-emerald-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+								</svg>
+							</div>
+							<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">Select your sources</h3>
+								<div class="mt-2 max-h-96 overflow-y-auto px-1 scrollbar scrollbar-dark">
+
+									<template x-for="type of sourcesByType">
+										<div class="mb-4">
+											<h4 class="text-gray-700 dark:text-gray-300 leading-6 mb-2" x-text="type.title"></h4>
+
+											<div class="grid gap-2 grid-cols-6 md:grid-cols-12 w-full">
+												<template x-for="source of type.sources">
+													<div class="col-span-6 grid gap-2"
+														 :class="{
+														 	'grid-cols-[1fr_42px]': type.title === 'Custom' && !deleting,
+														 	'grid-cols-[42px_1fr_42px]': type.title === 'Custom' && deleting
+														 }"
+														 x-data="{ deleting: false }"
+														 @click.away="deleting = false"
+													>
+														<button class="text-left text-sm max-w-full truncate"
+																x-show="!deleting"
+																@click="source.enabled =! source.enabled; updateFilteredMonsters();"
+																:title="source.name"
+																:class="{
+																'button-primary-outline-md': !source.enabled,
+																'button-primary-md': source.enabled
+															}">
+															<i class="fa pr-1" :class="{
+																'fa-toggle-on': source.enabled,
+																'fa-toggle-off': !source.enabled
+															}"></i>
+															<span class="truncate" x-text="source.name"></span>
+														</button>
+
+														<button x-show="type.title === 'Custom' && !deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleting = true">
+															<i class="fa fa-trash"></i>
+														</button>
+
+														<button x-show="deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleteImportedSource(source.name)">
+															<i class="fa fa-check"></i>
+														</button>
+
+														<div x-show="deleting" class="border dark:border-gray-700 rounded-md inline-flex items-center px-4 py-2">
+															<i class="fa fa-exclamation-triangle pr-1 text-orange-500 dark:text-orange-700"></i>
+															Are you sure?
+														</div>
+
+														<button x-show="deleting" class="!px-0 w-[42px] justify-center button-primary-outline-md" @click="deleting = false">
+															<i class="fa fa-times"></i>
+														</button>
+													</div>
+												</template>
+											</div>
+										</div>
+									</template>
+
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+						<button @click="showSourcesModal = false" type="button" class="button-primary-md">Done</button>
+<!--						<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>-->
+					</div>
+				</div>
+			</div>
+		</div>
+
+        <!-- This example requires Tailwind CSS v2.0+ -->
+        <div x-show="showEncounterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
+            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
+                     x-show="showEncounterModal"
+                     x-transition:enter="ease-out duration-300"
+                     x-transition:enter-start="opacity-0"
+                     x-transition:enter-end="opacity-100"
+                     x-transition:leave="ease-in duration-200"
+                     x-transition:leave-start="opacity-100"
+                     x-transition:leave-end="opacity-0"
+                ></div>
+
+                <!-- This element is to trick the browser into centering the modal contents. -->
+                <span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+                <div @mousedown.outside="showEncounterModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
+                     x-show="showEncounterModal"
+                     x-transition:enter="ease-out duration-300"
+                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                     x-transition:leave="ease-in duration-200"
+                     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                     x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+					 x-data="{ tab: 'history' }"
+                >
+                    <div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
+                        <div class="sm:flex flex-col sm:items-start w-full">
+							<div class="w-full flex pb-3">
+								<div class="sm:hidden w-full">
+									<label for="tabs" class="sr-only">Select a tab</label>
+									<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+									<select x-model="tab" id="tabs" name="tabs" class="text-center border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 block w-full p-1.5 pr-0 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600 rounded-md">
+										<option value="history" selected>Encounter History</option>
+
+										<option value="saved">Saved Encounters</option>
+									</select>
+								</div>
+								<div class="hidden w-full sm:block">
+									<div class="border-b-2 border-gray-200 dark:border-gray-700">
+										<nav class="-mb-[2px] justify-center flex space-x-8" aria-label="Tabs">
+											<!-- Current: "border-emerald-500 text-emerald-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
+											<a @click="tab = 'history'" href="javascript:" :class="{ 'border-emerald-500 text-emerald-600': tab === 'history', 'border-transparent text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-500 hover:text-gray-700 hover:border-gray-300': tab !== 'history' }" class="inline-block whitespace-nowrap py-4 px-1 border-b-2 font-medium">
+												<i class="fa fa-history pr-2"></i> Encounter History
+											</a>
+
+											<a @click="tab = 'saved'" href="javascript:" :class="{ 'border-emerald-500 text-emerald-600': tab === 'saved', 'border-transparent text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-500 hover:text-gray-700 hover:border-gray-300': tab !== 'saved' }" class="inline-block whitespace-nowrap py-4 px-1 border-b-2 font-medium">
+												<i class="fa fa-save pr-2"></i> Saved Encounters
+											</a>
+										</nav>
+									</div>
+								</div>
+							</div>
+
+							<div x-show="tab === 'saved'" class="my-3 sm:mt-0 w-full">
+								<div class="mt-2 max-h-96 overflow-y-auto scrollbar divide-y divide-gray-200 dark:divide-gray-700 text-gray-700 dark:text-gray-300">
+									<template x-for="(_, index) of savedEncounters">
+										<div @click="(loadedEncounterIndex !== savedEncounters.length-index-1) && encounter.loadFromSaved(savedEncounters.length-index-1)" class="flex px-2 py-4 dark:border-gray-700 w-100 relative"
+											 x-tooltip="savedEncounters[savedEncounters.length-index-1].map(group => `${group.monster.name} x${group.count}`).join(', ')"
+											 :key="index"
+											 :class="{ 'group hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': loadedEncounterIndex !== savedEncounters.length-index-1 }"
+										>
+											<div class="grow flex items-center mr-2 grow truncate overflow-ellipsis" :class="{ 'font-medium': loadedEncounterIndex === savedEncounters.length-index-1 }">
+                                                <span x-text="savedEncounters[savedEncounters.length-index-1] ? savedEncounters[savedEncounters.length-index-1].map(group => `${group.monster.name} x${group.count}`).join(', ') : ''"
+												></span>
+											</div>
+											<div class="shrink-0 grid grid-cols-[30px_1fr] place-items-center h-full absolute inset-y-0 right-0" type="button">
+												<div class="w-full h-full bg-gradient-to-l from-white dark:from-gray-800 group-hover:from-gray-50 dark:group-hover:from-gray-700 to-transparent"></div>
+												<div class="flex px-3 bg-white group-hover:bg-gray-50 dark:bg-gray-800 dark:group-hover:bg-gray-700 min-w-4 h-full text-right inset-y-0 right-0 space-x-2 absolute">
+													<div x-show="loadedEncounterIndex === savedEncounters.length-index-1" class="text-emerald-600 h-full flex items-center justify-center"><i class="fa fa-check-circle pr-1"></i> Loaded</div>
+                                                    <div x-show="loadedEncounterIndex !== savedEncounters.length-index-1" class="items-center h-full justify-center cursor-pointer select-none hidden group-hover:flex text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"><i class="pr-1 fas fa-upload"></i> Load</div>
+                                                    <div class="items-center justify-center h-full cursor-pointer select-none hidden group-hover:flex text-red-700 dark:text-red-400 hover:text-red-900 dark:hover:text-red-600" @click="encounter.deleteSaved(index)"><i class="pr-1 fas fa-times"></i> Delete</div>
+                                                </div>
+											</div>
+										</div>
+									</template>
+								</div>
+
+								<div x-show="!savedEncounters.length" type="button" class="relative block w-full border-2 border-gray-300 dark:border-gray-700 border-dashed rounded-lg p-12 text-center">
+									<span class="mt-2 block text-sm font-medium text-gray-900 dark:text-gray-200"> You have no encounters saved </span>
+								</div>
+							</div>
+
+                            <div x-show="tab === 'history'" class="my-3 sm:mt-0 w-full">
+                                <div class="mt-2 max-h-96 overflow-y-auto scrollbar divide-y divide-gray-200 dark:divide-gray-700 text-gray-700 dark:text-gray-300">
+                                    <template x-for="(_, index) of encounterHistory">
+                                        <div class="flex px-2 py-4 dark:border-gray-700 w-100 relative"
+											 x-tooltip="encounterHistory[encounterHistory.length-index-1].map(group => `${group.monster.name} x${group.count}`).join(', ')"
+											 :class="{ 'group hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': !(loadedEncounterIndex === null && index === 0 && encounter.groups.length) }"
+											 @click="!(loadedEncounterIndex === null && index === 0 && encounter.groups.length) && encounter.loadFromHistory(encounterHistory.length-index-1)"
+                                             :key="index"
+										>
+                                            <div class="grow flex flex-col justify-center mr-2 grow truncate overflow-ellipsis" :class="{ 'font-medium': loadedEncounterIndex === null && index === 0 && encounter.groups.length }">
+                                                <span x-text="encounterHistory[encounterHistory.length-index-1] ? encounterHistory[encounterHistory.length-index-1].map(group => `${group.monster.name} x${group.count}`).join(', ') : ''"
+												></span>
+                                            </div>
+                                            <div class="shrink-0 grid grid-cols-[30px_1fr] place-items-center h-full absolute inset-y-0 right-0" type="button">
+												<div class="w-full h-full bg-gradient-to-l from-white dark:from-gray-800 group-hover:from-gray-50 dark:group-hover:from-gray-700 to-transparent"></div>
+												<div class="px-3 bg-white group-hover:bg-gray-50 dark:bg-gray-800 dark:group-hover:bg-gray-700 min-w-4 h-full grid place-items-center">
+													<div class="hidden group-hover:block text-gray-900 dark:text-gray-100">Load <i class="fa fa-arrow-right"></i></div>
+													<div x-show="loadedEncounterIndex === null && index === 0 && encounter.groups.length" class="text-emerald-600"><i class="fa fa-check-circle"></i></div>
+												</div>
+											</div>
+                                        </div>
+                                    </template>
+                                </div>
+
+								<button x-show="!encounterHistory.length" @click="encounter.generateRandom(); showEncounterModal = false;" type="button" class="relative block w-full border-2 border-gray-300 dark:border-gray-700 dark:hover:border-gray-600 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
+									<i class="fa-solid fa-dice-d20 text-2xl h-12 w-12 mx-auto text-gray-400 dark:text-gray-300"></i>
+									<span class="mt-2 block text-sm font-medium text-gray-900 dark:text-gray-200"> Roll for history </span>
+								</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
+                        <button @click="showEncounterModal = false" type="button" class="button-primary-md">Close</button>
+                        <button x-show="tab === 'history'" @click="encounterHistory = []" type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-emerald-700 dark:bg-emerald-100 dark:bg-transparent dark:text-emerald-500 dark:hover:bg-emerald-800 dark:hover:text-white hover:bg-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> <i class="fa fa-times mr-1"></i> Clear History </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+	<div x-show="showPartyModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
+		<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+			<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
+				 x-show="showPartyModal"
+				 x-transition:enter="ease-out duration-300"
+				 x-transition:enter-start="opacity-0"
+				 x-transition:enter-end="opacity-100"
+				 x-transition:leave="ease-in duration-200"
+				 x-transition:leave-start="opacity-100"
+				 x-transition:leave-end="opacity-0"
+			></div>
+
+			<!-- This element is to trick the browser into centering the modal contents. -->
+			<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+			<div @mousedown.outside="showPartyModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
+				 x-show="showPartyModal"
+				 x-transition:enter="ease-out duration-300"
+				 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+				 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+				 x-transition:leave="ease-in duration-200"
+				 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+				 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+			>
+				<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
+					<div class="sm:flex flex-col sm:items-start w-full">
+						<div class="w-full flex pb-3">
+							<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Manage your parties and players</h3>
+						</div>
+
+						<div class="my-3 sm:mt-0 w-full">
+							<div class="my-2 max-h-96 overflow-y-auto scrollbar overflow-x-hidden text-gray-700 dark:text-gray-300">
+								<div x-show="savedParties.length" class="bg-gray-50 dark:bg-gray-700 rounded shadow overflow-hidden border-b dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-800 ">
+									<template x-for="(party, partyIndex) of savedParties">
+
+										<div>
+											<div class="flex px-4 py-4 dark:border-gray-700 w-100 relative cursor-pointer group hover:bg-gray-100 dark:hover:bg-gray-600"
+												 :class="{ 'bg-gray-100 hover:bg-gray-50 dark:bg-gray-700': party.editing }"
+												 x-tooltip="party.name"
+												 :key="partyIndex"
+												 @click="party.editing =! party.editing"
+											>
+												<div class="grow flex flex-col justify-center mr-2 grow truncate overflow-ellipsis">
+													<span x-text="party.name"></span>
+												</div>
+												<div class="shrink-0 grid grid-cols-[30px_1fr] place-items-center h-full absolute inset-y-0 right-0">
+													<div class="w-full h-full bg-gradient-to-l from-gray-50 dark:from-gray-700 group-hover:from-gray-100 dark:group-hover:from-gray-600 to-transparent"></div>
+													<div class="px-3 bg-gray-50 group-hover:bg-gray-100 dark:bg-gray-700 dark:group-hover:bg-gray-600 min-w-4 h-full grid place-items-center">
+														<div @click.stop="activateParty(partyIndex)" x-show="!party.players.filter((player) => player.active).length" class="h-full hidden place-items-center group-hover:grid text-gray-900 dark:text-gray-100">
+															<div>Make all active <i class="fa fa-users"></i></div>
+														</div>
+														<div @click.stop="deactivateParty(partyIndex)" x-show="party.players.filter((player) => player.active).length" class="h-full hidden place-items-center group-hover:grid text-gray-900 dark:text-gray-100">
+															<div>Deactivate all <i class="fa fa-users-slash"></i></div>
+														</div>
+													</div>
+												</div>
+											</div>
+
+											<div x-show="party.editing" class="border-x border-gray-50 dark:border-gray-700 dark:bg-gray-800 flex flex-col gap-x-1 gap-y-2 px-6 py-3">
+												<div class="flex items-center">
+													<input x-model="party.name"
+														   type="text"
+														   class="!mb-0 py-0.5 text-xl"
+													>
+													<div class="w-[30px] ml-2 flex justify-center">
+														<i @click.stop="deleteParty(partyIndex)" x-tooltip="'Delete ' + party.name" class="fa fa-trash hover:text-red-400 dark:hover:text-red-600 cursor-pointer"></i>
+													</div>
+												</div>
+
+												<div class="text-gray-600 dark:text-gray-300 grid gap-2 grid-cols-[60px_1fr_1fr] md:grid-cols-[60px_1fr_50px_75px_150px_30px]">
+													<div>Active</div>
+													<div>Name<span class="md:hidden">/Init.</span></div>
+													<div>Level<span class="md:hidden">/HP</span></div>
+													<div class="hidden md:block md:order-6"></div>
+													<div class="hidden md:block">Initiative</div>
+													<div class="hidden md:block">HP</div>
+												</div>
+
+												<template x-for="(player, playerIndex) of party.players">
+													<div class="grid gap-2 grid-cols-[60px_1fr_1fr] md:grid-cols-[60px_1fr_50px_75px_150px_30px]">
+														<div class='order-1 flex justify-center md:justify-start'>
+															<input type="checkbox" class="hidden" x-model="player.active">
+
+															<button
+																	@click="player.active = !player.active"
+																	type="button"
+																	:class="{'bg-gray-200 dark:bg-gray-700': !player.active, 'bg-emerald-600': player.active}"
+																	class="bg-gray-200 dark:bg-gray-700 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"
+																	role="switch"
+																	aria-checked="false"
+																	aria-labelledby="availability-label"
+																	aria-describedby="availability-description"
+															>
+																<span aria-hidden="true" :class="{'translate-x-0': !player.active, 'translate-x-5': player.active}" class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
+															</button>
+														</div>
+
+
+														<div class="order-2">
+															<input type="text" :id="'name_'+playerIndex" x-model="player.name" class="px-1 py-1 !mb-0 block w-full sm:text-sm rounded-md dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300">
+														</div>
+														<div class="order-3">
+															<input type="number" :id="'level_'+playerIndex" x-model.number="player.level" class="px-1 py-1 block w-full sm:text-sm rounded-md dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300">
+														</div>
+
+														<div class="relative order-5 md:order-4 mb-2 md:mb-0">
+															<input type="number" :id="'initiativeMod_'+playerIndex" x-model.number="player.initiativeMod" class="pl-1 pr-8 py-1 block w-full sm:text-sm rounded-md dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300">
+															<div :class="{ 'text-emerald-600 hover:text-emerald-700 dark:text-emerald-600 dark:hover:text-emerald-700': player.initiativeAdvantage, 'text-gray-400 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-400': !player.initiativeAdvantage }" class="text-2xl text-center w-6 cursor-pointer select-none absolute inset-y-0 right-1 flex justify-center items-center" @click="player.initiativeAdvantage =! player.initiativeAdvantage" x-tippy="Advantage on Initiative">
+																<svg xmlns="http://www.w3.org/2000/svg" width="18.5" height="28" viewbox="0 0 173.20508075688772 200" style="fill: currentColor;"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path></svg>
+															</div>
+															<div class="pointer-events-none text-lg text-center text-white dark:text-gray-700 font-bold w-6 cursor-pointer select-none absolute inset-y-0 right-1 flex justify-center items-center">
+																A
+															</div>
+														</div>
+
+														<div class="order-6 md:order-5 justify-center md:justify-start flex -space-x-px mb-2 md:mb-0">
+															<div class="w-1/2 flex-1 min-w-0">
+																<input min="0" @change="if(player.currentHp > player.maxHp) { player.maxHp = player.currentHp }" @blur="if(player.currentHp > player.maxHp) { player.maxHp = player.currentHp }" type="number" x-model.number="player.currentHp" class="px-1 py-1 text-right border-r-0 relative block w-full rounded-none rounded-l-md sm:text-sm dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300"/>
+															</div>
+															<div class="grid place-items-center px-1 shrink rounded-none border border-y-1 bg-white dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300"> / </div>
+															<div class="flex-1 min-w-0">
+																<input min="1" type="number" x-model.number="player.maxHp" class="px-1 py-1 relative border-l-0 block w-full rounded-none rounded-r-md sm:text-sm dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300"/>
+															</div>
+														</div>
+
+														<div @click="deletePlayer(partyIndex, playerIndex)" class="order-4 md:order-6 group cursor-pointer grid place-items-center mb-2 md:mb-0">
+															<i class="fa fa-times text-red-500 dark:text-red-500 group-hover:text-red-600 dark:group-hover:text-red-700"></i>
+														</div>
+													</div>
+												</template>
+
+												<button @click="createPlayer(partyIndex)" type="button" class="button-primary-outline-md col-span-6 justify-center" :class="{ 'h-24': !party.players.length }"> Create player </button>
+												<button x-show="!party.players.length" @click="deleteParty(partyIndex)" type="button" class="button-danger-outline-md col-span-6 justify-center"> Delete Party </button>
+											</div>
+										</div>
+									</template>
+								</div>
+							</div>
+
+							<button x-show="!savedParties.length" @click="createParty" type="button" class="relative block w-full border-2 border-gray-300 dark:border-gray-700 dark:hover:border-gray-600 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
+								<i class="fa-solid fa-users text-2xl h-12 w-12 mx-auto text-gray-400 dark:text-gray-300"></i>
+								<span class="mt-2 block text-sm font-medium text-gray-900 dark:text-gray-200"> Create player party </span>
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
+					<button @click="showPartyModal = false" type="button" class="button-primary-md">Close</button>
+					<button @click="createParty" type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-emerald-700 dark:bg-emerald-100 dark:bg-transparent dark:text-emerald-500 dark:hover:bg-emerald-800 dark:hover:text-white hover:bg-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> <i class="fa fa-plus mr-1"></i> Create party </button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+		<div x-show="showKeyboardModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
+			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+				<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
+					 x-show="showKeyboardModal"
+					 x-transition:enter="ease-out duration-300"
+					 x-transition:enter-start="opacity-0"
+					 x-transition:enter-end="opacity-100"
+					 x-transition:leave="ease-in duration-200"
+					 x-transition:leave-start="opacity-100"
+					 x-transition:leave-end="opacity-0"
+				></div>
+
+				<!-- This element is to trick the browser into centering the modal contents. -->
+				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+				<div @mousedown.outside="showKeyboardModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-2xl w-full"
+					 x-show="showKeyboardModal"
+					 x-transition:enter="ease-out duration-300"
+					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+					 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+					 x-transition:leave="ease-in duration-200"
+					 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+					 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+				>
+					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
+						<div class="sm:flex flex-col sm:items-start w-full">
+							<div class="w-full flex pb-3">
+								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keyboard Shortcuts</h3>
+							</div>
+
+							<div class="my-3 sm:mt-0 w-full">
+								<div class="my-2 max-h-96 overflow-y-auto overflow-x-hidden text-gray-700 dark:text-gray-300">
+									<div class="grid grid-cols-2 gap-x-4 gap-y-2">
+										<template x-for="shortcut in keyboardHelp">
+											<div class="flex justify-between">
+												<kbd class="inline-flex items-center border border-gray-200 dark:border-gray-600 rounded px-2 text-sm font-sans font-medium text-gray-400" x-text="shortcut.key"></kbd>
+												<div x-text="shortcut.description"></div>
+											</div>
+										</template>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
+						<button @click="showKeyboardModal = false" type="button" class="button-primary-md">Close</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" x-cloak aria-modal="true" x-data="{
+            importerResourceLocator: '',
+            importerSourceType: 'json-file',
+            importerHtml: '',
+            step: 1,
+            stagedMonsters: [],
+            stagedSources: [],
+            canImport: false,
+            importError: '',
+            init(){
+                this.loadImporter();
+
+                this.$watch('importerResourceLocator', async value => [this.canImport, this.importError] = await Importer.canImport(value, this.importerSourceType));
+            },
+            loadImporter(){
+                this.importerHtml = '';
+                this.importerHtml = Importer.loadersHtml[this.importerSourceType]();
+                this.importerResourceLocator = null;
+            },
+            async startImport() {
+                const importResults = await Importer.import({
+                    type: this.importerSourceType,
+                    resourceLocator: this.importerResourceLocator
+                });
+
+                this.stagedMonsters = importResults.monsters;
+                this.stagedSources = importResults.sources;
+
+                this.step = 2;
+            },
+            finishImport() {
+                importedSources = importedSources.concat(this.stagedSources)
+                formatSources(this.stagedSources);
+                this.stagedSources = [];
+
+                importedMonsters = importedMonsters.concat(this.stagedMonsters)
+                formatMonsters(this.stagedMonsters);
+                this.stagedMonsters = [];
+
+                dispatchEvent(new CustomEvent('notification', {detail: {title: 'Import complete!', body: 'Your new source(s) have been imported'}}));
+
+                this.step = 1;
+                showImporterModal = false;
+            },
+            abortImport() {
+                this.loadImporter();
+                this.stagedSources = [];
+                this.stagedMonsters = [];
+                this.step = 1;
+            },
+            downloadExampleJson(){
+                Importer.downloadExampleJson();
+            }
+        }">
+			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+				<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 dark:bg-opacity-75 bg-opacity-75 transition-opacity" aria-hidden="true"
+					 x-show="showImporterModal"
+					 x-transition:enter="ease-out duration-300"
+					 x-transition:enter-start="opacity-0"
+					 x-transition:enter-end="opacity-100"
+					 x-transition:leave="ease-in duration-200"
+					 x-transition:leave-start="opacity-100"
+					 x-transition:leave-end="opacity-0"
+				></div>
+
+				<!-- This element is to trick the browser into centering the modal contents. -->
+				<span class="hidden sm:inline-block align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+				<div @mousedown.outside="showImporterModal = false" class="relative inline-block bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 align-middle sm:max-w-xl md:max-w-2xl lg:max-w-4xl w-full"
+					 x-show="showImporterModal"
+					 x-transition:enter="ease-out duration-300"
+					 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+					 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+					 x-transition:leave="ease-in duration-200"
+					 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+					 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+				>
+					<div class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
+						<div class="sm:flex flex-col sm:items-start w-full">
+							<div class="w-full flex pb-3">
+								<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Import Custom Monsters</h3>
+							</div>
+
+							<div class="my-3 sm:mt-0 w-full" x-show="step === 1">
+								<label for="importer_source">Import from</label>
+								<select x-model="importerSourceType" @change="loadImporter" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none rounded-md focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
+									<optgroup label="More to come...">
+										<option value="google-sheets">Google Sheets</option>
+										<option value="json-raw">Raw JSON</option>
+										<option value="json-file">JSON File</option>
+									</optgroup>
+								</select>
+
+                                <div class="mb-4" x-html="importerHtml"></div>
+								<div class="text-red-400 dark:text-red-600" x-show="importError.length">
+									<i class="fa fa-exclamation-triangle"></i>
+									<span x-text="importError"></span>
+								</div>
+							</div>
+
+							<div class="my-3 sm:mt-0 w-full" x-show="step === 2">
+								<div class="text-lg">New Sources</div>
+
+								<div class="px-4 sm:px-6 lg:px-8">
+									<div class="mt-2 flex flex-col">
+										<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+											<div class="inline-block min-w-full py-2 align-middle">
+												<div class="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
+													<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
+														<thead class="bg-gray-50 dark:bg-gray-700">
+														<tr>
+															<th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none group whitespace-nowrap w-64">Name</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none sm:table-cell group whitespace-nowrap w-32">Type</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Short Name</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Link</th>
+														</tr>
+														</thead>
+														<tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800">
+														<template x-for="source in stagedSources">
+															<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
+																<td class="whitespace-nowrap py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-200" x-text="source.name"></td>
+																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.type"></td>
+																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.shortname"></td>
+																<td class="whitespace-nowrap py-2 px-3 text-sm text-gray-500 dark:text-gray-300" x-text="source.link"></td>
+															</tr>
+														</template>
+														</tbody>
+													</table>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<div class="text-lg mt-4">New Monsters (Preview)</div>
+
+								<div class="px-4 sm:px-6 lg:px-8">
+									<div class="mt-2 flex flex-col">
+										<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+											<div class="inline-block min-w-full py-2 align-middle">
+												<div class="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
+													<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
+														<thead class="bg-gray-50 dark:bg-gray-700">
+														<tr>
+															<th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none group whitespace-nowrap w-64">Name</th>
+															<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none table-cell group whitespace-nowrap w-32">Size</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none sm:table-cell group whitespace-nowrap w-32">CR</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Type</th>
+															<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold uppercase text-gray-500 dark:text-gray-300 select-none lg:table-cell group whitespace-nowrap w-32">Alignment</th>
+														</tr>
+														</thead>
+														<tbody class="divide-y divide-gray-200 dark:divide-gray-600 bg-white dark:bg-gray-900">
+														<template x-for="monster in stagedMonsters.slice(0, 6)">
+															<tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
+																<td class="w-full max-w-0 py-2 px-3 text-sm font-medium text-gray-900 dark:text-gray-100 w-64 max-w-64 truncate">
+																	<span class="truncate" x-text="monster.name"></span>
+																	<dl class="font-normal">
+																		<dt class="sr-only">Sources</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400" x-text="monster.sources"></dd>
+																		<dt class="sr-only sm:hidden">Type</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.type"></dd>
+																	</dl>
+																</td>
+																<td class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300 table-cell w-32 max-w-32 truncate">
+																	<span class="truncate" x-text="monster.size"></span>
+																	<dl class="font-normal">
+																		<dt class="sr-only sm:hidden">CR</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 sm:hidden">CR <span x-text="monster.cr"></span></dd>
+																		<dt class="sr-only sm:hidden">Alignment</dt>
+																		<dd class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden" x-text="monster.alignment"></dd>
+																	</dl>
+																</td>
+																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 sm:table-cell w-32">
+																	<span x-text="monster.cr"></span>
+																</td>
+																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.type"></td>
+																<td class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32" x-text="monster.alignment"></td>
+															</tr>
+														</template>
+
+														<tr x-show="stagedMonsters.length > 6" class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-700 dark:even:bg-gray-600">
+															<td colspan="5" class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300 table-cell text-center">
+																And <span x-text="stagedMonsters.length - 6"></span> more.
+															</td>
+														</tr>
+														</tbody>
+													</table>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
+						<!--			Step 1 button			-->
+						<button :disabled="!canImport" x-show="step === 1" class="button-primary-md" @click="startImport">Preview Import</button>
+
+						<div class="flex justify-end">
+							<!--			Step 2 button			-->
+							<button x-show="step === 2" class="button-danger-outline-md mr-2" @click="abortImport">Nope, go back!</button>
+							<button x-show="step === 2" class="button-primary-md" @click="finishImport">Looks Good, Import Them!</button>
+						</div>
+
+						<!--			Always shown			-->
+						<button @click="showImporterModal = false; if(step === 2){ abortImport() };" type="button" class="button-secondary-md">Cancel</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+		<div aria-live="assertive" class="fixed inset-0 flex items-end z-50 px-4 py-6 pointer-events-none sm:p-6 sm:items-end" x-data="{ notifications: [], notification: function($event){ this.notifications.push($event.detail) } }" @notification.window="notification">
+		<div class="w-full flex flex-col items-center space-y-4 sm:items-end">
+			<template x-for="(notification, index) in notifications">
+				<div class="max-w-sm w-full relative bg-white dark:bg-gray-700 dark:shadow-xl shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
+					 x-data="{
+                            info: notification,
+                            show:false,
+                            init: function() {
+                                setTimeout(() => this.show = true, 100);
+                                if(!this.info.sticky) {
+                                    setTimeout(() => this.show = false, 3000);
+                                    setTimeout(() => delete notifications[index], 4000);
+                                }
+                            },
+                            remove: function() {
+                                this.show = false;
+                            }
+                         }"
+					 x-show="show"
+					 x-transition:enter="transform ease-out duration-300 transition"
+					 x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+					 x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
+					 x-transition:leave="transition ease-in duration-100"
+					 x-transition:leave-start="opacity-100"
+					 x-transition:leave-end="opacity-0">
+					<div class="p-4" :class="{ 'mb-2' : !info.sticky }">
+						<div class="flex items-start">
+							<div class="flex-shrink-0">
+								<i class="fa" :class="{
+                                'fa-check-circle': !info.icon,
+                                'text-emerald-400': !info.icon_color,
+                                [info.icon]: info.icon,
+                                [info.icon_color]: info.icon_color,
+                            }"></i>
+							</div>
+							<div class="ml-3 w-0 flex-1 pt-0.5">
+								<p class="text-sm font-medium text-gray-900 dark:text-gray-300" x-text="info.title"></p>
+								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400" x-show="info.body" x-html="info.body"></p>
+							</div>
+							<div class="ml-4 flex-shrink-0 flex">
+								<button class="bg-white dark:bg-gray-500 dark:text-gray-800 rounded-md inline-flex text-gray-400 dark:text-gray-800 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500" @click="remove">
+									<span class="sr-only">Close</span>
+									<!-- Heroicon name: solid/x -->
+									<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+										<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+									</svg>
+								</button>
+							</div>
+						</div>
+					</div>
+
+					<div class="absolute inset-x-0 bottom-0 bg-gray-50 dark:bg-gray-700 h-2" x-show="!info.sticky">
+						<div class="absolute inset-x-0 left-0 h-full"
+							 :class="{
+                            'bg-emerald-500': !info.icon_color,
+                            [info.icon_color?.replace('text-', 'bg-')]: info.icon_color
+                         }"
+							 x-show="!show"
+							 x-transition:leave="transition-all ease-linear duration-[2900ms]"
+							 x-transition:leave-start="w-full"
+							 x-transition:leave-end="w-0"
+						></div>
+					</div>
+				</div>
+			</template>
+		</div>
+	</div>
+
+	</div><!-- This example requires Tailwind CSS v2.0+ -->
+</body>
+</html>
diff --git a/docs/js/app.js b/docs/js/app.js
index 1f2e6f92..003db8c1 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9158,19 +9158,21 @@ var module_default = src_default;
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js");
 /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var choices_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! choices.js */ "./node_modules/choices.js/public/assets/scripts/choices.js");
-/* harmony import */ var choices_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(choices_js__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var hotkeys_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! hotkeys-js */ "./node_modules/hotkeys-js/dist/hotkeys.esm.js");
-/* harmony import */ var _encounter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./encounter */ "./src/js/encounter.js");
-/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers */ "./src/js/helpers.js");
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./constants */ "./src/js/constants.js");
-/* harmony import */ var _monster__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./monster */ "./src/js/monster.js");
-/* harmony import */ var _importer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./importer */ "./src/js/importer.js");
-/* harmony import */ var tippy_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! tippy.js */ "./node_modules/tippy.js/dist/tippy.esm.js");
-/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! nouislider */ "./node_modules/nouislider/dist/nouislider.js");
-/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(nouislider__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _alpinejs_persist__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @alpinejs/persist */ "./node_modules/@alpinejs/persist/dist/module.esm.js");
-/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! alpinejs */ "./node_modules/alpinejs/dist/module.esm.js");
+/* harmony import */ var flowbite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! flowbite */ "./node_modules/flowbite/dist/flowbite.js");
+/* harmony import */ var flowbite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(flowbite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var choices_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! choices.js */ "./node_modules/choices.js/public/assets/scripts/choices.js");
+/* harmony import */ var choices_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(choices_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var hotkeys_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! hotkeys-js */ "./node_modules/hotkeys-js/dist/hotkeys.esm.js");
+/* harmony import */ var _encounter__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./encounter */ "./src/js/encounter.js");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./helpers */ "./src/js/helpers.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./constants */ "./src/js/constants.js");
+/* harmony import */ var _monster__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./monster */ "./src/js/monster.js");
+/* harmony import */ var _importer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./importer */ "./src/js/importer.js");
+/* harmony import */ var tippy_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! tippy.js */ "./node_modules/tippy.js/dist/tippy.esm.js");
+/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! nouislider */ "./node_modules/nouislider/dist/nouislider.js");
+/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(nouislider__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var _alpinejs_persist__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @alpinejs/persist */ "./node_modules/@alpinejs/persist/dist/module.esm.js");
+/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! alpinejs */ "./node_modules/alpinejs/dist/module.esm.js");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -9208,12 +9210,13 @@ __webpack_require__(/*! @fortawesome/fontawesome-free */ "./node_modules/@fortaw
 
 
 
+
 var internationalNumberFormat = new Intl.NumberFormat('en-US');
 
 function app() {
   return {
     sourcesVersion: "2.1.0",
-    storedSourcesVersion: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("2.0.0").as('storedSourcesVersion'),
+    storedSourcesVersion: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist("2.0.0").as('storedSourcesVersion'),
     menu: false,
     showFilters: false,
     showSourcesModal: false,
@@ -9225,15 +9228,15 @@ function app() {
     filters: {},
     searchPlaceholder: "",
     nonDefaultFiltersCount: 0,
-    loadedSources: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('sources'),
-    importedSources: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('importedSources'),
-    loadedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('monsters'),
-    importedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('importedMonsters'),
-    encounterHistory: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('encounterHistory'),
-    savedEncounters: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('savedEncounters'),
-    loadedEncounterIndex: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(null).as('loadedEncounterIndex'),
-    loadedLastEncounter: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(false).as('loadedLastEncounter'),
-    savedParties: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('savedParties'),
+    loadedSources: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('sources'),
+    importedSources: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('importedSources'),
+    loadedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('monsters'),
+    importedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('importedMonsters'),
+    encounterHistory: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('encounterHistory'),
+    savedEncounters: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('savedEncounters'),
+    loadedEncounterIndex: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(null).as('loadedEncounterIndex'),
+    loadedLastEncounter: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(false).as('loadedLastEncounter'),
+    savedParties: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('savedParties'),
     sources: {},
     enabledSources: [],
     allMonsters: [],
@@ -9241,23 +9244,23 @@ function app() {
     monsterLookupTable: {},
     environments: {},
     totalPages: 1,
-    currentPage: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(1).as('currentPage'),
+    currentPage: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(1).as('currentPage'),
     pagination: [],
-    monstersPerPage: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(10).as("monstersPerPage"),
-    encounterType: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("random").as("encounterType"),
+    monstersPerPage: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(10).as("monstersPerPage"),
+    encounterType: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist("random").as("encounterType"),
     encounterTypeSelectOpen: false,
-    encounterTypes: Object.fromEntries(Object.entries(_constants__WEBPACK_IMPORTED_MODULE_5__["default"].ENCOUNTER_TYPES).map(function (entry) {
+    encounterTypes: Object.fromEntries(Object.entries(_constants__WEBPACK_IMPORTED_MODULE_6__["default"].ENCOUNTER_TYPES).map(function (entry) {
       return [entry[0], {
         key: entry[0],
         label: entry[1].name
       }];
     })),
     difficultySelectOpen: false,
-    difficulty: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("medium").as("difficulty"),
-    search: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("").as("search"),
-    encounter: _encounter__WEBPACK_IMPORTED_MODULE_3__["default"],
-    sortBy: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("name").as("sortBy"),
-    sortByDesc: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(true).as("sortByDesc"),
+    difficulty: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist("medium").as("difficulty"),
+    search: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist("").as("search"),
+    encounter: _encounter__WEBPACK_IMPORTED_MODULE_4__["default"],
+    sortBy: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist("name").as("sortBy"),
+    sortByDesc: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(true).as("sortByDesc"),
     setSortBy: function setSortBy(type) {
       if (type === this.sortBy) {
         this.sortByDesc = !this.sortByDesc;
@@ -9334,7 +9337,7 @@ function app() {
     },
 
     party: {
-      groups: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([{
+      groups: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([{
         players: 4,
         level: 1,
         getsXP: true
@@ -9361,7 +9364,7 @@ function app() {
       getGroupExperience: function getGroupExperience(acc, group) {
         var _acc$easy, _group$players, _acc$medium, _group$players2, _acc$hard, _group$players3, _acc$deadly, _group$players4, _acc$daily, _group$players5;
 
-        var groupExp = _constants__WEBPACK_IMPORTED_MODULE_5__["default"].EXP[group.level];
+        var groupExp = _constants__WEBPACK_IMPORTED_MODULE_6__["default"].EXP[group.level];
         return {
           easy: ((_acc$easy = acc === null || acc === void 0 ? void 0 : acc.easy) !== null && _acc$easy !== void 0 ? _acc$easy : 0) + groupExp.easy * ((_group$players = group === null || group === void 0 ? void 0 : group.players) !== null && _group$players !== void 0 ? _group$players : 1),
           medium: ((_acc$medium = acc === null || acc === void 0 ? void 0 : acc.medium) !== null && _acc$medium !== void 0 ? _acc$medium : 0) + groupExp.medium * ((_group$players2 = group === null || group === void 0 ? void 0 : group.players) !== null && _group$players2 !== void 0 ? _group$players2 : 1),
@@ -9472,7 +9475,7 @@ function app() {
 
                 _this2.formatMonsters(_this2.importedMonsters);
 
-                _this2.searchPlaceholder = _helpers__WEBPACK_IMPORTED_MODULE_4__.randomArrayElement(_this2.allMonsters).name;
+                _this2.searchPlaceholder = _helpers__WEBPACK_IMPORTED_MODULE_5__.randomArrayElement(_this2.allMonsters).name;
 
                 if (_this2.loadedEncounterIndex !== null) {
                   _this2.encounter.load(_this2.savedEncounters[_this2.loadedEncounterIndex]);
@@ -9583,7 +9586,7 @@ function app() {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                if (!(_this4.loadedSources.length && _helpers__WEBPACK_IMPORTED_MODULE_4__.versionCompare(_this4.sourcesVersion, _this4.storedSourcesVersion) === 0)) {
+                if (!(_this4.loadedSources.length && _helpers__WEBPACK_IMPORTED_MODULE_5__.versionCompare(_this4.sourcesVersion, _this4.storedSourcesVersion) === 0)) {
                   _context2.next = 2;
                   break;
                 }
@@ -9639,7 +9642,7 @@ function app() {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
-                if (!(_this5.loadedSources.length && _helpers__WEBPACK_IMPORTED_MODULE_4__.versionCompare(_this5.storedSourcesVersion, _this5.sourcesVersion) === 0)) {
+                if (!(_this5.loadedSources.length && _helpers__WEBPACK_IMPORTED_MODULE_5__.versionCompare(_this5.storedSourcesVersion, _this5.sourcesVersion) === 0)) {
                   _context3.next = 2;
                   break;
                 }
@@ -9694,7 +9697,7 @@ function app() {
       var _this6 = this;
 
       this.allMonsters = this.allMonsters.concat(data.map(function (data) {
-        var monster = new _monster__WEBPACK_IMPORTED_MODULE_6__["default"](_this6, data);
+        var monster = new _monster__WEBPACK_IMPORTED_MODULE_7__["default"](_this6, data);
         _this6.monsterLookupTable[monster.slug] = monster;
         return monster;
       }));
@@ -9767,7 +9770,7 @@ function app() {
             return filter.min !== 0 || filter.max !== 30;
 
           case "alignment":
-            return filter !== _constants__WEBPACK_IMPORTED_MODULE_5__["default"].ALL_ALIGNMENTS;
+            return filter !== _constants__WEBPACK_IMPORTED_MODULE_6__["default"].ALL_ALIGNMENTS;
 
           default:
             return filter.length && !filter.includes('any');
@@ -9820,7 +9823,7 @@ function app() {
     setupHotkeys: function setupHotkeys() {
       var _this9 = this;
 
-      (0,hotkeys_js__WEBPACK_IMPORTED_MODULE_2__["default"])('ctrl+/,ctrl+k,ctrl+shift+\\,ctrl+f,ctrl+[,ctrl+],ctrl+g,ctrl+s,esc', function (event, handler) {
+      (0,hotkeys_js__WEBPACK_IMPORTED_MODULE_3__["default"])('ctrl+/,ctrl+k,ctrl+shift+\\,ctrl+f,ctrl+[,ctrl+],ctrl+g,ctrl+s,esc', function (event, handler) {
         switch (handler.key) {
           case 'ctrl+/':
             _this9.showKeyboardModal = !_this9.showKeyboardModal;
@@ -9896,7 +9899,7 @@ function app() {
           return player.active;
         }).forEach(function (player, playerIndex) {
           data.Combatants.push({
-            Id: _helpers__WEBPACK_IMPORTED_MODULE_4__.slugify("".concat(party.name, "-").concat(player.name)),
+            Id: _helpers__WEBPACK_IMPORTED_MODULE_5__.slugify("".concat(party.name, "-").concat(player.name)),
             Name: player.name,
             InitiativeModifier: player.initiativeMod,
             InitiativeAdvantage: player.initiativeAdvantage,
@@ -9939,14 +9942,14 @@ function multiSlider($el, name, options, updateCallback) {
       max: '30'
     },
     options: options,
-    value: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist({
+    value: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist({
       min: '0',
       max: '30'
     }).as(name),
     init: function init() {
       var _this10 = this;
 
-      this.slider = nouislider__WEBPACK_IMPORTED_MODULE_8___default().create($el, {
+      this.slider = nouislider__WEBPACK_IMPORTED_MODULE_9___default().create($el, {
         start: [options.findIndex(function (option) {
           return option.value === _this10.value.min;
         }), options.findIndex(function (option) {
@@ -9977,8 +9980,8 @@ function multiSlider($el, name, options, updateCallback) {
         detail: {
           name: "cr",
           value: {
-            min: _constants__WEBPACK_IMPORTED_MODULE_5__["default"].CR[this.value.min].numeric,
-            max: _constants__WEBPACK_IMPORTED_MODULE_5__["default"].CR[this.value.max].numeric
+            min: _constants__WEBPACK_IMPORTED_MODULE_6__["default"].CR[this.value.min].numeric,
+            max: _constants__WEBPACK_IMPORTED_MODULE_6__["default"].CR[this.value.max].numeric
           }
         }
       }));
@@ -10016,7 +10019,7 @@ function multiSlider($el, name, options, updateCallback) {
 function multiSelect($el, name, options) {
   return {
     multiple: true,
-    value: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(['any']).as(name),
+    value: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(['any']).as(name),
     name: name,
     options: options,
     completedSetup: false,
@@ -10035,7 +10038,7 @@ function multiSelect($el, name, options) {
         return;
       }
 
-      var choices = new (choices_js__WEBPACK_IMPORTED_MODULE_1___default())($el, {
+      var choices = new (choices_js__WEBPACK_IMPORTED_MODULE_2___default())($el, {
         allowHTML: true,
         removeItemButton: true
       });
@@ -10097,17 +10100,17 @@ function multiSelect($el, name, options) {
   };
 }
 
-window.hotkeys = hotkeys_js__WEBPACK_IMPORTED_MODULE_2__["default"];
+window.hotkeys = hotkeys_js__WEBPACK_IMPORTED_MODULE_3__["default"];
 window.app = app;
 window.multiSelect = multiSelect;
 window.multiSlider = multiSlider;
-window.noUiSlider = (nouislider__WEBPACK_IMPORTED_MODULE_8___default());
-window.Choices = (choices_js__WEBPACK_IMPORTED_MODULE_1___default());
-window.tippy = tippy_js__WEBPACK_IMPORTED_MODULE_11__["default"];
-window.Importer = _importer__WEBPACK_IMPORTED_MODULE_7__["default"];
-window.Alpine = alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"];
-alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].plugin(_alpinejs_persist__WEBPACK_IMPORTED_MODULE_9__["default"]);
-alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].start();
+window.noUiSlider = (nouislider__WEBPACK_IMPORTED_MODULE_9___default());
+window.Choices = (choices_js__WEBPACK_IMPORTED_MODULE_2___default());
+window.tippy = tippy_js__WEBPACK_IMPORTED_MODULE_12__["default"];
+window.Importer = _importer__WEBPACK_IMPORTED_MODULE_8__["default"];
+window.Alpine = alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"];
+alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].plugin(_alpinejs_persist__WEBPACK_IMPORTED_MODULE_10__["default"]);
+alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].start();
 
 /***/ }),
 
@@ -11168,8 +11171,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "randomIntBetween": () => (/* binding */ randomIntBetween),
 /* harmony export */   "ratio": () => (/* binding */ ratio),
 /* harmony export */   "slugify": () => (/* binding */ slugify),
+/* harmony export */   "validateJSON": () => (/* binding */ validateJSON),
 /* harmony export */   "versionCompare": () => (/* binding */ versionCompare)
 /* harmony export */ });
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 /**
  *  Returns a floating point number between a minimum and maximum value
  *
@@ -11303,6 +11309,25 @@ function versionCompare(v1, v2, options) {
 
   return 0;
 }
+/**
+ * Determines whether a string is actually valid JSON
+ */
+
+function validateJSON(jsonString) {
+  try {
+    var o = JSON.parse(jsonString); // Handle non-exception-throwing cases:
+    // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,
+    // but... JSON.parse(null) returns null, and typeof null === "object",
+    // so we must check for that, too. Thankfully, null is falsey, so this suffices:
+
+    if (o && _typeof(o) === "object") {
+      return o;
+    }
+  } catch (e) {}
+
+  return false;
+}
+;
 
 /***/ }),
 
@@ -11319,6 +11344,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js");
 /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helpers */ "./src/js/helpers.js");
 
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
@@ -11333,35 +11359,237 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 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; }
 
+
+
 var Importer = /*#__PURE__*/function () {
   function Importer() {
     _classCallCheck(this, Importer);
   }
 
   _createClass(Importer, null, [{
+    key: "_validateGoogleSheets",
+    value: function () {
+      var _validateGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee(resourceLocator) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "?") + new URLSearchParams({
+                  key: this.key
+                })).then(function (response) {
+                  return response.json();
+                }).then(function (jsonifiedBody) {
+                  if (!jsonifiedBody.sheets.filter(function (sheet) {
+                    return sheet.properties.title === 'Monsters';
+                  }).length) {
+                    return [false, "Your Google Sheets workbook must contain a sheet called 'Monsters'. Only found: '" + jsonifiedBody.sheets.map(function (sheet) {
+                      return sheet.properties.title;
+                    }).join(', ') + "'"];
+                  }
+
+                  if (!jsonifiedBody.sheets.filter(function (sheet) {
+                    return sheet.properties.title === 'Sources';
+                  }).length) {
+                    return [false, "Your Google Sheets workbook must contain a sheet called 'Sources'. Only found: '" + jsonifiedBody.sheets.map(function (sheet) {
+                      return sheet.properties.title;
+                    }).join(', ') + "'"];
+                  }
+
+                  return [true, ''];
+                });
+
+              case 2:
+                return _context.abrupt("return", _context.sent);
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function _validateGoogleSheets(_x) {
+        return _validateGoogleSheets2.apply(this, arguments);
+      }
+
+      return _validateGoogleSheets;
+    }()
+  }, {
+    key: "_validateJson",
+    value: function () {
+      var _validateJson2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee2(resourceLocator) {
+        var results;
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return this._importJson(resourceLocator);
+
+              case 2:
+                results = _context2.sent;
+
+                if (results) {
+                  _context2.next = 5;
+                  break;
+                }
+
+                return _context2.abrupt("return", [false, "Couldn't resolve K+FC data, import source is probably invalid JSON."]);
+
+              case 5:
+                if (results.sources) {
+                  _context2.next = 7;
+                  break;
+                }
+
+                return _context2.abrupt("return", [false, "Your JSON must contain sources."]);
+
+              case 7:
+                if (results.monsters) {
+                  _context2.next = 9;
+                  break;
+                }
+
+                return _context2.abrupt("return", [false, "Your JSON has sources, but must also contain monsters."]);
+
+              case 9:
+                return _context2.abrupt("return", [true, ""]);
+
+              case 10:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function _validateJson(_x2) {
+        return _validateJson2.apply(this, arguments);
+      }
+
+      return _validateJson;
+    }()
+  }, {
+    key: "_validateJsonFile",
+    value: function () {
+      var _validateJsonFile2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee3(resourceLocator) {
+        var results;
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                if (!(resourceLocator.type !== 'application/json')) {
+                  _context3.next = 2;
+                  break;
+                }
+
+                return _context3.abrupt("return", [false, "The file you provided isn't a text file containing JSON"]);
+
+              case 2:
+                _context3.next = 4;
+                return this._importJsonFile(resourceLocator);
+
+              case 4:
+                results = _context3.sent;
+
+                if (results) {
+                  _context3.next = 7;
+                  break;
+                }
+
+                return _context3.abrupt("return", [false, "Couldn't resolve K+FC data, import source is probably invalid JSON."]);
+
+              case 7:
+                if (results.sources) {
+                  _context3.next = 9;
+                  break;
+                }
+
+                return _context3.abrupt("return", [false, "Your JSON must contain sources."]);
+
+              case 9:
+                if (results.monsters) {
+                  _context3.next = 11;
+                  break;
+                }
+
+                return _context3.abrupt("return", [false, "Your JSON has sources, but must also contain monsters."]);
+
+              case 11:
+                return _context3.abrupt("return", [true, ""]);
+
+              case 12:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function _validateJsonFile(_x3) {
+        return _validateJsonFile2.apply(this, arguments);
+      }
+
+      return _validateJsonFile;
+    }()
+  }, {
+    key: "canImport",
+    value: function () {
+      var _canImport = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee4(resourceLocator, type) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                if (resourceLocator) {
+                  _context4.next = 2;
+                  break;
+                }
+
+                return _context4.abrupt("return", [false, "You must provide an import source."]);
+
+              case 2:
+                return _context4.abrupt("return", this.validators[type].bind(this)(resourceLocator));
+
+              case 3:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4, this);
+      }));
+
+      function canImport(_x4, _x5) {
+        return _canImport.apply(this, arguments);
+      }
+
+      return canImport;
+    }()
+  }, {
     key: "import",
     value: function () {
-      var _import2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee() {
+      var _import2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee5() {
         var _ref,
             _ref$resourceLocator,
             resourceLocator,
             _ref$type,
             type,
-            _args = arguments;
+            _args5 = arguments;
 
-        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee$(_context) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee5$(_context5) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context5.prev = _context5.next) {
               case 0:
-                _ref = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, _ref$resourceLocator = _ref.resourceLocator, resourceLocator = _ref$resourceLocator === void 0 ? false : _ref$resourceLocator, _ref$type = _ref.type, type = _ref$type === void 0 ? 'google-sheets' : _ref$type;
-                return _context.abrupt("return", this.loaders[type].bind(this)(resourceLocator));
+                _ref = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : {}, _ref$resourceLocator = _ref.resourceLocator, resourceLocator = _ref$resourceLocator === void 0 ? false : _ref$resourceLocator, _ref$type = _ref.type, type = _ref$type === void 0 ? 'google-sheets' : _ref$type;
+                return _context5.abrupt("return", this.loaders[type].bind(this)(resourceLocator));
 
               case 2:
               case "end":
-                return _context.stop();
+                return _context5.stop();
             }
           }
-        }, _callee, this);
+        }, _callee5, this);
       }));
 
       function _import() {
@@ -11373,13 +11601,13 @@ var Importer = /*#__PURE__*/function () {
   }, {
     key: "_importGoogleSheets",
     value: function () {
-      var _importGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee2(resourceLocator) {
+      var _importGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee6(resourceLocator) {
         var monsters, sources;
-        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee2$(_context2) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee6$(_context6) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context6.prev = _context6.next) {
               case 0:
-                _context2.next = 2;
+                _context6.next = 2;
                 return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Monsters?") + new URLSearchParams({
                   key: this.key
                 })).then(function (response) {
@@ -11410,8 +11638,8 @@ var Importer = /*#__PURE__*/function () {
                 });
 
               case 2:
-                monsters = _context2.sent;
-                _context2.next = 5;
+                monsters = _context6.sent;
+                _context6.next = 5;
                 return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Sources?") + new URLSearchParams({
                   key: this.key
                 })).then(function (response) {
@@ -11432,21 +11660,21 @@ var Importer = /*#__PURE__*/function () {
                 });
 
               case 5:
-                sources = _context2.sent;
-                return _context2.abrupt("return", {
+                sources = _context6.sent;
+                return _context6.abrupt("return", {
                   sources: sources,
                   monsters: monsters
                 });
 
               case 7:
               case "end":
-                return _context2.stop();
+                return _context6.stop();
             }
           }
-        }, _callee2, this);
+        }, _callee6, this);
       }));
 
-      function _importGoogleSheets(_x) {
+      function _importGoogleSheets(_x6) {
         return _importGoogleSheets2.apply(this, arguments);
       }
 
@@ -11455,12 +11683,12 @@ var Importer = /*#__PURE__*/function () {
   }, {
     key: "_importJsonFile",
     value: function () {
-      var _importJsonFile2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee3(resourceLocator) {
-        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee3$(_context3) {
+      var _importJsonFile2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee7(resourceLocator) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee7$(_context7) {
           while (1) {
-            switch (_context3.prev = _context3.next) {
+            switch (_context7.prev = _context7.next) {
               case 0:
-                return _context3.abrupt("return", new Promise(function (resolve, reject) {
+                return _context7.abrupt("return", new Promise(function (resolve, reject) {
                   var reader = new FileReader();
                   reader.addEventListener('load', function () {
                     try {
@@ -11476,13 +11704,13 @@ var Importer = /*#__PURE__*/function () {
 
               case 1:
               case "end":
-                return _context3.stop();
+                return _context7.stop();
             }
           }
-        }, _callee3);
+        }, _callee7);
       }));
 
-      function _importJsonFile(_x2) {
+      function _importJsonFile(_x7) {
         return _importJsonFile2.apply(this, arguments);
       }
 
@@ -11491,29 +11719,29 @@ var Importer = /*#__PURE__*/function () {
   }, {
     key: "_importJson",
     value: function () {
-      var _importJson2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee4(resourceLocator) {
-        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee4$(_context4) {
+      var _importJson2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee8(resourceLocator) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee8$(_context8) {
           while (1) {
-            switch (_context4.prev = _context4.next) {
+            switch (_context8.prev = _context8.next) {
               case 0:
-                _context4.prev = 0;
-                return _context4.abrupt("return", JSON.parse(resourceLocator));
+                _context8.prev = 0;
+                return _context8.abrupt("return", JSON.parse(resourceLocator));
 
               case 4:
-                _context4.prev = 4;
-                _context4.t0 = _context4["catch"](0);
-                console.error(_context4.t0);
-                return _context4.abrupt("return", false);
+                _context8.prev = 4;
+                _context8.t0 = _context8["catch"](0);
+                console.error(_context8.t0);
+                return _context8.abrupt("return", false);
 
               case 8:
               case "end":
-                return _context4.stop();
+                return _context8.stop();
             }
           }
-        }, _callee4, null, [[0, 4]]);
+        }, _callee8, null, [[0, 4]]);
       }));
 
-      function _importJson(_x3) {
+      function _importJson(_x8) {
         return _importJson2.apply(this, arguments);
       }
 
@@ -11580,21 +11808,29 @@ var Importer = /*#__PURE__*/function () {
   return Importer;
 }();
 
+_defineProperty(Importer, "key", 'AIzaSyDzQndw__ieQX2WMK06ROjFhn_jFAFelk8');
+
 _defineProperty(Importer, "loaders", {
   'google-sheets': Importer._importGoogleSheets,
   'json-raw': Importer._importJson,
   'json-file': Importer._importJsonFile
 });
 
+_defineProperty(Importer, "validators", {
+  'google-sheets': Importer._validateGoogleSheets,
+  'json-raw': Importer._validateJson,
+  'json-file': Importer._validateJsonFile
+});
+
 _defineProperty(Importer, "loadersHtml", {
   'google-sheets': function googleSheets() {
     return "\n                <label for=\"import_resource_locator\">Sheets ID</label>\n                <input name=\"import_resource_locator\" id=\"import_resource_locator\" type=\"text\" x-model=\"importerResourceLocator\">\n            ";
   },
   'json-raw': function jsonRaw() {
-    return "\n                <label for=\"import_resource_locator\">Raw JSON</label> - <a href=\"javascript:true\" @click=\"downloadExampleJson\">download example</a>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
+    return "\n                <label for=\"import_resource_locator\">Raw JSON</label> - <a href=\"javascript:true\" class=\"primary-link\" @click=\"downloadExampleJson\">download example</a>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
   },
   'json-file': function jsonFile() {
-    return "\n                <label for=\"import_resource_locator\" class=\"block mb-2 text-gray-900 dark:text-gray-300\">Upload JSON file</label> - <a href=\"javascript:true\" @click=\"downloadExampleJson\">download example</a>\n                <input id=\"import_resource_locator\" type=\"file\" accept=\"text/json\" @change=\"importerResourceLocator = $event.target.files[0]\" class=\"block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\">\n            ";
+    return "\n                <label class=\"block\" id=\"file_input_label\" for=\"import_resource_locator_file\">Upload JSON text file below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleJson\">download an example file to edit</a></label>                \n                <input accept=\"application/json\" class=\"block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"importerResourceLocator = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file\" type=\"file\">\n            ";
   }
 });
 
@@ -19480,6 +19716,3395 @@ __webpack_exports__ = __webpack_exports__["default"];
 
 /***/ }),
 
+/***/ "./node_modules/flowbite/dist/flowbite.js":
+/*!************************************************!*\
+  !*** ./node_modules/flowbite/dist/flowbite.js ***!
+  \************************************************/
+/***/ (() => {
+
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+var __webpack_exports__ = {};
+
+// UNUSED EXPORTS: default
+
+;// CONCATENATED MODULE: ./src/components/accordion.js
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { 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 _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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 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 _objectSpread(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 _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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+var Default = {
+  alwaysOpen: false,
+  activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
+  inactiveClasses: 'text-gray-500 dark:text-gray-400',
+  onOpen: function onOpen() {},
+  onClose: function onClose() {},
+  onToggle: function onToggle() {}
+};
+
+var Accordion = /*#__PURE__*/function () {
+  function Accordion() {
+    var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    _classCallCheck(this, Accordion);
+
+    this._items = items;
+    this._options = _objectSpread(_objectSpread({}, Default), options);
+
+    this._init();
+  }
+
+  _createClass(Accordion, [{
+    key: "_init",
+    value: function _init() {
+      var _this = this;
+
+      if (this._items.length) {
+        // show accordion item based on click
+        this._items.map(function (item) {
+          if (item.active) {
+            _this.open(item.id);
+          }
+
+          item.triggerEl.addEventListener('click', function () {
+            _this.toggle(item.id);
+          });
+        });
+      }
+    }
+  }, {
+    key: "getItem",
+    value: function getItem(id) {
+      return this._items.filter(function (item) {
+        return item.id === id;
+      })[0];
+    }
+  }, {
+    key: "open",
+    value: function open(id) {
+      var _this2 = this,
+          _item$triggerEl$class,
+          _item$triggerEl$class2;
+
+      var item = this.getItem(id); // don't hide other accordions if always open
+
+      if (!this._options.alwaysOpen) {
+        this._items.map(function (i) {
+          if (i !== item) {
+            var _i$triggerEl$classLis, _i$triggerEl$classLis2;
+
+            (_i$triggerEl$classLis = i.triggerEl.classList).remove.apply(_i$triggerEl$classLis, _toConsumableArray(_this2._options.activeClasses.split(" ")));
+
+            (_i$triggerEl$classLis2 = i.triggerEl.classList).add.apply(_i$triggerEl$classLis2, _toConsumableArray(_this2._options.inactiveClasses.split(" ")));
+
+            i.targetEl.classList.add('hidden');
+            i.triggerEl.setAttribute('aria-expanded', false);
+            i.active = false; // rotate icon if set
+
+            if (i.iconEl) {
+              i.iconEl.classList.remove('rotate-180');
+            }
+          }
+        });
+      } // show active item
+
+
+      (_item$triggerEl$class = item.triggerEl.classList).add.apply(_item$triggerEl$class, _toConsumableArray(this._options.activeClasses.split(" ")));
+
+      (_item$triggerEl$class2 = item.triggerEl.classList).remove.apply(_item$triggerEl$class2, _toConsumableArray(this._options.inactiveClasses.split(" ")));
+
+      item.triggerEl.setAttribute('aria-expanded', true);
+      item.targetEl.classList.remove('hidden');
+      item.active = true; // rotate icon if set
+
+      if (item.iconEl) {
+        item.iconEl.classList.add('rotate-180');
+      } // callback function
+
+
+      this._options.onOpen(this, item);
+    }
+  }, {
+    key: "toggle",
+    value: function toggle(id) {
+      var item = this.getItem(id);
+
+      if (item.active) {
+        this.close(id);
+      } else {
+        this.open(id);
+      } // callback function
+
+
+      this._options.onToggle(this, item);
+    }
+  }, {
+    key: "close",
+    value: function close(id) {
+      var _item$triggerEl$class3, _item$triggerEl$class4;
+
+      var item = this.getItem(id);
+
+      (_item$triggerEl$class3 = item.triggerEl.classList).remove.apply(_item$triggerEl$class3, _toConsumableArray(this._options.activeClasses.split(" ")));
+
+      (_item$triggerEl$class4 = item.triggerEl.classList).add.apply(_item$triggerEl$class4, _toConsumableArray(this._options.inactiveClasses.split(" ")));
+
+      item.targetEl.classList.add('hidden');
+      item.triggerEl.setAttribute('aria-expanded', false);
+      item.active = false; // rotate icon if set
+
+      if (item.iconEl) {
+        item.iconEl.classList.remove('rotate-180');
+      } // callback function
+
+
+      this._options.onClose(this, item);
+    }
+  }]);
+
+  return Accordion;
+}();
+
+window.Accordion = Accordion;
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('[data-accordion]').forEach(function (accordionEl) {
+    var alwaysOpen = accordionEl.getAttribute('data-accordion');
+    var activeClasses = accordionEl.getAttribute('data-active-classes');
+    var inactiveClasses = accordionEl.getAttribute('data-inactive-classes');
+    var items = [];
+    accordionEl.querySelectorAll('[data-accordion-target]').forEach(function (el) {
+      var item = {
+        id: el.getAttribute('data-accordion-target'),
+        triggerEl: el,
+        targetEl: document.querySelector(el.getAttribute('data-accordion-target')),
+        iconEl: el.querySelector('[data-accordion-icon]'),
+        active: el.getAttribute('aria-expanded') === 'true' ? true : false
+      };
+      items.push(item);
+    });
+    new Accordion(items, {
+      alwaysOpen: alwaysOpen === 'open' ? true : false,
+      activeClasses: activeClasses ? activeClasses : Default.activeClasses,
+      inactiveClasses: inactiveClasses ? inactiveClasses : Default.inactiveClasses
+    });
+  });
+});
+/* harmony default export */ const accordion = (Accordion);
+;// CONCATENATED MODULE: ./src/components/collapse.js
+function collapse_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 collapse_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? collapse_ownKeys(Object(source), !0).forEach(function (key) { collapse_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : collapse_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function collapse_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 collapse_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function collapse_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 collapse_createClass(Constructor, protoProps, staticProps) { if (protoProps) collapse_defineProperties(Constructor.prototype, protoProps); if (staticProps) collapse_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+var collapse_Default = {
+  triggerEl: null,
+  onCollapse: function onCollapse() {},
+  onExpand: function onExpand() {},
+  onToggle: function onToggle() {}
+};
+
+var Collapse = /*#__PURE__*/function () {
+  function Collapse() {
+    var targetEl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var options = arguments.length > 1 ? arguments[1] : undefined;
+
+    collapse_classCallCheck(this, Collapse);
+
+    this._targetEl = targetEl;
+    this._triggerEl = options ? options.triggerEl : collapse_Default.triggerEl;
+    this._options = collapse_objectSpread(collapse_objectSpread({}, collapse_Default), options);
+    this._visible = false;
+
+    this._init();
+  }
+
+  collapse_createClass(Collapse, [{
+    key: "_init",
+    value: function _init() {
+      var _this = this;
+
+      if (this._triggerEl) {
+        if (this._triggerEl.hasAttribute('aria-expanded')) {
+          this._visible = this._triggerEl.getAttribute('aria-expanded') === 'true' ? true : false;
+        } else {
+          // fix until v2 not to break previous single collapses which became dismiss
+          this._visible = this._targetEl.classList.contains('hidden') ? false : true;
+        }
+
+        this._triggerEl.addEventListener('click', function () {
+          _this._visible ? _this.collapse() : _this.expand();
+        });
+      }
+    }
+  }, {
+    key: "collapse",
+    value: function collapse() {
+      this._targetEl.classList.add('hidden');
+
+      if (this._triggerEl) {
+        this._triggerEl.setAttribute('aria-expanded', 'false');
+      }
+
+      this._visible = false; // callback function
+
+      this._options.onCollapse(this);
+    }
+  }, {
+    key: "expand",
+    value: function expand() {
+      this._targetEl.classList.remove('hidden');
+
+      if (this._triggerEl) {
+        this._triggerEl.setAttribute('aria-expanded', 'true');
+      }
+
+      this._visible = true; // callback function
+
+      this._options.onExpand(this);
+    }
+  }, {
+    key: "toggle",
+    value: function toggle() {
+      if (this._visible) {
+        this.collapse();
+      } else {
+        this.expand();
+      }
+    }
+  }]);
+
+  return Collapse;
+}();
+
+window.Collapse = Collapse;
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('[data-collapse-toggle]').forEach(function (triggerEl) {
+    var targetEl = document.getElementById(triggerEl.getAttribute('data-collapse-toggle'));
+    new Collapse(targetEl, {
+      triggerEl: triggerEl
+    });
+  });
+});
+/* harmony default export */ const collapse = (Collapse);
+;// CONCATENATED MODULE: ./src/components/carousel.js
+function carousel_toConsumableArray(arr) { return carousel_arrayWithoutHoles(arr) || carousel_iterableToArray(arr) || carousel_unsupportedIterableToArray(arr) || carousel_nonIterableSpread(); }
+
+function carousel_nonIterableSpread() { 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 carousel_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return carousel_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 carousel_arrayLikeToArray(o, minLen); }
+
+function carousel_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function carousel_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return carousel_arrayLikeToArray(arr); }
+
+function carousel_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 carousel_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 carousel_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? carousel_ownKeys(Object(source), !0).forEach(function (key) { carousel_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : carousel_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function carousel_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 carousel_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function carousel_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 carousel_createClass(Constructor, protoProps, staticProps) { if (protoProps) carousel_defineProperties(Constructor.prototype, protoProps); if (staticProps) carousel_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+var carousel_Default = {
+  defaultPosition: 0,
+  indicators: {
+    items: [],
+    activeClasses: 'bg-white dark:bg-gray-800',
+    inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800'
+  },
+  interval: 3000,
+  onNext: function onNext() {},
+  onPrev: function onPrev() {},
+  onChange: function onChange() {}
+};
+
+var Carousel = /*#__PURE__*/function () {
+  function Carousel() {
+    var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    carousel_classCallCheck(this, Carousel);
+
+    this._items = items;
+    this._options = carousel_objectSpread(carousel_objectSpread(carousel_objectSpread({}, carousel_Default), options), {}, {
+      indicators: carousel_objectSpread(carousel_objectSpread({}, carousel_Default.indicators), options.indicators)
+    });
+    this._activeItem = this.getItem(this._options.defaultPosition);
+    this._indicators = this._options.indicators.items;
+    this._interval = null;
+
+    this._init();
+  }
+  /**
+   * Initialise carousel and items based on active one
+   */
+
+
+  carousel_createClass(Carousel, [{
+    key: "_init",
+    value: function _init() {
+      var _this = this;
+
+      this._items.map(function (item) {
+        item.el.classList.add('absolute', 'inset-0', 'transition-all', 'transform');
+      }); // if no active item is set then first position is default
+
+
+      if (this._getActiveItem()) {
+        this.slideTo(this._getActiveItem().position);
+      } else {
+        this.slideTo(0);
+      }
+
+      this._indicators.map(function (indicator, position) {
+        indicator.el.addEventListener('click', function () {
+          _this.slideTo(position);
+        });
+      });
+    }
+  }, {
+    key: "getItem",
+    value: function getItem(position) {
+      return this._items[position];
+    }
+    /**
+     * Slide to the element based on id
+     * @param {*} position 
+     */
+
+  }, {
+    key: "slideTo",
+    value: function slideTo(position) {
+      var nextItem = this._items[position];
+      var rotationItems = {
+        'left': nextItem.position === 0 ? this._items[this._items.length - 1] : this._items[nextItem.position - 1],
+        'middle': nextItem,
+        'right': nextItem.position === this._items.length - 1 ? this._items[0] : this._items[nextItem.position + 1]
+      };
+
+      this._rotate(rotationItems);
+
+      this._setActiveItem(nextItem.position);
+
+      if (this._interval) {
+        this.pause();
+        this.cycle();
+      }
+
+      this._options.onChange(this);
+    }
+    /**
+     * Based on the currently active item it will go to the next position
+     */
+
+  }, {
+    key: "next",
+    value: function next() {
+      var activeItem = this._getActiveItem();
+
+      var nextItem = null; // check if last item
+
+      if (activeItem.position === this._items.length - 1) {
+        nextItem = this._items[0];
+      } else {
+        nextItem = this._items[activeItem.position + 1];
+      }
+
+      this.slideTo(nextItem.position); // callback function
+
+      this._options.onNext(this);
+    }
+    /**
+     * Based on the currently active item it will go to the previous position
+     */
+
+  }, {
+    key: "prev",
+    value: function prev() {
+      var activeItem = this._getActiveItem();
+
+      var prevItem = null; // check if first item
+
+      if (activeItem.position === 0) {
+        prevItem = this._items[this._items.length - 1];
+      } else {
+        prevItem = this._items[activeItem.position - 1];
+      }
+
+      this.slideTo(prevItem.position); // callback function
+
+      this._options.onPrev(this);
+    }
+    /**
+     * This method applies the transform classes based on the left, middle, and right rotation carousel items
+     * @param {*} rotationItems 
+     */
+
+  }, {
+    key: "_rotate",
+    value: function _rotate(rotationItems) {
+      // reset
+      this._items.map(function (item) {
+        item.el.classList.add('hidden');
+      }); // left item (previously active)
+
+
+      rotationItems.left.el.classList.remove('-translate-x-full', 'translate-x-full', 'translate-x-0', 'hidden', 'z-20');
+      rotationItems.left.el.classList.add('-translate-x-full', 'z-10'); // currently active item
+
+      rotationItems.middle.el.classList.remove('-translate-x-full', 'translate-x-full', 'translate-x-0', 'hidden', 'z-10');
+      rotationItems.middle.el.classList.add('translate-x-0', 'z-20'); // right item (upcoming active)
+
+      rotationItems.right.el.classList.remove('-translate-x-full', 'translate-x-full', 'translate-x-0', 'hidden', 'z-20');
+      rotationItems.right.el.classList.add('translate-x-full', 'z-10');
+    }
+    /**
+     * Set an interval to cycle through the carousel items
+     */
+
+  }, {
+    key: "cycle",
+    value: function cycle() {
+      var _this2 = this;
+
+      this._interval = setInterval(function () {
+        _this2.next();
+      }, this._options.interval);
+    }
+    /**
+     * Clears the cycling interval
+     */
+
+  }, {
+    key: "pause",
+    value: function pause() {
+      clearInterval(this._interval);
+    }
+    /**
+     * Get the currently active item
+     */
+
+  }, {
+    key: "_getActiveItem",
+    value: function _getActiveItem() {
+      return this._activeItem;
+    }
+    /**
+     * Set the currently active item and data attribute
+     * @param {*} position 
+     */
+
+  }, {
+    key: "_setActiveItem",
+    value: function _setActiveItem(position) {
+      var _this3 = this;
+
+      this._activeItem = this._items[position]; // update the indicators if available
+
+      if (this._indicators.length) {
+        var _this$_indicators$pos, _this$_indicators$pos2;
+
+        this._indicators.map(function (indicator) {
+          var _indicator$el$classLi, _indicator$el$classLi2;
+
+          indicator.el.setAttribute('aria-current', 'false');
+
+          (_indicator$el$classLi = indicator.el.classList).remove.apply(_indicator$el$classLi, carousel_toConsumableArray(_this3._options.indicators.activeClasses.split(" ")));
+
+          (_indicator$el$classLi2 = indicator.el.classList).add.apply(_indicator$el$classLi2, carousel_toConsumableArray(_this3._options.indicators.inactiveClasses.split(" ")));
+        });
+
+        (_this$_indicators$pos = this._indicators[position].el.classList).add.apply(_this$_indicators$pos, carousel_toConsumableArray(this._options.indicators.activeClasses.split(" ")));
+
+        (_this$_indicators$pos2 = this._indicators[position].el.classList).remove.apply(_this$_indicators$pos2, carousel_toConsumableArray(this._options.indicators.inactiveClasses.split(" ")));
+
+        this._indicators[position].el.setAttribute('aria-current', 'true');
+      }
+    }
+  }]);
+
+  return Carousel;
+}();
+
+window.Carousel = Carousel;
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('[data-carousel]').forEach(function (carouselEl) {
+    var interval = carouselEl.getAttribute('data-carousel-interval');
+    var slide = carouselEl.getAttribute('data-carousel') === 'slide' ? true : false;
+    var items = [];
+    var defaultPosition = 0;
+
+    if (carouselEl.querySelectorAll('[data-carousel-item]').length) {
+      carousel_toConsumableArray(carouselEl.querySelectorAll('[data-carousel-item]')).map(function (carouselItemEl, position) {
+        items.push({
+          position: position,
+          el: carouselItemEl
+        });
+
+        if (carouselItemEl.getAttribute('data-carousel-item') === 'active') {
+          defaultPosition = position;
+        }
+      });
+    }
+
+    var indicators = [];
+
+    if (carouselEl.querySelectorAll('[data-carousel-slide-to]').length) {
+      carousel_toConsumableArray(carouselEl.querySelectorAll('[data-carousel-slide-to]')).map(function (indicatorEl) {
+        indicators.push({
+          position: indicatorEl.getAttribute('data-carousel-slide-to'),
+          el: indicatorEl
+        });
+      });
+    }
+
+    var carousel = new Carousel(items, {
+      defaultPosition: defaultPosition,
+      indicators: {
+        items: indicators
+      },
+      interval: interval ? interval : carousel_Default.interval
+    });
+
+    if (slide) {
+      carousel.cycle();
+    } // check for controls
+
+
+    var carouselNextEl = carouselEl.querySelector('[data-carousel-next]');
+    var carouselPrevEl = carouselEl.querySelector('[data-carousel-prev]');
+
+    if (carouselNextEl) {
+      carouselNextEl.addEventListener('click', function () {
+        carousel.next();
+      });
+    }
+
+    if (carouselPrevEl) {
+      carouselPrevEl.addEventListener('click', function () {
+        carousel.prev();
+      });
+    }
+  });
+});
+/* harmony default export */ const carousel = (Carousel);
+;// CONCATENATED MODULE: ./src/components/dismiss.js
+function dismiss_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 dismiss_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? dismiss_ownKeys(Object(source), !0).forEach(function (key) { dismiss_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : dismiss_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function dismiss_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 dismiss_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function dismiss_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 dismiss_createClass(Constructor, protoProps, staticProps) { if (protoProps) dismiss_defineProperties(Constructor.prototype, protoProps); if (staticProps) dismiss_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+var dismiss_Default = {
+  triggerEl: null,
+  transition: 'transition-opacity',
+  duration: 300,
+  timing: 'ease-out',
+  onHide: function onHide() {}
+};
+
+var Dismiss = /*#__PURE__*/function () {
+  function Dismiss() {
+    var targetEl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    dismiss_classCallCheck(this, Dismiss);
+
+    this._targetEl = targetEl;
+    this._triggerEl = options ? options.triggerEl : dismiss_Default.triggerEl;
+    this._options = dismiss_objectSpread(dismiss_objectSpread({}, dismiss_Default), options);
+
+    this._init();
+  }
+
+  dismiss_createClass(Dismiss, [{
+    key: "_init",
+    value: function _init() {
+      var _this = this;
+
+      if (this._triggerEl) {
+        this._triggerEl.addEventListener('click', function () {
+          _this.hide();
+        });
+      }
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this2 = this;
+
+      this._targetEl.classList.add(this._options.transition, "duration-".concat(this._options.duration), this._options.timing, 'opacity-0');
+
+      setTimeout(function () {
+        _this2._targetEl.classList.add('hidden');
+      }, this._options.duration); // callback function
+
+      this._options.onHide(this, this._targetEl);
+    }
+  }]);
+
+  return Dismiss;
+}();
+
+window.Dismiss = Dismiss;
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('[data-dismiss-target]').forEach(function (triggerEl) {
+    var targetEl = document.querySelector(triggerEl.getAttribute('data-dismiss-target'));
+    new Dismiss(targetEl, {
+      triggerEl: triggerEl
+    });
+  });
+});
+/* harmony default export */ const dismiss = (Dismiss);
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
+function getWindow(node) {
+  if (node == null) {
+    return window;
+  }
+
+  if (node.toString() !== '[object Window]') {
+    var ownerDocument = node.ownerDocument;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
+
+  return node;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js
+
+
+function isElement(node) {
+  var OwnElement = getWindow(node).Element;
+  return node instanceof OwnElement || node instanceof Element;
+}
+
+function isHTMLElement(node) {
+  var OwnElement = getWindow(node).HTMLElement;
+  return node instanceof OwnElement || node instanceof HTMLElement;
+}
+
+function isShadowRoot(node) {
+  // IE 11 has no ShadowRoot
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+
+  var OwnElement = getWindow(node).ShadowRoot;
+  return node instanceof OwnElement || node instanceof ShadowRoot;
+}
+
+
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/math.js
+var math_max = Math.max;
+var math_min = Math.min;
+var round = Math.round;
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
+
+
+function getBoundingClientRect(element, includeScale) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+
+  var rect = element.getBoundingClientRect();
+  var scaleX = 1;
+  var scaleY = 1;
+
+  if (isHTMLElement(element) && includeScale) {
+    var offsetHeight = element.offsetHeight;
+    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
+    // Fallback to 1 in case both values are `0`
+
+    if (offsetWidth > 0) {
+      scaleX = round(rect.width) / offsetWidth || 1;
+    }
+
+    if (offsetHeight > 0) {
+      scaleY = round(rect.height) / offsetHeight || 1;
+    }
+  }
+
+  return {
+    width: rect.width / scaleX,
+    height: rect.height / scaleY,
+    top: rect.top / scaleY,
+    right: rect.right / scaleX,
+    bottom: rect.bottom / scaleY,
+    left: rect.left / scaleX,
+    x: rect.left / scaleX,
+    y: rect.top / scaleY
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js
+
+function getWindowScroll(node) {
+  var win = getWindow(node);
+  var scrollLeft = win.pageXOffset;
+  var scrollTop = win.pageYOffset;
+  return {
+    scrollLeft: scrollLeft,
+    scrollTop: scrollTop
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getHTMLElementScroll.js
+function getHTMLElementScroll(element) {
+  return {
+    scrollLeft: element.scrollLeft,
+    scrollTop: element.scrollTop
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeScroll.js
+
+
+
+
+function getNodeScroll(node) {
+  if (node === getWindow(node) || !isHTMLElement(node)) {
+    return getWindowScroll(node);
+  } else {
+    return getHTMLElementScroll(node);
+  }
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeName.js
+function getNodeName(element) {
+  return element ? (element.nodeName || '').toLowerCase() : null;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js
+
+function getDocumentElement(element) {
+  // $FlowFixMe[incompatible-return]: assume body is always available
+  return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
+  element.document) || window.document).documentElement;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js
+
+
+
+function getWindowScrollBarX(element) {
+  // If <html> has a CSS width greater than the viewport, then this will be
+  // incorrect for RTL.
+  // Popper 1 is broken in this case and never had a bug report so let's assume
+  // it's not an issue. I don't think anyone ever specifies width on <html>
+  // anyway.
+  // Browsers where the left scrollbar doesn't cause an issue report `0` for
+  // this (e.g. Edge 2019, IE11, Safari)
+  return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js
+
+function getComputedStyle(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js
+
+function isScrollParent(element) {
+  // Firefox wants us to check `-x` and `-y` variations as well
+  var _getComputedStyle = getComputedStyle(element),
+      overflow = _getComputedStyle.overflow,
+      overflowX = _getComputedStyle.overflowX,
+      overflowY = _getComputedStyle.overflowY;
+
+  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js
+
+
+
+
+
+
+
+
+
+function isElementScaled(element) {
+  var rect = element.getBoundingClientRect();
+  var scaleX = round(rect.width) / element.offsetWidth || 1;
+  var scaleY = round(rect.height) / element.offsetHeight || 1;
+  return scaleX !== 1 || scaleY !== 1;
+} // Returns the composite rect of an element relative to its offsetParent.
+// Composite means it takes into account transforms as well as layout.
+
+
+function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+
+  var isOffsetParentAnElement = isHTMLElement(offsetParent);
+  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+  var documentElement = getDocumentElement(offsetParent);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
+  var scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  var offsets = {
+    x: 0,
+    y: 0
+  };
+
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078
+    isScrollParent(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+
+    if (isHTMLElement(offsetParent)) {
+      offsets = getBoundingClientRect(offsetParent, true);
+      offsets.x += offsetParent.clientLeft;
+      offsets.y += offsetParent.clientTop;
+    } else if (documentElement) {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+  }
+
+  return {
+    x: rect.left + scroll.scrollLeft - offsets.x,
+    y: rect.top + scroll.scrollTop - offsets.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js
+ // Returns the layout rect of an element relative to its offsetParent. Layout
+// means it doesn't take into account transforms.
+
+function getLayoutRect(element) {
+  var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
+  // Fixes https://github.com/popperjs/popper-core/issues/1223
+
+  var width = element.offsetWidth;
+  var height = element.offsetHeight;
+
+  if (Math.abs(clientRect.width - width) <= 1) {
+    width = clientRect.width;
+  }
+
+  if (Math.abs(clientRect.height - height) <= 1) {
+    height = clientRect.height;
+  }
+
+  return {
+    x: element.offsetLeft,
+    y: element.offsetTop,
+    width: width,
+    height: height
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getParentNode.js
+
+
+
+function getParentNode(element) {
+  if (getNodeName(element) === 'html') {
+    return element;
+  }
+
+  return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
+    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[prop-missing]
+    element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
+    element.parentNode || ( // DOM Element detected
+    isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
+    // $FlowFixMe[incompatible-call]: HTMLElement is a Node
+    getDocumentElement(element) // fallback
+
+  );
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getScrollParent.js
+
+
+
+
+function getScrollParent(node) {
+  if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
+    // $FlowFixMe[incompatible-return]: assume body is always available
+    return node.ownerDocument.body;
+  }
+
+  if (isHTMLElement(node) && isScrollParent(node)) {
+    return node;
+  }
+
+  return getScrollParent(getParentNode(node));
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js
+
+
+
+
+/*
+given a DOM element, return the list of all scroll parents, up the list of ancesors
+until we get to the top window object. This list is what we attach scroll listeners
+to, because if any of these parent elements scroll, we'll need to re-calculate the
+reference element's position.
+*/
+
+function listScrollParents(element, list) {
+  var _element$ownerDocumen;
+
+  if (list === void 0) {
+    list = [];
+  }
+
+  var scrollParent = getScrollParent(element);
+  var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
+  var win = getWindow(scrollParent);
+  var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
+  var updatedList = list.concat(target);
+  return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
+  updatedList.concat(listScrollParents(getParentNode(target)));
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isTableElement.js
+
+function isTableElement(element) {
+  return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js
+
+
+
+
+
+
+
+function getTrueOffsetParent(element) {
+  if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
+  getComputedStyle(element).position === 'fixed') {
+    return null;
+  }
+
+  return element.offsetParent;
+} // `.offsetParent` reports `null` for fixed elements, while absolute elements
+// return the containing block
+
+
+function getContainingBlock(element) {
+  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
+  var isIE = navigator.userAgent.indexOf('Trident') !== -1;
+
+  if (isIE && isHTMLElement(element)) {
+    // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
+    var elementCss = getComputedStyle(element);
+
+    if (elementCss.position === 'fixed') {
+      return null;
+    }
+  }
+
+  var currentNode = getParentNode(element);
+
+  while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
+    var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
+    // create a containing block.
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+
+    if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') {
+      return currentNode;
+    } else {
+      currentNode = currentNode.parentNode;
+    }
+  }
+
+  return null;
+} // Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+
+
+function getOffsetParent(element) {
+  var window = getWindow(element);
+  var offsetParent = getTrueOffsetParent(element);
+
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
+    offsetParent = getTrueOffsetParent(offsetParent);
+  }
+
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
+    return window;
+  }
+
+  return offsetParent || getContainingBlock(element) || window;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/enums.js
+var enums_top = 'top';
+var bottom = 'bottom';
+var right = 'right';
+var left = 'left';
+var auto = 'auto';
+var basePlacements = [enums_top, bottom, right, left];
+var start = 'start';
+var end = 'end';
+var clippingParents = 'clippingParents';
+var viewport = 'viewport';
+var popper = 'popper';
+var reference = 'reference';
+var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
+  return acc.concat([placement + "-" + start, placement + "-" + end]);
+}, []);
+var enums_placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
+  return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
+}, []); // modifiers that need to read the DOM
+
+var beforeRead = 'beforeRead';
+var read = 'read';
+var afterRead = 'afterRead'; // pure-logic modifiers
+
+var beforeMain = 'beforeMain';
+var main = 'main';
+var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
+
+var beforeWrite = 'beforeWrite';
+var write = 'write';
+var afterWrite = 'afterWrite';
+var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/orderModifiers.js
+ // source: https://stackoverflow.com/questions/49875255
+
+function order(modifiers) {
+  var map = new Map();
+  var visited = new Set();
+  var result = [];
+  modifiers.forEach(function (modifier) {
+    map.set(modifier.name, modifier);
+  }); // On visiting object, check for its dependencies and visit them recursively
+
+  function sort(modifier) {
+    visited.add(modifier.name);
+    var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []);
+    requires.forEach(function (dep) {
+      if (!visited.has(dep)) {
+        var depModifier = map.get(dep);
+
+        if (depModifier) {
+          sort(depModifier);
+        }
+      }
+    });
+    result.push(modifier);
+  }
+
+  modifiers.forEach(function (modifier) {
+    if (!visited.has(modifier.name)) {
+      // check for visited object
+      sort(modifier);
+    }
+  });
+  return result;
+}
+
+function orderModifiers(modifiers) {
+  // order based on dependencies
+  var orderedModifiers = order(modifiers); // order based on phase
+
+  return modifierPhases.reduce(function (acc, phase) {
+    return acc.concat(orderedModifiers.filter(function (modifier) {
+      return modifier.phase === phase;
+    }));
+  }, []);
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/debounce.js
+function debounce(fn) {
+  var pending;
+  return function () {
+    if (!pending) {
+      pending = new Promise(function (resolve) {
+        Promise.resolve().then(function () {
+          pending = undefined;
+          resolve(fn());
+        });
+      });
+    }
+
+    return pending;
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/mergeByName.js
+function mergeByName(modifiers) {
+  var merged = modifiers.reduce(function (merged, current) {
+    var existing = merged[current.name];
+    merged[current.name] = existing ? Object.assign({}, existing, current, {
+      options: Object.assign({}, existing.options, current.options),
+      data: Object.assign({}, existing.data, current.data)
+    }) : current;
+    return merged;
+  }, {}); // IE11 does not support Object.values
+
+  return Object.keys(merged).map(function (key) {
+    return merged[key];
+  });
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/createPopper.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
+var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
+var DEFAULT_OPTIONS = {
+  placement: 'bottom',
+  modifiers: [],
+  strategy: 'absolute'
+};
+
+function areValidElements() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return !args.some(function (element) {
+    return !(element && typeof element.getBoundingClientRect === 'function');
+  });
+}
+
+function popperGenerator(generatorOptions) {
+  if (generatorOptions === void 0) {
+    generatorOptions = {};
+  }
+
+  var _generatorOptions = generatorOptions,
+      _generatorOptions$def = _generatorOptions.defaultModifiers,
+      defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
+      _generatorOptions$def2 = _generatorOptions.defaultOptions,
+      defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
+  return function createPopper(reference, popper, options) {
+    if (options === void 0) {
+      options = defaultOptions;
+    }
+
+    var state = {
+      placement: 'bottom',
+      orderedModifiers: [],
+      options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
+      modifiersData: {},
+      elements: {
+        reference: reference,
+        popper: popper
+      },
+      attributes: {},
+      styles: {}
+    };
+    var effectCleanupFns = [];
+    var isDestroyed = false;
+    var instance = {
+      state: state,
+      setOptions: function setOptions(setOptionsAction) {
+        var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
+        cleanupModifierEffects();
+        state.options = Object.assign({}, defaultOptions, state.options, options);
+        state.scrollParents = {
+          reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
+          popper: listScrollParents(popper)
+        }; // Orders the modifiers based on their dependencies and `phase`
+        // properties
+
+        var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers
+
+        state.orderedModifiers = orderedModifiers.filter(function (m) {
+          return m.enabled;
+        }); // Validate the provided modifiers so that the consumer will get warned
+        // if one of the modifiers is invalid for any reason
+
+        if (false) { var _getComputedStyle, marginTop, marginRight, marginBottom, marginLeft, flipModifier, modifiers; }
+
+        runModifierEffects();
+        return instance.update();
+      },
+      // Sync update – it will always be executed, even if not necessary. This
+      // is useful for low frequency updates where sync behavior simplifies the
+      // logic.
+      // For high frequency updates (e.g. `resize` and `scroll` events), always
+      // prefer the async Popper#update method
+      forceUpdate: function forceUpdate() {
+        if (isDestroyed) {
+          return;
+        }
+
+        var _state$elements = state.elements,
+            reference = _state$elements.reference,
+            popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
+        // anymore
+
+        if (!areValidElements(reference, popper)) {
+          if (false) {}
+
+          return;
+        } // Store the reference and popper rects to be read by modifiers
+
+
+        state.rects = {
+          reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
+          popper: getLayoutRect(popper)
+        }; // Modifiers have the ability to reset the current update cycle. The
+        // most common use case for this is the `flip` modifier changing the
+        // placement, which then needs to re-run all the modifiers, because the
+        // logic was previously ran for the previous placement and is therefore
+        // stale/incorrect
+
+        state.reset = false;
+        state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
+        // is filled with the initial data specified by the modifier. This means
+        // it doesn't persist and is fresh on each update.
+        // To ensure persistent data, use `${name}#persistent`
+
+        state.orderedModifiers.forEach(function (modifier) {
+          return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
+        });
+        var __debug_loops__ = 0;
+
+        for (var index = 0; index < state.orderedModifiers.length; index++) {
+          if (false) {}
+
+          if (state.reset === true) {
+            state.reset = false;
+            index = -1;
+            continue;
+          }
+
+          var _state$orderedModifie = state.orderedModifiers[index],
+              fn = _state$orderedModifie.fn,
+              _state$orderedModifie2 = _state$orderedModifie.options,
+              _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
+              name = _state$orderedModifie.name;
+
+          if (typeof fn === 'function') {
+            state = fn({
+              state: state,
+              options: _options,
+              name: name,
+              instance: instance
+            }) || state;
+          }
+        }
+      },
+      // Async and optimistically optimized update – it will not be executed if
+      // not necessary (debounced to run at most once-per-tick)
+      update: debounce(function () {
+        return new Promise(function (resolve) {
+          instance.forceUpdate();
+          resolve(state);
+        });
+      }),
+      destroy: function destroy() {
+        cleanupModifierEffects();
+        isDestroyed = true;
+      }
+    };
+
+    if (!areValidElements(reference, popper)) {
+      if (false) {}
+
+      return instance;
+    }
+
+    instance.setOptions(options).then(function (state) {
+      if (!isDestroyed && options.onFirstUpdate) {
+        options.onFirstUpdate(state);
+      }
+    }); // Modifiers have the ability to execute arbitrary code before the first
+    // update cycle runs. They will be executed in the same order as the update
+    // cycle. This is useful when a modifier adds some persistent data that
+    // other modifiers need to use, but the modifier is run after the dependent
+    // one.
+
+    function runModifierEffects() {
+      state.orderedModifiers.forEach(function (_ref3) {
+        var name = _ref3.name,
+            _ref3$options = _ref3.options,
+            options = _ref3$options === void 0 ? {} : _ref3$options,
+            effect = _ref3.effect;
+
+        if (typeof effect === 'function') {
+          var cleanupFn = effect({
+            state: state,
+            name: name,
+            instance: instance,
+            options: options
+          });
+
+          var noopFn = function noopFn() {};
+
+          effectCleanupFns.push(cleanupFn || noopFn);
+        }
+      });
+    }
+
+    function cleanupModifierEffects() {
+      effectCleanupFns.forEach(function (fn) {
+        return fn();
+      });
+      effectCleanupFns = [];
+    }
+
+    return instance;
+  };
+}
+var createPopper = /*#__PURE__*/(/* unused pure expression or super */ null && (0)); // eslint-disable-next-line import/no-unused-modules
+
+
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/eventListeners.js
+ // eslint-disable-next-line import/no-unused-modules
+
+var passive = {
+  passive: true
+};
+
+function effect(_ref) {
+  var state = _ref.state,
+      instance = _ref.instance,
+      options = _ref.options;
+  var _options$scroll = options.scroll,
+      scroll = _options$scroll === void 0 ? true : _options$scroll,
+      _options$resize = options.resize,
+      resize = _options$resize === void 0 ? true : _options$resize;
+  var window = getWindow(state.elements.popper);
+  var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper);
+
+  if (scroll) {
+    scrollParents.forEach(function (scrollParent) {
+      scrollParent.addEventListener('scroll', instance.update, passive);
+    });
+  }
+
+  if (resize) {
+    window.addEventListener('resize', instance.update, passive);
+  }
+
+  return function () {
+    if (scroll) {
+      scrollParents.forEach(function (scrollParent) {
+        scrollParent.removeEventListener('scroll', instance.update, passive);
+      });
+    }
+
+    if (resize) {
+      window.removeEventListener('resize', instance.update, passive);
+    }
+  };
+} // eslint-disable-next-line import/no-unused-modules
+
+
+/* harmony default export */ const eventListeners = ({
+  name: 'eventListeners',
+  enabled: true,
+  phase: 'write',
+  fn: function fn() {},
+  effect: effect,
+  data: {}
+});
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getBasePlacement.js
+
+function getBasePlacement(placement) {
+  return placement.split('-')[0];
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getVariation.js
+function getVariation(placement) {
+  return placement.split('-')[1];
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getMainAxisFromPlacement.js
+function getMainAxisFromPlacement(placement) {
+  return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/computeOffsets.js
+
+
+
+
+function computeOffsets(_ref) {
+  var reference = _ref.reference,
+      element = _ref.element,
+      placement = _ref.placement;
+  var basePlacement = placement ? getBasePlacement(placement) : null;
+  var variation = placement ? getVariation(placement) : null;
+  var commonX = reference.x + reference.width / 2 - element.width / 2;
+  var commonY = reference.y + reference.height / 2 - element.height / 2;
+  var offsets;
+
+  switch (basePlacement) {
+    case enums_top:
+      offsets = {
+        x: commonX,
+        y: reference.y - element.height
+      };
+      break;
+
+    case bottom:
+      offsets = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+
+    case right:
+      offsets = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+
+    case left:
+      offsets = {
+        x: reference.x - element.width,
+        y: commonY
+      };
+      break;
+
+    default:
+      offsets = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+
+  var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;
+
+  if (mainAxis != null) {
+    var len = mainAxis === 'y' ? 'height' : 'width';
+
+    switch (variation) {
+      case start:
+        offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
+        break;
+
+      case end:
+        offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
+        break;
+
+      default:
+    }
+  }
+
+  return offsets;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/popperOffsets.js
+
+
+function popperOffsets(_ref) {
+  var state = _ref.state,
+      name = _ref.name;
+  // Offsets are the actual position the popper needs to have to be
+  // properly positioned near its reference element
+  // This is the most basic placement, and will be adjusted by
+  // the modifiers in the next step
+  state.modifiersData[name] = computeOffsets({
+    reference: state.rects.reference,
+    element: state.rects.popper,
+    strategy: 'absolute',
+    placement: state.placement
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+/* harmony default export */ const modifiers_popperOffsets = ({
+  name: 'popperOffsets',
+  enabled: true,
+  phase: 'read',
+  fn: popperOffsets,
+  data: {}
+});
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/computeStyles.js
+
+
+
+
+
+
+
+ // eslint-disable-next-line import/no-unused-modules
+
+var unsetSides = {
+  top: 'auto',
+  right: 'auto',
+  bottom: 'auto',
+  left: 'auto'
+}; // Round the offsets to the nearest suitable subpixel based on the DPR.
+// Zooming can change the DPR, but it seems to report a value that will
+// cleanly divide the values into the appropriate subpixels.
+
+function roundOffsetsByDPR(_ref) {
+  var x = _ref.x,
+      y = _ref.y;
+  var win = window;
+  var dpr = win.devicePixelRatio || 1;
+  return {
+    x: round(x * dpr) / dpr || 0,
+    y: round(y * dpr) / dpr || 0
+  };
+}
+
+function mapToStyles(_ref2) {
+  var _Object$assign2;
+
+  var popper = _ref2.popper,
+      popperRect = _ref2.popperRect,
+      placement = _ref2.placement,
+      variation = _ref2.variation,
+      offsets = _ref2.offsets,
+      position = _ref2.position,
+      gpuAcceleration = _ref2.gpuAcceleration,
+      adaptive = _ref2.adaptive,
+      roundOffsets = _ref2.roundOffsets,
+      isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x,
+      x = _offsets$x === void 0 ? 0 : _offsets$x,
+      _offsets$y = offsets.y,
+      y = _offsets$y === void 0 ? 0 : _offsets$y;
+
+  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref3.x;
+  y = _ref3.y;
+  var hasX = offsets.hasOwnProperty('x');
+  var hasY = offsets.hasOwnProperty('y');
+  var sideX = left;
+  var sideY = enums_top;
+  var win = window;
+
+  if (adaptive) {
+    var offsetParent = getOffsetParent(popper);
+    var heightProp = 'clientHeight';
+    var widthProp = 'clientWidth';
+
+    if (offsetParent === getWindow(popper)) {
+      offsetParent = getDocumentElement(popper);
+
+      if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
+        heightProp = 'scrollHeight';
+        widthProp = 'scrollWidth';
+      }
+    } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
+
+
+    offsetParent = offsetParent;
+
+    if (placement === enums_top || (placement === left || placement === right) && variation === end) {
+      sideY = bottom;
+      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      offsetParent[heightProp];
+      y -= offsetY - popperRect.height;
+      y *= gpuAcceleration ? 1 : -1;
+    }
+
+    if (placement === left || (placement === enums_top || placement === bottom) && variation === end) {
+      sideX = right;
+      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      offsetParent[widthProp];
+      x -= offsetX - popperRect.width;
+      x *= gpuAcceleration ? 1 : -1;
+    }
+  }
+
+  var commonStyles = Object.assign({
+    position: position
+  }, adaptive && unsetSides);
+
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref4.x;
+  y = _ref4.y;
+
+  if (gpuAcceleration) {
+    var _Object$assign;
+
+    return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
+  }
+
+  return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
+}
+
+function computeStyles(_ref5) {
+  var state = _ref5.state,
+      options = _ref5.options;
+  var _options$gpuAccelerat = options.gpuAcceleration,
+      gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
+      _options$adaptive = options.adaptive,
+      adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
+      _options$roundOffsets = options.roundOffsets,
+      roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
+
+  if (false) { var transitionProperty; }
+
+  var commonStyles = {
+    placement: getBasePlacement(state.placement),
+    variation: getVariation(state.placement),
+    popper: state.elements.popper,
+    popperRect: state.rects.popper,
+    gpuAcceleration: gpuAcceleration,
+    isFixed: state.options.strategy === 'fixed'
+  };
+
+  if (state.modifiersData.popperOffsets != null) {
+    state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
+      offsets: state.modifiersData.popperOffsets,
+      position: state.options.strategy,
+      adaptive: adaptive,
+      roundOffsets: roundOffsets
+    })));
+  }
+
+  if (state.modifiersData.arrow != null) {
+    state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
+      offsets: state.modifiersData.arrow,
+      position: 'absolute',
+      adaptive: false,
+      roundOffsets: roundOffsets
+    })));
+  }
+
+  state.attributes.popper = Object.assign({}, state.attributes.popper, {
+    'data-popper-placement': state.placement
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+/* harmony default export */ const modifiers_computeStyles = ({
+  name: 'computeStyles',
+  enabled: true,
+  phase: 'beforeWrite',
+  fn: computeStyles,
+  data: {}
+});
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/applyStyles.js
+
+ // This modifier takes the styles prepared by the `computeStyles` modifier
+// and applies them to the HTMLElements such as popper and arrow
+
+function applyStyles(_ref) {
+  var state = _ref.state;
+  Object.keys(state.elements).forEach(function (name) {
+    var style = state.styles[name] || {};
+    var attributes = state.attributes[name] || {};
+    var element = state.elements[name]; // arrow is optional + virtual elements
+
+    if (!isHTMLElement(element) || !getNodeName(element)) {
+      return;
+    } // Flow doesn't support to extend this property, but it's the most
+    // effective way to apply styles to an HTMLElement
+    // $FlowFixMe[cannot-write]
+
+
+    Object.assign(element.style, style);
+    Object.keys(attributes).forEach(function (name) {
+      var value = attributes[name];
+
+      if (value === false) {
+        element.removeAttribute(name);
+      } else {
+        element.setAttribute(name, value === true ? '' : value);
+      }
+    });
+  });
+}
+
+function applyStyles_effect(_ref2) {
+  var state = _ref2.state;
+  var initialStyles = {
+    popper: {
+      position: state.options.strategy,
+      left: '0',
+      top: '0',
+      margin: '0'
+    },
+    arrow: {
+      position: 'absolute'
+    },
+    reference: {}
+  };
+  Object.assign(state.elements.popper.style, initialStyles.popper);
+  state.styles = initialStyles;
+
+  if (state.elements.arrow) {
+    Object.assign(state.elements.arrow.style, initialStyles.arrow);
+  }
+
+  return function () {
+    Object.keys(state.elements).forEach(function (name) {
+      var element = state.elements[name];
+      var attributes = state.attributes[name] || {};
+      var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
+
+      var style = styleProperties.reduce(function (style, property) {
+        style[property] = '';
+        return style;
+      }, {}); // arrow is optional + virtual elements
+
+      if (!isHTMLElement(element) || !getNodeName(element)) {
+        return;
+      }
+
+      Object.assign(element.style, style);
+      Object.keys(attributes).forEach(function (attribute) {
+        element.removeAttribute(attribute);
+      });
+    });
+  };
+} // eslint-disable-next-line import/no-unused-modules
+
+
+/* harmony default export */ const modifiers_applyStyles = ({
+  name: 'applyStyles',
+  enabled: true,
+  phase: 'write',
+  fn: applyStyles,
+  effect: applyStyles_effect,
+  requires: ['computeStyles']
+});
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/offset.js
+
+ // eslint-disable-next-line import/no-unused-modules
+
+function distanceAndSkiddingToXY(placement, rects, offset) {
+  var basePlacement = getBasePlacement(placement);
+  var invertDistance = [left, enums_top].indexOf(basePlacement) >= 0 ? -1 : 1;
+
+  var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
+    placement: placement
+  })) : offset,
+      skidding = _ref[0],
+      distance = _ref[1];
+
+  skidding = skidding || 0;
+  distance = (distance || 0) * invertDistance;
+  return [left, right].indexOf(basePlacement) >= 0 ? {
+    x: distance,
+    y: skidding
+  } : {
+    x: skidding,
+    y: distance
+  };
+}
+
+function offset(_ref2) {
+  var state = _ref2.state,
+      options = _ref2.options,
+      name = _ref2.name;
+  var _options$offset = options.offset,
+      offset = _options$offset === void 0 ? [0, 0] : _options$offset;
+  var data = enums_placements.reduce(function (acc, placement) {
+    acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset);
+    return acc;
+  }, {});
+  var _data$state$placement = data[state.placement],
+      x = _data$state$placement.x,
+      y = _data$state$placement.y;
+
+  if (state.modifiersData.popperOffsets != null) {
+    state.modifiersData.popperOffsets.x += x;
+    state.modifiersData.popperOffsets.y += y;
+  }
+
+  state.modifiersData[name] = data;
+} // eslint-disable-next-line import/no-unused-modules
+
+
+/* harmony default export */ const modifiers_offset = ({
+  name: 'offset',
+  enabled: true,
+  phase: 'main',
+  requires: ['popperOffsets'],
+  fn: offset
+});
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getOppositePlacement.js
+var hash = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, function (matched) {
+    return hash[matched];
+  });
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getOppositeVariationPlacement.js
+var getOppositeVariationPlacement_hash = {
+  start: 'end',
+  end: 'start'
+};
+function getOppositeVariationPlacement(placement) {
+  return placement.replace(/start|end/g, function (matched) {
+    return getOppositeVariationPlacement_hash[matched];
+  });
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getViewportRect.js
+
+
+
+function getViewportRect(element) {
+  var win = getWindow(element);
+  var html = getDocumentElement(element);
+  var visualViewport = win.visualViewport;
+  var width = html.clientWidth;
+  var height = html.clientHeight;
+  var x = 0;
+  var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
+  // can be obscured underneath it.
+  // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
+  // if it isn't open, so if this isn't available, the popper will be detected
+  // to overflow the bottom of the screen too early.
+
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
+    // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
+    // errors due to floating point numbers, so we need to check precision.
+    // Safari returns a number <= 0, usually < -1 when pinch-zoomed
+    // Feature detection fails in mobile emulation mode in Chrome.
+    // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
+    // 0.001
+    // Fallback here: "Not Safari" userAgent
+
+    if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+
+  return {
+    width: width,
+    height: height,
+    x: x + getWindowScrollBarX(element),
+    y: y
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js
+
+
+
+
+ // Gets the entire size of the scrollable document area, even extending outside
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable
+
+function getDocumentRect(element) {
+  var _element$ownerDocumen;
+
+  var html = getDocumentElement(element);
+  var winScroll = getWindowScroll(element);
+  var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
+  var width = math_max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
+  var height = math_max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
+  var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
+  var y = -winScroll.scrollTop;
+
+  if (getComputedStyle(body || html).direction === 'rtl') {
+    x += math_max(html.clientWidth, body ? body.clientWidth : 0) - width;
+  }
+
+  return {
+    width: width,
+    height: height,
+    x: x,
+    y: y
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/contains.js
+
+function contains(parent, child) {
+  var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method
+
+  if (parent.contains(child)) {
+    return true;
+  } // then fallback to custom implementation with Shadow DOM support
+  else if (rootNode && isShadowRoot(rootNode)) {
+      var next = child;
+
+      do {
+        if (next && parent.isSameNode(next)) {
+          return true;
+        } // $FlowFixMe[prop-missing]: need a better way to handle this...
+
+
+        next = next.parentNode || next.host;
+      } while (next);
+    } // Give up, the result is false
+
+
+  return false;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/rectToClientRect.js
+function rectToClientRect(rect) {
+  return Object.assign({}, rect, {
+    left: rect.x,
+    top: rect.y,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  });
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function getInnerBoundingClientRect(element) {
+  var rect = getBoundingClientRect(element);
+  rect.top = rect.top + element.clientTop;
+  rect.left = rect.left + element.clientLeft;
+  rect.bottom = rect.top + element.clientHeight;
+  rect.right = rect.left + element.clientWidth;
+  rect.width = element.clientWidth;
+  rect.height = element.clientHeight;
+  rect.x = rect.left;
+  rect.y = rect.top;
+  return rect;
+}
+
+function getClientRectFromMixedType(element, clippingParent) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+} // A "clipping parent" is an overflowable container with the characteristic of
+// clipping (or hiding) overflowing elements with a position different from
+// `initial`
+
+
+function getClippingParents(element) {
+  var clippingParents = listScrollParents(getParentNode(element));
+  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;
+  var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
+
+  if (!isElement(clipperElement)) {
+    return [];
+  } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
+
+
+  return clippingParents.filter(function (clippingParent) {
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
+  });
+} // Gets the maximum area that the element is visible in due to any number of
+// clipping parents
+
+
+function getClippingRect(element, boundary, rootBoundary) {
+  var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
+  var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
+  var firstClippingParent = clippingParents[0];
+  var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
+    var rect = getClientRectFromMixedType(element, clippingParent);
+    accRect.top = math_max(rect.top, accRect.top);
+    accRect.right = math_min(rect.right, accRect.right);
+    accRect.bottom = math_min(rect.bottom, accRect.bottom);
+    accRect.left = math_max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromMixedType(element, firstClippingParent));
+  clippingRect.width = clippingRect.right - clippingRect.left;
+  clippingRect.height = clippingRect.bottom - clippingRect.top;
+  clippingRect.x = clippingRect.left;
+  clippingRect.y = clippingRect.top;
+  return clippingRect;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getFreshSideObject.js
+function getFreshSideObject() {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/mergePaddingObject.js
+
+function mergePaddingObject(paddingObject) {
+  return Object.assign({}, getFreshSideObject(), paddingObject);
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/expandToHashMap.js
+function expandToHashMap(value, keys) {
+  return keys.reduce(function (hashMap, key) {
+    hashMap[key] = value;
+    return hashMap;
+  }, {});
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/detectOverflow.js
+
+
+
+
+
+
+
+
+ // eslint-disable-next-line import/no-unused-modules
+
+function detectOverflow(state, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _options = options,
+      _options$placement = _options.placement,
+      placement = _options$placement === void 0 ? state.placement : _options$placement,
+      _options$boundary = _options.boundary,
+      boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
+      _options$rootBoundary = _options.rootBoundary,
+      rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary,
+      _options$elementConte = _options.elementContext,
+      elementContext = _options$elementConte === void 0 ? popper : _options$elementConte,
+      _options$altBoundary = _options.altBoundary,
+      altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary,
+      _options$padding = _options.padding,
+      padding = _options$padding === void 0 ? 0 : _options$padding;
+  var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
+  var altContext = elementContext === popper ? reference : popper;
+  var popperRect = state.rects.popper;
+  var element = state.elements[altBoundary ? altContext : elementContext];
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+  var referenceClientRect = getBoundingClientRect(state.elements.reference);
+  var popperOffsets = computeOffsets({
+    reference: referenceClientRect,
+    element: popperRect,
+    strategy: 'absolute',
+    placement: placement
+  });
+  var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
+  var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
+  // 0 or negative = within the clipping rect
+
+  var overflowOffsets = {
+    top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
+    bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
+    left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
+    right: elementClientRect.right - clippingClientRect.right + paddingObject.right
+  };
+  var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element
+
+  if (elementContext === popper && offsetData) {
+    var offset = offsetData[placement];
+    Object.keys(overflowOffsets).forEach(function (key) {
+      var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1;
+      var axis = [enums_top, bottom].indexOf(key) >= 0 ? 'y' : 'x';
+      overflowOffsets[key] += offset[axis] * multiply;
+    });
+  }
+
+  return overflowOffsets;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/computeAutoPlacement.js
+
+
+
+
+function computeAutoPlacement(state, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _options = options,
+      placement = _options.placement,
+      boundary = _options.boundary,
+      rootBoundary = _options.rootBoundary,
+      padding = _options.padding,
+      flipVariations = _options.flipVariations,
+      _options$allowedAutoP = _options.allowedAutoPlacements,
+      allowedAutoPlacements = _options$allowedAutoP === void 0 ? enums_placements : _options$allowedAutoP;
+  var variation = getVariation(placement);
+  var placements = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {
+    return getVariation(placement) === variation;
+  }) : basePlacements;
+  var allowedPlacements = placements.filter(function (placement) {
+    return allowedAutoPlacements.indexOf(placement) >= 0;
+  });
+
+  if (allowedPlacements.length === 0) {
+    allowedPlacements = placements;
+
+    if (false) {}
+  } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
+
+
+  var overflows = allowedPlacements.reduce(function (acc, placement) {
+    acc[placement] = detectOverflow(state, {
+      placement: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      padding: padding
+    })[getBasePlacement(placement)];
+    return acc;
+  }, {});
+  return Object.keys(overflows).sort(function (a, b) {
+    return overflows[a] - overflows[b];
+  });
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/flip.js
+
+
+
+
+
+
+ // eslint-disable-next-line import/no-unused-modules
+
+function getExpandedFallbackPlacements(placement) {
+  if (getBasePlacement(placement) === auto) {
+    return [];
+  }
+
+  var oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
+}
+
+function flip(_ref) {
+  var state = _ref.state,
+      options = _ref.options,
+      name = _ref.name;
+
+  if (state.modifiersData[name]._skip) {
+    return;
+  }
+
+  var _options$mainAxis = options.mainAxis,
+      checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
+      _options$altAxis = options.altAxis,
+      checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis,
+      specifiedFallbackPlacements = options.fallbackPlacements,
+      padding = options.padding,
+      boundary = options.boundary,
+      rootBoundary = options.rootBoundary,
+      altBoundary = options.altBoundary,
+      _options$flipVariatio = options.flipVariations,
+      flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio,
+      allowedAutoPlacements = options.allowedAutoPlacements;
+  var preferredPlacement = state.options.placement;
+  var basePlacement = getBasePlacement(preferredPlacement);
+  var isBasePlacement = basePlacement === preferredPlacement;
+  var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
+  var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) {
+    return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, {
+      placement: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      padding: padding,
+      flipVariations: flipVariations,
+      allowedAutoPlacements: allowedAutoPlacements
+    }) : placement);
+  }, []);
+  var referenceRect = state.rects.reference;
+  var popperRect = state.rects.popper;
+  var checksMap = new Map();
+  var makeFallbackChecks = true;
+  var firstFittingPlacement = placements[0];
+
+  for (var i = 0; i < placements.length; i++) {
+    var placement = placements[i];
+
+    var _basePlacement = getBasePlacement(placement);
+
+    var isStartVariation = getVariation(placement) === start;
+    var isVertical = [enums_top, bottom].indexOf(_basePlacement) >= 0;
+    var len = isVertical ? 'width' : 'height';
+    var overflow = detectOverflow(state, {
+      placement: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      altBoundary: altBoundary,
+      padding: padding
+    });
+    var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : enums_top;
+
+    if (referenceRect[len] > popperRect[len]) {
+      mainVariationSide = getOppositePlacement(mainVariationSide);
+    }
+
+    var altVariationSide = getOppositePlacement(mainVariationSide);
+    var checks = [];
+
+    if (checkMainAxis) {
+      checks.push(overflow[_basePlacement] <= 0);
+    }
+
+    if (checkAltAxis) {
+      checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0);
+    }
+
+    if (checks.every(function (check) {
+      return check;
+    })) {
+      firstFittingPlacement = placement;
+      makeFallbackChecks = false;
+      break;
+    }
+
+    checksMap.set(placement, checks);
+  }
+
+  if (makeFallbackChecks) {
+    // `2` may be desired in some cases – research later
+    var numberOfChecks = flipVariations ? 3 : 1;
+
+    var _loop = function _loop(_i) {
+      var fittingPlacement = placements.find(function (placement) {
+        var checks = checksMap.get(placement);
+
+        if (checks) {
+          return checks.slice(0, _i).every(function (check) {
+            return check;
+          });
+        }
+      });
+
+      if (fittingPlacement) {
+        firstFittingPlacement = fittingPlacement;
+        return "break";
+      }
+    };
+
+    for (var _i = numberOfChecks; _i > 0; _i--) {
+      var _ret = _loop(_i);
+
+      if (_ret === "break") break;
+    }
+  }
+
+  if (state.placement !== firstFittingPlacement) {
+    state.modifiersData[name]._skip = true;
+    state.placement = firstFittingPlacement;
+    state.reset = true;
+  }
+} // eslint-disable-next-line import/no-unused-modules
+
+
+/* harmony default export */ const modifiers_flip = ({
+  name: 'flip',
+  enabled: true,
+  phase: 'main',
+  fn: flip,
+  requiresIfExists: ['offset'],
+  data: {
+    _skip: false
+  }
+});
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getAltAxis.js
+function getAltAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/within.js
+
+function within(min, value, max) {
+  return math_max(min, math_min(value, max));
+}
+function withinMaxClamp(min, value, max) {
+  var v = within(min, value, max);
+  return v > max ? max : v;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/preventOverflow.js
+
+
+
+
+
+
+
+
+
+
+
+
+function preventOverflow(_ref) {
+  var state = _ref.state,
+      options = _ref.options,
+      name = _ref.name;
+  var _options$mainAxis = options.mainAxis,
+      checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
+      _options$altAxis = options.altAxis,
+      checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis,
+      boundary = options.boundary,
+      rootBoundary = options.rootBoundary,
+      altBoundary = options.altBoundary,
+      padding = options.padding,
+      _options$tether = options.tether,
+      tether = _options$tether === void 0 ? true : _options$tether,
+      _options$tetherOffset = options.tetherOffset,
+      tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
+  var overflow = detectOverflow(state, {
+    boundary: boundary,
+    rootBoundary: rootBoundary,
+    padding: padding,
+    altBoundary: altBoundary
+  });
+  var basePlacement = getBasePlacement(state.placement);
+  var variation = getVariation(state.placement);
+  var isBasePlacement = !variation;
+  var mainAxis = getMainAxisFromPlacement(basePlacement);
+  var altAxis = getAltAxis(mainAxis);
+  var popperOffsets = state.modifiersData.popperOffsets;
+  var referenceRect = state.rects.reference;
+  var popperRect = state.rects.popper;
+  var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
+    placement: state.placement
+  })) : tetherOffset;
+  var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
+    mainAxis: tetherOffsetValue,
+    altAxis: tetherOffsetValue
+  } : Object.assign({
+    mainAxis: 0,
+    altAxis: 0
+  }, tetherOffsetValue);
+  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
+  var data = {
+    x: 0,
+    y: 0
+  };
+
+  if (!popperOffsets) {
+    return;
+  }
+
+  if (checkMainAxis) {
+    var _offsetModifierState$;
+
+    var mainSide = mainAxis === 'y' ? enums_top : left;
+    var altSide = mainAxis === 'y' ? bottom : right;
+    var len = mainAxis === 'y' ? 'height' : 'width';
+    var offset = popperOffsets[mainAxis];
+    var min = offset + overflow[mainSide];
+    var max = offset - overflow[altSide];
+    var additive = tether ? -popperRect[len] / 2 : 0;
+    var minLen = variation === start ? referenceRect[len] : popperRect[len];
+    var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
+    // outside the reference bounds
+
+    var arrowElement = state.elements.arrow;
+    var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : {
+      width: 0,
+      height: 0
+    };
+    var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject();
+    var arrowPaddingMin = arrowPaddingObject[mainSide];
+    var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want
+    // to include its full size in the calculation. If the reference is small
+    // and near the edge of a boundary, the popper can overflow even if the
+    // reference is not overflowing as well (e.g. virtual elements with no
+    // width or height)
+
+    var arrowLen = within(0, referenceRect[len], arrowRect[len]);
+    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
+    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
+    var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
+    var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
+    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
+    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
+    var tetherMax = offset + maxOffset - offsetModifierValue;
+    var preventedOffset = within(tether ? math_min(min, tetherMin) : min, offset, tether ? math_max(max, tetherMax) : max);
+    popperOffsets[mainAxis] = preventedOffset;
+    data[mainAxis] = preventedOffset - offset;
+  }
+
+  if (checkAltAxis) {
+    var _offsetModifierState$2;
+
+    var _mainSide = mainAxis === 'x' ? enums_top : left;
+
+    var _altSide = mainAxis === 'x' ? bottom : right;
+
+    var _offset = popperOffsets[altAxis];
+
+    var _len = altAxis === 'y' ? 'height' : 'width';
+
+    var _min = _offset + overflow[_mainSide];
+
+    var _max = _offset - overflow[_altSide];
+
+    var isOriginSide = [enums_top, left].indexOf(basePlacement) !== -1;
+
+    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
+
+    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
+
+    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
+
+    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
+
+    popperOffsets[altAxis] = _preventedOffset;
+    data[altAxis] = _preventedOffset - _offset;
+  }
+
+  state.modifiersData[name] = data;
+} // eslint-disable-next-line import/no-unused-modules
+
+
+/* harmony default export */ const modifiers_preventOverflow = ({
+  name: 'preventOverflow',
+  enabled: true,
+  phase: 'main',
+  fn: preventOverflow,
+  requiresIfExists: ['offset']
+});
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/arrow.js
+
+
+
+
+
+
+
+
+
+ // eslint-disable-next-line import/no-unused-modules
+
+var toPaddingObject = function toPaddingObject(padding, state) {
+  padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, {
+    placement: state.placement
+  })) : padding;
+  return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
+};
+
+function arrow(_ref) {
+  var _state$modifiersData$;
+
+  var state = _ref.state,
+      name = _ref.name,
+      options = _ref.options;
+  var arrowElement = state.elements.arrow;
+  var popperOffsets = state.modifiersData.popperOffsets;
+  var basePlacement = getBasePlacement(state.placement);
+  var axis = getMainAxisFromPlacement(basePlacement);
+  var isVertical = [left, right].indexOf(basePlacement) >= 0;
+  var len = isVertical ? 'height' : 'width';
+
+  if (!arrowElement || !popperOffsets) {
+    return;
+  }
+
+  var paddingObject = toPaddingObject(options.padding, state);
+  var arrowRect = getLayoutRect(arrowElement);
+  var minProp = axis === 'y' ? enums_top : left;
+  var maxProp = axis === 'y' ? bottom : right;
+  var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len];
+  var startDiff = popperOffsets[axis] - state.rects.reference[axis];
+  var arrowOffsetParent = getOffsetParent(arrowElement);
+  var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
+  var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is
+  // outside of the popper bounds
+
+  var min = paddingObject[minProp];
+  var max = clientSize - arrowRect[len] - paddingObject[maxProp];
+  var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
+  var offset = within(min, center, max); // Prevents breaking syntax highlighting...
+
+  var axisProp = axis;
+  state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
+}
+
+function arrow_effect(_ref2) {
+  var state = _ref2.state,
+      options = _ref2.options;
+  var _options$element = options.element,
+      arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element;
+
+  if (arrowElement == null) {
+    return;
+  } // CSS selector
+
+
+  if (typeof arrowElement === 'string') {
+    arrowElement = state.elements.popper.querySelector(arrowElement);
+
+    if (!arrowElement) {
+      return;
+    }
+  }
+
+  if (false) {}
+
+  if (!contains(state.elements.popper, arrowElement)) {
+    if (false) {}
+
+    return;
+  }
+
+  state.elements.arrow = arrowElement;
+} // eslint-disable-next-line import/no-unused-modules
+
+
+/* harmony default export */ const modifiers_arrow = ({
+  name: 'arrow',
+  enabled: true,
+  phase: 'main',
+  fn: arrow,
+  effect: arrow_effect,
+  requires: ['popperOffsets'],
+  requiresIfExists: ['preventOverflow']
+});
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/hide.js
+
+
+
+function getSideOffsets(overflow, rect, preventedOffsets) {
+  if (preventedOffsets === void 0) {
+    preventedOffsets = {
+      x: 0,
+      y: 0
+    };
+  }
+
+  return {
+    top: overflow.top - rect.height - preventedOffsets.y,
+    right: overflow.right - rect.width + preventedOffsets.x,
+    bottom: overflow.bottom - rect.height + preventedOffsets.y,
+    left: overflow.left - rect.width - preventedOffsets.x
+  };
+}
+
+function isAnySideFullyClipped(overflow) {
+  return [enums_top, right, bottom, left].some(function (side) {
+    return overflow[side] >= 0;
+  });
+}
+
+function hide(_ref) {
+  var state = _ref.state,
+      name = _ref.name;
+  var referenceRect = state.rects.reference;
+  var popperRect = state.rects.popper;
+  var preventedOffsets = state.modifiersData.preventOverflow;
+  var referenceOverflow = detectOverflow(state, {
+    elementContext: 'reference'
+  });
+  var popperAltOverflow = detectOverflow(state, {
+    altBoundary: true
+  });
+  var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect);
+  var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
+  var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
+  var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
+  state.modifiersData[name] = {
+    referenceClippingOffsets: referenceClippingOffsets,
+    popperEscapeOffsets: popperEscapeOffsets,
+    isReferenceHidden: isReferenceHidden,
+    hasPopperEscaped: hasPopperEscaped
+  };
+  state.attributes.popper = Object.assign({}, state.attributes.popper, {
+    'data-popper-reference-hidden': isReferenceHidden,
+    'data-popper-escaped': hasPopperEscaped
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+/* harmony default export */ const modifiers_hide = ({
+  name: 'hide',
+  enabled: true,
+  phase: 'main',
+  requiresIfExists: ['preventOverflow'],
+  fn: hide
+});
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/popper.js
+
+
+
+
+
+
+
+
+
+
+var defaultModifiers = [eventListeners, modifiers_popperOffsets, modifiers_computeStyles, modifiers_applyStyles, modifiers_offset, modifiers_flip, modifiers_preventOverflow, modifiers_arrow, modifiers_hide];
+var popper_createPopper = /*#__PURE__*/popperGenerator({
+  defaultModifiers: defaultModifiers
+}); // eslint-disable-next-line import/no-unused-modules
+
+ // eslint-disable-next-line import/no-unused-modules
+
+ // eslint-disable-next-line import/no-unused-modules
+
+
+;// CONCATENATED MODULE: ./src/components/dropdown.js
+function dropdown_toConsumableArray(arr) { return dropdown_arrayWithoutHoles(arr) || dropdown_iterableToArray(arr) || dropdown_unsupportedIterableToArray(arr) || dropdown_nonIterableSpread(); }
+
+function dropdown_nonIterableSpread() { 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 dropdown_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return dropdown_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 dropdown_arrayLikeToArray(o, minLen); }
+
+function dropdown_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function dropdown_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return dropdown_arrayLikeToArray(arr); }
+
+function dropdown_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 dropdown_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 dropdown_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? dropdown_ownKeys(Object(source), !0).forEach(function (key) { dropdown_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : dropdown_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function dropdown_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 dropdown_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function dropdown_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 dropdown_createClass(Constructor, protoProps, staticProps) { if (protoProps) dropdown_defineProperties(Constructor.prototype, protoProps); if (staticProps) dropdown_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+
+var dropdown_Default = {
+  placement: 'bottom',
+  triggerType: 'click',
+  onShow: function onShow() {},
+  onHide: function onHide() {}
+};
+
+var Dropdown = /*#__PURE__*/function () {
+  function Dropdown() {
+    var targetElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var triggerElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+    dropdown_classCallCheck(this, Dropdown);
+
+    this._targetEl = targetElement;
+    this._triggerEl = triggerElement;
+    this._options = dropdown_objectSpread(dropdown_objectSpread({}, dropdown_Default), options);
+    this._popperInstance = this._createPopperInstace();
+    this._visible = false;
+
+    this._init();
+  }
+
+  dropdown_createClass(Dropdown, [{
+    key: "_init",
+    value: function _init() {
+      var _this = this;
+
+      if (this._triggerEl) {
+        this._triggerEl.addEventListener('click', function () {
+          _this.toggle();
+        });
+      }
+    }
+  }, {
+    key: "_createPopperInstace",
+    value: function _createPopperInstace() {
+      return popper_createPopper(this._triggerEl, this._targetEl, {
+        placement: this._options.placement,
+        modifiers: [{
+          name: 'offset',
+          options: {
+            offset: [0, 10]
+          }
+        }]
+      });
+    }
+  }, {
+    key: "_handleClickOutside",
+    value: function _handleClickOutside(ev, targetEl) {
+      var clickedEl = ev.target;
+
+      if (clickedEl !== targetEl && !targetEl.contains(clickedEl) && !this._triggerEl.contains(clickedEl) && this._visible) {
+        this.hide();
+      }
+
+      document.body.removeEventListener('click', this._handleClickOutside, true);
+    }
+  }, {
+    key: "toggle",
+    value: function toggle() {
+      if (this._visible) {
+        this.hide();
+        document.body.removeEventListener('click', this._handleClickOutside, true);
+      } else {
+        this.show();
+      }
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      var _this2 = this;
+
+      this._targetEl.classList.remove('hidden');
+
+      this._targetEl.classList.add('block'); // Enable the event listeners
+
+
+      this._popperInstance.setOptions(function (options) {
+        return dropdown_objectSpread(dropdown_objectSpread({}, options), {}, {
+          modifiers: [].concat(dropdown_toConsumableArray(options.modifiers), [{
+            name: 'eventListeners',
+            enabled: true
+          }])
+        });
+      });
+
+      document.body.addEventListener('click', function (ev) {
+        _this2._handleClickOutside(ev, _this2._targetEl);
+      }, true); // Update its position
+
+      this._popperInstance.update();
+
+      this._visible = true; // callback function
+
+      this._options.onShow(this);
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this._targetEl.classList.remove('block');
+
+      this._targetEl.classList.add('hidden'); // Disable the event listeners
+
+
+      this._popperInstance.setOptions(function (options) {
+        return dropdown_objectSpread(dropdown_objectSpread({}, options), {}, {
+          modifiers: [].concat(dropdown_toConsumableArray(options.modifiers), [{
+            name: 'eventListeners',
+            enabled: false
+          }])
+        });
+      });
+
+      this._visible = false; // callback function
+
+      this._options.onHide(this);
+    }
+  }]);
+
+  return Dropdown;
+}();
+
+window.Dropdown = Dropdown;
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('[data-dropdown-toggle]').forEach(function (triggerEl) {
+    var targetEl = document.getElementById(triggerEl.getAttribute('data-dropdown-toggle'));
+    var placement = triggerEl.getAttribute('data-dropdown-placement');
+    new Dropdown(targetEl, triggerEl, {
+      placement: placement ? placement : dropdown_Default.placement
+    });
+  });
+});
+/* harmony default export */ const dropdown = (Dropdown);
+;// CONCATENATED MODULE: ./src/components/modal.js
+function modal_toConsumableArray(arr) { return modal_arrayWithoutHoles(arr) || modal_iterableToArray(arr) || modal_unsupportedIterableToArray(arr) || modal_nonIterableSpread(); }
+
+function modal_nonIterableSpread() { 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 modal_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return modal_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 modal_arrayLikeToArray(o, minLen); }
+
+function modal_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function modal_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return modal_arrayLikeToArray(arr); }
+
+function modal_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 modal_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 modal_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? modal_ownKeys(Object(source), !0).forEach(function (key) { modal_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : modal_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function modal_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 modal_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function modal_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 modal_createClass(Constructor, protoProps, staticProps) { if (protoProps) modal_defineProperties(Constructor.prototype, protoProps); if (staticProps) modal_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+var modal_Default = {
+  placement: 'center',
+  backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
+  onHide: function onHide() {},
+  onShow: function onShow() {},
+  onToggle: function onToggle() {}
+};
+
+var Modal = /*#__PURE__*/function () {
+  function Modal() {
+    var targetEl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    modal_classCallCheck(this, Modal);
+
+    this._targetEl = targetEl;
+    this._options = modal_objectSpread(modal_objectSpread({}, modal_Default), options);
+    this._isHidden = true;
+
+    this._init();
+  }
+
+  modal_createClass(Modal, [{
+    key: "_init",
+    value: function _init() {
+      var _this = this;
+
+      this._getPlacementClasses().map(function (c) {
+        _this._targetEl.classList.add(c);
+      });
+    }
+  }, {
+    key: "_createBackdrop",
+    value: function _createBackdrop() {
+      if (this._isHidden) {
+        var _backdropEl$classList;
+
+        var backdropEl = document.createElement('div');
+        backdropEl.setAttribute('modal-backdrop', '');
+
+        (_backdropEl$classList = backdropEl.classList).add.apply(_backdropEl$classList, modal_toConsumableArray(this._options.backdropClasses.split(" ")));
+
+        document.querySelector('body').append(backdropEl);
+      }
+    }
+  }, {
+    key: "_destroyBackdropEl",
+    value: function _destroyBackdropEl() {
+      if (!this._isHidden) {
+        document.querySelector('[modal-backdrop]').remove();
+      }
+    }
+  }, {
+    key: "_getPlacementClasses",
+    value: function _getPlacementClasses() {
+      switch (this._options.placement) {
+        // top
+        case 'top-left':
+          return ['justify-start', 'items-start'];
+
+        case 'top-center':
+          return ['justify-center', 'items-start'];
+
+        case 'top-right':
+          return ['justify-end', 'items-start'];
+        // center
+
+        case 'center-left':
+          return ['justify-start', 'items-center'];
+
+        case 'center':
+          return ['justify-center', 'items-center'];
+
+        case 'center-right':
+          return ['justify-end', 'items-center'];
+        // bottom
+
+        case 'bottom-left':
+          return ['justify-start', 'items-end'];
+
+        case 'bottom-center':
+          return ['justify-center', 'items-end'];
+
+        case 'bottom-right':
+          return ['justify-end', 'items-end'];
+
+        default:
+          return ['justify-center', 'items-center'];
+      }
+    }
+  }, {
+    key: "toggle",
+    value: function toggle() {
+      if (this._isHidden) {
+        this.show();
+      } else {
+        this.hide();
+      } // callback function
+
+
+      this._options.onToggle(this);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      this._targetEl.classList.add('flex');
+
+      this._targetEl.classList.remove('hidden');
+
+      this._targetEl.setAttribute('aria-modal', 'true');
+
+      this._targetEl.setAttribute('role', 'dialog');
+
+      this._targetEl.removeAttribute('aria-hidden');
+
+      this._createBackdrop();
+
+      this._isHidden = false; // callback function
+
+      this._options.onShow(this);
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this._targetEl.classList.add('hidden');
+
+      this._targetEl.classList.remove('flex');
+
+      this._targetEl.setAttribute('aria-hidden', 'true');
+
+      this._targetEl.removeAttribute('aria-modal');
+
+      this._targetEl.removeAttribute('role');
+
+      this._destroyBackdropEl();
+
+      this._isHidden = true; // callback function
+
+      this._options.onHide(this);
+    }
+  }]);
+
+  return Modal;
+}();
+
+window.Modal = Modal;
+
+var getModalInstance = function getModalInstance(id, instances) {
+  if (instances.some(function (modalInstance) {
+    return modalInstance.id === id;
+  })) {
+    return instances.find(function (modalInstance) {
+      return modalInstance.id === id;
+    });
+  }
+
+  return false;
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+  var modalInstances = [];
+  document.querySelectorAll('[data-modal-toggle]').forEach(function (el) {
+    var modalId = el.getAttribute('data-modal-toggle');
+    var modalEl = document.getElementById(modalId);
+    var placement = modalEl.getAttribute('data-modal-placement');
+
+    if (modalEl) {
+      if (!modalEl.hasAttribute('aria-hidden') && !modalEl.hasAttribute('aria-modal')) {
+        modalEl.setAttribute('aria-hidden', 'true');
+      }
+    }
+
+    var modal = null;
+
+    if (getModalInstance(modalId, modalInstances)) {
+      modal = getModalInstance(modalId, modalInstances);
+      modal = modal.object;
+    } else {
+      modal = new Modal(modalEl, {
+        placement: placement ? placement : modal_Default.placement
+      });
+      modalInstances.push({
+        id: modalId,
+        object: modal
+      });
+    }
+
+    if (modalEl.hasAttribute('data-modal-show') && modalEl.getAttribute('data-modal-show') === 'true') {
+      modal.show();
+    }
+
+    el.addEventListener('click', function () {
+      modal.toggle();
+    });
+  });
+});
+/* harmony default export */ const modal = (Modal);
+;// CONCATENATED MODULE: ./src/components/tabs.js
+function tabs_toConsumableArray(arr) { return tabs_arrayWithoutHoles(arr) || tabs_iterableToArray(arr) || tabs_unsupportedIterableToArray(arr) || tabs_nonIterableSpread(); }
+
+function tabs_nonIterableSpread() { 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 tabs_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return tabs_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 tabs_arrayLikeToArray(o, minLen); }
+
+function tabs_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function tabs_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return tabs_arrayLikeToArray(arr); }
+
+function tabs_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 tabs_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 tabs_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? tabs_ownKeys(Object(source), !0).forEach(function (key) { tabs_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : tabs_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function tabs_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 tabs_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function tabs_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 tabs_createClass(Constructor, protoProps, staticProps) { if (protoProps) tabs_defineProperties(Constructor.prototype, protoProps); if (staticProps) tabs_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+var tabs_Default = {
+  defaultTabId: null,
+  activeClasses: 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500',
+  inactiveClasses: 'dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300',
+  onShow: function onShow() {}
+};
+
+var Tabs = /*#__PURE__*/function () {
+  function Tabs() {
+    var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    tabs_classCallCheck(this, Tabs);
+
+    this._items = items;
+    this._activeTab = options ? this.getTab(options.defaultTabId) : null;
+    this._options = tabs_objectSpread(tabs_objectSpread({}, tabs_Default), options);
+
+    this._init();
+  }
+
+  tabs_createClass(Tabs, [{
+    key: "_init",
+    value: function _init() {
+      var _this = this;
+
+      if (this._items.length) {
+        // set the first tab as active if not set by explicitly
+        if (!this._activeTab) {
+          this._setActiveTab(this._items[0]);
+        } // force show the first default tab
+
+
+        this.show(this._activeTab.id, true); // show tab content based on click
+
+        this._items.map(function (tab) {
+          tab.triggerEl.addEventListener('click', function () {
+            _this.show(tab.id);
+          });
+        });
+      }
+    }
+  }, {
+    key: "getActiveTab",
+    value: function getActiveTab() {
+      return this._activeTab;
+    }
+  }, {
+    key: "_setActiveTab",
+    value: function _setActiveTab(tab) {
+      this._activeTab = tab;
+    }
+  }, {
+    key: "getTab",
+    value: function getTab(id) {
+      return this._items.filter(function (t) {
+        return t.id === id;
+      })[0];
+    }
+  }, {
+    key: "show",
+    value: function show(id) {
+      var _this2 = this,
+          _tab$triggerEl$classL,
+          _tab$triggerEl$classL2;
+
+      var forceShow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var tab = this.getTab(id); // don't do anything if already active
+
+      if (tab === this._activeTab && !forceShow) {
+        return;
+      } // hide other tabs
+
+
+      this._items.map(function (t) {
+        if (t !== tab) {
+          var _t$triggerEl$classLis, _t$triggerEl$classLis2;
+
+          (_t$triggerEl$classLis = t.triggerEl.classList).remove.apply(_t$triggerEl$classLis, tabs_toConsumableArray(_this2._options.activeClasses.split(" ")));
+
+          (_t$triggerEl$classLis2 = t.triggerEl.classList).add.apply(_t$triggerEl$classLis2, tabs_toConsumableArray(_this2._options.inactiveClasses.split(" ")));
+
+          t.targetEl.classList.add('hidden');
+          t.triggerEl.setAttribute('aria-selected', false);
+        }
+      }); // show active tab
+
+
+      (_tab$triggerEl$classL = tab.triggerEl.classList).add.apply(_tab$triggerEl$classL, tabs_toConsumableArray(this._options.activeClasses.split(" ")));
+
+      (_tab$triggerEl$classL2 = tab.triggerEl.classList).remove.apply(_tab$triggerEl$classL2, tabs_toConsumableArray(this._options.inactiveClasses.split(" ")));
+
+      tab.triggerEl.setAttribute('aria-selected', true);
+      tab.targetEl.classList.remove('hidden');
+
+      this._setActiveTab(tab); // callback function
+
+
+      this._options.onShow(this, tab);
+    }
+  }]);
+
+  return Tabs;
+}();
+
+window.Tabs = Tabs;
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('[data-tabs-toggle]').forEach(function (triggerEl) {
+    var tabElements = [];
+    var defaultTabId = null;
+    triggerEl.querySelectorAll('[role="tab"]').forEach(function (el) {
+      var isActive = el.getAttribute('aria-selected') === 'true';
+      var tab = {
+        id: el.getAttribute('data-tabs-target'),
+        triggerEl: el,
+        targetEl: document.querySelector(el.getAttribute('data-tabs-target'))
+      };
+      tabElements.push(tab);
+
+      if (isActive) {
+        defaultTabId = tab.id;
+      }
+    });
+    new Tabs(tabElements, {
+      defaultTabId: defaultTabId
+    });
+  });
+});
+/* harmony default export */ const tabs = (Tabs);
+;// CONCATENATED MODULE: ./src/components/tooltip.js
+function tooltip_toConsumableArray(arr) { return tooltip_arrayWithoutHoles(arr) || tooltip_iterableToArray(arr) || tooltip_unsupportedIterableToArray(arr) || tooltip_nonIterableSpread(); }
+
+function tooltip_nonIterableSpread() { 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 tooltip_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return tooltip_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 tooltip_arrayLikeToArray(o, minLen); }
+
+function tooltip_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function tooltip_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return tooltip_arrayLikeToArray(arr); }
+
+function tooltip_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 tooltip_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 tooltip_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? tooltip_ownKeys(Object(source), !0).forEach(function (key) { tooltip_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : tooltip_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function tooltip_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 tooltip_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function tooltip_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 tooltip_createClass(Constructor, protoProps, staticProps) { if (protoProps) tooltip_defineProperties(Constructor.prototype, protoProps); if (staticProps) tooltip_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+
+var tooltip_Default = {
+  placement: 'top',
+  triggerType: 'hover',
+  onShow: function onShow() {},
+  onHide: function onHide() {}
+};
+
+var Tooltip = /*#__PURE__*/function () {
+  function Tooltip() {
+    var targetEl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var triggerEl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+    tooltip_classCallCheck(this, Tooltip);
+
+    this._targetEl = targetEl;
+    this._triggerEl = triggerEl;
+    this._options = tooltip_objectSpread(tooltip_objectSpread({}, tooltip_Default), options);
+    this._popperInstance = this._createPopperInstace();
+
+    this._init();
+  }
+
+  tooltip_createClass(Tooltip, [{
+    key: "_init",
+    value: function _init() {
+      var _this = this;
+
+      if (this._triggerEl) {
+        var triggerEvents = this._getTriggerEvents();
+
+        triggerEvents.showEvents.forEach(function (ev) {
+          _this._triggerEl.addEventListener(ev, function () {
+            _this.show();
+          });
+        });
+        triggerEvents.hideEvents.forEach(function (ev) {
+          _this._triggerEl.addEventListener(ev, function () {
+            _this.hide();
+          });
+        });
+      }
+    }
+  }, {
+    key: "_createPopperInstace",
+    value: function _createPopperInstace() {
+      return popper_createPopper(this._triggerEl, this._targetEl, {
+        placement: this._options.placement,
+        modifiers: [{
+          name: 'offset',
+          options: {
+            offset: [0, 8]
+          }
+        }]
+      });
+    }
+  }, {
+    key: "_getTriggerEvents",
+    value: function _getTriggerEvents() {
+      switch (this._options.triggerType) {
+        case 'hover':
+          return {
+            showEvents: ['mouseenter', 'focus'],
+            hideEvents: ['mouseleave', 'blur']
+          };
+
+        case 'click':
+          return {
+            showEvents: ['click', 'focus'],
+            hideEvents: ['focusout', 'blur']
+          };
+
+        default:
+          return {
+            showEvents: ['mouseenter', 'focus'],
+            hideEvents: ['mouseleave', 'blur']
+          };
+      }
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      this._targetEl.classList.remove('opacity-0', 'invisible');
+
+      this._targetEl.classList.add('opacity-100', 'visible'); // Enable the event listeners
+
+
+      this._popperInstance.setOptions(function (options) {
+        return tooltip_objectSpread(tooltip_objectSpread({}, options), {}, {
+          modifiers: [].concat(tooltip_toConsumableArray(options.modifiers), [{
+            name: 'eventListeners',
+            enabled: true
+          }])
+        });
+      }); // Update its position
+
+
+      this._popperInstance.update(); // callback function
+
+
+      this._options.onShow(this);
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this._targetEl.classList.remove('opacity-100', 'visible');
+
+      this._targetEl.classList.add('opacity-0', 'invisible'); // Disable the event listeners
+
+
+      this._popperInstance.setOptions(function (options) {
+        return tooltip_objectSpread(tooltip_objectSpread({}, options), {}, {
+          modifiers: [].concat(tooltip_toConsumableArray(options.modifiers), [{
+            name: 'eventListeners',
+            enabled: false
+          }])
+        });
+      }); // callback function
+
+
+      this._options.onHide(this);
+    }
+  }]);
+
+  return Tooltip;
+}();
+
+window.Tooltip = Tooltip;
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('[data-tooltip-target]').forEach(function (triggerEl) {
+    var targetEl = document.getElementById(triggerEl.getAttribute('data-tooltip-target'));
+    var triggerType = triggerEl.getAttribute('data-tooltip-trigger');
+    var placement = triggerEl.getAttribute('data-tooltip-placement');
+    new Tooltip(targetEl, triggerEl, {
+      placement: placement ? placement : tooltip_Default.placement,
+      triggerType: triggerType ? triggerType : tooltip_Default.triggerType
+    });
+  });
+});
+/* harmony default export */ const tooltip = (Tooltip);
+;// CONCATENATED MODULE: ./src/flowbite.js
+ // core components
+
+
+
+
+
+
+
+
+
+/* harmony default export */ const flowbite = ({
+  Accordion: accordion,
+  Collapse: collapse,
+  Carousel: carousel,
+  Dismiss: dismiss,
+  Dropdown: dropdown,
+  Modal: modal,
+  Tabs: tabs,
+  Tooltip: tooltip
+});
+/******/ })()
+;
+//# sourceMappingURL=flowbite.js.map
+
+/***/ }),
+
 /***/ "./node_modules/hotkeys-js/dist/hotkeys.esm.js":
 /*!*****************************************************!*\
   !*** ./node_modules/hotkeys-js/dist/hotkeys.esm.js ***!
diff --git a/package-lock.json b/package-lock.json
index 9b4f3de5..5e34a519 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "alpinejs": "^3.9.6",
         "browser-sync": "^2.27.7",
         "choices.js": "^10.1.0",
+        "flowbite": "^1.4.5",
         "hotkeys-js": "^3.8.9",
         "intro.js": "^4.3.0",
         "nouislider": "^15.5.1",
@@ -5052,6 +5053,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/flowbite": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.4.5.tgz",
+      "integrity": "sha512-6Y5tGBUM+qP/KzehtJ4s+CO+4stQo7dMIozAzuc+x724uDmEM8/ti/KbyxykADTiyBCJd++dNJj3fa0EpxmRvQ==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.3",
+        "mini-svg-data-uri": "^1.4.3"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.14.7",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
@@ -14222,6 +14232,15 @@
         "path-exists": "^4.0.0"
       }
     },
+    "flowbite": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.4.5.tgz",
+      "integrity": "sha512-6Y5tGBUM+qP/KzehtJ4s+CO+4stQo7dMIozAzuc+x724uDmEM8/ti/KbyxykADTiyBCJd++dNJj3fa0EpxmRvQ==",
+      "requires": {
+        "@popperjs/core": "^2.9.3",
+        "mini-svg-data-uri": "^1.4.3"
+      }
+    },
     "follow-redirects": {
       "version": "1.14.7",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
diff --git a/package.json b/package.json
index fcab8652..2e7c6def 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "alpinejs": "^3.9.6",
     "browser-sync": "^2.27.7",
     "choices.js": "^10.1.0",
+    "flowbite": "^1.4.5",
     "hotkeys-js": "^3.8.9",
     "intro.js": "^4.3.0",
     "nouislider": "^15.5.1",
diff --git a/src/css/kobold.css b/src/css/kobold.css
index 23927081..f3a29070 100644
--- a/src/css/kobold.css
+++ b/src/css/kobold.css
@@ -3,6 +3,7 @@
 @import '~choices.js/public/assets/styles/choices.min.css';
 @import '~tippy.js/dist/tippy.css';
 @import '~tippy.js/themes/light.css';
+@import '~flowbite/dist/flowbite.min.css';
 
 @tailwind base;
 @tailwind components;
diff --git a/src/index.html b/src/index.html
index 7799dfb5..b0056eff 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1353,18 +1353,23 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 		</div>
 
 		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" x-cloak aria-modal="true" x-data="{
-            importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
+            importerResourceLocator: '',
             importerSourceType: 'json-file',
             importerHtml: '',
             step: 1,
             stagedMonsters: [],
             stagedSources: [],
+            canImport: false,
+            importError: '',
             init(){
                 this.loadImporter();
+
+                this.$watch('importerResourceLocator', async value => [this.canImport, this.importError] = await Importer.canImport(value, this.importerSourceType));
             },
             loadImporter(){
                 this.importerHtml = '';
                 this.importerHtml = Importer.loadersHtml[this.importerSourceType]();
+                this.importerResourceLocator = null;
             },
             async startImport() {
                 const importResults = await Importer.import({
@@ -1432,7 +1437,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 
 							<div class="my-3 sm:mt-0 w-full" x-show="step === 1">
 								<label for="importer_source">Import from</label>
-								<select x-model="importerSourceType" @change="loadImporter" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
+								<select x-model="importerSourceType" @change="loadImporter" name="importer_source" id="importer_source" class="mb-4 block w-full pl-3 pr-10 py-2 text-base focus:outline-none rounded-md focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600">
 									<optgroup label="More to come...">
 										<option value="google-sheets">Google Sheets</option>
 										<option value="json-raw">Raw JSON</option>
@@ -1441,11 +1446,10 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 								</select>
 
                                 <div class="mb-4" x-html="importerHtml"></div>
-								<!--<input class="mb-4" name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">-->
-                                <!--<textarea id="import_resource_locator" x-model="importerResourceLocator" cols="30" rows="10"></textarea>-->
-                                <!--<input id="import_resource_locator" type="file" accept="text/json, text/csv" @change="importerResourceLocator = $event.target.files[0]">-->
-
-								<button class="button-primary-md" @click="startImport">Import</button>
+								<div class="text-red-400 dark:text-red-600" x-show="importError.length">
+									<i class="fa fa-exclamation-triangle"></i>
+									<span x-text="importError"></span>
+								</div>
 							</div>
 
 							<div class="my-3 sm:mt-0 w-full" x-show="step === 2">
@@ -1540,15 +1544,22 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 										</div>
 									</div>
 								</div>
-
-								<button class="float-left mt-4 button-danger-outline-md" @click="abortImport">Nope, go back!</button>
-								<button class="float-right mt-4 button-primary-md" @click="finishImport">Looks Good, Import Them!</button>
 							</div>
 						</div>
 					</div>
 
-					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between" x-show="step === 1">
-						<button @click="showImporterModal = false; if(step === 2){ abortImport() };" type="button" class="button-primary-md">Close</button>
+					<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-between">
+						<!--			Step 1 button			-->
+						<button :disabled="!canImport" x-show="step === 1" class="button-primary-md" @click="startImport">Preview Import</button>
+
+						<div class="flex justify-end">
+							<!--			Step 2 button			-->
+							<button x-show="step === 2" class="button-danger-outline-md mr-2" @click="abortImport">Nope, go back!</button>
+							<button x-show="step === 2" class="button-primary-md" @click="finishImport">Looks Good, Import Them!</button>
+						</div>
+
+						<!--			Always shown			-->
+						<button @click="showImporterModal = false; if(step === 2){ abortImport() };" type="button" class="button-secondary-md">Cancel</button>
 					</div>
 				</div>
 			</div>
diff --git a/src/js/app.js b/src/js/app.js
index d55b6e58..bc518421 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,5 +1,6 @@
-require('@fortawesome/fontawesome-free')
+require('@fortawesome/fontawesome-free');
 
+import 'flowbite';
 import Choices from 'choices.js';
 import hotkeys from 'hotkeys-js';
 import encounter from "./encounter";
diff --git a/src/js/helpers.js b/src/js/helpers.js
index a476fc7a..7ed4f254 100644
--- a/src/js/helpers.js
+++ b/src/js/helpers.js
@@ -123,4 +123,24 @@ export function versionCompare(v1, v2, options) {
     }
 
     return 0;
-}
\ No newline at end of file
+}
+
+/**
+ * Determines whether a string is actually valid JSON
+ */
+export function validateJSON(jsonString){
+    try {
+        var o = JSON.parse(jsonString);
+
+        // Handle non-exception-throwing cases:
+        // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,
+        // but... JSON.parse(null) returns null, and typeof null === "object",
+        // so we must check for that, too. Thankfully, null is falsey, so this suffices:
+        if (o && typeof o === "object") {
+            return o;
+        }
+    }
+    catch (e) { }
+
+    return false;
+};
\ No newline at end of file
diff --git a/src/js/importer.js b/src/js/importer.js
index 718721f1..aa311cca 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -1,4 +1,7 @@
+import * as helpers from './helpers';
+
 export default class Importer {
+    static key = 'AIzaSyDzQndw__ieQX2WMK06ROjFhn_jFAFelk8';
 
     static loaders = {
         'google-sheets': this._importGoogleSheets,
@@ -6,6 +9,70 @@ export default class Importer {
         'json-file': this._importJsonFile,
     }
 
+    static validators = {
+        'google-sheets': this._validateGoogleSheets,
+        'json-raw': this._validateJson,
+        'json-file': this._validateJsonFile
+    }
+
+    static async _validateGoogleSheets(resourceLocator) {
+        return await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}?` + new URLSearchParams({
+                key: this.key
+            }))
+            .then(response => response.json())
+            .then(jsonifiedBody => {
+                if(!jsonifiedBody.sheets.filter(sheet => sheet.properties.title === 'Monsters').length) {
+                    return [false, "Your Google Sheets workbook must contain a sheet called 'Monsters'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
+                }
+
+                if(!jsonifiedBody.sheets.filter(sheet => sheet.properties.title === 'Sources').length) {
+                    return [false, "Your Google Sheets workbook must contain a sheet called 'Sources'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
+                }
+
+                return [true, ''];
+            });
+    }
+
+    static async _validateJson(resourceLocator) {
+        let results = await this._importJson(resourceLocator);
+
+        if(!results) {
+            return [false, "Couldn't resolve K+FC data, import source is probably invalid JSON."];
+        }
+
+        if(!results.sources) {
+            return [false, "Your JSON must contain sources."];
+        }
+
+        if(!results.monsters) {
+            return [false, "Your JSON has sources, but must also contain monsters."];
+        }
+
+        return [true, ""];
+    }
+
+    static async _validateJsonFile(resourceLocator) {
+        if(resourceLocator.type !== 'application/json') {
+            return [false, "The file you provided isn't a text file containing JSON"];
+        }
+
+        let results = await this._importJsonFile(resourceLocator);
+
+        if(!results) {
+            return [false, "Couldn't resolve K+FC data, import source is probably invalid JSON."];
+        }
+
+        if(!results.sources) {
+            return [false, "Your JSON must contain sources."];
+        }
+
+        if(!results.monsters) {
+            return [false, "Your JSON has sources, but must also contain monsters."];
+        }
+
+        return [true, ""];
+    }
+
     static loadersHtml = {
         'google-sheets': () => {
             return `
@@ -15,7 +82,7 @@ export default class Importer {
         },
         'json-raw': () => {
             return `
-                <label for="import_resource_locator">Raw JSON</label> - <a href="javascript:true" @click="downloadExampleJson">download example</a>
+                <label for="import_resource_locator">Raw JSON</label> - <a href="javascript:true" class="primary-link" @click="downloadExampleJson">download example</a>
                 <div class="mt-1">
                     <textarea id="import_resource_locator" x-model="importerResourceLocator" rows="4" name="comment" class="border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600"></textarea>
                 </div>
@@ -23,19 +90,25 @@ export default class Importer {
         },
         'json-file': () => {
             return `
-                <label for="import_resource_locator" class="block mb-2 text-gray-900 dark:text-gray-300">Upload JSON file</label> - <a href="javascript:true" @click="downloadExampleJson">download example</a>
-                <input id="import_resource_locator" type="file" accept="text/json" @change="importerResourceLocator = $event.target.files[0]" class="block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400">
+                <label class="block" id="file_input_label" for="import_resource_locator_file">Upload JSON text file below or <a class="primary-link" href="javascript:true" @click="downloadExampleJson">download an example file to edit</a></label>                
+                <input accept="application/json" class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" @change="importerResourceLocator = $event.target.files[0]" aria-describedby="file_input_label" id="import_resource_locator_file" type="file">
             `;
         },
     }
 
+    static async canImport(resourceLocator, type) {
+        if(!resourceLocator) {
+            return [false, "You must provide an import source."];
+        }
+
+        return this.validators[type].bind(this)(resourceLocator);
+    }
 
     static async import({ resourceLocator = false, type = 'google-sheets' } = {}) {
         return this.loaders[type].bind(this)(resourceLocator);
     }
 
     static async _importGoogleSheets(resourceLocator) {
-
         let monsters = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Monsters?` + new URLSearchParams({
             key: this.key
         }))
@@ -114,7 +187,6 @@ export default class Importer {
 
 
     static downloadExampleJson(){
-
         const jsonExample = {
             "sources": [
                 {
diff --git a/tailwind.config.js b/tailwind.config.js
index bd005acb..7065fda8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
         },
     },
     plugins: [
-        require('@tailwindcss/forms')
+        require('@tailwindcss/forms'),
+        require('flowbite/plugin')
     ],
 }

From 201838ed7a387c990f2a5f4694c5a06d378250f1 Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Sat, 14 May 2022 14:16:54 -0400
Subject: [PATCH 18/33] adjustments

---
 docs/index.html | 4 +++-
 src/index.html  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index b0056eff..5a08787b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1401,6 +1401,8 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
                 this.stagedSources = [];
                 this.stagedMonsters = [];
                 this.step = 1;
+                this.canImport = false;
+                this.importError = '';
             },
             downloadExampleJson(){
                 Importer.downloadExampleJson();
@@ -1559,7 +1561,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 						</div>
 
 						<!--			Always shown			-->
-						<button @click="showImporterModal = false; if(step === 2){ abortImport() };" type="button" class="button-secondary-md">Cancel</button>
+						<button @click="showImporterModal = false; abortImport();" type="button" class="button-secondary-md">Cancel</button>
 					</div>
 				</div>
 			</div>
diff --git a/src/index.html b/src/index.html
index b0056eff..5a08787b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1401,6 +1401,8 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
                 this.stagedSources = [];
                 this.stagedMonsters = [];
                 this.step = 1;
+                this.canImport = false;
+                this.importError = '';
             },
             downloadExampleJson(){
                 Importer.downloadExampleJson();
@@ -1559,7 +1561,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 						</div>
 
 						<!--			Always shown			-->
-						<button @click="showImporterModal = false; if(step === 2){ abortImport() };" type="button" class="button-secondary-md">Cancel</button>
+						<button @click="showImporterModal = false; abortImport();" type="button" class="button-secondary-md">Cancel</button>
 					</div>
 				</div>
 			</div>

From 615c0fc2687e380812e2d67c556a94f11e27a505 Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Sun, 15 May 2022 11:50:27 +0100
Subject: [PATCH 19/33] CSV import and fixed JSON import not applying type
 custom

---
 docs/css/styles.css |   41 +-
 docs/index.html     |    9 +-
 docs/js/app.js      | 3892 ++++---------------------------------------
 package-lock.json   |  556 ++++++-
 src/index.html      |    9 +-
 src/js/app.js       |    1 -
 src/js/helpers.js   |   11 +-
 src/js/importer.js  |  154 +-
 src/js/monster.js   |    2 +-
 9 files changed, 995 insertions(+), 3680 deletions(-)

diff --git a/docs/css/styles.css b/docs/css/styles.css
index 54dce7a9..47ed2366 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -8905,12 +8905,6 @@ input[type=text]:disabled{
 .col-span-6{
   grid-column: span 6 / span 6;
 }
-.float-right{
-  float: right;
-}
-.float-left{
-  float: left;
-}
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
@@ -9017,9 +9011,6 @@ input[type=text]:disabled{
 .\!mb-0{
   margin-bottom: 0px !important;
 }
-.mb-3{
-  margin-bottom: 0.75rem;
-}
 .block{
   display: block;
 }
@@ -9083,9 +9074,6 @@ input[type=text]:disabled{
 .h-2{
   height: 0.5rem;
 }
-.h-48{
-  height: 12rem;
-}
 .max-h-60{
   max-height: 15rem;
 }
@@ -9149,9 +9137,6 @@ input[type=text]:disabled{
 .w-11{
   width: 2.75rem;
 }
-.w-10{
-  width: 2.5rem;
-}
 .min-w-full{
   min-width: 100%;
 }
@@ -9313,6 +9298,9 @@ input[type=text]:disabled{
 .gap-2{
   gap: 0.5rem;
 }
+.gap-4{
+  gap: 1rem;
+}
 .gap-y-2{
   row-gap: 0.5rem;
 }
@@ -9324,6 +9312,10 @@ input[type=text]:disabled{
   -moz-column-gap: 1rem;
        column-gap: 1rem;
 }
+.gap-x-2{
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
 .space-y-1 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -9746,9 +9738,6 @@ input[type=text]:disabled{
 .pt-0{
   padding-top: 0px;
 }
-.pb-6{
-  padding-bottom: 1.5rem;
-}
 .text-left{
   text-align: left;
 }
@@ -9909,14 +9898,14 @@ input[type=text]:disabled{
   --tw-text-opacity: 1;
   color: rgb(4 120 87 / var(--tw-text-opacity));
 }
-.text-emerald-400{
-  --tw-text-opacity: 1;
-  color: rgb(52 211 153 / var(--tw-text-opacity));
-}
 .text-red-400{
   --tw-text-opacity: 1;
   color: rgb(249 128 128 / var(--tw-text-opacity));
 }
+.text-emerald-400{
+  --tw-text-opacity: 1;
+  color: rgb(52 211 153 / var(--tw-text-opacity));
+}
 .underline{
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -11008,14 +10997,14 @@ body .choices__input:focus{
   --tw-text-opacity: 1;
   color: rgb(240 82 82 / var(--tw-text-opacity));
 }
-.dark .dark\:text-gray-800{
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
 .dark .dark\:text-red-600{
   --tw-text-opacity: 1;
   color: rgb(224 36 36 / var(--tw-text-opacity));
 }
+.dark .dark\:text-gray-800{
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
 .dark .dark\:decoration-gray-500{
   -webkit-text-decoration-color: #6B7280;
           text-decoration-color: #6B7280;
diff --git a/docs/index.html b/docs/index.html
index 5a08787b..f40b54d4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1354,7 +1354,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 
 		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" x-cloak aria-modal="true" x-data="{
             importerResourceLocator: '',
-            importerSourceType: 'json-file',
+            importerSourceType: 'csv-file',
             importerHtml: '',
             step: 1,
             stagedMonsters: [],
@@ -1404,8 +1404,10 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
                 this.canImport = false;
                 this.importError = '';
             },
-            downloadExampleJson(){
-                Importer.downloadExampleJson();
+            downloadExampleFile(){
+                const example = Importer.exampleFiles[this.importerSourceType];
+                if(!example) return;
+                example();
             }
         }">
 			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
@@ -1444,6 +1446,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 										<option value="google-sheets">Google Sheets</option>
 										<option value="json-raw">Raw JSON</option>
 										<option value="json-file">JSON File</option>
+										<option value="csv-file">CSV File</option>
 									</optgroup>
 								</select>
 
diff --git a/docs/js/app.js b/docs/js/app.js
index 003db8c1..fb9eb5f0 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9158,21 +9158,19 @@ var module_default = src_default;
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js");
 /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var flowbite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! flowbite */ "./node_modules/flowbite/dist/flowbite.js");
-/* harmony import */ var flowbite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(flowbite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var choices_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! choices.js */ "./node_modules/choices.js/public/assets/scripts/choices.js");
-/* harmony import */ var choices_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(choices_js__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var hotkeys_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! hotkeys-js */ "./node_modules/hotkeys-js/dist/hotkeys.esm.js");
-/* harmony import */ var _encounter__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./encounter */ "./src/js/encounter.js");
-/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./helpers */ "./src/js/helpers.js");
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./constants */ "./src/js/constants.js");
-/* harmony import */ var _monster__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./monster */ "./src/js/monster.js");
-/* harmony import */ var _importer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./importer */ "./src/js/importer.js");
-/* harmony import */ var tippy_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! tippy.js */ "./node_modules/tippy.js/dist/tippy.esm.js");
-/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! nouislider */ "./node_modules/nouislider/dist/nouislider.js");
-/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(nouislider__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var _alpinejs_persist__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @alpinejs/persist */ "./node_modules/@alpinejs/persist/dist/module.esm.js");
-/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! alpinejs */ "./node_modules/alpinejs/dist/module.esm.js");
+/* harmony import */ var choices_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! choices.js */ "./node_modules/choices.js/public/assets/scripts/choices.js");
+/* harmony import */ var choices_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(choices_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var hotkeys_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! hotkeys-js */ "./node_modules/hotkeys-js/dist/hotkeys.esm.js");
+/* harmony import */ var _encounter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./encounter */ "./src/js/encounter.js");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers */ "./src/js/helpers.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./constants */ "./src/js/constants.js");
+/* harmony import */ var _monster__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./monster */ "./src/js/monster.js");
+/* harmony import */ var _importer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./importer */ "./src/js/importer.js");
+/* harmony import */ var tippy_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! tippy.js */ "./node_modules/tippy.js/dist/tippy.esm.js");
+/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! nouislider */ "./node_modules/nouislider/dist/nouislider.js");
+/* harmony import */ var nouislider__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(nouislider__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var _alpinejs_persist__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @alpinejs/persist */ "./node_modules/@alpinejs/persist/dist/module.esm.js");
+/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! alpinejs */ "./node_modules/alpinejs/dist/module.esm.js");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -9210,13 +9208,12 @@ __webpack_require__(/*! @fortawesome/fontawesome-free */ "./node_modules/@fortaw
 
 
 
-
 var internationalNumberFormat = new Intl.NumberFormat('en-US');
 
 function app() {
   return {
     sourcesVersion: "2.1.0",
-    storedSourcesVersion: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist("2.0.0").as('storedSourcesVersion'),
+    storedSourcesVersion: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("2.0.0").as('storedSourcesVersion'),
     menu: false,
     showFilters: false,
     showSourcesModal: false,
@@ -9228,15 +9225,15 @@ function app() {
     filters: {},
     searchPlaceholder: "",
     nonDefaultFiltersCount: 0,
-    loadedSources: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('sources'),
-    importedSources: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('importedSources'),
-    loadedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('monsters'),
-    importedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('importedMonsters'),
-    encounterHistory: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('encounterHistory'),
-    savedEncounters: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('savedEncounters'),
-    loadedEncounterIndex: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(null).as('loadedEncounterIndex'),
-    loadedLastEncounter: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(false).as('loadedLastEncounter'),
-    savedParties: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([]).as('savedParties'),
+    loadedSources: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('sources'),
+    importedSources: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('importedSources'),
+    loadedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('monsters'),
+    importedMonsters: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('importedMonsters'),
+    encounterHistory: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('encounterHistory'),
+    savedEncounters: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('savedEncounters'),
+    loadedEncounterIndex: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(null).as('loadedEncounterIndex'),
+    loadedLastEncounter: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(false).as('loadedLastEncounter'),
+    savedParties: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([]).as('savedParties'),
     sources: {},
     enabledSources: [],
     allMonsters: [],
@@ -9244,23 +9241,23 @@ function app() {
     monsterLookupTable: {},
     environments: {},
     totalPages: 1,
-    currentPage: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(1).as('currentPage'),
+    currentPage: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(1).as('currentPage'),
     pagination: [],
-    monstersPerPage: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(10).as("monstersPerPage"),
-    encounterType: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist("random").as("encounterType"),
+    monstersPerPage: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(10).as("monstersPerPage"),
+    encounterType: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("random").as("encounterType"),
     encounterTypeSelectOpen: false,
-    encounterTypes: Object.fromEntries(Object.entries(_constants__WEBPACK_IMPORTED_MODULE_6__["default"].ENCOUNTER_TYPES).map(function (entry) {
+    encounterTypes: Object.fromEntries(Object.entries(_constants__WEBPACK_IMPORTED_MODULE_5__["default"].ENCOUNTER_TYPES).map(function (entry) {
       return [entry[0], {
         key: entry[0],
         label: entry[1].name
       }];
     })),
     difficultySelectOpen: false,
-    difficulty: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist("medium").as("difficulty"),
-    search: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist("").as("search"),
-    encounter: _encounter__WEBPACK_IMPORTED_MODULE_4__["default"],
-    sortBy: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist("name").as("sortBy"),
-    sortByDesc: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(true).as("sortByDesc"),
+    difficulty: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("medium").as("difficulty"),
+    search: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("").as("search"),
+    encounter: _encounter__WEBPACK_IMPORTED_MODULE_3__["default"],
+    sortBy: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist("name").as("sortBy"),
+    sortByDesc: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(true).as("sortByDesc"),
     setSortBy: function setSortBy(type) {
       if (type === this.sortBy) {
         this.sortByDesc = !this.sortByDesc;
@@ -9337,7 +9334,7 @@ function app() {
     },
 
     party: {
-      groups: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist([{
+      groups: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist([{
         players: 4,
         level: 1,
         getsXP: true
@@ -9364,7 +9361,7 @@ function app() {
       getGroupExperience: function getGroupExperience(acc, group) {
         var _acc$easy, _group$players, _acc$medium, _group$players2, _acc$hard, _group$players3, _acc$deadly, _group$players4, _acc$daily, _group$players5;
 
-        var groupExp = _constants__WEBPACK_IMPORTED_MODULE_6__["default"].EXP[group.level];
+        var groupExp = _constants__WEBPACK_IMPORTED_MODULE_5__["default"].EXP[group.level];
         return {
           easy: ((_acc$easy = acc === null || acc === void 0 ? void 0 : acc.easy) !== null && _acc$easy !== void 0 ? _acc$easy : 0) + groupExp.easy * ((_group$players = group === null || group === void 0 ? void 0 : group.players) !== null && _group$players !== void 0 ? _group$players : 1),
           medium: ((_acc$medium = acc === null || acc === void 0 ? void 0 : acc.medium) !== null && _acc$medium !== void 0 ? _acc$medium : 0) + groupExp.medium * ((_group$players2 = group === null || group === void 0 ? void 0 : group.players) !== null && _group$players2 !== void 0 ? _group$players2 : 1),
@@ -9475,7 +9472,7 @@ function app() {
 
                 _this2.formatMonsters(_this2.importedMonsters);
 
-                _this2.searchPlaceholder = _helpers__WEBPACK_IMPORTED_MODULE_5__.randomArrayElement(_this2.allMonsters).name;
+                _this2.searchPlaceholder = _helpers__WEBPACK_IMPORTED_MODULE_4__.randomArrayElement(_this2.allMonsters).name;
 
                 if (_this2.loadedEncounterIndex !== null) {
                   _this2.encounter.load(_this2.savedEncounters[_this2.loadedEncounterIndex]);
@@ -9586,7 +9583,7 @@ function app() {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                if (!(_this4.loadedSources.length && _helpers__WEBPACK_IMPORTED_MODULE_5__.versionCompare(_this4.sourcesVersion, _this4.storedSourcesVersion) === 0)) {
+                if (!(_this4.loadedSources.length && _helpers__WEBPACK_IMPORTED_MODULE_4__.versionCompare(_this4.sourcesVersion, _this4.storedSourcesVersion) === 0)) {
                   _context2.next = 2;
                   break;
                 }
@@ -9642,7 +9639,7 @@ function app() {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
-                if (!(_this5.loadedSources.length && _helpers__WEBPACK_IMPORTED_MODULE_5__.versionCompare(_this5.storedSourcesVersion, _this5.sourcesVersion) === 0)) {
+                if (!(_this5.loadedSources.length && _helpers__WEBPACK_IMPORTED_MODULE_4__.versionCompare(_this5.storedSourcesVersion, _this5.sourcesVersion) === 0)) {
                   _context3.next = 2;
                   break;
                 }
@@ -9697,7 +9694,7 @@ function app() {
       var _this6 = this;
 
       this.allMonsters = this.allMonsters.concat(data.map(function (data) {
-        var monster = new _monster__WEBPACK_IMPORTED_MODULE_7__["default"](_this6, data);
+        var monster = new _monster__WEBPACK_IMPORTED_MODULE_6__["default"](_this6, data);
         _this6.monsterLookupTable[monster.slug] = monster;
         return monster;
       }));
@@ -9770,7 +9767,7 @@ function app() {
             return filter.min !== 0 || filter.max !== 30;
 
           case "alignment":
-            return filter !== _constants__WEBPACK_IMPORTED_MODULE_6__["default"].ALL_ALIGNMENTS;
+            return filter !== _constants__WEBPACK_IMPORTED_MODULE_5__["default"].ALL_ALIGNMENTS;
 
           default:
             return filter.length && !filter.includes('any');
@@ -9823,7 +9820,7 @@ function app() {
     setupHotkeys: function setupHotkeys() {
       var _this9 = this;
 
-      (0,hotkeys_js__WEBPACK_IMPORTED_MODULE_3__["default"])('ctrl+/,ctrl+k,ctrl+shift+\\,ctrl+f,ctrl+[,ctrl+],ctrl+g,ctrl+s,esc', function (event, handler) {
+      (0,hotkeys_js__WEBPACK_IMPORTED_MODULE_2__["default"])('ctrl+/,ctrl+k,ctrl+shift+\\,ctrl+f,ctrl+[,ctrl+],ctrl+g,ctrl+s,esc', function (event, handler) {
         switch (handler.key) {
           case 'ctrl+/':
             _this9.showKeyboardModal = !_this9.showKeyboardModal;
@@ -9899,7 +9896,7 @@ function app() {
           return player.active;
         }).forEach(function (player, playerIndex) {
           data.Combatants.push({
-            Id: _helpers__WEBPACK_IMPORTED_MODULE_5__.slugify("".concat(party.name, "-").concat(player.name)),
+            Id: _helpers__WEBPACK_IMPORTED_MODULE_4__.slugify("".concat(party.name, "-").concat(player.name)),
             Name: player.name,
             InitiativeModifier: player.initiativeMod,
             InitiativeAdvantage: player.initiativeAdvantage,
@@ -9942,14 +9939,14 @@ function multiSlider($el, name, options, updateCallback) {
       max: '30'
     },
     options: options,
-    value: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist({
+    value: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist({
       min: '0',
       max: '30'
     }).as(name),
     init: function init() {
       var _this10 = this;
 
-      this.slider = nouislider__WEBPACK_IMPORTED_MODULE_9___default().create($el, {
+      this.slider = nouislider__WEBPACK_IMPORTED_MODULE_8___default().create($el, {
         start: [options.findIndex(function (option) {
           return option.value === _this10.value.min;
         }), options.findIndex(function (option) {
@@ -9980,8 +9977,8 @@ function multiSlider($el, name, options, updateCallback) {
         detail: {
           name: "cr",
           value: {
-            min: _constants__WEBPACK_IMPORTED_MODULE_6__["default"].CR[this.value.min].numeric,
-            max: _constants__WEBPACK_IMPORTED_MODULE_6__["default"].CR[this.value.max].numeric
+            min: _constants__WEBPACK_IMPORTED_MODULE_5__["default"].CR[this.value.min].numeric,
+            max: _constants__WEBPACK_IMPORTED_MODULE_5__["default"].CR[this.value.max].numeric
           }
         }
       }));
@@ -10019,7 +10016,7 @@ function multiSlider($el, name, options, updateCallback) {
 function multiSelect($el, name, options) {
   return {
     multiple: true,
-    value: alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].$persist(['any']).as(name),
+    value: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(['any']).as(name),
     name: name,
     options: options,
     completedSetup: false,
@@ -10038,7 +10035,7 @@ function multiSelect($el, name, options) {
         return;
       }
 
-      var choices = new (choices_js__WEBPACK_IMPORTED_MODULE_2___default())($el, {
+      var choices = new (choices_js__WEBPACK_IMPORTED_MODULE_1___default())($el, {
         allowHTML: true,
         removeItemButton: true
       });
@@ -10100,17 +10097,17 @@ function multiSelect($el, name, options) {
   };
 }
 
-window.hotkeys = hotkeys_js__WEBPACK_IMPORTED_MODULE_3__["default"];
+window.hotkeys = hotkeys_js__WEBPACK_IMPORTED_MODULE_2__["default"];
 window.app = app;
 window.multiSelect = multiSelect;
 window.multiSlider = multiSlider;
-window.noUiSlider = (nouislider__WEBPACK_IMPORTED_MODULE_9___default());
-window.Choices = (choices_js__WEBPACK_IMPORTED_MODULE_2___default());
-window.tippy = tippy_js__WEBPACK_IMPORTED_MODULE_12__["default"];
-window.Importer = _importer__WEBPACK_IMPORTED_MODULE_8__["default"];
-window.Alpine = alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"];
-alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].plugin(_alpinejs_persist__WEBPACK_IMPORTED_MODULE_10__["default"]);
-alpinejs__WEBPACK_IMPORTED_MODULE_11__["default"].start();
+window.noUiSlider = (nouislider__WEBPACK_IMPORTED_MODULE_8___default());
+window.Choices = (choices_js__WEBPACK_IMPORTED_MODULE_1___default());
+window.tippy = tippy_js__WEBPACK_IMPORTED_MODULE_11__["default"];
+window.Importer = _importer__WEBPACK_IMPORTED_MODULE_7__["default"];
+window.Alpine = alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"];
+alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].plugin(_alpinejs_persist__WEBPACK_IMPORTED_MODULE_9__["default"]);
+alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].start();
 
 /***/ }),
 
@@ -11165,6 +11162,7 @@ var encounter = {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "clone": () => (/* binding */ clone),
+/* harmony export */   "downloadFile": () => (/* binding */ downloadFile),
 /* harmony export */   "isValidHttpUrl": () => (/* binding */ isValidHttpUrl),
 /* harmony export */   "randomArrayElement": () => (/* binding */ randomArrayElement),
 /* harmony export */   "randomFloatBetween": () => (/* binding */ randomFloatBetween),
@@ -11327,7 +11325,16 @@ function validateJSON(jsonString) {
 
   return false;
 }
-;
+function downloadFile(fileName, data, type) {
+  var a = document.createElement("a");
+  var file = new Blob([data], {
+    type: type
+  });
+  a.href = URL.createObjectURL(file);
+  a.download = fileName;
+  a.click();
+  a.remove();
+}
 
 /***/ }),
 
@@ -11345,6 +11352,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js");
 /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helpers */ "./src/js/helpers.js");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+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 _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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
@@ -11380,17 +11393,17 @@ var Importer = /*#__PURE__*/function () {
                 })).then(function (response) {
                   return response.json();
                 }).then(function (jsonifiedBody) {
-                  if (!jsonifiedBody.sheets.filter(function (sheet) {
+                  if (!jsonifiedBody.sheets.find(function (sheet) {
                     return sheet.properties.title === 'Monsters';
-                  }).length) {
+                  })) {
                     return [false, "Your Google Sheets workbook must contain a sheet called 'Monsters'. Only found: '" + jsonifiedBody.sheets.map(function (sheet) {
                       return sheet.properties.title;
                     }).join(', ') + "'"];
                   }
 
-                  if (!jsonifiedBody.sheets.filter(function (sheet) {
+                  if (!jsonifiedBody.sheets.find(function (sheet) {
                     return sheet.properties.title === 'Sources';
-                  }).length) {
+                  })) {
                     return [false, "Your Google Sheets workbook must contain a sheet called 'Sources'. Only found: '" + jsonifiedBody.sheets.map(function (sheet) {
                       return sheet.properties.title;
                     }).join(', ') + "'"];
@@ -11485,7 +11498,7 @@ var Importer = /*#__PURE__*/function () {
                   break;
                 }
 
-                return _context3.abrupt("return", [false, "The file you provided isn't a text file containing JSON"]);
+                return _context3.abrupt("return", [false, "The file you provided isn't a text file containing JSON."]);
 
               case 2:
                 _context3.next = 4;
@@ -11535,24 +11548,94 @@ var Importer = /*#__PURE__*/function () {
       return _validateJsonFile;
     }()
   }, {
-    key: "canImport",
+    key: "_validateCSV",
     value: function () {
-      var _canImport = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee4(resourceLocator, type) {
+      var _validateCSV2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee4(resourceLocators) {
+        var results, _i, _arr, key, _i2, _arr2, _key;
+
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee4$(_context4) {
           while (1) {
             switch (_context4.prev = _context4.next) {
               case 0:
-                if (resourceLocator) {
+                if (!(!resourceLocators[0] || !resourceLocators[1])) {
                   _context4.next = 2;
                   break;
                 }
 
-                return _context4.abrupt("return", [false, "You must provide an import source."]);
+                return _context4.abrupt("return", [false, '']);
 
               case 2:
-                return _context4.abrupt("return", this.validators[type].bind(this)(resourceLocator));
+                if (!(resourceLocators[0].type !== 'text/csv' || resourceLocators[1].type !== 'text/csv')) {
+                  _context4.next = 4;
+                  break;
+                }
 
-              case 3:
+                return _context4.abrupt("return", [false, "The files you provided aren't valid CSV text files."]);
+
+              case 4:
+                _context4.next = 6;
+                return this._importCSV(resourceLocators);
+
+              case 6:
+                results = _context4.sent;
+
+                if (results) {
+                  _context4.next = 9;
+                  break;
+                }
+
+                return _context4.abrupt("return", [false, "Couldn't resolve K+FC data, import source is probably an invalid CSV file."]);
+
+              case 9:
+                _i = 0, _arr = ["name", "shortname", "link"];
+
+              case 10:
+                if (!(_i < _arr.length)) {
+                  _context4.next = 17;
+                  break;
+                }
+
+                key = _arr[_i];
+
+                if (Object.keys(results.sources[0]).includes(key)) {
+                  _context4.next = 14;
+                  break;
+                }
+
+                return _context4.abrupt("return", [false, "Sources are missing the required header: '".concat(key, "' - Please refer to the example files.")]);
+
+              case 14:
+                _i++;
+                _context4.next = 10;
+                break;
+
+              case 17:
+                _i2 = 0, _arr2 = ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", "lair?", "legendary", "unique", "sources"];
+
+              case 18:
+                if (!(_i2 < _arr2.length)) {
+                  _context4.next = 25;
+                  break;
+                }
+
+                _key = _arr2[_i2];
+
+                if (Object.keys(results.monsters[0]).includes(_key)) {
+                  _context4.next = 22;
+                  break;
+                }
+
+                return _context4.abrupt("return", [false, "Monsters are missing the required header: '".concat(_key, "' - Please refer to the example files.")]);
+
+              case 22:
+                _i2++;
+                _context4.next = 18;
+                break;
+
+              case 25:
+                return _context4.abrupt("return", [true, ""]);
+
+              case 26:
               case "end":
                 return _context4.stop();
             }
@@ -11560,7 +11643,39 @@ var Importer = /*#__PURE__*/function () {
         }, _callee4, this);
       }));
 
-      function canImport(_x4, _x5) {
+      function _validateCSV(_x4) {
+        return _validateCSV2.apply(this, arguments);
+      }
+
+      return _validateCSV;
+    }()
+  }, {
+    key: "canImport",
+    value: function () {
+      var _canImport = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee5(resourceLocator, type) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                if (resourceLocator) {
+                  _context5.next = 2;
+                  break;
+                }
+
+                return _context5.abrupt("return", [false, "You must provide an import source."]);
+
+              case 2:
+                return _context5.abrupt("return", this.validators[type].bind(this)(resourceLocator));
+
+              case 3:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5, this);
+      }));
+
+      function canImport(_x5, _x6) {
         return _canImport.apply(this, arguments);
       }
 
@@ -11569,27 +11684,27 @@ var Importer = /*#__PURE__*/function () {
   }, {
     key: "import",
     value: function () {
-      var _import2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee5() {
+      var _import2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee6() {
         var _ref,
             _ref$resourceLocator,
             resourceLocator,
             _ref$type,
             type,
-            _args5 = arguments;
+            _args6 = arguments;
 
-        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee5$(_context5) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee6$(_context6) {
           while (1) {
-            switch (_context5.prev = _context5.next) {
+            switch (_context6.prev = _context6.next) {
               case 0:
-                _ref = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : {}, _ref$resourceLocator = _ref.resourceLocator, resourceLocator = _ref$resourceLocator === void 0 ? false : _ref$resourceLocator, _ref$type = _ref.type, type = _ref$type === void 0 ? 'google-sheets' : _ref$type;
-                return _context5.abrupt("return", this.loaders[type].bind(this)(resourceLocator));
+                _ref = _args6.length > 0 && _args6[0] !== undefined ? _args6[0] : {}, _ref$resourceLocator = _ref.resourceLocator, resourceLocator = _ref$resourceLocator === void 0 ? false : _ref$resourceLocator, _ref$type = _ref.type, type = _ref$type === void 0 ? 'google-sheets' : _ref$type;
+                return _context6.abrupt("return", this.loaders[type].bind(this)(resourceLocator));
 
               case 2:
               case "end":
-                return _context5.stop();
+                return _context6.stop();
             }
           }
-        }, _callee5, this);
+        }, _callee6, this);
       }));
 
       function _import() {
@@ -11601,13 +11716,13 @@ var Importer = /*#__PURE__*/function () {
   }, {
     key: "_importGoogleSheets",
     value: function () {
-      var _importGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee6(resourceLocator) {
+      var _importGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee7(resourceLocator) {
         var monsters, sources;
-        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee6$(_context6) {
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee7$(_context7) {
           while (1) {
-            switch (_context6.prev = _context6.next) {
+            switch (_context7.prev = _context7.next) {
               case 0:
-                _context6.next = 2;
+                _context7.next = 2;
                 return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Monsters?") + new URLSearchParams({
                   key: this.key
                 })).then(function (response) {
@@ -11638,8 +11753,8 @@ var Importer = /*#__PURE__*/function () {
                 });
 
               case 2:
-                monsters = _context6.sent;
-                _context6.next = 5;
+                monsters = _context7.sent;
+                _context7.next = 5;
                 return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Sources?") + new URLSearchParams({
                   key: this.key
                 })).then(function (response) {
@@ -11660,21 +11775,21 @@ var Importer = /*#__PURE__*/function () {
                 });
 
               case 5:
-                sources = _context6.sent;
-                return _context6.abrupt("return", {
+                sources = _context7.sent;
+                return _context7.abrupt("return", {
                   sources: sources,
                   monsters: monsters
                 });
 
               case 7:
               case "end":
-                return _context6.stop();
+                return _context7.stop();
             }
           }
-        }, _callee6, this);
+        }, _callee7, this);
       }));
 
-      function _importGoogleSheets(_x6) {
+      function _importGoogleSheets(_x7) {
         return _importGoogleSheets2.apply(this, arguments);
       }
 
@@ -11683,34 +11798,28 @@ var Importer = /*#__PURE__*/function () {
   }, {
     key: "_importJsonFile",
     value: function () {
-      var _importJsonFile2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee7(resourceLocator) {
-        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee7$(_context7) {
+      var _importJsonFile2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee8(resourceLocator) {
+        var data;
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee8$(_context8) {
           while (1) {
-            switch (_context7.prev = _context7.next) {
+            switch (_context8.prev = _context8.next) {
               case 0:
-                return _context7.abrupt("return", new Promise(function (resolve, reject) {
-                  var reader = new FileReader();
-                  reader.addEventListener('load', function () {
-                    try {
-                      var data = JSON.parse(reader.result);
-                      resolve(data);
-                    } catch (err) {
-                      console.error(err);
-                      reject(err);
-                    }
-                  });
-                  reader.readAsText(resourceLocator);
-                }));
+                _context8.next = 2;
+                return this._loadFile(resourceLocator);
 
-              case 1:
+              case 2:
+                data = _context8.sent;
+                return _context8.abrupt("return", this._importJson(data));
+
+              case 4:
               case "end":
-                return _context7.stop();
+                return _context8.stop();
             }
           }
-        }, _callee7);
+        }, _callee8, this);
       }));
 
-      function _importJsonFile(_x7) {
+      function _importJsonFile(_x8) {
         return _importJsonFile2.apply(this, arguments);
       }
 
@@ -11719,37 +11828,53 @@ var Importer = /*#__PURE__*/function () {
   }, {
     key: "_importJson",
     value: function () {
-      var _importJson2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee8(resourceLocator) {
-        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee8$(_context8) {
+      var _importJson2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee9(resourceLocator) {
+        var data, _iterator, _step, source;
+
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee9$(_context9) {
           while (1) {
-            switch (_context8.prev = _context8.next) {
+            switch (_context9.prev = _context9.next) {
               case 0:
-                _context8.prev = 0;
-                return _context8.abrupt("return", JSON.parse(resourceLocator));
+                _context9.prev = 0;
+                data = JSON.parse(resourceLocator);
+                _iterator = _createForOfIteratorHelper(data.sources);
+
+                try {
+                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                    source = _step.value;
+                    source.type = "Custom";
+                  }
+                } catch (err) {
+                  _iterator.e(err);
+                } finally {
+                  _iterator.f();
+                }
 
-              case 4:
-                _context8.prev = 4;
-                _context8.t0 = _context8["catch"](0);
-                console.error(_context8.t0);
-                return _context8.abrupt("return", false);
+                return _context9.abrupt("return", data);
+
+              case 7:
+                _context9.prev = 7;
+                _context9.t0 = _context9["catch"](0);
+                console.error(_context9.t0);
+                return _context9.abrupt("return", false);
 
-              case 8:
+              case 11:
               case "end":
-                return _context8.stop();
+                return _context9.stop();
             }
           }
-        }, _callee8, null, [[0, 4]]);
+        }, _callee9, null, [[0, 7]]);
       }));
 
-      function _importJson(_x8) {
+      function _importJson(_x9) {
         return _importJson2.apply(this, arguments);
       }
 
       return _importJson;
     }()
   }, {
-    key: "downloadExampleJson",
-    value: function downloadExampleJson() {
+    key: "_downloadExampleJson",
+    value: function _downloadExampleJson() {
       var jsonExample = {
         "sources": [{
           "name": "Custom Source",
@@ -11758,7 +11883,7 @@ var Importer = /*#__PURE__*/function () {
         }, {
           "name": "Another Custom Source",
           "shortname": "ACS",
-          "link": ""
+          "link": "https://google.com/"
         }],
         "monsters": [{
           "name": "Zombie",
@@ -11794,32 +11919,127 @@ var Importer = /*#__PURE__*/function () {
           "sources": "Another Custom Source: 32"
         }]
       };
-      var a = document.createElement("a");
-      var file = new Blob([JSON.stringify(jsonExample, null, 4)], {
-        type: "text/json"
+      _helpers__WEBPACK_IMPORTED_MODULE_1__.downloadFile("example.json", JSON.stringify(jsonExample, null, 4), "application/json");
+    }
+  }, {
+    key: "_importCSV",
+    value: function () {
+      var _importCSV2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee10(resourceLocators) {
+        var sources, monsters;
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee10$(_context10) {
+          while (1) {
+            switch (_context10.prev = _context10.next) {
+              case 0:
+                _context10.next = 2;
+                return this._loadFile(resourceLocators[0]);
+
+              case 2:
+                sources = _context10.sent;
+
+                if (sources) {
+                  _context10.next = 5;
+                  break;
+                }
+
+                return _context10.abrupt("return", false);
+
+              case 5:
+                _context10.next = 7;
+                return this._loadFile(resourceLocators[1]);
+
+              case 7:
+                monsters = _context10.sent;
+
+                if (monsters) {
+                  _context10.next = 10;
+                  break;
+                }
+
+                return _context10.abrupt("return", false);
+
+              case 10:
+                return _context10.abrupt("return", {
+                  sources: this._formatCSV(sources),
+                  monsters: this._formatCSV(monsters)
+                });
+
+              case 11:
+              case "end":
+                return _context10.stop();
+            }
+          }
+        }, _callee10, this);
+      }));
+
+      function _importCSV(_x10) {
+        return _importCSV2.apply(this, arguments);
+      }
+
+      return _importCSV;
+    }()
+  }, {
+    key: "_formatCSV",
+    value: function _formatCSV(str) {
+      var headers = str.slice(0, str.indexOf("\n")).split(',');
+      var rows = str.slice(str.indexOf("\n") + 1).split("\n");
+      return rows.map(function (row) {
+        var values = row.split(',');
+        return headers.reduce(function (obj, header, index) {
+          obj[header] = values[index];
+          return obj;
+        }, {});
+      });
+    }
+  }, {
+    key: "_downloadExampleCSV",
+    value: function _downloadExampleCSV() {
+      var sources = "name,shortname,link\n";
+      sources += "Custom Source,CS,\n";
+      sources += "Another Custom Source,ACS,https://google.com/";
+      _helpers__WEBPACK_IMPORTED_MODULE_1__.downloadFile("example_sources.csv", sources, "text/csv");
+      var monsters = "name,cr,size,type,tags,section,alignment,environment,ac,hp,init,lair?,legendary,unique,sources\n";
+      monsters += "Zombie,1/4,Medium,Undead,,Zombies,neutral evil,\"aquatic, arctic, cave, coast, desert, dungeon, forest, grassland, mountain, ruins, swamp, underground, urban\",8,22, -2,,,,Custom Source: 5\n";
+      monsters += "Bigger Zombie,1/2,Large,Undead,,Zombies,neutral evil,my custom place,10,41,-2,,legendary,unique,Another Custom Source: 32";
+      _helpers__WEBPACK_IMPORTED_MODULE_1__.downloadFile("example_monsters.csv", monsters, "text/csv");
+    }
+  }, {
+    key: "_loadFile",
+    value: function _loadFile(file) {
+      return new Promise(function (resolve, reject) {
+        var reader = new FileReader();
+        reader.addEventListener('load', function () {
+          try {
+            resolve(reader.result);
+          } catch (err) {
+            console.error(err);
+            reject(err);
+          }
+        });
+        reader.readAsText(file);
       });
-      a.href = URL.createObjectURL(file);
-      a.download = "example.json";
-      a.click();
-      a.remove();
     }
   }]);
 
   return Importer;
 }();
 
-_defineProperty(Importer, "key", 'AIzaSyDzQndw__ieQX2WMK06ROjFhn_jFAFelk8');
-
 _defineProperty(Importer, "loaders", {
   'google-sheets': Importer._importGoogleSheets,
   'json-raw': Importer._importJson,
-  'json-file': Importer._importJsonFile
+  'json-file': Importer._importJsonFile,
+  'csv-file': Importer._importCSV
 });
 
 _defineProperty(Importer, "validators", {
   'google-sheets': Importer._validateGoogleSheets,
   'json-raw': Importer._validateJson,
-  'json-file': Importer._validateJsonFile
+  'json-file': Importer._validateJsonFile,
+  'csv-file': Importer._validateCSV
+});
+
+_defineProperty(Importer, "exampleFiles", {
+  'json-file': Importer._downloadExampleJson,
+  'csv-file': Importer._downloadExampleCSV
 });
 
 _defineProperty(Importer, "loadersHtml", {
@@ -11830,7 +12050,10 @@ _defineProperty(Importer, "loadersHtml", {
     return "\n                <label for=\"import_resource_locator\">Raw JSON</label> - <a href=\"javascript:true\" class=\"primary-link\" @click=\"downloadExampleJson\">download example</a>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
   },
   'json-file': function jsonFile() {
-    return "\n                <label class=\"block\" id=\"file_input_label\" for=\"import_resource_locator_file\">Upload JSON text file below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleJson\">download an example file to edit</a></label>                \n                <input accept=\"application/json\" class=\"block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"importerResourceLocator = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file\" type=\"file\">\n            ";
+    return "\n                <label class=\"block\" id=\"file_input_label\" for=\"import_resource_locator_file\">Upload JSON text file below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleFile\">download an example file to edit</a></label>                \n                <input accept=\"application/json\" class=\"block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"importerResourceLocator = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file\" type=\"file\">\n            ";
+  },
+  'csv-file': function csvFile() {
+    return "\n                <label>Upload CSV text files below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleFile\">download example files to edit</a></label>\n                <div class=\"grid grid-cols-2 gap-2 mt-2\">                \n                    <label class=\"\" id=\"file_input_label_1\" for=\"import_resource_locator_file_1\">Sources CSV</label>                \n                    <label class=\"\" id=\"file_input_label_1\" for=\"import_resource_locator_file_2\">Monsters CSV</label>                \n                    <input accept=\"text/csv\" class=\" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[0] = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file_1\" type=\"file\">\n                    <input accept=\"text/csv\" class=\" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[1] = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file_2\" type=\"file\">\n                </div>\n            ";
   }
 });
 
@@ -11912,7 +12135,7 @@ var Monster = /*#__PURE__*/function () {
       var source = {};
       source.actual_source = _this.app.sources[book];
 
-      if (!isNaN(location)) {
+      if (!isNaN(Number(location))) {
         source.reference = source.actual_source;
         source.page = location;
       } else if (_helpers_js__WEBPACK_IMPORTED_MODULE_1__.isValidHttpUrl(location)) {
@@ -19716,3395 +19939,6 @@ __webpack_exports__ = __webpack_exports__["default"];
 
 /***/ }),
 
-/***/ "./node_modules/flowbite/dist/flowbite.js":
-/*!************************************************!*\
-  !*** ./node_modules/flowbite/dist/flowbite.js ***!
-  \************************************************/
-/***/ (() => {
-
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-var __webpack_exports__ = {};
-
-// UNUSED EXPORTS: default
-
-;// CONCATENATED MODULE: ./src/components/accordion.js
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { 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 _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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-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 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 _objectSpread(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 _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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-var Default = {
-  alwaysOpen: false,
-  activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
-  inactiveClasses: 'text-gray-500 dark:text-gray-400',
-  onOpen: function onOpen() {},
-  onClose: function onClose() {},
-  onToggle: function onToggle() {}
-};
-
-var Accordion = /*#__PURE__*/function () {
-  function Accordion() {
-    var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    _classCallCheck(this, Accordion);
-
-    this._items = items;
-    this._options = _objectSpread(_objectSpread({}, Default), options);
-
-    this._init();
-  }
-
-  _createClass(Accordion, [{
-    key: "_init",
-    value: function _init() {
-      var _this = this;
-
-      if (this._items.length) {
-        // show accordion item based on click
-        this._items.map(function (item) {
-          if (item.active) {
-            _this.open(item.id);
-          }
-
-          item.triggerEl.addEventListener('click', function () {
-            _this.toggle(item.id);
-          });
-        });
-      }
-    }
-  }, {
-    key: "getItem",
-    value: function getItem(id) {
-      return this._items.filter(function (item) {
-        return item.id === id;
-      })[0];
-    }
-  }, {
-    key: "open",
-    value: function open(id) {
-      var _this2 = this,
-          _item$triggerEl$class,
-          _item$triggerEl$class2;
-
-      var item = this.getItem(id); // don't hide other accordions if always open
-
-      if (!this._options.alwaysOpen) {
-        this._items.map(function (i) {
-          if (i !== item) {
-            var _i$triggerEl$classLis, _i$triggerEl$classLis2;
-
-            (_i$triggerEl$classLis = i.triggerEl.classList).remove.apply(_i$triggerEl$classLis, _toConsumableArray(_this2._options.activeClasses.split(" ")));
-
-            (_i$triggerEl$classLis2 = i.triggerEl.classList).add.apply(_i$triggerEl$classLis2, _toConsumableArray(_this2._options.inactiveClasses.split(" ")));
-
-            i.targetEl.classList.add('hidden');
-            i.triggerEl.setAttribute('aria-expanded', false);
-            i.active = false; // rotate icon if set
-
-            if (i.iconEl) {
-              i.iconEl.classList.remove('rotate-180');
-            }
-          }
-        });
-      } // show active item
-
-
-      (_item$triggerEl$class = item.triggerEl.classList).add.apply(_item$triggerEl$class, _toConsumableArray(this._options.activeClasses.split(" ")));
-
-      (_item$triggerEl$class2 = item.triggerEl.classList).remove.apply(_item$triggerEl$class2, _toConsumableArray(this._options.inactiveClasses.split(" ")));
-
-      item.triggerEl.setAttribute('aria-expanded', true);
-      item.targetEl.classList.remove('hidden');
-      item.active = true; // rotate icon if set
-
-      if (item.iconEl) {
-        item.iconEl.classList.add('rotate-180');
-      } // callback function
-
-
-      this._options.onOpen(this, item);
-    }
-  }, {
-    key: "toggle",
-    value: function toggle(id) {
-      var item = this.getItem(id);
-
-      if (item.active) {
-        this.close(id);
-      } else {
-        this.open(id);
-      } // callback function
-
-
-      this._options.onToggle(this, item);
-    }
-  }, {
-    key: "close",
-    value: function close(id) {
-      var _item$triggerEl$class3, _item$triggerEl$class4;
-
-      var item = this.getItem(id);
-
-      (_item$triggerEl$class3 = item.triggerEl.classList).remove.apply(_item$triggerEl$class3, _toConsumableArray(this._options.activeClasses.split(" ")));
-
-      (_item$triggerEl$class4 = item.triggerEl.classList).add.apply(_item$triggerEl$class4, _toConsumableArray(this._options.inactiveClasses.split(" ")));
-
-      item.targetEl.classList.add('hidden');
-      item.triggerEl.setAttribute('aria-expanded', false);
-      item.active = false; // rotate icon if set
-
-      if (item.iconEl) {
-        item.iconEl.classList.remove('rotate-180');
-      } // callback function
-
-
-      this._options.onClose(this, item);
-    }
-  }]);
-
-  return Accordion;
-}();
-
-window.Accordion = Accordion;
-document.addEventListener('DOMContentLoaded', function () {
-  document.querySelectorAll('[data-accordion]').forEach(function (accordionEl) {
-    var alwaysOpen = accordionEl.getAttribute('data-accordion');
-    var activeClasses = accordionEl.getAttribute('data-active-classes');
-    var inactiveClasses = accordionEl.getAttribute('data-inactive-classes');
-    var items = [];
-    accordionEl.querySelectorAll('[data-accordion-target]').forEach(function (el) {
-      var item = {
-        id: el.getAttribute('data-accordion-target'),
-        triggerEl: el,
-        targetEl: document.querySelector(el.getAttribute('data-accordion-target')),
-        iconEl: el.querySelector('[data-accordion-icon]'),
-        active: el.getAttribute('aria-expanded') === 'true' ? true : false
-      };
-      items.push(item);
-    });
-    new Accordion(items, {
-      alwaysOpen: alwaysOpen === 'open' ? true : false,
-      activeClasses: activeClasses ? activeClasses : Default.activeClasses,
-      inactiveClasses: inactiveClasses ? inactiveClasses : Default.inactiveClasses
-    });
-  });
-});
-/* harmony default export */ const accordion = (Accordion);
-;// CONCATENATED MODULE: ./src/components/collapse.js
-function collapse_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 collapse_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? collapse_ownKeys(Object(source), !0).forEach(function (key) { collapse_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : collapse_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function collapse_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 collapse_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function collapse_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 collapse_createClass(Constructor, protoProps, staticProps) { if (protoProps) collapse_defineProperties(Constructor.prototype, protoProps); if (staticProps) collapse_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-var collapse_Default = {
-  triggerEl: null,
-  onCollapse: function onCollapse() {},
-  onExpand: function onExpand() {},
-  onToggle: function onToggle() {}
-};
-
-var Collapse = /*#__PURE__*/function () {
-  function Collapse() {
-    var targetEl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var options = arguments.length > 1 ? arguments[1] : undefined;
-
-    collapse_classCallCheck(this, Collapse);
-
-    this._targetEl = targetEl;
-    this._triggerEl = options ? options.triggerEl : collapse_Default.triggerEl;
-    this._options = collapse_objectSpread(collapse_objectSpread({}, collapse_Default), options);
-    this._visible = false;
-
-    this._init();
-  }
-
-  collapse_createClass(Collapse, [{
-    key: "_init",
-    value: function _init() {
-      var _this = this;
-
-      if (this._triggerEl) {
-        if (this._triggerEl.hasAttribute('aria-expanded')) {
-          this._visible = this._triggerEl.getAttribute('aria-expanded') === 'true' ? true : false;
-        } else {
-          // fix until v2 not to break previous single collapses which became dismiss
-          this._visible = this._targetEl.classList.contains('hidden') ? false : true;
-        }
-
-        this._triggerEl.addEventListener('click', function () {
-          _this._visible ? _this.collapse() : _this.expand();
-        });
-      }
-    }
-  }, {
-    key: "collapse",
-    value: function collapse() {
-      this._targetEl.classList.add('hidden');
-
-      if (this._triggerEl) {
-        this._triggerEl.setAttribute('aria-expanded', 'false');
-      }
-
-      this._visible = false; // callback function
-
-      this._options.onCollapse(this);
-    }
-  }, {
-    key: "expand",
-    value: function expand() {
-      this._targetEl.classList.remove('hidden');
-
-      if (this._triggerEl) {
-        this._triggerEl.setAttribute('aria-expanded', 'true');
-      }
-
-      this._visible = true; // callback function
-
-      this._options.onExpand(this);
-    }
-  }, {
-    key: "toggle",
-    value: function toggle() {
-      if (this._visible) {
-        this.collapse();
-      } else {
-        this.expand();
-      }
-    }
-  }]);
-
-  return Collapse;
-}();
-
-window.Collapse = Collapse;
-document.addEventListener('DOMContentLoaded', function () {
-  document.querySelectorAll('[data-collapse-toggle]').forEach(function (triggerEl) {
-    var targetEl = document.getElementById(triggerEl.getAttribute('data-collapse-toggle'));
-    new Collapse(targetEl, {
-      triggerEl: triggerEl
-    });
-  });
-});
-/* harmony default export */ const collapse = (Collapse);
-;// CONCATENATED MODULE: ./src/components/carousel.js
-function carousel_toConsumableArray(arr) { return carousel_arrayWithoutHoles(arr) || carousel_iterableToArray(arr) || carousel_unsupportedIterableToArray(arr) || carousel_nonIterableSpread(); }
-
-function carousel_nonIterableSpread() { 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 carousel_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return carousel_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 carousel_arrayLikeToArray(o, minLen); }
-
-function carousel_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function carousel_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return carousel_arrayLikeToArray(arr); }
-
-function carousel_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 carousel_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 carousel_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? carousel_ownKeys(Object(source), !0).forEach(function (key) { carousel_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : carousel_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function carousel_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 carousel_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function carousel_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 carousel_createClass(Constructor, protoProps, staticProps) { if (protoProps) carousel_defineProperties(Constructor.prototype, protoProps); if (staticProps) carousel_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-var carousel_Default = {
-  defaultPosition: 0,
-  indicators: {
-    items: [],
-    activeClasses: 'bg-white dark:bg-gray-800',
-    inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800'
-  },
-  interval: 3000,
-  onNext: function onNext() {},
-  onPrev: function onPrev() {},
-  onChange: function onChange() {}
-};
-
-var Carousel = /*#__PURE__*/function () {
-  function Carousel() {
-    var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    carousel_classCallCheck(this, Carousel);
-
-    this._items = items;
-    this._options = carousel_objectSpread(carousel_objectSpread(carousel_objectSpread({}, carousel_Default), options), {}, {
-      indicators: carousel_objectSpread(carousel_objectSpread({}, carousel_Default.indicators), options.indicators)
-    });
-    this._activeItem = this.getItem(this._options.defaultPosition);
-    this._indicators = this._options.indicators.items;
-    this._interval = null;
-
-    this._init();
-  }
-  /**
-   * Initialise carousel and items based on active one
-   */
-
-
-  carousel_createClass(Carousel, [{
-    key: "_init",
-    value: function _init() {
-      var _this = this;
-
-      this._items.map(function (item) {
-        item.el.classList.add('absolute', 'inset-0', 'transition-all', 'transform');
-      }); // if no active item is set then first position is default
-
-
-      if (this._getActiveItem()) {
-        this.slideTo(this._getActiveItem().position);
-      } else {
-        this.slideTo(0);
-      }
-
-      this._indicators.map(function (indicator, position) {
-        indicator.el.addEventListener('click', function () {
-          _this.slideTo(position);
-        });
-      });
-    }
-  }, {
-    key: "getItem",
-    value: function getItem(position) {
-      return this._items[position];
-    }
-    /**
-     * Slide to the element based on id
-     * @param {*} position 
-     */
-
-  }, {
-    key: "slideTo",
-    value: function slideTo(position) {
-      var nextItem = this._items[position];
-      var rotationItems = {
-        'left': nextItem.position === 0 ? this._items[this._items.length - 1] : this._items[nextItem.position - 1],
-        'middle': nextItem,
-        'right': nextItem.position === this._items.length - 1 ? this._items[0] : this._items[nextItem.position + 1]
-      };
-
-      this._rotate(rotationItems);
-
-      this._setActiveItem(nextItem.position);
-
-      if (this._interval) {
-        this.pause();
-        this.cycle();
-      }
-
-      this._options.onChange(this);
-    }
-    /**
-     * Based on the currently active item it will go to the next position
-     */
-
-  }, {
-    key: "next",
-    value: function next() {
-      var activeItem = this._getActiveItem();
-
-      var nextItem = null; // check if last item
-
-      if (activeItem.position === this._items.length - 1) {
-        nextItem = this._items[0];
-      } else {
-        nextItem = this._items[activeItem.position + 1];
-      }
-
-      this.slideTo(nextItem.position); // callback function
-
-      this._options.onNext(this);
-    }
-    /**
-     * Based on the currently active item it will go to the previous position
-     */
-
-  }, {
-    key: "prev",
-    value: function prev() {
-      var activeItem = this._getActiveItem();
-
-      var prevItem = null; // check if first item
-
-      if (activeItem.position === 0) {
-        prevItem = this._items[this._items.length - 1];
-      } else {
-        prevItem = this._items[activeItem.position - 1];
-      }
-
-      this.slideTo(prevItem.position); // callback function
-
-      this._options.onPrev(this);
-    }
-    /**
-     * This method applies the transform classes based on the left, middle, and right rotation carousel items
-     * @param {*} rotationItems 
-     */
-
-  }, {
-    key: "_rotate",
-    value: function _rotate(rotationItems) {
-      // reset
-      this._items.map(function (item) {
-        item.el.classList.add('hidden');
-      }); // left item (previously active)
-
-
-      rotationItems.left.el.classList.remove('-translate-x-full', 'translate-x-full', 'translate-x-0', 'hidden', 'z-20');
-      rotationItems.left.el.classList.add('-translate-x-full', 'z-10'); // currently active item
-
-      rotationItems.middle.el.classList.remove('-translate-x-full', 'translate-x-full', 'translate-x-0', 'hidden', 'z-10');
-      rotationItems.middle.el.classList.add('translate-x-0', 'z-20'); // right item (upcoming active)
-
-      rotationItems.right.el.classList.remove('-translate-x-full', 'translate-x-full', 'translate-x-0', 'hidden', 'z-20');
-      rotationItems.right.el.classList.add('translate-x-full', 'z-10');
-    }
-    /**
-     * Set an interval to cycle through the carousel items
-     */
-
-  }, {
-    key: "cycle",
-    value: function cycle() {
-      var _this2 = this;
-
-      this._interval = setInterval(function () {
-        _this2.next();
-      }, this._options.interval);
-    }
-    /**
-     * Clears the cycling interval
-     */
-
-  }, {
-    key: "pause",
-    value: function pause() {
-      clearInterval(this._interval);
-    }
-    /**
-     * Get the currently active item
-     */
-
-  }, {
-    key: "_getActiveItem",
-    value: function _getActiveItem() {
-      return this._activeItem;
-    }
-    /**
-     * Set the currently active item and data attribute
-     * @param {*} position 
-     */
-
-  }, {
-    key: "_setActiveItem",
-    value: function _setActiveItem(position) {
-      var _this3 = this;
-
-      this._activeItem = this._items[position]; // update the indicators if available
-
-      if (this._indicators.length) {
-        var _this$_indicators$pos, _this$_indicators$pos2;
-
-        this._indicators.map(function (indicator) {
-          var _indicator$el$classLi, _indicator$el$classLi2;
-
-          indicator.el.setAttribute('aria-current', 'false');
-
-          (_indicator$el$classLi = indicator.el.classList).remove.apply(_indicator$el$classLi, carousel_toConsumableArray(_this3._options.indicators.activeClasses.split(" ")));
-
-          (_indicator$el$classLi2 = indicator.el.classList).add.apply(_indicator$el$classLi2, carousel_toConsumableArray(_this3._options.indicators.inactiveClasses.split(" ")));
-        });
-
-        (_this$_indicators$pos = this._indicators[position].el.classList).add.apply(_this$_indicators$pos, carousel_toConsumableArray(this._options.indicators.activeClasses.split(" ")));
-
-        (_this$_indicators$pos2 = this._indicators[position].el.classList).remove.apply(_this$_indicators$pos2, carousel_toConsumableArray(this._options.indicators.inactiveClasses.split(" ")));
-
-        this._indicators[position].el.setAttribute('aria-current', 'true');
-      }
-    }
-  }]);
-
-  return Carousel;
-}();
-
-window.Carousel = Carousel;
-document.addEventListener('DOMContentLoaded', function () {
-  document.querySelectorAll('[data-carousel]').forEach(function (carouselEl) {
-    var interval = carouselEl.getAttribute('data-carousel-interval');
-    var slide = carouselEl.getAttribute('data-carousel') === 'slide' ? true : false;
-    var items = [];
-    var defaultPosition = 0;
-
-    if (carouselEl.querySelectorAll('[data-carousel-item]').length) {
-      carousel_toConsumableArray(carouselEl.querySelectorAll('[data-carousel-item]')).map(function (carouselItemEl, position) {
-        items.push({
-          position: position,
-          el: carouselItemEl
-        });
-
-        if (carouselItemEl.getAttribute('data-carousel-item') === 'active') {
-          defaultPosition = position;
-        }
-      });
-    }
-
-    var indicators = [];
-
-    if (carouselEl.querySelectorAll('[data-carousel-slide-to]').length) {
-      carousel_toConsumableArray(carouselEl.querySelectorAll('[data-carousel-slide-to]')).map(function (indicatorEl) {
-        indicators.push({
-          position: indicatorEl.getAttribute('data-carousel-slide-to'),
-          el: indicatorEl
-        });
-      });
-    }
-
-    var carousel = new Carousel(items, {
-      defaultPosition: defaultPosition,
-      indicators: {
-        items: indicators
-      },
-      interval: interval ? interval : carousel_Default.interval
-    });
-
-    if (slide) {
-      carousel.cycle();
-    } // check for controls
-
-
-    var carouselNextEl = carouselEl.querySelector('[data-carousel-next]');
-    var carouselPrevEl = carouselEl.querySelector('[data-carousel-prev]');
-
-    if (carouselNextEl) {
-      carouselNextEl.addEventListener('click', function () {
-        carousel.next();
-      });
-    }
-
-    if (carouselPrevEl) {
-      carouselPrevEl.addEventListener('click', function () {
-        carousel.prev();
-      });
-    }
-  });
-});
-/* harmony default export */ const carousel = (Carousel);
-;// CONCATENATED MODULE: ./src/components/dismiss.js
-function dismiss_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 dismiss_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? dismiss_ownKeys(Object(source), !0).forEach(function (key) { dismiss_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : dismiss_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function dismiss_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 dismiss_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function dismiss_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 dismiss_createClass(Constructor, protoProps, staticProps) { if (protoProps) dismiss_defineProperties(Constructor.prototype, protoProps); if (staticProps) dismiss_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-var dismiss_Default = {
-  triggerEl: null,
-  transition: 'transition-opacity',
-  duration: 300,
-  timing: 'ease-out',
-  onHide: function onHide() {}
-};
-
-var Dismiss = /*#__PURE__*/function () {
-  function Dismiss() {
-    var targetEl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    dismiss_classCallCheck(this, Dismiss);
-
-    this._targetEl = targetEl;
-    this._triggerEl = options ? options.triggerEl : dismiss_Default.triggerEl;
-    this._options = dismiss_objectSpread(dismiss_objectSpread({}, dismiss_Default), options);
-
-    this._init();
-  }
-
-  dismiss_createClass(Dismiss, [{
-    key: "_init",
-    value: function _init() {
-      var _this = this;
-
-      if (this._triggerEl) {
-        this._triggerEl.addEventListener('click', function () {
-          _this.hide();
-        });
-      }
-    }
-  }, {
-    key: "hide",
-    value: function hide() {
-      var _this2 = this;
-
-      this._targetEl.classList.add(this._options.transition, "duration-".concat(this._options.duration), this._options.timing, 'opacity-0');
-
-      setTimeout(function () {
-        _this2._targetEl.classList.add('hidden');
-      }, this._options.duration); // callback function
-
-      this._options.onHide(this, this._targetEl);
-    }
-  }]);
-
-  return Dismiss;
-}();
-
-window.Dismiss = Dismiss;
-document.addEventListener('DOMContentLoaded', function () {
-  document.querySelectorAll('[data-dismiss-target]').forEach(function (triggerEl) {
-    var targetEl = document.querySelector(triggerEl.getAttribute('data-dismiss-target'));
-    new Dismiss(targetEl, {
-      triggerEl: triggerEl
-    });
-  });
-});
-/* harmony default export */ const dismiss = (Dismiss);
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
-function getWindow(node) {
-  if (node == null) {
-    return window;
-  }
-
-  if (node.toString() !== '[object Window]') {
-    var ownerDocument = node.ownerDocument;
-    return ownerDocument ? ownerDocument.defaultView || window : window;
-  }
-
-  return node;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js
-
-
-function isElement(node) {
-  var OwnElement = getWindow(node).Element;
-  return node instanceof OwnElement || node instanceof Element;
-}
-
-function isHTMLElement(node) {
-  var OwnElement = getWindow(node).HTMLElement;
-  return node instanceof OwnElement || node instanceof HTMLElement;
-}
-
-function isShadowRoot(node) {
-  // IE 11 has no ShadowRoot
-  if (typeof ShadowRoot === 'undefined') {
-    return false;
-  }
-
-  var OwnElement = getWindow(node).ShadowRoot;
-  return node instanceof OwnElement || node instanceof ShadowRoot;
-}
-
-
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/math.js
-var math_max = Math.max;
-var math_min = Math.min;
-var round = Math.round;
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
-
-
-function getBoundingClientRect(element, includeScale) {
-  if (includeScale === void 0) {
-    includeScale = false;
-  }
-
-  var rect = element.getBoundingClientRect();
-  var scaleX = 1;
-  var scaleY = 1;
-
-  if (isHTMLElement(element) && includeScale) {
-    var offsetHeight = element.offsetHeight;
-    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-    // Fallback to 1 in case both values are `0`
-
-    if (offsetWidth > 0) {
-      scaleX = round(rect.width) / offsetWidth || 1;
-    }
-
-    if (offsetHeight > 0) {
-      scaleY = round(rect.height) / offsetHeight || 1;
-    }
-  }
-
-  return {
-    width: rect.width / scaleX,
-    height: rect.height / scaleY,
-    top: rect.top / scaleY,
-    right: rect.right / scaleX,
-    bottom: rect.bottom / scaleY,
-    left: rect.left / scaleX,
-    x: rect.left / scaleX,
-    y: rect.top / scaleY
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js
-
-function getWindowScroll(node) {
-  var win = getWindow(node);
-  var scrollLeft = win.pageXOffset;
-  var scrollTop = win.pageYOffset;
-  return {
-    scrollLeft: scrollLeft,
-    scrollTop: scrollTop
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getHTMLElementScroll.js
-function getHTMLElementScroll(element) {
-  return {
-    scrollLeft: element.scrollLeft,
-    scrollTop: element.scrollTop
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeScroll.js
-
-
-
-
-function getNodeScroll(node) {
-  if (node === getWindow(node) || !isHTMLElement(node)) {
-    return getWindowScroll(node);
-  } else {
-    return getHTMLElementScroll(node);
-  }
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeName.js
-function getNodeName(element) {
-  return element ? (element.nodeName || '').toLowerCase() : null;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js
-
-function getDocumentElement(element) {
-  // $FlowFixMe[incompatible-return]: assume body is always available
-  return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
-  element.document) || window.document).documentElement;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js
-
-
-
-function getWindowScrollBarX(element) {
-  // If <html> has a CSS width greater than the viewport, then this will be
-  // incorrect for RTL.
-  // Popper 1 is broken in this case and never had a bug report so let's assume
-  // it's not an issue. I don't think anyone ever specifies width on <html>
-  // anyway.
-  // Browsers where the left scrollbar doesn't cause an issue report `0` for
-  // this (e.g. Edge 2019, IE11, Safari)
-  return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js
-
-function getComputedStyle(element) {
-  return getWindow(element).getComputedStyle(element);
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js
-
-function isScrollParent(element) {
-  // Firefox wants us to check `-x` and `-y` variations as well
-  var _getComputedStyle = getComputedStyle(element),
-      overflow = _getComputedStyle.overflow,
-      overflowX = _getComputedStyle.overflowX,
-      overflowY = _getComputedStyle.overflowY;
-
-  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js
-
-
-
-
-
-
-
-
-
-function isElementScaled(element) {
-  var rect = element.getBoundingClientRect();
-  var scaleX = round(rect.width) / element.offsetWidth || 1;
-  var scaleY = round(rect.height) / element.offsetHeight || 1;
-  return scaleX !== 1 || scaleY !== 1;
-} // Returns the composite rect of an element relative to its offsetParent.
-// Composite means it takes into account transforms as well as layout.
-
-
-function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
-  if (isFixed === void 0) {
-    isFixed = false;
-  }
-
-  var isOffsetParentAnElement = isHTMLElement(offsetParent);
-  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
-  var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
-  var scroll = {
-    scrollLeft: 0,
-    scrollTop: 0
-  };
-  var offsets = {
-    x: 0,
-    y: 0
-  };
-
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
-    if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078
-    isScrollParent(documentElement)) {
-      scroll = getNodeScroll(offsetParent);
-    }
-
-    if (isHTMLElement(offsetParent)) {
-      offsets = getBoundingClientRect(offsetParent, true);
-      offsets.x += offsetParent.clientLeft;
-      offsets.y += offsetParent.clientTop;
-    } else if (documentElement) {
-      offsets.x = getWindowScrollBarX(documentElement);
-    }
-  }
-
-  return {
-    x: rect.left + scroll.scrollLeft - offsets.x,
-    y: rect.top + scroll.scrollTop - offsets.y,
-    width: rect.width,
-    height: rect.height
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js
- // Returns the layout rect of an element relative to its offsetParent. Layout
-// means it doesn't take into account transforms.
-
-function getLayoutRect(element) {
-  var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
-  // Fixes https://github.com/popperjs/popper-core/issues/1223
-
-  var width = element.offsetWidth;
-  var height = element.offsetHeight;
-
-  if (Math.abs(clientRect.width - width) <= 1) {
-    width = clientRect.width;
-  }
-
-  if (Math.abs(clientRect.height - height) <= 1) {
-    height = clientRect.height;
-  }
-
-  return {
-    x: element.offsetLeft,
-    y: element.offsetTop,
-    width: width,
-    height: height
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getParentNode.js
-
-
-
-function getParentNode(element) {
-  if (getNodeName(element) === 'html') {
-    return element;
-  }
-
-  return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
-    // $FlowFixMe[incompatible-return]
-    // $FlowFixMe[prop-missing]
-    element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
-    element.parentNode || ( // DOM Element detected
-    isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
-    // $FlowFixMe[incompatible-call]: HTMLElement is a Node
-    getDocumentElement(element) // fallback
-
-  );
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getScrollParent.js
-
-
-
-
-function getScrollParent(node) {
-  if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
-    // $FlowFixMe[incompatible-return]: assume body is always available
-    return node.ownerDocument.body;
-  }
-
-  if (isHTMLElement(node) && isScrollParent(node)) {
-    return node;
-  }
-
-  return getScrollParent(getParentNode(node));
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js
-
-
-
-
-/*
-given a DOM element, return the list of all scroll parents, up the list of ancesors
-until we get to the top window object. This list is what we attach scroll listeners
-to, because if any of these parent elements scroll, we'll need to re-calculate the
-reference element's position.
-*/
-
-function listScrollParents(element, list) {
-  var _element$ownerDocumen;
-
-  if (list === void 0) {
-    list = [];
-  }
-
-  var scrollParent = getScrollParent(element);
-  var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
-  var win = getWindow(scrollParent);
-  var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
-  var updatedList = list.concat(target);
-  return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
-  updatedList.concat(listScrollParents(getParentNode(target)));
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isTableElement.js
-
-function isTableElement(element) {
-  return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js
-
-
-
-
-
-
-
-function getTrueOffsetParent(element) {
-  if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
-  getComputedStyle(element).position === 'fixed') {
-    return null;
-  }
-
-  return element.offsetParent;
-} // `.offsetParent` reports `null` for fixed elements, while absolute elements
-// return the containing block
-
-
-function getContainingBlock(element) {
-  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
-  var isIE = navigator.userAgent.indexOf('Trident') !== -1;
-
-  if (isIE && isHTMLElement(element)) {
-    // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
-    var elementCss = getComputedStyle(element);
-
-    if (elementCss.position === 'fixed') {
-      return null;
-    }
-  }
-
-  var currentNode = getParentNode(element);
-
-  while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
-    var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
-    // create a containing block.
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-
-    if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') {
-      return currentNode;
-    } else {
-      currentNode = currentNode.parentNode;
-    }
-  }
-
-  return null;
-} // Gets the closest ancestor positioned element. Handles some edge cases,
-// such as table ancestors and cross browser bugs.
-
-
-function getOffsetParent(element) {
-  var window = getWindow(element);
-  var offsetParent = getTrueOffsetParent(element);
-
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
-    offsetParent = getTrueOffsetParent(offsetParent);
-  }
-
-  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
-    return window;
-  }
-
-  return offsetParent || getContainingBlock(element) || window;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/enums.js
-var enums_top = 'top';
-var bottom = 'bottom';
-var right = 'right';
-var left = 'left';
-var auto = 'auto';
-var basePlacements = [enums_top, bottom, right, left];
-var start = 'start';
-var end = 'end';
-var clippingParents = 'clippingParents';
-var viewport = 'viewport';
-var popper = 'popper';
-var reference = 'reference';
-var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
-  return acc.concat([placement + "-" + start, placement + "-" + end]);
-}, []);
-var enums_placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
-  return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
-}, []); // modifiers that need to read the DOM
-
-var beforeRead = 'beforeRead';
-var read = 'read';
-var afterRead = 'afterRead'; // pure-logic modifiers
-
-var beforeMain = 'beforeMain';
-var main = 'main';
-var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
-
-var beforeWrite = 'beforeWrite';
-var write = 'write';
-var afterWrite = 'afterWrite';
-var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/orderModifiers.js
- // source: https://stackoverflow.com/questions/49875255
-
-function order(modifiers) {
-  var map = new Map();
-  var visited = new Set();
-  var result = [];
-  modifiers.forEach(function (modifier) {
-    map.set(modifier.name, modifier);
-  }); // On visiting object, check for its dependencies and visit them recursively
-
-  function sort(modifier) {
-    visited.add(modifier.name);
-    var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []);
-    requires.forEach(function (dep) {
-      if (!visited.has(dep)) {
-        var depModifier = map.get(dep);
-
-        if (depModifier) {
-          sort(depModifier);
-        }
-      }
-    });
-    result.push(modifier);
-  }
-
-  modifiers.forEach(function (modifier) {
-    if (!visited.has(modifier.name)) {
-      // check for visited object
-      sort(modifier);
-    }
-  });
-  return result;
-}
-
-function orderModifiers(modifiers) {
-  // order based on dependencies
-  var orderedModifiers = order(modifiers); // order based on phase
-
-  return modifierPhases.reduce(function (acc, phase) {
-    return acc.concat(orderedModifiers.filter(function (modifier) {
-      return modifier.phase === phase;
-    }));
-  }, []);
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/debounce.js
-function debounce(fn) {
-  var pending;
-  return function () {
-    if (!pending) {
-      pending = new Promise(function (resolve) {
-        Promise.resolve().then(function () {
-          pending = undefined;
-          resolve(fn());
-        });
-      });
-    }
-
-    return pending;
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/mergeByName.js
-function mergeByName(modifiers) {
-  var merged = modifiers.reduce(function (merged, current) {
-    var existing = merged[current.name];
-    merged[current.name] = existing ? Object.assign({}, existing, current, {
-      options: Object.assign({}, existing.options, current.options),
-      data: Object.assign({}, existing.data, current.data)
-    }) : current;
-    return merged;
-  }, {}); // IE11 does not support Object.values
-
-  return Object.keys(merged).map(function (key) {
-    return merged[key];
-  });
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/createPopper.js
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
-var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
-var DEFAULT_OPTIONS = {
-  placement: 'bottom',
-  modifiers: [],
-  strategy: 'absolute'
-};
-
-function areValidElements() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  return !args.some(function (element) {
-    return !(element && typeof element.getBoundingClientRect === 'function');
-  });
-}
-
-function popperGenerator(generatorOptions) {
-  if (generatorOptions === void 0) {
-    generatorOptions = {};
-  }
-
-  var _generatorOptions = generatorOptions,
-      _generatorOptions$def = _generatorOptions.defaultModifiers,
-      defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
-      _generatorOptions$def2 = _generatorOptions.defaultOptions,
-      defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
-  return function createPopper(reference, popper, options) {
-    if (options === void 0) {
-      options = defaultOptions;
-    }
-
-    var state = {
-      placement: 'bottom',
-      orderedModifiers: [],
-      options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
-      modifiersData: {},
-      elements: {
-        reference: reference,
-        popper: popper
-      },
-      attributes: {},
-      styles: {}
-    };
-    var effectCleanupFns = [];
-    var isDestroyed = false;
-    var instance = {
-      state: state,
-      setOptions: function setOptions(setOptionsAction) {
-        var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
-        cleanupModifierEffects();
-        state.options = Object.assign({}, defaultOptions, state.options, options);
-        state.scrollParents = {
-          reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
-          popper: listScrollParents(popper)
-        }; // Orders the modifiers based on their dependencies and `phase`
-        // properties
-
-        var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers
-
-        state.orderedModifiers = orderedModifiers.filter(function (m) {
-          return m.enabled;
-        }); // Validate the provided modifiers so that the consumer will get warned
-        // if one of the modifiers is invalid for any reason
-
-        if (false) { var _getComputedStyle, marginTop, marginRight, marginBottom, marginLeft, flipModifier, modifiers; }
-
-        runModifierEffects();
-        return instance.update();
-      },
-      // Sync update – it will always be executed, even if not necessary. This
-      // is useful for low frequency updates where sync behavior simplifies the
-      // logic.
-      // For high frequency updates (e.g. `resize` and `scroll` events), always
-      // prefer the async Popper#update method
-      forceUpdate: function forceUpdate() {
-        if (isDestroyed) {
-          return;
-        }
-
-        var _state$elements = state.elements,
-            reference = _state$elements.reference,
-            popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
-        // anymore
-
-        if (!areValidElements(reference, popper)) {
-          if (false) {}
-
-          return;
-        } // Store the reference and popper rects to be read by modifiers
-
-
-        state.rects = {
-          reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
-          popper: getLayoutRect(popper)
-        }; // Modifiers have the ability to reset the current update cycle. The
-        // most common use case for this is the `flip` modifier changing the
-        // placement, which then needs to re-run all the modifiers, because the
-        // logic was previously ran for the previous placement and is therefore
-        // stale/incorrect
-
-        state.reset = false;
-        state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
-        // is filled with the initial data specified by the modifier. This means
-        // it doesn't persist and is fresh on each update.
-        // To ensure persistent data, use `${name}#persistent`
-
-        state.orderedModifiers.forEach(function (modifier) {
-          return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
-        });
-        var __debug_loops__ = 0;
-
-        for (var index = 0; index < state.orderedModifiers.length; index++) {
-          if (false) {}
-
-          if (state.reset === true) {
-            state.reset = false;
-            index = -1;
-            continue;
-          }
-
-          var _state$orderedModifie = state.orderedModifiers[index],
-              fn = _state$orderedModifie.fn,
-              _state$orderedModifie2 = _state$orderedModifie.options,
-              _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
-              name = _state$orderedModifie.name;
-
-          if (typeof fn === 'function') {
-            state = fn({
-              state: state,
-              options: _options,
-              name: name,
-              instance: instance
-            }) || state;
-          }
-        }
-      },
-      // Async and optimistically optimized update – it will not be executed if
-      // not necessary (debounced to run at most once-per-tick)
-      update: debounce(function () {
-        return new Promise(function (resolve) {
-          instance.forceUpdate();
-          resolve(state);
-        });
-      }),
-      destroy: function destroy() {
-        cleanupModifierEffects();
-        isDestroyed = true;
-      }
-    };
-
-    if (!areValidElements(reference, popper)) {
-      if (false) {}
-
-      return instance;
-    }
-
-    instance.setOptions(options).then(function (state) {
-      if (!isDestroyed && options.onFirstUpdate) {
-        options.onFirstUpdate(state);
-      }
-    }); // Modifiers have the ability to execute arbitrary code before the first
-    // update cycle runs. They will be executed in the same order as the update
-    // cycle. This is useful when a modifier adds some persistent data that
-    // other modifiers need to use, but the modifier is run after the dependent
-    // one.
-
-    function runModifierEffects() {
-      state.orderedModifiers.forEach(function (_ref3) {
-        var name = _ref3.name,
-            _ref3$options = _ref3.options,
-            options = _ref3$options === void 0 ? {} : _ref3$options,
-            effect = _ref3.effect;
-
-        if (typeof effect === 'function') {
-          var cleanupFn = effect({
-            state: state,
-            name: name,
-            instance: instance,
-            options: options
-          });
-
-          var noopFn = function noopFn() {};
-
-          effectCleanupFns.push(cleanupFn || noopFn);
-        }
-      });
-    }
-
-    function cleanupModifierEffects() {
-      effectCleanupFns.forEach(function (fn) {
-        return fn();
-      });
-      effectCleanupFns = [];
-    }
-
-    return instance;
-  };
-}
-var createPopper = /*#__PURE__*/(/* unused pure expression or super */ null && (0)); // eslint-disable-next-line import/no-unused-modules
-
-
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/eventListeners.js
- // eslint-disable-next-line import/no-unused-modules
-
-var passive = {
-  passive: true
-};
-
-function effect(_ref) {
-  var state = _ref.state,
-      instance = _ref.instance,
-      options = _ref.options;
-  var _options$scroll = options.scroll,
-      scroll = _options$scroll === void 0 ? true : _options$scroll,
-      _options$resize = options.resize,
-      resize = _options$resize === void 0 ? true : _options$resize;
-  var window = getWindow(state.elements.popper);
-  var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper);
-
-  if (scroll) {
-    scrollParents.forEach(function (scrollParent) {
-      scrollParent.addEventListener('scroll', instance.update, passive);
-    });
-  }
-
-  if (resize) {
-    window.addEventListener('resize', instance.update, passive);
-  }
-
-  return function () {
-    if (scroll) {
-      scrollParents.forEach(function (scrollParent) {
-        scrollParent.removeEventListener('scroll', instance.update, passive);
-      });
-    }
-
-    if (resize) {
-      window.removeEventListener('resize', instance.update, passive);
-    }
-  };
-} // eslint-disable-next-line import/no-unused-modules
-
-
-/* harmony default export */ const eventListeners = ({
-  name: 'eventListeners',
-  enabled: true,
-  phase: 'write',
-  fn: function fn() {},
-  effect: effect,
-  data: {}
-});
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getBasePlacement.js
-
-function getBasePlacement(placement) {
-  return placement.split('-')[0];
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getVariation.js
-function getVariation(placement) {
-  return placement.split('-')[1];
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getMainAxisFromPlacement.js
-function getMainAxisFromPlacement(placement) {
-  return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/computeOffsets.js
-
-
-
-
-function computeOffsets(_ref) {
-  var reference = _ref.reference,
-      element = _ref.element,
-      placement = _ref.placement;
-  var basePlacement = placement ? getBasePlacement(placement) : null;
-  var variation = placement ? getVariation(placement) : null;
-  var commonX = reference.x + reference.width / 2 - element.width / 2;
-  var commonY = reference.y + reference.height / 2 - element.height / 2;
-  var offsets;
-
-  switch (basePlacement) {
-    case enums_top:
-      offsets = {
-        x: commonX,
-        y: reference.y - element.height
-      };
-      break;
-
-    case bottom:
-      offsets = {
-        x: commonX,
-        y: reference.y + reference.height
-      };
-      break;
-
-    case right:
-      offsets = {
-        x: reference.x + reference.width,
-        y: commonY
-      };
-      break;
-
-    case left:
-      offsets = {
-        x: reference.x - element.width,
-        y: commonY
-      };
-      break;
-
-    default:
-      offsets = {
-        x: reference.x,
-        y: reference.y
-      };
-  }
-
-  var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;
-
-  if (mainAxis != null) {
-    var len = mainAxis === 'y' ? 'height' : 'width';
-
-    switch (variation) {
-      case start:
-        offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
-        break;
-
-      case end:
-        offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
-        break;
-
-      default:
-    }
-  }
-
-  return offsets;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/popperOffsets.js
-
-
-function popperOffsets(_ref) {
-  var state = _ref.state,
-      name = _ref.name;
-  // Offsets are the actual position the popper needs to have to be
-  // properly positioned near its reference element
-  // This is the most basic placement, and will be adjusted by
-  // the modifiers in the next step
-  state.modifiersData[name] = computeOffsets({
-    reference: state.rects.reference,
-    element: state.rects.popper,
-    strategy: 'absolute',
-    placement: state.placement
-  });
-} // eslint-disable-next-line import/no-unused-modules
-
-
-/* harmony default export */ const modifiers_popperOffsets = ({
-  name: 'popperOffsets',
-  enabled: true,
-  phase: 'read',
-  fn: popperOffsets,
-  data: {}
-});
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/computeStyles.js
-
-
-
-
-
-
-
- // eslint-disable-next-line import/no-unused-modules
-
-var unsetSides = {
-  top: 'auto',
-  right: 'auto',
-  bottom: 'auto',
-  left: 'auto'
-}; // Round the offsets to the nearest suitable subpixel based on the DPR.
-// Zooming can change the DPR, but it seems to report a value that will
-// cleanly divide the values into the appropriate subpixels.
-
-function roundOffsetsByDPR(_ref) {
-  var x = _ref.x,
-      y = _ref.y;
-  var win = window;
-  var dpr = win.devicePixelRatio || 1;
-  return {
-    x: round(x * dpr) / dpr || 0,
-    y: round(y * dpr) / dpr || 0
-  };
-}
-
-function mapToStyles(_ref2) {
-  var _Object$assign2;
-
-  var popper = _ref2.popper,
-      popperRect = _ref2.popperRect,
-      placement = _ref2.placement,
-      variation = _ref2.variation,
-      offsets = _ref2.offsets,
-      position = _ref2.position,
-      gpuAcceleration = _ref2.gpuAcceleration,
-      adaptive = _ref2.adaptive,
-      roundOffsets = _ref2.roundOffsets,
-      isFixed = _ref2.isFixed;
-  var _offsets$x = offsets.x,
-      x = _offsets$x === void 0 ? 0 : _offsets$x,
-      _offsets$y = offsets.y,
-      y = _offsets$y === void 0 ? 0 : _offsets$y;
-
-  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
-    x: x,
-    y: y
-  }) : {
-    x: x,
-    y: y
-  };
-
-  x = _ref3.x;
-  y = _ref3.y;
-  var hasX = offsets.hasOwnProperty('x');
-  var hasY = offsets.hasOwnProperty('y');
-  var sideX = left;
-  var sideY = enums_top;
-  var win = window;
-
-  if (adaptive) {
-    var offsetParent = getOffsetParent(popper);
-    var heightProp = 'clientHeight';
-    var widthProp = 'clientWidth';
-
-    if (offsetParent === getWindow(popper)) {
-      offsetParent = getDocumentElement(popper);
-
-      if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
-        heightProp = 'scrollHeight';
-        widthProp = 'scrollWidth';
-      }
-    } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
-
-
-    offsetParent = offsetParent;
-
-    if (placement === enums_top || (placement === left || placement === right) && variation === end) {
-      sideY = bottom;
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
-      offsetParent[heightProp];
-      y -= offsetY - popperRect.height;
-      y *= gpuAcceleration ? 1 : -1;
-    }
-
-    if (placement === left || (placement === enums_top || placement === bottom) && variation === end) {
-      sideX = right;
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
-      offsetParent[widthProp];
-      x -= offsetX - popperRect.width;
-      x *= gpuAcceleration ? 1 : -1;
-    }
-  }
-
-  var commonStyles = Object.assign({
-    position: position
-  }, adaptive && unsetSides);
-
-  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
-    x: x,
-    y: y
-  }) : {
-    x: x,
-    y: y
-  };
-
-  x = _ref4.x;
-  y = _ref4.y;
-
-  if (gpuAcceleration) {
-    var _Object$assign;
-
-    return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
-  }
-
-  return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
-}
-
-function computeStyles(_ref5) {
-  var state = _ref5.state,
-      options = _ref5.options;
-  var _options$gpuAccelerat = options.gpuAcceleration,
-      gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
-      _options$adaptive = options.adaptive,
-      adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
-      _options$roundOffsets = options.roundOffsets,
-      roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-
-  if (false) { var transitionProperty; }
-
-  var commonStyles = {
-    placement: getBasePlacement(state.placement),
-    variation: getVariation(state.placement),
-    popper: state.elements.popper,
-    popperRect: state.rects.popper,
-    gpuAcceleration: gpuAcceleration,
-    isFixed: state.options.strategy === 'fixed'
-  };
-
-  if (state.modifiersData.popperOffsets != null) {
-    state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
-      offsets: state.modifiersData.popperOffsets,
-      position: state.options.strategy,
-      adaptive: adaptive,
-      roundOffsets: roundOffsets
-    })));
-  }
-
-  if (state.modifiersData.arrow != null) {
-    state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
-      offsets: state.modifiersData.arrow,
-      position: 'absolute',
-      adaptive: false,
-      roundOffsets: roundOffsets
-    })));
-  }
-
-  state.attributes.popper = Object.assign({}, state.attributes.popper, {
-    'data-popper-placement': state.placement
-  });
-} // eslint-disable-next-line import/no-unused-modules
-
-
-/* harmony default export */ const modifiers_computeStyles = ({
-  name: 'computeStyles',
-  enabled: true,
-  phase: 'beforeWrite',
-  fn: computeStyles,
-  data: {}
-});
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/applyStyles.js
-
- // This modifier takes the styles prepared by the `computeStyles` modifier
-// and applies them to the HTMLElements such as popper and arrow
-
-function applyStyles(_ref) {
-  var state = _ref.state;
-  Object.keys(state.elements).forEach(function (name) {
-    var style = state.styles[name] || {};
-    var attributes = state.attributes[name] || {};
-    var element = state.elements[name]; // arrow is optional + virtual elements
-
-    if (!isHTMLElement(element) || !getNodeName(element)) {
-      return;
-    } // Flow doesn't support to extend this property, but it's the most
-    // effective way to apply styles to an HTMLElement
-    // $FlowFixMe[cannot-write]
-
-
-    Object.assign(element.style, style);
-    Object.keys(attributes).forEach(function (name) {
-      var value = attributes[name];
-
-      if (value === false) {
-        element.removeAttribute(name);
-      } else {
-        element.setAttribute(name, value === true ? '' : value);
-      }
-    });
-  });
-}
-
-function applyStyles_effect(_ref2) {
-  var state = _ref2.state;
-  var initialStyles = {
-    popper: {
-      position: state.options.strategy,
-      left: '0',
-      top: '0',
-      margin: '0'
-    },
-    arrow: {
-      position: 'absolute'
-    },
-    reference: {}
-  };
-  Object.assign(state.elements.popper.style, initialStyles.popper);
-  state.styles = initialStyles;
-
-  if (state.elements.arrow) {
-    Object.assign(state.elements.arrow.style, initialStyles.arrow);
-  }
-
-  return function () {
-    Object.keys(state.elements).forEach(function (name) {
-      var element = state.elements[name];
-      var attributes = state.attributes[name] || {};
-      var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
-
-      var style = styleProperties.reduce(function (style, property) {
-        style[property] = '';
-        return style;
-      }, {}); // arrow is optional + virtual elements
-
-      if (!isHTMLElement(element) || !getNodeName(element)) {
-        return;
-      }
-
-      Object.assign(element.style, style);
-      Object.keys(attributes).forEach(function (attribute) {
-        element.removeAttribute(attribute);
-      });
-    });
-  };
-} // eslint-disable-next-line import/no-unused-modules
-
-
-/* harmony default export */ const modifiers_applyStyles = ({
-  name: 'applyStyles',
-  enabled: true,
-  phase: 'write',
-  fn: applyStyles,
-  effect: applyStyles_effect,
-  requires: ['computeStyles']
-});
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/offset.js
-
- // eslint-disable-next-line import/no-unused-modules
-
-function distanceAndSkiddingToXY(placement, rects, offset) {
-  var basePlacement = getBasePlacement(placement);
-  var invertDistance = [left, enums_top].indexOf(basePlacement) >= 0 ? -1 : 1;
-
-  var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
-    placement: placement
-  })) : offset,
-      skidding = _ref[0],
-      distance = _ref[1];
-
-  skidding = skidding || 0;
-  distance = (distance || 0) * invertDistance;
-  return [left, right].indexOf(basePlacement) >= 0 ? {
-    x: distance,
-    y: skidding
-  } : {
-    x: skidding,
-    y: distance
-  };
-}
-
-function offset(_ref2) {
-  var state = _ref2.state,
-      options = _ref2.options,
-      name = _ref2.name;
-  var _options$offset = options.offset,
-      offset = _options$offset === void 0 ? [0, 0] : _options$offset;
-  var data = enums_placements.reduce(function (acc, placement) {
-    acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset);
-    return acc;
-  }, {});
-  var _data$state$placement = data[state.placement],
-      x = _data$state$placement.x,
-      y = _data$state$placement.y;
-
-  if (state.modifiersData.popperOffsets != null) {
-    state.modifiersData.popperOffsets.x += x;
-    state.modifiersData.popperOffsets.y += y;
-  }
-
-  state.modifiersData[name] = data;
-} // eslint-disable-next-line import/no-unused-modules
-
-
-/* harmony default export */ const modifiers_offset = ({
-  name: 'offset',
-  enabled: true,
-  phase: 'main',
-  requires: ['popperOffsets'],
-  fn: offset
-});
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getOppositePlacement.js
-var hash = {
-  left: 'right',
-  right: 'left',
-  bottom: 'top',
-  top: 'bottom'
-};
-function getOppositePlacement(placement) {
-  return placement.replace(/left|right|bottom|top/g, function (matched) {
-    return hash[matched];
-  });
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getOppositeVariationPlacement.js
-var getOppositeVariationPlacement_hash = {
-  start: 'end',
-  end: 'start'
-};
-function getOppositeVariationPlacement(placement) {
-  return placement.replace(/start|end/g, function (matched) {
-    return getOppositeVariationPlacement_hash[matched];
-  });
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getViewportRect.js
-
-
-
-function getViewportRect(element) {
-  var win = getWindow(element);
-  var html = getDocumentElement(element);
-  var visualViewport = win.visualViewport;
-  var width = html.clientWidth;
-  var height = html.clientHeight;
-  var x = 0;
-  var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
-  // can be obscured underneath it.
-  // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
-  // if it isn't open, so if this isn't available, the popper will be detected
-  // to overflow the bottom of the screen too early.
-
-  if (visualViewport) {
-    width = visualViewport.width;
-    height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
-    // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
-    // errors due to floating point numbers, so we need to check precision.
-    // Safari returns a number <= 0, usually < -1 when pinch-zoomed
-    // Feature detection fails in mobile emulation mode in Chrome.
-    // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
-    // 0.001
-    // Fallback here: "Not Safari" userAgent
-
-    if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
-      x = visualViewport.offsetLeft;
-      y = visualViewport.offsetTop;
-    }
-  }
-
-  return {
-    width: width,
-    height: height,
-    x: x + getWindowScrollBarX(element),
-    y: y
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js
-
-
-
-
- // Gets the entire size of the scrollable document area, even extending outside
-// of the `<html>` and `<body>` rect bounds if horizontally scrollable
-
-function getDocumentRect(element) {
-  var _element$ownerDocumen;
-
-  var html = getDocumentElement(element);
-  var winScroll = getWindowScroll(element);
-  var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
-  var width = math_max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
-  var height = math_max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
-  var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
-  var y = -winScroll.scrollTop;
-
-  if (getComputedStyle(body || html).direction === 'rtl') {
-    x += math_max(html.clientWidth, body ? body.clientWidth : 0) - width;
-  }
-
-  return {
-    width: width,
-    height: height,
-    x: x,
-    y: y
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/contains.js
-
-function contains(parent, child) {
-  var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method
-
-  if (parent.contains(child)) {
-    return true;
-  } // then fallback to custom implementation with Shadow DOM support
-  else if (rootNode && isShadowRoot(rootNode)) {
-      var next = child;
-
-      do {
-        if (next && parent.isSameNode(next)) {
-          return true;
-        } // $FlowFixMe[prop-missing]: need a better way to handle this...
-
-
-        next = next.parentNode || next.host;
-      } while (next);
-    } // Give up, the result is false
-
-
-  return false;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/rectToClientRect.js
-function rectToClientRect(rect) {
-  return Object.assign({}, rect, {
-    left: rect.x,
-    top: rect.y,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
-  });
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-function getInnerBoundingClientRect(element) {
-  var rect = getBoundingClientRect(element);
-  rect.top = rect.top + element.clientTop;
-  rect.left = rect.left + element.clientLeft;
-  rect.bottom = rect.top + element.clientHeight;
-  rect.right = rect.left + element.clientWidth;
-  rect.width = element.clientWidth;
-  rect.height = element.clientHeight;
-  rect.x = rect.left;
-  rect.y = rect.top;
-  return rect;
-}
-
-function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
-} // A "clipping parent" is an overflowable container with the characteristic of
-// clipping (or hiding) overflowing elements with a position different from
-// `initial`
-
-
-function getClippingParents(element) {
-  var clippingParents = listScrollParents(getParentNode(element));
-  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;
-  var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
-
-  if (!isElement(clipperElement)) {
-    return [];
-  } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
-
-
-  return clippingParents.filter(function (clippingParent) {
-    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
-  });
-} // Gets the maximum area that the element is visible in due to any number of
-// clipping parents
-
-
-function getClippingRect(element, boundary, rootBoundary) {
-  var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
-  var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
-  var firstClippingParent = clippingParents[0];
-  var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
-    var rect = getClientRectFromMixedType(element, clippingParent);
-    accRect.top = math_max(rect.top, accRect.top);
-    accRect.right = math_min(rect.right, accRect.right);
-    accRect.bottom = math_min(rect.bottom, accRect.bottom);
-    accRect.left = math_max(rect.left, accRect.left);
-    return accRect;
-  }, getClientRectFromMixedType(element, firstClippingParent));
-  clippingRect.width = clippingRect.right - clippingRect.left;
-  clippingRect.height = clippingRect.bottom - clippingRect.top;
-  clippingRect.x = clippingRect.left;
-  clippingRect.y = clippingRect.top;
-  return clippingRect;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getFreshSideObject.js
-function getFreshSideObject() {
-  return {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/mergePaddingObject.js
-
-function mergePaddingObject(paddingObject) {
-  return Object.assign({}, getFreshSideObject(), paddingObject);
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/expandToHashMap.js
-function expandToHashMap(value, keys) {
-  return keys.reduce(function (hashMap, key) {
-    hashMap[key] = value;
-    return hashMap;
-  }, {});
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/detectOverflow.js
-
-
-
-
-
-
-
-
- // eslint-disable-next-line import/no-unused-modules
-
-function detectOverflow(state, options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var _options = options,
-      _options$placement = _options.placement,
-      placement = _options$placement === void 0 ? state.placement : _options$placement,
-      _options$boundary = _options.boundary,
-      boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
-      _options$rootBoundary = _options.rootBoundary,
-      rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary,
-      _options$elementConte = _options.elementContext,
-      elementContext = _options$elementConte === void 0 ? popper : _options$elementConte,
-      _options$altBoundary = _options.altBoundary,
-      altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary,
-      _options$padding = _options.padding,
-      padding = _options$padding === void 0 ? 0 : _options$padding;
-  var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
-  var altContext = elementContext === popper ? reference : popper;
-  var popperRect = state.rects.popper;
-  var element = state.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
-  var referenceClientRect = getBoundingClientRect(state.elements.reference);
-  var popperOffsets = computeOffsets({
-    reference: referenceClientRect,
-    element: popperRect,
-    strategy: 'absolute',
-    placement: placement
-  });
-  var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
-  var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
-  // 0 or negative = within the clipping rect
-
-  var overflowOffsets = {
-    top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
-    bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
-    left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
-    right: elementClientRect.right - clippingClientRect.right + paddingObject.right
-  };
-  var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element
-
-  if (elementContext === popper && offsetData) {
-    var offset = offsetData[placement];
-    Object.keys(overflowOffsets).forEach(function (key) {
-      var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1;
-      var axis = [enums_top, bottom].indexOf(key) >= 0 ? 'y' : 'x';
-      overflowOffsets[key] += offset[axis] * multiply;
-    });
-  }
-
-  return overflowOffsets;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/computeAutoPlacement.js
-
-
-
-
-function computeAutoPlacement(state, options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var _options = options,
-      placement = _options.placement,
-      boundary = _options.boundary,
-      rootBoundary = _options.rootBoundary,
-      padding = _options.padding,
-      flipVariations = _options.flipVariations,
-      _options$allowedAutoP = _options.allowedAutoPlacements,
-      allowedAutoPlacements = _options$allowedAutoP === void 0 ? enums_placements : _options$allowedAutoP;
-  var variation = getVariation(placement);
-  var placements = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {
-    return getVariation(placement) === variation;
-  }) : basePlacements;
-  var allowedPlacements = placements.filter(function (placement) {
-    return allowedAutoPlacements.indexOf(placement) >= 0;
-  });
-
-  if (allowedPlacements.length === 0) {
-    allowedPlacements = placements;
-
-    if (false) {}
-  } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
-
-
-  var overflows = allowedPlacements.reduce(function (acc, placement) {
-    acc[placement] = detectOverflow(state, {
-      placement: placement,
-      boundary: boundary,
-      rootBoundary: rootBoundary,
-      padding: padding
-    })[getBasePlacement(placement)];
-    return acc;
-  }, {});
-  return Object.keys(overflows).sort(function (a, b) {
-    return overflows[a] - overflows[b];
-  });
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/flip.js
-
-
-
-
-
-
- // eslint-disable-next-line import/no-unused-modules
-
-function getExpandedFallbackPlacements(placement) {
-  if (getBasePlacement(placement) === auto) {
-    return [];
-  }
-
-  var oppositePlacement = getOppositePlacement(placement);
-  return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
-}
-
-function flip(_ref) {
-  var state = _ref.state,
-      options = _ref.options,
-      name = _ref.name;
-
-  if (state.modifiersData[name]._skip) {
-    return;
-  }
-
-  var _options$mainAxis = options.mainAxis,
-      checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
-      _options$altAxis = options.altAxis,
-      checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis,
-      specifiedFallbackPlacements = options.fallbackPlacements,
-      padding = options.padding,
-      boundary = options.boundary,
-      rootBoundary = options.rootBoundary,
-      altBoundary = options.altBoundary,
-      _options$flipVariatio = options.flipVariations,
-      flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio,
-      allowedAutoPlacements = options.allowedAutoPlacements;
-  var preferredPlacement = state.options.placement;
-  var basePlacement = getBasePlacement(preferredPlacement);
-  var isBasePlacement = basePlacement === preferredPlacement;
-  var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
-  var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) {
-    return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, {
-      placement: placement,
-      boundary: boundary,
-      rootBoundary: rootBoundary,
-      padding: padding,
-      flipVariations: flipVariations,
-      allowedAutoPlacements: allowedAutoPlacements
-    }) : placement);
-  }, []);
-  var referenceRect = state.rects.reference;
-  var popperRect = state.rects.popper;
-  var checksMap = new Map();
-  var makeFallbackChecks = true;
-  var firstFittingPlacement = placements[0];
-
-  for (var i = 0; i < placements.length; i++) {
-    var placement = placements[i];
-
-    var _basePlacement = getBasePlacement(placement);
-
-    var isStartVariation = getVariation(placement) === start;
-    var isVertical = [enums_top, bottom].indexOf(_basePlacement) >= 0;
-    var len = isVertical ? 'width' : 'height';
-    var overflow = detectOverflow(state, {
-      placement: placement,
-      boundary: boundary,
-      rootBoundary: rootBoundary,
-      altBoundary: altBoundary,
-      padding: padding
-    });
-    var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : enums_top;
-
-    if (referenceRect[len] > popperRect[len]) {
-      mainVariationSide = getOppositePlacement(mainVariationSide);
-    }
-
-    var altVariationSide = getOppositePlacement(mainVariationSide);
-    var checks = [];
-
-    if (checkMainAxis) {
-      checks.push(overflow[_basePlacement] <= 0);
-    }
-
-    if (checkAltAxis) {
-      checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0);
-    }
-
-    if (checks.every(function (check) {
-      return check;
-    })) {
-      firstFittingPlacement = placement;
-      makeFallbackChecks = false;
-      break;
-    }
-
-    checksMap.set(placement, checks);
-  }
-
-  if (makeFallbackChecks) {
-    // `2` may be desired in some cases – research later
-    var numberOfChecks = flipVariations ? 3 : 1;
-
-    var _loop = function _loop(_i) {
-      var fittingPlacement = placements.find(function (placement) {
-        var checks = checksMap.get(placement);
-
-        if (checks) {
-          return checks.slice(0, _i).every(function (check) {
-            return check;
-          });
-        }
-      });
-
-      if (fittingPlacement) {
-        firstFittingPlacement = fittingPlacement;
-        return "break";
-      }
-    };
-
-    for (var _i = numberOfChecks; _i > 0; _i--) {
-      var _ret = _loop(_i);
-
-      if (_ret === "break") break;
-    }
-  }
-
-  if (state.placement !== firstFittingPlacement) {
-    state.modifiersData[name]._skip = true;
-    state.placement = firstFittingPlacement;
-    state.reset = true;
-  }
-} // eslint-disable-next-line import/no-unused-modules
-
-
-/* harmony default export */ const modifiers_flip = ({
-  name: 'flip',
-  enabled: true,
-  phase: 'main',
-  fn: flip,
-  requiresIfExists: ['offset'],
-  data: {
-    _skip: false
-  }
-});
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getAltAxis.js
-function getAltAxis(axis) {
-  return axis === 'x' ? 'y' : 'x';
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/within.js
-
-function within(min, value, max) {
-  return math_max(min, math_min(value, max));
-}
-function withinMaxClamp(min, value, max) {
-  var v = within(min, value, max);
-  return v > max ? max : v;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/preventOverflow.js
-
-
-
-
-
-
-
-
-
-
-
-
-function preventOverflow(_ref) {
-  var state = _ref.state,
-      options = _ref.options,
-      name = _ref.name;
-  var _options$mainAxis = options.mainAxis,
-      checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
-      _options$altAxis = options.altAxis,
-      checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis,
-      boundary = options.boundary,
-      rootBoundary = options.rootBoundary,
-      altBoundary = options.altBoundary,
-      padding = options.padding,
-      _options$tether = options.tether,
-      tether = _options$tether === void 0 ? true : _options$tether,
-      _options$tetherOffset = options.tetherOffset,
-      tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
-  var overflow = detectOverflow(state, {
-    boundary: boundary,
-    rootBoundary: rootBoundary,
-    padding: padding,
-    altBoundary: altBoundary
-  });
-  var basePlacement = getBasePlacement(state.placement);
-  var variation = getVariation(state.placement);
-  var isBasePlacement = !variation;
-  var mainAxis = getMainAxisFromPlacement(basePlacement);
-  var altAxis = getAltAxis(mainAxis);
-  var popperOffsets = state.modifiersData.popperOffsets;
-  var referenceRect = state.rects.reference;
-  var popperRect = state.rects.popper;
-  var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
-    placement: state.placement
-  })) : tetherOffset;
-  var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
-    mainAxis: tetherOffsetValue,
-    altAxis: tetherOffsetValue
-  } : Object.assign({
-    mainAxis: 0,
-    altAxis: 0
-  }, tetherOffsetValue);
-  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
-  var data = {
-    x: 0,
-    y: 0
-  };
-
-  if (!popperOffsets) {
-    return;
-  }
-
-  if (checkMainAxis) {
-    var _offsetModifierState$;
-
-    var mainSide = mainAxis === 'y' ? enums_top : left;
-    var altSide = mainAxis === 'y' ? bottom : right;
-    var len = mainAxis === 'y' ? 'height' : 'width';
-    var offset = popperOffsets[mainAxis];
-    var min = offset + overflow[mainSide];
-    var max = offset - overflow[altSide];
-    var additive = tether ? -popperRect[len] / 2 : 0;
-    var minLen = variation === start ? referenceRect[len] : popperRect[len];
-    var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
-    // outside the reference bounds
-
-    var arrowElement = state.elements.arrow;
-    var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : {
-      width: 0,
-      height: 0
-    };
-    var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject();
-    var arrowPaddingMin = arrowPaddingObject[mainSide];
-    var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want
-    // to include its full size in the calculation. If the reference is small
-    // and near the edge of a boundary, the popper can overflow even if the
-    // reference is not overflowing as well (e.g. virtual elements with no
-    // width or height)
-
-    var arrowLen = within(0, referenceRect[len], arrowRect[len]);
-    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
-    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
-    var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
-    var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
-    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
-    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
-    var tetherMax = offset + maxOffset - offsetModifierValue;
-    var preventedOffset = within(tether ? math_min(min, tetherMin) : min, offset, tether ? math_max(max, tetherMax) : max);
-    popperOffsets[mainAxis] = preventedOffset;
-    data[mainAxis] = preventedOffset - offset;
-  }
-
-  if (checkAltAxis) {
-    var _offsetModifierState$2;
-
-    var _mainSide = mainAxis === 'x' ? enums_top : left;
-
-    var _altSide = mainAxis === 'x' ? bottom : right;
-
-    var _offset = popperOffsets[altAxis];
-
-    var _len = altAxis === 'y' ? 'height' : 'width';
-
-    var _min = _offset + overflow[_mainSide];
-
-    var _max = _offset - overflow[_altSide];
-
-    var isOriginSide = [enums_top, left].indexOf(basePlacement) !== -1;
-
-    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
-
-    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
-
-    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
-
-    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
-
-    popperOffsets[altAxis] = _preventedOffset;
-    data[altAxis] = _preventedOffset - _offset;
-  }
-
-  state.modifiersData[name] = data;
-} // eslint-disable-next-line import/no-unused-modules
-
-
-/* harmony default export */ const modifiers_preventOverflow = ({
-  name: 'preventOverflow',
-  enabled: true,
-  phase: 'main',
-  fn: preventOverflow,
-  requiresIfExists: ['offset']
-});
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/arrow.js
-
-
-
-
-
-
-
-
-
- // eslint-disable-next-line import/no-unused-modules
-
-var toPaddingObject = function toPaddingObject(padding, state) {
-  padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, {
-    placement: state.placement
-  })) : padding;
-  return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
-};
-
-function arrow(_ref) {
-  var _state$modifiersData$;
-
-  var state = _ref.state,
-      name = _ref.name,
-      options = _ref.options;
-  var arrowElement = state.elements.arrow;
-  var popperOffsets = state.modifiersData.popperOffsets;
-  var basePlacement = getBasePlacement(state.placement);
-  var axis = getMainAxisFromPlacement(basePlacement);
-  var isVertical = [left, right].indexOf(basePlacement) >= 0;
-  var len = isVertical ? 'height' : 'width';
-
-  if (!arrowElement || !popperOffsets) {
-    return;
-  }
-
-  var paddingObject = toPaddingObject(options.padding, state);
-  var arrowRect = getLayoutRect(arrowElement);
-  var minProp = axis === 'y' ? enums_top : left;
-  var maxProp = axis === 'y' ? bottom : right;
-  var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len];
-  var startDiff = popperOffsets[axis] - state.rects.reference[axis];
-  var arrowOffsetParent = getOffsetParent(arrowElement);
-  var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
-  var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is
-  // outside of the popper bounds
-
-  var min = paddingObject[minProp];
-  var max = clientSize - arrowRect[len] - paddingObject[maxProp];
-  var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
-  var offset = within(min, center, max); // Prevents breaking syntax highlighting...
-
-  var axisProp = axis;
-  state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
-}
-
-function arrow_effect(_ref2) {
-  var state = _ref2.state,
-      options = _ref2.options;
-  var _options$element = options.element,
-      arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element;
-
-  if (arrowElement == null) {
-    return;
-  } // CSS selector
-
-
-  if (typeof arrowElement === 'string') {
-    arrowElement = state.elements.popper.querySelector(arrowElement);
-
-    if (!arrowElement) {
-      return;
-    }
-  }
-
-  if (false) {}
-
-  if (!contains(state.elements.popper, arrowElement)) {
-    if (false) {}
-
-    return;
-  }
-
-  state.elements.arrow = arrowElement;
-} // eslint-disable-next-line import/no-unused-modules
-
-
-/* harmony default export */ const modifiers_arrow = ({
-  name: 'arrow',
-  enabled: true,
-  phase: 'main',
-  fn: arrow,
-  effect: arrow_effect,
-  requires: ['popperOffsets'],
-  requiresIfExists: ['preventOverflow']
-});
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/hide.js
-
-
-
-function getSideOffsets(overflow, rect, preventedOffsets) {
-  if (preventedOffsets === void 0) {
-    preventedOffsets = {
-      x: 0,
-      y: 0
-    };
-  }
-
-  return {
-    top: overflow.top - rect.height - preventedOffsets.y,
-    right: overflow.right - rect.width + preventedOffsets.x,
-    bottom: overflow.bottom - rect.height + preventedOffsets.y,
-    left: overflow.left - rect.width - preventedOffsets.x
-  };
-}
-
-function isAnySideFullyClipped(overflow) {
-  return [enums_top, right, bottom, left].some(function (side) {
-    return overflow[side] >= 0;
-  });
-}
-
-function hide(_ref) {
-  var state = _ref.state,
-      name = _ref.name;
-  var referenceRect = state.rects.reference;
-  var popperRect = state.rects.popper;
-  var preventedOffsets = state.modifiersData.preventOverflow;
-  var referenceOverflow = detectOverflow(state, {
-    elementContext: 'reference'
-  });
-  var popperAltOverflow = detectOverflow(state, {
-    altBoundary: true
-  });
-  var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect);
-  var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
-  var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
-  var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
-  state.modifiersData[name] = {
-    referenceClippingOffsets: referenceClippingOffsets,
-    popperEscapeOffsets: popperEscapeOffsets,
-    isReferenceHidden: isReferenceHidden,
-    hasPopperEscaped: hasPopperEscaped
-  };
-  state.attributes.popper = Object.assign({}, state.attributes.popper, {
-    'data-popper-reference-hidden': isReferenceHidden,
-    'data-popper-escaped': hasPopperEscaped
-  });
-} // eslint-disable-next-line import/no-unused-modules
-
-
-/* harmony default export */ const modifiers_hide = ({
-  name: 'hide',
-  enabled: true,
-  phase: 'main',
-  requiresIfExists: ['preventOverflow'],
-  fn: hide
-});
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/popper.js
-
-
-
-
-
-
-
-
-
-
-var defaultModifiers = [eventListeners, modifiers_popperOffsets, modifiers_computeStyles, modifiers_applyStyles, modifiers_offset, modifiers_flip, modifiers_preventOverflow, modifiers_arrow, modifiers_hide];
-var popper_createPopper = /*#__PURE__*/popperGenerator({
-  defaultModifiers: defaultModifiers
-}); // eslint-disable-next-line import/no-unused-modules
-
- // eslint-disable-next-line import/no-unused-modules
-
- // eslint-disable-next-line import/no-unused-modules
-
-
-;// CONCATENATED MODULE: ./src/components/dropdown.js
-function dropdown_toConsumableArray(arr) { return dropdown_arrayWithoutHoles(arr) || dropdown_iterableToArray(arr) || dropdown_unsupportedIterableToArray(arr) || dropdown_nonIterableSpread(); }
-
-function dropdown_nonIterableSpread() { 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 dropdown_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return dropdown_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 dropdown_arrayLikeToArray(o, minLen); }
-
-function dropdown_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function dropdown_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return dropdown_arrayLikeToArray(arr); }
-
-function dropdown_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 dropdown_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 dropdown_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? dropdown_ownKeys(Object(source), !0).forEach(function (key) { dropdown_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : dropdown_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function dropdown_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 dropdown_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function dropdown_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 dropdown_createClass(Constructor, protoProps, staticProps) { if (protoProps) dropdown_defineProperties(Constructor.prototype, protoProps); if (staticProps) dropdown_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-
-var dropdown_Default = {
-  placement: 'bottom',
-  triggerType: 'click',
-  onShow: function onShow() {},
-  onHide: function onHide() {}
-};
-
-var Dropdown = /*#__PURE__*/function () {
-  function Dropdown() {
-    var targetElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var triggerElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-    dropdown_classCallCheck(this, Dropdown);
-
-    this._targetEl = targetElement;
-    this._triggerEl = triggerElement;
-    this._options = dropdown_objectSpread(dropdown_objectSpread({}, dropdown_Default), options);
-    this._popperInstance = this._createPopperInstace();
-    this._visible = false;
-
-    this._init();
-  }
-
-  dropdown_createClass(Dropdown, [{
-    key: "_init",
-    value: function _init() {
-      var _this = this;
-
-      if (this._triggerEl) {
-        this._triggerEl.addEventListener('click', function () {
-          _this.toggle();
-        });
-      }
-    }
-  }, {
-    key: "_createPopperInstace",
-    value: function _createPopperInstace() {
-      return popper_createPopper(this._triggerEl, this._targetEl, {
-        placement: this._options.placement,
-        modifiers: [{
-          name: 'offset',
-          options: {
-            offset: [0, 10]
-          }
-        }]
-      });
-    }
-  }, {
-    key: "_handleClickOutside",
-    value: function _handleClickOutside(ev, targetEl) {
-      var clickedEl = ev.target;
-
-      if (clickedEl !== targetEl && !targetEl.contains(clickedEl) && !this._triggerEl.contains(clickedEl) && this._visible) {
-        this.hide();
-      }
-
-      document.body.removeEventListener('click', this._handleClickOutside, true);
-    }
-  }, {
-    key: "toggle",
-    value: function toggle() {
-      if (this._visible) {
-        this.hide();
-        document.body.removeEventListener('click', this._handleClickOutside, true);
-      } else {
-        this.show();
-      }
-    }
-  }, {
-    key: "show",
-    value: function show() {
-      var _this2 = this;
-
-      this._targetEl.classList.remove('hidden');
-
-      this._targetEl.classList.add('block'); // Enable the event listeners
-
-
-      this._popperInstance.setOptions(function (options) {
-        return dropdown_objectSpread(dropdown_objectSpread({}, options), {}, {
-          modifiers: [].concat(dropdown_toConsumableArray(options.modifiers), [{
-            name: 'eventListeners',
-            enabled: true
-          }])
-        });
-      });
-
-      document.body.addEventListener('click', function (ev) {
-        _this2._handleClickOutside(ev, _this2._targetEl);
-      }, true); // Update its position
-
-      this._popperInstance.update();
-
-      this._visible = true; // callback function
-
-      this._options.onShow(this);
-    }
-  }, {
-    key: "hide",
-    value: function hide() {
-      this._targetEl.classList.remove('block');
-
-      this._targetEl.classList.add('hidden'); // Disable the event listeners
-
-
-      this._popperInstance.setOptions(function (options) {
-        return dropdown_objectSpread(dropdown_objectSpread({}, options), {}, {
-          modifiers: [].concat(dropdown_toConsumableArray(options.modifiers), [{
-            name: 'eventListeners',
-            enabled: false
-          }])
-        });
-      });
-
-      this._visible = false; // callback function
-
-      this._options.onHide(this);
-    }
-  }]);
-
-  return Dropdown;
-}();
-
-window.Dropdown = Dropdown;
-document.addEventListener('DOMContentLoaded', function () {
-  document.querySelectorAll('[data-dropdown-toggle]').forEach(function (triggerEl) {
-    var targetEl = document.getElementById(triggerEl.getAttribute('data-dropdown-toggle'));
-    var placement = triggerEl.getAttribute('data-dropdown-placement');
-    new Dropdown(targetEl, triggerEl, {
-      placement: placement ? placement : dropdown_Default.placement
-    });
-  });
-});
-/* harmony default export */ const dropdown = (Dropdown);
-;// CONCATENATED MODULE: ./src/components/modal.js
-function modal_toConsumableArray(arr) { return modal_arrayWithoutHoles(arr) || modal_iterableToArray(arr) || modal_unsupportedIterableToArray(arr) || modal_nonIterableSpread(); }
-
-function modal_nonIterableSpread() { 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 modal_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return modal_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 modal_arrayLikeToArray(o, minLen); }
-
-function modal_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function modal_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return modal_arrayLikeToArray(arr); }
-
-function modal_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 modal_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 modal_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? modal_ownKeys(Object(source), !0).forEach(function (key) { modal_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : modal_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function modal_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 modal_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function modal_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 modal_createClass(Constructor, protoProps, staticProps) { if (protoProps) modal_defineProperties(Constructor.prototype, protoProps); if (staticProps) modal_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-var modal_Default = {
-  placement: 'center',
-  backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
-  onHide: function onHide() {},
-  onShow: function onShow() {},
-  onToggle: function onToggle() {}
-};
-
-var Modal = /*#__PURE__*/function () {
-  function Modal() {
-    var targetEl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    modal_classCallCheck(this, Modal);
-
-    this._targetEl = targetEl;
-    this._options = modal_objectSpread(modal_objectSpread({}, modal_Default), options);
-    this._isHidden = true;
-
-    this._init();
-  }
-
-  modal_createClass(Modal, [{
-    key: "_init",
-    value: function _init() {
-      var _this = this;
-
-      this._getPlacementClasses().map(function (c) {
-        _this._targetEl.classList.add(c);
-      });
-    }
-  }, {
-    key: "_createBackdrop",
-    value: function _createBackdrop() {
-      if (this._isHidden) {
-        var _backdropEl$classList;
-
-        var backdropEl = document.createElement('div');
-        backdropEl.setAttribute('modal-backdrop', '');
-
-        (_backdropEl$classList = backdropEl.classList).add.apply(_backdropEl$classList, modal_toConsumableArray(this._options.backdropClasses.split(" ")));
-
-        document.querySelector('body').append(backdropEl);
-      }
-    }
-  }, {
-    key: "_destroyBackdropEl",
-    value: function _destroyBackdropEl() {
-      if (!this._isHidden) {
-        document.querySelector('[modal-backdrop]').remove();
-      }
-    }
-  }, {
-    key: "_getPlacementClasses",
-    value: function _getPlacementClasses() {
-      switch (this._options.placement) {
-        // top
-        case 'top-left':
-          return ['justify-start', 'items-start'];
-
-        case 'top-center':
-          return ['justify-center', 'items-start'];
-
-        case 'top-right':
-          return ['justify-end', 'items-start'];
-        // center
-
-        case 'center-left':
-          return ['justify-start', 'items-center'];
-
-        case 'center':
-          return ['justify-center', 'items-center'];
-
-        case 'center-right':
-          return ['justify-end', 'items-center'];
-        // bottom
-
-        case 'bottom-left':
-          return ['justify-start', 'items-end'];
-
-        case 'bottom-center':
-          return ['justify-center', 'items-end'];
-
-        case 'bottom-right':
-          return ['justify-end', 'items-end'];
-
-        default:
-          return ['justify-center', 'items-center'];
-      }
-    }
-  }, {
-    key: "toggle",
-    value: function toggle() {
-      if (this._isHidden) {
-        this.show();
-      } else {
-        this.hide();
-      } // callback function
-
-
-      this._options.onToggle(this);
-    }
-  }, {
-    key: "show",
-    value: function show() {
-      this._targetEl.classList.add('flex');
-
-      this._targetEl.classList.remove('hidden');
-
-      this._targetEl.setAttribute('aria-modal', 'true');
-
-      this._targetEl.setAttribute('role', 'dialog');
-
-      this._targetEl.removeAttribute('aria-hidden');
-
-      this._createBackdrop();
-
-      this._isHidden = false; // callback function
-
-      this._options.onShow(this);
-    }
-  }, {
-    key: "hide",
-    value: function hide() {
-      this._targetEl.classList.add('hidden');
-
-      this._targetEl.classList.remove('flex');
-
-      this._targetEl.setAttribute('aria-hidden', 'true');
-
-      this._targetEl.removeAttribute('aria-modal');
-
-      this._targetEl.removeAttribute('role');
-
-      this._destroyBackdropEl();
-
-      this._isHidden = true; // callback function
-
-      this._options.onHide(this);
-    }
-  }]);
-
-  return Modal;
-}();
-
-window.Modal = Modal;
-
-var getModalInstance = function getModalInstance(id, instances) {
-  if (instances.some(function (modalInstance) {
-    return modalInstance.id === id;
-  })) {
-    return instances.find(function (modalInstance) {
-      return modalInstance.id === id;
-    });
-  }
-
-  return false;
-};
-
-document.addEventListener('DOMContentLoaded', function () {
-  var modalInstances = [];
-  document.querySelectorAll('[data-modal-toggle]').forEach(function (el) {
-    var modalId = el.getAttribute('data-modal-toggle');
-    var modalEl = document.getElementById(modalId);
-    var placement = modalEl.getAttribute('data-modal-placement');
-
-    if (modalEl) {
-      if (!modalEl.hasAttribute('aria-hidden') && !modalEl.hasAttribute('aria-modal')) {
-        modalEl.setAttribute('aria-hidden', 'true');
-      }
-    }
-
-    var modal = null;
-
-    if (getModalInstance(modalId, modalInstances)) {
-      modal = getModalInstance(modalId, modalInstances);
-      modal = modal.object;
-    } else {
-      modal = new Modal(modalEl, {
-        placement: placement ? placement : modal_Default.placement
-      });
-      modalInstances.push({
-        id: modalId,
-        object: modal
-      });
-    }
-
-    if (modalEl.hasAttribute('data-modal-show') && modalEl.getAttribute('data-modal-show') === 'true') {
-      modal.show();
-    }
-
-    el.addEventListener('click', function () {
-      modal.toggle();
-    });
-  });
-});
-/* harmony default export */ const modal = (Modal);
-;// CONCATENATED MODULE: ./src/components/tabs.js
-function tabs_toConsumableArray(arr) { return tabs_arrayWithoutHoles(arr) || tabs_iterableToArray(arr) || tabs_unsupportedIterableToArray(arr) || tabs_nonIterableSpread(); }
-
-function tabs_nonIterableSpread() { 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 tabs_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return tabs_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 tabs_arrayLikeToArray(o, minLen); }
-
-function tabs_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function tabs_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return tabs_arrayLikeToArray(arr); }
-
-function tabs_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 tabs_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 tabs_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? tabs_ownKeys(Object(source), !0).forEach(function (key) { tabs_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : tabs_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function tabs_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 tabs_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function tabs_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 tabs_createClass(Constructor, protoProps, staticProps) { if (protoProps) tabs_defineProperties(Constructor.prototype, protoProps); if (staticProps) tabs_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-var tabs_Default = {
-  defaultTabId: null,
-  activeClasses: 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500',
-  inactiveClasses: 'dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300',
-  onShow: function onShow() {}
-};
-
-var Tabs = /*#__PURE__*/function () {
-  function Tabs() {
-    var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    tabs_classCallCheck(this, Tabs);
-
-    this._items = items;
-    this._activeTab = options ? this.getTab(options.defaultTabId) : null;
-    this._options = tabs_objectSpread(tabs_objectSpread({}, tabs_Default), options);
-
-    this._init();
-  }
-
-  tabs_createClass(Tabs, [{
-    key: "_init",
-    value: function _init() {
-      var _this = this;
-
-      if (this._items.length) {
-        // set the first tab as active if not set by explicitly
-        if (!this._activeTab) {
-          this._setActiveTab(this._items[0]);
-        } // force show the first default tab
-
-
-        this.show(this._activeTab.id, true); // show tab content based on click
-
-        this._items.map(function (tab) {
-          tab.triggerEl.addEventListener('click', function () {
-            _this.show(tab.id);
-          });
-        });
-      }
-    }
-  }, {
-    key: "getActiveTab",
-    value: function getActiveTab() {
-      return this._activeTab;
-    }
-  }, {
-    key: "_setActiveTab",
-    value: function _setActiveTab(tab) {
-      this._activeTab = tab;
-    }
-  }, {
-    key: "getTab",
-    value: function getTab(id) {
-      return this._items.filter(function (t) {
-        return t.id === id;
-      })[0];
-    }
-  }, {
-    key: "show",
-    value: function show(id) {
-      var _this2 = this,
-          _tab$triggerEl$classL,
-          _tab$triggerEl$classL2;
-
-      var forceShow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      var tab = this.getTab(id); // don't do anything if already active
-
-      if (tab === this._activeTab && !forceShow) {
-        return;
-      } // hide other tabs
-
-
-      this._items.map(function (t) {
-        if (t !== tab) {
-          var _t$triggerEl$classLis, _t$triggerEl$classLis2;
-
-          (_t$triggerEl$classLis = t.triggerEl.classList).remove.apply(_t$triggerEl$classLis, tabs_toConsumableArray(_this2._options.activeClasses.split(" ")));
-
-          (_t$triggerEl$classLis2 = t.triggerEl.classList).add.apply(_t$triggerEl$classLis2, tabs_toConsumableArray(_this2._options.inactiveClasses.split(" ")));
-
-          t.targetEl.classList.add('hidden');
-          t.triggerEl.setAttribute('aria-selected', false);
-        }
-      }); // show active tab
-
-
-      (_tab$triggerEl$classL = tab.triggerEl.classList).add.apply(_tab$triggerEl$classL, tabs_toConsumableArray(this._options.activeClasses.split(" ")));
-
-      (_tab$triggerEl$classL2 = tab.triggerEl.classList).remove.apply(_tab$triggerEl$classL2, tabs_toConsumableArray(this._options.inactiveClasses.split(" ")));
-
-      tab.triggerEl.setAttribute('aria-selected', true);
-      tab.targetEl.classList.remove('hidden');
-
-      this._setActiveTab(tab); // callback function
-
-
-      this._options.onShow(this, tab);
-    }
-  }]);
-
-  return Tabs;
-}();
-
-window.Tabs = Tabs;
-document.addEventListener('DOMContentLoaded', function () {
-  document.querySelectorAll('[data-tabs-toggle]').forEach(function (triggerEl) {
-    var tabElements = [];
-    var defaultTabId = null;
-    triggerEl.querySelectorAll('[role="tab"]').forEach(function (el) {
-      var isActive = el.getAttribute('aria-selected') === 'true';
-      var tab = {
-        id: el.getAttribute('data-tabs-target'),
-        triggerEl: el,
-        targetEl: document.querySelector(el.getAttribute('data-tabs-target'))
-      };
-      tabElements.push(tab);
-
-      if (isActive) {
-        defaultTabId = tab.id;
-      }
-    });
-    new Tabs(tabElements, {
-      defaultTabId: defaultTabId
-    });
-  });
-});
-/* harmony default export */ const tabs = (Tabs);
-;// CONCATENATED MODULE: ./src/components/tooltip.js
-function tooltip_toConsumableArray(arr) { return tooltip_arrayWithoutHoles(arr) || tooltip_iterableToArray(arr) || tooltip_unsupportedIterableToArray(arr) || tooltip_nonIterableSpread(); }
-
-function tooltip_nonIterableSpread() { 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 tooltip_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return tooltip_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 tooltip_arrayLikeToArray(o, minLen); }
-
-function tooltip_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function tooltip_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return tooltip_arrayLikeToArray(arr); }
-
-function tooltip_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 tooltip_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 tooltip_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? tooltip_ownKeys(Object(source), !0).forEach(function (key) { tooltip_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : tooltip_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function tooltip_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 tooltip_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function tooltip_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 tooltip_createClass(Constructor, protoProps, staticProps) { if (protoProps) tooltip_defineProperties(Constructor.prototype, protoProps); if (staticProps) tooltip_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-
-var tooltip_Default = {
-  placement: 'top',
-  triggerType: 'hover',
-  onShow: function onShow() {},
-  onHide: function onHide() {}
-};
-
-var Tooltip = /*#__PURE__*/function () {
-  function Tooltip() {
-    var targetEl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var triggerEl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-    tooltip_classCallCheck(this, Tooltip);
-
-    this._targetEl = targetEl;
-    this._triggerEl = triggerEl;
-    this._options = tooltip_objectSpread(tooltip_objectSpread({}, tooltip_Default), options);
-    this._popperInstance = this._createPopperInstace();
-
-    this._init();
-  }
-
-  tooltip_createClass(Tooltip, [{
-    key: "_init",
-    value: function _init() {
-      var _this = this;
-
-      if (this._triggerEl) {
-        var triggerEvents = this._getTriggerEvents();
-
-        triggerEvents.showEvents.forEach(function (ev) {
-          _this._triggerEl.addEventListener(ev, function () {
-            _this.show();
-          });
-        });
-        triggerEvents.hideEvents.forEach(function (ev) {
-          _this._triggerEl.addEventListener(ev, function () {
-            _this.hide();
-          });
-        });
-      }
-    }
-  }, {
-    key: "_createPopperInstace",
-    value: function _createPopperInstace() {
-      return popper_createPopper(this._triggerEl, this._targetEl, {
-        placement: this._options.placement,
-        modifiers: [{
-          name: 'offset',
-          options: {
-            offset: [0, 8]
-          }
-        }]
-      });
-    }
-  }, {
-    key: "_getTriggerEvents",
-    value: function _getTriggerEvents() {
-      switch (this._options.triggerType) {
-        case 'hover':
-          return {
-            showEvents: ['mouseenter', 'focus'],
-            hideEvents: ['mouseleave', 'blur']
-          };
-
-        case 'click':
-          return {
-            showEvents: ['click', 'focus'],
-            hideEvents: ['focusout', 'blur']
-          };
-
-        default:
-          return {
-            showEvents: ['mouseenter', 'focus'],
-            hideEvents: ['mouseleave', 'blur']
-          };
-      }
-    }
-  }, {
-    key: "show",
-    value: function show() {
-      this._targetEl.classList.remove('opacity-0', 'invisible');
-
-      this._targetEl.classList.add('opacity-100', 'visible'); // Enable the event listeners
-
-
-      this._popperInstance.setOptions(function (options) {
-        return tooltip_objectSpread(tooltip_objectSpread({}, options), {}, {
-          modifiers: [].concat(tooltip_toConsumableArray(options.modifiers), [{
-            name: 'eventListeners',
-            enabled: true
-          }])
-        });
-      }); // Update its position
-
-
-      this._popperInstance.update(); // callback function
-
-
-      this._options.onShow(this);
-    }
-  }, {
-    key: "hide",
-    value: function hide() {
-      this._targetEl.classList.remove('opacity-100', 'visible');
-
-      this._targetEl.classList.add('opacity-0', 'invisible'); // Disable the event listeners
-
-
-      this._popperInstance.setOptions(function (options) {
-        return tooltip_objectSpread(tooltip_objectSpread({}, options), {}, {
-          modifiers: [].concat(tooltip_toConsumableArray(options.modifiers), [{
-            name: 'eventListeners',
-            enabled: false
-          }])
-        });
-      }); // callback function
-
-
-      this._options.onHide(this);
-    }
-  }]);
-
-  return Tooltip;
-}();
-
-window.Tooltip = Tooltip;
-document.addEventListener('DOMContentLoaded', function () {
-  document.querySelectorAll('[data-tooltip-target]').forEach(function (triggerEl) {
-    var targetEl = document.getElementById(triggerEl.getAttribute('data-tooltip-target'));
-    var triggerType = triggerEl.getAttribute('data-tooltip-trigger');
-    var placement = triggerEl.getAttribute('data-tooltip-placement');
-    new Tooltip(targetEl, triggerEl, {
-      placement: placement ? placement : tooltip_Default.placement,
-      triggerType: triggerType ? triggerType : tooltip_Default.triggerType
-    });
-  });
-});
-/* harmony default export */ const tooltip = (Tooltip);
-;// CONCATENATED MODULE: ./src/flowbite.js
- // core components
-
-
-
-
-
-
-
-
-
-/* harmony default export */ const flowbite = ({
-  Accordion: accordion,
-  Collapse: collapse,
-  Carousel: carousel,
-  Dismiss: dismiss,
-  Dropdown: dropdown,
-  Modal: modal,
-  Tabs: tabs,
-  Tooltip: tooltip
-});
-/******/ })()
-;
-//# sourceMappingURL=flowbite.js.map
-
-/***/ }),
-
 /***/ "./node_modules/hotkeys-js/dist/hotkeys.esm.js":
 /*!*****************************************************!*\
   !*** ./node_modules/hotkeys-js/dist/hotkeys.esm.js ***!
diff --git a/package-lock.json b/package-lock.json
index 5e34a519..ef7933b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
       "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.0"
       },
@@ -62,6 +63,7 @@
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.7.tgz",
       "integrity": "sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -71,6 +73,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.9.tgz",
       "integrity": "sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
@@ -101,6 +104,7 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -117,13 +121,15 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@babel/core/node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -133,6 +139,7 @@
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.9.tgz",
       "integrity": "sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.17.0",
         "jsesc": "^2.5.1",
@@ -147,6 +154,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
       "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -159,6 +167,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz",
       "integrity": "sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-explode-assignable-expression": "^7.16.7",
         "@babel/types": "^7.16.7"
@@ -172,6 +181,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz",
       "integrity": "sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/compat-data": "^7.17.7",
         "@babel/helper-validator-option": "^7.16.7",
@@ -190,6 +200,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -199,6 +210,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz",
       "integrity": "sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-environment-visitor": "^7.16.7",
@@ -220,6 +232,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz",
       "integrity": "sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "regexpu-core": "^5.0.1"
@@ -236,6 +249,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz",
       "integrity": "sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.13.0",
         "@babel/helper-module-imports": "^7.12.13",
@@ -255,6 +269,7 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -271,13 +286,15 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -287,6 +304,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
       "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -299,6 +317,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz",
       "integrity": "sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -311,6 +330,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
       "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/template": "^7.16.7",
         "@babel/types": "^7.17.0"
@@ -324,6 +344,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
       "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -336,6 +357,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz",
       "integrity": "sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.17.0"
       },
@@ -348,6 +370,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
       "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -360,6 +383,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz",
       "integrity": "sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-module-imports": "^7.16.7",
@@ -379,6 +403,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
       "integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -391,6 +416,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
       "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -400,6 +426,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz",
       "integrity": "sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-wrap-function": "^7.16.8",
@@ -414,6 +441,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz",
       "integrity": "sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-member-expression-to-functions": "^7.16.7",
@@ -430,6 +458,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz",
       "integrity": "sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.17.0"
       },
@@ -442,6 +471,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz",
       "integrity": "sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.16.0"
       },
@@ -454,6 +484,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
       "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -474,6 +505,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
       "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -483,6 +515,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz",
       "integrity": "sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-function-name": "^7.16.7",
         "@babel/template": "^7.16.7",
@@ -498,6 +531,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.9.tgz",
       "integrity": "sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/template": "^7.16.7",
         "@babel/traverse": "^7.17.9",
@@ -593,6 +627,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz",
       "integrity": "sha512-anv/DObl7waiGEnC24O9zqL0pSuI9hljihqiDuFHC8d7/bjr/4RLGPWuc8rYOff/QPzbEPSkzG8wGG9aDuhHRg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -608,6 +643,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz",
       "integrity": "sha512-di8vUHRdf+4aJ7ltXhaDbPoszdkh59AQtJM5soLsuHpQJdFQZOA4uGj0V2u/CZ8bJ/u8ULDL5yq6FO/bCXnKHw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
@@ -625,6 +661,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz",
       "integrity": "sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-remap-async-to-generator": "^7.16.8",
@@ -642,6 +679,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz",
       "integrity": "sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -658,6 +696,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz",
       "integrity": "sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.17.6",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -675,6 +714,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz",
       "integrity": "sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3"
@@ -691,6 +731,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.7.tgz",
       "integrity": "sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
@@ -707,6 +748,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz",
       "integrity": "sha512-lNZ3EEggsGY78JavgbHsK9u5P3pQaW7k4axlgFLYkMd7UBsiNahCITShLjNQschPyjtO6dADrL24757IdhBrsQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-json-strings": "^7.8.3"
@@ -723,6 +765,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz",
       "integrity": "sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
@@ -739,6 +782,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz",
       "integrity": "sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
@@ -755,6 +799,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz",
       "integrity": "sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-numeric-separator": "^7.10.4"
@@ -771,6 +816,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz",
       "integrity": "sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/compat-data": "^7.17.0",
         "@babel/helper-compilation-targets": "^7.16.7",
@@ -790,6 +836,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz",
       "integrity": "sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
@@ -806,6 +853,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.7.tgz",
       "integrity": "sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
@@ -823,6 +871,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz",
       "integrity": "sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.16.10",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -839,6 +888,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz",
       "integrity": "sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-create-class-features-plugin": "^7.16.7",
@@ -857,6 +907,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz",
       "integrity": "sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -873,6 +924,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
       "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
       },
@@ -885,6 +937,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
       "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.12.13"
       },
@@ -897,6 +950,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
       "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
       },
@@ -912,6 +966,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
       "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
       },
@@ -924,6 +979,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
       "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.3"
       },
@@ -936,6 +992,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
       "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
       },
@@ -948,6 +1005,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
       "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
       },
@@ -960,6 +1018,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
       "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
       },
@@ -972,6 +1031,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
       "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
       },
@@ -984,6 +1044,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
       "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
       },
@@ -996,6 +1057,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
       "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
       },
@@ -1008,6 +1070,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
       "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
       },
@@ -1020,6 +1083,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
       "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
       },
@@ -1035,6 +1099,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
       "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
       },
@@ -1050,6 +1115,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.7.tgz",
       "integrity": "sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1065,6 +1131,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz",
       "integrity": "sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -1082,6 +1149,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz",
       "integrity": "sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1097,6 +1165,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz",
       "integrity": "sha512-ObZev2nxVAYA4bhyusELdo9hb3H+A56bxH3FZMbEImZFiEDYVHXQSJ1hQKFlDnlt8G9bBrCZ5ZpURZUrV4G5qQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1112,6 +1181,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz",
       "integrity": "sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-environment-visitor": "^7.16.7",
@@ -1134,6 +1204,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz",
       "integrity": "sha512-gN72G9bcmenVILj//sv1zLNaPyYcOzUho2lIJBMh/iakJ9ygCo/hEF9cpGb61SCMEDxbbyBoVQxrt+bWKu5KGw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1149,6 +1220,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz",
       "integrity": "sha512-XVh0r5yq9sLR4vZ6eVZe8FKfIcSgaTBxVBRSYokRj2qksf6QerYnTxz9/GTuKTH/n/HwLP7t6gtlybHetJ/6hQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1164,6 +1236,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz",
       "integrity": "sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -1180,6 +1253,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz",
       "integrity": "sha512-03DvpbRfvWIXyK0/6QiR1KMTWeT6OcQ7tbhjrXyFS02kjuX/mu5Bvnh5SDSWHxyawit2g5aWhKwI86EE7GUnTw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1195,6 +1269,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz",
       "integrity": "sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-builder-binary-assignment-operator-visitor": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -1211,6 +1286,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.7.tgz",
       "integrity": "sha512-/QZm9W92Ptpw7sjI9Nx1mbcsWz33+l8kuMIQnDwgQBG5s3fAfQvkRjQ7NqXhtNcKOnPkdICmUHyCaWW06HCsqg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1226,6 +1302,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz",
       "integrity": "sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.16.7",
         "@babel/helper-function-name": "^7.16.7",
@@ -1243,6 +1320,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz",
       "integrity": "sha512-6tH8RTpTWI0s2sV6uq3e/C9wPo4PTqqZps4uF0kzQ9/xPLFQtipynvmT1g/dOfEJ+0EQsHhkQ/zyRId8J2b8zQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1258,6 +1336,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz",
       "integrity": "sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1273,6 +1352,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz",
       "integrity": "sha512-KaaEtgBL7FKYwjJ/teH63oAmE3lP34N3kshz8mm4VMAw7U3PxjVwwUmxEFksbgsNUaO3wId9R2AVQYSEGRa2+g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-module-transforms": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -1290,6 +1370,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz",
       "integrity": "sha512-2TBFd/r2I6VlYn0YRTz2JdazS+FoUuQ2rIFHoAxtyP/0G3D82SBLaRq9rnUkpqlLg03Byfl/+M32mpxjO6KaPw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-module-transforms": "^7.17.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -1308,6 +1389,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.17.8.tgz",
       "integrity": "sha512-39reIkMTUVagzgA5x88zDYXPCMT6lcaRKs1+S9K6NKBPErbgO/w/kP8GlNQTC87b412ZTlmNgr3k2JrWgHH+Bw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-hoist-variables": "^7.16.7",
         "@babel/helper-module-transforms": "^7.17.7",
@@ -1327,6 +1409,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz",
       "integrity": "sha512-EMh7uolsC8O4xhudF2F6wedbSHm1HHZ0C6aJ7K67zcDNidMzVcxWdGr+htW9n21klm+bOn+Rx4CBsAntZd3rEQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-module-transforms": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -1343,6 +1426,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz",
       "integrity": "sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.7"
       },
@@ -1358,6 +1442,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz",
       "integrity": "sha512-xiLDzWNMfKoGOpc6t3U+etCE2yRnn3SM09BXqWPIZOBpL2gvVrBWUKnsJx0K/ADi5F5YC5f8APFfWrz25TdlGg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1373,6 +1458,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz",
       "integrity": "sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-replace-supers": "^7.16.7"
@@ -1389,6 +1475,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz",
       "integrity": "sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1404,6 +1491,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz",
       "integrity": "sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1419,6 +1507,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.17.9.tgz",
       "integrity": "sha512-Lc2TfbxR1HOyn/c6b4Y/b6NHoTb67n/IoWLxTu4kC7h4KQnWlhCq2S8Tx0t2SVvv5Uu87Hs+6JEJ5kt2tYGylQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "regenerator-transform": "^0.15.0"
       },
@@ -1434,6 +1523,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz",
       "integrity": "sha512-KQzzDnZ9hWQBjwi5lpY5v9shmm6IVG0U9pB18zvMu2i4H90xpT4gmqwPYsn8rObiadYe2M0gmgsiOIF5A/2rtg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1449,6 +1539,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.0.tgz",
       "integrity": "sha512-fr7zPWnKXNc1xoHfrIU9mN/4XKX4VLZ45Q+oMhfsYIaHvg7mHgmhfOy/ckRWqDK7XF3QDigRpkh5DKq6+clE8A==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -1469,6 +1560,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -1478,6 +1570,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz",
       "integrity": "sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1493,6 +1586,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz",
       "integrity": "sha512-+pjJpgAngb53L0iaA5gU/1MLXJIfXcYepLgXB3esVRf4fqmj8f2cxM3/FKaHsZms08hFQJkFccEWuIpm429TXg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0"
@@ -1509,6 +1603,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz",
       "integrity": "sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1524,6 +1619,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz",
       "integrity": "sha512-VwbkDDUeenlIjmfNeDX/V0aWrQH2QiVyJtwymVQSzItFDTpxfyJh3EVaQiS0rIN/CqbLGr0VcGmuwyTdZtdIsA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1539,6 +1635,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz",
       "integrity": "sha512-p2rOixCKRJzpg9JB4gjnG4gjWkWa89ZoYUnl9snJ1cWIcTH/hvxZqfO+WjG6T8DRBpctEol5jw1O5rA8gkCokQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1554,6 +1651,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz",
       "integrity": "sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1569,6 +1667,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz",
       "integrity": "sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -1585,6 +1684,7 @@
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.16.11.tgz",
       "integrity": "sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/compat-data": "^7.16.8",
         "@babel/helper-compilation-targets": "^7.16.7",
@@ -1673,6 +1773,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -1682,6 +1783,7 @@
       "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
       "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.0.0",
         "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
@@ -1709,6 +1811,7 @@
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
       "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/parser": "^7.16.7",
@@ -1723,6 +1826,7 @@
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.9.tgz",
       "integrity": "sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.17.9",
@@ -1744,6 +1848,7 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -1760,7 +1865,8 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@babel/types": {
       "version": "7.17.0",
@@ -1780,6 +1886,7 @@
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       }
@@ -1797,6 +1904,7 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
       "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1805,13 +1913,15 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
       "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
       "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -1987,6 +2097,7 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
       "integrity": "sha512-GE44+DNEyxxh2Kc6ro/VkIj+9ma0pO0bwv9+uHSyBrikYOHr8zYcdPvnBOp1aw8s+CjRvuSx7CyWqRrNFQ59mA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -1997,6 +2108,7 @@
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz",
       "integrity": "sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -2006,7 +2118,8 @@
       "version": "0.0.51",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@types/express": {
       "version": "4.17.13",
@@ -2204,6 +2317,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
       "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
@@ -2213,25 +2327,29 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
       "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
       "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
       "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
       "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -2242,13 +2360,15 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
       "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
       "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -2261,6 +2381,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
       "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -2270,6 +2391,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
       "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -2278,13 +2400,15 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
       "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
       "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -2301,6 +2425,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
       "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
@@ -2314,6 +2439,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
       "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -2326,6 +2452,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
       "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -2340,6 +2467,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
       "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@xtuc/long": "4.2.2"
@@ -2350,6 +2478,7 @@
       "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz",
       "integrity": "sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==",
       "dev": true,
+      "peer": true,
       "peerDependencies": {
         "webpack": "4.x.x || 5.x.x",
         "webpack-cli": "4.x.x"
@@ -2360,6 +2489,7 @@
       "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.1.tgz",
       "integrity": "sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "envinfo": "^7.7.3"
       },
@@ -2372,6 +2502,7 @@
       "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz",
       "integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==",
       "dev": true,
+      "peer": true,
       "peerDependencies": {
         "webpack-cli": "4.x.x"
       },
@@ -2385,13 +2516,15 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/accepts": {
       "version": "1.3.8",
@@ -2477,6 +2610,8 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -2492,7 +2627,9 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
@@ -2702,6 +2839,7 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
       "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "object.assign": "^4.1.0"
       }
@@ -2711,6 +2849,7 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
       "integrity": "sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/compat-data": "^7.13.11",
         "@babel/helper-define-polyfill-provider": "^0.3.1",
@@ -2725,6 +2864,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -2734,6 +2874,7 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz",
       "integrity": "sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.3.1",
         "core-js-compat": "^3.21.0"
@@ -2747,6 +2888,7 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
       "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.3.1"
       },
@@ -3186,6 +3328,7 @@
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -3326,6 +3469,7 @@
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -3728,6 +3872,7 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
       "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.1.1"
       }
@@ -3751,6 +3896,7 @@
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.21.1.tgz",
       "integrity": "sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "browserslist": "^4.19.1",
         "semver": "7.0.0"
@@ -3765,6 +3911,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
       "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
       "dev": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -4163,6 +4310,7 @@
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
       "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "object-keys": "^1.0.12"
       },
@@ -4562,6 +4710,7 @@
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz",
       "integrity": "sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -4584,6 +4733,7 @@
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
       "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "envinfo": "dist/cli.js"
       },
@@ -4603,7 +4753,8 @@
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/escalade": {
       "version": "3.1.1",
@@ -4631,6 +4782,7 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -4644,6 +4796,7 @@
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -4656,6 +4809,7 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -4665,6 +4819,7 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -4674,6 +4829,7 @@
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4927,7 +5083,8 @@
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
       "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/fastq": {
       "version": "1.13.0",
@@ -5163,6 +5320,7 @@
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -5180,6 +5338,7 @@
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
       "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -5236,13 +5395,15 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -5339,6 +5500,7 @@
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -5805,6 +5967,7 @@
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
       "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "pkg-dir": "^4.2.0",
         "resolve-cwd": "^3.0.0"
@@ -5844,6 +6007,7 @@
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
       "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">= 0.10"
       }
@@ -6056,6 +6220,7 @@
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true,
+      "peer": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -6067,7 +6232,8 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -6333,6 +6499,7 @@
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=6.11.5"
       }
@@ -6468,7 +6635,8 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/lodash.isfinite": {
       "version": "3.3.2",
@@ -6816,7 +6984,8 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/no-case": {
       "version": "3.0.4",
@@ -6984,6 +7153,7 @@
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -6993,6 +7163,7 @@
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
       "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "define-properties": "^1.1.3",
@@ -8203,6 +8374,7 @@
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
       "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "resolve": "^1.9.0"
       },
@@ -8222,13 +8394,15 @@
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
       "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/regenerate-unicode-properties": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz",
       "integrity": "sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "regenerate": "^1.4.2"
       },
@@ -8246,6 +8420,7 @@
       "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.0.tgz",
       "integrity": "sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.8.4"
       }
@@ -8255,6 +8430,7 @@
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.0.1.tgz",
       "integrity": "sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "regenerate": "^1.4.2",
         "regenerate-unicode-properties": "^10.0.1",
@@ -8271,13 +8447,15 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.6.0.tgz",
       "integrity": "sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/regjsparser": {
       "version": "0.8.4",
       "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.8.4.tgz",
       "integrity": "sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "jsesc": "~0.5.0"
       },
@@ -8290,6 +8468,7 @@
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
       "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
       "dev": true,
+      "peer": true,
       "bin": {
         "jsesc": "bin/jsesc"
       }
@@ -8360,6 +8539,7 @@
       "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
       "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "resolve-from": "^5.0.0"
       },
@@ -8372,6 +8552,7 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -8873,6 +9054,7 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9288,6 +9470,7 @@
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -9573,6 +9756,7 @@
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
       "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -9582,6 +9766,7 @@
       "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
       "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "unicode-canonical-property-names-ecmascript": "^2.0.0",
         "unicode-property-aliases-ecmascript": "^2.0.0"
@@ -9595,6 +9780,7 @@
       "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz",
       "integrity": "sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -9604,6 +9790,7 @@
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz",
       "integrity": "sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -9751,6 +9938,7 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
       "integrity": "sha512-x0t0JuydIo8qCNctdDrn1OzH/qDzk2+rdCOC3YzumZ42fiMqmQ7T3xQurykYMhYfHaPHTp4ZxAx2NfUo1K6QaA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -9773,6 +9961,7 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.72.0.tgz",
       "integrity": "sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -9820,6 +10009,7 @@
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.2.tgz",
       "integrity": "sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^1.1.1",
@@ -9863,6 +10053,7 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
       "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">= 10"
       }
@@ -10123,6 +10314,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
       "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -10135,6 +10327,7 @@
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
       "dev": true,
+      "peer": true,
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -10144,6 +10337,7 @@
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
       "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -10162,6 +10356,7 @@
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -10357,6 +10552,7 @@
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
       "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@jridgewell/trace-mapping": "^0.3.0"
       }
@@ -10373,13 +10569,15 @@
       "version": "7.17.7",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.7.tgz",
       "integrity": "sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@babel/core": {
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.9.tgz",
       "integrity": "sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
@@ -10403,6 +10601,7 @@
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
           "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
           "dev": true,
+          "peer": true,
           "requires": {
             "ms": "2.1.2"
           }
@@ -10411,13 +10610,15 @@
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
+          "dev": true,
+          "peer": true
         },
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -10426,6 +10627,7 @@
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.9.tgz",
       "integrity": "sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/types": "^7.17.0",
         "jsesc": "^2.5.1",
@@ -10437,6 +10639,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
       "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -10446,6 +10649,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz",
       "integrity": "sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-explode-assignable-expression": "^7.16.7",
         "@babel/types": "^7.16.7"
@@ -10456,6 +10660,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz",
       "integrity": "sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/compat-data": "^7.17.7",
         "@babel/helper-validator-option": "^7.16.7",
@@ -10467,7 +10672,8 @@
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -10476,6 +10682,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz",
       "integrity": "sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-environment-visitor": "^7.16.7",
@@ -10491,6 +10698,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz",
       "integrity": "sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "regexpu-core": "^5.0.1"
@@ -10501,6 +10709,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz",
       "integrity": "sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-compilation-targets": "^7.13.0",
         "@babel/helper-module-imports": "^7.12.13",
@@ -10517,6 +10726,7 @@
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
           "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
           "dev": true,
+          "peer": true,
           "requires": {
             "ms": "2.1.2"
           }
@@ -10525,13 +10735,15 @@
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
+          "dev": true,
+          "peer": true
         },
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -10540,6 +10752,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
       "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -10549,6 +10762,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz",
       "integrity": "sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -10558,6 +10772,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
       "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/template": "^7.16.7",
         "@babel/types": "^7.17.0"
@@ -10568,6 +10783,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
       "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -10577,6 +10793,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz",
       "integrity": "sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/types": "^7.17.0"
       }
@@ -10586,6 +10803,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
       "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -10595,6 +10813,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz",
       "integrity": "sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-module-imports": "^7.16.7",
@@ -10611,6 +10830,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
       "integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -10619,13 +10839,15 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
       "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@babel/helper-remap-async-to-generator": {
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz",
       "integrity": "sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-wrap-function": "^7.16.8",
@@ -10637,6 +10859,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz",
       "integrity": "sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-member-expression-to-functions": "^7.16.7",
@@ -10650,6 +10873,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz",
       "integrity": "sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/types": "^7.17.0"
       }
@@ -10659,6 +10883,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz",
       "integrity": "sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/types": "^7.16.0"
       }
@@ -10668,6 +10893,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
       "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -10681,13 +10907,15 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
       "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@babel/helper-wrap-function": {
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz",
       "integrity": "sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-function-name": "^7.16.7",
         "@babel/template": "^7.16.7",
@@ -10700,6 +10928,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.9.tgz",
       "integrity": "sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/template": "^7.16.7",
         "@babel/traverse": "^7.17.9",
@@ -10773,6 +11002,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz",
       "integrity": "sha512-anv/DObl7waiGEnC24O9zqL0pSuI9hljihqiDuFHC8d7/bjr/4RLGPWuc8rYOff/QPzbEPSkzG8wGG9aDuhHRg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -10782,6 +11012,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz",
       "integrity": "sha512-di8vUHRdf+4aJ7ltXhaDbPoszdkh59AQtJM5soLsuHpQJdFQZOA4uGj0V2u/CZ8bJ/u8ULDL5yq6FO/bCXnKHw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
@@ -10793,6 +11024,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz",
       "integrity": "sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-remap-async-to-generator": "^7.16.8",
@@ -10804,6 +11036,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz",
       "integrity": "sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-create-class-features-plugin": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -10814,6 +11047,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz",
       "integrity": "sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-create-class-features-plugin": "^7.17.6",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -10825,6 +11059,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz",
       "integrity": "sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3"
@@ -10835,6 +11070,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.7.tgz",
       "integrity": "sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
@@ -10845,6 +11081,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz",
       "integrity": "sha512-lNZ3EEggsGY78JavgbHsK9u5P3pQaW7k4axlgFLYkMd7UBsiNahCITShLjNQschPyjtO6dADrL24757IdhBrsQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-json-strings": "^7.8.3"
@@ -10855,6 +11092,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz",
       "integrity": "sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
@@ -10865,6 +11103,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz",
       "integrity": "sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
@@ -10875,6 +11114,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz",
       "integrity": "sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-numeric-separator": "^7.10.4"
@@ -10885,6 +11125,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz",
       "integrity": "sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/compat-data": "^7.17.0",
         "@babel/helper-compilation-targets": "^7.16.7",
@@ -10898,6 +11139,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz",
       "integrity": "sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
@@ -10908,6 +11150,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.7.tgz",
       "integrity": "sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
@@ -10919,6 +11162,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz",
       "integrity": "sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-create-class-features-plugin": "^7.16.10",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -10929,6 +11173,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz",
       "integrity": "sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-create-class-features-plugin": "^7.16.7",
@@ -10941,6 +11186,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz",
       "integrity": "sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -10951,6 +11197,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
       "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -10960,6 +11207,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
       "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.12.13"
       }
@@ -10969,6 +11217,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
       "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
@@ -10978,6 +11227,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
       "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -10987,6 +11237,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
       "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.3"
       }
@@ -10996,6 +11247,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
       "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -11005,6 +11257,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
       "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
@@ -11014,6 +11267,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
       "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -11023,6 +11277,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
       "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
@@ -11032,6 +11287,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
       "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -11041,6 +11297,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
       "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -11050,6 +11307,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
       "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -11059,6 +11317,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
       "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
@@ -11068,6 +11327,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
       "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
@@ -11077,6 +11337,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.7.tgz",
       "integrity": "sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11086,6 +11347,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz",
       "integrity": "sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -11097,6 +11359,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz",
       "integrity": "sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11106,6 +11369,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz",
       "integrity": "sha512-ObZev2nxVAYA4bhyusELdo9hb3H+A56bxH3FZMbEImZFiEDYVHXQSJ1hQKFlDnlt8G9bBrCZ5ZpURZUrV4G5qQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11115,6 +11379,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz",
       "integrity": "sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-environment-visitor": "^7.16.7",
@@ -11131,6 +11396,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz",
       "integrity": "sha512-gN72G9bcmenVILj//sv1zLNaPyYcOzUho2lIJBMh/iakJ9ygCo/hEF9cpGb61SCMEDxbbyBoVQxrt+bWKu5KGw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11140,6 +11406,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz",
       "integrity": "sha512-XVh0r5yq9sLR4vZ6eVZe8FKfIcSgaTBxVBRSYokRj2qksf6QerYnTxz9/GTuKTH/n/HwLP7t6gtlybHetJ/6hQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11149,6 +11416,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz",
       "integrity": "sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -11159,6 +11427,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz",
       "integrity": "sha512-03DvpbRfvWIXyK0/6QiR1KMTWeT6OcQ7tbhjrXyFS02kjuX/mu5Bvnh5SDSWHxyawit2g5aWhKwI86EE7GUnTw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11168,6 +11437,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz",
       "integrity": "sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-builder-binary-assignment-operator-visitor": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -11178,6 +11448,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.7.tgz",
       "integrity": "sha512-/QZm9W92Ptpw7sjI9Nx1mbcsWz33+l8kuMIQnDwgQBG5s3fAfQvkRjQ7NqXhtNcKOnPkdICmUHyCaWW06HCsqg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11187,6 +11458,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz",
       "integrity": "sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-compilation-targets": "^7.16.7",
         "@babel/helper-function-name": "^7.16.7",
@@ -11198,6 +11470,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz",
       "integrity": "sha512-6tH8RTpTWI0s2sV6uq3e/C9wPo4PTqqZps4uF0kzQ9/xPLFQtipynvmT1g/dOfEJ+0EQsHhkQ/zyRId8J2b8zQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11207,6 +11480,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz",
       "integrity": "sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11216,6 +11490,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz",
       "integrity": "sha512-KaaEtgBL7FKYwjJ/teH63oAmE3lP34N3kshz8mm4VMAw7U3PxjVwwUmxEFksbgsNUaO3wId9R2AVQYSEGRa2+g==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-module-transforms": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -11227,6 +11502,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz",
       "integrity": "sha512-2TBFd/r2I6VlYn0YRTz2JdazS+FoUuQ2rIFHoAxtyP/0G3D82SBLaRq9rnUkpqlLg03Byfl/+M32mpxjO6KaPw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-module-transforms": "^7.17.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -11239,6 +11515,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.17.8.tgz",
       "integrity": "sha512-39reIkMTUVagzgA5x88zDYXPCMT6lcaRKs1+S9K6NKBPErbgO/w/kP8GlNQTC87b412ZTlmNgr3k2JrWgHH+Bw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-hoist-variables": "^7.16.7",
         "@babel/helper-module-transforms": "^7.17.7",
@@ -11252,6 +11529,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz",
       "integrity": "sha512-EMh7uolsC8O4xhudF2F6wedbSHm1HHZ0C6aJ7K67zcDNidMzVcxWdGr+htW9n21klm+bOn+Rx4CBsAntZd3rEQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-module-transforms": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -11262,6 +11540,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz",
       "integrity": "sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.7"
       }
@@ -11271,6 +11550,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz",
       "integrity": "sha512-xiLDzWNMfKoGOpc6t3U+etCE2yRnn3SM09BXqWPIZOBpL2gvVrBWUKnsJx0K/ADi5F5YC5f8APFfWrz25TdlGg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11280,6 +11560,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz",
       "integrity": "sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-replace-supers": "^7.16.7"
@@ -11290,6 +11571,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz",
       "integrity": "sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11299,6 +11581,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz",
       "integrity": "sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11308,6 +11591,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.17.9.tgz",
       "integrity": "sha512-Lc2TfbxR1HOyn/c6b4Y/b6NHoTb67n/IoWLxTu4kC7h4KQnWlhCq2S8Tx0t2SVvv5Uu87Hs+6JEJ5kt2tYGylQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "regenerator-transform": "^0.15.0"
       }
@@ -11317,6 +11601,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz",
       "integrity": "sha512-KQzzDnZ9hWQBjwi5lpY5v9shmm6IVG0U9pB18zvMu2i4H90xpT4gmqwPYsn8rObiadYe2M0gmgsiOIF5A/2rtg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11326,6 +11611,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.0.tgz",
       "integrity": "sha512-fr7zPWnKXNc1xoHfrIU9mN/4XKX4VLZ45Q+oMhfsYIaHvg7mHgmhfOy/ckRWqDK7XF3QDigRpkh5DKq6+clE8A==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
@@ -11339,7 +11625,8 @@
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -11348,6 +11635,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz",
       "integrity": "sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11357,6 +11645,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz",
       "integrity": "sha512-+pjJpgAngb53L0iaA5gU/1MLXJIfXcYepLgXB3esVRf4fqmj8f2cxM3/FKaHsZms08hFQJkFccEWuIpm429TXg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0"
@@ -11367,6 +11656,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz",
       "integrity": "sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11376,6 +11666,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz",
       "integrity": "sha512-VwbkDDUeenlIjmfNeDX/V0aWrQH2QiVyJtwymVQSzItFDTpxfyJh3EVaQiS0rIN/CqbLGr0VcGmuwyTdZtdIsA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11385,6 +11676,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz",
       "integrity": "sha512-p2rOixCKRJzpg9JB4gjnG4gjWkWa89ZoYUnl9snJ1cWIcTH/hvxZqfO+WjG6T8DRBpctEol5jw1O5rA8gkCokQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11394,6 +11686,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz",
       "integrity": "sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -11403,6 +11696,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz",
       "integrity": "sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -11413,6 +11707,7 @@
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.16.11.tgz",
       "integrity": "sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/compat-data": "^7.16.8",
         "@babel/helper-compilation-targets": "^7.16.7",
@@ -11494,7 +11789,8 @@
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -11503,6 +11799,7 @@
       "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
       "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0",
         "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
@@ -11524,6 +11821,7 @@
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
       "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/parser": "^7.16.7",
@@ -11535,6 +11833,7 @@
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.9.tgz",
       "integrity": "sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.17.9",
@@ -11553,6 +11852,7 @@
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
           "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
           "dev": true,
+          "peer": true,
           "requires": {
             "ms": "2.1.2"
           }
@@ -11561,7 +11861,8 @@
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -11579,7 +11880,8 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@fortawesome/fontawesome-free": {
       "version": "6.1.1",
@@ -11590,19 +11892,22 @@
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
       "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
       "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
       "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -11758,6 +12063,7 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
       "integrity": "sha512-GE44+DNEyxxh2Kc6ro/VkIj+9ma0pO0bwv9+uHSyBrikYOHr8zYcdPvnBOp1aw8s+CjRvuSx7CyWqRrNFQ59mA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -11768,6 +12074,7 @@
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz",
       "integrity": "sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -11777,7 +12084,8 @@
       "version": "0.0.51",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@types/express": {
       "version": "4.17.13",
@@ -11975,6 +12283,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
       "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@webassemblyjs/helper-numbers": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
@@ -11984,25 +12293,29 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
       "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@webassemblyjs/helper-api-error": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
       "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@webassemblyjs/helper-buffer": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
       "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@webassemblyjs/helper-numbers": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
       "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -12013,13 +12326,15 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
       "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@webassemblyjs/helper-wasm-section": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
       "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -12032,6 +12347,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
       "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -12041,6 +12357,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
       "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@xtuc/long": "4.2.2"
       }
@@ -12049,13 +12366,15 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
       "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@webassemblyjs/wasm-edit": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
       "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -12072,6 +12391,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
       "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
@@ -12085,6 +12405,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
       "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -12097,6 +12418,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
       "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -12111,6 +12433,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
       "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@xtuc/long": "4.2.2"
@@ -12121,6 +12444,7 @@
       "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz",
       "integrity": "sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==",
       "dev": true,
+      "peer": true,
       "requires": {}
     },
     "@webpack-cli/info": {
@@ -12128,6 +12452,7 @@
       "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.1.tgz",
       "integrity": "sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "envinfo": "^7.7.3"
       }
@@ -12137,19 +12462,22 @@
       "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz",
       "integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==",
       "dev": true,
+      "peer": true,
       "requires": {}
     },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "accepts": {
       "version": "1.3.8",
@@ -12202,15 +12530,14 @@
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
-      "requires": {
-        "ajv": "^8.0.0"
-      },
+      "requires": {},
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "version": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
           "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -12222,7 +12549,9 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
           "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -12386,6 +12715,7 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
       "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "object.assign": "^4.1.0"
       }
@@ -12395,6 +12725,7 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
       "integrity": "sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/compat-data": "^7.13.11",
         "@babel/helper-define-polyfill-provider": "^0.3.1",
@@ -12405,7 +12736,8 @@
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -12414,6 +12746,7 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz",
       "integrity": "sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-define-polyfill-provider": "^0.3.1",
         "core-js-compat": "^3.21.0"
@@ -12424,6 +12757,7 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
       "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/helper-define-polyfill-provider": "^0.3.1"
       }
@@ -12779,6 +13113,7 @@
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -12878,7 +13213,8 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "cipher-base": {
       "version": "1.0.4",
@@ -13195,6 +13531,7 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
       "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "safe-buffer": "~5.1.1"
       }
@@ -13215,6 +13552,7 @@
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.21.1.tgz",
       "integrity": "sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==",
       "dev": true,
+      "peer": true,
       "requires": {
         "browserslist": "^4.19.1",
         "semver": "7.0.0"
@@ -13224,7 +13562,8 @@
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
           "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -13526,6 +13865,7 @@
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
       "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "object-keys": "^1.0.12"
       }
@@ -13862,6 +14202,7 @@
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz",
       "integrity": "sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -13877,7 +14218,8 @@
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
       "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "error-ex": {
       "version": "1.3.2",
@@ -13891,7 +14233,8 @@
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "escalade": {
       "version": "3.1.1",
@@ -13913,6 +14256,7 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -13923,6 +14267,7 @@
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
+      "peer": true,
       "requires": {
         "estraverse": "^5.2.0"
       },
@@ -13931,7 +14276,8 @@
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
           "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -13939,13 +14285,15 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "etag": {
       "version": "1.8.1",
@@ -14142,7 +14490,8 @@
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
       "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "fastq": {
       "version": "1.13.0",
@@ -14304,7 +14653,8 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "get-caller-file": {
       "version": "2.0.5",
@@ -14316,6 +14666,7 @@
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
       "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
       "dev": true,
+      "peer": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -14354,13 +14705,15 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "globby": {
       "version": "10.0.2",
@@ -14440,7 +14793,8 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "hash-base": {
       "version": "3.1.0",
@@ -14780,6 +15134,7 @@
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
       "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "pkg-dir": "^4.2.0",
         "resolve-cwd": "^3.0.0"
@@ -14809,7 +15164,8 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
       "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "intro.js": {
       "version": "4.3.0",
@@ -14960,13 +15316,15 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -15017,11 +15375,6 @@
       "integrity": "sha512-SOO+C1aOpVSAUs30DYc6k/e0QJxfyD42aav4IKJtE5UZKw9ROWcVzkVoek2J475jNeNnl7GkoLAC27gejZsQ8g==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.15.8",
-        "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.15.8",
-        "@babel/preset-env": "^7.15.8",
         "@babel/runtime": "^7.15.4",
         "@types/babel__core": "^7.1.16",
         "@types/clean-css": "^4.2.5",
@@ -15060,8 +15413,6 @@
         "terser": "^5.9.0",
         "terser-webpack-plugin": "^5.2.4",
         "vue-style-loader": "^4.1.3",
-        "webpack": "^5.60.0",
-        "webpack-cli": "^4.9.1",
         "webpack-dev-server": "^4.7.3",
         "webpack-merge": "^5.8.0",
         "webpack-notifier": "^1.14.1",
@@ -15172,7 +15523,8 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "loader-utils": {
       "version": "2.0.2",
@@ -15272,7 +15624,8 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "lodash.isfinite": {
       "version": "3.3.2",
@@ -15548,7 +15901,8 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "no-case": {
       "version": "3.0.4",
@@ -15689,13 +16043,15 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "object.assign": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
       "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "call-bind": "^1.0.0",
         "define-properties": "^1.1.3",
@@ -16542,6 +16898,7 @@
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
       "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "resolve": "^1.9.0"
       }
@@ -16558,13 +16915,15 @@
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
       "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "regenerate-unicode-properties": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz",
       "integrity": "sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "regenerate": "^1.4.2"
       }
@@ -16579,6 +16938,7 @@
       "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.0.tgz",
       "integrity": "sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/runtime": "^7.8.4"
       }
@@ -16588,6 +16948,7 @@
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.0.1.tgz",
       "integrity": "sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "regenerate": "^1.4.2",
         "regenerate-unicode-properties": "^10.0.1",
@@ -16601,13 +16962,15 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.6.0.tgz",
       "integrity": "sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "regjsparser": {
       "version": "0.8.4",
       "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.8.4.tgz",
       "integrity": "sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "jsesc": "~0.5.0"
       },
@@ -16616,7 +16979,8 @@
           "version": "0.5.0",
           "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
           "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -16668,6 +17032,7 @@
       "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
       "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "resolve-from": "^5.0.0"
       },
@@ -16676,7 +17041,8 @@
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
           "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -17096,7 +17462,8 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "source-map-js": {
       "version": "1.0.1",
@@ -17404,7 +17771,8 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "terser": {
       "version": "5.12.1",
@@ -17600,13 +17968,15 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
       "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "unicode-match-property-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
       "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
       "dev": true,
+      "peer": true,
       "requires": {
         "unicode-canonical-property-names-ecmascript": "^2.0.0",
         "unicode-property-aliases-ecmascript": "^2.0.0"
@@ -17616,13 +17986,15 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz",
       "integrity": "sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "unicode-property-aliases-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz",
       "integrity": "sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "universalify": {
       "version": "0.1.2",
@@ -17751,6 +18123,7 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
       "integrity": "sha512-x0t0JuydIo8qCNctdDrn1OzH/qDzk2+rdCOC3YzumZ42fiMqmQ7T3xQurykYMhYfHaPHTp4ZxAx2NfUo1K6QaA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -17770,6 +18143,7 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.72.0.tgz",
       "integrity": "sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -17801,13 +18175,15 @@
           "version": "8.7.0",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
           "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-          "dev": true
+          "dev": true,
+          "peer": true
         },
         "acorn-import-assertions": {
           "version": "1.8.0",
           "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
           "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
           "dev": true,
+          "peer": true,
           "requires": {}
         },
         "schema-utils": {
@@ -17815,6 +18191,7 @@
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
           "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
           "dev": true,
+          "peer": true,
           "requires": {
             "@types/json-schema": "^7.0.8",
             "ajv": "^6.12.5",
@@ -17825,7 +18202,8 @@
           "version": "3.2.3",
           "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
           "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -17834,6 +18212,7 @@
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.2.tgz",
       "integrity": "sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^1.1.1",
@@ -17853,7 +18232,8 @@
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
           "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
diff --git a/src/index.html b/src/index.html
index 5a08787b..f40b54d4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1354,7 +1354,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 
 		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" x-cloak aria-modal="true" x-data="{
             importerResourceLocator: '',
-            importerSourceType: 'json-file',
+            importerSourceType: 'csv-file',
             importerHtml: '',
             step: 1,
             stagedMonsters: [],
@@ -1404,8 +1404,10 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
                 this.canImport = false;
                 this.importError = '';
             },
-            downloadExampleJson(){
-                Importer.downloadExampleJson();
+            downloadExampleFile(){
+                const example = Importer.exampleFiles[this.importerSourceType];
+                if(!example) return;
+                example();
             }
         }">
 			<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
@@ -1444,6 +1446,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 										<option value="google-sheets">Google Sheets</option>
 										<option value="json-raw">Raw JSON</option>
 										<option value="json-file">JSON File</option>
+										<option value="csv-file">CSV File</option>
 									</optgroup>
 								</select>
 
diff --git a/src/js/app.js b/src/js/app.js
index bc518421..d5ca14d0 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,6 +1,5 @@
 require('@fortawesome/fontawesome-free');
 
-import 'flowbite';
 import Choices from 'choices.js';
 import hotkeys from 'hotkeys-js';
 import encounter from "./encounter";
diff --git a/src/js/helpers.js b/src/js/helpers.js
index 7ed4f254..3247ce2e 100644
--- a/src/js/helpers.js
+++ b/src/js/helpers.js
@@ -143,4 +143,13 @@ export function validateJSON(jsonString){
     catch (e) { }
 
     return false;
-};
\ No newline at end of file
+}
+
+export function downloadFile(fileName, data, type){
+    const a = document.createElement("a");
+    const file = new Blob([data], { type: type });
+    a.href = URL.createObjectURL(file);
+    a.download = fileName;
+    a.click();
+    a.remove();
+}
\ No newline at end of file
diff --git a/src/js/importer.js b/src/js/importer.js
index aa311cca..c8a562c3 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -1,18 +1,24 @@
 import * as helpers from './helpers';
 
 export default class Importer {
-    static key = 'AIzaSyDzQndw__ieQX2WMK06ROjFhn_jFAFelk8';
 
     static loaders = {
         'google-sheets': this._importGoogleSheets,
         'json-raw': this._importJson,
         'json-file': this._importJsonFile,
+        'csv-file': this._importCSV,
     }
 
     static validators = {
         'google-sheets': this._validateGoogleSheets,
         'json-raw': this._validateJson,
-        'json-file': this._validateJsonFile
+        'json-file': this._validateJsonFile,
+        'csv-file': this._validateCSV,
+    }
+
+    static exampleFiles = {
+        'json-file': this._downloadExampleJson,
+        'csv-file': this._downloadExampleCSV,
     }
 
     static async _validateGoogleSheets(resourceLocator) {
@@ -21,11 +27,11 @@ export default class Importer {
             }))
             .then(response => response.json())
             .then(jsonifiedBody => {
-                if(!jsonifiedBody.sheets.filter(sheet => sheet.properties.title === 'Monsters').length) {
+                if(!jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Monsters')) {
                     return [false, "Your Google Sheets workbook must contain a sheet called 'Monsters'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
                 }
 
-                if(!jsonifiedBody.sheets.filter(sheet => sheet.properties.title === 'Sources').length) {
+                if(!jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Sources')) {
                     return [false, "Your Google Sheets workbook must contain a sheet called 'Sources'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
                 }
 
@@ -53,7 +59,7 @@ export default class Importer {
 
     static async _validateJsonFile(resourceLocator) {
         if(resourceLocator.type !== 'application/json') {
-            return [false, "The file you provided isn't a text file containing JSON"];
+            return [false, "The file you provided isn't a text file containing JSON."];
         }
 
         let results = await this._importJsonFile(resourceLocator);
@@ -73,6 +79,38 @@ export default class Importer {
         return [true, ""];
     }
 
+    static async _validateCSV(resourceLocators) {
+
+        if(!resourceLocators[0] || !resourceLocators[1]){
+            return [false, '']
+        }
+
+        if(resourceLocators[0].type !== 'text/csv' || resourceLocators[1].type !== 'text/csv') {
+            return [false, "The files you provided aren't valid CSV text files."];
+        }
+
+        let results = await this._importCSV(resourceLocators);
+
+        if(!results) {
+            return [false, "Couldn't resolve K+FC data, import source is probably an invalid CSV file."];
+        }
+
+        for(let key of ["name", "shortname", "link"]){
+            if(!Object.keys(results.sources[0]).includes(key)){
+                return [false, `Sources are missing the required header: '${key}' - Please refer to the example files.`];
+            }
+        }
+
+        for(let key of ["name","cr","size","type","tags","section","alignment","environment","ac","hp","init","lair?","legendary","unique","sources"]){
+            if(!Object.keys(results.monsters[0]).includes(key)){
+                return [false, `Monsters are missing the required header: '${key}' - Please refer to the example files.`];
+            }
+        }
+
+        return [true, ""];
+
+    }
+
     static loadersHtml = {
         'google-sheets': () => {
             return `
@@ -90,10 +128,21 @@ export default class Importer {
         },
         'json-file': () => {
             return `
-                <label class="block" id="file_input_label" for="import_resource_locator_file">Upload JSON text file below or <a class="primary-link" href="javascript:true" @click="downloadExampleJson">download an example file to edit</a></label>                
+                <label class="block" id="file_input_label" for="import_resource_locator_file">Upload JSON text file below or <a class="primary-link" href="javascript:true" @click="downloadExampleFile">download an example file to edit</a></label>                
                 <input accept="application/json" class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" @change="importerResourceLocator = $event.target.files[0]" aria-describedby="file_input_label" id="import_resource_locator_file" type="file">
             `;
         },
+        'csv-file': () => {
+            return `
+                <label>Upload CSV text files below or <a class="primary-link" href="javascript:true" @click="downloadExampleFile">download example files to edit</a></label>
+                <div class="grid grid-cols-2 gap-2 mt-2">                
+                    <label class="" id="file_input_label_1" for="import_resource_locator_file_1">Sources CSV</label>                
+                    <label class="" id="file_input_label_1" for="import_resource_locator_file_2">Monsters CSV</label>                
+                    <input accept="text/csv" class=" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" @change="if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[0] = $event.target.files[0]" aria-describedby="file_input_label" id="import_resource_locator_file_1" type="file">
+                    <input accept="text/csv" class=" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" @change="if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[1] = $event.target.files[0]" aria-describedby="file_input_label" id="import_resource_locator_file_2" type="file">
+                </div>
+            `;
+        },
     }
 
     static async canImport(resourceLocator, type) {
@@ -161,32 +210,25 @@ export default class Importer {
     }
 
     static async _importJsonFile(resourceLocator) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.addEventListener('load', function() {
-                try {
-                    const data = JSON.parse(reader.result);
-                    resolve(data);
-                }catch (err) {
-                    console.error(err);
-                    reject(err);
-                }
-            });
-            reader.readAsText(resourceLocator);
-        });
+        const data = await this._loadFile(resourceLocator);
+        return this._importJson(data);
     }
 
     static async _importJson(resourceLocator) {
         try {
-            return JSON.parse(resourceLocator);
+            const data = JSON.parse(resourceLocator);
+            for(let source of data.sources){
+                source.type = "Custom";
+            }
+            return data;
         }catch (err) {
             console.error(err);
             return false;
         }
     }
 
+    static _downloadExampleJson(){
 
-    static downloadExampleJson(){
         const jsonExample = {
             "sources": [
                 {
@@ -197,7 +239,7 @@ export default class Importer {
                 {
                     "name": "Another Custom Source",
                     "shortname": "ACS",
-                    "link": ""
+                    "link": "https://google.com/"
                 },
             ],
             "monsters": [
@@ -238,13 +280,69 @@ export default class Importer {
             ]
         };
 
-        const a = document.createElement("a");
-        const file = new Blob([JSON.stringify(jsonExample, null, 4)], { type: "text/json" });
-        a.href = URL.createObjectURL(file);
-        a.download = "example.json";
-        a.click();
-        a.remove();
+        helpers.downloadFile("example.json", JSON.stringify(jsonExample, null, 4), "application/json");
+
+    }
+
+    static async _importCSV(resourceLocators){
+
+        const sources = await this._loadFile(resourceLocators[0]);
+        if(!sources){
+            return false;
+        }
+
+        const monsters = await this._loadFile(resourceLocators[1]);
+        if(!monsters){
+            return false;
+        }
+
+        return {
+            sources: this._formatCSV(sources),
+            monsters: this._formatCSV(monsters)
+        }
+
+    }
+
+    static _formatCSV(str){
+        const headers = str.slice(0, str.indexOf("\n")).split(',');
+        const rows = str.slice(str.indexOf("\n") + 1).split("\n");
+        return rows.map(row => {
+            const values = row.split(',');
+            return headers.reduce((obj, header, index) => {
+                obj[header] = values[index];
+                return obj;
+            }, {});
+        })
+    }
+
+    static _downloadExampleCSV(){
+
+        let sources = "name,shortname,link\n";
+        sources += "Custom Source,CS,\n"
+        sources += "Another Custom Source,ACS,https://google.com/"
+
+        helpers.downloadFile("example_sources.csv", sources, "text/csv");
+
+        let monsters = "name,cr,size,type,tags,section,alignment,environment,ac,hp,init,lair?,legendary,unique,sources\n";
+        monsters += `Zombie,1/4,Medium,Undead,,Zombies,neutral evil,"aquatic, arctic, cave, coast, desert, dungeon, forest, grassland, mountain, ruins, swamp, underground, urban",8,22, -2,,,,Custom Source: 5\n`
+        monsters += `Bigger Zombie,1/2,Large,Undead,,Zombies,neutral evil,my custom place,10,41,-2,,legendary,unique,Another Custom Source: 32`
 
+        helpers.downloadFile("example_monsters.csv", monsters, "text/csv");
+    }
+
+    static _loadFile(file){
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.addEventListener('load', function() {
+                try {
+                    resolve(reader.result);
+                }catch (err) {
+                    console.error(err);
+                    reject(err);
+                }
+            });
+            reader.readAsText(file);
+        });
     }
 
 }
\ No newline at end of file
diff --git a/src/js/monster.js b/src/js/monster.js
index a502cdc2..6e96d77f 100644
--- a/src/js/monster.js
+++ b/src/js/monster.js
@@ -46,7 +46,7 @@ export default class Monster {
             const [book, location] = str.split(": ");
             let source = {};
             source.actual_source = this.app.sources[book];
-            if (!isNaN(location)) {
+            if (!isNaN(Number(location))) {
                 source.reference = source.actual_source;
                 source.page = location;
             } else if (helpers.isValidHttpUrl(location)) {

From 98f6ffc2ff4fa5b3a855c61627c150fe08e51644 Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Mon, 16 May 2022 00:03:52 +0100
Subject: [PATCH 20/33] Further work on validation, changed imported sources to
 accept non-custom types

---
 docs/css/styles.css |   7 --
 docs/index.html     |   6 +-
 docs/js/app.js      | 275 +++++++++++++++++++++++++++++++-------------
 src/index.html      |   6 +-
 src/js/importer.js  | 118 ++++++++++++++-----
 5 files changed, 294 insertions(+), 118 deletions(-)

diff --git a/docs/css/styles.css b/docs/css/styles.css
index 47ed2366..c8fb278e 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -9298,9 +9298,6 @@ input[type=text]:disabled{
 .gap-2{
   gap: 0.5rem;
 }
-.gap-4{
-  gap: 1rem;
-}
 .gap-y-2{
   row-gap: 0.5rem;
 }
@@ -9312,10 +9309,6 @@ input[type=text]:disabled{
   -moz-column-gap: 1rem;
        column-gap: 1rem;
 }
-.gap-x-2{
-  -moz-column-gap: 0.5rem;
-       column-gap: 0.5rem;
-}
 .space-y-1 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
diff --git a/docs/index.html b/docs/index.html
index f40b54d4..6c8e4b4b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -966,8 +966,8 @@ <h4 class="text-gray-700 dark:text-gray-300 leading-6 mb-2" x-text="type.title">
 												<template x-for="source of type.sources">
 													<div class="col-span-6 grid gap-2"
 														 :class="{
-														 	'grid-cols-[1fr_42px]': type.title === 'Custom' && !deleting,
-														 	'grid-cols-[42px_1fr_42px]': type.title === 'Custom' && deleting
+														 	'grid-cols-[1fr_42px]': source.custom && !deleting,
+														 	'grid-cols-[42px_1fr_42px]': source.custom && deleting
 														 }"
 														 x-data="{ deleting: false }"
 														 @click.away="deleting = false"
@@ -987,7 +987,7 @@ <h4 class="text-gray-700 dark:text-gray-300 leading-6 mb-2" x-text="type.title">
 															<span class="truncate" x-text="source.name"></span>
 														</button>
 
-														<button x-show="type.title === 'Custom' && !deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleting = true">
+														<button x-show="source.custom && !deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleting = true">
 															<i class="fa fa-trash"></i>
 														</button>
 
diff --git a/docs/js/app.js b/docs/js/app.js
index fb9eb5f0..b4071212 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -11352,17 +11352,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js");
 /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helpers */ "./src/js/helpers.js");
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
-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 _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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+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 _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -11380,9 +11380,81 @@ var Importer = /*#__PURE__*/function () {
   }
 
   _createClass(Importer, null, [{
+    key: "_validateSources",
+    value: function _validateSources(sources) {
+      var _iterator = _createForOfIteratorHelper(sources),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var source = _step.value;
+
+          var _iterator2 = _createForOfIteratorHelper(this.sourcesRequiredHeaders),
+              _step2;
+
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var key = _step2.value;
+
+              if (!Object.keys(source).includes(key)) {
+                return [false, "Sources are missing the required header: '".concat(key, "' - Please refer to the example files.")];
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      return [true];
+    }
+  }, {
+    key: "_validateMonsters",
+    value: function _validateMonsters(monsters) {
+      var _iterator3 = _createForOfIteratorHelper(monsters),
+          _step3;
+
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var monster = _step3.value;
+
+          var _iterator4 = _createForOfIteratorHelper(this.monstersRequiredHeaders),
+              _step4;
+
+          try {
+            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+              var key = _step4.value;
+
+              if (!Object.keys(monster).includes(key)) {
+                return [false, "Monsters are missing the required header: '".concat(key, "' - Please refer to the example files.")];
+              }
+            }
+          } catch (err) {
+            _iterator4.e(err);
+          } finally {
+            _iterator4.f();
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+
+      return [true];
+    }
+  }, {
     key: "_validateGoogleSheets",
     value: function () {
       var _validateGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee(resourceLocator) {
+        var _this = this;
+
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -11393,22 +11465,42 @@ var Importer = /*#__PURE__*/function () {
                 })).then(function (response) {
                   return response.json();
                 }).then(function (jsonifiedBody) {
-                  if (!jsonifiedBody.sheets.find(function (sheet) {
+                  if (jsonifiedBody.error) {
+                    return [false, "Google responded with an error: \"".concat(jsonifiedBody.error.message, "\" - is your sheet public?")];
+                  }
+
+                  var monsters = jsonifiedBody.sheets.find(function (sheet) {
                     return sheet.properties.title === 'Monsters';
-                  })) {
+                  });
+
+                  if (!monsters) {
                     return [false, "Your Google Sheets workbook must contain a sheet called 'Monsters'. Only found: '" + jsonifiedBody.sheets.map(function (sheet) {
                       return sheet.properties.title;
                     }).join(', ') + "'"];
                   }
 
-                  if (!jsonifiedBody.sheets.find(function (sheet) {
+                  var validMonsters = _this._validateMonsters(monsters);
+
+                  if (!validMonsters[0]) {
+                    return validMonsters;
+                  }
+
+                  var sources = jsonifiedBody.sheets.find(function (sheet) {
                     return sheet.properties.title === 'Sources';
-                  })) {
+                  });
+
+                  if (!sources) {
                     return [false, "Your Google Sheets workbook must contain a sheet called 'Sources'. Only found: '" + jsonifiedBody.sheets.map(function (sheet) {
                       return sheet.properties.title;
                     }).join(', ') + "'"];
                   }
 
+                  var validSources = _this._validateSources(sources);
+
+                  if (!validSources[0]) {
+                    return validSources;
+                  }
+
                   return [true, ''];
                 });
 
@@ -11433,7 +11525,7 @@ var Importer = /*#__PURE__*/function () {
     key: "_validateJson",
     value: function () {
       var _validateJson2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee2(resourceLocator) {
-        var results;
+        var results, validMonsters, validSources;
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
@@ -11468,9 +11560,29 @@ var Importer = /*#__PURE__*/function () {
                 return _context2.abrupt("return", [false, "Your JSON has sources, but must also contain monsters."]);
 
               case 9:
+                validMonsters = this._validateMonsters(results.monsters);
+
+                if (validMonsters[0]) {
+                  _context2.next = 12;
+                  break;
+                }
+
+                return _context2.abrupt("return", validMonsters);
+
+              case 12:
+                validSources = this._validateSources(results.sources);
+
+                if (validSources[0]) {
+                  _context2.next = 15;
+                  break;
+                }
+
+                return _context2.abrupt("return", validSources);
+
+              case 15:
                 return _context2.abrupt("return", [true, ""]);
 
-              case 10:
+              case 16:
               case "end":
                 return _context2.stop();
             }
@@ -11488,7 +11600,7 @@ var Importer = /*#__PURE__*/function () {
     key: "_validateJsonFile",
     value: function () {
       var _validateJsonFile2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee3(resourceLocator) {
-        var results;
+        var results, validMonsters, validSources;
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
@@ -11531,9 +11643,29 @@ var Importer = /*#__PURE__*/function () {
                 return _context3.abrupt("return", [false, "Your JSON has sources, but must also contain monsters."]);
 
               case 11:
+                validMonsters = this._validateMonsters(results.monsters);
+
+                if (validMonsters[0]) {
+                  _context3.next = 14;
+                  break;
+                }
+
+                return _context3.abrupt("return", validMonsters);
+
+              case 14:
+                validSources = this._validateSources(results.sources);
+
+                if (validSources[0]) {
+                  _context3.next = 17;
+                  break;
+                }
+
+                return _context3.abrupt("return", validSources);
+
+              case 17:
                 return _context3.abrupt("return", [true, ""]);
 
-              case 12:
+              case 18:
               case "end":
                 return _context3.stop();
             }
@@ -11551,8 +11683,7 @@ var Importer = /*#__PURE__*/function () {
     key: "_validateCSV",
     value: function () {
       var _validateCSV2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee4(resourceLocators) {
-        var results, _i, _arr, key, _i2, _arr2, _key;
-
+        var results, validMonsters, validSources;
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee4$(_context4) {
           while (1) {
             switch (_context4.prev = _context4.next) {
@@ -11587,55 +11718,29 @@ var Importer = /*#__PURE__*/function () {
                 return _context4.abrupt("return", [false, "Couldn't resolve K+FC data, import source is probably an invalid CSV file."]);
 
               case 9:
-                _i = 0, _arr = ["name", "shortname", "link"];
+                validMonsters = this._validateMonsters(results.monsters);
 
-              case 10:
-                if (!(_i < _arr.length)) {
-                  _context4.next = 17;
+                if (validMonsters[0]) {
+                  _context4.next = 12;
                   break;
                 }
 
-                key = _arr[_i];
-
-                if (Object.keys(results.sources[0]).includes(key)) {
-                  _context4.next = 14;
-                  break;
-                }
-
-                return _context4.abrupt("return", [false, "Sources are missing the required header: '".concat(key, "' - Please refer to the example files.")]);
-
-              case 14:
-                _i++;
-                _context4.next = 10;
-                break;
-
-              case 17:
-                _i2 = 0, _arr2 = ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", "lair?", "legendary", "unique", "sources"];
-
-              case 18:
-                if (!(_i2 < _arr2.length)) {
-                  _context4.next = 25;
-                  break;
-                }
+                return _context4.abrupt("return", validMonsters);
 
-                _key = _arr2[_i2];
+              case 12:
+                validSources = this._validateSources(results.sources);
 
-                if (Object.keys(results.monsters[0]).includes(_key)) {
-                  _context4.next = 22;
+                if (validSources[0]) {
+                  _context4.next = 15;
                   break;
                 }
 
-                return _context4.abrupt("return", [false, "Monsters are missing the required header: '".concat(_key, "' - Please refer to the example files.")]);
-
-              case 22:
-                _i2++;
-                _context4.next = 18;
-                break;
+                return _context4.abrupt("return", validSources);
 
-              case 25:
+              case 15:
                 return _context4.abrupt("return", [true, ""]);
 
-              case 26:
+              case 16:
               case "end":
                 return _context4.stop();
             }
@@ -11728,7 +11833,9 @@ var Importer = /*#__PURE__*/function () {
                 })).then(function (response) {
                   return response.json();
                 }).then(function (jsonifiedBody) {
-                  var headers = jsonifiedBody.values.splice(0, 1)[0];
+                  var headers = jsonifiedBody.values.splice(0, 1)[0].map(function (str) {
+                    return str.toLowerCase();
+                  });
                   return jsonifiedBody.values.map(function (item) {
                     return {
                       "name": item[headers.indexOf("name")],
@@ -11737,13 +11844,13 @@ var Importer = /*#__PURE__*/function () {
                       "type": item[headers.indexOf("type")],
                       "tags": item[headers.indexOf("tags")],
                       "section": item[headers.indexOf("section")],
-                      "alignment": item[headers.indexOf("alignment")],
-                      "environment": item[headers.indexOf("environment")],
+                      "alignment": item[headers.indexOf("alignment")].toLowerCase(),
+                      "environment": item[headers.indexOf("environment")].toLowerCase(),
                       "ac": item[headers.indexOf("ac")],
                       "hp": item[headers.indexOf("hp")],
                       "init": item[headers.indexOf("init")],
-                      "lair": item[headers.indexOf("lair?")],
-                      "legendary": item[headers.indexOf("legendary?")],
+                      "lair": item[headers.indexOf("lair?")] || item[headers.indexOf("lair")],
+                      "legendary": item[headers.indexOf("legendary?")] || item[headers.indexOf("legendary")],
                       "unique": item[headers.indexOf("unique?")],
                       "sources": item[headers.indexOf("sources")]
                     };
@@ -11760,12 +11867,15 @@ var Importer = /*#__PURE__*/function () {
                 })).then(function (response) {
                   return response.json();
                 }).then(function (jsonifiedBody) {
-                  var headers = jsonifiedBody.values.splice(0, 1)[0];
+                  var headers = jsonifiedBody.values.splice(0, 1)[0].map(function (str) {
+                    return str.toLowerCase();
+                  });
                   return jsonifiedBody.values.map(function (item) {
                     return {
                       "name": item[headers.indexOf("name")],
-                      "type": 'Custom',
-                      "shortname": item[headers.indexOf("short name")],
+                      "type": item[headers.indexOf("type")],
+                      "custom": true,
+                      "shortname": item[headers.indexOf("short name")] || item[headers.indexOf("shortname")],
                       "link": item[headers.indexOf("link")],
                       "enabled": true
                     };
@@ -11829,7 +11939,7 @@ var Importer = /*#__PURE__*/function () {
     key: "_importJson",
     value: function () {
       var _importJson2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee9(resourceLocator) {
-        var data, _iterator, _step, source;
+        var data, _iterator5, _step5, source;
 
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee9$(_context9) {
           while (1) {
@@ -11837,17 +11947,17 @@ var Importer = /*#__PURE__*/function () {
               case 0:
                 _context9.prev = 0;
                 data = JSON.parse(resourceLocator);
-                _iterator = _createForOfIteratorHelper(data.sources);
+                _iterator5 = _createForOfIteratorHelper(data.sources);
 
                 try {
-                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                    source = _step.value;
-                    source.type = "Custom";
+                  for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+                    source = _step5.value;
+                    source.custom = true;
                   }
                 } catch (err) {
-                  _iterator.e(err);
+                  _iterator5.e(err);
                 } finally {
-                  _iterator.f();
+                  _iterator5.f();
                 }
 
                 return _context9.abrupt("return", data);
@@ -11878,10 +11988,12 @@ var Importer = /*#__PURE__*/function () {
       var jsonExample = {
         "sources": [{
           "name": "Custom Source",
+          "type": "Custom",
           "shortname": "CS",
           "link": ""
         }, {
           "name": "Another Custom Source",
+          "type": "Third-Party",
           "shortname": "ACS",
           "link": "https://google.com/"
         }],
@@ -11897,7 +12009,7 @@ var Importer = /*#__PURE__*/function () {
           "ac": 8,
           "hp": 22,
           "init": -2,
-          "lair?": "",
+          "lair": "",
           "legendary": "",
           "unique": "",
           "sources": "Custom Source: 5"
@@ -11913,7 +12025,7 @@ var Importer = /*#__PURE__*/function () {
           "ac": 10,
           "hp": 41,
           "init": -2,
-          "lair?": "",
+          "lair": "",
           "legendary": "legendary",
           "unique": "unique",
           "sources": "Another Custom Source: 32"
@@ -11944,26 +12056,29 @@ var Importer = /*#__PURE__*/function () {
                 return _context10.abrupt("return", false);
 
               case 5:
-                _context10.next = 7;
+                sources.forEach(function (source) {
+                  source.custom = true;
+                });
+                _context10.next = 8;
                 return this._loadFile(resourceLocators[1]);
 
-              case 7:
+              case 8:
                 monsters = _context10.sent;
 
                 if (monsters) {
-                  _context10.next = 10;
+                  _context10.next = 11;
                   break;
                 }
 
                 return _context10.abrupt("return", false);
 
-              case 10:
+              case 11:
                 return _context10.abrupt("return", {
                   sources: this._formatCSV(sources),
                   monsters: this._formatCSV(monsters)
                 });
 
-              case 11:
+              case 12:
               case "end":
                 return _context10.stop();
             }
@@ -11993,11 +12108,11 @@ var Importer = /*#__PURE__*/function () {
   }, {
     key: "_downloadExampleCSV",
     value: function _downloadExampleCSV() {
-      var sources = "name,shortname,link\n";
-      sources += "Custom Source,CS,\n";
-      sources += "Another Custom Source,ACS,https://google.com/";
+      var sources = "name,type,shortname,link\n";
+      sources += "Custom Source,Custom,CS,\n";
+      sources += "Another Custom Source,Third-Party,ACS,https://google.com/";
       _helpers__WEBPACK_IMPORTED_MODULE_1__.downloadFile("example_sources.csv", sources, "text/csv");
-      var monsters = "name,cr,size,type,tags,section,alignment,environment,ac,hp,init,lair?,legendary,unique,sources\n";
+      var monsters = "name,cr,size,type,tags,section,alignment,environment,ac,hp,init,lair,legendary,unique,sources\n";
       monsters += "Zombie,1/4,Medium,Undead,,Zombies,neutral evil,\"aquatic, arctic, cave, coast, desert, dungeon, forest, grassland, mountain, ruins, swamp, underground, urban\",8,22, -2,,,,Custom Source: 5\n";
       monsters += "Bigger Zombie,1/2,Large,Undead,,Zombies,neutral evil,my custom place,10,41,-2,,legendary,unique,Another Custom Source: 32";
       _helpers__WEBPACK_IMPORTED_MODULE_1__.downloadFile("example_monsters.csv", monsters, "text/csv");
@@ -12042,6 +12157,10 @@ _defineProperty(Importer, "exampleFiles", {
   'csv-file': Importer._downloadExampleCSV
 });
 
+_defineProperty(Importer, "sourcesRequiredHeaders", ["name", "type", "shortname", "link"]);
+
+_defineProperty(Importer, "monstersRequiredHeaders", ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", "lair", "legendary", "unique", "sources"]);
+
 _defineProperty(Importer, "loadersHtml", {
   'google-sheets': function googleSheets() {
     return "\n                <label for=\"import_resource_locator\">Sheets ID</label>\n                <input name=\"import_resource_locator\" id=\"import_resource_locator\" type=\"text\" x-model=\"importerResourceLocator\">\n            ";
diff --git a/src/index.html b/src/index.html
index f40b54d4..6c8e4b4b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -966,8 +966,8 @@ <h4 class="text-gray-700 dark:text-gray-300 leading-6 mb-2" x-text="type.title">
 												<template x-for="source of type.sources">
 													<div class="col-span-6 grid gap-2"
 														 :class="{
-														 	'grid-cols-[1fr_42px]': type.title === 'Custom' && !deleting,
-														 	'grid-cols-[42px_1fr_42px]': type.title === 'Custom' && deleting
+														 	'grid-cols-[1fr_42px]': source.custom && !deleting,
+														 	'grid-cols-[42px_1fr_42px]': source.custom && deleting
 														 }"
 														 x-data="{ deleting: false }"
 														 @click.away="deleting = false"
@@ -987,7 +987,7 @@ <h4 class="text-gray-700 dark:text-gray-300 leading-6 mb-2" x-text="type.title">
 															<span class="truncate" x-text="source.name"></span>
 														</button>
 
-														<button x-show="type.title === 'Custom' && !deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleting = true">
+														<button x-show="source.custom && !deleting" class="!px-0 w-[42px] justify-center button-danger-outline-md" @click="deleting = true">
 															<i class="fa fa-trash"></i>
 														</button>
 
diff --git a/src/js/importer.js b/src/js/importer.js
index c8a562c3..cef8ad67 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -21,20 +21,62 @@ export default class Importer {
         'csv-file': this._downloadExampleCSV,
     }
 
+    static sourcesRequiredHeaders = ["name", "type", "shortname", "link"];
+    static monstersRequiredHeaders = ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", "lair", "legendary", "unique", "sources"];
+
+    static _validateSources(sources){
+        for(let source of sources) {
+            for (let key of this.sourcesRequiredHeaders) {
+                if (!Object.keys(source).includes(key)) {
+                    return [false, `Sources are missing the required header: '${key}' - Please refer to the example files.`];
+                }
+            }
+        }
+        return [true];
+    }
+
+    static _validateMonsters(monsters){
+        for(let monster of monsters) {
+            for(let key of this.monstersRequiredHeaders){
+                if(!Object.keys(monster).includes(key)){
+                    return [false, `Monsters are missing the required header: '${key}' - Please refer to the example files.`];
+                }
+            }
+        }
+        return [true];
+    }
+
     static async _validateGoogleSheets(resourceLocator) {
         return await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}?` + new URLSearchParams({
                 key: this.key
             }))
             .then(response => response.json())
             .then(jsonifiedBody => {
-                if(!jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Monsters')) {
+
+                if(jsonifiedBody.error){
+                    return [false, `Google responded with an error: "${jsonifiedBody.error.message}" - is your sheet public?`];
+                }
+
+                const monsters = jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Monsters');
+                if(!monsters) {
                     return [false, "Your Google Sheets workbook must contain a sheet called 'Monsters'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
                 }
 
-                if(!jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Sources')) {
+                const validMonsters = this._validateMonsters(monsters);
+                if(!validMonsters[0]){
+                    return validMonsters;
+                }
+
+                const sources = jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Sources');
+                if(!sources) {
                     return [false, "Your Google Sheets workbook must contain a sheet called 'Sources'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
                 }
 
+                const validSources = this._validateSources(sources);
+                if(!validSources[0]){
+                    return validSources;
+                }
+
                 return [true, ''];
             });
     }
@@ -54,6 +96,16 @@ export default class Importer {
             return [false, "Your JSON has sources, but must also contain monsters."];
         }
 
+        const validMonsters = this._validateMonsters(results.monsters);
+        if(!validMonsters[0]){
+            return validMonsters;
+        }
+
+        const validSources = this._validateSources(results.sources);
+        if(!validSources[0]){
+            return validSources;
+        }
+
         return [true, ""];
     }
 
@@ -76,6 +128,16 @@ export default class Importer {
             return [false, "Your JSON has sources, but must also contain monsters."];
         }
 
+        const validMonsters = this._validateMonsters(results.monsters);
+        if(!validMonsters[0]){
+            return validMonsters;
+        }
+
+        const validSources = this._validateSources(results.sources);
+        if(!validSources[0]){
+            return validSources;
+        }
+
         return [true, ""];
     }
 
@@ -95,16 +157,14 @@ export default class Importer {
             return [false, "Couldn't resolve K+FC data, import source is probably an invalid CSV file."];
         }
 
-        for(let key of ["name", "shortname", "link"]){
-            if(!Object.keys(results.sources[0]).includes(key)){
-                return [false, `Sources are missing the required header: '${key}' - Please refer to the example files.`];
-            }
+        const validMonsters = this._validateMonsters(results.monsters);
+        if(!validMonsters[0]){
+            return validMonsters;
         }
 
-        for(let key of ["name","cr","size","type","tags","section","alignment","environment","ac","hp","init","lair?","legendary","unique","sources"]){
-            if(!Object.keys(results.monsters[0]).includes(key)){
-                return [false, `Monsters are missing the required header: '${key}' - Please refer to the example files.`];
-            }
+        const validSources = this._validateSources(results.sources);
+        if(!validSources[0]){
+            return validSources;
         }
 
         return [true, ""];
@@ -163,8 +223,7 @@ export default class Importer {
         }))
             .then(response => response.json())
             .then(jsonifiedBody => {
-                let headers = jsonifiedBody.values.splice(0, 1)[0];
-
+                let headers = jsonifiedBody.values.splice(0, 1)[0].map(str => str.toLowerCase());
                 return jsonifiedBody.values.map((item) => ({
                     "name": item[headers.indexOf("name")],
                     "cr": item[headers.indexOf("cr")],
@@ -172,13 +231,13 @@ export default class Importer {
                     "type": item[headers.indexOf("type")],
                     "tags": item[headers.indexOf("tags")],
                     "section": item[headers.indexOf("section")],
-                    "alignment": item[headers.indexOf("alignment")],
-                    "environment": item[headers.indexOf("environment")],
+                    "alignment": item[headers.indexOf("alignment")].toLowerCase(),
+                    "environment": item[headers.indexOf("environment")].toLowerCase(),
                     "ac": item[headers.indexOf("ac")],
                     "hp": item[headers.indexOf("hp")],
                     "init": item[headers.indexOf("init")],
-                    "lair": item[headers.indexOf("lair?")],
-                    "legendary": item[headers.indexOf("legendary?")],
+                    "lair": item[headers.indexOf("lair?")] || item[headers.indexOf("lair")],
+                    "legendary": item[headers.indexOf("legendary?")] || item[headers.indexOf("legendary")],
                     "unique": item[headers.indexOf("unique?")],
                     "sources": item[headers.indexOf("sources")],
                 }));
@@ -192,12 +251,12 @@ export default class Importer {
         }))
             .then(response => response.json())
             .then(jsonifiedBody => {
-                let headers = jsonifiedBody.values.splice(0, 1)[0];
-
+                let headers = jsonifiedBody.values.splice(0, 1)[0].map(str => str.toLowerCase());
                 return jsonifiedBody.values.map((item) => ({
                     "name": item[headers.indexOf("name")],
-                    "type": 'Custom',
-                    "shortname": item[headers.indexOf("short name")],
+                    "type": item[headers.indexOf("type")],
+                    "custom": true,
+                    "shortname": item[headers.indexOf("short name")] || item[headers.indexOf("shortname")],
                     "link": item[headers.indexOf("link")],
                     "enabled": true,
                 }));
@@ -218,7 +277,7 @@ export default class Importer {
         try {
             const data = JSON.parse(resourceLocator);
             for(let source of data.sources){
-                source.type = "Custom";
+                source.custom = true;
             }
             return data;
         }catch (err) {
@@ -233,11 +292,13 @@ export default class Importer {
             "sources": [
                 {
                     "name": "Custom Source",
+                    "type": "Custom",
                     "shortname": "CS",
                     "link": ""
                 },
                 {
                     "name": "Another Custom Source",
+                    "type": "Third-Party",
                     "shortname": "ACS",
                     "link": "https://google.com/"
                 },
@@ -255,7 +316,7 @@ export default class Importer {
                     "ac": 8,
                     "hp": 22,
                     "init": -2,
-                    "lair?": "",
+                    "lair": "",
                     "legendary": "",
                     "unique": "",
                     "sources": "Custom Source: 5"
@@ -272,7 +333,7 @@ export default class Importer {
                     "ac": 10,
                     "hp": 41,
                     "init": -2,
-                    "lair?": "",
+                    "lair": "",
                     "legendary": "legendary",
                     "unique": "unique",
                     "sources": "Another Custom Source: 32"
@@ -290,6 +351,9 @@ export default class Importer {
         if(!sources){
             return false;
         }
+        sources.forEach((source) => {
+            source.custom = true;
+        });
 
         const monsters = await this._loadFile(resourceLocators[1]);
         if(!monsters){
@@ -317,13 +381,13 @@ export default class Importer {
 
     static _downloadExampleCSV(){
 
-        let sources = "name,shortname,link\n";
-        sources += "Custom Source,CS,\n"
-        sources += "Another Custom Source,ACS,https://google.com/"
+        let sources = "name,type,shortname,link\n";
+        sources += "Custom Source,Custom,CS,\n"
+        sources += "Another Custom Source,Third-Party,ACS,https://google.com/"
 
         helpers.downloadFile("example_sources.csv", sources, "text/csv");
 
-        let monsters = "name,cr,size,type,tags,section,alignment,environment,ac,hp,init,lair?,legendary,unique,sources\n";
+        let monsters = "name,cr,size,type,tags,section,alignment,environment,ac,hp,init,lair,legendary,unique,sources\n";
         monsters += `Zombie,1/4,Medium,Undead,,Zombies,neutral evil,"aquatic, arctic, cave, coast, desert, dungeon, forest, grassland, mountain, ruins, swamp, underground, urban",8,22, -2,,,,Custom Source: 5\n`
         monsters += `Bigger Zombie,1/2,Large,Undead,,Zombies,neutral evil,my custom place,10,41,-2,,legendary,unique,Another Custom Source: 32`
 

From cb73c0e4eac2548f04f261707c185100b56c591a Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Mon, 16 May 2022 00:39:25 +0100
Subject: [PATCH 21/33] Improvement to legacy sheets with question marks

---
 docs/js/app.js     | 74 +++++++++++++++++++++++++++++++---------------
 src/js/importer.js | 29 +++++++++---------
 2 files changed, 65 insertions(+), 38 deletions(-)

diff --git a/docs/js/app.js b/docs/js/app.js
index b4071212..291ec6f5 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -11358,6 +11358,8 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 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); }
@@ -11382,22 +11384,35 @@ var Importer = /*#__PURE__*/function () {
   _createClass(Importer, null, [{
     key: "_validateSources",
     value: function _validateSources(sources) {
+      var _this = this;
+
       var _iterator = _createForOfIteratorHelper(sources),
           _step;
 
       try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _loop = function _loop() {
           var source = _step.value;
+          var sourceKeys = Object.keys(source);
 
-          var _iterator2 = _createForOfIteratorHelper(this.sourcesRequiredHeaders),
+          var _iterator2 = _createForOfIteratorHelper(_this.sourcesRequiredHeaders),
               _step2;
 
           try {
             for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
               var key = _step2.value;
 
-              if (!Object.keys(source).includes(key)) {
-                return [false, "Sources are missing the required header: '".concat(key, "' - Please refer to the example files.")];
+              if (Array.isArray(key)) {
+                if (!key.find(function (option) {
+                  return sourceKeys.includes(option);
+                })) {
+                  return {
+                    v: [false, "Sources are missing the required header: '".concat(key[0], "' - Please refer to the example files.")]
+                  };
+                }
+              } else if (!sourceKeys.includes(key)) {
+                return {
+                  v: [false, "Sources are missing the required header: '".concat(key, "' - Please refer to the example files.")]
+                };
               }
             }
           } catch (err) {
@@ -11405,6 +11420,12 @@ var Importer = /*#__PURE__*/function () {
           } finally {
             _iterator2.f();
           }
+        };
+
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _ret = _loop();
+
+          if (_typeof(_ret) === "object") return _ret.v;
         }
       } catch (err) {
         _iterator.e(err);
@@ -11417,22 +11438,35 @@ var Importer = /*#__PURE__*/function () {
   }, {
     key: "_validateMonsters",
     value: function _validateMonsters(monsters) {
+      var _this2 = this;
+
       var _iterator3 = _createForOfIteratorHelper(monsters),
           _step3;
 
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var _loop2 = function _loop2() {
           var monster = _step3.value;
+          var monsterKeys = Object.keys(monster);
 
-          var _iterator4 = _createForOfIteratorHelper(this.monstersRequiredHeaders),
+          var _iterator4 = _createForOfIteratorHelper(_this2.monstersRequiredHeaders),
               _step4;
 
           try {
             for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
               var key = _step4.value;
 
-              if (!Object.keys(monster).includes(key)) {
-                return [false, "Monsters are missing the required header: '".concat(key, "' - Please refer to the example files.")];
+              if (Array.isArray(key)) {
+                if (!key.find(function (option) {
+                  return monsterKeys.includes(option);
+                })) {
+                  return {
+                    v: [false, "Monsters are missing the required header: '".concat(key[0], "' - Please refer to the example files.")]
+                  };
+                }
+              } else if (!monsterKeys.includes(key)) {
+                return {
+                  v: [false, "Monsters are missing the required header: '".concat(key, "' - Please refer to the example files.")]
+                };
               }
             }
           } catch (err) {
@@ -11440,6 +11474,12 @@ var Importer = /*#__PURE__*/function () {
           } finally {
             _iterator4.f();
           }
+        };
+
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _ret2 = _loop2();
+
+          if (_typeof(_ret2) === "object") return _ret2.v;
         }
       } catch (err) {
         _iterator3.e(err);
@@ -11453,8 +11493,6 @@ var Importer = /*#__PURE__*/function () {
     key: "_validateGoogleSheets",
     value: function () {
       var _validateGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee(resourceLocator) {
-        var _this = this;
-
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -11479,12 +11517,6 @@ var Importer = /*#__PURE__*/function () {
                     }).join(', ') + "'"];
                   }
 
-                  var validMonsters = _this._validateMonsters(monsters);
-
-                  if (!validMonsters[0]) {
-                    return validMonsters;
-                  }
-
                   var sources = jsonifiedBody.sheets.find(function (sheet) {
                     return sheet.properties.title === 'Sources';
                   });
@@ -11495,12 +11527,6 @@ var Importer = /*#__PURE__*/function () {
                     }).join(', ') + "'"];
                   }
 
-                  var validSources = _this._validateSources(sources);
-
-                  if (!validSources[0]) {
-                    return validSources;
-                  }
-
                   return [true, ''];
                 });
 
@@ -11874,9 +11900,9 @@ var Importer = /*#__PURE__*/function () {
                     return {
                       "name": item[headers.indexOf("name")],
                       "type": item[headers.indexOf("type")],
-                      "custom": true,
                       "shortname": item[headers.indexOf("short name")] || item[headers.indexOf("shortname")],
                       "link": item[headers.indexOf("link")],
+                      "custom": true,
                       "enabled": true
                     };
                   });
@@ -12159,7 +12185,7 @@ _defineProperty(Importer, "exampleFiles", {
 
 _defineProperty(Importer, "sourcesRequiredHeaders", ["name", "type", "shortname", "link"]);
 
-_defineProperty(Importer, "monstersRequiredHeaders", ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", "lair", "legendary", "unique", "sources"]);
+_defineProperty(Importer, "monstersRequiredHeaders", ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", ["lair", "lair?"], ["legendary", "legendary?"], "unique", "sources"]);
 
 _defineProperty(Importer, "loadersHtml", {
   'google-sheets': function googleSheets() {
diff --git a/src/js/importer.js b/src/js/importer.js
index cef8ad67..70c4d340 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -22,12 +22,17 @@ export default class Importer {
     }
 
     static sourcesRequiredHeaders = ["name", "type", "shortname", "link"];
-    static monstersRequiredHeaders = ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", "lair", "legendary", "unique", "sources"];
+    static monstersRequiredHeaders = ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", ["lair", "lair?"], ["legendary", "legendary?"], "unique", "sources"];
 
     static _validateSources(sources){
         for(let source of sources) {
+            const sourceKeys = Object.keys(source);
             for (let key of this.sourcesRequiredHeaders) {
-                if (!Object.keys(source).includes(key)) {
+                if(Array.isArray(key)) {
+                    if (!key.find(option => sourceKeys.includes(option))) {
+                        return [false, `Sources are missing the required header: '${key[0]}' - Please refer to the example files.`];
+                    }
+                }else if (!sourceKeys.includes(key)) {
                     return [false, `Sources are missing the required header: '${key}' - Please refer to the example files.`];
                 }
             }
@@ -37,8 +42,13 @@ export default class Importer {
 
     static _validateMonsters(monsters){
         for(let monster of monsters) {
+            const monsterKeys = Object.keys(monster);
             for(let key of this.monstersRequiredHeaders){
-                if(!Object.keys(monster).includes(key)){
+                if(Array.isArray(key)) {
+                    if (!key.find(option => monsterKeys.includes(option))) {
+                        return [false, `Monsters are missing the required header: '${key[0]}' - Please refer to the example files.`];
+                    }
+                }else if(!monsterKeys.includes(key)){
                     return [false, `Monsters are missing the required header: '${key}' - Please refer to the example files.`];
                 }
             }
@@ -62,21 +72,11 @@ export default class Importer {
                     return [false, "Your Google Sheets workbook must contain a sheet called 'Monsters'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
                 }
 
-                const validMonsters = this._validateMonsters(monsters);
-                if(!validMonsters[0]){
-                    return validMonsters;
-                }
-
                 const sources = jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Sources');
                 if(!sources) {
                     return [false, "Your Google Sheets workbook must contain a sheet called 'Sources'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
                 }
 
-                const validSources = this._validateSources(sources);
-                if(!validSources[0]){
-                    return validSources;
-                }
-
                 return [true, ''];
             });
     }
@@ -255,9 +255,9 @@ export default class Importer {
                 return jsonifiedBody.values.map((item) => ({
                     "name": item[headers.indexOf("name")],
                     "type": item[headers.indexOf("type")],
-                    "custom": true,
                     "shortname": item[headers.indexOf("short name")] || item[headers.indexOf("shortname")],
                     "link": item[headers.indexOf("link")],
+                    "custom": true,
                     "enabled": true,
                 }));
             })
@@ -392,6 +392,7 @@ export default class Importer {
         monsters += `Bigger Zombie,1/2,Large,Undead,,Zombies,neutral evil,my custom place,10,41,-2,,legendary,unique,Another Custom Source: 32`
 
         helpers.downloadFile("example_monsters.csv", monsters, "text/csv");
+
     }
 
     static _loadFile(file){

From f1c4c2663c2349c4facf4ed8b9c3d8624165ca80 Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Sun, 22 May 2022 18:50:02 +0100
Subject: [PATCH 22/33] Fixed monsters not filtering properly based on source

---
 src/js/monster.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/js/monster.js b/src/js/monster.js
index 6e96d77f..8154bdb6 100644
--- a/src/js/monster.js
+++ b/src/js/monster.js
@@ -13,6 +13,10 @@ export default class Monster {
 
         this.slug = helpers.slugify(this.data.name+'-'+this.data.sources+"-"+this.cr.string);
 
+        if(this.data.sources.includes("Monster-A-Day")){
+            console.log(this.data.name)
+        }
+
         this.tags = this.data.tags ? this.data.tags.split(/\s*,\s*/).sort() : null;
 
         this.special = !!this.data.special;
@@ -86,7 +90,7 @@ export default class Monster {
     }
 
     get sourceEnabled() {
-        return this.sources.find(source => source.reference.enabled);
+        return this.sources.find(source => source.actual_source.enabled);
     }
 
     static parseAlignment(str = "") {

From 46dacd4482bc5a7227538fec984c0be9635cbedc Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Sun, 22 May 2022 18:50:44 +0100
Subject: [PATCH 23/33] Improved validation on google sheets

---
 docs/index.html    |   4 +-
 docs/js/app.js     | 156 ++++++++++++++++++++++++++++++++++++---------
 src/index.html     |   4 +-
 src/js/importer.js |  87 +++++++++++++++++++------
 4 files changed, 199 insertions(+), 52 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 6c8e4b4b..d6af5c47 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1353,8 +1353,8 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 		</div>
 
 		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" x-cloak aria-modal="true" x-data="{
-            importerResourceLocator: '',
-            importerSourceType: 'csv-file',
+            importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
+            importerSourceType: 'google-sheets',
             importerHtml: '',
             step: 1,
             stagedMonsters: [],
diff --git a/docs/js/app.js b/docs/js/app.js
index 291ec6f5..0c07bcc5 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -11406,12 +11406,12 @@ var Importer = /*#__PURE__*/function () {
                   return sourceKeys.includes(option);
                 })) {
                   return {
-                    v: [false, "Sources are missing the required header: '".concat(key[0], "' - Please refer to the example files.")]
+                    v: [false, "Sources are missing the required header: '".concat(key[0], "'")]
                   };
                 }
               } else if (!sourceKeys.includes(key)) {
                 return {
-                  v: [false, "Sources are missing the required header: '".concat(key, "' - Please refer to the example files.")]
+                  v: [false, "Sources are missing the required header: '".concat(key, "'")]
                 };
               }
             }
@@ -11460,12 +11460,12 @@ var Importer = /*#__PURE__*/function () {
                   return monsterKeys.includes(option);
                 })) {
                   return {
-                    v: [false, "Monsters are missing the required header: '".concat(key[0], "' - Please refer to the example files.")]
+                    v: [false, "Monsters are missing the required header: '".concat(key[0], "'")]
                   };
                 }
               } else if (!monsterKeys.includes(key)) {
                 return {
-                  v: [false, "Monsters are missing the required header: '".concat(key, "' - Please refer to the example files.")]
+                  v: [false, "Monsters are missing the required header: '".concat(key, "'")]
                 };
               }
             }
@@ -11493,6 +11493,9 @@ var Importer = /*#__PURE__*/function () {
     key: "_validateGoogleSheets",
     value: function () {
       var _validateGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee(resourceLocator) {
+        var _this3 = this;
+
+        var initialLoad, monstersValid, sourcesValid;
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -11507,33 +11510,123 @@ var Importer = /*#__PURE__*/function () {
                     return [false, "Google responded with an error: \"".concat(jsonifiedBody.error.message, "\" - is your sheet public?")];
                   }
 
-                  var monsters = jsonifiedBody.sheets.find(function (sheet) {
-                    return sheet.properties.title === 'Monsters';
+                  return [true];
+                });
+
+              case 2:
+                initialLoad = _context.sent;
+
+                if (initialLoad[0]) {
+                  _context.next = 5;
+                  break;
+                }
+
+                return _context.abrupt("return", initialLoad);
+
+              case 5:
+                _context.next = 7;
+                return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Monsters?") + new URLSearchParams({
+                  key: this.key
+                })).then(function (response) {
+                  return response.json();
+                }).then(function (jsonifiedBody) {
+                  var headers = jsonifiedBody.values.splice(0, 1)[0].map(function (str) {
+                    return str.toLowerCase();
                   });
 
-                  if (!monsters) {
-                    return [false, "Your Google Sheets workbook must contain a sheet called 'Monsters'. Only found: '" + jsonifiedBody.sheets.map(function (sheet) {
-                      return sheet.properties.title;
-                    }).join(', ') + "'"];
+                  var _iterator5 = _createForOfIteratorHelper(_this3.monstersRequiredHeaders),
+                      _step5;
+
+                  try {
+                    for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+                      var key = _step5.value;
+
+                      if (Array.isArray(key)) {
+                        if (!key.find(function (option) {
+                          return headers.includes(option);
+                        })) {
+                          return [false, "Monsters are missing the required header: '".concat(key[0], "'")];
+                        }
+                      } else if (!headers.includes(key)) {
+                        return [false, "Monsters are missing the required header: '".concat(key, "'")];
+                      }
+                    }
+                  } catch (err) {
+                    _iterator5.e(err);
+                  } finally {
+                    _iterator5.f();
                   }
 
-                  var sources = jsonifiedBody.sheets.find(function (sheet) {
-                    return sheet.properties.title === 'Sources';
+                  return [true];
+                })["catch"](function (err) {
+                  console.error(err);
+                  return false;
+                });
+
+              case 7:
+                monstersValid = _context.sent;
+
+                if (monstersValid[0]) {
+                  _context.next = 10;
+                  break;
+                }
+
+                return _context.abrupt("return", monstersValid);
+
+              case 10:
+                _context.next = 12;
+                return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Sources?") + new URLSearchParams({
+                  key: this.key
+                })).then(function (response) {
+                  return response.json();
+                }).then(function (jsonifiedBody) {
+                  var headers = jsonifiedBody.values.splice(0, 1)[0].map(function (str) {
+                    return str.toLowerCase();
                   });
 
-                  if (!sources) {
-                    return [false, "Your Google Sheets workbook must contain a sheet called 'Sources'. Only found: '" + jsonifiedBody.sheets.map(function (sheet) {
-                      return sheet.properties.title;
-                    }).join(', ') + "'"];
+                  var _iterator6 = _createForOfIteratorHelper(_this3.sourcesRequiredHeaders),
+                      _step6;
+
+                  try {
+                    for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+                      var key = _step6.value;
+
+                      if (Array.isArray(key)) {
+                        if (!key.find(function (option) {
+                          return headers.includes(option);
+                        })) {
+                          return [false, "Sources are missing the required header: '".concat(key[0], "'")];
+                        }
+                      } else if (!headers.includes(key)) {
+                        return [false, "Sources are missing the required header: '".concat(key, "'")];
+                      }
+                    }
+                  } catch (err) {
+                    _iterator6.e(err);
+                  } finally {
+                    _iterator6.f();
                   }
 
-                  return [true, ''];
+                  return [true];
+                })["catch"](function (err) {
+                  console.error(err);
+                  return false;
                 });
 
-              case 2:
-                return _context.abrupt("return", _context.sent);
+              case 12:
+                sourcesValid = _context.sent;
 
-              case 3:
+                if (sourcesValid[0]) {
+                  _context.next = 15;
+                  break;
+                }
+
+                return _context.abrupt("return", sourcesValid);
+
+              case 15:
+                return _context.abrupt("return", [true, '']);
+
+              case 16:
               case "end":
                 return _context.stop();
             }
@@ -11965,7 +12058,7 @@ var Importer = /*#__PURE__*/function () {
     key: "_importJson",
     value: function () {
       var _importJson2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee9(resourceLocator) {
-        var data, _iterator5, _step5, source;
+        var data, _iterator7, _step7, source;
 
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee9$(_context9) {
           while (1) {
@@ -11973,17 +12066,17 @@ var Importer = /*#__PURE__*/function () {
               case 0:
                 _context9.prev = 0;
                 data = JSON.parse(resourceLocator);
-                _iterator5 = _createForOfIteratorHelper(data.sources);
+                _iterator7 = _createForOfIteratorHelper(data.sources);
 
                 try {
-                  for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-                    source = _step5.value;
+                  for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+                    source = _step7.value;
                     source.custom = true;
                   }
                 } catch (err) {
-                  _iterator5.e(err);
+                  _iterator7.e(err);
                 } finally {
-                  _iterator5.f();
+                  _iterator7.f();
                 }
 
                 return _context9.abrupt("return", data);
@@ -12183,9 +12276,9 @@ _defineProperty(Importer, "exampleFiles", {
   'csv-file': Importer._downloadExampleCSV
 });
 
-_defineProperty(Importer, "sourcesRequiredHeaders", ["name", "type", "shortname", "link"]);
+_defineProperty(Importer, "sourcesRequiredHeaders", ["name", "type", ["shortname", "short name"], "link"]);
 
-_defineProperty(Importer, "monstersRequiredHeaders", ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", ["lair", "lair?"], ["legendary", "legendary?"], "unique", "sources"]);
+_defineProperty(Importer, "monstersRequiredHeaders", ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", ["lair", "lair?"], ["legendary", "legendary?"], ["unique", "unique?"], "sources"]);
 
 _defineProperty(Importer, "loadersHtml", {
   'google-sheets': function googleSheets() {
@@ -12254,6 +12347,11 @@ var Monster = /*#__PURE__*/function () {
     this.data = data;
     this.cr = _constants_js__WEBPACK_IMPORTED_MODULE_0__["default"].CR[this.data.cr];
     this.slug = _helpers_js__WEBPACK_IMPORTED_MODULE_1__.slugify(this.data.name + '-' + this.data.sources + "-" + this.cr.string);
+
+    if (this.data.sources.includes("Monster-A-Day")) {
+      console.log(this.data.name);
+    }
+
     this.tags = this.data.tags ? this.data.tags.split(/\s*,\s*/).sort() : null;
     this.special = !!this.data.special;
     this.legendary = !!this.data.legendary;
@@ -12330,7 +12428,7 @@ var Monster = /*#__PURE__*/function () {
     key: "sourceEnabled",
     get: function get() {
       return this.sources.find(function (source) {
-        return source.reference.enabled;
+        return source.actual_source.enabled;
       });
     }
   }, {
diff --git a/src/index.html b/src/index.html
index 6c8e4b4b..d6af5c47 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1353,8 +1353,8 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 		</div>
 
 		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" x-cloak aria-modal="true" x-data="{
-            importerResourceLocator: '',
-            importerSourceType: 'csv-file',
+            importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
+            importerSourceType: 'google-sheets',
             importerHtml: '',
             step: 1,
             stagedMonsters: [],
diff --git a/src/js/importer.js b/src/js/importer.js
index 70c4d340..b8645c23 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -21,8 +21,8 @@ export default class Importer {
         'csv-file': this._downloadExampleCSV,
     }
 
-    static sourcesRequiredHeaders = ["name", "type", "shortname", "link"];
-    static monstersRequiredHeaders = ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", ["lair", "lair?"], ["legendary", "legendary?"], "unique", "sources"];
+    static sourcesRequiredHeaders = ["name", "type", ["shortname", "short name"], "link"];
+    static monstersRequiredHeaders = ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", ["lair", "lair?"], ["legendary", "legendary?"], ["unique", "unique?"], "sources"];
 
     static _validateSources(sources){
         for(let source of sources) {
@@ -30,10 +30,10 @@ export default class Importer {
             for (let key of this.sourcesRequiredHeaders) {
                 if(Array.isArray(key)) {
                     if (!key.find(option => sourceKeys.includes(option))) {
-                        return [false, `Sources are missing the required header: '${key[0]}' - Please refer to the example files.`];
+                        return [false, `Sources are missing the required header: '${key[0]}'`];
                     }
                 }else if (!sourceKeys.includes(key)) {
-                    return [false, `Sources are missing the required header: '${key}' - Please refer to the example files.`];
+                    return [false, `Sources are missing the required header: '${key}'`];
                 }
             }
         }
@@ -46,10 +46,10 @@ export default class Importer {
             for(let key of this.monstersRequiredHeaders){
                 if(Array.isArray(key)) {
                     if (!key.find(option => monsterKeys.includes(option))) {
-                        return [false, `Monsters are missing the required header: '${key[0]}' - Please refer to the example files.`];
+                        return [false, `Monsters are missing the required header: '${key[0]}'`];
                     }
                 }else if(!monsterKeys.includes(key)){
-                    return [false, `Monsters are missing the required header: '${key}' - Please refer to the example files.`];
+                    return [false, `Monsters are missing the required header: '${key}'`];
                 }
             }
         }
@@ -57,28 +57,77 @@ export default class Importer {
     }
 
     static async _validateGoogleSheets(resourceLocator) {
-        return await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}?` + new URLSearchParams({
-                key: this.key
-            }))
+
+        const initialLoad = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}?` + new URLSearchParams({
+            key: this.key
+        }))
             .then(response => response.json())
             .then(jsonifiedBody => {
-
-                if(jsonifiedBody.error){
+                if (jsonifiedBody.error) {
                     return [false, `Google responded with an error: "${jsonifiedBody.error.message}" - is your sheet public?`];
                 }
+                return [true];
+            });
 
-                const monsters = jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Monsters');
-                if(!monsters) {
-                    return [false, "Your Google Sheets workbook must contain a sheet called 'Monsters'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
-                }
+        if(!initialLoad[0]){
+            return initialLoad;
+        }
 
-                const sources = jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Sources');
-                if(!sources) {
-                    return [false, "Your Google Sheets workbook must contain a sheet called 'Sources'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
+        let monstersValid = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Monsters?` + new URLSearchParams({
+            key: this.key
+        }))
+            .then(response => response.json())
+            .then(jsonifiedBody => {
+                let headers = jsonifiedBody.values.splice(0, 1)[0].map(str => str.toLowerCase())
+
+                for(let key of this.monstersRequiredHeaders){
+                    if(Array.isArray(key)) {
+                        if (!key.find(option => headers.includes(option))) {
+                            return [false, `Monsters are missing the required header: '${key[0]}'`];
+                        }
+                    }else if(!headers.includes(key)){
+                        return [false, `Monsters are missing the required header: '${key}'`];
+                    }
                 }
+                return [true];
+            })
+            .catch(err => {
+                console.error(err)
+                return false;
+            });
 
-                return [true, ''];
+        if(!monstersValid[0]){
+            return monstersValid;
+        }
+
+        let sourcesValid = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Sources?` + new URLSearchParams({
+            key: this.key
+        }))
+            .then(response => response.json())
+            .then(jsonifiedBody => {
+                let headers = jsonifiedBody.values.splice(0, 1)[0].map(str => str.toLowerCase());
+
+                for(let key of this.sourcesRequiredHeaders){
+                    if(Array.isArray(key)) {
+                        if (!key.find(option => headers.includes(option))) {
+                            return [false, `Sources are missing the required header: '${key[0]}'`];
+                        }
+                    }else if(!headers.includes(key)){
+                        return [false, `Sources are missing the required header: '${key}'`];
+                    }
+                }
+                return [true];
+            })
+            .catch(err => {
+                console.error(err)
+                return false;
             });
+
+        if(!sourcesValid[0]){
+            return sourcesValid;
+        }
+
+        return [true, ''];
     }
 
     static async _validateJson(resourceLocator) {

From 32fa7e9fe680a30db5556e4b06ab89c17d29824c Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Sun, 22 May 2022 19:10:23 +0100
Subject: [PATCH 24/33] Add back initial sheet checking

---
 docs/js/app.js     | 20 ++++++++++++++++++++
 src/js/importer.js | 11 +++++++++++
 2 files changed, 31 insertions(+)

diff --git a/docs/js/app.js b/docs/js/app.js
index 0c07bcc5..f4d52402 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -11510,6 +11510,26 @@ var Importer = /*#__PURE__*/function () {
                     return [false, "Google responded with an error: \"".concat(jsonifiedBody.error.message, "\" - is your sheet public?")];
                   }
 
+                  var monsters = jsonifiedBody.sheets.find(function (sheet) {
+                    return sheet.properties.title === 'Monsters';
+                  });
+
+                  if (!monsters) {
+                    return [false, "Your Google Sheets workbook must contain a sheet called 'Monsters'. Only found: '" + jsonifiedBody.sheets.map(function (sheet) {
+                      return sheet.properties.title;
+                    }).join(', ') + "'"];
+                  }
+
+                  var sources = jsonifiedBody.sheets.find(function (sheet) {
+                    return sheet.properties.title === 'Sources';
+                  });
+
+                  if (!sources) {
+                    return [false, "Your Google Sheets workbook must contain a sheet called 'Sources'. Only found: '" + jsonifiedBody.sheets.map(function (sheet) {
+                      return sheet.properties.title;
+                    }).join(', ') + "'"];
+                  }
+
                   return [true];
                 });
 
diff --git a/src/js/importer.js b/src/js/importer.js
index b8645c23..ac5cc0d7 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -66,6 +66,17 @@ export default class Importer {
                 if (jsonifiedBody.error) {
                     return [false, `Google responded with an error: "${jsonifiedBody.error.message}" - is your sheet public?`];
                 }
+
+                const monsters = jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Monsters');
+                if(!monsters) {
+                    return [false, "Your Google Sheets workbook must contain a sheet called 'Monsters'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
+                }
+
+                const sources = jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Sources');
+                if(!sources) {
+                    return [false, "Your Google Sheets workbook must contain a sheet called 'Sources'. Only found: '" + (jsonifiedBody.sheets.map(sheet => sheet.properties.title).join(', ')) + "'"];
+                }
+
                 return [true];
             });
 

From 40cf7c11e3dd400ab960768d3facfa9ba0677c82 Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Sun, 22 May 2022 19:31:41 +0100
Subject: [PATCH 25/33] Added donate button

---
 docs/index.html | 6 +++---
 src/index.html  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index d6af5c47..ae418293 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -97,15 +97,15 @@
 					<div class="flex">
 						<div class="flex-shrink-0 flex items-center">
 							<a href="" class="flex items-center">
-								<img class="h-8 w-auto" src="images/header_logo.png" alt="Fantasy Calendar"> <span class="hidden md:inline pl-2 text-lg font-bold text-white">Kobold+ Fight Club</span>
+								<img class="h-8 w-auto" src="images/header_logo.png" alt="Kobold Plus Fight Club"> <span class="hidden md:inline pl-2 text-lg font-bold text-white">Kobold+ Fight Club</span>
 							</a>
 						</div>
 					</div>
 					<div class="hidden lg:flex text-white lg:-my-px lg:ml-6 lg:space-x-8 items-center">
                         <a @click="showKeyboardModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Keyboard Shortcuts <span class="inline-flex items-center px-1 py-0.5 rounded text-xs font-medium bg-emerald-800 text-emerald-100 ml-1">Ctrl+/</span></a>
                         <a @click="showImporterModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Import Custom Monsters</a>
-                        <a href="https://fantasy-calendar.com/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Fantasy Calendar</a>
-                        <a href="https://fantasycomputer.works/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">About</a>
+                        <a target="_blank" href="https://ko-fi.com/fantasycomputerworks" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Donate</a>
+                        <a target="_blank" href="https://fantasycomputer.works/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">About</a>
 						<a x-tippy="Toggle light mode (ctrl+shift+\)" @click="toggleTheme()" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300 h-full">
 							<i :class="{ 'fa-moon': theme === 'light', 'fa-sun': theme === 'dark' }" class="fa"></i>
 						</a>
diff --git a/src/index.html b/src/index.html
index d6af5c47..ae418293 100644
--- a/src/index.html
+++ b/src/index.html
@@ -97,15 +97,15 @@
 					<div class="flex">
 						<div class="flex-shrink-0 flex items-center">
 							<a href="" class="flex items-center">
-								<img class="h-8 w-auto" src="images/header_logo.png" alt="Fantasy Calendar"> <span class="hidden md:inline pl-2 text-lg font-bold text-white">Kobold+ Fight Club</span>
+								<img class="h-8 w-auto" src="images/header_logo.png" alt="Kobold Plus Fight Club"> <span class="hidden md:inline pl-2 text-lg font-bold text-white">Kobold+ Fight Club</span>
 							</a>
 						</div>
 					</div>
 					<div class="hidden lg:flex text-white lg:-my-px lg:ml-6 lg:space-x-8 items-center">
                         <a @click="showKeyboardModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Keyboard Shortcuts <span class="inline-flex items-center px-1 py-0.5 rounded text-xs font-medium bg-emerald-800 text-emerald-100 ml-1">Ctrl+/</span></a>
                         <a @click="showImporterModal = true" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Import Custom Monsters</a>
-                        <a href="https://fantasy-calendar.com/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Fantasy Calendar</a>
-                        <a href="https://fantasycomputer.works/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">About</a>
+                        <a target="_blank" href="https://ko-fi.com/fantasycomputerworks" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">Donate</a>
+                        <a target="_blank" href="https://fantasycomputer.works/" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300">About</a>
 						<a x-tippy="Toggle light mode (ctrl+shift+\)" @click="toggleTheme()" href="javascript:" class="inline-flex items-center px-1 text-sm font-medium text-emerald-300 hover:text-white hover:border-gray-300 h-full">
 							<i :class="{ 'fa-moon': theme === 'light', 'fa-sun': theme === 'dark' }" class="fa"></i>
 						</a>

From 212ddc1bd9f8eaa7522c2f79ee0da7a329cde13c Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Sun, 22 May 2022 21:51:01 +0100
Subject: [PATCH 26/33] Discard duplicate monsters

---
 docs/js/app.js    | 15 ++++++++-------
 src/js/app.js     | 15 +++++++++++----
 src/js/monster.js |  4 ----
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/docs/js/app.js b/docs/js/app.js
index f4d52402..b25ec1f2 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9693,11 +9693,17 @@ function app() {
     formatMonsters: function formatMonsters(data) {
       var _this6 = this;
 
-      this.allMonsters = this.allMonsters.concat(data.map(function (data) {
+      var newMonsters = data.map(function (data) {
         var monster = new _monster__WEBPACK_IMPORTED_MODULE_6__["default"](_this6, data);
+
+        if (_this6.monsterLookupTable[monster.slug]) {
+          return false;
+        }
+
         _this6.monsterLookupTable[monster.slug] = monster;
         return monster;
-      }));
+      }).filter(Boolean);
+      this.allMonsters = this.allMonsters.concat(newMonsters);
       var environments = Object.values(this.environments);
       environments.sort(function (a, b) {
         return a.value > b.label ? -1 : 1;
@@ -12367,11 +12373,6 @@ var Monster = /*#__PURE__*/function () {
     this.data = data;
     this.cr = _constants_js__WEBPACK_IMPORTED_MODULE_0__["default"].CR[this.data.cr];
     this.slug = _helpers_js__WEBPACK_IMPORTED_MODULE_1__.slugify(this.data.name + '-' + this.data.sources + "-" + this.cr.string);
-
-    if (this.data.sources.includes("Monster-A-Day")) {
-      console.log(this.data.name);
-    }
-
     this.tags = this.data.tags ? this.data.tags.split(/\s*,\s*/).sort() : null;
     this.special = !!this.data.special;
     this.legendary = !!this.data.legendary;
diff --git a/src/js/app.js b/src/js/app.js
index d5ca14d0..5e42e765 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -17,7 +17,7 @@ import Alpine from 'alpinejs'
 const internationalNumberFormat = new Intl.NumberFormat('en-US')
 
 function app() {
-    
+
     return {
 
         sourcesVersion: "2.1.0",
@@ -194,7 +194,7 @@ function app() {
                     return acc + (group.getsXP ? parseInt(group.players) : 0)
                 }, 0) + this.app.activePlayers.length;
             },
-            
+
             get totalExperiencePerPlayer(){
                 return Math.round(this.app.encounter.totalExp / this.totalPlayersToGainXP);
             },
@@ -406,15 +406,22 @@ function app() {
         },
 
         formatMonsters(data){
-            this.allMonsters = this.allMonsters.concat(data.map(data => {
+            const newMonsters = data.map(data => {
                 const monster = new Monster(this, data);
+                if(this.monsterLookupTable[monster.slug]){
+                    return false;
+                }
                 this.monsterLookupTable[monster.slug] = monster;
                 return monster;
-            }));
+            }).filter(Boolean);
+
+            this.allMonsters = this.allMonsters.concat(newMonsters);
+
             let environments = Object.values(this.environments);
             environments.sort((a, b) => {
                 return a.value > b.label ? -1 : 1;
             });
+
             environments.unshift({ value: "any", label: "Any Environment" });
             window.dispatchEvent(new CustomEvent('set-environments', { detail: environments }));
         },
diff --git a/src/js/monster.js b/src/js/monster.js
index 8154bdb6..27ffddb2 100644
--- a/src/js/monster.js
+++ b/src/js/monster.js
@@ -13,10 +13,6 @@ export default class Monster {
 
         this.slug = helpers.slugify(this.data.name+'-'+this.data.sources+"-"+this.cr.string);
 
-        if(this.data.sources.includes("Monster-A-Day")){
-            console.log(this.data.name)
-        }
-
         this.tags = this.data.tags ? this.data.tags.split(/\s*,\s*/).sort() : null;
 
         this.special = !!this.data.special;

From e65b8630ae729eff26bee0cfa29142ab01391c1f Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Sun, 22 May 2022 23:58:22 +0100
Subject: [PATCH 27/33] Fixed filter box heights, rearranged filters

---
 docs/css/styles.css |   1 +
 docs/index.html     | 183 ++++++++++++++++++++++----------------------
 docs/js/app.js      |  76 +++++++++++-------
 src/css/kobold.css  |   2 +-
 src/index.html      | 183 ++++++++++++++++++++++----------------------
 src/js/app.js       |   2 +-
 src/js/importer.js  |  33 ++++++--
 7 files changed, 257 insertions(+), 223 deletions(-)

diff --git a/docs/css/styles.css b/docs/css/styles.css
index c8fb278e..cecde60e 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -10244,6 +10244,7 @@ body .choices__input:focus{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+body .choices__input { min-width: 1ch; width: 1ch; }
 
 /* noUiSlider overrides */
 .noUi-target{
diff --git a/docs/index.html b/docs/index.html
index ae418293..98ef72db 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -757,13 +757,74 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 										</div>
 									</div>
 
+                                    <div>
+                                        <div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Creature type</div>
 
+                                        <div @mousedown.stop x-data="multiSelect($refs.creature_type, 'type', [
+												{ value: 'any', label: 'Any Type' },
+												{ value: 'aberration', label: 'Aberration' },
+												{ value: 'beast', label: 'Beast' },
+												{ value: 'celestial', label: 'Celestial' },
+												{ value: 'construct', label: 'Construct' },
+												{ value: 'dragon', label: 'Dragon' },
+												{ value: 'elemental', label: 'Elemental' },
+												{ value: 'fey', label: 'Fey' },
+												{ value: 'fiend', label: 'Fiend' },
+												{ value: 'giant', label: 'Giant' },
+												{ value: 'humanoid', label: 'Humanoid' },
+												{ value: 'monstrosity', label: 'Monstrosity' },
+												{ value: 'ooze', label: 'Ooze' },
+												{ value: 'plant', label: 'Plant' },
+												{ value: 'undead', label: 'Undead' },
+											])" @reset-filters.window="reset()">
+                                            <select x-ref="creature_type" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Native environment</div>
+
+                                        <div @mousedown.stop x-data="multiSelect($refs.environment, 'environment', [])" @reset-filters.window="reset()" @set-environments.window="options = $event.detail; setUp();">
+                                            <select x-ref="environment" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
+                                        </div>
+                                    </div>
+
+									<!-- Multi Select -->
 									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">
-											Alignment
+										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Size category</div>
+
+										<div @mousedown.stop x-data="multiSelect($refs.sizes, 'size', [
+												{value: 'any', label: 'Any Size' },
+												{value: 'tiny', label: 'Tiny' },
+												{value: 'small', label: 'Small' },
+												{value: 'medium', label: 'Medium' },
+												{value: 'large', label: 'Large' },
+												{value: 'huge', label: 'Huge' },
+												{value: 'gargantuan', label: 'Gargantuan' }
+											])" @reset-filters.window="reset()">
+											<select x-ref="sizes" :multiple="multiple" class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
 										</div>
+									</div>
+
+									<div>
+										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Legendary Status</div>
 
-										<div class="grid grid-cols-[12px_12px_repeat(12,_minmax(0,_1fr))] divide divide-gray-200 dark:divide-gray-600 gap-2 rounded-md bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 overflow-hidden p-2" x-data="{
+										<div @mousedown.stop x-data="multiSelect($refs.legendary, 'legendary', [
+												{ value: 'any', label: 'Any Legendary'},
+												{ value: 'ordinary', label: 'Ordinary'},
+												{ value: 'legendary', label: 'Legendary'},
+												{ value: 'legendary_lair', label: 'Legendary (in lair)'},
+											])" @reset-filters.window="reset()">
+											<select x-ref="legendary" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
+										</div>
+									</div>
+
+                                    <div>
+                                        <div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">
+                                            Alignment
+                                        </div>
+
+                                        <div class="grid grid-cols-[12px_12px_repeat(12,_minmax(0,_1fr))] divide divide-gray-200 dark:divide-gray-600 gap-2 rounded-md bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 overflow-hidden p-2" x-data="{
 												lawful_good: 1,
 												neutral_good: 2,
 												chaotic_good: 4,
@@ -825,94 +886,31 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 													this.total = 1023;
 												}
 											}" @reset-filters.window="reset()">
-											<div @click="toggle((lawful_good | neutral | chaotic_evil))" :class="classes(lawful_good | neutral | chaotic_evil)" class="col-span-2 rounded-tl-md dark:border-gray-600"></div>
-											<div @click="toggle((lawful_good | lawful_neutral | lawful_evil))" :class="classes(lawful_good | lawful_neutral | lawful_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-gavel"></i></div>
-											<div @click="toggle((neutral_good | neutral | neutral_evil))" :class="classes(neutral_good | neutral | neutral_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-scale-balanced"></i></div>
-											<div @click="toggle((chaotic_good | chaotic_neutral | chaotic_evil))" :class="classes(chaotic_good | chaotic_neutral | chaotic_evil)" class="col-span-4 h-8 rounded-t-md"><i :class="{ [randomIcon]: true }"></i></div>
-
-											<div @click="toggle((lawful_good | neutral_good | chaotic_good))" :class="classes(lawful_good | neutral_good | chaotic_good)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-dove"></i></div>
-											<div @click="toggle(lawful_good)" :class="classes(lawful_good)" class="col-span-4 h-12" x-tippy="Lawful Good">LG</div>
-											<div @click="toggle(neutral_good)" :class="classes(neutral_good)" class="col-span-4 h-12" x-tippy="Neutral Good">NG</div>
-											<div @click="toggle(chaotic_good)" :class="classes(chaotic_good)" class="col-span-4 h-12" x-tippy="Chaotic Good">CG</div>
-
-											<div @click="toggle((lawful_neutral | neutral | chaotic_neutral))" :class="classes(lawful_neutral | neutral | chaotic_neutral)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-face-meh"></i></div>
-											<div @click="toggle(lawful_neutral)" :class="classes(lawful_neutral)" class="col-span-4 h-12" x-tippy="Lawful Neutral">LN</div>
-											<div @click="toggle(neutral)" :class="classes(neutral)" class="col-span-4 h-12" x-tippy="Neutral">N</div>
-											<div @click="toggle(chaotic_neutral)" :class="classes(chaotic_neutral)" class="col-span-4 h-12" x-tippy="Chaotic Neutral">CN</div>
-
-											<div @click="toggle((lawful_evil | neutral_evil | chaotic_evil))" :class="classes(lawful_evil | neutral_evil | chaotic_evil)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-skull"></i></div>
-											<div @click="toggle(lawful_evil)" :class="classes(lawful_evil)" class="col-span-4 h-12" x-tippy="Lawful Evil">LE</div>
-											<div @click="toggle(neutral_evil)" :class="classes(neutral_evil)" class="col-span-4 h-12" x-tippy="Neutral Evil">NE</div>
-											<div @click="toggle(chaotic_evil)" :class="classes(chaotic_evil)" class="col-span-4 h-12" x-tippy="Chaotic Evil">CE</div>
-
-											<div @click="toggle((lawful_evil | neutral | chaotic_good))" :class="classes(lawful_evil | neutral | chaotic_good)" class="col-span-2 rounded-bl-md"></div>
-											<div @click="total = (total === 1023) ? 0 : 1023" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 1023) === 1023, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 1023) !== 1023 }" class="select-none text-gray-900 col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Any</div>
-											<div @click="total = total ^ 512" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 512) === 512, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 512) !== 512 }" class="select-none text-gray-900 rounded-br-md col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Unaligned</div>
-										</div>
-									</div>
-
-
-									<!-- Multi Select -->
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Size category</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.sizes, 'size', [
-												{value: 'any', label: 'Any Size' },
-												{value: 'tiny', label: 'Tiny' },
-												{value: 'small', label: 'Small' },
-												{value: 'medium', label: 'Medium' },
-												{value: 'large', label: 'Large' },
-												{value: 'huge', label: 'Huge' },
-												{value: 'gargantuan', label: 'Gargantuan' }
-											])" @reset-filters.window="reset()">
-											<select x-ref="sizes" :multiple="multiple" class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
-
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Creature type</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.creature_type, 'type', [
-												{ value: 'any', label: 'Any Type' },
-												{ value: 'aberration', label: 'Aberration' },
-												{ value: 'beast', label: 'Beast' },
-												{ value: 'celestial', label: 'Celestial' },
-												{ value: 'construct', label: 'Construct' },
-												{ value: 'dragon', label: 'Dragon' },
-												{ value: 'elemental', label: 'Elemental' },
-												{ value: 'fey', label: 'Fey' },
-												{ value: 'fiend', label: 'Fiend' },
-												{ value: 'giant', label: 'Giant' },
-												{ value: 'humanoid', label: 'Humanoid' },
-												{ value: 'monstrosity', label: 'Monstrosity' },
-												{ value: 'ooze', label: 'Ooze' },
-												{ value: 'plant', label: 'Plant' },
-												{ value: 'undead', label: 'Undead' },
-											])" @reset-filters.window="reset()">
-											<select x-ref="creature_type" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
-
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Native environment</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.environment, 'environment', [])" @reset-filters.window="reset()" @set-environments.window="options = $event.detail; setUp();">
-											<select x-ref="environment" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
-
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Legendary Status</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.legendary, 'legendary', [
-												{ value: 'any', label: 'Any Legendary'},
-												{ value: 'ordinary', label: 'Ordinary'},
-												{ value: 'legendary', label: 'Legendary'},
-												{ value: 'legendary_lair', label: 'Legendary (in lair)'},
-											])" @reset-filters.window="reset()">
-											<select x-ref="legendary" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
+                                            <div @click="toggle((lawful_good | neutral | chaotic_evil))" :class="classes(lawful_good | neutral | chaotic_evil)" class="col-span-2 rounded-tl-md dark:border-gray-600"></div>
+                                            <div @click="toggle((lawful_good | lawful_neutral | lawful_evil))" :class="classes(lawful_good | lawful_neutral | lawful_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-gavel"></i></div>
+                                            <div @click="toggle((neutral_good | neutral | neutral_evil))" :class="classes(neutral_good | neutral | neutral_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-scale-balanced"></i></div>
+                                            <div @click="toggle((chaotic_good | chaotic_neutral | chaotic_evil))" :class="classes(chaotic_good | chaotic_neutral | chaotic_evil)" class="col-span-4 h-8 rounded-t-md"><i :class="{ [randomIcon]: true }"></i></div>
+
+                                            <div @click="toggle((lawful_good | neutral_good | chaotic_good))" :class="classes(lawful_good | neutral_good | chaotic_good)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-dove"></i></div>
+                                            <div @click="toggle(lawful_good)" :class="classes(lawful_good)" class="col-span-4 h-12" x-tippy="Lawful Good">LG</div>
+                                            <div @click="toggle(neutral_good)" :class="classes(neutral_good)" class="col-span-4 h-12" x-tippy="Neutral Good">NG</div>
+                                            <div @click="toggle(chaotic_good)" :class="classes(chaotic_good)" class="col-span-4 h-12" x-tippy="Chaotic Good">CG</div>
+
+                                            <div @click="toggle((lawful_neutral | neutral | chaotic_neutral))" :class="classes(lawful_neutral | neutral | chaotic_neutral)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-face-meh"></i></div>
+                                            <div @click="toggle(lawful_neutral)" :class="classes(lawful_neutral)" class="col-span-4 h-12" x-tippy="Lawful Neutral">LN</div>
+                                            <div @click="toggle(neutral)" :class="classes(neutral)" class="col-span-4 h-12" x-tippy="Neutral">N</div>
+                                            <div @click="toggle(chaotic_neutral)" :class="classes(chaotic_neutral)" class="col-span-4 h-12" x-tippy="Chaotic Neutral">CN</div>
+
+                                            <div @click="toggle((lawful_evil | neutral_evil | chaotic_evil))" :class="classes(lawful_evil | neutral_evil | chaotic_evil)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-skull"></i></div>
+                                            <div @click="toggle(lawful_evil)" :class="classes(lawful_evil)" class="col-span-4 h-12" x-tippy="Lawful Evil">LE</div>
+                                            <div @click="toggle(neutral_evil)" :class="classes(neutral_evil)" class="col-span-4 h-12" x-tippy="Neutral Evil">NE</div>
+                                            <div @click="toggle(chaotic_evil)" :class="classes(chaotic_evil)" class="col-span-4 h-12" x-tippy="Chaotic Evil">CE</div>
+
+                                            <div @click="toggle((lawful_evil | neutral | chaotic_good))" :class="classes(lawful_evil | neutral | chaotic_good)" class="col-span-2 rounded-bl-md"></div>
+                                            <div @click="total = (total === 1023) ? 0 : 1023" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 1023) === 1023, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 1023) !== 1023 }" class="select-none text-gray-900 col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Any</div>
+                                            <div @click="total = total ^ 512" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 512) === 512, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 512) !== 512 }" class="select-none text-gray-900 rounded-br-md col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Unaligned</div>
+                                        </div>
+                                    </div>
 								</div>
 							</div>
 						</div>
@@ -1353,7 +1351,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 		</div>
 
 		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" x-cloak aria-modal="true" x-data="{
-            importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
+            importerResourceLocator: '',
             importerSourceType: 'google-sheets',
             importerHtml: '',
             step: 1,
@@ -1363,7 +1361,6 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
             importError: '',
             init(){
                 this.loadImporter();
-
                 this.$watch('importerResourceLocator', async value => [this.canImport, this.importError] = await Importer.canImport(value, this.importerSourceType));
             },
             loadImporter(){
diff --git a/docs/js/app.js b/docs/js/app.js
index b25ec1f2..6db8f8ce 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9220,7 +9220,7 @@ function app() {
     showEncounterModal: false,
     showPartyModal: false,
     showKeyboardModal: false,
-    showImporterModal: true,
+    showImporterModal: false,
     mobileEncounterTab: false,
     filters: {},
     searchPlaceholder: "",
@@ -11501,12 +11501,22 @@ var Importer = /*#__PURE__*/function () {
       var _validateGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee(resourceLocator) {
         var _this3 = this;
 
-        var initialLoad, monstersValid, sourcesValid;
+        var parts, i, initialLoad, monstersValid, sourcesValid;
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _context.next = 2;
+                if (resourceLocator.toLowerCase().startsWith("https://docs.google.com/spreadsheets/d/")) {
+                  parts = resourceLocator.split('/');
+
+                  for (i = 0; i < parts.length; i++) {
+                    if (parts[i] === "d") {
+                      resourceLocator = parts[i + 1];
+                    }
+                  }
+                }
+
+                _context.next = 3;
                 return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "?") + new URLSearchParams({
                   key: this.key
                 })).then(function (response) {
@@ -11539,18 +11549,18 @@ var Importer = /*#__PURE__*/function () {
                   return [true];
                 });
 
-              case 2:
+              case 3:
                 initialLoad = _context.sent;
 
                 if (initialLoad[0]) {
-                  _context.next = 5;
+                  _context.next = 6;
                   break;
                 }
 
                 return _context.abrupt("return", initialLoad);
 
-              case 5:
-                _context.next = 7;
+              case 6:
+                _context.next = 8;
                 return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Monsters?") + new URLSearchParams({
                   key: this.key
                 })).then(function (response) {
@@ -11589,18 +11599,18 @@ var Importer = /*#__PURE__*/function () {
                   return false;
                 });
 
-              case 7:
+              case 8:
                 monstersValid = _context.sent;
 
                 if (monstersValid[0]) {
-                  _context.next = 10;
+                  _context.next = 11;
                   break;
                 }
 
                 return _context.abrupt("return", monstersValid);
 
-              case 10:
-                _context.next = 12;
+              case 11:
+                _context.next = 13;
                 return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Sources?") + new URLSearchParams({
                   key: this.key
                 })).then(function (response) {
@@ -11639,20 +11649,20 @@ var Importer = /*#__PURE__*/function () {
                   return false;
                 });
 
-              case 12:
+              case 13:
                 sourcesValid = _context.sent;
 
                 if (sourcesValid[0]) {
-                  _context.next = 15;
+                  _context.next = 16;
                   break;
                 }
 
                 return _context.abrupt("return", sourcesValid);
 
-              case 15:
+              case 16:
                 return _context.abrupt("return", [true, '']);
 
-              case 16:
+              case 17:
               case "end":
                 return _context.stop();
             }
@@ -11967,12 +11977,22 @@ var Importer = /*#__PURE__*/function () {
     key: "_importGoogleSheets",
     value: function () {
       var _importGoogleSheets2 = _asyncToGenerator( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee7(resourceLocator) {
-        var monsters, sources;
+        var parts, i, monsters, sources;
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee7$(_context7) {
           while (1) {
             switch (_context7.prev = _context7.next) {
               case 0:
-                _context7.next = 2;
+                if (resourceLocator.toLowerCase().startsWith("https://docs.google.com/spreadsheets/d/")) {
+                  parts = resourceLocator.split('/');
+
+                  for (i = 0; i < parts.length; i++) {
+                    if (parts[i] === "d") {
+                      resourceLocator = parts[i + 1];
+                    }
+                  }
+                }
+
+                _context7.next = 3;
                 return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Monsters?") + new URLSearchParams({
                   key: this.key
                 })).then(function (response) {
@@ -11996,7 +12016,7 @@ var Importer = /*#__PURE__*/function () {
                       "init": item[headers.indexOf("init")],
                       "lair": item[headers.indexOf("lair?")] || item[headers.indexOf("lair")],
                       "legendary": item[headers.indexOf("legendary?")] || item[headers.indexOf("legendary")],
-                      "unique": item[headers.indexOf("unique?")],
+                      "unique": item[headers.indexOf("unique")] || item[headers.indexOf("unique?")],
                       "sources": item[headers.indexOf("sources")]
                     };
                   });
@@ -12004,9 +12024,9 @@ var Importer = /*#__PURE__*/function () {
                   return console.error(err);
                 });
 
-              case 2:
+              case 3:
                 monsters = _context7.sent;
-                _context7.next = 5;
+                _context7.next = 6;
                 return fetch("https://sheets.googleapis.com/v4/spreadsheets/".concat(resourceLocator, "/values/Sources?") + new URLSearchParams({
                   key: this.key
                 })).then(function (response) {
@@ -12029,14 +12049,14 @@ var Importer = /*#__PURE__*/function () {
                   return console.error(err);
                 });
 
-              case 5:
+              case 6:
                 sources = _context7.sent;
                 return _context7.abrupt("return", {
                   sources: sources,
                   monsters: monsters
                 });
 
-              case 7:
+              case 8:
               case "end":
                 return _context7.stop();
             }
@@ -12170,7 +12190,7 @@ var Importer = /*#__PURE__*/function () {
           "ac": 10,
           "hp": 41,
           "init": -2,
-          "lair": "",
+          "lair": "lair",
           "legendary": "legendary",
           "unique": "unique",
           "sources": "Another Custom Source: 32"
@@ -12259,7 +12279,7 @@ var Importer = /*#__PURE__*/function () {
       _helpers__WEBPACK_IMPORTED_MODULE_1__.downloadFile("example_sources.csv", sources, "text/csv");
       var monsters = "name,cr,size,type,tags,section,alignment,environment,ac,hp,init,lair,legendary,unique,sources\n";
       monsters += "Zombie,1/4,Medium,Undead,,Zombies,neutral evil,\"aquatic, arctic, cave, coast, desert, dungeon, forest, grassland, mountain, ruins, swamp, underground, urban\",8,22, -2,,,,Custom Source: 5\n";
-      monsters += "Bigger Zombie,1/2,Large,Undead,,Zombies,neutral evil,my custom place,10,41,-2,,legendary,unique,Another Custom Source: 32";
+      monsters += "Bigger Zombie,1/2,Large,Undead,,Zombies,neutral evil,my custom place,10,41,-2,lair,legendary,unique,Another Custom Source: 32";
       _helpers__WEBPACK_IMPORTED_MODULE_1__.downloadFile("example_monsters.csv", monsters, "text/csv");
     }
   }, {
@@ -12308,16 +12328,16 @@ _defineProperty(Importer, "monstersRequiredHeaders", ["name", "cr", "size", "typ
 
 _defineProperty(Importer, "loadersHtml", {
   'google-sheets': function googleSheets() {
-    return "\n                <label for=\"import_resource_locator\">Sheets ID</label>\n                <input name=\"import_resource_locator\" id=\"import_resource_locator\" type=\"text\" x-model=\"importerResourceLocator\">\n            ";
+    return "\n                <label class=\"mb-1\" for=\"import_resource_locator\">Insert the Google Sheet link or <a class=\"primary-link\" target=\"_blank\" href=\"https://docs.google.com/spreadsheets/d/1WtUjr2DosRHlbraFKEbUfQ0QwWfPlBv6sgF605RMoKQ/edit?usp=sharing\">make your own</a></label>\n                <input name=\"import_resource_locator\" id=\"import_resource_locator\" type=\"text\" x-model=\"importerResourceLocator\">\n            ";
   },
   'json-raw': function jsonRaw() {
-    return "\n                <label for=\"import_resource_locator\">Raw JSON</label> - <a href=\"javascript:true\" class=\"primary-link\" @click=\"downloadExampleJson\">download example</a>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
+    return "\n                <label class=\"mb-1\" for=\"import_resource_locator\">Input raw JSON or <a href=\"javascript:true\" class=\"primary-link\" @click=\"downloadExampleJson\">download an example file to edit</a></label>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
   },
   'json-file': function jsonFile() {
-    return "\n                <label class=\"block\" id=\"file_input_label\" for=\"import_resource_locator_file\">Upload JSON text file below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleFile\">download an example file to edit</a></label>                \n                <input accept=\"application/json\" class=\"block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"importerResourceLocator = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file\" type=\"file\">\n            ";
+    return "\n                <label class=\"mb-1 block\" id=\"file_input_label\" for=\"import_resource_locator_file\">Upload JSON text file below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleFile\">download an example file to edit</a></label>                \n                <input accept=\"application/json\" class=\"block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"importerResourceLocator = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file\" type=\"file\">\n            ";
   },
   'csv-file': function csvFile() {
-    return "\n                <label>Upload CSV text files below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleFile\">download example files to edit</a></label>\n                <div class=\"grid grid-cols-2 gap-2 mt-2\">                \n                    <label class=\"\" id=\"file_input_label_1\" for=\"import_resource_locator_file_1\">Sources CSV</label>                \n                    <label class=\"\" id=\"file_input_label_1\" for=\"import_resource_locator_file_2\">Monsters CSV</label>                \n                    <input accept=\"text/csv\" class=\" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[0] = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file_1\" type=\"file\">\n                    <input accept=\"text/csv\" class=\" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[1] = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file_2\" type=\"file\">\n                </div>\n            ";
+    return "\n                <label class=\"mb-1\">Upload CSV text files below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleFile\">download example files to edit</a></label>\n                <div class=\"grid grid-cols-2 gap-2 mt-2\">                \n                    <label class=\"\" id=\"file_input_label_1\" for=\"import_resource_locator_file_1\">Sources CSV</label>                \n                    <label class=\"\" id=\"file_input_label_1\" for=\"import_resource_locator_file_2\">Monsters CSV</label>                \n                    <input accept=\"text/csv\" class=\" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[0] = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file_1\" type=\"file\">\n                    <input accept=\"text/csv\" class=\" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[1] = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file_2\" type=\"file\">\n                </div>\n            ";
   }
 });
 
diff --git a/src/css/kobold.css b/src/css/kobold.css
index f3a29070..17cc830e 100644
--- a/src/css/kobold.css
+++ b/src/css/kobold.css
@@ -95,7 +95,7 @@ body .choices__item { @apply text-gray-700 dark:text-gray-300; }
 body .choices__placeholder { @apply opacity-100; }
 body .choices__list--dropdown, body .choices__list[aria-expanded] { @apply border-gray-300 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300 z-50; }
 body .is-open .choices__list--multiple { @apply border-gray-300 dark:border-gray-700 shadow-lg; }
-body .choices__input { @apply focus:ring-0 border-none px-0; }
+body .choices__input { @apply focus:ring-0 border-none px-0; min-width: 1ch; width: 1ch; }
 
 /* noUiSlider overrides */
 .noUi-target {
diff --git a/src/index.html b/src/index.html
index ae418293..98ef72db 100644
--- a/src/index.html
+++ b/src/index.html
@@ -757,13 +757,74 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 										</div>
 									</div>
 
+                                    <div>
+                                        <div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Creature type</div>
 
+                                        <div @mousedown.stop x-data="multiSelect($refs.creature_type, 'type', [
+												{ value: 'any', label: 'Any Type' },
+												{ value: 'aberration', label: 'Aberration' },
+												{ value: 'beast', label: 'Beast' },
+												{ value: 'celestial', label: 'Celestial' },
+												{ value: 'construct', label: 'Construct' },
+												{ value: 'dragon', label: 'Dragon' },
+												{ value: 'elemental', label: 'Elemental' },
+												{ value: 'fey', label: 'Fey' },
+												{ value: 'fiend', label: 'Fiend' },
+												{ value: 'giant', label: 'Giant' },
+												{ value: 'humanoid', label: 'Humanoid' },
+												{ value: 'monstrosity', label: 'Monstrosity' },
+												{ value: 'ooze', label: 'Ooze' },
+												{ value: 'plant', label: 'Plant' },
+												{ value: 'undead', label: 'Undead' },
+											])" @reset-filters.window="reset()">
+                                            <select x-ref="creature_type" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Native environment</div>
+
+                                        <div @mousedown.stop x-data="multiSelect($refs.environment, 'environment', [])" @reset-filters.window="reset()" @set-environments.window="options = $event.detail; setUp();">
+                                            <select x-ref="environment" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
+                                        </div>
+                                    </div>
+
+									<!-- Multi Select -->
 									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">
-											Alignment
+										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Size category</div>
+
+										<div @mousedown.stop x-data="multiSelect($refs.sizes, 'size', [
+												{value: 'any', label: 'Any Size' },
+												{value: 'tiny', label: 'Tiny' },
+												{value: 'small', label: 'Small' },
+												{value: 'medium', label: 'Medium' },
+												{value: 'large', label: 'Large' },
+												{value: 'huge', label: 'Huge' },
+												{value: 'gargantuan', label: 'Gargantuan' }
+											])" @reset-filters.window="reset()">
+											<select x-ref="sizes" :multiple="multiple" class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
 										</div>
+									</div>
+
+									<div>
+										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Legendary Status</div>
 
-										<div class="grid grid-cols-[12px_12px_repeat(12,_minmax(0,_1fr))] divide divide-gray-200 dark:divide-gray-600 gap-2 rounded-md bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 overflow-hidden p-2" x-data="{
+										<div @mousedown.stop x-data="multiSelect($refs.legendary, 'legendary', [
+												{ value: 'any', label: 'Any Legendary'},
+												{ value: 'ordinary', label: 'Ordinary'},
+												{ value: 'legendary', label: 'Legendary'},
+												{ value: 'legendary_lair', label: 'Legendary (in lair)'},
+											])" @reset-filters.window="reset()">
+											<select x-ref="legendary" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
+										</div>
+									</div>
+
+                                    <div>
+                                        <div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">
+                                            Alignment
+                                        </div>
+
+                                        <div class="grid grid-cols-[12px_12px_repeat(12,_minmax(0,_1fr))] divide divide-gray-200 dark:divide-gray-600 gap-2 rounded-md bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 overflow-hidden p-2" x-data="{
 												lawful_good: 1,
 												neutral_good: 2,
 												chaotic_good: 4,
@@ -825,94 +886,31 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
 													this.total = 1023;
 												}
 											}" @reset-filters.window="reset()">
-											<div @click="toggle((lawful_good | neutral | chaotic_evil))" :class="classes(lawful_good | neutral | chaotic_evil)" class="col-span-2 rounded-tl-md dark:border-gray-600"></div>
-											<div @click="toggle((lawful_good | lawful_neutral | lawful_evil))" :class="classes(lawful_good | lawful_neutral | lawful_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-gavel"></i></div>
-											<div @click="toggle((neutral_good | neutral | neutral_evil))" :class="classes(neutral_good | neutral | neutral_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-scale-balanced"></i></div>
-											<div @click="toggle((chaotic_good | chaotic_neutral | chaotic_evil))" :class="classes(chaotic_good | chaotic_neutral | chaotic_evil)" class="col-span-4 h-8 rounded-t-md"><i :class="{ [randomIcon]: true }"></i></div>
-
-											<div @click="toggle((lawful_good | neutral_good | chaotic_good))" :class="classes(lawful_good | neutral_good | chaotic_good)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-dove"></i></div>
-											<div @click="toggle(lawful_good)" :class="classes(lawful_good)" class="col-span-4 h-12" x-tippy="Lawful Good">LG</div>
-											<div @click="toggle(neutral_good)" :class="classes(neutral_good)" class="col-span-4 h-12" x-tippy="Neutral Good">NG</div>
-											<div @click="toggle(chaotic_good)" :class="classes(chaotic_good)" class="col-span-4 h-12" x-tippy="Chaotic Good">CG</div>
-
-											<div @click="toggle((lawful_neutral | neutral | chaotic_neutral))" :class="classes(lawful_neutral | neutral | chaotic_neutral)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-face-meh"></i></div>
-											<div @click="toggle(lawful_neutral)" :class="classes(lawful_neutral)" class="col-span-4 h-12" x-tippy="Lawful Neutral">LN</div>
-											<div @click="toggle(neutral)" :class="classes(neutral)" class="col-span-4 h-12" x-tippy="Neutral">N</div>
-											<div @click="toggle(chaotic_neutral)" :class="classes(chaotic_neutral)" class="col-span-4 h-12" x-tippy="Chaotic Neutral">CN</div>
-
-											<div @click="toggle((lawful_evil | neutral_evil | chaotic_evil))" :class="classes(lawful_evil | neutral_evil | chaotic_evil)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-skull"></i></div>
-											<div @click="toggle(lawful_evil)" :class="classes(lawful_evil)" class="col-span-4 h-12" x-tippy="Lawful Evil">LE</div>
-											<div @click="toggle(neutral_evil)" :class="classes(neutral_evil)" class="col-span-4 h-12" x-tippy="Neutral Evil">NE</div>
-											<div @click="toggle(chaotic_evil)" :class="classes(chaotic_evil)" class="col-span-4 h-12" x-tippy="Chaotic Evil">CE</div>
-
-											<div @click="toggle((lawful_evil | neutral | chaotic_good))" :class="classes(lawful_evil | neutral | chaotic_good)" class="col-span-2 rounded-bl-md"></div>
-											<div @click="total = (total === 1023) ? 0 : 1023" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 1023) === 1023, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 1023) !== 1023 }" class="select-none text-gray-900 col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Any</div>
-											<div @click="total = total ^ 512" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 512) === 512, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 512) !== 512 }" class="select-none text-gray-900 rounded-br-md col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Unaligned</div>
-										</div>
-									</div>
-
-
-									<!-- Multi Select -->
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Size category</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.sizes, 'size', [
-												{value: 'any', label: 'Any Size' },
-												{value: 'tiny', label: 'Tiny' },
-												{value: 'small', label: 'Small' },
-												{value: 'medium', label: 'Medium' },
-												{value: 'large', label: 'Large' },
-												{value: 'huge', label: 'Huge' },
-												{value: 'gargantuan', label: 'Gargantuan' }
-											])" @reset-filters.window="reset()">
-											<select x-ref="sizes" :multiple="multiple" class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
-
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Creature type</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.creature_type, 'type', [
-												{ value: 'any', label: 'Any Type' },
-												{ value: 'aberration', label: 'Aberration' },
-												{ value: 'beast', label: 'Beast' },
-												{ value: 'celestial', label: 'Celestial' },
-												{ value: 'construct', label: 'Construct' },
-												{ value: 'dragon', label: 'Dragon' },
-												{ value: 'elemental', label: 'Elemental' },
-												{ value: 'fey', label: 'Fey' },
-												{ value: 'fiend', label: 'Fiend' },
-												{ value: 'giant', label: 'Giant' },
-												{ value: 'humanoid', label: 'Humanoid' },
-												{ value: 'monstrosity', label: 'Monstrosity' },
-												{ value: 'ooze', label: 'Ooze' },
-												{ value: 'plant', label: 'Plant' },
-												{ value: 'undead', label: 'Undead' },
-											])" @reset-filters.window="reset()">
-											<select x-ref="creature_type" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
-
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Native environment</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.environment, 'environment', [])" @reset-filters.window="reset()" @set-environments.window="options = $event.detail; setUp();">
-											<select x-ref="environment" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
-
-									<div>
-										<div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Legendary Status</div>
-
-										<div @mousedown.stop x-data="multiSelect($refs.legendary, 'legendary', [
-												{ value: 'any', label: 'Any Legendary'},
-												{ value: 'ordinary', label: 'Ordinary'},
-												{ value: 'legendary', label: 'Legendary'},
-												{ value: 'legendary_lair', label: 'Legendary (in lair)'},
-											])" @reset-filters.window="reset()">
-											<select x-ref="legendary" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
-										</div>
-									</div>
+                                            <div @click="toggle((lawful_good | neutral | chaotic_evil))" :class="classes(lawful_good | neutral | chaotic_evil)" class="col-span-2 rounded-tl-md dark:border-gray-600"></div>
+                                            <div @click="toggle((lawful_good | lawful_neutral | lawful_evil))" :class="classes(lawful_good | lawful_neutral | lawful_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-gavel"></i></div>
+                                            <div @click="toggle((neutral_good | neutral | neutral_evil))" :class="classes(neutral_good | neutral | neutral_evil)" class="col-span-4 h-8 rounded-t-md"><i class="fa fa-scale-balanced"></i></div>
+                                            <div @click="toggle((chaotic_good | chaotic_neutral | chaotic_evil))" :class="classes(chaotic_good | chaotic_neutral | chaotic_evil)" class="col-span-4 h-8 rounded-t-md"><i :class="{ [randomIcon]: true }"></i></div>
+
+                                            <div @click="toggle((lawful_good | neutral_good | chaotic_good))" :class="classes(lawful_good | neutral_good | chaotic_good)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-dove"></i></div>
+                                            <div @click="toggle(lawful_good)" :class="classes(lawful_good)" class="col-span-4 h-12" x-tippy="Lawful Good">LG</div>
+                                            <div @click="toggle(neutral_good)" :class="classes(neutral_good)" class="col-span-4 h-12" x-tippy="Neutral Good">NG</div>
+                                            <div @click="toggle(chaotic_good)" :class="classes(chaotic_good)" class="col-span-4 h-12" x-tippy="Chaotic Good">CG</div>
+
+                                            <div @click="toggle((lawful_neutral | neutral | chaotic_neutral))" :class="classes(lawful_neutral | neutral | chaotic_neutral)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-face-meh"></i></div>
+                                            <div @click="toggle(lawful_neutral)" :class="classes(lawful_neutral)" class="col-span-4 h-12" x-tippy="Lawful Neutral">LN</div>
+                                            <div @click="toggle(neutral)" :class="classes(neutral)" class="col-span-4 h-12" x-tippy="Neutral">N</div>
+                                            <div @click="toggle(chaotic_neutral)" :class="classes(chaotic_neutral)" class="col-span-4 h-12" x-tippy="Chaotic Neutral">CN</div>
+
+                                            <div @click="toggle((lawful_evil | neutral_evil | chaotic_evil))" :class="classes(lawful_evil | neutral_evil | chaotic_evil)" class="col-span-2 w-8 rounded-l-md"><i class="fa fa-skull"></i></div>
+                                            <div @click="toggle(lawful_evil)" :class="classes(lawful_evil)" class="col-span-4 h-12" x-tippy="Lawful Evil">LE</div>
+                                            <div @click="toggle(neutral_evil)" :class="classes(neutral_evil)" class="col-span-4 h-12" x-tippy="Neutral Evil">NE</div>
+                                            <div @click="toggle(chaotic_evil)" :class="classes(chaotic_evil)" class="col-span-4 h-12" x-tippy="Chaotic Evil">CE</div>
+
+                                            <div @click="toggle((lawful_evil | neutral | chaotic_good))" :class="classes(lawful_evil | neutral | chaotic_good)" class="col-span-2 rounded-bl-md"></div>
+                                            <div @click="total = (total === 1023) ? 0 : 1023" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 1023) === 1023, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 1023) !== 1023 }" class="select-none text-gray-900 col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Any</div>
+                                            <div @click="total = total ^ 512" :class="{ 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-800 dark:hover:bg-emerald-900': (total & 512) === 512, 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border': (total & 512) !== 512 }" class="select-none text-gray-900 rounded-br-md col-span-6 cursor-pointer grid place-items-center h-8 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:text-white">Unaligned</div>
+                                        </div>
+                                    </div>
 								</div>
 							</div>
 						</div>
@@ -1353,7 +1351,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
 		</div>
 
 		<div x-show="showImporterModal" class="fixed z-10 inset-0 overflow-y-auto scrollbar" aria-labelledby="modal-title" role="dialog" x-cloak aria-modal="true" x-data="{
-            importerResourceLocator: '163Yp3ljFrwDR9GJuobN8zOHjYGpTmJfXrXKNDU6Pais',
+            importerResourceLocator: '',
             importerSourceType: 'google-sheets',
             importerHtml: '',
             step: 1,
@@ -1363,7 +1361,6 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Keybo
             importError: '',
             init(){
                 this.loadImporter();
-
                 this.$watch('importerResourceLocator', async value => [this.canImport, this.importError] = await Importer.canImport(value, this.importerSourceType));
             },
             loadImporter(){
diff --git a/src/js/app.js b/src/js/app.js
index 5e42e765..1381ab88 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -29,7 +29,7 @@ function app() {
         showEncounterModal: false,
         showPartyModal: false,
         showKeyboardModal: false,
-        showImporterModal: true,
+        showImporterModal: false,
 
         mobileEncounterTab: false,
 
diff --git a/src/js/importer.js b/src/js/importer.js
index ac5cc0d7..bbe3cee7 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -58,6 +58,15 @@ export default class Importer {
 
     static async _validateGoogleSheets(resourceLocator) {
 
+        if(resourceLocator.toLowerCase().startsWith("https://docs.google.com/spreadsheets/d/")){
+            const parts = resourceLocator.split('/');
+            for(let i = 0; i < parts.length; i++){
+                if(parts[i] === "d"){
+                    resourceLocator = parts[i+1];
+                }
+            }
+        }
+
         const initialLoad = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}?` + new URLSearchParams({
             key: this.key
         }))
@@ -234,13 +243,13 @@ export default class Importer {
     static loadersHtml = {
         'google-sheets': () => {
             return `
-                <label for="import_resource_locator">Sheets ID</label>
+                <label class="mb-1" for="import_resource_locator">Insert the Google Sheet link or <a class="primary-link" target="_blank" href="https://docs.google.com/spreadsheets/d/1WtUjr2DosRHlbraFKEbUfQ0QwWfPlBv6sgF605RMoKQ/edit?usp=sharing">make your own</a></label>
                 <input name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
             `;
         },
         'json-raw': () => {
             return `
-                <label for="import_resource_locator">Raw JSON</label> - <a href="javascript:true" class="primary-link" @click="downloadExampleJson">download example</a>
+                <label class="mb-1" for="import_resource_locator">Input raw JSON or <a href="javascript:true" class="primary-link" @click="downloadExampleJson">download an example file to edit</a></label>
                 <div class="mt-1">
                     <textarea id="import_resource_locator" x-model="importerResourceLocator" rows="4" name="comment" class="border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600"></textarea>
                 </div>
@@ -248,13 +257,13 @@ export default class Importer {
         },
         'json-file': () => {
             return `
-                <label class="block" id="file_input_label" for="import_resource_locator_file">Upload JSON text file below or <a class="primary-link" href="javascript:true" @click="downloadExampleFile">download an example file to edit</a></label>                
+                <label class="mb-1 block" id="file_input_label" for="import_resource_locator_file">Upload JSON text file below or <a class="primary-link" href="javascript:true" @click="downloadExampleFile">download an example file to edit</a></label>                
                 <input accept="application/json" class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" @change="importerResourceLocator = $event.target.files[0]" aria-describedby="file_input_label" id="import_resource_locator_file" type="file">
             `;
         },
         'csv-file': () => {
             return `
-                <label>Upload CSV text files below or <a class="primary-link" href="javascript:true" @click="downloadExampleFile">download example files to edit</a></label>
+                <label class="mb-1">Upload CSV text files below or <a class="primary-link" href="javascript:true" @click="downloadExampleFile">download example files to edit</a></label>
                 <div class="grid grid-cols-2 gap-2 mt-2">                
                     <label class="" id="file_input_label_1" for="import_resource_locator_file_1">Sources CSV</label>                
                     <label class="" id="file_input_label_1" for="import_resource_locator_file_2">Monsters CSV</label>                
@@ -278,6 +287,16 @@ export default class Importer {
     }
 
     static async _importGoogleSheets(resourceLocator) {
+
+        if(resourceLocator.toLowerCase().startsWith("https://docs.google.com/spreadsheets/d/")){
+            const parts = resourceLocator.split('/');
+            for(let i = 0; i < parts.length; i++){
+                if(parts[i] === "d"){
+                    resourceLocator = parts[i+1];
+                }
+            }
+        }
+
         let monsters = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${resourceLocator}/values/Monsters?` + new URLSearchParams({
             key: this.key
         }))
@@ -298,7 +317,7 @@ export default class Importer {
                     "init": item[headers.indexOf("init")],
                     "lair": item[headers.indexOf("lair?")] || item[headers.indexOf("lair")],
                     "legendary": item[headers.indexOf("legendary?")] || item[headers.indexOf("legendary")],
-                    "unique": item[headers.indexOf("unique?")],
+                    "unique": item[headers.indexOf("unique")] || item[headers.indexOf("unique?")],
                     "sources": item[headers.indexOf("sources")],
                 }));
             })
@@ -393,7 +412,7 @@ export default class Importer {
                     "ac": 10,
                     "hp": 41,
                     "init": -2,
-                    "lair": "",
+                    "lair": "lair",
                     "legendary": "legendary",
                     "unique": "unique",
                     "sources": "Another Custom Source: 32"
@@ -449,7 +468,7 @@ export default class Importer {
 
         let monsters = "name,cr,size,type,tags,section,alignment,environment,ac,hp,init,lair,legendary,unique,sources\n";
         monsters += `Zombie,1/4,Medium,Undead,,Zombies,neutral evil,"aquatic, arctic, cave, coast, desert, dungeon, forest, grassland, mountain, ruins, swamp, underground, urban",8,22, -2,,,,Custom Source: 5\n`
-        monsters += `Bigger Zombie,1/2,Large,Undead,,Zombies,neutral evil,my custom place,10,41,-2,,legendary,unique,Another Custom Source: 32`
+        monsters += `Bigger Zombie,1/2,Large,Undead,,Zombies,neutral evil,my custom place,10,41,-2,lair,legendary,unique,Another Custom Source: 32`
 
         helpers.downloadFile("example_monsters.csv", monsters, "text/csv");
 

From 0047af4edb63206c159d6ecb693d9e5a562a4eb1 Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Mon, 23 May 2022 00:02:40 +0100
Subject: [PATCH 28/33] Remove vestigial code

---
 docs/js/app.js     | 5 -----
 src/js/importer.js | 5 -----
 2 files changed, 10 deletions(-)

diff --git a/docs/js/app.js b/docs/js/app.js
index 6db8f8ce..b5039325 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -12317,11 +12317,6 @@ _defineProperty(Importer, "validators", {
   'csv-file': Importer._validateCSV
 });
 
-_defineProperty(Importer, "exampleFiles", {
-  'json-file': Importer._downloadExampleJson,
-  'csv-file': Importer._downloadExampleCSV
-});
-
 _defineProperty(Importer, "sourcesRequiredHeaders", ["name", "type", ["shortname", "short name"], "link"]);
 
 _defineProperty(Importer, "monstersRequiredHeaders", ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", ["lair", "lair?"], ["legendary", "legendary?"], ["unique", "unique?"], "sources"]);
diff --git a/src/js/importer.js b/src/js/importer.js
index bbe3cee7..eec6ff74 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -16,11 +16,6 @@ export default class Importer {
         'csv-file': this._validateCSV,
     }
 
-    static exampleFiles = {
-        'json-file': this._downloadExampleJson,
-        'csv-file': this._downloadExampleCSV,
-    }
-
     static sourcesRequiredHeaders = ["name", "type", ["shortname", "short name"], "link"];
     static monstersRequiredHeaders = ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", ["lair", "lair?"], ["legendary", "legendary?"], ["unique", "unique?"], "sources"];
 

From fdac1e51c52b26e88effd4fbc1e8bda8366bad3c Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Tue, 24 May 2022 08:59:23 -0400
Subject: [PATCH 29/33] fix reference

---
 docs/js/app.js     | 6 ++++--
 src/js/importer.js | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/js/app.js b/docs/js/app.js
index b5039325..9ea66780 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -12303,6 +12303,8 @@ var Importer = /*#__PURE__*/function () {
   return Importer;
 }();
 
+_defineProperty(Importer, "key", 'AIzaSyCsGMnu4_lqVj1E0Hsyk7V8CbRpJJauSTM');
+
 _defineProperty(Importer, "loaders", {
   'google-sheets': Importer._importGoogleSheets,
   'json-raw': Importer._importJson,
@@ -12323,10 +12325,10 @@ _defineProperty(Importer, "monstersRequiredHeaders", ["name", "cr", "size", "typ
 
 _defineProperty(Importer, "loadersHtml", {
   'google-sheets': function googleSheets() {
-    return "\n                <label class=\"mb-1\" for=\"import_resource_locator\">Insert the Google Sheet link or <a class=\"primary-link\" target=\"_blank\" href=\"https://docs.google.com/spreadsheets/d/1WtUjr2DosRHlbraFKEbUfQ0QwWfPlBv6sgF605RMoKQ/edit?usp=sharing\">make your own</a></label>\n                <input name=\"import_resource_locator\" id=\"import_resource_locator\" type=\"text\" x-model=\"importerResourceLocator\">\n            ";
+    return "\n                <label class=\"mb-1\" for=\"import_resource_locator\">Insert a Google Sheet ID or link. To create your own, you can <a class=\"primary-link\" target=\"_blank\" href=\"https://docs.google.com/spreadsheets/d/1WtUjr2DosRHlbraFKEbUfQ0QwWfPlBv6sgF605RMoKQ/edit?usp=sharing\">refer to this example</a></label>\n                <input name=\"import_resource_locator\" id=\"import_resource_locator\" type=\"text\" x-model=\"importerResourceLocator\">\n            ";
   },
   'json-raw': function jsonRaw() {
-    return "\n                <label class=\"mb-1\" for=\"import_resource_locator\">Input raw JSON or <a href=\"javascript:true\" class=\"primary-link\" @click=\"downloadExampleJson\">download an example file to edit</a></label>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
+    return "\n                <label class=\"mb-1\" for=\"import_resource_locator\">Input raw JSON or <a href=\"javascript:true\" class=\"primary-link\" @click=\"downloadExampleFile\">download an example file to edit</a></label>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
   },
   'json-file': function jsonFile() {
     return "\n                <label class=\"mb-1 block\" id=\"file_input_label\" for=\"import_resource_locator_file\">Upload JSON text file below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleFile\">download an example file to edit</a></label>                \n                <input accept=\"application/json\" class=\"block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"importerResourceLocator = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file\" type=\"file\">\n            ";
diff --git a/src/js/importer.js b/src/js/importer.js
index eec6ff74..e4b26e40 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -1,6 +1,8 @@
 import * as helpers from './helpers';
 
 export default class Importer {
+    static key = 'AIzaSyCsGMnu4_lqVj1E0Hsyk7V8CbRpJJauSTM';
+
 
     static loaders = {
         'google-sheets': this._importGoogleSheets,
@@ -238,13 +240,13 @@ export default class Importer {
     static loadersHtml = {
         'google-sheets': () => {
             return `
-                <label class="mb-1" for="import_resource_locator">Insert the Google Sheet link or <a class="primary-link" target="_blank" href="https://docs.google.com/spreadsheets/d/1WtUjr2DosRHlbraFKEbUfQ0QwWfPlBv6sgF605RMoKQ/edit?usp=sharing">make your own</a></label>
+                <label class="mb-1" for="import_resource_locator">Insert a Google Sheet ID or link. To create your own, you can <a class="primary-link" target="_blank" href="https://docs.google.com/spreadsheets/d/1WtUjr2DosRHlbraFKEbUfQ0QwWfPlBv6sgF605RMoKQ/edit?usp=sharing">refer to this example</a></label>
                 <input name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
             `;
         },
         'json-raw': () => {
             return `
-                <label class="mb-1" for="import_resource_locator">Input raw JSON or <a href="javascript:true" class="primary-link" @click="downloadExampleJson">download an example file to edit</a></label>
+                <label class="mb-1" for="import_resource_locator">Input raw JSON or <a href="javascript:true" class="primary-link" @click="downloadExampleFile">download an example file to edit</a></label>
                 <div class="mt-1">
                     <textarea id="import_resource_locator" x-model="importerResourceLocator" rows="4" name="comment" class="border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600"></textarea>
                 </div>

From 8cde295b41c2064eee6879f9f29813bc8b6b460e Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Tue, 24 May 2022 08:59:46 -0400
Subject: [PATCH 30/33] Revert "Remove vestigial code"

This reverts commit 0047af4edb63206c159d6ecb693d9e5a562a4eb1.
---
 docs/js/app.js     | 5 +++++
 src/js/importer.js | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/docs/js/app.js b/docs/js/app.js
index 9ea66780..945cb824 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -12319,6 +12319,11 @@ _defineProperty(Importer, "validators", {
   'csv-file': Importer._validateCSV
 });
 
+_defineProperty(Importer, "exampleFiles", {
+  'json-file': Importer._downloadExampleJson,
+  'csv-file': Importer._downloadExampleCSV
+});
+
 _defineProperty(Importer, "sourcesRequiredHeaders", ["name", "type", ["shortname", "short name"], "link"]);
 
 _defineProperty(Importer, "monstersRequiredHeaders", ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", ["lair", "lair?"], ["legendary", "legendary?"], ["unique", "unique?"], "sources"]);
diff --git a/src/js/importer.js b/src/js/importer.js
index e4b26e40..ea31769f 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -18,6 +18,11 @@ export default class Importer {
         'csv-file': this._validateCSV,
     }
 
+    static exampleFiles = {
+        'json-file': this._downloadExampleJson,
+        'csv-file': this._downloadExampleCSV,
+    }
+
     static sourcesRequiredHeaders = ["name", "type", ["shortname", "short name"], "link"];
     static monstersRequiredHeaders = ["name", "cr", "size", "type", "tags", "section", "alignment", "environment", "ac", "hp", "init", ["lair", "lair?"], ["legendary", "legendary?"], ["unique", "unique?"], "sources"];
 

From 90a512cbfdbcea2c02f03e1d7553d03fd172df6a Mon Sep 17 00:00:00 2001
From: V13Axel <alex@stechstudio.com>
Date: Tue, 24 May 2022 09:01:04 -0400
Subject: [PATCH 31/33] Fix examples

---
 docs/js/app.js     | 1 +
 src/js/importer.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/js/app.js b/docs/js/app.js
index 945cb824..b018205f 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -12320,6 +12320,7 @@ _defineProperty(Importer, "validators", {
 });
 
 _defineProperty(Importer, "exampleFiles", {
+  'json-raw': Importer._downloadExampleJson,
   'json-file': Importer._downloadExampleJson,
   'csv-file': Importer._downloadExampleCSV
 });
diff --git a/src/js/importer.js b/src/js/importer.js
index ea31769f..b6c08299 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -19,6 +19,7 @@ export default class Importer {
     }
 
     static exampleFiles = {
+        'json-raw': this._downloadExampleJson,
         'json-file': this._downloadExampleJson,
         'csv-file': this._downloadExampleCSV,
     }

From 908bb7c391ee8300ea03208af774cebb4d2a9f77 Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Sat, 28 May 2022 13:54:30 +0100
Subject: [PATCH 32/33] Custom monster importer notifications

---
 docs/css/styles.css |  8 ++++++++
 docs/index.html     |  5 ++++-
 docs/js/app.js      | 18 ++++++++++++++++++
 src/index.html      |  5 ++++-
 src/js/app.js       | 19 +++++++++++++++++++
 5 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/docs/css/styles.css b/docs/css/styles.css
index cecde60e..1b90b6a1 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -9770,6 +9770,14 @@ input[type=text]:disabled{
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
+.text-6xl{
+  font-size: 3.75rem;
+  line-height: 1;
+}
+.text-4xl{
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
 .font-bold{
   font-weight: 700;
 }
diff --git a/docs/index.html b/docs/index.html
index 98ef72db..b33c640f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1578,12 +1578,15 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
                             init: function() {
                                 setTimeout(() => this.show = true, 100);
                                 if(!this.info.sticky) {
-                                    setTimeout(() => this.show = false, 3000);
+                                    setTimeout(() => { this.remove() }, 3000);
                                     setTimeout(() => delete notifications[index], 4000);
                                 }
                             },
                             remove: function() {
                                 this.show = false;
+                                if(this.info.callback){
+                                    this.info.callback();
+                                }
                             }
                          }"
 					 x-show="show"
diff --git a/docs/js/app.js b/docs/js/app.js
index b018205f..34125f60 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9221,6 +9221,7 @@ function app() {
     showPartyModal: false,
     showKeyboardModal: false,
     showImporterModal: false,
+    hasShownCustomMonstersNotification: alpinejs__WEBPACK_IMPORTED_MODULE_10__["default"].$persist(false).as('hasShownCustomMonstersNotification'),
     mobileEncounterTab: false,
     filters: {},
     searchPlaceholder: "",
@@ -9409,6 +9410,23 @@ function app() {
           return source.enabled;
         });
       });
+
+      if (!this.hasShownCustomMonstersNotification) {
+        setTimeout(function () {
+          dispatchEvent(new CustomEvent('notification', {
+            detail: {
+              title: 'Custom Monsters have arrived!',
+              body: 'Add more creatures to challenge your players - click on the "Import Custom Monsters" in the top bar to get started!',
+              icon: 'fa-skull text-4xl',
+              icon_color: 'text-emerald-600',
+              sticky: true,
+              callback: function callback() {
+                _this.hasShownCustomMonstersNotification = true;
+              }
+            }
+          }));
+        }, 1000);
+      }
     },
 
     get monsters() {
diff --git a/src/index.html b/src/index.html
index 98ef72db..b33c640f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1578,12 +1578,15 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
                             init: function() {
                                 setTimeout(() => this.show = true, 100);
                                 if(!this.info.sticky) {
-                                    setTimeout(() => this.show = false, 3000);
+                                    setTimeout(() => { this.remove() }, 3000);
                                     setTimeout(() => delete notifications[index], 4000);
                                 }
                             },
                             remove: function() {
                                 this.show = false;
+                                if(this.info.callback){
+                                    this.info.callback();
+                                }
                             }
                          }"
 					 x-show="show"
diff --git a/src/js/app.js b/src/js/app.js
index 1381ab88..9ad2f38c 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -31,6 +31,8 @@ function app() {
         showKeyboardModal: false,
         showImporterModal: false,
 
+        hasShownCustomMonstersNotification: Alpine.$persist(false).as('hasShownCustomMonstersNotification'),
+
         mobileEncounterTab: false,
 
         filters: {},
@@ -222,6 +224,23 @@ function app() {
             }
 
             this.$watch('sources', () => { this.enabledSources = Object.values(this.sources).filter(source => source.enabled) });
+
+            if(!this.hasShownCustomMonstersNotification){
+                setTimeout(() => {
+                    dispatchEvent(new CustomEvent('notification', {
+                        detail: {
+                            title: 'Custom Monsters have arrived!',
+                            body: 'Add more creatures to challenge your players - click on the "Import Custom Monsters" in the top bar to get started!',
+                            icon: 'fa-skull text-4xl',
+                            icon_color: 'text-emerald-600',
+                            sticky: true,
+                            callback: () => {
+                                this.hasShownCustomMonstersNotification = true;
+                            }
+                        }
+                    }));
+                }, 1000)
+            }
         },
 
         get monsters(){

From 275baa438ee47dbfaaebf2824b29edabb2a7522b Mon Sep 17 00:00:00 2001
From: Haxxer <adamoresten@gmail.com>
Date: Sat, 28 May 2022 14:18:05 +0100
Subject: [PATCH 33/33] Automatically populate creature types

---
 docs/css/styles.css |  4 ----
 docs/index.html     | 20 ++---------------
 docs/js/app.js      | 54 +++++++++++++++++++++++++++++++--------------
 src/index.html      | 20 ++---------------
 src/js/app.js       | 31 ++++++++++++++++++++++++--
 src/js/importer.js  | 12 +++++-----
 src/js/monster.js   | 12 ----------
 7 files changed, 77 insertions(+), 76 deletions(-)

diff --git a/docs/css/styles.css b/docs/css/styles.css
index 1b90b6a1..9364f3a1 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -9770,10 +9770,6 @@ input[type=text]:disabled{
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
-.text-6xl{
-  font-size: 3.75rem;
-  line-height: 1;
-}
 .text-4xl{
   font-size: 2.25rem;
   line-height: 2.5rem;
diff --git a/docs/index.html b/docs/index.html
index b33c640f..a959f087 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -760,23 +760,7 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
                                     <div>
                                         <div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Creature type</div>
 
-                                        <div @mousedown.stop x-data="multiSelect($refs.creature_type, 'type', [
-												{ value: 'any', label: 'Any Type' },
-												{ value: 'aberration', label: 'Aberration' },
-												{ value: 'beast', label: 'Beast' },
-												{ value: 'celestial', label: 'Celestial' },
-												{ value: 'construct', label: 'Construct' },
-												{ value: 'dragon', label: 'Dragon' },
-												{ value: 'elemental', label: 'Elemental' },
-												{ value: 'fey', label: 'Fey' },
-												{ value: 'fiend', label: 'Fiend' },
-												{ value: 'giant', label: 'Giant' },
-												{ value: 'humanoid', label: 'Humanoid' },
-												{ value: 'monstrosity', label: 'Monstrosity' },
-												{ value: 'ooze', label: 'Ooze' },
-												{ value: 'plant', label: 'Plant' },
-												{ value: 'undead', label: 'Undead' },
-											])" @reset-filters.window="reset()">
+                                        <div @mousedown.stop x-data="multiSelect($refs.creature_type, 'type', [])" @reset-filters.window="reset()" @set-creature-types.window="options = $event.detail; setUp();">
                                             <select x-ref="creature_type" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
                                         </div>
                                     </div>
@@ -1443,7 +1427,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 										<option value="google-sheets">Google Sheets</option>
 										<option value="json-raw">Raw JSON</option>
 										<option value="json-file">JSON File</option>
-										<option value="csv-file">CSV File</option>
+										<option value="csv-file">CSV Files</option>
 									</optgroup>
 								</select>
 
diff --git a/docs/js/app.js b/docs/js/app.js
index 34125f60..85fcad3e 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -9722,7 +9722,24 @@ function app() {
         return monster;
       }).filter(Boolean);
       this.allMonsters = this.allMonsters.concat(newMonsters);
-      var environments = Object.values(this.environments);
+      var environments = {};
+      var creatureTypes = new Set();
+      var creatureSizes = new Set();
+      this.allMonsters.forEach(function (monster) {
+        monster.environments.split(',').forEach(function (environment) {
+          if (environment && !environments[environment]) {
+            var label = environment = environment.trim();
+            label = label.slice(0, 1).toUpperCase() + label.slice(1);
+            environments[environment] = {
+              value: environment,
+              label: label
+            };
+          }
+        });
+        creatureTypes.add(monster.data.type);
+        creatureSizes.add(monster.data.size);
+      });
+      environments = Object.values(environments);
       environments.sort(function (a, b) {
         return a.value > b.label ? -1 : 1;
       });
@@ -9733,6 +9750,21 @@ function app() {
       window.dispatchEvent(new CustomEvent('set-environments', {
         detail: environments
       }));
+      creatureTypes = Array.from(creatureTypes);
+      creatureTypes.sort();
+      creatureTypes = creatureTypes.map(function (type) {
+        return {
+          label: type,
+          value: type.toLowerCase()
+        };
+      });
+      creatureTypes.unshift({
+        value: "any",
+        label: "Any Type"
+      });
+      window.dispatchEvent(new CustomEvent('set-creature-types', {
+        detail: creatureTypes
+      }));
     },
     deleteImportedSource: function deleteImportedSource(sourceName) {
       var sourceToDelete = this.sources[sourceName];
@@ -11541,7 +11573,7 @@ var Importer = /*#__PURE__*/function () {
                   return response.json();
                 }).then(function (jsonifiedBody) {
                   if (jsonifiedBody.error) {
-                    return [false, "Google responded with an error: \"".concat(jsonifiedBody.error.message, "\" - is your sheet public?")];
+                    return [false, "Google responded with an error: \"".concat(jsonifiedBody.error.message, "\"")];
                   }
 
                   var monsters = jsonifiedBody.sheets.find(function (sheet) {
@@ -12349,16 +12381,16 @@ _defineProperty(Importer, "monstersRequiredHeaders", ["name", "cr", "size", "typ
 
 _defineProperty(Importer, "loadersHtml", {
   'google-sheets': function googleSheets() {
-    return "\n                <label class=\"mb-1\" for=\"import_resource_locator\">Insert a Google Sheet ID or link. To create your own, you can <a class=\"primary-link\" target=\"_blank\" href=\"https://docs.google.com/spreadsheets/d/1WtUjr2DosRHlbraFKEbUfQ0QwWfPlBv6sgF605RMoKQ/edit?usp=sharing\">refer to this example</a></label>\n                <input name=\"import_resource_locator\" id=\"import_resource_locator\" type=\"text\" x-model=\"importerResourceLocator\">\n            ";
+    return "\n                <label class=\"mb-1\" for=\"import_resource_locator\">Insert a Google Sheet ID or link. To create your own, you can <a class=\"primary-link\" target=\"_blank\" href=\"https://docs.google.com/spreadsheets/d/1WtUjr2DosRHlbraFKEbUfQ0QwWfPlBv6sgF605RMoKQ/edit?usp=sharing\">refer to this example.</a></label>\n                <input name=\"import_resource_locator\" id=\"import_resource_locator\" type=\"text\" x-model=\"importerResourceLocator\">\n            ";
   },
   'json-raw': function jsonRaw() {
-    return "\n                <label class=\"mb-1\" for=\"import_resource_locator\">Input raw JSON or <a href=\"javascript:true\" class=\"primary-link\" @click=\"downloadExampleFile\">download an example file to edit</a></label>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
+    return "\n                <label class=\"mb-1\" for=\"import_resource_locator\">Input raw JSON or <a href=\"javascript:true\" class=\"primary-link\" @click=\"downloadExampleFile\">download an example file to edit.</a></label>\n                <div class=\"mt-1\">\n                    <textarea id=\"import_resource_locator\" x-model=\"importerResourceLocator\" rows=\"4\" name=\"comment\" class=\"border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600\"></textarea>\n                </div>\n            ";
   },
   'json-file': function jsonFile() {
-    return "\n                <label class=\"mb-1 block\" id=\"file_input_label\" for=\"import_resource_locator_file\">Upload JSON text file below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleFile\">download an example file to edit</a></label>                \n                <input accept=\"application/json\" class=\"block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"importerResourceLocator = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file\" type=\"file\">\n            ";
+    return "\n                <label class=\"mb-1 block\" id=\"file_input_label\" for=\"import_resource_locator_file\">Upload JSON text file below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleFile\">download an example file to edit.</a></label>                \n                <input accept=\"application/json\" class=\"block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"importerResourceLocator = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file\" type=\"file\">\n            ";
   },
   'csv-file': function csvFile() {
-    return "\n                <label class=\"mb-1\">Upload CSV text files below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleFile\">download example files to edit</a></label>\n                <div class=\"grid grid-cols-2 gap-2 mt-2\">                \n                    <label class=\"\" id=\"file_input_label_1\" for=\"import_resource_locator_file_1\">Sources CSV</label>                \n                    <label class=\"\" id=\"file_input_label_1\" for=\"import_resource_locator_file_2\">Monsters CSV</label>                \n                    <input accept=\"text/csv\" class=\" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[0] = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file_1\" type=\"file\">\n                    <input accept=\"text/csv\" class=\" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[1] = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file_2\" type=\"file\">\n                </div>\n            ";
+    return "\n                <label class=\"mb-1\">Upload CSV text files below or <a class=\"primary-link\" href=\"javascript:true\" @click=\"downloadExampleFile\">download example files to edit.</a></label>\n                <div class=\"grid grid-cols-2 gap-2 mt-2\">                \n                    <label class=\"\" id=\"file_input_label_1\" for=\"import_resource_locator_file_1\">Sources CSV</label>                \n                    <label class=\"\" id=\"file_input_label_1\" for=\"import_resource_locator_file_2\">Monsters CSV</label>                \n                    <input accept=\"text/csv\" class=\" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[0] = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file_1\" type=\"file\">\n                    <input accept=\"text/csv\" class=\" text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400\" @change=\"if(!Array.isArray(importerResourceLocator)){ importerResourceLocator = [] }; importerResourceLocator[1] = $event.target.files[0]\" aria-describedby=\"file_input_label\" id=\"import_resource_locator_file_2\" type=\"file\">\n                </div>\n            ";
   }
 });
 
@@ -12420,16 +12452,6 @@ var Monster = /*#__PURE__*/function () {
     this.lair = !!this.data.lair;
     this.unique = !!this.data.unique;
     this.alignment = this.data.alignment ? Monster.parseAlignment(this.data.alignment) : "";
-    this.environments.split(',').forEach(function (environment) {
-      if (environment && !_this.app.environments[environment]) {
-        var label = environment = environment.trim();
-        label = label.slice(0, 1).toUpperCase() + label.slice(1);
-        _this.app.environments[environment] = {
-          value: environment,
-          label: label
-        };
-      }
-    });
     this.searchable = [this.data.name, this.data.section, this.data.type, this.data.size, this.data.alignment ? this.alignment.text : "", this.data.cr.string].concat(this.tags).join("|").toLowerCase();
     this.sources = this.data.sources.split(', ').map(function (str) {
       var _str$split = str.split(": "),
diff --git a/src/index.html b/src/index.html
index b33c640f..a959f087 100644
--- a/src/index.html
+++ b/src/index.html
@@ -760,23 +760,7 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200" id="slide-over-
                                     <div>
                                         <div class="block font-medium text-gray-700 dark:text-gray-300 mb-1">Creature type</div>
 
-                                        <div @mousedown.stop x-data="multiSelect($refs.creature_type, 'type', [
-												{ value: 'any', label: 'Any Type' },
-												{ value: 'aberration', label: 'Aberration' },
-												{ value: 'beast', label: 'Beast' },
-												{ value: 'celestial', label: 'Celestial' },
-												{ value: 'construct', label: 'Construct' },
-												{ value: 'dragon', label: 'Dragon' },
-												{ value: 'elemental', label: 'Elemental' },
-												{ value: 'fey', label: 'Fey' },
-												{ value: 'fiend', label: 'Fiend' },
-												{ value: 'giant', label: 'Giant' },
-												{ value: 'humanoid', label: 'Humanoid' },
-												{ value: 'monstrosity', label: 'Monstrosity' },
-												{ value: 'ooze', label: 'Ooze' },
-												{ value: 'plant', label: 'Plant' },
-												{ value: 'undead', label: 'Undead' },
-											])" @reset-filters.window="reset()">
+                                        <div @mousedown.stop x-data="multiSelect($refs.creature_type, 'type', [])" @reset-filters.window="reset()" @set-creature-types.window="options = $event.detail; setUp();">
                                             <select x-ref="creature_type" multiple class="inline-block mb-2 mr-2 mt-1 w-auto pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm rounded-md"></select>
                                         </div>
                                     </div>
@@ -1443,7 +1427,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Impor
 										<option value="google-sheets">Google Sheets</option>
 										<option value="json-raw">Raw JSON</option>
 										<option value="json-file">JSON File</option>
-										<option value="csv-file">CSV File</option>
+										<option value="csv-file">CSV Files</option>
 									</optgroup>
 								</select>
 
diff --git a/src/js/app.js b/src/js/app.js
index 9ad2f38c..d3aa62a2 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -436,13 +436,40 @@ function app() {
 
             this.allMonsters = this.allMonsters.concat(newMonsters);
 
-            let environments = Object.values(this.environments);
+            let environments = {};
+            let creatureTypes = new Set();
+            let creatureSizes = new Set();
+            this.allMonsters.forEach(monster => {
+                monster.environments.split(',').forEach(environment => {
+                    if(environment && !environments[environment]){
+                        let label = environment = environment.trim();
+                        label = label.slice(0,1).toUpperCase() + label.slice(1);
+                        environments[environment] = {
+                            value: environment,
+                            label: label
+                        }
+                    }
+                });
+
+                creatureTypes.add(monster.data.type)
+                creatureSizes.add(monster.data.size)
+            });
+
+            environments = Object.values(environments);
             environments.sort((a, b) => {
                 return a.value > b.label ? -1 : 1;
             });
-
             environments.unshift({ value: "any", label: "Any Environment" });
             window.dispatchEvent(new CustomEvent('set-environments', { detail: environments }));
+
+            creatureTypes = Array.from(creatureTypes)
+            creatureTypes.sort();
+            creatureTypes = creatureTypes.map(type => ({
+                label: type,
+                value: type.toLowerCase(),
+            }));
+            creatureTypes.unshift({ value: "any", label: "Any Type" });
+            window.dispatchEvent(new CustomEvent('set-creature-types', { detail: creatureTypes }));
         },
 
         deleteImportedSource(sourceName){
diff --git a/src/js/importer.js b/src/js/importer.js
index b6c08299..725c7298 100644
--- a/src/js/importer.js
+++ b/src/js/importer.js
@@ -1,8 +1,8 @@
 import * as helpers from './helpers';
 
 export default class Importer {
-    static key = 'AIzaSyCsGMnu4_lqVj1E0Hsyk7V8CbRpJJauSTM';
 
+    static key = 'AIzaSyCsGMnu4_lqVj1E0Hsyk7V8CbRpJJauSTM';
 
     static loaders = {
         'google-sheets': this._importGoogleSheets,
@@ -76,7 +76,7 @@ export default class Importer {
             .then(response => response.json())
             .then(jsonifiedBody => {
                 if (jsonifiedBody.error) {
-                    return [false, `Google responded with an error: "${jsonifiedBody.error.message}" - is your sheet public?`];
+                    return [false, `Google responded with an error: "${jsonifiedBody.error.message}"`];
                 }
 
                 const monsters = jsonifiedBody.sheets.find(sheet => sheet.properties.title === 'Monsters');
@@ -246,13 +246,13 @@ export default class Importer {
     static loadersHtml = {
         'google-sheets': () => {
             return `
-                <label class="mb-1" for="import_resource_locator">Insert a Google Sheet ID or link. To create your own, you can <a class="primary-link" target="_blank" href="https://docs.google.com/spreadsheets/d/1WtUjr2DosRHlbraFKEbUfQ0QwWfPlBv6sgF605RMoKQ/edit?usp=sharing">refer to this example</a></label>
+                <label class="mb-1" for="import_resource_locator">Insert a Google Sheet ID or link. To create your own, you can <a class="primary-link" target="_blank" href="https://docs.google.com/spreadsheets/d/1WtUjr2DosRHlbraFKEbUfQ0QwWfPlBv6sgF605RMoKQ/edit?usp=sharing">refer to this example.</a></label>
                 <input name="import_resource_locator" id="import_resource_locator" type="text" x-model="importerResourceLocator">
             `;
         },
         'json-raw': () => {
             return `
-                <label class="mb-1" for="import_resource_locator">Input raw JSON or <a href="javascript:true" class="primary-link" @click="downloadExampleFile">download an example file to edit</a></label>
+                <label class="mb-1" for="import_resource_locator">Input raw JSON or <a href="javascript:true" class="primary-link" @click="downloadExampleFile">download an example file to edit.</a></label>
                 <div class="mt-1">
                     <textarea id="import_resource_locator" x-model="importerResourceLocator" rows="4" name="comment" class="border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 block w-full rounded-md lg:rounded-r-none sm:text-sm disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400 text-gray-600"></textarea>
                 </div>
@@ -260,13 +260,13 @@ export default class Importer {
         },
         'json-file': () => {
             return `
-                <label class="mb-1 block" id="file_input_label" for="import_resource_locator_file">Upload JSON text file below or <a class="primary-link" href="javascript:true" @click="downloadExampleFile">download an example file to edit</a></label>                
+                <label class="mb-1 block" id="file_input_label" for="import_resource_locator_file">Upload JSON text file below or <a class="primary-link" href="javascript:true" @click="downloadExampleFile">download an example file to edit.</a></label>                
                 <input accept="application/json" class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" @change="importerResourceLocator = $event.target.files[0]" aria-describedby="file_input_label" id="import_resource_locator_file" type="file">
             `;
         },
         'csv-file': () => {
             return `
-                <label class="mb-1">Upload CSV text files below or <a class="primary-link" href="javascript:true" @click="downloadExampleFile">download example files to edit</a></label>
+                <label class="mb-1">Upload CSV text files below or <a class="primary-link" href="javascript:true" @click="downloadExampleFile">download example files to edit.</a></label>
                 <div class="grid grid-cols-2 gap-2 mt-2">                
                     <label class="" id="file_input_label_1" for="import_resource_locator_file_1">Sources CSV</label>                
                     <label class="" id="file_input_label_1" for="import_resource_locator_file_2">Monsters CSV</label>                
diff --git a/src/js/monster.js b/src/js/monster.js
index 27ffddb2..879b1213 100644
--- a/src/js/monster.js
+++ b/src/js/monster.js
@@ -21,18 +21,6 @@ export default class Monster {
         this.unique = !!this.data.unique;
         this.alignment = this.data.alignment ? Monster.parseAlignment(this.data.alignment) : "";
 
-        this.environments.split(',').forEach(environment => {
-
-            if(environment && !this.app.environments[environment]){
-                let label = environment = environment.trim();
-                label = label.slice(0,1).toUpperCase() + label.slice(1);
-                this.app.environments[environment] = {
-                    value: environment,
-                    label: label
-                }
-            }
-        });
-
         this.searchable = [
             this.data.name,
             this.data.section,