@usecapsule/core-components 2.0.10 → 3.0.1-dev.1

package/dist/esm/{cpsl-alert_18.entry.js → cpsl-alert_33.entry.js}

@@ -1,7 +1,342 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-fd970ca2.js';
-import { M as MOBILE_SIZE } from './constants-7b49abd5.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-97ed6ec1.js';
+import { a as DEFAULT_Z_INDICES, M as MOBILE_SIZE } from './constants-fce138fa.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-1789f0cf.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);display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-border-color:var(--cpsl-color-utility-red)}:host(.warning){--container-border-color:var(--cpsl-color-utility-yellow)}:host(.success){--container-border-color:var(--cpsl-color-utility-green)}: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;align-items:center;justify-content:center;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)}";
+const CpslAlertStyle0 = cpslAlertCss;
+
+const CpslAlert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icon = undefined;
+        this.variant = 'error';
+    }
+    get iconType() {
+        switch (this.variant) {
+            case 'custom': {
+                return undefined;
+            }
+            case 'success': {
+                return 'checkCircle';
+            }
+            case 'warning': {
+                return 'alertCircle';
+            }
+            case 'error':
+            default: {
+                return 'alertCircle';
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && h("cpsl-icon", { key: 'c037b1d18057d53d05e52be9cfbb81f234ea0f1d', icon: this.iconType }), h("slot", { key: 'ec02796cf9ad119f95be56701d28e3490b07bc43' }))));
+    }
+};
+CpslAlert.style = CpslAlertStyle0;
+
+const cpslAppBarCss = ":host{display:block;position:relative;top:0;width:100%;z-index:10000}.container{display:flex;width:100%}";
+const CpslAppBarStyle0 = cpslAppBarCss;
+
+const CpslAppBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.height = undefined;
+        this.position = 'fixed';
+        this.zIndexOverride = undefined;
+    }
+    render() {
+        return (h(Host, { key: '4608b0dc424585b7e7f865d55b3d217ebe172f04', style: Object.assign({ height: `${this.height}px` }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})) }, h("div", { key: 'c598749bcfb29c806856573b9f61141b7b68022e', class: "container", part: "container", style: {
+                position: this.position,
+                height: `${this.height}px`,
+            } }, h("slot", { key: '7e2bd9efbe98ca5ff70dd0bc33333d95799f5fe7' })), this.position === 'fixed' && (h("div", { key: 'fc4e1e9f6414ccf74c816f19be79b7d4b0df8bd5', style: {
+                height: `${this.height}px`,
+            } }))));
+    }
+};
+CpslAppBar.style = CpslAppBarStyle0;
+
+const cpslAvatarCss = ":host{--container-border-color:var(--cpsl-color-avatar-border);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-avatar);--container-background-color:var(--cpsl-color-avatar-surface);--container-padding:4px;--container-height:40px;--container-width:40px;display:block;height:100%;width:100%}span{display:inline-block;height:var(--container-height);width:var(--container-width);border:var(--container-border-width) solid var(--container-border-color);border-radius:var(--container-border-radius);padding:var(--container-padding);background-color:var(--container-background-color)}span.round{border-radius:1000px}img{width:100%;height:100%;object-fit:contain}";
+const CpslAvatarStyle0 = cpslAvatarCss;
+
+const CpslAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.alt = undefined;
+        this.src = undefined;
+        this.variant = 'square';
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '04dfd668bc6ab12f758e82ccfd915f06e1de3504' }, h("span", { key: '906c7c6e113040b95273c987689e848954e14a1c', class: { round: this.variant === 'round' } }, h("img", { key: '2d952a27ebbeb118c931162487f2d7e13370b41f', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
+    }
+};
+CpslAvatar.style = CpslAvatarStyle0;
+
+const cpslButtonCss = ":host{--button-border-width:1px;--button-border-width-start:var(--button-border-width);--button-border-width-end:var(--button-border-width);--button-border-width-top:var(--button-border-width);--button-border-width-bottom:var(--button-border-width);--button-gap:8px;--button-justify-content:center;--button-border-radius-top-start:var(--button-border-radius);--button-border-radius-top-end:var(--button-border-radius);--button-border-radius-bottom-end:var(--button-border-radius);--button-border-radius-bottom-start:var(--button-border-radius);--button-padding-start:16px;--button-padding-end:16px;--button-icon-size:var(--cpls-font-size-body-l);--button-font-weight:500;--button-primary-color:var(--cpsl-color-primary-button-text);--button-primary-background-color:var(--cpsl-color-primary-button-surface-default);--button-primary-border-color:var(--cpsl-color-primary-button-border-default);--button-primary-icon-color:var(--cpsl-color-primary-button-text);--button-primary-disabled-color:var(--cpsl-color-text-disabled);--button-primary-disabled-background-color:var(--cpsl-color-primary-button-surface-disabled);--button-primary-disabled-border-color:var(--cpsl-color-primary-button-border-disabled);--button-primary-disabled-icon-color:var(--cpsl-color-primary-button-text);--button-primary-hover-color:var(--cpsl-color-primary-button-text);--button-primary-hover-background-color:var(--cpsl-color-primary-button-surface-hover);--button-primary-hover-border-color:var(--cpsl-color-primary-button-surface-hover);--button-primary-hover-icon-color:var(--cpsl-color-primary-button-text);--button-primary-active-color:var(--cpsl-color-primary-button-text);--button-primary-active-background-color:var(--cpsl-color-primary-button-surface-pressed);--button-primary-active-border-color:var(--cpsl-color-primary-button-surface-pressed);--button-primary-active-icon-color:var(--cpsl-color-primary-button-text);--button-secondary-color:var(--cpsl-color-secondary-button-text);--button-secondary-background-color:var(--cpsl-color-secondary-button-surface-default);--button-secondary-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-disabled-color:var(--cpsl-color-text-disabled);--button-secondary-disabled-background-color:var(--cpsl-color-secondary-button-surface-disabled);--button-secondary-disabled-border-color:var(--cpsl-color-secondary-button-border-disabled);--button-secondary-disabled-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-hover-color:var(--cpsl-color-secondary-button-text);--button-secondary-hover-background-color:var(--cpsl-color-secondary-button-surface-hover);--button-secondary-hover-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-hover-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-active-color:var(--cpsl-color-secondary-button-text);--button-secondary-active-background-color:var(--cpsl-color-secondary-button-surface-pressed);--button-secondary-active-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-active-icon-color:var(--cpsl-color-secondary-button-text);--button-ghost-color:var(--cpsl-color-ghost-button-default);--button-ghost-disabled-color:var(--cpsl-color-ghost-button-disabled);--button-ghost-hover-color:var(--cpsl-color-ghost-button-hover);--button-destructive-color:var(--cpsl-color-destructive-button-text);--button-destructive-background-color:var(--cpsl-color-destructive-button-surface-default);--button-destructive-border-color:var(--cpsl-color-destructive-button-border-default);--button-destructive-icon-color:var(--cpsl-color-destructive-button-text);--button-destructive-disabled-color:var(--cpsl-color-text-disabled);--button-destructive-disabled-background-color:var(--cpsl-color-destructive-button-surface-disabled);--button-destructive-disabled-border-color:var(--cpsl-color-destructive-button-border-disabled);--button-destructive-disabled-icon-color:var(--cpsl-color-destructive-button-text);--button-destructive-hover-color:var(--cpsl-color-destructive-button-text);--button-destructive-hover-background-color:var(--cpsl-color-destructive-button-surface-hover);--button-destructive-hover-border-color:var(--cpsl-color-destructive-button-border-default);--button-destructive-hover-icon-color:var(--cpsl-color-destructive-button-text);--button-destructive-active-color:var(--cpsl-color-destructive-button-text);--button-destructive-active-background-color:var(--cpsl-color-destructive-button-surface-pressed);--button-destructive-active-border-color:var(--cpsl-color-destructive-button-border-default);--button-destructive-active-icon-color:var(--cpsl-color-destructive-button-text);height:fit-content;width:fit-content;display:inline-block;font-family:var(--cpsl-font-family, inherit);-webkit-tap-highlight-color:transparent}:host a{height:fit-content;width:auto !important}:host(.full-width){width:100%;display:block}:host(.full-width) .button-native{width:100%}:host(.small){--button-font-size:var(--cpsl-font-size-body-s);--button-padding-top:12px;--button-padding-bottom:12px;--button-icon-size:var(--cpsl-font-size-body-m)}:host(.small.primary){--button-padding-top:13px;--button-padding-bottom:13px}:host(.medium){--button-font-size:var(--cpsl-font-size-body-m);--button-padding-top:14px;--button-padding-bottom:14px;--button-icon-size:var(--cpsl-font-size-body-l)}:host(.medium) :host(.primary){--button-padding-top:15px;--button-padding-bottom:15px}:host(.medium.primary){--button-padding-top:15px;--button-padding-bottom:15px}:host(.disabled){cursor:default;pointer-events:none}:host ::slotted(cpsl-icon){--height:var(--button-icon-size);--width:var(--button-icon-size)}:host(.primary){--button-border-radius:var(--cpsl-border-radius-primary-button);--button-color:var(--button-primary-color);--button-background-color:var(--button-primary-background-color);--button-border-color:var(--button-primary-border-color);--button-padding-start:17px;--button-padding-end:17px;--button-border-width:0px}:host(.primary) ::slotted(cpsl-icon){--icon-color:var(--button-primary-icon-color)}:host(.primary):host(.disabled){--button-color:var(--button-primary-disabled-color);--button-background-color:var(--button-primary-disabled-background-color);--button-border-color:var(--button-primary-disabled-border-color);--button-outline-color:transparent}:host(.primary):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-primary-disabled-icon-color)}:host(.primary) :not(.disabled):hover{--button-color:var(--button-primary-hover-color);--button-background-color:var(--button-primary-hover-background-color);--button-border-color:var(--button-primary-hover-border-color)}:host(.primary) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-primary-hover-icon-color)}:host(.primary) :not(.disabled):active{--button-color:var(--button-primary-active-color);--button-background-color:var(--button-primary-active-background-color);--button-border-color:var(--button-primary-active-border-color)}:host(.primary) :not(.disabled):active ::slotted(cpsl-icon){--icon-color:var(--button-primary-active-icon-color)}:host(.primary) :not(.disabled):focus-visible{--button-outline-color:var(--cpsl-color-primary-button-outline)}:host(.secondary){--button-border-radius:var(--cpsl-border-radius-destructive-button);--button-color:var(--button-secondary-color);--button-background-color:var(--button-secondary-background-color);--button-border-color:var(--button-secondary-border-color)}:host(.secondary) ::slotted(cpsl-icon){--icon-color:var(--button-secondary-icon-color)}:host(.secondary):host(.disabled){--button-color:var(--button-secondary-disabled-color);--button-background-color:var(--button-secondary-disabled-background-color);--button-border-color:var(--button-secondary-disabled-border-color);--button-outline-color:transparent}:host(.secondary):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-secondary-disabled-icon-color)}:host(.secondary) :not(.disabled):hover{--button-color:var(--button-secondary-hover-color);--button-border-color:var(--button-secondary-hover-border-color);--button-background-color:var(--button-secondary-hover-background-color)}:host(.secondary) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-secondary-hover-icon-color)}:host(.secondary) :not(.disabled):active{--button-color:var(--button-secondary-active-color);--button-border-color:var(--button-secondary-active-border-color);--button-background-color:var(--button-secondary-active-background-color)}:host(.secondary) :not(.disabled):active ::slotted(cpsl-icon){--icon-color:var(--button-secondary-active-icon-color)}:host(.secondary) :not(.disabled):focus-visible{--button-outline-color:var(--cpsl-color-secondary-button-outline)}:host(.ghost){--button-color:var(--button-ghost-color);--button-background-color:transparent;--button-border-color:transparent;--button-outline-color:transparent;--button-padding-start:0px;--button-padding-end:0px;--button-padding-top:0px;--button-padding-bottom:0px;--button-border-width:0px}:host(.ghost) ::slotted(cpsl-icon){--icon-color:var(--button-ghost-color);--height:var(--cpsl-font-size-body-xl);--width:var(--cpsl-font-size-body-xl)}:host(.ghost):host(.disabled){--button-color:var(--button-ghost-disabled-color)}:host(.ghost):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-ghost-disabled-color)}:host(.ghost) :not(.disabled):hover{--button-color:var(--button-ghost-hover-color)}:host(.ghost) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-ghost-hover-color)}:host(.destructive){--button-border-radius:var(--cpsl-border-radius-secondary-button);--button-color:var(--button-destructive-color);--button-background-color:var(--button-destructive-background-color);--button-border-color:var(--button-destructive-border-color)}:host(.destructive) ::slotted(cpsl-icon){--icon-color:var(--button-destructive-icon-color)}:host(.destructive):host(.disabled){--button-color:var(--button-destructive-disabled-color);--button-background-color:var(--button-destructive-disabled-background-color);--button-border-color:var(--button-destructive-disabled-border-color);--button-outline-color:transparent}:host(.destructive):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-destructive-disabled-icon-color)}:host(.destructive) :not(.disabled):hover{--button-color:var(--button-destructive-hover-color);--button-border-color:var(--button-destructive-hover-border-color);--button-background-color:var(--button-destructive-hover-background-color)}:host(.destructive) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-destructive-hover-icon-color)}:host(.destructive) :not(.disabled):active{--button-color:var(--button-destructive-active-color);--button-border-color:var(--button-destructive-active-border-color);--button-background-color:var(--button-destructive-active-background-color)}:host(.destructive) :not(.disabled):active ::slotted(cpsl-icon){--icon-color:var(--button-destructive-active-icon-color)}:host(.destructive) :not(.disabled):focus-visible{--button-outline-color:var(--cpsl-color-destructive-button-outline)}.button-native{border-top-left-radius:var(--button-border-radius-top-start);border-top-right-radius:var(--button-border-radius-top-end);border-bottom-right-radius:var(--button-border-radius-bottom-end);border-bottom-left-radius:var(--button-border-radius-bottom-start);-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);font-size:var(--button-font-size);font-weight:var(--button-font-weight);font-family:inherit;white-space:nowrap;text-decoration:none;border:0px solid transparent;border-width:var(--button-border-width-top) var(--button-border-width-end) var(--button-border-width-bottom) var(--button-border-width-start);cursor:pointer;color:var(--button-color);background:var(--button-background-color);border-color:var(--button-border-color);display:flex;justify-content:var(--button-justify-content);align-items:center;height:100%;gap:var(--button-gap);word-break:break-all;outline-color:var(--button-outline-color);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]) .button-native{border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}[dir=rtl] .button-native{border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}@supports selector(:dir(rtl)){.button-native:dir(rtl){border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}}:host ::slotted(cpsl-text){color:var(--button-color)}";
+const CpslButtonStyle0 = cpslButtonCss;
+
+const CpslButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.as = 'button';
+        this.disabled = false;
+        this.fullWidth = false;
+        this.href = undefined;
+        this.size = 'medium';
+        this.target = undefined;
+        this.variant = 'primary';
+    }
+    render() {
+        return (h(Host, { key: '554350e7af597bd14c9584f9924f73e04fe44093', class: {
+                'primary': this.variant === 'primary',
+                'secondary': this.variant === 'secondary',
+                'ghost': this.variant === 'ghost',
+                'destructive': this.variant === 'destructive',
+                'disabled': this.disabled,
+                'full-width': this.fullWidth,
+                'small': this.size === 'small',
+                'medium': this.size === 'medium',
+            } }, h(this.as, { key: '20b6865c03e312d263c523f681bb775d8626fc9c', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '4ee8d68b06ce21288e63bfcff9aa186908b89af2', name: "start" }), h("slot", { key: '9c0a5f0daa64c75886d03fb830739c8f8cfb65d9' }), h("slot", { key: 'cf9addee55b0a0d8f487313c972d7b48d6f8c75c', name: "end" }))));
+    }
+};
+CpslButton.style = CpslButtonStyle0;
+
+const cpslButtonGroupCss = ":host{--button-size:32px;display:flex}:host ::slotted(cpsl-button:first-child){--button-border-radius-top-end:0px;--button-border-radius-bottom-end:0px}:host ::slotted(cpsl-button:last-child){--button-border-width-start:0px;--button-border-radius-top-start:0px;--button-border-radius-bottom-start:0px}:host ::slotted(cpsl-button:not(:first-child):not(:last-child)){--button-border-width-start:0px;--button-border-radius-top-start:0px;--button-border-radius-bottom-start:0px;--button-border-radius-top-end:0px;--button-border-radius-bottom-end:0px}:host ::slotted(cpsl-button){--button-color:var(--cpsl-color-text-tertiary);--button-padding-start:0px;--button-padding-end:0px;--button-padding-top:0px;--button-padding-bottom:0px;--button-border-radius:var(--cpsl-border-radius-button-group);height:var(--button-size);width:var(--button-size)}:host ::slotted(cpsl-button.selected){--button-color:var(--cpsl-color-text-primary)}";
+const CpslButtonGroupStyle0 = cpslButtonGroupCss;
+
+const CpslButtonGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectedId = undefined;
+    }
+    selectItem() {
+        this.buttonSlots.forEach(item => {
+            if (item.id === this.selectedId) {
+                item.classList.add('selected');
+            }
+            else {
+                item.classList.remove('selected');
+            }
+        });
+    }
+    componentWillRender() {
+        var _a;
+        this.buttonSlots.forEach(item => {
+            item.setAttribute('variant', 'secondary');
+            item.setAttribute('full-width', 'true');
+            this.selectItem();
+        });
+        if (Boolean((_a = this.otherSlots) === null || _a === void 0 ? void 0 : _a.length)) {
+            console.error('cpsl-button is the only valid child of cpsl-button-group');
+            this.otherSlots.forEach(item => item.remove());
+        }
+    }
+    get buttonSlots() {
+        return this.el.querySelectorAll('cpsl-button');
+    }
+    get otherSlots() {
+        return this.el.querySelectorAll('&> *:not(cpsl-button)');
+    }
+    render() {
+        return (h(Host, { key: '18830efc419c35995cc7b31a89e2405e230f4978' }, h("slot", { key: 'f466f88653fd0fe91b258c03706b13adc78be777' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selectedId": ["selectItem"]
+    }; }
+};
+CpslButtonGroup.style = CpslButtonGroupStyle0;
+
+const cpslCardCss = ":host{--card-padding-top:24px;--card-padding-end:24px;--card-padding-bottom:24px;--card-padding-start:24px;--card-border-width:1px;--card-border-color:var(--cpsl-color-card-border);--card-border-radius:var(--cpsl-border-radius-card);--card-background-color:var(--cpsl-color-card-surface);display:block}.card{-webkit-padding-start:var(--card-padding-start);padding-inline-start:var(--card-padding-start);-webkit-padding-end:var(--card-padding-end);padding-inline-end:var(--card-padding-end);padding-top:var(--card-padding-top);padding-bottom:var(--card-padding-bottom);display:block;box-sizing:border-box;overflow:hidden;border:var(--card-border-width) solid var(--card-border-color);border-radius:var(--card-border-radius);background:var(--card-background-color)}";
+const CpslCardStyle0 = cpslCardCss;
+
+const CpslCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '21177f5a9ceec0246dc1fa89a052bfdadacc3063' }, h("div", { key: '0940e0aaf62b24e1be0e99c736069b5bb463854c', class: { card: true }, part: "card-container" }, h("slot", { key: '6317e03f97be9841c03b040845591043bf203e36' }))));
+    }
+};
+CpslCard.style = CpslCardStyle0;
+
+const cpslCheckboxCss = ":host{--container-height:20px;--container-width:20px;--container-border-radius:var(--cpsl-border-radius-checkbox);--container-border-width:2px;--container-background-color-default:var(--cpsl-color-checkbox-surface-default);--container-border-color-default:var(--cpsl-color-checkbox-border-default);--container-background-color-checked:var(--cpsl-color-checkbox-surface-checked);--container-border-color-checked:var(--cpsl-color-checkbox-border-checked);--icon-height:16px;--icon-width:16px;--checkbox-icon-color:var(--cpsl-color-checkbox-icon);display:block;position:relative;height:var(--container-height);width:var(--container-width);cursor:pointer}input{position:absolute;width:100%;height:100%;margin:0px;opacity:0}span.container{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;width:100%;height:100%;border-radius:var(--container-border-radius);border:var(--container-border-width) solid;background:var(--container-background-color-default);border-color:var(--container-border-color-default);transition:all 0.15s ease-in-out}span.container cpsl-icon{--height:var(--icon-height);--width:var(--icon-width);opacity:0;--icon-color:var(--checkbox-icon-color);transition:all 0.15s ease-in-out}span.container.checked{background:var(--container-background-color-checked);border-color:var(--container-border-color-checked)}span.container.checked cpsl-icon{opacity:1}";
+const CpslCheckboxStyle0 = cpslCheckboxCss;
+
+const CpslCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslCheckboxChanged = createEvent(this, "cpslCheckboxChanged", 7);
+        this.handleCheckboxClick = () => {
+            this.cpslCheckboxChanged.emit(!this.checked);
+        };
+        this.checked = undefined;
+    }
+    render() {
+        return (h(Host, { key: '236c0b027e72c0c25dbc2fd3183a77400c815f8c' }, h("input", { key: '8c350e21268b87d485b16796b2058c4e47f46e75', type: "checkbox", checked: this.checked }), h("span", { key: 'b1d8fc6dd380b67eb8940f55bba47810c54ee189', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '2b3ddcad1e2b9007bda8135a810b75a1a2cfaeca', icon: "check" }))));
+    }
+};
+CpslCheckbox.style = CpslCheckboxStyle0;
+
+const cpslCodeInputCss = ":host{--input-width:40px;--input-height:54px;--input-border-radius:var(--cpsl-border-radius-input);--input-border-color:var(--cpsl-color-input-border-placeholder);--input-border-width:1px;--input-background-color:var(--cpsl-color-input-surface-default);--input-border-error-color:var(--cpsl-color-input-border-error);--input-font-size:clamp(20px, 1.25rem, 30px);--input-color:var(--cpsl-color-text-primary);--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:12px;--helper-text-margin-top:6px;display:block;font-family:var(--cpsl-font-family, inherit)}.code-container{display:flex;gap:8px}.code-input{font-family:var(--cpsl-font-family, inherit);border-radius:var(--input-border-radius);font-size:var(--input-font-size);border-color:var(--input-border-color);border-width:var(--input-border-width);border-style:solid;font-size:var(--input-font-size);color:var(--input-color);width:var(--input-width);height:var(--input-height);background:var(--input-background-color);box-sizing:border-box;text-align:center;outline:none}.code-input:focus{--input-border-color:var(--cpsl-color-input-border-active)}.code-input::-webkit-outer-spin-button,.code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.code-input .error-container{border-color:var(--input-border-error-color)}input[type=number]{-moz-appearance:textfield}.helper-text-container{flex-basis:100%;display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);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)}";
+const CpslCodeInputStyle0 = cpslCodeInputCss;
+
+const CpslCodeInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslInput = createEvent(this, "cpslInput", 7);
+        this.handleInput = (ind, ev) => {
+            var _a;
+            const inputElements = this.inputs;
+            if (ev.inputType == 'insertText') {
+                if (this.type === 'number' && isNaN(parseInt(ev.data))) {
+                    inputElements[ind].value = '';
+                    return;
+                }
+                inputElements[Math.min(this.length - 1, ind + 1)].focus();
+                const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
+                this.cpslInput.emit({ value: newCode });
+                this.code = newCode;
+            }
+        };
+        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);
+                    }
+                    else {
+                        newCode = this.code.substring(0, ind);
+                    }
+                    this.cpslInput.emit({ value: newCode });
+                    this.code = newCode;
+                    break;
+                }
+                case 'ArrowLeft': {
+                    setTimeout(() => {
+                        this.inputs[ind].setSelectionRange(1, 1);
+                    }, 0);
+                    break;
+                }
+            }
+        };
+        this.handleFocus = (ind) => {
+            const inputElements = this.inputs;
+            for (const input of inputElements) {
+                if (!input.value) {
+                    input.focus();
+                    break;
+                }
+                else if (input.id === `code-input-${this.length - 1}`) {
+                    input.focus();
+                    break;
+                }
+            }
+            setTimeout(() => {
+                inputElements[ind].setSelectionRange(1, 1);
+            }, 0);
+        };
+        this.handlePaste = (e) => {
+            const inputElements = this.inputs;
+            const pastedCode = e.clipboardData.getData('text');
+            if (this.type === 'number' && isNaN(parseInt(pastedCode))) {
+                setTimeout(() => {
+                    inputElements[0].value = '';
+                }, 0);
+                return;
+            }
+            this.cpslInput.emit({
+                value: pastedCode,
+            });
+            inputElements.forEach((input, index) => {
+                input.value = pastedCode.charAt(index);
+            });
+            inputElements[this.length - 1].focus();
+        };
+        this.code = undefined;
+        this.errorText = undefined;
+        this.helperText = undefined;
+        this.length = undefined;
+        this.type = 'number';
+    }
+    get inputs() {
+        return Array.from(this.el.shadowRoot.querySelectorAll('input'));
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'cee793d35dc39dce79834dd7c73038bf50e41442' }, h("div", { key: '1df541a5ae880c512c6c70c3b5f1cf64e1a89b8b', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+            var _a;
+            return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
+        })), (this.errorText || this.helperText) && (h("div", { key: '2001f525a89d0b57287cd97367c6646de0de163a', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'c274e60e8fd04e18b2ebff6386d1fa46916d2d66', icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", { key: '56566c698720936d4225eea8b07f042e67f570e5' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+    }
+    get el() { return getElement(this); }
+};
+CpslCodeInput.style = CpslCodeInputStyle0;
+
+const cpslDividerCss = ":host{--divider-height:1px;--divider-color:var(--cpsl-color-divider);display:flex;align-items:center;height:24px;color:var(--cpsl-color-text-subtle);font-family:var(--cpsl-font-family, inherit);font-size:clamp(14px, 0.875rem, 21px);font-weight:600;gap:16px}:host div{flex:1;background:var(--divider-color);height:var(--divider-height)}";
+const CpslDividerStyle0 = cpslDividerCss;
+
+const CpslDivider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'd5cffdef9344f7dcac4aae1bc2acca8c02d69946' }, h("div", { key: 'e07f8107804df83537a3b8e40d124c66d2fc6f44' }), h("slot", { key: 'd97f02d46a63d32d107838b5aa50654a9593cc8a' }), h("div", { key: '2316aed010b91a65c961e2f30cc2cde03b892429' })));
+    }
+};
+CpslDivider.style = CpslDividerStyle0;
+
+const cpslDrawerCss = ":host{display:flex;position:fixed;z-index:10004}:host(.left){left:0;top:0;transition:left}:host(.right){right:0;top:0;transition:right}:host(.top){top:0;left:0;transition:top}:host(.bottom){bottom:0;left:0;transition:bottom}.container{flex:1;overflow:auto;z-index:10004}";
+const CpslDrawerStyle0 = cpslDrawerCss;
+
+const CpslDrawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closedAnchorPosition = undefined;
+        this.showTransition = undefined;
+        this.anchor = undefined;
+        this.anchorPosition = undefined;
+        this.noOverlay = undefined;
+        this.open = undefined;
+        this.size = undefined;
+        this.transitionDuration = 0.15;
+        this.transitionFunction = 'ease-in-out';
+        this.variant = 'temporary';
+        this.zIndexOverride = undefined;
+    }
+    componentDidLoad() {
+        this.closedAnchorPosition = `-${this.getContainerHeight()}px`;
+        setTimeout(() => {
+            this.showTransition = true;
+        }, 100);
+    }
+    getContainerHeight() {
+        var _a;
+        return (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    }
+    get containerEl() {
+        return this.el.shadowRoot.getElementById('container');
+    }
+    render() {
+        var _a;
+        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 (h(Host, { key: '9568be6ee1897a96bbdb18dabfd32d40ba6a6fa5', 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' }, (Boolean(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 && h("cpsl-overlay", { key: '744838970ee22c5bb1798702f6060b6d12f29eb9', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: 'b3e4d26c18e7d1e5442b941dd67085088d9c33a9', id: "container", class: "container", part: "container" }, h("slot", { key: '1951ec776043562fe15409ed4a19799c21f6e36d' }))));
+    }
+    get el() { return getElement(this); }
+};
+CpslDrawer.style = CpslDrawerStyle0;
+
 const AD = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2087_4012)">
 <path d="M6.78286 22.8093C8.36049 23.5721 10.1303 24 12.0002 24C13.8701 24 15.64 23.5721 17.2176 22.8093L18.2611 12L17.2176 1.19072C15.64 0.427875 13.8701 0 12.0002 0C10.1303 0 8.36049 0.427875 6.78286 1.19072L5.73938 12L6.78286 22.8093Z" fill="#FFDA44"/>
@@ -4011,6 +4346,11 @@ const BackupKit = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" s
 </svg>
 `;
 
+const Brush = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 10V3.6C20 3.03995 20 2.75992 19.891 2.54601C19.7951 2.35785 19.6422 2.20487 19.454 2.10899C19.2401 2 18.9601 2 18.4 2H5.6C5.03995 2 4.75992 2 4.54601 2.10899C4.35785 2.20487 4.20487 2.35785 4.10899 2.54601C4 2.75992 4 3.03995 4 3.6V10M20 10H4M20 10V10.2C20 11.8802 20 12.7202 19.673 13.362C19.3854 13.9265 18.9265 14.3854 18.362 14.673C17.7202 15 16.8802 15 15.2 15H8.8C7.11984 15 6.27976 15 5.63803 14.673C5.07354 14.3854 4.6146 13.9265 4.32698 13.362C4 12.7202 4 11.8802 4 10.2V10M14.5 15V19.5C14.5 20.8807 13.3807 22 12 22C10.6193 22 9.5 20.8807 9.5 19.5V15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const CapsuleLogo = `<svg width="66" height="18" viewBox="0 0 66 18" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1065_1067)">
 <path d="M8.90893 5.98154C8.79593 6.37659 8.36391 6.57225 7.98741 6.41488C7.64799 6.27305 7.4779 5.89324 7.56125 5.53225C7.61419 5.30292 7.65233 5.08449 7.6757 4.87695C7.72165 4.48163 7.72115 4.13023 7.6742 3.82275C7.62728 3.51526 7.53433 3.26052 7.39539 3.05853C7.26076 2.85258 7.0849 2.70424 6.8678 2.6135C6.48209 2.45231 6.05553 2.51587 5.58813 2.80414C5.12272 3.08752 4.64333 3.58956 4.14988 4.31029C3.65849 5.0261 3.17976 5.95161 2.71371 7.08679C2.23959 8.24161 1.9244 9.24985 1.76818 10.1115C1.61628 10.9692 1.60543 11.6613 1.73562 12.1878C1.87013 12.7104 2.1291 13.0518 2.51249 13.212C2.72496 13.3008 2.9478 13.3248 3.18098 13.2841C3.4185 13.2394 3.65959 13.13 3.90425 12.9559C4.15121 12.7828 4.39612 12.5454 4.63897 12.2439C4.76621 12.0879 4.89014 11.9151 5.01082 11.7254C5.2102 11.4119 5.5999 11.2672 5.93935 11.4136C6.31297 11.5748 6.47729 12.021 6.2762 12.3772C6.02913 12.8148 5.76478 13.2219 5.48314 13.5985C5.06553 14.1609 4.62853 14.6288 4.17213 15.0023C3.71776 15.3709 3.26186 15.6179 2.80446 15.7434C2.34908 15.864 1.91005 15.836 1.4874 15.6594C0.863804 15.3988 0.433286 14.859 0.195844 14.0401C-0.0415976 13.2212 -0.0631333 12.173 0.131237 10.8955C0.325607 9.61802 0.755687 8.16844 1.42148 6.54674C2.08929 4.92015 2.80228 3.58879 3.5605 2.55268C4.32072 1.51165 5.07175 0.786304 5.81357 0.376648C6.55541 -0.0330046 7.2358 -0.108495 7.85478 0.150177C8.24973 0.315224 8.56852 0.58663 8.8112 0.964396C9.05387 1.34216 9.21418 1.81505 9.29215 2.38307C9.37214 2.94618 9.36242 3.59269 9.26298 4.32262C9.19509 4.84082 9.07707 5.39378 8.90893 5.98154Z" />
@@ -4108,13 +4448,18 @@ const Capsule = `<svg xmlns="http://www.w3.org/2000/svg" width="23" height="38"
 <path d="M15.4555 20.2909C15.8721 19.3437 17.0252 18.8939 18.031 19.2862L18.1275 19.3239C19.1333 19.7162 19.6109 20.8021 19.1943 21.7493C18.7777 22.6966 17.6246 23.1464 16.6188 22.754L16.5223 22.7164C15.5165 22.324 15.0389 21.2381 15.4555 20.2909Z"/>
 </svg>`;
 
+const CheckCircle = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 12L10.5 15L16.5 9M22 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"/>
+</svg>
+`;
+
 const Check = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path d="M20 6L9 17L4 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
 
-const ChevronUp = `<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 7L7 0.999999L1 7" stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+const ChevronUp = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 15L12 9L6 15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
 
@@ -4123,11 +4468,9 @@ const Clock = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" strok
 </svg>
 `;
 
-const Close = `<svg width="24" height="24" viewBox="0 0 21 20" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.125 4.375L4.875 15.625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16.125 15.625L4.875 4.375" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
-`;
+const Close = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"  xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7L7 17M7 7L17 17" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
 
 const ClubhouseBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.74167 17.875C0.783333 17.875 0 18.6583 0 19.6167C0 20.575 0.783333 21.3583 1.74167 21.3583C2.7 21.3583 3.48333 20.575 3.48333 19.6167C3.48333 18.6583 2.70833 17.875 1.74167 17.875Z" fill="#6515DD"/>
@@ -4146,6 +4489,11 @@ const Copy = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
 </svg>
 `;
 
+const Cube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 8H16M16 8V20.5M16 8L20.5 3.5M21 15.3373V3.8C21 3.51997 21 3.37996 20.9455 3.273C20.8976 3.17892 20.8211 3.10243 20.727 3.0545C20.62 3 20.48 3 20.2 3H8.66274C8.41815 3 8.29586 3 8.18077 3.02763C8.07873 3.05213 7.98119 3.09253 7.89172 3.14736C7.7908 3.2092 7.70432 3.29568 7.53137 3.46863L3.46863 7.53137C3.29568 7.70432 3.2092 7.7908 3.14736 7.89172C3.09253 7.98119 3.05213 8.07873 3.02763 8.18077C3 8.29586 3 8.41815 3 8.66274V20.2C3 20.48 3 20.62 3.0545 20.727C3.10243 20.8211 3.17892 20.8976 3.273 20.9455C3.37996 21 3.51997 21 3.8 21H15.3373C15.5818 21 15.7041 21 15.8192 20.9724C15.9213 20.9479 16.0188 20.9075 16.1083 20.8526C16.2092 20.7908 16.2957 20.7043 16.4686 20.5314L20.5314 16.4686C20.7043 16.2957 20.7908 16.2092 20.8526 16.1083C20.9075 16.0188 20.9479 15.9213 20.9724 15.8192C21 15.7041 21 15.5818 21 15.3373Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const DecentBrand = `<svg width="26" height="21" viewBox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.778 2.78753C14.0232 2.78753 14.984 4.90478 15.5758 6.3203C15.9631 7.2468 16.7703 8.7695 17.7174 9.6841C18.9174 6.8477 19.7749 1e-05 20.9598 0C22.4868 1e-05 25.2514 4.71852 25.2514 10.4107C25.2514 16.1232 22.4888 20.8962 20.96 20.8962C19.7774 20.8962 18.9206 14.0677 17.7252 11.2048C16.773 12.1181 15.9607 13.6496 15.5717 14.58C14.98 15.9955 14.0191 18.1128 12.7739 18.1128C11.5287 18.1128 10.5679 15.9955 9.97612 14.58C9.54017 13.5372 8.57227 11.739 7.47171 10.9028C6.84001 11.4891 6.29866 12.5072 6.04207 13.121C5.65917 14.0369 5.03745 15.4069 4.23174 15.4069C3.42602 15.4069 2.8043 14.0369 2.4214 13.121C2.05134 12.2358 1.07371 10.5066 0.101214 10.4476C0.0674785 10.4496 0.0337325 10.4496 0 10.4476C0.0337143 10.4455 0.0674613 10.4455 0.101214 10.4476C1.07268 10.3887 2.03506 8.6625 2.40511 7.7773C2.78801 6.8614 3.40973 5.4914 4.21545 5.4914C5.02116 5.4914 5.64288 6.8614 6.02578 7.7773C6.28377 8.3944 6.82965 9.4203 7.4658 10.005C8.57048 9.1721 9.5429 7.3663 9.98018 6.3203C10.5719 4.90478 11.5328 2.78753 12.778 2.78753Z" fill="#9969FF"/>
 </svg>
@@ -4233,28 +4581,6 @@ const Facebook = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentC
 </svg>
 `;
 
-const FarcasterBrand = `<svg width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2332_9702)">
-<path d="M5.50705 0.0720215H26.0971V4.16702H31.9521L30.7251 8.26302H29.6861V24.833C30.2071 24.833 30.6301 25.249 30.6301 25.763V26.88H30.8191C31.3411 26.88 31.7641 27.297 31.7641 27.811V28.928H21.1851V27.811C21.1851 27.297 21.6081 26.88 22.1301 26.88H22.3191V25.763C22.3191 25.316 22.6391 24.943 23.0651 24.853L23.0451 15.71C22.7111 12.057 19.5961 9.19402 15.8021 9.19402C12.0081 9.19402 8.89305 12.057 8.55905 15.71L8.53905 24.845C9.04305 24.919 9.66305 25.302 9.66305 25.763V26.88H9.85205C10.3731 26.88 10.7961 27.297 10.7961 27.811V28.928H0.218053V27.811C0.218053 27.297 0.641053 26.88 1.16205 26.88H1.35105V25.763C1.35105 25.249 1.77405 24.833 2.29605 24.833V8.26302H1.25705L0.0290527 4.16702H5.50705V0.0720215Z" fill="#8A63D2"/>
-</g>
-<defs>
-<clipPath id="clip0_2332_9702">
-<rect width="32" height="29" fill="white"/>
-</clipPath>
-</defs>
-</svg>`;
-
-const Farcaster = `<svg width="32" height="29" viewBox="0 0 32 29" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2332_9702)">
-<path d="M5.50705 0.0720215H26.0971V4.16702H31.9521L30.7251 8.26302H29.6861V24.833C30.2071 24.833 30.6301 25.249 30.6301 25.763V26.88H30.8191C31.3411 26.88 31.7641 27.297 31.7641 27.811V28.928H21.1851V27.811C21.1851 27.297 21.6081 26.88 22.1301 26.88H22.3191V25.763C22.3191 25.316 22.6391 24.943 23.0651 24.853L23.0451 15.71C22.7111 12.057 19.5961 9.19402 15.8021 9.19402C12.0081 9.19402 8.89305 12.057 8.55905 15.71L8.53905 24.845C9.04305 24.919 9.66305 25.302 9.66305 25.763V26.88H9.85205C10.3731 26.88 10.7961 27.297 10.7961 27.811V28.928H0.218053V27.811C0.218053 27.297 0.641053 26.88 1.16205 26.88H1.35105V25.763C1.35105 25.249 1.77405 24.833 2.29605 24.833V8.26302H1.25705L0.0290527 4.16702H5.50705V0.0720215Z"/>
-</g>
-<defs>
-<clipPath id="clip0_2332_9702">
-<rect width="32" height="29" fill="white"/>
-</clipPath>
-</defs>
-</svg>`;
-
 const FigmaBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_106_21188)">
 <path d="M8.00006 24C10.2081 24 12.0001 22.208 12.0001 20V15.9999H8.00006C5.79205 15.9999 4 17.792 4 20C4 22.208 5.79205 24 8.00006 24Z" fill="#0ACF83"/>
@@ -4276,6 +4602,11 @@ const Figma = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColo
 </svg>
 `;
 
+const File = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 2.26946V6.4C14 6.96005 14 7.24008 14.109 7.45399C14.2049 7.64215 14.3578 7.79513 14.546 7.89101C14.7599 8 15.0399 8 15.6 8H19.7305M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const GithubBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_106_21439)">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.3724 0 0 5.3808 0 12.0204C0 17.3304 3.438 21.8364 8.2068 23.4252C8.8068 23.5356 9.0252 23.1648 9.0252 22.8456C9.0252 22.5612 9.0156 21.804 9.0096 20.802C5.6712 21.528 4.9668 19.1904 4.9668 19.1904C4.422 17.8008 3.6348 17.4312 3.6348 17.4312C2.5452 16.6872 3.7176 16.7016 3.7176 16.7016C4.9212 16.7856 5.5548 17.94 5.5548 17.94C6.6252 19.776 8.364 19.2456 9.0468 18.9384C9.1572 18.162 9.4668 17.6328 9.81 17.3328C7.146 17.0292 4.344 15.9972 4.344 11.3916C4.344 10.08 4.812 9.006 5.5788 8.166C5.4552 7.8624 5.0436 6.6396 5.6964 4.986C5.6964 4.986 6.7044 4.662 8.9964 6.2172C9.97532 5.95022 10.9853 5.81423 12 5.8128C13.02 5.8176 14.046 5.9508 15.0048 6.2172C17.2956 4.662 18.3012 4.9848 18.3012 4.9848C18.9564 6.6396 18.5436 7.8624 18.4212 8.166C19.1892 9.006 19.6548 10.08 19.6548 11.3916C19.6548 16.0092 16.848 17.0256 14.1756 17.3232C14.6064 17.694 14.9892 18.4272 14.9892 19.5492C14.9892 21.1548 14.9748 22.452 14.9748 22.8456C14.9748 23.1672 15.1908 23.5416 15.8004 23.424C18.19 22.6225 20.2672 21.0904 21.7386 19.0441C23.2099 16.9977 24.001 14.5408 24 12.0204C24 5.3808 18.6264 0 12 0Z" fill="black"/>
@@ -4374,6 +4705,16 @@ const HeroWallet = `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="6
 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.7762 34.7246C4.80223 36.3946 4.82878 38.098 5.86538 39.1346C6.89237 40.1616 8.54788 40.1842 10.1963 40.2068C11.3876 40.2231 12.5753 40.2393 13.5192 40.6346C14.4656 41.0309 15.3371 41.8661 16.2081 42.7009C17.4081 43.8508 18.6072 45 20 45C21.402 45 22.6339 43.8225 23.8484 42.6617C24.7162 41.8323 25.5751 41.0113 26.4808 40.6346C27.3806 40.2603 28.5443 40.2422 29.7246 40.2238C31.3946 40.1978 33.098 40.1712 34.1346 39.1346C35.1616 38.1076 35.1842 36.4521 35.2068 34.8037C35.2231 33.6124 35.2393 32.4247 35.6346 31.4808C36.0309 30.5344 36.8661 29.6629 37.7009 28.7919C38.8508 27.5919 40 26.3928 40 25C40 23.598 38.8225 22.3661 37.6617 21.1516C36.8323 20.2838 36.0113 19.4249 35.6346 18.5192C35.2603 17.6194 35.2422 16.4557 35.2238 15.2754C35.1978 13.6054 35.1712 11.902 34.1346 10.8654C33.1076 9.8384 31.4521 9.81577 29.8037 9.79324C28.6124 9.77695 27.4247 9.76071 26.4808 9.36539C25.5344 8.96905 24.6629 8.13387 23.7919 7.2991C22.5919 6.14915 21.3928 5 20 5C18.598 5 17.3661 6.17749 16.1516 7.33828C15.2838 8.16775 14.4249 8.98869 13.5192 9.36539C12.6194 9.73966 11.4557 9.7578 10.2754 9.7762C8.60535 9.80223 6.90199 9.82878 5.86538 10.8654C4.8384 11.8924 4.81577 13.5479 4.79324 15.1963C4.77695 16.3876 4.76071 17.5753 4.36539 18.5192C3.96905 19.4656 3.13387 20.3371 2.2991 21.2081C1.14915 22.4081 0 23.6072 0 25C0 26.402 1.17749 27.6339 2.33828 28.8484C3.16775 29.7162 3.98869 30.5751 4.36539 31.4808C4.73966 32.3806 4.7578 33.5443 4.7762 34.7246ZM29.9607 21.9561C30.8287 21.1281 30.861 19.7533 30.033 18.8854C29.205 18.0175 27.8302 17.9851 26.9623 18.8131L17.1743 28.1508L13.039 24.199C12.1718 23.3703 10.7969 23.4014 9.9682 24.2687C9.13946 25.1359 9.17065 26.5107 10.0379 27.3395L15.6725 32.7241C16.5115 33.5259 17.8326 33.5264 18.6723 32.7254L29.9607 21.9561Z" class="foreground-0" opacity="0.95"/>
 </svg>`;
 
+const Home = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 21V13.6C9 13.0399 9 12.7599 9.10899 12.546C9.20487 12.3578 9.35785 12.2049 9.54601 12.109C9.75992 12 10.0399 12 10.6 12H13.4C13.9601 12 14.2401 12 14.454 12.109C14.6422 12.2049 14.7951 12.3578 14.891 12.546C15 12.7599 15 13.0399 15 13.6V21M11.0177 2.764L4.23539 8.03912C3.78202 8.39175 3.55534 8.56806 3.39203 8.78886C3.24737 8.98444 3.1396 9.20478 3.07403 9.43905C3 9.70352 3 9.9907 3 10.5651V17.8C3 18.9201 3 19.4801 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4801 21 18.9201 21 17.8V10.5651C21 9.9907 21 9.70352 20.926 9.43905C20.8604 9.20478 20.7526 8.98444 20.608 8.78886C20.4447 8.56806 20.218 8.39175 19.7646 8.03913L12.9823 2.764C12.631 2.49075 12.4553 2.35412 12.2613 2.3016C12.0902 2.25526 11.9098 2.25526 11.7387 2.3016C11.5447 2.35412 11.369 2.49075 11.0177 2.764Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+const Image$1 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.27209 20.7279L10.8686 14.1314C11.2646 13.7354 11.4627 13.5373 11.691 13.4632C11.8918 13.3979 12.1082 13.3979 12.309 13.4632C12.5373 13.5373 12.7354 13.7354 13.1314 14.1314L19.6839 20.6839M14 15L16.8686 12.1314C17.2646 11.7354 17.4627 11.5373 17.691 11.4632C17.8918 11.3979 18.1082 11.3979 18.309 11.4632C18.5373 11.5373 18.7354 11.7354 19.1314 12.1314L22 15M10 9C10 10.1046 9.10457 11 8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9ZM6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27976 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3H6.8C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const InfoCircle = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 16V12M12 8H12.01M22 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"/>
 </svg>
@@ -4412,8 +4753,13 @@ const Key = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke=
 </svg>
 `;
 
-const Lightning = `<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 14.8962L5 9.89624L1 8.39624L8 0.89624L7 5.89624L11 7.39624L4 14.8962Z" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+const Lightning01 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 2L4.09347 12.6879C3.74466 13.1064 3.57026 13.3157 3.56759 13.4925C3.56528 13.6461 3.63375 13.7923 3.75327 13.8889C3.89076 14 4.16319 14 4.70805 14H12L11 22L19.9066 11.3121C20.2554 10.8936 20.4298 10.6843 20.4324 10.5075C20.4348 10.3539 20.3663 10.2077 20.2468 10.1111C20.1093 10 19.8368 10 19.292 10H12L13 2Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+const Lightning = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 2L4.09347 12.6879C3.74466 13.1064 3.57026 13.3157 3.56759 13.4925C3.56528 13.6461 3.63375 13.7923 3.75327 13.8889C3.89076 14 4.16319 14 4.70805 14H12L11 22L19.9066 11.3121C20.2554 10.8936 20.4298 10.6843 20.4324 10.5075C20.4348 10.3539 20.3663 10.2077 20.2468 10.1111C20.1093 10 19.8368 10 19.292 10H12L13 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
 
@@ -4446,6 +4792,11 @@ const Mail = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
 </svg>
 `;
 
+const Menu = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12H21M3 6H21M3 18H21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const MoreLoginOptions = `<svg width="17" height="16" viewBox="0 0 17 16" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Group 4">
 <path id="Vector" d="M2.1 16C2.98366 16 3.7 15.2836 3.7 14.4C3.7 13.5163 2.98366 12.8 2.1 12.8C1.21634 12.8 0.5 13.5163 0.5 14.4C0.5 15.2836 1.21634 16 2.1 16Z"/>
@@ -4526,6 +4877,17 @@ const Reddit = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCol
 </svg>
 `;
 
+const Refresh = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 10C2 10 2.12132 9.15076 5.63604 5.63604C9.15076 2.12132 14.8492 2.12132 18.364 5.63604C19.6092 6.88131 20.4133 8.40072 20.7762 10M2 10V4M2 10H8M22 14C22 14 21.8787 14.8492 18.364 18.364C14.8492 21.8787 9.15076 21.8787 5.63604 18.364C4.39076 17.1187 3.58669 15.5993 3.22383 14M22 14V20M22 14H16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+const Settings = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.39516 19.3711L9.97961 20.6856C10.1533 21.0768 10.4369 21.4093 10.7958 21.6426C11.1548 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8489 21.8759 13.2078 21.6426C13.5668 21.4093 13.8503 21.0768 14.0241 20.6856L14.6085 19.3711C14.8165 18.9047 15.1665 18.5159 15.6085 18.26C16.0533 18.0034 16.5678 17.8941 17.0785 17.9478L18.5085 18.1C18.9342 18.145 19.3638 18.0656 19.7452 17.8713C20.1266 17.6771 20.4435 17.3763 20.6574 17.0056C20.8716 16.635 20.9736 16.2103 20.9511 15.7829C20.9286 15.3555 20.7826 14.9438 20.5307 14.5978L19.6841 13.4344C19.3826 13.0171 19.2215 12.5148 19.2241 12C19.224 11.4866 19.3866 10.9864 19.6885 10.5711L20.5352 9.40778C20.787 9.06175 20.9331 8.65007 20.9556 8.22267C20.978 7.79528 20.876 7.37054 20.6618 7C20.4479 6.62923 20.1311 6.32849 19.7496 6.13423C19.3682 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5723 6.11141 16.0577 6.00212 15.6129 5.74556C15.1701 5.48825 14.82 5.09736 14.6129 4.62889L14.0241 3.31444C13.8503 2.92317 13.5668 2.59072 13.2078 2.3574C12.8489 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1548 2.12408 10.7958 2.3574C10.4369 2.59072 10.1533 2.92317 9.97961 3.31444L9.39516 4.62889C9.18809 5.09736 8.83804 5.48825 8.39516 5.74556C7.95038 6.00212 7.43583 6.11141 6.92516 6.05778L5.49072 5.90556C5.06505 5.86053 4.63546 5.93997 4.25403 6.13423C3.87261 6.32849 3.55574 6.62923 3.34183 7C3.12765 7.37054 3.02561 7.79528 3.0481 8.22267C3.07058 8.65007 3.21662 9.06175 3.4685 9.40778L4.31516 10.5711C4.61711 10.9864 4.7797 11.4866 4.77961 12C4.7797 12.5134 4.61711 13.0137 4.31516 13.4289L3.4685 14.5922C3.21662 14.9382 3.07058 15.3499 3.0481 15.7773C3.02561 16.2047 3.12765 16.6295 3.34183 17C3.55595 17.3706 3.87286 17.6712 4.25423 17.8654C4.6356 18.0596 5.06508 18.1392 5.49072 18.0944L6.92072 17.9422C7.43139 17.8886 7.94594 17.9979 8.39072 18.2544C8.83525 18.511 9.18693 18.902 9.39516 19.3711Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3432 9 9.00004 10.3431 9.00004 12C9.00004 13.6569 10.3432 15 12 15Z" stroke-width="2" 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>
@@ -4547,6 +4909,12 @@ const Snapchat = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentC
 </svg>
 `;
 
+const Stars = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 13L7.28446 14.5689C7.54995 15.0999 7.68269 15.3654 7.86003 15.5954C8.01739 15.7996 8.20041 15.9826 8.40455 16.14C8.63462 16.3173 8.9001 16.4501 9.43108 16.7155L11 17.5L9.43108 18.2845C8.9001 18.5499 8.63462 18.6827 8.40455 18.86C8.20041 19.0174 8.01739 19.2004 7.86003 19.4046C7.68269 19.6346 7.54995 19.9001 7.28446 20.4311L6.5 22L5.71554 20.4311C5.45005 19.9001 5.31731 19.6346 5.13997 19.4046C4.98261 19.2004 4.79959 19.0174 4.59545 18.86C4.36538 18.6827 4.0999 18.5499 3.56892 18.2845L2 17.5L3.56892 16.7155C4.0999 16.4501 4.36538 16.3173 4.59545 16.14C4.79959 15.9826 4.98261 15.7996 5.13997 15.5954C5.31731 15.3654 5.45005 15.0999 5.71554 14.5689L6.5 13Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 2L16.1786 5.06442C16.4606 5.79765 16.6016 6.16426 16.8209 6.47264C17.0153 6.74595 17.254 6.98475 17.5274 7.17909C17.8357 7.39836 18.2024 7.53937 18.9356 7.82138L22 9L18.9356 10.1786C18.2024 10.4606 17.8357 10.6016 17.5274 10.8209C17.254 11.0153 17.0153 11.254 16.8209 11.5274C16.6016 11.8357 16.4606 12.2024 16.1786 12.9356L15 16L13.8214 12.9356C13.5394 12.2024 13.3984 11.8357 13.1791 11.5274C12.9847 11.254 12.746 11.0153 12.4726 10.8209C12.1643 10.6016 11.7976 10.4606 11.0644 10.1786L8 9L11.0644 7.82138C11.7976 7.53937 12.1643 7.39836 12.4726 7.17909C12.746 6.98475 12.9847 6.74595 13.1791 6.47264C13.3984 6.16426 13.5394 5.79765 13.8214 5.06442L15 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const TelegramBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_106_21213)">
 <path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="url(#paint0_linear_106_21213)"/>
@@ -4629,6 +4997,11 @@ const Wallet = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stro
 </svg>
 `;
 
+const X = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7L7 17M7 7L17 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const YoutubeBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_106_21177)">
 <path d="M23.522 6.18547C23.3863 5.67489 23.1189 5.20889 22.7465 4.83413C22.3741 4.45936 21.9099 4.18897 21.4002 4.05002C19.5238 3.54547 12.0238 3.54547 12.0238 3.54547C12.0238 3.54547 4.5238 3.54547 2.64744 4.05002C2.13773 4.18897 1.67346 4.45936 1.30109 4.83413C0.92872 5.20889 0.661309 5.67489 0.525622 6.18547C0.0238038 8.07002 0.0238037 12 0.0238037 12C0.0238037 12 0.0238038 15.93 0.525622 17.8146C0.661309 18.3251 0.92872 18.7911 1.30109 19.1659C1.67346 19.5407 2.13773 19.8111 2.64744 19.95C4.5238 20.4546 12.0238 20.4546 12.0238 20.4546C12.0238 20.4546 19.5238 20.4546 21.4002 19.95C21.9099 19.8111 22.3741 19.5407 22.7465 19.1659C23.1189 18.7911 23.3863 18.3251 23.522 17.8146C24.0238 15.93 24.0238 12 24.0238 12C24.0238 12 24.0238 8.07002 23.522 6.18547Z" fill="#FF0302"/>
@@ -4644,168 +5017,10 @@ const YoutubeBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none
 
 const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path d="M23.7609 7.20005C23.7609 7.20005 23.5266 5.54536 22.8047 4.8188C21.8906 3.86255 20.8688 3.85786 20.4 3.80161C17.0438 3.55786 12.0047 3.55786 12.0047 3.55786H11.9953C11.9953 3.55786 6.95625 3.55786 3.6 3.80161C3.13125 3.85786 2.10938 3.86255 1.19531 4.8188C0.473438 5.54536 0.24375 7.20005 0.24375 7.20005C0.24375 7.20005 0 9.14536 0 11.086V12.9047C0 14.8454 0.239062 16.7907 0.239062 16.7907C0.239062 16.7907 0.473437 18.4454 1.19062 19.1719C2.10469 20.1282 3.30469 20.0954 3.83906 20.1985C5.76094 20.3813 12 20.4375 12 20.4375C12 20.4375 17.0438 20.4282 20.4 20.1891C20.8688 20.1329 21.8906 20.1282 22.8047 19.1719C23.5266 18.4454 23.7609 16.7907 23.7609 16.7907C23.7609 16.7907 24 14.85 24 12.9047V11.086C24 9.14536 23.7609 7.20005 23.7609 7.20005ZM9.52031 15.1125V8.36724L16.0031 11.7516L9.52031 15.1125Z" />
-</svg>
-`;
-
-const Icons = { AD: AD, AE: AE, AF: AF, AG: AG, AI: AI, AL: AL, AM: AM, AO: AO, AR: AR, AS: AS, AT: AT, AU: AU, AW: AW, AX: AX, AZ: AZ, BA: BA, BB: BB, BD: BD, BE: BE, BF: BF, BG: BG, BH: BH, BI: BI, BJ: BJ, BL: BL, BM: BM, BN: BN, BO: BO, BQ: BQ, BQ2: BQ2, BQ3: BQ3, BR: BR, BS: BS, BT: BT, BW: BW, BY: BY, BZ: BZ, CA: CA, CC: CC, CD: CD, CD2: CD2, CF: CF, CH: CH, CK: CK, CL: CL, CM: CM, CN: CN, CO: CO, CR: CR, CU: CU, CW: CW, CX: CX, CY: CY, CZ: CZ, DE: DE, DJ: DJ, DK: DK, DM: DM, DO: DO, DS: DS, DZ: DZ, EC: EC, EE: EE, EG: EG, EH: EH, ER: ER, ES: ES, ET: ET, FI: FI, FJ: FJ, FK: FK, FM: FM, FO: FO, FR: FR, GA: GA, GB2: GB2, GB: GB, GD: GD, GE: GE, GG: GG, GH: GH, GI: GI, GL: GL, GM: GM, GN: GN, GQ: GQ, GR: GR, GT: GT, GU: GU, GW: GW, GY: GY, HK: HK, HN: HN, HR: HR, HT: HT, HU: HU, ID: ID, IE: IE, IL: IL, IM: IM, IN: IN, IO: IO, IQ: IQ, IR: IR, IS: IS, IT: IT, JE: JE, JM: JM, JO: JO, JP: JP, KE: KE, KG: KG, KH: KH, KI: KI, KM: KM, KN: KN, KP: KP, KR: KR, KW: KW, KY: KY, KZ: KZ, LA: LA, LB: LB, LC: LC, LI: LI, LK: LK, LR: LR, LS: LS, LT: LT, LU: LU, LV: LV, LY: LY, MA: MA, MC: MC, MD: MD, ME: ME, MG: MG, MH: MH, MK: MK, ML: ML, MM: MM, MN: MN, MO: MO, MP: MP, MQ: MQ, MR: MR, MS: MS, MT: MT, MU: MU, MV: MV, MW: MW, MX: MX, MY: MY, MZ: MZ, NA: NA, NE: NE, NF: NF, NG: NG, NI: NI, NL: NL, NO: NO, NP: NP, NR: NR, NU: NU, NZ: NZ, OM: OM, PA: PA, PE: PE, PF: PF, PG: PG, PH: PH, PK: PK, PL: PL, PN: PN, PR: PR, PS: PS, PT: PT, PW: PW, PY: PY, QA: QA, RO: RO, RS: RS, RU: RU, RW: RW, SA: SA, SB: SB, SC: SC, SE: SE, SG: SG, SI: SI, SK: SK, SL: SL, SM: SM, SN: SN, SO: SO, SR: SR, SS: SS, ST: ST, SV: SV, SX: SX, SY: SY, SZ: SZ, TC: TC, TD: TD, TG: TG, TH: TH, TJ: TJ, TK: TK, TL: TL, TM: TM, TN: TN, TO: TO, TR: TR, TT: TT, TV: TV, TW: TW, TZ: TZ, UA: UA, UG: UG, US: US, UY: UY, UZ: UZ, VC: VC, VE: VE, VG: VG, VI: VI, VN: VN, VU: VU, WS: WS, YE: YE, ZA: ZA, ZM: ZM, ZW: ZW, alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, check: Check, chevronUp: ChevronUp, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, decentBrand: DecentBrand, decent: Decent, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, earth: Earth, eyeOff: EyeOff, eye: Eye, facebookBrand: FacebookBrand, facebook: Facebook, farcasterBrand: FarcasterBrand, farcaster: Farcaster, figmaBrand: FigmaBrand, figma: Figma, githubBrand: GithubBrand, github: Github, googleBrand: GoogleBrand, google: Google, helpCircle: HelpCircle, heroEmail: HeroEmail, heroLock: HeroLock, heroPasskey: HeroPasskey, heroPhone: HeroPhone, heroWallet: HeroWallet, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, lightning: Lightning, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, rampNetworkBrand: RampNetworkBrand, rampNetwork: RampNetwork, redditBrand: RedditBrand, reddit: Reddit, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, youtubeBrand: YoutubeBrand, youtube: Youtube, };
-
-const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-start:16px;--container-padding-end:16px;--container-font-size:clamp(12px, 0.75rem, 18px);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-alert);display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-background-color:var(--cpsl-color-alert-surface-error);--container-border-color:var(--cpsl-color-alert-border-error);--container-color:var(--cpsl-color-text-error)}.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);font-weight:500;display:flex;align-items:center;justify-content:center;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)}.icon{display:flex}";
-const CpslAlertStyle0 = cpslAlertCss;
-
-const CpslAlert = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.type = 'error';
-        this.icon = undefined;
-    }
-    get Icon() {
-        if (Boolean(this.icon)) {
-            return Icons[this.icon];
-        }
-        switch (this.type) {
-            case 'error':
-            default: {
-                return Icons.alertCircle;
-            }
-        }
-    }
-    render() {
-        return (h(Host, { key: '44ed39687dc02639f574f002aeb4449c19cc3246', class: { error: this.type === 'error' } }, h("div", { key: '68acc8a8679cd344f450b606ee31888e03b2ef8a', class: "alert-container" }, h("div", { key: 'ebb639aef153672c3249d4d6bccaa31b4e933c4d', class: "icon", innerHTML: this.Icon }), h("slot", { key: '0dd11c5b640986d6b6c710b9fb82d344e01a46c0' }))));
-    }
-};
-CpslAlert.style = CpslAlertStyle0;
-
-const cpslButtonCss = ":host{--button-border-radius:var(--cpsl-border-radius-primary-button);--button-border-width:1px;--button-gap:4px;--button-box-shadow:0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 2px 2px 0px var(--cpsl-color-alpha-white-25) inset, 0px -2px 2px 0px var(--cpsl-color-alpha-black-25) inset;--button-padding-top:10px;--button-padding-bottom:10px;--button-padding-start:16px;--button-padding-end:16px;--button-font-size:clamp(14px, 0.875rem, 21px);height:100%;width:100%;font-family:var(--cpsl-font-family, inherit)}:host(.button-disabled){cursor:default;pointer-events:none}:host(.primary){--button-color:var(--cpsl-color-text-inverted);--button-background-color:var(--cpsl-color-primary-button-surface-default);--button-border-color:var(--cpsl-color-primary-button-border-default)}:host(.primary):host(.button-disabled){--button-background-color:var(--cpsl-color-primary-button-surface-disabled);--button-border-color:var(--cpsl-color-primary-button-border-disabled);--button-box-shadow:none;--button-outline-color:transparent}:host(.primary) :not(.button-disabled):hover{--button-background-color:var(--cpsl-color-primary-button-surface-hover)}:host(.primary) :not(.button-disabled):active{--button-background-color:var(--cpsl-color-primary-button-surface-pressed)}:host(.primary) :not(.button-disabled):focus-visible{--button-outline-color:var(--cpsl-color-primary-button-outline)}:host(.primary) ::slotted(cpsl-icon){--icon-color:var(--cpsl-text-inverted)}:host(.secondary){--button-color:var(--cpsl-color-text-primary);--button-background-color:var(--cpsl-color-secondary-button-surface-default);--button-border-color:var(--cpsl-color-secondary-button-border-default)}:host(.secondary):host(.button-disabled){--button-background-color:var(--cpsl-color-secondary-button-surface-disabled);--button-border-color:var(--cpsl-color-secondary-button-border-disabled);--button-box-shadow:none;--button-outline-color:transparent}:host(.secondary) :not(.button-disabled):hover{--button-background-color:var(--cpsl-color-secondary-button-surface-hover)}:host(.secondary) :not(.button-disabled):active{--button-background-color:var(--cpsl-color-secondary-button-surface-pressed)}:host(.secondary) :not(.button-disabled):focus-visible{--button-outline-color:var(--cpsl-color-secondary-button-outline)}:host(.secondary) ::slotted(cpsl-icon){--icon-color:var(--cpsl-text-primary)}:host(.icon){--button-color:transparent;--button-background-color:transparent;--button-border-color:transparent;--button-box-shadow:none;--button-outline-color:transparent}:host(.icon) ::slotted(cpsl-icon){--icon-color:var(--cpsl-color-text-secondary)}:host(.icon) :not(.button-disabled):hover ::slotted(cpsl-icon){--icon-color:var(--cpsl-color-text-primary)}.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);font-size:var(--container-font-size);font-weight:500;border:var(--button-border-width) solid transparent;cursor:pointer;color:var(--button-color);background-color:var(--button-background-color);border-color:var(--button-border-color);display:flex;justify-content:center;align-items:center;height:100%;width:100%;box-shadow:var(--button-box-shadow);gap:var(--button-gap);word-break:break-all;outline-color:var(--button-outline-color)}";
-const CpslButtonStyle0 = cpslButtonCss;
-
-const CpslButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.disabled = false;
-        this.variant = 'primary';
-    }
-    render() {
-        return (h(Host, { key: '258bec70d4cf27d453500c712285e45a1304b925', class: {
-                'primary': this.variant === 'primary',
-                'secondary': this.variant === 'secondary',
-                'icon': this.variant === 'icon',
-                'button-disabled': this.disabled,
-            } }, h("button", { key: 'b13438808d69e389bc75d6f06b81a40c7561eea8', class: "button-native" }, h("slot", { key: 'e684524f4ff0ceeca466293e1fc8737cf66184e0', name: "start" }), h("slot", { key: '66a1c7fa233f85a76a7d0cc2aad74e35ce5cd3f4' }), h("slot", { key: 'e369d09a351a1d1dd0d98d3812c1b75a0e84eae0', name: "end" }))));
-    }
-};
-CpslButton.style = CpslButtonStyle0;
-
-const cpslCodeInputCss = ":host{--input-width:40px;--input-height:54px;--input-border-radius:var(--cpsl-border-radius-input);--input-border-color:var(--cpsl-color-input-border-placeholder);--input-border-width:1px;--input-background-color:var(--cpsl-color-input-surface-default);--input-border-error-color:var(--cpsl-color-input-border-error);--input-font-size:clamp(20px, 1.25rem, 30px);--input-color:var(--cpsl-color-text-primary);--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:12px;--helper-text-margin-top:6px;display:block;font-family:var(--cpsl-font-family, inherit)}.code-container{display:flex;gap:8px}.code-input{font-family:var(--cpsl-font-family, inherit);border-radius:var(--input-border-radius);font-size:var(--input-font-size);border-color:var(--input-border-color);border-width:var(--input-border-width);border-style:solid;font-size:var(--input-font-size);color:var(--input-color);width:var(--input-width);height:var(--input-height);background-color:var(--input-background-color);box-sizing:border-box;text-align:center;outline:none}.code-input:focus{--input-border-color:var(--cpsl-color-input-border-active)}.code-input::-webkit-outer-spin-button,.code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.code-input .error-container{border-color:var(--input-border-error-color)}input[type=number]{-moz-appearance:textfield}.helper-text-container{flex-basis:100%;display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);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)}";
-const CpslCodeInputStyle0 = cpslCodeInputCss;
-
-const CpslCodeInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.cpslInput = createEvent(this, "cpslInput", 7);
-        this.handleInput = (ind, ev) => {
-            var _a;
-            const inputElements = this.inputs;
-            if (ev.inputType == 'insertText') {
-                if (this.type === 'number' && isNaN(parseInt(ev.data))) {
-                    inputElements[ind].value = '';
-                    return;
-                }
-                inputElements[Math.min(this.length - 1, ind + 1)].focus();
-                const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
-                this.cpslInput.emit({ value: newCode });
-                this.code = newCode;
-            }
-        };
-        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);
-                    }
-                    else {
-                        newCode = this.code.substring(0, ind);
-                    }
-                    this.cpslInput.emit({ value: newCode });
-                    this.code = newCode;
-                    break;
-                }
-                case 'ArrowLeft': {
-                    setTimeout(() => {
-                        this.inputs[ind].setSelectionRange(1, 1);
-                    }, 0);
-                    break;
-                }
-            }
-        };
-        this.handleFocus = (ind) => {
-            const inputElements = this.inputs;
-            for (const input of inputElements) {
-                if (!input.value) {
-                    input.focus();
-                    break;
-                }
-                else if (input.id === `code-input-${this.length - 1}`) {
-                    input.focus();
-                    break;
-                }
-            }
-            setTimeout(() => {
-                inputElements[ind].setSelectionRange(1, 1);
-            }, 0);
-        };
-        this.handlePaste = (e) => {
-            const inputElements = this.inputs;
-            const pastedCode = e.clipboardData.getData('text');
-            if (this.type === 'number' && isNaN(parseInt(pastedCode))) {
-                setTimeout(() => {
-                    inputElements[0].value = '';
-                }, 0);
-                return;
-            }
-            this.cpslInput.emit({
-                value: pastedCode,
-            });
-            inputElements.forEach((input, index) => {
-                input.value = pastedCode.charAt(index);
-            });
-            inputElements[this.length - 1].focus();
-        };
-        this.code = undefined;
-        this.errorText = undefined;
-        this.helperText = undefined;
-        this.length = undefined;
-        this.type = 'number';
-    }
-    get inputs() {
-        return Array.from(this.el.shadowRoot.querySelectorAll('input'));
-    }
-    render() {
-        var _a;
-        return (h(Host, { key: 'a71927ad671c9bcea55951797bb22fcede118d59' }, h("div", { key: '033281ae8250377ee175112f6428f412eaa339f5', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
-            var _a;
-            return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
-        })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
-    }
-    get el() { return getElement(this); }
-};
-CpslCodeInput.style = CpslCodeInputStyle0;
-
-const cpslDividerCss = ":host{--divider-height:1px;--divider-color:var(--cpsl-color-divider);display:flex;align-items:center;height:24px;color:var(--cpsl-color-text-subtle);font-family:var(--cpsl-font-family, inherit);font-size:clamp(14px, 0.875rem, 21px);font-weight:600;gap:16px}:host div{flex:1;background-color:var(--divider-color);height:var(--divider-height)}";
-const CpslDividerStyle0 = cpslDividerCss;
+</svg>
+`;
 
-const CpslDivider = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: '7b35806d55027d32c6f8c0e5cfcaef46f35ebd68' }, h("div", { key: '5af8157b329cfd491256537c267adbe3e15c8914' }), h("slot", { key: '913734d72f49bc1092f447326710223eb85f901e' }), h("div", { key: '47b8c8569f8e43a830bfb84636faca0df7b7e7df' })));
-    }
-};
-CpslDivider.style = CpslDividerStyle0;
+const Icons = { AD: AD, AE: AE, AF: AF, AG: AG, AI: AI, AL: AL, AM: AM, AO: AO, AR: AR, AS: AS, AT: AT, AU: AU, AW: AW, AX: AX, AZ: AZ, BA: BA, BB: BB, BD: BD, BE: BE, BF: BF, BG: BG, BH: BH, BI: BI, BJ: BJ, BL: BL, BM: BM, BN: BN, BO: BO, BQ: BQ, BQ2: BQ2, BQ3: BQ3, BR: BR, BS: BS, BT: BT, BW: BW, BY: BY, BZ: BZ, CA: CA, CC: CC, CD: CD, CD2: CD2, CF: CF, CH: CH, CK: CK, CL: CL, CM: CM, CN: CN, CO: CO, CR: CR, CU: CU, CW: CW, CX: CX, CY: CY, CZ: CZ, DE: DE, DJ: DJ, DK: DK, DM: DM, DO: DO, DS: DS, DZ: DZ, EC: EC, EE: EE, EG: EG, EH: EH, ER: ER, ES: ES, ET: ET, FI: FI, FJ: FJ, FK: FK, FM: FM, FO: FO, FR: FR, GA: GA, GB2: GB2, GB: GB, GD: GD, GE: GE, GG: GG, GH: GH, GI: GI, GL: GL, GM: GM, GN: GN, GQ: GQ, GR: GR, GT: GT, GU: GU, GW: GW, GY: GY, HK: HK, HN: HN, HR: HR, HT: HT, HU: HU, ID: ID, IE: IE, IL: IL, IM: IM, IN: IN, IO: IO, IQ: IQ, IR: IR, IS: IS, IT: IT, JE: JE, JM: JM, JO: JO, JP: JP, KE: KE, KG: KG, KH: KH, KI: KI, KM: KM, KN: KN, KP: KP, KR: KR, KW: KW, KY: KY, KZ: KZ, LA: LA, LB: LB, LC: LC, LI: LI, LK: LK, LR: LR, LS: LS, LT: LT, LU: LU, LV: LV, LY: LY, MA: MA, MC: MC, MD: MD, ME: ME, MG: MG, MH: MH, MK: MK, ML: ML, MM: MM, MN: MN, MO: MO, MP: MP, MQ: MQ, MR: MR, MS: MS, MT: MT, MU: MU, MV: MV, MW: MW, MX: MX, MY: MY, MZ: MZ, NA: NA, NE: NE, NF: NF, NG: NG, NI: NI, NL: NL, NO: NO, NP: NP, NR: NR, NU: NU, NZ: NZ, OM: OM, PA: PA, PE: PE, PF: PF, PG: PG, PH: PH, PK: PK, PL: PL, PN: PN, PR: PR, PS: PS, PT: PT, PW: PW, PY: PY, QA: QA, RO: RO, RS: RS, RU: RU, RW: RW, SA: SA, SB: SB, SC: SC, SE: SE, SG: SG, SI: SI, SK: SK, SL: SL, SM: SM, SN: SN, SO: SO, SR: SR, SS: SS, ST: ST, SV: SV, SX: SX, SY: SY, SZ: SZ, TC: TC, TD: TD, TG: TG, TH: TH, TJ: TJ, TK: TK, TL: TL, TM: TM, TN: TN, TO: TO, TR: TR, TT: TT, TV: TV, TW: TW, TZ: TZ, UA: UA, UG: UG, US: US, UY: UY, UZ: UZ, VC: VC, VE: VE, VG: VG, VI: VI, VN: VN, VU: VU, WS: WS, YE: YE, ZA: ZA, ZM: ZM, ZW: ZW, alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, brush: Brush, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, checkCircle: CheckCircle, check: Check, chevronUp: ChevronUp, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, cube: Cube, decentBrand: DecentBrand, decent: Decent, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, earth: Earth, eyeOff: EyeOff, eye: Eye, facebookBrand: FacebookBrand, facebook: Facebook, figmaBrand: FigmaBrand, figma: Figma, file: File, githubBrand: GithubBrand, github: Github, googleBrand: GoogleBrand, google: Google, helpCircle: HelpCircle, heroEmail: HeroEmail, heroLock: HeroLock, heroPasskey: HeroPasskey, heroPhone: HeroPhone, heroWallet: HeroWallet, home: Home, image: Image$1, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, lightning01: Lightning01, lightning: Lightning, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, menu: Menu, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, rampNetworkBrand: RampNetworkBrand, rampNetwork: RampNetwork, redditBrand: RedditBrand, reddit: Reddit, refresh: Refresh, settings: Settings, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, stars: Stars, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, x: X, youtubeBrand: YoutubeBrand, youtube: Youtube, };
 
 const cpslDropdownCss = ":host{display:block;position:relative;font-family:Arial, sans-serif;--input-color:var(--cpsl-color-text-primary);--container-background-color:var(--cpsl-color-input-surface-default);--container-border-color:var(--cpsl-color-input-border-active);--scrollbar-color:var(--cpsl-color-text-subtle);--divider-color:var(--cpsl-color-divider);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:var(--cpsl-font-size-body-m);--button-hover-color:var(--cpsl-color-tile-button-surface-hover);font-family:var(--cpsl-font-family, inherit)}.input-container{position:relative;width:100%}::slotted(cpsl-dropdown){position:absolute;width:100%;top:100%;left:0;z-index:2}.dropdown-button{display:flex;width:100%;padding:0 4px;background:none;border:none;align-items:center;justify-content:space-between;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--input-color)}.dropdown-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.dropdown-button div{margin-left:8px;display:flex;align-items:center}.dropdown-options{display:none;position:fixed;list-style:none;padding:0;margin-top:4px;border:1px solid var(--container-border-color);border-radius:8px;z-index:999999999999;overflow-y:auto;max-height:300px;box-sizing:border-box;background-color:var(--container-background-color);}.dropdown-options.open{display:block}.dropdown-options li{padding:8px;cursor:pointer;display:flex;align-items:center;border-bottom:1px solid var(--cpsl-color-divider);color:var(--input-color);background:var(--container-background-color);font-size:var(--input-font-size)}.dropdown-options li:hover{background-color:var(--button-hover-color)}.dropdown-options li svg{width:24px;height:24px;margin-right:8px;padding:0 8px;vertical-align:middle;}.dropdown-options::-webkit-scrollbar{width:8px;height:8px;background-color:transparent;}.dropdown-options::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color);border-radius:10px;border:2px solid transparent;background-clip:content-box;height:8px}.dropdown-options::-webkit-scrollbar-track{background:transparent;}.dropdown-value{margin-left:8px;color:var(--cpsl-color-text-secondary)}.dropdown-button .chevron{transition:transform 0.3s ease}.dropdown-button .chevron.closed{transform:rotate(180deg)}.search-bar{padding:0;border-bottom:1px solid var(--cpsl-color-divider);position:sticky;top:0;background:var(--container-background-color);z-index:1;}.search-bar input{width:100%;padding:8px;border:none;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background-color:var(--container-background-color);border-radius:0;}.search-bar input::placeholder{color:var(--input-placeholder-color)}.search-bar input:focus{outline:none;border-color:transparent;}";
 const CpslDropdownStyle0 = cpslDropdownCss;
@@ -4906,7 +5121,7 @@ const CpslDropdown = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'b09375bb984f79e458832b5a95a0936ae59d9397', style: { width: this.width } }, h("button", { key: 'b8d01f1afa93e2981cb28a6de227581a2513b1d1', 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}`, h("div", { key: '51b57ee33ac92e945f4ce8111dc70063a60b15f3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '7335ad8d095f9af981d62a4c89463a3e2dd48ebd', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { class: "search-bar" }, h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
+        return (h(Host, { key: 'a997453b8690196f125bcf96fd94d728e645cd9e' }, h("button", { key: '0be8f5b0b6fcb3a27a5885205c0f585a68dc1bb9', 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}`, h("div", { key: 'f324edfdd97304de361a0ccd2bec793af25d3aa3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'e1a3a097abb0633bd33caefabce016e2308f1ac0', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '517c74f9f94df623206d8969a32d894b854f95a4', class: "search-bar" }, h("input", { key: '28ed686f30069ecb92dd0ee1852a9b9f94a98264', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -4916,6 +5131,138 @@ const CpslDropdown = class {
 };
 CpslDropdown.style = CpslDropdownStyle0;
 
+const cpslFileUploadCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-file-border-placeholder);--container-border-color:var(--cpsl-color-file-border-placeholder);--container-border-color-error:var(--cpsl-color-file-border-error);--container-background-color:var(--cpsl-color-file-surface-default);--container-background-color-disabled:var(--cpsl-color-file-surface-disabled);--container-background-color-drag:var(--cpsl-color-file-surface-drag);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-file);--container-padding-top:12px;--container-padding-bottom:12px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--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;--sample-img-height:40px;--sample-img-width:40px;--sample-img-border-radius:8px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}.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);display:flex;align-items:center;box-sizing:border-box;flex-wrap:wrap;width:100%;gap:var(--container-gap);cursor:pointer;position:relative;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)}.container.drag,.container:active{background:var(--container-background-color-drag)}.container.drag-error{cursor:no-drop}.container.error{border-color:var(--container-border-color-error)}input{position:absolute;width:100%;height:100%;top:0;left:0;margin:0px;opacity:0;cursor:pointer}.sample-img{height:var(--sample-img-height);width:var(--sample-img-width);border-radius:var(--sample-img-border-radius);object-fit:contain}.sample-image-name-container{display:flex;gap:4px;align-items:center}.sample-image-name-container cpsl-icon{z-index:10000;--height:16px;--width:16px}.inline-text{display:inline-block}.sample-image-name{display:inline-block;color:var(--cpsl-color-text-tertiary)}.label-container{flex:1}.file-container{display:flex;flex-direction:column;flex:1;gap:8px;justify-content:center;align-items:center}.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)}";
+const CpslFileUploadStyle0 = cpslFileUploadCss;
+
+var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const CpslFileUpload = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslOnDrop = createEvent(this, "cpslOnDrop", 7);
+        this.cpslOnDragEnter = createEvent(this, "cpslOnDragEnter", 7);
+        this.cpslOnDragLeave = createEvent(this, "cpslOnDragLeave", 7);
+        this.cpslFileChange = createEvent(this, "cpslFileChange", 7);
+        this.cpslFileRemoved = createEvent(this, "cpslFileRemoved", 7);
+        this.inputId = `cpsl-file-upload-${inputIds$2++}`;
+        this.handleDrop = (ev) => __awaiter$1(this, void 0, void 0, function* () {
+            var _a;
+            ev.preventDefault();
+            const item = (_a = Array.from(ev.dataTransfer.items)) === null || _a === void 0 ? void 0 : _a[0];
+            if (item && this.isValidFile(item.type)) {
+                const file = item.getAsFile();
+                yield this.addFile(file);
+            }
+            this.dragOver = false;
+            this.dragError = false;
+            this.cpslOnDrop.emit(ev);
+        });
+        this.handleDragEnter = (ev) => {
+            var _a;
+            ev.preventDefault();
+            this.dragOver = true;
+            const item = (_a = Array.from(ev.dataTransfer.items)) === null || _a === void 0 ? void 0 : _a[0];
+            if (item && this.isValidFile(item.type)) {
+                this.dragError = true;
+            }
+            this.cpslOnDragEnter.emit(ev);
+        };
+        this.handleDragLeave = (ev) => {
+            ev.preventDefault();
+            this.dragOver = false;
+            this.dragError = false;
+            this.cpslOnDragLeave.emit(ev);
+        };
+        this.handleInputChange = (ev) => __awaiter$1(this, void 0, void 0, function* () {
+            ev.preventDefault();
+            const input = this.inputEl;
+            if (Boolean(input.files.length)) {
+                const file = input.files[0];
+                if (this.isValidFile(file.type)) {
+                    yield this.addFile(file);
+                }
+            }
+        });
+        this.isValidFile = (type) => {
+            var _a;
+            if (Boolean((_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.length) ? !this.fileTypes.includes(type) : false) {
+                return false;
+            }
+            return true;
+        };
+        this.addFile = (file) => __awaiter$1(this, void 0, void 0, function* () {
+            this.file = file;
+            this.cpslFileChange.emit(file);
+            this.uploadError = false;
+            this.isUploading = true;
+            const uploadSuccess = Boolean(this.uploadFile) ? yield this.uploadFile(file) : true;
+            if (!uploadSuccess) {
+                this.uploadError = true;
+                const input = this.inputEl;
+                input.value = '';
+            }
+            this.isUploading = false;
+        });
+        this.removeFile = (e) => {
+            e.preventDefault();
+            this.file = undefined;
+            const input = this.inputEl;
+            input.value = '';
+            this.cpslFileRemoved.emit();
+        };
+        this.file = undefined;
+        this.dragOver = undefined;
+        this.dragError = undefined;
+        this.isUploading = undefined;
+        this.uploadError = undefined;
+        this.errorText = undefined;
+        this.externalFilename = undefined;
+        this.externalSrc = undefined;
+        this.fileTypes = undefined;
+        this.helperText = undefined;
+        this.label = undefined;
+        this.required = false;
+        this.showOptionalLabel = false;
+        this.uploadFile = undefined;
+    }
+    get inputEl() {
+        return this.el.shadowRoot.getElementById(this.inputId);
+    }
+    get FileContent() {
+        var _a;
+        const hasFile = Boolean(this.file) || Boolean(this.externalSrc);
+        const isUploading = this.isUploading;
+        const error = this.uploadError;
+        const text = !hasFile ? (h(Fragment, null, 'Drag file here or ', h("cpsl-text", { class: "inline-text", variant: "bodyXS" }, "upload file"))) : isUploading ? (`${this.file.name} is uploading`) : error ? ('Upload Failed') : (((_a = this.file) === null || _a === void 0 ? void 0 : _a.name) || this.externalFilename || '');
+        const TopElement = !hasFile ? (h("cpsl-icon", { icon: "image" })) : isUploading ? (h("cpsl-spinner", null)) : error ? (h("cpsl-icon", { icon: "close" })) : (h("img", { class: "sample-img", src: Boolean(this.file) ? URL.createObjectURL(this.file) : this.externalSrc, alt: "Sample Image" }));
+        return (h(Fragment, null, TopElement, h("span", { class: "sample-image-name-container" }, h("cpsl-text", { class: "sample-image-name", variant: "bodyXS" }, text), hasFile && !error && !isUploading && h("cpsl-icon", { icon: "close", onClick: this.removeFile }))));
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: '762561d4a888f40c6ef7914d44d3b5d29952c6eb' }, this.label && (h("label", { key: 'ca7847701395b4334d14e34cf065f943bec0d1af', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '370ca2d812f44f13b20383f303ca7d6daefdfd84', name: "label" }), h("div", { key: 'bece00a4a0a32bb37c4573775cbbe5c89ae3030e', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '32220f003406b15f94c68337ab321b6b07151be0', class: { 'label-container': true } }, h("slot", { key: '88a46b859592b1dbbea964d871ef36d77760da78', name: "left-content" })), h("div", { key: 'd4cbd5c095c8ba522c51a451d749d20c0fd7a5ab', class: { 'file-container': true } }, this.FileContent), h("input", { key: '3798b69f5670e18e9fa4dc34ae7ca661cd6f9294', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { key: '9217cfba0fabd2d8cad86ba34fd69f15cf0186a0', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '0e6f9be6e2042f72b0438cc5d979b21eb9f47356' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
+    }
+    get el() { return getElement(this); }
+};
+let inputIds$2 = 0;
+CpslFileUpload.style = CpslFileUploadStyle0;
+
 const cpslIconCss = ":host{display:block;--height:24px;--width:24px;--icon-color:var(--cpsl-color-text-primary);--icon-fill-color:var(--cpsl-color-text-primary);--icon-stroke-color:var(--cpsl-color-text-primary);width:var(--width);height:var(--height)}:host div{display:flex;width:var(--width);height:var(--height);color:var(--icon-color)}:host svg{width:var(--width);height:var(--height)}: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(--width);height:var(--height);object-fit:contain}";
 const CpslIconStyle0 = cpslIconCss;
 
@@ -4926,12 +5273,12 @@ const CpslIcon = class {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '89f3081baf013558e965cc6682811d66dc2b188d', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: 'fe58523210b92237924bd768007f3a191b401a57', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
 };
 CpslIcon.style = CpslIconStyle0;
 
-const cpslInputCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-alpha-black-16);--container-border-color:var(--cpsl-color-input-border-active);--container-border-error-color:var(--cpsl-color-input-border-error);--container-background-color:var(--cpsl-color-input-surface-default);--container-background-color-disabled:var(--cpsl-color-input-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-input);--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-end:4px;--container-padding-start:8px;--container-height:46px;--container-gap:8px;--input-background-color:var(--cpsl-color-input-surface-default);--input-background-color-disabled:var(--cpsl-color-input-surface-disabled);--input-color:var(--cpsl-color-text-primary);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:var(--cpsl-font-size-body-m);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:5px;--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:8px;display:block;font-family:var(--cpsl-font-family, inherit)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--input-background-color:var(--input-background-color-disabled);--input-color:var(--cpsl-color-text-secondary)}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-input-border-placeholder);--input-color:var(--cpsl-color-text-secondary);--container-background-color:transparent;--input-background-color:transparent}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-input-border-active);--container-background-color:var(--cpsl-color-input-surface-default)}.input-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);display:flex;align-items:center;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background-color:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.native-input{flex:1;min-width:0;border:none;height:100%;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background-color:var(--input-background-color);font-family:var(--cpsl-font-family, inherit)}.native-input:focus,.native-input:focus-visible{outline:none}.native-input::placeholder{color:var(--input-placeholder-color);opacity:1;}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.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)}:host ::slotted([slot=start]){flex:0}:host ::slotted([slot=end]){flex:0}:host ::slotted(cpsl-icon){--icon-color:var(--input-color)}:host ::slotted(cpsl-button){width:calc(var(--container-height) - var(--container-padding-top) - var(--container-padding-bottom) - var(--container-border-width) * 2);--button-border-radius:calc(var(--container-border-radius) - 2px)}";
+const cpslInputCss = ":host{--container-box-shadow:none;--container-box-shadow-color:none;--container-border-color:var(--cpsl-color-input-border-active);--container-border-error-color:var(--cpsl-color-input-border-error);--container-background-color:var(--cpsl-color-input-surface-default);--container-background-color-disabled:var(--cpsl-color-input-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-input);--container-padding-top:0px;--container-padding-bottom:0px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--input-background-color:var(--cpsl-color-input-surface-default);--input-background-color-disabled:var(--cpsl-color-input-surface-disabled);--input-color:var(--cpsl-color-text-primary);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:var(--cpsl-font-size-body-m);--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;--button-padding:4px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-input-border-placeholder);--input-color:var(--cpsl-color-text-secondary)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--input-background-color:var(--input-background-color-disabled);--input-color:var(--cpsl-color-text-disabled);--container-border-color:transparent}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-input-border-active);--container-background-color:var(--cpsl-color-input-surface-default)}.input-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);display:flex;align-items:center;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);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)}.native-input{flex:1;min-width:0;border:none;height:100%;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background:var(--input-background-color);font-family:var(--cpsl-font-family, inherit)}.native-input:focus,.native-input:focus-visible{outline:none}.native-input::placeholder{color:var(--input-placeholder-color);opacity:1;}.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)}:host ::slotted([slot=start]){flex:0 0 auto}:host ::slotted([slot=end]){flex:0 0 auto}:host ::slotted(cpsl-icon){--icon-color:var(--input-color)}:host ::slotted(cpsl-button){width:calc(var(--container-height) - var(--button-padding) * 2);height:calc(var(--container-height) - var(--button-padding) * 2);--button-border-radius:calc(var(--container-border-radius) - 2px)}:host slot[name=end]::slotted(cpsl-button){margin-right:calc((var(--container-padding-end) - var(--button-padding)) * -1)}:host slot[name=start]::slotted(cpsl-button){margin-left:calc((var(--container-padding-end) - var(--button-padding)) * -1)}";
 const CpslInputStyle0 = cpslInputCss;
 
 const CpslInput = class {
@@ -4942,7 +5289,7 @@ const CpslInput = class {
         this.cpslBlur = createEvent(this, "cpslBlur", 7);
         this.cpslFocus = createEvent(this, "cpslFocus", 7);
         this.cpslPaste = createEvent(this, "cpslPaste", 7);
-        this.inputId = `cpsl-input-${inputIds++}`;
+        this.inputId = `cpsl-input-${inputIds$1++}`;
         this.onInput = (ev) => {
             const input = ev.target;
             if (Boolean(input)) {
@@ -5003,6 +5350,7 @@ const CpslInput = class {
         this.placeholder = undefined;
         this.readonly = false;
         this.required = false;
+        this.showOptionalLabel = false;
         this.spellcheck = false;
         this.startIconSrc = undefined;
         this.startIcon = undefined;
@@ -5019,6 +5367,7 @@ const CpslInput = class {
         }
     }
     componentDidLoad() {
+        this.initButtons();
         if (Boolean(this.value)) {
             this.enableSlots();
         }
@@ -5029,19 +5378,32 @@ const CpslInput = class {
     disableSlots() {
         var _a, _b;
         if (!this.noAutoDisable) {
-            (_a = this.el.querySelector('[slot="end"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'true');
-            (_b = this.el.querySelector('[slot="start"]')) === null || _b === void 0 ? void 0 : _b.setAttribute('disabled', 'true');
+            (_a = this.endEl) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'true');
+            (_b = this.startEl) === null || _b === void 0 ? void 0 : _b.setAttribute('disabled', 'true');
         }
     }
     enableSlots() {
         var _a, _b;
-        (_a = this.el.querySelector('[slot="end"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'false');
-        (_b = this.el.querySelector('[slot="start"]')) === null || _b === void 0 ? void 0 : _b.setAttribute('disabled', 'false');
+        (_a = this.endEl) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'false');
+        (_b = this.startEl) === null || _b === void 0 ? void 0 : _b.setAttribute('disabled', 'false');
+    }
+    initButtons() {
+        var _a, _b;
+        if (((_a = this.endEl) === null || _a === void 0 ? void 0 : _a.tagName) === 'CPSL-BUTTON') {
+            this.endEl.setAttribute('full-width', 'true');
+            this.endEl.addEventListener('mousedown', e => {
+                e.preventDefault();
+            });
+        }
+        if (((_b = this.startEl) === null || _b === void 0 ? void 0 : _b.tagName) === 'CPSL-BUTTON') {
+            this.startEl.setAttribute('full-width', 'true');
+            this.startEl.addEventListener('mousedown', e => {
+                e.preventDefault();
+            });
+        }
     }
     emitInputChange(event) {
-        const { value } = this;
-        const newValue = value == null ? value : value.toString();
-        this.cpslInput.emit({ value: newValue, event });
+        this.cpslInput.emit({ value: this.nativeInput.value, event });
     }
     emitValueChange(event) {
         const { value } = this;
@@ -5049,19 +5411,22 @@ const CpslInput = class {
         this.focusedValue = newValue;
         this.cpslChange.emit({ value: newValue, event });
     }
-    get nativeInput() {
-        return this.el.shadowRoot.getElementById(this.inputId);
+    get startEl() {
+        return this.el.querySelector('[slot="start"]');
+    }
+    get endEl() {
+        return this.el.querySelector('[slot="end"]');
     }
     render() {
         var _a;
-        return (h(Host, { key: 'd056945f2cfe5bff44af5987d2a9591fb1a3cd4c', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label)), h("div", { key: '4599fe40c9ebbaf3c0e21c1cc365325163a1054d', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: '5404baae8ccc419431f88379e1266fd69ca41670', name: "start" }), h("input", { key: '9cab32fee2375ac5e65f41140674275b1c18c039', class: "native-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, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: '75ab014ee4e8b87375b67dfda539b59833168b46', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (h(Host, { key: '9e8eece493074613305b6303e9c095b89ee08eb0', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { key: '97ee8423a02cd2547b764609751fbd301e21ccc9', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '933c4863226a6de14910cfe14b5e48015e6a04fd', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'a69f5c53c2fabc038aca226fb4a3965c1516fe53', name: "start" }), h("input", { key: 'f4a7e5234fe5d6b32e14bc226791d5aea9df151d', class: "native-input", 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, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: '6c74cecde29d9f1f9bf00a05e53197324f83f2bf', name: "end" })), (this.errorText || this.helperText) && (h("div", { key: '245c0413133d70b909415f10cdbfbd21ed03da61', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'a96f3e844d74ba481418e375ccaeab85cfb92836' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "disabled": ["handleDisable"]
     }; }
 };
-let inputIds = 0;
+let inputIds$1 = 0;
 CpslInput.style = CpslInputStyle0;
 
 function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
@@ -14210,7 +14575,7 @@ Draggable.zIndex = 1000;
 Draggable.version = "3.12.5";
 _getGSAP() && gsap.registerPlugin(Draggable);
 
-const cpslModalCss = ":host{--container-width:360px;--container-gap:16px;--container-border-radius:var(--cpsl-border-radius-modal);--container-border-width:1px;--container-border-color:var(--cpsl-color-modal-border);--container-background-color:var(--cpsl-color-modal-surface-footer);--container-padding-bottom:16px;--container-box-shadow:0px 2px 4px 0px var(--cpsl-color-alpha-black-8);--inner-container-background-color:var(--cpsl-color-modal-surface-main);--inner-container-border-radius:var(--cpsl-border-radius-modal);--inner-container-box-shadow:0px 1px 2px 0px var(--cpsl-color-alpha-black-8);--inner-container-padding-top:16px;--inner-container-padding-end:16px;--inner-container-padding-bottom:24px;--inner-container-padding-start:16px;--inner-container-margin-bottom:16px;display:inline-block}@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}}.modal-header{position:sticky;top:0;padding-top:var(--inner-container-padding-top);background-color:var(--inner-container-background-color)}.modal-wrapper{z-index:9999999999998;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;-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);width:var(--container-width);display:flex;flex-direction:column;border:var(--container-border-width) solid var(--container-border-color);border-radius:var(--container-border-radius);box-shadow:var(--container-box-shadow);background-color:var(--container-background-color);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-inner-container{-webkit-padding-start:var(--inner-container-padding-start);padding-inline-start:var(--inner-container-padding-start);-webkit-padding-end:var(--inner-container-padding-end);padding-inline-end:var(--inner-container-padding-end);padding-top:0;padding-bottom:var(--inner-container-padding-bottom);margin-bottom:var(--inner-container-margin-bottom);border-radius:var(--inner-container-border-radius);box-shadow:var(--inner-container-box-shadow);background-color:var(--inner-container-background-color)}.expanded{height:0px;overflow:hidden;display:none}.modal-inner-container.no-footer{margin-bottom:0px;box-shadow:none}.modal-container.no-footer{padding-bottom:0px}.no-opacity{opacity:0}";
+const cpslModalCss = ":host{--container-width:360px;--container-gap:16px;--container-border-radius:var(--cpsl-border-radius-modal);--container-border-width:1px;--container-border-color:var(--cpsl-color-modal-border);--container-background-color:var(--cpsl-color-modal-surface-footer);--container-padding-bottom:16px;--container-box-shadow:0px 8px 16px 0px rgba(0, 0, 0, 0.12);--inner-container-background-color:var(--cpsl-color-modal-surface-main);--inner-container-border-radius:var(--cpsl-border-radius-modal);--inner-container-box-shadow:0px 1px 2px 0px var(--cpsl-color-alpha-black-8);--inner-container-padding-top:16px;--inner-container-padding-end:16px;--inner-container-padding-bottom:24px;--inner-container-padding-start:16px;--inner-container-margin-bottom:16px;display:block;z-index:10005;position:relative}:host cpsl-overlay{z-index:10005}@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(.no-overlay){z-index:0}.modal-header{position:sticky;top:0;padding-top:var(--inner-container-padding-top);background:var(--inner-container-background-color)}.modal-wrapper{z-index:10005;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;-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);width:var(--container-width);display:flex;flex-direction:column;border:var(--container-border-width) solid var(--container-border-color);border-radius:var(--container-border-radius);box-shadow:var(--container-box-shadow);background:var(--container-background-color);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-inner-container{-webkit-padding-start:var(--inner-container-padding-start);padding-inline-start:var(--inner-container-padding-start);-webkit-padding-end:var(--inner-container-padding-end);padding-inline-end:var(--inner-container-padding-end);padding-top:0;padding-bottom:var(--inner-container-padding-bottom);margin-bottom:var(--inner-container-margin-bottom);border-radius:var(--inner-container-border-radius);box-shadow:var(--inner-container-box-shadow);background:var(--inner-container-background-color)}.expanded{height:0px;overflow:hidden;display:none}.modal-inner-container.no-footer{margin-bottom:0px;box-shadow:none}.modal-container.no-footer{padding-bottom:0px}.no-opacity{opacity:0}";
 const CpslModalStyle0 = cpslModalCss;
 
 gsapWithCSS.registerPlugin(Draggable);
@@ -14233,6 +14598,7 @@ const CpslModal = class {
         this.footerTransitionDuration = 0.15;
         this.noOverlay = undefined;
         this.open = undefined;
+        this.zIndexOverride = undefined;
     }
     toggleHeight() {
         this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
@@ -14254,6 +14620,7 @@ const CpslModal = class {
             this.initDraggable();
             gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
         });
+        this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;
         this.footerSlotEl.addEventListener('slotchange', () => {
             if (this.footerSlotEl.assignedNodes().length >= 1) {
                 this.hasFooter = true;
@@ -14426,9 +14793,9 @@ const CpslModal = class {
     }
     render() {
         if (this.noOverlay) {
-            return h(Host, null, this.Modal);
+            return (h(Host, { style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}, class: "no-overlay" }, this.Modal));
         }
-        return (h(Host, { class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
+        return (h(Host, { style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}, class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { zIndexOverride: Boolean(this.zIndexOverride) ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14438,15 +14805,62 @@ const CpslModal = class {
 };
 CpslModal.style = CpslModalStyle0;
 
-const cpslOverlayCss = ":host{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999999999999;opacity:0%;display:none;background-color:var(--cpsl-color-alpha-black-50)}";
+const cpslNavButtonGroupCss = ":host{display:flex;flex-direction:column;gap:8px;padding:0px 16px;box-sizing:border-box;width:100%}:host ::slotted(cpsl-button){--button-padding-start:8px;--button-padding-end:8px;--button-padding-top:8px;--button-padding-bottom:8px;--button-justify-content:start;--button-primary-color:var(--cpsl-color-background-48);--button-primary-background-color:var(--cpsl-color-background-0);--button-primary-border-color:var(--cpsl-color-background-0);--button-primary-icon-color:var(--cpsl-color-background-48);--button-primary-disabled-color:var(--cpsl-color-background-48);--button-primary-disabled-background-color:var(--cpsl-color-background-0);--button-primary-disabled-border-color:var(--cpsl-color-background-0);--button-primary-disabled-icon-color:var(--cpsl-color-background-48);--button-primary-hover-color:var(--cpsl-color-background-48);--button-primary-hover-background-color:var(--cpsl-color-background-4);--button-primary-hover-border-color:var(--cpsl-color-background-4);--button-primary-hover-icon-color:var(--cpsl-color-background-48);--button-primary-active-color:var(--cpsl-color-background-48);--button-primary-active-background-color:var(--cpsl-color-background-4);--button-primary-active-border-color:var(--cpsl-color-background-4);--button-primary-active-icon-color:var(--cpsl-color-background-48)}:host ::slotted(cpsl-button.selected){--button-primary-color:var(--cpsl-color-text-primary);--button-primary-background-color:var(--cpsl-color-background-4);--button-primary-border-color:var(--cpsl-color-background-4);--button-primary-icon-color:var(--cpsl-color-text-primary);--button-primary-disabled-color:var(--cpsl-color-text-primary);--button-primary-disabled-background-color:var(--cpsl-color-background-4);--button-primary-disabled-border-color:var(--cpsl-color-background-4);--button-primary-disabled-icon-color:var(--cpsl-color-text-primary);--button-primary-hover-color:var(--cpsl-color-text-primary);--button-primary-hover-background-color:var(--cpsl-color-background-4);--button-primary-hover-border-color:var(--cpsl-color-background-4);--button-primary-hover-icon-color:var(--cpsl-color-text-primary);--button-primary-active-color:var(--cpsl-color-text-primary);--button-primary-active-background-color:var(--cpsl-color-background-4);--button-primary-active-border-color:var(--cpsl-color-background-4);--button-primary-active-icon-color:var(--cpsl-color-text-primary)}";
+const CpslNavButtonGroupStyle0 = cpslNavButtonGroupCss;
+
+const CpslNavButtonGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectedId = undefined;
+    }
+    selectItem() {
+        this.buttonSlots.forEach(item => {
+            if (item.id === this.selectedId) {
+                item.classList.add('selected');
+            }
+            else {
+                item.classList.remove('selected');
+            }
+        });
+    }
+    componentWillRender() {
+        var _a;
+        this.buttonSlots.forEach(item => {
+            item.setAttribute('variant', 'primary');
+            item.setAttribute('full-width', 'true');
+            this.selectItem();
+        });
+        if (Boolean((_a = this.otherSlots) === null || _a === void 0 ? void 0 : _a.length)) {
+            console.error('cpsl-button is the only valid child of cpsl-nav-button-group');
+            this.otherSlots.forEach(item => item.remove());
+        }
+    }
+    get buttonSlots() {
+        return this.el.querySelectorAll('cpsl-button');
+    }
+    get otherSlots() {
+        return this.el.querySelectorAll('&> *:not(cpsl-button)');
+    }
+    render() {
+        return (h(Host, { key: 'e677688e630bcbfa89cd8cff36fd84a4bdc1a627' }, h("slot", { key: 'd0c04a917b6818e7b40cdae32fe19e158da2f38d' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selectedId": ["selectItem"]
+    }; }
+};
+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 CpslOverlayStyle0 = cpslOverlayCss;
 
 const CpslOverlay = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.open = undefined;
         this.enterTransitionDuration = 0.5;
         this.exitTransitionDuration = 0.5;
+        this.open = undefined;
+        this.zIndexOverride = undefined;
     }
     toggleHeight() {
         this.open
@@ -14468,7 +14882,7 @@ const CpslOverlay = class {
         }
     }
     render() {
-        return (h(Host, { key: 'fb52455d1a68056a20f95e7572dd4afcb1827c41' }, h("slot", { key: '70c5a7f0ecda8560c92ea6f907ad60650f1cdcf2' })));
+        return (h(Host, { key: 'f0a39fa80559007fa5312ca2d88dbbb8d6a65adf', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: '4ff06458ac6e33f80c252afe9215d7e084a1f8d8' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14477,7 +14891,92 @@ const CpslOverlay = class {
 };
 CpslOverlay.style = CpslOverlayStyle0;
 
-const cpslPillCss = ":host{--pill-text-color:var(--cpsl-pill-text);--pill-text-size:clamp(10px, 0.625rem, 15px);--pill-text-line-height:100%;--pill-container-height:18px;--pill-container-background-color:var(--cpsl-color-pill-container-background);--pill-container-border-color:var(--cpsl-color-pill-container-border);--pill-container-padding-start:8px;--pill-container-padding-end:8px;--pill-container-border-radius:var(--cpsl-border-radius-pill);font-family:var(--cpsl-font-family, inherit);display:inline-block}.pill-container{-webkit-padding-start:var(--pill-container-padding-start);padding-inline-start:var(--pill-container-padding-start);-webkit-padding-end:var(--pill-container-padding-end);padding-inline-end:var(--pill-container-padding-end);padding-top:var(--pill-container-padding-top);padding-bottom:var(--pill-container-padding-bottom);display:flex;justify-content:center;align-items:center;box-sizing:border-box;height:var(--pill-container-height);background-color:var(--pill-container-background-color);border:1px solid;border-color:var(--pill-container-border-color);border-radius:var(--pill-container-border-radius);color:var(--pill-text-color);font-size:var(--pill-text-size);line-height:var(--pill-text-line-height)}.pill-container span{display:inline-block}";
+const cpslPaginationCss = ":host{display:block}.icon{--height:20px;--width:20px}.start-icon{transform:rotate(180deg)}";
+const CpslPaginationStyle0 = cpslPaginationCss;
+
+const CpslPagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslPaginationChanged = createEvent(this, "cpslPaginationChanged", 7);
+        this.handlePrevClick = () => {
+            if (this.currentPage > 0) {
+                this.currentPage--;
+            }
+        };
+        this.handleNextClick = () => {
+            if (this.currentPage < this.totalPages - 1) {
+                this.currentPage++;
+            }
+        };
+        this.handlePageClick = (value) => () => {
+            if (value >= 0 && value <= this.totalPages - 1) {
+                this.currentPage = value;
+            }
+        };
+        this.currentPage = 0;
+        this.initialPage = undefined;
+        this.totalPages = undefined;
+        this.visiblePages = 5;
+    }
+    watchChange() {
+        this.cpslPaginationChanged.emit(this.currentPage);
+    }
+    componentWillLoad() {
+        var _a;
+        this.currentPage = (_a = this.initialPage) !== null && _a !== void 0 ? _a : 0;
+        if (this.visiblePages < 5) {
+            this.visiblePages = 5;
+        }
+    }
+    render() {
+        const filteredPages = this.totalPages <= this.visiblePages ? [...Array(this.totalPages).keys()] : [];
+        if (this.totalPages > this.visiblePages) {
+            filteredPages.push(0);
+            const isFirstSelected = this.currentPage === 0;
+            const isLastSelected = this.currentPage === this.totalPages - 1;
+            const isFirstOrLastSelected = isFirstSelected || isLastSelected;
+            let remainingVisible = this.visiblePages - (isFirstOrLastSelected ? 2 : 3);
+            const halfRemaining = Math.round(remainingVisible / 2);
+            const numberBefore = Math.max(this.currentPage - 1, 0);
+            const numberAfter = Math.max(this.totalPages - 2 - this.currentPage, 0);
+            let beforeHalf = halfRemaining;
+            let afterHalf = remainingVisible - halfRemaining;
+            if (numberBefore >= beforeHalf) {
+                if (numberAfter < afterHalf) {
+                    beforeHalf += afterHalf - numberAfter;
+                    afterHalf = numberAfter;
+                }
+            }
+            else {
+                afterHalf += beforeHalf - numberBefore;
+                beforeHalf = numberBefore;
+            }
+            while (beforeHalf > 0) {
+                filteredPages.push(this.currentPage - beforeHalf);
+                beforeHalf--;
+            }
+            if (!isFirstSelected) {
+                filteredPages.push(this.currentPage);
+            }
+            const pagesAfter = [];
+            while (afterHalf > 0) {
+                pagesAfter.push(this.currentPage + afterHalf);
+                afterHalf--;
+            }
+            filteredPages.push(...pagesAfter.reverse());
+            if (!isLastSelected) {
+                filteredPages.push(this.totalPages - 1);
+            }
+        }
+        return (h(Host, { key: 'a606e9d711b7e5d3154126e0a9b9f87c192a9e1e' }, h("cpsl-button-group", { key: '7ac1f34cb86fa73897bb58044d9f4c2a76e4b06c', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '8e6ec83618d2b44610155e25ec2c54e079810aec', onClick: this.handlePrevClick }, h("cpsl-icon", { key: '98f6960d6d1803d391e30f5b4bea63205a2b12c8', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '6d60771c0040ce028d2fe43c779f58a31a248bf8', onClick: this.handleNextClick }, h("cpsl-icon", { key: '770e0133a563622daa7683d65d289ec5247ec265', class: "icon", icon: "arrowNarrow" })))));
+    }
+    static get watchers() { return {
+        "currentPage": ["watchChange"]
+    }; }
+};
+CpslPagination.style = CpslPaginationStyle0;
+
+const cpslPillCss = ":host{--pill-text-color:var(--cpsl-pill-text);--pill-text-size:clamp(10px, 0.625rem, 15px);--pill-text-line-height:100%;--pill-container-height:18px;--pill-container-background-color:var(--cpsl-color-pill-container-background);--pill-container-border-color:var(--cpsl-color-pill-container-border);--pill-container-padding-start:8px;--pill-container-padding-end:8px;--pill-container-border-radius:var(--cpsl-border-radius-pill);font-family:var(--cpsl-font-family, inherit);display:inline-block}.pill-container{-webkit-padding-start:var(--pill-container-padding-start);padding-inline-start:var(--pill-container-padding-start);-webkit-padding-end:var(--pill-container-padding-end);padding-inline-end:var(--pill-container-padding-end);padding-top:var(--pill-container-padding-top);padding-bottom:var(--pill-container-padding-bottom);display:flex;justify-content:center;align-items:center;box-sizing:border-box;height:var(--pill-container-height);background:var(--pill-container-background-color);border:1px solid;border-color:var(--pill-container-border-color);border-radius:var(--pill-container-border-radius);color:var(--pill-text-color);font-size:var(--pill-text-size);line-height:var(--pill-text-line-height)}.pill-container span{display:inline-block}";
 const CpslPillStyle0 = cpslPillCss;
 
 const CpslPill = class {
@@ -14486,12 +14985,238 @@ const CpslPill = class {
         this.text = undefined;
     }
     render() {
-        return (h(Host, { key: '061ac64aeb0f301d51f62ff889b6a817b0e5abba' }, h("div", { key: 'b6d260c1431d5540c07e976e8fc6d6680dcdda43', class: "pill-container" }, h("span", { key: '22d35f5d971c5ce45995e70af3eb9ef0446fdad1' }, this.text))));
+        return (h(Host, { key: '788ab049c90438152e472230dbdfb6c5204d1694' }, h("div", { key: 'c8da2bc450f16a9dab6bb25af747cc047908ef2e', class: "pill-container" }, h("span", { key: '71013ebcc7c8253a3370ca3abe6f1094b101e602' }, this.text))));
     }
 };
 CpslPill.style = CpslPillStyle0;
 
-const cpslProgressIndicatorCss = ":host{--step-height:3px;--step-active-color:var(--cpsl-color-progressIndicator-active);--step-next-color:var(--cpsl-color-progressIndicator-next);--step-previous-color:var(--cpsl-color-progressIndicator-previous);display:flex;align-items:center;justify-content:center;gap:4px}.step{background-color:var(--step-next-color);border-radius:var(--step-border-radius, calc(var(--step-height) * 2));height:var(--step-height);flex:1;transition:all 0.5s}.previous{background-color:var(--step-previous-color)}.active{background-color:var(--step-active-color);flex:2}";
+const cpslPopoverCss = ":host{position:fixed;display:block;z-index:-1;overflow:auto}:host(.open){z-index:10006}.container{visibility:hidden}.open{visibility:visible;z-index:10006}:host(.transform-h-left){transform:translateX(0)}:host(.transform-h-center){transform:translateX(-50%)}:host(.transform-h-right){transform:translateX(-100%)}:host(.transform-v-top){transform:translateY(0)}:host(.transform-v-center){transform:translateY(-50%)}:host(.transform-v-bottom){transform:translateY(-100%)}";
+const CpslPopoverStyle0 = cpslPopoverCss;
+
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const CpslPopover = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslOpen = createEvent(this, "cpslOpen", 7);
+        this.cpslClose = createEvent(this, "cpslClose", 7);
+        this.triggerClicked = false;
+        this.configureTriggerInteraction = () => {
+            const { trigger, triggerAction, destroyTriggerInteraction } = this;
+            if (Boolean(destroyTriggerInteraction)) {
+                destroyTriggerInteraction();
+            }
+            if (trigger === undefined) {
+                return;
+            }
+            this.triggerEl = document.getElementById(trigger);
+            if (!Boolean(this.triggerEl)) {
+                console.error(`A trigger element with the ID "${trigger}" was not found in the DOM.`, this.el);
+                return;
+            }
+            let triggerCallbacks = [];
+            switch (triggerAction) {
+                case 'hover':
+                    triggerCallbacks = [
+                        {
+                            eventName: 'mouseenter',
+                            callback: () => __awaiter(this, void 0, void 0, function* () {
+                                this.present();
+                            }),
+                        },
+                        {
+                            eventName: 'mouseleave',
+                            callback: () => {
+                                if (!this.containerEl.matches(':hover')) {
+                                    this.close();
+                                }
+                                else {
+                                    this.containerEl.addEventListener('mouseleave', () => {
+                                        this.close();
+                                    });
+                                }
+                            },
+                        },
+                        {
+                            eventName: 'click',
+                            callback: (ev) => ev.stopPropagation(),
+                        },
+                    ];
+                    break;
+                case 'click':
+                default:
+                    triggerCallbacks = [
+                        {
+                            eventName: 'mousedown',
+                            callback: e => {
+                                if (this.preventBlur) {
+                                    e.preventDefault();
+                                }
+                                this.present();
+                            },
+                        },
+                    ];
+                    break;
+            }
+            triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));
+            this.destroyTriggerInteraction = () => {
+                triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));
+            };
+        };
+        this.setPosition = () => {
+            if (Boolean(this.triggerEl)) {
+                const windowWidth = window.innerWidth;
+                const windowHeight = window.innerHeight;
+                const elWidth = this.el.clientWidth;
+                const elHeight = this.el.clientHeight;
+                const { top, left, height, width } = this.triggerEl.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;
+                    }
+                }
+                switch (this.anchorOriginVertical) {
+                    case 'top': {
+                        this.positionY = top;
+                        break;
+                    }
+                    case 'center': {
+                        this.positionY = top + height / 2;
+                        break;
+                    }
+                    case 'bottom': {
+                        this.positionY = top + height;
+                        break;
+                    }
+                }
+                if (this.positionY < this.windowPadding) {
+                    this.positionY = this.windowPadding;
+                }
+                if (this.positionY + elHeight > windowHeight - 16) {
+                    this.positionY = windowHeight - this.windowPadding - elHeight;
+                }
+                if (this.positionX < this.windowPadding) {
+                    this.positionX = this.windowPadding;
+                }
+                if (this.positionX + elWidth > windowWidth - 16) {
+                    this.positionX = windowWidth - this.windowPadding - elWidth;
+                }
+            }
+        };
+        this.handleClickOutside = (event) => {
+            if (!this.triggerClicked && this.triggerEl.contains(event.target)) {
+                this.triggerClicked = true;
+                return;
+            }
+            if (this.open && !this.el.contains(event.target)) {
+                event.preventDefault();
+                this.close();
+            }
+        };
+        this.present = () => {
+            if (!this.open) {
+                this.open = true;
+                this.cpslOpen.emit();
+                this.setPosition();
+            }
+        };
+        this.close = () => {
+            this.open = false;
+            this.triggerClicked = false;
+            this.cpslClose.emit();
+        };
+        this.open = false;
+        this.positionX = undefined;
+        this.positionY = undefined;
+        this.anchorOriginHorizontal = 'left';
+        this.anchorOriginVertical = 'bottom';
+        this.autoWidth = true;
+        this.preventBlur = undefined;
+        this.transformOriginHorizontal = 'left';
+        this.transformOriginVertical = 'top';
+        this.triggerAction = 'click';
+        this.trigger = undefined;
+        this.windowPadding = 16;
+    }
+    closePopover() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.close();
+        });
+    }
+    onTriggerChange() {
+        this.configureTriggerInteraction();
+    }
+    onAnchorChange() {
+        this.setPosition();
+    }
+    onOpenChange() {
+        if (this.open) {
+            window.addEventListener('click', this.handleClickOutside);
+            window.addEventListener('scroll', () => this.setPosition());
+        }
+        else {
+            window.removeEventListener('click', this.handleClickOutside);
+            window.addEventListener('scroll', () => this.setPosition());
+        }
+    }
+    componentDidLoad() {
+        this.configureTriggerInteraction();
+    }
+    get containerEl() {
+        var _a, _b;
+        return (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('container');
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '2c1f03932520d63cc98ddd3496125bf08104e1ba', class: {
+                'open': this.open,
+                'transform-h-left': this.transformOriginHorizontal === 'left',
+                'transform-h-center': this.transformOriginHorizontal === 'center',
+                'transform-h-right': this.transformOriginHorizontal === 'right',
+                'transform-v-top': this.transformOriginVertical === 'top',
+                'transform-v-center': this.transformOriginVertical === 'center',
+                'transform-v-bottom': this.transformOriginVertical === 'bottom',
+            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '97a28f240533a7a1d4e1200769086e13666a94e4', id: "container", class: { container: true, open: this.open } }, h("slot", { key: 'efacb33d8dae9abef32fdc9a7b1047384cc0cd38' }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "trigger": ["onTriggerChange"],
+        "triggerAction": ["onTriggerChange"],
+        "preventBlur": ["onTriggerChange"],
+        "anchorOriginHorizontal": ["onAnchorChange"],
+        "anchorOriginVertical": ["onAnchorChange"],
+        "open": ["onOpenChange"]
+    }; }
+};
+CpslPopover.style = CpslPopoverStyle0;
+
+const cpslProgressIndicatorCss = ":host{--step-height:3px;--step-active-color:var(--cpsl-color-progressIndicator-active);--step-next-color:var(--cpsl-color-progressIndicator-next);--step-previous-color:var(--cpsl-color-progressIndicator-previous);display:flex;align-items:center;justify-content:center;gap:4px}.step{background:var(--step-next-color);border-radius:var(--step-border-radius, calc(var(--step-height) * 2));height:var(--step-height);flex:1;transition:all 0.5s}.previous{background:var(--step-previous-color)}.active{background:var(--step-active-color);flex:2}";
 const CpslProgressIndicatorStyle0 = cpslProgressIndicatorCss;
 
 const CpslProgressIndicator = class {
@@ -14525,7 +15250,7 @@ var qrCodeStyling = {exports: {}};
 
 const QRCodeStyling = /*@__PURE__*/getDefaultExportFromCjs(qrCodeStyling.exports);
 
-const cpslQrCodeCss = ":host{--qr-color:var(--cpsl-color-qr-fill);--qr-background-color:var(--cpsl-color-qr-background);--qr-border-color:var(--cpsl-color-qr-border);--qr-border-radius:var(--cpsl-border-radius-qr-code);--qr-border-width:1px;--qr-box-shadow:0px 1px 2px var(--cpsl-color-alpha-black-10);display:inline-block}.qr-container{-webkit-padding-start:var(--qr-padding-start);padding-inline-start:var(--qr-padding-start);-webkit-padding-end:var(--qr-padding-end);padding-inline-end:var(--qr-padding-end);padding-top:var(--qr-padding-top);padding-bottom:var(--qr-padding-bottom);display:flex;color:var(--qr-color);border-style:solid;border-width:var(--qr-border-width);border-color:var(--qr-border-color);border-radius:var(--qr-border-radius);background-color:var(--qr-background-color);box-shadow:var(--qr-box-shadow)}";
+const cpslQrCodeCss = ":host{--qr-color:var(--cpsl-color-qr-fill);--qr-background-color:var(--cpsl-color-qr-background);--qr-border-color:var(--cpsl-color-qr-border);--qr-border-radius:var(--cpsl-border-radius-qr-code);--qr-border-width:1px;--qr-box-shadow:0px 1px 2px var(--cpsl-color-alpha-black-10);display:inline-block}.qr-container{-webkit-padding-start:var(--qr-padding-start);padding-inline-start:var(--qr-padding-start);-webkit-padding-end:var(--qr-padding-end);padding-inline-end:var(--qr-padding-end);padding-top:var(--qr-padding-top);padding-bottom:var(--qr-padding-bottom);display:flex;color:var(--qr-color);border-style:solid;border-width:var(--qr-border-width);border-color:var(--qr-border-color);border-radius:var(--qr-border-radius);background:var(--qr-background-color);box-shadow:var(--qr-box-shadow)}";
 const CpslQrCodeStyle0 = cpslQrCodeCss;
 
 const CpslQrCode = class {
@@ -14561,13 +15286,138 @@ const CpslQrCode = class {
         qrCode.append(container);
     }
     render() {
-        return (h(Host, { key: '8aa4d75e098ba25375d26e9e84e150cc70106ffa' }, h("div", { key: '02b8d5f1192ecce74476b76f5a6e8602589e2b58', id: "qr-container", class: "qr-container" })));
+        return (h(Host, { key: '68a11eb026f62f795a769b4bb5b91509bda57c55' }, h("div", { key: 'da47238221fed966d47e50471af27d0eaa407e2a', id: "qr-container", class: "qr-container" })));
     }
     get el() { return getElement(this); }
 };
 CpslQrCode.style = CpslQrCodeStyle0;
 
-const cpslSlideButtonCss = ":host{--slider-container-font-size:14px;--slider-container-height:44px;--slider-container-border-width:1px;--slider-container-box-shadow:0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;--slider-container-start-background-color:var(--cpsl-color-slideButton-slider-container-start-background);--slider-container-end-background-color:var(--cpsl-color-slideButton-slider-container-end-background);--slider-container-start-border-color:var(--cpsl-color-slideButton-slider-container-start-border);--slider-container-end-border-color:var(--cpsl-color-slideButton-slider-container-end-border);--slider-border-width:1px;--slider-box-shadow:3px 0px 4px 0px var(--cpsl-color-alpha-black-16);--slider-border-color:var(--cpsl-color-slideButton-slider-border);--slider-background-color:var(--cpsl-color-slideButton-slider-background);--slider-color:var(--cpsl-color-slideButton-slider-text);--start-text-color:var(--cpsl-color-slideButton-start-text);--end-text-color:var(--cpsl-color-slideButton-end-text);font-family:var(--cpsl-font-family, inherit);display:block}.slider-container{overflow:hidden;position:relative;box-sizing:border-box;display:flex;align-items:center;font-size:var(--slider-container-font-size);font-weight:500;height:var(--slider-container-height);border-width:var(--slider-container-border-width);border-style:solid;border-radius:calc(var(--slider-container-height) / 2);box-shadow:var(--slider-container-box-shadow)}.slider-container-background{position:absolute;top:0;bottom:0;left:0;right:0}.start-slider-container-background{background-color:var(--slider-container-start-background-color);border-color:var(--slider-container-start-border-color);opacity:100%}.end-slider-container-background{background-color:var(--slider-container-end-background-color);border-color:var(--slider-container-end-border-color);opacity:0%}.start-text{user-select:none;color:var(--start-text-color);position:absolute;text-align:center;opacity:100%;width:calc(100% - var(--slider-container-height) - 8px - 16px);left:calc(var(--slider-container-height) - 4px + 8px)}.start-text.disabled{left:0;width:100%}.end-text{user-select:none;color:var(--end-text-color);position:absolute;text-align:center;opacity:0%;width:calc(100% - var(--slider-container-height) - 8px);left:16px}.icon{position:absolute}.start-icon{opacity:100%}.end-icon{opacity:0%}.slider{left:1px;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:absolute;z-index:10;height:calc(var(--slider-container-height) - 4px);width:calc(var(--slider-container-height) - 4px);color:var(--slider-color);background-color:var(--slider-background-color);border-width:var(--slider-border-width);border-style:solid;border-color:var(--slider-border-color);border-radius:100%;box-shadow:var(--slider-box-shadow)}.slider cpsl-icon{--icon-color:var(--slider-color)}.slider.disabled{visibility:hidden}";
+const cpslRadioCss = ":host{--container-height:20px;--container-width:20px;--container-border-radius:var(--cpsl-border-radius-radio);--container-border-width-default:2px;--container-border-width-checked:5px;--container-background-color-default:var(--cpsl-color-radio-surface-default);--container-border-color-default:var(--cpsl-color-radio-border-default);--container-background-color-checked:var(--cpsl-color-radio-surface-checked);--container-border-color-checked:var(--cpsl-color-radio-border-checked);display:block;position:relative;height:var(--container-height);width:var(--container-width);cursor:pointer}input{position:absolute;width:100%;height:100%;margin:0px;opacity:0}span.container{display:inline-block;position:relative;box-sizing:border-box;width:100%;height:100%;border-radius:var(--container-border-radius);border:var(--container-border-width-default) solid;background:var(--container-background-color-default);border-color:var(--container-border-color-default);transition:all 0.15s ease-in-out}span.container.checked{background:var(--container-background-color-checked);border-color:var(--container-border-color-checked);border-width:var(--container-border-width-checked)}";
+const CpslRadioStyle0 = cpslRadioCss;
+
+const CpslRadio = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslRadioChanged = createEvent(this, "cpslRadioChanged", 7);
+        this.handleRadioClick = () => {
+            if (!this.checked) {
+                this.cpslRadioChanged.emit(!this.checked);
+            }
+        };
+        this.checked = undefined;
+    }
+    render() {
+        return (h(Host, { key: '43659e8ba43bfe8a53578d357d2ab9a3c3bcbd96' }, h("input", { key: 'dc9c9328be5a09b00b4e02b74934ffa02312441d', type: "radio", checked: this.checked }), h("span", { key: '87436a09ace01394e860786950a916efb26a9bb7', 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;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;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);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}.chevron{transition:transform 0.3s ease;transform:rotate(180deg);--icon-color:var(--cpsl-color-text-disabled)}.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:var(--cpsl-color-text-primary)}.selected-text.placeholder{color:var(--cpsl-color-text-disabled)}.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;scrollbar-width:thin}";
+const CpslSelectStyle0 = cpslSelectCss;
+
+const CpslSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslBlur = createEvent(this, "cpslBlur", 7);
+        this.cpslFocus = createEvent(this, "cpslFocus", 7);
+        this.cpslSelectValueChange = createEvent(this, "cpslSelectValueChange", 7);
+        this.inputId = `cpsl-select-${inputIds++}`;
+        this.onBlur = (ev) => {
+            this.hasFocus = false;
+            this.cpslBlur.emit(ev);
+        };
+        this.onFocus = (ev) => {
+            this.hasFocus = true;
+            this.cpslFocus.emit(ev);
+        };
+        this.handleEnterPress = (ev) => {
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+                this.el.dispatchEvent(new MouseEvent('mousedown'));
+            }
+        };
+        this.selectItem = () => {
+            const items = Array.from(this.el.querySelectorAll('cpsl-select-item'));
+            items.forEach(item => {
+                if (item.value === this.selectedValue) {
+                    item.setAttribute('selected', 'true');
+                    this.hasSelectedItem = true;
+                }
+                else {
+                    item.setAttribute('selected', 'false');
+                }
+            });
+            if (!Boolean(this.selectedValue)) {
+                this.hasSelectedItem = false;
+            }
+        };
+        this.hasFocus = false;
+        this.popoverOpen = false;
+        this.hasSelectedItem = false;
+        this.disabled = false;
+        this.dropdownMaxHeight = undefined;
+        this.errorText = undefined;
+        this.formatValue = undefined;
+        this.helperText = undefined;
+        this.id = `${this.inputId}-trigger`;
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.required = false;
+        this.selectedValue = undefined;
+        this.showFormattedSelectedItem = undefined;
+        this.showOptionalLabel = false;
+    }
+    onValueChange() {
+        this.popoverEl.closePopover();
+    }
+    handleValueChange() {
+        this.selectItem();
+    }
+    selectItemClickHandler(event) {
+        this.cpslSelectValueChange.emit(event.detail);
+    }
+    onPopoverOpen() {
+        this.popoverOpen = true;
+    }
+    onPopoverClose() {
+        this.popoverOpen = false;
+    }
+    componentDidLoad() {
+        this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
+        this.selectItem();
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h(Host, { key: '7ad387377c9e3a14fd9e9ed39627d65df33a255a', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: 'a04cdb05dac058b57301b4052ca8e49992319048', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '04baa7155a989015a3a57318d653eaad6fb8e0e9', class: { 'select-container': true, 'error-container': Boolean(this.errorText) } }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: '447dcce739659ff4139197ffaf7d5d9f0775de89', name: "selected-item" }), h("div", { key: '46cbfcc9afee9132e7d254bdd064296970f28f47', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'fc77344729bcef824db7f32325293bf031c1fb74', class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(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 : this.selectedValue))), h("cpsl-icon", { key: '44d40d1b80105809f446ed169467a8c583b8afd5', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: 'cbeb30eb519dd7db84da6f5e5366ea924ec6c715', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress })), (this.errorText || this.helperText) && (h("div", { key: '9f3475b40c6ab3872af65d8aecc4e653add2ba2d', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '04dcc76a6c5b93969b16ac2b400fe86c96189a9b' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: '7909618009a8080bc570b761e6800779eb482a61', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus }, h("div", { key: '1fe3de1d21302f76669dd8f6730373d47de0fb27', class: "dropdown" }, h("div", { key: 'c888c8bc3da0a85b31b37dc44bfc826c6ac635f8', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '69cd9e6df64d26a5ec68912bf52042cb8eebda1f', name: "items" }))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selectedValue": ["onValueChange", "handleValueChange"]
+    }; }
+};
+let inputIds = 0;
+CpslSelect.style = CpslSelectStyle0;
+
+const cpslSelectItemCss = ":host{--container-background-color:var(--cpsl-color-select-surface-default);--container-hover-background-color:var(--cpsl-color-select-surface-hover);--container-border-color:var(--cpsl-color-select-dropdown-border);--container-border-width:1px;--container-padding-start:16px;--container-padding-end:16px;--container-padding-top:16px;--container-padding-bottom:16px;display:block;font-family:var(--cpsl-font-family, inherit);cursor:pointer}.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-style:solid;border-width:0px;border-bottom-width:var(--container-border-width);border-color:var(--container-border-color);height:100%;display:flex;align-items:center}.container:hover{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 {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslSelectItemClick = createEvent(this, "cpslSelectItemClick", 7);
+        this.handleItemClick = () => {
+            this.cpslSelectItemClick.emit(this.value);
+        };
+        this.selected = undefined;
+        this.value = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'd85478b3b2eaa5c99ba1f3dbc0e3aae6d368540c' }, h("div", { key: '6066108863ef8440f79732e94a7849c06fe8cd5b', class: { container: true, selected: this.selected }, onClick: this.handleItemClick }, h("slot", { key: '857ce8891d6ae250e48e4af417e596b2a99fedb7' }))));
+    }
+};
+CpslSelectItem.style = CpslSelectItemStyle0;
+
+const cpslSlideButtonCss = ":host{--slider-container-font-size:14px;--slider-container-height:44px;--slider-container-border-width:1px;--slider-container-box-shadow:0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;--slider-container-start-background-color:var(--cpsl-color-slideButton-slider-container-start-background);--slider-container-end-background-color:var(--cpsl-color-slideButton-slider-container-end-background);--slider-container-start-border-color:var(--cpsl-color-slideButton-slider-container-start-border);--slider-container-end-border-color:var(--cpsl-color-slideButton-slider-container-end-border);--slider-border-width:1px;--slider-box-shadow:3px 0px 4px 0px var(--cpsl-color-alpha-black-16);--slider-border-color:var(--cpsl-color-slideButton-slider-border);--slider-background-color:var(--cpsl-color-slideButton-slider-background);--slider-color:var(--cpsl-color-slideButton-slider-text);--start-text-color:var(--cpsl-color-slideButton-start-text);--end-text-color:var(--cpsl-color-slideButton-end-text);font-family:var(--cpsl-font-family, inherit);display:block}.slider-container{overflow:hidden;position:relative;box-sizing:border-box;display:flex;align-items:center;font-size:var(--slider-container-font-size);font-weight:500;height:var(--slider-container-height);border-width:var(--slider-container-border-width);border-style:solid;border-radius:calc(var(--slider-container-height) / 2);box-shadow:var(--slider-container-box-shadow)}.slider-container-background{position:absolute;top:0;bottom:0;left:0;right:0}.start-slider-container-background{background:var(--slider-container-start-background-color);border-color:var(--slider-container-start-border-color);opacity:100%}.end-slider-container-background{background:var(--slider-container-end-background-color);border-color:var(--slider-container-end-border-color);opacity:0%}.start-text{user-select:none;color:var(--start-text-color);position:absolute;text-align:center;opacity:100%;width:calc(100% - var(--slider-container-height) - 8px - 16px);left:calc(var(--slider-container-height) - 4px + 8px)}.start-text.disabled{left:0;width:100%}.end-text{user-select:none;color:var(--end-text-color);position:absolute;text-align:center;opacity:0%;width:calc(100% - var(--slider-container-height) - 8px);left:16px}.icon{position:absolute}.start-icon{opacity:100%}.end-icon{opacity:0%}.slider{left:1px;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:absolute;z-index:10;height:calc(var(--slider-container-height) - 4px);width:calc(var(--slider-container-height) - 4px);color:var(--slider-color);background:var(--slider-background-color);border-width:var(--slider-border-width);border-style:solid;border-color:var(--slider-border-color);border-radius:100%;box-shadow:var(--slider-box-shadow)}.slider cpsl-icon{--icon-color:var(--slider-color)}.slider.disabled{visibility:hidden}";
 const CpslSlideButtonStyle0 = cpslSlideButtonCss;
 
 const CpslSlideButton = class {
@@ -14687,7 +15537,7 @@ const CpslSlideButton = class {
         return this.el.shadowRoot.getElementById('end-icon');
     }
     render() {
-        return (h(Host, { key: 'ce018bff4b8a965f6828bac0a16ab0ebbf5000d6' }, h("div", { key: '0620f35a12979b3262eca8b1a25a1af59745761d', id: "slider-container", class: "slider-container" }, h("div", { key: '07c87359d2fff731a4432c802845ace2d361980b', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '4140a0ab0f2f59693a35b9d36c0a0b6fd6152fbe', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '39ca4cbcc83d4a8667f93cbeca1dd6c1637d0db2', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'f0733efde0e3a00b34d0dd08267e2893f3dfc658', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '5f77af9484aad6bc02a8caa89e5c066334f9835b', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'ebf3026838ed70e406704ba85ecd68c0aa04db13', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'd13ea9ea109900c679c049702760b1c8ce08e38a', id: "end-text", class: "end-text" }, this.endText))));
+        return (h(Host, { key: '3596eacfceeab7bff0c45c7993480367d3981d5d' }, h("div", { key: 'c1ea3019d349361d4c60e5754be9c8ff77ade08b', id: "slider-container", class: "slider-container" }, h("div", { key: '49b34608c2315629006d7fc2f56bd8f4658a70e7', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '013654d1ab70af8220908d25d19ac16e31f81441', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: 'f09c57e5150fc41dfece17b8d0d869d8acd2326e', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: '869f90456a9989e468d2b16d4995253615a40cef', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: 'fcc96741040125aa98357e7ab46e13da46a780d2', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '56d9ebc90c1fcdfd0976574a60be0c4af0d8590d', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: '6f8e10b9ed8738b899279be1e599b3fcd38a894d', id: "end-text", class: "end-text" }, this.endText))));
     }
     get el() { return getElement(this); }
 };
@@ -14703,17 +15553,35 @@ const CpslSpinner = class {
         this.speed = 1;
     }
     render() {
-        return (h(Host, { key: 'f52df0bdd08e1de7ffb6cdda5f1791b1524cbbbe', style: {
+        return (h(Host, { key: '79425e262154e53691240dec1033910e693c1eaf', style: {
                 'height': `${this.size}px`,
                 'width': `${this.size}px`,
                 'animation': `spin ${this.speed}s linear infinite`,
                 '-webkit-animation': `spin ${this.speed}s linear infinite`,
                 '-moz-animation': `spin ${this.speed}s linear infinite`,
-            } }, h("svg", { key: '867ba4a123619a10de1700ed9c23a9c154fed67c', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'd4711f92c2dd5d85b01e26e3c3a82f776cd1b72f', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '69cbe92b1cc4f8d1736d4529b78fc5969f127844', cx: "45", cy: "27", r: "5" }))));
+            } }, h("svg", { key: 'b212d3552fcae69b2e5538bc93c3a016444e9326', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: '1801af097635352fb4ca20917a11bd66e5fe5543', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '1f54bfa6fae3ee4ed705e6442c8eba29d857406f', cx: "45", cy: "27", r: "5" }))));
     }
 };
 CpslSpinner.style = CpslSpinnerStyle0;
 
+const cpslSwitchCss = ":host{--container-height:24px;--container-width:44px;--container-padding:2px;--container-border-radius:var(--cpsl-border-radius-switch);--container-background-color-default:var(--cpsl-color-switch-surface-default);--container-background-color-checked:var(--cpsl-color-switch-surface-checked);--thumb-size:calc(var(--container-height) - var(--container-padding) * 2);--thumb-border-radius:var(--cpsl-border-radius-switch);--thumb-background-color-default:var(--cpsl-color-switch-thumb-default);--thumb-background-color-checked:var(--cpsl-color-switch-thumb-checked);display:block;position:relative;height:var(--container-height);width:var(--container-width);cursor:pointer}input{position:absolute;width:100%;height:100%;margin:0px;opacity:0}span.container{display:inline-block;position:relative;box-sizing:border-box;width:100%;height:100%;padding:var(--container-padding);border-radius:var(--container-border-radius);background:var(--container-background-color-default);box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.08) inset;transition:all 0.15s ease-in-out}span.container.checked{background:var(--container-background-color-checked);box-shadow:none}span.thumb{display:inline-block;position:relative;background:var(--thumb-background-color-default);box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.1);height:var(--thumb-size);width:var(--thumb-size);border-radius:var(--thumb-border-radius);transform:translateX(0);left:0;transition:all 0.15s ease-in-out}span.thumb.checked{background:var(--thumb-background-color-checked);left:100%;transform:translateX(-100%)}";
+const CpslSwitchStyle0 = cpslSwitchCss;
+
+const CpslSwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslSwitchChanged = createEvent(this, "cpslSwitchChanged", 7);
+        this.handleSwitchClick = () => {
+            this.cpslSwitchChanged.emit(!this.checked);
+        };
+        this.checked = undefined;
+    }
+    render() {
+        return (h(Host, { key: '522bcdfa156531915323f64b620d9207f9006c5b' }, h("input", { key: '2062a1c2d6b412d92e7da8c509a7e26c48fe7cd9', type: "checkbox", checked: this.checked }), h("span", { key: '58d096cdfd809bdb52294ea70a263a58f99971c7', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, h("span", { key: '15b702eb45d8fe3d61d6f2313cc291cd62fbd3c7', class: { thumb: true, checked: this.checked } }))));
+    }
+};
+CpslSwitch.style = CpslSwitchStyle0;
+
 const cpslTabCss = ":host{--tab-color:var(--cpsl-color-text-primary);padding-top:var(--tab-top-padding);padding-bottom:var(--tab-bottom-padding);padding-left:var(--tab-left-padding);padding-right:var(--tab-right-padding);display:flex;flex:1 1 auto;align-items:center;cursor:pointer;z-index:10}.tab-container{align-items:center;overflow:hidden;width:100%;text-overflow:ellipsis;text-align:center;white-space:nowrap;font-weight:500;color:var(--tab-color)}";
 const CpslTabStyle0 = cpslTabCss;
 
@@ -14741,13 +15609,33 @@ const CpslTab = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ece9ef79afb7bd761b945f8495b5d7a5707eea28', onClick: this.onTabClicked }, h("div", { key: '787d62147f208c37bd7e494499be123317499ed3', class: { 'tab-container': true } }, h("slot", { key: '2834e0f4c14b2940941e0dbe78105835111688cf' }))));
+        return (h(Host, { key: '7421ddd0b946411ae0d4415b02d878affbe0ac94', onClick: this.onTabClicked }, h("div", { key: '94a73eac12e6cb326879f4ff8d7bb9977745201f', class: { 'tab-container': true } }, h("slot", { key: '504138d77b041b165448ed5d8027546087852023' }))));
     }
     get el() { return getElement(this); }
 };
 CpslTab.style = CpslTabStyle0;
 
-const cpslTabsCss = ":host{--tab-top-padding:5px;--tab-bottom-padding:5px;--tab-left-padding:16px;--tab-right-padding:16px;--tabs-border-radius:var(--cpsl-border-radius-tabs);--tabs-font-size:12px;--tabs-line-height:24px;--tabs-border-width:1px;--tabs-border-color:var(--cpsl-color-tabs-border);--tabs-background-color:var(--cpsl-color-tabs-background);--slider-background-color:var(--cpsl-color-tabs-slider-background);display:inline-block;max-width:100%;font-family:var(--cpsl-font-family, inherit)}:host(.full-width){display:block}.tabs-container{position:relative;display:flex;overflow-x:scroll;overflow-y:hidden;border-width:var(--tabs-border-width);border-style:solid;border-color:var(--tabs-border-color);border-radius:var(--tabs-border-radius);background-color:var(--tabs-background-color);font-size:var(--tabs-font-size);line-height:var(--tabs-line-height);-ms-overflow-style:none;scrollbar-width:none}.tabs-container::-webkit-scrollbar{display:none}.slider{position:absolute;top:calc(var(--tabs-border-width) * -1);bottom:calc(var(--tabs-border-width) * -1);left:-1px;border-width:var(--tabs-border-width);border-style:solid;border-color:var(--tabs-border-color);border-radius:var(--tabs-border-radius);background-color:var(--slider-background-color);box-shadow:-1px 0px 2px 0px var(--cpsl-color-alpha-black-10), 1px 0px 2px 0px var(--cpsl-color-alpha-black-10)}.loaded{transition:all 0.5s}";
+const cpslTableCss = ":host{--container-border-radius:var(--cpsl-border-radius-table-container);--container-border-color:var(--cpsl-color-background-16);--container-background-color:var(--cpsl-color-background-0);--container-border-width:1px;--container-header-padding-top:24px;--container-header-padding-bottom:24px;--container-header-padding-start:24px;--container-header-padding-end:24px;--container-header-border-width:1px;--container-header-border-color:var(--cpsl-color-background-16);--container-footer-padding-top:16px;--container-footer-padding-bottom:16px;--container-footer-padding-start:24px;--container-footer-padding-end:24px;--container-footer-border-width:1px;--container-footer-border-color:var(--cpsl-color-background-8);--table-header-padding-top:16px;--table-header-padding-bottom:16px;--table-header-padding-start:24px;--table-header-padding-end:24px;--table-header-background-color:var(--cpsl-color-background-4);--table-header-border-color:var(--cpsl-color-background-16);--table-header-border-width:1px;--table-content-padding-top:16px;--table-content-padding-bottom:16px;--table-content-padding-start:24px;--table-content-padding-end:24px;--table-content-border-color:var(--cpsl-color-background-8);--table-content-border-width:1px;display:block}:host cpsl-card{height:100%;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:var(--container-border-width);--card-border-color:var(--container-border-color);--card-border-radius:var(--container-border-radius);--card-background-color:var(--container-background-color)}:host cpsl-card::part(card-container){height:100%;display:flex;flex-direction:column}.content{flex:1;overflow:auto}.table-wrapper{overflow:auto;height:100%}.container-header{display:none;-webkit-padding-start:var(--container-header-padding-start);padding-inline-start:var(--container-header-padding-start);-webkit-padding-end:var(--container-header-padding-end);padding-inline-end:var(--container-header-padding-end);padding-top:var(--container-header-padding-top);padding-bottom:var(--container-header-padding-bottom);border-bottom:var(--container-header-border-width) solid var(--container-header-border-color)}.container-footer{display:none;-webkit-padding-start:var(--container-footer-padding-start);padding-inline-start:var(--container-footer-padding-start);-webkit-padding-end:var(--container-footer-padding-end);padding-inline-end:var(--container-footer-padding-end);padding-top:var(--container-footer-padding-top);padding-bottom:var(--container-footer-padding-bottom);border-top:var(--container-footer-border-width) solid var(--container-footer-border-color)}.shown{display:block}";
+const CpslTableStyle0 = cpslTableCss;
+
+const CpslTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get containerHeaderEl() {
+        return this.el.querySelector('[slot="header"]');
+    }
+    get containerFooterEl() {
+        return this.el.querySelector('[slot="footer"]');
+    }
+    render() {
+        return (h(Host, { key: '5d1ad9d5503e188e9feda4472604dfb7eb79837d' }, h("cpsl-card", { key: '6521eb6d0a8b991cbaba96785a3653ecbb55a65b', part: "table-container" }, h("div", { key: 'bbf78a4700a8f3a4be12bfc17ec7e9665e7c95e2', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '2c50bdad1e19f0fcd86864b4ed91fe6516e8c036', name: "header" })), h("div", { key: 'e8bd5010262c200e059c98176748cd90cfae800b', class: "content", part: "content" }, h("slot", { key: 'bad1c53fdcb148470e04867c73e0fa3e4e6dd4c3', name: "content" })), h("div", { key: '1ab4ad8e62964a8e474ba55f77777f64c22d82c6', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: 'f9cc7262b33a015e2eb7b8cd29b1b2c4bdb4f7cf', name: "footer" })))));
+    }
+    get el() { return getElement(this); }
+};
+CpslTable.style = CpslTableStyle0;
+
+const cpslTabsCss = ":host{--tab-top-padding:5px;--tab-bottom-padding:5px;--tab-left-padding:16px;--tab-right-padding:16px;--tabs-border-radius:var(--cpsl-border-radius-tabs);--tabs-font-size:12px;--tabs-line-height:24px;--tabs-border-width:1px;--tabs-border-color:var(--cpsl-color-tabs-border);--tabs-background-color:var(--cpsl-color-tabs-background);--slider-background-color:var(--cpsl-color-tabs-slider-background);display:inline-block;max-width:100%;font-family:var(--cpsl-font-family, inherit)}:host(.full-width){display:block}.tabs-container{position:relative;display:flex;overflow-x:scroll;overflow-y:hidden;border-width:var(--tabs-border-width);border-style:solid;border-color:var(--tabs-border-color);border-radius:var(--tabs-border-radius);background:var(--tabs-background-color);font-size:var(--tabs-font-size);line-height:var(--tabs-line-height);-ms-overflow-style:none;scrollbar-width:none}.tabs-container::-webkit-scrollbar{display:none}.slider{position:absolute;top:calc(var(--tabs-border-width) * -1);bottom:calc(var(--tabs-border-width) * -1);left:-1px;border-width:var(--tabs-border-width);border-style:solid;border-color:var(--tabs-border-color);border-radius:var(--tabs-border-radius);background:var(--slider-background-color);box-shadow:-1px 0px 2px 0px var(--cpsl-color-alpha-black-10), 1px 0px 2px 0px var(--cpsl-color-alpha-black-10)}.loaded{transition:all 0.5s}";
 const CpslTabsStyle0 = cpslTabsCss;
 
 const CpslTabs = class {
@@ -14800,7 +15688,7 @@ const CpslTabs = class {
         const tabsPosition = this.el.getBoundingClientRect();
         const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
         const selectedTabRect = this.selectedTabRect;
-        return (h(Host, { key: '47d4b201d34630654f4d11c26972f0ddf9d9f748', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '2a956a61b65fb99445a76211448b0ca2b830baab', class: "tabs-container" }, h("slot", { key: '3ef04f0dacff55ea829b92e22b0f260e1f95bb95' }), h("div", { key: '4cf63ec114998fa41b3367c9c648467044f19d95', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
+        return (h(Host, { key: '04d442550749a14429d03619bbd2978bca9a8411', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '304eb35a1e05c26d81a1102d324b3824d9d0437e', class: "tabs-container" }, h("slot", { key: '813aecefd7a916ee378a9d77efd4e9a2c9232a43' }), h("div", { key: '68b2fd7ea6889ae3c4baa5c87b67e27e21ec5ac1', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14814,7 +15702,7 @@ const getTab = (tabs, tab) => {
 };
 CpslTabs.style = CpslTabsStyle0;
 
-const cpslTextCss = ":host{font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary);padding:0px;margin:0px;display:block}:host p,h1,h2,h3,h4,h5,h6{padding:0px;margin:0px;font-weight:inherit;font-size:inherit;letter-spacing:inherit}:host(.primary){color:var(--cpsl-color-text-primary)}:host(.secondary){color:var(--cpsl-color-text-secondary)}:host(.subtle){color:var(--cpsl-color-text-subtle)}:host(.inverted){color:var(--cpsl-color-text-inverted)}:host(.error){color:var(--cpsl-color-text-error)}:host(.medium){font-weight:500}:host(.semi-bold){font-weight:600}:host(.bold){font-weight:700}:host(.body-2xs){font-size:var(--cpsl-font-size-body-2xs)}:host(.body-xs){font-size:var(--cpsl-font-size-body-xs)}:host(.body-s){font-size:var(--cpsl-font-size-body-s)}:host(.body-m){font-size:var(--cpsl-font-size-body-m)}:host(.body-l){font-size:var(--cpsl-font-size-body-l)}:host(.body-xl){font-size:var(--cpsl-font-size-body-xl)}:host(.heading-xs){font-size:var(--cpsl-font-size-heading-xs)}:host(.heading-s){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-l){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-2xl){font-size:var(--cpsl-font-size-heading-2xl);letter-spacing:-1.44px}";
+const cpslTextCss = ":host{font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary);padding:0px;margin:0px;display:block}:host p,h1,h2,h3,h4,h5,h6{padding:0px;margin:0px;font-weight:inherit;font-size:inherit;letter-spacing:inherit}:host(.primary){color:var(--cpsl-color-text-primary)}:host(.secondary){color:var(--cpsl-color-text-secondary)}:host(.tertiary){color:var(--cpsl-color-text-tertiary)}:host(.subtle){color:var(--cpsl-color-text-subtle)}:host(.inverted){color:var(--cpsl-color-text-inverted)}:host(.error){color:var(--cpsl-color-text-error)}:host(.medium){font-weight:500}:host(.semi-bold){font-weight:600}:host(.bold){font-weight:700}:host(.body-2xs){font-size:var(--cpsl-font-size-body-2xs)}:host(.body-xs){font-size:var(--cpsl-font-size-body-xs)}:host(.body-s){font-size:var(--cpsl-font-size-body-s)}:host(.body-m){font-size:var(--cpsl-font-size-body-m)}:host(.body-l){font-size:var(--cpsl-font-size-body-l)}:host(.body-xl){font-size:var(--cpsl-font-size-body-xl)}:host(.heading-xs){font-size:var(--cpsl-font-size-heading-xs)}:host(.heading-s){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-l){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-2xl){font-size:var(--cpsl-font-size-heading-2xl);letter-spacing:-1.44px}";
 const CpslTextStyle0 = cpslTextCss;
 
 const CpslText = class {
@@ -14850,9 +15738,10 @@ const CpslText = class {
         }
     }
     render() {
-        return (h(Host, { key: '33b70ccfe3929f306d0a9b956ec2a4e16bf751b8', class: {
+        return (h(Host, { key: '2e9bd70bb3fad7f86b881fbc07eaf5af974e92de', class: {
                 'primary': this.color === 'primary',
                 'secondary': this.color === 'secondary',
+                'tertiary': this.color === 'tertiary',
                 'subtle': this.color === 'subtle',
                 'inverted': this.color === 'inverted',
                 'error': this.color === 'error',
@@ -14876,7 +15765,7 @@ const CpslText = class {
 };
 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:4px;--button-box-shadow:0px -4px 4px 0px var(--cpsl-color-alpha-black-2) inset, 0px 4px 4px 0px var(--cpsl-color-alpha-white-4) inset}: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-color: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)}";
+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:4px;--button-box-shadow:0px -4px 4px 0px var(--cpsl-color-alpha-black-2) inset, 0px 4px 4px 0px var(--cpsl-color-alpha-white-4) inset}: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)}";
 const CpslTileButtonStyle0 = cpslTileButtonCss;
 
 const CpslTileButton = class {
@@ -14886,11 +15775,11 @@ const CpslTileButton = class {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '61cbce3574220ee8009ab95c3e37d80535543d1c' }, h("button", { key: '50169b226155e2b06014c415dd522dfc0deb799c', class: "button-native" }, h("cpsl-icon", { key: '9ee77a4d725f4bec258ae753365a1f5aca733ff5', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b01617dbca7322d9cc8f58c30680cd5f3ed0f576' }))));
+        return (h(Host, { key: '54b66964a2d179530ed244d85a3da4edf78415aa' }, h("button", { key: 'a73f89f90361fac70c9365cdd6191a91d26ed70f', class: "button-native" }, h("cpsl-icon", { key: '574fc93949e8b0fb42b71c617dcf972730ae369d', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'db542e72141d187eeb2fe9f8d1524fa70e23276b' }))));
     }
 };
 CpslTileButton.style = CpslTileButtonStyle0;
 
-export { CpslAlert as cpsl_alert, CpslButton as cpsl_button, CpslCodeInput as cpsl_code_input, CpslDivider as cpsl_divider, CpslDropdown as cpsl_dropdown, CpslIcon as cpsl_icon, CpslInput as cpsl_input, CpslModal as cpsl_modal, CpslOverlay as cpsl_overlay, CpslPill as cpsl_pill, CpslProgressIndicator as cpsl_progress_indicator, CpslQrCode as cpsl_qr_code, CpslSlideButton as cpsl_slide_button, CpslSpinner as cpsl_spinner, CpslTab as cpsl_tab, CpslTabs as cpsl_tabs, CpslText as cpsl_text, CpslTileButton as cpsl_tile_button };
+export { CpslAlert as cpsl_alert, CpslAppBar as cpsl_app_bar, CpslAvatar as cpsl_avatar, CpslButton as cpsl_button, CpslButtonGroup as cpsl_button_group, CpslCard as cpsl_card, CpslCheckbox as cpsl_checkbox, CpslCodeInput as cpsl_code_input, CpslDivider as cpsl_divider, CpslDrawer as cpsl_drawer, CpslDropdown as cpsl_dropdown, CpslFileUpload as cpsl_file_upload, CpslIcon as cpsl_icon, CpslInput as cpsl_input, CpslModal as cpsl_modal, CpslNavButtonGroup as cpsl_nav_button_group, CpslOverlay as cpsl_overlay, CpslPagination as cpsl_pagination, CpslPill as cpsl_pill, CpslPopover as cpsl_popover, CpslProgressIndicator as cpsl_progress_indicator, CpslQrCode as cpsl_qr_code, CpslRadio as cpsl_radio, CpslSelect as cpsl_select, CpslSelectItem as cpsl_select_item, CpslSlideButton as cpsl_slide_button, CpslSpinner as cpsl_spinner, CpslSwitch as cpsl_switch, CpslTab as cpsl_tab, CpslTable as cpsl_table, CpslTabs as cpsl_tabs, CpslText as cpsl_text, CpslTileButton as cpsl_tile_button };
 
-//# sourceMappingURL=cpsl-alert_18.entry.js.map
+//# sourceMappingURL=cpsl-alert_33.entry.js.map