@linzjs/step-ag-grid 8.4.3 → 9.0.0

package/dist/step-ag-grid.esm.js

@@ -1416,6 +1416,26 @@ var ControlledMenuFr = function (_a, externalRef) {
             ev.stopPropagation();
             return;
         }
+        var invokeSave = function (reason) {
+            var _a, _b;
+            if (!(saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current))
+                return;
+            (_a = saveButtonRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute("data-reason", reason);
+            (_b = saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current) === null || _b === void 0 ? void 0 : _b.click();
+        };
+        var allowTabToSave = activeElement.getAttribute("data-allowtabtosave") == "true";
+        if (allowTabToSave) {
+            if (isDown) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                lastTabDownEl.current = activeElement;
+            }
+            else {
+                lastTabDownEl.current == activeElement &&
+                    invokeSave(ev.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD);
+            }
+            return;
+        }
         var inputElsIterator = thisDocument.querySelectorAll(".szh-menu--state-open input,textarea");
         var inputEls = [];
         inputElsIterator.forEach(function (el) { return inputEls.push(el); });
@@ -1428,14 +1448,6 @@ var ControlledMenuFr = function (_a, externalRef) {
             return;
         var isTextArea = activeElement.nodeName === "TEXTAREA";
         var suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautosave") == "true" || isTextArea;
-        var allowTabToSave = activeElement.getAttribute("data-allowtabtosave") == "true";
-        var invokeSave = function (reason) {
-            var _a, _b;
-            if (!(saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current))
-                return;
-            (_a = saveButtonRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute("data-reason", reason);
-            (_b = saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current) === null || _b === void 0 ? void 0 : _b.click();
-        };
         switch (activeElement.nodeName) {
             case "TEXTAREA":
             case "INPUT": {
@@ -2968,7 +2980,7 @@ var Grid = function (params) {
     }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
     return (jsxs("div", __assign({ "data-testid": params["data-testid"], className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { children: [params.quickFilter && (jsx("div", __assign({ className: "Grid-quickFilter" }, { children: jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: (_a = params.quickFilterPlaceholder) !== null && _a !== void 0 ? _a : "Search...", value: internalQuickFilter, onChange: function (event) {
                         setInternalQuickFilter(event.target.value);
-                    } }) }))), jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, defaultColDef: params.defaultColDef, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: (_b = params.rowSelection) !== null && _b !== void 0 ? _b : "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_c = params.postSortRows) !== null && _c !== void 0 ? _c : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll })] })));
+                    } }) }))), jsx("div", __assign({ style: { flex: 1 } }, { children: jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, defaultColDef: params.defaultColDef, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: (_b = params.rowSelection) !== null && _b !== void 0 ? _b : "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_c = params.postSortRows) !== null && _c !== void 0 ? _c : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll }) }))] })));
 };
 
 var GridCellMultiSelectClassRules = {
@@ -3199,9 +3211,16 @@ function getDefaultExportFromCjs (x) {
 }
 
 function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
   var f = n.default;
 	if (typeof f == "function") {
-		var a = function () {
+		var a = function a () {
+			if (this instanceof a) {
+				var args = [null];
+				args.push.apply(args, arguments);
+				var Ctor = Function.bind.apply(f, args);
+				return new Ctor();
+			}
 			return f.apply(this, arguments);
 		};
 		a.prototype = f.prototype;
@@ -3324,6 +3343,163 @@ var FormError = function (props) {
     return (jsxs(Fragment$1, { children: [props.error && (jsx("span", __assign({ className: "LuiTextInput-error", style: { paddingLeft: 0 } }, { children: props.error }))), props.helpText && !props.error && jsx("span", __assign({ className: "helpText" }, { children: props.helpText }))] }));
 };
 
+function escapeStringRegexp(string) {
+	if (typeof string !== 'string') {
+		throw new TypeError('Expected a string');
+	}
+
+	// Escape characters with special meaning either inside or outside character sets.
+	// Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
+	return string
+		.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
+		.replace(/-/g, '\\x2d');
+}
+
+const regexpCache = new Map();
+
+const sanitizeArray = (input, inputName) => {
+	if (!Array.isArray(input)) {
+		switch (typeof input) {
+			case 'string':
+				input = [input];
+				break;
+			case 'undefined':
+				input = [];
+				break;
+			default:
+				throw new TypeError(`Expected '${inputName}' to be a string or an array, but got a type of '${typeof input}'`);
+		}
+	}
+
+	return input.filter(string => {
+		if (typeof string !== 'string') {
+			if (typeof string === 'undefined') {
+				return false;
+			}
+
+			throw new TypeError(`Expected '${inputName}' to be an array of strings, but found a type of '${typeof string}' in the array`);
+		}
+
+		return true;
+	});
+};
+
+const makeRegexp = (pattern, options) => {
+	options = {
+		caseSensitive: false,
+		...options,
+	};
+
+	const cacheKey = pattern + JSON.stringify(options);
+
+	if (regexpCache.has(cacheKey)) {
+		return regexpCache.get(cacheKey);
+	}
+
+	const negated = pattern[0] === '!';
+
+	if (negated) {
+		pattern = pattern.slice(1);
+	}
+
+	pattern = escapeStringRegexp(pattern).replace(/\\\*/g, '[\\s\\S]*');
+
+	const regexp = new RegExp(`^${pattern}$`, options.caseSensitive ? '' : 'i');
+	regexp.negated = negated;
+	regexpCache.set(cacheKey, regexp);
+
+	return regexp;
+};
+
+const baseMatcher = (inputs, patterns, options, firstMatchOnly) => {
+	inputs = sanitizeArray(inputs, 'inputs');
+	patterns = sanitizeArray(patterns, 'patterns');
+
+	if (patterns.length === 0) {
+		return [];
+	}
+
+	patterns = patterns.map(pattern => makeRegexp(pattern, options));
+
+	const {allPatterns} = options || {};
+	const result = [];
+
+	for (const input of inputs) {
+		// String is included only if it matches at least one non-negated pattern supplied.
+		// Note: the `allPatterns` option requires every non-negated pattern to be matched once.
+		// Matching a negated pattern excludes the string.
+		let matches;
+		const didFit = [...patterns].fill(false);
+
+		for (const [index, pattern] of patterns.entries()) {
+			if (pattern.test(input)) {
+				didFit[index] = true;
+				matches = !pattern.negated;
+
+				if (!matches) {
+					break;
+				}
+			}
+		}
+
+		if (
+			!(
+				matches === false
+				|| (matches === undefined && patterns.some(pattern => !pattern.negated))
+				|| (allPatterns && didFit.some((yes, index) => !yes && !patterns[index].negated))
+			)
+		) {
+			result.push(input);
+
+			if (firstMatchOnly) {
+				break;
+			}
+		}
+	}
+
+	return result;
+};
+
+function isMatch(inputs, patterns, options) {
+	return baseMatcher(inputs, patterns, options, true).length > 0;
+}
+
+/**
+ * Text matching with wildcards and multiple matchers.
+ *
+ * "L" => L*
+ * "=L" => L
+ * "*L*" => *L*
+ * "*L" => *L
+ * "A B" => A* and B*
+ * "A B, C" => (A* and B*) or C*
+ * "!A" => all values must not match A
+ * Returns true if there's a text match.
+ */
+var textMatch = function (text, filter) {
+    if (text == null)
+        return true;
+    var superFilters = filter
+        .split(",")
+        .map(function (sf) { return sf.trim(); })
+        .filter(function (sf) { return sf; })
+        .map(function (r) {
+        return r
+            .split(/\s+/)
+            .map(function (f) { return (f.startsWith("=") ? f.slice(1) : f + "*"); })
+            .join(" ");
+    });
+    var _a = partition(superFilters, function (superFilters) { return superFilters.startsWith("!"); }), negativeFilters = _a[0], positiveFilters = _a[1];
+    var values = text.replaceAll(",", " ").trim().split(/\s+/);
+    return ((isEmpty(positiveFilters) || // Not filtered
+        positiveFilters.some(function (superFilter) {
+            var subFilters = superFilter.split(/\s+/).map(function (s) { return s.replaceAll(/([!?])/g, "\\$1"); });
+            return subFilters.every(function (subFilter) { return values.some(function (value) { return isMatch(value, subFilter); }); });
+        })) &&
+        (isEmpty(negativeFilters) ||
+            negativeFilters.every(function (superFilter) { return values.every(function (value) { return isMatch(value, superFilter); }); })));
+};
+
 var MenuSeparatorString = "_____MENU_SEPARATOR_____";
 var MenuSeparator = Object.freeze({ value: MenuSeparatorString });
 var MenuHeaderString = "_____MENU_HEADER_____";
@@ -3417,8 +3593,7 @@ var GridFormDropDown = function (props) {
                     console.error("Cannot filter non-string labels", option);
                     return undefined;
                 }
-                var str = option.label || "";
-                return str.toLowerCase().indexOf(filter.toLowerCase()) !== -1 ? option : undefined;
+                return textMatch(option.label || "", filter) ? option : undefined;
             })
                 .filter(function (r) { return r !== undefined; }));
         }
@@ -3492,200 +3667,49 @@ var GridFormDropDown = function (props) {
                             showHeader = null;
                             if (item.value === MenuSeparatorString) {
                                 return jsx(MenuDivider, {}, "$$divider_".concat(index));
-                            }
-                            else if (item.value === MenuHeaderString) {
-                                lastHeader = jsx(MenuHeader, { children: item.label }, "$$header_".concat(index));
-                                return jsx(Fragment$1, {});
-                            }
-                            else {
-                                if (lastHeader) {
-                                    showHeader = lastHeader;
-                                    lastHeader = null;
-                                }
-                            }
-                            return ((!filteredValues || filteredValues.includes(item)) && (jsxs(Fragment, { children: [showHeader, jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onFocus: function () {
-                                                    if (selectedItem !== item) {
-                                                        setSelectedItem(item);
-                                                        setSubSelectedValue(null);
-                                                        subComponentIsValid.current = true;
-                                                        if (item.subComponent) {
-                                                            subComponentInitialValue.current = null;
-                                                        }
-                                                    }
-                                                }, onClick: function (e) {
-                                                    e.keepOpen = !!item.subComponent;
-                                                } }, { children: [(_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), item.subComponent ? "..." : ""] }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedItem === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function () { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
-                                                        context: { options: options },
-                                                        data: data,
-                                                        value: subSelectedValue,
-                                                        setValue: function (value) {
-                                                            setSubSelectedValue(value);
-                                                            if (subComponentInitialValue.current === null) {
-                                                                // copy the default value of the subcomponent, so we can change detect on save
-                                                                subComponentInitialValue.current = JSON.stringify(value);
-                                                            }
-                                                        },
-                                                        setValid: function (valid) {
-                                                            subComponentIsValid.current = valid;
-                                                        },
-                                                        triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
-                                                            return __generator(this, function (_a) {
-                                                                return [2 /*return*/];
-                                                            });
-                                                        }); }
-                                                    } }, { children: item.subComponent && (jsx("div", __assign({ className: "subComponent" }, { children: jsx(item.subComponent, {}) }))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index))] }, "".concat(index))));
-                        })] }) }))] }));
-};
-
-function escapeStringRegexp(string) {
-	if (typeof string !== 'string') {
-		throw new TypeError('Expected a string');
-	}
-
-	// Escape characters with special meaning either inside or outside character sets.
-	// Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
-	return string
-		.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
-		.replace(/-/g, '\\x2d');
-}
-
-const regexpCache = new Map();
-
-const sanitizeArray = (input, inputName) => {
-	if (!Array.isArray(input)) {
-		switch (typeof input) {
-			case 'string':
-				input = [input];
-				break;
-			case 'undefined':
-				input = [];
-				break;
-			default:
-				throw new TypeError(`Expected '${inputName}' to be a string or an array, but got a type of '${typeof input}'`);
-		}
-	}
-
-	return input.filter(string => {
-		if (typeof string !== 'string') {
-			if (typeof string === 'undefined') {
-				return false;
-			}
-
-			throw new TypeError(`Expected '${inputName}' to be an array of strings, but found a type of '${typeof string}' in the array`);
-		}
-
-		return true;
-	});
-};
-
-const makeRegexp = (pattern, options) => {
-	options = {
-		caseSensitive: false,
-		...options,
-	};
-
-	const cacheKey = pattern + JSON.stringify(options);
-
-	if (regexpCache.has(cacheKey)) {
-		return regexpCache.get(cacheKey);
-	}
-
-	const negated = pattern[0] === '!';
-
-	if (negated) {
-		pattern = pattern.slice(1);
-	}
-
-	pattern = escapeStringRegexp(pattern).replace(/\\\*/g, '[\\s\\S]*');
-
-	const regexp = new RegExp(`^${pattern}$`, options.caseSensitive ? '' : 'i');
-	regexp.negated = negated;
-	regexpCache.set(cacheKey, regexp);
-
-	return regexp;
-};
-
-const baseMatcher = (inputs, patterns, options, firstMatchOnly) => {
-	inputs = sanitizeArray(inputs, 'inputs');
-	patterns = sanitizeArray(patterns, 'patterns');
-
-	if (patterns.length === 0) {
-		return [];
-	}
-
-	patterns = patterns.map(pattern => makeRegexp(pattern, options));
-
-	const {allPatterns} = options || {};
-	const result = [];
-
-	for (const input of inputs) {
-		// String is included only if it matches at least one non-negated pattern supplied.
-		// Note: the `allPatterns` option requires every non-negated pattern to be matched once.
-		// Matching a negated pattern excludes the string.
-		let matches;
-		const didFit = [...patterns].fill(false);
-
-		for (const [index, pattern] of patterns.entries()) {
-			if (pattern.test(input)) {
-				didFit[index] = true;
-				matches = !pattern.negated;
-
-				if (!matches) {
-					break;
-				}
-			}
-		}
-
-		if (
-			!(
-				matches === false
-				|| (matches === undefined && patterns.some(pattern => !pattern.negated))
-				|| (allPatterns && didFit.some((yes, index) => !yes && !patterns[index].negated))
-			)
-		) {
-			result.push(input);
-
-			if (firstMatchOnly) {
-				break;
-			}
-		}
-	}
-
-	return result;
-};
-
-function isMatch(inputs, patterns, options) {
-	return baseMatcher(inputs, patterns, options, true).length > 0;
-}
-
-/**
- * Text matching with wildcards and multiple matchers.
- *
- * "L" => L*
- * "L*" => L*
- * "*L*" => *L*
- * "*L" => *L
- * "A B" => A* and B*
- * "A B, C" => (A* and B*) or C*
- * "!A" => all values must not match A
- * Returns true if there's a text match.
- */
-var textMatch = function (text, filter) {
-    if (text == null)
-        return true;
-    var superFilters = filter
-        .split(",")
-        .map(function (sf) { return sf.trim(); })
-        .filter(function (sf) { return sf; });
-    var _a = partition(superFilters, function (superFilters) { return superFilters.startsWith("!"); }), negativeFilters = _a[0], positiveFilters = _a[1];
-    var values = text.replaceAll(",", " ").trim().split(/\s+/);
-    return ((isEmpty(positiveFilters) || // Not filtered
-        positiveFilters.some(function (superFilter) {
-            var subFilters = superFilter.split(/\s+/).map(function (s) { return s.replaceAll(/([!?])/g, "\\$1"); });
-            return subFilters.every(function (subFilter) { return values.some(function (value) { return isMatch(value, subFilter); }); });
-        })) &&
-        (isEmpty(negativeFilters) ||
-            negativeFilters.every(function (superFilter) { return values.every(function (value) { return isMatch(value, superFilter); }); })));
+                            }
+                            else if (item.value === MenuHeaderString) {
+                                lastHeader = jsx(MenuHeader, { children: item.label }, "$$header_".concat(index));
+                                return jsx(Fragment$1, {});
+                            }
+                            else {
+                                if (lastHeader) {
+                                    showHeader = lastHeader;
+                                    lastHeader = null;
+                                }
+                            }
+                            return ((!filteredValues || filteredValues.includes(item)) && (jsxs(Fragment, { children: [showHeader, jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onFocus: function () {
+                                                    if (selectedItem !== item) {
+                                                        setSelectedItem(item);
+                                                        setSubSelectedValue(null);
+                                                        subComponentIsValid.current = true;
+                                                        if (item.subComponent) {
+                                                            subComponentInitialValue.current = null;
+                                                        }
+                                                    }
+                                                }, onClick: function (e) {
+                                                    e.keepOpen = !!item.subComponent;
+                                                } }, { children: [(_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), item.subComponent ? "..." : ""] }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedItem === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function () { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                                        context: { options: options },
+                                                        data: data,
+                                                        value: subSelectedValue,
+                                                        setValue: function (value) {
+                                                            setSubSelectedValue(value);
+                                                            if (subComponentInitialValue.current === null) {
+                                                                // copy the default value of the subcomponent, so we can change detect on save
+                                                                subComponentInitialValue.current = JSON.stringify(value);
+                                                            }
+                                                        },
+                                                        setValid: function (valid) {
+                                                            subComponentIsValid.current = valid;
+                                                        },
+                                                        triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                                            return __generator(this, function (_a) {
+                                                                return [2 /*return*/];
+                                                            });
+                                                        }); }
+                                                    } }, { children: item.subComponent && (jsx("div", __assign({ className: "subComponent" }, { children: jsx(item.subComponent, {}) }))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index))] }, "".concat(index))));
+                        })] }) }))] }));
 };
 
 var GridFormMultiSelect = function (props) {
@@ -3784,10 +3808,11 @@ var GridFormMultiSelect = function (props) {
         invalid: invalid,
         save: save
     }), popoverWrapper = _f.popoverWrapper, triggerSave = _f.triggerSave;
-    return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: options && (jsxs(Fragment$1, { children: [props.filtered && (jsx(FilterInput, __assign({}, { headerGroups: headerGroups, options: options, setOptions: setOptions, filter: filter, setFilter: setFilter, triggerSave: triggerSave }, { filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder }))), headerGroups && (isEmpty(headerGroups) || !toPairs(headerGroups).some(function (_a) {
-                    _a[0]; var options = _a[1];
-                    return !isEmpty(options);
-                })) && (jsx(MenuItem, __assign({ className: "GridMultiSelect-noOptions", disabled: true }, { children: (_a = props.noOptionsMessage) !== null && _a !== void 0 ? _a : "No Options" }), "noOptions")), headerGroups && !isEmpty(headerGroups) && (jsx("div", __assign({ className: "GridFormMultiSelect-options" }, { children: headers.map(function (header, index) {
+    return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: options && (jsxs(Fragment$1, { children: [props.filtered && (jsx(FilterInput, __assign({}, { headerGroups: headerGroups, options: options, setOptions: setOptions, filter: filter, setFilter: setFilter, triggerSave: triggerSave }, { filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder }))), headerGroups &&
+                    (isEmpty(headerGroups) || !toPairs(headerGroups).some(function (_a) {
+                        _a[0]; var options = _a[1];
+                        return !isEmpty(options);
+                    })) && (jsx(MenuItem, __assign({ className: "GridMultiSelect-noOptions", disabled: true }, { children: (_a = props.noOptionsMessage) !== null && _a !== void 0 ? _a : "No Options" }), "noOptions")), headerGroups && !isEmpty(headerGroups) && (jsx("div", __assign({ className: "GridFormMultiSelect-options" }, { children: headers.map(function (header, index) {
                         var subOptions = headerGroups["".concat(header.filter)];
                         return (!isEmpty(subOptions) && (jsxs(Fragment, { children: [header.header && jsx(MenuHeader, { children: header.header }), subOptions.map(function (item, index) {
                                     return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "div_".concat(index))) : (jsxs(Fragment, { children: [jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions }), item.checked && item.subComponent && (jsx(MenuSubComponent, __assign({}, { item: item, options: options, setOptions: setOptions, data: data, triggerSave: triggerSave }, { subComponentIsValid: subComponentIsValidRef.current })))] }, "val_".concat(item.value)));
@@ -4166,7 +4191,7 @@ var css_248z$1 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#b
 styleInject(css_248z$1);
 
 var TextInputFormatted = function (props) {
-    return (jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.className) }, { children: [jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsx("input", __assign({ type: "text", spellCheck: true, defaultValue: props.value }, omit(props, ["error", "value", "helpText", "formatted", "className"]), { className: "LuiTextInput-input", onMouseEnter: function (e) {
+    return (jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.className) }, { children: [jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsx("input", __assign({ type: "text", spellCheck: true, defaultValue: props.value }, omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"]), { className: "LuiTextInput-input", onMouseEnter: function (e) {
                             e.currentTarget.focus();
                             props.onMouseEnter && props.onMouseEnter(e);
                         }, "data-allowtabtosave": props.allowTabToSave })), jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), jsx(FormError, { error: props.error, helpText: props.helpText })] })));
@@ -4347,7 +4372,7 @@ var useGenerateOrDefaultId = function (idFromProps) {
 var TextAreaInput = function (props) {
     var _a;
     var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
-    return (jsxs("div", __assign({ className: clsx("LuiTextAreaInput Grid-popoverContainer", props.disabled ? "isDisabled" : "", props.error ? "hasError" : "", props.className) }, { children: [jsxs("label", __assign({ htmlFor: id }, { children: [props.mandatory != null && jsx("span", __assign({ className: "LuiTextAreaInput-mandatory" }, { children: "*" })), props.label != null && jsx("span", __assign({ className: "LuiTextAreaInput-label" }, { children: props.label })), jsx("div", __assign({ className: "LuiTextAreaInput-wrapper" }, { children: jsx("textarea", __assign({ rows: 5 }, omit(props, ["error", "value", "helpText", "formatted", "className"]), { id: id, value: (_a = props.value) !== null && _a !== void 0 ? _a : "", spellCheck: true, onMouseEnter: function (e) {
+    return (jsxs("div", __assign({ className: clsx("LuiTextAreaInput Grid-popoverContainer", props.disabled ? "isDisabled" : "", props.error ? "hasError" : "", props.className) }, { children: [jsxs("label", __assign({ htmlFor: id }, { children: [props.mandatory != null && jsx("span", __assign({ className: "LuiTextAreaInput-mandatory" }, { children: "*" })), props.label != null && jsx("span", __assign({ className: "LuiTextAreaInput-label" }, { children: props.label })), jsx("div", __assign({ className: "LuiTextAreaInput-wrapper" }, { children: jsx("textarea", __assign({ rows: 5 }, omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"]), { id: id, value: (_a = props.value) !== null && _a !== void 0 ? _a : "", spellCheck: true, onMouseEnter: function (e) {
                                 if (document.activeElement != e.currentTarget) {
                                     e.currentTarget.focus();
                                     e.currentTarget.selectionStart = e.currentTarget.value.length;
@@ -4498,7 +4523,7 @@ var GridFormSubComponentTextInput = function (props) {
     useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
-    return (jsx(TextInputFormatted, { value: value, error: invalid(), onChange: function (e) { return setValue(e.target.value); }, helpText: helpText, autoFocus: true, placeholder: props.placeholder, style: { width: "100%" }, allowTabToSave: true }));
+    return (jsx(TextInputFormatted, { value: value, error: invalid(), onChange: function (e) { return setValue(e.target.value); }, helpText: helpText, placeholder: props.placeholder, style: { width: "100%" }, allowTabToSave: true }));
 };
 
 var GridFormSubComponentTextArea = function (props) {
@@ -4514,7 +4539,7 @@ var GridFormSubComponentTextArea = function (props) {
     useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
-    return (jsx("div", __assign({ className: clsx("FreeTextInput", props.className) }, { children: jsx(TextAreaInput, { className: "free-text-input", value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), helpText: helpText, autoFocus: true, placeholder: props.placeholder, allowTabToSave: true }) })));
+    return (jsx("div", __assign({ className: clsx("FreeTextInput", props.className) }, { children: jsx(TextAreaInput, { className: "free-text-input", value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), helpText: helpText, placeholder: props.placeholder, allowTabToSave: true }) })));
 };
 
 var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton-minimal.lui-button-lg.lui-button-icon-right{padding-right:38px}.ActionButton.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight) .LuiIcon{margin:0 4px}.ActionButton.ActionButton-tight.lui-button-lg.lui-button-icon-right .LuiIcon{margin:0}.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight){padding:8px 5px}.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right.ActionButton-tight{padding:0}.ActionButton-minimalArea{position:relative}.ActionButton-minimalAreaDisplay{position:absolute}.ActionButton-minimalAreaExpand{visibility:hidden}.ActionButton-inProgress.lui-button-lg.lui-button-icon-right{background-color:#e2f3f7;color:#007198;cursor:progress}.ActionButton-inProgress.lui-button-lg.lui-button-icon-right svg *{fill:#0000}.ActionButton-fill{justify-content:center;width:100%}";
@@ -4705,9 +4730,17 @@ function _asyncToGenerator(fn) {
   };
 }
 
-var regeneratorRuntime$1 = {exports: {}};
+var regeneratorRuntimeExports = {};
+var regeneratorRuntime$1 = {
+  get exports(){ return regeneratorRuntimeExports; },
+  set exports(v){ regeneratorRuntimeExports = v; },
+};
 
-var _typeof$1 = {exports: {}};
+var _typeofExports = {};
+var _typeof$1 = {
+  get exports(){ return _typeofExports; },
+  set exports(v){ _typeofExports = v; },
+};
 
 (function (module) {
 	function _typeof(obj) {
@@ -4723,7 +4756,7 @@ var _typeof$1 = {exports: {}};
 } (_typeof$1));
 
 (function (module) {
-	var _typeof = _typeof$1.exports["default"];
+	var _typeof = _typeofExports["default"];
 	function _regeneratorRuntime() {
 	  module.exports = _regeneratorRuntime = function _regeneratorRuntime() {
 	    return exports;
@@ -4859,14 +4892,9 @@ var _typeof$1 = {exports: {}};
 	    };
 	  }
 	  function maybeInvokeDelegate(delegate, context) {
-	    var method = delegate.iterator[context.method];
-	    if (undefined === method) {
-	      if (context.delegate = null, "throw" === context.method) {
-	        if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
-	        context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
-	      }
-	      return ContinueSentinel;
-	    }
+	    var methodName = context.method,
+	      method = delegate.iterator[methodName];
+	    if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel;
 	    var record = tryCatch(method, delegate.iterator, context.arg);
 	    if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
 	    var info = record.arg;
@@ -4895,9 +4923,7 @@ var _typeof$1 = {exports: {}};
 	      if (!isNaN(iterable.length)) {
 	        var i = -1,
 	          next = function next() {
-	            for (; ++i < iterable.length;) {
-	              if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
-	            }
+	            for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
 	            return next.value = undefined, next.done = !0, next;
 	          };
 	        return next.next = next;
@@ -4943,9 +4969,7 @@ var _typeof$1 = {exports: {}};
 	  }), exports.keys = function (val) {
 	    var object = Object(val),
 	      keys = [];
-	    for (var key in object) {
-	      keys.push(key);
-	    }
+	    for (var key in object) keys.push(key);
 	    return keys.reverse(), function next() {
 	      for (; keys.length;) {
 	        var key = keys.pop();
@@ -4956,9 +4980,7 @@ var _typeof$1 = {exports: {}};
 	  }, exports.values = values, Context.prototype = {
 	    constructor: Context,
 	    reset: function reset(skipTempReset) {
-	      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) {
-	        "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
-	      }
+	      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
 	    },
 	    stop: function stop() {
 	      this.done = !0;
@@ -5041,7 +5063,7 @@ var _typeof$1 = {exports: {}};
 
 // TODO(Babel 8): Remove this file.
 
-var runtime = regeneratorRuntime$1.exports();
+var runtime = regeneratorRuntimeExports();
 var regenerator = runtime;
 
 // Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
@@ -5057,7 +5079,11 @@ try {
 
 var build$1 = {};
 
-var ansiStyles = {exports: {}};
+var ansiStylesExports = {};
+var ansiStyles = {
+  get exports(){ return ansiStylesExports; },
+  set exports(v){ ansiStylesExports = v; },
+};
 
 (function (module) {
 
@@ -5549,7 +5575,7 @@ ConvertAnsi.test = ConvertAnsi.serialize = ConvertAnsi.default = void 0;
 
 var _ansiRegex = _interopRequireDefault$d(ansiRegex);
 
-var _ansiStyles$1 = _interopRequireDefault$d(ansiStyles.exports);
+var _ansiStyles$1 = _interopRequireDefault$d(ansiStylesExports);
 
 function _interopRequireDefault$d(obj) {
   return obj && obj.__esModule ? obj : {default: obj};
@@ -6268,7 +6294,11 @@ Immutable.default = _default$2l;
 
 var ReactElement = {};
 
-var reactIs = {exports: {}};
+var reactIsExports = {};
+var reactIs = {
+  get exports(){ return reactIsExports; },
+  set exports(v){ reactIsExports = v; },
+};
 
 var reactIs_production_min = {};
 
@@ -6540,7 +6570,7 @@ Object.defineProperty(ReactElement, '__esModule', {
 });
 ReactElement.test = ReactElement.serialize = ReactElement.default = void 0;
 
-var ReactIs = _interopRequireWildcard$2(reactIs.exports);
+var ReactIs = _interopRequireWildcard$2(reactIsExports);
 
 var _markup$1 = markup;
 
@@ -6787,7 +6817,7 @@ var default_1 = build$1.default = DEFAULT_OPTIONS_1 = build$1.DEFAULT_OPTIONS =
 var format_1 = build$1.format = format;
 var plugins_1 = build$1.plugins = void 0;
 
-var _ansiStyles = _interopRequireDefault$b(ansiStyles.exports);
+var _ansiStyles = _interopRequireDefault$b(ansiStylesExports);
 
 var _collections = collections;
 
@@ -7379,9 +7409,9 @@ default_1 = build$1.default = _default$2i;
 var index = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   get DEFAULT_OPTIONS () { return DEFAULT_OPTIONS_1; },
+  get default () { return default_1; },
   format: format_1,
-  get plugins () { return plugins_1; },
-  get default () { return default_1; }
+  get plugins () { return plugins_1; }
 }, [build$1]);
 
 /**
@@ -14760,7 +14790,11 @@ var getIntrinsic = function GetIntrinsic(name, allowMissing) {
 	return value;
 };
 
-var callBind$4 = {exports: {}};
+var callBindExports = {};
+var callBind$4 = {
+  get exports(){ return callBindExports; },
+  set exports(v){ callBindExports = v; },
+};
 
 (function (module) {
 
@@ -14813,7 +14847,7 @@ var callBind$4 = {exports: {}};
 
 var GetIntrinsic$5 = getIntrinsic;
 
-var callBind$3 = callBind$4.exports;
+var callBind$3 = callBindExports;
 
 var $indexOf = callBind$3(GetIntrinsic$5('String.prototype.indexOf'));
 
@@ -14972,7 +15006,7 @@ var shim$5 = function shimObjectIs() {
 };
 
 var define$2 = defineProperties_1;
-var callBind$2 = callBind$4.exports;
+var callBind$2 = callBindExports;
 
 var implementation$6 = implementation$8;
 var getPolyfill$4 = polyfill$4;
@@ -15045,7 +15079,11 @@ var isRegex$1 = hasToStringTag$6
 		return $toString$2(value) === regexClass;
 	};
 
-var implementation$5 = {exports: {}};
+var implementationExports = {};
+var implementation$5 = {
+  get exports(){ return implementationExports; },
+  set exports(v){ implementationExports = v; },
+};
 
 var functionsHaveNames = function functionsHaveNames() {
 	return typeof function f() {}.name === 'string';
@@ -15118,7 +15156,7 @@ var functionsHaveNames_1 = functionsHaveNames;
 	}
 } (implementation$5));
 
-var implementation$4 = implementation$5.exports;
+var implementation$4 = implementationExports;
 
 var supportsDescriptors$1 = defineProperties_1.supportsDescriptors;
 var $gOPD$1 = Object.getOwnPropertyDescriptor;
@@ -15179,9 +15217,9 @@ var shim$3 = function shimFlags() {
 };
 
 var define$1 = defineProperties_1;
-var callBind$1 = callBind$4.exports;
+var callBind$1 = callBindExports;
 
-var implementation$3 = implementation$5.exports;
+var implementation$3 = implementationExports;
 var getPolyfill$2 = polyfill$2;
 var shim$2 = shim$3;
 
@@ -15293,7 +15331,11 @@ var isBooleanObject = function isBoolean(value) {
 	return hasToStringTag$2 && Symbol.toStringTag in value ? tryBooleanObject(value) : $toString$1(value) === boolClass;
 };
 
-var isSymbol$2 = {exports: {}};
+var isSymbolExports = {};
+var isSymbol$2 = {
+  get exports(){ return isSymbolExports; },
+  set exports(v){ isSymbolExports = v; },
+};
 
 var toStr$3 = Object.prototype.toString;
 var hasSymbols$1 = hasSymbols$4();
@@ -15329,7 +15371,11 @@ if (hasSymbols$1) {
 	};
 }
 
-var isBigint = {exports: {}};
+var isBigintExports = {};
+var isBigint = {
+  get exports(){ return isBigintExports; },
+  set exports(v){ isBigintExports = v; },
+};
 
 var $BigInt = typeof BigInt !== 'undefined' && BigInt;
 
@@ -15380,8 +15426,8 @@ if (hasBigInts) {
 var isString$1 = isString$2;
 var isNumber$1 = isNumberObject;
 var isBoolean$1 = isBooleanObject;
-var isSymbol$1 = isSymbol$2.exports;
-var isBigInt$1 = isBigint.exports;
+var isSymbol$1 = isSymbolExports;
+var isBigInt$1 = isBigintExports;
 
 // eslint-disable-next-line consistent-return
 var whichBoxedPrimitive$1 = function whichBoxedPrimitive(value) {
@@ -15529,7 +15575,11 @@ var isWeakmap = exported || function isWeakMap(x) {
 	return false;
 };
 
-var isWeakset = {exports: {}};
+var isWeaksetExports = {};
+var isWeakset = {
+  get exports(){ return isWeaksetExports; },
+  set exports(v){ isWeaksetExports = v; },
+};
 
 var GetIntrinsic$3 = getIntrinsic;
 var callBound$4 = callBound$8;
@@ -15569,7 +15619,7 @@ if ($setHas$1) {
 var isMap$1 = isMap$2;
 var isSet$1 = isSet$2;
 var isWeakMap$1 = isWeakmap;
-var isWeakSet$1 = isWeakset.exports;
+var isWeakSet$1 = isWeaksetExports;
 
 var whichCollection$1 = function whichCollection(value) {
 	if (value && typeof value === 'object') {
@@ -16675,7 +16725,7 @@ var shim$1 = function shimAssign() {
 };
 
 var defineProperties = defineProperties_1;
-var callBind = callBind$4.exports;
+var callBind = callBindExports;
 
 var implementation = implementation$2;
 var getPolyfill = polyfill$1;
@@ -17299,7 +17349,11 @@ var elementRoles_1 = lib.elementRoles = elementRoles;
 var roleElements = _roleElementMap.default;
 var roleElements_1 = lib.roleElements = roleElements;
 
-var lzString$1 = {exports: {}};
+var lzStringExports = {};
+var lzString$1 = {
+  get exports(){ return lzStringExports; },
+  set exports(v){ lzStringExports = v; },
+};
 
 (function (module) {
 	// Copyright (c) 2013 Pieroxy <pieroxy@pieroxy.net>
@@ -17802,83 +17856,72 @@ var lzString$1 = {exports: {}};
 	}
 } (lzString$1));
 
-var lzString = lzString$1.exports;
+var lzString = lzStringExports;
 
 /**
  * Source: https://github.com/facebook/jest/blob/e7bb6a1e26ffab90611b2593912df15b69315611/packages/pretty-format/src/plugins/DOMElement.ts
  */
-
 /* eslint-disable -- trying to stay as close to the original as possible */
-
 /* istanbul ignore file */
+
 function escapeHTML(str) {
   return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-} // Return empty string if keys is empty.
-
-
+}
+// Return empty string if keys is empty.
 const printProps = (keys, props, config, indentation, depth, refs, printer) => {
   const indentationNext = indentation + config.indent;
   const colors = config.colors;
   return keys.map(key => {
     const value = props[key];
     let printed = printer(value, config, indentationNext, depth, refs);
-
     if (typeof value !== 'string') {
       if (printed.indexOf('\n') !== -1) {
         printed = config.spacingOuter + indentationNext + printed + config.spacingOuter + indentation;
       }
-
       printed = '{' + printed + '}';
     }
-
     return config.spacingInner + indentation + colors.prop.open + key + colors.prop.close + '=' + colors.value.open + printed + colors.value.close;
   }).join('');
-}; // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#node_type_constants
-
+};
 
-const NodeTypeTextNode = 3; // Return empty string if children is empty.
+// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#node_type_constants
+const NodeTypeTextNode = 3;
 
+// Return empty string if children is empty.
 const printChildren = (children, config, indentation, depth, refs, printer) => children.map(child => {
   const printedChild = typeof child === 'string' ? printText(child, config) : printer(child, config, indentation, depth, refs);
-
   if (printedChild === '' && typeof child === 'object' && child !== null && child.nodeType !== NodeTypeTextNode) {
     // A plugin serialized this Node to '' meaning we should ignore it.
     return '';
   }
-
   return config.spacingOuter + indentation + printedChild;
 }).join('');
-
 const printText = (text, config) => {
   const contentColor = config.colors.content;
   return contentColor.open + escapeHTML(text) + contentColor.close;
 };
-
 const printComment = (comment, config) => {
   const commentColor = config.colors.comment;
   return commentColor.open + '<!--' + escapeHTML(comment) + '-->' + commentColor.close;
-}; // Separate the functions to format props, children, and element,
+};
+
+// Separate the functions to format props, children, and element,
 // so a plugin could override a particular function, if needed.
 // Too bad, so sad: the traditional (but unnecessary) space
 // in a self-closing tagColor requires a second test of printedProps.
-
-
 const printElement = (type, printedProps, printedChildren, config, indentation) => {
   const tagColor = config.colors.tag;
   return tagColor.open + '<' + type + (printedProps && tagColor.close + printedProps + config.spacingOuter + indentation + tagColor.open) + (printedChildren ? '>' + tagColor.close + printedChildren + config.spacingOuter + indentation + tagColor.open + '</' + type : (printedProps && !config.min ? '' : ' ') + '/') + '>' + tagColor.close;
 };
-
 const printElementAsLeaf = (type, config) => {
   const tagColor = config.colors.tag;
   return tagColor.open + '<' + type + tagColor.close + ' …' + tagColor.open + ' />' + tagColor.close;
 };
-
 const ELEMENT_NODE$1 = 1;
 const TEXT_NODE$1 = 3;
 const COMMENT_NODE$1 = 8;
 const FRAGMENT_NODE = 11;
 const ELEMENT_REGEXP = /^((HTML|SVG)\w*)?Element$/;
-
 const testNode = val => {
   const constructorName = val.constructor.name;
   const {
@@ -17888,41 +17931,32 @@ const testNode = val => {
   const isCustomElement = typeof tagName === 'string' && tagName.includes('-') || typeof val.hasAttribute === 'function' && val.hasAttribute('is');
   return nodeType === ELEMENT_NODE$1 && (ELEMENT_REGEXP.test(constructorName) || isCustomElement) || nodeType === TEXT_NODE$1 && constructorName === 'Text' || nodeType === COMMENT_NODE$1 && constructorName === 'Comment' || nodeType === FRAGMENT_NODE && constructorName === 'DocumentFragment';
 };
-
 function nodeIsText(node) {
   return node.nodeType === TEXT_NODE$1;
 }
-
 function nodeIsComment(node) {
   return node.nodeType === COMMENT_NODE$1;
 }
-
 function nodeIsFragment(node) {
   return node.nodeType === FRAGMENT_NODE;
 }
-
 function createDOMElementFilter(filterNode) {
   return {
     test: val => {
       var _val$constructor2;
-
       return (val == null ? void 0 : (_val$constructor2 = val.constructor) == null ? void 0 : _val$constructor2.name) && testNode(val);
     },
     serialize: (node, config, indentation, depth, refs, printer) => {
       if (nodeIsText(node)) {
         return printText(node.data, config);
       }
-
       if (nodeIsComment(node)) {
         return printComment(node.data, config);
       }
-
       const type = nodeIsFragment(node) ? "DocumentFragment" : node.tagName.toLowerCase();
-
       if (++depth > config.maxDepth) {
         return printElementAsLeaf(type, config);
       }
-
       return printElement(type, printProps(nodeIsFragment(node) ? [] : Array.from(node.attributes).map(attr => attr.name).sort(), nodeIsFragment(node) ? {} : Array.from(node.attributes).reduce((props, attribute) => {
         props[attribute.name] = attribute.value;
         return props;
@@ -17935,16 +17969,16 @@ function createDOMElementFilter(filterNode) {
 let chalk = null;
 let readFileSync = null;
 let codeFrameColumns = null;
-
 try {
   const nodeRequire = module && module.require;
   readFileSync = nodeRequire.call(module, 'fs').readFileSync;
   codeFrameColumns = nodeRequire.call(module, '@babel/code-frame').codeFrameColumns;
   chalk = nodeRequire.call(module, 'chalk');
-} catch {// We're in a browser environment
-} // frame has the form "at myMethod (location/to/my/file.js:10:2)"
-
+} catch {
+  // We're in a browser environment
+}
 
+// frame has the form "at myMethod (location/to/my/file.js:10:2)"
 function getCodeFrame(frame) {
   const locationStart = frame.indexOf('(') + 1;
   const locationEnd = frame.indexOf(')');
@@ -17952,13 +17986,11 @@ function getCodeFrame(frame) {
   const frameLocationElements = frameLocation.split(':');
   const [filename, line, column] = [frameLocationElements[0], parseInt(frameLocationElements[1], 10), parseInt(frameLocationElements[2], 10)];
   let rawFileContents = '';
-
   try {
     rawFileContents = readFileSync(filename, 'utf-8');
   } catch {
     return '';
   }
-
   const codeFrame = codeFrameColumns(rawFileContents, {
     start: {
       line,
@@ -17970,15 +18002,12 @@ function getCodeFrame(frame) {
   });
   return chalk.dim(frameLocation) + "\n" + codeFrame + "\n";
 }
-
 function getUserCodeFrame() {
   // If we couldn't load dependencies, we can't generate the user trace
-
   /* istanbul ignore next */
   if (!readFileSync || !codeFrameColumns) {
     return '';
   }
-
   const err = new Error();
   const firstClientCodeFrame = err.stack.split('\n').slice(1) // Remove first line which has the form "Error: TypeError"
   .find(frame => !frame.includes('node_modules/')); // Ignore frames from 3rd party libraries
@@ -17989,30 +18018,27 @@ function getUserCodeFrame() {
 // Constant node.nodeType for text nodes, see:
 // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#Node_type_constants
 const TEXT_NODE$2 = 3;
-
 function jestFakeTimersAreEnabled$1() {
   /* istanbul ignore else */
   // eslint-disable-next-line
   if (typeof jest !== 'undefined' && jest !== null) {
-    return (// legacy timers
-      setTimeout._isMockFunction === true || // modern timers
+    return (
+      // legacy timers
+      setTimeout._isMockFunction === true ||
+      // modern timers
       Object.prototype.hasOwnProperty.call(setTimeout, 'clock')
     );
-  } // istanbul ignore next
-
-
+  }
+  // istanbul ignore next
   return false;
 }
-
 function getDocument$1() {
   /* istanbul ignore if */
   if (typeof window === 'undefined') {
     throw new Error('Could not find default container');
   }
-
   return window.document;
 }
-
 function getWindowFromNode$1(node) {
   if (node.defaultView) {
     // node is document
@@ -18036,32 +18062,27 @@ function getWindowFromNode$1(node) {
     throw new Error("The given node is not an Element, the node type is: " + typeof node + ".");
   }
 }
-
 function checkContainerType$1(container) {
   if (!container || !(typeof container.querySelector === 'function') || !(typeof container.querySelectorAll === 'function')) {
     throw new TypeError("Expected container to be an Element, a Document or a DocumentFragment but got " + getTypeName(container) + ".");
   }
-
   function getTypeName(object) {
     if (typeof object === 'object') {
       return object === null ? 'null' : object.constructor.name;
     }
-
     return typeof object;
   }
 }
 
 const shouldHighlight = () => {
   let colors;
-
   try {
     var _process, _process$env;
-
     colors = JSON.parse((_process = process) == null ? void 0 : (_process$env = _process.env) == null ? void 0 : _process$env.COLORS);
-  } catch (e) {// If this throws, process?.env?.COLORS wasn't parsable. Since we only
+  } catch (e) {
+    // If this throws, process?.env?.COLORS wasn't parsable. Since we only
     // care about `true` or `false`, we can safely ignore the error.
   }
-
   if (typeof colors === 'boolean') {
     // If `colors` is set explicitly (both `true` and `false`), use that value.
     return colors;
@@ -18070,52 +18091,44 @@ const shouldHighlight = () => {
     return typeof process !== 'undefined' && process.versions !== undefined && process.versions.node !== undefined;
   }
 };
-
 const {
   DOMCollection
-} = plugins_1; // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#node_type_constants
+} = plugins_1;
 
+// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#node_type_constants
 const ELEMENT_NODE = 1;
-const COMMENT_NODE = 8; // https://github.com/facebook/jest/blob/615084195ae1ae61ddd56162c62bbdda17587569/packages/pretty-format/src/plugins/DOMElement.ts#L50
+const COMMENT_NODE = 8;
 
+// https://github.com/facebook/jest/blob/615084195ae1ae61ddd56162c62bbdda17587569/packages/pretty-format/src/plugins/DOMElement.ts#L50
 function filterCommentsAndDefaultIgnoreTagsTags(value) {
   return value.nodeType !== COMMENT_NODE && (value.nodeType !== ELEMENT_NODE || !value.matches(getConfig().defaultIgnore));
 }
-
 function prettyDOM(dom, maxLength, options) {
   if (options === void 0) {
     options = {};
   }
-
   if (!dom) {
     dom = getDocument$1().body;
   }
-
   if (typeof maxLength !== 'number') {
     maxLength = typeof process !== 'undefined' && process.env.DEBUG_PRINT_LIMIT || 7000;
   }
-
   if (maxLength === 0) {
     return '';
   }
-
   if (dom.documentElement) {
     dom = dom.documentElement;
   }
-
   let domTypeName = typeof dom;
-
   if (domTypeName === 'object') {
     domTypeName = dom.constructor.name;
   } else {
     // To don't fall with `in` operator
     dom = {};
   }
-
   if (!('outerHTML' in dom)) {
     throw new TypeError("Expected an element or document but got " + domTypeName);
   }
-
   const {
     filterNode = filterCommentsAndDefaultIgnoreTagsTags,
     ...prettyFormatOptions
@@ -18128,10 +18141,8 @@ function prettyDOM(dom, maxLength, options) {
   });
   return maxLength !== undefined && dom.outerHTML.length > maxLength ? debugContent.slice(0, maxLength) + "..." : debugContent;
 }
-
 const logDOM = function () {
   const userCodeFrame = getUserCodeFrame();
-
   if (userCodeFrame) {
     console.log(prettyDOM(...arguments) + "\n\n" + userCodeFrame);
   } else {
@@ -18163,7 +18174,6 @@ let config = {
   showOriginalStackTrace: false,
   // throw errors w/ suggestions for better queries. Opt in so off by default.
   throwSuggestions: false,
-
   // called when getBy* queries fail. (message, container) => Error
   getElementError(message, container) {
     const prettifiedDOM = prettyDOM(container);
@@ -18171,7 +18181,6 @@ let config = {
     error.name = 'TestingLibraryElementError';
     return error;
   },
-
   _disableExpensiveErrorDiagnostics: false,
   computedStyleSupportsPseudoElements: false
 };
@@ -18188,10 +18197,11 @@ function configure(newConfig) {
     // Pass the existing config out to the provided function
     // and accept a delta in return
     newConfig = newConfig(config);
-  } // Merge the incoming config delta
-
+  }
 
-  config = { ...config,
+  // Merge the incoming config delta
+  config = {
+    ...config,
     ...newConfig
   };
 }
@@ -18200,46 +18210,37 @@ function getConfig() {
 }
 
 const labelledNodeNames = ['button', 'meter', 'output', 'progress', 'select', 'textarea', 'input'];
-
 function getTextContent(node) {
   if (labelledNodeNames.includes(node.nodeName.toLowerCase())) {
     return '';
   }
-
   if (node.nodeType === TEXT_NODE$2) return node.textContent;
   return Array.from(node.childNodes).map(childNode => getTextContent(childNode)).join('');
 }
-
 function getLabelContent(element) {
   let textContent;
-
   if (element.tagName.toLowerCase() === 'label') {
     textContent = getTextContent(element);
   } else {
     textContent = element.value || element.textContent;
   }
-
   return textContent;
-} // Based on https://github.com/eps1lon/dom-accessibility-api/pull/352
-
+}
 
+// Based on https://github.com/eps1lon/dom-accessibility-api/pull/352
 function getRealLabels(element) {
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- types are not aware of older browsers that don't implement `labels`
   if (element.labels !== undefined) {
     var _labels;
-
     return (_labels = element.labels) != null ? _labels : [];
   }
-
   if (!isLabelable(element)) return [];
   const labels = element.ownerDocument.querySelectorAll('label');
   return Array.from(labels).filter(label => label.control === element);
 }
-
 function isLabelable(element) {
   return /BUTTON|METER|OUTPUT|PROGRESS|SELECT|TEXTAREA/.test(element.tagName) || element.tagName === 'INPUT' && element.getAttribute('type') !== 'hidden';
 }
-
 function getLabels(container, element, _temp) {
   let {
     selector = '*'
@@ -18272,15 +18273,12 @@ function assertNotNullOrUndefined(matcher) {
     "It looks like " + matcher + " was passed instead of a matcher. Did you do something like getByText(" + matcher + ")?");
   }
 }
-
 function fuzzyMatches(textToMatch, node, matcher, normalizer) {
   if (typeof textToMatch !== 'string') {
     return false;
   }
-
   assertNotNullOrUndefined(matcher);
   const normalizedText = normalizer(textToMatch);
-
   if (typeof matcher === 'string' || typeof matcher === 'number') {
     return normalizedText.toLowerCase().includes(matcher.toString().toLowerCase());
   } else if (typeof matcher === 'function') {
@@ -18289,15 +18287,12 @@ function fuzzyMatches(textToMatch, node, matcher, normalizer) {
     return matchRegExp(matcher, normalizedText);
   }
 }
-
 function matches(textToMatch, node, matcher, normalizer) {
   if (typeof textToMatch !== 'string') {
     return false;
   }
-
   assertNotNullOrUndefined(matcher);
   const normalizedText = normalizer(textToMatch);
-
   if (matcher instanceof Function) {
     return matcher(normalizedText, node);
   } else if (matcher instanceof RegExp) {
@@ -18306,7 +18301,6 @@ function matches(textToMatch, node, matcher, normalizer) {
     return normalizedText === String(matcher);
   }
 }
-
 function getDefaultNormalizer(_temp) {
   let {
     trim = true,
@@ -18319,6 +18313,7 @@ function getDefaultNormalizer(_temp) {
     return normalizedText;
   };
 }
+
 /**
  * Constructs a normalizer to pass to functions in matches.js
  * @param {boolean|undefined} trim The user-specified value for `trim`, without
@@ -18329,14 +18324,12 @@ function getDefaultNormalizer(_temp) {
  * @returns {Function} A normalizer
  */
 
-
 function makeNormalizer(_ref) {
   let {
     trim,
     collapseWhitespace,
     normalizer
   } = _ref;
-
   if (!normalizer) {
     // No custom normalizer specified. Just use default.
     return getDefaultNormalizer({
@@ -18344,23 +18337,18 @@ function makeNormalizer(_ref) {
       collapseWhitespace
     });
   }
-
   if (typeof trim !== 'undefined' || typeof collapseWhitespace !== 'undefined') {
     // They've also specified a value for trim or collapseWhitespace
     throw new Error('trim and collapseWhitespace are not supported with a normalizer. ' + 'If you want to use the default trim and collapseWhitespace logic in your normalizer, ' + 'use "getDefaultNormalizer({trim, collapseWhitespace})" and compose that into your normalizer');
   }
-
   return normalizer;
 }
-
 function matchRegExp(matcher, text) {
   const match = matcher.test(text);
-
   if (matcher.global && matcher.lastIndex !== 0) {
     console.warn("To match all elements we had to reset the lastIndex of the RegExp because the global flag is enabled. We encourage to remove the global flag from the RegExp.");
     matcher.lastIndex = 0;
   }
-
   return match;
 }
 
@@ -18368,33 +18356,29 @@ function getNodeText(node) {
   if (node.matches('input[type=submit], input[type=button], input[type=reset]')) {
     return node.value;
   }
-
   return Array.from(node.childNodes).filter(child => child.nodeType === TEXT_NODE$2 && Boolean(child.textContent)).map(c => c.textContent).join('');
 }
 
 const elementRoleList = buildElementRoleList(elementRoles_1);
+
 /**
  * @param {Element} element -
  * @returns {boolean} - `true` if `element` and its subtree are inaccessible
  */
-
 function isSubtreeInaccessible(element) {
   if (element.hidden === true) {
     return true;
   }
-
   if (element.getAttribute('aria-hidden') === 'true') {
     return true;
   }
-
   const window = element.ownerDocument.defaultView;
-
   if (window.getComputedStyle(element).display === 'none') {
     return true;
   }
-
   return false;
 }
+
 /**
  * Partial implementation https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion
  * which should only be used for elements with a non-presentational role i.e.
@@ -18409,35 +18393,27 @@ function isSubtreeInaccessible(element) {
  * can be used to return cached results from previous isSubtreeInaccessible calls
  * @returns {boolean} true if excluded, otherwise false
  */
-
-
 function isInaccessible(element, options) {
   if (options === void 0) {
     options = {};
   }
-
   const {
     isSubtreeInaccessible: isSubtreeInaccessibleImpl = isSubtreeInaccessible
   } = options;
-  const window = element.ownerDocument.defaultView; // since visibility is inherited we can exit early
-
+  const window = element.ownerDocument.defaultView;
+  // since visibility is inherited we can exit early
   if (window.getComputedStyle(element).visibility === 'hidden') {
     return true;
   }
-
   let currentElement = element;
-
   while (currentElement) {
     if (isSubtreeInaccessibleImpl(currentElement)) {
       return true;
     }
-
     currentElement = currentElement.parentElement;
   }
-
   return false;
 }
-
 function getImplicitAriaRoles(currentNode) {
   // eslint bug here:
   // eslint-disable-next-line no-unused-vars
@@ -18449,10 +18425,8 @@ function getImplicitAriaRoles(currentNode) {
       return [...roles];
     }
   }
-
   return [];
 }
-
 function buildElementRoleList(elementRolesMap) {
   function makeElementSelector(_ref) {
     let {
@@ -18466,7 +18440,6 @@ function buildElementRoleList(elementRolesMap) {
         constraints = []
       } = _ref2;
       const shouldNotExist = constraints.indexOf('undefined') !== -1;
-
       if (shouldNotExist) {
         return ":not([" + attributeName + "])";
       } else if (value) {
@@ -18476,14 +18449,12 @@ function buildElementRoleList(elementRolesMap) {
       }
     }).join('');
   }
-
   function getSelectorSpecificity(_ref3) {
     let {
       attributes = []
     } = _ref3;
     return attributes.length;
   }
-
   function bySelectorSpecificity(_ref4, _ref5) {
     let {
       specificity: leftSpecificity
@@ -18493,34 +18464,32 @@ function buildElementRoleList(elementRolesMap) {
     } = _ref5;
     return rightSpecificity - leftSpecificity;
   }
-
   function match(element) {
     let {
       attributes = []
-    } = element; // https://github.com/testing-library/dom-testing-library/issues/814
+    } = element;
 
+    // https://github.com/testing-library/dom-testing-library/issues/814
     const typeTextIndex = attributes.findIndex(attribute => attribute.value && attribute.name === 'type' && attribute.value === 'text');
-
     if (typeTextIndex >= 0) {
       // not using splice to not mutate the attributes array
       attributes = [...attributes.slice(0, typeTextIndex), ...attributes.slice(typeTextIndex + 1)];
     }
-
-    const selector = makeElementSelector({ ...element,
+    const selector = makeElementSelector({
+      ...element,
       attributes
     });
     return node => {
       if (typeTextIndex >= 0 && node.type !== 'text') {
         return false;
       }
-
       return node.matches(selector);
     };
   }
+  let result = [];
 
-  let result = []; // eslint bug here:
+  // eslint bug here:
   // eslint-disable-next-line no-unused-vars
-
   for (const [element, roles] of elementRolesMap.entries()) {
     result = [...result, {
       match: match(element),
@@ -18528,38 +18497,34 @@ function buildElementRoleList(elementRolesMap) {
       specificity: getSelectorSpecificity(element)
     }];
   }
-
   return result.sort(bySelectorSpecificity);
 }
-
 function getRoles(container, _temp) {
   let {
     hidden = false
   } = _temp === void 0 ? {} : _temp;
-
   function flattenDOM(node) {
     return [node, ...Array.from(node.children).reduce((acc, child) => [...acc, ...flattenDOM(child)], [])];
   }
-
   return flattenDOM(container).filter(element => {
     return hidden === false ? isInaccessible(element) === false : true;
   }).reduce((acc, node) => {
-    let roles = []; // TODO: This violates html-aria which does not allow any role on every element
-
+    let roles = [];
+    // TODO: This violates html-aria which does not allow any role on every element
     if (node.hasAttribute('role')) {
       roles = node.getAttribute('role').split(' ').slice(0, 1);
     } else {
       roles = getImplicitAriaRoles(node);
     }
-
-    return roles.reduce((rolesAcc, role) => Array.isArray(rolesAcc[role]) ? { ...rolesAcc,
+    return roles.reduce((rolesAcc, role) => Array.isArray(rolesAcc[role]) ? {
+      ...rolesAcc,
       [role]: [...rolesAcc[role], node]
-    } : { ...rolesAcc,
+    } : {
+      ...rolesAcc,
       [role]: [node]
     }, acc);
   }, {});
 }
-
 function prettyRoles(dom, _ref6) {
   let {
     hidden,
@@ -18567,8 +18532,8 @@ function prettyRoles(dom, _ref6) {
   } = _ref6;
   const roles = getRoles(dom, {
     hidden
-  }); // We prefer to skip generic role, we don't recommend it
-
+  });
+  // We prefer to skip generic role, we don't recommend it
   return Object.entries(roles).filter(_ref7 => {
     let [role] = _ref7;
     return role !== 'generic';
@@ -18580,20 +18545,17 @@ function prettyRoles(dom, _ref6) {
         computedStyleSupportsPseudoElements: getConfig().computedStyleSupportsPseudoElements
       }) + "\":\n";
       const domString = prettyDOM(el.cloneNode(false));
-
       if (includeDescription) {
         const descriptionString = "Description \"" + computeAccessibleDescription(el, {
           computedStyleSupportsPseudoElements: getConfig().computedStyleSupportsPseudoElements
         }) + "\":\n";
         return "" + nameString + descriptionString + domString;
       }
-
       return "" + nameString + domString;
     }).join('\n\n');
     return role + ":\n\n" + elementsString + "\n\n" + delimiterBar;
   }).join('\n');
 }
-
 const logRoles = function (dom, _temp2) {
   let {
     hidden = false
@@ -18602,28 +18564,26 @@ const logRoles = function (dom, _temp2) {
     hidden
   }));
 };
+
 /**
  * @param {Element} element -
  * @returns {boolean | undefined} - false/true if (not)selected, undefined if not selectable
  */
-
-
 function computeAriaSelected(element) {
   // implicit value from html-aam mappings: https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings
   // https://www.w3.org/TR/html-aam-1.0/#details-id-97
   if (element.tagName === 'OPTION') {
     return element.selected;
-  } // explicit value
-
+  }
 
+  // explicit value
   return checkBooleanAttribute(element, 'aria-selected');
 }
+
 /**
  * @param {Element} element -
  * @returns {boolean | undefined} - false/true if (not)checked, undefined if not checked-able
  */
-
-
 function computeAriaChecked(element) {
   // implicit value from html-aam mappings: https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings
   // https://www.w3.org/TR/html-aam-1.0/#details-id-56
@@ -18631,66 +18591,56 @@ function computeAriaChecked(element) {
   if ('indeterminate' in element && element.indeterminate) {
     return undefined;
   }
-
   if ('checked' in element) {
     return element.checked;
-  } // explicit value
-
+  }
 
+  // explicit value
   return checkBooleanAttribute(element, 'aria-checked');
 }
+
 /**
  * @param {Element} element -
  * @returns {boolean | undefined} - false/true if (not)pressed, undefined if not press-able
  */
-
-
 function computeAriaPressed(element) {
   // https://www.w3.org/TR/wai-aria-1.1/#aria-pressed
   return checkBooleanAttribute(element, 'aria-pressed');
 }
+
 /**
  * @param {Element} element -
  * @returns {boolean | string | null} -
  */
-
-
 function computeAriaCurrent(element) {
   var _ref9, _checkBooleanAttribut;
-
   // https://www.w3.org/TR/wai-aria-1.1/#aria-current
   return (_ref9 = (_checkBooleanAttribut = checkBooleanAttribute(element, 'aria-current')) != null ? _checkBooleanAttribut : element.getAttribute('aria-current')) != null ? _ref9 : false;
 }
+
 /**
  * @param {Element} element -
  * @returns {boolean | undefined} - false/true if (not)expanded, undefined if not expand-able
  */
-
-
 function computeAriaExpanded(element) {
   // https://www.w3.org/TR/wai-aria-1.1/#aria-expanded
   return checkBooleanAttribute(element, 'aria-expanded');
 }
-
 function checkBooleanAttribute(element, attribute) {
   const attributeValue = element.getAttribute(attribute);
-
   if (attributeValue === 'true') {
     return true;
   }
-
   if (attributeValue === 'false') {
     return false;
   }
-
   return undefined;
 }
+
 /**
  * @param {Element} element -
  * @returns {number | undefined} - number if implicit heading or aria-level present, otherwise undefined
  */
-
-
 function computeHeadingLevel(element) {
   // https://w3c.github.io/html-aam/#el-h1-h6
   // https://w3c.github.io/html-aam/#el-h1-h6
@@ -18701,15 +18651,14 @@ function computeHeadingLevel(element) {
     H4: 4,
     H5: 5,
     H6: 6
-  }; // explicit aria-level value
+  };
+  // explicit aria-level value
   // https://www.w3.org/TR/wai-aria-1.2/#aria-level
-
   const ariaLevelAttribute = element.getAttribute('aria-level') && Number(element.getAttribute('aria-level'));
   return ariaLevelAttribute || implicitHeadingLevels[element.tagName];
 }
 
 const normalize = getDefaultNormalizer();
-
 function escapeRegExp(string) {
   return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
@@ -18717,7 +18666,6 @@ function escapeRegExp(string) {
 function getRegExpMatcher(string) {
   return new RegExp(escapeRegExp(string.toLowerCase()), 'i');
 }
-
 function makeSuggestion(queryName, element, content, _ref) {
   let {
     variant,
@@ -18726,20 +18674,16 @@ function makeSuggestion(queryName, element, content, _ref) {
   let warning = '';
   const queryOptions = {};
   const queryArgs = [['Role', 'TestId'].includes(queryName) ? content : getRegExpMatcher(content)];
-
   if (name) {
     queryOptions.name = getRegExpMatcher(name);
   }
-
   if (queryName === 'Role' && isInaccessible(element)) {
     queryOptions.hidden = true;
     warning = "Element is inaccessible. This means that the element and all its children are invisible to screen readers.\n    If you are using the aria-hidden prop, make sure this is the right choice for your case.\n    ";
   }
-
   if (Object.keys(queryOptions).length > 0) {
     queryArgs.push(queryOptions);
   }
-
   const queryMethod = variant + "By" + queryName;
   return {
     queryName,
@@ -18747,12 +18691,10 @@ function makeSuggestion(queryName, element, content, _ref) {
     queryArgs,
     variant,
     warning,
-
     toString() {
       if (warning) {
         console.warn(warning);
       }
-
       let [text, options] = queryArgs;
       text = typeof text === 'string' ? "'" + text + "'" : text;
       options = options ? ", { " + Object.entries(options).map(_ref2 => {
@@ -18761,29 +18703,23 @@ function makeSuggestion(queryName, element, content, _ref) {
       }).join(', ') + " }" : '';
       return queryMethod + "(" + text + options + ")";
     }
-
   };
 }
-
 function canSuggest(currentMethod, requestedMethod, data) {
   return data && (!requestedMethod || requestedMethod.toLowerCase() === currentMethod.toLowerCase());
 }
-
 function getSuggestedQuery(element, variant, method) {
   var _element$getAttribute, _getImplicitAriaRoles;
-
   if (variant === void 0) {
     variant = 'get';
   }
-
   // don't create suggestions for script and style elements
   if (element.matches(getConfig().defaultIgnore)) {
     return undefined;
-  } //We prefer to suggest something else if the role is generic
-
+  }
 
+  //We prefer to suggest something else if the role is generic
   const role = (_element$getAttribute = element.getAttribute('role')) != null ? _element$getAttribute : (_getImplicitAriaRoles = getImplicitAriaRoles(element)) == null ? void 0 : _getImplicitAriaRoles[0];
-
   if (role !== 'generic' && canSuggest('Role', method, role)) {
     return makeSuggestion('Role', element, role, {
       variant,
@@ -18792,70 +18728,55 @@ function getSuggestedQuery(element, variant, method) {
       })
     });
   }
-
   const labelText = getLabels(document, element).map(label => label.content).join(' ');
-
   if (canSuggest('LabelText', method, labelText)) {
     return makeSuggestion('LabelText', element, labelText, {
       variant
     });
   }
-
   const placeholderText = element.getAttribute('placeholder');
-
   if (canSuggest('PlaceholderText', method, placeholderText)) {
     return makeSuggestion('PlaceholderText', element, placeholderText, {
       variant
     });
   }
-
   const textContent = normalize(getNodeText(element));
-
   if (canSuggest('Text', method, textContent)) {
     return makeSuggestion('Text', element, textContent, {
       variant
     });
   }
-
   if (canSuggest('DisplayValue', method, element.value)) {
     return makeSuggestion('DisplayValue', element, normalize(element.value), {
       variant
     });
   }
-
   const alt = element.getAttribute('alt');
-
   if (canSuggest('AltText', method, alt)) {
     return makeSuggestion('AltText', element, alt, {
       variant
     });
   }
-
   const title = element.getAttribute('title');
-
   if (canSuggest('Title', method, title)) {
     return makeSuggestion('Title', element, title, {
       variant
     });
   }
-
   const testId = element.getAttribute(getConfig().testIdAttribute);
-
   if (canSuggest('TestId', method, testId)) {
     return makeSuggestion('TestId', element, testId, {
       variant
     });
   }
-
   return undefined;
 }
 
+// This is so the stack trace the developer sees is one that's
 // closer to their code (because async stack traces are hard to follow).
-
 function copyStackTrace(target, source) {
   target.stack = source.stack.replace(source.message, target.message);
 }
-
 function waitFor(callback, _ref) {
   let {
     container = getDocument$1(),
@@ -18874,59 +18795,55 @@ function waitFor(callback, _ref) {
       characterData: true
     }
   } = _ref;
-
   if (typeof callback !== 'function') {
     throw new TypeError('Received `callback` arg must be a function');
   }
-
   return new Promise(async (resolve, reject) => {
     let lastError, intervalId, observer;
     let finished = false;
     let promiseStatus = 'idle';
     const overallTimeoutTimer = setTimeout(handleTimeout, timeout);
     const usingJestFakeTimers = jestFakeTimersAreEnabled$1();
-
     if (usingJestFakeTimers) {
       const {
         unstable_advanceTimersWrapper: advanceTimersWrapper
       } = getConfig();
-      checkCallback(); // this is a dangerous rule to disable because it could lead to an
+      checkCallback();
+      // this is a dangerous rule to disable because it could lead to an
       // infinite loop. However, eslint isn't smart enough to know that we're
       // setting finished inside `onDone` which will be called when we're done
       // waiting or when we've timed out.
       // eslint-disable-next-line no-unmodified-loop-condition
-
       while (!finished) {
         if (!jestFakeTimersAreEnabled$1()) {
           const error = new Error("Changed from using fake timers to real timers while using waitFor. This is not allowed and will result in very strange behavior. Please ensure you're awaiting all async things your test is doing before changing to real timers. For more info, please go to https://github.com/testing-library/dom-testing-library/issues/830");
           if (!showOriginalStackTrace) copyStackTrace(error, stackTraceError);
           reject(error);
           return;
-        } // we *could* (maybe should?) use `advanceTimersToNextTimer` but it's
+        }
+        // we *could* (maybe should?) use `advanceTimersToNextTimer` but it's
         // possible that could make this loop go on forever if someone is using
         // third party code that's setting up recursive timers so rapidly that
         // the user's timer's don't get a chance to resolve. So we'll advance
         // by an interval instead. (We have a test for this case).
-
-
         advanceTimersWrapper(() => {
           jest.advanceTimersByTime(interval);
-        }); // It's really important that checkCallback is run *before* we flush
+        });
+
+        // It's really important that checkCallback is run *before* we flush
         // in-flight promises. To be honest, I'm not sure why, and I can't quite
         // think of a way to reproduce the problem in a test, but I spent
         // an entire day banging my head against a wall on this.
-
         checkCallback();
-
         if (finished) {
           break;
-        } // In this rare case, we *need* to wait for in-flight promises
+        }
+
+        // In this rare case, we *need* to wait for in-flight promises
         // to resolve before continuing. We don't need to take advantage
         // of parallelization so we're fine.
         // https://stackoverflow.com/a/59243586/971592
         // eslint-disable-next-line no-await-in-loop
-
-
         await advanceTimersWrapper(async () => {
           await new Promise(r => {
             setTimeout(r, 0);
@@ -18941,7 +18858,6 @@ function waitFor(callback, _ref) {
         reject(e);
         return;
       }
-
       intervalId = setInterval(checkRealTimersCallback, interval);
       const {
         MutationObserver
@@ -18950,23 +18866,19 @@ function waitFor(callback, _ref) {
       observer.observe(container, mutationObserverOptions);
       checkCallback();
     }
-
     function onDone(error, result) {
       finished = true;
       clearTimeout(overallTimeoutTimer);
-
       if (!usingJestFakeTimers) {
         clearInterval(intervalId);
         observer.disconnect();
       }
-
       if (error) {
         reject(error);
       } else {
         resolve(result);
       }
     }
-
     function checkRealTimersCallback() {
       if (jestFakeTimersAreEnabled$1()) {
         const error = new Error("Changed from using real timers to fake timers while using waitFor. This is not allowed and will result in very strange behavior. Please ensure you're awaiting all async things your test is doing before changing to fake timers. For more info, please go to https://github.com/testing-library/dom-testing-library/issues/830");
@@ -18976,13 +18888,10 @@ function waitFor(callback, _ref) {
         return checkCallback();
       }
     }
-
     function checkCallback() {
       if (promiseStatus === 'pending') return;
-
       try {
         const result = runWithExpensiveErrorDiagnosticsDisabled(callback);
-
         if (typeof (result == null ? void 0 : result.then) === 'function') {
           promiseStatus = 'pending';
           result.then(resolvedValue => {
@@ -18994,36 +18903,30 @@ function waitFor(callback, _ref) {
           });
         } else {
           onDone(null, result);
-        } // If `callback` throws, wait for the next mutation, interval, or timeout.
-
+        }
+        // If `callback` throws, wait for the next mutation, interval, or timeout.
       } catch (error) {
         // Save the most recent callback error to reject the promise with it in the event of a timeout
         lastError = error;
       }
     }
-
     function handleTimeout() {
       let error;
-
       if (lastError) {
         error = lastError;
-
         if (!showOriginalStackTrace && error.name === 'TestingLibraryElementError') {
           copyStackTrace(error, stackTraceError);
         }
       } else {
         error = new Error('Timed out in waitFor.');
-
         if (!showOriginalStackTrace) {
           copyStackTrace(error, stackTraceError);
         }
       }
-
       onDone(onTimeout(error), null);
     }
   });
 }
-
 function waitForWrapper(callback, options) {
   // create the error here so its stack trace is as close to the
   // calling code as possible
@@ -19033,6 +18936,7 @@ function waitForWrapper(callback, options) {
     ...options
   }));
 }
+
 /*
 eslint
   max-lines-per-function: ["error", {"max": 200}],
@@ -19041,11 +18945,9 @@ eslint
 function getElementError(message, container) {
   return getConfig().getElementError(message, container);
 }
-
 function getMultipleElementsFoundError(message, container) {
   return getElementError(message + "\n\n(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).", container);
 }
-
 function queryAllByAttribute(attribute, container, text, _temp) {
   let {
     exact = true,
@@ -19061,61 +18963,51 @@ function queryAllByAttribute(attribute, container, text, _temp) {
   });
   return Array.from(container.querySelectorAll("[" + attribute + "]")).filter(node => matcher(node.getAttribute(attribute), node, text, matchNormalizer));
 }
-
 function queryByAttribute(attribute, container, text, options) {
   const els = queryAllByAttribute(attribute, container, text, options);
-
   if (els.length > 1) {
     throw getMultipleElementsFoundError("Found multiple elements by [" + attribute + "=" + text + "]", container);
   }
-
   return els[0] || null;
-} // this accepts a query function and returns a function which throws an error
+}
+
+// this accepts a query function and returns a function which throws an error
 // if more than one elements is returned, otherwise it returns the first
 // element or null
-
-
 function makeSingleQuery(allQuery, getMultipleError) {
   return function (container) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
-
     const els = allQuery(container, ...args);
-
     if (els.length > 1) {
       const elementStrings = els.map(element => getElementError(null, element).message).join('\n\n');
       throw getMultipleElementsFoundError(getMultipleError(container, ...args) + "\n\nHere are the matching elements:\n\n" + elementStrings, container);
     }
-
     return els[0] || null;
   };
 }
-
 function getSuggestionError(suggestion, container) {
   return getConfig().getElementError("A better query is available, try this:\n" + suggestion.toString() + "\n", container);
-} // this accepts a query function and returns a function which throws an error
-// if an empty list of elements is returned
-
+}
 
+// this accepts a query function and returns a function which throws an error
+// if an empty list of elements is returned
 function makeGetAllQuery(allQuery, getMissingError) {
   return function (container) {
     for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       args[_key2 - 1] = arguments[_key2];
     }
-
     const els = allQuery(container, ...args);
-
     if (!els.length) {
       throw getConfig().getElementError(getMissingError(container, ...args), container);
     }
-
     return els;
   };
-} // this accepts a getter query function and returns a function which calls
-// waitFor and passing a function which invokes the getter.
-
+}
 
+// this accepts a getter query function and returns a function which calls
+// waitFor and passing a function which invokes the getter.
 function makeFindQuery(getter) {
   return (container, text, options, waitForOptions) => {
     return waitForWrapper(() => {
@@ -19126,60 +19018,51 @@ function makeFindQuery(getter) {
     });
   };
 }
-
 const wrapSingleQueryWithSuggestion = (query, queryAllByName, variant) => function (container) {
   for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
     args[_key3 - 1] = arguments[_key3];
   }
-
   const element = query(container, ...args);
   const [{
     suggest = getConfig().throwSuggestions
   } = {}] = args.slice(-1);
-
   if (element && suggest) {
     const suggestion = getSuggestedQuery(element, variant);
-
     if (suggestion && !queryAllByName.endsWith(suggestion.queryName)) {
       throw getSuggestionError(suggestion.toString(), container);
     }
   }
-
   return element;
 };
-
 const wrapAllByQueryWithSuggestion = (query, queryAllByName, variant) => function (container) {
   for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
     args[_key4 - 1] = arguments[_key4];
   }
-
   const els = query(container, ...args);
   const [{
     suggest = getConfig().throwSuggestions
   } = {}] = args.slice(-1);
-
   if (els.length && suggest) {
     // get a unique list of all suggestion messages.  We are only going to make a suggestion if
     // all the suggestions are the same
     const uniqueSuggestionMessages = [...new Set(els.map(element => {
       var _getSuggestedQuery;
-
       return (_getSuggestedQuery = getSuggestedQuery(element, variant)) == null ? void 0 : _getSuggestedQuery.toString();
     }))];
-
-    if ( // only want to suggest if all the els have the same suggestion.
-    uniqueSuggestionMessages.length === 1 && !queryAllByName.endsWith( // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- TODO: Can this be null at runtime?
+    if (
+    // only want to suggest if all the els have the same suggestion.
+    uniqueSuggestionMessages.length === 1 && !queryAllByName.endsWith(
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- TODO: Can this be null at runtime?
     getSuggestedQuery(els[0], variant).queryName)) {
       throw getSuggestionError(uniqueSuggestionMessages[0], container);
     }
   }
-
   return els;
-}; // TODO: This deviates from the published declarations
+};
+
+// TODO: This deviates from the published declarations
 // However, the implementation always required a dyadic (after `container`) not variadic `queryAllBy` considering the implementation of `makeFindQuery`
 // This is at least statically true and can be verified by accepting `QueryMethod<Arguments, HTMLElement[]>`
-
-
 function buildQueries(queryAllBy, getMultipleError, getMissingError) {
   const queryBy = wrapSingleQueryWithSuggestion(makeSingleQuery(queryAllBy, getMultipleError), queryAllBy.name, 'query');
   const getAllBy = makeGetAllQuery(queryAllBy, getMissingError);
@@ -19218,7 +19101,6 @@ function queryAllLabels(container) {
     return textToMatch !== null;
   });
 }
-
 const queryAllLabelsByText = function (container, text, _temp) {
   let {
     exact = true,
@@ -19246,7 +19128,6 @@ const queryAllLabelsByText = function (container, text, _temp) {
     return node;
   });
 };
-
 const queryAllByLabelText = function (container, text, _temp2) {
   let {
     selector = '*',
@@ -19273,47 +19154,40 @@ const queryAllByLabelText = function (container, text, _temp2) {
     });
     const labelsValue = labelList.filter(label => Boolean(label.content)).map(label => label.content);
     if (matcher(labelsValue.join(' '), labelledElement, text, matchNormalizer)) labelledElements.push(labelledElement);
-
     if (labelsValue.length > 1) {
       labelsValue.forEach((labelValue, index) => {
         if (matcher(labelValue, labelledElement, text, matchNormalizer)) labelledElements.push(labelledElement);
         const labelsFiltered = [...labelsValue];
         labelsFiltered.splice(index, 1);
-
         if (labelsFiltered.length > 1) {
           if (matcher(labelsFiltered.join(' '), labelledElement, text, matchNormalizer)) labelledElements.push(labelledElement);
         }
       });
     }
-
     return labelledElements;
   }, []).concat(queryAllByAttribute('aria-label', container, text, {
     exact,
     normalizer: matchNormalizer
   }));
   return Array.from(new Set(matchingLabelledElements)).filter(element => element.matches(selector));
-}; // the getAll* query would normally look like this:
+};
+
+// the getAll* query would normally look like this:
 // const getAllByLabelText = makeGetAllQuery(
 //   queryAllByLabelText,
 //   (c, text) => `Unable to find a label with the text of: ${text}`,
 // )
 // however, we can give a more helpful error message than the generic one,
 // so we're writing this one out by hand.
-
-
 const getAllByLabelText = function (container, text) {
   for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     rest[_key - 2] = arguments[_key];
   }
-
   const els = queryAllByLabelText(container, text, ...rest);
-
   if (!els.length) {
     const labels = queryAllLabelsByText(container, text, ...rest);
-
     if (labels.length) {
       const tagNames = labels.map(label => getTagNameOfElementAssociatedWithLabelViaFor(container, label)).filter(tagName => !!tagName);
-
       if (tagNames.length) {
         throw getConfig().getElementError(tagNames.map(tagName => "Found a label with the text of: " + text + ", however the element associated with this label (<" + tagName + " />) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a <" + tagName + " />, you can use aria-label or aria-labelledby instead.").join('\n\n'), container);
       } else {
@@ -19323,24 +19197,19 @@ const getAllByLabelText = function (container, text) {
       throw getConfig().getElementError("Unable to find a label with the text of: " + text, container);
     }
   }
-
   return els;
 };
-
 function getTagNameOfElementAssociatedWithLabelViaFor(container, label) {
   const htmlFor = label.getAttribute('for');
-
   if (!htmlFor) {
     return null;
   }
-
   const element = container.querySelector("[id=\"" + htmlFor + "\"]");
   return element ? element.tagName.toLowerCase() : null;
-} // the reason mentioned above is the same reason we're not using buildQueries
-
+}
 
+// the reason mentioned above is the same reason we're not using buildQueries
 const getMultipleError$7 = (c, text) => "Found multiple elements with the text of: " + text;
-
 const queryByLabelText = wrapSingleQueryWithSuggestion(makeSingleQuery(queryAllByLabelText, getMultipleError$7), queryAllByLabelText.name, 'query');
 const getByLabelText = makeSingleQuery(getAllByLabelText, getMultipleError$7);
 const findAllByLabelText = makeFindQuery(wrapAllByQueryWithSuggestion(getAllByLabelText, getAllByLabelText.name, 'findAll'));
@@ -19353,15 +19222,11 @@ const queryAllByPlaceholderText = function () {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-
   checkContainerType$1(args[0]);
   return queryAllByAttribute('placeholder', ...args);
 };
-
 const getMultipleError$6 = (c, text) => "Found multiple elements with the placeholder text of: " + text;
-
 const getMissingError$6 = (c, text) => "Unable to find an element with the placeholder text of: " + text;
-
 const queryAllByPlaceholderTextWithSuggestions = wrapAllByQueryWithSuggestion(queryAllByPlaceholderText, queryAllByPlaceholderText.name, 'queryAll');
 const [queryByPlaceholderText, getAllByPlaceholderText, getByPlaceholderText, findAllByPlaceholderText, findByPlaceholderText] = buildQueries(queryAllByPlaceholderText, getMultipleError$6, getMissingError$6);
 
@@ -19382,22 +19247,18 @@ const queryAllByText = function (container, text, _temp) {
     normalizer
   });
   let baseArray = [];
-
   if (typeof container.matches === 'function' && container.matches(selector)) {
     baseArray = [container];
   }
-
-  return [...baseArray, ...Array.from(container.querySelectorAll(selector))] // TODO: `matches` according lib.dom.d.ts can get only `string` but according our code it can handle also boolean :)
+  return [...baseArray, ...Array.from(container.querySelectorAll(selector))]
+  // TODO: `matches` according lib.dom.d.ts can get only `string` but according our code it can handle also boolean :)
   .filter(node => !ignore || !node.matches(ignore)).filter(node => matcher(getNodeText(node), node, text, matchNormalizer));
 };
-
 const getMultipleError$5 = (c, text) => "Found multiple elements with the text: " + text;
-
 const getMissingError$5 = function (c, text, options) {
   if (options === void 0) {
     options = {};
   }
-
   const {
     collapseWhitespace,
     trim,
@@ -19414,7 +19275,6 @@ const getMissingError$5 = function (c, text, options) {
   const isCustomSelector = (selector != null ? selector : '*') !== '*';
   return "Unable to find an element with the text: " + (isNormalizedDifferent ? normalizedText + " (normalized from '" + text + "')" : text) + (isCustomSelector ? ", which matches selector '" + selector + "'" : '') + ". This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.";
 };
-
 const queryAllByTextWithSuggestions = wrapAllByQueryWithSuggestion(queryAllByText, queryAllByText.name, 'queryAll');
 const [queryByText, getAllByText, getByText, findAllByText, findByText] = buildQueries(queryAllByText, getMultipleError$5, getMissingError$5);
 
@@ -19441,38 +19301,29 @@ const queryAllByDisplayValue = function (container, value, _temp) {
     }
   });
 };
-
 const getMultipleError$4 = (c, value) => "Found multiple elements with the display value: " + value + ".";
-
 const getMissingError$4 = (c, value) => "Unable to find an element with the display value: " + value + ".";
-
 const queryAllByDisplayValueWithSuggestions = wrapAllByQueryWithSuggestion(queryAllByDisplayValue, queryAllByDisplayValue.name, 'queryAll');
 const [queryByDisplayValue, getAllByDisplayValue, getByDisplayValue, findAllByDisplayValue, findByDisplayValue] = buildQueries(queryAllByDisplayValue, getMultipleError$4, getMissingError$4);
 
+// Valid tags are img, input, area and custom elements
 const VALID_TAG_REGEXP = /^(img|input|area|.+-.+)$/i;
-
 const queryAllByAltText = function (container, alt, options) {
   if (options === void 0) {
     options = {};
   }
-
   checkContainerType$1(container);
   return queryAllByAttribute('alt', container, alt, options).filter(node => VALID_TAG_REGEXP.test(node.tagName));
 };
-
 const getMultipleError$3 = (c, alt) => "Found multiple elements with the alt text: " + alt;
-
 const getMissingError$3 = (c, alt) => "Unable to find an element with the alt text: " + alt;
-
 const queryAllByAltTextWithSuggestions = wrapAllByQueryWithSuggestion(queryAllByAltText, queryAllByAltText.name, 'queryAll');
 const [queryByAltText, getAllByAltText, getByAltText, findAllByAltText, findByAltText] = buildQueries(queryAllByAltText, getMultipleError$3, getMissingError$3);
 
 const isSvgTitle = node => {
   var _node$parentElement;
-
   return node.tagName.toLowerCase() === 'title' && ((_node$parentElement = node.parentElement) == null ? void 0 : _node$parentElement.tagName.toLowerCase()) === 'svg';
 };
-
 const queryAllByTitle = function (container, text, _temp) {
   let {
     exact = true,
@@ -19489,11 +19340,8 @@ const queryAllByTitle = function (container, text, _temp) {
   });
   return Array.from(container.querySelectorAll('[title], svg > title')).filter(node => matcher(node.getAttribute('title'), node, text, matchNormalizer) || isSvgTitle(node) && matcher(getNodeText(node), node, text, matchNormalizer));
 };
-
 const getMultipleError$2 = (c, title) => "Found multiple elements with the title: " + title + ".";
-
 const getMissingError$2 = (c, title) => "Unable to find an element with the title: " + title + ".";
-
 const queryAllByTitleWithSuggestions = wrapAllByQueryWithSuggestion(queryAllByTitle, queryAllByTitle.name, 'queryAll');
 const [queryByTitle, getAllByTitle, getByTitle, findAllByTitle, findByTitle] = buildQueries(queryAllByTitle, getMultipleError$2, getMissingError$2);
 
@@ -19521,37 +19369,29 @@ function queryAllByRole(container, role, _temp) {
     trim,
     normalizer
   });
-
   if (selected !== undefined) {
     var _allRoles$get;
-
     // guard against unknown roles
     if (((_allRoles$get = roles_1.get(role)) == null ? void 0 : _allRoles$get.props['aria-selected']) === undefined) {
       throw new Error("\"aria-selected\" is not supported on role \"" + role + "\".");
     }
   }
-
   if (checked !== undefined) {
     var _allRoles$get2;
-
     // guard against unknown roles
     if (((_allRoles$get2 = roles_1.get(role)) == null ? void 0 : _allRoles$get2.props['aria-checked']) === undefined) {
       throw new Error("\"aria-checked\" is not supported on role \"" + role + "\".");
     }
   }
-
   if (pressed !== undefined) {
     var _allRoles$get3;
-
     // guard against unknown roles
     if (((_allRoles$get3 = roles_1.get(role)) == null ? void 0 : _allRoles$get3.props['aria-pressed']) === undefined) {
       throw new Error("\"aria-pressed\" is not supported on role \"" + role + "\".");
     }
   }
-
   if (current !== undefined) {
     var _allRoles$get4;
-
     /* istanbul ignore next */
     // guard against unknown roles
     // All currently released ARIA versions support `aria-current` on all roles.
@@ -19560,89 +19400,71 @@ function queryAllByRole(container, role, _temp) {
       throw new Error("\"aria-current\" is not supported on role \"" + role + "\".");
     }
   }
-
   if (level !== undefined) {
     // guard against using `level` option with any role other than `heading`
     if (role !== 'heading') {
       throw new Error("Role \"" + role + "\" cannot have \"level\" property.");
     }
   }
-
   if (expanded !== undefined) {
     var _allRoles$get5;
-
     // guard against unknown roles
     if (((_allRoles$get5 = roles_1.get(role)) == null ? void 0 : _allRoles$get5.props['aria-expanded']) === undefined) {
       throw new Error("\"aria-expanded\" is not supported on role \"" + role + "\".");
     }
   }
-
   const subtreeIsInaccessibleCache = new WeakMap();
-
   function cachedIsSubtreeInaccessible(element) {
     if (!subtreeIsInaccessibleCache.has(element)) {
       subtreeIsInaccessibleCache.set(element, isSubtreeInaccessible(element));
     }
-
     return subtreeIsInaccessibleCache.get(element);
   }
-
-  return Array.from(container.querySelectorAll( // Only query elements that can be matched by the following filters
+  return Array.from(container.querySelectorAll(
+  // Only query elements that can be matched by the following filters
   makeRoleSelector(role, exact, normalizer ? matchNormalizer : undefined))).filter(node => {
     const isRoleSpecifiedExplicitly = node.hasAttribute('role');
-
     if (isRoleSpecifiedExplicitly) {
       const roleValue = node.getAttribute('role');
-
       if (queryFallbacks) {
         return roleValue.split(' ').filter(Boolean).some(text => matcher(text, node, role, matchNormalizer));
-      } // if a custom normalizer is passed then let normalizer handle the role value
-
-
+      }
+      // if a custom normalizer is passed then let normalizer handle the role value
       if (normalizer) {
         return matcher(roleValue, node, role, matchNormalizer);
-      } // other wise only send the first word to match
-
-
+      }
+      // other wise only send the first word to match
       const [firstWord] = roleValue.split(' ');
       return matcher(firstWord, node, role, matchNormalizer);
     }
-
     const implicitRoles = getImplicitAriaRoles(node);
     return implicitRoles.some(implicitRole => matcher(implicitRole, node, role, matchNormalizer));
   }).filter(element => {
     if (selected !== undefined) {
       return selected === computeAriaSelected(element);
     }
-
     if (checked !== undefined) {
       return checked === computeAriaChecked(element);
     }
-
     if (pressed !== undefined) {
       return pressed === computeAriaPressed(element);
     }
-
     if (current !== undefined) {
       return current === computeAriaCurrent(element);
     }
-
     if (expanded !== undefined) {
       return expanded === computeAriaExpanded(element);
     }
-
     if (level !== undefined) {
       return level === computeHeadingLevel(element);
-    } // don't care if aria attributes are unspecified
-
-
+    }
+    // don't care if aria attributes are unspecified
     return true;
   }).filter(element => {
     if (name === undefined) {
       // Don't care
       return true;
     }
-
     return matches(computeAccessibleName(element, {
       computedStyleSupportsPseudoElements: getConfig().computedStyleSupportsPseudoElements
     }), element, name, text => text);
@@ -19651,7 +19473,6 @@ function queryAllByRole(container, role, _temp) {
       // Don't care
       return true;
     }
-
     return matches(computeAccessibleDescription(element, {
       computedStyleSupportsPseudoElements: getConfig().computedStyleSupportsPseudoElements
     }), element, description, text => text);
@@ -19661,15 +19482,12 @@ function queryAllByRole(container, role, _temp) {
     }) === false : true;
   });
 }
-
 function makeRoleSelector(role, exact, customNormalizer) {
   var _roleElements$get;
-
   if (typeof role !== 'string') {
     // For non-string role parameters we can not determine the implicitRoleSelectors.
     return '*';
   }
-
   const explicitRoleSelector = exact && !customNormalizer ? "*[role~=\"" + role + "\"]" : '*[role]';
   const roleRelations = (_roleElements$get = roleElements_1.get(role)) != null ? _roleElements$get : new Set();
   const implicitRoleSelectors = new Set(Array.from(roleRelations).map(_ref => {
@@ -19677,16 +19495,15 @@ function makeRoleSelector(role, exact, customNormalizer) {
       name
     } = _ref;
     return name;
-  })); // Current transpilation config sometimes assumes `...` is always applied to arrays.
+  }));
+
+  // Current transpilation config sometimes assumes `...` is always applied to arrays.
   // `...` is equivalent to `Array.prototype.concat` for arrays.
   // If you replace this code with `[explicitRoleSelector, ...implicitRoleSelectors]`, make sure every transpilation target retains the `...` in favor of `Array.prototype.concat`.
-
   return [explicitRoleSelector].concat(Array.from(implicitRoleSelectors)).join(',');
 }
-
 const getNameHint = name => {
   let nameHint = '';
-
   if (name === undefined) {
     nameHint = '';
   } else if (typeof name === 'string') {
@@ -19694,28 +19511,23 @@ const getNameHint = name => {
   } else {
     nameHint = " and name `" + name + "`";
   }
-
   return nameHint;
 };
-
 const getMultipleError$1 = function (c, role, _temp2) {
   let {
     name
   } = _temp2 === void 0 ? {} : _temp2;
   return "Found multiple elements with the role \"" + role + "\"" + getNameHint(name);
 };
-
 const getMissingError$1 = function (container, role, _temp3) {
   let {
     hidden = getConfig().defaultHidden,
     name,
     description
   } = _temp3 === void 0 ? {} : _temp3;
-
   if (getConfig()._disableExpensiveErrorDiagnostics) {
     return "Unable to find role=\"" + role + "\"" + getNameHint(name);
   }
-
   let roles = '';
   Array.from(container.children).forEach(childElement => {
     roles += prettyRoles(childElement, {
@@ -19724,7 +19536,6 @@ const getMissingError$1 = function (container, role, _temp3) {
     });
   });
   let roleMessage;
-
   if (roles.length === 0) {
     if (hidden === false) {
       roleMessage = 'There are no accessible roles. But there might be some inaccessible roles. ' + 'If you wish to access them, then set the `hidden` option to `true`. ' + 'Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole';
@@ -19734,9 +19545,7 @@ const getMissingError$1 = function (container, role, _temp3) {
   } else {
     roleMessage = ("\nHere are the " + (hidden === false ? 'accessible' : 'available') + " roles:\n\n  " + roles.replace(/\n/g, '\n  ').replace(/\n\s\s\n/g, '\n\n') + "\n").trim();
   }
-
   let nameHint = '';
-
   if (name === undefined) {
     nameHint = '';
   } else if (typeof name === 'string') {
@@ -19744,9 +19553,7 @@ const getMissingError$1 = function (container, role, _temp3) {
   } else {
     nameHint = " and name `" + name + "`";
   }
-
   let descriptionHint = '';
-
   if (description === undefined) {
     descriptionHint = '';
   } else if (typeof description === 'string') {
@@ -19754,28 +19561,21 @@ const getMissingError$1 = function (container, role, _temp3) {
   } else {
     descriptionHint = " and description `" + description + "`";
   }
-
   return ("\nUnable to find an " + (hidden === false ? 'accessible ' : '') + "element with the role \"" + role + "\"" + nameHint + descriptionHint + "\n\n" + roleMessage).trim();
 };
-
 const queryAllByRoleWithSuggestions = wrapAllByQueryWithSuggestion(queryAllByRole, queryAllByRole.name, 'queryAll');
 const [queryByRole, getAllByRole, getByRole, findAllByRole, findByRole] = buildQueries(queryAllByRole, getMultipleError$1, getMissingError$1);
 
 const getTestIdAttribute = () => getConfig().testIdAttribute;
-
 const queryAllByTestId = function () {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-
   checkContainerType$1(args[0]);
   return queryAllByAttribute(getTestIdAttribute(), ...args);
 };
-
 const getMultipleError = (c, id) => "Found multiple elements by: [" + getTestIdAttribute() + "=\"" + id + "\"]";
-
 const getMissingError = (c, id) => "Unable to find an element by: [" + getTestIdAttribute() + "=\"" + id + "\"]";
-
 const queryAllByTestIdWithSuggestions = wrapAllByQueryWithSuggestion(queryAllByTestId, queryAllByTestId.name, 'queryAll');
 const [queryByTestId, getAllByTestId, getByTestId, findAllByTestId, findByTestId] = buildQueries(queryAllByTestId, getMultipleError, getMissingError);
 
@@ -19841,16 +19641,13 @@ var queries = /*#__PURE__*/Object.freeze({
  * @param {Object} initialValue for reducer
  * @returns {FuncMap} returns object of functions bound to container
  */
-
 function getQueriesForElement(element, queries$1, initialValue) {
   if (queries$1 === void 0) {
     queries$1 = queries;
   }
-
   if (initialValue === void 0) {
     initialValue = {};
   }
-
   return Object.keys(queries$1).reduce((helpers, key) => {
     const fn = queries$1[key];
     helpers[key] = fn.bind(null, element);
@@ -19858,56 +19655,47 @@ function getQueriesForElement(element, queries$1, initialValue) {
   }, initialValue);
 }
 
-const isRemoved = result => !result || Array.isArray(result) && !result.length; // Check if the element is not present.
-// As the name implies, waitForElementToBeRemoved should check `present` --> `removed`
-
+const isRemoved = result => !result || Array.isArray(result) && !result.length;
 
+// Check if the element is not present.
+// As the name implies, waitForElementToBeRemoved should check `present` --> `removed`
 function initialCheck(elements) {
   if (isRemoved(elements)) {
     throw new Error('The element(s) given to waitForElementToBeRemoved are already removed. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal.');
   }
 }
-
 async function waitForElementToBeRemoved(callback, options) {
   // created here so we get a nice stacktrace
   const timeoutError = new Error('Timed out in waitForElementToBeRemoved.');
-
   if (typeof callback !== 'function') {
     initialCheck(callback);
     const elements = Array.isArray(callback) ? callback : [callback];
     const getRemainingElements = elements.map(element => {
       let parent = element.parentElement;
       if (parent === null) return () => null;
-
       while (parent.parentElement) parent = parent.parentElement;
-
       return () => parent.contains(element) ? element : null;
     });
-
     callback = () => getRemainingElements.map(c => c()).filter(Boolean);
   }
-
   initialCheck(callback());
   return waitForWrapper(() => {
     let result;
-
     try {
       result = callback();
     } catch (error) {
       if (error.name === 'TestingLibraryElementError') {
         return undefined;
       }
-
       throw error;
     }
-
     if (!isRemoved(result)) {
       throw timeoutError;
     }
-
     return undefined;
   }, options);
 }
+
 /*
 eslint
   require-await: "off"
@@ -20431,7 +20219,7 @@ const eventMap = {
   // Events
   load: {
     // TODO: load events can be UIEvent or Event depending on what generated them
-    // This is were this abstraction breaks down.
+    // This is where this abstraction breaks down.
     // But the common targets are <img />, <script /> and window.
     // Neither of these targets receive a UIEvent
     EventType: 'Event',
@@ -20584,6 +20372,21 @@ const eventMap = {
       bubbles: true,
       cancelable: false
     }
+  },
+  // window events
+  offline: {
+    EventType: 'Event',
+    defaultInit: {
+      bubbles: false,
+      cancelable: false
+    }
+  },
+  online: {
+    EventType: 'Event',
+    defaultInit: {
+      bubbles: false,
+      cancelable: false
+    }
   }
 };
 const eventAliasMap = {
@@ -20595,26 +20398,22 @@ function fireEvent(element, event) {
     if (!event) {
       throw new Error("Unable to fire an event - please provide an event object.");
     }
-
     if (!element) {
       throw new Error("Unable to fire a \"" + event.type + "\" event - please provide a DOM element.");
     }
-
     return element.dispatchEvent(event);
   });
 }
-
 function createEvent(eventName, node, init, _temp) {
   let {
     EventType = 'Event',
     defaultInit = {}
   } = _temp === void 0 ? {} : _temp;
-
   if (!node) {
     throw new Error("Unable to fire a \"" + eventName + "\" event - please provide a DOM element.");
   }
-
-  const eventInit = { ...defaultInit,
+  const eventInit = {
+    ...defaultInit,
     ...init
   };
   const {
@@ -20624,11 +20423,9 @@ function createEvent(eventName, node, init, _temp) {
       ...targetProperties
     } = {}
   } = eventInit;
-
   if (value !== undefined) {
     setNativeValue(node, value);
   }
-
   if (files !== undefined) {
     // input.files is a read-only property so this is not allowed:
     // input.files = [file]
@@ -20640,13 +20437,11 @@ function createEvent(eventName, node, init, _temp) {
       value: files
     });
   }
-
   Object.assign(node, targetProperties);
   const window = getWindowFromNode$1(node);
   const EventConstructor = window[EventType] || window.Event;
   let event;
   /* istanbul ignore else  */
-
   if (typeof EventConstructor === 'function') {
     event = new EventConstructor(eventName, eventInit);
   } else {
@@ -20662,13 +20457,12 @@ function createEvent(eventName, node, init, _temp) {
     Object.keys(otherInit).forEach(eventKey => {
       event[eventKey] = otherInit[eventKey];
     });
-  } // DataTransfer is not supported in jsdom: https://github.com/jsdom/jsdom/issues/1568
-
+  }
 
+  // DataTransfer is not supported in jsdom: https://github.com/jsdom/jsdom/issues/1568
   const dataTransferProperties = ['dataTransfer', 'clipboardData'];
   dataTransferProperties.forEach(dataTransferKey => {
     const dataTransferValue = eventInit[dataTransferKey];
-
     if (typeof dataTransferValue === 'object') {
       /* istanbul ignore if  */
       if (typeof window.DataTransfer === 'function') {
@@ -20689,23 +20483,21 @@ function createEvent(eventName, node, init, _temp) {
   });
   return event;
 }
-
 Object.keys(eventMap).forEach(key => {
   const {
     EventType,
     defaultInit
   } = eventMap[key];
   const eventName = key.toLowerCase();
-
   createEvent[key] = (node, init) => createEvent(eventName, node, init, {
     EventType,
     defaultInit
   });
-
   fireEvent[key] = (node, init) => fireEvent(node, createEvent[key](node, init));
-}); // function written after some investigation here:
-// https://github.com/facebook/react/issues/10135#issuecomment-401496776
+});
 
+// function written after some investigation here:
+// https://github.com/facebook/react/issues/10135#issuecomment-401496776
 function setNativeValue(element, value) {
   const {
     set: valueSetter
@@ -20714,7 +20506,6 @@ function setNativeValue(element, value) {
   const {
     set: prototypeValueSetter
   } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
-
   if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
     prototypeValueSetter.call(element, value);
   } else {
@@ -20727,56 +20518,46 @@ function setNativeValue(element, value) {
     }
   }
 }
-
 Object.keys(eventAliasMap).forEach(aliasKey => {
   const key = eventAliasMap[aliasKey];
-
   fireEvent[aliasKey] = function () {
     return fireEvent[key](...arguments);
   };
 });
+
 /* eslint complexity:["error", 9] */
 
 // WARNING: `lz-string` only has a default export but statically we assume named exports are allowd
-
 function unindent(string) {
   // remove white spaces first, to save a few bytes.
   // testing-playground will reformat on load any ways.
   return string.replace(/[ \t]*[\n][ \t]*/g, '\n');
 }
-
 function encode(value) {
   return lzString.compressToEncodedURIComponent(unindent(value));
 }
-
 function getPlaygroundUrl(markup) {
   return "https://testing-playground.com/#markup=" + encode(markup);
 }
-
 const debug = (element, maxLength, options) => Array.isArray(element) ? element.forEach(el => logDOM(el, maxLength, options)) : logDOM(element, maxLength, options);
-
 const logTestingPlaygroundURL = function (element) {
   if (element === void 0) {
     element = getDocument$1().body;
   }
-
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (!element || !('innerHTML' in element)) {
     console.log("The element you're providing isn't a valid DOM element.");
     return;
-  } // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-
-
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (!element.innerHTML) {
     console.log("The provided element doesn't have any children.");
     return;
   }
-
   const playgroundUrl = getPlaygroundUrl(element.innerHTML);
   console.log("Open this URL in your browser\n\n" + playgroundUrl);
   return playgroundUrl;
 };
-
 const initialValue = {
   debug,
   logTestingPlaygroundURL
@@ -20789,13 +20570,11 @@ const screen = typeof document !== 'undefined' && document.body // eslint-disabl
   helpers[key] = () => {
     throw new TypeError('For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error');
   };
-
   return helpers;
 }, initialValue);
 
 var dom_esm = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  prettyFormat: index,
   buildQueries: buildQueries,
   configure: configure,
   createEvent: createEvent,
@@ -20847,6 +20626,7 @@ var dom_esm = /*#__PURE__*/Object.freeze({
   makeGetAllQuery: makeGetAllQuery,
   makeSingleQuery: makeSingleQuery,
   prettyDOM: prettyDOM,
+  prettyFormat: index,
   queries: queries,
   queryAllByAltText: queryAllByAltTextWithSuggestions,
   queryAllByAttribute: queryAllByAttribute,
@@ -21738,30 +21518,27 @@ helpers.jestFakeTimersAreEnabled = jestFakeTimersAreEnabled;
 // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#Node_type_constants
 const TEXT_NODE = 3;
 helpers.TEXT_NODE = TEXT_NODE;
-
 function jestFakeTimersAreEnabled() {
   /* istanbul ignore else */
   // eslint-disable-next-line
   if (typeof jest !== 'undefined' && jest !== null) {
-    return (// legacy timers
-      setTimeout._isMockFunction === true || // modern timers
+    return (
+      // legacy timers
+      setTimeout._isMockFunction === true ||
+      // modern timers
       Object.prototype.hasOwnProperty.call(setTimeout, 'clock')
     );
-  } // istanbul ignore next
-
-
+  }
+  // istanbul ignore next
   return false;
 }
-
 function getDocument() {
   /* istanbul ignore if */
   if (typeof window === 'undefined') {
     throw new Error('Could not find default container');
   }
-
   return window.document;
 }
-
 function getWindowFromNode(node) {
   if (node.defaultView) {
     // node is document
@@ -21785,17 +21562,14 @@ function getWindowFromNode(node) {
     throw new Error(`The given node is not an Element, the node type is: ${typeof node}.`);
   }
 }
-
 function checkContainerType(container) {
   if (!container || !(typeof container.querySelector === 'function') || !(typeof container.querySelectorAll === 'function')) {
     throw new TypeError(`Expected container to be an Element, a Document or a DocumentFragment but got ${getTypeName(container)}.`);
   }
-
   function getTypeName(object) {
     if (typeof object === 'object') {
       return object === null ? 'null' : object.constructor.name;
     }
-
     return typeof object;
   }
 }
@@ -24828,6 +24602,7 @@ var clickMenuOption = function (menuOptionText) { return __awaiter(void 0, void
                             case 0: return [4 /*yield*/, findMenuOption(menuOptionText)];
                             case 1:
                                 menuOption = _a.sent();
+                                // eslint-disable-next-line testing-library/await-async-utils
                                 userEvent.click(menuOption);
                                 return [2 /*return*/];
                         }