@nanoporetech-digital/components 5.11.8 → 5.12.0

package/hydrate/index.js

@@ -6219,7 +6219,12 @@ function getOffset(element, parent) {
  */
 const createColorClasses = (color, cssClassMap) => {
   return typeof color === 'string' && color.length > 0
-    ? Object.assign({ 'nano-color': true, [`nano-color-${color}`]: true }, cssClassMap) : cssClassMap;
+    ? {
+      'nano-color': true,
+      [`nano-color-${color}`]: true,
+      ...cssClassMap,
+    }
+    : cssClassMap;
 };
 /**
  * @param classes
@@ -6276,7 +6281,10 @@ class Accordion {
     this.nanoToggle.emit();
   }
   render() {
-    return (hAsync(Host, { class: Object.assign(Object.assign({}, createColorClasses(this.color)), { [`nano-color-${this.itemOpened}`]: typeof this.itemOpened === 'number' }) }, hAsync("slot", null)));
+    return (hAsync(Host, { class: {
+        ...createColorClasses(this.color),
+        [`nano-color-${this.itemOpened}`]: typeof this.itemOpened === 'number',
+      } }, hAsync("slot", null)));
   }
   get el() { return getElement(this); }
   static get style() { return accordionCss; }
@@ -6419,13 +6427,12 @@ class Modal {
     return activeModals[activeModals.length - 1] === this.element;
   }
   handleFocusIn(event) {
-    var _a;
     const path = event.composedPath();
     // Trap focus so it doesn't go out of the modal's boundary
     if (this.isActive() && !path.includes(this.element)) {
       const tabbableElements = getTabbableElements(this.element);
       const index = this.tabDirection === 'backward' ? tabbableElements.length - 1 : 0;
-      (_a = tabbableElements[index]) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+      tabbableElements[index]?.focus({ preventScroll: true });
     }
   }
   handleKeyDown(event) {
@@ -6758,7 +6765,7 @@ class Alert {
     }
   }
   render() {
-    return (hAsync(Host, { class: Object.assign({}, createColorClasses(this.color)), showing: this.isShowing }, this.isModal && [
+    return (hAsync(Host, { class: { ...createColorClasses(this.color) }, showing: this.isShowing }, this.isModal && [
       hAsync("div", { part: "overlay", class: {
           alert__overlay: true,
           'alert__overlay--open': this.open,
@@ -7937,7 +7944,7 @@ const urlSet = (id, data, to = 'hash', win = window, method = 'replace') => {
   const object = {};
   object[id] = data;
   let currentData = urlRead(to, win);
-  currentData = Object.assign(Object.assign({}, currentData), object);
+  currentData = { ...currentData, ...object };
   urlSave(currentData, to, win, method);
 };
 const urlGet = (key, to = 'hash', win = window) => {
@@ -9539,7 +9546,7 @@ class Algolia {
         this.staticFacetFilters[filter.filterId] = filter;
       else {
         dynFilterObj[filter.filterId] = filter;
-        this._dynFacetFilters = Object.assign(Object.assign({}, this._dynFacetFilters), dynFilterObj);
+        this._dynFacetFilters = { ...this._dynFacetFilters, ...dynFilterObj };
       }
       this.indexResults.appliedFilters = this.makeAppliedFilters();
     }
@@ -10048,8 +10055,8 @@ class AlgoliaFilter {
     // everything is in place - render as normal and set values
     writeTask(() => {
       outputTo.innerHTML = this.tplRenderFn(this.templateStr, {
-        orig: Object.assign({}, this.indexResults.origFilters[this.filterName]),
-        dyn: Object.assign({}, this.indexResults.dynFilters[this.filterName]),
+        orig: { ...this.indexResults.origFilters[this.filterName] },
+        dyn: { ...this.indexResults.dynFilters[this.filterName] },
         selected: this.internalValue && this.internalValue.length
           ? this.internalValue
           : this.value,
@@ -10787,7 +10794,7 @@ class Checkbox {
   }
   render() {
     const labelId = this.inputId + '-lbl';
-    return (hAsync(Host, { class: Object.assign({}, createColorClasses(this.color)) }, hAsync("label", { class: {
+    return (hAsync(Host, { class: { ...createColorClasses(this.color) } }, hAsync("label", { class: {
         nanocb: true,
         'nanocb--checked': this.checked,
         'nanocb--invalid': this.invalid,
@@ -10981,7 +10988,7 @@ class CheckboxGroup {
   customValidate() {
     if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes)
       return;
-    const onlyRadios = this.nativeCbs.filter((cb) => (cb === null || cb === void 0 ? void 0 : cb.type) === 'radio');
+    const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');
     if (onlyRadios &&
       onlyRadios.length &&
       (this.showErrorMsg || this.validateOn === 'dirty')) {
@@ -10995,7 +11002,7 @@ class CheckboxGroup {
         return true;
     }
     // we only care about checkbox controls.
-    const onlyCbs = this.nativeCbs.filter((cb) => (cb === null || cb === void 0 ? void 0 : cb.type) === 'checkbox');
+    const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');
     if (!onlyCbs || !onlyCbs.length)
       return;
     const checked = onlyCbs.filter((cb) => cb.checked);
@@ -11026,32 +11033,28 @@ class CheckboxGroup {
     return invalid;
   }
   handleComponentChange() {
-    var _a;
-    if (!((_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.length))
+    if (!this.checkboxes?.length)
       return;
     this.checkboxTypes = getClassMap(this.checkboxes.map((cb) => 'types-' + cb.type));
   }
   handleDisabledChange() {
-    var _a;
-    if (this.disabled === null || !((_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.length))
+    if (this.disabled === null || !this.checkboxes?.length)
       return;
     this.checkboxes.map((cb) => (cb.disabled = this.disabled));
   }
   // private methods
   setInteralValue() {
-    var _a;
     this.ignoreValueSet = true;
-    const radios = this.nativeCbs.filter((cb) => (cb === null || cb === void 0 ? void 0 : cb.type) === 'radio');
-    if (radios === null || radios === void 0 ? void 0 : radios.length) {
-      this.value = ((_a = radios.find((cb) => cb.checked)) === null || _a === void 0 ? void 0 : _a.value) || null;
+    const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');
+    if (radios?.length) {
+      this.value = radios.find((cb) => cb.checked)?.value || null;
       return;
     }
     this.value = this.checkboxes.flatMap((cb) => cb.checked ? [cb.value] : []);
     requestAnimationFrame(() => (this.ignoreValueSet = false));
   }
   setCbValue() {
-    var _a;
-    (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.forEach((cb) => {
+    this.checkboxes?.forEach((cb) => {
       if (cb.value === this.value ||
         (Array.isArray(this.value) && this.value.includes(cb.value))) {
         cb.checked = true;
@@ -11090,6 +11093,8 @@ class CheckboxGroup {
   disconnectedCallback() {
     if (this.mo)
       this.mo.disconnect();
+    if (!this.nativeCbs?.length)
+      return;
     this.nativeCbs.forEach((cb) => {
       if (cb)
         cb.removeEventListener('invalid', this.handleInvalid);
@@ -11101,7 +11106,7 @@ class CheckboxGroup {
   render() {
     const legendId = this.grpId + '-lbl';
     const moreId = this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';
-    return (hAsync(Host, Object.assign({}, this.checkboxTypes), hAsync("fieldset", { disabled: this.disabled, class: { nanogroupcb: true, 'show-error': this.showErrorMsg } }, hAsync("legend", { id: legendId, class: {
+    return (hAsync(Host, { ...this.checkboxTypes }, hAsync("fieldset", { disabled: this.disabled, class: { nanogroupcb: true, 'show-error': this.showErrorMsg } }, hAsync("legend", { id: legendId, class: {
         nanogroupcb__legend: true,
         'visually-hide': this.hideLegend,
       } }, hAsync("slot", { name: "legend" }, this.legend)), hAsync("div", { class: "nanogroupcb__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, hAsync("slot", null)), (this.showInlineError || this.hasHelperSlot) && (hAsync("div", { class: "nanogroupcb__more", id: moreId }, !!this.showInlineError ? (hAsync("div", { class: "nanogroupcb__error" }, this.errorMessage)) : (''), hAsync("div", { class: "nanogroupcb__help" }, hAsync("slot", { name: "helper" })))))));
@@ -11190,12 +11195,11 @@ class DataList {
     return this._allOptEles;
   }
   set allOptEles(opts) {
-    var _a;
     // when allOptEles are initially set (on slot change / options) -
     // add options to 'selected' and fire selected event *if*
     // value isn't set on the input
     this._allOptEles = opts;
-    if ((_a = this.connectedInput) === null || _a === void 0 ? void 0 : _a.value)
+    if (this.connectedInput?.value)
       return;
     opts.forEach((opt) => {
       if (opt.selected && !this.selected.includes(opt.value)) {
@@ -11265,7 +11269,7 @@ class DataList {
       if (this.type === 'select' &&
         !['ArrowDown', 'ArrowUp'].includes(e.key) &&
         (e.key !== ' ' || this.typeToSelectTimeout)) {
-        if (e.key === ' ' || /^[a-z0-9]+$/i.test(e.key)) {
+        if (e.key === ' ' || /^[a-zA0-9]+$/i.test(e.key)) {
           clearTimeout(this.typeToSelectTimeout);
           this.typeToSelectTimeout = window.setTimeout(() => {
             this.typeToSelect = '';
@@ -11279,7 +11283,7 @@ class DataList {
       this.shouldOpen = true;
       // open dropdown if possible
       this.manageDropdownDisplay();
-      if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+      if (['ArrowDown', 'ArrowUp', ' '].includes(e.key)) {
         e.preventDefault();
         this.shouldFocus = true;
       }
@@ -11334,7 +11338,7 @@ class DataList {
     return this._dropDownConfig;
   }
   set dropDownConfig(ddc) {
-    this._dropDownConfig = Object.assign(Object.assign({}, this._dropDownConfig), ddc);
+    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };
   }
   /** return all the active options currently within the datalist. Can be useful for validation */
   get activeOptions() {
@@ -11365,7 +11369,6 @@ class DataList {
     }
   }
   manageSlotChangeListener() {
-    var _a;
     if (!this.host)
       return;
     // we're not using `options` - setup new MO
@@ -11374,7 +11377,7 @@ class DataList {
       return;
     }
     // we're using `options` - trash current MO
-    if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
+    if (this.options?.length) {
       if (!!this.mo) {
         this.mo.disconnect();
         this.mo = undefined;
@@ -11382,9 +11385,8 @@ class DataList {
       const previousOptions = this.host.querySelectorAll('[slot="internal-opts"]');
       // add imperative `options`
       writeTask(() => {
-        var _a;
         // clear all previous
-        if (previousOptions === null || previousOptions === void 0 ? void 0 : previousOptions.length)
+        if (previousOptions?.length)
           previousOptions.forEach((internalOpt) => internalOpt.remove());
         this.allOptEles = this.options.flatMap((option, i) => {
           if (option.value || option.label) {
@@ -11402,7 +11404,7 @@ class DataList {
             return opt;
           }
         });
-        if (((_a = this.connectedInput) === null || _a === void 0 ? void 0 : _a.value.length) && this.type !== 'select') {
+        if (this.connectedInput?.value.length && this.type !== 'select') {
           this.inputChange();
         }
         else {
@@ -11431,12 +11433,11 @@ class DataList {
     if (!this.isNanoInput) {
       dwConfig.tetherTo = this.connectedInput;
     }
-    this.dropDownConfig = Object.assign(Object.assign({}, this.dropDownConfig), dwConfig);
+    this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };
     this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);
     this.connectedInput.readOnly = readonly;
   }
   manageInputEvents(newInput, oldInput) {
-    var _a;
     if (!!oldInput) {
       const nanoInput = oldInput.closest('nano-input');
       if (nanoInput) {
@@ -11464,7 +11465,7 @@ class DataList {
       newInput.addEventListener('keydown', this.inputKeydown);
       newInput.addEventListener('input', this.inputChange);
       this.listId = this.host.id || this.listId;
-      this.inputLabel = ((_a = newInput === null || newInput === void 0 ? void 0 : newInput.labels) === null || _a === void 0 ? void 0 : _a.item(0)) || findLabel(newInput);
+      this.inputLabel = newInput?.labels?.item(0) || findLabel(newInput);
       writeTask(() => {
         this.host.id = this.listId;
         newInput.setAttribute('role', 'combobox');
@@ -11477,9 +11478,8 @@ class DataList {
     }
   }
   watchActvOptChange() {
-    var _a;
     let c = 0;
-    const val = ((_a = this.connectedInput) === null || _a === void 0 ? void 0 : _a.value) || '';
+    const val = this.connectedInput?.value || '';
     const optIds = [];
     writeTask(() => {
       this.allOptEles.forEach((opt, i) => {
@@ -11539,7 +11539,6 @@ class DataList {
   }
   /** reflect value back to the connected input unless the event is cancelled */
   changeInputValue(opt) {
-    var _a;
     let nanoSelected;
     if (this.selected.includes(opt.value)) {
       // deselect option
@@ -11555,7 +11554,7 @@ class DataList {
       if (this.connectedInput)
         this.connectedInput.value = opt.value;
       const event = new window.Event('change');
-      (_a = this.connectedInput) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
+      this.connectedInput?.dispatchEvent(event);
     }
   }
   // this is for type="select" only.
@@ -11585,10 +11584,9 @@ class DataList {
   }
   processSlottedContent() {
     requestAnimationFrame(() => {
-      var _a;
       this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));
       this.hasNoResult = !!this.host.querySelector('[slot="no-result"]');
-      if (((_a = this.connectedInput) === null || _a === void 0 ? void 0 : _a.value.length) && this.type !== 'select') {
+      if (this.connectedInput?.value.length && this.type !== 'select') {
         this.inputChange();
       }
       else
@@ -11656,10 +11654,10 @@ class DataList {
   render() {
     return (hAsync(Host, { role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
         ? 'Select options from the list below'
-        : undefined }, hAsync("nano-dropdown", Object.assign({}, this.dropDownConfig, { ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+        : undefined }, hAsync("nano-dropdown", { ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
         dlist__dropdown: true,
         'dlist--isfiltered': this.isFiltered,
-      }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }), hAsync("nano-menu", { hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+      }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, hAsync("nano-menu", { hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
         dlist__menu: true,
         'dlist__menu--open': this.dropwdownOpen,
       }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el), role: "list" }, hAsync("slot", { name: "list-top" }), !this.options.length && hAsync("slot", null), !!this.options.length && hAsync("slot", { name: "internal-opts" }), hAsync("slot", { name: "list-bottom" })), hAsync("nano-menu", { type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
@@ -12113,7 +12111,7 @@ class DateInput {
     return this._dropDownConfig;
   }
   set dropDownConfig(ddc) {
-    this._dropDownConfig = Object.assign(Object.assign({}, this._dropDownConfig), ddc);
+    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };
   }
   /** @readonly get the value as a `Date` */
   get dateValue() {
@@ -12224,9 +12222,9 @@ class DateInput {
       this.dropDownConfig.tetherTo = this.trigger;
     const valueDate = parseISODate(this.value);
     const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
-    return (hAsync(Host, { class: Object.assign({}, createColorClasses(this.color)) }, hAsync("div", { class: "date-field" }, hAsync("nano-input", { class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearInput: this.clearInput || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, hAsync("slot", { name: "start", slot: "start" }), hAsync("slot", { name: "label" }), hAsync("slot", { name: "end", slot: "end" }), this.picker && [
+    return (hAsync(Host, { class: { ...createColorClasses(this.color) } }, hAsync("div", { class: "date-field" }, hAsync("nano-input", { class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearInput: this.clearInput || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, hAsync("slot", { name: "start", slot: "start" }), hAsync("slot", { name: "label" }), hAsync("slot", { name: "end", slot: "end" }), this.picker && [
       hAsync("button", { slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, hAsync("nano-icon", { name: "light/calendar-alt" })),
-      hAsync("nano-dropdown", Object.assign({ slot: "end", onNanoHide: this.onDropdownHide, onNanoShow: this.onDropdownShow, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown) }, this.dropDownConfig, { part: "dropdown" }), hAsync("div", null, hAsync("div", { class: "date-field__close-bar" }, hAsync("button", { class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, hAsync("nano-icon", { name: "light/times" }), hAsync("span", { class: "vhidden" }, "Close window"))), hAsync("nano-date-picker", { isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
+      hAsync("nano-dropdown", { slot: "end", onNanoHide: this.onDropdownHide, onNanoShow: this.onDropdownShow, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, hAsync("div", null, hAsync("div", { class: "date-field__close-bar" }, hAsync("button", { class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, hAsync("nano-icon", { name: "light/times" }), hAsync("span", { class: "vhidden" }, "Close window"))), hAsync("nano-date-picker", { isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
     ], (hasHelperSlot || this.helperText || this.showInlineError) && (hAsync("span", { slot: "helper" }, hAsync("span", { class: { vhidden: !!this.value.length } }, hAsync("slot", { name: "helper" })), this.helperText && !!valueDate && (hAsync("span", null, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), hAsync("input", { type: "hidden", value: this.value, name: this.name }))));
   }
   get host() { return getElement(this); }
@@ -12629,7 +12627,7 @@ class DatePicker {
       minYear = minDate.getFullYear();
     if (maxDate)
       maxYear = maxDate.getFullYear();
-    return (hAsync(Host, { class: Object.assign({}, createColorClasses(this.color)) }, hAsync("div", { class: "duet-date" }, hAsync("div", { class: {
+    return (hAsync(Host, { class: { ...createColorClasses(this.color) } }, hAsync("div", { class: "duet-date" }, hAsync("div", { class: {
         'duet-date__dialog': true,
         'is-active': true,
       }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, hAsync("div", { class: "duet-date__dialog-content" }, hAsync("div", { class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), hAsync("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus }, hAsync("div", null, hAsync("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), hAsync("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), hAsync("div", { class: "duet-date__select" }, hAsync("select", { id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
@@ -12678,7 +12676,7 @@ function mediumDate(date) {
   });
 }
 function currency(amount = 0, currencyCode = 'USD') {
-  currencyCode = (currencyCode === null || currencyCode === void 0 ? void 0 : currencyCode.toLocaleUpperCase()) || 'USD';
+  currencyCode = currencyCode?.toLocaleUpperCase() || 'USD';
   return new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: currencyCode,
@@ -12915,8 +12913,7 @@ class Demo {
     ];
   }
   lineItemTotal(order) {
-    var _a;
-    if (!order || !((_a = order.shopOrderLines) === null || _a === void 0 ? void 0 : _a.length))
+    if (!order || !order.shopOrderLines?.length)
       return;
     let total = 0;
     order.shopOrderLines.forEach((itm) => {
@@ -12927,15 +12924,12 @@ class Demo {
   }
   render() {
     return (hAsync(Host, null, hAsync("nano-table", { rowRender: {
-        template: (_, c, TableCell) => {
-          var _a, _b;
-          return [
-            c.renderedRow,
-            ((_a = c.rowModel.includedItems) === null || _a === void 0 ? void 0 : _a.length) ? ((_b = c.rowModel.includedItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
-              return (hAsync("tr", { class: "child-row" }, hAsync(TableCell, { header: true }, item.name), hAsync(TableCell, null, capitalise(c.rowModel.status || this.order.status)), hAsync(TableCell, null, capitalise(item.sku)), hAsync(TableCell, null, capitalise(item.salesTag)), hAsync(TableCell, null, mediumDate(item.requestedShippingDate))));
-            })) : (hAsync(Fragment, null)),
-          ].flat(1);
-        },
+        template: (_, c, TableCell) => [
+          c.renderedRow,
+          c.rowModel.includedItems?.length ? (c.rowModel.includedItems?.map((item) => {
+            return (hAsync("tr", { class: "child-row" }, hAsync(TableCell, { header: true }, item.name), hAsync(TableCell, null, capitalise(c.rowModel.status || this.order.status)), hAsync(TableCell, null, capitalise(item.sku)), hAsync(TableCell, null, capitalise(item.salesTag)), hAsync(TableCell, null, mediumDate(item.requestedShippingDate))));
+          })) : (hAsync(Fragment, null)),
+        ].flat(1),
       }, columns: this.columns, rows: this.order.shopOrderLines, caption: `List of order line items found within order ${this.order.orderId}`, showFooter: true, footRender: {
         pinned: 'bottom',
         template: () => [
@@ -12970,7 +12964,12 @@ class Demo {
  * @returns a promise of resolving as either 'show' or 'hidden'
  */
 const displayTransition = (el, options) => {
-  const opts = Object.assign({ className: '', show: true, showDisplay: 'block' }, options);
+  const opts = {
+    className: '',
+    show: true,
+    showDisplay: 'block',
+    ...options,
+  };
   return new Promise((resolve) => {
     const showCb = (e) => {
       if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
@@ -13644,7 +13643,7 @@ class Drawer {
     }
     // Restore focus to the original trigger
     const trigger = this.originalTrigger;
-    if (typeof (trigger === null || trigger === void 0 ? void 0 : trigger.focus) === 'function') {
+    if (typeof trigger?.focus === 'function') {
       setTimeout(() => trigger.focus());
     }
   }
@@ -15738,7 +15737,6 @@ class Dropdown {
   // Methods
   /** Shows the dropdown panel */
   async show() {
-    var _a;
     this.ignoreOpenWatcher = true;
     this.open = true;
     const nanoShow = this.nanoShow.emit();
@@ -15748,7 +15746,7 @@ class Dropdown {
       return;
     }
     // @ts-ignore
-    if (typeof ((_a = this.positioner) === null || _a === void 0 ? void 0 : _a.showPopover) === 'function') {
+    if (typeof this.positioner?.showPopover === 'function') {
       this.hoist = true;
       this.popover.show();
       // @ts-ignore
@@ -15780,9 +15778,8 @@ class Dropdown {
       this.accessibleTrigger.focus();
     }
     setTimeout(() => {
-      var _a;
       // @ts-ignore
-      if (!this.open && typeof ((_a = this.positioner) === null || _a === void 0 ? void 0 : _a.hidePopover) === 'function') {
+      if (!this.open && typeof this.positioner?.hidePopover === 'function') {
         // @ts-ignore
         this.positioner.hidePopover();
       }
@@ -15796,11 +15793,12 @@ class Dropdown {
    * @returns whether the current focus is within the dropdown
    */
   focusEleInDropDwn(e) {
-    var _a;
     const activeElement = getActiveElement();
-    if (e && ((_a = e.composedPath()) === null || _a === void 0 ? void 0 : _a.length)) {
+    if (e && e.composedPath()?.length) {
       const ddInPath = e.composedPath().includes(this.containingElement);
-      return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;
+      if (ddInPath)
+        return ddInPath;
+      return e.composedPath().includes(this.accessibleTrigger);
     }
     return (activeElement &&
       activeElement.closest(this.containingElement.tagName.toLowerCase()) ===
@@ -16464,7 +16462,6 @@ class FieldValidator {
   }
   storeToFields(fields) {
     fields.forEach((field) => {
-      var _a;
       const fieldName = this.getName(field);
       if (!fieldName.length ||
         typeof this._store.state[fieldName] === 'undefined')
@@ -16486,8 +16483,7 @@ class FieldValidator {
         else if (Array.isArray(this._store.state[fieldName])) {
           // multiple checkbox like controls
           cbs.forEach((cb) => {
-            var _a;
-            if ((_a = this._store.state[fieldName]) === null || _a === void 0 ? void 0 : _a.includes(cb.value))
+            if (this._store.state[fieldName]?.includes(cb.value))
               cb.checked = true;
             else
               cb.checked = false;
@@ -16507,7 +16503,7 @@ class FieldValidator {
       if (field.tagName === 'NANO-FILE-UPLOAD') {
         const ff = field;
         // this can only work if the field is empty rn... a one-time deal
-        if (!((_a = ff.files) === null || _a === void 0 ? void 0 : _a.length))
+        if (!ff.files?.length)
           ff.files = this._store.state[fieldName];
         return;
       }
@@ -16527,7 +16523,6 @@ class FieldValidator {
   /** Loops through all `nano-...` fields and extracts their values into our store */
   fieldsToStore(fields, init = false) {
     fields.forEach((field) => {
-      var _a;
       const fieldName = this.getName(field);
       if (!fieldName.length)
         return;
@@ -16557,7 +16552,7 @@ class FieldValidator {
             : [];
           if (cb.checked) {
             // checked
-            if (!((_a = this._store.state[fieldName]) === null || _a === void 0 ? void 0 : _a.includes(cb.value))) {
+            if (!this._store.state[fieldName]?.includes(cb.value)) {
               this._store.state[fieldName] = [...currentArr, cb.value];
             }
           }
@@ -16762,12 +16757,12 @@ let getDataTransfer = () => new DataTransfer();
 try {
   getDataTransfer();
 }
-catch (_a) {
+catch {
   try {
     getDataTransfer = () => new ClipboardEvent('').clipboardData;
     getDataTransfer();
   }
-  catch (_b) {
+  catch {
     getDataTransfer = null;
   }
 }
@@ -17177,26 +17172,24 @@ class FileUpload {
   }; }
 }
 
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-    t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
-};
-async function clientFetch(url, _a = {}) {
-  var { body } = _a, customConfig = __rest(_a, ["body"]);
+async function clientFetch(url, { body, ...customConfig } = {}) {
   const headers = {
     Accept: 'application/json, text/plain, */*',
     'Access-Control-Allow-Origin': '*',
     'Content-Type': 'application/json',
     Cache: 'no-cache',
   };
-  const config = Object.assign(Object.assign({ method: body ? 'POST' : 'GET', credentials: 'include', keepalive: true, mode: 'cors' }, customConfig), { headers: Object.assign(Object.assign({}, headers), customConfig.headers) });
+  const config = {
+    method: body ? 'POST' : 'GET',
+    credentials: 'include',
+    keepalive: true,
+    mode: 'cors',
+    ...customConfig,
+    headers: {
+      ...headers,
+      ...customConfig.headers,
+    },
+  };
   if (body) {
     config.body = JSON.stringify(body);
   }
@@ -17839,11 +17832,8 @@ class GlobalNav {
     }
     if (!ev
       .composedPath()
-      .some((el) => {
-      var _a;
-      return el === this.menuContentDiv ||
-        ((_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains('gn-menu_actions'));
-    })) {
+      .some((el) => el === this.menuContentDiv ||
+      el.classList?.contains('gn-menu_actions'))) {
       requestAnimationFrame(() => {
         if (!!this.secondaryMenuOpen)
           return;
@@ -18093,7 +18083,6 @@ class GlobalNav {
     ];
   }
   render() {
-    var _a, _b;
     this.autocompleteEles = [];
     const isRtl = this.el.ownerDocument.dir === 'rtl';
     const searchWidget = this.searchWidget();
@@ -18138,7 +18127,7 @@ class GlobalNav {
       }))))))),
     ]))), this.isLoggedIn &&
       this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
-      (this.loggedInNavItms.length || this.hasLoggedinSlot) && (hAsync("nav", { class: "nav-links", "aria-label": "Your user account links" }, hAsync("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu", closeOnBlur: false }, this.myAccountUser.name, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), hAsync("div", { slot: "secondary" }, hAsync("div", { class: "content" }, hAsync("button", { class: "back-btn", onClick: this.subMenuClose }, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back", role: "img" }), this.myAccountUser.name), !!((_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url) && (hAsync("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), hAsync("div", { class: "content--sub" }, hAsync("slot", { name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
+      (this.loggedInNavItms.length || this.hasLoggedinSlot) && (hAsync("nav", { class: "nav-links", "aria-label": "Your user account links" }, hAsync("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu", closeOnBlur: false }, this.myAccountUser.name, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), hAsync("div", { slot: "secondary" }, hAsync("div", { class: "content" }, hAsync("button", { class: "back-btn", onClick: this.subMenuClose }, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back", role: "img" }), this.myAccountUser.name), !!this.myAccountUser?.small_avatar_url && (hAsync("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), hAsync("div", { class: "content--sub" }, hAsync("slot", { name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
       return (hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: link.address, target: link.target }, link.title)));
     }), hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: this.myAccData.urls.forgot_password +
         this.ssoRedirect }, "Change Password")))))))), hAsync("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (hAsync("div", { class: "login-btn logout-btn" }, hAsync("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), hAsync("div", { class: "sticker-trigger" }), hAsync("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 }, part: "sticker" }, hAsync("div", { class: "bars", part: "bars" }, hAsync("nav", { part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div) }, (this.hasPromotionSlot ||
@@ -18185,7 +18174,7 @@ class GlobalNav {
           'icon-btn': true,
           'user-links-btn': true,
           open: this.userMenuOpen,
-        }, onMouseDown: this.onUserBtnClick, onKeyDown: this.onUserBtnKeyDown }, ' ', this.myAccountUser.name, hAsync("nano-icon", { name: "solid/caret-down" })), hAsync("div", { class: "user-links-panel", tabindex: "-1", ref: (div) => (this.userLinkPanel = div) }, !!((_b = this.myAccountUser) === null || _b === void 0 ? void 0 : _b.small_avatar_url) && (hAsync("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), hAsync("div", { class: "user-links-panel-content" }, this.loggedInNavItms.map((link) => {
+        }, onMouseDown: this.onUserBtnClick, onKeyDown: this.onUserBtnKeyDown }, ' ', this.myAccountUser.name, hAsync("nano-icon", { name: "solid/caret-down" })), hAsync("div", { class: "user-links-panel", tabindex: "-1", ref: (div) => (this.userLinkPanel = div) }, !!this.myAccountUser?.small_avatar_url && (hAsync("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), hAsync("div", { class: "user-links-panel-content" }, this.loggedInNavItms.map((link) => {
         return (hAsync("a", { href: link.address, target: link.target }, link.title));
       })), hAsync("div", { class: "user-links-panel-foot" }, hAsync("a", { href: this.myAccData.urls.forgot_password +
           this.ssoRedirect }, "Change Password"), hAsync("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout"))))),
@@ -18389,8 +18378,7 @@ class GlobalNavUserProfile {
   }
   // Render output
   render() {
-    var _a;
-    return (!!this.myAccountUser && (hAsync("a", { href: this.userProfileUrl, class: "user-profile" }, hAsync("div", { class: "left" }, hAsync("div", { class: "avatar-container" }, hAsync("img", { class: "avatar", src: (_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url, alt: "User Avatar", height: 75, width: 75 }), this.myAccountUser.is_nanopore_user && (hAsync("img", { class: "logo-small", src: getAssetPath(`../nano-assets/ont-wheel-light.svg`), alt: "Nanopore Logo" }))), hAsync("div", { class: "user-details" }, hAsync("span", { class: "name" }, this.myAccountUser.name), hAsync("span", { class: "bio" }, this.myAccountUser.job_title, " at ", this.myAccountUser.company))), hAsync("div", { class: "right" }, hAsync("div", { class: "chevron-right" }, hAsync("nano-icon", { slot: "icon-end", name: "light/chevron-right" }))))));
+    return (!!this.myAccountUser && (hAsync("a", { href: this.userProfileUrl, class: "user-profile" }, hAsync("div", { class: "left" }, hAsync("div", { class: "avatar-container" }, hAsync("img", { class: "avatar", src: this.myAccountUser?.small_avatar_url, alt: "User Avatar", height: 75, width: 75 }), this.myAccountUser.is_nanopore_user && (hAsync("img", { class: "logo-small", src: getAssetPath(`../nano-assets/ont-wheel-light.svg`), alt: "Nanopore Logo" }))), hAsync("div", { class: "user-details" }, hAsync("span", { class: "name" }, this.myAccountUser.name), hAsync("span", { class: "bio" }, this.myAccountUser.job_title, " at ", this.myAccountUser.company))), hAsync("div", { class: "right" }, hAsync("div", { class: "chevron-right" }, hAsync("nano-icon", { slot: "icon-end", name: "light/chevron-right" }))))));
   }
   static get cmpMeta() { return {
     "$flags$": 0,
@@ -19636,7 +19624,12 @@ class Icon {
           this.name.indexOf('chevron') > -1) &&
         this.el.ownerDocument.dir === 'rtl' &&
         this.flipRtl !== false);
-    return (hAsync(Host, { class: Object.assign(Object.assign({}, createColorClasses(this.color)), { loading: this.isLoading, [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl }) }, (hAsync("div", { class: "icon-inner" }))));
+    return (hAsync(Host, { class: {
+        ...createColorClasses(this.color),
+        loading: this.isLoading,
+        [`icon-${this.size}`]: !!this.size,
+        'flip-rtl': !!flipRtl,
+      } }, (hAsync("div", { class: "icon-inner" }))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -19979,12 +19972,12 @@ const FormControlWrap = (props, children) => {
       'form-ctrl': true,
     } },
     hAsync("div", { class: "form-ctrl__wrapper" },
-      !floatLabel ? renderLabel(Object.assign({}, props)) : '',
+      !floatLabel ? renderLabel({ ...props }) : '',
       hAsync("div", { class: {
           'form-ctrl__input': true,
           'form-ctrl__textarea': type === 'textarea',
         } },
-        floatLabel && renderLabel(Object.assign(Object.assign({}, props), { rtl })),
+        floatLabel && renderLabel({ ...props, rtl }),
         children),
       showInlineError || hasHelperSlot ? (hAsync("div", { class: "form-ctrl__more", id: moreId },
         !!showInlineError ? (hAsync("div", { class: "form-ctrl__error", "aria-live": "polite" }, errorMessage)) : (''),
@@ -20078,7 +20071,7 @@ class Input {
     };
     this.onInput = (ev) => {
       const input = ev.target;
-      this.value = (input === null || input === void 0 ? void 0 : input.value) || '';
+      this.value = input?.value || '';
       this.nanoInput.emit(ev);
     };
     this.onBlur = () => {
@@ -20163,7 +20156,11 @@ class Input {
     if (!this.datalist)
       return;
     const currDWConfig = this.datalist.dropDownConfig || {};
-    this.datalist.dropDownConfig = Object.assign(Object.assign({}, currDWConfig), { skidding: -1, tetherTo: this.nativeInputWrap });
+    this.datalist.dropDownConfig = {
+      ...currDWConfig,
+      skidding: -1,
+      tetherTo: this.nativeInputWrap,
+    };
   }
   /**
    * This will be true when the control is in an invalid state.
@@ -20356,16 +20353,26 @@ class Input {
       rtl,
       hasHelperEndSlot,
     }))(this);
-    const wrapOptions = Object.assign(Object.assign({}, compWrapOptions), { labelId,
+    const wrapOptions = {
+      ...compWrapOptions,
+      labelId,
       moreId,
-      helperEndId, hasValue: this.hasValue(), controlId: this.inputId });
+      helperEndId,
+      hasValue: this.hasValue(),
+      controlId: this.inputId,
+    };
     const controlOptions = (({ clearInput, readonly, disabled }) => ({
       clearInput,
       readonly,
       disabled,
       clearControl: this.clearInput,
     }))(this);
-    return (hAsync(Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) }, hAsync("div", { style: { width: '100%' } }, hAsync(FormControlWrap, Object.assign({}, wrapOptions), hAsync(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }), this.type !== 'textarea' && (hAsync("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (hAsync("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+    return (hAsync(Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: {
+        ...createColorClasses(this.color),
+        'has-value': this.hasValue(),
+        'has-focus': this.hasFocus,
+        'is-invalid': this._invalid,
+      } }, hAsync("div", { style: { width: '100%' } }, hAsync(FormControlWrap, { ...wrapOptions }, hAsync(FormControl, { ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }, this.type !== 'textarea' && (hAsync("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (hAsync("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
         'input__native-ctrl': true,
         input__resizable: this.resize === 'true',
       }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), hAsync("slot", null))));
@@ -20555,14 +20562,12 @@ class Menu {
   // Public Methods
   /** Sets focus on the menu. */
   async setFocus() {
-    var _a;
-    if ((_a = this.menu) === null || _a === void 0 ? void 0 : _a.focus)
+    if (this.menu?.focus)
       this.menu.focus({ preventScroll: true });
   }
   /** Removes focus from the menu. */
   async removeFocus() {
-    var _a;
-    if ((_a = this.menu) === null || _a === void 0 ? void 0 : _a.blur)
+    if (this.menu?.blur)
       this.menu.blur();
   }
   /** Sets the current active item */
@@ -22452,7 +22457,7 @@ class ResizeObserve {
   }; }
 }
 
-const selectCss = ".sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n          clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, \"currentcolor\");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, \"currentcolor\");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  font-family: var(--nano-font-family, inherit);\n  display: block;\n}\n\n.nano-color.sc-nano-select-h {\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n  color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n  --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-block-size: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n          appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n  flex: 1;\n}\n.select__multi-value.sc-nano-select {\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) -3px;\n  background: rgb(var(--multi-input-value-bg)/80%);\n  color: var(--multi-input-value-text-color);\n  border: 1px solid;\n  border-color: var(--multi-input-value-border);\n  padding: 0.35em 0.5em;\n  max-inline-size: 100%;\n  display: flex;\n  align-items: center;\n  font-size: var(--input-font-size);\n  letter-spacing: 1px;\n  max-block-size: calc(2.5em - 8px);\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-inline-size: 100%;\n  overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n  background-position: center;\n  padding-inline-start: 0.5em;\n  margin: 0;\n  color: inherit;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  -webkit-appearance: none;\n          appearance: none;\n  display: flex;\n  align-items: center;\n  inset-block-start: 0;\n  font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n  --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(21%);\n  inset-block-start: 0;\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n  pointer-events: auto;\n}";
+const selectCss = ".sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n          clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, \"currentcolor\");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, \"currentcolor\");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  font-family: var(--nano-font-family, inherit);\n  display: block;\n}\n\n.nano-color.sc-nano-select-h {\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n  color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n  --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-block-size: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n          appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n  flex: 1;\n}\n.select__multi-value.sc-nano-select {\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) -3px;\n  background: rgb(var(--multi-input-value-bg)/80%);\n  color: var(--multi-input-value-text-color);\n  border: 1px solid;\n  border-color: var(--multi-input-value-border);\n  padding: 0.35em 0.5em;\n  display: flex;\n  align-items: center;\n  font-size: var(--input-font-size);\n  letter-spacing: 1px;\n  max-block-size: calc(2.5em - 8px);\n  max-inline-size: calc(100% - 8px);\n  border-radius: 4px;\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-inline-size: 100%;\n  overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n  background-position: center;\n  padding-inline-start: 0.5em;\n  margin: 0;\n  color: inherit;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  -webkit-appearance: none;\n          appearance: none;\n  display: flex;\n  align-items: center;\n  inset-block-start: 0;\n  font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n  --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(21%);\n  inset-block-start: 0;\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n  pointer-events: auto;\n}";
 
 let selectIds = 0;
 /**
@@ -22463,8 +22468,8 @@ let selectIds = 0;
  *
  * @slot start - suitable for inline action buttons or icons that may add extra contextual information
  * @slot end - suitable for inline action buttons or icons that may add extra contextual information
- * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
- * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
+ * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist
+ * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
  * @slot helper - helper text to accompany the form field underneath.
  * @slot helper-end - helper text to accompany the form field on the side.
@@ -22578,14 +22583,16 @@ class Select {
         return;
       if (this.max && this.value.length === this.max)
         return;
-      this.currInsertIndex++;
+      if (Number.isNaN(this._maxValuesVisible) ||
+        this.value.length <= this._maxValuesVisible) {
+        this.currInsertIndex++;
+      }
       this.value = [
         ...this.value.slice(0, this.currInsertIndex),
         e.detail.value,
         ...this.value.slice(this.currInsertIndex),
       ];
       this.inputSearchVal = '';
-      // this.selectWrap.clientWidth; // force reflow
     };
     this.removeValue = (toFind) => {
       if (!this.multiple || !this.value.length)
@@ -22593,8 +22600,10 @@ class Select {
       if (!toFind)
         toFind = this.value[this.value.length - 1];
       this.value = this.value.filter((val) => val !== toFind);
-      this.currInsertIndex--;
-      // this.selectWrap.clientWidth; // force reflow
+      if (Number.isNaN(this._maxValuesVisible) ||
+        this.value.length <= this._maxValuesVisible) {
+        this.currInsertIndex--;
+      }
       this.setFocus();
     };
     this.setOptions = () => {
@@ -22602,7 +22611,7 @@ class Select {
         !this.datalist.activeOptions ||
         !this.datalist.activeOptions.length)
         return;
-      this._eOptions = this.datalist.activeOptions.map((ao) => {
+      this._elementOptions = this.datalist.activeOptions.map((ao) => {
         const { value, selected, label, filterMeta } = ao;
         return { value, selected, label, filterMeta };
       });
@@ -22727,6 +22736,7 @@ class Select {
     this.hideLabel = false;
     this.floatLabel = false;
     this.multiple = false;
+    this.maxValuesVisible = 3;
     this.name = this.selectId + '-name';
     this.placeholder = undefined;
     this.readonly = false;
@@ -22736,11 +22746,12 @@ class Select {
     this.min = undefined;
     this.form = undefined;
     this.allowCustomValues = false;
-    this._eOptions = [];
+    this._elementOptions = [];
     this.clearSelect = false;
     this.mask = false;
     this.debounce = 0;
     this.dropDownConfig = {};
+    this.valueTagTemplate = undefined;
     this.showInlineValidation = debounce$2(this.showInlineValidation, 50);
   }
   /**
@@ -22758,6 +22769,23 @@ class Select {
       return '';
     return this.nativeSelect.validationMessage;
   }
+  watchMaxValuesVisible() {
+    if (!this.multiple)
+      return;
+    this._maxValuesVisible =
+      this.maxValuesVisible === false ? NaN : Number(this.maxValuesVisible);
+    // make sure maxValuesVisible is a number
+    if (!Number.isNaN(this._maxValuesVisible)) {
+      if (this.currInsertIndex > this._maxValuesVisible) {
+        // make the input position is no more than the max
+        this.currInsertIndex = this._maxValuesVisible;
+      }
+    }
+    else {
+      // if maxValuesVisible is undefined, it will be `NaN`
+      this.currInsertIndex = this.value.length - 1;
+    }
+  }
   /**
    * The value of the select.
    */
@@ -22789,7 +22817,7 @@ class Select {
       return this._options;
     if (!this.datalist || !this.datalist.activeOptions)
       return [];
-    return this._eOptions.map((ao) => {
+    return this._elementOptions.map((ao) => {
       const { value, selected, label, filterMeta } = ao;
       return { value, selected, label, filterMeta };
     });
@@ -22836,7 +22864,11 @@ class Select {
       return;
     this.datalist.input = this.inputCtrl;
     const currDWConfig = this.datalist.dropDownConfig || {};
-    this.datalist.dropDownConfig = Object.assign(Object.assign(Object.assign({}, currDWConfig), this.dropDownConfig), { tetherTo: this.selectWrap });
+    this.datalist.dropDownConfig = {
+      ...currDWConfig,
+      ...this.dropDownConfig,
+      tetherTo: this.selectWrap,
+    };
   }
   // Public Methods
   /**
@@ -22908,12 +22940,20 @@ class Select {
     this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
     this.hasHelperEndSlot = !!this.el.querySelector('[slot="helper-end"]');
   }
-  getLabel(toFind) {
-    const label = this.options.find((opt) => {
-      var _a;
-      return !opt.disabled && ((_a = opt.value) === null || _a === void 0 ? void 0 : _a.length) && opt.value === toFind;
+  getOptionWithValue(value) {
+    let index;
+    const options = this.datalist.activeOptions.length
+      ? this.datalist.activeOptions
+      : this.options;
+    const option = options.find((opt, i) => {
+      index = i;
+      return !opt.disabled && opt.value?.length && opt.value === value;
     });
-    return label && label.label ? label.label : toFind;
+    return [option, index];
+  }
+  getLabel(toFind) {
+    const option = this.getOptionWithValue(toFind)[0];
+    return option && option.label ? option.label : toFind;
   }
   /* Event handling */
   onReset(e) {
@@ -22945,6 +22985,7 @@ class Select {
   /* Stencil Component lifecycle hooks */
   connectedCallback() {
     this.debounceChanged();
+    this.watchMaxValuesVisible();
     return;
   }
   disconnectedCallback() {
@@ -22983,15 +23024,31 @@ class Select {
       placeholder,
       rtl,
     }))(this);
-    const wrapOptions = Object.assign(Object.assign({}, compWrapOptions), { labelId,
+    const wrapOptions = {
+      ...compWrapOptions,
+      labelId,
       moreId,
-      helperEndId, hasValue: !!this.value.length || !!this.inputSearchVal.length, controlId: this.selectId });
+      helperEndId,
+      hasValue: !!this.value.length || !!this.inputSearchVal.length,
+      controlId: this.selectId,
+    };
     const controlOptions = (({ readonly, disabled }) => ({
       readonly,
       disabled,
       clearControl: this.clearSelect,
     }))(this);
-    return (hAsync(Host, { type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': !!this.value.length || !!this.inputSearchVal.length, 'has-focus': this.hasFocus, 'is-invalid': this.invalid, 'has-label': this.label !== null && !this.floatLabel, 'has-float-label': this.label !== null && this.floatLabel, rtl: this.rtl, 'has-multiple': this.multiple, 'has-clr-btn': this.clearSelect, masked: this.mask }) }, hAsync(FormControlWrap, Object.assign({}, wrapOptions), hAsync(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: hAsync("slot", { name: "down-arrow" }, hAsync("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }), this.multiple && (hAsync("div", { class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+    return (hAsync(Host, { type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        ...createColorClasses(this.color),
+        'has-value': !!this.value.length || !!this.inputSearchVal.length,
+        'has-focus': this.hasFocus,
+        'is-invalid': this.invalid,
+        'has-label': this.label !== null && !this.floatLabel,
+        'has-float-label': this.label !== null && this.floatLabel,
+        rtl: this.rtl,
+        'has-multiple': this.multiple,
+        'has-clr-btn': this.clearSelect,
+        masked: this.mask,
+      } }, hAsync(FormControlWrap, { ...wrapOptions }, hAsync(FormControl, { ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: hAsync("slot", { name: "down-arrow" }, hAsync("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (hAsync("div", { class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
       this.mask && (hAsync("div", { class: "select__mask" }, this.getLabel(this.value))),
       hAsync("input", { id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
     ])), !this.readonly && !this.disabled && (hAsync("nano-datalist", { onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
@@ -23011,21 +23068,38 @@ class Select {
     const input = (hAsync("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
     if (!this.value.length)
       return input;
-    return this.value.map((val, i) => {
-      let toReturn = (hAsync("span", { onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), draggable: true, "data-value": val, ref: (span) => this.valueItems.push(span), class: "select__multi-value" }, hAsync("span", null, this.getLabel(val)), hAsync("button", { class: "select__multi-value-remove", type: "button", tabindex: "-1", onTouchEnd: () => {
-          this.removeValue(val);
-        }, onMouseUp: () => {
-          this.removeValue(val);
-        } }, hAsync("nano-icon", { name: "light/times" }))));
-      if (i === 0 && this.currInsertIndex < 0)
-        toReturn = [input, toReturn];
-      else if (i === this.currInsertIndex)
-        toReturn = [toReturn, input];
-      return toReturn;
+    const toReturn = [];
+    this.value.forEach((val, i) => {
+      if (!Number.isNaN(this._maxValuesVisible) && i > this._maxValuesVisible)
+        return;
+      let valueTag;
+      if (i === this._maxValuesVisible) {
+        valueTag = (hAsync("span", { "data-value": val, class: "select__multi-value" }, hAsync("span", null, "+", this.value.length - this._maxValuesVisible)));
+      }
+      else {
+        valueTag = (hAsync("span", { onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), draggable: true, "data-value": val, ref: (span) => this.valueItems.push(span), class: "select__multi-value" }, this.valueTagTemplate ? (hAsync("span", { innerHTML: this.valueTagTemplate
+            ? this.valueTagTemplate(...this.getOptionWithValue(val))
+            : undefined })) : (hAsync("span", null, this.getLabel(val))), hAsync("button", { class: "select__multi-value-remove", type: "button", tabindex: "-1", onTouchEnd: () => {
+            this.removeValue(val);
+          }, onMouseUp: () => {
+            this.removeValue(val);
+          } }, hAsync("nano-icon", { name: "light/times" }))));
+      }
+      if (i === 0 && this.currInsertIndex < 0) {
+        toReturn.push(input, valueTag);
+      }
+      else if (i === this.currInsertIndex) {
+        toReturn.push(valueTag, input);
+      }
+      else {
+        toReturn.push(valueTag);
+      }
     });
+    return toReturn;
   }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "maxValuesVisible": ["watchMaxValuesVisible"],
     "debounce": ["debounceChanged"],
     "required": ["shouldValidate"],
     "disabled": ["shouldValidate"],
@@ -23051,6 +23125,7 @@ class Select {
       "hideLabel": [4, "hide-label"],
       "floatLabel": [4, "float-label"],
       "multiple": [4],
+      "maxValuesVisible": [1032, "max-values-visible"],
       "name": [1],
       "placeholder": [1],
       "readonly": [516],
@@ -23066,6 +23141,7 @@ class Select {
       "mask": [4],
       "debounce": [2],
       "dropDownConfig": [1040],
+      "valueTagTemplate": [16],
       "currInsertIndex": [32],
       "showErrorMsg": [32],
       "errorMessage": [32],
@@ -23075,7 +23151,7 @@ class Select {
       "hasHelperEndSlot": [32],
       "inputSearchVal": [32],
       "_invalid": [32],
-      "_eOptions": [32],
+      "_elementOptions": [32],
       "reportValidity": [64],
       "setFocus": [64],
       "getSelectElement": [64],
@@ -25840,17 +25916,6 @@ class Slides {
     flickity.resize();
     flickity.reposition();
   }
-  /**
-   * Force flickity to update its height (when adaptiveHeight is enabled) for the duration
-   * equal to 'speed' parameter.
-   *
-   * @param speed The transition duration (in ms).
-   */
-  async updateAutoHeight(speed) {
-    const vp = document.querySelector('.flickity-viewport');
-    if (vp)
-      vp.style.transition = speed + 'ms';
-  }
   /**
    * Transition to the specified slide.
    *
@@ -26012,10 +26077,20 @@ class Slides {
       this.ready = true;
       if (!window['ResizeObserver'])
         return;
-      // just boots and braces to make sure it's the correct size oninit
+      if (this.resizeO) {
+        this.resizeO.disconnect();
+        this.resizeO = undefined;
+      }
       const ro = (this.resizeO = new ResizeObserver(() => {
-        flick.resize();
-        // this.resizeO.disconnect();
+        readTask(() => {
+          const vp = this.host.shadowRoot.querySelector('.flickity-viewport');
+          writeTask(() => {
+            // reset the height, otherwise it *only* gets bigger
+            if (vp)
+              vp.style.height = '';
+            flick.resize();
+          });
+        });
       }));
       ro.observe(this.host);
     }, 100);
@@ -26063,10 +26138,10 @@ class Slides {
     };
     const customEvents = !!this.options && !!this.options.on ? this.options.on : {};
     // merge "on" event listeners, while giving our event listeners priority
-    const mergedEventOptions = { on: Object.assign(Object.assign({}, customEvents), eventOptions) };
+    const mergedEventOptions = { on: { ...customEvents, ...eventOptions } };
     // Merge the base, user options, and events together then pass to flickity
     // @ts-ignore
-    return Object.assign(Object.assign(Object.assign({}, flickityOptions), mergedEventOptions), this.options);
+    return { ...flickityOptions, ...mergedEventOptions, ...this.options };
   }
   componentDidLoad() {
   }
@@ -26082,8 +26157,10 @@ class Slides {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
-    if (this.resizeO)
+    if (this.resizeO) {
       this.resizeO.disconnect();
+      this.resizeO = undefined;
+    }
     this.destroyflickity();
   }
   render() {
@@ -26127,7 +26204,6 @@ class Slides {
       "slidesReady": [32],
       "didInit": [32],
       "update": [64],
-      "updateAutoHeight": [64],
       "slideTo": [64],
       "slideNext": [64],
       "slidePrev": [64],
@@ -26195,32 +26271,32 @@ function drag(container, options) {
       x = pointerEvent.pageX - offsetX;
       y = pointerEvent.pageY - offsetY;
     }
-    if (options === null || options === void 0 ? void 0 : options.onMove) {
+    if (options?.onMove) {
       options.onMove(x, y);
     }
   }
   function stop() {
     document.removeEventListener('pointermove', move);
     document.removeEventListener('pointerup', stop);
-    if (options === null || options === void 0 ? void 0 : options.onStop) {
+    if (options?.onStop) {
       options.onStop();
     }
   }
   document.addEventListener('pointermove', move, { passive: true });
   document.addEventListener('pointerup', stop);
-  if (!!!(options === null || options === void 0 ? void 0 : options.initialEvent))
+  if (!!!options?.initialEvent)
     return;
   let initialEvent;
-  if (options === null || options === void 0 ? void 0 : options.initialEvent['touches']) {
+  if (options?.initialEvent['touches']) {
     initialEvent = {
-      pageX: (options === null || options === void 0 ? void 0 : options.initialEvent).touches[0].pageX,
-      pageY: (options === null || options === void 0 ? void 0 : options.initialEvent).touches[0].pageY,
+      pageX: (options?.initialEvent).touches[0].pageX,
+      pageY: (options?.initialEvent).touches[0].pageY,
     };
   }
   else {
     initialEvent = {
-      pageX: (options === null || options === void 0 ? void 0 : options.initialEvent).pageX,
-      pageY: (options === null || options === void 0 ? void 0 : options.initialEvent).pageY,
+      pageX: (options?.initialEvent).pageX,
+      pageY: (options?.initialEvent).pageY,
     };
   }
   const defaultView = container.ownerDocument.defaultView;
@@ -26275,9 +26351,8 @@ class Sortable {
   }
   /** If sortable elements change dynamically, use this method to add handle controls to new elements */
   async refreshKeyboardHandles() {
-    var _a, _b, _c;
     if (this.handleSelector) {
-      if ((_a = this.keyboardHandleMap) === null || _a === void 0 ? void 0 : _a.size) {
+      if (this.keyboardHandleMap?.size) {
         this.keyboardHandleMap.clear();
       }
       this.sortableHost
@@ -26291,8 +26366,8 @@ class Sortable {
       });
       return;
     }
-    if ((_b = this.keyboardHandleMap) === null || _b === void 0 ? void 0 : _b.size) {
-      (_c = this.keyboardHandleMap) === null || _c === void 0 ? void 0 : _c.forEach((_ele, handle) => handle.remove());
+    if (this.keyboardHandleMap?.size) {
+      this.keyboardHandleMap?.forEach((_ele, handle) => handle.remove());
       this.keyboardHandleMap.clear();
     }
     this.sortableHost
@@ -26652,7 +26727,7 @@ class Sortable {
     };
     resetTrack();
     // start a timer - only start dragging if pressed for 150ms
-    this.mouseDownTimer = window === null || window === void 0 ? void 0 : window.setTimeout(() => {
+    this.mouseDownTimer = window?.setTimeout(() => {
       // ignore if this is not a valid drag target
       if (!this.trackStart(e))
         return;
@@ -26824,7 +26899,7 @@ class Sortable {
     this.dropzoneSelector = undefined;
     this.helperText = 'Press "Space" or "Enter" to enable element reordering and use the arrow keys to reorder items.' +
       'Press "Escape" to cancel reordering. Alternatively, use your mouse to drag / reorder.';
-    this.itemDescriptor = (el) => `"${el === null || el === void 0 ? void 0 : el.textContent.trim()}"`;
+    this.itemDescriptor = (el) => `"${el?.textContent.trim()}"`;
     this.grabbedHelperText = (el) => `${this.itemDescriptor(el)} grabbed`;
     this.droppedHelperText = (el) => `${this.itemDescriptor(el)} dropped`;
     this.reorderHelperText = (el, elements, position) => `The list has been reordered, ${this.itemDescriptor(el)} is now item ${position} of ${elements.length}`;
@@ -26864,9 +26939,8 @@ class Sortable {
     this.attachMutationObserver();
   }
   disconnectedCallback() {
-    var _a;
     this.removeEventHandlers();
-    (_a = this.host.querySelector(`#${this.sortableId}`)) === null || _a === void 0 ? void 0 : _a.remove();
+    this.host.querySelector(`#${this.sortableId}`)?.remove();
     if (this.mutationObserver) {
       this.mutationObserver.disconnect();
       this.mutationObserver = undefined;
@@ -28283,12 +28357,11 @@ class TabGroup {
     });
   }
   syncActiveTabIndicator() {
-    var _a;
     this.getAllTabs.forEach((tab) => tab.setAttribute('direction', this.placement === 'top' ? 'horizontal' : 'vertical'));
     const tab = this.getActiveTab;
     if (!tab)
       return;
-    const width = ((_a = tab.shadowRoot.querySelector('.nanotab')) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+    const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;
     const height = tab.clientHeight;
     const offset = getOffset(tab, this.tabs);
     if (!this.activeTabIndicator)
@@ -28319,7 +28392,6 @@ class TabGroup {
   }
   // Event handlers
   handleTabClose(ev) {
-    var _a;
     let tabIndex = this.getAllActiveTabs.indexOf(ev.target);
     const tab = ev.target;
     if (tabIndex < 0)
@@ -28334,7 +28406,7 @@ class TabGroup {
     // Show the previous tab if the tab is currently active
     if (tab.active) {
       tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;
-      const prevTab = (_a = this.getAllActiveTabs[tabIndex]) === null || _a === void 0 ? void 0 : _a.panel;
+      const prevTab = this.getAllActiveTabs[tabIndex]?.panel;
       if (prevTab)
         this.host.show(prevTab);
     }
@@ -28382,7 +28454,7 @@ class TabGroup {
   }
   render() {
     this.isRtl = this.host.ownerDocument.dir === 'rtl';
-    return (hAsync(Host, { class: Object.assign({}, createColorClasses(this.color)), dir: this.isRtl ? 'rtl' : null }, hAsync("div", { part: "base", class: {
+    return (hAsync(Host, { class: { ...createColorClasses(this.color) }, dir: this.isRtl ? 'rtl' : null }, hAsync("div", { part: "base", class: {
         'nano-tab-group': true,
         'nano-tab-group--top': this.placement === 'top',
         'nano-tab-group--start': this.placement === 'start',
@@ -28429,7 +28501,7 @@ class TabGroup {
   }; }
 }
 
-const tabContentCss = "/*!@:host*/.sc-nano-tab-content-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-tab-content,*.sc-nano-tab-content::before,*.sc-nano-tab-content::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-tab-content{display:none !important}/*!@:host*/.sc-nano-tab-content-h{display:block;transform:translate3d(0, 0, 0);opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}/*!@:host(.ready)*/.ready.sc-nano-tab-content-h{animation-duration:0.3s !important}@media only screen and (max-width: 768px){/*!@:host([animation-dir=left])*/[animation-dir=left].sc-nano-tab-content-h{animation:slide-right 0.3s ease-in-out;opacity:1}/*!@:host([animation-dir=right])*/[animation-dir=right].sc-nano-tab-content-h{animation:slide-left 0.3s ease-in-out;opacity:1}}/*!@.nano-tab-content*/.nano-tab-content.sc-nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){/*!@**/*.sc-nano-tab-content{animation:none !important}}";
+const tabContentCss = "/*!@:host*/.sc-nano-tab-content-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-tab-content,*.sc-nano-tab-content::before,*.sc-nano-tab-content::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-tab-content{display:none !important}/*!@:host*/.sc-nano-tab-content-h{display:block;opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}/*!@:host(.ready)*/.ready.sc-nano-tab-content-h{animation-duration:0.3s !important}@media only screen and (max-width: 768px){/*!@:host([animation-dir=left])*/[animation-dir=left].sc-nano-tab-content-h{animation:slide-right 0.3s ease-in-out;opacity:1}/*!@:host([animation-dir=right])*/[animation-dir=right].sc-nano-tab-content-h{animation:slide-left 0.3s ease-in-out;opacity:1}}/*!@.nano-tab-content*/.nano-tab-content.sc-nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){/*!@**/*.sc-nano-tab-content{animation:none !important}}";
 
 let id$1 = 0;
 /**
@@ -29270,12 +29342,12 @@ function sort(workerStore, rows, prop, order) {
     return rows;
   const col = workerStore.columns.find((c) => c.prop === prop);
   // custom sort
-  if (!!(col === null || col === void 0 ? void 0 : col.sortCompareFn) && typeof col.sortCompareFn === 'function') {
+  if (!!col?.sortCompareFn && typeof col.sortCompareFn === 'function') {
     const sorted = rows.slice().sort(col.sortCompareFn(prop, order));
     return sorted;
   }
   // text sort
-  if ((col === null || col === void 0 ? void 0 : col.type) === 'text' && typeof rows[0][prop] === 'string') {
+  if (col?.type === 'text' && typeof rows[0][prop] === 'string') {
     const sorted = rows.slice().sort((a, b) => {
       if (!a[prop])
         return 1;
@@ -29319,7 +29391,7 @@ function applyFiltersAndSort(workerStore, rows) {
 }
 function colsFromStore(safeColumns) {
   return safeColumns.map((c) => {
-    if (!!(c === null || c === void 0 ? void 0 : c.sortCompareFn)) {
+    if (!!c?.sortCompareFn) {
       c.sortCompareFn = new Function('return ' + c.sortCompareFn)();
     }
     return c;
@@ -29336,7 +29408,7 @@ async function destroyWorkerStore(workerId) {
 function colsToWorker(columns) {
   const safeColumns = JSON.parse(JSON.stringify(columns));
   columns.forEach((c) => {
-    if (!!(c === null || c === void 0 ? void 0 : c.sortCompareFn)) {
+    if (!!c?.sortCompareFn) {
       const safeCol = safeColumns.find((sc) => sc.prop === c.prop);
       safeCol.sortCompareFn = c.sortCompareFn.toString();
     }
@@ -29416,10 +29488,9 @@ function storeSetData(host, rows) {
     }
     // convert date columns into numbers to send to our worker
     dateCols.forEach((colName) => {
-      var _a;
       // coerce any date type;
       // Date(), timestamp, valid date string
-      const coerceDate = (_a = new Date(row[colName])) !== null && _a !== void 0 ? _a : null;
+      const coerceDate = new Date(row[colName]) ?? null;
       if (!!coerceDate && Number(coerceDate))
         row[colName] = Number(coerceDate);
     });
@@ -29484,7 +29555,7 @@ function colDataModel(rowIndex, colIndex) {
   const columns = store.config.state.columns;
   const rows = store.data.state.rows;
   const column = columns[colIndex];
-  const prop = column === null || column === void 0 ? void 0 : column.prop;
+  const prop = column?.prop;
   const rowModel = rows[rowIndex];
   const cellModel = rowModel ? rowModel[columns[colIndex].prop] : '';
   return {
@@ -29519,12 +29590,12 @@ function mergeProperties(current, extra) {
   if (!extra)
     return current;
   // top level merge
-  const props = Object.assign(Object.assign({}, extra), current);
+  const props = { ...extra, ...current };
   // deeper merge
   // merge classes maps or strings
   if (extra.class) {
     if (typeof extra.class === 'object' && typeof props.class === 'object') {
-      props.class = Object.assign(Object.assign({}, extra.class), props.class);
+      props.class = { ...extra.class, ...props.class };
     }
     else if (typeof extra.class === 'string' &&
       typeof props.class === 'object') {
@@ -29536,7 +29607,7 @@ function mergeProperties(current, extra) {
   }
   // merge style
   if (extra.style) {
-    props.style = Object.assign(Object.assign({}, extra.style), props.style);
+    props.style = { ...extra.style, ...props.style };
   }
   return props;
 }
@@ -29556,9 +29627,8 @@ function fetchStores() {
  * @returns - the merged properties that will be applied to a node
  */
 function mergeCellProperties(rowIndex, colIndex, defaultProps) {
-  var _a;
-  const props = Object.assign({}, defaultProps);
-  const extraPropsFunc = (_a = fetchStores().config.state.columns[colIndex]) === null || _a === void 0 ? void 0 : _a.cellProperties;
+  const props = { ...defaultProps };
+  const extraPropsFunc = fetchStores().config.state.columns[colIndex]?.cellProperties;
   if (!extraPropsFunc)
     return props;
   const data = colDataModel(rowIndex, colIndex);
@@ -29573,7 +29643,7 @@ function mergeCellProperties(rowIndex, colIndex, defaultProps) {
  * @returns - a JSX node
  */
 function colheadFootRender(col) {
-  const tpl = col === null || col === void 0 ? void 0 : col.columnTemplate;
+  const tpl = col?.columnTemplate;
   return tpl ? (tpl(hAsync, col)) : (hAsync(Fragment, null, col.title));
 }
 function headerPinClasses(type, vPinned, toString = false) {
@@ -29670,7 +29740,13 @@ const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
     extraProps = column.columnProperties(column) || extraProps;
   }
   const baseProps = {
-    class: Object.assign(Object.assign({}, headerPinClasses('th', column.pinned)), { [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start', [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end', [`${CSSNAMESPACE}__ordered`]: !!column.order, [`${CSSNAMESPACE}__filtered`]: column.filter !== undefined && column.filter !== null }),
+    class: {
+      ...headerPinClasses('th', column.pinned),
+      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
+      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
+      [`${CSSNAMESPACE}__ordered`]: !!column.order,
+      [`${CSSNAMESPACE}__filtered`]: column.filter !== undefined && column.filter !== null,
+    },
   };
   let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
   const content = colheadFootRender(column);
@@ -29678,16 +29754,17 @@ const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
     return hAsync(Fragment, null);
   props =
     Number(props.colSpan) > 1
-      ? Object.assign(Object.assign({}, props), { scope: 'colgroup' }) : Object.assign(Object.assign({}, props), { scope: 'col' });
+      ? { ...props, scope: 'colgroup' }
+      : { ...props, scope: 'col' };
   if (isSortable()) {
     const sort = column.order
       ? column.order === 'asc'
         ? 'ascending'
         : 'descending'
       : 'none';
-    props = Object.assign(Object.assign({}, props), { 'aria-sort': sort });
+    props = { ...props, 'aria-sort': sort };
   }
-  return (hAsync("th", Object.assign({}, props, { key: column.prop }), isSortable() ? (hAsync("button", { class: {
+  return (hAsync("th", { ...props, key: column.prop }, isSortable() ? (hAsync("button", { class: {
       [`${CSSNAMESPACE}__order-btn`]: true,
       [`${CSSNAMESPACE}__cell-content`]: true,
     }, onClick: handleColumnSortClick },
@@ -29710,10 +29787,9 @@ const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
  * @returns - a JSX node
  */
 function cellRender(rowIndex, colIndex) {
-  var _a, _b;
   const store = fetchStores();
   const columns = store.config.state.columns;
-  const tpl = (_a = columns[colIndex]) === null || _a === void 0 ? void 0 : _a.cellTemplate;
+  const tpl = columns[colIndex]?.cellTemplate;
   const model = colDataModel(rowIndex, colIndex);
   const tableInstance = getRenderingRef();
   if (!!model.cellModel && columns[colIndex].type === 'date') {
@@ -29746,7 +29822,7 @@ function cellRender(rowIndex, colIndex) {
     // custom rendering can render to the templateEle OR return a promise<string>
     tplResult = result && result['then'] ? result : templateEle;
   }
-  return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (hAsync(Fragment, null, (_b = model.cellModel) === null || _b === void 0 ? void 0 : _b.toString())) : ('');
+  return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (hAsync(Fragment, null, model.cellModel?.toString())) : ('');
 }
 const baseCellClasses = (colIndex, toString = false) => {
   const store = fetchStores();
@@ -29776,12 +29852,13 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
   if (column.rowHeader) {
     props =
       Number(props.rowSpan) > 1
-        ? Object.assign(Object.assign({}, props), { scope: 'rowgroup' }) : Object.assign(Object.assign({}, props), { scope: 'row' });
+        ? { ...props, scope: 'rowgroup' }
+        : { ...props, scope: 'row' };
     CellType = 'th';
   }
   const ContentWrap = (props) => {
     const content = Content();
-    return (hAsync("div", Object.assign({ ref: (d) => {
+    return (hAsync("div", { ref: (d) => {
         if (!d)
           return;
         if (content instanceof Element) {
@@ -29794,17 +29871,17 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
           // @ts-expect-error
           content.then((res) => (d.innerHTML = res));
         }
-      } }, props, { class: {
+      }, ...props, class: {
         [`${CSSNAMESPACE}__cell-content`]: true,
         [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
       }, innerHTML: typeof content === 'string' && content.includes('<')
         ? content
-        : undefined }), (typeof content !== 'string' || !content.includes('<')) &&
+        : undefined }, (typeof content !== 'string' || !content.includes('<')) &&
       !content['then'] &&
       !(content instanceof Element) &&
       content));
   };
-  return (hAsync(CellType, Object.assign({ role: tableInstance.type === 'grid' ? 'gridcell' : undefined }, props), column.autoTooltip && !column.wrap ? (hAsync("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
+  return (hAsync(CellType, { role: tableInstance.type === 'grid' ? 'gridcell' : undefined, ...props }, column.autoTooltip && !column.wrap ? (hAsync("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
       e.detail.x) },
     hAsync("nano-tooltip", { disabled: true, placement: "top", onNanoShow: (e) => (e.target.closest(CellType).style.zIndex = '100'), onNanoHide: (e) => (e.target.closest(CellType).style.zIndex = '') },
       hAsync(ContentWrap, null),
@@ -29813,11 +29890,11 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
 };
 
 const tableCellContent = (props, children, ctx) => {
-  const cell = (hAsync("div", Object.assign({}, props.wrapperProps, { class: {
+  const cell = (hAsync("div", { ...props.wrapperProps, class: {
       [`${CSSNAMESPACE}__cell-content`]: true,
       [`${CSSNAMESPACE}__cell-content--wrap`]: props.wrap,
-    } }), children));
-  return props.header ? (hAsync("th", Object.assign({ scope: ctx }, props.cellProps), cell)) : (hAsync("td", Object.assign({}, props.cellProps), cell));
+    } }, children));
+  return props.header ? (hAsync("th", { scope: ctx, ...props.cellProps }, cell)) : (hAsync("td", { ...props.cellProps }, cell));
 };
 const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
   // helper, generates <td> or <th>
@@ -29829,16 +29906,16 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
     const model = rowDataModel(rowIndex);
     rowModel = model.rowModel;
   }
-  if (rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.rowProperties) {
+  if (rowRenderer?.rowProperties) {
     extraProps =
       rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;
   }
   let rowPinned;
-  if ((rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.pinned) && typeof rowRenderer.pinned === 'function') {
+  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {
     rowPinned = rowRenderer.pinned({ rowModel, rowIndex });
   }
   const props = mergeProperties({ class: headerPinClasses('tr', rowPinned, true) }, extraProps);
-  const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
+  const tpl = rowRenderer?.template;
   /**
    * Applies appropriate classes to td / th VNodes;
    * which can be supplied by user defined templates
@@ -29857,7 +29934,7 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
   };
   if (tpl) {
     let toRender = tpl(hAsync, {
-      renderedRow: (hAsync("tr", Object.assign({}, props, { key: rowModel.__uuid }), children)),
+      renderedRow: (hAsync("tr", { ...props, key: rowModel.__uuid }, children)),
       rowModel,
       rowIndex,
     }, TableCell);
@@ -29876,7 +29953,7 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
     }
     return toRender;
   }
-  return (hAsync("tr", Object.assign({}, props, { key: rowModel.__uuid }), applyCellClasses(children)));
+  return (hAsync("tr", { ...props, key: rowModel.__uuid }, applyCellClasses(children)));
 };
 const TableHeadFootRow = ({ rowRenderer }, // onRowPinned, onColPinned
 children, utils) => {
@@ -29890,10 +29967,10 @@ children, utils) => {
   const pinned = rowRenderer.pinned || null;
   const baseProps = { class: headerPinClasses('tr', pinned) };
   const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-  const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
+  const tpl = rowRenderer?.template;
   if (tpl) {
     let toRender = tpl(hAsync, {
-      renderedRow: hAsync("tr", Object.assign({}, props), children),
+      renderedRow: hAsync("tr", { ...props }, children),
     }, TableHeadFootCell);
     if (Array.isArray(toRender)) {
       toRender = utils.map(toRender, (node) => {
@@ -29915,7 +29992,7 @@ children, utils) => {
     }
     return toRender;
   }
-  return hAsync("tr", Object.assign({}, props), children);
+  return hAsync("tr", { ...props }, children);
 };
 
 function addStyleSheet(id, css) {
@@ -30302,13 +30379,13 @@ function perMark(name, end = false) {
   if (!performance || !measurePerf)
     return;
   if (end) {
-    performance === null || performance === void 0 ? void 0 : performance.mark('end' + name);
-    performance === null || performance === void 0 ? void 0 : performance.measure(name, 'start' + name, 'end' + name);
-    const entries = performance === null || performance === void 0 ? void 0 : performance.getEntriesByName(name);
+    performance?.mark('end' + name);
+    performance?.measure(name, 'start' + name, 'end' + name);
+    const entries = performance?.getEntriesByName(name);
     console.info(entries[entries.length ? entries.length - 1 : 0]);
   }
   else {
-    performance === null || performance === void 0 ? void 0 : performance.mark('start' + name);
+    performance?.mark('start' + name);
   }
 }
 let id = 0;
@@ -30404,11 +30481,10 @@ class Table {
      * stop loop - it's on the current active block.
      */
     this.scrollHandler = () => {
-      var _a;
       let scrollPos = 0;
       perMark('scrollHandler');
       // don't listen if this table isn't in the viewport
-      if (!((_a = this.store) === null || _a === void 0 ? void 0 : _a.general.state.isActive) || !this.rows)
+      if (!this.store?.general.state.isActive || !this.rows)
         return;
       if (this.primaryBlockIndex === undefined)
         this.primaryBlockIndex = 0;
@@ -30448,10 +30524,9 @@ class Table {
       });
     };
     this.handleResizeChange = (e) => {
-      var _a;
       this.tableWrapperEle.className = '';
       let classes = [`${CSSNAMESPACE}__wrap`];
-      if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.className)
+      if (e.target?.className)
         classes = [...e.target.className.split(' '), ...classes];
       this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));
     };
@@ -30577,7 +30652,6 @@ class Table {
   }
   // uses the first 'tr' of an active block as our yard stick
   set measureEle(el) {
-    var _a;
     if (!el)
       return;
     const potentialHeight = el.getBoundingClientRect().height;
@@ -30586,7 +30660,7 @@ class Table {
         ? this.measureHeight
         : potentialHeight;
     this.unitHeight =
-      ((_a = el.querySelector('tr')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || this.unitHeight;
+      el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
   }
   get scrollParent() {
     return this._scrollParent;
@@ -30651,8 +30725,8 @@ class Table {
   sortComplete(order, column) {
     this.columns = this.columns.map((c) => {
       if (c.prop === column)
-        return Object.assign(Object.assign({}, c), { order });
-      return Object.assign(Object.assign({}, c), { order: null });
+        return { ...c, order };
+      return { ...c, order: null };
     });
     this.nanoTblAfterSort.emit({ column: column, order });
     perMark('sort', true);
@@ -30753,8 +30827,7 @@ class Table {
   }
   /** Scrolls to the top immediately - used whilst sorting / filtering */
   scrollToTop(element) {
-    var _a;
-    const scrollBehaviour = (_a = this.scrollParent.style) === null || _a === void 0 ? void 0 : _a.scrollBehavior;
+    const scrollBehaviour = this.scrollParent.style?.scrollBehavior;
     const scrollX = this.scrollParent.scrollLeft;
     this.scrollParent.style.scrollBehavior = 'auto';
     if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1)) {
@@ -30771,7 +30844,7 @@ class Table {
   setMeasureElement() {
     return new Promise((resolve) => {
       readTask(() => {
-        this.measureEle = this.blockElements.find((b) => { var _a; return !((_a = b === null || b === void 0 ? void 0 : b.classList) === null || _a === void 0 ? void 0 : _a.contains(`${CSSNAMESPACE}__inactive`)); });
+        this.measureEle = this.blockElements.find((b) => !b?.classList?.contains(`${CSSNAMESPACE}__inactive`));
         resolve();
       });
     });
@@ -30782,8 +30855,7 @@ class Table {
    * These elements have no natural height (on account of all their rows being hidden)
    */
   setInitialBlockDimension() {
-    var _a;
-    if (!((_a = this.blockElements) === null || _a === void 0 ? void 0 : _a.length))
+    if (!this.blockElements?.length)
       return;
     perMark('blockDims');
     const testForDimensions = async () => {
@@ -31157,7 +31229,6 @@ class Tooltip {
   // Public methods
   /** Shows the tooltip. */
   async show() {
-    var _a;
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
     if (this.isVisible || this.disabled) {
       return;
@@ -31170,7 +31241,7 @@ class Tooltip {
     this.isVisible = true;
     this.open = true;
     // @ts-ignore
-    if (typeof ((_a = this.tooltipPositioner) === null || _a === void 0 ? void 0 : _a.showPopover) === 'function') {
+    if (typeof this.tooltipPositioner?.showPopover === 'function') {
       this.hoist = true;
       this.popover.show();
       // @ts-ignore
@@ -31195,9 +31266,8 @@ class Tooltip {
     this.open = false;
     this.popover.hide();
     setTimeout(() => {
-      var _a;
       // @ts-ignore
-      if (!this.open && typeof ((_a = this.positioner) === null || _a === void 0 ? void 0 : _a.hidePopover) === 'function') {
+      if (!this.open && typeof this.positioner?.hidePopover === 'function') {
         // @ts-ignore
         this.positioner.hidePopover();
       }
@@ -32101,7 +32171,15 @@ const createGesture = (config) => {
   let hasStartedPan = false;
   let hasFiredStart = true;
   let isMoveQueued = false;
-  const finalConfig = Object.assign({ disableScroll: false, direction: 'x', gesturePriority: 0, passive: true, maxAngle: 40, threshold: 10 }, config);
+  const finalConfig = {
+    disableScroll: false,
+    direction: 'x',
+    gesturePriority: 0,
+    passive: true,
+    maxAngle: 40,
+    threshold: 10,
+    ...config,
+  };
   const canStart = finalConfig.canStart;
   const onWillStart = finalConfig.onWillStart;
   const onStart = finalConfig.onStart;