@schukai/monster 3.80.3 → 3.80.5

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 
 
+## [3.80.5] - 2024-10-12
+
+### Bug Fixes
+
+- code optimisation and better error handling [#251](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/251)
+
+
+
+## [3.80.4] - 2024-10-12
+
+### Bug Fixes
+
+- defaultValue is now zero [#251](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/251)
+- optimize slect remote filter function [#251](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/251)
+
+
+
 ## [3.80.3] - 2024-10-11
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.11","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.80.3"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.11","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.80.5"}

package/source/components/form/select.mjs

@@ -229,6 +229,12 @@ const statusOrRemoveBadgesElementSymbol = Symbol("statusOrRemoveBadgesElement");
  */
 const areOptionsAvailableAndInitSymbol = Symbol("@@areOptionsAvailableAndInit");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const disabledRequestMarker = Symbol("@@disabledRequestMarker");
+
 /**
  * @private
  * @type {number}
@@ -276,7 +282,10 @@ const FILTER_POSITION_INLINE = "inline";
  *
  * @example /examples/components/form/select-with-options Select with options
  * @example /examples/components/form/select-multiple Multiple selection
+ * @example /examples/components/form/select-filter Filter
+ * @example /examples/components/form/select-fetch Fetch options
  * @example /examples/components/form/select-lazy Lazy load
+ * @example /examples/components/form/select-remote-filter Remote filter
  *
  * @copyright schukai GmbH
  * @summary A beautiful select control that can make your life easier and also looks good.
@@ -363,9 +372,9 @@ class Select extends CustomControl {
 	 * @property {string} type=radio Multiple (checkbox) or single selection (radio)
 	 * @property {string} name=(random id) Name of the form field
 	 * @property {string} url Load options from server per url
-	 * @property {string} lookup Load options from server per url
-	 * @property {boolean} lookup.url=null Load options from server per url
-	 * @property {boolean} lookup.individually=false Load options individually
+	 * @property {object} lookup Load options from server per url
+	 * @property {string} lookup.url=null Load options from server per url
+	 * @property {boolean} lookup.grouping=false Load all selected options from server per url at once (true) or one by one (false)
 	 * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
 	 * @property {String} fetch.redirect=error
 	 * @property {String} fetch.method=GET
@@ -380,13 +389,13 @@ class Select extends CustomControl {
 	 * @property {Object} features List with features
 	 * @property {Boolean} features.clearAll=true Display of a delete button to delete the entire selection
 	 * @property {Boolean} features.clear=true Display of a delete key for deleting the specific selection
-	 * @property {Boolean} features.lazyLoad=false Load options when first opening the dropdown
+	 * @property {Boolean} features.lazyLoad=false Load options when first opening the dropdown. (Hint; lazylLoad is not supported with remote filter)
 	 * @property {Boolean} features.closeOnSelect=false Close the dropdown when an option is selected (since 3.54.0)
 	 * @property {Boolean} features.emptyValueIfNoOptions=false If no options are available, the selection is set to an empty array
 	 * @property {Boolean} features.storeFetchedData=false Store fetched data in the object
 	 * @property {Boolean} features.useStrictValueComparison=true Use strict value comparison for the selection
-	 * @property {Boolean} filter.defaultValue=* Default filter value, if the filter is empty
-	 * @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled
+	 * @property {string} filter.defaultValue=null Default filter value, if the filter is empty, if the default value is null, then no request is made
+	 * @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled (Hint; lazylLoad is not supported with remote filter, if you use remote filter, the lazyLoad is disabled)
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
 	 * @property {string} templateMapping Mapping of the template placeholders
@@ -459,7 +468,7 @@ class Select extends CustomControl {
 					},
 				},
 				filter: {
-					defaultValue: "*",
+					defaultValue: null,
 					mode: FILTER_MODE_DISABLED,
 					position: FILTER_POSITION_INLINE,
 					marker: {
@@ -507,7 +516,20 @@ class Select extends CustomControl {
 		initControlReferences.call(self);
 		initEventHandler.call(self);
 
-		const lazyLoadFlag = self.getOption("features.lazyLoad");
+		let lazyLoadFlag = self.getOption("features.lazyLoad", false);
+		let remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
+
+		if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
+			self.getOption("features.lazyLoad", false);
+			if (lazyLoadFlag === true) {
+				addAttributeToken(
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					"lazyLoad is not supported with remote filter",
+				);
+				lazyLoadFlag = false;
+			}
+		}
 
 		if (self.hasAttribute("value")) {
 			new Processing(10, () => {
@@ -520,7 +542,7 @@ class Select extends CustomControl {
 		}
 
 		if (self.getOption("url") !== null) {
-			if (lazyLoadFlag) {
+			if (lazyLoadFlag || remoteFilterFlag) {
 				lookupSelection.call(self);
 			} else {
 				self.fetch().catch((e) => {
@@ -624,80 +646,7 @@ class Select extends CustomControl {
 	 * @return {Promise}
 	 */
 	fetch(url) {
-		if (url instanceof URL) {
-			url = url.toString();
-		}
-
-		if (url !== undefined && url !== null) {
-			url = validateString(url);
-		} else {
-			url = this.getOption("url");
-			if (url === null) {
-				return Promise.reject(new Error("No url defined"));
-			}
-		}
-
-		hide.call(this);
-
-		return new Promise((resolve, reject) => {
-			setStatusOrRemoveBadges.call(this, "loading");
-
-			new Processing(10, () => {
-				this.setOption("options", []);
-
-				fetchData
-					.call(this, url)
-					.then((map) => {
-						if (
-							isObject(map) ||
-							isArray(map) ||
-							map instanceof Set ||
-							map instanceof Map
-						) {
-							try {
-								this.importOptions(map);
-							} catch (e) {
-								setStatusOrRemoveBadges.call(this, "error");
-								reject(e);
-								return;
-							}
-
-							this[lastFetchedDataSymbol] = map;
-
-							let result;
-							const selection = this.getOption("selection");
-							let newValue = [];
-							if (selection) {
-								newValue = selection;
-							} else if (this.hasAttribute("value")) {
-								newValue = this.getAttribute("value");
-							}
-
-							result = setSelection.call(this, newValue);
-							requestAnimationFrame(() => {
-								checkOptionState.call(this);
-								setStatusOrRemoveBadges.call(this, "closed");
-								resolve(result);
-							});
-
-							return;
-						}
-
-						setStatusOrRemoveBadges.call(this, "error");
-						reject(new Error("invalid response"));
-					})
-					.catch((e) => {
-						setStatusOrRemoveBadges.call(this, "error");
-						reject(e);
-					});
-			})
-				.run()
-				.catch((e) => {
-					setStatusOrRemoveBadges.call(this, "error");
-					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-					reject(e);
-				});
-		});
+		return fetchIt.call(this, url);
 	}
 
 	/**
@@ -719,7 +668,11 @@ class Select extends CustomControl {
 		new Processing(() => {
 			gatherState.call(this);
 			focusFilter.call(this);
-		}).run();
+		})
+			.run()
+			.catch((e) => {
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+			});
 	}
 
 	/**
@@ -772,6 +725,7 @@ class Select extends CustomControl {
 		const map = buildMap(data, selector, labelTemplate, valueTemplate, filter);
 
 		const options = [];
+
 		if (!isIterable(map)) {
 			throw new Error("map is not iterable");
 		}
@@ -823,6 +777,9 @@ class Select extends CustomControl {
 	}
 }
 
+/**
+ * @private
+ */
 function lookupSelection() {
 	const self = this;
 
@@ -847,22 +804,102 @@ function lookupSelection() {
 		}
 
 		if (this.getOption("lookup.grouping") === true) {
-			filterFromRemoteByValue.call(
-				self,
-				url,
-				selection.map((s) => s?.["value"]),
-			);
+			filterFromRemoteByValue
+				.call(
+					self,
+					url,
+					selection.map((s) => s?.["value"]),
+				)
+				.catch((e) => {
+					addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+				});
 			return;
 		}
 
 		for (const s of selection) {
 			if (s?.["value"]) {
-				filterFromRemoteByValue.call(self, url, s?.["value"]);
+				filterFromRemoteByValue.call(self, url, s?.["value"]).catch((e) => {
+					addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+				});
 			}
 		}
 	}, 100);
 }
 
+function fetchIt(url, controlOptions) {
+	if (url instanceof URL) {
+		url = url.toString();
+	}
+
+	if (url !== undefined && url !== null) {
+		url = validateString(url);
+	} else {
+		url = this.getOption("url");
+		if (url === null) {
+			return Promise.reject(new Error("No url defined"));
+		}
+	}
+
+	return new Promise((resolve, reject) => {
+		setStatusOrRemoveBadges.call(this, "loading");
+
+		new Processing(10, () => {
+			fetchData
+				.call(this, url)
+				.then((map) => {
+					if (
+						isObject(map) ||
+						isArray(map) ||
+						map instanceof Set ||
+						map instanceof Map
+					) {
+						try {
+							this.importOptions(map);
+						} catch (e) {
+							setStatusOrRemoveBadges.call(this, "error");
+							reject(e);
+							return;
+						}
+
+						this[lastFetchedDataSymbol] = map;
+
+						let result;
+						const selection = this.getOption("selection");
+						let newValue = [];
+						if (selection) {
+							newValue = selection;
+						} else if (this.hasAttribute("value")) {
+							newValue = this.getAttribute("value");
+						}
+
+						result = setSelection.call(this, newValue);
+						requestAnimationFrame(() => {
+							checkOptionState.call(this);
+							setStatusOrRemoveBadges.call(this, "closed");
+							updatePopper.call(this);
+							resolve(result);
+						});
+
+						return;
+					}
+
+					setStatusOrRemoveBadges.call(this, "error");
+					reject(new Error("invalid response"));
+				})
+				.catch((e) => {
+					setStatusOrRemoveBadges.call(this, "error");
+					reject(e);
+				});
+		})
+			.run()
+			.catch((e) => {
+				setStatusOrRemoveBadges.call(this, "error");
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+				reject(e);
+			});
+	});
+}
+
 /**
  * This attribute can be used to pass a URL to this select.
  *
@@ -1270,23 +1307,16 @@ function calcAndSetOptionsDimension() {
 	}
 
 	if (visible === 0) {
-		if (this.getOption("options").length === 0) {
+		if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
 			this.setOption(
 				"messages.emptyOptions",
 				this.getOption("labels.no-options-available"),
 			);
 		} else {
-			if (this.getOption("filter.mode") === FILTER_MODE_DISABLED) {
-				this.setOption(
-					"messages.emptyOptions",
-					this.getOption("labels.no-options-available"),
-				);
-			} else {
-				this.setOption(
-					"messages.emptyOptions",
-					this.getOption("labels.no-options-found"),
-				);
-			}
+			this.setOption(
+				"messages.emptyOptions",
+				this.getOption("labels.no-options-found"),
+			);
 		}
 		this[noOptionsAvailableElementSymbol].classList.remove("d-none");
 	} else {
@@ -1481,11 +1511,6 @@ function handleFilterKeyboardEvents(event) {
 	}
 }
 
-/**
- *
-
- */
-
 /**
  * Method handleFilterKeyEvents is used to handle filter key events.
  * Debounce is used to prevent multiple calls.
@@ -1507,7 +1532,7 @@ function handleFilterKeyEvents() {
 	}
 
 	this[keyFilterEventSymbol] = new DeadMansSwitch(200, () => {
-		if (this.getOption("filter.mode") !== FILTER_MODE_REMOTE) {
+		if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
 			filterOptions.call(this);
 		} else {
 			filterFromRemote.call(this).catch((e) => {
@@ -1523,12 +1548,17 @@ function handleFilterKeyEvents() {
  * @private
  */
 function filterFromRemote() {
-	if (!(this[inlineFilterElementSymbol] instanceof HTMLElement)) {
+	if (
+		!(this[inlineFilterElementSymbol] instanceof HTMLElement) &&
+		!(this[popperFilterElementSymbol] instanceof HTMLElement)
+	) {
 		return;
 	}
 
-	const optionUrl = this.getOption("url");
-	if (!optionUrl) {
+	show.call(this);
+
+	const url = this.getOption("url");
+	if (!url) {
 		addAttributeToken(
 			this,
 			ATTRIBUTE_ERRORMESSAGE,
@@ -1537,47 +1567,79 @@ function filterFromRemote() {
 		return;
 	}
 
-	return filterFromRemoteByValue.call(
-		this,
-		optionUrl,
-		this[inlineFilterElementSymbol].value,
-	);
+	let filterValue;
+
+	switch (this.getOption("filter.position")) {
+		case FILTER_POSITION_INLINE:
+			if (this[inlineFilterElementSymbol] instanceof HTMLElement) {
+				filterValue = this[inlineFilterElementSymbol].value.toLowerCase();
+			}
+
+			break;
+		case FILTER_POSITION_POPPER:
+		default:
+			if (this[popperFilterElementSymbol] instanceof HTMLInputElement) {
+				filterValue = this[popperFilterElementSymbol].value.toLowerCase();
+			}
+	}
+
+	return filterFromRemoteByValue.call(this, url, filterValue);
+}
+
+function formatURL(url, value) {
+	if (value === undefined || value === null || value === "") {
+		value = this.getOption("filter.defaultValue");
+		if (value === undefined || value === null || value === "") {
+			value = disabledRequestMarker.toString();
+		}
+	}
+
+	const formatter = new Formatter({ filter: encodeURI(value) });
+	const openMarker = this.getOption("filter.marker.open");
+	let closeMarker = this.getOption("filter.marker.close");
+	if (!closeMarker) {
+		closeMarker = openMarker;
+	}
+
+	if (openMarker && closeMarker) {
+		formatter.setMarker(openMarker, closeMarker);
+	}
+
+	return formatter.format(url);
 }
 
 /**
  * @private
+ * @param optionUrl
+ * @param value
+ * @returns {Promise<unknown>}
  */
 function filterFromRemoteByValue(optionUrl, value) {
 	return new Processing(() => {
-		const filterValue = encodeURI(value);
-		let url = optionUrl;
-		if (filterValue.length > 0) {
-			const formatter = new Formatter({ filter: filterValue });
-			const openMarker = this.getOption("filter.marker.open");
-			let closeMarker = this.getOption("filter.marker.close");
-			if (!closeMarker) {
-				closeMarker = openMarker;
-			}
-
-			if (openMarker && closeMarker) {
-				formatter.setMarker(openMarker, closeMarker);
-			}
-
-			url = formatter.format(optionUrl);
+		let url = formatURL.call(this, optionUrl, value);
+		if (url.indexOf(disabledRequestMarker.toString()) !== -1) {
+			return;
 		}
 
-		this.fetch(url)
+		fetchIt
+			.call(this, url, {
+				disableHiding: true,
+			})
 			.then(() => {
 				checkOptionState.call(this);
+				show.call(this);
 			})
 			.catch((e) => {
 				throw e;
 			});
-	}).run();
+	})
+		.run()
+		.catch((e) => {
+			throw e;
+		});
 }
 
 /**
- *
  * @param {Event} event
  * @private
  */
@@ -1700,7 +1762,7 @@ function focusInlineFilter(focusOptions) {
 	const options = this.getOption("options");
 	if (
 		(!isArray(options) || options.length === 0) &&
-		this.getOption("filter.mode") !== FILTER_MODE_REMOTE
+		getFilterMode.call(this) !== FILTER_MODE_REMOTE
 	) {
 		return;
 	}
@@ -1827,7 +1889,7 @@ function areOptionsAvailableAndInit() {
 	) {
 		setStatusOrRemoveBadges.call(this, "empty");
 
-		hide.call(this);
+		// hide.call(this);
 
 		let msg = this.getOption("labels.no-options-available");
 
@@ -2016,8 +2078,13 @@ function setSelection(selection) {
 	validateArray(selection);
 
 	for (let i = 0; i < selection.length; i++) {
+		var l = getSelectionLabel.call(this, selection[i].value);
+		if (l === selection[i].value) {
+			l = selection[i].label;
+		}
+
 		selection[i] = {
-			label: getSelectionLabel.call(this, selection[i].value),
+			label: l,
 			value: selection[i].value,
 		};
 	}
@@ -2092,9 +2159,7 @@ function fetchData(url) {
 		delayWatch = true;
 	});
 
-	url = new Formatter({ filter: this.getOption("filter.defaultValue") }).format(
-		url,
-	);
+	url = formatURL.call(this, url);
 
 	self[isLoadingSymbol] = true;
 	const global = getGlobal();
@@ -2176,8 +2241,12 @@ function show() {
 		return;
 	}
 
+	const hasPopperFilterFlag =
+		this.getOption("filter.position") === FILTER_POSITION_POPPER &&
+		getFilterMode.call(this) !== FILTER_MODE_DISABLED;
+
 	const options = getOptionElements.call(this);
-	if (options.length === 0) {
+	if (options.length === 0 && hasPopperFilterFlag === false) {
 		return;
 	}
 

package/source/components/form/style/select.pcss

@@ -262,7 +262,9 @@ div[data-monster-role=selection] {
 }
 
 [data-monster-role="no-options"] {
-    margin: 1.1em 0 0 1.1em; 
+    margin: 1.1em 0 0 1.1em;
+    padding: 0.3em 0.8em;
+    border-radius: 0.2em;
     color: var(--monster-color-warning-4);
     background-color: var(--monster-bg-color-warning-4);
 }

package/source/components/form/stylesheet/select.mjs

@@ -25,7 +25,7 @@ try {
 	SelectStyleSheet.insertRule(
 		`
 @layer select { 
-.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:4 0 90%;min-height:1.4em;overflow:auto;scrollbar-color:var(--monster-color-primary-1) var(--monster-color-primary-3);scrollbar-width:thin;width:100%}.d-none{display:none!important}div[data-monster-role=control]{display:flex;height:100%;position:relative}[data-monster-role=container].open{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}[data-monster-role=container].clear,[data-monster-role=container].open{background-color:var(--monster-bg-color-primary-2);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em}[data-monster-role=container].clear{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=control]{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);-o-border-image:initial;border-image:initial;border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem;width:-webkit-fill-available;width:-moz-available;width:fill-available}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-1)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}div[data-monster-role=selection]{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-start;margin:5px}[data-monster-role=option-control]{margin-right:8px}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{align-content:center;align-items:center;display:flex;flex-direction:row;gap:7px;justify-content:space-between}[data-monster-role=filter],[data-monster-role=popper-filter]{display:flex;flex-grow:200;order:99999999;visibility:hidden}[data-monster-role=filter].active{background-color:var(--monster-bg-color-primary-2);border:0;border-color:var(--monster-bg-color-primary-3);border-bottom:1px solid var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);min-width:40%;outline:none;visibility:visible}.active[data-monster-role=filter][name=popper-filter]{height:1.5em;margin:2.5em;padding:2px;width:calc(100% - var(--monster-border-width)*2)}.option-filter-control{align-items:center;background-color:var(--monster-bg-color-primary-2);display:flex;height:2.5em;margin:-1.1em -1.1em .3em}[data-monster-role=remove-badge]{background-color:var(--monster-bg-color-primary-2);height:16px;margin-left:5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");order:2}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em;min-height:16px;width:16px}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.open[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}.empty[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\")}.clear[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-error-1);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}.loading[data-monster-role=status-or-remove-badges]{animation-duration:1s;animation-iteration-count:infinite;animation-name:activity;animation-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\")}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;scrollbar-color:var(--monster-color-primary-1) var(--monster-color-primary-3);scrollbar-width:thin}[data-monster-role=option]{align-items:center;box-sizing:border-box;display:flex;padding:6px 5px}[data-monster-role=option] label{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;width:100%}[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;justify-content:space-between;outline:none;width:100%}[data-monster-role=no-options]{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4);margin:1.1em 0 0 1.1em}.selected{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option][data-monster-filtered=true],[data-monster-role=option][data-monster-visibility=hidden]{display:none}[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-2);outline-offset:-2px}[data-monster-role=option]>input:focus,[data-monster-role=option]>label:focus{outline:none} 
+.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:4 0 90%;min-height:1.4em;overflow:auto;scrollbar-color:var(--monster-color-primary-1) var(--monster-color-primary-3);scrollbar-width:thin;width:100%}.d-none{display:none!important}div[data-monster-role=control]{display:flex;height:100%;position:relative}[data-monster-role=container].open{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}[data-monster-role=container].clear,[data-monster-role=container].open{background-color:var(--monster-bg-color-primary-2);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em}[data-monster-role=container].clear{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=control]{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);-o-border-image:initial;border-image:initial;border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem;width:-webkit-fill-available;width:-moz-available;width:fill-available}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-1)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}div[data-monster-role=selection]{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-start;margin:5px}[data-monster-role=option-control]{margin-right:8px}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{align-content:center;align-items:center;display:flex;flex-direction:row;gap:7px;justify-content:space-between}[data-monster-role=filter],[data-monster-role=popper-filter]{display:flex;flex-grow:200;order:99999999;visibility:hidden}[data-monster-role=filter].active{background-color:var(--monster-bg-color-primary-2);border:0;border-color:var(--monster-bg-color-primary-3);border-bottom:1px solid var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);min-width:40%;outline:none;visibility:visible}.active[data-monster-role=filter][name=popper-filter]{height:1.5em;margin:2.5em;padding:2px;width:calc(100% - var(--monster-border-width)*2)}.option-filter-control{align-items:center;background-color:var(--monster-bg-color-primary-2);display:flex;height:2.5em;margin:-1.1em -1.1em .3em}[data-monster-role=remove-badge]{background-color:var(--monster-bg-color-primary-2);height:16px;margin-left:5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");order:2}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em;min-height:16px;width:16px}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.open[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}.empty[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\")}.clear[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-error-1);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}.loading[data-monster-role=status-or-remove-badges]{animation-duration:1s;animation-iteration-count:infinite;animation-name:activity;animation-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\")}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;scrollbar-color:var(--monster-color-primary-1) var(--monster-color-primary-3);scrollbar-width:thin}[data-monster-role=option]{align-items:center;box-sizing:border-box;display:flex;padding:6px 5px}[data-monster-role=option] label{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;width:100%}[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;justify-content:space-between;outline:none;width:100%}[data-monster-role=no-options]{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4);margin:1.1em 0 0 1.1em}.selected{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option][data-monster-filtered=true],[data-monster-role=option][data-monster-visibility=hidden]{display:none}[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-2);outline-offset:-2px}[data-monster-role=option]>input:focus,[data-monster-role=option]>label:focus{outline:none} 
 }`,
 		0,
 	);