@getpara/core-components 2.0.0-fc.3 → 2.1.0

package/dist/cjs/cpsl-alert_34.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-65f57499.js');
-const constants = require('./constants-9b1b01bb.js');
+const constants = require('./constants-1de558ea.js');
 
-const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:14px;--container-padding-bottom:14px;--container-padding-start:16px;--container-padding-end:16px;--container-font-size:var(--cpsl-font-size-body-m);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-alert);--container-background-color:var(--cpsl-color-background-0);--container-color:var(--cpsl-color-text-primary);--container-icon-color:var(--container-color);--container-align-items:center;--container-justify-content:center;--title-container-gap:8px;--title-container-align-items:center;--title-container-justify-content:center;display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-border-color:var(--cpsl-color-utility-red)}:host(.error):host(.filled){--container-background-color:var(--cpsl-color-utility-red-light)}:host(.warning){--container-border-color:var(--cpsl-color-utility-yellow)}:host(.warning):host(.filled){--container-background-color:var(--cpsl-color-utility-yellow-light)}:host(.success){--container-border-color:var(--cpsl-color-utility-green)}:host(.success):host(.filled){--container-background-color:var(--cpsl-color-utility-green-light)}:host cpsl-icon{--icon-color:var(--container-icon-color);--height:20px;--width:20px}.alert-container{border-radius:var(--container-border-radius);-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);font-size:var(--container-font-size);display:flex;flex-direction:column;align-items:var(--container-align-items);justify-content:var(--container-justify-content);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);background-color:var(--container-background-color);color:var(--container-color)}.title-container{display:flex;align-items:var(--title-container-align-items);justify-content:var(--title-container-justify-content);gap:var(--title-container-gap)}";
+const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:8px;--container-padding-bottom:8px;--container-padding-start:8px;--container-padding-end:8px;--container-font-size:var(--cpsl-font-size-body-s);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-alert);--container-background-color:var(--cpsl-color-background-0);--container-color:var(--cpsl-color-text-primary);--container-icon-color:var(--container-color);--container-align-items:center;--container-justify-content:center;--title-container-gap:8px;--title-container-align-items:flex-start;--title-container-justify-content:center;display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-color:var(--cpsl-color-black);--container-icon-color:var(--cpsl-color-utility-red);--container-border-color:var(--cpsl-color-utility-red)}:host(.error):host(.filled){--container-background-color:var(--cpsl-color-utility-red-light)}:host(.warning){--container-color:var(--cpsl-color-black);--container-icon-color:var(--cpsl-color-utility-yellow);--container-border-color:var(--cpsl-color-utility-yellow)}:host(.warning):host(.filled){--container-background-color:var(--cpsl-color-utility-yellow-light)}:host(.success){--container-color:var(--cpsl-color-black);--container-icon-color:var(--cpsl-color-utility-green);--container-border-color:var(--cpsl-color-utility-green)}:host(.success):host(.filled){--container-background-color:var(--cpsl-color-utility-green-light)}:host cpsl-icon{--icon-color:var(--container-icon-color);--height:24px;--width:24px}.alert-container{border-radius:var(--container-border-radius);-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);font-size:var(--container-font-size);display:flex;flex-direction:column;align-items:var(--container-align-items);justify-content:var(--container-justify-content);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);background-color:var(--container-background-color);color:var(--container-color)}.title-container{display:flex;align-items:var(--title-container-align-items);justify-content:var(--title-container-justify-content);gap:var(--title-container-gap)}";
 const CpslAlertStyle0 = cpslAlertCss;
 
 const CpslAlert = class {
@@ -6106,7 +6106,7 @@ gsap.registerPlugin(CSSPlugin);
 
 var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap;
 
-const cpslAuthModalCss = ":host{--container-width:560px;--container-gap:8px;--card-box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.08);display:block;z-index:10011;position:relative}:host cpsl-overlay{z-index:10011}@media (max-width: 480px){:host(.include-mobile-styling) .modal-wrapper{scale:none;top:100%;left:0;height:unset;opacity:1}:host(.include-mobile-styling) .modal-container{width:100%;max-width:none;border-bottom-left-radius:0px;border-bottom-right-radius:0px}:host(.include-mobile-styling) .modal-body-card{--card-border-radius-bl:0px;--card-border-radius-br:0px}}:host(.force-mobile-media) .modal-wrapper{scale:none;top:100%;left:0;height:unset;opacity:1}:host(.force-mobile-media) .modal-container{width:100%;max-width:none;border-bottom-left-radius:0px;border-bottom-right-radius:0px}:host(.force-mobile-media) .modal-body-card{--card-border-radius-bl:0px;--card-border-radius-br:0px}:host(.no-overlay){z-index:0}:host(.no-overlay) .modal-body-card{--card-border-width:1px}:host(.no-overlay) .modal-container{max-height:unset}.modal-wrapper{z-index:10011;position:fixed;top:0;left:0;display:none;height:100%;width:100%;justify-content:center;align-items:center;scale:0.8;opacity:0;transform:none}.modal-container{position:relative;overflow:hidden;width:var(--container-width);display:flex;flex-direction:column;gap:var(--container-gap);max-width:95vw;max-height:95vh;max-height:95dvh;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;}.modal-container ::-webkit-scrollbar{display:none}.modal-container.no-footer{gap:0px}.modal-body-card{--card-padding-top:16px;--card-padding-bottom:16px;--card-padding-start:16px;--card-padding-end:16px;--card-border-width:0px}.body::part(card-container){box-shadow:var(--card-box-shadow);width:100%}.no-opacity{opacity:0}.mobile-footer{margin-top:16px}.footer-hidden{height:0px;visibility:hidden;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:0px}";
+const cpslAuthModalCss = ":host{--container-width:420px;--container-gap:8px;--card-box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.08);display:block;z-index:10011;position:relative}:host cpsl-overlay{z-index:10011}@media (max-width: 480px){:host(.include-mobile-styling) .modal-wrapper{scale:none;top:100%;left:0;height:unset;opacity:1}:host(.include-mobile-styling) .modal-container{width:100%;max-width:none;border-bottom-left-radius:0px;border-bottom-right-radius:0px}:host(.include-mobile-styling) .modal-body-card{--card-border-radius-bl:0px;--card-border-radius-br:0px}}:host(.force-mobile-media) .modal-wrapper{scale:none;top:100%;left:0;height:unset;opacity:1}:host(.force-mobile-media) .modal-container{width:100%;max-width:none;border-bottom-left-radius:0px;border-bottom-right-radius:0px}:host(.force-mobile-media) .modal-body-card{--card-border-radius-bl:0px;--card-border-radius-br:0px}:host(.no-overlay){z-index:0}:host(.no-overlay) .modal-body-card{--card-border-width:1px}:host(.no-overlay) .modal-container{max-height:unset}.modal-wrapper{z-index:10011;position:fixed;top:0;left:0;display:none;height:100%;width:100%;justify-content:center;align-items:center;scale:0.8;opacity:0;transform:none}.modal-container{position:relative;overflow:hidden;width:var(--container-width);display:flex;flex-direction:column;gap:var(--container-gap);max-width:95vw;max-height:95vh;max-height:95dvh;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;}.modal-container ::-webkit-scrollbar{display:none}.modal-container.no-footer{gap:0px}.modal-body-card{--card-padding-top:16px;--card-padding-bottom:24px;--card-padding-start:24px;--card-padding-end:24px;--card-border-width:0px}.body::part(card-container){box-shadow:var(--card-box-shadow);width:100%}.no-opacity{opacity:0}.mobile-footer{margin-top:16px}.footer-hidden{height:0px;visibility:hidden;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:0px}";
 const CpslAuthModalStyle0 = cpslAuthModalCss;
 
 const mm = gsapWithCSS.matchMedia();
@@ -6288,6 +6288,7 @@ const CpslButton = class {
         index.registerInstance(this, hostRef);
         this.as = 'button';
         this.disabled = false;
+        this.pending = false;
         this.fullWidth = false;
         this.href = undefined;
         this.size = 'medium';
@@ -6296,7 +6297,7 @@ const CpslButton = class {
         this.variant = 'primary';
     }
     render() {
-        return (index.h(index.Host, { key: '0fd0606bdefb9664a01e2e9686065f5833e9190d', class: {
+        return (index.h(index.Host, { key: '8f65c32aa3f0bcfcdf621ea1c1b4b4b383b28850', class: {
                 // VARIANTS
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
@@ -6310,7 +6311,7 @@ const CpslButton = class {
                 'xSmall': this.size === 'xSmall',
                 'small': this.size === 'small',
                 'medium': this.size === 'medium',
-            } }, index.h(this.as, { key: '61b2fa9127eb03f9a3a4292f5161fe141ad545a5', href: this.href, target: this.target, part: "button-native", class: "button-native", type: this.type }, index.h("slot", { key: '2a3f3e90edace6f165cb1ead835a8dff1fc01cd6', name: "start" }), index.h("slot", { key: 'c0d5f828589bc74e40a6df43b85e3c04f1f25309' }), index.h("slot", { key: '11ea165fbc4141e49df46c2f09f203e052a5dfd1', name: "end" }))));
+            } }, index.h(this.as, { key: '1079c5db34801176d0aa51aaa02613a2357494fb', href: this.href, target: this.target, part: "button-native", class: "button-native", type: this.type, disabled: this.disabled || this.pending }, index.h("slot", { key: 'f5eaff65f6243b2506557e0cc2797217baa31db7', name: "start" }), this.pending ? index.h("cpsl-spinner", { size: 19 }) : index.h("slot", null), index.h("slot", { key: '257554b7f318af94ac762003129aa13f3b446767', name: "end" }))));
     }
 };
 CpslButton.style = CpslButtonStyle0;
@@ -6352,7 +6353,7 @@ const CpslButtonGroup = class {
         return this.el.querySelectorAll('&> *:not(cpsl-button)');
     }
     render() {
-        return (index.h(index.Host, { key: '91ccfcaf08be6fc45076376b19e63b5b58ab9b15' }, index.h("slot", { key: '9af22dc4fcbd76ebc32e476d1682e2fe41b33f81' })));
+        return (index.h(index.Host, { key: '13009bfa07a89c5bd9412683b8bc8338e9455dee' }, index.h("slot", { key: '308767ba6d3d3147f1ab60bcc98aa7ca1d1a2c28' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -6369,7 +6370,7 @@ const CpslCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '21177f5a9ceec0246dc1fa89a052bfdadacc3063' }, index.h("div", { key: '0940e0aaf62b24e1be0e99c736069b5bb463854c', class: { card: true }, part: "card-container" }, index.h("slot", { key: '6317e03f97be9841c03b040845591043bf203e36' }))));
+        return (index.h(index.Host, { key: 'f0b2545bd8c71dad45cdacc819695a7778bb9fcc' }, index.h("div", { key: '6c49feb59a958cc196d0c12a73839445353d44e7', class: { card: true }, part: "card-container" }, index.h("slot", { key: '04b3ecd54d97ea584a96b915d262a3d357d26fe4' }))));
     }
 };
 CpslCard.style = CpslCardStyle0;
@@ -6387,7 +6388,7 @@ const CpslCheckbox = class {
         this.checked = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '236c0b027e72c0c25dbc2fd3183a77400c815f8c' }, index.h("input", { key: '8c350e21268b87d485b16796b2058c4e47f46e75', type: "checkbox", checked: this.checked }), index.h("span", { key: 'b1d8fc6dd380b67eb8940f55bba47810c54ee189', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, index.h("cpsl-icon", { key: '2b3ddcad1e2b9007bda8135a810b75a1a2cfaeca', icon: "check" }))));
+        return (index.h(index.Host, { key: '48249b9fb66fd8acff7fb444f39f1b6b86243b81' }, index.h("input", { key: 'adfca3d8961b8c5ca7d3b3616101772607cb4ee4', type: "checkbox", checked: this.checked }), index.h("span", { key: '0f4004593d47c1b6d36215eda48959770e99252e', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, index.h("cpsl-icon", { key: '31395afa9b4b9cdcbe74fbccd9ec9abd2f03e441', icon: "check" }))));
     }
 };
 CpslCheckbox.style = CpslCheckboxStyle0;
@@ -6400,7 +6401,6 @@ const CpslCodeInput = class {
         index.registerInstance(this, hostRef);
         this.cpslInput = index.createEvent(this, "cpslInput", 7);
         this.handleInput = (ind, ev) => {
-            var _a;
             const inputElements = this.inputs;
             // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event
             if (ev.inputType === 'insertFromPaste') {
@@ -6409,42 +6409,110 @@ const CpslCodeInput = class {
             }
             if (ev.inputType === 'insertText') {
                 if (this.type === 'number' && isNaN(parseInt(ev.data))) {
+                    ev.preventDefault();
                     inputElements[ind].value = '';
                     return;
                 }
-                const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
-                inputElements[Math.min(this.length - 1, newCode.length)].focus();
+                // Prevent the default behavior FIRST
+                ev.preventDefault();
+                // Build the new code from the current component state, not the DOM
+                const currentCode = this.code || '';
+                // Insert the new character at the focused position, not at the end
+                const beforeFocused = currentCode.substring(0, ind);
+                const afterFocused = currentCode.substring(ind + 1);
+                const newCode = beforeFocused + ev.data + afterFocused;
+                // Prevent input beyond the maximum length
+                if (newCode.length > this.length) {
+                    return;
+                }
+                // Update the component state and emit event
                 this.cpslInput.emit({ value: newCode });
                 this.code = newCode;
+                // Update the specific input that was typed in
+                inputElements[ind].value = ev.data;
+                // Focus next input if not at the end
+                if (ind < this.length - 1) {
+                    // Set flag to prevent handleFocus from interfering
+                    this.isArrowNavigation = true;
+                    setTimeout(() => {
+                        inputElements[ind + 1].focus();
+                        this.isArrowNavigation = false;
+                    }, 0);
+                }
             }
         };
+        this.isArrowNavigation = false;
         this.handleKeyDown = (ind, ev) => {
             const inputElements = this.inputs;
             switch (ev.key) {
                 case 'Backspace': {
                     let newCode;
                     if (!inputElements[ind].value) {
-                        inputElements[Math.max(0, ind - 1)].value = '';
-                        inputElements[Math.max(0, ind - 1)].focus();
-                        newCode = this.code.substring(0, ind - 1);
+                        // If current input is empty, move to previous and clear it
+                        if (ind > 0) {
+                            inputElements[ind - 1].value = '';
+                            setTimeout(() => {
+                                inputElements[ind - 1].focus();
+                            }, 0);
+                            // Remove character at previous position
+                            const currentCode = this.code || '';
+                            newCode = currentCode.substring(0, ind - 1) + currentCode.substring(ind);
+                        }
+                        else {
+                            newCode = this.code;
+                        }
                     }
                     else {
-                        newCode = this.code.substring(0, ind);
+                        // Clear current input and remove character at current position
+                        inputElements[ind].value = '';
+                        const currentCode = this.code || '';
+                        newCode = currentCode.substring(0, ind) + currentCode.substring(ind + 1);
                     }
                     this.cpslInput.emit({ value: newCode });
                     this.code = newCode;
                     break;
                 }
                 case 'ArrowLeft': {
-                    setTimeout(() => {
-                        this.inputs[ind].setSelectionRange(1, 1);
-                    }, 0);
+                    ev.preventDefault();
+                    if (ind > 0) {
+                        this.isArrowNavigation = true;
+                        setTimeout(() => {
+                            inputElements[ind - 1].focus();
+                            this.isArrowNavigation = false;
+                        }, 0);
+                    }
+                    break;
+                }
+                case 'ArrowRight': {
+                    ev.preventDefault();
+                    if (ind < this.length - 1) {
+                        this.isArrowNavigation = true;
+                        setTimeout(() => {
+                            inputElements[ind + 1].focus();
+                            this.isArrowNavigation = false;
+                        }, 0);
+                    }
                     break;
                 }
             }
         };
         this.handleFocus = (ind) => {
             const inputElements = this.inputs;
+            // Don't interfere with arrow key navigation
+            if (this.isArrowNavigation) {
+                setTimeout(() => {
+                    inputElements[ind].setSelectionRange(1, 1);
+                }, 0);
+                return;
+            }
+            // If the focused input already has a value, allow it to stay focused (user clicked on it)
+            if (inputElements[ind].value) {
+                setTimeout(() => {
+                    inputElements[ind].setSelectionRange(1, 1);
+                }, 0);
+                return;
+            }
+            // Otherwise, use the default focus logic (find first empty or go to last)
             for (const input of inputElements) {
                 if (!input.value) {
                     input.focus();
@@ -6461,21 +6529,28 @@ const CpslCodeInput = class {
         };
         this.handlePaste = (e) => {
             const inputElements = this.inputs;
-            const pastedCode = e.clipboardData.getData('text');
-            if (this.type === 'number' && isNaN(parseInt(pastedCode))) {
-                // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.
-                setTimeout(() => {
-                    inputElements[0].value = '';
-                }, 0);
-                return;
+            let pastedCode = e.clipboardData.getData('text');
+            // Filter based on type
+            if (this.type === 'number') {
+                // Remove all non-numeric characters
+                pastedCode = pastedCode.replace(/\D/g, '');
+                // If no valid numbers remain, clear and return
+                if (!pastedCode) {
+                    setTimeout(() => {
+                        inputElements[0].value = '';
+                    }, 0);
+                    return;
+                }
             }
+            // Truncate pasted code to match the expected length
+            const truncatedCode = pastedCode.substring(0, this.length);
             this.cpslInput.emit({
-                value: pastedCode,
+                value: truncatedCode,
             });
             inputElements.forEach((input, index) => {
-                input.value = pastedCode.charAt(index);
+                input.value = truncatedCode.charAt(index) || '';
             });
-            inputElements[Math.min(this.length - 1, pastedCode.length)].focus();
+            inputElements[Math.min(this.length - 1, truncatedCode.length)].focus();
         };
         this.code = undefined;
         this.errorText = undefined;
@@ -6483,17 +6558,29 @@ const CpslCodeInput = class {
         this.length = undefined;
         this.type = 'number';
     }
+    watchCodeProp(newCode) {
+        // Update the input values when the code prop changes externally
+        const inputElements = this.inputs;
+        if (inputElements.length > 0) {
+            inputElements.forEach((input, index) => {
+                input.value = (newCode === null || newCode === void 0 ? void 0 : newCode[index]) || '';
+            });
+        }
+    }
     get inputs() {
         return Array.from(this.el.shadowRoot.querySelectorAll('input'));
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '9c620c8eb41b595e672e2b7d22944e37de630f73' }, index.h("div", { key: 'd8e870d0b15b90cfccd78ba5f15cf7b9c0680f0a', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (index.h(index.Host, { key: '16e16cc803f099963c784ed7bbd688afb7b8a59f' }, index.h("div", { key: 'b3f3a0ba95daf12f4e504bf91e9d8e57b3d97b44', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
             var _a, _b;
             return (index.h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText), 'has-value': ((_a = this.code) === null || _a === void 0 ? void 0 : _a[i]) !== undefined }, id: `code-input-${i}`, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_b = this.code) === null || _b === void 0 ? void 0 : _b[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
-        })), (this.errorText || this.helperText) && (index.h("div", { key: '532bccdc9d9135f4728c503c77b3795440a3607a', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { key: '02db8b47b661f64f2fb3073827aef50d7b94f1f3', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), index.h("span", { key: '228b294db359a308d3e76f2ce3c5d17b2d039781' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        })), (this.errorText || this.helperText) && (index.h("div", { key: '8f01ee92d99bbdde0f0b501640bb3136e4e134f8', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { key: '52a8d308da8c4fad19eec139510df8439a39b6d7', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), index.h("span", { key: '2d87ea9d774e51055774e76f71074e0eb0d60b10' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "code": ["watchCodeProp"]
+    }; }
 };
 CpslCodeInput.style = CpslCodeInputStyle0;
 
@@ -6505,7 +6592,7 @@ const CpslDivider = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'd5cffdef9344f7dcac4aae1bc2acca8c02d69946' }, index.h("div", { key: 'e07f8107804df83537a3b8e40d124c66d2fc6f44' }), index.h("slot", { key: 'd97f02d46a63d32d107838b5aa50654a9593cc8a' }), index.h("div", { key: '2316aed010b91a65c961e2f30cc2cde03b892429' })));
+        return (index.h(index.Host, { key: 'cffec64f3c150902ccff40b2362ce76dda41e32d' }, index.h("div", { key: '3ae8f787af8f4f112f0f3c51aa102b89fd7d8529' }), index.h("slot", { key: '1a6a2a37cd1966ec492e95b0d5cb718f484cc821' }), index.h("div", { key: '3fbe5d32823ad65a5404a6419d5ea26a73a03290' })));
     }
 };
 CpslDivider.style = CpslDividerStyle0;
@@ -6547,12 +6634,12 @@ const CpslDrawer = class {
         const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
         const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
         const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
-        return (index.h(index.Host, { key: 'a658bc7f4a536ad193ffa83045fc9ee051ce00c8', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
+        return (index.h(index.Host, { key: '8e9be7d905e533ffe26c5a13841c7b6770633414', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
                 top: this.anchor === 'top',
                 bottom: this.anchor === 'bottom',
                 left: this.anchor === 'left',
                 right: this.anchor === 'right',
-            } }, this.variant === 'temporary' && !this.noOverlay && index.h("cpsl-overlay", { key: '4af453a7893322c7327e4ae2daa36c510d79f63a', open: this.open, zIndexOverride: constants.DEFAULT_Z_INDICES.modal + 1 }), index.h("div", { key: 'd223fe6203a4b927a4c7b4254fbf74bd0c5b7ba4', id: "container", class: "container", part: "container" }, index.h("slot", { key: 'c297bc0a9ce799ea62e84a7c15b3d56279424091' }))));
+            } }, this.variant === 'temporary' && !this.noOverlay && index.h("cpsl-overlay", { key: 'b661c385794ab39eb87a304455da85602fadd349', open: this.open, zIndexOverride: constants.DEFAULT_Z_INDICES.modal + 1 }), index.h("div", { key: '1ad94f53ce752f518568139cd33e2aa11caa6d58', id: "container", class: "container", part: "container" }, index.h("slot", { key: '2bd9efb1ed55c388fd4c34e43900a7807f32a0ff' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -6645,11 +6732,22 @@ const ArrowCircleDownFilled = `<svg width="32" height="32" viewBox="0 0 32 32" f
     stroke-linecap="round" stroke-linejoin="round" />
 </svg>`;
 
+const ArrowCircleDown = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 12L12.5 16M12.5 16L16.5 12M12.5 16V8M22.5 12C22.5 17.5228 18.0228 22 12.5 22C6.97715 22 2.5 17.5228 2.5 12C2.5 6.47715 6.97715 2 12.5 2C18.0228 2 22.5 6.47715 22.5 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const ArrowNarrow = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path d="M4 12H20M20 12L14 6M20 12L14 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
 
+const ArrowUpDown = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.85355 1.64645C3.65829 1.45118 3.34171 1.45118 3.14645 1.64645L1.14645 3.64645C0.951184 3.84171 0.951184 4.15829 1.14645 4.35355C1.34171 4.54882 1.65829 4.54882 1.85355 4.35355L3 3.20711L3 10C3 10.2761 3.22386 10.5 3.5 10.5C3.77614 10.5 4 10.2761 4 10L4 3.20711L5.14645 4.35355C5.34171 4.54882 5.65829 4.54882 5.85355 4.35355C6.04882 4.15829 6.04882 3.84171 5.85355 3.64645L3.85355 1.64645Z" fill="currentColor"/>
+<path d="M9 8.79289V2C9 1.72386 8.77614 1.5 8.5 1.5C8.22386 1.5 8 1.72386 8 2V8.79289L6.85355 7.64645C6.65829 7.45118 6.34171 7.45118 6.14645 7.64645C5.95118 7.84171 5.95118 8.15829 6.14645 8.35355L8.14645 10.3536C8.34171 10.5488 8.65829 10.5488 8.85355 10.3536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645C10.6583 7.45118 10.3417 7.45118 10.1464 7.64645L9 8.79289Z" fill="currentColor"/>
+</svg>
+`;
+
 const Arrow = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
@@ -6797,6 +6895,9 @@ const Coinbase = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xm
 </svg>
 `;
 
+const Coins = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-coins-icon lucide-coins"><circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/></svg>
+`;
+
 const Copy07 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
 <g id="copy-07">
 <path id="Icon" d="M10.5 2.0028C9.82495 2.01194 9.4197 2.05103 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8.05103 3.4197 8.01194 3.82495 8.0028 4.5M19.5 2.0028C20.1751 2.01194 20.5803 2.05103 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C21.949 3.4197 21.9881 3.82494 21.9972 4.49999M21.9972 13.5C21.9881 14.175 21.949 14.5803 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.5803 15.949 20.1751 15.9881 19.5 15.9972M22 7.99999V9.99999M14.0001 2H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -6917,6 +7018,21 @@ const Dot = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" view
 <path d="M5 2.5C3.61929 2.5 2.5 3.61929 2.5 5C2.5 6.38071 3.61929 7.5 5 7.5C6.38071 7.5 7.5 6.38071 7.5 5C7.5 3.61929 6.38071 2.5 5 2.5Z"/>
 </svg>`;
 
+const DotsSquare = `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.1">
+<rect x="3.55566" y="3.05469" width="3.05556" height="3.05556" fill="currentColor"/>
+<rect x="3.55566" y="12.2227" width="3.05556" height="3.05556" fill="currentColor"/>
+<rect x="3.55566" y="21.3887" width="3.05556" height="3.05556" fill="currentColor"/>
+<rect x="21.8887" y="3.05469" width="3.05556" height="3.05556" fill="currentColor"/>
+<rect x="21.8887" y="12.2227" width="3.05556" height="3.05556" fill="currentColor"/>
+<rect x="21.8887" y="21.3887" width="3.05556" height="3.05556" fill="currentColor"/>
+<rect x="12.7227" y="3.05469" width="3.05556" height="3.05556" fill="currentColor"/>
+<rect x="12.7227" y="12.2227" width="3.05556" height="3.05556" fill="currentColor"/>
+<rect x="12.7227" y="21.3887" width="3.05556" height="3.05556" fill="currentColor"/>
+</g>
+</svg>
+`;
+
 const Dots = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
     <path
       d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z"
@@ -7047,6 +7163,11 @@ const Ethereum = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
 </svg>
 `;
 
+const ExternalLink = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 8.66667V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H7.33333M14 2L8 8M14 2H10M14 2V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const EyeOff = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.7429 5.09232C11.1494 5.03223 11.5686 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7767C21.8518 11.9016 21.8517 12.0987 21.8231 12.2236C21.7849 12.3899 21.7164 12.4985 21.5792 12.7156C21.2793 13.1901 20.8222 13.8571 20.2165 14.5805M6.72432 6.71504C4.56225 8.1817 3.09445 10.2194 2.42111 11.2853C2.28428 11.5019 2.21587 11.6102 2.17774 11.7765C2.1491 11.9014 2.14909 12.0984 2.17771 12.2234C2.21583 12.3897 2.28393 12.4975 2.42013 12.7132C3.54554 14.4952 6.89541 19 12.0004 19C14.0588 19 15.8319 18.2676 17.2888 17.2766M3.00042 3L21.0004 21M9.8791 9.87868C9.3362 10.4216 9.00042 11.1716 9.00042 12C9.00042 13.6569 10.3436 15 12.0004 15C12.8288 15 13.5788 14.6642 14.1217 14.1213" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
@@ -7703,6 +7824,11 @@ const OptimismBrand = `<?xml version="1.0" encoding="UTF-8"?>
 <path class="st1" d="M259.3,314.6c-1.4,0-2.4-0.4-3.2-1.3c-0.6-1-0.8-2.1-0.6-3.4l25.9-122c0.2-1.4,0.9-2.5,2.1-3.4  c1.1-0.9,2.3-1.3,3.6-1.3H337c13.9,0,25,2.9,33.4,8.6c8.5,5.8,12.8,14.1,12.8,25c0,3.1-0.4,6.4-1.1,9.8c-3.1,14.4-9.4,25-19,31.9  c-9.4,6.9-22.3,10.3-38.7,10.3h-25.3l-8.6,41.1c-0.3,1.4-0.9,2.5-2.1,3.4c-1.1,0.9-2.3,1.3-3.6,1.3H259.3z M325.7,242.9  c5.3,0,9.8-1.4,13.7-4.3c4-2.9,6.6-7,7.9-12.4c0.4-2.1,0.6-4,0.6-5.6c0-3.6-1.1-6.4-3.2-8.3c-2.1-2-5.8-3-10.9-3h-22.5l-7.1,33.6  H325.7z"/>
 </svg>`;
 
+const ParaArrow = `<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 0H8.85714V4.42857H19.9286C21.1515 4.42857 22.1429 5.41989 22.1429 6.64286C22.1429 7.86582 21.1515 8.85714 19.9286 8.85714H17.7143V11.0714C17.7143 12.2944 16.7229 13.2857 15.5 13.2857H13.2857V15.5C13.2857 16.723 12.2943 17.7143 11.0714 17.7143H8.85714V19.9286C8.85714 21.1515 7.86577 22.1429 6.64286 22.1429H4.42857V24.3571C4.42857 25.5801 3.4372 26.5714 2.21429 26.5714H0V31H4.42857V28.7857C4.42857 27.5627 5.41994 26.5714 6.64286 26.5714H8.85714V24.3571C8.85714 23.1342 9.84851 22.1429 11.0714 22.1429H13.2857V19.9286C13.2857 18.7056 14.2771 17.7143 15.5 17.7143H17.7143V15.5C17.7143 14.277 18.7057 13.2857 19.9286 13.2857H22.1429V11.0714C22.1429 9.84846 23.1342 8.85714 24.3571 8.85714C25.5801 8.85714 26.5714 9.84846 26.5714 11.0714V22.1429H31V0Z" fill="white"/>
+</svg>
+`;
+
 const ParaBlackBg = `<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70" fill="none" stroke="none">
   <mask id="path-1-outside-1_1233_12577" maskUnits="userSpaceOnUse" x="0" y="0" width="70" height="70" fill="black" stroke="none">
     <rect fill="white" stroke="none" width="70" height="70"/>
@@ -7848,13 +7974,15 @@ const Passcode = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xm
 </svg>
 `;
 
-const Phantom = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect width="24" height="24" fill="url(#pattern0_4266_576)"/>
+const Phantom = `<svg width="1200" height="1200" viewBox="0 0 1200 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2596_138580)">
+<rect y="-0.000976562" width="1200" height="1200" fill="#AB9FF2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M522.218 764.813C475.101 837.011 396.147 928.377 291.089 928.377C241.425 928.377 193.671 907.932 193.671 819.121C193.671 592.942 502.479 242.812 789.003 242.812C952.003 242.812 1016.95 355.901 1016.95 484.325C1016.95 649.167 909.979 837.65 803.647 837.65C769.901 837.65 753.346 819.121 753.346 789.731C753.346 782.064 754.62 773.758 757.167 764.813C720.874 826.788 650.835 884.292 585.253 884.292C537.499 884.292 513.304 854.262 513.304 812.093C513.304 796.759 516.487 780.786 522.218 764.813ZM769.035 479.871C769.035 517.293 746.956 536.003 722.258 536.003C697.185 536.003 675.481 517.293 675.481 479.871C675.481 442.449 697.185 423.738 722.258 423.738C746.956 423.738 769.035 442.449 769.035 479.871ZM909.367 479.872C909.367 517.294 887.288 536.005 862.59 536.005C837.517 536.005 815.813 517.294 815.813 479.872C815.813 442.45 837.517 423.74 862.59 423.74C887.288 423.74 909.367 442.45 909.367 479.872Z" fill="#FFFDF8"/>
+</g>
 <defs>
-<pattern id="pattern0_4266_576" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_4266_576" transform="scale(0.0078125)"/>
-</pattern>
-<image id="image0_4266_576" width="128" height="128" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAgKADAAQAAAABAAAAgAAAAABIjgR3AAAK7ElEQVR4Ae1d6XcUxxGvmVmhg0snlxBCIA4BwjbYATtGYCfGzst7yZ+YPyCf8jHhyAMhkHHwISMjgw8EOiwjdCAJdOzupGrx4NVec2xXz/R213v7Znenu6a66tfVx3RXW//8xwsXDGmrAVvbkpuC5zRgAKA5EAwADAA014DmxTcewABAcw1oXnzjAQwANNeA5sU3HsAAQHMNaF584wEMADTXgObFNx7AAEBzDWhefOMBDAA014DmxTcewABAcw1oXnzjAQwANNeA5sU3HsAAQHMNaF584wEMADTXgObFNx7AAEBzDWhefOMBDAA014DmxU9pXv7Qxd+63YJt+GlsBGhotKG+0YX6BoD6egvSGwBray6svnJhfc2C1VWA5SUXFp5nQz9HVgYDgAqa3tFsQfsuG7bvBGhps6C5xYJUnVUhR+lba6suTD7JwtSEC79MJAsMBgAFNqtvsKD7kA0HetDgbWK6SMTz0FEHP4BewoXxn7Iwdt+FVyvxg8EA4DcA7O92oPuwBXv3izF6Aa7e/CQPcviYgx+ARw8ycP/LDGQyb25L/6I9AHqPO3DslA2NTeFde7XWOtLnQGeXBXduZGE+pn6ClgCow1rYi8rvPW5hB06+4fOB07TNhoufWnD7ugu//iI/WItWAHAcwNqegqMnsTOXitfw+SAgWQYu18Ht/6Zh6qncfoE2AOg66MDpd+Nx9fnGrvT9g49ScPNKGn6dlgcC3h5PpdJKurdjpwWXPkvBuQEnlnY+bDHPXXBgS33YXNHT1zQA3nrPgct/r8uN5aOrSG5O6pOcPS/PMct7kkQ90gTO+YEU0FVF6uy2oa3DgufP+DuFNecBjven4PLf6pQ1vgfYU2ewxyqBasYDNG614dyHNrTvrg1Md2A5WtttmJvl7RDWBAB27UXjY+cp7jG96Ap76JiFABDNdTM/5avLsVMOXPhzquaMT2bq7LLBYrYQM/vNaBP5iyZ1zuPQrh/bSkvNvp6vOuq2WLAbvRsn8XJnkrwJ2/s//bUO9uPkTq3T7n286FauD7BtB07sfOrgYgxexSQFWK89AN/rQqUAsB1n9S5eTsVi/JfLWVhZRlgg7ppbLaAXSkFoYx1XBM29Hs+T/GGByz2XoQwAaHHGxU8coHZRNn1xK4OLODbXwjPnaYFH5SbowUgaRr/ePIw7eoLeSVTOV1g+As7SIs+kkBJ9ABoPx2X84ZvFxicDfTmcgSc/bwZFvuEefFtsfLr/8LsMjNwrny+fh/ed1iByUeIBQC9zLsRU86dx/d7E4/LG+upzWs1TXDNfvXThu4Kan2/Ah6OZ3GLR/P8qfW/ABahclGgA0ArcAWzzg7a3opU0/mOxcfOfsbEOuMizOM3jHzPgFv+dnxX8eOcnbmziMxMf5/wSRPhOS61pgidspynCo8pmWVzY3H6XSjj/Wwcv/97SQv6v0t/nn5f3LIU5SBdclMhOINX4AXT7nG2fKIWSFygm/zZ7fd0/jce3vt7HnXgJI1wT6QHev+TAzpb4RQvifRpwY0ghNTYV/lP8O0gaL1fxE7w71V/j13JBGU6dsYFe7iSB2nD04UdtHcVpmtv8cgG04kaToMS5bLxY+qBSMaSjhRDHcdFmUoj2CVQiGp+XAuu+rspvJuk9xsHe4KrPpCtJUd294FJU9xzf3KTM9/4YboLEl2mVCUgmWlZWimiDB72CLkVk4HL3KD2VM8yra9pvyEWJqG6kzA8upRK1VNtTOG3e2LrVgsmnLsxMZdFwAHs67dz2sUrTtOQZPv5LCieLMB+u8s1kcNdRp4UvsCygxR5h6OVSmNTh0iYCAG9jLaPallTad8CGfQdIutI1vpzcrdg/aO0In6+Q3wpOLHFROCgySNGxxwrVHjKIkHiWQeYVohYiVgA46H/+8GEinFBU/bHnW8e3iRRvgItiBcBb76aU2KzBpfwgfBeeB0kVPU1sAOjYY+Pr1NgeH11jknPOhZgyjiJaLBagNXxn3w/XoYpSuFrIw71jOBYAHD2pxjx/3ACiV82zzFvGpQOAAjGcOC39sXHbMtLzyfhZ/xeSkXh7maRbov+sA06C9uZ7ikjidXqS2fpYaKkAaMOIWwd6pD4yiXYNLNPU08BJIyeUao2+fqmPi6yUJGSk2IIvJUQRk2aRbTtez6EnQbkqyPD4J77Jn/zySwNAX78Z9uUrvtL3bNaFxz8EXzJWiZffPSkAoJU13YcNAPyM4d2fGM/mws56vzmvUgDQ25fcN32cyo3K++GoHPdP8kkBwEFT+wNjgWIJL8zxD/88gdgBQAsjgiyu9ATS/To6Is/4pGt2AHQfMu4/KKinMKL4PHNImEJZWAFgI/dOXE1jyF8DLm4lGrnHuPqzjAis1tmLIU6ixNcvI2tN//19br+g/CKyAqAdY90Z8tfAPHb6Rr+S2/Z7UrECoLXdAMBTdLkrbfr4HLeg+20mLZe/2v/ZAECLPloMAHztc3dwA5ZfyBv3FwrEBoAWjOhh2/F6gJVlXsWu4IFQ1RCdGDL5pDoe1Tyf8rIBYGdztaJVl59Cri/O8ymXIn1Uw30Sp3u/+ULOfH8lTbIBII5YPl5BKTDT/25nYRfuOeCgFwsudtoy0BBx3z6B884N+UO+UrpgA0CqrtTj5Pw3fDMNWexVcQxBCVxD1zdyBz2trYYHGIWduXUtGcYna/ABIKb9HtSuzky50MR0CNTwYOZ1uDhU3sJ8uKEbyTZ0HcEZLhtrrWEDgBODB6CXKF67yhE+ltz2TN46vbH7wSxJu3uGb2TeyMZq0ZDM2eopHaMqk2j51ND13ztVq3hap0gawgOdpgsOdKJ5+7voEd45Z5eMX0jDuye4sodq/gYeGJlE4gNAiBg41SpmHffP37ySAQrP5hEN0ej/LXimbzVEJ33eQmDNzpSu7RQrkLZ/05ZvCvtC7z+W8Nnzs3gyaJ481cjAmZcNAKR8GUQ1a/Aqxt0rMZlCK2v8onlWkpGOdiXj+w0n6WzgifHfvU8lnkm7xwaAUuHTRBeeds0OXk2XNdDYty509biR4gyS26Ywr+QBapnYAEBHnaTTOBRj2gRCY/HBa+j2V8obiPoFg1cBo48Ejy4+jkEeH40l+8h3kYBkAwAJSWNeOrBRNFFn7O4Qdqywd+1Hc8+y8O9/uXDybRt6MDBT4a4kehlDEzO5490xDIyspstPbln3WQHwPR6R3nVQbFG+vpuBH8bCtbcEFMpHn1x8HuwXpnEuZhU7aSp01MRqcDM3VgDQuPznR1noOVL9dAOdrk3Tu4shJ182FxfgWZnefGE6XX6zAoCUeO9OGkO+poACQkQh6oHfx3l3ak4MidcAOwBI5Bv/SUPf6RQcOWHBlgAHPlC7PP0U4/RjiLXCyRfxKtCboxQAkIrp9IwHI5A72HH3XsCjUfFINGyLaSUMTZVu4MQRXRfnIHeEOo0gDPFrQBoAvKLQjNrsDP0yLt3TSZzXaA1znBKbZwvVgAGAUHWqx8wAQD2bCZXYAECoOtVjZgCgns2ESmwAIFSd6jEzAFDPZkIlNgAQqk71mBkAqGczoRIbAAhVp3rMDADUs5lQiQ0AhKpTPWYGAOrZTKjEBgBC1akeMwMA9WwmVGIDAKHqVI+ZAYB6NhMqsQGAUHWqx8wAQD2bCZXYAECoOtVjZgCgns2ESmwAIFSd6jEzAFDPZkIlNgAQqk71mBkAqGczoRIbAAhVp3rMDADUs5lQiQ0AhKpTPWb/B0+q13cpbj9iAAAAAElFTkSuQmCC"/>
+<clipPath id="clip0_2596_138580">
+<rect y="-0.000976562" width="1200" height="1200" rx="600" fill="white"/>
+</clipPath>
 </defs>
 </svg>
 `;
@@ -8095,6 +8223,11 @@ const Shield = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stro
 </svg>
 `;
 
+const Shuffle = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 9L13 11M13 11L11 13M13 11H11.3793C10.7531 11 10.44 11 10.1559 10.9137C9.90428 10.8373 9.67024 10.712 9.46712 10.5451C9.23768 10.3565 9.06401 10.096 8.71669 9.57504L8.55556 9.33333M11 1L13 3M13 3L11 5M13 3H11.3793C10.7531 3 10.44 3 10.1559 3.0863C9.90428 3.1627 9.67024 3.28796 9.46712 3.45491C9.23768 3.64349 9.06401 3.90398 8.71669 4.42496L5.28331 9.57504C4.93599 10.096 4.76232 10.3565 4.53288 10.5451C4.32976 10.712 4.09572 10.8373 3.84414 10.9137C3.55996 11 3.24689 11 2.62075 11H1M1 3H2.62075C3.24689 3 3.55996 3 3.84414 3.0863C4.09572 3.1627 4.32976 3.28796 4.53288 3.45491C4.76232 3.64349 4.93599 3.90398 5.28331 4.42496L5.44444 4.66667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const SignalBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.11911 0.350322L9.38845 1.44131C8.32691 1.70367 7.31091 2.12432 6.3746 2.68912L5.79842 1.72428C6.82904 1.10015 7.94881 0.63684 9.11911 0.350322ZM14.8809 0.350322L14.6115 1.44131C15.6731 1.70367 16.6891 2.12432 17.6254 2.68912L18.2084 1.72428C17.1751 1.1007 16.0531 0.637446 14.8809 0.350322ZM1.72427 5.79503C1.10072 6.82716 0.637457 7.94795 0.350307 9.11913L1.44129 9.38846C1.70365 8.32693 2.1243 7.31093 2.68911 6.37461L1.72427 5.79503ZM1.12423 12C1.12414 11.4545 1.16517 10.9097 1.24696 10.3704L0.135519 10.1999C-0.0451731 11.392 -0.0451731 12.6046 0.135519 13.7967L1.24696 13.6297C1.1653 13.0903 1.12427 12.5455 1.12423 12ZM18.2016 22.2723L17.6254 21.3109C16.6906 21.8762 15.6756 22.2969 14.615 22.5587L14.8843 23.6497C16.0532 23.3604 17.1716 22.8961 18.2016 22.2723ZM22.8758 12C22.8757 12.5455 22.8347 13.0903 22.753 13.6297L23.8645 13.7967C24.0452 12.6046 24.0452 11.392 23.8645 10.1999L22.753 10.3704C22.8348 10.9097 22.8759 11.4545 22.8758 12ZM23.6497 14.8775L22.5587 14.6082C22.297 15.671 21.8763 16.6882 21.3109 17.6254L22.2757 18.205C22.8999 17.172 23.3632 16.0499 23.6497 14.8775ZM13.6297 22.7531C12.5494 22.9167 11.4506 22.9167 10.3703 22.7531L10.2033 23.8645C11.3943 24.0452 12.6057 24.0452 13.7967 23.8645L13.6297 22.7531ZM20.7552 18.4505C20.1072 19.3292 19.3302 20.1051 18.4505 20.7518L19.1187 21.6587C20.0876 20.9454 20.9449 20.0916 21.6621 19.1255L20.7552 18.4505ZM18.4505 3.24485C19.3302 3.89279 20.1072 4.66977 20.7552 5.54955L21.6621 4.87451C20.9474 3.90756 20.0925 3.05263 19.1255 2.33796L18.4505 3.24485ZM3.24483 5.54955C3.89278 4.66977 4.66976 3.89279 5.54954 3.24485L4.87449 2.33796C3.90754 3.05263 3.05262 3.90756 2.33795 4.87451L3.24483 5.54955ZM22.2757 5.79503L21.3109 6.37461C21.8762 7.30945 22.2969 8.3244 22.5587 9.38506L23.6497 9.11572C23.3625 7.94563 22.8992 6.82595 22.2757 5.79503ZM10.3703 1.24698C11.4506 1.08331 12.5494 1.08331 13.6297 1.24698L13.7967 0.135534C12.6057 -0.0451779 11.3943 -0.0451779 10.2033 0.135534L10.3703 1.24698ZM3.82101 21.9587L1.49925 22.4974L2.04134 20.1756L0.946941 19.9199L0.404856 22.2417C0.370939 22.3856 0.365734 22.5348 0.389539 22.6808C0.413344 22.8267 0.465692 22.9666 0.543588 23.0923C0.621485 23.218 0.723402 23.3271 0.843508 23.4134C0.963615 23.4997 1.09956 23.5615 1.24355 23.5952C1.41196 23.6327 1.58655 23.6327 1.75495 23.5952L4.07671 23.0599L3.82101 21.9587ZM1.17878 18.9176L2.27658 19.1698L2.65161 17.5606C2.10394 16.642 1.69604 15.6469 1.44129 14.6082L0.350307 14.8775C0.595705 15.8718 0.966907 16.8307 1.45493 17.7311L1.17878 18.9176ZM6.42915 21.3518L4.81994 21.7268L5.07564 22.8246L6.25868 22.5485C7.15838 23.038 8.11751 23.4093 9.11229 23.6531L9.38163 22.5621C8.34612 22.3041 7.35459 21.8939 6.43938 21.345L6.42915 21.3518ZM12 2.24932C6.61325 2.25273 2.25272 6.62009 2.25272 12.0034C2.25568 13.837 2.77433 15.6328 3.74941 17.1856L2.81185 21.1882L6.81099 20.2506C11.3693 23.1178 17.3902 21.7507 20.2574 17.1958C23.1247 12.641 21.7609 6.62009 17.2061 3.74943C15.6467 2.76884 13.842 2.24882 12 2.24932Z" fill="#3A76F0"/>
 </svg>
@@ -8326,6 +8459,11 @@ const UsdcBrand = `<svg data-name="86977684-12db-4850-8f30-233a7c267d11" xmlns="
 </svg>
 `;
 
+const User01 = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 21C20.5 19.6044 20.5 18.9067 20.3278 18.3389C19.94 17.0605 18.9395 16.06 17.6611 15.6722C17.0933 15.5 16.3956 15.5 15 15.5H10C8.60444 15.5 7.90665 15.5 7.33886 15.6722C6.06045 16.06 5.06004 17.0605 4.67224 18.3389C4.5 18.9067 4.5 19.6044 4.5 21M17 7.5C17 9.98528 14.9853 12 12.5 12C10.0147 12 8 9.98528 8 7.5C8 5.01472 10.0147 3 12.5 3C14.9853 3 17 5.01472 17 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const UserCircle = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
 <g id="user-circle">
 <path id="Icon" d="M5.3163 19.4384C5.92462 18.0052 7.34492 17 9 17H15C16.6551 17 18.0754 18.0052 18.6837 19.4384M16 9.5C16 11.7091 14.2091 13.5 12 13.5C9.79086 13.5 8 11.7091 8 9.5C8 7.29086 9.79086 5.5 12 5.5C14.2091 5.5 16 7.29086 16 9.5ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -8372,6 +8510,11 @@ const Valora = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmln
 </svg>
 `;
 
+const Wallet02 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 14H17.01M7 7H19C19.5304 7 20.0391 7.21071 20.4142 7.58579C20.7893 7.96086 21 8.46957 21 9V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const WalletConnect = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M4.91331 7.87401C8.82718 4.042 15.1728 4.042 19.0867 7.87401L19.5577 8.33519C19.7534 8.52681 19.7534 8.83744 19.5577 9.02906L17.9464 10.6067C17.8486 10.7025 17.6899 10.7025 17.5921 10.6067L16.9439 9.97206C14.2134 7.29872 9.78656 7.29872 7.05612 9.97206L6.36193 10.6517C6.26412 10.7475 6.1055 10.7475 6.00762 10.6517L4.39631 9.07406C4.20056 8.88244 4.20056 8.57181 4.39631 8.38019L4.91331 7.87401ZM22.4191 11.1367L23.8532 12.5408C24.0489 12.7324 24.0489 13.0431 23.8532 13.2347L17.3868 19.566C17.1911 19.7576 16.8738 19.7576 16.6781 19.566L12.0886 15.0725C12.0397 15.0246 11.9604 15.0246 11.9114 15.0725L7.32206 19.566C7.12637 19.7576 6.80906 19.7576 6.61337 19.566L0.14677 13.2346C-0.0489234 13.043 -0.0489234 12.7324 0.14677 12.5407L1.58087 11.1366C1.77656 10.9451 2.09385 10.9451 2.28954 11.1366L6.87912 15.6302C6.928 15.6781 7.00731 15.6781 7.05625 15.6302L11.6456 11.1366C11.8412 10.9451 12.1586 10.9451 12.3542 11.1366L16.9438 15.6302C16.9927 15.6781 17.0721 15.6781 17.121 15.6302L21.7104 11.1367C21.9062 10.9451 22.2234 10.9451 22.4191 11.1367Z" fill="#3396FF"/>
 </svg>
@@ -8407,6 +8550,11 @@ const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCo
 </svg>
 `;
 
+const Zap = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.99999 13.9997C3.81076 14.0003 3.62522 13.9473 3.46495 13.8467C3.30467 13.746 3.17623 13.602 3.09454 13.4313C3.01286 13.2606 2.98129 13.0703 3.00349 12.8823C3.0257 12.6944 3.10077 12.5166 3.21999 12.3697L13.12 2.16967C13.1943 2.08396 13.2955 2.02603 13.407 2.00541C13.5185 1.98478 13.6337 2.00269 13.7337 2.05618C13.8337 2.10967 13.9126 2.19557 13.9573 2.29978C14.0021 2.40399 14.0101 2.52032 13.98 2.62967L12.06 8.64967C12.0034 8.8012 11.9844 8.96419 12.0046 9.12468C12.0248 9.28517 12.0837 9.43836 12.1761 9.5711C12.2685 9.70385 12.3918 9.81219 12.5353 9.88684C12.6788 9.96148 12.8382 10.0002 13 9.99967H20C20.1892 9.99903 20.3748 10.0521 20.535 10.1527C20.6953 10.2533 20.8238 10.3973 20.9054 10.568C20.9871 10.7387 21.0187 10.9291 20.9965 11.117C20.9743 11.3049 20.8992 11.4827 20.78 11.6297L10.88 21.8297C10.8057 21.9154 10.7045 21.9733 10.593 21.9939C10.4815 22.0146 10.3663 21.9967 10.2663 21.9432C10.1663 21.8897 10.0874 21.8038 10.0427 21.6996C9.99791 21.5954 9.98991 21.479 10.02 21.3697L11.94 15.3497C11.9966 15.1982 12.0156 15.0352 11.9954 14.8747C11.9752 14.7142 11.9163 14.561 11.8239 14.4282C11.7315 14.2955 11.6082 14.1872 11.4647 14.1125C11.3212 14.0379 11.1617 13.9991 11 13.9997H3.99999Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const Zerion = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_201_2847)">
 <mask id="mask0_201_2847" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
@@ -12403,7 +12551,9 @@ const Icons = {
     arbitrumBrand: ArbitrumBrand,
     arrowCircleBrokenDownLeft: ArrowCircleBrokenDownLeft,
     arrowCircleDownFilled: ArrowCircleDownFilled,
+    arrowCircleDown: ArrowCircleDown,
     arrowNarrow: ArrowNarrow,
+    arrowUpDown: ArrowUpDown,
     arrow: Arrow,
     asterisk: Asterisk,
     backpack: Backpack,
@@ -12427,6 +12577,7 @@ const Icons = {
     clubhouse: Clubhouse,
     code: Code,
     coinbase: Coinbase,
+    coins: Coins,
     copy07: Copy07,
     copy: Copy,
     cosmosCircle: CosmosCircle,
@@ -12444,6 +12595,7 @@ const Icons = {
     discordBrand: DiscordBrand,
     discord: Discord,
     dot: Dot,
+    dotsSquare: DotsSquare,
     dots: Dots,
     downloadCloud: DownloadCloud,
     download: Download,
@@ -12454,6 +12606,7 @@ const Icons = {
     emptyCircle: EmptyCircle,
     ethCircle: EthCircle,
     ethereum: Ethereum,
+    externalLink: ExternalLink,
     eyeOff: EyeOff,
     eye: Eye,
     facebookBrand: FacebookBrand,
@@ -12513,6 +12666,7 @@ const Icons = {
     nobleBrand: NobleBrand,
     okx: Okx,
     optimismBrand: OptimismBrand,
+    paraArrow: ParaArrow,
     paraBlackBg: ParaBlackBg,
     paraBrand: ParaBrand,
     paraIconBrand: ParaIconBrand,
@@ -12548,6 +12702,7 @@ const Icons = {
     settings: Settings,
     share: Share,
     shield: Shield,
+    shuffle: Shuffle,
     signalBrand: SignalBrand,
     signal: Signal,
     sliders: Sliders,
@@ -12575,15 +12730,18 @@ const Icons = {
     twitterBrand: TwitterBrand,
     twitter: Twitter,
     usdcBrand: UsdcBrand,
+    user01: User01,
     userCircle: UserCircle,
     userPlus: UserPlus,
     user: User,
     valora: Valora,
+    wallet02: Wallet02,
     walletConnect: WalletConnect,
     wallet: Wallet,
     x: X,
     youtubeBrand: YoutubeBrand,
     youtube: Youtube,
+    zap: Zap,
     zerion: Zerion,
     AD: AD,
     AE: AE,
@@ -12921,7 +13079,7 @@ const CpslDropdown = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '918eabdb23ab1f6c136c2ade37b572b60966ce75' }, index.h("button", { key: '53cde2c1780c6ceb1c08667fac003910810472b2', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, index.h("div", { key: '9dded62f6bcd83665f2af693f2ac6cff20de4d52', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), index.h("ul", { key: '10a3cfc29eb61e9a2c64b0075c0b9b2985d08c70', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (index.h("li", { key: '702a1282cb816da185a0ce435146443daddb1d6c', class: "search-bar" }, index.h("input", { key: 'da05fa6019d2c0bd1dab4336378cd449172a3cae', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (index.h("li", { onClick: this.handleItemSelect(item) }, index.h("span", { innerHTML: Icons[item.icon] }), item.label, " ", index.h("span", { class: "dropdown-value" }, item.value)))))));
+        return (index.h(index.Host, { key: '76f4d93f5c0d4fddca26a8d7dc381d8c9b22119c' }, index.h("button", { key: '7186e6bedbeac44d8bc8b95de5acafeea999d2f2', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, index.h("div", { key: 'b5ef03a1a7bf5b37aa35ee30ce6233d7b19dc33e', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), index.h("ul", { key: 'b0d9227ed1d360405a0294efbd4fe2a25926b7d2', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (index.h("li", { key: '0a7100d5c60114bf63583a2d808a7cb677053346', class: "search-bar" }, index.h("input", { key: '098d19346facb88c51674db9005354da36079820', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (index.h("li", { onClick: this.handleItemSelect(item) }, index.h("span", { innerHTML: Icons[item.icon] }), item.label, " ", index.h("span", { class: "dropdown-value" }, item.value)))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -13057,14 +13215,14 @@ const CpslFileUpload = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '521ca35901a009b303650d7446e1f148930d7fe3' }, this.label && (index.h("label", { key: '94c58691decea8455a254698ec8fd27baba260ca', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("slot", { key: 'cf7e80e4c4a1e48b4f4efddfe4e8eb0f4a31ed4b', name: "label" }), index.h("div", { key: '35f1707b3c8d1f1c939d9312b541f32edfc424d1', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, index.h("div", { key: '327f71aaaa7d4920a62118ea956c4c128907fae6', class: { 'label-container': true } }, index.h("slot", { key: '0c4891ffb0c9d49e2b5b09c3bdbc8d5b2ed3ff2d', name: "left-content" })), index.h("div", { key: '47dc7cc569d860dc07478c2782c62a0d25b3df07', class: { 'file-container': true } }, this.FileContent), index.h("input", { key: '809568bfed82463cda7851d3717187112cff708b', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: this.file ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange, disabled: this.disabled })), (this.errorText || this.helperText) && (index.h("div", { key: '6f06cba54f65d903b3d22e015e694a154b189df7', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: '2103ca2366b9a7827c42302cea3fa8d8c71bc50b' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
+        return (index.h(index.Host, { key: '16d9e9ac3a79cbaab554cd9b8901f2b5a930327d' }, this.label && (index.h("label", { key: 'a0d3cba9de77959cc1fa9d415e943800997fa1db', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("slot", { key: '2ae7b7de344204f341ce8aa8044908bdc183cee1', name: "label" }), index.h("div", { key: 'd4ba3206869ed403217e37b20e9557784f98cfd2', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, index.h("div", { key: '7f344b81e11e07b00e8cdbee5a89cc4300e02b4b', class: { 'label-container': true } }, index.h("slot", { key: 'c187ed9574eab9e21669a04d6a9d663adabcab75', name: "left-content" })), index.h("div", { key: '6bc08c41c298577cf71ca7f7209764d62fc42641', class: { 'file-container': true } }, this.FileContent), index.h("input", { key: '1696d38e71235671341b9e4388fa2a8478d5b259', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: this.file ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange, disabled: this.disabled })), (this.errorText || this.helperText) && (index.h("div", { key: 'f2c25a388395daf16082856e8135d952e4166247', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: 'd6af4e67851048e79f3342156e35b87928dbef7c' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
     }
     get el() { return index.getElement(this); }
 };
 let inputIds$2 = 0;
 CpslFileUpload.style = CpslFileUploadStyle0;
 
-const cpslIconCss = ":host{display:block;--filter:auto;--height:24px;--width:24px;--inset:0px;--svg-height:calc(var(--height) - (2 * var(--inset)));--svg-width:calc(var(--width) - (2 * var(--inset)));--icon-color:currentColor;--icon-fill-color:currentColor;--icon-stroke-color:currentColor;width:var(--width);height:var(--height)}:host .foreground-0{fill:var(--cpsl-color-foreground-0);stop-color:var(--cpsl-color-foreground-0)}:host .accent-0{fill:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));stop-color:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0))}:host div{display:flex;justify-content:center;align-items:center;width:100%;height:100%;color:var(--icon-color)}:host svg{width:var(--svg-width, \"100%\");height:var(--svg-height, \"100%\");filter:var(--filter)}:host svg .background-16{fill:var(--cpsl-color-background-16)}:host svg .foreground-0{fill:var(--cpsl-color-foreground-0)}:host svg .fill{fill:var(--icon-fill-color)}:host svg .stroke{stroke:var(--icon-stroke-color)}:host img{width:100%;height:100%;object-fit:contain}";
+const cpslIconCss = ":host{display:block;--filter:auto;--height:24px;--width:24px;--inset:0px;--computed-height:calc(var(--height) - (2 * var(--inset)));--computed-width:calc(var(--width) - (2 * var(--inset)));--icon-color:var(--icon-color, currentColor);--icon-fill-color:var(--icon-fill-color, var(--icon-color, currentColor));--icon-stroke-color:var(--icon-stroke-color, var(--icon-color, currentColor));width:var(--width);height:var(--height)}:host .foreground-0{fill:var(--cpsl-color-foreground-0);stop-color:var(--cpsl-color-foreground-0)}:host .accent-0{fill:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));stop-color:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0))}:host div{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border:var(--icon-border, auto);border-radius:var(--icon-border-radius, 0);background:var(--icon-background, transparent);color:var(--icon-color);box-sizing:border-box}:host svg{width:var(--computed-width, \"100%\");height:var(--computed-height, \"100%\");filter:var(--filter);border-radius:var(--icon-border-radius, 0)}:host svg .background-16{fill:var(--cpsl-color-background-16)}:host svg .foreground-0{fill:var(--cpsl-color-foreground-0)}:host svg .fill{fill:var(--icon-fill-color)}:host svg .stroke{stroke:var(--icon-stroke-color)}:host img{width:var(--computed-width, 100%);height:var(--computed-height, 100%);max-width:100%;max-height:100%;object-fit:contain}";
 const CpslIconStyle0 = cpslIconCss;
 
 const CpslIcon = class {
@@ -13075,9 +13233,13 @@ const CpslIcon = class {
         this.invert = undefined;
         this.inset = '0px';
         this.icon = undefined;
+        this.radius = 'none';
+        this.background = undefined;
+        this.color = undefined;
+        this.border = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '0430d12efb436b0617a9e4c70cf24bee39fa8382', part: "icon", role: "img", style: Object.assign(Object.assign(Object.assign({}, (this.inset ? { ['--inset']: this.inset } : {})), (this.size ? { ['--height']: this.size, ['--width']: this.size } : {})), (this.invert ? { ['--filter']: 'invert(100%)' } : {})) }, !this.icon ? index.h("img", { src: this.src }) : index.h("div", { innerHTML: Icons[this.icon] })));
+        return (index.h(index.Host, { key: '68cd89e6f4bd22d2ff4a064ee0103489478b30e1', part: "icon", role: "img", style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (this.inset ? { ['--inset']: this.inset } : {})), (this.size ? { ['--height']: this.size, ['--width']: this.size } : {})), (this.invert ? { ['--filter']: 'invert(100%)' } : {})), (this.radius === 'full' ? { ['--icon-border-radius']: '1000px' } : {})), (this.radius === 'theme' ? { ['--icon-border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {})), (this.background ? { ['--icon-background']: this.background } : {})), (this.border ? { ['--icon-border']: this.border } : {})), (this.color ? { ['--icon-color']: this.color } : {})) }, this.src ? (index.h("div", null, index.h("img", { src: this.src, style: { borderRadius: this.radius === 'full' ? '1000px' : undefined } }))) : (index.h("div", { innerHTML: Icons[this.icon] }))));
     }
 };
 CpslIcon.style = CpslIconStyle0;
@@ -13115,7 +13277,7 @@ const CpslIconGroup = class {
     render() {
         // If disabled remove all brand icons to ensure the disabled color is shown correctly
         const icons = this.disabled ? this.icons.map(icon => icon.replace('Brand', '')) : this.icons;
-        return (index.h(index.Host, { key: 'f471279b940c2b3b3872c1d37477fd85073127c8' }, icons.map((icon, index$1) => {
+        return (index.h(index.Host, { key: '37605ca88dcbabf8aa252ee921306f716ce3459e' }, icons.map((icon, index$1) => {
             const isIcon = isOfTypeIconType(icon);
             return (index.h("span", { part: "icon-container", class: {
                     'icon-container': true,
@@ -17094,7 +17256,7 @@ const CpslInput = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '9b5abde0435d0acbb4f453e3c7b4c7d1da89a165', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value), 'contrast-text': this.contrastText } }, this.label && (index.h("label", { key: '1ef8472e4ab2a114a3ac961ed5fbcafe82041631', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: '8945dd09731255aab8acb91f4e12f5285ec86930', class: { 'input-container': true, 'error-container': Boolean(this.errorText), 'textarea': this.as === 'textarea' } }, index.h("slot", { key: '2f36a7cb8086269c51a4924dc671245a31eddb4f', name: "start" }), index.h(this.as, { key: '9e244a91bc8909db5fcf54fd10ccf221df8846c2', part: "native-input", class: { 'native-input': true }, ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, size: this.fitContent ? ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 1) : undefined, spellcheck: this.spellcheck, type: this.type, value: (_c = this.value) !== null && _c !== void 0 ? _c : '', rows: this.rows, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), index.h("slot", { key: '3f3f289699ca56a6c9d0b5e01e702c6a301697dc', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { key: 'f413751aca4b5059a6b3e6151182b19b09a85d89', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: '5189ac80ac4356f267412a93564b077888a206cf' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText)))));
+        return (index.h(index.Host, { key: '3335ee77eeef1674ee4e63dd715d5bef53e7079d', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value), 'contrast-text': this.contrastText } }, this.label && (index.h("label", { key: '6bff728ccf314abe1901fa178442d4519eb0ea2c', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: '528f02f84fa0625e7792e31308e68990303752be', class: { 'input-container': true, 'error-container': Boolean(this.errorText), 'textarea': this.as === 'textarea' } }, index.h("slot", { key: '140f3f895d626d947c99741b9d45c478b71e967e', name: "start" }), index.h(this.as, { key: 'e11a9700fab863a08cce868bb7413a2ca50ca45c', part: "native-input", class: { 'native-input': true }, ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, size: this.fitContent ? ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 1) : undefined, spellcheck: this.spellcheck, type: this.type, value: (_c = this.value) !== null && _c !== void 0 ? _c : '', rows: this.rows, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), index.h("slot", { key: 'ff447dca64a4532e305bdbe3877f04d4ea17220d', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { key: '60330d9d1f935ebc4ab0b948c6d37439ccd7b202', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: '18fa73f7a1befbda7680acd7bbceeb355d8f8832' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -17124,13 +17286,13 @@ const CpslNavButtonGroup = class {
         return this.el.querySelectorAll('&> *:not(cpsl-nav-button)');
     }
     render() {
-        return (index.h(index.Host, { key: 'd52d419d0bcd96e2759a6a39f048f823c3d2ba69' }, index.h("slot", { key: '851d194ca0b7b0caef7b09420918eb4cdcbee137' })));
+        return (index.h(index.Host, { key: 'adffbef53dea8bd1cf9e90fb0a48e66d2eeebb80' }, index.h("slot", { key: 'c32bcb35830d0fdda3a991c66d8cba95ff0c90cd' })));
     }
     get el() { return index.getElement(this); }
 };
 CpslNavButtonGroup.style = CpslNavButtonGroupStyle0;
 
-const cpslOverlayCss = ":host{position:fixed;width:100%;height:100%;inset:0px;z-index:10001;opacity:0%;display:none;background:linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.7) 100%)}:host(.over-modal){z-index:10005}";
+const cpslOverlayCss = ":host{position:fixed;width:100%;height:100%;inset:0px;z-index:10001;opacity:0%;display:none;background:var(--cpsl-overlay-background, linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.7) 100%))}:host(.over-modal){z-index:10005}";
 const CpslOverlayStyle0 = cpslOverlayCss;
 
 const CpslOverlay = class {
@@ -17162,7 +17324,7 @@ const CpslOverlay = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '62199abc410f605818c392e64e0bcfc1a33ec8a5', style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {} }, index.h("slot", { key: 'df78ed55eac09acb15743c933ad0ee38a3d5b93a' })));
+        return (index.h(index.Host, { key: '6268805f6988b86573778b2f84b543f09c140882', style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {} }, index.h("slot", { key: '2c985bbabb236f31cabec9b3efa9ee72b034e8b7' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -17248,7 +17410,7 @@ const CpslPagination = class {
                 filteredPages.push(this.totalPages - 1);
             }
         }
-        return (index.h(index.Host, { key: '030d0a78198c77a243ae9996dd8192437c3c370b' }, index.h("cpsl-button-group", { key: 'b12f592a5cf2cdab91c82516206e4a831bdad5d6', selectedId: `${this.currentPage}` }, index.h("cpsl-button", { key: 'a24be555c3be19f63a5011aacac7046dbd8bdecd', class: "arrow-button", onClick: this.handlePrevClick }, index.h("cpsl-icon", { key: 'e82fe20b2091ede6ac99c16dfb433b47d7490293', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (index.h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, index.h("cpsl-text", { variant: "bodyS" }, page + 1)))), index.h("cpsl-button", { key: '3d4c5c6b211a1543818746da22739df63a4afcee', class: "arrow-button", onClick: this.handleNextClick }, index.h("cpsl-icon", { key: 'f623fb7dc739556480bc90d1ce296baa8f5afcb0', class: "icon", icon: "arrowNarrow" })))));
+        return (index.h(index.Host, { key: '08ba1aa206baa9e7c8cb4c5622e87279b6e8f498' }, index.h("cpsl-button-group", { key: 'f0103c126de971b5571b25e587701976caffd2e1', selectedId: `${this.currentPage}` }, index.h("cpsl-button", { key: 'e3fc3c25e28e72169c669746b211befe19be5879', class: "arrow-button", onClick: this.handlePrevClick }, index.h("cpsl-icon", { key: '27160d1fb321b8f2657c4bc521b2f3bf3f8aae8b', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (index.h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, index.h("cpsl-text", { variant: "bodyS" }, page + 1)))), index.h("cpsl-button", { key: '3211a3bb0db95e7f455490b939c7647e8c3ea79e', class: "arrow-button", onClick: this.handleNextClick }, index.h("cpsl-icon", { key: 'e321dd46868eab8d416507685e7415daa41c676e', class: "icon", icon: "arrowNarrow" })))));
     }
     static get watchers() { return {
         "currentPage": ["watchChange"]
@@ -17265,7 +17427,7 @@ const CpslPill = class {
         this.text = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'a349d2f48d6ebc223437e1a9ca125587061659dc' }, index.h("div", { key: '1bf3f63a8c41fb7fa662201817f5884e3c3926fd', class: "pill-container" }, index.h("span", { key: 'd9ba2ff7fd44d242b5ae0ee037ae6b9c85ff4834' }, this.text))));
+        return (index.h(index.Host, { key: 'ed6ded111258751c1021876895a8f09a27323f55' }, index.h("div", { key: '5b10f2e2d77eaab9e8cd4d25a63052e8690ad380', class: "pill-container" }, index.h("span", { key: '09704e30cf5e01f1891427d486545735182d0a9d' }, this.text))));
     }
 };
 CpslPill.style = CpslPillStyle0;
@@ -17379,18 +17541,23 @@ const CpslPopover = class {
                 const elWidth = this.el.clientWidth;
                 const elHeight = this.el.clientHeight;
                 const { top, left, height, width } = anchorEl.getBoundingClientRect();
-                switch (this.anchorOriginHorizontal) {
-                    case 'left': {
-                        this.positionX = left;
-                        break;
-                    }
-                    case 'center': {
-                        this.positionX = left + width / 2;
-                        break;
-                    }
-                    case 'right': {
-                        this.positionX = left + width;
-                        break;
+                if (this.alignCenter) {
+                    this.positionX = left + (width / 2 - elWidth / 2);
+                }
+                else {
+                    switch (this.anchorOriginHorizontal) {
+                        case 'left': {
+                            this.positionX = left;
+                            break;
+                        }
+                        case 'center': {
+                            this.positionX = left + width / 2;
+                            break;
+                        }
+                        case 'right': {
+                            this.positionX = left + width;
+                            break;
+                        }
                     }
                 }
                 switch (this.anchorOriginVertical) {
@@ -17467,6 +17634,7 @@ const CpslPopover = class {
         this.preventBlur = undefined;
         this.transformOriginHorizontal = 'left';
         this.transformOriginVertical = 'top';
+        this.alignCenter = false;
         this.triggerAction = 'click';
         this.trigger = undefined;
         this.windowPadding = 16;
@@ -17512,7 +17680,7 @@ const CpslPopover = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '10c267166cb8ccb9c9eff6b3e865804688d31b95', class: {
+        return (index.h(index.Host, { key: '70f0dae4ade16ae959e70ca856ce6853b2fbc4e8', class: {
                 'open': this.open,
                 'transform-h-left': this.transformOriginHorizontal === 'left',
                 'transform-h-center': this.transformOriginHorizontal === 'center',
@@ -17524,9 +17692,9 @@ const CpslPopover = class {
                 top: `${this.positionY}px`,
                 left: `${this.positionX}px`,
                 width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px`,
-            } }, index.h("div", { key: '292d9e8e45996b711b8979d4a38c054a04306f48', id: "container", class: { container: true, open: this.open }, style: {
+            } }, index.h("div", { key: '0f8f63ffd0b79319603c30cb8f59c8fb516f13a4', id: "container", class: { container: true, open: this.open }, style: {
                 visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',
-            } }, index.h("slot", { key: 'aca410ff44bf9c77cb3eea6da1bd349bdc87287d' }))));
+            } }, index.h("slot", { key: 'c03b1433b0454d09175c271d5f16335bad58d0fb' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -17535,6 +17703,7 @@ const CpslPopover = class {
         "preventBlur": ["onTriggerChange"],
         "anchorOriginHorizontal": ["onAnchorChange"],
         "anchorOriginVertical": ["onAnchorChange"],
+        "alignCenter": ["onAnchorChange"],
         "open": ["onOpenChange"]
     }; }
 };
@@ -21675,7 +21844,7 @@ const CpslQrCode = class {
         return this.el.shadowRoot.getElementById('qr-code');
     }
     render() {
-        return (index.h(index.Host, { key: '5d33fffc63f8435f8811909016ff6dd844f34ef1' }, index.h("div", { key: '8b0c863ee11da247165c8ca73aa53fb3b597c421', id: "qr-container", class: "qr-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, index.h("img", { key: '700d4fd92201aee190a069cfbe89c124eb54e5c6', id: "qr-code", class: "qr-code" }))));
+        return (index.h(index.Host, { key: '0dcc5d32f6c8faaacdb5d0ecc8610731b4e8d42f' }, index.h("div", { key: 'b330ff066d7e8215ef74561b6e31fcbafbdea8cb', id: "qr-container", class: "qr-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, index.h("img", { key: '8fabed3495c62214a7d635e0bc777b414d16a308', id: "qr-code", class: "qr-code" }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -21696,12 +21865,12 @@ const CpslRadio = class {
         this.checked = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'a0440f0feb4b7a67517d1d8278e9bcbb2c7ef764' }, index.h("input", { key: '54dc5c3e64777504d5c851940d785a90de2d2882', type: "radio", checked: this.checked }), index.h("span", { key: 'dc5d326b957993e0a14ae6827751e946e141d3e6', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
+        return (index.h(index.Host, { key: 'd16cc95323ff4d04b643beb986081c8ee93d10dd' }, index.h("input", { key: 'e33dbf1aea7fbf6c17f074162e1b123b5df4f797', type: "radio", checked: this.checked }), index.h("span", { key: '9ec66324f32c9ef1c2b3d7fba10ed5b9df0e9979', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
     }
 };
 CpslRadio.style = CpslRadioStyle0;
 
-const cpslSelectCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-select-border-placeholder);--container-border-color:var(--cpsl-color-select-border-active);--container-border-error-color:var(--cpsl-color-select-border-error);--container-background-color:var(--cpsl-color-select-surface-default);--container-background-color-disabled:var(--cpsl-color-select-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-select);--container-padding-top:0px;--container-padding-bottom:0px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--dropdown-margin-top:4px;--dropdown-border-width:1px;--dropdown-border-radius:var(--cpsl-border-radius-select);--dropdown-border-color:var(--cpsl-color-select-dropdown-border);--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;--select-color:var(--cpsl-color-text-primary);--icon-height:24px;--icon-width:24px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}input{box-sizing:border-box;position:absolute;width:100%;height:100%;margin:0px;opacity:0;top:0;left:0;z-index:-1;cursor:pointer}input.disabled{cursor:default}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-select-border-placeholder);--select-color:var(--cpsl-color-text-secondary)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--select-background-color:var(--select-background-color-disabled);--select-color:var(--cpsl-color-text-disabled)}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-select-border-active);--container-background-color:var(--cpsl-color-select-surface-default)}.select-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);cursor:pointer;border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}.selected-container-content{flex:1}.selected-container-content.hidden{display:none}.chevron{transition:transform 0.3s ease;transform:rotate(180deg);--icon-color:var(--cpsl-color-text-disabled);--height:var(--icon-height);--width:var(--icon-width)}.chevron.open{transform:rotate(0deg);--icon-color:var(--cpsl-color-text-primary)}.chevron.has-value{--icon-color:var(--cpsl-color-text-primary)}.selected-text{--color-override:var(--select-color)}.selected-text.placeholder{--color-override:var(--select-color)}.dropdown{margin-top:var(--dropdown-margin-top);border-style:solid;border-width:var(--dropdown-border-width);border-color:var(--dropdown-border-color);border-radius:var(--dropdown-border-radius);overflow:hidden}.dropdown ::slotted(*:last-child){--container-border-width:0px}.dropdown-inner{overflow:auto;max-height:calc(100vh - 32px);scrollbar-width:thin}.dropdown-inner ::slotted(cpsl-input){padding:8px}.search-container{position:sticky;top:0px;padding:8px;background-color:var(--cpsl-color-select-surface-default)}";
+const cpslSelectCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-select-border-placeholder);--container-border-color:var(--cpsl-color-select-border-active);--container-border-error-color:var(--cpsl-color-select-border-error);--container-background-color:var(--cpsl-color-select-surface-default);--container-background-color-disabled:var(--cpsl-color-select-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-select);--container-padding-top:0px;--container-padding-bottom:0px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--dropdown-margin-top:4px;--dropdown-border-width:1px;--dropdown-border-radius:var(--cpsl-border-radius-select);--dropdown-border-color:var(--cpsl-color-select-dropdown-border);--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;--select-color:var(--cpsl-color-text-primary);--icon-height:24px;--icon-width:24px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}input{box-sizing:border-box;position:absolute;width:100%;height:100%;margin:0px;opacity:0;top:0;left:0;z-index:-1;cursor:pointer}input.disabled{cursor:default}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-select-border-placeholder);--select-color:var(--cpsl-color-text-secondary)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--select-background-color:var(--select-background-color-disabled);--select-color:var(--cpsl-color-text-disabled)}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-select-border-active);--container-background-color:var(--cpsl-color-select-surface-default)}.select-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);cursor:pointer;border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}.selected-container-content{flex:1}.selected-container-content.hidden{display:none}.chevron{transition:transform 0.3s ease;transform:rotate(180deg);--icon-color:var(--cpsl-color-text-disabled);--height:var(--icon-height);--width:var(--icon-width)}.chevron.open{transform:rotate(0deg);--icon-color:var(--cpsl-color-text-primary)}.chevron.has-value{--icon-color:var(--cpsl-color-text-primary)}.selected-text{--color-override:var(--select-color)}.selected-text.placeholder{--color-override:var(--select-color)}.dropdown{margin-top:var(--dropdown-margin-top);border-style:solid;border-width:var(--dropdown-border-width);border-color:var(--dropdown-border-color);border-radius:var(--dropdown-border-radius);overflow:hidden}.dropdown ::slotted(*:last-child){--container-border-width:0px}.dropdown-inner{overflow:auto;padding:var(--dropdown-inner-padding, 0px);display:flex;flex-direction:column;gap:var(--dropdown-inner-gap, 0px);background-color:var(--dropdown-background-color, var(--container-background-color));max-height:calc(100vh - 32px);scrollbar-width:thin}.dropdown-inner ::slotted(cpsl-input){padding:8px}.search-container{position:sticky;top:0px;padding:8px;background-color:var(--cpsl-color-select-surface-default)}";
 const CpslSelectStyle0 = cpslSelectCss;
 
 const CpslSelect = class {
@@ -21774,6 +21943,7 @@ const CpslSelect = class {
         this.hasSelectedItem = false;
         this.anchorElId = undefined;
         this.autoWidth = false;
+        this.alignCenter = false;
         this.disabled = false;
         this.dropdownMaxHeight = undefined;
         this.errorText = undefined;
@@ -21820,10 +21990,10 @@ const CpslSelect = class {
     render() {
         var _a, _b, _c, _d, _e;
         const selectedValueAsString = Array.isArray(this.selectedValue) ? this.selectedValue.join(', ') : this.selectedValue;
-        return (index.h(index.Host, { key: 'f7c2db799e3462ef83fd0e7b29a3fd88a2d69e38', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (index.h("label", { key: '8629dcd2d81bbf631962f84c551b2e2a3c96dd33', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: '581836944bb5c01766bd0ec13f6bf5e1149cd7e7', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onClick: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && index.h("slot", { key: '39d58ccf94664d9d6c01a2b7dc5369fa77f224e2', name: "selected-item" }), index.h("div", { key: '511122f39895b25a0624497be7cb99c6ec9b92ba', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (index.h("cpsl-text", { key: 'd8ad96dab7e5b298d621ffc0621298c3ecc05907', class: { 'selected-text': true, 'placeholder': !this.selectedValue }, part: "selected-text", color: this.selectedItemColor, variant: this.selectedItemVariant, weight: this.selectedItemWeight }, !this.selectedValue ? ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select') : ((_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : selectedValueAsString)))), index.h("cpsl-icon", { key: '787c3d3dff16bd68d3526604523f130ca329e8c9', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }, icon: this.icon }), index.h("input", { key: 'b606c940537173d3d8f4d66e131d7b624779713c', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" }), index.h("cpsl-popover", { key: '272c71c9466bd5f301be9c02da68ac78dc95b087', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, index.h("div", { key: 'e8d9dde383da411ebfe8a238e8e3d0b37c0cbdde', part: "dropdown", class: "dropdown" }, this.showSearch && (index.h("div", { key: '571f898c5ad668bd55373a4c3aceff8e4c9f990c', class: "search-container" }, index.h("cpsl-input", { key: 'faef8d5df2c800564c6dfb9176dbfa35592089fd', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
+        return (index.h(index.Host, { key: '18900dc2127936e4cd74c736234287d3a9c4f5d6', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (index.h("label", { key: '84edbb138188860c4b53d6bb5414529e0981c6ac', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: 'ab6f0e73fb1fc392fb6a37a364334e841c51e4f1', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onClick: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && index.h("slot", { key: '227f6bc64a4caf1ab62eb721abcff785f52c900a', name: "selected-item" }), index.h("div", { key: '6085a10a607168ce5804f0d0c10856509ec309db', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (index.h("cpsl-text", { key: '952821d6eb180709bf6484a1e5a201b1173c8e50', class: { 'selected-text': true, 'placeholder': !this.selectedValue }, part: "selected-text", color: this.selectedItemColor, variant: this.selectedItemVariant, weight: this.selectedItemWeight }, !this.selectedValue ? ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select') : ((_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : selectedValueAsString)))), this.icon && this.icon !== null && (index.h("cpsl-icon", { key: 'ebc48a455be06e7423f46cd1cbc9794ac9f7158a', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }, icon: this.icon })), index.h("input", { key: '3e754fbb61ed2b895d100eac6c066965ccb019d4', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" }), index.h("cpsl-popover", { key: 'a8213a89bfd08f45839402e7bea33df24331eadd', part: "popover", autoWidth: this.autoWidth, alignCenter: this.alignCenter, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, index.h("div", { key: '1850448668be81bab36fa485a4ca9efc8a6f42c3', part: "dropdown", class: "dropdown" }, this.showSearch && (index.h("div", { key: 'f4d86eada1ab15fdc1e5c40f177c740ea402854c', class: "search-container" }, index.h("cpsl-input", { key: '5eac08c4bf0d58f52f393cf7fe709ea7104e567c', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
                 e.stopPropagation();
                 this.cpslSearchChange.emit(e.detail.value);
-            } }))), index.h("div", { key: '2a7a58fe4cac9ef5c6e193c7520c7fc5d4bdbec5', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, index.h("slot", { key: 'a0630a42e11c011ed5404e05a7ea1933da90e8fc', name: "items" }))))), (this.errorText || this.helperText) && (index.h("div", { key: 'cee93a66e762e3c111edcaf8f57379d9ed106369', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: '438123416a44bbd84b6fa908a9ba21635d808400' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
+            } }))), index.h("div", { key: '98be2ccca9d4f3393b375a6be57ecb994f208d63', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, index.h("slot", { key: '4b144f409037e0e19542bd01f360812afcbdeb8e', name: "items" }))))), (this.errorText || this.helperText) && (index.h("div", { key: '1ad20642e98bc4b530ba3831d721f4e5602301b7', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: 'c78382be9cba907cd2d8400d8602ceebb523b8b5' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -21833,7 +22003,7 @@ const CpslSelect = class {
 let inputIds = 0;
 CpslSelect.style = CpslSelectStyle0;
 
-const cpslSelectItemCss = ":host{--outer-container-padding-start:8px;--outer-container-padding-end:8px;--outer-container-padding-top:8px;--outer-container-padding-bottom:8px;--container-background-color:var(--cpsl-color-select-surface-default);--container-hover-background-color:var(--cpsl-color-select-surface-hover);--container-border-radius:calc(var(--cpsl-border-radius-select) - 4px);--container-padding-start:8px;--container-padding-end:8px;--container-padding-top:8px;--container-padding-bottom:8px;display:block;font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary);cursor:pointer}.inner-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);background-color:var(--container-background-color);border-radius:var(--container-border-radius);height:100%;display:flex;align-items:center}.outer-container{-webkit-padding-start:var(--outer-container-padding-start);padding-inline-start:var(--outer-container-padding-start);-webkit-padding-end:var(--outer-container-padding-end);padding-inline-end:var(--outer-container-padding-end);padding-top:var(--outer-container-padding-top);padding-bottom:var(--outer-container-padding-bottom);background-color:var(--container-background-color)}.outer-container:hover>.inner-container{background-color:var(--container-hover-background-color)}.selected{background-color:var(--container-hover-background-color)}:host(.in-select-box){--container-background-color:transparent;--container-hover-background-color:transparent;--container-border-width:0px;--container-padding-start:0px;--container-padding-end:0px;--container-padding-top:0px;--container-padding-bottom:0px;flex:1;height:100%}";
+const cpslSelectItemCss = ":host{--outer-container-padding-start:8px;--outer-container-padding-end:8px;--outer-container-padding-top:8px;--outer-container-padding-bottom:8px;--container-background-color:var(--cpsl-color-select-surface-default);--container-hover-background-color:var(--cpsl-color-select-surface-hover);--container-border-radius:calc(var(--cpsl-border-radius-select) - 4px);--container-padding-start:8px;--container-padding-end:8px;--container-padding-top:8px;--container-padding-bottom:8px;display:block;font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary);cursor:pointer}.inner-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);background-color:var(--container-background-color);border-radius:var(--container-border-radius);height:100%;display:flex;align-items:center}.outer-container{-webkit-padding-start:var(--outer-container-padding-start);padding-inline-start:var(--outer-container-padding-start);-webkit-padding-end:var(--outer-container-padding-end);padding-inline-end:var(--outer-container-padding-end);padding-top:var(--outer-container-padding-top);padding-bottom:var(--outer-container-padding-bottom)}.outer-container:hover>.inner-container{background-color:var(--container-hover-background-color)}.selected{background-color:var(--container-hover-background-color)}:host(.in-select-box){--container-background-color:transparent;--container-hover-background-color:transparent;--container-border-width:0px;--container-padding-start:0px;--container-padding-end:0px;--container-padding-top:0px;--container-padding-bottom:0px;flex:1;height:100%}";
 const CpslSelectItemStyle0 = cpslSelectItemCss;
 
 const CpslSelectItem = class {
@@ -21847,10 +22017,15 @@ const CpslSelectItem = class {
         this.value = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '532ed86577783bc61c40a18de178e63d16cf24c1' }, index.h("div", { key: 'c96fd4ab69add9b97726ef5869da0f4ef4353b23', part: "outer-container", class: "outer-container", onClick: e => {
+        return (index.h(index.Host, { key: 'db1ce801d1f8811645959e158e37fc3deafeb3f1' }, index.h("div", { key: 'f92eafcaa73a769a63d7f699ed6f96f0baf2acb2', part: "outer-container", class: "outer-container", onClick: e => {
+                var _a;
+                const targetId = (_a = e.target.id) !== null && _a !== void 0 ? _a : '';
+                if (targetId === 'ignore-click') {
+                    return;
+                }
                 this.handleItemClick();
                 e.stopPropagation();
-            } }, index.h("div", { key: '0dd87fde160b31a3609ee41b550066279c9f00d6', part: "inner-container", class: { 'inner-container': true, 'selected': this.selected } }, index.h("slot", { key: 'c526deb812322490f235d34d7d98f30eb2f6a19e' })))));
+            } }, index.h("div", { key: '654cfd18c8662a4417c70cfd43a1591c5e1af29c', part: "inner-container", class: { 'inner-container': true, 'selected': this.selected } }, index.h("slot", { key: 'c3dc201669ae577827edcf08c59a330ad1a17877' })))));
     }
 };
 CpslSelectItem.style = CpslSelectItemStyle0;
@@ -21986,7 +22161,7 @@ const CpslSlideButton = class {
         return this.el.shadowRoot.getElementById('end-icon');
     }
     render() {
-        return (index.h(index.Host, { key: '4cd2c0e88b4836325857aecea70bd262018baefd' }, index.h("div", { key: 'eee70d9571d47c07478be116c7d738f6402393d0', id: "slider-container", class: "slider-container" }, index.h("div", { key: 'aff7fd5e09a95f45b4fde7628f4c400dc7753835', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: 'fd64d833e993529e49dc9abdae1ec260c8798f0b', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '28d0e79995492aaf436d6457e9f35a2c0881fc11', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: '4f12bd968a45fea838a70b9af5523ebf02706c55', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: 'a5ee6ff782cd7bf740643282aab6fdc9ed96c801', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: '031528feaecf081c11d593ad325f677c15f11e4a', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: '9029dac9f64836ff7649b26f3ff11cba5bfa1446', id: "end-text", class: "end-text" }, this.endText))));
+        return (index.h(index.Host, { key: '566e9b4e928aa3f64f97703768afd374f322b9f4' }, index.h("div", { key: '50440c2fb4a8b8c705c622d17e09f3383b424639', id: "slider-container", class: "slider-container" }, index.h("div", { key: 'f04923282e4ed5d60f260fa612b37673960b566e', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: 'a9d7ba1b286c36b7437301f7d8e64ff51b01026d', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '62311747abe49016d1ba049185b744c03eab69c1', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: '512f8f4bc665db53a70a47ee7f5e3bf8cb210159', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: '20342c93f514f9ab236d74a5de245a6ffae88a13', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: 'c09c1d5fc0fd2138398eb5d55c87158b9e96e438', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: '037612378ed71063ee7b220dc6e2d55c412416bc', id: "end-text", class: "end-text" }, this.endText))));
     }
     get el() { return index.getElement(this); }
 };
@@ -22004,11 +22179,11 @@ const CpslSpinner = class {
         this.speed = 1;
     }
     render() {
-        return (index.h(index.Host, { key: '6f5f4fa9dffa7e6dbc380bcdec5ae211447c4bf4', style: {
+        return (index.h(index.Host, { key: '765c31d4263b0dafdd0bdc339cfa3ed894e8371b', style: {
                 ['--height']: `${this.size}px`,
                 ['--width']: `${this.size}px`,
                 ['--bar-width']: `${this.barWidth ? this.barWidth : this.size * 0.12}px`,
-            } }, index.h("div", { key: '6035e38d3146fcda2b96181cc53b00b2c6d42c83', class: { loader: true, [this.variant]: true } })));
+            } }, index.h("div", { key: '49bf51e5f36cf1e243464af1ca5effdbff2f4295', class: { loader: true, [this.variant]: true } })));
     }
 };
 CpslSpinner.style = CpslSpinnerStyle0;
@@ -22026,7 +22201,7 @@ const CpslSwitch = class {
         this.checked = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '80395b6f36c5653c725a69883098d2822cb6d420' }, index.h("input", { key: 'b9f74ffce1f02b8efa28b47f60c82e549a87bd09', type: "checkbox", checked: this.checked }), index.h("span", { key: '1f0763f6aaca5f55a66620a59444a907dc837360', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, index.h("span", { key: '1804cbae3ea10091952722c6bfb50c6dd518fe0b', class: { thumb: true, checked: this.checked } }))));
+        return (index.h(index.Host, { key: '54a918e6ce51bf58f0a7c5192a98daf7fc9ebbc3' }, index.h("input", { key: 'f17dfaa5870c52b2a4bbb9dcb12ebe413f11639b', type: "checkbox", checked: this.checked }), index.h("span", { key: '87225d9d683d3617c130632bbf5b7353f1fb8a3c', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, index.h("span", { key: '71b879d14a5100a7469e5403d6cd3ec0beae9a9f', class: { thumb: true, checked: this.checked } }))));
     }
 };
 CpslSwitch.style = CpslSwitchStyle0;
@@ -22066,7 +22241,7 @@ const CpslTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'dffbcb7a246b03dd586d05152b3c53d3d5af3f87', class: { selected: this.selected }, onClick: this.onTabClicked }, index.h("div", { key: 'a9606f29660d01f66f3474d2aa2efb99f83ee569', class: { 'tab-container': true } }, index.h("slot", { key: '0974381842769333c6a5cfa94e842feec5feaf56', name: "start" }), index.h("div", { key: 'b0d17ead876fab16b55b8a3176828ca76f553ead', class: "content" }, index.h("slot", { key: '6bdb9f6706881fee90d9a0cc759e29b65eeb3113' })), index.h("slot", { key: '7c9b87600f7e4fec0509bda1a080f3116c0fbbfe', name: "end" }))));
+        return (index.h(index.Host, { key: '6c6963acfb80e2af39004e708f8ede2aae57cbcc', class: { selected: this.selected }, onClick: this.onTabClicked }, index.h("div", { key: '01aad54125bcfcf49a7c938ac3922e578d67782a', class: { 'tab-container': true } }, index.h("slot", { key: '67d3752abebd382320be214d48869694c697afc3', name: "start" }), index.h("div", { key: 'a4d0616a7a24c662c2cf326166706dfe67347589', class: "content" }, index.h("slot", { key: '0b5c88a340039d0a045a66ddb01c605930f70fd0' })), index.h("slot", { key: '46ede49409b834acc7743c3c334e7f87fa25486f', name: "end" }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -22124,7 +22299,7 @@ const CpslTable = class {
         return this.el.shadowRoot.getElementById('footer-container');
     }
     render() {
-        return (index.h(index.Host, { key: '144ebe0917ce215a128b6653c8ed47138be7b319' }, index.h("cpsl-card", { key: '8197bc383734a332a2e0ee7221a1990ba20b1f84', part: "table-container", style: { position: 'relative' } }, index.h("div", { key: 'dd8d0026515ce96a848ae4a6cdf5cdab7bb7ddf2', id: "header-container", class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, index.h("slot", { key: '1b5a2cbae0fa49bb0b5b4d89fef4b44ce8a46439', name: "header" })), index.h("div", { key: 'e22bd3b94832ded10fe7b152d2d0c68165853529', id: "content-container", class: { 'content': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }, part: "content" }, index.h("slot", { key: 'f1bbfc01f1c25f820d9d4846ac1a7f64c21ee03b', name: "content" })), this.headerEl && this.contentContainerEl && this.footerEl && (index.h("div", { key: 'ad1e130185b6621b763892ae693ffab1d6243ae5', style: { top: `${this.headerEl.clientHeight + 2}px`, height: `${this.contentContainerEl.clientHeight}px` }, class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), index.h("div", { key: 'fb8b26f5d97b3965c50676b0541a14f21c675fe6', id: "footer-container", class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, index.h("slot", { key: '70a40dfe9bb80e3c825c895d12cb971467898e6a', name: "footer" })))));
+        return (index.h(index.Host, { key: 'e17bc67faff39c948bb585e03e2eef580a1ec46a' }, index.h("cpsl-card", { key: '50fbee874acdd360c92f8db003b021434515ac50', part: "table-container", style: { position: 'relative' } }, index.h("div", { key: '7c2452e83fd449277290ee067e050015f829ee6a', id: "header-container", class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, index.h("slot", { key: '97371b6e8601ecf48c3d361388f45b02447de4d4', name: "header" })), index.h("div", { key: 'ceac73d82a4d2f9ade616104675051d0676ca604', id: "content-container", class: { 'content': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }, part: "content" }, index.h("slot", { key: '1d88e9d621b434e5495e91f9e7076664a36a233b', name: "content" })), this.headerEl && this.contentContainerEl && this.footerEl && (index.h("div", { key: '95da7f057492601a15e767974b6f2791c433c58b', style: { top: `${this.headerEl.clientHeight + 2}px`, height: `${this.contentContainerEl.clientHeight}px` }, class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), index.h("div", { key: '6a9d1821b46b8e0f113228d6a12b1832bf4c3bc4', id: "footer-container", class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, index.h("slot", { key: 'eef31e34b0e40fae697d86fe58a40cc46981e0cc', name: "footer" })))));
     }
     get el() { return index.getElement(this); }
 };
@@ -22192,7 +22367,7 @@ const CpslTabs = class {
         // Get border width as a number
         const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
         const selectedTabRect = this.selectedTabRect;
-        return (index.h(index.Host, { key: '4a52ac10f673a907bde10ff86fabc15c0e8a2bf8', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: '1473724b5b53e942082a1ba40148ba2f3595bdbd', class: "tabs-container" }, index.h("slot", { key: 'ac682db2fc58ceea90d55208b1617a90452c4f55' }), index.h("div", { key: '219d7e45a8403795f2a7fd1ba0b30833e4488691', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width - 8}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth}px` } }))));
+        return (index.h(index.Host, { key: '7444f880d49aefdc6dacfa0893639e67f81e339c', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: '029b41848f1ab89faa2e6bc03fc4c24fba4409e5', class: "tabs-container" }, index.h("slot", { key: '706b489cfd13e988d44d91e5ec8b451c937cd5f3' }), index.h("div", { key: '2b3d844134235863e85cecb09c31e18918ac32f4', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width - 8}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth}px` } }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -22206,7 +22381,7 @@ const getTab = (tabs, tab) => {
 };
 CpslTabs.style = CpslTabsStyle0;
 
-const cpslTextCss = ":host{display:block;font-family:var(--cpsl-font-family, inherit);padding:0px;margin:0px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smooth:never;font-synthesis:none}:host(.primary){color:var(--color-override, var(--cpsl-color-text-primary))}:host(.primary)>p,:host(.primary) h1,:host(.primary) h2,:host(.primary) h3,:host(.primary) h4,:host(.primary) h5,:host(.primary) h6{color:var(--color-override, var(--cpsl-color-text-primary))}:host(.secondary){color:var(--color-override, var(--cpsl-color-text-secondary))}:host(.secondary)>p,:host(.secondary) h1,:host(.secondary) h2,:host(.secondary) h3,:host(.secondary) h4,:host(.secondary) h5,:host(.secondary) h6{color:var(--color-override, var(--cpsl-color-text-secondary))}:host(.tertiary){color:var(--color-override, var(--cpsl-color-text-tertiary))}:host(.tertiary)>p,:host(.tertiary) h1,:host(.tertiary) h2,:host(.tertiary) h3,:host(.tertiary) h4,:host(.tertiary) h5,:host(.tertiary) h6{color:var(--color-override, var(--cpsl-color-text-tertiary))}:host(.subtle){color:var(--color-override, var(--cpsl-color-text-subtle))}:host(.subtle)>p,:host(.subtle) h1,:host(.subtle) h2,:host(.subtle) h3,:host(.subtle) h4,:host(.subtle) h5,:host(.subtle) h6{color:var(--color-override, var(--cpsl-color-text-subtle))}:host(.inverted){color:var(--color-override, var(--cpsl-color-text-inverted))}:host(.inverted)>p,:host(.inverted) h1,:host(.inverted) h2,:host(.inverted) h3,:host(.inverted) h4,:host(.inverted) h5,:host(.inverted) h6{color:var(--color-override, var(--cpsl-color-text-inverted))}:host(.error){color:var(--color-override, var(--cpsl-color-text-error))}:host(.error)>p,:host(.error) h1,:host(.error) h2,:host(.error) h3,:host(.error) h4,:host(.error) h5,:host(.error) h6{color:var(--color-override, var(--cpsl-color-text-error))}:host(.success){color:var(--color-override, var(--cpsl-color-utility-green))}:host(.success)>p,:host(.success) h1,:host(.success) h2,:host(.success) h3,:host(.success) h4,:host(.success) h5,:host(.success) h6{color:var(--color-override, var(--cpsl-color-utility-green))}:host(.contrast){color:var(--color-override, var(--cpsl-color-text-contrast))}:host(.contrast)>p,:host(.contrast) h1,:host(.contrast) h2,:host(.contrast) h3,:host(.contrast) h4,:host(.contrast) h5,:host(.contrast) h6{color:var(--color-override, var(--cpsl-color-text-contrast))}:host(.regular){font-weight:400}:host(.regular)>p,:host(.regular) h1,:host(.regular) h2,:host(.regular) h3,:host(.regular) h4,:host(.regular) h5,:host(.regular) h6{font-weight:400}:host(.medium){font-weight:500}:host(.medium)>p,:host(.medium) h1,:host(.medium) h2,:host(.medium) h3,:host(.medium) h4,:host(.medium) h5,:host(.medium) h6{font-weight:500}:host(.semi-bold){font-weight:600}:host(.semi-bold)>p,:host(.semi-bold) h1,:host(.semi-bold) h2,:host(.semi-bold) h3,:host(.semi-bold) h4,:host(.semi-bold) h5,:host(.semi-bold) h6{font-weight:600}:host(.bold){font-weight:700}:host(.bold)>p,:host(.bold) h1,:host(.bold) h2,:host(.bold) h3,:host(.bold) h4,:host(.bold) h5,:host(.bold) h6{font-weight:700}:host(.body-2xs){font-size:var(--cpsl-font-size-body-2xs)}:host(.body-2xs)>p,:host(.body-2xs) h1,:host(.body-2xs) h2,:host(.body-2xs) h3,:host(.body-2xs) h4,:host(.body-2xs) h5,:host(.body-2xs) h6{font-size:var(--cpsl-font-size-body-2xs)}:host(.body-xs){font-size:var(--cpsl-font-size-body-xs)}:host(.body-xs)>p,:host(.body-xs) h1,:host(.body-xs) h2,:host(.body-xs) h3,:host(.body-xs) h4,:host(.body-xs) h5,:host(.body-xs) h6{font-size:var(--cpsl-font-size-body-xs)}:host(.body-s){font-size:var(--cpsl-font-size-body-s);line-height:142.857%}:host(.body-s)>p,:host(.body-s) h1,:host(.body-s) h2,:host(.body-s) h3,:host(.body-s) h4,:host(.body-s) h5,:host(.body-s) h6{font-size:var(--cpsl-font-size-body-s);line-height:142.857%}:host(.body-m){font-size:var(--cpsl-font-size-body-m);line-height:150%}:host(.body-m)>p,:host(.body-m) h1,:host(.body-m) h2,:host(.body-m) h3,:host(.body-m) h4,:host(.body-m) h5,:host(.body-m) h6{font-size:var(--cpsl-font-size-body-m);line-height:150%}:host(.body-l){font-size:var(--cpsl-font-size-body-l);line-height:140%}:host(.body-l)>p,:host(.body-l) h1,:host(.body-l) h2,:host(.body-l) h3,:host(.body-l) h4,:host(.body-l) h5,:host(.body-l) h6{font-size:var(--cpsl-font-size-body-l);line-height:140%}:host(.body-xl){font-size:var(--cpsl-font-size-body-xl)}:host(.body-xl)>p,:host(.body-xl) h1,:host(.body-xl) h2,:host(.body-xl) h3,:host(.body-xl) h4,:host(.body-xl) h5,:host(.body-xl) h6{font-size:var(--cpsl-font-size-body-xl)}:host(.heading-xs){font-size:var(--cpsl-font-size-heading-xs)}:host(.heading-xs)>p,:host(.heading-xs) h1,:host(.heading-xs) h2,:host(.heading-xs) h3,:host(.heading-xs) h4,:host(.heading-xs) h5,:host(.heading-xs) h6{font-size:var(--cpsl-font-size-heading-xs)}:host(.heading-s){font-size:var(--cpsl-font-size-heading-s)}:host(.heading-s)>p,:host(.heading-s) h1,:host(.heading-s) h2,:host(.heading-s) h3,:host(.heading-s) h4,:host(.heading-s) h5,:host(.heading-s) h6{font-size:var(--cpsl-font-size-heading-s)}:host(.heading-m){font-size:var(--cpsl-font-size-heading-m);letter-spacing:-0.4px}:host(.heading-m)>p,:host(.heading-m) h1,:host(.heading-m) h2,:host(.heading-m) h3,:host(.heading-m) h4,:host(.heading-m) h5,:host(.heading-m) h6{font-size:var(--cpsl-font-size-heading-m);letter-spacing:-0.4px}:host(.heading-l){font-size:var(--cpsl-font-size-heading-l);letter-spacing:-1.12px}:host(.heading-l)>p,:host(.heading-l) h1,:host(.heading-l) h2,:host(.heading-l) h3,:host(.heading-l) h4,:host(.heading-l) h5,:host(.heading-l) h6{font-size:var(--cpsl-font-size-heading-l);letter-spacing:-1.12px}:host(.heading-xl){font-size:var(--cpsl-font-size-heading-xl);letter-spacing:-1.28px}:host(.heading-xl)>p,:host(.heading-xl) h1,:host(.heading-xl) h2,:host(.heading-xl) h3,:host(.heading-xl) h4,:host(.heading-xl) h5,:host(.heading-xl) h6{font-size:var(--cpsl-font-size-heading-xl);letter-spacing:-1.28px}:host(.heading-2xl){font-size:var(--cpsl-font-size-heading-2xl);letter-spacing:-1.44px}:host(.heading-2xl)>p,:host(.heading-2xl) h1,:host(.heading-2xl) h2,:host(.heading-2xl) h3,:host(.heading-2xl) h4,:host(.heading-2xl) h5,:host(.heading-2xl) h6{font-size:var(--cpsl-font-size-heading-2xl);letter-spacing:-1.44px}:host p,h1,h2,h3,h4,h5,h6{font-family:var(--cpsl-font-family, inherit);padding:0px;margin:0px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smooth:never;font-synthesis:none}:host p::-moz-selection,h1::-moz-selection,h2::-moz-selection,h3::-moz-selection,h4::-moz-selection,h5::-moz-selection,h6::-moz-selection{color:var(--cpsl-color-text-inverted) !important;background:var(--cpsl-color-background-64) !important}:host p::selection,h1::selection,h2::selection,h3::selection,h4::selection,h5::selection,h6::selection{color:var(--cpsl-color-text-inverted) !important;background:var(--cpsl-color-background-64) !important}";
+const cpslTextCss = ":host{display:block;font-family:var(--cpsl-font-family, inherit);padding:0px;margin:0px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smooth:never;font-synthesis:none}:host(.primary){color:var(--color-override, var(--cpsl-color-text-primary))}:host(.primary)>p,:host(.primary) h1,:host(.primary) h2,:host(.primary) h3,:host(.primary) h4,:host(.primary) h5,:host(.primary) h6{color:var(--color-override, var(--cpsl-color-text-primary))}:host(.secondary){color:var(--color-override, var(--cpsl-color-text-secondary))}:host(.secondary)>p,:host(.secondary) h1,:host(.secondary) h2,:host(.secondary) h3,:host(.secondary) h4,:host(.secondary) h5,:host(.secondary) h6{color:var(--color-override, var(--cpsl-color-text-secondary))}:host(.tertiary){color:var(--color-override, var(--cpsl-color-text-tertiary))}:host(.tertiary)>p,:host(.tertiary) h1,:host(.tertiary) h2,:host(.tertiary) h3,:host(.tertiary) h4,:host(.tertiary) h5,:host(.tertiary) h6{color:var(--color-override, var(--cpsl-color-text-tertiary))}:host(.subtle){color:var(--color-override, var(--cpsl-color-text-subtle))}:host(.subtle)>p,:host(.subtle) h1,:host(.subtle) h2,:host(.subtle) h3,:host(.subtle) h4,:host(.subtle) h5,:host(.subtle) h6{color:var(--color-override, var(--cpsl-color-text-subtle))}:host(.inverted){color:var(--color-override, var(--cpsl-color-text-inverted))}:host(.inverted)>p,:host(.inverted) h1,:host(.inverted) h2,:host(.inverted) h3,:host(.inverted) h4,:host(.inverted) h5,:host(.inverted) h6{color:var(--color-override, var(--cpsl-color-text-inverted))}:host(.error){color:var(--color-override, var(--cpsl-color-text-error))}:host(.error)>p,:host(.error) h1,:host(.error) h2,:host(.error) h3,:host(.error) h4,:host(.error) h5,:host(.error) h6{color:var(--color-override, var(--cpsl-color-text-error))}:host(.success){color:var(--color-override, var(--cpsl-color-utility-green))}:host(.success)>p,:host(.success) h1,:host(.success) h2,:host(.success) h3,:host(.success) h4,:host(.success) h5,:host(.success) h6{color:var(--color-override, var(--cpsl-color-utility-green))}:host(.contrast){color:var(--color-override, var(--cpsl-color-text-contrast))}:host(.contrast)>p,:host(.contrast) h1,:host(.contrast) h2,:host(.contrast) h3,:host(.contrast) h4,:host(.contrast) h5,:host(.contrast) h6{color:var(--color-override, var(--cpsl-color-text-contrast))}:host(.regular){font-weight:400}:host(.regular)>p,:host(.regular) h1,:host(.regular) h2,:host(.regular) h3,:host(.regular) h4,:host(.regular) h5,:host(.regular) h6{font-weight:400}:host(.medium){font-weight:500}:host(.medium)>p,:host(.medium) h1,:host(.medium) h2,:host(.medium) h3,:host(.medium) h4,:host(.medium) h5,:host(.medium) h6{font-weight:500}:host(.semi-bold){font-weight:600}:host(.semi-bold)>p,:host(.semi-bold) h1,:host(.semi-bold) h2,:host(.semi-bold) h3,:host(.semi-bold) h4,:host(.semi-bold) h5,:host(.semi-bold) h6{font-weight:600}:host(.bold){font-weight:700}:host(.bold)>p,:host(.bold) h1,:host(.bold) h2,:host(.bold) h3,:host(.bold) h4,:host(.bold) h5,:host(.bold) h6{font-weight:700}:host(.body-2xs){font-size:var(--cpsl-font-size-body-2xs)}:host(.body-2xs)>p,:host(.body-2xs) h1,:host(.body-2xs) h2,:host(.body-2xs) h3,:host(.body-2xs) h4,:host(.body-2xs) h5,:host(.body-2xs) h6{font-size:var(--cpsl-font-size-body-2xs)}:host(.body-xs){font-size:var(--cpsl-font-size-body-xs)}:host(.body-xs)>p,:host(.body-xs) h1,:host(.body-xs) h2,:host(.body-xs) h3,:host(.body-xs) h4,:host(.body-xs) h5,:host(.body-xs) h6{font-size:var(--cpsl-font-size-body-xs)}:host(.body-s){font-size:var(--cpsl-font-size-body-s);line-height:142.857%}:host(.body-s)>p,:host(.body-s) h1,:host(.body-s) h2,:host(.body-s) h3,:host(.body-s) h4,:host(.body-s) h5,:host(.body-s) h6{font-size:var(--cpsl-font-size-body-s);line-height:142.857%}:host(.body-m){font-size:var(--cpsl-font-size-body-m);line-height:150%}:host(.body-m)>p,:host(.body-m) h1,:host(.body-m) h2,:host(.body-m) h3,:host(.body-m) h4,:host(.body-m) h5,:host(.body-m) h6{font-size:var(--cpsl-font-size-body-m);line-height:150%}:host(.body-l){font-size:var(--cpsl-font-size-body-l);line-height:140%}:host(.body-l)>p,:host(.body-l) h1,:host(.body-l) h2,:host(.body-l) h3,:host(.body-l) h4,:host(.body-l) h5,:host(.body-l) h6{font-size:var(--cpsl-font-size-body-l);line-height:140%}:host(.body-xl){font-size:var(--cpsl-font-size-body-xl)}:host(.body-xl)>p,:host(.body-xl) h1,:host(.body-xl) h2,:host(.body-xl) h3,:host(.body-xl) h4,:host(.body-xl) h5,:host(.body-xl) h6{font-size:var(--cpsl-font-size-body-xl)}:host(.heading-xs){font-size:var(--cpsl-font-size-heading-xs)}:host(.heading-xs)>p,:host(.heading-xs) h1,:host(.heading-xs) h2,:host(.heading-xs) h3,:host(.heading-xs) h4,:host(.heading-xs) h5,:host(.heading-xs) h6{font-size:var(--cpsl-font-size-heading-xs)}:host(.heading-s){font-size:var(--cpsl-font-size-heading-s)}:host(.heading-s)>p,:host(.heading-s) h1,:host(.heading-s) h2,:host(.heading-s) h3,:host(.heading-s) h4,:host(.heading-s) h5,:host(.heading-s) h6{font-size:var(--cpsl-font-size-heading-s)}:host(.heading-m){font-size:var(--cpsl-font-size-heading-m);letter-spacing:-0.4px}:host(.heading-m)>p,:host(.heading-m) h1,:host(.heading-m) h2,:host(.heading-m) h3,:host(.heading-m) h4,:host(.heading-m) h5,:host(.heading-m) h6{font-size:var(--cpsl-font-size-heading-m);letter-spacing:-0.4px}:host(.heading-l){font-size:var(--cpsl-font-size-heading-l);letter-spacing:-1.12px}:host(.heading-l)>p,:host(.heading-l) h1,:host(.heading-l) h2,:host(.heading-l) h3,:host(.heading-l) h4,:host(.heading-l) h5,:host(.heading-l) h6{font-size:var(--cpsl-font-size-heading-l);letter-spacing:-1.12px}:host(.heading-xl){font-size:var(--cpsl-font-size-heading-xl);letter-spacing:-1.28px}:host(.heading-xl)>p,:host(.heading-xl) h1,:host(.heading-xl) h2,:host(.heading-xl) h3,:host(.heading-xl) h4,:host(.heading-xl) h5,:host(.heading-xl) h6{font-size:var(--cpsl-font-size-heading-xl);letter-spacing:-1.28px}:host(.heading-2xl){font-size:var(--cpsl-font-size-heading-2xl);letter-spacing:-1.44px}:host(.heading-2xl)>p,:host(.heading-2xl) h1,:host(.heading-2xl) h2,:host(.heading-2xl) h3,:host(.heading-2xl) h4,:host(.heading-2xl) h5,:host(.heading-2xl) h6{font-size:var(--cpsl-font-size-heading-2xl);letter-spacing:-1.44px}:host(.align-left){text-align:left}:host(.align-center){text-align:center}:host(.align-right){text-align:right}:host p,h1,h2,h3,h4,h5,h6{font-family:var(--cpsl-font-family, inherit);padding:0px;margin:0px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smooth:never;font-synthesis:none}:host p::-moz-selection,h1::-moz-selection,h2::-moz-selection,h3::-moz-selection,h4::-moz-selection,h5::-moz-selection,h6::-moz-selection{color:var(--cpsl-color-text-inverted) !important;background:var(--cpsl-color-background-64) !important}:host p::selection,h1::selection,h2::selection,h3::selection,h4::selection,h5::selection,h6::selection{color:var(--cpsl-color-text-inverted) !important;background:var(--cpsl-color-background-64) !important}";
 const CpslTextStyle0 = cpslTextCss;
 
 const TEXT_EL_PART = 'text-element';
@@ -22241,9 +22416,10 @@ const CpslText = class {
         this.color = 'primary';
         this.variant = 'bodyM';
         this.weight = 'regular';
+        this.align = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '1ccbe3c088dbe11859617341644f71a32edd7bad', class: {
+        return (index.h(index.Host, { key: 'f71afcf547e49260945a89ca24ea1327d5df7fb1', class: {
                 // COLORS
                 'primary': this.color === 'primary',
                 'secondary': this.color === 'secondary',
@@ -22270,22 +22446,28 @@ const CpslText = class {
                 'heading-l': this.variant === 'headingL',
                 'heading-xl': this.variant === 'headingXL',
                 'heading-2xl': this.variant === 'heading2XL',
+                'align-left': this.align === 'left',
+                'align-center': this.align === 'center',
+                'align-right': this.align === 'right',
             } }, this.getContent()));
     }
 };
 CpslText.style = CpslTextStyle0;
 
-const cpslTileButtonCss = ":host{--button-icon-color:var(--cpsl-color-text-primary);--button-border-radius:var(--cpsl-border-radius-tile-button);--button-background-color:var(--cpsl-color-tile-button-surface-default);--button-border-color:var(--cpsl-color-tile-button-border);--button-width:72px;--button-height:56px;--button-gap:8px}:host :hover{--button-background-color:var(--cpsl-color-tile-button-surface-hover)}:host :active{--button-background-color:var(--cpsl-color-tile-button-surface-pressed)}.button-native{border-radius:var(--button-border-radius);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);border:1px solid transparent;cursor:pointer;background:var(--button-background-color);border-color:var(--button-border-color);display:flex;flex-direction:column;gap:var(--button-gap);align-items:center;justify-content:center;width:var(--button-width);height:var(--button-height);box-shadow:var(--button-box-shadow)}.button-native cpsl-icon{--icon-color:var(--button-icon-color);--height:var(--button-icon-height);--width:var(--button-icon-width)}";
+const cpslTileButtonCss = ":host{--button-icon-color:var(--cpsl-color-text-primary);--button-border-radius:var(--cpsl-border-radius-tile-button);--button-background-color:var(--cpsl-color-tile-button-surface-default);--button-border-color:var(--cpsl-color-tile-button-border);--button-width:72px;--button-height:56px;--button-gap:8px}:host :hover{--button-background-color:var(--cpsl-color-tile-button-surface-hover)}:host :active{--button-background-color:var(--cpsl-color-tile-button-surface-pressed)}:host(.disabled){cursor:default;pointer-events:none;opacity:0.7}:host(.disabled) .button-native{cursor:default;pointer-events:none}.button-native{border-radius:var(--button-border-radius);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);border:1px solid transparent;cursor:pointer;background:var(--button-background-color);border-color:var(--button-border-color);display:flex;flex-direction:column;gap:var(--button-gap);align-items:center;justify-content:center;width:var(--button-width);height:var(--button-height);box-shadow:var(--button-box-shadow)}.button-native cpsl-icon{--icon-color:var(--button-icon-color);--height:var(--button-icon-height);--width:var(--button-icon-width)}";
 const CpslTileButtonStyle0 = cpslTileButtonCss;
 
 const CpslTileButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.disabled = false;
         this.src = undefined;
         this.icon = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '5e9927f98dce681df1237a942d9e1d7fa121b607' }, index.h("button", { key: 'f555f7a1b3eafe29d67a65e014cdfd6305ffc2a4', class: "button-native" }, index.h("cpsl-icon", { key: '333bae4faf843a52c58e8b79234cb1e72a572a03', exportparts: "icon", src: this.src, icon: this.icon }), index.h("slot", { key: 'f56278acf1cc8298c7a06ecbdd8934498ed60e71' }))));
+        return (index.h(index.Host, { key: '6f911ed19619b871cdc3bd96ab59aecf6b548b47', class: {
+                disabled: this.disabled,
+            } }, index.h("button", { key: '3c16b34f26db35202bc0e903b5bf6574d01f6a73', class: "button-native", disabled: this.disabled }, index.h("cpsl-icon", { key: '44d528e585457a719c40fce6f1d36268cf93284a', exportparts: "icon", src: this.src, icon: this.icon }), index.h("slot", { key: '6e48c9594d9a1c5afcff30b9b5c1cbc63002422e' }))));
     }
 };
 CpslTileButton.style = CpslTileButtonStyle0;