xv-webcomponents 0.1.39 → 0.1.42

package/dist/cjs/{xv-accordion-v2_27.cjs.entry.js → xv-accordion-v2_34.cjs.entry.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D41mMXvd.js');
+var index = require('./index-MLh9SbX2.js');
 var index$1 = require('./index-BE3kw7I4.js');
 
 const xvAccordionCss = ":host{display:block}";
@@ -67,32 +67,87 @@ const XvAccordionItem = class {
 };
 XvAccordionItem.style = xvAccordionItemCss;
 
-const xvButtonV2Css = "@charset \"UTF-8\";:host{--button-font-size:14px;--focus-border-width:2px;--focus-border-style:solid;--button-ghost:tarnsparent;--text-disabled-opacity:0.25;--button-border-radius:3px;--button-border-width:1px;--button-border-style:solid;--button-border-color-accent:#97BF0D;--button-border-color-primary:#273435;--button-border-color-secondary:#D1D1D1;--button-border-color-ghost:tarnsparent;--button-ghost-hover:tarnsparent;--button-ghost-active:rgba(139, 139, 139, 0.5);--button-accent-disabled:#D1D1D1;--button-primary-disabled:#D1D1D1;--button-secondary-disabled:#D1D1D1;--button-tertiary-disabled:tarnsparent;--button-ghost-disabled:tarnsparent;--button-padding-x:20px}:host button{font-family:inherit;font-size:var(--button-font-size, 14px);font-weight:700;padding:0 var(--button-padding-x);min-height:40px;line-height:40px;cursor:pointer;box-sizing:border-box;transition:background-color 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.1s ease-in-out, border-color 0.2s ease-in-out, border-width 0.2s ease-in-out, box-shadow 0.2s ease-in-out}:host button.xv-button-block{width:100%}.xv-button{}.xv-button.accent{background-color:var(--button-accent);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);border-radius:var(--button-border-radius)}.xv-button.accent:hover{background-color:var(--button-accent-hover)}.xv-button.accent:active{background-color:var(--button-accent-active);color:var(--text-on-color)}.xv-button.accent:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.accent:disabled{background-color:var(--button-accent-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-accent-disabled)}.xv-button.primary{background-color:var(--button-primary);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);border-radius:var(--button-border-radius)}.xv-button.primary:hover{background-color:var(--button-primary-hover)}.xv-button.primary:active{background-color:var(--button-primary-active)}.xv-button.primary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.primary:disabled{background-color:var(--button-primary-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-primary-disabled)}.xv-button.secondary{background-color:var(--button-secondary);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);border-radius:var(--button-border-radius)}.xv-button.secondary:hover{background-color:var(--button-secondary-hover)}.xv-button.secondary:active{background-color:var(--button-secondary-active)}.xv-button.secondary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.secondary:disabled{background-color:var(--button-secondary-disabled);color:var(--text-on-color-disabled)}.xv-button.tertiary{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-tertiary);border-radius:var(--button-border-radius)}.xv-button.tertiary:hover{background-color:var(--button-tertiary-hover)}.xv-button.tertiary:active{background-color:var(--button-tertiary-active)}.xv-button.tertiary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.tertiary:disabled{background-color:var(--button-tertiary-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}.xv-button.ghost{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);border-radius:var(--button-border-radius)}.xv-button.ghost:hover{background-color:var(--button-ghost-hover)}.xv-button.ghost:active{background-color:var(--button-ghost-active)}.xv-button.ghost:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out}.xv-button.ghost:disabled{background-color:var(--button-ghost-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}";
+var SIZE_VAR;
+(function (SIZE_VAR) {
+    SIZE_VAR["XS"] = "xs";
+    SIZE_VAR["SM"] = "sm";
+    SIZE_VAR["MD"] = "md";
+    SIZE_VAR["LG"] = "lg";
+    SIZE_VAR["XL"] = "xl";
+})(SIZE_VAR || (SIZE_VAR = {}));
+var XV_SORT_DIR;
+(function (XV_SORT_DIR) {
+    XV_SORT_DIR["ASC"] = "asc";
+    XV_SORT_DIR["DESC"] = "desc";
+    XV_SORT_DIR["NONE"] = "none";
+})(XV_SORT_DIR || (XV_SORT_DIR = {}));
+
+const xvButtonV2Css = ":host{display:inline-block}:host([block]){display:block;width:100%}.xv-button{all:unset;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:3px;font-size:var(--fz-md);font-family:var(--ff-body, Tahoma);font-style:normal;font-weight:700;line-height:128.571%;letter-spacing:0.16px;cursor:pointer;position:relative;transition:background 0.2s, color 0.2s, border-color 0.2s;user-select:none;width:100%}.xv-button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.xv-button--xs{--xv-button-icon-size:16px;padding:var(--spacing-02);height:var(--xv-button-icon-size)}.xv-button--sm{--xv-button-icon-size:32px;padding:var(--spacing-03);height:var(--xv-button-icon-size)}.xv-button--md{--xv-button-icon-size:40px;padding:var(--spacing-04);height:var(--xv-button-icon-size)}.xv-button--lg{--xv-button-icon-size:48px;padding:var(--spacing-05);height:var(--xv-button-icon-size)}.xv-button--xl{--xv-button-icon-size:60px;font-size:1.1em;padding:var(--spacing-06);height:auto}.xv-button--primary{background-color:var(--button-primary);color:var(--text-on-color)}.xv-button--primary:hover{background-color:var(--button-primary-hover)}.xv-button--primary:active{background-color:var(--button-primary-active)}.xv-button--accent{background-color:var(--button-accent);color:var(--text-on-color)}.xv-button--accent:hover{background-color:var(--button-accent-hover)}.xv-button--accent:active{background-color:var(--button-accent-active)}.xv-button--secondary{background-color:var(--button-secondary);border:1px solid var(--border-subtle-01)}.xv-button--secondary:hover{background-color:var(--button-secondary-hover)}.xv-button--secondary:active{background-color:var(--button-secondary-active)}.xv-button--danger{background:var(--support-error);color:white}.xv-button--danger:hover{background-color:#ba1b23}.xv-button--danger:active{background-color:#750e13}.xv-button--danger:disabled{background-color:var(--button-disabled);border-color:transparent;color:var(--text-on-color-disabled, #8B8B8B)}.xv-button--tertiary{background-color:transparent;border:1px solid var(--button-tertiary)}.xv-button--tertiary:hover{background-color:var(--button-tertiary-hover)}.xv-button--tertiary:active{background-color:var(--button-tertiary-active)}.xv-button--tertiary:disabled{color:var(--text-disabled);border-color:var(--button-disabled, #D1D1D1);background-color:transparent}.xv-button--ghost{background-color:transparent;color:var(--text-primary)}.xv-button--ghost:hover{background-color:transparent}.xv-button--ghost:active{background-color:rgba(139, 139, 139, 0.5)}.xv-button--ghost:disabled{color:var(--text-disabled);border-color:transparent;background-color:transparent}.xv-button--primary:disabled,.xv-button--accent:disabled,.xv-button--secondary:disabled,.xv-button--danger:disabled{border-color:var(--border-subtle-01, #D1D1D1);background-color:var(--button-disabled, #D1D1D1);color:var(--text-on-color-disabled, #8B8B8B)}.xv-button--disabled{cursor:not-allowed}.xv-button--loading{pointer-events:none;opacity:0.8}.xv-button__label{display:inline-flex;align-items:center}.xv-button__loader{position:absolute;left:50%;transform:translateX(-50%)}.xv-button__icon{display:inline-flex;align-items:center}.xv-button--icon-left .xv-button__icon--left{margin-inline-end:var(--spacing-05)}.xv-button--icon-right .xv-button__icon--right{margin-inline-start:var(--spacing-05)}.xv-button--icon-only{padding:0;width:var(--xv-button-icon-size, 40px);height:var(--xv-button-icon-size, 40px);justify-content:center}.xv-button--icon-only .xv-button__icon{margin:0}";
 
 const XvButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.buttonClick = index.createEvent(this, "buttonClick");
-        /** Button label */
-        this.label = '';
-        /** Container width Button */
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        /** Button variants */
+        this.variant = 'primary';
+        /** Button size */
+        this.size = SIZE_VAR.MD;
+        /** Button disabled state */
+        this.disabled = false;
+        /** Button loading state */
+        this.loading = false;
+        /** Button for full width */
         this.block = false;
         /** Button type */
         this.type = 'button';
-        /** Variant */
-        this.variant = 'primary';
-        /** Disabled state */
-        this.disabled = false;
-        /** Handle click only if not disabled */
-        this.handleClick = (e) => {
-            if (this.disabled)
-                return;
-            this.buttonClick.emit(e);
+        this.hasLeftIcon = false;
+        this.hasRightIcon = false;
+        this.hasContent = false;
+        this.handleSlotChangeLeft = (event) => {
+            this.hasLeftIcon = event.target.assignedElements().length > 0;
+        };
+        this.handleSlotChangeContent = (event) => {
+            this.hasContent = event.target.assignedNodes().some(node => {
+                var _a;
+                return node.nodeType === Node.ELEMENT_NODE ||
+                    (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
+            });
+        };
+        this.handleSlotChangeRight = (event) => {
+            this.hasRightIcon = event.target.assignedElements().length > 0;
+        };
+        this.handleClick = () => {
+            var _a, _b;
+            if (this.type === 'submit') {
+                (_a = this.internals.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
+            }
+            else if (this.type === 'reset') {
+                (_b = this.internals.form) === null || _b === void 0 ? void 0 : _b.reset();
+            }
         };
     }
     render() {
-        return (index.h("button", { key: '4a9a7d9eb8f0b9fb264c03e804fa157d14a15805', type: this.type, part: "button", class: `xv-button ${this.variant} ${this.block ? 'xv-button-block' : ''}`, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: 'd9102ce481222999d9f1a35b4782b550e1a3179c', name: "icon-left" }), index.h("slot", { key: '5960e30d35b9d403da9da635414cd4db95f165d6' }, this.label), index.h("slot", { key: 'aae667909ef6932eaa31a8a6b89165960d0cf8a3', name: "icon-right" })));
+        var _a;
+        return (index.h(index.Host, { key: 'ad8e2051c6023d13626e65861099114e2ff06db2' }, index.h("button", { key: '1f2b8e13a29a63b3f50ced928a83e92d0eb5c0ea', class: {
+                'xv-button': true,
+                [`xv-button--${this.variant}`]: !!this.variant,
+                [`xv-button--${this.size}`]: !!this.size,
+                'xv-button--disabled': this.disabled || this.loading,
+                'xv-button--block': this.block,
+                'xv-button--loading': this.loading,
+                'xv-button--icon-left': this.hasLeftIcon,
+                'xv-button--icon-right': this.hasRightIcon,
+                'xv-button--icon-only': !this.hasContent,
+            }, part: "button", onClick: this.handleClick, type: this.type, disabled: this.disabled || this.loading, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": ((_a = this.el) === null || _a === void 0 ? void 0 : _a.ariaLabel) || 'XV button' }, this.loading && (index.h("xv-loader-v2", { key: 'a7c55e4823b233f845f1a9e5e654f2c98a88001d', class: "xv-button__loader", size: this.size !== SIZE_VAR.XL ? this.size : SIZE_VAR.LG })), index.h("span", { key: '57f0ced69f7022ba8b602083b69fa2804061ccef', class: "xv-button__icon xv-button__icon--left" }, index.h("slot", { key: '8c6c0c1a12bfafe6a3674352b5e8ba77e0562eb3', name: "icon-left", onSlotchange: this.handleSlotChangeLeft })), index.h("span", { key: '8e19d4691b333a0d70a76ed476f59bacfeefa963', class: "xv-button__label" }, index.h("slot", { key: 'c9d9896b34e3137442b11db5d4f44d097d952d37', onSlotchange: this.handleSlotChangeContent }, this.label)), index.h("span", { key: '25a3256dff8ec326c081601dd46cff45149a7683', class: "xv-button__icon xv-button__icon--right" }, index.h("slot", { key: '90505c36d3620fa19c3d01fc1e66cc57e705a8db', name: "icon-right", onSlotchange: this.handleSlotChangeRight })))));
     }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
 };
 XvButton.style = xvButtonV2Css;
 
@@ -104,12 +159,12 @@ const XvCard = class {
         this.variant = 'vertical';
     }
     render() {
-        return (index.h(index.Host, { key: '347b7aed9ce24e2e048bb4e6d0b07b23f0f60d5b', class: `xv-card xv-card_${this.variant}`, part: this.variant }, index.h("div", { key: '9cd9f38cfe7d93fc271907fc8435033df860c246', class: "xv-card_media" }, index.h("slot", { key: '35e2bae3084a0e7d26e13c0e3116daa9895ea6c1', name: "media" }, this.media && index.h("img", { key: '60d4305b136766e447653cb399f92ae70e3d9430', class: "xv-card_media__content", src: this.media, alt: this.header }))), index.h("div", { key: '3751defc0abf18997dca82ae5b5d6601c6e9f60b', class: "xv-card_content" }, index.h("div", { key: 'cca74475b9e5dba03c82f77851fb503a5323ce3c', class: "xv-card_header" }, index.h("slot", { key: '02c4e3ddfb73bd56ef8f5b44a22bfe710654171a', name: "header" }, this.header && index.h("p", { key: '56998aa4742cc7576a023fcbe3e0892f312805ee', class: "xv-card_header__content" }, this.header))), index.h("div", { key: '86da97df293ff58dbcfe0a2b7bc25c98053ac6a2', class: "xv-card_body" }, index.h("slot", { key: 'ff8d6dc3ef8e437d28f237c415bf43382df85f19', name: "body" }, this.body && index.h("p", { key: '7e8e351ac0fa2100fc7929e81cc380a4a32e7019', class: "xv-card_body__content" }, this.header))), index.h("div", { key: 'dc9824b523f2dbdb4f88dc05ac0e490f9b04f529', class: "xv-card_footer" }, index.h("slot", { key: 'ea4fbffc436ee2ef43f481be7656aad07dfc55ce', name: "footer" }, this.footer)))));
+        return (index.h(index.Host, { key: '7c19e1d91f9040c116dc18d6f58be859e66b0629', class: `xv-card xv-card_${this.variant}`, part: this.variant }, index.h("div", { key: '8ef942983bc31d278810372bfed3fe4cb8f1922a', class: "xv-card_media" }, index.h("slot", { key: '86bc68bcb80c563a91448c15ab1ebd89c1e5b245', name: "media" }, this.media && index.h("img", { key: 'c4351a7426b5b73ed37f038f1f355dcf46dae597', class: "xv-card_media__content", src: this.media, alt: this.header }))), index.h("div", { key: '906393c52bb7c27bfbc9527dfba34f712ec8a420', class: "xv-card_content" }, index.h("div", { key: 'd703353d99066a4f395f126f0ec8aa462c7a5c7b', class: "xv-card_header" }, index.h("slot", { key: '4fb9c65d701629dce6f99c8ad871adbd7659ecdd', name: "header" }, this.header && index.h("p", { key: 'e4a3f971b5dca8cdf3e44c9ba2a37baeff67fd59', class: "xv-card_header__content" }, this.header))), index.h("div", { key: '7029219d670fe9a94e5c50f657f5f2f2d45a2edb', class: "xv-card_body" }, index.h("slot", { key: '0f570bb3938b6c44e8cc3fb004ed1d7c487fb5a7', name: "body" }, this.body && index.h("p", { key: '02fc0abdc52c3a0bf833c0bfe24ec573f1457f21', class: "xv-card_body__content" }, this.header))), index.h("div", { key: '9734dca4512ace0e29e332acce27bf01c8a05e24', class: "xv-card_footer" }, index.h("slot", { key: '3cf0141845baf68e0149b823b921705978953ade', name: "footer" }, this.footer)))));
     }
 };
 XvCard.style = xvCardCss;
 
-const xvCheckboxCss = ":host{--checkbox-size:max(1rem, 16px);box-sizing:border-box;display:inline-flex;flex-direction:column}:host([error]) .xv-checkbox .checkmark{border-color:var(--text-error, #D62512)}.error,[name=info]{display:inline-flex;align-items:center;justify-content:flex-start;font-size:var(--fz-sm, 12px);font-family:var(--ff-body, Tahoma);line-height:133.333%;letter-spacing:0.32px}.error{margin-top:var(--gap-xs, 5px);color:var(--text-error, #D62512)}.error::before{margin-right:var(--gap-xs, 5px);content:\"!\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:var(--fz-sm, 12px);font-weight:bold;color:white;background-color:var(--text-error, #D62512);border-radius:50%}.xv-checkbox{display:inline-flex;align-items:center;cursor:pointer;user-select:none}.xv-checkbox input[type=checkbox]{position:absolute;width:var(--checkbox-size);height:var(--checkbox-size);margin:0;padding:0;opacity:0;pointer-events:none;box-sizing:border-box}.xv-checkbox .checkmark{width:var(--checkbox-size);min-width:var(--checkbox-size);height:var(--checkbox-size);min-height:var(--checkbox-size);box-sizing:border-box;margin:0;padding:0;border:1.4px solid var(--icon-primary, #D1D1D1);border-radius:2px;background-color:var(--background, #FFF);transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.xv-checkbox input:checked+.checkmark{background-color:var(--background-brand, #97BF0D);border-color:var(--background-brand, #97BF0D)}.xv-checkbox input:checked+.checkmark:not(.checkmark-partial)::after{content:\"\";width:calc(var(--checkbox-size) / 4);height:calc(var(--checkbox-size) / 2.5);border:solid var(--background, #FFF);margin-bottom:calc(var(--checkbox-size) / 10);border-width:0 2px 2px 0;transform:rotate(45deg);display:block}.xv-checkbox input:checked+.checkmark.checkmark-partial::after{content:\"\";width:calc(var(--checkbox-size) / 3);height:calc(var(--checkbox-size) / 10);background-color:var(--background, #FFF)}.xv-checkbox input:focus+.checkmark{outline:1.4px solid var(--focus, #8B8B8B)}.xv-checkbox .label{color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128.571%;letter-spacing:0.16px}.xv-checkbox .label_str,.xv-checkbox .label ::slotted(*){margin-left:8px}.xv-checkbox.readonly{cursor:initial}.xv-checkbox.readonly input:checked+.checkmark{background-color:var(--background, #FFF);border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly input:checked+.checkmark:after{border-color:var(--icon-primary, #131313)}.xv-checkbox.readonly input:checked+.checkmark-partial:after{background-color:var(--icon-primary, #131313)}.xv-checkbox.readonly .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly .label{color:var(--text-primary, #333)}.xv-checkbox.disabled{cursor:not-allowed}.xv-checkbox.disabled .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.disabled .label{color:var(--text-disabled, rgba(19, 19, 19, 0.25))}";
+const xvCheckboxCss = ":host{--checkbox-size:max(1rem, 16px);box-sizing:border-box;display:inline-flex;flex-direction:column;overflow:visible !important}:host([error]) .xv-checkbox .checkmark{border-color:var(--text-error, #D62512)}.error,[name=info]{display:inline-flex;align-items:center;justify-content:flex-start;font-size:var(--fz-sm, 12px);font-family:var(--ff-body, Tahoma);line-height:133.333%;letter-spacing:0.32px}.error{margin-top:var(--gap-xs, 5px);color:var(--text-error, #D62512)}.error::before{margin-right:var(--gap-xs, 5px);content:\"!\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:var(--fz-sm, 12px);font-weight:bold;color:white;background-color:var(--text-error, #D62512);border-radius:50%}.xv-checkbox{display:inline-flex;align-items:center;cursor:pointer;user-select:none}.xv-checkbox input[type=checkbox]{position:absolute;width:var(--checkbox-size);height:var(--checkbox-size);margin:0;padding:0;opacity:0;pointer-events:none;box-sizing:border-box}.xv-checkbox .checkmark{width:var(--checkbox-size);min-width:var(--checkbox-size);height:var(--checkbox-size);min-height:var(--checkbox-size);box-sizing:border-box;margin:0;padding:0;border:1.4px solid var(--icon-primary, #D1D1D1);border-radius:2px;background-color:var(--background, #FFF);transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.xv-checkbox input:checked+.checkmark{background-color:var(--background-brand, #97BF0D);border-color:var(--background-brand, #97BF0D)}.xv-checkbox input:checked+.checkmark:not(.checkmark-partial)::after{content:\"\";position:absolute;width:calc(var(--checkbox-size) / 4);height:calc(var(--checkbox-size) / 2.5);border:solid var(--background, #FFF);margin-bottom:calc(var(--checkbox-size) / 10);border-width:0 2px 2px 0;transform:rotate(45deg);display:block}.xv-checkbox input:checked+.checkmark.checkmark-partial::after{content:\"\";position:absolute;width:calc(var(--checkbox-size) / 3);height:calc(var(--checkbox-size) / 10);background-color:var(--background, #FFF)}.xv-checkbox input:focus+.checkmark{outline:1.4px solid var(--focus, #8B8B8B)}.xv-checkbox .label{color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128.571%;letter-spacing:0.16px}.xv-checkbox .label_str,.xv-checkbox .label ::slotted(*){margin-left:8px}.xv-checkbox.readonly{cursor:initial}.xv-checkbox.readonly input:checked+.checkmark{background-color:var(--background, #FFF);border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly input:checked+.checkmark:after{border-color:var(--icon-primary, #131313)}.xv-checkbox.readonly input:checked+.checkmark-partial:after{background-color:var(--icon-primary, #131313)}.xv-checkbox.readonly .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly .label{color:var(--text-primary, #333)}.xv-checkbox.disabled{cursor:not-allowed}.xv-checkbox.disabled .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.disabled .label{color:var(--text-disabled, rgba(19, 19, 19, 0.25))}";
 
 const XvCheckbox = class {
     constructor(hostRef) {
@@ -183,7 +238,7 @@ const XvCheckbox = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'bcaedf1b88ff4b64cec1ca477a214dc8987c6ed0' }, index.h("label", { key: '85770d8c9326340f63e024893c5fd28bc79f85a7', class: { 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly } }, index.h("input", { key: '156869a713eed4506123e267dc8e4b0ed74e73bb', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("span", { key: '1b2a979ae6d31e48e03ab41a054236cd5dbaab26', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), index.h("div", { key: '5bb240548e68a3e44fd665a917ccc75d2bd423b1', class: "label" }, index.h("slot", { key: '7ac3876f675592624c2fd252d8dc9941ad823de9' }, this.label && index.h("span", { key: '263f592cf8f71cfbb6d4a53180b67e71260f36da', class: "label_str" }, this.label)))), index.h("slot", { key: 'aaf1a57125f9561f0902e943991ba8c91b763534', name: "info" }), !!this.error && index.h("span", { key: 'a7e94090ad70cf9929b6112965ff6da3965de627', class: "error" }, this.error)));
+        return (index.h(index.Host, { key: '9eb988ec6a7a02392b4ed77685eed2bc5814c137' }, index.h("label", { key: '3e4c7112c959897c5b61cbcff890eaf437e476fc', class: { 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly } }, index.h("input", { key: '3a2e68b5780ae3951f86d30f9b2e8d9af1805e97', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("span", { key: 'b57f073a258a1ea15d04969a68eab7c36023e596', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), index.h("div", { key: '1abe0c133bf203b228b86bd68053856b79cdf170', class: "label" }, index.h("slot", { key: '155a80701f1a050a73a0079308de0b932407549e' }, this.label && index.h("span", { key: 'f9d493bfb663fcf91712b754b4c1b841d10beb05', class: "label_str" }, this.label)))), index.h("slot", { key: 'fae7055dc73235126a633a705b6e8f045a20954c', name: "info" }), !!this.error && index.h("span", { key: '5c3bb7d31289862bf421614ee9906671e65c1b7c', class: "error" }, this.error)));
     }
     componentDidLoad() {
         if (this.indeterminate) {
@@ -209,18 +264,145 @@ const XvCheckbox = class {
 };
 XvCheckbox.style = xvCheckboxCss;
 
-var SIZE_VAR;
-(function (SIZE_VAR) {
-    SIZE_VAR["XS"] = "xs";
-    SIZE_VAR["SM"] = "sm";
-    SIZE_VAR["MD"] = "md";
-    SIZE_VAR["LG"] = "lg";
-    SIZE_VAR["XL"] = "xl";
-})(SIZE_VAR || (SIZE_VAR = {}));
+const xvDataTableCss = ":host{--xv-data-table-border-width:1px;--xv-data-table-border-color:var(--border-subtle-01, #D1D1D1);--xv-data-table-padding-x:var(--spacing-05, 16px);--xv-data-table-padding-y:var(--spacing-05, 16px);--xv-data-table-row-bg:transparent;width:inherit;text-align:left;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:18px;letter-spacing:0.16px}@media screen and (max-width: 980px){:host{display:block;position:relative;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host ::slotted([slot=title]),:host>table{min-width:1000px}}:host .bar{position:sticky;left:0}:host .bar_batch{position:absolute;bottom:0;left:0;right:0;pointer-events:unset;user-select:unset;z-index:2;background-color:var(--interactive-01, #273435);color:var(--text-on-color, #fff);border-radius:3px 3px 0 0;display:flex;align-items:center}:host .bar_toolbar{z-index:1;border-radius:3px 3px 0 0}:host ::slotted([slot=title]){margin:0 !important;color:var(--text-primary, #333) !important;font-family:var(--ff-heading, \"Gill Sans\") !important;font-size:var(--fz-xl, 21px) !important;text-align:left;font-style:normal !important;font-weight:400 !important;line-height:normal !important;padding:var(--spacing-05) var(--spacing-05) var(--spacing-06) !important}:host ::slotted([slot=toolbar]){margin-bottom:var(--spacing-03)}:host>table{width:inherit;border-collapse:collapse;table-layout:fixed;border-left:1px solid var(--xv-data-table-border-color);border-right:1px solid var(--xv-data-table-border-color)}:host>caption{display:contents}:host([block]){width:100%}:host([block])>table{table-layout:fixed}:host([size=xs]){--xv-data-table-padding-x:var(--spacing-02, 4px);--xv-data-table-padding-y:var(--spacing-02, 4px)}:host([size=sm]){--xv-data-table-padding-x:var(--spacing-04, 12px);--xv-data-table-padding-y:var(--spacing-03, 8px)}:host([size=md]){--xv-data-table-padding-x:var(--spacing-05, 16px);--xv-data-table-padding-y:var(--spacing-05, 16px)}:host([size=lg]){--xv-data-table-padding-x:var(--spacing-05, 16px);--xv-data-table-padding-y:var(--spacing-06, 24px)}:host([size=xl]){--xv-data-table-padding-x:var(--spacing-06, 24px);--xv-data-table-padding-y:var(--spacing-07, 32px)}";
+
+const XvDataTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.size = SIZE_VAR.MD;
+        this.columnWidths = [];
+        this.hover = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '207324db4e9adea03e0137788fa43f8e9a7eb677', class: "xv-data-table" }, index.h("caption", { key: 'f5925136510194c00db68b12ef921f6e68b56904' }, index.h("slot", { key: 'b0b40ae6031c154f75f84587c4fa54f2c86fb011', name: "title" })), index.h("div", { key: '69121d921fcdc8f1c82e44d7eede6cdcab9e22d4', class: "bar" }, index.h("div", { key: '6b3db04362ba12983581946f00a66738dee3c2da', class: "bar_batch" }, index.h("slot", { key: 'caac537802365f29fefb13ac7f2c3060849ac47e', name: "batch" })), index.h("div", { key: 'b918df57e54dca14d66dd8a14994ceab12ff7ad2', class: "bar_toolbar" }, index.h("slot", { key: 'a567d9d6258abf3b3ed888e5ecee3817962949f6', name: "toolbar" }))), index.h("table", { key: 'fd0e463d79710b09db9a6e5655279d6c6591ed2e', role: "table" }, this.columnWidths.length > 0 && (index.h("colgroup", { key: '05aa18155327d5ecb1c62081dc081efb1f3b8db3' }, this.columnWidths.map((width = 'auto') => index.h("col", { style: { width } })))), index.h("slot", { key: 'f95cdd075cad05b53bf8e3cef85eccd908c1191f' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+XvDataTable.style = xvDataTableCss;
+
+const xvDataTableCellCss = "@charset \"UTF-8\";:host{display:table-cell;border-style:solid;border-left-width:0;border-right-width:0;border-top-width:var(--xv-data-table-border-width, 0);border-bottom-width:var(--xv-data-table-border-width, 0);border-color:var(--xv-data-table-border-color, transparent);padding-inline:var(--xv-data-table-padding-x, 0);padding-block:var(--xv-data-table-padding-y, 0);vertical-align:middle;word-break:break-all;font-style:normal;font-weight:400}:host .line-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}:host(:not(.multiline)){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(:not(.multiline)) ::slotted(*){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([sort]){position:relative;cursor:pointer;user-select:none}:host([sort]):before,:host([sort]):after{font-size:12px;line-height:10px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;right:8px;pointer-events:none;transition:350ms ease-in-out opacity;opacity:0}:host([sort]):before{content:\"▲\";top:50%;transform:translateY(calc(-50% - 5px))}:host([sort])::after{content:\"▼\";top:50%;transform:translateY(calc(-50% + 5px))}:host([sort]:hover){background-color:var(--layer-accent-hover-01, #E3E3E3)}:host([sort]:hover)::before,:host([sort]:hover)::after{opacity:1}:host([sort=asc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=asc])::before{opacity:1}:host([sort=asc])::after{display:none}:host([sort=desc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=desc])::before{display:none}:host([sort=desc])::after{opacity:1}";
+
+const XvDataTableCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sortChange = index.createEvent(this, "sortChange");
+    }
+    handleSort() {
+        if (this.sort === undefined)
+            return;
+        let sort = this.sort;
+        if (this.sort === '')
+            sort = XV_SORT_DIR.NONE;
+        this.sort = sort === XV_SORT_DIR.NONE ?
+            XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?
+            XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;
+        index$1.forEach(this.el.parentElement.children, (cell) => {
+            if (cell !== this.el && cell.hasAttribute('sort')) {
+                cell.setAttribute('sort', 'none');
+            }
+        });
+        if (!this.name)
+            this.name = index$1.uidGenerator();
+        this.sortChange.emit(this.sort);
+    }
+    ;
+    render() {
+        return (index.h(index.Host, { key: 'bfc254739fa56d47210d43d134ba6c3534c5e567', role: "cell", style: { width: this.width }, class: {
+                multiline: this.multiline !== undefined,
+                [`align--${this.align}`]: !!this.align
+            } }, !this.multiline || isNaN(this.multiline) ? index.h("slot", null) : (index.h("div", { class: "line-clamp", style: { ['-webkit-line-clamp']: `${this.multiline}` } }, index.h("slot", null)))));
+    }
+    get el() { return index.getElement(this); }
+};
+XvDataTableCell.style = xvDataTableCellCss;
+
+const XV_DATA_TABLE_TAG = 'xv-data-table';
+const XV_DATA_TABLE_ROW_TAG = 'xv-data-table-row';
+
+const xvDataTableCollapseCss = ":host([collapsed]){display:none}:host([expanded]){display:contents}";
+
+const XvDataTableCollapse = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.collapsedChange = index.createEvent(this, "collapsedChange");
+        this.collapsed = false;
+    }
+    async setCollapsed(collapsed) {
+        this.collapsed = collapsed;
+        this.collapsedChange.emit(this.collapsed);
+        return this.collapsed;
+    }
+    componentWillLoad() {
+        const table = this.el.closest(XV_DATA_TABLE_TAG);
+        const rows = table.querySelectorAll(XV_DATA_TABLE_ROW_TAG);
+        rows.forEach((row) => row === null || row === void 0 ? void 0 : row.setAttribute('collapsable', ''));
+    }
+    render() {
+        return (index.h(index.Host, { key: '7704e9d073c449d3efd35bada4f632129378308e', id: this.el.id, part: "xv-collapse", class: this.el.className, collapsed: this.collapsed, expanded: !this.collapsed }, index.h("slot", { key: 'a9684bbe4c0bf29fdf12c81344236d1b38865fd3' })));
+    }
+    get el() { return index.getElement(this); }
+};
+XvDataTableCollapse.style = xvDataTableCollapseCss;
+
+const xvDataTableRowCss = ":host{display:table-row;background-color:var(--xv-data-table-row-bg, transparent);transition:0.2s ease-in-out background-color}:host .cell-control{font-size:8px;max-width:16px;position:relative;padding-left:calc(var(--xv-data-table-padding-x) + var(--xv-data-table-padding-x) + 10px + 1em);overflow:visible}:host .cell-control_collapse{font-size:inherit;width:1em;height:1em;margin:0;padding:0;position:absolute;overflow:visible;background-color:transparent;outline:none;top:calc(50% - 0.7em);left:var(--xv-data-table-padding-x);display:inline-flex;border-top:none;border-left:none;border-right:2px solid var(--icon-primary, #333);border-bottom:2px solid var(--icon-primary, #333);transform:rotate(45deg);transform-origin:center center;transition:0.2s ease-in-out transform, 0.2s ease-in-out opacity;cursor:pointer;box-sizing:content-box}:host .cell-control_collapse:active{opacity:0.4}:host .cell-control_collapse.open{transform:rotate(-135deg)}:host .cell-control_checkbox{display:flex}:host(.hover:not([header]):hover){background-color:var(--layer-hover-01, #E9E9E9)}:host([header]){background-color:var(--layer-accent-01, #F7F7F7)}:host(.checked){background-color:var(--layer-selected-01, #E3E3E3)}:host(.hover.checked:hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host([footer]),:host([footer]:hover),:host([footer].hover),:host([footer].hover:hover){background-color:var(--layer-accent-02, #E3E3E3)}:host([disabled]){opacity:0.5}";
+
+const XvDataTableRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.check = index.createEvent(this, "check");
+        this.checked = false;
+        this.partial = false;
+        this.hover = false;
+        this.header = false;
+        this.footer = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.collapsed = false;
+        this.collapseClick = async () => {
+            var _a;
+            if (!this.collapse || !this.collapseEl)
+                return;
+            this.collapsed = !this.collapsed;
+            await ((_a = this.collapseEl) === null || _a === void 0 ? void 0 : _a.setCollapsed(this.collapsed));
+        };
+        this.setInitialState = () => {
+            var _a;
+            if (this.collapse && !this.collapseEl) {
+                this.collapseEl = this.el.parentElement.querySelector(`xv-data-table-collapse${this.collapse}`);
+                this.collapsed = (_a = this.collapseEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('collapsed');
+            }
+            if (!this.hover) {
+                const table = this.el.closest(XV_DATA_TABLE_TAG);
+                this.hover = table.hasAttribute('hover');
+            }
+        };
+        this.checkedChangeHandle = ({ detail: checked }) => {
+            if (!checked && this.partial)
+                this.partial = checked;
+            if (!this.name)
+                this.name = index$1.uidGenerator();
+            this.check.emit({
+                checked,
+                name: this.name,
+                value: this.value,
+                partial: this.partial,
+                header: this.header,
+                footer: this.footer,
+                expandable: !!this.collapseEl,
+            });
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '4e452026f2b03d8d54811cb1de7342bc0a4d38b1', role: "row", part: "xv-row", class: { checked: this.checked, hover: this.hover } }, (!!this.variant || this.collapsable) && (index.h("xv-data-table-cell", { key: '28d1bb41ac6c4de32701315e1a201892041d4b42', width: !!this.variant ? '16px' : '0', class: "cell-control" }, !!this.collapse && (index.h("button", { key: 'b7d4c5d1e8121ce9797ca292d7367df734b356fe', class: { 'cell-control_collapse': true, open: !this.collapsed }, onClick: this.collapseClick })), this.variant === 'checkbox' && (index.h("xv-checkbox-v2", { key: '6095d07a8626988bb863317284fb3ebd137ef58a', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, readonly: this.readonly, required: this.required, onEventChange: this.checkedChangeHandle, class: "cell-control_checkbox" })))), index.h("slot", { key: '0ae007a4595a3cc854246c2e46d058df0f596b17', onSlotchange: this.setInitialState })));
+    }
+    get el() { return index.getElement(this); }
+};
+XvDataTableRow.style = xvDataTableRowCss;
 
 const DropdownItemSelector = '.xv-dropdown-item';
 
-const xvDropdownCss = ":host{--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:300px;display:block;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px}:host .label ::slotted([slot=label]){color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px}:host .control{background-blend-mode:multiply;border-radius:3px;box-shadow:0 0 0 1px #8B8B8B inset;transition:0.2s ease-in-out background-color;cursor:pointer;margin:0;box-sizing:border-box;font-family:inherit;font-size:100%;padding:0;border:0;appearance:none;background-color:var(--field-02, #FFF);text-align:start;inline-size:100%;position:relative;display:inline-flex;overflow:hidden;align-items:center;block-size:calc(100% + 1px);outline:none;padding-block:var(--dropdown-padding-y);padding-inline:var(--dropdown-padding-x);text-overflow:ellipsis;vertical-align:top;white-space:nowrap}:host .control_value,:host .control_placeholder{flex:1;margin:0;overflow:hidden;color:var(--text-primary, #333);user-select:none;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fz-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px;padding-inline:0 1rem}:host .control_placeholder{color:var(--text-placeholder, #ACACAC)}:host .control_icon{width:18px;height:18px}:host .control_icon.error{color:var(--support-error, #F1290E)}:host .control_icon.warning{color:var(--support-warning, #FF7F04)}:host .control_arrow{box-sizing:border-box;margin:0;font-size:100%;vertical-align:baseline;padding:0;border:0;appearance:none;background:none;text-align:start;display:flex;align-items:center;justify-content:center;block-size:1.5rem;inline-size:1.5rem;inset-inline-end:0.75rem;outline:none;transition:transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9)}:host .control:hover{background-color:var(--field-hover-02, #E9E9E9)}:host .control:active{background-color:var(--layer-selected-02, #E3E3E3)}:host .options{inset-block-start:100%;margin-block-start:1px;display:block;max-block-size:13.75rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.3);position:absolute;z-index:10;inline-size:100%;inset-inline:0;overflow-y:auto;transition:max-height 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);border-radius:3px;background-color:var(--field-02, #FFF);scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .options ::slotted(.xv-dropdown-item){display:block;max-block-size:13.75rem;inset-inline:0;box-sizing:border-box;padding:var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + 16px) var(--dropdown-padding-y) var(--dropdown-padding-x);position:relative;cursor:pointer;overflow:hidden;color:var(--text-secondary, #515151);text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px;transition:0.2s ease-in-out background-color;user-select:none}:host .options ::slotted(.xv-dropdown-item):after{content:\"\";position:absolute;bottom:0;height:1px;left:10px;width:calc(100% - 20px);background-color:var(--border-subtle-01)}:host .options ::slotted(.xv-dropdown-item:hover){background-color:var(--layer-hover-02, #F7F7F7)}:host .options ::slotted(.xv-dropdown-item:active){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[selected]){background-color:var(--layer-selected-02, #E3E3E3)}:host .options ::slotted(.xv-dropdown-item[selected]:hover){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[disabled]){background-color:transparent;opacity:0.4;cursor:not-allowed}:host .helper{color:var(--text-helper, #646464);font-family:var(--ff-heading, \"IBM Plex Sans\");font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin:0;padding:0}:host([open]) .control_arrow{transform:rotate(180deg)}:host([disabled]){opacity:0.4;cursor:not-allowed}:host([disabled]) .control{cursor:inherit}:host([disabled]) .control:hover,:host([disabled]) .control:active,:host([disabled]) .control:focus-within{background-color:transparent}:host([error]) .control{box-shadow:none;outline:2px solid var(--support-support-error, #F1290E)}:host([error]) .helper{color:var(--text-error, #D62512)}:host([size=xs]){--dropdown-padding-y:4px}:host([size=sm]){--dropdown-padding-y:7px}:host([size=md]){--dropdown-padding-y:11px}:host([size=lg]){--dropdown-padding-y:15px}:host([size=xl]){--dropdown-padding-y:16px}";
+const xvDropdownCss = ":host{--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:300px;display:block;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{display:block;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px;margin-bottom:8px}:host .label ::slotted([slot=label]){color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px}:host .label_info{margin-left:var(--spacing-02)}:host .control{background-blend-mode:multiply;border-radius:3px;box-shadow:0 0 0 1px #8B8B8B inset;transition:0.2s ease-in-out background-color;cursor:pointer;margin:0;box-sizing:border-box;font-family:inherit;font-size:100%;padding:0;border:0;appearance:none;background-color:var(--field-02, #FFF);text-align:start;inline-size:100%;position:relative;display:inline-flex;overflow:hidden;align-items:center;block-size:calc(100% + 1px);outline:none;padding-block:var(--dropdown-padding-y);padding-inline:var(--dropdown-padding-x);text-overflow:ellipsis;vertical-align:top;white-space:nowrap}:host .control_value,:host .control_placeholder{flex:1;margin:0;overflow:hidden;color:var(--text-primary, #333);user-select:none;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fz-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px;padding-inline:0 1rem}:host .control_placeholder{color:var(--text-placeholder, #ACACAC)}:host .control_icon{width:18px;height:18px}:host .control_icon.error{color:var(--support-error, #F1290E)}:host .control_icon.warning{color:var(--support-warning, #FF7F04)}:host .control_arrow{box-sizing:border-box;margin:0;font-size:100%;vertical-align:baseline;padding:0;border:0;appearance:none;background:none;text-align:start;display:flex;align-items:center;justify-content:center;block-size:1.5rem;inline-size:1.5rem;inset-inline-end:0.75rem;outline:none;transition:transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9)}:host .control:hover{background-color:var(--field-hover-02, #E9E9E9)}:host .control:active{background-color:var(--layer-selected-02, #E3E3E3)}:host .options{inset-block-start:100%;margin-block-start:1px;display:block;max-block-size:13.75rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.3);position:absolute;z-index:10;inline-size:100%;inset-inline:0;overflow-y:auto;transition:max-height 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);border-radius:3px;background-color:var(--field-02, #FFF);scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .options ::slotted(.xv-dropdown-item){display:block;max-block-size:13.75rem;inset-inline:0;box-sizing:border-box;padding:var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + 16px) var(--dropdown-padding-y) var(--dropdown-padding-x);position:relative;cursor:pointer;overflow:hidden;color:var(--text-secondary, #515151);text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px;transition:0.2s ease-in-out background-color;user-select:none}:host .options ::slotted(.xv-dropdown-item):after{content:\"\";position:absolute;bottom:0;height:1px;left:10px;width:calc(100% - 20px);background-color:var(--border-subtle-01)}:host .options ::slotted(.xv-dropdown-item:hover){background-color:var(--layer-hover-02, #F7F7F7)}:host .options ::slotted(.xv-dropdown-item:active){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[selected]){background-color:var(--layer-selected-02, #E3E3E3)}:host .options ::slotted(.xv-dropdown-item[selected]:hover){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[disabled]){background-color:transparent;opacity:0.4;cursor:not-allowed}:host .helper{color:var(--text-helper, #646464);font-family:var(--ff-heading, \"IBM Plex Sans\");font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin:4px 0 0;padding:0}:host([open]) .control_arrow{transform:rotate(180deg)}:host([disabled]){opacity:0.4;cursor:not-allowed}:host([disabled]) .control{cursor:inherit}:host([disabled]) .control:hover,:host([disabled]) .control:active,:host([disabled]) .control:focus-within{background-color:transparent}:host([error]) .control{box-shadow:none;outline:2px solid var(--support-support-error, #F1290E)}:host([error]) .helper{color:var(--text-error, #D62512)}:host([size=xs]){--dropdown-padding-y:4px}:host([size=sm]){--dropdown-padding-y:7px}:host([size=md]){--dropdown-padding-y:11px}:host([size=lg]){--dropdown-padding-y:15px}:host([size=xl]){--dropdown-padding-y:16px}";
 
 const XvDropdown = class {
     constructor(hostRef) {
@@ -316,7 +498,7 @@ const XvDropdown = class {
         this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
     }
     render() {
-        return (index.h(index.Host, { key: 'c079d730375bac47e2990c414f78dbe5f0c819de', class: "xv-dropdown", role: "combobox", size: this.size, open: this.open, error: this.error, disabled: this.disabled, tabindex: this.disabled ? -1 : false }, index.h("label", { key: '89822575a8ba145cfbc54bd40ae50021069243ea', class: "label" }, index.h("slot", { key: 'd09fa78e0df2f911160b059a1254dd09b1c2edcf', name: "label" }, this.label)), index.h("div", { key: 'a4cb541ee3ccca7148b11ff2a5455d9efb75831e', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (index.h("p", { class: "control_value" }, this.selected.join(', '))) : (index.h("p", { class: "control_placeholder" }, this.placeholder || '')), this.renderIcon(), index.h("svg", { key: '698d39331ed3e1e09ae48db98244d0f8e2cecc47', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, index.h("path", { key: '4e78ab3ba78ff63b21f2766887440b5d638fc5e6', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && index.h("div", { key: 'd3493338d8e5acd48a0c825843da13ba631e7050', class: "options" }, index.h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (index.h("p", { key: 'b337cece3d8c4aeb4aedc10b0ef6669c19e27e30', class: "helper" }, this.error || this.warning || this.helper))));
+        return (index.h(index.Host, { key: '556a488d40dfcf1510f183fefbbf9d9bd1d0be80', class: "xv-dropdown", role: "combobox", size: this.size, open: this.open, error: this.error, disabled: this.disabled, tabindex: this.disabled ? -1 : false }, index.h("label", { key: '54550cb9b8a26cc4df4a55abc677bd3f5bb9730d', class: "label" }, index.h("slot", { key: '46270d1b0e6b5ee26a07aeaf318617c73e82cfdb', name: "label" }, this.label), this.info && index.h("xv-tooltip-v2", { key: 'f3b7c09e3346dbaeb0fd720e20e4bbcd58bde7eb', class: "label_info", message: this.info })), index.h("div", { key: '4b4a2794ba78378cd89b3b2ad67bc66edbf4c52f', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (index.h("p", { class: "control_value" }, this.selected.join(', '))) : (index.h("p", { class: "control_placeholder" }, this.placeholder || '')), this.renderIcon(), index.h("svg", { key: '7c79ee0d976229090c0c0a25d01d7beb9a0c3afc', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, index.h("path", { key: 'a895b585e7750cf4a01f7bd0dff390e70f2c482c', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && index.h("div", { key: '846792bfd1683daeb3223fb68c3559543b540787', class: "options" }, index.h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (index.h("p", { key: '741d4636d86a44091e4a4b275806f745ded156f7', class: "helper" }, this.error || this.warning || this.helper))));
     }
     componentWillLoad() {
         this.setDefaultValues();
@@ -366,7 +548,7 @@ const XvDropdownItem = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '50c0bf3d6da015580b84ba455cc5f5b02a836fbb', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, index.h("slot", { key: '3833346442861a6669a6fea827f7da3ef872861c' }), this.selected && index.h("span", { key: '139e1a037467cf98f363f172454a8a9122667955', class: "checkmark" })));
+        return (index.h(index.Host, { key: '85ba648d8281168521c1ed8c4b0b861fb428ce8e', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, index.h("slot", { key: '6c303d085e23e1ecfa433aefa22f02be1cd5711f' }), this.selected && index.h("span", { key: 'c555912f9727a0e42b09279b31fe3b3b740bf7eb', class: "checkmark" })));
     }
     componentWillLoad() {
         if (!this.value)
@@ -376,6 +558,129 @@ const XvDropdownItem = class {
 };
 XvDropdownItem.style = xvDropdownItemCss;
 
+var XvFileUploaderVariants;
+(function (XvFileUploaderVariants) {
+    XvFileUploaderVariants["BUTTON"] = "button";
+    XvFileUploaderVariants["DRAG_DROP"] = "drag-drop";
+})(XvFileUploaderVariants || (XvFileUploaderVariants = {}));
+
+const xvFileUploaderCss = ":host{font-family:inherit;display:flex;flex-direction:column;gap:var(--spacing-05);font-size:14px}:host .label{font-weight:600;font-size:1em;color:var(--text-primary)}:host .description{font-size:1em;margin:0;color:var(--text-secondary)}:host .upload-btn{padding:0 1.14em;border-radius:0.285em;background-color:var(--background-inverse);color:var(--text-inverse);border:none;cursor:pointer;font-size:1em;height:2.86em;transition:250ms ease-in-out background-color}:host .upload-btn:hover{background-color:var(--background-inverse-hover)}:host .drop-zone{border:1px dashed var(--border-strong-01);background-color:transparent;padding:1.14em;border-radius:0.285em;transition:border-color 0.2s ease, background-color 0.2s ease;font-size:1em;cursor:pointer}:host .drop-zone.active{border-color:var(--border-interactive);background-color:var(--background-active)}:host .drop-zone:hover{background-color:var(--background-hover)}:host .file-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}:host .file-list .file{border-radius:3px;background-color:var(--layer-01, #F7F7F7);font-size:1em}:host .file-list .file_container{padding:var(--spacing-04) var(--spacing-05);display:flex;justify-content:space-between;align-items:center}:host .file-list .file_container_name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--text-primary, #333);font-style:normal;font-weight:400;line-height:128.571%;letter-spacing:0.16px;padding-right:var(--spacing-04)}:host .file-list .file_container_errorIcon{color:var(--text-error);margin-right:var(--spacing-03)}:host .file-list .file.withError{outline:2px solid var(--support-error)}:host .error-container{padding:var(--spacing-04) var(--spacing-05);border-top:1px solid var(--border-subtle-01);font-size:0.858em;font-style:normal;font-weight:400;color:var(--text-error)}:host .error-container_primary,:host .error-container_secondary{margin:0;padding:0}:host .error-container__secondary{color:var(--text-secondary, #515151)}:host(.disabled){pointer-events:none;opacity:0.6}:host(.disabled) .upload-btn,:host(.disabled) .drop-zone{cursor:not-allowed;background-color:var(--button-disabled-background, #ccc);color:var(--button-disabled-text, #666);border-color:var(--border-disabled, #bbb)}:host(.disabled) .remove-btn{display:none}:host([size=xs]){font-size:10px}:host([size=sm]){font-size:12px}:host([size=md]){font-size:14px}:host([size=lg]){font-size:18px}:host([size=xl]){font-size:22px}";
+
+const XvFileUploader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.filesChange = index.createEvent(this, "filesChange");
+        this.variant = XvFileUploaderVariants.BUTTON;
+        this.size = SIZE_VAR.MD;
+        this.accept = [];
+        this.maxFileSizeMB = 5;
+        this.maxFiles = 20;
+        this.multiple = true;
+        this.files = [];
+        this.loadingStates = [];
+        this.errors = [];
+        this.dragActive = false;
+        this.errorMessages = [];
+        this.onFileSelect = (event) => {
+            const input = event.target;
+            const selectedFiles = Array.from(input.files || []);
+            this.handleFiles(selectedFiles);
+        };
+        this.onDrop = (event) => {
+            var _a;
+            event.preventDefault();
+            this.dragActive = false;
+            const droppedFiles = Array.from(((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) || []);
+            this.handleFiles(droppedFiles);
+        };
+        this.handleFiles = (files) => {
+            this.files = this.validation(this.multiple ? [...this.files, ...files] : files);
+            this.filesChange.emit(this.files);
+        };
+        this.onDragOver = (event) => {
+            event.preventDefault();
+            this.dragActive = true;
+        };
+        this.onDragLeave = () => {
+            this.dragActive = false;
+        };
+    }
+    validation(files) {
+        var _a;
+        const maxSize = this.maxFileSizeMB * 1024 * 1024;
+        const seenFileNames = new Set();
+        const errorMessages = [];
+        const uniqueFiles = [];
+        for (const file of files) {
+            let error = null;
+            if (!seenFileNames.has(file.name)) {
+                seenFileNames.add(file.name);
+                uniqueFiles.push(file);
+            }
+            const extension = (_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            const isAccepted = this.accept.length === 0 ||
+                this.accept.some(type => {
+                    const normalized = type.toLowerCase().replace(/^\./, '');
+                    return normalized === extension;
+                });
+            if (!isAccepted) {
+                error = 'Unsupported file type.';
+            }
+            else if (file.size > maxSize) {
+                error = `File ${file.name} is too large.`;
+            }
+            errorMessages.push(error);
+        }
+        this.error = uniqueFiles.length > this.maxFiles
+            ? `Only ${this.maxFiles} file(s) allowed.`
+            : null;
+        this.errorMessages = errorMessages;
+        return uniqueFiles;
+    }
+    removeFile(index) {
+        this.files = this.validation([...this.files.slice(0, index), ...this.files.slice(index + 1)]);
+        this.filesChange.emit(this.files);
+        if (this.fileInput) {
+            this.fileInput.value = '';
+        }
+    }
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: '1105dfa28937f83f3508498ecf3b00b181f3f062', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled } }, this.label && index.h("label", { key: 'bb7aeb7744325dc15cee88e63672ab2f1cac48fa', class: "label" }, this.label), this.description && index.h("p", { key: '17d6076cf70f1d69b9d760992739f5f8ae571711', class: "description" }, this.description), this.variant === 'button' ? (index.h("button", { disabled: this.disabled, class: "upload-btn", onClick: () => this.fileInput.click() }, this.addText || 'Dateien auswählen')) : (index.h("div", { class: { 'drop-zone': true, active: this.dragActive }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onClick: () => this.fileInput.click() }, this.addText || 'Dateien hierher ziehen oder darauf klicken, um eine Datei auszuwählen.', ((_a = this.accept) === null || _a === void 0 ? void 0 : _a.length) > 0 && index.h("span", null, " (", this.accept.join(', '), ")"))), index.h("input", { key: 'bc25da9c977df0452fd8946b160d7b89487a5aee', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.map(type => `.${type}`).join(',') }), index.h("ul", { key: '3d2b5a6505a70c4a14004f0e0f3c6da7213b0007', class: "file-list" }, this.files.map((file, index$1) => {
+            var _a, _b;
+            return (index.h("li", { class: { file: true, withError: !!(((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index$1]) || ((_b = this.errorMessages) === null || _b === void 0 ? void 0 : _b[index$1])) } }, index.h("div", { class: "file_container" }, index.h("span", { class: "file_container_name" }, file.name), this._renderLoaderState(index$1)), this._renderError(index$1)));
+        })), this.error && (index.h("div", { key: '3918fcaf5c5660eb2a5553886e191e2969d81cb4', class: "error-container" }, index.h("p", { key: '26fcb672d89ec14e99b83dfc78712b72d9042d72', class: "error-container_primary" }, this.error)))));
+    }
+    _renderLoaderState(index$1) {
+        var _a, _b, _c;
+        const state = ((_a = this.loadingStates) === null || _a === void 0 ? void 0 : _a[index$1]) || null;
+        const errorIcon = ((_b = this.errors) === null || _b === void 0 ? void 0 : _b[index$1]) || ((_c = this.errorMessages) === null || _c === void 0 ? void 0 : _c[index$1]) ? (index.h("svg", { class: "file_container_errorIcon", width: "16", height: "16", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" }))) : null;
+        switch (state) {
+            case 'loading':
+                return (index.h(index.Fragment, null, errorIcon, index.h("xv-loader-v2", { size: SIZE_VAR.XS })));
+            case 'success':
+                return (index.h(index.Fragment, null, errorIcon, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 18 16", fill: "none" }, index.h("path", { d: "M9 16C6.125 16 3.5 14.5 2.0625 12C0.625 9.53125 0.625 6.5 2.0625 4C3.5 1.53125 6.125 0 9 0C11.8438 0 14.4688 1.53125 15.9062 4C17.3438 6.5 17.3438 9.53125 15.9062 12C14.4688 14.5 11.8438 16 9 16ZM12.5312 6.53125H12.5C12.8125 6.25 12.8125 5.78125 12.5 5.46875C12.2188 5.1875 11.75 5.1875 11.4688 5.46875L8 8.96875L6.53125 7.5C6.21875 7.1875 5.75 7.1875 5.46875 7.5C5.15625 7.78125 5.15625 8.25 5.46875 8.53125L7.46875 10.5312C7.75 10.8438 8.21875 10.8438 8.53125 10.5312L12.5312 6.53125Z", fill: "#97BF0D" }))));
+            case 'uploaded':
+            default:
+                return (index.h(index.Fragment, null, errorIcon, index.h("xv-button-v2", { variant: "ghost", size: SIZE_VAR.XS, onClick: () => this.removeFile(index$1) }, index.h("span", { slot: "icon-left" }, "\u00D7"))));
+        }
+    }
+    _renderError(index$1) {
+        var _a, _b;
+        const error = ((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index$1]) || ((_b = this.errorMessages) === null || _b === void 0 ? void 0 : _b[index$1]);
+        if (!error)
+            return;
+        if (typeof error === 'object') {
+            return (index.h("div", { class: "error-container" }, index.h("p", { class: "error-container_primary" }, error.primary), index.h("p", { class: "error-container_secondary" }, error.secondary)));
+        }
+        if (typeof error === 'string') {
+            return (index.h("div", { class: "error-container" }, index.h("p", { class: "error-container_primary" }, error)));
+        }
+        return null;
+    }
+};
+XvFileUploader.style = xvFileUploaderCss;
+
 const xvFooterCss = ".svg-assets--src--project--images--svg-sprite--youtube,.svg-assets--src--project--images--svg-sprite--xing,.svg-assets--src--project--images--svg-sprite--vorkasse,.svg-assets--src--project--images--svg-sprite--visa,.svg-assets--src--project--images--svg-sprite--sepa,.svg-assets--src--project--images--svg-sprite--paypal,.svg-assets--src--project--images--svg-sprite--mastercard,.svg-assets--src--project--images--svg-sprite--linkedin,.svg-assets--src--project--images--svg-sprite--kauf-auf-rechnung,.svg-assets--src--project--images--svg-sprite--instagram,.svg-assets--src--project--images--svg-sprite--facebook{background:url(\"https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.svg\") no-repeat}.svg-assets--src--project--images--svg-sprite--facebook{background-position:0 100%;width:32px;height:32px}.svg-assets--src--project--images--svg-sprite--instagram{background-position:14.5454545455% 100%;width:32px;height:32px}.svg-assets--src--project--images--svg-sprite--kauf-auf-rechnung{background-position:0 0;width:84px;height:58px}.svg-assets--src--project--images--svg-sprite--linkedin{background-position:29.0909090909% 100%;width:32px;height:32px}.svg-assets--src--project--images--svg-sprite--mastercard{background-position:50% 0;width:84px;height:58px}.svg-assets--src--project--images--svg-sprite--paypal{background-position:0 64.4444444444%;width:84px;height:58px}.svg-assets--src--project--images--svg-sprite--sepa{background-position:50% 64.4444444444%;width:84px;height:58px}.svg-assets--src--project--images--svg-sprite--visa{background-position:100% 0;width:84px;height:58px}.svg-assets--src--project--images--svg-sprite--vorkasse{background-position:100% 64.4444444444%;width:84px;height:58px}.svg-assets--src--project--images--svg-sprite--xing{background-position:43.6363636364% 100%;width:32px;height:32px}.svg-assets--src--project--images--svg-sprite--youtube{background-position:58.1818181818% 100%;width:32px;height:32px}.sprite-icon-beachten{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-90px 0px;width:80px;height:80px}.sprite-icon-buchen{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:0px -82px;width:80px;height:80px}.sprite-icon-direct{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-284px -99px;width:21px;height:21px}.sprite-icon-downloads{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-80px -82px;width:80px;height:80px}.sprite-icon-kino{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-305px -99px;width:21px;height:21px}.sprite-icon-kosten{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-170px 0px;width:80px;height:80px}.sprite-icon-kreation{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-170px -80px;width:80px;height:80px}.sprite-icon-logo-full{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:0px -242px;width:189px;height:32px}.sprite-icon-logo-small{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-250px -99px;width:34px;height:34px}.sprite-icon-mobile{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-326px -99px;width:21px;height:21px}.sprite-icon-online{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-347px -99px;width:21px;height:21px}.sprite-icon-partner-agma{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-250px -66px;width:88px;height:33px}.sprite-icon-partner-bvdw{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-338px -66px;width:88px;height:33px}.sprite-icon-partner-climate{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-250px 0px;width:186px;height:33px}.sprite-icon-partner-google{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:0px 0px;width:90px;height:82px}.sprite-icon-partner-microsoft{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-250px -33px;width:186px;height:33px}.sprite-icon-plakat{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-368px -99px;width:21px;height:21px}.sprite-icon-print{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-389px -99px;width:21px;height:21px}.sprite-icon-radio{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-410px -99px;width:21px;height:21px}.sprite-icon-services{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-250px -133px;width:21px;height:21px}.sprite-icon-topangebote{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-271px -133px;width:21px;height:21px}.sprite-icon-tv{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:-292px -133px;width:21px;height:21px}.sprite-icon-werbeformen{background-image:url(https://crossvertise.blob.core.windows.net/assets/images/xv-sprite.png?1739974291120);background-position:0px -162px;width:80px;height:80px}";
 
 const Xvfooter = class {
@@ -394,7 +699,7 @@ const Xvfooter = class {
         }
     }
     render() {
-        return (index.h("footer", { key: '0db6bc4ceab1da36181d8a106677ee2b4c871a5d' }, index.h("div", { key: '4ed868bc230e7dd45ebca9255827c1cfeb40e1f7', innerHTML: this.htmlContent })));
+        return (index.h("footer", { key: 'ded377d47464f3f171b99929f6517d4a2bc0be7b' }, index.h("div", { key: 'f1cfbd7b0277f073ed45a7be034bc86d60bf8880', innerHTML: this.htmlContent })));
     }
     get el() { return index.getElement(this); }
 };
@@ -434,13 +739,13 @@ const XvHeader = class {
         }
     }
     render() {
-        return (index.h("div", { key: '092ff32dfdc3a8abd588b4614cffadaf18ef73eb', id: "nav-container", class: "xv-header" }, index.h("nav", { key: 'c4981592dc5d6760999a4680cbdeeed4917bc86d', class: "navbar navbar-default navbar-fixed-top backend-force-relative" }, index.h("div", { key: '63618147868e56c9ab0939468cddd0dc0808e242', class: "container" }, index.h("div", { key: '48621f92892e24388ee689f03a841feb68867cde', class: "row" }, index.h("div", { key: '05da27c68a7db429f80034e9d629aa3bd606d46e', class: "col-sm-3 col-xs-3 col-xxs-4 no-padding-right" }, index.h("div", { key: '1935f522fff8182eaaed782d9539e1f44e508229', class: "navbar-header" }, index.h("button", { key: 'f414e8f67289291087927ee5085f1420954ca576', class: "btn btn-default navbar-toggle pull-left navbar-btn", "data-toggle": "collapse", "data-target": "#main-menu" }, index.h("i", { key: 'cc9f95cb5ab19d72a529eda9075e9d365bd46f0b', class: "fa fa-bars fa-lg", "aria-hidden": "true" })), index.h("div", { key: 'a2a33abd90814d8625e329b87281bcad03c39bc3', class: "visible-xs-inline" }, index.h("a", { key: '2e39e2221e8258bfc4f44d6b6925b8d48586264c', href: "https://www.crossvertise.com/", class: "navbar-brand" }, index.h("img", { key: '226c442a5ff9f8b97188494ba19f4f0cbca48259', src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg", alt: "Crossvertise" }))), index.h("div", { key: '9004b25c4ce743423c3e906067620b75366ab72a', class: "hidden-xs" }, index.h("a", { key: 'ed1bddedf5cbfda77426059c937ec2a91e9e2ec9', href: "https://www.crossvertise.com/", class: "navbar-brand" }, index.h("img", { key: '77c9654a8f63113d22acdf9053ed82b37c68d05b', loading: "lazy", src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg", alt: "Crossvertise" }))))), index.h("div", { key: '3999ab34c55b0efc2239c8f6d1282d9c949980fb', class: "col-sm-9 col-xs-9 col-xxs-8 no-padding-left" }, index.h("ul", { key: '434ca6ae49f9dfc28f3f8ffce7b9191326ff4919', class: "nav nav-pills nav-meta pull-right" }, index.h("li", { key: 'e8ac4591296bfcc5c0c7e5f1a6487518402512b4' }, index.h("a", { key: '9856991d8faae8ead5cec36f4df6df447f98e1d9', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, index.h("i", { key: 'a49f4de9297931b7f374d3fc19992b5654e7a9d0', class: "fa fa-user" }), index.h("i", { key: '58f91f80fcc882ab3273f838773b551a0701d21e', class: "fa fa-exchange-alt" }))), index.h("li", { key: 'a3bca2f78dd035dfbda754998f0bc907f114d08b' }, index.h("a", { key: 'f47d0d34a272956b5d1945519f78a9b6d53f27c8', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, "Kontakt"), index.h("a", { key: '99a70355c8818a67c66d75515ae5b3dd2b87ee48', href: "https://www.crossvertise.com/contact", class: "btn btn-link navbar-btn hidden-xs", style: { display: 'none' } }, "Kontakt"), index.h("a", { key: '1c82c6dc86ca379098d552ed3c10bf23b51ec7e9', class: "btn btn-default btn-link navbar-btn visible-xs hidden-xxs", href: "#" }, index.h("i", { key: 'ba7fb605ff015986524d5b38e8916e7c8846ea46', class: "fa fa-phone" }))), index.h("li", { key: '207d1e2d39abe0ecfc57b1e4e3b080a1e259d88e', class: "dropdown", id: "my-xv-menu" }, index.h("a", { key: 'a97520d3e14bbd7a9e4d65856b752410f84514e6', href: "#", class: "dropdown-toggle btn btn-default navbar-btn btn-link", "data-toggle": "dropdown" }, index.h("i", { key: '07ed030e3a41d20f3d719d164595a3aec9e700ed', class: "fa fa-user fa-lg text-success", "aria-hidden": "true" }), "\u00A0", index.h("span", { key: 'b0f1ef955d12ddace3b277af8e735b1ca79bebf5', class: "hidden-xs" }, "Mein Bereich"), index.h("span", { key: 'f6df26451c6a379b8afbaf58dfeb1fbacabfac43', class: "caret" })), index.h("ul", { key: 'e696efc4e956d57d62c1bd681572a49cd4d6d783', class: "dropdown-menu-left dropdown-menu navbar-myxv" }, index.h("li", { key: '45dc4ddcb0b72d85e937476f5b99c20b142ed1c1' }, index.h("a", { key: 'cd46060a5b67074979cf2b03ded35cca959c4338', href: "#" }, index.h("i", { key: '967e059a1db803ba7394b2142ebf8220081dac3f', class: "fa fa-tachometer-alt fa-fw" }), "\u00A0Cockpitfunktionen\u00A0", index.h("i", { key: '83ab26e47b8f837bcfea1a4986384c07747f39c7', class: "fa fa-caret-down" }))), index.h("li", { key: '2be9da522fbe82772a448fd257ac9fd62614ab5b' }, index.h("a", { key: 'a45b735877d449df5147c9a21e1964dd352ea052', href: "#" }, index.h("i", { key: '4b7ffab0fde8dc7fea76264e1103538d72a22b93', class: "fa fa-cubes" }), "\u00A0Entit\u00E4ten\u00A0", index.h("i", { key: '06420beb12c2704067273fa011d95148c612604b', class: "fa fa-caret-down" }))), index.h("li", { key: '26c7b8be4bace85b9eda242f5927ddb9b4c7f3b7', role: "separator", class: "divider" }), index.h("li", { key: '4f31616186edfbbdad11246fed6779c84d9ae2e0' }, index.h("a", { key: '16edf08f7ba8acde9c94212573be770c76b1eed3', href: "#" }, index.h("i", { key: 'b2044b2cf5063653498883073a3ad5efde2db954', class: "fa fa-user" }), "\u00A0Mein Crossvertise\u00A0", index.h("span", { key: 'cee6cef1f81beeaa5d28463d56155d05cc7b5f87', class: "badge" }, "0"), index.h("i", { key: '5e578d9000ffb98011d0062cdf83043bc4b5169c', class: "fa fa-caret-down" }))), index.h("li", { key: 'f418159e0c6a8806635501c2d7baad966c851e6d' }, index.h("a", { key: 'cee19cd5bcbaf74b0c80a2223502dcd8bc5371a1', href: "https://www.crossvertise.com/de-de/mycrossvertise/account/logoff?returnUrl=https%3A%2F%2Fwww.crossvertise.com" }, index.h("i", { key: 'd00b0b21de34744023a54c7cf7e6a574f34821b1', class: "fa fa-sign-out-alt fa-fw", "aria-hidden": "true" }), "\u00A0Logout")))), index.h("li", { key: '333cc819625326849f52013181128039c31826cc', class: "visible-sm-block visible-xs-block hidden-xxs" }, index.h("a", { key: '0591a5a4a2f4e1ca5c5fd6d49552dbdc339d0abf', class: "btn btn-default navbar-btn btn-link", "data-toggle": "collapse", "data-target": "#search-collapse" }, index.h("i", { key: '5be0f7d16d126ce5231f715d72a433c88849473f', class: "fa fa-search", "aria-hidden": "true" }))), index.h("li", { key: 'd1116671d564f5ac49ab15699eb0fa8ffaadbe8d', class: "hidden-xs hidden-sm" }, index.h("a", { key: '2004ef3c2c263310eb9d48349656001008b9e87a', role: "button", onClick: this.openLoginModal, class: "btn btn-default navbar-btn btn-link" }, index.h("i", { key: 'faa40979c470610be84536c2de5ea9965e185c67', class: "fa fa-user fa-lg", "aria-hidden": "true" }), index.h("span", { key: 'de763e7c4931dfd2277c463f6a138e0ff832b6be' }, "Login"))), index.h("xv-login-modal", { key: '4c12a1af61cc8434d6c481a718c20b343db301bb', visible: this.showLoginModal, onClose: this.closeLoginModal }), index.h("li", { key: 'd65bbbe4ac0457f621e824bb6bd5447546bb5819', class: "hidden-xs" }, index.h("a", { key: '340e9428ddc74d380981f9c90056cb7cdac7c982', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/register" }, index.h("span", { key: '8aafb94c374e0969fa96b7ea8cb22785369560f9' }, "Registrieren"))), index.h("li", { key: '0ed4c4aca90415ca106adf379d923909e82d49a2', class: "navbar-divider hidden-xs" }), index.h("li", { key: '852292a5ea933dd3e4bf9b34e6e3f853ca723eb6' }, index.h("a", { key: 'cf11c35ae760ef3909953289640ff955acd409aa', class: "btn btn-success navbar-btn", href: "https://market.crossvertise.com/de-de/mycrossvertise/shoppingcart/activecart" }, index.h("span", { key: '531ef0b6c4134b7b15bbbd2e6c148f7be9c4edf4', class: "xv-font-icon-warenkorb fa-lg fa-fw", "aria-hidden": "true" }), index.h("span", { key: 'b686810eae7cbb0c7c1ea9ee997ab31c68c678d1', class: "hidden-xs hidden-sm" }, "\u00A0Warenkorb\u00A0"), index.h("span", { key: '325c83891e42b1c62ba46c53d1c49aa7c7fb9552', class: "badge badge-success" }, "0"))))))), index.h("div", { key: '0acef5ade9aefc444c5a3c6da2e10e95bf3080b9', class: "collapse hidden-md hidden-lg", id: "search-collapse" }, index.h("div", { key: '4ab01a657a0f6ea3b685b727fe0c3702f7273b1a', class: "container" }, index.h("form", { key: '946e797352ab2673b234d8c5e9c238882b9efc4c', action: "https://market.crossvertise.com/de-de/media/search", class: "navbar-form", method: "get", role: "search" }, index.h("div", { key: '3920252d9e5855f014748d672fdc5b9080182b72', class: "input-group" }, index.h("input", { key: '96f8aa465ebbeb7fc1e7e718f475618b94a60753', class: "form-control", name: "Q", placeholder: "Suche", type: "text", autocomplete: "off" }), index.h("span", { key: '8aae5ca4431896964ef5019f7403f8bdbab313e5', class: "input-group-btn force-full-width" }, index.h("button", { key: '5b572fa6663314c19bb2fc7952be2845d7fbbb2a', class: "btn btn-default search-addon", type: "submit" }, index.h("i", { key: '4a6727d827692c657761c5d00b53dacc4308ee00', class: "fa fa-search", "aria-hidden": "true" })))))))), index.h("div", { key: '6201355010079566c7e3c20fb4ef1f1f77bd5a45', innerHTML: this.htmlContent })));
+        return (index.h("div", { key: 'e23865373ad9ea2ad72b911763532a825f606bc5', id: "nav-container", class: "xv-header" }, index.h("nav", { key: '7a621ccedbbcea7752e8f0535718e714ac3b87a7', class: "navbar navbar-default navbar-fixed-top backend-force-relative" }, index.h("div", { key: '5d48c595a601eb4aecbf20acf7bad412173b0c43', class: "container" }, index.h("div", { key: '495a0c316a6eaf585704e5d8c7fc1ad6a98ef0a2', class: "row" }, index.h("div", { key: 'ae0135513b1afd15a8a732b433226ea4c2e5fb34', class: "col-sm-3 col-xs-3 col-xxs-4 no-padding-right" }, index.h("div", { key: '941dcc71efd9fcd591fc37d3b79658a5895c0cf5', class: "navbar-header" }, index.h("button", { key: '05422376a774a3fb2bad4f3d99260c14c9591ac3', class: "btn btn-default navbar-toggle pull-left navbar-btn", "data-toggle": "collapse", "data-target": "#main-menu" }, index.h("i", { key: '2724965e90ff27350749d35e4f334c896222adbd', class: "fa fa-bars fa-lg", "aria-hidden": "true" })), index.h("div", { key: '540e61643a05c89e92739af9e5639dae1c7a3a89', class: "visible-xs-inline" }, index.h("a", { key: 'a90967bfd343bfa84310f439e869d5cf6fd7b245', href: "https://www.crossvertise.com/", class: "navbar-brand" }, index.h("img", { key: '9a4a05061aab1c1b9f47f3c8a5f1d233f2d0585f', src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg", alt: "Crossvertise" }))), index.h("div", { key: '6be821a687b33ff2ec170722ced74f916380f351', class: "hidden-xs" }, index.h("a", { key: '30494848524505dfd30b205d781628ecd76d7133', href: "https://www.crossvertise.com/", class: "navbar-brand" }, index.h("img", { key: '3d295824a957db5789a0712bcce707679a0b61eb', loading: "lazy", src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg", alt: "Crossvertise" }))))), index.h("div", { key: 'ccda27c0fc15d51d8bb36a0edc6449a2a0ad96ab', class: "col-sm-9 col-xs-9 col-xxs-8 no-padding-left" }, index.h("ul", { key: '11cb71d231254db9f1c5c53695aae2e721da4b20', class: "nav nav-pills nav-meta pull-right" }, index.h("li", { key: '50c5f81db2f1f0e85c5f6bbf9a253465d9e84b35' }, index.h("a", { key: '79bc7f4274fc938a35e38682ba0f65fccdfb4b03', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, index.h("i", { key: '21710845d33579fab0dc70d063b5d872387378c9', class: "fa fa-user" }), index.h("i", { key: 'c6061afb38e2b2ed44c03ce4e910d9d2b5801a17', class: "fa fa-exchange-alt" }))), index.h("li", { key: '49348a283e4ede773307681345099e57207fcdda' }, index.h("a", { key: '290fd16b3aafec374b449d5050a19f606894b1d7', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, "Kontakt"), index.h("a", { key: 'b51214e7831f07a03ac866bda5266c8d525fe558', href: "https://www.crossvertise.com/contact", class: "btn btn-link navbar-btn hidden-xs", style: { display: 'none' } }, "Kontakt"), index.h("a", { key: '31fd0c8390e09334e1996330efa04c9899620cc6', class: "btn btn-default btn-link navbar-btn visible-xs hidden-xxs", href: "#" }, index.h("i", { key: '17684ce738751f491369695434ab9183008a9b0d', class: "fa fa-phone" }))), index.h("li", { key: '38ece1d7260b8d73c7e48e3bd3b6ac29d389b88b', class: "dropdown", id: "my-xv-menu" }, index.h("a", { key: '70ba7716137f93f52ea952ea401fb634a85bd672', href: "#", class: "dropdown-toggle btn btn-default navbar-btn btn-link", "data-toggle": "dropdown" }, index.h("i", { key: 'bba83584c110f747aeb7e1f64d1010eb76588e93', class: "fa fa-user fa-lg text-success", "aria-hidden": "true" }), "\u00A0", index.h("span", { key: '6438bc959dfd6245859425f8e325127f869a4a8a', class: "hidden-xs" }, "Mein Bereich"), index.h("span", { key: '48b03adc129165116ac53166508b7d85a50d9110', class: "caret" })), index.h("ul", { key: '41a1e53662bc7c4b01b4dc50ed498b904d3e1fe0', class: "dropdown-menu-left dropdown-menu navbar-myxv" }, index.h("li", { key: 'f74892854e52d7109b3f40aeb9f0df75db7df6b9' }, index.h("a", { key: '0b41a267d437bab5d1c721942901c90c2b5f544c', href: "#" }, index.h("i", { key: '8824476df69bb5efeed55b742c2bf660711e9946', class: "fa fa-tachometer-alt fa-fw" }), "\u00A0Cockpitfunktionen\u00A0", index.h("i", { key: 'eea0470f9510c6bb4be719edb4592511fbe9db2f', class: "fa fa-caret-down" }))), index.h("li", { key: '8db405011c404f6f62ca6f849fd1a5c7fb6130b5' }, index.h("a", { key: '2a07deb167ebeb88396424325057ded6a5d3bb79', href: "#" }, index.h("i", { key: 'c278dfc51bb82626032dda352ec0fef4fe292d0e', class: "fa fa-cubes" }), "\u00A0Entit\u00E4ten\u00A0", index.h("i", { key: 'df99378caeca61ff7fc34e0e5ba4ef300945c91b', class: "fa fa-caret-down" }))), index.h("li", { key: 'ac30718411da279c57fadadc62a6cd669a34d715', role: "separator", class: "divider" }), index.h("li", { key: '869b0c629487677b67c713ca73651755cbf6f383' }, index.h("a", { key: 'ac460c523ce2202ba08b7de10bdac67b48912dd6', href: "#" }, index.h("i", { key: 'feda1a2c2999dead3b2b3eb834f8b51cc63dd991', class: "fa fa-user" }), "\u00A0Mein Crossvertise\u00A0", index.h("span", { key: 'db19052087c8efff2cf408629775636aa1980250', class: "badge" }, "0"), index.h("i", { key: '5225f5b72738346c19fb1613950410bca93d8d2a', class: "fa fa-caret-down" }))), index.h("li", { key: '5590a102180218c69e065cc57794b835a5f224d1' }, index.h("a", { key: '316a47a72b47da1f68fd1f717f7246740f25a6a8', href: "https://www.crossvertise.com/de-de/mycrossvertise/account/logoff?returnUrl=https%3A%2F%2Fwww.crossvertise.com" }, index.h("i", { key: 'bb8ccc79300a525d4f8194d2fd00abb2581db9f6', class: "fa fa-sign-out-alt fa-fw", "aria-hidden": "true" }), "\u00A0Logout")))), index.h("li", { key: 'd0ba91f2c496398d5aa5dbb1117d6309e8f1e606', class: "visible-sm-block visible-xs-block hidden-xxs" }, index.h("a", { key: '22b74c5543d27d32c2d02e351b7c21e16b9ce78c', class: "btn btn-default navbar-btn btn-link", "data-toggle": "collapse", "data-target": "#search-collapse" }, index.h("i", { key: '01b86811a768fc2a19d72cb4f17c6a9785829ab0', class: "fa fa-search", "aria-hidden": "true" }))), index.h("li", { key: 'c0d72f6ddd76f3dfa9d96f12118d0a73241753e8', class: "hidden-xs hidden-sm" }, index.h("a", { key: '71a09c453ede7a36bc6b8fc5fa79d1e608a16cfb', role: "button", onClick: this.openLoginModal, class: "btn btn-default navbar-btn btn-link" }, index.h("i", { key: '74142f2bd13d8de2d85fc1e82377407152d14c92', class: "fa fa-user fa-lg", "aria-hidden": "true" }), index.h("span", { key: '1b5116849bca8e05dc349f8554b1b552c88369dc' }, "Login"))), index.h("xv-login-modal", { key: 'cb142ee870252f3633b90b4e9abcd05f9f7e2df7', visible: this.showLoginModal, onClose: this.closeLoginModal }), index.h("li", { key: 'bb2855d3c34440d8fb379624ddd5acda1a8df347', class: "hidden-xs" }, index.h("a", { key: 'ad31c42ae4f0cfffa369b8c6471f89dc21bbbfa8', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/register" }, index.h("span", { key: '6a9faaac3cfe6211636be703df13a104762e2fb2' }, "Registrieren"))), index.h("li", { key: '2211f6d0672a708956f3cc615bf0c7ee7b3ce1ec', class: "navbar-divider hidden-xs" }), index.h("li", { key: '252bdabd42167b13a7e338c6554dc62f6dbf5156' }, index.h("a", { key: 'e4e3b75d0be8af70ca5e7fe64e3ee2b21eff072b', class: "btn btn-success navbar-btn", href: "https://market.crossvertise.com/de-de/mycrossvertise/shoppingcart/activecart" }, index.h("span", { key: 'f5c1b26dd26a7baf67cfccfe4817aaa7b9cf0c9d', class: "xv-font-icon-warenkorb fa-lg fa-fw", "aria-hidden": "true" }), index.h("span", { key: '8e4e16628d7662e46bb92817e430471557390432', class: "hidden-xs hidden-sm" }, "\u00A0Warenkorb\u00A0"), index.h("span", { key: 'da18423a0585a0298ec080cb2526c1104f46e907', class: "badge badge-success" }, "0"))))))), index.h("div", { key: '282355ac46855e03ae8a3d64bb4eaf62c86e77ca', class: "collapse hidden-md hidden-lg", id: "search-collapse" }, index.h("div", { key: '5007ccb71a3ff29b7325f0fcf8bce09eb93f603c', class: "container" }, index.h("form", { key: '55627dcc8b419e24b65cd6f6ad5e4fdde1a368d0', action: "https://market.crossvertise.com/de-de/media/search", class: "navbar-form", method: "get", role: "search" }, index.h("div", { key: '0d39c0d7cd9b098f6d5ab5f1f1c3418128753816', class: "input-group" }, index.h("input", { key: 'fb554f8ba5df87ec3fe372c9834497accafdd451', class: "form-control", name: "Q", placeholder: "Suche", type: "text", autocomplete: "off" }), index.h("span", { key: '353cc24679f1092fea80f7c033525d8291ec8d0b', class: "input-group-btn force-full-width" }, index.h("button", { key: 'bbde50921f67baa753a65540f544bfcae80379c6', class: "btn btn-default search-addon", type: "submit" }, index.h("i", { key: '17749c3879831e532d36a08cc7c1ef43d72e5591', class: "fa fa-search", "aria-hidden": "true" })))))))), index.h("div", { key: '37675efdf9ad133373d0b4053d1007b92b9be622', innerHTML: this.htmlContent })));
     }
     get el() { return index.getElement(this); }
 };
 XvHeader.style = xvHeaderCss;
 
-const xvLinkCss = ":host{font-family:var(--ff-body, inherit)}:host(.xv-link_inline){display:inline-block}:host(.xv-link_inline) .xv-link{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}:host(.xv-link_standalone){display:block}:host(.xv-link_standalone) .xv-link{display:block;text-decoration-line:none}:host(.xv-link_ghost) .xv-link{color:inherit;text-decoration:none}.xv-link{display:inline-flex;gap:8px;align-items:center;color:var(--link-primary);font-family:var(--ff-body);font-style:normal;font-weight:400;transition:color 200ms ease-in-out}.xv-link:active{color:var(--text-primary)}.xv-link:visited{color:var(--link-visted)}.xv-link:hover{color:var(--link-primary-hover);cursor:pointer}.xv-link:disabled,.xv-link_disabled,.xv-link::part(disabled){color:var(--text-disabled);pointer-events:none;cursor:initial}.xv-link.sm{font-size:var(--fz-sm);line-height:137.5%}.xv-link.md{font-size:var(--fz-md);line-height:128.571%}.xv-link.lg{font-size:var(--fz-lg);line-height:133.333%}";
+const xvLinkCss = ":host{font-family:var(--ff-body, inherit)}:host(.xv-link_inline){display:inline-block}:host(.xv-link_inline) .xv-link{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}:host(.xv-link_standalone){display:block}:host(.xv-link_standalone) .xv-link{display:block;text-decoration-line:none}:host(.xv-link_ghost) .xv-link{display:contents;color:inherit;text-decoration:none}.xv-link{display:inline-flex;gap:8px;align-items:center;color:var(--link-primary);font-family:var(--ff-body);font-style:normal;font-weight:400;transition:color 200ms ease-in-out}.xv-link:active{color:var(--text-primary)}.xv-link:visited{color:var(--link-visted)}.xv-link:hover{color:var(--link-primary-hover);cursor:pointer}.xv-link:disabled,.xv-link_disabled,.xv-link::part(disabled){color:var(--text-disabled);pointer-events:none;cursor:initial}.xv-link.sm{font-size:var(--fz-sm);line-height:137.5%}.xv-link.md{font-size:var(--fz-md);line-height:128.571%}.xv-link.lg{font-size:var(--fz-lg);line-height:133.333%}";
 
 const XvLink = class {
     constructor(hostRef) {
@@ -456,7 +761,7 @@ const XvLink = class {
         e.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: 'e9c006db5f3b72c48b8a6c3597ee46e2451e156b', class: `xv-link_${this.variant}` }, index.h("a", { key: 'a534ebd8dce32cf261e8b5354d93d58064136ad8', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, index.h("slot", { key: '582553af67dd32e8c83d28a4488bb5fffbb2a064', name: "icon-left" }), index.h("slot", { key: 'ca4705fd7ead40197d019c451d6c3cf1cdacfde1' }), index.h("slot", { key: 'c9433d24cc3e6b5acdb8645d4816d93375df7a43', name: "icon-right" }))));
+        return (index.h(index.Host, { key: '8abd4142d08b9a55fe67a2c588655728e25dd159', class: `xv-link_${this.variant}` }, index.h("a", { key: 'b6fec7e701adf7a5caef4ae0610f6d83b2c08617', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, index.h("slot", { key: '0a68b77769f8681dfc44782f9e5ea2db1a8a7d6f', name: "icon-left" }), index.h("slot", { key: '3ecd19fef95c96c283f260a5ef5dea734bf318bd' }), index.h("slot", { key: '8f21cd979ccfc5e6e890092b6ebea3b0bd067f1d', name: "icon-right" }))));
     }
 };
 XvLink.style = xvLinkCss;
@@ -632,7 +937,7 @@ const XvModal = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'ef15c655a4e3e5020de233c8627dbefc62ed9e56', role: "dialog", size: this.size, id: this.el.id }, index.h("slot", { key: '55950e9d76cd33495f14eb159d998dc11277c0f9', name: "trigger", onSlotchange: this.setupTrigger }), index.h("div", { key: 'f3e941dec65ec9a7093dc88a82024b6d4db6324a', class: { backdrop: true }, onClick: this.onBackdropClick }, index.h("div", { key: '48142d79b4de6d1aa146c8c8033a0cfbe9e166da', class: "modal" }, index.h("button", { key: '6e9501a2b6f69755d93740ce334bfc4a5ea78f60', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), index.h("div", { key: '9aadbd409cace25b8e8e8bead47b0610d756e1c4', class: "modal_header" }, index.h("slot", { key: '32d0f7b10974856e3806e82ffc8d971b3b25e81b', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && index.h("h5", { key: '8e5ede7c5f8488adcb42a61f972562c8214aebae', class: "modal_header__title" }, this.el.title))), index.h("div", { key: 'd00616f0a7865d301a0b090dd91363bde4128867', class: { 'modal_content': true, overflow: this.overflow } }, index.h("slot", { key: 'd263d339bedadd0557e386e22c4526b98e446027' })), index.h("div", { key: 'cf96d19157c63b68abc85e95042a9619accd26fd', class: "modal_footer" }, index.h("slot", { key: '0b41d59fecf287e452d10aa6a6f4ab1a6e07f77f', name: "footer" }))))));
+        return (index.h(index.Host, { key: '227d7c8432c263024eb14ebcc906d45d01845143', role: "dialog", size: this.size, id: this.el.id }, index.h("slot", { key: 'e9c1c83f4d5e3a1ddfa765b17129ea13dce96582', name: "trigger", onSlotchange: this.setupTrigger }), index.h("div", { key: '3a5b9b557925edb299ce386e289f60d87cbf9341', class: { backdrop: true }, onClick: this.onBackdropClick }, index.h("div", { key: '77e793861e33d77ca59c5f3bc89e1a6d83b8ba38', class: "modal" }, index.h("button", { key: '5534a1306535847efa5c77d393323ca93d9b33f3', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), index.h("div", { key: 'c3dee869a2be046d2e216730fc122da92c21920d', class: "modal_header" }, index.h("slot", { key: '42c0d657d261841a8fcb6461a079e06b5b1d2fad', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && index.h("h5", { key: '48aae8d010464e9a06c92699ad9e1dfe5feb0e04', class: "modal_header__title" }, this.el.title))), index.h("div", { key: '4cb0e7c1fed672df57dc86e4ebc53859d9695d0d', class: { 'modal_content': true, overflow: this.overflow } }, index.h("slot", { key: '1df966114775ee209cab1311350cb9d005abae0c' })), index.h("div", { key: 'fc246530cac2cedb24a3b8be81e710cecd7b18fc', class: "modal_footer" }, index.h("slot", { key: '5b00a76e35824e041d8f891ca4e40ec27d72290f', name: "footer" }))))));
     }
     disconnectedCallback() {
         this.removeTriggerListener();
@@ -649,7 +954,7 @@ var NOTIFICATION_VARIANTS;
     NOTIFICATION_VARIANTS["ERROR"] = "error";
 })(NOTIFICATION_VARIANTS || (NOTIFICATION_VARIANTS = {}));
 
-const xvNotificationCss = ":host{--notification-icon-size:20px;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;border-radius:3px;padding:var(--gap-md, 16px);column-gap:var(--gap-md, 16px);border:1px solid}:host .content{flex:1;text-align:left;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128%;letter-spacing:0.16px;display:flex;flex-direction:column;row-gap:var(--spacing-06, 24px)}:host .content_title{text-align:left;margin:0;padding:0;font-weight:700;line-height:var(--notification-icon-size)}:host .icon{width:var(--notification-icon-size);height:var(--notification-icon-size);font-size:var(--notification-icon-size);fill:currentColor}:host .close{--notification-close-size:16px;background-color:transparent;border:none;width:var(--notification-close-size);height:var(--notification-close-size);min-width:var(--notification-close-size);min-height:var(--notification-close-size);position:relative;padding:0;margin:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:300ms ease-in-out opacity}:host .close:after,:host .close:before{content:\"\";position:absolute;top:calc(50% - var(--notification-close-size) / 2);left:calc(50% - 1px);display:inline-block;width:2px;height:90%;background-color:var(--button-tertiary, #273435)}:host .close:after{transform:rotate(45deg)}:host .close:before{transform:rotate(-45deg)}:host .close:hover{opacity:0.7}:host .close:active{opacity:0.3}:host ::slotted([slot=footer]){margin:0;padding:0}:host([type=info]){border-color:var(--support-info, #1B87B2);background-color:var(--support-info-background, #E2F5F8)}:host([type=info]) .icon{color:var(--support-info, #1B87B2)}:host([type=success]){border-color:var(--support-success, #97BF0D);background-color:var(--support-success-background, #F4F7E5)}:host([type=success]) .icon{color:var(--support-success, #1B87B2)}:host([type=warning]){border-color:var(--support-warning, #FF7F04);background-color:var(--support-warning-backround, #FFF9C2)}:host([type=warning]) .icon{color:var(--support-warning, #FF7F04)}:host([type=error]){border-color:var(--support-error, #F1290E);background-color:var(--support-error-background, #FEE9E8)}:host([type=error]) .icon{color:var(--support-error, #F1290E)}";
+const xvNotificationCss = ":host{--notification-icon-size:20px;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;border-radius:3px;padding:var(--gap-md, 16px);column-gap:var(--gap-md, 16px);border:1px solid}:host .content{flex:1;text-align:left;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128%;letter-spacing:0.16px;display:flex;flex-direction:column;row-gap:var(--spacing-06, 24px);word-break:break-all}:host .content_title{text-align:left;margin:0;padding:0;font-weight:700;line-height:var(--notification-icon-size)}:host .icon{width:var(--notification-icon-size);height:var(--notification-icon-size);font-size:var(--notification-icon-size);fill:currentColor}:host .close{--notification-close-size:16px;background-color:transparent;border:none;width:var(--notification-close-size);height:var(--notification-close-size);min-width:var(--notification-close-size);min-height:var(--notification-close-size);position:relative;padding:0;margin:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:300ms ease-in-out opacity}:host .close:after,:host .close:before{content:\"\";position:absolute;top:calc(50% - var(--notification-close-size) / 2);left:calc(50% - 1px);display:inline-block;width:2px;height:90%;background-color:var(--button-tertiary, #273435)}:host .close:after{transform:rotate(45deg)}:host .close:before{transform:rotate(-45deg)}:host .close:hover{opacity:0.7}:host .close:active{opacity:0.3}:host ::slotted([slot=footer]){margin:0;padding:0}:host([type=info]){border-color:var(--support-info, #1B87B2);background-color:var(--support-info-background, #E2F5F8)}:host([type=info]) .icon{color:var(--support-info, #1B87B2)}:host([type=success]){border-color:var(--support-success, #97BF0D);background-color:var(--support-success-background, #F4F7E5)}:host([type=success]) .icon{color:var(--support-success, #1B87B2)}:host([type=warning]){border-color:var(--support-warning, #FF7F04);background-color:var(--support-warning-backround, #FFF9C2)}:host([type=warning]) .icon{color:var(--support-warning, #FF7F04)}:host([type=error]){border-color:var(--support-error, #F1290E);background-color:var(--support-error-background, #FEE9E8)}:host([type=error]) .icon{color:var(--support-error, #F1290E)}";
 
 const XvNotification = class {
     constructor(hostRef) {
@@ -678,13 +983,67 @@ const XvNotification = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '4600f7f3594935680e104bad02663f288460b39b', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), index.h("div", { key: 'ffc9842337dcaba886a58fc80d96810c33a47f76', class: "content" }, index.h("div", { key: '1236432271bf6cb93c5bfbb0614d87c0d1fb183b', class: "content_wrapper" }, this.el.title && index.h("h5", { key: '10cbc18d55fe9842e31a65b814015eb66a4641af', class: "content_title" }, this.el.title), index.h("slot", { key: 'e127dfc35e3e6542c417ef27ab01515fd83af9f2' })), index.h("slot", { key: 'beb7103db214900e7833187cf6c9ee3dffc18b03', name: "footer" })), this.dismissible && index.h("button", { key: '791ef115a1739271ec9d87e145691ecaf18b2498', class: "close", onClick: this.closeHandle })));
+        return (index.h(index.Host, { key: '828674420130a41adc1c21b7dac6ba7795142871', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), index.h("div", { key: '2f863367c6952b1974607f577d33d69a572b83ac', class: "content" }, index.h("div", { key: 'df968f2dc944bf7b8cad543fb64a3c9d124a11ff', class: "content_wrapper" }, this.el.title && index.h("h5", { key: '200f8de5f706f7b4318cb94b9966a6171d56e2f5', class: "content_title" }, this.el.title), index.h("slot", { key: '76e93f53912a25d9240b82434e05466bf16902b3' })), index.h("slot", { key: '0403b90c0e139d214356519a33c0c546e03953a0', name: "footer" })), this.dismissible && index.h("button", { key: '70f8219f0b7c2dc897d0bb36ea5c7c7fb7aa3288', class: "close", onClick: this.closeHandle })));
     }
     static get assetsDirs() { return ["xv-notification/icons"]; }
     get el() { return index.getElement(this); }
 };
 XvNotification.style = xvNotificationCss;
 
+const xvNumberInputCss = ":host{display:inline-block;text-align:left}:host .control_label{display:block;margin-bottom:var(--spacing-03);color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-sm, 12px);font-style:normal;font-weight:700;line-height:var(--fz-md);letter-spacing:0.32px}:host .control_input{display:flex;border:1px solid var(--border-subtle-01);outline:2px solid transparent;background-color:transparent;border-radius:3px;transition:250ms ease-in-out border-color, 250ms ease-in-out outline-color}:host .control_input:hover{border-color:var(--border-subtle-selected-01)}:host .control_input:focus-within{outline-color:var(--focus)}:host .control_input.error{outline-color:var(--support-error)}:host .control_input.readonly{border-radius:0;border-top-width:0;border-left-width:0;border-right-width:0;outline-color:transparent}:host .control_input input[type=number]{flex:1;border:none;outline:none;-moz-appearance:textfield;background-color:transparent;margin:0;padding-block:0;padding-inline:var(--spacing-05);box-sizing:border-box;color:var(--text-primary);min-width:20px;font-style:normal;font-weight:400;letter-spacing:0.16px}:host .control_input input[type=number]::-webkit-inner-spin-button,:host .control_input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host .control_input__icons{display:inline-flex;align-items:stretch;column-gap:2px}:host .control_input__icons .status-icon{display:inline-flex;align-items:center;align-self:center;font-size:1.35em}:host .control_input__icons .status-icon.error{background-color:var(--support-error);color:white;width:16px;height:16px;border-radius:8px;font-size:12px;font-weight:bold;align-items:center;justify-content:center}:host .control_input__icons .status-icon.warning{color:var(--support-warning)}:host .control_input__icons hr{border:none;outline:none;width:2px;height:60%;align-self:center;background-color:var(--border-subtle-01);display:inline-flex}:host .message{margin:var(--spacing-02) 0 0;color:var(--text-helper, #646464);font-size:var(--fz-sm, 12px);font-style:normal;font-weight:400;line-height:var(--fz-md, 16px);letter-spacing:0.32px}:host .message.error{color:var(--text-error)}:host .message.warning{color:var(--text-secondary, #515151)}:host(.disabled){cursor:not-allowed}:host(.disabled) .control_label,:host(.disabled) .control_input input[type=number],:host(.disabled) .control_input input[type=number]::placeholder,:host(.disabled) .message:not(.error){color:var(--text-disabled);cursor:not-allowed}:host(.disabled) .control_input__icons,:host(.disabled) .message.error{opacity:0.5;cursor:not-allowed}:host([block]){display:block}";
+
+const XvNumberInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.step = 10;
+        this.loading = false;
+        this.size = SIZE_VAR.MD;
+        this.increment = () => {
+            const newValue = (this.value || 0) + this.step;
+            if (this.max !== undefined && newValue > this.max)
+                return;
+            this.setValue(newValue);
+        };
+        this.decrement = () => {
+            const newValue = (this.value || 0) - this.step;
+            if (this.min !== undefined && newValue < this.min)
+                return;
+            this.setValue(newValue);
+        };
+        this.handleInput = (event) => {
+            const input = event.target;
+            const num = parseFloat(input.value) || 0;
+            if (isNaN(num))
+                return;
+            this.setValue(num);
+        };
+    }
+    setValue(value) {
+        var _a;
+        this.value = value;
+        this.internals.setFormValue((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString());
+        this.valueChange.emit(this.value);
+    }
+    render() {
+        return (index.h(index.Host, { key: '9e9d338c9ff5f2191a7b93d75473455fcd0595e3', class: { disabled: !!this.disabled } }, index.h("label", { key: '94743e62549da23b3c63280d9a228bb7bab4dc86', class: "control" }, this.label && index.h("span", { key: 'a7feadfdb33ac4305a58b0634fafdfab56293a1e', class: "control_label" }, this.label), index.h("div", { key: '7e87334966533108284fad892e219c3d6e320da0', class: {
+                'control_input': true,
+                readonly: !!this.readonly,
+                error: !!this.error,
+                warning: !!this.warning
+            } }, index.h("input", { key: 'b241be77f4f61110fc00911bacf58f493a6dc648', type: "number", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value }), index.h("div", { key: '4c13d73fa8ad210f1561ca9d924dc37b5d25f058', class: "control_input__icons" }, this.loading ? (index.h("xv-loader-v2", { size: SIZE_VAR.XS })) : !!this.error ? (index.h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (index.h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, index.h("xv-button-v2", { key: 'ded5d2e74f4ff8544d025ce2862422ac69f54f9b', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, index.h("span", { key: '84bebcdd58a31c59d52685c589361532033074ba', slot: "icon-left", class: "status-icon" }, "\u2212")), index.h("hr", { key: 'ec34eb763fd84994fd3dde49dbb53c5472ff46ed' }), index.h("xv-button-v2", { key: '2275bbefc228ab1147c002c204b93da04d2b001e', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, index.h("span", { key: 'c64d970edf867832d6ee74354df55aa1cf151007', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && index.h("p", { key: 'b463bea86f2fa93c89072898796d03a9cd6c03bd', class: "message" }, this.helper), typeof this.error === 'string' ? (index.h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (index.h("p", { class: "message warning" }, this.warning)) : null));
+    }
+    static get formAssociated() { return true; }
+};
+XvNumberInput.style = xvNumberInputCss;
+
 const xvOverflowMenuCss = ":host{--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px;display:inline-flex;flex-direction:column;position:relative}:host .btn{display:inline-flex;align-items:center;justify-content:center;width:var(--overflow-menu-size);height:var(--overflow-menu-size);background-color:transparent;border:1px solid transparent;transition:300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;font-size:calc(var(--overflow-menu-size) / 2);color:var(--icon-primary);border-radius:5%;margin:0;padding:0}:host .btn:hover{cursor:pointer;color:var(--link-primary-hover);background-color:var(--background-hover)}:host .btn:active{background-color:var(--background-active);color:var(--icon-disabled)}:host .btn:disabled{background-color:transparent;opacity:0.5;cursor:not-allowed}:host .list{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background-color:var(--layer-01);position:absolute;top:100%;left:0;max-height:0;overflow:hidden;border-radius:3px;transition:200ms ease-in-out max-height, 100ms ease box-shadow;min-width:128px;max-width:50vw;width:max-content}:host .list.open{overflow:visible}:host .list ::slotted(xv-overflow-menu-v2-item){padding:var(--overflow-menu-item-padding)}:host .list.position-right{left:initial;right:0;border-top-right-radius:0}:host .list.position-left{border-top-left-radius:0}:host([size=xs]){--overflow-menu-item-padding:4px 16px;--overflow-menu-size:24px}:host([size=sm]){--overflow-menu-size:32px;--overflow-menu-item-padding:7px 16px}:host([size=md]){--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px}:host([size=lg]){--overflow-menu-size:48px;--overflow-menu-item-padding:16px}:host([size=xl]){--overflow-menu-size:56px;--overflow-menu-item-padding:16px}:host([open]) .btn{border-bottom-left-radius:0;border-bottom-right-radius:0;background-color:var(--layer-01);box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1);z-index:1}:host([open]) .list{max-height:500px;z-index:2;box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1)}";
 
 const XvOverflowMenu = class {
@@ -737,7 +1096,7 @@ const XvOverflowMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b375598d3169590a82225cc37f52c573bee30c9f', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, index.h("button", { key: '693ff71c2c32b5eafe680701a519560d36aadf31', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, index.h("svg", { key: '23067a22dfbab57f4840bb31a46e18b311b58316', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, index.h("path", { key: 'f3eeded9441704b3ec6fc378bb4518595684d1be', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" }))), index.h("div", { key: '9b7abc36a3b00b02d654b9bf369630164fb25d19', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, index.h("slot", { key: '4309141f86fb81e49438d033132bc460b7386c7a' }))));
+        return (index.h(index.Host, { key: '49562a0f5cdd0ffc9d07c175f02133ebf91379f8', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, index.h("button", { key: '512bfdab373dd6f91d747cd780588d743e995aba', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, index.h("svg", { key: 'ae162d6550bc87396f6f3307e15c3990b417768c', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, index.h("path", { key: '25c4542139eec20f7e04892baab53347901450ec', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" }))), index.h("div", { key: '4595e1d6334852bc13d9a1ead5534f1947a6697a', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, index.h("slot", { key: '83c2cabf49ca7cb8e5c9e51526eae1d1b7202380' }))));
     }
     componentDidLoad() {
         this.openChangeHandle();
@@ -773,7 +1132,7 @@ const XvOverflowMenuItem = class {
         this.itemClick.emit({ event, value: this.value });
     }
     render() {
-        return (index.h(index.Host, { key: 'e2cb692dfe47684c9ef1cb8cd9519126b98d3be3', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, index.h("slot", { key: '7202537314f9992ef86f5db66a76234d749c9e96' })));
+        return (index.h(index.Host, { key: '3dd2a5251f385c53432fbe4964cfa6b506bea62e', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, index.h("slot", { key: 'c140fd224ff48c962a85401003d6fc94091d7b05' })));
     }
 };
 XvOverflowMenuItem.style = xvOverflowMenuItemCss;
@@ -847,7 +1206,7 @@ const XvProgressIndicator = class {
         this.updateChildItems();
     }
     render() {
-        return (index.h(index.Host, { key: '5d3f317d147dd29f3e0a00064a2ca4a0a79f101d', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, index.h("slot", { key: '1e6a9d655861024aee5d8a4e4e159d5fd06250a8' })));
+        return (index.h(index.Host, { key: '05e84a5e734b88c4d2a3c2206e4e5ea75c0fc969', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, index.h("slot", { key: '12dcb64216cfc45663d73d66bbd3225be005e897' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -864,7 +1223,7 @@ const XvProgressIndicatorItem = class {
         this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
     }
     render() {
-        return (index.h(index.Host, { key: '7ab9049e23319e40102861c273bcdbe50a007d47', status: this.status, class: { 'xv-progress-indicator-item': true } }, index.h("span", { key: 'b354a67c14cce7dfbd4dcc1ea5fbefc322e8387f', class: "line" }), index.h("span", { key: 'ac9328b00220e878f41601ed622b4bd72f1f4525', class: "icon" }, index.h("svg", { key: '72315a3e5bdbc53b9c9bad11d0fc664ccbc71dfa', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, index.h("path", { key: 'a2fd19444c84e59ff52a28e60b77bf8a1a304b0d', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), index.h("p", { key: '8a61ee0d9f5b7cb2d5ec3a3a95de9c6520da3438', class: "label" }, index.h("slot", { key: '597cc0cd7efb06d78070fdf087537db220784183' }))));
+        return (index.h(index.Host, { key: 'b648f0b889dbd13effc1e2df2d0b8df4a4310d33', status: this.status, class: { 'xv-progress-indicator-item': true } }, index.h("span", { key: '9f58d648cf7b954a3be77c2a09c1b0dea135831e', class: "line" }), index.h("span", { key: 'db4cedc2a3ae0894581658fc7e11059e89c6c805', class: "icon" }, index.h("svg", { key: '9418f257a253fe9c366fe148c5a24fa715a6f5ca', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, index.h("path", { key: 'eb7497d0698fde8fbd8f6eedff617ea597802109', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), index.h("p", { key: 'e71ecb98094b46e8af831d3bc7efd5461819a1cd', class: "label" }, index.h("slot", { key: 'c2332223f5205aabf5501014e6a4521665c2d1f7' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -879,7 +1238,7 @@ const XvTab = class {
         this.loading = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'acf8d6047f8d0b12a4353c439bb8be5e96a6de2d', disabled: this.disabled, name: this.name }, this.loading ? index.h("xv-loader-v2", { size: SIZE_VAR.LG }) : index.h("slot", null)));
+        return (index.h(index.Host, { key: 'ab7f5dbb607ca9c91a2503b4f5a739685e2ec45f', disabled: this.disabled, name: this.name }, this.loading ? index.h("xv-loader-v2", { size: SIZE_VAR.LG }) : index.h("slot", null)));
     }
 };
 XvTab.style = xvTabCss;
@@ -918,7 +1277,7 @@ const XvTable = class {
             .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
     }
     render() {
-        return (index.h(index.Host, { key: '4894a985912a52eb0173566d6c2daff7dfc39035', class: { batchVisible: !!this.selectedCount } }, index.h("slot", { key: 'c370d3fd370a78528ff5e540fb59239c6b416bd9', name: "title" }, !!this.el.title && index.h("h2", { key: 'aefcffd432a2c24c6f84924d03fad5f0498d4b10', class: "xv-table-title" }, this.el.title)), index.h("slot", { key: '227b2ace04ed35ce3cff88c34d99054d8c552bc3', name: "toolbar" }), index.h("div", { key: '810934177b689d49dc1402aac97502081982744b', class: "xv-table" }, index.h("div", { key: 'db7c19f33120457dbd53a491579379741187652f', class: "batch-actions" }, index.h(index.Fragment, { key: 'b9c688ccda045afc1fd46ebed503d96f3096f788' }, index.h("div", { key: '628767d1a33fa98195056441e871a4beccb5b1ec', class: "batch-actions_content" }, index.h("slot", { key: 'b73f2d55c5c65daaabce1a89eb61ed328445c804', name: "batch" })), index.h("p", { key: '162fa01f1027c4c0df8a784995b50a085f44e98b', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), index.h("div", { key: '68b9c4807c9e6dd297bc74867f3230154493d5e6', class: "xv-table_wrapper" }, index.h("slot", { key: 'fd28df98e8497825d4f4ecfb3e292c724952ae83' }), index.h("slot", { key: 'f1604b484a87f35fffa11fc55eb05ff52d3d55ac', name: "footer" })), !!this.loading && (index.h("div", { key: '6e7cae29ba018e5af760cdcb9a9387e5e33369ae', class: "xv-table_loading" }, index.h("xv-loader-v2", { key: '72f23f7b4de8edeae93565bccceeca9e78a071d4', size: SIZE_VAR.LG }))))));
+        return (index.h(index.Host, { key: '7638ad48563703718ad0cc8fff24ee18cf3a48ff', class: { batchVisible: !!this.selectedCount } }, index.h("slot", { key: '434ff076e975190cc57b748ddea8eeece9cf88bd', name: "title" }, !!this.el.title && index.h("h2", { key: '65da06cb74c47d17b88e835bd7a6ef096af16b45', class: "xv-table-title" }, this.el.title)), index.h("slot", { key: '882e9653dc35963bf24aac581a8d03c4fedd1ae9', name: "toolbar" }), index.h("div", { key: '6c4c289d8bdd312e0d80648012ae8030125b2ed6', class: "xv-table" }, index.h("div", { key: '66ec508b2996535f00bebb8fa1d6639023f4ac23', class: "batch-actions" }, index.h(index.Fragment, { key: 'e28a6fb4c17ec7287d11ff1c6745df530795d7fd' }, index.h("div", { key: '3d9ad8d0757d390fa8beb04acff62848170c6d1c', class: "batch-actions_content" }, index.h("slot", { key: 'bc8fe38784469a85e323ed1d3a6c23acc51a98af', name: "batch" })), index.h("p", { key: '8f49764dfd6c521e31a58fd2a285d149950f3a1c', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), index.h("div", { key: '316cfca89ab6549abdbfadf0fe5806acbc347d0b', class: "xv-table_wrapper" }, index.h("slot", { key: 'a5a7c79f2bfc49b4825b87677899f16c6c8cd9bb' }), index.h("slot", { key: '7e82440672624b8e4c6a4b84c615db38b04fb031', name: "footer" })), !!this.loading && (index.h("div", { key: '3b656b4c0d355884589438f1da2c98d1129a9fac', class: "xv-table_loading" }, index.h("xv-loader-v2", { key: '873d51be85722147c5c52f44f5ba590e5033a529', size: SIZE_VAR.LG }))))));
     }
     componentWillLoad() {
         this.setColsSizeTemplate();
@@ -930,15 +1289,6 @@ const XvTable = class {
 };
 XvTable.style = xvTableCss;
 
-var XV_SORT_DIR;
-(function (XV_SORT_DIR) {
-    XV_SORT_DIR["ASC"] = "asc";
-    XV_SORT_DIR["DESC"] = "desc";
-    XV_SORT_DIR["NONE"] = "none";
-})(XV_SORT_DIR || (XV_SORT_DIR = {}));
-const XV_EXPANDABLE_KEY = 'expandable';
-const XV_TABLE_TAG = 'xv-table-v2';
-
 const xvTableCellCss = "@charset \"UTF-8\";:host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:var(--xv-table-padding-y) var(--xv-table-padding-x);color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:0.16px;transition:0.25s ease-in-out background-color}:host([multiline]){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:initial;padding-bottom:1px;padding-top:0;line-height:1.2}:host([align=left]){text-align:left}:host([align=right]){text-align:right}:host([align=center]){text-align:center}:host([sort]){position:relative;cursor:pointer;user-select:none}:host([sort]):before,:host([sort]):after{font-size:12px;line-height:10px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;right:8px;pointer-events:none;transition:350ms ease-in-out opacity;opacity:0}:host([sort]):before{content:\"▲\";top:50%;transform:translateY(calc(-50% - 5px))}:host([sort])::after{content:\"▼\";top:50%;transform:translateY(calc(-50% + 5px))}:host([sort]:hover){background-color:var(--layer-accent-hover-01, #E3E3E3)}:host([sort]:hover)::before,:host([sort]:hover)::after{opacity:1}:host([sort=asc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=asc])::before{opacity:1}:host([sort=asc])::after{display:none}:host([sort=desc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=desc])::before{display:none}:host([sort=desc])::after{opacity:1}";
 
 const XvTableCell = class {
@@ -966,12 +1316,15 @@ const XvTableCell = class {
     }
     ;
     render() {
-        return (index.h(index.Host, { key: 'a43012499f2ab81a47702b6861fd39180729ce8d' }, index.h("slot", { key: 'bcb83a24979755ec0959e09e849dd8b9fa04a95b' })));
+        return (index.h(index.Host, { key: '81ba9b0d8bd1652b30259af7a177b27185c49dee' }, index.h("slot", { key: '5b0517d3001ba92944f2032307541d7db6eb7b27' })));
     }
     get el() { return index.getElement(this); }
 };
 XvTableCell.style = xvTableCellCss;
 
+const XV_EXPANDABLE_KEY = 'expandable';
+const XV_TABLE_TAG = 'xv-table-v2';
+
 const xvTableExpandCss = ":host{display:block;position:relative;transition:0.25s ease-in-out background-color}:host .expand-btn{z-index:9;position:absolute;left:max(10px, var(--xv-table-padding-x));top:max(2px, var(--xv-table-padding-y) + 2px);background-color:transparent;cursor:pointer;outline:none;margin:0;padding:0;box-sizing:border-box;display:block;width:8.5px;height:8.5px;border-top:none;border-left:none;border-right:2px solid var(--icon-primary, #333);border-bottom:2px solid var(--icon-primary, #333);transform:rotate(45deg);transform-origin:center center;transition:0.2s ease-in-out transform}:host .expand-btn:disabled{cursor:not-allowed;opacity:0.5}:host .expand-btn.open{transform:rotate(-135deg)}:host .expandableContent{overflow:hidden;margin:0;padding:0;max-height:0;transition:250ms ease max-height}:host .expandableContent.open{max-height:600px}:host ::slotted([slot=expandable]){display:grid;align-items:center}:host ::slotted(xv-table-v2-row),:host ::slotted([slot=expandable]){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host ::slotted([disabled]){pointer-events:none;opacity:0.4;cursor:not-allowed;user-select:none}";
 
 const XvTableExpand = class {
@@ -984,7 +1337,7 @@ const XvTableExpand = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'e1929797c81be1a2ea84916899d39da5d408e6bb' }, index.h("button", { key: 'd17ee91f88dcde48ccb2b1e0de40eb733d505a78', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), index.h("slot", { key: '33c52bc864e741c66d448e80ec5d675c433aa649', name: XV_EXPANDABLE_KEY }), index.h("div", { key: '02795ad1ee52bdcf34519b9fcc4325698ef61919', class: { expandableContent: true, open: this.open } }, index.h("slot", { key: '185185f6fed3ae43a09c85903628eced54847cb7' }))));
+        return (index.h(index.Host, { key: '6176a4e0845dbae0f6e28b7a31110e8b2ce6b6d9' }, index.h("button", { key: 'a4d9b8ec62e9a791f24355cba0397af7c5ad8fa6', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), index.h("slot", { key: '9d4d815a424de28794a334c1ffeac6613b3bf380', name: XV_EXPANDABLE_KEY }), index.h("div", { key: '4acce147075c142a356f3fcb5cbe9cc5ccaea4c0', class: { expandableContent: true, open: this.open } }, index.h("slot", { key: '0e46f8843b84ddd7bf362b3c5178373b466fb96e' }))));
     }
     componentDidLoad() {
         index$1.setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
@@ -1039,7 +1392,7 @@ const XvTableRow = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '0fa754f2982bb475a1354cf8c7653cdbc9b710bc' }, this.variant !== undefined && (index.h("xv-table-v2-cell", { key: '344b3acf23c6e96e7c2422bc87ba47ddc468fe32', class: "cell-control" }, this.variant === 'checkbox' && (index.h("xv-checkbox-v2", { key: '718a01dddcd1d5f3c354a26f8c4d7d0920048be1', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (index.h("input", { key: '8c49a2babdf5388004b1ab3cb1639206687f7535', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), index.h("slot", { key: '565e6e933a38fd71ccd49f28772014ca3cb06398' })));
+        return (index.h(index.Host, { key: '1f48d141e4c4b1036332971c34bcd149fbc196f4' }, this.variant !== undefined && (index.h("xv-table-v2-cell", { key: 'a637c7e8796fd48df9f96b8785e96a1b8bb92a2f', class: "cell-control" }, this.variant === 'checkbox' && (index.h("xv-checkbox-v2", { key: '01e7267f1ac891110c5d8d86ba7bb1965ccd0bcf', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (index.h("input", { key: 'ae2eed4ad0763d5c586e3788a9daa9a324ac2bf5', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), index.h("slot", { key: '1fa5632863f0386f1de3b8d869483e297b56c4bd' })));
     }
     componentWillLoad() {
         this.setInitialAttrs();
@@ -1133,8 +1486,7 @@ const XvTabs = class {
         const nextTab = this.tabElements[nextIdx];
         if (!nextTab || nextTab.hasAttribute('disabled'))
             return;
-        this.active = nextTab.getAttribute('name') || `${nextIdx}`;
-        this.scrollToActiveTab();
+        this.handleTabClick(nextTab.getAttribute('name') || nextIdx);
     }
     render() {
         var _a, _b, _c;
@@ -1171,19 +1523,12 @@ const XvTag = class {
         this.closeClick.emit(e);
     }
     render() {
-        return (index.h(index.Host, { key: '14b055dd7dedf6b5fcba8b8b3eb2f5f508d805a9', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, index.h("div", { key: 'f68b22e13acb0cde1e9f80260625a72439a412df', class: "xv-tag_content" }, index.h("slot", { key: 'c4bbfc6909234057747f0cb4b13fd6a24f14a356' })), this.closeable && (index.h("button", { key: 'e05cd88033f44a852c7de9615fde4a4ebcee0d79', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+        return (index.h(index.Host, { key: '87520047c00d97194c91de7dac1caf125147c1b9', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, index.h("div", { key: '166e1f781942507532ad010e704d4f5a8fdc7da1', class: "xv-tag_content" }, index.h("slot", { key: '14020588654dfa8b6ddd1294c904796536a9020c' })), this.closeable && (index.h("button", { key: '222a7bd11a30e4c12cc45164ae4f294d4c6d6524', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
     }
 };
 XvTag.style = xvTagCss;
 
-var TextInputStatus;
-(function (TextInputStatus) {
-    TextInputStatus["ERROR"] = "error";
-    TextInputStatus["WARNING"] = "warning";
-    TextInputStatus["DEF"] = "";
-})(TextInputStatus || (TextInputStatus = {}));
-
-const xvTextInputCss = ":host{--text-input-padding-x:16px;--text-input-padding-y:11px;display:inline-flex;flex-direction:column;row-gap:calc(var(--text-input-padding-y) / 2);text-align:left;font-family:var(--ff-body, Tahoma)}:host .label{margin:0;color:var(--text-secondary, #515151);font-size:var(--fz-sm, 12px);font-weight:700;line-height:133.333%;letter-spacing:0.32px}:host .control{margin:0;position:relative;box-sizing:border-box;display:flex;column-gap:5px;align-items:center;flex-direction:row}:host .control input{width:100%;background-color:var(--field-02, #FFF);border:1px solid var(--border-strong-01, #E3E3E3);border-radius:3px;padding-block:var(--text-input-padding-y);padding-inline-start:var(--text-input-padding-x);padding-inline-end:var(--text-input-padding-x);flex:1;outline:2px solid transparent;color:var(--text-primary, #333);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:128.571%;letter-spacing:0.16px;transition:0.2s ease-in-out border-color, 0.2s ease-in-out outline-color}:host .control input.withIcon{padding-inline-end:calc(var(--text-input-padding-x) + 22px)}:host .control input::placeholder{color:var(--text-placeholder, #ACACAC)}:host .control input:focus{outline:2px solid var(--focus, #273435)}:host .control_icon{position:absolute;top:calc(50% - 9px);right:var(--text-input-padding-y);width:18px;height:18px}:host .control_icon.error{color:var(--support-error, #F1290E)}:host .control_icon.warning{color:var(--support-warning, #FF7F04)}:host .helper{margin:0;color:var(--text-helper, #646464);font-size:var(--fz-sm, 12px);line-height:133.333%;letter-spacing:0.32px}:host([status=error]) .control input{border-color:var(--support-error, #F1290E)}:host([status=error]) .control input:focus{outline-color:var(--support-error, #F1290E)}:host([status=error]) .helper{color:var(--text-error, #D62512)}:host([readonly]) .control input{border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;cursor:default;background-color:transparent}:host([readonly]) .control input:focus{outline-color:transparent}:host([disabled]){opacity:0.4}:host([disabled]) .control input{cursor:not-allowed}:host([size=xs]){--text-input-padding-y:4px;--text-input-padding-x:6px}:host([size=sm]){--text-input-padding-y:7px}:host([size=md]){--text-input-padding-y:11px}:host([size=lg]){--text-input-padding-y:15px}:host([size=xl]){--text-input-padding-y:16px;--text-input-padding-x:18px}";
+const xvTextInputCss = ":host{display:inline-block;text-align:left}:host .control_label{display:block;margin-bottom:var(--spacing-03);color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-sm, 12px);font-style:normal;font-weight:700;line-height:var(--fz-md);letter-spacing:0.32px}:host .control_input{display:flex;border:1px solid var(--border-subtle-01);outline:2px solid transparent;background-color:transparent;border-radius:3px;transition:250ms ease-in-out border-color, 250ms ease-in-out outline-color}:host .control_input:hover{border-color:var(--border-subtle-selected-01)}:host .control_input:focus-within{outline-color:var(--focus)}:host .control_input.error{outline-color:var(--support-error)}:host .control_input.readonly{border-radius:0;border-top-width:0;border-left-width:0;border-right-width:0;outline-color:transparent}:host .control_input input[type=text]{flex:1;border:none;outline:none;-moz-appearance:textfield;background-color:transparent;margin:0;padding-block:0;padding-inline:var(--spacing-05);box-sizing:border-box;color:var(--text-primary);min-width:20px;font-style:normal;font-weight:400;letter-spacing:0.16px}:host .control_input input[type=text]::-webkit-inner-spin-button,:host .control_input input[type=text]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host .control_input__icons{display:inline-flex;align-items:stretch;column-gap:2px;padding-right:var(--spacing-05)}:host .control_input__icons .status-icon{display:inline-flex;align-items:center;align-self:center;font-size:1.35em}:host .control_input__icons .status-icon.error{background-color:var(--support-error);color:white;width:16px;height:16px;border-radius:8px;font-size:12px;font-weight:bold;align-items:center;justify-content:center}:host .control_input__icons .status-icon.warning{color:var(--support-warning)}:host .control_input__icons hr{border:none;outline:none;width:2px;height:60%;align-self:center;background-color:var(--border-subtle-01);display:inline-flex}:host .control_input.xs{height:16px}:host .control_input.sm{height:32px}:host .control_input.md{height:40px}:host .control_input.lg{height:48px}:host .control_input.xl{height:60px}:host .message{margin:var(--spacing-02) 0 0;color:var(--text-helper, #646464);font-size:var(--fz-sm, 12px);font-style:normal;font-weight:400;line-height:var(--fz-md, 16px);letter-spacing:0.32px}:host .message.error{color:var(--text-error)}:host .message.warning{color:var(--text-secondary, #515151)}:host(.disabled){cursor:not-allowed}:host(.disabled) .control_label,:host(.disabled) .control_input input[type=text],:host(.disabled) .control_input input[type=text]::placeholder,:host(.disabled) .message:not(.error){color:var(--text-disabled);cursor:not-allowed}:host(.disabled) .control_input__icons,:host(.disabled) .message.error{opacity:0.5;cursor:not-allowed}:host([block]){display:block}";
 
 const XvTextInput = class {
     constructor(hostRef) {
@@ -1196,59 +1541,1933 @@ const XvTextInput = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
-        this.helper = '';
-        this.size = SIZE_VAR.MD;
-        this.status = TextInputStatus.DEF;
+        this.type = 'text';
         this.value = '';
-        this.disabled = false;
-        this.readonly = false;
         this.loading = false;
+        this.size = SIZE_VAR.MD;
         this.handleInput = (e) => {
             const target = e.target;
             this.value = target.value;
             this.valueChange.emit(this.value);
             this.internals.setFormValue(target.value);
         };
-        this.getControlIcon = (status) => {
-            if (this.loading) {
-                return index.h("xv-loader-v2", { class: "control_icon", size: SIZE_VAR.XS });
-            }
-            switch (status) {
-                case TextInputStatus.ERROR: {
-                    return (index.h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })));
-                }
-                case TextInputStatus.WARNING:
-                    return (index.h("svg", { class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { fill: "currentColor", d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
-                default: return null;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b9c4820d1f0ba4e6baf9cd405c42380577f5379d', class: { disabled: !!this.disabled } }, index.h("label", { key: 'e331f40fc28c74833276e75c8376270589a17279', class: "control" }, this.label && index.h("span", { key: '4d48b122402bd36b98495a9bfdf991512126049d', class: "control_label" }, this.label), index.h("div", { key: '7c4f26d5a943417b54500a54b993108a70a5ed83', class: {
+                'control_input': true,
+                readonly: !!this.readonly,
+                [this.size]: true,
+                error: !!this.error,
+                warning: !!this.warning,
+            } }, index.h("input", { key: 'b6e5cf7ed95c5649b7c1aff16fe7668c2a05c71b', type: this.type, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, value: this.value }), index.h("div", { key: '739c31f7939b0baaa3e8d49ec61b016005c427ad', class: "control_input__icons" }, this.loading && index.h("xv-loader-v2", { key: '8aaa989d7ad0fe3b9f86908c648fe2e01c551bc9', size: SIZE_VAR.XS }), !!this.error ? (index.h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (index.h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null))), this.helper && index.h("p", { key: '7d613edeffa7c6d8e2a76bc69217347187a3b008', class: "message" }, this.helper), typeof this.error === 'string' ? (index.h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (index.h("p", { class: "message warning" }, this.warning)) : null));
+    }
+    static get formAssociated() { return true; }
+};
+XvTextInput.style = xvTextInputCss;
+
+var top = 'top';
+var bottom = 'bottom';
+var right = 'right';
+var left = 'left';
+var auto = 'auto';
+var basePlacements = [top, bottom, right, left];
+var start = 'start';
+var end = 'end';
+var clippingParents = 'clippingParents';
+var viewport = 'viewport';
+var popper = 'popper';
+var reference = 'reference';
+var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
+  return acc.concat([placement + "-" + start, placement + "-" + end]);
+}, []);
+var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
+  return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
+}, []); // modifiers that need to read the DOM
+
+var beforeRead = 'beforeRead';
+var read = 'read';
+var afterRead = 'afterRead'; // pure-logic modifiers
+
+var beforeMain = 'beforeMain';
+var main = 'main';
+var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
+
+var beforeWrite = 'beforeWrite';
+var write = 'write';
+var afterWrite = 'afterWrite';
+var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
+
+function getNodeName(element) {
+  return element ? (element.nodeName || '').toLowerCase() : null;
+}
+
+function getWindow(node) {
+  if (node == null) {
+    return window;
+  }
+
+  if (node.toString() !== '[object Window]') {
+    var ownerDocument = node.ownerDocument;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
+
+  return node;
+}
+
+function isElement(node) {
+  var OwnElement = getWindow(node).Element;
+  return node instanceof OwnElement || node instanceof Element;
+}
+
+function isHTMLElement(node) {
+  var OwnElement = getWindow(node).HTMLElement;
+  return node instanceof OwnElement || node instanceof HTMLElement;
+}
+
+function isShadowRoot(node) {
+  // IE 11 has no ShadowRoot
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+
+  var OwnElement = getWindow(node).ShadowRoot;
+  return node instanceof OwnElement || node instanceof ShadowRoot;
+}
+
+// and applies them to the HTMLElements such as popper and arrow
+
+function applyStyles(_ref) {
+  var state = _ref.state;
+  Object.keys(state.elements).forEach(function (name) {
+    var style = state.styles[name] || {};
+    var attributes = state.attributes[name] || {};
+    var element = state.elements[name]; // arrow is optional + virtual elements
+
+    if (!isHTMLElement(element) || !getNodeName(element)) {
+      return;
+    } // Flow doesn't support to extend this property, but it's the most
+    // effective way to apply styles to an HTMLElement
+    // $FlowFixMe[cannot-write]
+
+
+    Object.assign(element.style, style);
+    Object.keys(attributes).forEach(function (name) {
+      var value = attributes[name];
+
+      if (value === false) {
+        element.removeAttribute(name);
+      } else {
+        element.setAttribute(name, value === true ? '' : value);
+      }
+    });
+  });
+}
+
+function effect$2(_ref2) {
+  var state = _ref2.state;
+  var initialStyles = {
+    popper: {
+      position: state.options.strategy,
+      left: '0',
+      top: '0',
+      margin: '0'
+    },
+    arrow: {
+      position: 'absolute'
+    },
+    reference: {}
+  };
+  Object.assign(state.elements.popper.style, initialStyles.popper);
+  state.styles = initialStyles;
+
+  if (state.elements.arrow) {
+    Object.assign(state.elements.arrow.style, initialStyles.arrow);
+  }
+
+  return function () {
+    Object.keys(state.elements).forEach(function (name) {
+      var element = state.elements[name];
+      var attributes = state.attributes[name] || {};
+      var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
+
+      var style = styleProperties.reduce(function (style, property) {
+        style[property] = '';
+        return style;
+      }, {}); // arrow is optional + virtual elements
+
+      if (!isHTMLElement(element) || !getNodeName(element)) {
+        return;
+      }
+
+      Object.assign(element.style, style);
+      Object.keys(attributes).forEach(function (attribute) {
+        element.removeAttribute(attribute);
+      });
+    });
+  };
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var applyStyles$1 = {
+  name: 'applyStyles',
+  enabled: true,
+  phase: 'write',
+  fn: applyStyles,
+  effect: effect$2,
+  requires: ['computeStyles']
+};
+
+function getBasePlacement(placement) {
+  return placement.split('-')[0];
+}
+
+var max = Math.max;
+var min = Math.min;
+var round = Math.round;
+
+function getUAString() {
+  var uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
+    return uaData.brands.map(function (item) {
+      return item.brand + "/" + item.version;
+    }).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  var clientRect = element.getBoundingClientRect();
+  var scaleX = 1;
+  var scaleY = 1;
+
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
+  }
+
+  var _ref = isElement(element) ? getWindow(element) : window,
+      visualViewport = _ref.visualViewport;
+
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
+  return {
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
+  };
+}
+
+// means it doesn't take into account transforms.
+
+function getLayoutRect(element) {
+  var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
+  // Fixes https://github.com/popperjs/popper-core/issues/1223
+
+  var width = element.offsetWidth;
+  var height = element.offsetHeight;
+
+  if (Math.abs(clientRect.width - width) <= 1) {
+    width = clientRect.width;
+  }
+
+  if (Math.abs(clientRect.height - height) <= 1) {
+    height = clientRect.height;
+  }
+
+  return {
+    x: element.offsetLeft,
+    y: element.offsetTop,
+    width: width,
+    height: height
+  };
+}
+
+function contains(parent, child) {
+  var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method
+
+  if (parent.contains(child)) {
+    return true;
+  } // then fallback to custom implementation with Shadow DOM support
+  else if (rootNode && isShadowRoot(rootNode)) {
+      var next = child;
+
+      do {
+        if (next && parent.isSameNode(next)) {
+          return true;
+        } // $FlowFixMe[prop-missing]: need a better way to handle this...
+
+
+        next = next.parentNode || next.host;
+      } while (next);
+    } // Give up, the result is false
+
+
+  return false;
+}
+
+function getComputedStyle(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+
+function isTableElement(element) {
+  return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
+}
+
+function getDocumentElement(element) {
+  // $FlowFixMe[incompatible-return]: assume body is always available
+  return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
+  element.document) || window.document).documentElement;
+}
+
+function getParentNode(element) {
+  if (getNodeName(element) === 'html') {
+    return element;
+  }
+
+  return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
+    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[prop-missing]
+    element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
+    element.parentNode || ( // DOM Element detected
+    isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
+    // $FlowFixMe[incompatible-call]: HTMLElement is a Node
+    getDocumentElement(element) // fallback
+
+  );
+}
+
+function getTrueOffsetParent(element) {
+  if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
+  getComputedStyle(element).position === 'fixed') {
+    return null;
+  }
+
+  return element.offsetParent;
+} // `.offsetParent` reports `null` for fixed elements, while absolute elements
+// return the containing block
+
+
+function getContainingBlock(element) {
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
+
+  if (isIE && isHTMLElement(element)) {
+    // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
+    var elementCss = getComputedStyle(element);
+
+    if (elementCss.position === 'fixed') {
+      return null;
+    }
+  }
+
+  var currentNode = getParentNode(element);
+
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
+  while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
+    var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
+    // create a containing block.
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+
+    if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') {
+      return currentNode;
+    } else {
+      currentNode = currentNode.parentNode;
+    }
+  }
+
+  return null;
+} // Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+
+
+function getOffsetParent(element) {
+  var window = getWindow(element);
+  var offsetParent = getTrueOffsetParent(element);
+
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
+    offsetParent = getTrueOffsetParent(offsetParent);
+  }
+
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
+    return window;
+  }
+
+  return offsetParent || getContainingBlock(element) || window;
+}
+
+function getMainAxisFromPlacement(placement) {
+  return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
+}
+
+function within(min$1, value, max$1) {
+  return max(min$1, min(value, max$1));
+}
+function withinMaxClamp(min, value, max) {
+  var v = within(min, value, max);
+  return v > max ? max : v;
+}
+
+function getFreshSideObject() {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  };
+}
+
+function mergePaddingObject(paddingObject) {
+  return Object.assign({}, getFreshSideObject(), paddingObject);
+}
+
+function expandToHashMap(value, keys) {
+  return keys.reduce(function (hashMap, key) {
+    hashMap[key] = value;
+    return hashMap;
+  }, {});
+}
+
+var toPaddingObject = function toPaddingObject(padding, state) {
+  padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, {
+    placement: state.placement
+  })) : padding;
+  return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
+};
+
+function arrow(_ref) {
+  var _state$modifiersData$;
+
+  var state = _ref.state,
+      name = _ref.name,
+      options = _ref.options;
+  var arrowElement = state.elements.arrow;
+  var popperOffsets = state.modifiersData.popperOffsets;
+  var basePlacement = getBasePlacement(state.placement);
+  var axis = getMainAxisFromPlacement(basePlacement);
+  var isVertical = [left, right].indexOf(basePlacement) >= 0;
+  var len = isVertical ? 'height' : 'width';
+
+  if (!arrowElement || !popperOffsets) {
+    return;
+  }
+
+  var paddingObject = toPaddingObject(options.padding, state);
+  var arrowRect = getLayoutRect(arrowElement);
+  var minProp = axis === 'y' ? top : left;
+  var maxProp = axis === 'y' ? bottom : right;
+  var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len];
+  var startDiff = popperOffsets[axis] - state.rects.reference[axis];
+  var arrowOffsetParent = getOffsetParent(arrowElement);
+  var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
+  var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is
+  // outside of the popper bounds
+
+  var min = paddingObject[minProp];
+  var max = clientSize - arrowRect[len] - paddingObject[maxProp];
+  var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
+  var offset = within(min, center, max); // Prevents breaking syntax highlighting...
+
+  var axisProp = axis;
+  state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
+}
+
+function effect$1(_ref2) {
+  var state = _ref2.state,
+      options = _ref2.options;
+  var _options$element = options.element,
+      arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element;
+
+  if (arrowElement == null) {
+    return;
+  } // CSS selector
+
+
+  if (typeof arrowElement === 'string') {
+    arrowElement = state.elements.popper.querySelector(arrowElement);
+
+    if (!arrowElement) {
+      return;
+    }
+  }
+
+  if (!contains(state.elements.popper, arrowElement)) {
+    return;
+  }
+
+  state.elements.arrow = arrowElement;
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var arrow$1 = {
+  name: 'arrow',
+  enabled: true,
+  phase: 'main',
+  fn: arrow,
+  effect: effect$1,
+  requires: ['popperOffsets'],
+  requiresIfExists: ['preventOverflow']
+};
+
+function getVariation(placement) {
+  return placement.split('-')[1];
+}
+
+var unsetSides = {
+  top: 'auto',
+  right: 'auto',
+  bottom: 'auto',
+  left: 'auto'
+}; // Round the offsets to the nearest suitable subpixel based on the DPR.
+// Zooming can change the DPR, but it seems to report a value that will
+// cleanly divide the values into the appropriate subpixels.
+
+function roundOffsetsByDPR(_ref, win) {
+  var x = _ref.x,
+      y = _ref.y;
+  var dpr = win.devicePixelRatio || 1;
+  return {
+    x: round(x * dpr) / dpr || 0,
+    y: round(y * dpr) / dpr || 0
+  };
+}
+
+function mapToStyles(_ref2) {
+  var _Object$assign2;
+
+  var popper = _ref2.popper,
+      popperRect = _ref2.popperRect,
+      placement = _ref2.placement,
+      variation = _ref2.variation,
+      offsets = _ref2.offsets,
+      position = _ref2.position,
+      gpuAcceleration = _ref2.gpuAcceleration,
+      adaptive = _ref2.adaptive,
+      roundOffsets = _ref2.roundOffsets,
+      isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x,
+      x = _offsets$x === void 0 ? 0 : _offsets$x,
+      _offsets$y = offsets.y,
+      y = _offsets$y === void 0 ? 0 : _offsets$y;
+
+  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref3.x;
+  y = _ref3.y;
+  var hasX = offsets.hasOwnProperty('x');
+  var hasY = offsets.hasOwnProperty('y');
+  var sideX = left;
+  var sideY = top;
+  var win = window;
+
+  if (adaptive) {
+    var offsetParent = getOffsetParent(popper);
+    var heightProp = 'clientHeight';
+    var widthProp = 'clientWidth';
+
+    if (offsetParent === getWindow(popper)) {
+      offsetParent = getDocumentElement(popper);
+
+      if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
+        heightProp = 'scrollHeight';
+        widthProp = 'scrollWidth';
+      }
+    } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
+
+
+    offsetParent = offsetParent;
+
+    if (placement === top || (placement === left || placement === right) && variation === end) {
+      sideY = bottom;
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      offsetParent[heightProp];
+      y -= offsetY - popperRect.height;
+      y *= gpuAcceleration ? 1 : -1;
+    }
+
+    if (placement === left || (placement === top || placement === bottom) && variation === end) {
+      sideX = right;
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      offsetParent[widthProp];
+      x -= offsetX - popperRect.width;
+      x *= gpuAcceleration ? 1 : -1;
+    }
+  }
+
+  var commonStyles = Object.assign({
+    position: position
+  }, adaptive && unsetSides);
+
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }, getWindow(popper)) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref4.x;
+  y = _ref4.y;
+
+  if (gpuAcceleration) {
+    var _Object$assign;
+
+    return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
+  }
+
+  return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
+}
+
+function computeStyles(_ref5) {
+  var state = _ref5.state,
+      options = _ref5.options;
+  var _options$gpuAccelerat = options.gpuAcceleration,
+      gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
+      _options$adaptive = options.adaptive,
+      adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
+      _options$roundOffsets = options.roundOffsets,
+      roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
+  var commonStyles = {
+    placement: getBasePlacement(state.placement),
+    variation: getVariation(state.placement),
+    popper: state.elements.popper,
+    popperRect: state.rects.popper,
+    gpuAcceleration: gpuAcceleration,
+    isFixed: state.options.strategy === 'fixed'
+  };
+
+  if (state.modifiersData.popperOffsets != null) {
+    state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
+      offsets: state.modifiersData.popperOffsets,
+      position: state.options.strategy,
+      adaptive: adaptive,
+      roundOffsets: roundOffsets
+    })));
+  }
+
+  if (state.modifiersData.arrow != null) {
+    state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
+      offsets: state.modifiersData.arrow,
+      position: 'absolute',
+      adaptive: false,
+      roundOffsets: roundOffsets
+    })));
+  }
+
+  state.attributes.popper = Object.assign({}, state.attributes.popper, {
+    'data-popper-placement': state.placement
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var computeStyles$1 = {
+  name: 'computeStyles',
+  enabled: true,
+  phase: 'beforeWrite',
+  fn: computeStyles,
+  data: {}
+};
+
+var passive = {
+  passive: true
+};
+
+function effect(_ref) {
+  var state = _ref.state,
+      instance = _ref.instance,
+      options = _ref.options;
+  var _options$scroll = options.scroll,
+      scroll = _options$scroll === void 0 ? true : _options$scroll,
+      _options$resize = options.resize,
+      resize = _options$resize === void 0 ? true : _options$resize;
+  var window = getWindow(state.elements.popper);
+  var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper);
+
+  if (scroll) {
+    scrollParents.forEach(function (scrollParent) {
+      scrollParent.addEventListener('scroll', instance.update, passive);
+    });
+  }
+
+  if (resize) {
+    window.addEventListener('resize', instance.update, passive);
+  }
+
+  return function () {
+    if (scroll) {
+      scrollParents.forEach(function (scrollParent) {
+        scrollParent.removeEventListener('scroll', instance.update, passive);
+      });
+    }
+
+    if (resize) {
+      window.removeEventListener('resize', instance.update, passive);
+    }
+  };
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var eventListeners = {
+  name: 'eventListeners',
+  enabled: true,
+  phase: 'write',
+  fn: function fn() {},
+  effect: effect,
+  data: {}
+};
+
+var hash$1 = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, function (matched) {
+    return hash$1[matched];
+  });
+}
+
+var hash = {
+  start: 'end',
+  end: 'start'
+};
+function getOppositeVariationPlacement(placement) {
+  return placement.replace(/start|end/g, function (matched) {
+    return hash[matched];
+  });
+}
+
+function getWindowScroll(node) {
+  var win = getWindow(node);
+  var scrollLeft = win.pageXOffset;
+  var scrollTop = win.pageYOffset;
+  return {
+    scrollLeft: scrollLeft,
+    scrollTop: scrollTop
+  };
+}
+
+function getWindowScrollBarX(element) {
+  // If <html> has a CSS width greater than the viewport, then this will be
+  // incorrect for RTL.
+  // Popper 1 is broken in this case and never had a bug report so let's assume
+  // it's not an issue. I don't think anyone ever specifies width on <html>
+  // anyway.
+  // Browsers where the left scrollbar doesn't cause an issue report `0` for
+  // this (e.g. Edge 2019, IE11, Safari)
+  return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
+}
+
+function getViewportRect(element, strategy) {
+  var win = getWindow(element);
+  var html = getDocumentElement(element);
+  var visualViewport = win.visualViewport;
+  var width = html.clientWidth;
+  var height = html.clientHeight;
+  var x = 0;
+  var y = 0;
+
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    var layoutViewport = isLayoutViewport();
+
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+
+  return {
+    width: width,
+    height: height,
+    x: x + getWindowScrollBarX(element),
+    y: y
+  };
+}
+
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable
+
+function getDocumentRect(element) {
+  var _element$ownerDocumen;
+
+  var html = getDocumentElement(element);
+  var winScroll = getWindowScroll(element);
+  var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
+  var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
+  var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
+  var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
+  var y = -winScroll.scrollTop;
+
+  if (getComputedStyle(body || html).direction === 'rtl') {
+    x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
+  }
+
+  return {
+    width: width,
+    height: height,
+    x: x,
+    y: y
+  };
+}
+
+function isScrollParent(element) {
+  // Firefox wants us to check `-x` and `-y` variations as well
+  var _getComputedStyle = getComputedStyle(element),
+      overflow = _getComputedStyle.overflow,
+      overflowX = _getComputedStyle.overflowX,
+      overflowY = _getComputedStyle.overflowY;
+
+  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
+}
+
+function getScrollParent(node) {
+  if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
+    // $FlowFixMe[incompatible-return]: assume body is always available
+    return node.ownerDocument.body;
+  }
+
+  if (isHTMLElement(node) && isScrollParent(node)) {
+    return node;
+  }
+
+  return getScrollParent(getParentNode(node));
+}
+
+/*
+given a DOM element, return the list of all scroll parents, up the list of ancesors
+until we get to the top window object. This list is what we attach scroll listeners
+to, because if any of these parent elements scroll, we'll need to re-calculate the
+reference element's position.
+*/
+
+function listScrollParents(element, list) {
+  var _element$ownerDocumen;
+
+  if (list === void 0) {
+    list = [];
+  }
+
+  var scrollParent = getScrollParent(element);
+  var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
+  var win = getWindow(scrollParent);
+  var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
+  var updatedList = list.concat(target);
+  return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
+  updatedList.concat(listScrollParents(getParentNode(target)));
+}
+
+function rectToClientRect(rect) {
+  return Object.assign({}, rect, {
+    left: rect.x,
+    top: rect.y,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  });
+}
+
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === 'fixed');
+  rect.top = rect.top + element.clientTop;
+  rect.left = rect.left + element.clientLeft;
+  rect.bottom = rect.top + element.clientHeight;
+  rect.right = rect.left + element.clientWidth;
+  rect.width = element.clientWidth;
+  rect.height = element.clientHeight;
+  rect.x = rect.left;
+  rect.y = rect.top;
+  return rect;
+}
+
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+} // A "clipping parent" is an overflowable container with the characteristic of
+// clipping (or hiding) overflowing elements with a position different from
+// `initial`
+
+
+function getClippingParents(element) {
+  var clippingParents = listScrollParents(getParentNode(element));
+  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;
+  var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
+
+  if (!isElement(clipperElement)) {
+    return [];
+  } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
+
+
+  return clippingParents.filter(function (clippingParent) {
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
+  });
+} // Gets the maximum area that the element is visible in due to any number of
+// clipping parents
+
+
+function getClippingRect(element, boundary, rootBoundary, strategy) {
+  var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
+  var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
+  var firstClippingParent = clippingParents[0];
+  var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromMixedType(element, firstClippingParent, strategy));
+  clippingRect.width = clippingRect.right - clippingRect.left;
+  clippingRect.height = clippingRect.bottom - clippingRect.top;
+  clippingRect.x = clippingRect.left;
+  clippingRect.y = clippingRect.top;
+  return clippingRect;
+}
+
+function computeOffsets(_ref) {
+  var reference = _ref.reference,
+      element = _ref.element,
+      placement = _ref.placement;
+  var basePlacement = placement ? getBasePlacement(placement) : null;
+  var variation = placement ? getVariation(placement) : null;
+  var commonX = reference.x + reference.width / 2 - element.width / 2;
+  var commonY = reference.y + reference.height / 2 - element.height / 2;
+  var offsets;
+
+  switch (basePlacement) {
+    case top:
+      offsets = {
+        x: commonX,
+        y: reference.y - element.height
+      };
+      break;
+
+    case bottom:
+      offsets = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+
+    case right:
+      offsets = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+
+    case left:
+      offsets = {
+        x: reference.x - element.width,
+        y: commonY
+      };
+      break;
+
+    default:
+      offsets = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+
+  var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;
+
+  if (mainAxis != null) {
+    var len = mainAxis === 'y' ? 'height' : 'width';
+
+    switch (variation) {
+      case start:
+        offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
+        break;
+
+      case end:
+        offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
+        break;
+    }
+  }
+
+  return offsets;
+}
+
+function detectOverflow(state, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _options = options,
+      _options$placement = _options.placement,
+      placement = _options$placement === void 0 ? state.placement : _options$placement,
+      _options$strategy = _options.strategy,
+      strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
+      _options$boundary = _options.boundary,
+      boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
+      _options$rootBoundary = _options.rootBoundary,
+      rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary,
+      _options$elementConte = _options.elementContext,
+      elementContext = _options$elementConte === void 0 ? popper : _options$elementConte,
+      _options$altBoundary = _options.altBoundary,
+      altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary,
+      _options$padding = _options.padding,
+      padding = _options$padding === void 0 ? 0 : _options$padding;
+  var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
+  var altContext = elementContext === popper ? reference : popper;
+  var popperRect = state.rects.popper;
+  var element = state.elements[altBoundary ? altContext : elementContext];
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
+  var referenceClientRect = getBoundingClientRect(state.elements.reference);
+  var popperOffsets = computeOffsets({
+    reference: referenceClientRect,
+    element: popperRect,
+    placement: placement
+  });
+  var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
+  var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
+  // 0 or negative = within the clipping rect
+
+  var overflowOffsets = {
+    top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
+    bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
+    left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
+    right: elementClientRect.right - clippingClientRect.right + paddingObject.right
+  };
+  var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element
+
+  if (elementContext === popper && offsetData) {
+    var offset = offsetData[placement];
+    Object.keys(overflowOffsets).forEach(function (key) {
+      var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1;
+      var axis = [top, bottom].indexOf(key) >= 0 ? 'y' : 'x';
+      overflowOffsets[key] += offset[axis] * multiply;
+    });
+  }
+
+  return overflowOffsets;
+}
+
+function computeAutoPlacement(state, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _options = options,
+      placement = _options.placement,
+      boundary = _options.boundary,
+      rootBoundary = _options.rootBoundary,
+      padding = _options.padding,
+      flipVariations = _options.flipVariations,
+      _options$allowedAutoP = _options.allowedAutoPlacements,
+      allowedAutoPlacements = _options$allowedAutoP === void 0 ? placements : _options$allowedAutoP;
+  var variation = getVariation(placement);
+  var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {
+    return getVariation(placement) === variation;
+  }) : basePlacements;
+  var allowedPlacements = placements$1.filter(function (placement) {
+    return allowedAutoPlacements.indexOf(placement) >= 0;
+  });
+
+  if (allowedPlacements.length === 0) {
+    allowedPlacements = placements$1;
+  } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
+
+
+  var overflows = allowedPlacements.reduce(function (acc, placement) {
+    acc[placement] = detectOverflow(state, {
+      placement: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      padding: padding
+    })[getBasePlacement(placement)];
+    return acc;
+  }, {});
+  return Object.keys(overflows).sort(function (a, b) {
+    return overflows[a] - overflows[b];
+  });
+}
+
+function getExpandedFallbackPlacements(placement) {
+  if (getBasePlacement(placement) === auto) {
+    return [];
+  }
+
+  var oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
+}
+
+function flip(_ref) {
+  var state = _ref.state,
+      options = _ref.options,
+      name = _ref.name;
+
+  if (state.modifiersData[name]._skip) {
+    return;
+  }
+
+  var _options$mainAxis = options.mainAxis,
+      checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
+      _options$altAxis = options.altAxis,
+      checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis,
+      specifiedFallbackPlacements = options.fallbackPlacements,
+      padding = options.padding,
+      boundary = options.boundary,
+      rootBoundary = options.rootBoundary,
+      altBoundary = options.altBoundary,
+      _options$flipVariatio = options.flipVariations,
+      flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio,
+      allowedAutoPlacements = options.allowedAutoPlacements;
+  var preferredPlacement = state.options.placement;
+  var basePlacement = getBasePlacement(preferredPlacement);
+  var isBasePlacement = basePlacement === preferredPlacement;
+  var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
+  var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) {
+    return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, {
+      placement: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      padding: padding,
+      flipVariations: flipVariations,
+      allowedAutoPlacements: allowedAutoPlacements
+    }) : placement);
+  }, []);
+  var referenceRect = state.rects.reference;
+  var popperRect = state.rects.popper;
+  var checksMap = new Map();
+  var makeFallbackChecks = true;
+  var firstFittingPlacement = placements[0];
+
+  for (var i = 0; i < placements.length; i++) {
+    var placement = placements[i];
+
+    var _basePlacement = getBasePlacement(placement);
+
+    var isStartVariation = getVariation(placement) === start;
+    var isVertical = [top, bottom].indexOf(_basePlacement) >= 0;
+    var len = isVertical ? 'width' : 'height';
+    var overflow = detectOverflow(state, {
+      placement: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      altBoundary: altBoundary,
+      padding: padding
+    });
+    var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top;
+
+    if (referenceRect[len] > popperRect[len]) {
+      mainVariationSide = getOppositePlacement(mainVariationSide);
+    }
+
+    var altVariationSide = getOppositePlacement(mainVariationSide);
+    var checks = [];
+
+    if (checkMainAxis) {
+      checks.push(overflow[_basePlacement] <= 0);
+    }
+
+    if (checkAltAxis) {
+      checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0);
+    }
+
+    if (checks.every(function (check) {
+      return check;
+    })) {
+      firstFittingPlacement = placement;
+      makeFallbackChecks = false;
+      break;
+    }
+
+    checksMap.set(placement, checks);
+  }
+
+  if (makeFallbackChecks) {
+    // `2` may be desired in some cases – research later
+    var numberOfChecks = flipVariations ? 3 : 1;
+
+    var _loop = function _loop(_i) {
+      var fittingPlacement = placements.find(function (placement) {
+        var checks = checksMap.get(placement);
+
+        if (checks) {
+          return checks.slice(0, _i).every(function (check) {
+            return check;
+          });
+        }
+      });
+
+      if (fittingPlacement) {
+        firstFittingPlacement = fittingPlacement;
+        return "break";
+      }
+    };
+
+    for (var _i = numberOfChecks; _i > 0; _i--) {
+      var _ret = _loop(_i);
+
+      if (_ret === "break") break;
+    }
+  }
+
+  if (state.placement !== firstFittingPlacement) {
+    state.modifiersData[name]._skip = true;
+    state.placement = firstFittingPlacement;
+    state.reset = true;
+  }
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var flip$1 = {
+  name: 'flip',
+  enabled: true,
+  phase: 'main',
+  fn: flip,
+  requiresIfExists: ['offset'],
+  data: {
+    _skip: false
+  }
+};
+
+function getSideOffsets(overflow, rect, preventedOffsets) {
+  if (preventedOffsets === void 0) {
+    preventedOffsets = {
+      x: 0,
+      y: 0
+    };
+  }
+
+  return {
+    top: overflow.top - rect.height - preventedOffsets.y,
+    right: overflow.right - rect.width + preventedOffsets.x,
+    bottom: overflow.bottom - rect.height + preventedOffsets.y,
+    left: overflow.left - rect.width - preventedOffsets.x
+  };
+}
+
+function isAnySideFullyClipped(overflow) {
+  return [top, right, bottom, left].some(function (side) {
+    return overflow[side] >= 0;
+  });
+}
+
+function hide(_ref) {
+  var state = _ref.state,
+      name = _ref.name;
+  var referenceRect = state.rects.reference;
+  var popperRect = state.rects.popper;
+  var preventedOffsets = state.modifiersData.preventOverflow;
+  var referenceOverflow = detectOverflow(state, {
+    elementContext: 'reference'
+  });
+  var popperAltOverflow = detectOverflow(state, {
+    altBoundary: true
+  });
+  var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect);
+  var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
+  var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
+  var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
+  state.modifiersData[name] = {
+    referenceClippingOffsets: referenceClippingOffsets,
+    popperEscapeOffsets: popperEscapeOffsets,
+    isReferenceHidden: isReferenceHidden,
+    hasPopperEscaped: hasPopperEscaped
+  };
+  state.attributes.popper = Object.assign({}, state.attributes.popper, {
+    'data-popper-reference-hidden': isReferenceHidden,
+    'data-popper-escaped': hasPopperEscaped
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var hide$1 = {
+  name: 'hide',
+  enabled: true,
+  phase: 'main',
+  requiresIfExists: ['preventOverflow'],
+  fn: hide
+};
+
+function distanceAndSkiddingToXY(placement, rects, offset) {
+  var basePlacement = getBasePlacement(placement);
+  var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1;
+
+  var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
+    placement: placement
+  })) : offset,
+      skidding = _ref[0],
+      distance = _ref[1];
+
+  skidding = skidding || 0;
+  distance = (distance || 0) * invertDistance;
+  return [left, right].indexOf(basePlacement) >= 0 ? {
+    x: distance,
+    y: skidding
+  } : {
+    x: skidding,
+    y: distance
+  };
+}
+
+function offset(_ref2) {
+  var state = _ref2.state,
+      options = _ref2.options,
+      name = _ref2.name;
+  var _options$offset = options.offset,
+      offset = _options$offset === void 0 ? [0, 0] : _options$offset;
+  var data = placements.reduce(function (acc, placement) {
+    acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset);
+    return acc;
+  }, {});
+  var _data$state$placement = data[state.placement],
+      x = _data$state$placement.x,
+      y = _data$state$placement.y;
+
+  if (state.modifiersData.popperOffsets != null) {
+    state.modifiersData.popperOffsets.x += x;
+    state.modifiersData.popperOffsets.y += y;
+  }
+
+  state.modifiersData[name] = data;
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var offset$1 = {
+  name: 'offset',
+  enabled: true,
+  phase: 'main',
+  requires: ['popperOffsets'],
+  fn: offset
+};
+
+function popperOffsets(_ref) {
+  var state = _ref.state,
+      name = _ref.name;
+  // Offsets are the actual position the popper needs to have to be
+  // properly positioned near its reference element
+  // This is the most basic placement, and will be adjusted by
+  // the modifiers in the next step
+  state.modifiersData[name] = computeOffsets({
+    reference: state.rects.reference,
+    element: state.rects.popper,
+    placement: state.placement
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var popperOffsets$1 = {
+  name: 'popperOffsets',
+  enabled: true,
+  phase: 'read',
+  fn: popperOffsets,
+  data: {}
+};
+
+function getAltAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+
+function preventOverflow(_ref) {
+  var state = _ref.state,
+      options = _ref.options,
+      name = _ref.name;
+  var _options$mainAxis = options.mainAxis,
+      checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
+      _options$altAxis = options.altAxis,
+      checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis,
+      boundary = options.boundary,
+      rootBoundary = options.rootBoundary,
+      altBoundary = options.altBoundary,
+      padding = options.padding,
+      _options$tether = options.tether,
+      tether = _options$tether === void 0 ? true : _options$tether,
+      _options$tetherOffset = options.tetherOffset,
+      tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
+  var overflow = detectOverflow(state, {
+    boundary: boundary,
+    rootBoundary: rootBoundary,
+    padding: padding,
+    altBoundary: altBoundary
+  });
+  var basePlacement = getBasePlacement(state.placement);
+  var variation = getVariation(state.placement);
+  var isBasePlacement = !variation;
+  var mainAxis = getMainAxisFromPlacement(basePlacement);
+  var altAxis = getAltAxis(mainAxis);
+  var popperOffsets = state.modifiersData.popperOffsets;
+  var referenceRect = state.rects.reference;
+  var popperRect = state.rects.popper;
+  var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
+    placement: state.placement
+  })) : tetherOffset;
+  var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
+    mainAxis: tetherOffsetValue,
+    altAxis: tetherOffsetValue
+  } : Object.assign({
+    mainAxis: 0,
+    altAxis: 0
+  }, tetherOffsetValue);
+  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
+  var data = {
+    x: 0,
+    y: 0
+  };
+
+  if (!popperOffsets) {
+    return;
+  }
+
+  if (checkMainAxis) {
+    var _offsetModifierState$;
+
+    var mainSide = mainAxis === 'y' ? top : left;
+    var altSide = mainAxis === 'y' ? bottom : right;
+    var len = mainAxis === 'y' ? 'height' : 'width';
+    var offset = popperOffsets[mainAxis];
+    var min$1 = offset + overflow[mainSide];
+    var max$1 = offset - overflow[altSide];
+    var additive = tether ? -popperRect[len] / 2 : 0;
+    var minLen = variation === start ? referenceRect[len] : popperRect[len];
+    var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
+    // outside the reference bounds
+
+    var arrowElement = state.elements.arrow;
+    var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : {
+      width: 0,
+      height: 0
+    };
+    var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject();
+    var arrowPaddingMin = arrowPaddingObject[mainSide];
+    var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want
+    // to include its full size in the calculation. If the reference is small
+    // and near the edge of a boundary, the popper can overflow even if the
+    // reference is not overflowing as well (e.g. virtual elements with no
+    // width or height)
+
+    var arrowLen = within(0, referenceRect[len], arrowRect[len]);
+    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
+    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
+    var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
+    var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
+    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
+    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
+    var tetherMax = offset + maxOffset - offsetModifierValue;
+    var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+    popperOffsets[mainAxis] = preventedOffset;
+    data[mainAxis] = preventedOffset - offset;
+  }
+
+  if (checkAltAxis) {
+    var _offsetModifierState$2;
+
+    var _mainSide = mainAxis === 'x' ? top : left;
+
+    var _altSide = mainAxis === 'x' ? bottom : right;
+
+    var _offset = popperOffsets[altAxis];
+
+    var _len = altAxis === 'y' ? 'height' : 'width';
+
+    var _min = _offset + overflow[_mainSide];
+
+    var _max = _offset - overflow[_altSide];
+
+    var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
+
+    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
+
+    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
+
+    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
+
+    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
+
+    popperOffsets[altAxis] = _preventedOffset;
+    data[altAxis] = _preventedOffset - _offset;
+  }
+
+  state.modifiersData[name] = data;
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var preventOverflow$1 = {
+  name: 'preventOverflow',
+  enabled: true,
+  phase: 'main',
+  fn: preventOverflow,
+  requiresIfExists: ['offset']
+};
+
+function getHTMLElementScroll(element) {
+  return {
+    scrollLeft: element.scrollLeft,
+    scrollTop: element.scrollTop
+  };
+}
+
+function getNodeScroll(node) {
+  if (node === getWindow(node) || !isHTMLElement(node)) {
+    return getWindowScroll(node);
+  } else {
+    return getHTMLElementScroll(node);
+  }
+}
+
+function isElementScaled(element) {
+  var rect = element.getBoundingClientRect();
+  var scaleX = round(rect.width) / element.offsetWidth || 1;
+  var scaleY = round(rect.height) / element.offsetHeight || 1;
+  return scaleX !== 1 || scaleY !== 1;
+} // Returns the composite rect of an element relative to its offsetParent.
+// Composite means it takes into account transforms as well as layout.
+
+
+function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+
+  var isOffsetParentAnElement = isHTMLElement(offsetParent);
+  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+  var documentElement = getDocumentElement(offsetParent);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
+  var scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  var offsets = {
+    x: 0,
+    y: 0
+  };
+
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078
+    isScrollParent(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+
+    if (isHTMLElement(offsetParent)) {
+      offsets = getBoundingClientRect(offsetParent, true);
+      offsets.x += offsetParent.clientLeft;
+      offsets.y += offsetParent.clientTop;
+    } else if (documentElement) {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+  }
+
+  return {
+    x: rect.left + scroll.scrollLeft - offsets.x,
+    y: rect.top + scroll.scrollTop - offsets.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function order(modifiers) {
+  var map = new Map();
+  var visited = new Set();
+  var result = [];
+  modifiers.forEach(function (modifier) {
+    map.set(modifier.name, modifier);
+  }); // On visiting object, check for its dependencies and visit them recursively
+
+  function sort(modifier) {
+    visited.add(modifier.name);
+    var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []);
+    requires.forEach(function (dep) {
+      if (!visited.has(dep)) {
+        var depModifier = map.get(dep);
+
+        if (depModifier) {
+          sort(depModifier);
+        }
+      }
+    });
+    result.push(modifier);
+  }
+
+  modifiers.forEach(function (modifier) {
+    if (!visited.has(modifier.name)) {
+      // check for visited object
+      sort(modifier);
+    }
+  });
+  return result;
+}
+
+function orderModifiers(modifiers) {
+  // order based on dependencies
+  var orderedModifiers = order(modifiers); // order based on phase
+
+  return modifierPhases.reduce(function (acc, phase) {
+    return acc.concat(orderedModifiers.filter(function (modifier) {
+      return modifier.phase === phase;
+    }));
+  }, []);
+}
+
+function debounce(fn) {
+  var pending;
+  return function () {
+    if (!pending) {
+      pending = new Promise(function (resolve) {
+        Promise.resolve().then(function () {
+          pending = undefined;
+          resolve(fn());
+        });
+      });
+    }
+
+    return pending;
+  };
+}
+
+function mergeByName(modifiers) {
+  var merged = modifiers.reduce(function (merged, current) {
+    var existing = merged[current.name];
+    merged[current.name] = existing ? Object.assign({}, existing, current, {
+      options: Object.assign({}, existing.options, current.options),
+      data: Object.assign({}, existing.data, current.data)
+    }) : current;
+    return merged;
+  }, {}); // IE11 does not support Object.values
+
+  return Object.keys(merged).map(function (key) {
+    return merged[key];
+  });
+}
+
+var DEFAULT_OPTIONS = {
+  placement: 'bottom',
+  modifiers: [],
+  strategy: 'absolute'
+};
+
+function areValidElements() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return !args.some(function (element) {
+    return !(element && typeof element.getBoundingClientRect === 'function');
+  });
+}
+
+function popperGenerator(generatorOptions) {
+  if (generatorOptions === void 0) {
+    generatorOptions = {};
+  }
+
+  var _generatorOptions = generatorOptions,
+      _generatorOptions$def = _generatorOptions.defaultModifiers,
+      defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
+      _generatorOptions$def2 = _generatorOptions.defaultOptions,
+      defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
+  return function createPopper(reference, popper, options) {
+    if (options === void 0) {
+      options = defaultOptions;
+    }
+
+    var state = {
+      placement: 'bottom',
+      orderedModifiers: [],
+      options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
+      modifiersData: {},
+      elements: {
+        reference: reference,
+        popper: popper
+      },
+      attributes: {},
+      styles: {}
+    };
+    var effectCleanupFns = [];
+    var isDestroyed = false;
+    var instance = {
+      state: state,
+      setOptions: function setOptions(setOptionsAction) {
+        var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
+        cleanupModifierEffects();
+        state.options = Object.assign({}, defaultOptions, state.options, options);
+        state.scrollParents = {
+          reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
+          popper: listScrollParents(popper)
+        }; // Orders the modifiers based on their dependencies and `phase`
+        // properties
+
+        var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers
+
+        state.orderedModifiers = orderedModifiers.filter(function (m) {
+          return m.enabled;
+        });
+        runModifierEffects();
+        return instance.update();
+      },
+      // Sync update – it will always be executed, even if not necessary. This
+      // is useful for low frequency updates where sync behavior simplifies the
+      // logic.
+      // For high frequency updates (e.g. `resize` and `scroll` events), always
+      // prefer the async Popper#update method
+      forceUpdate: function forceUpdate() {
+        if (isDestroyed) {
+          return;
+        }
+
+        var _state$elements = state.elements,
+            reference = _state$elements.reference,
+            popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
+        // anymore
+
+        if (!areValidElements(reference, popper)) {
+          return;
+        } // Store the reference and popper rects to be read by modifiers
+
+
+        state.rects = {
+          reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
+          popper: getLayoutRect(popper)
+        }; // Modifiers have the ability to reset the current update cycle. The
+        // most common use case for this is the `flip` modifier changing the
+        // placement, which then needs to re-run all the modifiers, because the
+        // logic was previously ran for the previous placement and is therefore
+        // stale/incorrect
+
+        state.reset = false;
+        state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
+        // is filled with the initial data specified by the modifier. This means
+        // it doesn't persist and is fresh on each update.
+        // To ensure persistent data, use `${name}#persistent`
+
+        state.orderedModifiers.forEach(function (modifier) {
+          return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
+        });
+
+        for (var index = 0; index < state.orderedModifiers.length; index++) {
+          if (state.reset === true) {
+            state.reset = false;
+            index = -1;
+            continue;
+          }
+
+          var _state$orderedModifie = state.orderedModifiers[index],
+              fn = _state$orderedModifie.fn,
+              _state$orderedModifie2 = _state$orderedModifie.options,
+              _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
+              name = _state$orderedModifie.name;
+
+          if (typeof fn === 'function') {
+            state = fn({
+              state: state,
+              options: _options,
+              name: name,
+              instance: instance
+            }) || state;
+          }
+        }
+      },
+      // Async and optimistically optimized update – it will not be executed if
+      // not necessary (debounced to run at most once-per-tick)
+      update: debounce(function () {
+        return new Promise(function (resolve) {
+          instance.forceUpdate();
+          resolve(state);
+        });
+      }),
+      destroy: function destroy() {
+        cleanupModifierEffects();
+        isDestroyed = true;
+      }
+    };
+
+    if (!areValidElements(reference, popper)) {
+      return instance;
+    }
+
+    instance.setOptions(options).then(function (state) {
+      if (!isDestroyed && options.onFirstUpdate) {
+        options.onFirstUpdate(state);
+      }
+    }); // Modifiers have the ability to execute arbitrary code before the first
+    // update cycle runs. They will be executed in the same order as the update
+    // cycle. This is useful when a modifier adds some persistent data that
+    // other modifiers need to use, but the modifier is run after the dependent
+    // one.
+
+    function runModifierEffects() {
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
+
+        if (typeof effect === 'function') {
+          var cleanupFn = effect({
+            state: state,
+            name: name,
+            instance: instance,
+            options: options
+          });
+
+          var noopFn = function noopFn() {};
+
+          effectCleanupFns.push(cleanupFn || noopFn);
+        }
+      });
+    }
+
+    function cleanupModifierEffects() {
+      effectCleanupFns.forEach(function (fn) {
+        return fn();
+      });
+      effectCleanupFns = [];
+    }
+
+    return instance;
+  };
+}
+
+var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
+var createPopper = /*#__PURE__*/popperGenerator({
+  defaultModifiers: defaultModifiers
+}); // eslint-disable-next-line import/no-unused-modules
+
+const xvToggleTipCss = ":host{display:inline-block;font-family:inherit}:host .trigger{display:inline-flex;align-items:center;cursor:pointer;transition:250ms ease-in-out color;color:var(--icon-secondary)}:host .trigger_icon{color:inherit}:host .trigger ::slotted([slot=trigger]){transition:250ms ease-in-out color;color:var(--icon-secondary)}:host .trigger:hover,:host .trigger:active,:host .trigger ::slotted([slot=trigger]:hover),:host .trigger ::slotted([slot=trigger]:active){color:var(--icon-primary)}:host .trigger:focus,:host .trigger ::slotted([slot=trigger]:focus){color:var(--focus)}:host .popover{opacity:1;z-index:1000;position:absolute;background-color:var(--background-inverse);color:var(--text-inverse);border-radius:4px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.25);max-width:288px;font-size:0.875rem;line-height:1.5;margin-top:8px;flex-direction:column;display:flex}:host .popover[data-popper-placement^=top] .popover-tip{bottom:-4px}:host .popover[data-popper-placement^=bottom] .popover-tip{top:-4px}:host .popover[data-popper-placement^=left] .popover-tip{right:-4px}:host .popover[data-popper-placement^=right] .popover-tip{left:-4px}:host .popover .popover-tip{width:10px;height:10px;background-color:transparent;z-index:-1}:host .popover .popover-tip:before{content:\"\";transform:rotate(45deg);background-color:var(--background-inverse);width:inherit;height:inherit;display:inline-block}:host .popover .popover-content{padding:var(--gap-md);display:flex;flex-direction:column;gap:var(--spacing-04)}:host .popover .popover-content ::slotted([slot=header]){font-size:0.875rem;font-weight:600;color:var(--text-secondary)}:host .popover .popover-content ::slotted([slot=body]){font-size:0.875rem;color:var(--text-inverse)}:host .popover .popover-content ::slotted([slot=footer]){font-size:0.75rem;color:var(--text-inverse);opacity:0.8}:host(:not([open])) .popover{opacity:0;z-index:-1;user-select:none;pointer-events:none}";
+
+const XvToggleTip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChange = index.createEvent(this, "openChange");
+        this.open = false;
+        this.position = 'auto';
+        this.destroyPopper = () => {
+            if (this.popperInstance) {
+                this.popperInstance.destroy();
+                this.popperInstance = undefined;
             }
         };
     }
+    openChangeHandle() {
+        if (this.open) {
+            requestAnimationFrame(() => this.createPopper());
+        }
+        else {
+            this.destroyPopper();
+        }
+        this.openChange.emit(this.open);
+    }
+    handleClickOutside(e) {
+        if (this.open && !this.el.contains(e.target)) {
+            this.open = false;
+        }
+    }
+    ;
+    handleKeyDown(e) {
+        if (e.key === 'Escape' && this.open) {
+            this.open = false;
+        }
+    }
+    ;
+    async setPopover(open) {
+        if (open === this.open)
+            return;
+        this.open = open;
+        return this.open;
+    }
+    ;
+    createPopper() {
+        if (!this.triggerEl || !this.popoverEl) {
+            console.warn('XvToggleTip can`t find the trigger or popover container!');
+            return;
+        }
+        this.popperInstance = createPopper(this.triggerEl, this.popoverEl, {
+            placement: this.position,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 8],
+                    },
+                },
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        boundary: 'viewport',
+                        padding: 8,
+                    },
+                },
+            ],
+        });
+    }
+    ;
     render() {
-        return (index.h(index.Host, { key: 'ff06aea5ae7498aaf2c855da8ee0f7a0522456e4', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && index.h("label", { key: 'cf8084b9c0aab74c87297e1af0ea6d069cb6b8f1', class: "label" }, this.label), index.h("div", { key: '9ebc989deb41e835f30c72f4777d94cadd68a023', class: "control" }, index.h("input", { key: '82b18d350f325ae32daad68552ac083dd2c3b157', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && index.h("p", { key: '070097a66e9a21872b8245305a24070fc5b8f443', class: "helper" }, this.helper)));
+        return (index.h(index.Host, { key: '7b125738966144a7fdafe1ae26d77b72085b8003', class: "xv-toggle-tip" }, index.h("div", { key: '0fefcfc966714aa98d98672a1727aa2fc6bfadf2', class: "trigger", role: "button", tabindex: "0", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "popover", onClick: () => this.setPopover(!this.open), ref: (el) => (this.triggerEl = el) }, index.h("slot", { key: '752b5bf8be01660d12a6911e4a594c69da6b1e0c', name: "trigger" }, index.h("svg", { key: '6a594cfd8a4ff05d30d70fdda25a01157f6f94ee', class: "trigger_icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index.h("path", { key: '133a8b6e0f4d04e3c4df60209517191d5fd508fe', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))), index.h("div", { key: 'ee2d9238662f276f76669353139a25867708f625', class: { popover: true }, role: "tooltip", tabindex: "-1", ref: (el) => (this.popoverEl = el) }, index.h("div", { key: '3c9f9455849855757051aeeac26cba84123f6f7d', class: "popover-tip", part: "tip", "data-popper-arrow": "" }), index.h("div", { key: 'cfb0da55d009997e002f072b7ff36efaf14fb06f', class: "popover-content" }, index.h("slot", { key: 'f2dc06851b50ed5002f819e018f2bf191011fbf3', name: "header" }), index.h("slot", { key: '2dc5b57ffd60fa4586dc43b3e9534e4ede376199', name: "body" }), index.h("slot", { key: '1c236e27d751fd957fdeaf2605d8b24495b59daf', name: "footer" })))));
     }
-    componentWillLoad() {
-        this.internals.setFormValue(this.value);
+    disconnectedCallback() {
+        this.destroyPopper();
     }
-    static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["openChangeHandle"]
+    }; }
 };
-XvTextInput.style = xvTextInputCss;
+XvToggleTip.style = xvToggleTipCss;
 
-const xvTooltipCss = ":host{position:relative;display:inline-block;cursor:pointer;line-height:0.5}:host::before,:host::after{position:absolute;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out 0.5s, transform 0.2s ease-in-out 0.5s;z-index:10}:host::before{content:attr(tooltip);background:var(--background-inverse, #333);color:var(--icon-inverse, #fff);padding:var(--gap-sm, 5px) var(--gap-md, 16px);border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;font-family:var(--fz-body, Tahoma);font-size:var(fz-md, 14px);font-weight:400;line-height:18px;letter-spacing:0.16px}:host([multiline])::before{white-space:normal;min-width:300px}:host::after{content:\"\";border:6px solid transparent}:host(:hover)::before,:host(:hover)::after,:host(:focus)::before,:host(:focus)::after{opacity:1;visibility:visible}:host(.xv-tooltip_top)::before{bottom:100%;left:50%;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_top)::after{bottom:100%;left:50%;border-top-color:var(--background-inverse, #333);transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_top-left)::before{bottom:100%;left:0;transform:translateY(-5px)}:host(.xv-tooltip_top-left)::after{bottom:100%;left:10px;border-top-color:black;transform:translateY(5px)}:host(.xv-tooltip_top-right)::before{bottom:100%;right:0;transform:translateY(-5px)}:host(.xv-tooltip_top-right)::after{bottom:100%;right:10px;border-top-color:var(--background-inverse, #333);transform:translateY(5px)}:host(.xv-tooltip_bottom)::before{top:100%;left:50%;transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_bottom)::after{top:100%;left:50%;border-bottom-color:black;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_bottom-left)::before{top:100%;left:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-left)::after{top:100%;left:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_bottom-right)::before{top:100%;right:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-right)::after{top:100%;right:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_left)::before{right:100%;top:50%;transform:translateY(-50%) translateX(-5px)}:host(.xv-tooltip_left)::after{right:100%;top:50%;border-left-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::before{left:100%;top:50%;transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::after{left:100%;top:50%;border-right-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(-5px)}";
+const xvTooltipCss = ":host{position:relative;display:contents}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-md);z-index:999;max-width:min(400px, 90vw);overflow:visible}.xv-tooltip[role=tooltip] [data-popper-arrow]{position:absolute;width:10px;height:10px;background-color:transparent;z-index:-1}.xv-tooltip[role=tooltip] [data-popper-arrow]:before{content:\"\";transform:rotate(45deg);background-color:var(--background-inverse);width:inherit;height:inherit;display:inline-block}.xv-tooltip[role=tooltip][data-popper-placement^=top] [data-popper-arrow]{bottom:1px}.xv-tooltip[role=tooltip][data-popper-placement^=bottom] [data-popper-arrow]{top:-10px}.xv-tooltip[role=tooltip][data-popper-placement^=left] [data-popper-arrow]{right:-4px}.xv-tooltip[role=tooltip][data-popper-placement^=right] [data-popper-arrow]{left:-4px}";
 
 const XvTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * Tooltip and arrow position related to element
-         * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.
-         * By default, "top"
-         */
-        this.position = 'top';
+        this.position = 'auto';
+        this.visible = false;
+    }
+    onMouseEnter() {
+        this.visible = true;
+        requestAnimationFrame(() => this.createPopper());
+    }
+    onMouseLeave() {
+        this.visible = false;
+        this.destroyPopper();
+    }
+    createPopper() {
+        if (this.tooltipEl) {
+            this.popperInstance = createPopper(this.el, this.tooltipEl, {
+                placement: this.position,
+                modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
+            });
+        }
+    }
+    destroyPopper() {
+        var _a;
+        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.popperInstance = null;
     }
     render() {
-        return (index.h(index.Host, { key: '7de12b2a66877ad7be729a8d78056efeedb56d8f', tooltip: this.message, class: `xv-tooltip_${this.position}` }, index.h("slot", { key: 'd52506f97478e29652a7671b4cba6333961f5e61' }, index.h("svg", { key: 'e6f06c96135155d504577e6086f0a58fd8ae9b09', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index.h("path", { key: '6580f275c8400f37cafd96f2c68a4e1e9cbd12bd', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
+        return (index.h(index.Host, { key: 'd1f0178c3853f96716217630ff0349a0396f33a0' }, index.h("slot", { key: '11af6ea09c3d833318118164f0493bf4c98316a3' }, index.h("svg", { key: '614c37cd6eda62cc3745f49252627f1383a46166', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index.h("path", { key: '11f2da0b818971c6f17145e1fa5b17b1852faafd', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }))), this.visible && (index.h("div", { key: '8f0db2decd3ff2993b0b618e2111cac861fec058', class: "xv-tooltip", ref: (el) => (this.tooltipEl = el), role: "tooltip" }, this.message, index.h("div", { key: 'a8e05a8dbe988e7df14da6a16f42e528a68708c0', class: "xv-tooltip-arrow", "data-popper-arrow": "" })))));
     }
+    get el() { return index.getElement(this); }
 };
 XvTooltip.style = xvTooltipCss;
 
@@ -1257,8 +3476,13 @@ exports.xv_accordion_v2_item = XvAccordionItem;
 exports.xv_button_v2 = XvButton;
 exports.xv_card_v2 = XvCard;
 exports.xv_checkbox_v2 = XvCheckbox;
+exports.xv_data_table = XvDataTable;
+exports.xv_data_table_cell = XvDataTableCell;
+exports.xv_data_table_collapse = XvDataTableCollapse;
+exports.xv_data_table_row = XvDataTableRow;
 exports.xv_dropdown_v2 = XvDropdown;
 exports.xv_dropdown_v2_item = XvDropdownItem;
+exports.xv_file_uploader = XvFileUploader;
 exports.xv_footer = Xvfooter;
 exports.xv_header = XvHeader;
 exports.xv_link_v2 = XvLink;
@@ -1266,6 +3490,7 @@ exports.xv_loader_v2 = XvLoader;
 exports.xv_login_modal = XvLoginModal;
 exports.xv_modal_v2 = XvModal;
 exports.xv_notification_v2 = XvNotification;
+exports.xv_number_input_v2 = XvNumberInput;
 exports.xv_overflow_menu_v2 = XvOverflowMenu;
 exports.xv_overflow_menu_v2_item = XvOverflowMenuItem;
 exports.xv_progress_indicator_v2 = XvProgressIndicator;
@@ -1278,7 +3503,8 @@ exports.xv_table_v2_row = XvTableRow;
 exports.xv_tabs_v2 = XvTabs;
 exports.xv_tag_v2 = XvTag;
 exports.xv_text_input_v2 = XvTextInput;
+exports.xv_toggle_tip = XvToggleTip;
 exports.xv_tooltip_v2 = XvTooltip;
-//# sourceMappingURL=xv-accordion-v2.xv-accordion-v2-item.xv-button-v2.xv-card-v2.xv-checkbox-v2.xv-dropdown-v2.xv-dropdown-v2-item.xv-footer.xv-header.xv-link-v2.xv-loader-v2.xv-login-modal.xv-modal-v2.xv-notification-v2.xv-overflow-menu-v2.xv-overflow-menu-v2-item.xv-progress-indicator-v2.xv-progress-indicator-v2-item.xv-tab-v2.xv-table-v2.xv-table-v2-cell.xv-table-v2-expand.xv-table-v2-row.xv-tabs-v2.xv-tag-v2.xv-text-input-v2.xv-tooltip-v2.entry.cjs.js.map
+//# sourceMappingURL=xv-accordion-v2.xv-accordion-v2-item.xv-button-v2.xv-card-v2.xv-checkbox-v2.xv-data-table.xv-data-table-cell.xv-data-table-collapse.xv-data-table-row.xv-dropdown-v2.xv-dropdown-v2-item.xv-file-uploader.xv-footer.xv-header.xv-link-v2.xv-loader-v2.xv-login-modal.xv-modal-v2.xv-notification-v2.xv-number-input-v2.xv-overflow-menu-v2.xv-overflow-menu-v2-item.xv-progress-indicator-v2.xv-progress-indicator-v2-item.xv-tab-v2.xv-table-v2.xv-table-v2-cell.xv-table-v2-expand.xv-table-v2-row.xv-tabs-v2.xv-tag-v2.xv-text-input-v2.xv-toggle-tip.xv-tooltip-v2.entry.cjs.js.map
 
-//# sourceMappingURL=xv-accordion-v2_27.cjs.entry.js.map
+//# sourceMappingURL=xv-accordion-v2_34.cjs.entry.js.map