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

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

@@ -2,10 +2,345 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-87ba56f9.js');
-const constants = require('./constants-4bb85cc5.js');
+const index = require('./index-5293d431.js');
+const constants = require('./constants-9b1b01bb.js');
 const _commonjsHelpers = require('./_commonjsHelpers-b3309d7b.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) {
+        index.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 (index.h(index.Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, index.h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && index.h("cpsl-icon", { key: 'c037b1d18057d53d05e52be9cfbb81f234ea0f1d', icon: this.iconType }), index.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) {
+        index.registerInstance(this, hostRef);
+        this.height = undefined;
+        this.position = 'fixed';
+        this.zIndexOverride = undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: '4608b0dc424585b7e7f865d55b3d217ebe172f04', style: Object.assign({ height: `${this.height}px` }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})) }, index.h("div", { key: 'c598749bcfb29c806856573b9f61141b7b68022e', class: "container", part: "container", style: {
+                position: this.position,
+                height: `${this.height}px`,
+            } }, index.h("slot", { key: '7e2bd9efbe98ca5ff70dd0bc33333d95799f5fe7' })), this.position === 'fixed' && (index.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) {
+        index.registerInstance(this, hostRef);
+        this.alt = undefined;
+        this.src = undefined;
+        this.variant = 'square';
+    }
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: '04dfd668bc6ab12f758e82ccfd915f06e1de3504' }, index.h("span", { key: '906c7c6e113040b95273c987689e848954e14a1c', class: { round: this.variant === 'round' } }, index.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) {
+        index.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 (index.h(index.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',
+            } }, index.h(this.as, { key: '20b6865c03e312d263c523f681bb775d8626fc9c', href: this.href, target: this.target, part: "button-native", class: "button-native" }, index.h("slot", { key: '4ee8d68b06ce21288e63bfcff9aa186908b89af2', name: "start" }), index.h("slot", { key: '9c0a5f0daa64c75886d03fb830739c8f8cfb65d9' }), index.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) {
+        index.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 (index.h(index.Host, { key: '18830efc419c35995cc7b31a89e2405e230f4978' }, index.h("slot", { key: 'f466f88653fd0fe91b258c03706b13adc78be777' })));
+    }
+    get el() { return index.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) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '21177f5a9ceec0246dc1fa89a052bfdadacc3063' }, index.h("div", { key: '0940e0aaf62b24e1be0e99c736069b5bb463854c', class: { card: true }, part: "card-container" }, index.h("slot", { key: '6317e03f97be9841c03b040845591043bf203e36' }))));
+    }
+};
+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) {
+        index.registerInstance(this, hostRef);
+        this.cpslCheckboxChanged = index.createEvent(this, "cpslCheckboxChanged", 7);
+        this.handleCheckboxClick = () => {
+            this.cpslCheckboxChanged.emit(!this.checked);
+        };
+        this.checked = undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: '236c0b027e72c0c25dbc2fd3183a77400c815f8c' }, index.h("input", { key: '8c350e21268b87d485b16796b2058c4e47f46e75', type: "checkbox", checked: this.checked }), index.h("span", { key: 'b1d8fc6dd380b67eb8940f55bba47810c54ee189', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, index.h("cpsl-icon", { key: '2b3ddcad1e2b9007bda8135a810b75a1a2cfaeca', icon: "check" }))));
+    }
+};
+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) {
+        index.registerInstance(this, hostRef);
+        this.cpslInput = index.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 (index.h(index.Host, { key: 'cee793d35dc39dce79834dd7c73038bf50e41442' }, index.h("div", { key: '1df541a5ae880c512c6c70c3b5f1cf64e1a89b8b', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+            var _a;
+            return (index.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) && (index.h("div", { key: '2001f525a89d0b57287cd97367c6646de0de163a', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { key: 'c274e60e8fd04e18b2ebff6386d1fa46916d2d66', icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), index.h("span", { key: '56566c698720936d4225eea8b07f042e67f570e5' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+    }
+    get el() { return index.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) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd5cffdef9344f7dcac4aae1bc2acca8c02d69946' }, index.h("div", { key: 'e07f8107804df83537a3b8e40d124c66d2fc6f44' }), index.h("slot", { key: 'd97f02d46a63d32d107838b5aa50654a9593cc8a' }), index.h("div", { key: '2316aed010b91a65c961e2f30cc2cde03b892429' })));
+    }
+};
+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) {
+        index.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 (index.h(index.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 && index.h("cpsl-overlay", { key: '744838970ee22c5bb1798702f6060b6d12f29eb9', open: this.open, zIndexOverride: constants.DEFAULT_Z_INDICES.modal + 1 }), index.h("div", { key: 'b3e4d26c18e7d1e5442b941dd67085088d9c33a9', id: "container", class: "container", part: "container" }, index.h("slot", { key: '1951ec776043562fe15409ed4a19799c21f6e36d' }))));
+    }
+    get el() { return index.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"/>
@@ -4015,6 +4350,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" />
@@ -4112,13 +4452,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>
 `;
 
@@ -4127,11 +4472,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"/>
@@ -4150,6 +4493,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>
@@ -4237,28 +4585,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"/>
@@ -4280,6 +4606,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"/>
@@ -4378,6 +4709,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>
@@ -4416,8 +4757,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>
 `;
 
@@ -4450,6 +4796,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"/>
@@ -4530,6 +4881,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>
@@ -4551,6 +4913,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)"/>
@@ -4633,6 +5001,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"/>
@@ -4648,168 +5021,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) {
-        index.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 (index.h(index.Host, { key: '44ed39687dc02639f574f002aeb4449c19cc3246', class: { error: this.type === 'error' } }, index.h("div", { key: '68acc8a8679cd344f450b606ee31888e03b2ef8a', class: "alert-container" }, index.h("div", { key: 'ebb639aef153672c3249d4d6bccaa31b4e933c4d', class: "icon", innerHTML: this.Icon }), index.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) {
-        index.registerInstance(this, hostRef);
-        this.disabled = false;
-        this.variant = 'primary';
-    }
-    render() {
-        return (index.h(index.Host, { key: '258bec70d4cf27d453500c712285e45a1304b925', class: {
-                'primary': this.variant === 'primary',
-                'secondary': this.variant === 'secondary',
-                'icon': this.variant === 'icon',
-                'button-disabled': this.disabled,
-            } }, index.h("button", { key: 'b13438808d69e389bc75d6f06b81a40c7561eea8', class: "button-native" }, index.h("slot", { key: 'e684524f4ff0ceeca466293e1fc8737cf66184e0', name: "start" }), index.h("slot", { key: '66a1c7fa233f85a76a7d0cc2aad74e35ce5cd3f4' }), index.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) {
-        index.registerInstance(this, hostRef);
-        this.cpslInput = index.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 (index.h(index.Host, { key: 'a71927ad671c9bcea55951797bb22fcede118d59' }, index.h("div", { key: '033281ae8250377ee175112f6428f412eaa339f5', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
-            var _a;
-            return (index.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) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
-    }
-    get el() { return index.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) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h(index.Host, { key: '7b35806d55027d32c6f8c0e5cfcaef46f35ebd68' }, index.h("div", { key: '5af8157b329cfd491256537c267adbe3e15c8914' }), index.h("slot", { key: '913734d72f49bc1092f447326710223eb85f901e' }), index.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;
@@ -4910,7 +5125,7 @@ const CpslDropdown = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'b09375bb984f79e458832b5a95a0936ae59d9397', style: { width: this.width } }, index.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}`, index.h("div", { key: '51b57ee33ac92e945f4ce8111dc70063a60b15f3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), index.h("ul", { key: '7335ad8d095f9af981d62a4c89463a3e2dd48ebd', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (index.h("li", { class: "search-bar" }, index.h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => index.h("li", { onClick: this.handleItemSelect(item) }, index.h("span", { innerHTML: Icons[item.icon] }), item.label, " ", index.h("span", { class: "dropdown-value" }, item.value))))));
+        return (index.h(index.Host, { key: 'a997453b8690196f125bcf96fd94d728e645cd9e' }, index.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}`, index.h("div", { key: 'f324edfdd97304de361a0ccd2bec793af25d3aa3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), index.h("ul", { key: 'e1a3a097abb0633bd33caefabce016e2308f1ac0', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (index.h("li", { key: '517c74f9f94df623206d8969a32d894b854f95a4', class: "search-bar" }, index.h("input", { key: '28ed686f30069ecb92dd0ee1852a9b9f94a98264', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (index.h("li", { onClick: this.handleItemSelect(item) }, index.h("span", { innerHTML: Icons[item.icon] }), item.label, " ", index.h("span", { class: "dropdown-value" }, item.value)))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -4920,6 +5135,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) {
+        index.registerInstance(this, hostRef);
+        this.cpslOnDrop = index.createEvent(this, "cpslOnDrop", 7);
+        this.cpslOnDragEnter = index.createEvent(this, "cpslOnDragEnter", 7);
+        this.cpslOnDragLeave = index.createEvent(this, "cpslOnDragLeave", 7);
+        this.cpslFileChange = index.createEvent(this, "cpslFileChange", 7);
+        this.cpslFileRemoved = index.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 ? (index.h(index.Fragment, null, 'Drag file here or ', index.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 ? (index.h("cpsl-icon", { icon: "image" })) : isUploading ? (index.h("cpsl-spinner", null)) : error ? (index.h("cpsl-icon", { icon: "close" })) : (index.h("img", { class: "sample-img", src: Boolean(this.file) ? URL.createObjectURL(this.file) : this.externalSrc, alt: "Sample Image" }));
+        return (index.h(index.Fragment, null, TopElement, index.h("span", { class: "sample-image-name-container" }, index.h("cpsl-text", { class: "sample-image-name", variant: "bodyXS" }, text), hasFile && !error && !isUploading && index.h("cpsl-icon", { icon: "close", onClick: this.removeFile }))));
+    }
+    render() {
+        var _a, _b, _c;
+        return (index.h(index.Host, { key: '762561d4a888f40c6ef7914d44d3b5d29952c6eb' }, this.label && (index.h("label", { key: 'ca7847701395b4334d14e34cf065f943bec0d1af', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("slot", { key: '370ca2d812f44f13b20383f303ca7d6daefdfd84', name: "label" }), index.h("div", { key: 'bece00a4a0a32bb37c4573775cbbe5c89ae3030e', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, index.h("div", { key: '32220f003406b15f94c68337ab321b6b07151be0', class: { 'label-container': true } }, index.h("slot", { key: '88a46b859592b1dbbea964d871ef36d77760da78', name: "left-content" })), index.h("div", { key: 'd4cbd5c095c8ba522c51a451d749d20c0fd7a5ab', class: { 'file-container': true } }, this.FileContent), index.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) && (index.h("div", { key: '9217cfba0fabd2d8cad86ba34fd69f15cf0186a0', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: '0e6f9be6e2042f72b0438cc5d979b21eb9f47356' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
+    }
+    get el() { return index.getElement(this); }
+};
+let inputIds$2 = 0;
+CpslFileUpload.style = CpslFileUploadStyle0;
+
 const cpslIconCss = ":host{display:block;--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;
 
@@ -4930,12 +5277,12 @@ const CpslIcon = class {
         this.icon = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '89f3081baf013558e965cc6682811d66dc2b188d', part: "icon", role: "img" }, !Boolean(this.icon) ? index.h("img", { src: this.src }) : index.h("div", { innerHTML: Icons[this.icon] })));
+        return (index.h(index.Host, { key: 'fe58523210b92237924bd768007f3a191b401a57', part: "icon", role: "img" }, !Boolean(this.icon) ? index.h("img", { src: this.src }) : index.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 {
@@ -4946,7 +5293,7 @@ const CpslInput = class {
         this.cpslBlur = index.createEvent(this, "cpslBlur", 7);
         this.cpslFocus = index.createEvent(this, "cpslFocus", 7);
         this.cpslPaste = index.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)) {
@@ -5007,6 +5354,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;
@@ -5023,6 +5371,7 @@ const CpslInput = class {
         }
     }
     componentDidLoad() {
+        this.initButtons();
         if (Boolean(this.value)) {
             this.enableSlots();
         }
@@ -5033,19 +5382,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;
@@ -5053,19 +5415,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 (index.h(index.Host, { key: 'd056945f2cfe5bff44af5987d2a9591fb1a3cd4c', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label)), index.h("div", { key: '4599fe40c9ebbaf3c0e21c1cc365325163a1054d', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, index.h("slot", { key: '5404baae8ccc419431f88379e1266fd69ca41670', name: "start" }), index.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 }), index.h("slot", { key: '75ab014ee4e8b87375b67dfda539b59833168b46', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (index.h(index.Host, { key: '9e8eece493074613305b6303e9c095b89ee08eb0', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (index.h("label", { key: '97ee8423a02cd2547b764609751fbd301e21ccc9', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: '933c4863226a6de14910cfe14b5e48015e6a04fd', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, index.h("slot", { key: 'a69f5c53c2fabc038aca226fb4a3965c1516fe53', name: "start" }), index.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 }), index.h("slot", { key: '6c74cecde29d9f1f9bf00a05e53197324f83f2bf', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { key: '245c0413133d70b909415f10cdbfbd21ed03da61', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: 'a96f3e844d74ba481418e375ccaeab85cfb92836' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     get el() { return index.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; }
@@ -14214,7 +14579,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);
@@ -14237,6 +14602,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();
@@ -14258,6 +14624,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;
@@ -14430,9 +14797,9 @@ const CpslModal = class {
     }
     render() {
         if (this.noOverlay) {
-            return index.h(index.Host, null, this.Modal);
+            return (index.h(index.Host, { style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}, class: "no-overlay" }, this.Modal));
         }
-        return (index.h(index.Host, { class: { 'include-mobile-styling': true } }, index.h("cpsl-overlay", { id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), index.h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
+        return (index.h(index.Host, { style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}, class: { 'include-mobile-styling': true } }, index.h("cpsl-overlay", { zIndexOverride: Boolean(this.zIndexOverride) ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), index.h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -14442,15 +14809,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) {
+        index.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 (index.h(index.Host, { key: 'e677688e630bcbfa89cd8cff36fd84a4bdc1a627' }, index.h("slot", { key: 'd0c04a917b6818e7b40cdae32fe19e158da2f38d' })));
+    }
+    get el() { return index.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) {
         index.registerInstance(this, hostRef);
-        this.open = undefined;
         this.enterTransitionDuration = 0.5;
         this.exitTransitionDuration = 0.5;
+        this.open = undefined;
+        this.zIndexOverride = undefined;
     }
     toggleHeight() {
         this.open
@@ -14472,7 +14886,7 @@ const CpslOverlay = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'fb52455d1a68056a20f95e7572dd4afcb1827c41' }, index.h("slot", { key: '70c5a7f0ecda8560c92ea6f907ad60650f1cdcf2' })));
+        return (index.h(index.Host, { key: 'f0a39fa80559007fa5312ca2d88dbbb8d6a65adf', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, index.h("slot", { key: '4ff06458ac6e33f80c252afe9215d7e084a1f8d8' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -14481,7 +14895,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) {
+        index.registerInstance(this, hostRef);
+        this.cpslPaginationChanged = index.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 (index.h(index.Host, { key: 'a606e9d711b7e5d3154126e0a9b9f87c192a9e1e' }, index.h("cpsl-button-group", { key: '7ac1f34cb86fa73897bb58044d9f4c2a76e4b06c', selectedId: `${this.currentPage}` }, index.h("cpsl-button", { key: '8e6ec83618d2b44610155e25ec2c54e079810aec', onClick: this.handlePrevClick }, index.h("cpsl-icon", { key: '98f6960d6d1803d391e30f5b4bea63205a2b12c8', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (index.h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, index.h("cpsl-text", { variant: "bodyS" }, page + 1)))), index.h("cpsl-button", { key: '6d60771c0040ce028d2fe43c779f58a31a248bf8', onClick: this.handleNextClick }, index.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 {
@@ -14490,12 +14989,238 @@ const CpslPill = class {
         this.text = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '061ac64aeb0f301d51f62ff889b6a817b0e5abba' }, index.h("div", { key: 'b6d260c1431d5540c07e976e8fc6d6680dcdda43', class: "pill-container" }, index.h("span", { key: '22d35f5d971c5ce45995e70af3eb9ef0446fdad1' }, this.text))));
+        return (index.h(index.Host, { key: '788ab049c90438152e472230dbdfb6c5204d1694' }, index.h("div", { key: 'c8da2bc450f16a9dab6bb25af747cc047908ef2e', class: "pill-container" }, index.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) {
+        index.registerInstance(this, hostRef);
+        this.cpslOpen = index.createEvent(this, "cpslOpen", 7);
+        this.cpslClose = index.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 (index.h(index.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` } }, index.h("div", { key: '97a28f240533a7a1d4e1200769086e13666a94e4', id: "container", class: { container: true, open: this.open } }, index.h("slot", { key: 'efacb33d8dae9abef32fdc9a7b1047384cc0cd38' }))));
+    }
+    get el() { return index.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 {
@@ -14529,7 +15254,7 @@ var qrCodeStyling = {exports: {}};
 
 const QRCodeStyling = /*@__PURE__*/_commonjsHelpers.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 {
@@ -14565,13 +15290,138 @@ const CpslQrCode = class {
         qrCode.append(container);
     }
     render() {
-        return (index.h(index.Host, { key: '8aa4d75e098ba25375d26e9e84e150cc70106ffa' }, index.h("div", { key: '02b8d5f1192ecce74476b76f5a6e8602589e2b58', id: "qr-container", class: "qr-container" })));
+        return (index.h(index.Host, { key: '68a11eb026f62f795a769b4bb5b91509bda57c55' }, index.h("div", { key: 'da47238221fed966d47e50471af27d0eaa407e2a', id: "qr-container", class: "qr-container" })));
     }
     get el() { return index.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) {
+        index.registerInstance(this, hostRef);
+        this.cpslRadioChanged = index.createEvent(this, "cpslRadioChanged", 7);
+        this.handleRadioClick = () => {
+            if (!this.checked) {
+                this.cpslRadioChanged.emit(!this.checked);
+            }
+        };
+        this.checked = undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: '43659e8ba43bfe8a53578d357d2ab9a3c3bcbd96' }, index.h("input", { key: 'dc9c9328be5a09b00b4e02b74934ffa02312441d', type: "radio", checked: this.checked }), index.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) {
+        index.registerInstance(this, hostRef);
+        this.cpslBlur = index.createEvent(this, "cpslBlur", 7);
+        this.cpslFocus = index.createEvent(this, "cpslFocus", 7);
+        this.cpslSelectValueChange = index.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 (index.h(index.Host, { key: '7ad387377c9e3a14fd9e9ed39627d65df33a255a', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (index.h("label", { key: 'a04cdb05dac058b57301b4052ca8e49992319048', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: '04baa7155a989015a3a57318d653eaad6fb8e0e9', class: { 'select-container': true, 'error-container': Boolean(this.errorText) } }, this.hasSelectedItem && this.showFormattedSelectedItem && index.h("slot", { key: '447dcce739659ff4139197ffaf7d5d9f0775de89', name: "selected-item" }), index.h("div", { key: '46cbfcc9afee9132e7d254bdd064296970f28f47', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (index.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))), index.h("cpsl-icon", { key: '44d40d1b80105809f446ed169467a8c583b8afd5', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), index.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) && (index.h("div", { key: '9f3475b40c6ab3872af65d8aecc4e653add2ba2d', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: '04dcc76a6c5b93969b16ac2b400fe86c96189a9b' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), index.h("cpsl-popover", { key: '7909618009a8080bc570b761e6800779eb482a61', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus }, index.h("div", { key: '1fe3de1d21302f76669dd8f6730373d47de0fb27', class: "dropdown" }, index.h("div", { key: 'c888c8bc3da0a85b31b37dc44bfc826c6ac635f8', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, index.h("slot", { key: '69cd9e6df64d26a5ec68912bf52042cb8eebda1f', name: "items" }))))));
+    }
+    get el() { return index.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) {
+        index.registerInstance(this, hostRef);
+        this.cpslSelectItemClick = index.createEvent(this, "cpslSelectItemClick", 7);
+        this.handleItemClick = () => {
+            this.cpslSelectItemClick.emit(this.value);
+        };
+        this.selected = undefined;
+        this.value = undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd85478b3b2eaa5c99ba1f3dbc0e3aae6d368540c' }, index.h("div", { key: '6066108863ef8440f79732e94a7849c06fe8cd5b', class: { container: true, selected: this.selected }, onClick: this.handleItemClick }, index.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 {
@@ -14691,7 +15541,7 @@ const CpslSlideButton = class {
         return this.el.shadowRoot.getElementById('end-icon');
     }
     render() {
-        return (index.h(index.Host, { key: 'ce018bff4b8a965f6828bac0a16ab0ebbf5000d6' }, index.h("div", { key: '0620f35a12979b3262eca8b1a25a1af59745761d', id: "slider-container", class: "slider-container" }, index.h("div", { key: '07c87359d2fff731a4432c802845ace2d361980b', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '4140a0ab0f2f59693a35b9d36c0a0b6fd6152fbe', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '39ca4cbcc83d4a8667f93cbeca1dd6c1637d0db2', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: 'f0733efde0e3a00b34d0dd08267e2893f3dfc658', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: '5f77af9484aad6bc02a8caa89e5c066334f9835b', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: 'ebf3026838ed70e406704ba85ecd68c0aa04db13', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: 'd13ea9ea109900c679c049702760b1c8ce08e38a', id: "end-text", class: "end-text" }, this.endText))));
+        return (index.h(index.Host, { key: '3596eacfceeab7bff0c45c7993480367d3981d5d' }, index.h("div", { key: 'c1ea3019d349361d4c60e5754be9c8ff77ade08b', id: "slider-container", class: "slider-container" }, index.h("div", { key: '49b34608c2315629006d7fc2f56bd8f4658a70e7', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '013654d1ab70af8220908d25d19ac16e31f81441', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: 'f09c57e5150fc41dfece17b8d0d869d8acd2326e', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: '869f90456a9989e468d2b16d4995253615a40cef', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: 'fcc96741040125aa98357e7ab46e13da46a780d2', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: '56d9ebc90c1fcdfd0976574a60be0c4af0d8590d', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: '6f8e10b9ed8738b899279be1e599b3fcd38a894d', id: "end-text", class: "end-text" }, this.endText))));
     }
     get el() { return index.getElement(this); }
 };
@@ -14707,17 +15557,35 @@ const CpslSpinner = class {
         this.speed = 1;
     }
     render() {
-        return (index.h(index.Host, { key: 'f52df0bdd08e1de7ffb6cdda5f1791b1524cbbbe', style: {
+        return (index.h(index.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`,
-            } }, index.h("svg", { key: '867ba4a123619a10de1700ed9c23a9c154fed67c', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, index.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" }), index.h("circle", { key: '69cbe92b1cc4f8d1736d4529b78fc5969f127844', cx: "45", cy: "27", r: "5" }))));
+            } }, index.h("svg", { key: 'b212d3552fcae69b2e5538bc93c3a016444e9326', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, index.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" }), index.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) {
+        index.registerInstance(this, hostRef);
+        this.cpslSwitchChanged = index.createEvent(this, "cpslSwitchChanged", 7);
+        this.handleSwitchClick = () => {
+            this.cpslSwitchChanged.emit(!this.checked);
+        };
+        this.checked = undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: '522bcdfa156531915323f64b620d9207f9006c5b' }, index.h("input", { key: '2062a1c2d6b412d92e7da8c509a7e26c48fe7cd9', type: "checkbox", checked: this.checked }), index.h("span", { key: '58d096cdfd809bdb52294ea70a263a58f99971c7', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, index.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;
 
@@ -14745,13 +15613,33 @@ const CpslTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ece9ef79afb7bd761b945f8495b5d7a5707eea28', onClick: this.onTabClicked }, index.h("div", { key: '787d62147f208c37bd7e494499be123317499ed3', class: { 'tab-container': true } }, index.h("slot", { key: '2834e0f4c14b2940941e0dbe78105835111688cf' }))));
+        return (index.h(index.Host, { key: '7421ddd0b946411ae0d4415b02d878affbe0ac94', onClick: this.onTabClicked }, index.h("div", { key: '94a73eac12e6cb326879f4ff8d7bb9977745201f', class: { 'tab-container': true } }, index.h("slot", { key: '504138d77b041b165448ed5d8027546087852023' }))));
     }
     get el() { return index.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get containerHeaderEl() {
+        return this.el.querySelector('[slot="header"]');
+    }
+    get containerFooterEl() {
+        return this.el.querySelector('[slot="footer"]');
+    }
+    render() {
+        return (index.h(index.Host, { key: '5d1ad9d5503e188e9feda4472604dfb7eb79837d' }, index.h("cpsl-card", { key: '6521eb6d0a8b991cbaba96785a3653ecbb55a65b', part: "table-container" }, index.h("div", { key: 'bbf78a4700a8f3a4be12bfc17ec7e9665e7c95e2', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, index.h("slot", { key: '2c50bdad1e19f0fcd86864b4ed91fe6516e8c036', name: "header" })), index.h("div", { key: 'e8bd5010262c200e059c98176748cd90cfae800b', class: "content", part: "content" }, index.h("slot", { key: 'bad1c53fdcb148470e04867c73e0fa3e4e6dd4c3', name: "content" })), index.h("div", { key: '1ab4ad8e62964a8e474ba55f77777f64c22d82c6', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, index.h("slot", { key: 'f9cc7262b33a015e2eb7b8cd29b1b2c4bdb4f7cf', name: "footer" })))));
+    }
+    get el() { return index.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 {
@@ -14804,7 +15692,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 (index.h(index.Host, { key: '47d4b201d34630654f4d11c26972f0ddf9d9f748', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: '2a956a61b65fb99445a76211448b0ca2b830baab', class: "tabs-container" }, index.h("slot", { key: '3ef04f0dacff55ea829b92e22b0f260e1f95bb95' }), index.h("div", { key: '4cf63ec114998fa41b3367c9c648467044f19d95', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
+        return (index.h(index.Host, { key: '04d442550749a14429d03619bbd2978bca9a8411', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: '304eb35a1e05c26d81a1102d324b3824d9d0437e', class: "tabs-container" }, index.h("slot", { key: '813aecefd7a916ee378a9d77efd4e9a2c9232a43' }), index.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 index.getElement(this); }
     static get watchers() { return {
@@ -14818,7 +15706,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 {
@@ -14854,9 +15742,10 @@ const CpslText = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '33b70ccfe3929f306d0a9b956ec2a4e16bf751b8', class: {
+        return (index.h(index.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',
@@ -14880,7 +15769,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 {
@@ -14890,28 +15779,43 @@ const CpslTileButton = class {
         this.icon = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '61cbce3574220ee8009ab95c3e37d80535543d1c' }, index.h("button", { key: '50169b226155e2b06014c415dd522dfc0deb799c', class: "button-native" }, index.h("cpsl-icon", { key: '9ee77a4d725f4bec258ae753365a1f5aca733ff5', exportparts: "icon", src: this.src, icon: this.icon }), index.h("slot", { key: 'b01617dbca7322d9cc8f58c30680cd5f3ed0f576' }))));
+        return (index.h(index.Host, { key: '54b66964a2d179530ed244d85a3da4edf78415aa' }, index.h("button", { key: 'a73f89f90361fac70c9365cdd6191a91d26ed70f', class: "button-native" }, index.h("cpsl-icon", { key: '574fc93949e8b0fb42b71c617dcf972730ae369d', exportparts: "icon", src: this.src, icon: this.icon }), index.h("slot", { key: 'db542e72141d187eeb2fe9f8d1524fa70e23276b' }))));
     }
 };
 CpslTileButton.style = CpslTileButtonStyle0;
 
 exports.cpsl_alert = CpslAlert;
+exports.cpsl_app_bar = CpslAppBar;
+exports.cpsl_avatar = CpslAvatar;
 exports.cpsl_button = CpslButton;
+exports.cpsl_button_group = CpslButtonGroup;
+exports.cpsl_card = CpslCard;
+exports.cpsl_checkbox = CpslCheckbox;
 exports.cpsl_code_input = CpslCodeInput;
 exports.cpsl_divider = CpslDivider;
+exports.cpsl_drawer = CpslDrawer;
 exports.cpsl_dropdown = CpslDropdown;
+exports.cpsl_file_upload = CpslFileUpload;
 exports.cpsl_icon = CpslIcon;
 exports.cpsl_input = CpslInput;
 exports.cpsl_modal = CpslModal;
+exports.cpsl_nav_button_group = CpslNavButtonGroup;
 exports.cpsl_overlay = CpslOverlay;
+exports.cpsl_pagination = CpslPagination;
 exports.cpsl_pill = CpslPill;
+exports.cpsl_popover = CpslPopover;
 exports.cpsl_progress_indicator = CpslProgressIndicator;
 exports.cpsl_qr_code = CpslQrCode;
+exports.cpsl_radio = CpslRadio;
+exports.cpsl_select = CpslSelect;
+exports.cpsl_select_item = CpslSelectItem;
 exports.cpsl_slide_button = CpslSlideButton;
 exports.cpsl_spinner = CpslSpinner;
+exports.cpsl_switch = CpslSwitch;
 exports.cpsl_tab = CpslTab;
+exports.cpsl_table = CpslTable;
 exports.cpsl_tabs = CpslTabs;
 exports.cpsl_text = CpslText;
 exports.cpsl_tile_button = CpslTileButton;
 
-//# sourceMappingURL=cpsl-alert_18.cjs.entry.js.map
+//# sourceMappingURL=cpsl-alert_33.cjs.entry.js.map