@xplortech/apollo-core 2.5.0 → 2.6.0

package/dist/cjs/{xpl-avatar_41.cjs.entry.js → xpl-avatar_47.cjs.entry.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-D__N_vw2.js');
+var index = require('./index-DH6pgWru.js');
 var v4 = require('./v4-D4KzFnn8.js');
 var index$1 = require('./index-BvmWjxWc.js');
 
-const XplAvatar = class {
+const Avatar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.disabled = false;
@@ -15,18 +15,18 @@ const XplAvatar = class {
             className += ` xpl-avatar--${this.size}`;
         if (this.color)
             className += ` xpl-avatar--${this.color}`;
-        const inner = (index.h("div", { key: '491c0f4f1ac5c4359f1f0a678e74358c47383412' }, this.src ? (index.h("img", { alt: this.name, src: this.src })) : (index.h("div", { class: "xpl-avatar__placeholder" }, index.h("slot", null))), this.status && index.h("div", { key: '1eddc940a7126cfdff262a3c1bbe93909663452f', class: `xpl-avatar__dot--${this.status}` })));
-        return (index.h(index.Host, { key: '3cde3ed32c5b71deca67701635cac3dfabe8a076' }, this.href && !this.disabled ? (index.h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (index.h("div", { class: `${className} xpl-avatar--disabled` }, inner)) : (index.h("div", { class: className }, inner))));
+        const inner = (index.h("div", { key: '89234f18fd782f17c7e5cfac2235ba0d69b57014' }, this.src ? (index.h("img", { alt: this.name, src: this.src })) : (index.h("div", { class: "xpl-avatar__placeholder" }, index.h("slot", null))), this.status && index.h("div", { key: '908dbd9216d3addb0104517a67f2dd690201958d', class: `xpl-avatar__dot--${this.status}` })));
+        return (index.h(index.Host, { key: '94cb5838d77411b9690759634f4a1a71c79054b7' }, this.href && !this.disabled ? (index.h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (index.h("div", { class: `${className} xpl-avatar--disabled` }, inner)) : (index.h("div", { class: className }, inner))));
     }
 };
 
-const XplBackdrop = class {
+const Backdrop = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.relative = false;
     }
     render() {
-        return (index.h(index.Host, { key: '94479cd370f0304f8ce4d416a7000f851c927da8', class: {
+        return (index.h(index.Host, { key: '43941007f4e0ba73037eaff96cf8d000cee48b72', class: {
                 'xpl-backdrop': true,
                 'xpl-backdrop--fixed': !this.relative,
                 'xpl-backdrop--relative': this.relative,
@@ -34,21 +34,110 @@ const XplBackdrop = class {
     }
 };
 
-const XplBadge = class {
+const LEGACY_VARIANT_MAP = {
+    success: 'green',
+    warning: 'yellow',
+    inactive: 'gray',
+    error: 'red',
+};
+const Badge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bordered = false;
+        this.dotOnly = false;
+        this.shape = 'rounded';
+        this.size = 'default';
+        this.variant = 'purple';
+    }
+    get resolvedVariant() {
+        var _a;
+        return (_a = LEGACY_VARIANT_MAP[this.variant]) !== null && _a !== void 0 ? _a : this.variant;
+    }
+    render() {
+        const className = {
+            'xpl-badge--dot-only': this.dotOnly,
+            'xpl-badge--dot-only-bordered': this.dotOnly && this.bordered,
+            'xpl-badge': !this.dotOnly,
+            'xpl-badge--dot': !this.dotOnly && !!this.dot,
+            [`xpl-badge--${this.resolvedVariant}`]: true,
+            [`xpl-badge--size-${this.size}`]: !!this.size,
+            [`xpl-badge--shape-${this.shape}`]: !this.dotOnly && !!this.shape,
+        };
+        return (index.h(index.Host, { key: '9580be5811ecfd027b81edb1ca8f5f08c325d3b6' }, index.h("div", { key: '0223458a5e1210f28b8b77a2d5fbd16d0b302998', class: className }, index.h("slot", { key: 'ef0e6db8a9f33dfcea4739be2300b481e35c7f10' }))));
+    }
+};
+
+const Banner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.action = index.createEvent(this, "action", 7);
+        this.dismiss = index.createEvent(this, "dismiss", 7);
+        this.secondaryAction = index.createEvent(this, "secondaryAction", 7);
+        this.appearance = 'information';
+        this.hasIcon = true;
+        this.isDismissible = true;
+        this.isSection = false;
+        this.truncateDesc = false;
+    }
+    getIcon() {
+        switch (this.appearance) {
+            case 'positive':
+                return 'circle-check';
+            case 'warning':
+                return 'triangle-warning';
+            case 'error':
+                return 'octagon-warning';
+            default:
+                return 'circle-info';
+        }
+    }
+    getActionButtonState() {
+        if (this.isSection) {
+            if (this.appearance === 'positive') {
+                return 'success';
+            }
+            if (this.appearance === 'error') {
+                return 'warning';
+            }
+            return undefined;
+        }
+        return this.appearance === 'error' ? 'warning' : undefined;
+    }
+    getActionButtonVariant() {
+        if (this.isSection)
+            return 'subtle';
+        return this.appearance === 'error' ? 'primary' : 'subtle';
+    }
+    getAriaLabel() {
+        var _a;
+        if (this.isSection)
+            return ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim()) || 'Section banner';
+        return {
+            information: 'Information banner',
+            positive: 'Positive banner',
+            warning: 'Warning banner',
+            error: 'Error banner',
+        }[this.appearance];
     }
     render() {
-        let className = 'xpl-badge';
-        if (this.dot)
-            className += ' xpl-badge--dot';
-        if (this.variant)
-            className += ` xpl-badge--${this.variant}`;
-        return (index.h(index.Host, { key: '7a4da384c01815ea2bd1fed3eeaa96da99758de4' }, index.h("div", { key: '6f955a5ddde98ff183409ffaf65edc946387a6c7', class: className }, index.h("slot", { key: 'a3cd6f85cf89c5a287eb464973c664d92fa03f40' }))));
+        var _a, _b, _c, _d;
+        const hasAction = !!((_a = this.actionText) === null || _a === void 0 ? void 0 : _a.trim());
+        const hasSecondaryAction = !!((_b = this.secondaryActionText) === null || _b === void 0 ? void 0 : _b.trim());
+        const actionVariant = this.getActionButtonVariant();
+        const actionState = this.getActionButtonState();
+        const isHeadingPresent = !!((_c = this.heading) === null || _c === void 0 ? void 0 : _c.trim());
+        const isDescPresent = !!((_d = this.description) === null || _d === void 0 ? void 0 : _d.trim());
+        return (index.h(index.Host, { key: '746ce028bdc07d1a645251aecf524f427d1d695b', class: {
+                'xpl-banner': true,
+                'xpl-banner--section': this.isSection,
+                [`xpl-banner--${this.appearance}`]: true,
+                'xpl-banner--truncate-desc': this.truncateDesc,
+                'xpl-banner--no-icon': this.isSection && !this.hasIcon,
+            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (index.h("div", { key: 'fec752fe9822b480c2140c9b4520c2fcf71e4077', class: "xpl-banner__icon", "aria-hidden": "true" }, index.h("xpl-icon", { key: '1ce49bf4735edf985eaf055312cbd0bec8c76e96', icon: this.getIcon(), size: 24 }))), index.h("div", { key: '9f1b38f386c4151d25ed7ddb4770d39ae915760d', class: "xpl-banner__body" }, isHeadingPresent && index.h("p", { key: 'd1e2301d3174bf9bddec53aec75760c2f18899b8', class: "xpl-banner__heading" }, this.heading), isDescPresent && (index.h("p", { key: '4d7104cb455bc6f000244c6a66d87fe642488a22', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (index.h("div", { key: 'e3d3dd32d98399be0c1ed702ccc67e65c9d12236', class: "xpl-banner__actions" }, hasAction && (index.h("xpl-button", { key: '2410dbb9ea6c910e4cb8ace3a40378e10971060d', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (index.h("xpl-button", { key: 'db600c5b7e955b466f5928c05dbd9da467317aaa', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (index.h("button", { key: 'fe896518f7f3544a60dd1a125d4139985817c0d2', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, index.h("xpl-icon", { key: '98453bbd9485027c030f4fdc7af349c0e23aa405', icon: "xmark", size: 24, "aria-hidden": "true" })))));
     }
 };
 
-const XplBreadcrumbItem = class {
+const BreadcrumbItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.chevron = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
@@ -57,25 +146,31 @@ const XplBreadcrumbItem = class {
     `;
     }
     render() {
-        return (index.h(index.Host, { key: '0fe6cf2098433d9933fe64337f86e7fd17067745', class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { key: '3f43a1e7569ce739e8097bc5a574c9bad1cebc76', role: "none" }, index.h("slot", { key: '035487c5c3de89e51227c578b09791e18173470a' })), index.h("span", { key: '32e76833f80a44c66d136e4f3f3cf7f1be39fdbe', innerHTML: this.chevron })));
+        return (index.h(index.Host, { key: 'ea9a888676dc9f7ef3a8ebdb194905d1e4350e2a', class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { key: '3de2d04b006232bcdeca19c8cd300939bdfd160d', role: "none" }, index.h("slot", { key: 'ce28e3cce466682d576e026978f2f715cc8f2c84' })), index.h("span", { key: '862d5979885f27e002852d0e933b0003a6a8c9f3', innerHTML: this.chevron })));
     }
 };
 
-const XplBreadcrumbs = class {
+const Breadcrumbs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '113bb54d6703b9d1d7dd98adb1d87a53dc56d747' }, index.h("nav", { key: 'c9903307abfb990b67f042b63463c89213a1de55', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { key: 'cc49ec0f0356f7d0e3f39ce24294e3ed22728bbe', role: "list" }, index.h("slot", { key: '910bce9c62ed5d1310559305d3f2b6e21a0f9a0d' })))));
+        return (index.h(index.Host, { key: 'b2d3bc77d1cc55f20c15af6b3526c10ee5737d23' }, index.h("nav", { key: '576a7d126a4df07c275fef5a412b549f5fc7bf45', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { key: '000ab463d675d42a67f3f484fe3d38ac7be1d60e', role: "list" }, index.h("slot", { key: '5f5895a835a4d572bd5566c1e8a4b9b83373f372' })))));
     }
 };
 
-const XplButton = class {
+const Button = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.disabled = false;
+        this.fullWidth = false;
+        this.icon = '';
+        this.iconOnly = false;
+        this.iconPosition = 'start';
+        this.isLoading = false;
+        this.sentiment = 'neutral';
         this.size = 'default';
         this.variant = 'primary';
-        this.state = 'neutral';
     }
     componentDidRender() {
         const attrs = this.el.attributes;
@@ -88,29 +183,49 @@ const XplButton = class {
             return false;
         })
             .reduce((acc, k) => (Object.assign(Object.assign({}, acc), { [attrs[k].name]: attrs[k].value })), {});
-        const child = this.el.querySelector('button');
-        Object.keys(dataAttrs).forEach((k) => {
-            child.setAttribute(k, dataAttrs[k]);
-            this.el.removeAttribute(k);
-        });
+        const button = this.el.querySelector('button');
+        if (button) {
+            Object.keys(dataAttrs).forEach((k) => {
+                button.setAttribute(k, dataAttrs[k]);
+                this.el.removeAttribute(k);
+            });
+        }
+    }
+    renderIcon() {
+        if (this.icon) {
+            return index.h("xpl-icon", { icon: this.icon });
+        }
+        return null;
+    }
+    handleLoadingState(e) {
+        if (this.isLoading) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        }
     }
     render() {
-        let className = `xpl-button
-                    xpl-button--${this.size}
-                    xpl-button--${this.state}
-                    xpl-button--${this.variant}`;
-        if (this.iconOnly)
-            className += ' xpl-button--icon-only';
-        if (this.fullWidth)
-            className += ' xpl-button--full-width';
-        if (this.link && this.disabled)
-            className += ' xpl-button--link-disabled';
-        return (index.h(index.Host, { key: '6def1e58f1fc0f0b1cee740c09278ab19ef77be5', class: className }, this.link ? (index.h("slot", null)) : (index.h("button", { disabled: this.disabled, name: this.name, type: this.type, value: this.value, form: this.form }, index.h("slot", null)))));
+        return (index.h(index.Host, { key: 'b4658d7608d4ec84a4bbb36e8989bf66cd0358a2', class: {
+                'xpl-button': true,
+                [`xpl-button--${this.size}`]: true,
+                [`xpl-button--${this.variant}`]: true,
+                [`xpl-button--${this.state ? this.state : this.sentiment}`]: true,
+                [this.icon ? `xpl-button__icon-position--${this.iconPosition}` : '']: !!this.icon,
+                'xpl-button--full-width': this.fullWidth,
+                'xpl-button--icon-only': this.iconOnly,
+                'xpl-button--disabled': this.disabled,
+                'xpl-button--loading': this.isLoading && !this.link,
+            } }, this.link ? (index.h("slot", null)) : (index.h("button", { disabled: this.disabled, onClick: (e) => this.handleLoadingState(e), type: this.isLoading &&
+                (this.type === 'submit' ||
+                    this.type === 'reset' ||
+                    this.type === undefined)
+                ? 'button'
+                : this.type, name: this.name, value: this.value, form: this.form, "aria-busy": this.isLoading ? 'true' : undefined }, this.icon && index.h("span", { class: "xpl-button__icon" }, this.renderIcon()), index.h("slot", null), this.isLoading && (index.h("span", { class: "xpl-button__loading-overlay", "aria-hidden": "true" }, index.h("span", { class: "xpl-button__loading-spinner" }, index.h("xpl-icon", { icon: "loader-4" }))))))));
     }
     get el() { return index.getElement(this); }
 };
 
-const XplCheckbox = class {
+const Checkbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.checkboxChange = index.createEvent(this, "checkboxChange", 7);
@@ -126,21 +241,21 @@ const XplCheckbox = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '00250685fca2e8158973a57947ec1ae390b556c4', class: {
+        return (index.h(index.Host, { key: '8d2ec8544cf2baad3e82b489c678fda63e22da06', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, index.h("input", { key: 'ead56008991620c8e6c612ee1e6d299a3a88c6d2', class: "xpl-checkbox", type: "checkbox", checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), index.h("label", { key: 'd336163f57e12ac87b1f29da074c66ef1e600a95', class: {
+            } }, index.h("input", { key: '632db707a6611ef8f89edaa36af95746a9e5d8fd', class: "xpl-checkbox", type: "checkbox", checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), index.h("label", { key: '80949092498866a3eba442760c28ba57540f69ba', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, index.h("slot", { key: 'c317e0a1f2e2ac2e63f95d268443d5ff0c53eb5e' }), this.description && (index.h("small", { key: 'f6031a5c9db67dbe8bb94f396da56fb7dd28fea4', class: {
+            }, htmlFor: this.id }, index.h("slot", { key: '343779750455548397d8c887101ac8cf8eb25fcc' }), this.description && (index.h("small", { key: '12d5e2d154f1a99d7afe5a9bafdf5ebdcb40f1dd', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
     }
 };
 
-const XplChoicelist = class {
+const Choicelist = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.choicelistChange = index.createEvent(this, "choicelistChange", 7);
@@ -178,7 +293,7 @@ const XplChoicelist = class {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (index.h(index.Host, { key: '385f51ecb532a4f496e6ab8a74ec8731bdcc321f', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (index.h("div", { class: "xpl-choicelist-heading" }, this.heading && index.h("h3", null, this.heading), this.description && index.h("p", null, this.description))) : null, this.choices && (index.h("ul", { key: '1c3d9eff6699a56b0cc955a5f2e9905480d8363b', class: {
+        return (index.h(index.Host, { key: 'c6a7762863d6d19c1a9d72cfcc14e1d6e0f02850', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (index.h("div", { class: "xpl-choicelist-heading" }, this.heading && index.h("h3", null, this.heading), this.description && index.h("p", null, this.description))) : null, this.choices && (index.h("ul", { key: 'a7f81d04dea87b90b86548e9eceeb802e0f4f57f', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': this.styled,
             } }, this.choices.map((choice, i) => {
@@ -201,26 +316,26 @@ const XplChoicelist = class {
     }; }
 };
 
-const XplContentArea = class {
+const ContentArea = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.size = 'wide';
     }
     render() {
-        return (index.h(index.Host, { key: '20346d8b9d44a2cc90e2bade2beedc3786276c12' }, index.h("main", { key: '9af1a83077ac5ae29038d998feaceb450be3f744', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { key: '776a4b59943b1bbbcb81b9d35cee43618e81f338', class: "xpl-content-area" }, index.h("slot", { key: 'a4a023c5ca16110c9f9ccf1f10386e28a8b4c81e' })))));
+        return (index.h(index.Host, { key: '5ce34f544fa975f9cbd46defced08033bb1eef9b' }, index.h("main", { key: '3e4b262bc54788d50b6b329936f7aee1c1f6be69', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { key: '5e4f9fa89830360f151c89ebb787d525c3c0940e', class: "xpl-content-area" }, index.h("slot", { key: 'e22c2759aa45d4a99c92541073abf011d34474f9' })))));
     }
 };
 
-const XplDashboard = class {
+const Dashboard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f072c5fdcc919dc5796dc23cdca36e9431a17814' }, index.h("dl", { key: '899d09bec63eef669028c3e4d7193f2ab690f781', class: "xpl-dashboard" }, index.h("slot", { key: 'a36c42cb173e82d17c5d4b567a5a182152204813' }))));
+        return (index.h(index.Host, { key: 'aa4f209d95236a7e2c3e6f6915c989a110202c80' }, index.h("dl", { key: '890e6fb69af3154ee47c1b40498ed37c5d8a6a1a', class: "xpl-dashboard" }, index.h("slot", { key: 'e4a47f80f873cf53844283e47c59f174fc79fda0' }))));
     }
 };
 
-const XplDataCard = class {
+const DataCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.leadingIcon = true;
@@ -253,8 +368,8 @@ const XplDataCard = class {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (index.h(index.Host, { key: 'd8e5d213c87a8d5270f34d6bd60a698e04dd852f', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '3cd7a7ef77c90e6caefdfa0a7eccc132c07871a2', class: headerClasses }, index.h("header", { key: '7f85f31d60d7022ec75c3d3b164391e11059662b' }, !!this.leadingIcon && this.icon && (index.h("span", { key: '192e6c0dc871185a7f2845a14c38b1dc6ad04702', class: `xpl-data-card__icon--${this.variant}` }, index.h("xpl-icon", { key: '9d289a6db0fed0787a2c5cd5de6c57e92203a3fd', icon: this.icon, "background-color": bgColorHue, size: 20 }))), index.h("slot", { key: 'f1b56a29e648ba29e7f4b0c0493c8e27d410d843', name: "title" }, this.name)), this.link && (index.h("span", { key: '92b7cab6af5ca4f0664902ea359b3dfb7568e5b6', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: '1326fdb0659191f1c2ff7fbb137eed5c4d5c4155', icon: "chevron-right", size: 16 })))), index.h("dd", { key: 'fce45e8e2d908a7d23e95a76cc0bc2334cd729b1', class: "xpl-data-card__body" }, index.h("div", { key: '1341065e9f0cbd91b82d239a87aa9818f237334b', class: "xpl-data-card__left" }, index.h("span", { key: '0dff4e467f439d991f3da594507e0e4310bdecee', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (index.h("xpl-tooltip", { text: this.tooltipTextStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, index.h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && index.h("span", { key: 'cb5fd1c7897ac6bce5de93082f1ca333e826d53d', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (index.h("div", { key: '83f568edc52ec6a2e0a5b63544e2849dde91318e', class: "xpl-data-card__right" }, index.h("slot", { key: 'a27fd65217f4817051ba955890582bafb6050f97', name: contentSlot }))))));
+        return (index.h(index.Host, { key: 'c9a108ce28ed8904ef2f39f8d28e3becdd3da427', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '376323f4f00a84b903b31d3b72b21d83f86cb8d7', class: headerClasses }, index.h("header", { key: '7385e8fac7f9eb6f8f9c9235f7de8395de376510' }, !!this.leadingIcon && this.icon && (index.h("span", { key: 'bd43a5ad7f0d4c3afacd83b0d77b00fbfbbc9bfe', class: `xpl-data-card__icon--${this.variant}` }, index.h("xpl-icon", { key: '914e9897881a07fd0a76eaa24f7b862e0d2237d8', icon: this.icon, "background-color": bgColorHue, size: 20 }))), index.h("slot", { key: 'dc317fbb7055845149737d3699d39759b42be5a4', name: "title" }, this.name)), this.link && (index.h("span", { key: 'ea569e40ee3e746073c1dee3e1be98af63cda682', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: '4da084735e560701a8407ec044b9e6d8ea9d5a1f', icon: "chevron-right", size: 16 })))), index.h("dd", { key: '218fd7271e49509d9b29484ba7becb3237fae283', class: "xpl-data-card__body" }, index.h("div", { key: 'e8a723a5d2742c42b681cbde6ca880a9833301ba', class: "xpl-data-card__left" }, index.h("span", { key: '9b9cfbc7ff6d1cb81d867e044766559e07f0bee9', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (index.h("xpl-tooltip", { text: this.tooltipTextStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, index.h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && index.h("span", { key: 'f6236b30f5fababdb27dfb0767b0b9f230019e87', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (index.h("div", { key: '614af9eb3f33fde8d489fe547a2f0e833f6e9655', class: "xpl-data-card__right" }, index.h("slot", { key: 'd71b6775e27537744ca4bee20c530b5aa1e6e830', name: contentSlot }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -267,17 +382,1633 @@ const XplDataCard = class {
     }; }
 };
 
-const XplDivider = class {
+const Divider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (index.h(index.Host, { key: '8f8b9899bfc602454687020e4547ba98e6c87cf4', class: className }, index.h("span", { key: 'd64ecfd54eb6ca33a05e271c52a7df5960f9c0df' }, index.h("slot", { key: '5e62ba9c682428dab560f67603343d9332bc02a5' }))));
+        return (index.h(index.Host, { key: 'cdafb808588e7baf9271997503dea7b53597b15f', class: className }, index.h("span", { key: '119067065dc21dd71b25ba81b5d83232f4953ebc' }, index.h("slot", { key: '8cc9077442f20703efc50094056cb7d15782252a' }))));
     }
 };
 
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
+const sides = ['top', 'right', 'bottom', 'left'];
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+const oppositeSideMap = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+function getAlignment(placement) {
+  return placement.split('-')[1];
+}
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+function getAxisLength(axis) {
+  return axis === 'y' ? 'height' : 'width';
+}
+function getSideAxis(placement) {
+  const firstChar = placement[0];
+  return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
+}
+const lrPlacement = ['left', 'right'];
+const rlPlacement = ['right', 'left'];
+const tbPlacement = ['top', 'bottom'];
+const btPlacement = ['bottom', 'top'];
+function getSideList(side, isStart, rtl) {
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
+    case 'left':
+    case 'right':
+      return isStart ? tbPlacement : btPlacement;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === 'start', rtl);
+  if (alignment) {
+    list = list.map(side => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  const side = getSide(placement);
+  return oppositeSideMap[side] + placement.slice(side.length);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
+  return {
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
+  };
+}
+
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side) {
+    case 'top':
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+    case 'bottom':
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+    case 'right':
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+    case 'left':
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+  switch (getAlignment(placement)) {
+    case 'start':
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+    case 'end':
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+  return coords;
+}
+
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
+// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
+const MAX_RESET_COUNT = 50;
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ *
+ * This export does not have any `platform` interface logic. You will need to
+ * write one for the platform you are using Floating UI with.
+ */
+const computePosition$1 = async (reference, floating, config) => {
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform
+  } = config;
+  const platformWithDetectOverflow = platform.detectOverflow ? platform : {
+    ...platform,
+    detectOverflow
+  };
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
+  let rects = await platform.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let resetCount = 0;
+  const middlewareData = {};
+  for (let i = 0; i < middleware.length; i++) {
+    const currentMiddleware = middleware[i];
+    if (!currentMiddleware) {
+      continue;
+    }
+    const {
+      name,
+      fn
+    } = currentMiddleware;
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform: platformWithDetectOverflow,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData[name] = {
+      ...middlewareData[name],
+      ...data
+    };
+    if (reset && resetCount < MAX_RESET_COUNT) {
+      resetCount++;
+      if (typeof reset === 'object') {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+      i = -1;
+    }
+  }
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'flip',
+    options,
+    async fn(state) {
+      var _middlewareData$arrow, _middlewareData$flip;
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform,
+        elements
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = 'bestFit',
+        fallbackAxisSideDirection = 'none',
+        flipAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+
+      // If a reset by the arrow was caused due to an alignment offset being
+      // added, we should skip any logic now since `flip()` has already done its
+      // work.
+      // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
+      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
+      const placements = [initialPlacement, ...fallbackPlacements];
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+      if (checkMainAxis) {
+        overflows.push(overflow[side]);
+      }
+      if (checkCrossAxis) {
+        const sides = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides[0]], overflow[sides[1]]);
+      }
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }];
+
+      // One or more sides is overflowing.
+      if (!overflows.every(side => side <= 0)) {
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+        const nextPlacement = placements[nextIndex];
+        if (nextPlacement) {
+          const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+          if (!ignoreCrossAxisOverflow ||
+          // We leave the current main axis only if every placement on that axis
+          // overflows the main axis.
+          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
+            // Try next placement and re-run the lifecycle.
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
+        }
+
+        // First, find the candidates that fit on the mainAxis side of overflow,
+        // then find the placement that fits the best on the main crossAxis side.
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+
+        // Otherwise fallback.
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case 'bestFit':
+              {
+                var _overflowsData$filter2;
+                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis ||
+                    // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === 'y';
+                  }
+                  return true;
+                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+                if (placement) {
+                  resetPlacement = placement;
+                }
+                break;
+              }
+            case 'initialPlacement':
+              resetPlacement = initialPlacement;
+              break;
+          }
+        }
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+      return {};
+    }
+  };
+};
+
+function getSideOffsets(overflow, rect) {
+  return {
+    top: overflow.top - rect.height,
+    right: overflow.right - rect.width,
+    bottom: overflow.bottom - rect.height,
+    left: overflow.left - rect.width
+  };
+}
+function isAnySideFullyClipped(overflow) {
+  return sides.some(side => overflow[side] >= 0);
+}
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+const hide$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'hide',
+    options,
+    async fn(state) {
+      const {
+        rects,
+        platform
+      } = state;
+      const {
+        strategy = 'referenceHidden',
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      switch (strategy) {
+        case 'referenceHidden':
+          {
+            const overflow = await platform.detectOverflow(state, {
+              ...detectOverflowOptions,
+              elementContext: 'reference'
+            });
+            const offsets = getSideOffsets(overflow, rects.reference);
+            return {
+              data: {
+                referenceHiddenOffsets: offsets,
+                referenceHidden: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        case 'escaped':
+          {
+            const overflow = await platform.detectOverflow(state, {
+              ...detectOverflowOptions,
+              altBoundary: true
+            });
+            const offsets = getSideOffsets(overflow, rects.floating);
+            return {
+              data: {
+                escapedOffsets: offsets,
+                escaped: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        default:
+          {
+            return {};
+          }
+      }
+    }
+  };
+};
+
+const originSides = /*#__PURE__*/new Set(['left', 'top']);
+
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform,
+    elements
+  } = state;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === 'y';
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
+  };
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset$1 = function (options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: 'offset',
+    options,
+    async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
+      const {
+        x,
+        y,
+        placement,
+        middlewareData
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: {
+          ...diffCoords,
+          placement
+        }
+      };
+    }
+  };
+};
+
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'size',
+    options,
+    async fn(state) {
+      var _state$middlewareData, _state$middlewareData2;
+      const {
+        placement,
+        rects,
+        platform,
+        elements
+      } = state;
+      const {
+        apply = () => {},
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
+      const side = getSide(placement);
+      const alignment = getAlignment(placement);
+      const isYAxis = getSideAxis(placement) === 'y';
+      const {
+        width,
+        height
+      } = rects.floating;
+      let heightSide;
+      let widthSide;
+      if (side === 'top' || side === 'bottom') {
+        heightSide = side;
+        widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
+      } else {
+        widthSide = side;
+        heightSide = alignment === 'end' ? 'top' : 'bottom';
+      }
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
+      const noShift = !state.middlewareData.shift;
+      let availableHeight = overflowAvailableHeight;
+      let availableWidth = overflowAvailableWidth;
+      if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
+        availableWidth = maximumClippingWidth;
+      }
+      if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
+        availableHeight = maximumClippingHeight;
+      }
+      if (noShift && !alignment) {
+        const xMin = max(overflow.left, 0);
+        const xMax = max(overflow.right, 0);
+        const yMin = max(overflow.top, 0);
+        const yMax = max(overflow.bottom, 0);
+        if (isYAxis) {
+          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
+        } else {
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
+        }
+      }
+      await apply({
+        ...state,
+        availableWidth,
+        availableHeight
+      });
+      const nextDimensions = await platform.getDimensions(elements.floating);
+      if (width !== nextDimensions.width || height !== nextDimensions.height) {
+        return {
+          reset: {
+            rects: true
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
+function hasWindow() {
+  return typeof window !== 'undefined';
+}
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  if (!hasWindow() || typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
+}
+function isTableElement(element) {
+  return /^(table|td|th)$/.test(getNodeName(element));
+}
+function isTopLayer(element) {
+  try {
+    if (element.matches(':popover-open')) {
+      return true;
+    }
+  } catch (_e) {
+    // no-op
+  }
+  try {
+    return element.matches(':modal');
+  } catch (_e) {
+    return false;
+  }
+}
+const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+const containRe = /paint|layout|strict|content/;
+const isNotNone = value => !!value && value !== 'none';
+let isWebKitValue;
+function isContainingBlock(elementOrCss) {
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  return null;
+}
+function isWebKit() {
+  if (isWebKitValue == null) {
+    isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
+  }
+  return isWebKitValue;
+}
+function isLastTraversableNode(node) {
+  return /^(html|body|#document)$/.test(getNodeName(node));
+}
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  } else {
+    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+  }
+}
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(element);
+  // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
+
+function getScale(element) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
+  }
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
+
+  // 0, NaN, or Infinity should always fallback to 1.
+
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
+}
+
+const noOffsets = /*#__PURE__*/createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+    return false;
+  }
+  return isFixed;
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
+  }
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentWin = win;
+    let currentIFrame = getFrameElement(currentWin);
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css = getComputedStyle$1(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = getFrameElement(currentWin);
+    }
+  }
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+
+// If <html> has a CSS width greater than the viewport, then this will be
+// incorrect for RTL.
+function getWindowScrollBarX(element, rect) {
+  const leftScroll = getNodeScroll(element).scrollLeft;
+  if (!rect) {
+    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+  }
+  return rect.left + leftScroll;
+}
+
+function getHTMLOffset(documentElement, scroll) {
+  const htmlRect = documentElement.getBoundingClientRect();
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
+  const y = htmlRect.top + scroll.scrollTop;
+  return {
+    x,
+    y
+  };
+}
+
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isFixed = strategy === 'fixed';
+  const documentElement = getDocumentElement(offsetParent);
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
+    return rect;
+  }
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
+  };
+}
+
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+
+// Gets the entire size of the scrollable document area, even extending outside
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
+function getDocumentRect(element) {
+  const html = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+  if (getComputedStyle$1(body).direction === 'rtl') {
+    x += max(html.clientWidth, body.clientWidth) - width;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html.clientWidth;
+  let height = html.clientHeight;
+  let x = 0;
+  let y = 0;
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+// Returns the inner client rect, subtracting scrollbars if present.
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+  if (clippingAncestor === 'viewport') {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === 'document') {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y,
+      width: clippingAncestor.width,
+      height: clippingAncestor.height
+    };
+  }
+  return rectToClientRect(rect);
+}
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
+
+// A "clipping ancestor" is an `overflow` element with the characteristic of
+// clipping (or hiding) child elements. This returns all clipping ancestors
+// of the given element up the tree.
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
+  let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
+  let currentNode = elementIsFixed ? getParentNode(element) : element;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle$1(currentNode);
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
+      currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
+    } else {
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache.set(element, result);
+  return result;
+}
+
+// Gets the maximum area that the element is visible in due to any number of
+// clipping ancestors.
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
+  let top = firstRect.top;
+  let right = firstRect.right;
+  let bottom = firstRect.bottom;
+  let left = firstRect.left;
+  for (let i = 1; i < clippingAncestors.length; i++) {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
+    top = max(rect.top, top);
+    right = min(rect.right, right);
+    bottom = min(rect.bottom, bottom);
+    left = max(rect.left, left);
+  }
+  return {
+    width: right - left,
+    height: bottom - top,
+    x: left,
+    y: top
+  };
+}
+
+function getDimensions(element) {
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
+}
+
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === 'fixed';
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = createCoords(0);
+
+  // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+  // Firefox with layout.scrollbar.side = 3 in about:config to test this.
+  function setLeftRTLScrollbarOffset() {
+    offsets.x = getWindowScrollBarX(documentElement);
+  }
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      setLeftRTLScrollbarOffset();
+    }
+  }
+  if (isFixed && !isOffsetParentAnElement && documentElement) {
+    setLeftRTLScrollbarOffset();
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
+  return {
+    x,
+    y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function isStaticPositioned(element) {
+  return getComputedStyle$1(element).position === 'static';
+}
+
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  let rawOffsetParent = element.offsetParent;
+
+  // Firefox returns the <html> element as the offsetParent if it's non-static,
+  // while Chrome and Safari return the <body> element. The <body> element must
+  // be used to perform the correct calculations even if the <html> element is
+  // non-static.
+  if (getDocumentElement(element) === rawOffsetParent) {
+    rawOffsetParent = rawOffsetParent.ownerDocument.body;
+  }
+  return rawOffsetParent;
+}
+
+// Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+function getOffsetParent(element, polyfill) {
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
+  }
+  return offsetParent || getContainingBlock(element) || win;
+}
+
+const getElementRects = async function (data) {
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
+  return {
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
+    }
+  };
+};
+
+function isRTL(element) {
+  return getComputedStyle$1(element).direction === 'rtl';
+}
+
+const platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    var _io;
+    clearTimeout(timeoutId);
+    (_io = io) == null || _io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = elementRectForRootMargin;
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 1000);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        // It's possible that even though the ratio is reported as 1, the
+        // element is not actually fully within the IntersectionObserver's root
+        // area anymore. This can happen under performance constraints. This may
+        // be a bug in the browser's IntersectionObserver implementation. To
+        // work around this, we compare the element's bounding rect now with
+        // what it was at the time we created the IntersectionObserver. If they
+        // are not equal then the element moved, so we refresh.
+        refresh();
+      }
+      isFirstUpdate = false;
+    }
+
+    // Older browsers don't support a `document` as the root and will throw an
+    // error.
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (_e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === 'function',
+    layoutShift = typeof IntersectionObserver === 'function',
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver(_ref => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
+        // Prevent update loops when using the `size` middleware.
+        // https://github.com/floating-ui/floating-ui/issues/1740
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    if (floating) {
+      resizeObserver.observe(floating);
+    }
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    var _resizeObserver2;
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    cleanupIo == null || cleanupIo();
+    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = offset$1;
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip = flip$1;
+
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size = size$1;
+
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+const hide = hide$1;
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ */
+const computePosition = (reference, floating, options) => {
+  // This caches the expensive `getClippingElementAncestors` function so that
+  // multiple lifecycle resets re-use the same result. It only lives for a
+  // single call. If other functions become expensive, we can add them as well.
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
+};
+
 var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s)
@@ -290,7 +2021,7 @@ var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const XplDropdown = class {
+const Dropdown = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.isOpenChange = index.createEvent(this, "isOpenChange", 7);
@@ -299,41 +2030,61 @@ const XplDropdown = class {
         this.mode = 'single';
         this.anchorToTrigger = false;
         this.selectOnFocus = false;
-        this.requestAnimationFrameId = null;
-        this.updateDropdownPosition = () => {
+        this.cleanupAutoUpdate = null;
+        this.updateDropdownPosition = async (triggerEl) => {
             var _a;
-            if (!this.anchorToTrigger || !this.triggerId) {
+            const { x, y, placement, middlewareData } = await computePosition(triggerEl, this.hostElement, {
+                strategy: 'fixed',
+                placement: 'bottom-start',
+                middleware: [
+                    offset(4),
+                    flip(),
+                    size({
+                        apply: ({ availableHeight, rects }) => {
+                            const listEl = this.hostElement.querySelector('.xpl-dropdown-list');
+                            let usedBeforeList = 0;
+                            if (listEl) {
+                                const children = Array.from(this.hostElement.children);
+                                const listIndex = children.indexOf(listEl);
+                                children.slice(0, listIndex).forEach((child) => {
+                                    if (child instanceof HTMLElement) {
+                                        usedBeforeList += child.offsetHeight;
+                                    }
+                                });
+                            }
+                            const cs = getComputedStyle(this.hostElement);
+                            const hostVerticalChrome = parseFloat(cs.paddingTop) +
+                                parseFloat(cs.paddingBottom) +
+                                parseFloat(cs.borderTopWidth) +
+                                parseFloat(cs.borderBottomWidth);
+                            const cssMaxHeight = listEl
+                                ? parseFloat(getComputedStyle(listEl).getPropertyValue('--xpl-dropdown-list-max-height'))
+                                : Infinity;
+                            const listMaxHeight = Math.min(cssMaxHeight, Math.max(0, availableHeight - usedBeforeList - hostVerticalChrome));
+                            Object.assign(this.hostElement.style, {
+                                width: `${rects.reference.width}px`,
+                            });
+                            if (listEl) {
+                                listEl.style.maxHeight = `${listMaxHeight}px`;
+                            }
+                        },
+                    }),
+                    hide(),
+                ],
+            });
+            if (!this.cleanupAutoUpdate)
                 return;
-            }
-            const triggerRect = (_a = document.getElementById(this.triggerId)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (!triggerRect) {
+            if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) {
+                this.isOpen = false;
                 return;
             }
-            const dropdownHeight = Math.max(this.hostElement.offsetHeight, 300);
-            const viewportHeight = window.innerHeight;
-            const spaceBelow = viewportHeight - triggerRect.bottom;
-            const spaceAbove = triggerRect.top;
-            const shouldPositionAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
-            if (shouldPositionAbove) {
-                this.hostElement.style.cssText = `
-                left: ${triggerRect.left}px;
-                width: ${triggerRect.width}px;
-                bottom: ${viewportHeight - triggerRect.top}px;
-                top: auto;
-            `;
-                this.hostElement.classList.add('xpl-dropdown--above');
-                this.hostElement.classList.remove('xpl-dropdown--below');
-            }
-            else {
-                this.hostElement.style.cssText = `
-                left: ${triggerRect.left}px;
-                width: ${triggerRect.width}px;
-                top: ${triggerRect.bottom}px;
-                bottom: auto;
-            `;
-                this.hostElement.classList.add('xpl-dropdown--below');
-                this.hostElement.classList.remove('xpl-dropdown--above');
-            }
+            const isAbove = placement.startsWith('top');
+            Object.assign(this.hostElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            this.hostElement.classList.toggle('xpl-dropdown--above', isAbove);
+            this.hostElement.classList.toggle('xpl-dropdown--below', !isAbove);
         };
         this.handleClickOutside = ({ target }) => {
             const { triggerId } = this;
@@ -350,6 +2101,16 @@ const XplDropdown = class {
             }
         };
     }
+    onAnchorToTriggerChanged() {
+        if (this.isOpen) {
+            this.startPositioning();
+        }
+    }
+    onTriggerIdChanged() {
+        if (this.isOpen) {
+            this.startPositioning();
+        }
+    }
     onSelectedValuesChanged(newValues, initialRender = false) {
         if (this.options && this.options.length > 0) {
             const flatOptions = this.options.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
@@ -375,14 +2136,31 @@ const XplDropdown = class {
     }
     onIsOpenStateChange(newValue) {
         this.isOpenChange.emit(newValue);
+        if (newValue) {
+            this.startPositioning();
+        }
+        else {
+            this.stopPositioning();
+        }
     }
-    onWindowScroll() {
-        if (this.requestAnimationFrameId) {
-            cancelAnimationFrame(this.requestAnimationFrameId);
+    connectedCallback() {
+        document.addEventListener('mousedown', this.handleClickOutside);
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        this.stopPositioning();
+    }
+    componentWillLoad() {
+        this.handleSelect = this.handleSelect.bind(this);
+        if (this.selectedValues) {
+            this.onSelectedValuesChanged(this.selectedValues, true);
         }
-        this.requestAnimationFrameId = requestAnimationFrame(() => {
-            this.updateDropdownPosition();
-        });
+    }
+    componentDidLoad() {
+        if (this.isOpen)
+            this.startPositioning();
     }
     async handleSelect(e, { component }) {
         const { hostElement, mode, options, update } = this;
@@ -421,22 +2199,30 @@ const XplDropdown = class {
         if (update)
             update(e, { component: this });
     }
-    componentWillLoad() {
-        this.handleSelect = this.handleSelect.bind(this);
-        if (this.selectedValues) {
-            this.onSelectedValuesChanged(this.selectedValues, true);
+    startPositioning() {
+        if (!this.anchorToTrigger || !this.triggerId) {
+            return;
         }
+        const triggerEl = document.getElementById(this.triggerId);
+        if (!triggerEl)
+            return;
+        this.stopPositioning();
+        this.cleanupAutoUpdate = autoUpdate(triggerEl, this.hostElement, () => {
+            this.updateDropdownPosition(triggerEl);
+        });
     }
-    connectedCallback() {
-        document.addEventListener('mousedown', this.handleClickOutside.bind(this));
-        document.addEventListener('keydown', this.handleKeyDown);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('mousedown', this.handleClickOutside);
-        document.removeEventListener('keydown', this.handleKeyDown);
-    }
-    componentDidLoad() {
-        this.updateDropdownPosition();
+    stopPositioning() {
+        var _a;
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = null;
+        }
+        this.hostElement.style.left = '';
+        this.hostElement.style.top = '';
+        this.hostElement.style.width = '';
+        (_a = this.hostElement
+            .querySelector('.xpl-dropdown-list')) === null || _a === void 0 ? void 0 : _a.style.removeProperty('max-height');
+        this.hostElement.classList.remove('xpl-dropdown--above', 'xpl-dropdown--below');
     }
     render() {
         const { isOpen } = this;
@@ -447,15 +2233,21 @@ const XplDropdown = class {
                 var { groupName, options: opts, subtitle } = _a, properties = __rest$1(_a, ["groupName", "options", "subtitle"]);
                 return groupName ? (index.h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties))) : (index.h("xpl-dropdown-option", Object.assign({ subtitle: subtitle }, properties)));
             });
-        return (index.h(index.Host, { key: '82f0becf57013a4f830e7c4aa56e3653b5eb43c5', "aria-expanded": isOpen, class: {
+        return (index.h(index.Host, { key: '9951124106d4123d98db2b9bdc906f51d145c5e6', "aria-expanded": isOpen ? 'true' : 'false', class: {
                 'xpl-dropdown': true,
                 'xpl-dropdown--multi': mode === 'multi',
                 'xpl-dropdown--open': isOpen,
                 'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
-            }, role: "listbox" }, index.h("ul", { key: '59c584beb1e538c2dff25039e8513de5865a80f1', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: 'ff121c50de1a809031ea8be1d271b65946c2fa9a', name: "options" }))));
+            }, role: "listbox" }, index.h("slot", { key: '61b8daf20ef87a8ae7bad8fa494c104d58cc61f8', name: "header" }), index.h("ul", { key: 'ac14c8acf2927b931d4c74673af5f12f5d9514c1', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: 'c820c142bdb64ec4189dd5869d71d4339dc97814', name: "options" }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
+        "anchorToTrigger": [{
+                "onAnchorToTriggerChanged": 0
+            }],
+        "triggerId": [{
+                "onTriggerIdChanged": 0
+            }],
         "selectedValues": [{
                 "onSelectedValuesChanged": 0
             }],
@@ -477,7 +2269,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const XplDropdownGroup = class {
+const DropdownGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
@@ -489,20 +2281,20 @@ const XplDropdownGroup = class {
                 var { groupName: optsGroupName } = _a, properties = __rest(_a, ["groupName"]);
                 return optsGroupName ? (index.h("xpl-dropdown-group", Object.assign({ label: optsGroupName }, properties))) : (index.h("xpl-dropdown-option", Object.assign({}, properties)));
             });
-        return (index.h(index.Host, { key: 'e1bd6d56ea5501e48d8f7fba91af32fbc223d343', role: "group", "aria-label": groupName }, index.h("li", { key: '543d3350cce47b4e96f78c6a411877110a27c842', class: "xpl-dropdown-list-item" }, index.h("xpl-dropdown-heading", { key: '85b5c8675bb3b2eecdb0dc3ffbf09dc9bd824ceb', label: groupName }), index.h("ul", { key: '9dfcd1a43cca4fd431b052e438743d24f872f248', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: 'd5d7d5d03bfde4306f1a8d861f7f2308eaac2bf6', name: "options" })))));
+        return (index.h(index.Host, { key: 'fae7d1999fae7148c2d19e14676b8c7a6f9c7810', role: "group", "aria-label": groupName }, index.h("li", { key: '8696234c09cce33be47e6481d757c2209d1fe04e', class: "xpl-dropdown-list-item" }, index.h("xpl-dropdown-heading", { key: 'ce4fc6f2b00f58302075e180170f52e333aab08b', label: groupName }), index.h("ul", { key: 'a9015c5ebaaa4ec3858769ad9aaf3f06d806bdbe', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: '2f4bb9a76f1371c4dc0405b2652bc616fa4bb835', name: "options" })))));
     }
 };
 
-const XplDropdownHeading = class {
+const DropdownHeading = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '41de08a2e945b9d6412264a44a04dd65bc125276', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, index.h("span", { key: '15b526b8a4ec46059d8edd3aed61c82d6bc79d64' }, this.label || index.h("slot", { key: '5b8c05d504e56c2852fa8439b15012c73552c190', name: "heading" }))));
+        return (index.h(index.Host, { key: '8f7d858ca1ee011e03b069948b1c948c7693725f', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, index.h("span", { key: '56679ee9d35a995a72249f4494983652bacf0832' }, this.label || index.h("slot", { key: '3e657744c62647b42d249379927fab9ca9a258f6', name: "heading" }))));
     }
 };
 
-const XplDropdownOption = class {
+const DropdownOptionCpnt = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
@@ -510,6 +2302,9 @@ const XplDropdownOption = class {
         this.dropdown = this.hostElement.closest('xpl-dropdown');
     }
     handleClick(ev) {
+        if (!this.dropdown) {
+            return;
+        }
         const { closeOnSelect, mode } = this.dropdown;
         if (ev.x && ev.y) {
             this.dropdown.handleSelect(ev, { component: this });
@@ -518,6 +2313,9 @@ const XplDropdownOption = class {
         }
     }
     handleKeyup(ev) {
+        if (!this.dropdown) {
+            return;
+        }
         const { dropdown } = this;
         const navigationKeys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'Tab'];
         const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
@@ -548,17 +2346,17 @@ const XplDropdownOption = class {
         this.hostElement.removeEventListener('keyup', this.handleKeyup);
     }
     render() {
-        const { label, isSelected, isDisabled, value, subtitle } = this;
-        return (index.h(index.Host, { key: '5065b45c91f2e8c385c70726b4624b62e609dc61', class: {
+        const { label, isSelected, isDisabled, value, subtitle, icon } = this;
+        return (index.h(index.Host, { key: '207cafd793f52598fdbbe3104ff0207261e086c4', class: {
                 'xpl-dropdown-option': true,
                 'xpl-dropdown-option--disabled': isDisabled,
                 'xpl-dropdown-option--selected': isSelected,
-            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, index.h("li", { key: '3a9493d1f0e2f9eff727f001d08c65477372e58b', class: "xpl-dropdown-list-item" }, label || index.h("slot", { key: 'fbebc2fd7f45d9abf4a2be0b306d92b3de8cb090', name: "option" }), subtitle && index.h("span", { key: '987104f21b1843e7350bbd4d8607fcdb1a580131', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, index.h("li", { key: '7e836b82c325050338eff79f23855f55c696f38c', class: "xpl-dropdown-list-item" }, icon && (index.h("xpl-icon", { key: '7b59e353bf038e1db478fab923c07e60d0e1a828', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || index.h("slot", { key: 'aad23fec3435e7cd7e36a57d49e178177d7da7fa', name: "option" }), subtitle && index.h("span", { key: '96fee61dbd072dacf783e164a93fd8dd626e3e53', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     get hostElement() { return index.getElement(this); }
 };
 
-const XplHeaderAccordion = class {
+const HeaderAccordion = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.initialExpanded = false;
@@ -628,7 +2426,7 @@ const XplHeaderAccordion = class {
         this.applyBorderRadiusToLastRow();
     }
     render() {
-        return (index.h(index.Host, { key: '36101a7c73fddd9944c96ed15dd6570b20ae031d', class: "xpl-header-accordion" }, index.h("div", { key: 'a58005a8bafb5d56e73c6a78dc4f88a8285ee8fa', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (index.h("xpl-checkbox", { key: '6e96eb7c2670ac82a0f6b088a93fd09127338328', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), index.h("button", { key: '097ecde99648e1ab397a2b65becdf525e03c21c4', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, index.h("slot", { key: '002e4645b7df25d7725e6f9860c815fe3977fa62', name: "title" }), index.h("xpl-icon", { key: '04492dda041fabc3deeb4031cab2d2ebeae1f766', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), index.h("div", { key: '310457718b09b0481040c83dc73327251be308cd', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, index.h("slot", { key: 'c13229b1538cae02a449bf00483174824de17f3a', name: "content" }))));
+        return (index.h(index.Host, { key: '511ce0498294e0064e94ff14b847f75260c6c7cf', class: "xpl-header-accordion" }, index.h("div", { key: '75550adfe2cff80c32e3fe73bfba5888a4bfc91d', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (index.h("xpl-checkbox", { key: 'd46601b19497594f44b4633228a6f020f29c8914', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), index.h("button", { key: 'b15087f6e34cd0d31e77d5c3b35640b7734ed556', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, index.h("slot", { key: '8f655d108a016212852f0a7138fa82ea386ed26a', name: "title" }), index.h("xpl-icon", { key: 'abe7fb2fe4a19db7bcd2cbed7fec903cbeeaee4d', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), index.h("div", { key: 'e86c0a67e94b24f4c39386e8f728de34242e7344', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, index.h("slot", { key: 'a86303b3cf41724f65e10db14d0f6464c68d49c2', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -7047,19 +8845,19 @@ var require$$0 = {
 	heights: {
 		"16": {
 			width: 16,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M12.48 3.56h-8.94a1.56 1.56 0 0 0-1.32 2.39l4.47 7.05c0.29 0.45 0.78 0.72 1.32 0.73s1.03-0.27 1.32-0.73l4.47-7.05a1.56 1.56 0 1 0-1.32-2.39z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M12.48 3.56h-8.94a1.56 1.56 0 0 0-1.32 2.39l4.47 7.05c0.29 0.45 0.78 0.72 1.32 0.73s1.03-0.27 1.32-0.73l4.47-7.05a1.56 1.56 0 0 0-1.32-2.39z\"></path></g>"
 		},
 		"20": {
 			width: 20,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M15.57 4.44h-11.16a1.94 1.94 0 0 0-1.64 2.98l5.58 8.8c0.36 0.56 0.97 0.9 1.64 0.9s1.28-0.34 1.64-0.9l5.58-8.8a1.94 1.94 0 1 0-1.64-2.98z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M15.57 4.44h-11.16a1.94 1.94 0 0 0-1.64 2.98l5.58 8.8c0.36 0.56 0.97 0.9 1.64 0.9s1.28-0.34 1.64-0.9l5.58-8.8a1.94 1.94 0 0 0-1.64-2.98z\"></path></g>"
 		},
 		"24": {
 			width: 24,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M18.65 5.32h-13.36a2.33 2.33 0 0 0-1.97 3.57l6.68 10.54c0.43 0.68 1.16 1.08 1.97 1.08s1.54-0.4 1.97-1.08l6.68-10.54a2.33 2.33 0 1 0-1.97-3.57z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M18.65 5.32h-13.36a2.33 2.33 0 0 0-1.97 3.57l6.68 10.54c0.43 0.68 1.16 1.08 1.97 1.08s1.54-0.4 1.97-1.08l6.68-10.54a2.33 2.33 0 0 0-1.97-3.57z\"></path></g>"
 		},
 		"32": {
 			width: 32,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M24.96 7.12h-17.88a3.11 3.11 0 0 0-2.63 4.78l8.94 14.11c0.57 0.91 1.56 1.45 2.63 1.44s2.06-0.54 2.63-1.44l8.95-14.11a3.11 3.11 0 1 0-2.64-4.78z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M24.96 7.12h-17.88a3.11 3.11 0 0 0-2.63 4.78l8.94 14.11c0.57 0.91 1.56 1.45 2.63 1.44s2.06-0.54 2.63-1.44l8.95-14.11a3.11 3.11 0 0 0-2.64-4.78z\"></path></g>"
 		}
 	}
 },
@@ -7086,19 +8884,19 @@ var require$$0 = {
 	heights: {
 		"16": {
 			width: 16,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M8.93 2.3c-0.41-0.61-1.43-0.61-1.84 0l-2.09 3.08a1.11 1.11 0 0 0 0.92 1.74h4.18a1.11 1.11 0 1 0 0.92-1.74l-2.09-3.08z\"></path><path fill=\"currentColor\" d=\"M10.1 8.9h-4.18a1.11 1.11 0 1 0-0.92 1.74l2.09 3.08a1.11 1.11 0 0 0 1.84 0l2.09-3.08a1.11 1.11 0 0 0-0.92-1.74z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M8.93 2.3c-0.41-0.61-1.43-0.61-1.84 0l-2.09 3.08a1.11 1.11 0 0 0 0.92 1.74h4.18a1.11 1.11 0 0 0 0.92-1.74l-2.09-3.08z\"></path><path fill=\"currentColor\" d=\"M10.1 8.9h-4.18a1.11 1.11 0 0 0-0.92 1.74l2.09 3.08a1.11 1.11 0 0 0 1.84 0l2.09-3.08a1.11 1.11 0 0 0-0.92-1.74z\"></path></g>"
 		},
 		"20": {
 			width: 20,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M11.14 2.86c-0.52-0.76-1.78-0.76-2.3 0l-2.61 3.85a1.39 1.39 0 0 0 1.15 2.17h5.22a1.39 1.39 0 1 0 1.15-2.17l-2.61-3.85z\"></path><path fill=\"currentColor\" d=\"M12.6 11.1h-5.22a1.39 1.39 0 1 0-1.15 2.17l2.61 3.85a1.39 1.39 0 0 0 2.3 0l2.61-3.85a1.39 1.39 0 0 0-1.15-2.17z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M11.14 2.86c-0.52-0.76-1.78-0.76-2.3 0l-2.61 3.85a1.39 1.39 0 0 0 1.15 2.17h5.22a1.39 1.39 0 0 0 1.15-2.17l-2.61-3.85z\"></path><path fill=\"currentColor\" d=\"M12.6 11.1h-5.22a1.39 1.39 0 0 0-1.15 2.17l2.61 3.85a1.39 1.39 0 0 0 2.3 0l2.61-3.85a1.39 1.39 0 0 0-1.15-2.17z\"></path></g>"
 		},
 		"24": {
 			width: 24,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M13.35 3.43c-0.62-0.92-2.13-0.92-2.76 0l-3.12 4.62a1.66 1.66 0 0 0 1.38 2.59h6.24a1.66 1.66 0 1 0 1.38-2.59l-3.12-4.62z\"></path><path fill=\"currentColor\" d=\"M15.09 13.3h-6.24a1.66 1.66 0 1 0-1.38 2.59l3.12 4.62a1.66 1.66 0 0 0 2.76 0l3.12-4.62a1.66 1.66 0 0 0-1.38-2.59z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M13.35 3.43c-0.62-0.92-2.13-0.92-2.76 0l-3.12 4.62a1.66 1.66 0 0 0 1.38 2.59h6.24a1.66 1.66 0 0 0 1.38-2.59l-3.12-4.62z\"></path><path fill=\"currentColor\" d=\"M15.09 13.3h-6.24a1.66 1.66 0 0 0-1.38 2.59l3.12 4.62a1.66 1.66 0 0 0 2.76 0l3.12-4.62a1.66 1.66 0 0 0-1.38-2.59z\"></path></g>"
 		},
 		"32": {
 			width: 32,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M17.86 4.59c-0.83-1.22-2.86-1.22-3.68 0l-4.18 6.18a2.22 2.22 0 0 0 1.84 3.47h8.36a2.22 2.22 0 1 0 1.84-3.47l-4.18-6.18z\"></path><path fill=\"currentColor\" d=\"M20.2 17.8h-8.36a2.22 2.22 0 1 0-1.84 3.47l4.18 6.18a2.22 2.22 0 0 0 3.68 0l4.18-6.18a2.22 2.22 0 0 0-1.84-3.47z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M17.86 4.59c-0.83-1.22-2.86-1.22-3.68 0l-4.18 6.18a2.22 2.22 0 0 0 1.84 3.47h8.36a2.22 2.22 0 0 0 1.84-3.47l-4.18-6.18z\"></path><path fill=\"currentColor\" d=\"M20.2 17.8h-8.36a2.22 2.22 0 0 0-1.84 3.47l4.18 6.18a2.22 2.22 0 0 0 3.68 0l4.18-6.18a2.22 2.22 0 0 0-1.84-3.47z\"></path></g>"
 		}
 	}
 },
@@ -7177,19 +8975,19 @@ var require$$0 = {
 	heights: {
 		"16": {
 			width: 16,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M9.33 3.02c-0.29-0.45-0.78-0.72-1.32-0.73s-1.03 0.27-1.32 0.73l-4.47 7.05a1.56 1.56 0 1 0 1.32 2.39h8.94a1.56 1.56 0 0 0 1.32-2.39l-4.47-7.05z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M9.33 3.02c-0.29-0.45-0.78-0.72-1.32-0.73s-1.03 0.27-1.32 0.73l-4.47 7.05a1.56 1.56 0 0 0 1.32 2.39h8.94a1.56 1.56 0 0 0 1.32-2.39l-4.47-7.05z\"></path></g>"
 		},
 		"20": {
 			width: 20,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M11.63 3.76c-0.36-0.56-0.97-0.9-1.64-0.9s-1.28 0.34-1.64 0.9l-5.58 8.8a1.94 1.94 0 1 0 1.64 2.98h11.16a1.94 1.94 0 0 0 1.64-2.98l-5.58-8.8z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M11.63 3.76c-0.36-0.56-0.97-0.9-1.64-0.9s-1.28 0.34-1.64 0.9l-5.58 8.8a1.94 1.94 0 0 0 1.64 2.98h11.16a1.94 1.94 0 0 0 1.64-2.98l-5.58-8.8z\"></path></g>"
 		},
 		"24": {
 			width: 24,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M13.94 4.51c-0.43-0.68-1.16-1.08-1.97-1.08s-1.54 0.4-1.97 1.08l-6.68 10.54a2.33 2.33 0 1 0 1.97 3.57h13.36a2.33 2.33 0 0 0 1.97-3.57l-6.68-10.54z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M13.94 4.51c-0.43-0.68-1.16-1.08-1.97-1.08s-1.54 0.4-1.97 1.08l-6.68 10.54a2.33 2.33 0 0 0 1.97 3.57h13.36a2.33 2.33 0 0 0 1.97-3.57l-6.68-10.54z\"></path></g>"
 		},
 		"32": {
 			width: 32,
-			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M18.65 6.03c-0.57-0.91-1.56-1.45-2.63-1.44s-2.06 0.54-2.63 1.44l-8.95 14.11a3.11 3.11 0 1 0 2.64 4.78h17.88a3.11 3.11 0 0 0 2.63-4.78l-8.94-14.11z\"></path></g>"
+			path: "<g fill=\"currentColor\"><path fill=\"currentColor\" d=\"M18.65 6.03c-0.57-0.91-1.56-1.45-2.63-1.44s-2.06 0.54-2.63 1.44l-8.95 14.11a3.11 3.11 0 0 0 2.64 4.78h17.88a3.11 3.11 0 0 0 2.63-4.78l-8.94-14.11z\"></path></g>"
 		}
 	}
 },
@@ -13527,7 +15325,7 @@ var apolloIcons = /*@__PURE__*/getDefaultExportFromCjs(apolloIconsExports);
 
 const xplIconCss = () => `.xpl-icon{align-items:center;display:grid;justify-content:center}`;
 
-const XplIcon = class {
+const Icon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
@@ -13546,15 +15344,15 @@ const XplIcon = class {
         let wrapperClasses = 'xpl-icon__wrapper ';
         if (this.backgroundColor)
             wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
-        return (index.h(index.Host, { key: '485fe60cec37994f94402756a16f068176b1cbbb' }, index.h("figure", { key: '9767c5743a3520c36f7733b7f1bf92847af78eb2', class: wrapperClasses }, index.h("span", { key: 'f11637a97e7a0d1a28572743d8facd78c0b902fc', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (index.h(index.Host, { key: 'c622a660e3ed7d9dce7dc08a868360ffc43f2f8d' }, index.h("figure", { key: 'c12f8de568fa6e652914fbc894a1269f6085d880', class: wrapperClasses }, index.h("span", { key: 'a8386f0d0fc3848a36b5120dd5f24356c403d0f5', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), index.h("figcaption", { key: '5293e424f6ef17fc99e7ffad8615861b1ac0443d' }, this.icon, " icon"))));
+            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), index.h("figcaption", { key: '4d56222dc219feedd1e8e2c957ca01728a845b56' }, this.icon, " icon"))));
     }
 };
-XplIcon.style = xplIconCss();
+Icon.style = xplIconCss();
 
-const XplInput = class {
+const Input = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.focusEvent = index.createEvent(this, "focusEvent", 7);
@@ -13571,6 +15369,8 @@ const XplInput = class {
         this.hideTriggerOnSelect = false;
         this.hideFileNames = false;
         this.hideAcceptText = false;
+        this.defaultCountry = 'US';
+        this.isInternational = true;
         this.type = 'text';
         this.valueChanged = (event) => {
             const target = event.target;
@@ -13578,6 +15378,7 @@ const XplInput = class {
         };
         this.characterCount = 0;
         this.passwordVisible = false;
+        this.hasPreSlotContent = false;
         this.handleFocus = (ev) => {
             this.focusEvent.emit(ev);
         };
@@ -13591,16 +15392,40 @@ const XplInput = class {
             const { value } = ev.target;
             this.inputEvent.emit(value);
         };
+        this.syncPreSlotContent = () => {
+            const hasSlotted = this.hasDirectPreSlotChild();
+            if (hasSlotted !== this.hasPreSlotContent) {
+                this.hasPreSlotContent = hasSlotted;
+            }
+        };
     }
     updateCharacterCount() {
         this.characterCount = this.input.value.length;
     }
+    hasDirectPreSlotChild() {
+        return Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'pre');
+    }
     componentWillLoad() {
         if (this._id === undefined || this._id === null || this._id === '')
             this._id = v4.v4();
         if (this.multiline && this.maxCharacterCount !== undefined) {
             this.characterCount = this.value !== undefined ? this.value.length : 0;
         }
+        if (!this.multiline) {
+            this.hasPreSlotContent = this.hasDirectPreSlotChild();
+        }
+    }
+    componentDidLoad() {
+        if (this.multiline)
+            return;
+        if (typeof MutationObserver !== 'undefined') {
+            this.preSlotObserver = new MutationObserver(this.syncPreSlotContent);
+            this.preSlotObserver.observe(this.el, { childList: true });
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.preSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     renderInput() {
         switch (this.type) {
@@ -13612,8 +15437,13 @@ const XplInput = class {
                 return (index.h("xpl-input-date", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, post: this.post, pre: this.pre, max: this.max, min: this.min, dateFormat: this.dateFormat, mode: this.mode }));
             case 'time':
                 return (index.h("xpl-input-time", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, max: this.max, min: this.min, step: this.step, mode: this.mode, timeFormat: this.timeFormat, allowCustomOption: this.allowCustomOption }));
+            case 'phone':
+                return (index.h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, defaultCountry: this.defaultCountry, preferredCountries: this.preferredCountries, isInternational: this.isInternational }));
             default:
-                return (index.h("div", { class: "xpl-input-wrapper" }, this.pre && !this.multiline && (index.h("label", { class: "xpl-input-pre", htmlFor: this._id }, this.pre)), !this.multiline ? (index.h("input", { autocomplete: this.autocomplete, disabled: this.disabled, id: this._id, max: this.max, min: this.min, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
+                return (index.h("div", { class: "xpl-input-wrapper" }, !this.multiline && (index.h("label", { class: {
+                        'xpl-input-pre': true,
+                        'xpl-input-pre--hidden': !this.pre && !this.hasPreSlotContent,
+                    }, htmlFor: this._id }, index.h("slot", { name: "pre" }, this.pre))), !this.multiline ? (index.h("input", { autocomplete: this.autocomplete, disabled: this.disabled, id: this._id, max: this.max, min: this.min, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
                         this.input = el;
                     }, required: this.required, step: this.step, type: this.type, value: this.value, onChange: this.valueChanged, onFocus: this.handleFocus, onBlur: this.handleBlur, onInput: this.handleInput })) : (index.h("textarea", { disabled: this.disabled, id: this._id, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
                         this.input = el;
@@ -13633,14 +15463,15 @@ const XplInput = class {
             this.characterCount > this.maxCharacterCount) {
             hasError = true;
         }
-        return (index.h(index.Host, { key: 'c682985a3d592f9f9902a16013a5d00f40ce5e44', class: {
+        return (index.h(index.Host, { key: 'c0d3b87b9dca0c4f75c15accb6542d270a43f3d3', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': hasError,
                 'xpl-input--readonly': this.readonly,
                 [`xpl-input--${this.type}`]: true,
-            } }, this.label && (index.h("label", { key: '21d863221e85a255f3dc5e662139b7abc0e72907', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && index.h("small", { key: '25d078a667c8b9cbf4d1b5d1f412c3d0e736013a' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("label", { key: '7e13c1fc18496bdf50cdb2a239c113c182b83f18', class: "xpl-input-error", htmlFor: this._id }, index.h("xpl-icon", { key: '900d641cfcd94d9f6cc85ba34e1e211448c203df', icon: "alert-circle", size: 16 }), index.h("span", { key: '74f7868861f5c262038bee3de2faeecc46b2454d' }, this.error)))));
+            } }, this.label && (index.h("label", { key: '1842998b20424a952ff618ed15d611d59d2e9eba', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && index.h("small", { key: 'ccfe57e608f789d643d2219091922cf259971b12' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("label", { key: '3a3147f7e1be2d1f109a400baf005289bb37d60f', class: "xpl-input-error", htmlFor: this._id }, index.h("xpl-icon", { key: 'b4960e9243db0126ca5d6d3b3226c551927c2f39', icon: "alert-circle", size: 16 }), index.h("span", { key: 'd8f524d135f664c876ae83594e113967bb933cca' }, this.error)))));
     }
+    get el() { return index.getElement(this); }
 };
 
 const hslaToRgba = (hue, saturation, lightness, alpha) => {
@@ -13817,7 +15648,7 @@ const fallbackColorValues = {
     b: 0,
     a: 1,
 };
-const XplInputColor = class {
+const InputColor = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.inputChange = index.createEvent(this, "inputChange", 7);
@@ -14006,16 +15837,16 @@ const XplInputColor = class {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (index.h(index.Host, { key: '89789ef1ae21c4c555f67fd1a09159765eb1ef9e', class: "xpl-input-color" }, index.h("xpl-popover", { key: '2eececd5d3592e0111bc507892eb7f7cd8bad8e6', disabled: this.disabled, display: "menu" }, index.h("div", { key: '56d4a7bb25c3cdeb09d38d2fa986fe7595c453c0', slot: "trigger" }, index.h("div", { key: 'e49c0143d634a99cc547ead6af263716a28dd9ff', class: {
+        return (index.h(index.Host, { key: 'a8cdba9ff504fbeaf7b21167b778d8cf00216a1a', class: "xpl-input-color" }, index.h("xpl-popover", { key: '535497f6aba0e7e9e65b894cd8c62cebe8ad3dd5', disabled: this.disabled, display: "menu" }, index.h("div", { key: '436c51111938bbbef99698b94bd5c3123bc0b42d', slot: "trigger" }, index.h("div", { key: '09e8f57c0d1a35d1b0a5785ebb141db62c3db4d2', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, index.h("span", { key: 'e65efc371fab736e640f375446c22340f801b8a2', class: "xpl-input-color__color", style: {
+            } }, index.h("span", { key: '76da6216e95d48dd5cdbb890e7fe14cf1be85c6b', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (index.h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (index.h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (index.h("xpl-icon", { key: 'b71aa6dd82c16ac328da186920e04b2992341317', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (index.h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (index.h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (index.h("xpl-icon", { key: 'c4a560be47d17c98f353c0e324c0f9025f535fae', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), index.h("div", { key: '8e6add90e733d299cea94559dcbc29dd4e64d9cd', class: "xpl-input-color__menu" }, index.h("div", { key: 'a488c9b7ef3ff0cabbbb4bf5a631f209034a2539', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), index.h("div", { key: '844a66fa0523b133ce3e2b6d83e395254e9b513f', class: "xpl-input-color__menu" }, index.h("div", { key: 'c687aaa94b122258e09cffabcc5029905ddccb27', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el;
             }, style: {
                 background: [
@@ -14023,9 +15854,9 @@ const XplInputColor = class {
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, index.h("div", { key: '542a5cafd651e6b49f813f6eecb46088b0b6f97c', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), index.h("div", { key: 'fd3268874bb0c0bc22c2d2db15dd50c38d3ae70a', class: "xpl-input-color__grid" }, index.h("input", { key: '08ea52b5c2bbc2800b2ad5cca6981813e4578ce5', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
+            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, index.h("div", { key: '7e65660cef09fc5ae0c9dc0d49fe7769ad15b55a', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), index.h("div", { key: '5e76247d0d59fca5500416ddeaca53784dc42209', class: "xpl-input-color__grid" }, index.h("input", { key: '5b891dd55f6d4f5d1242d142c9af8a3af496e398', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
                 this.colorInputElements.hue = el;
-            } }), index.h("input", { key: '1692e362cb1e48446f33e2f82c5988546ad6a6f0', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
+            } }), index.h("input", { key: 'ae20b7cbfa6303c6615afee0fc35d0dda3bc1f70', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
                 this.colorInputElements.alpha = el;
             }, style: {
                 backgroundImage: [
@@ -14035,9 +15866,9 @@ const XplInputColor = class {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), index.h("div", { key: '5de3d1979fbb4c4a2892961fcbd7e6fc2d2723b4', class: "xpl-input-color__preview", style: {
+            } }), index.h("div", { key: 'c4b884401f5324e37e09637785a2148ef5c99112', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), index.h("div", { key: '3a660bdbb902bc8bfddb8c423f2462404b0221b8', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
+            } })), index.h("div", { key: '5d8eff1bf9e51bd44116c01e3bfd016414662d92', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
             .filter(([key]) => ['hex', 'r', 'g', 'b', 'a'].includes(key))
             .map(([key]) => (index.h("xpl-input", { key: key, label: key.toLocaleUpperCase(), name: `color-${key}-input`, placeholder: key === 'hex' ? '793EF7' : '0', value: this.colorValues[key], ref: (elRef) => {
                 this.colorInputElements[key] = elRef;
@@ -14056,10 +15887,33 @@ const XplInputColor = class {
     }; }
 };
 
+function isInsideFixedPosition(element) {
+    let el = element.parentElement;
+    while (el && el !== document.body && el !== document.documentElement) {
+        if (getComputedStyle(el).position === 'fixed') {
+            return true;
+        }
+        el = el.parentElement;
+    }
+    return false;
+}
+function getNearestScrollableAncestor(element) {
+    let el = element.parentElement;
+    while (el && el !== document.body && el !== document.documentElement) {
+        const style = getComputedStyle(el);
+        const overflow = style.overflow + style.overflowX + style.overflowY;
+        if (/auto|scroll/.test(overflow)) {
+            return el;
+        }
+        el = el.parentElement;
+    }
+    return undefined;
+}
+
 const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate
     ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'
     : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
-const XplInputDate = class {
+const InputDate = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.valueChange = index.createEvent(this, "valueChange", 7);
@@ -14067,6 +15921,7 @@ const XplInputDate = class {
         this.rangeSelected = index.createEvent(this, "rangeSelected", 7);
         this.dateFormat = 'Y-m-d';
         this.mode = 'single';
+        this.flatpickrStaticLayout = false;
         this.valueChanged = (event) => {
             const target = event.target;
             this.valueChange.emit(target.value);
@@ -14079,17 +15934,31 @@ const XplInputDate = class {
         var _a;
         (_a = this.flatpickrInstance) === null || _a === void 0 ? void 0 : _a.setDate(newValue);
     }
-    componentDidLoad() {
-        this.flatpickrInstance = index$1.flatpickr(this.input, {
-            allowInput: true,
-            dateFormat: this.dateFormat,
-            defaultDate: this.value,
-            maxDate: this.max,
-            minDate: this.min,
-            mode: this.mode,
-            nextArrow: arrowSvg(),
-            prevArrow: arrowSvg(true),
-            onClose: (selectedDates) => {
+    connectedCallback() {
+        queueMicrotask(() => this.ensureFlatpickr());
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.flatpickrInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.flatpickrInstance = undefined;
+        this.flatpickrStaticLayout = false;
+        this.unwrapStaleFlatpickrWrapper();
+    }
+    componentDidRender() {
+        this.ensureFlatpickr();
+    }
+    ensureFlatpickr() {
+        if (this.flatpickrInstance || !this.input || !this.el.isConnected) {
+            return;
+        }
+        this.unwrapStaleFlatpickrWrapper();
+        this.initFlatpickr();
+    }
+    initFlatpickr() {
+        const insideFixed = isInsideFixedPosition(this.el);
+        this.flatpickrInstance = index$1.flatpickr(this.input, Object.assign(Object.assign({ allowInput: true }, (insideFixed
+            ? { static: true }
+            : { appendTo: getNearestScrollableAncestor(this.el) })), { dateFormat: this.dateFormat, defaultDate: this.value, maxDate: this.max, minDate: this.min, mode: this.mode, nextArrow: arrowSvg(), prevArrow: arrowSvg(true), onClose: (selectedDates) => {
                 const minRequiredDates = !this.required ? 0 : this.mode === 'single' ? 1 : 2;
                 this.hasErrorState = selectedDates.length < minRequiredDates ? 'required' : null;
                 if (selectedDates.length === 2) {
@@ -14099,20 +15968,41 @@ const XplInputDate = class {
                         end,
                     });
                 }
-            },
+            } }));
+        queueMicrotask(() => {
+            if (this.flatpickrStaticLayout !== insideFixed) {
+                this.flatpickrStaticLayout = insideFixed;
+            }
         });
     }
+    unwrapStaleFlatpickrWrapper() {
+        const { input } = this;
+        const wrapper = input === null || input === void 0 ? void 0 : input.parentElement;
+        if (!(wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.contains('flatpickr-wrapper'))) {
+            return;
+        }
+        const parent = wrapper.parentElement;
+        if (!parent) {
+            return;
+        }
+        while (wrapper.firstChild) {
+            parent.insertBefore(wrapper.firstChild, wrapper);
+        }
+        parent.removeChild(wrapper);
+    }
     render() {
-        return (index.h(index.Host, { key: '6024246dd7a92cc6396c634e8e87d614b1d860e3', class: {
+        return (index.h(index.Host, { key: '35f91387097b7fd5bdc59ff8608c3700470ff367', class: {
                 'xpl-input-date': true,
                 [`xpl-input-date--mode-${this.mode}`]: true,
                 'xpl-input-date--error': !!this.hasErrorState,
-            } }, index.h("div", { key: '0c8fe7b8057715618ae040b64ee2ae6506051200', class: "xpl-input-wrapper" }, this.pre && (index.h("label", { key: 'd0d1048313962c7381b9fc4e2d07b107d42f86d1', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), index.h("input", { key: '3daca1a28baf14701e4b7a9761d2ff91be8dcd96', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
+                'xpl-input-date--flatpickr-static': this.flatpickrStaticLayout,
+            } }, index.h("div", { key: '7f561dba2b2aa7d308d0029a20ace5d918368afc', class: "xpl-input-wrapper" }, this.pre && (index.h("label", { key: '2e87d6e22a2a69db7e91c69fb3d59f81d8358e52', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), index.h("input", { key: '53d05e6b6b637e298f31cb1f2b9c56d9d597688f', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
                 this.input = el;
             }, onChange: (event) => {
                 this.valueChanged(event);
-            } }), index.h("xpl-icon", { key: '82c57c4694c088debfb710e37bd90b5132fa3339', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (index.h("label", { key: '553fa633312ed0adf1fd38352f40142e2b48eeaa', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), index.h("xpl-icon", { key: '45c1d48fe6a312855cf3bd90e139d060821c4ba4', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (index.h("label", { key: '037657e9a3cecc054d95b6fd835b58885eef8042', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "hasErrorState": [{
                 "onHasErrorStateChanged": 0
@@ -14123,7 +16013,7 @@ const XplInputDate = class {
     }; }
 };
 
-const XplInputFile = class {
+const InputFile = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.inputChange = index.createEvent(this, "inputChange", 7);
@@ -14159,18 +16049,18 @@ const XplInputFile = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '984964735a57f0c1ae83b7a6e9ad548b8b732694', class: {
+        return (index.h(index.Host, { key: '87df3edce40c74988426ba9fcef4bc3f5740c56b', class: {
                 'xpl-input-file': true,
                 'xpl-input-file--hide-trigger-on-select': this.hideTriggerOnSelect,
                 'xpl-input-file--disabled': this.disabled,
-            } }, index.h("span", { key: '20da96646dda47226058869a6a3c188aa602ae7b', class: {
+            } }, index.h("span", { key: '11e4c220751ce3f06fd15a741a1f8b81d98c18bc', class: {
                 'xpl-input-file__trigger-wrapper': true,
                 'xpl-input-file__trigger-wrapper--hidden': this.hideTriggerOnSelect && ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) > 0,
-            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, index.h("slot", { key: 'd6355378f46c6a6edd193839e3ff24bd241db9b6', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (index.h("ul", { key: '48a7c3ff9668c7a7ad3e1f719c05f0439db0eb98', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (index.h("li", { class: "xpl-input-file__file-item" }, index.h("span", { class: "xpl-text-callout" }, file.name), index.h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, index.h("slot", { key: '6daba4f9e520c12a791bfd18f2894e55f0da86f4', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (index.h("ul", { key: '3459f9c3e8618962c02f1e25e6b80f63fe4d593d', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (index.h("li", { class: "xpl-input-file__file-item" }, index.h("span", { class: "xpl-text-callout" }, file.name), index.h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.onRemoveFileByIndex(fileIndex);
-            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (index.h("span", { key: '81a892b3c7cac161c4fe893b9e627055d43a13c8', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), index.h("input", { key: 'bb3e89c64ae62748b3e4afd5f80fcede37ae7b3a', onChange: this.handleFileChange, type: "file", ref: (el) => {
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (index.h("span", { key: '2c8646cd5ef7e235e75c68bf4832ce1d9c578493', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), index.h("input", { key: 'd303ac9e074e8031ed2d695cc85eef32ef40f058', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }
@@ -14182,6 +16072,512 @@ const XplInputFile = class {
     }; }
 };
 
+const PHONE_COUNTRIES = [
+    { countryCode: 'US', dialCode: '+1', name: 'United States' },
+    { countryCode: 'CA', dialCode: '+1', name: 'Canada' },
+    { countryCode: 'GB', dialCode: '+44', name: 'United Kingdom' },
+    { countryCode: 'AU', dialCode: '+61', name: 'Australia' },
+    { countryCode: 'DE', dialCode: '+49', name: 'Germany' },
+    { countryCode: 'FR', dialCode: '+33', name: 'France' },
+    { countryCode: 'ES', dialCode: '+34', name: 'Spain' },
+    { countryCode: 'IT', dialCode: '+39', name: 'Italy' },
+    { countryCode: 'NL', dialCode: '+31', name: 'Netherlands' },
+    { countryCode: 'BE', dialCode: '+32', name: 'Belgium' },
+    { countryCode: 'AT', dialCode: '+43', name: 'Austria' },
+    { countryCode: 'CH', dialCode: '+41', name: 'Switzerland' },
+    { countryCode: 'PL', dialCode: '+48', name: 'Poland' },
+    { countryCode: 'IE', dialCode: '+353', name: 'Ireland' },
+    { countryCode: 'PT', dialCode: '+351', name: 'Portugal' },
+    { countryCode: 'SE', dialCode: '+46', name: 'Sweden' },
+    { countryCode: 'NO', dialCode: '+47', name: 'Norway' },
+    { countryCode: 'DK', dialCode: '+45', name: 'Denmark' },
+    { countryCode: 'FI', dialCode: '+358', name: 'Finland' },
+    { countryCode: 'NZ', dialCode: '+64', name: 'New Zealand' },
+    { countryCode: 'JP', dialCode: '+81', name: 'Japan' },
+    { countryCode: 'CN', dialCode: '+86', name: 'China' },
+    { countryCode: 'IN', dialCode: '+91', name: 'India' },
+    { countryCode: 'BR', dialCode: '+55', name: 'Brazil' },
+    { countryCode: 'MX', dialCode: '+52', name: 'Mexico' },
+    { countryCode: 'ZA', dialCode: '+27', name: 'South Africa' },
+    { countryCode: 'SG', dialCode: '+65', name: 'Singapore' },
+    { countryCode: 'HK', dialCode: '+852', name: 'Hong Kong' },
+    { countryCode: 'KR', dialCode: '+82', name: 'South Korea' },
+];
+function getCountryByCode(countryCode) {
+    return PHONE_COUNTRIES.find((c) => c.countryCode === countryCode);
+}
+function getCountryByDialCode(dialCode) {
+    return PHONE_COUNTRIES.find((c) => c.dialCode === dialCode);
+}
+function parseE164(value) {
+    if (!value || !value.startsWith('+'))
+        return null;
+    const digits = value.slice(1).replace(/\D/g, '');
+    if (!digits.length)
+        return null;
+    const sorted = [...PHONE_COUNTRIES].sort((a, b) => b.dialCode.replace(/\D/g, '').length - a.dialCode.replace(/\D/g, '').length);
+    const matchedCountry = sorted.find((country) => {
+        const codeDigits = country.dialCode.slice(1).replace(/\D/g, '');
+        return digits.startsWith(codeDigits);
+    });
+    if (!matchedCountry)
+        return null;
+    const codeDigits = matchedCountry.dialCode.slice(1).replace(/\D/g, '');
+    const nationalNumber = digits.slice(codeDigits.length);
+    return { dialCode: matchedCountry.dialCode, nationalNumber };
+}
+function toE164(dialCode, nationalNumber) {
+    const digits = (dialCode.slice(1) + nationalNumber).replace(/\D/g, '');
+    return digits.length ? `+${digits}` : '';
+}
+
+function digitsOnly(value) {
+    return (value || '').replace(/\D/g, '');
+}
+function getMaxNationalNumberLength(countryCode) {
+    switch (countryCode) {
+        case 'US':
+        case 'CA':
+        case 'MX':
+        case 'JP':
+        case 'IN':
+        case 'KR':
+            return 10;
+        case 'GB':
+        case 'DE':
+        case 'AT':
+        case 'CH':
+        case 'BR':
+        case 'CN':
+            return 11;
+        case 'AU':
+        case 'FR':
+            return 9;
+        default:
+            return 15;
+    }
+}
+function getPlaceholderPattern(countryCode) {
+    switch (countryCode) {
+        case 'US':
+        case 'CA':
+            return '000 000 0000';
+        case 'GB':
+            return '0000 000 0000';
+        case 'AU':
+            return '0 000 000 000';
+        case 'DE':
+        case 'AT':
+        case 'CH':
+            return '000 0000000';
+        case 'FR':
+            return '0 00 00 00 00';
+        case 'BR':
+            return '00 00000 0000';
+        case 'MX':
+            return '000 000 0000';
+        case 'JP':
+            return '000 0000 0000';
+        case 'CN':
+            return '000 0000 0000';
+        case 'IN':
+            return '00000 00000';
+        case 'KR':
+            return '000 0000 0000';
+        default:
+            return '000 000 0000';
+    }
+}
+function formatUSCA(d) {
+    const len = Math.min(d.length, 10);
+    if (len <= 3)
+        return d.slice(0, len);
+    if (len <= 6)
+        return `${d.slice(0, 3)} ${d.slice(3, len)}`;
+    return `${d.slice(0, 3)} ${d.slice(3, 6)} ${d.slice(6, len)}`;
+}
+function formatGB(d) {
+    const len = Math.min(d.length, 11);
+    if (len <= 4)
+        return d.slice(0, len);
+    if (len <= 7)
+        return `${d.slice(0, 4)} ${d.slice(4, len)}`;
+    return `${d.slice(0, 4)} ${d.slice(4, 7)} ${d.slice(7, len)}`;
+}
+function formatAU(d) {
+    const len = Math.min(d.length, 9);
+    if (len <= 1)
+        return d.slice(0, len);
+    if (len <= 4)
+        return `${d.slice(0, 1)} ${d.slice(1, len)}`;
+    if (len <= 7)
+        return `${d.slice(0, 1)} ${d.slice(1, 4)} ${d.slice(4, len)}`;
+    return `${d.slice(0, 1)} ${d.slice(1, 4)} ${d.slice(4, 7)} ${d.slice(7, len)}`;
+}
+function formatDE(d) {
+    const len = Math.min(d.length, 11);
+    if (len <= 3)
+        return d.slice(0, len);
+    return `${d.slice(0, 3)} ${d.slice(3, len)}`;
+}
+function formatFR(d) {
+    const len = Math.min(d.length, 9);
+    const parts = [];
+    let i = 0;
+    if (len > 0) {
+        parts.push(d.slice(0, 1));
+        i = 1;
+    }
+    while (i < len && i + 2 <= len) {
+        parts.push(d.slice(i, i + 2));
+        i += 2;
+    }
+    if (i < len)
+        parts.push(d.slice(i));
+    return parts.join(' ');
+}
+function formatBR(d) {
+    const len = Math.min(d.length, 11);
+    if (len <= 2)
+        return len ? `(${d}` : '';
+    if (len <= 6)
+        return `(${d.slice(0, 2)}) ${d.slice(2, len)}`;
+    if (len === 7)
+        return `(${d.slice(0, 2)}) ${d.slice(2, len)}`;
+    return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7, len)}`;
+}
+function formatMX(d) {
+    const len = Math.min(d.length, 10);
+    if (len <= 3)
+        return d.slice(0, len);
+    if (len <= 6)
+        return `${d.slice(0, 3)} ${d.slice(3, len)}`;
+    return `${d.slice(0, 3)} ${d.slice(3, 6)} ${d.slice(6, len)}`;
+}
+function formatJP(d) {
+    const len = Math.min(d.length, 10);
+    if (len <= 3)
+        return d.slice(0, len);
+    if (len <= 7)
+        return `${d.slice(0, 3)}-${d.slice(3, len)}`;
+    return `${d.slice(0, 3)}-${d.slice(3, 7)}-${d.slice(7, len)}`;
+}
+function formatCN(d) {
+    const len = Math.min(d.length, 11);
+    if (len <= 3)
+        return d.slice(0, len);
+    if (len <= 7)
+        return `${d.slice(0, 3)} ${d.slice(3, len)}`;
+    return `${d.slice(0, 3)} ${d.slice(3, 7)} ${d.slice(7, len)}`;
+}
+function formatIN(d) {
+    const len = Math.min(d.length, 10);
+    if (len <= 5)
+        return d.slice(0, len);
+    return `${d.slice(0, 5)} ${d.slice(5, len)}`;
+}
+function formatKR(d) {
+    const len = Math.min(d.length, 10);
+    if (len <= 3)
+        return d.slice(0, len);
+    if (len <= 7)
+        return `${d.slice(0, 3)} ${d.slice(3, len)}`;
+    return `${d.slice(0, 3)} ${d.slice(3, 7)} ${d.slice(7, len)}`;
+}
+function formatGeneric(d) {
+    const len = d.length;
+    if (len <= 3)
+        return d;
+    const groups = [];
+    let i = 0;
+    while (i < len) {
+        const take = len - i >= 4 ? 4 : 3;
+        groups.push(d.slice(i, i + take));
+        i += take;
+    }
+    return groups.join(' ');
+}
+function formatNationalNumber(digits, countryCode) {
+    if (!digits)
+        return '';
+    const d = digits.replace(/\D/g, '');
+    switch (countryCode) {
+        case 'US':
+        case 'CA':
+            return formatUSCA(d);
+        case 'GB':
+            return formatGB(d);
+        case 'AU':
+            return formatAU(d);
+        case 'DE':
+        case 'AT':
+        case 'CH':
+            return formatDE(d);
+        case 'FR':
+            return formatFR(d);
+        case 'BR':
+            return formatBR(d);
+        case 'MX':
+            return formatMX(d);
+        case 'JP':
+            return formatJP(d);
+        case 'CN':
+            return formatCN(d);
+        case 'IN':
+            return formatIN(d);
+        case 'KR':
+            return formatKR(d);
+        default:
+            return formatGeneric(d);
+    }
+}
+function getCursorPositionAfterFormat(prevFormatted, nextFormatted, prevCursor) {
+    if (prevCursor >= prevFormatted.length) {
+        return nextFormatted.length;
+    }
+    const digitsBeforeCursor = digitsOnly(prevFormatted.slice(0, prevCursor)).length;
+    let newPos = 0;
+    let count = 0;
+    for (let i = 0; i < nextFormatted.length; i += 1) {
+        if (/\d/.test(nextFormatted[i])) {
+            count += 1;
+            if (count >= digitsBeforeCursor) {
+                newPos = i + (count === digitsBeforeCursor ? 1 : 0);
+                break;
+            }
+        }
+        newPos = i + 1;
+    }
+    return Math.min(newPos, nextFormatted.length);
+}
+
+function getCountryIconName(countryName) {
+    return countryName.toLowerCase().replace(/ /g, '-');
+}
+const InputPhone = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hasErrorStateChanged = index.createEvent(this, "hasErrorStateChanged", 7);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.lastCursorRef = 0;
+        this.lastFormattedRef = '';
+        this.dropdownOpen = false;
+        this.hasErrorState = null;
+        this.nationalNumber = '';
+        this.searchQuery = '';
+        this.triggerId = `xpl-input-phone-trigger-${v4.v4()}`;
+        this.defaultCountry = 'US';
+        this.isInternational = true;
+        this.handleTriggerClick = () => {
+            if (!this.isEditable)
+                return;
+            this.dropdownOpen = !this.dropdownOpen;
+        };
+        this.handleNumberInput = (ev) => {
+            var _a;
+            const target = ev.target;
+            const raw = target.value || '';
+            this.lastCursorRef = (_a = target.selectionStart) !== null && _a !== void 0 ? _a : 0;
+            this.lastFormattedRef = raw;
+            let nationalDigits;
+            if (this.isInternational && raw.startsWith('+')) {
+                const fullDigits = digitsOnly(raw);
+                const dialDigits = this.effectiveDialCode.slice(1).replace(/\D/g, '');
+                nationalDigits =
+                    dialDigits && fullDigits.startsWith(dialDigits)
+                        ? fullDigits.slice(dialDigits.length)
+                        : fullDigits;
+            }
+            else {
+                nationalDigits = digitsOnly(raw);
+            }
+            const maxLength = getMaxNationalNumberLength(this.effectiveCountryCode);
+            if (nationalDigits.length > maxLength) {
+                nationalDigits = nationalDigits.slice(0, maxLength);
+            }
+            this.nationalNumber = nationalDigits;
+            this.emitValue();
+            target.value = this.displayValue;
+        };
+        this.handleClear = () => {
+            var _a;
+            this.nationalNumber = '';
+            this.emitValue();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.handleDropdownUpdate = (_e, { component }) => {
+            var _a;
+            const dropdown = component !== null && component !== void 0 ? component : this.dropdownRef;
+            if (!dropdown)
+                return;
+            const { options } = dropdown;
+            if (options === null || options === void 0 ? void 0 : options.length) {
+                const flat = options.reduce((acc, curr) => { var _a; return [...acc, ...(curr.groupName ? ((_a = curr.options) !== null && _a !== void 0 ? _a : []) : [curr])]; }, []);
+                const selected = flat.find((o) => o.isSelected);
+                if (selected === null || selected === void 0 ? void 0 : selected.value) {
+                    const country = getCountryByCode(selected.value);
+                    if (country) {
+                        this.selectedCountry = country;
+                        this.emitValue();
+                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                }
+            }
+        };
+    }
+    onDropdownOpenChange(isOpen) {
+        if (isOpen) {
+            this.searchQuery = '';
+        }
+    }
+    onHasErrorStateChanged(newValue) {
+        this.hasErrorStateChanged.emit(newValue);
+    }
+    onValueChange(newValue) {
+        var _a, _b;
+        if (newValue == null || newValue === '') {
+            const country = getCountryByCode(this.defaultCountry) || PHONE_COUNTRIES[0];
+            this.selectedCountry = country;
+            this.nationalNumber = '';
+            return;
+        }
+        const parsed = parseE164(newValue);
+        if (parsed) {
+            if (((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.dialCode) === parsed.dialCode) {
+                this.nationalNumber = parsed.nationalNumber;
+            }
+            else {
+                const defaultForCode = getCountryByCode(this.defaultCountry);
+                const country = (_b = ((defaultForCode === null || defaultForCode === void 0 ? void 0 : defaultForCode.dialCode) === parsed.dialCode ? defaultForCode : undefined)) !== null && _b !== void 0 ? _b : getCountryByDialCode(parsed.dialCode);
+                if (country) {
+                    this.selectedCountry = country;
+                    this.nationalNumber = parsed.nationalNumber;
+                }
+            }
+        }
+        else if (!this.selectedCountry) {
+            this.selectedCountry = getCountryByCode(this.defaultCountry) || PHONE_COUNTRIES[0];
+        }
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.onValueChange(this.value);
+        }
+        else {
+            this.selectedCountry = getCountryByCode(this.defaultCountry) || PHONE_COUNTRIES[0];
+        }
+    }
+    componentDidUpdate() {
+        if (this.inputEl &&
+            this.lastFormattedRef &&
+            typeof this.inputEl.setSelectionRange === 'function') {
+            const newFormatted = this.displayValue;
+            const newCursor = getCursorPositionAfterFormat(this.lastFormattedRef, newFormatted, this.lastCursorRef);
+            this.inputEl.setSelectionRange(newCursor, newCursor);
+            this.lastFormattedRef = '';
+        }
+        else if (this.inputEl && this.lastFormattedRef) {
+            this.lastFormattedRef = '';
+        }
+    }
+    get effectiveCountryCode() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode) !== null && _b !== void 0 ? _b : this.defaultCountry) !== null && _c !== void 0 ? _c : 'US';
+    }
+    get effectiveDialCode() {
+        var _a, _b;
+        return (_b = (_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.dialCode) !== null && _b !== void 0 ? _b : '+1';
+    }
+    get isEditable() {
+        return !this.disabled && !this.readonly;
+    }
+    get orderedCountries() {
+        const preferred = this.preferredCountries || [];
+        const rest = PHONE_COUNTRIES.filter((c) => !preferred.includes(c.countryCode));
+        return [...preferred.map((code) => getCountryByCode(code)).filter(Boolean), ...rest];
+    }
+    get filteredCountries() {
+        const q = this.searchQuery.trim().toLowerCase();
+        if (!q)
+            return this.orderedCountries;
+        return this.orderedCountries.filter((c) => c.name.toLowerCase().includes(q) ||
+            c.dialCode.includes(q) ||
+            c.countryCode.toLowerCase().includes(q));
+    }
+    get displayValue() {
+        if (!this.nationalNumber)
+            return '';
+        return formatNationalNumber(this.nationalNumber, this.effectiveCountryCode);
+    }
+    get effectivePlaceholder() {
+        if (this.placeholder)
+            return this.placeholder;
+        const country = this.selectedCountry;
+        if (!country)
+            return '';
+        return getPlaceholderPattern(country.countryCode);
+    }
+    get dropdownOptions() {
+        return this.filteredCountries.map((c) => {
+            var _a;
+            return ({
+                icon: getCountryIconName(c.name),
+                label: `${c.name} (${c.dialCode})`,
+                value: c.countryCode,
+                isSelected: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode) === c.countryCode,
+            });
+        });
+    }
+    get maxInputLength() {
+        const maxNationalDigits = getMaxNationalNumberLength(this.effectiveCountryCode);
+        return formatNationalNumber('9'.repeat(maxNationalDigits), this.effectiveCountryCode)
+            .length;
+    }
+    emitValue() {
+        const e164 = this.nationalNumber ? toE164(this.effectiveDialCode, this.nationalNumber) : '';
+        this.value = e164 || undefined;
+        this.valueChange.emit(e164 || '');
+        this.validate();
+    }
+    validate() {
+        if (this.required && !this.nationalNumber.trim()) {
+            this.hasErrorState = 'required';
+            return;
+        }
+        this.hasErrorState = null;
+    }
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: 'e966930ecc1ce026b03daf50902ee783d469af03', class: {
+                'xpl-input-phone': true,
+                'xpl-input-phone--error': !!this.hasErrorState,
+                'xpl-input-phone--open': this.dropdownOpen,
+                'xpl-input-phone--domestic': !this.isInternational,
+            } }, index.h("div", { key: 'd594d5345f30bd1165662930abee8b4214b2640d', class: "xpl-input-wrapper" }, this.isInternational && (index.h("button", { key: '64842282265b03cce24e5d80386ea3f56c36b5ad', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (index.h("xpl-icon", { key: '00b0b9e477d285cc3e1c61becfbc056511d99ea2', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), index.h("xpl-icon", { key: '9cc394beb1573e00e0eca641bfa8590a5837ff48', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), index.h("div", { key: 'ade974ac878f7c7bc3aa07f613a3005283d86819', class: "xpl-input-phone__input-wrap" }, this.isInternational && (index.h("span", { key: 'f4907b6f5919184dad42bac3a1071b2bbfe71a06', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), index.h("input", { key: '89dce440dba56953574a05eda46862b4f24f84f8', ref: (el) => {
+                this.inputEl = el;
+            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (index.h("button", { key: '21e63c5dad2d73c8969e71c10cae9c507da8574a', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, index.h("xpl-icon", { key: 'ef1044fd8cc939db7281a8e68e72c54effb55101', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (index.h("xpl-dropdown", { key: '0de330a03e99bdc73af073ad5b20a7b817192307', ref: (el) => {
+                this.dropdownRef = el;
+            }, isOpen: this.dropdownOpen, triggerId: this.triggerId, anchorToTrigger: true, closeOnSelect: true, mode: "single", options: this.dropdownOptions, update: this.handleDropdownUpdate, onIsOpenChange: (e) => {
+                this.dropdownOpen = e.detail;
+            }, "aria-label": "Country" }, index.h("div", { key: '6055decf8f631611786fc8720b17cf84341ef316', slot: "header", class: "xpl-input-phone__search-wrap" }, index.h("xpl-input", { key: '6c53dbde79069dc000214f22d29b17e568fde19f', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+                var _a;
+                this.searchQuery = (_a = e.detail) !== null && _a !== void 0 ? _a : '';
+            } }, index.h("xpl-icon", { key: 'cb57543146d6f874849d518aea4c01f670e4afa4', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "dropdownOpen": [{
+                "onDropdownOpenChange": 0
+            }],
+        "hasErrorState": [{
+                "onHasErrorStateChanged": 0
+            }],
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+
 function format12Hour(time) {
     const [hours, minutes] = time.split(':');
     const ampm = Number(hours) >= 12 ? 'PM' : 'AM';
@@ -14246,7 +16642,7 @@ function generateTimeOptions(step, min, max, timeFormat) {
     });
 }
 
-const XplInputTime = class {
+const InputTime = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.valueChange = index.createEvent(this, "valueChange", 7);
@@ -14354,11 +16750,11 @@ const XplInputTime = class {
         }));
     }
     render() {
-        return (index.h(index.Host, { key: '99b06c895d608dec6226f79f21ceda92225428b7', class: {
+        return (index.h(index.Host, { key: '2dfd50560c047646807e49c2263454286b607a35', class: {
                 'xpl-input-time': true,
                 [`xpl-input-time--mode-${this.mode}`]: true,
                 'xpl-input-time--error': !!this.hasErrorState,
-            } }, index.h("xpl-input", { key: '8cdf996f46d969c243d246fdfe888c22c9c4999b', pre: index.h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (index.h("xpl-dropdown", { key: '5213fcd68da96d726d8b046277233afd6b5b20e8', options: this.options, isOpen: this.showOptions, ref: (el) => {
+            } }, index.h("xpl-input", { key: '5ebb2d5031efae40beae3ac0cf2a40bed5b96ae5', pre: index.h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (index.h("xpl-dropdown", { key: '313ee3020ddf2710e82756f1bc0e260b8959ef9e', options: this.options, isOpen: this.showOptions, ref: (el) => {
                 this.dropdown = el;
             }, class: "xpl-input-time__dropdown" }))));
     }
@@ -14372,7 +16768,7 @@ const XplInputTime = class {
     }; }
 };
 
-const XplModal = class {
+const Modal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.modalClosed = index.createEvent(this, "modalClosed", 7);
@@ -14419,7 +16815,7 @@ const XplModal = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '67a2c3914086a75280693b156c5148a5e86395d2', class: "xpl-modal" }, this.isOpen && index.h("xpl-backdrop", { key: 'e99270d95b4a2267d4fd9c7cbee25672b5f90b7d' }), index.h("dialog", { key: '3493394ff8f93a8a5fb00903d712dd956b886024', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, index.h("div", { key: '66731b3fc2b562fd9f013de173dcf808b3f3ff1a', class: "xpl-modal__header" }, index.h("div", { key: 'b3a712444c7f3607b5f1bf968f46ac83305f6f1a', class: "xpl-modal__title" }, this.variant === 'warning' && (index.h("xpl-icon", { key: 'd96d5df9527b0b96fa793025af3dca9956c5a946', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), index.h("slot", { key: '3d30207ca82fffa6a7c7d7be42b240dc552ab01d', name: "title" }), index.h("xpl-button", { key: '34e0247f1f0de686233c95e236457dd170e3b050', type: "button", class: "xpl-modal__close-button", iconOnly: true, size: "sm", variant: "subtle", onClick: this.handleDialogClose }, index.h("xpl-icon", { key: 'd14026b3e17070767fef2d798d5e4406c011dc7d', icon: "x" }))), index.h("div", { key: 'cdacbf1e44ca7c8601ebcbfdce2ac5b6fb7d6489', class: "xpl-modal__subtitle" }, index.h("slot", { key: '2ade6726ee27396a0aa570ef2b0c88be0361eb01', name: "subtitle" }))), index.h("div", { key: 'f016a31264ee6874ddd19e9dcbde3b3f8c76d2ea', class: "xpl-modal__body" }, index.h("slot", { key: 'ea6016e3c5733a344f1f427ca07267917f66001e', name: "body" })), index.h("div", { key: '7e43b4317efd765152cdb3ea804e1fe9b0036bc4', class: "xpl-modal__footer" }, index.h("slot", { key: '410d2ce31eccc7d2bb0c48091b165de2f85f6986', name: "tertiary" }), index.h("slot", { key: 'd2d64c8203c8b942385c26adfe283af76c12afb3', name: "secondary" }), index.h("slot", { key: '3eb401ad94c36a2aa9f380508c438e5b473020d5', name: "primary" })))));
+        return (index.h(index.Host, { key: '54638721a2e8f0928bf9a3c2c4b40b3d4ad54db2', class: "xpl-modal" }, this.isOpen && index.h("xpl-backdrop", { key: '910ca79829054343c67906d7514a0d34b37832d0' }), index.h("dialog", { key: 'e284d70e8d190e64cb2b8df9a3ae327e7d2b0c00', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, index.h("div", { key: '42f86b8a9ef1cec791aa8b10458db11130d74839', class: "xpl-modal__header" }, index.h("div", { key: '1884139c12c8d06d23454d4840a32fb8a464dd7b', class: "xpl-modal__title" }, this.variant === 'warning' && (index.h("xpl-icon", { key: '5211e56c773f787a7f0a78b45fcf64b2c6eeb44f', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), index.h("slot", { key: '64287ebfac58f8f4c7e0133fb7f1d12781d12126', name: "title" }), index.h("xpl-button", { key: 'd10c9ab2f4c9df1b7e830da76414849a1191beaf', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, index.h("xpl-icon", { key: '55fc8bce80a2a65d522fb3d91b0689ffdb245ed0', icon: "x" }))), index.h("div", { key: '17474a7e0561833a34b8c21319943ff8bde044f3', class: "xpl-modal__subtitle" }, index.h("slot", { key: '5b482ed4b113f17906e4d1106426ae567c937a4e', name: "subtitle" }))), index.h("div", { key: '85e702a36d347ef2b941f5c590504433798020a0', class: "xpl-modal__body" }, index.h("slot", { key: 'a5b9cc60582a82126e000ec9b74aee9376e37253', name: "body" })), index.h("div", { key: 'cff53f9aec109cff62835a9e13d168e434baec73', class: "xpl-modal__footer" }, index.h("slot", { key: 'cafc86918fca71f085c1e8d9c88f244bd5230f78', name: "tertiary" }), index.h("slot", { key: 'a0fbe836ebe814c85571514bb53316429e1e65e1', name: "secondary" }), index.h("slot", { key: 'cbf2a03c2d032fc32d1b0ecd319df7383085cfd3', name: "primary" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -14429,7 +16825,7 @@ const XplModal = class {
     }; }
 };
 
-const XplNavItem = class {
+const NavItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.navOpen = index.createEvent(this, "navOpen", 7);
@@ -14441,15 +16837,15 @@ const XplNavItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8a047443ba48a7812f3804e5639cdd8408f9a647', class: "xpl-nav-item", role: "listitem", onClick: () => {
+        return (index.h(index.Host, { key: '7e852a7daf95bc3f9b4c87bad07504496b6a5863', class: "xpl-nav-item", role: "listitem", onClick: () => {
                 if (this.navControl) {
                     this.onNavToggle();
                 }
-            } }, index.h("slot", { key: '41012bd7a72ed7929deddb136ac5f2c6b30a4c1f', name: "link" }, index.h("slot", { key: 'ce1bb0b1957b5e614fa1ec65cc8973d42bd1dc32', name: "icon" }), index.h("slot", { key: 'd50d2dd931be394e039f1e07651e05e41231627e' }))));
+            } }, index.h("slot", { key: 'a88118864c2bdc808b7de975a530b77916b3750f', name: "link" }, index.h("slot", { key: '91d6a9c350e5de8c6221587795d43e1c315bb8cc', name: "icon" }), index.h("slot", { key: 'e37e0ee23226eb03200b12092e11a7ae47800abf' }))));
     }
 };
 
-const XplPagination = class {
+const Pagination = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.pageChange = index.createEvent(this, "pageChange", 7);
@@ -14512,19 +16908,19 @@ const XplPagination = class {
     render() {
         const disablePrev = this.currentPage <= 1;
         const disableNext = this.currentPage >= this.totalPages;
-        return (index.h(index.Host, { key: '15d277d40eff79d5fb48867b89370759eb9ca8c7', class: `xpl-pagination xpl-pagination__${this.withPageControl ? 'with' : 'no'}-page-control` }, this.withPageControl && (index.h("div", { key: '482bbca4e67c513f715573343f4f2d0f0a7281ee', class: "xpl-pagination__rows-per-page" }, index.h("label", { key: '5a6b3a0f06e6b37b3e6f17021417bac5ce866a69', class: "xpl-pagination__rows-label" }, "Rows per page:"), index.h("xpl-select", { key: '295db6e36fcf861ffd4f25550322552c6641084c', class: "xpl-pagination__rows-per-page-select", choices: this.rowsPerPageOptionsArray.map((option) => ({
+        return (index.h(index.Host, { key: 'a4b8f4ddd9b29563f64282e5728119e1552e5358', class: `xpl-pagination xpl-pagination__${this.withPageControl ? 'with' : 'no'}-page-control` }, this.withPageControl && (index.h("div", { key: '00c0d20d2bc57eebd82105ebafe08a5696496b16', class: "xpl-pagination__rows-per-page" }, index.h("label", { key: '1b28a926bbaa4b888217941bb0bf2d897d79dfbc', class: "xpl-pagination__rows-label" }, "Rows per page:"), index.h("xpl-select", { key: 'f8265a8d87986cfc0afbfcd9d783d767748a8957', class: "xpl-pagination__rows-per-page-select", choices: this.rowsPerPageOptionsArray.map((option) => ({
                 label: option.toString(),
                 value: option.toString(),
                 isSelected: option === this.selectedRowsPerPage,
             })), ref: (el) => {
                 this.rowsPerPageSelectRef = el;
-            } }))), index.h("div", { key: '87c7b3e4bf11be1668512f325139899496f2dd7a', class: "xpl-pagination__pager" }, index.h("button", { key: 'c020001ed61d227b9febd71bb9e411b3eeead985', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, index.h("xpl-icon", { key: '3484457471eb692e3dc140b47f6d8bfd72899fe3', icon: "arrow-left", size: 20 })), index.h("xpl-select", { key: 'f0897900308b3015db171f6b60382dd537f9dd71', class: "xpl-pagination__page-select", choices: Array.from({ length: this.totalPages }, (_, index) => ({
+            } }))), index.h("div", { key: '1444d9005878427c44a573d4f6dd1d674b677228', class: "xpl-pagination__pager" }, index.h("button", { key: '08b98f8c1983543dad93c53d7c71d1aa71b4a45a', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, index.h("xpl-icon", { key: 'dcc26fcb7be5f525b4767d0860766f3a216a93e4', icon: "arrow-left", size: 20 })), index.h("xpl-select", { key: '7ba55fb451e26b31aba360876d8ee3b2bb423e19', class: "xpl-pagination__page-select", choices: Array.from({ length: this.totalPages }, (_, index) => ({
                 label: `Page ${index + 1}`,
                 value: (index + 1).toString(),
                 isSelected: index + 1 === this.currentPage,
             })), "custom-display-value": true, ref: (el) => {
                 this.pageSelectRef = el;
-            } }, index.h("div", { key: '4c2184875c70ceac615c6efd05ef32f65d777152', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), index.h("button", { key: '91c856b44bf3b752280b36f69a53d4c2ed97da19', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, index.h("xpl-icon", { key: '538a33cbddd6d4e26b782e0a3178018b61f0dec4', icon: "arrow-right", size: 20 })))));
+            } }, index.h("div", { key: '9c8adc967a098d954477d9032f6d22a0192948e0', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), index.h("button", { key: '73b5bcbe7ce988c7f5f12ec4ea179bb879f39919', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, index.h("xpl-icon", { key: 'fb95a3807dc37c419195b2c88c2d8dc39b183880', icon: "arrow-right", size: 20 })))));
     }
     static get watchers() { return {
         "currentPage": [{
@@ -14536,6 +16932,22 @@ const XplPagination = class {
     }; }
 };
 
+const XplPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.accent = 'none';
+        this.padding = 'default';
+    }
+    render() {
+        const hasAccent = this.accent !== 'none';
+        return (index.h(index.Host, { key: 'a247ab70a6b062022146b88d95b382f879cb8ee7', class: {
+                'xpl-panel': true,
+                [`xpl-panel--accent-${this.accent}`]: hasAccent,
+                [`xpl-panel--padding-${this.padding}`]: true,
+            } }, hasAccent && index.h("div", { key: '100febab4991a83e7463198331253fe7c7425a1d', class: "xpl-panel__accent" }), index.h("div", { key: 'c0758ab1d25675236ab15f052f45a29432021019', class: "xpl-panel__content" }, index.h("slot", { key: '948ec6423935f7ae825f78a89b456f72a66819a8' }))));
+    }
+};
+
 /**
  * lodash (Custom Build) <https://lodash.com/>
  * Build: `lodash modularize exports="npm" -o ./`
@@ -14987,7 +17399,7 @@ function requireLodash_throttle () {
 var lodash_throttleExports = requireLodash_throttle();
 var throttle = /*@__PURE__*/getDefaultExportFromCjs(lodash_throttleExports);
 
-const XplPopover = class {
+const Popover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.isOpenChange = index.createEvent(this, "isOpenChange", 7);
@@ -15195,16 +17607,16 @@ const XplPopover = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'cf6c4f6b028bfdb9d08f6c8ad2b433c38c1a6f9f' }, index.h("div", { key: '778f9a2f3a5626b19f5446c56d89f9bb6b31ca36', class: {
+        return (index.h(index.Host, { key: '5ed2eca6cac15c5009d0a5440f4a1f1e4dce8260' }, index.h("div", { key: 'f396004504407a1215e76187be06a27e56bd4a49', class: {
                 'xpl-popover': true,
                 [`xpl-popover--${this.actualPosition}`]: true,
                 'xpl-popover--is-open': this.isOpenState,
-            } }, index.h("span", { key: '762401eb1e8d30644dfb55e10f4f5f56abff648f', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
+            } }, index.h("span", { key: '23ac1ebf38617b2a9bd91a1ccfe37d212191f76c', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
                 this.triggerRef = el;
-            } }, index.h("slot", { key: 'c29166383d024f24d6883ff0d4ea85380f849712', name: "trigger" })), this.display === 'arrow' && (index.h("div", { key: 'ef7eb85bc764ab403fc4b069a50606da16e3fcdc', class: "xpl-popover__arrow" }, index.h("svg", { key: '32bc234f1dbc9b07b3b3e2b69e5be222bab02a26', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'd34ec2d2b3e67459981f29ce21810f1fb6b7ba45', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), index.h("path", { key: 'f251a3f748c9d4eb5d84d6416dd0121b3365000b', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), index.h("div", { key: '02632fb4c284db5eabce50f4c27079ba37e10204', class: {
+            } }, index.h("slot", { key: 'ee427ff33db360b11719a886ad724a2bceb64eed', name: "trigger" })), this.display === 'arrow' && (index.h("div", { key: '27fb57c24abdf3eecb6aae0a96f9b6256ee593a3', class: "xpl-popover__arrow" }, index.h("svg", { key: '3456fa0239edafe272047446d3aed0ebd4490275', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'e5de57c7cbf5301548af4eb5f79d14acc459d0a8', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), index.h("path", { key: '784f569c0baf0f6fdfad6bda1a36e6ee43293dce', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), index.h("div", { key: '6ca95b76529ddfa681d4b11a30dceaaa4a3a10c4', class: {
                 'xpl-popover__content': true,
                 [`xpl-popover__content--display-${this.display}`]: true,
-            }, ref: (el) => (this.contentRef = el) }, index.h("slot", { key: '770df2750d5d4875d38eb52bb26788095ce7292d' })))));
+            }, ref: (el) => (this.contentRef = el) }, index.h("slot", { key: '75c6768b7e10ac698d54bdc30d052a6c0e98bd75' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -15217,7 +17629,7 @@ const XplPopover = class {
     }; }
 };
 
-const XplProgress = class {
+const Progress = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.currentStep = 0;
@@ -15232,11 +17644,47 @@ const XplProgress = class {
     render() {
         const className = 'xpl-progress';
         const steps = this.steps || [];
-        return (index.h(index.Host, { key: '573fca634dcf64084cd74f243a52a978c55478d5', class: className }, index.h("div", { key: 'e0bb02b55c6676bed131397188ffa0074dba71ef', class: "xpl-progress-container" }, steps.map((step, index$1) => (index.h("div", { class: `xpl-progress-step ${this.getCircleClass(index$1)}` }, index.h("div", { class: "xpl-progress-step-content" }, index.h("div", { class: "xpl-progress-step-circle" }, index$1 + 1), index.h("div", { class: "xpl-progress-step-text" }, step))))))));
+        return (index.h(index.Host, { key: '13245e4ec2137ea46a325fb6d8d70c41be0307f1', class: className }, index.h("div", { key: 'd88e32dd9227ee388a7a6688863ce0a44354701c', class: "xpl-progress-container" }, steps.map((step, index$1) => (index.h("div", { class: `xpl-progress-step ${this.getCircleClass(index$1)}` }, index.h("div", { class: "xpl-progress-step-content" }, index.h("div", { class: "xpl-progress-step-circle" }, index$1 + 1), index.h("div", { class: "xpl-progress-step-text" }, step))))))));
+    }
+};
+
+const ProgressBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.max = 100;
+        this.size = 'lg';
+        this.value = 0;
+        this.variant = 'default';
+    }
+    get clampedValue() {
+        return Math.max(0, Math.min(this.max, this.value));
+    }
+    get isComplete() {
+        return this.value >= this.max && this.variant === 'default';
+    }
+    get isError() {
+        return this.variant === 'error';
+    }
+    get isSuccess() {
+        return this.variant === 'success' || this.isComplete;
+    }
+    get showStatusIcon() {
+        return this.isSuccess || this.isError;
+    }
+    get isIndeterminate() {
+        return this.variant === 'indeterminate';
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e07eee1ea1614d68190290be2ad16df663337215', class: {
+                'xpl-progress-bar': true,
+                [`xpl-progress-bar--${this.size}`]: true,
+                [`xpl-progress-bar--${this.variant}`]: true,
+                'xpl-progress-bar--complete': this.isComplete,
+            } }, index.h("div", { key: 'e46025a05d42e0c275444f1057c8ee9827ce4d15', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (index.h("div", { key: 'afc59b2fb32d9ac60afda9a40544121da045b237', class: "xpl-progress-bar__header" }, this.label && index.h("div", { key: '39d7add736c856c43bdecb61d083cf537e4da454', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (index.h("div", { key: '4e54b04a314136cdae066f7b48a8449b20a8daff', class: "xpl-progress-bar__icon" }, this.isError ? (index.h("xpl-icon", { icon: "circle-xmark-1" })) : (index.h("xpl-icon", { icon: "circle-check-1" })))))), index.h("div", { key: '6950cefcd5e90be2362201ae830bae73293b275a', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (index.h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, index.h("div", { class: "xpl-progress-bar__indeterminate" }))) : (index.h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (index.h("div", { key: 'e56af1b27ff6201a1eaa5cca7160c963a0fca529', class: "xpl-progress-bar__helper" }, this.helperText)))));
     }
 };
 
-const XplRadio = class {
+const Radio = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.radioChange = index.createEvent(this, "radioChange", 7);
@@ -15252,26 +17700,26 @@ const XplRadio = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'cc375ac47add5a4fddc8744186d1600431cb998d', class: {
+        return (index.h(index.Host, { key: 'c5b11522a1b9b21adf40318ff7f74f2ff76aa3c2', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, index.h("input", { key: 'ccc9a14ec86cf5d455558298f367dd1eb2835399', class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), index.h("label", { key: '5c0661fded4424d6b758ef55953cfde8da1f2af5', class: {
+            } }, index.h("input", { key: '950a769704369e2084834876242cb44d1609a166', class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), index.h("label", { key: '09f34b6e4a60d2c63e94734599b46f2ce1fc9a90', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, index.h("slot", { key: '9e203d6010f049c74294f543c75b091c129a323d' }), this.description && (index.h("small", { key: '15447fa65dff82fda1cb7981bbf3160b7f526c53', class: {
+            }, htmlFor: this.id }, index.h("slot", { key: '2552eb83722cdf2e4b9d1a691fe2712d16e0fb84' }), this.description && (index.h("small", { key: '3bc230b6c18922aee661033b1ea5a1bc72384aac', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
     }
 };
 
-const XplSecondaryNav = class {
+const SecondaryNav = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '86273edf300aa07f9d95d602eba079a3e5585d63', class: "xpl-secondary-nav" }, index.h("nav", { key: '1756c028fe605e00683b6fa07e7235a6e18c1f68', "aria-label": "Secondary Nav" }, index.h("slot", { key: '74d5e209c31456877c40267d16d4020faac7ca33' }))));
+        return (index.h(index.Host, { key: '3b015722c6fb8cf3cafb0c85054fab81a8362209', class: "xpl-secondary-nav" }, index.h("nav", { key: 'ffc4e57cc2ebdf792196477ff01d6b1f03da567f', "aria-label": "Secondary Nav" }, index.h("slot", { key: 'b15b8bcadf7faa41f155e11dcd9f2e11231efbc4' }))));
     }
 };
 
@@ -15286,7 +17734,7 @@ function getDisplayValue(choice) {
 function flattenChoices(choices) {
     return choices.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
 }
-const XplSelect = class {
+const Select = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.selectChange = index.createEvent(this, "selectChange", 7);
@@ -15501,21 +17949,21 @@ const XplSelect = class {
             this.truncate &&
             !this.customDisplayValue;
         const truncatedText = `+ ${Math.abs(this.choicesState.filter((a) => a.isSelected).length - this.visibleChoices)} more`;
-        return (index.h(index.Host, { key: '90390e373035b7915dd5ca7c6bcbb5269b3059ea', class: {
+        return (index.h(index.Host, { key: '5c6008a31abe121ac946c9c5fc23721d28df86eb', class: {
                 'xpl-select': true,
                 'xpl-select--disabled': this.disabled,
                 'xpl-select--no-truncate': !this.truncate,
                 [(_c = this.classNames) !== null && _c !== void 0 ? _c : '']: !!this.classNames,
             }, onKeyDown: this.handleTabKeyDown, ref: (el) => {
                 this.container = el;
-            } }, this.renderLabel(), index.h("div", { key: '399f1b864db799c42fa973ae3907e22c2cd95098', class: {
+            } }, this.renderLabel(), index.h("div", { key: 'f2de31e5b84fe2fdffa1e2b35ec611a4842a8323', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': ((_d = this.error) === null || _d === void 0 ? void 0 : _d.length) >= 0,
-            } }, index.h("div", { key: '4e9842f8a6ff0916af58dd4a6bc9dbb330d79a29', class: "xpl-input-wrapper" }, index.h("button", { key: 'a5719a38fdd7b3819cb1d68f887260f3eaf41c5e', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
+            } }, index.h("div", { key: '8a2192b28d75c56261f7a104ad02c76d49fb8787', class: "xpl-input-wrapper" }, index.h("button", { key: 'bb881153cd7cdbf4e43c40a96dfba8d95ca94aa6', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
                 e.preventDefault();
                 this.handleDropdownTrigger();
-            }, type: "button" }, index.h("div", { key: '7c0d8f94dc5b6afe38b1ab0b4a1cb1572255d640', class: {
+            }, type: "button" }, index.h("div", { key: '1518f2ef57c7eeaa0fedc1832222a0345c4c46ab', class: {
                 'xpl-select-value': true,
                 'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
                 'has-value': this.value.length > 0,
@@ -15535,7 +17983,7 @@ const XplSelect = class {
                 return this.renderSelectedTags();
             }
             return this.placeholder;
-        })(), isTextTruncated && truncatedText), index.h("xpl-icon", { key: '8002d17b99c8b53d47ed3a3139c4a18bcce7baba', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (index.h("xpl-dropdown", { key: '87bbe302cbf364c6e3592699e93eb03523e16833', ref: (el) => {
+        })(), isTextTruncated && truncatedText), index.h("xpl-icon", { key: 'f37a879df93e5078a4b1a4950291a3bf65d81f43', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (index.h("xpl-dropdown", { key: '920d7d4e1916613b0056e6da80e055e7cf94fba6', ref: (el) => {
                 this.dropdown = el;
             }, isOpen: this.dropdownOpenState, options: this.choicesState, selectedValues: this.selectedValues, mode: this.mode, triggerId: this.id, update: (_e, { component }) => {
                 const { options } = component;
@@ -15544,7 +17992,7 @@ const XplSelect = class {
                 }
             }, onIsOpenChange: (e) => {
                 this.dropdownOpenState = e.detail;
-            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true })), this.renderError()), index.h("input", { key: '3ef234a4953e9133c3817ba14d0336c0cb8de8f9', type: "hidden", name: this.name, value: this.value })));
+            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true })), this.renderError()), index.h("input", { key: '0137e17e78152e2ebc600156896df9a4c691f18a', type: "hidden", name: this.name, value: this.value })));
     }
     static get watchers() { return {
         "choices": [{
@@ -15565,14 +18013,90 @@ const XplSelect = class {
     }; }
 };
 
-const XplSkeleton = class {
+const SideNav = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '4c498e4a5ab9c93d2ba984fd973af77c871cb916', class: {
+                'xpl-side-nav': true,
+            } }, index.h("div", { key: 'ef7455c11a5dd27c7a8317f4b441fc3d29eea341', class: "xpl-side-nav__wrapper" }, index.h("nav", { key: '11752dfaacd360fd1c6e20f253967236f1032d68', class: "xpl-side-nav__content", "aria-label": this.label }, index.h("div", { key: '1a94c00b7cc8297707a11aca19a816769e98dbfc', class: "xpl-side-nav__section" }, index.h("slot", { key: 'a3aaa6c108806c68bcb8af692ad6fd0edcae7870', name: "section" })), index.h("div", { key: 'b6454f9ba4f795666b33c7eea70f3514cdf168b3', class: "xpl-side-nav__footer" }, index.h("slot", { key: 'f00b452ff6c732d95fa58962800d2d1f606c4c17', name: "nav-footer" }))))));
+    }
+};
+
+const SideNavItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.expandedChange = index.createEvent(this, "expandedChange", 7);
+        this.navClick = index.createEvent(this, "navClick", 7);
+        this.disabled = false;
+        this.expanded = false;
+        this.hasChildren = false;
+        this.hidden = false;
+        this.link = false;
+        this.selected = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.hasChildren) {
+                this.expanded = !this.expanded;
+                this.expandedChange.emit(this.expanded);
+            }
+            else {
+                this.navClick.emit();
+            }
+        };
+    }
+    syncLinkHasChildrenExclusivity() {
+        this.enforceLinkExcludesHasChildren();
+    }
+    componentWillLoad() {
+        this.syncLinkHasChildrenExclusivity();
+    }
+    componentWillRender() {
+        this.syncLinkHasChildrenExclusivity();
+    }
+    enforceLinkExcludesHasChildren() {
+        if (!this.link)
+            return;
+        if (this.hasChildren) {
+            this.hasChildren = false;
+        }
+        if (this.el.hasAttribute('has-children')) {
+            this.el.removeAttribute('has-children');
+        }
+    }
+    render() {
+        var _a;
+        const linkClass = {
+            'xpl-side-nav-item__link': true,
+            expanded: this.expanded,
+            selected: this.selected,
+        };
+        return (index.h(index.Host, { key: '10e32dc7b6e7e942ab11153a7311ee2401370a08', class: {
+                'xpl-side-nav-item': true,
+                'xpl-side-nav-item--link-disabled': this.link && this.disabled,
+            } }, this.link ? (index.h("slot", null)) : (index.h("button", { type: "button", class: linkClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, this.hasChildren && (index.h("span", { class: `xpl-side-nav-item__arrow ${this.expanded ? 'expanded' : ''}` }, index.h("xpl-icon", { icon: "chevron-down", size: 16 }))), !this.hasChildren && (index.h("span", { class: "xpl-side-nav-item__icon" }, index.h("slot", { name: "icon" }, this.icon ? (index.h("xpl-icon", { icon: this.icon, size: 16 })) : null))), index.h("span", { class: "xpl-side-nav-item__label" }, (_a = this.label) !== null && _a !== void 0 ? _a : ''))), this.hasChildren && !this.link && (index.h("div", { key: '32d07c601edd88297854bf88749411276e8cb51b', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, index.h("div", { key: 'bbaac77c9c89e7b494cf7693185f0c358f6a7136', class: "xpl-side-nav-item__children-inner" }, index.h("slot", { key: '811067dca2ee2a73d896d1b45b899b9a8b27e7d6' }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "hasChildren": [{
+                "syncLinkHasChildrenExclusivity": 0
+            }],
+        "link": [{
+                "syncLinkHasChildrenExclusivity": 0
+            }]
+    }; }
+};
+
+const Skeleton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.shape = 'rectangle';
         this.size = 'custom';
     }
     render() {
-        return (index.h(index.Host, { key: '018d8ef69972d40fa84fd700ca778862f762b699', class: {
+        return (index.h(index.Host, { key: '86862cc926d5e915e303d274f0e837f364be6c08', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,
@@ -15586,7 +18110,7 @@ const XplSkeleton = class {
     }
 };
 
-const XplSlideout = class {
+const Slideout = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.isOpenChange = index.createEvent(this, "isOpenChange", 7);
@@ -15615,7 +18139,7 @@ const XplSlideout = class {
         this.handleScroll();
     }
     render() {
-        return (index.h(index.Host, { key: 'd38f708c91ffd96369e5277b9e4d5c74e52a41d4', class: "xpl-slideout" }, this.backdrop && this.isOpen && (index.h("xpl-backdrop", { key: '8cfea9e2d270e84783f99db0b12b2749a829ff8a', onClick: this.handleClose })), index.h("aside", { key: '8b3a24dccbb44c281bad35ab8d2af895bde56d10', class: `slideout slideout--${!this.isOpen && 'closed'}` }, index.h("header", { key: '921acd55e9aedcd5c04d2d6d4f2d26515ec744b8', class: "header" }, index.h("div", { key: 'dd434e7a1b5d28aa0833979f8d515df28ad00cc9', class: "title" }, index.h("slot", { key: '9743e88555558ec66e46528b04d6f6391d1bd8df', name: "title" }), index.h("xpl-button", { key: '7b7b267fa892363d0d25af419bdaa55dd5a362ef', class: "close-button", iconOnly: true, size: "sm", variant: "subtle", onClick: this.handleClose }, index.h("xpl-icon", { key: 'd27bd1de9864fbc6b72f1b71658ece1f5dfeddc9', icon: "x" }))), index.h("div", { key: '3183410cecb0973d8b7dca3997e1f6c254d28892', class: "subtitle" }, index.h("slot", { key: '6dd1fbcdd15fde802a316053b19566c618f41dd0', name: "subtitle" })), index.h("div", { key: 'b3c4a050275de296b43dc7d9e87bcc082c7f14ec', class: "search" }, index.h("slot", { key: 'c6f0ef04a753cb71da97021caa791ded9e2e0533', name: "search" }))), index.h("xpl-divider", { key: '68301c3540651d6d0dc2e9577d8fc6d2e5e9f536', tier: 0, class: "divider top" }), index.h("article", { key: 'eff6e4e81dfe48a9bf2f59d5f5ca09c5f56e6491', class: "content", tabIndex: 0 }, index.h("slot", { key: 'f3f25c5b51ae017cb6f84ea0f1c14329ba429adb', name: "content" })), this.showFooter && (index.h("footer", { key: '6e94107fefc5e2e24edb21f61b0e4af32c954445' }, index.h("xpl-divider", { key: '89c550dbb352c6b22534edf7ff3a0e8d0513a206', tier: 0, class: "divider bottom" }), index.h("div", { key: '32fe00b37f65ef0b1ba42bf8e7d8f59dfec7aa68', class: "footer" }, index.h("slot", { key: 'f42ee4c847be0ab553d039bc0ce50e29e70984fa', name: "tertiary" }), index.h("slot", { key: 'dd6b8757bcd85dd79a084d3ec0bbbfd6629297bb', name: "secondary" }), index.h("slot", { key: 'e6d4fea0d1ebfa7bd71fce313dee34b25f164b0c', name: "primary" })))))));
+        return (index.h(index.Host, { key: 'b2628014184ba329999545fe940adcb175b89dfd', class: "xpl-slideout" }, this.backdrop && this.isOpen && (index.h("xpl-backdrop", { key: '3f243b5af61aee13d375874ddb6a974608405e05', onClick: this.handleClose })), index.h("aside", { key: '781804a784efad6f6e9d9d0ee09dd46b99800707', class: `slideout slideout--${!this.isOpen && 'closed'}` }, index.h("header", { key: '35bf26acb7f45fc60d9447093d00c263c5c6a074', class: "header" }, index.h("div", { key: '939262fd0caf93059c022bc827cf1ebf31cf0505', class: "title" }, index.h("slot", { key: 'd0434f317394c1e6aca52de73cb1645605b70a2c', name: "title" }), index.h("xpl-button", { key: '091d2454db101c318a6c5b42a5650d698e318a46', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, index.h("xpl-icon", { key: '161a7bd05ce6864cd3b72a9a523c0f6e39d95cfb', icon: "x" }))), index.h("div", { key: '554153d17ba38df8b86534f4b59cb74c31553c0e', class: "subtitle" }, index.h("slot", { key: '649d87c4dea7e87c8c860d81b337c5c284d4aab1', name: "subtitle" })), index.h("div", { key: '2fe24ec6b15e48da8b61f0601342e52f83dd52d7', class: "search" }, index.h("slot", { key: '2ca9723ce317d1981485dcc923fff44c885eb814', name: "search" }))), index.h("xpl-divider", { key: 'c11b01177de43cafc6cf6f59c8807027dd202cfb', tier: 0, class: "divider top" }), index.h("article", { key: '12030211ebdfcc232e02e383d6ce9d64349882bc', class: "content", tabIndex: 0 }, index.h("slot", { key: 'b6af6c47722c8a1820ff94c052788b95736622b7', name: "content" })), this.showFooter && (index.h("footer", { key: '151c779df75a16947353701df695967686e9e07b' }, index.h("xpl-divider", { key: '773e0ce1051ac5a2f67864c5b4a6bd8120b3c270', tier: 0, class: "divider bottom" }), index.h("div", { key: 'e2ed12c38474a0102fdc24063bae95e4e36c43f7', class: "footer" }, index.h("slot", { key: '06f346214acfd3351adb9fca113466b1f95e5b9c', name: "tertiary" }), index.h("slot", { key: '1afb8a2250cd62a752a9bd60decade017a7ae58e', name: "secondary" }), index.h("slot", { key: '18f8b40b550b38eb44c765dd3cdbca44000032b8', name: "primary" })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -15625,7 +18149,7 @@ const XplSlideout = class {
     }; }
 };
 
-const XplTab = class {
+const Tab = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tabChange = index.createEvent(this, "tabChange", 7);
@@ -15635,23 +18159,23 @@ const XplTab = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '3f1eaa197c02b1bb45da97e59a58aeea9f86bc6f', class: {
+        return (index.h(index.Host, { key: '1450ace89b692fe55c0d72baf719fc523b3f5cdd', class: {
                 'xpl-tab': true,
                 'xpl-tab--selected': this.selected,
-            } }, index.h("button", { key: '12066216ecbc4fa91c7645b45e4affce20342e4b', onClick: this.handleTabClick, class: "xpl-tab__button", role: "tab", "aria-controls": this.target }, index.h("slot", { key: 'bbe6f9c862510aa83d4816fc7366e82ac10cf266' }))));
+            } }, index.h("button", { key: '6bd68b6eb3cf05bbd21b17cbd6fba58ba2ca3a7c', onClick: this.handleTabClick, class: "xpl-tab__button", role: "tab", "aria-controls": this.target }, index.h("slot", { key: '5d54ca80925a7dd6ace6486e4dd6978d268ad584' }))));
     }
 };
 
-const XplTabPanel = class {
+const TabPanel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.selected = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'f22da3feed8a64baae080a1593ea35c68d41f857', class: {
+        return (index.h(index.Host, { key: '7266510f84437902c1ecfdfe19abd6f1a9ac09e2', class: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, role: "tabpanel", "aria-labelledby": this.target }, index.h("slot", { key: '88311f1af38490ec1b3ba8aee8f1bb39d58cfd11' })));
+            }, role: "tabpanel", "aria-labelledby": this.target }, index.h("slot", { key: '7aa5c5633d7f06f521699f30539dcb505703db64' })));
     }
 };
 
@@ -15665,7 +18189,7 @@ const getIconType = (sortType) => {
             return 'dash';
     }
 };
-const XplTable = class {
+const Table = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tableSelect = index.createEvent(this, "tableSelect", 7);
@@ -15791,14 +18315,14 @@ const XplTable = class {
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        return (index.h(index.Host, { key: '3ac2c96a4d691a8e60a2f0f5732787a4dd43e71e' }, index.h("div", { key: '242225267bf912ae46cf38dd1750dcd66fa627f7', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (index.h(index.Host, { key: 'eb52da2b523707a53c0bb414dda75197907e71af' }, index.h("div", { key: '0f5bf430701ad905c4d918ee9039db52c19eb01c', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, index.h("table", { key: '76f22b451b7d09f2843d1afc063f8e287afb419f', class: {
+            } }, index.h("table", { key: 'bdbb2c47a7bf119b46417118f334ba861960313d', class: {
                 'xpl-table': true,
                 'xpl-table--striped': this.striped,
                 'xpl-table--freeze': this.freeze,
                 'xpl-table--has-scrolled': this.hasScrolled,
-            } }, this.columns && (index.h("thead", { key: 'be12e8292faf5be828c281e3c7d5396652c7e4b8' }, this.columns.map((column, i) => {
+            } }, this.columns && (index.h("thead", { key: 'a868be75efee1ec20d4845e8219a49ab1fae8aca' }, this.columns.map((column, i) => {
             var _a;
             const iconType = getIconType((_a = this.sortTypeArray) === null || _a === void 0 ? void 0 : _a[i]);
             const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
@@ -15807,11 +18331,11 @@ const XplTable = class {
                     e.stopPropagation();
                     this.selectAll(e);
                 }, type: "checkbox", value: `select-all-${this.selectAllValue}` })), column, isColumnSortable && !!this.sortTypeArray[i] && (index.h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), index.h("tbody", { key: '94c5ad3a68f1cffa73a55bb106e81c8899ddc2c4' }, this.rowData.map((row, rowNum) => (index.h("tr", { class: this.selected && this.selected[rowNum]
+        }))), index.h("tbody", { key: '8324eda16235ba66f2aa3bebc073a10a91a32518' }, this.rowData.map((row, rowNum) => (index.h("tr", { class: this.selected && this.selected[rowNum]
                 ? 'xpl-table-row-selected'
                 : '' }, row.map((cell, i) => (index.h("td", null, this.multiselect && i === 0 ? (index.h("label", { htmlFor: `__xpl-table-row-${rowNum}` }, index.h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
                 ? this.selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}` }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("tfoot", { key: '2bcfdfed0e5709f60f4beec7f8f58038899b8b30' }, this.rowFooterData.map((row) => (index.h("tr", null, row.map((cell) => (index.h("td", null, index.h("div", { innerHTML: cell })))))))))))));
+                : `xpl-table-checkbox-${rowNum}` }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("tfoot", { key: 'd3c55c0585359a28a51a8b0196c4e9841bc86919' }, this.rowFooterData.map((row) => (index.h("tr", null, row.map((cell) => (index.h("td", null, index.h("div", { innerHTML: cell })))))))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -15827,7 +18351,7 @@ const XplTable = class {
     }; }
 };
 
-const XplTabs = class {
+const Tabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tabChange = index.createEvent(this, "tabChange", 7);
@@ -15924,10 +18448,10 @@ const XplTabs = class {
         this.collectTabs();
     }
     render() {
-        return (index.h(index.Host, { key: 'c6858318e3adea4fb9a5587d16aff2778a69af0d', class: {
+        return (index.h(index.Host, { key: '0f74359ee1e50de711500ed4d91a7f305a0c8b43', class: {
                 'xpl-tabs': true,
                 'xpl-tabs--full-width': this.fullWidth,
-            } }, index.h("xpl-select", { key: 'f6e67e41dc20da4bd6c3d9d4b60045e0e55c7343', classNames: "xpl-tabs__mobile-select", choices: this.renderChoices(), selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+            } }, index.h("xpl-select", { key: '9315829ad692ec8b80fe00f588974ed8f1b5dbc9', classNames: "xpl-tabs__mobile-select", choices: this.renderChoices(), selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -15938,15 +18462,15 @@ const XplTabs = class {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), index.h("nav", { key: '297eb4c0695adf1bea03de7e6874a0b61e108319', class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+            } }), index.h("nav", { key: '7abdf0d065f25c78b393ec9808fe7f44c84bfb27', class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
                 this.headingsContainerRef = el;
             }, onTabChange: (event) => {
                 this.isMobileSelectChange = false;
                 this.handleTabChange(event.detail);
-            } }, index.h("div", { key: 'cd60b8acf47bb319bc92852d5f62ba456acee6f0', class: "xpl-tabs__active-bar", style: {
+            } }, index.h("div", { key: 'de5157e6ce7914060f25e9b21bd8051a1437f92a', class: "xpl-tabs__active-bar", style: {
                 transform: `translateX(${this.activeBarPosition.left}px)`,
                 width: `${this.activeBarPosition.width}px`,
-            } }), index.h("slot", { key: 'a4b73230bfc7178381780a5136a5c1d820be7d65', name: "heading" })), index.h("div", { key: 'e5d4cf94e1c75dabe73d8a5cc2d00cc97466f1b2', class: "xpl-tabs__panels" }, index.h("slot", { key: 'e3d2fbfed0ebc74f2fc41f74574e202e834e2129', name: "panel" }))));
+            } }), index.h("slot", { key: 'fc61c457e2a4eb10609b97e911b9ddbb2a64757f', name: "heading" })), index.h("div", { key: 'd6187a0de12b34f61ad10a602085d4525c2850ca', class: "xpl-tabs__panels" }, index.h("slot", { key: 'c5cf20e4677ee9f998c115d472cfc1cd5e5fa1fd', name: "panel" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -15956,21 +18480,21 @@ const XplTabs = class {
     }; }
 };
 
-const XplTag = class {
+const Tag = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.close = index.createEvent(this, "close", 7);
     }
     render() {
-        return (index.h(index.Host, { key: '4a5d37bbd7458d289bf7ea272bd3f944e5f1f1a8', class: "xpl-tag-container" }, index.h("button", { key: '65701bf44741a791ab8d60db2de0f3308c83df33', class: "xpl-tag", onClick: () => {
+        return (index.h(index.Host, { key: '6a2aaaef81c317bb30ebfc20266581205db73ce2', class: "xpl-tag-container" }, index.h("button", { key: '2aaae9dd6bbdb13db531cf249baa96bfa15aff55', class: "xpl-tag", onClick: () => {
                 this.close.emit();
-            } }, index.h("slot", { key: 'bd3a1e0af2dbfbc70e18082a1cd0c02710f6ef26' })), index.h("button", { key: '13224cc6cc44e1c4ed9515019906ba3217edffd7', class: "xpl-tag__close", onClick: () => {
+            } }, index.h("slot", { key: 'cd56059cee54af39ce61e7560e00e013646c648f' })), index.h("button", { key: 'd529f61e40d097db2832e550e0f0b05c8ccc9179', class: "xpl-tag__close", onClick: () => {
                 this.close.emit();
             } }, "\u00D7")));
     }
 };
 
-const XplToast = class {
+const Toast = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.variant = 'neutral';
@@ -16007,27 +18531,27 @@ const XplToast = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '6a4c1dfe86f62c39db5573a0bb1eef2c14616085', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, index.h("div", { key: '282a4c5fc37e538d3359a0c38e7cd30e2a29e311', class: "xpl-toast__left" }, this.showIcon && (index.h("div", { key: 'dfb6bb1923f5c9e1b1dae80630cc7977529e834f', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), index.h("div", { key: '9a1755b484e316be08b89044ae3c55e7a30c3795', class: "xpl-toast__notification" }, index.h("p", { key: 'afa9572dcb109c58c6c4045e14b604010da95230', class: "xpl-toast__title" }, index.h("slot", { key: '0b80b8719e79a1e01bcf8ec125db8d9762f1a1d7', name: "title" })), this.caption !== '' && (index.h("p", { key: '7debe4dd50870bc6478a86e7742450f667dfee3a', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), index.h("div", { key: '194104f419162bd4157fb5e8885983ca40467d9c', class: "xpl-toast__action", ref: (el) => {
+        return (index.h(index.Host, { key: 'b8a25651f1dd57f9f574cd6401877295a6ca7101', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, index.h("div", { key: '20adfa314269787a9a03e793a1b74b9c5fb47585', class: "xpl-toast__left" }, this.showIcon && (index.h("div", { key: 'e3346cee07a34c61ed825966c59c9c8ac30f6302', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), index.h("div", { key: 'e85cc1925897c34079e73a9d094c681c835548f4', class: "xpl-toast__notification" }, index.h("p", { key: '467fc15e4d26f240d735ddc957218bb7ab508dab', class: "xpl-toast__title" }, index.h("slot", { key: '3b339cd7b382043919139e83679e7033d63c3196', name: "title" })), this.caption !== '' && (index.h("p", { key: '675f42d92a7bd0527416e5eb77a56a7319d8f9a5', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), index.h("div", { key: '1904c868cba4f3178b0470b7381c23925a732a16', class: "xpl-toast__action", ref: (el) => {
                 this.actionSlot = el;
-            } }, index.h("slot", { key: 'c63cc79ec725417c4f317dd72511e72b24f8280e', name: "action" })), this.dismissable && (index.h("div", { key: '3328ad43d7cd4026d5b4488dc2d920031be0ca34', class: "xpl-toast__close" }, index.h("button", { key: 'ce3b27ae3c1570806916b3d668678513df5065ed', tabIndex: 0, onClick: this.dismiss }, index.h("xpl-icon", { key: 'be1a177568f933417b62ce2a2705441d00b3118f', icon: "x" }))))));
+            } }, index.h("slot", { key: '33c8ef7761d07e4d38b2a2a73c058f6769bc7a44', name: "action" })), this.dismissable && (index.h("div", { key: '3d67f14c2704a6b054be63ad35a9bd3d5355b4ca', class: "xpl-toast__close" }, index.h("button", { key: '345b314745b40b2c802b0221ea64d90bd5c36b38', tabIndex: 0, onClick: this.dismiss }, index.h("xpl-icon", { key: '39634fb5cc157a05b05d2245d66fc23d96a1c790', icon: "x" }))))));
     }
     get el() { return index.getElement(this); }
 };
 
 const TooltipArrow = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "14" }, index.h("g", { filter: "url(#a)" }, index.h("path", { d: "M0 5h15l-7.5 7.5L0 5Z" })), index.h("defs", null, index.h("filter", { id: "a", width: "20", height: "8.171", x: ".5", y: "5", "color-interpolation-filters": "sRGB", filterUnits: "userSpaceOnUse" }, index.h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), index.h("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }), index.h("feOffset", { dy: "1" }), index.h("feComposite", { in2: "hardAlpha", operator: "out" }), index.h("feColorMatrix", { values: "0 0 0 0 0.882353 0 0 0 0 0.886275 0 0 0 0 0.909804 0 0 0 1 0" }), index.h("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_20073_3067" }), index.h("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_20073_3067", result: "shape" })))));
 
-const XplTooltip = class {
+const Tooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.position = 'top-middle';
         this.hideArrow = false;
     }
     render() {
-        return (index.h(index.Host, { key: '2a442f9c9c54e8e6f8032b5d6384c84a1fbda0ad' }, index.h("div", { key: 'f30932db02af0f1273421b14c5b25840adbc3f58', class: "xpl-tooltip-container" }, index.h("slot", { key: '729aee67e66fb3d281b84a86aeba2d12a8a08340' }), index.h("div", { key: '9c0f6a237f2a1a11459a311095a2bdf9be4b176d', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (index.h("div", { key: '3bb6b085ddde321cf3063feba8ff23e785723afd', class: "xpl-tooltip-arrow" }, index.h(TooltipArrow, { key: 'f687c2776a7b9097aec183c5128e9e238e57d26e' }))))));
+        return (index.h(index.Host, { key: '849e02776ea70de89a5bd3c133df6205ff3265b3' }, index.h("div", { key: '98947c9ece90e6ebcbf90c23cd2e1c0902ae59d5', class: "xpl-tooltip-container" }, index.h("slot", { key: 'a24df50f2081fcc4ef70c685933fab1420eb850a' }), index.h("div", { key: 'be1a1832cdf428f2d368258b3a784e7b27589a97', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (index.h("div", { key: '43241958db2b8fec0993040f7321bca7d5a163e6', class: "xpl-tooltip-arrow" }, index.h(TooltipArrow, { key: '34359c7bec6b7ee0616eac8961e9941b60c7d321' }))))));
     }
 };
 
-const XplUtilityBar = class {
+const UtilityBar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.navOpen = index.createEvent(this, "navOpen", 7);
@@ -16041,48 +18565,54 @@ const XplUtilityBar = class {
         this.open = this.isNavOpenAtStartup !== undefined ? this.isNavOpenAtStartup : this.open;
     }
     render() {
-        return (index.h(index.Host, { key: 'a67e91188d392358df4b052d7e9026cf2f6b9b04' }, index.h("nav", { key: 'f51a3c37a1c8ae3d4f4ba8b524fb1f2ff2dd5ea8', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (index.h("div", null, index.h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, index.h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), index.h("slot", { name: "aside" }))) : (index.h("slot", { name: "aside" })), index.h("slot", { key: '75f581a8455f372b692a9ec190c2f0974b214105', name: "main" }))));
-    }
-};
-
-exports.xpl_avatar = XplAvatar;
-exports.xpl_backdrop = XplBackdrop;
-exports.xpl_badge = XplBadge;
-exports.xpl_breadcrumb_item = XplBreadcrumbItem;
-exports.xpl_breadcrumbs = XplBreadcrumbs;
-exports.xpl_button = XplButton;
-exports.xpl_checkbox = XplCheckbox;
-exports.xpl_choicelist = XplChoicelist;
-exports.xpl_content_area = XplContentArea;
-exports.xpl_dashboard = XplDashboard;
-exports.xpl_data_card = XplDataCard;
-exports.xpl_divider = XplDivider;
-exports.xpl_dropdown = XplDropdown;
-exports.xpl_dropdown_group = XplDropdownGroup;
-exports.xpl_dropdown_heading = XplDropdownHeading;
-exports.xpl_dropdown_option = XplDropdownOption;
-exports.xpl_header_accordion = XplHeaderAccordion;
-exports.xpl_icon = XplIcon;
-exports.xpl_input = XplInput;
-exports.xpl_input_color = XplInputColor;
-exports.xpl_input_date = XplInputDate;
-exports.xpl_input_file = XplInputFile;
-exports.xpl_input_time = XplInputTime;
-exports.xpl_modal = XplModal;
-exports.xpl_nav_item = XplNavItem;
-exports.xpl_pagination = XplPagination;
-exports.xpl_popover = XplPopover;
-exports.xpl_progress = XplProgress;
-exports.xpl_radio = XplRadio;
-exports.xpl_secondary_nav = XplSecondaryNav;
-exports.xpl_select = XplSelect;
-exports.xpl_skeleton = XplSkeleton;
-exports.xpl_slideout = XplSlideout;
-exports.xpl_tab = XplTab;
-exports.xpl_tab_panel = XplTabPanel;
-exports.xpl_table = XplTable;
-exports.xpl_tabs = XplTabs;
-exports.xpl_tag = XplTag;
-exports.xpl_toast = XplToast;
-exports.xpl_tooltip = XplTooltip;
-exports.xpl_utility_bar = XplUtilityBar;
+        return (index.h(index.Host, { key: 'b32ed07473f48009a3a6e76ba1a51fe156b19f1c' }, index.h("nav", { key: '7a98d494b15c5af7e8e0089ab64806c04d394381', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (index.h("div", null, index.h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, index.h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), index.h("slot", { name: "aside" }))) : (index.h("slot", { name: "aside" })), index.h("slot", { key: 'd5f62631648bcd858b26a6500e2506e6f40d5c99', name: "main" }))));
+    }
+};
+
+exports.xpl_avatar = Avatar;
+exports.xpl_backdrop = Backdrop;
+exports.xpl_badge = Badge;
+exports.xpl_banner = Banner;
+exports.xpl_breadcrumb_item = BreadcrumbItem;
+exports.xpl_breadcrumbs = Breadcrumbs;
+exports.xpl_button = Button;
+exports.xpl_checkbox = Checkbox;
+exports.xpl_choicelist = Choicelist;
+exports.xpl_content_area = ContentArea;
+exports.xpl_dashboard = Dashboard;
+exports.xpl_data_card = DataCard;
+exports.xpl_divider = Divider;
+exports.xpl_dropdown = Dropdown;
+exports.xpl_dropdown_group = DropdownGroup;
+exports.xpl_dropdown_heading = DropdownHeading;
+exports.xpl_dropdown_option = DropdownOptionCpnt;
+exports.xpl_header_accordion = HeaderAccordion;
+exports.xpl_icon = Icon;
+exports.xpl_input = Input;
+exports.xpl_input_color = InputColor;
+exports.xpl_input_date = InputDate;
+exports.xpl_input_file = InputFile;
+exports.xpl_input_phone = InputPhone;
+exports.xpl_input_time = InputTime;
+exports.xpl_modal = Modal;
+exports.xpl_nav_item = NavItem;
+exports.xpl_pagination = Pagination;
+exports.xpl_panel = XplPanel;
+exports.xpl_popover = Popover;
+exports.xpl_progress = Progress;
+exports.xpl_progress_bar = ProgressBar;
+exports.xpl_radio = Radio;
+exports.xpl_secondary_nav = SecondaryNav;
+exports.xpl_select = Select;
+exports.xpl_side_nav = SideNav;
+exports.xpl_side_nav_item = SideNavItem;
+exports.xpl_skeleton = Skeleton;
+exports.xpl_slideout = Slideout;
+exports.xpl_tab = Tab;
+exports.xpl_tab_panel = TabPanel;
+exports.xpl_table = Table;
+exports.xpl_tabs = Tabs;
+exports.xpl_tag = Tag;
+exports.xpl_toast = Toast;
+exports.xpl_tooltip = Tooltip;
+exports.xpl_utility_bar = UtilityBar;