@usecapsule/core-components 3.0.0 → 3.0.1-dev.2

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-8fe9f35e.js';
-import { a as DEFAULT_Z_INDICES, M as MOBILE_SIZE } from './constants-6acf4ea8.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-b9a060b3.js';
+import { a as DEFAULT_Z_INDICES, M as MOBILE_SIZE } from './constants-fce138fa.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-1789f0cf.js';
 
 const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:14px;--container-padding-bottom:14px;--container-padding-start:16px;--container-padding-end:16px;--container-font-size:var(--cpsl-font-size-body-m);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-alert);--container-background-color:var(--cpsl-color-background-0);--container-color:var(--cpsl-color-text-primary);--container-icon-color:var(--container-color);display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-border-color:var(--cpsl-color-utility-red)}:host(.warning){--container-border-color:var(--cpsl-color-utility-yellow)}:host(.success){--container-border-color:var(--cpsl-color-utility-green)}:host cpsl-icon{--icon-color:var(--container-icon-color);--height:20px;--width:20px}.alert-container{border-radius:var(--container-border-radius);-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);font-size:var(--container-font-size);display:flex;align-items:center;justify-content:center;gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);background-color:var(--container-background-color);color:var(--container-color)}";
@@ -29,7 +29,7 @@ const CpslAlert = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && h("cpsl-icon", { icon: this.iconType }), h("slot", { key: '8a2ed501e583e444203fa6168c7eb10011ec57fe' }))));
+        return (h(Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && h("cpsl-icon", { key: 'c037b1d18057d53d05e52be9cfbb81f234ea0f1d', icon: this.iconType }), h("slot", { key: 'ec02796cf9ad119f95be56701d28e3490b07bc43' }))));
     }
 };
 CpslAlert.style = CpslAlertStyle0;
@@ -42,14 +42,13 @@ const CpslAppBar = class {
         registerInstance(this, hostRef);
         this.height = undefined;
         this.position = 'fixed';
+        this.zIndexOverride = undefined;
     }
     render() {
-        return (h(Host, { key: 'ea193eb47aaa71a32556004f5a43b8e903408054', style: {
-                height: `${this.height}px`,
-            } }, h("div", { key: '7e3c3b25bb6dfe9177de027ee9920c190b55b265', class: "container", part: "container", style: {
+        return (h(Host, { key: '4608b0dc424585b7e7f865d55b3d217ebe172f04', style: Object.assign({ height: `${this.height}px` }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})) }, h("div", { key: 'c598749bcfb29c806856573b9f61141b7b68022e', class: "container", part: "container", style: {
                 position: this.position,
                 height: `${this.height}px`,
-            } }, h("slot", { key: '00ac3af6b3485807bf63701f9b0b845efcb288c7' })), this.position === 'fixed' && (h("div", { style: {
+            } }, h("slot", { key: '7e2bd9efbe98ca5ff70dd0bc33333d95799f5fe7' })), this.position === 'fixed' && (h("div", { key: 'fc4e1e9f6414ccf74c816f19be79b7d4b0df8bd5', style: {
                 height: `${this.height}px`,
             } }))));
     }
@@ -68,37 +67,41 @@ const CpslAvatar = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'c148e7d268c681fa6a7273c109b9ab418f433c24' }, h("span", { key: 'd1f977ab0c5d6f6758f84fb33ed9e72d9a1270c9', class: { round: this.variant === 'round' } }, h("img", { key: '3a13f96266ee6476df2154a09b433dcf7ba44daf', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
+        return (h(Host, { key: '04dfd668bc6ab12f758e82ccfd915f06e1de3504' }, h("span", { key: '906c7c6e113040b95273c987689e848954e14a1c', class: { round: this.variant === 'round' } }, h("img", { key: '2d952a27ebbeb118c931162487f2d7e13370b41f', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
     }
 };
 CpslAvatar.style = CpslAvatarStyle0;
 
-const cpslButtonCss = ":host{--button-border-width:1px;--button-border-width-start:var(--button-border-width);--button-border-width-end:var(--button-border-width);--button-border-width-top:var(--button-border-width);--button-border-width-bottom:var(--button-border-width);--button-gap:8px;--button-justify-content:center;--button-border-radius-top-start:var(--button-border-radius);--button-border-radius-top-end:var(--button-border-radius);--button-border-radius-bottom-end:var(--button-border-radius);--button-border-radius-bottom-start:var(--button-border-radius);--button-padding-start:16px;--button-padding-end:16px;--button-icon-size:var(--cpls-font-size-body-l);--button-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-primary-button-text);--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-secondary-button-text);--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-icon-color:var(--cpsl-color-icon-button-default);--button-icon-disabled-color:var(--cpsl-color-icon-button-disabled);--button-icon-hover-color:var(--cpsl-color-icon-button-hover);height:100%;display:inline-block;font-family:var(--cpsl-font-family, inherit)}: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(.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(.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)}: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-secondary-button);--button-color:var(--button-secondary-color);--button-background-color:var(--button-primary-secondary-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(.icon){--button-color:transparent;--button-background-color:transparent;--button-border-color:transparent;--button-outline-color:transparent}:host(.icon) ::slotted(cpsl-icon){--icon-color:var(--button-icon-color)}:host(.icon):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-icon-disabled-color)}:host(.icon) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-icon-hover-color)}.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);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-color: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)}: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 cpslButtonCss = ":host{--button-border-width:1px;--button-border-width-start:var(--button-border-width);--button-border-width-end:var(--button-border-width);--button-border-width-top:var(--button-border-width);--button-border-width-bottom:var(--button-border-width);--button-gap:8px;--button-justify-content:center;--button-border-radius-top-start:var(--button-border-radius);--button-border-radius-top-end:var(--button-border-radius);--button-border-radius-bottom-end:var(--button-border-radius);--button-border-radius-bottom-start:var(--button-border-radius);--button-padding-start:16px;--button-padding-end:16px;--button-icon-size:var(--cpls-font-size-body-l);--button-font-weight:500;--button-primary-color:var(--cpsl-color-primary-button-text);--button-primary-background-color:var(--cpsl-color-primary-button-surface-default);--button-primary-border-color:var(--cpsl-color-primary-button-border-default);--button-primary-icon-color:var(--cpsl-color-primary-button-text);--button-primary-disabled-color:var(--cpsl-color-text-disabled);--button-primary-disabled-background-color:var(--cpsl-color-primary-button-surface-disabled);--button-primary-disabled-border-color:var(--cpsl-color-primary-button-border-disabled);--button-primary-disabled-icon-color:var(--cpsl-color-primary-button-text);--button-primary-hover-color:var(--cpsl-color-primary-button-text);--button-primary-hover-background-color:var(--cpsl-color-primary-button-surface-hover);--button-primary-hover-border-color:var(--cpsl-color-primary-button-surface-hover);--button-primary-hover-icon-color:var(--cpsl-color-primary-button-text);--button-primary-active-color:var(--cpsl-color-primary-button-text);--button-primary-active-background-color:var(--cpsl-color-primary-button-surface-pressed);--button-primary-active-border-color:var(--cpsl-color-primary-button-surface-pressed);--button-primary-active-icon-color:var(--cpsl-color-primary-button-text);--button-secondary-color:var(--cpsl-color-secondary-button-text);--button-secondary-background-color:var(--cpsl-color-secondary-button-surface-default);--button-secondary-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-disabled-color:var(--cpsl-color-text-disabled);--button-secondary-disabled-background-color:var(--cpsl-color-secondary-button-surface-disabled);--button-secondary-disabled-border-color:var(--cpsl-color-secondary-button-border-disabled);--button-secondary-disabled-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-hover-color:var(--cpsl-color-secondary-button-text);--button-secondary-hover-background-color:var(--cpsl-color-secondary-button-surface-hover);--button-secondary-hover-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-hover-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-active-color:var(--cpsl-color-secondary-button-text);--button-secondary-active-background-color:var(--cpsl-color-secondary-button-surface-pressed);--button-secondary-active-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-active-icon-color:var(--cpsl-color-secondary-button-text);--button-ghost-color:var(--cpsl-color-ghost-button-default);--button-ghost-disabled-color:var(--cpsl-color-ghost-button-disabled);--button-ghost-hover-color:var(--cpsl-color-ghost-button-hover);--button-destructive-color:var(--cpsl-color-destructive-button-text);--button-destructive-background-color:var(--cpsl-color-destructive-button-surface-default);--button-destructive-border-color:var(--cpsl-color-destructive-button-border-default);--button-destructive-icon-color:var(--cpsl-color-destructive-button-text);--button-destructive-disabled-color:var(--cpsl-color-text-disabled);--button-destructive-disabled-background-color:var(--cpsl-color-destructive-button-surface-disabled);--button-destructive-disabled-border-color:var(--cpsl-color-destructive-button-border-disabled);--button-destructive-disabled-icon-color:var(--cpsl-color-destructive-button-text);--button-destructive-hover-color:var(--cpsl-color-destructive-button-text);--button-destructive-hover-background-color:var(--cpsl-color-destructive-button-surface-hover);--button-destructive-hover-border-color:var(--cpsl-color-destructive-button-border-default);--button-destructive-hover-icon-color:var(--cpsl-color-destructive-button-text);--button-destructive-active-color:var(--cpsl-color-destructive-button-text);--button-destructive-active-background-color:var(--cpsl-color-destructive-button-surface-pressed);--button-destructive-active-border-color:var(--cpsl-color-destructive-button-border-default);--button-destructive-active-icon-color:var(--cpsl-color-destructive-button-text);height:fit-content;width:fit-content;display:inline-block;font-family:var(--cpsl-font-family, inherit);-webkit-tap-highlight-color:transparent}:host a{height:fit-content;width:auto !important}:host(.full-width){width:100%;display:block}:host(.full-width) .button-native{width:100%}:host(.small){--button-font-size:var(--cpsl-font-size-body-s);--button-padding-top:12px;--button-padding-bottom:12px;--button-icon-size:var(--cpsl-font-size-body-m)}:host(.small.primary){--button-padding-top:13px;--button-padding-bottom:13px}:host(.medium){--button-font-size:var(--cpsl-font-size-body-m);--button-padding-top:14px;--button-padding-bottom:14px;--button-icon-size:var(--cpsl-font-size-body-l)}:host(.medium) :host(.primary){--button-padding-top:15px;--button-padding-bottom:15px}:host(.medium.primary){--button-padding-top:15px;--button-padding-bottom:15px}:host(.disabled){cursor:default;pointer-events:none}:host ::slotted(cpsl-icon){--height:var(--button-icon-size);--width:var(--button-icon-size)}:host(.primary){--button-border-radius:var(--cpsl-border-radius-primary-button);--button-color:var(--button-primary-color);--button-background-color:var(--button-primary-background-color);--button-border-color:var(--button-primary-border-color);--button-padding-start:17px;--button-padding-end:17px;--button-border-width:0px}:host(.primary) ::slotted(cpsl-icon){--icon-color:var(--button-primary-icon-color)}:host(.primary):host(.disabled){--button-color:var(--button-primary-disabled-color);--button-background-color:var(--button-primary-disabled-background-color);--button-border-color:var(--button-primary-disabled-border-color);--button-outline-color:transparent}:host(.primary):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-primary-disabled-icon-color)}:host(.primary) :not(.disabled):hover{--button-color:var(--button-primary-hover-color);--button-background-color:var(--button-primary-hover-background-color);--button-border-color:var(--button-primary-hover-border-color)}:host(.primary) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-primary-hover-icon-color)}:host(.primary) :not(.disabled):active{--button-color:var(--button-primary-active-color);--button-background-color:var(--button-primary-active-background-color);--button-border-color:var(--button-primary-active-border-color)}:host(.primary) :not(.disabled):active ::slotted(cpsl-icon){--icon-color:var(--button-primary-active-icon-color)}:host(.primary) :not(.disabled):focus-visible{--button-outline-color:var(--cpsl-color-primary-button-outline)}:host(.secondary){--button-border-radius:var(--cpsl-border-radius-destructive-button);--button-color:var(--button-secondary-color);--button-background-color:var(--button-secondary-background-color);--button-border-color:var(--button-secondary-border-color)}:host(.secondary) ::slotted(cpsl-icon){--icon-color:var(--button-secondary-icon-color)}:host(.secondary):host(.disabled){--button-color:var(--button-secondary-disabled-color);--button-background-color:var(--button-secondary-disabled-background-color);--button-border-color:var(--button-secondary-disabled-border-color);--button-outline-color:transparent}:host(.secondary):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-secondary-disabled-icon-color)}:host(.secondary) :not(.disabled):hover{--button-color:var(--button-secondary-hover-color);--button-border-color:var(--button-secondary-hover-border-color);--button-background-color:var(--button-secondary-hover-background-color)}:host(.secondary) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-secondary-hover-icon-color)}:host(.secondary) :not(.disabled):active{--button-color:var(--button-secondary-active-color);--button-border-color:var(--button-secondary-active-border-color);--button-background-color:var(--button-secondary-active-background-color)}:host(.secondary) :not(.disabled):active ::slotted(cpsl-icon){--icon-color:var(--button-secondary-active-icon-color)}:host(.secondary) :not(.disabled):focus-visible{--button-outline-color:var(--cpsl-color-secondary-button-outline)}:host(.ghost){--button-color:var(--button-ghost-color);--button-background-color:transparent;--button-border-color:transparent;--button-outline-color:transparent;--button-padding-start:0px;--button-padding-end:0px;--button-padding-top:0px;--button-padding-bottom:0px;--button-border-width:0px}:host(.ghost) ::slotted(cpsl-icon){--icon-color:var(--button-ghost-color);--height:var(--cpsl-font-size-body-xl);--width:var(--cpsl-font-size-body-xl)}:host(.ghost):host(.disabled){--button-color:var(--button-ghost-disabled-color)}:host(.ghost):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-ghost-disabled-color)}:host(.ghost) :not(.disabled):hover{--button-color:var(--button-ghost-hover-color)}:host(.ghost) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-ghost-hover-color)}:host(.destructive){--button-border-radius:var(--cpsl-border-radius-secondary-button);--button-color:var(--button-destructive-color);--button-background-color:var(--button-destructive-background-color);--button-border-color:var(--button-destructive-border-color)}:host(.destructive) ::slotted(cpsl-icon){--icon-color:var(--button-destructive-icon-color)}:host(.destructive):host(.disabled){--button-color:var(--button-destructive-disabled-color);--button-background-color:var(--button-destructive-disabled-background-color);--button-border-color:var(--button-destructive-disabled-border-color);--button-outline-color:transparent}:host(.destructive):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-destructive-disabled-icon-color)}:host(.destructive) :not(.disabled):hover{--button-color:var(--button-destructive-hover-color);--button-border-color:var(--button-destructive-hover-border-color);--button-background-color:var(--button-destructive-hover-background-color)}:host(.destructive) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-destructive-hover-icon-color)}:host(.destructive) :not(.disabled):active{--button-color:var(--button-destructive-active-color);--button-border-color:var(--button-destructive-active-border-color);--button-background-color:var(--button-destructive-active-background-color)}:host(.destructive) :not(.disabled):active ::slotted(cpsl-icon){--icon-color:var(--button-destructive-active-icon-color)}:host(.destructive) :not(.disabled):focus-visible{--button-outline-color:var(--cpsl-color-destructive-button-outline)}.button-native{border-top-left-radius:var(--button-border-radius-top-start);border-top-right-radius:var(--button-border-radius-top-end);border-bottom-right-radius:var(--button-border-radius-bottom-end);border-bottom-left-radius:var(--button-border-radius-bottom-start);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);font-size:var(--button-font-size);font-weight:var(--button-font-weight);font-family:inherit;white-space:nowrap;text-decoration:none;border:0px solid transparent;border-width:var(--button-border-width-top) var(--button-border-width-end) var(--button-border-width-bottom) var(--button-border-width-start);cursor:pointer;color:var(--button-color);background:var(--button-background-color);border-color:var(--button-border-color);display:flex;justify-content:var(--button-justify-content);align-items:center;height:100%;gap:var(--button-gap);word-break:break-all;outline-color:var(--button-outline-color);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]) .button-native{border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}[dir=rtl] .button-native{border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}@supports selector(:dir(rtl)){.button-native:dir(rtl){border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}}:host ::slotted(cpsl-text){color:var(--button-color)}";
 const CpslButtonStyle0 = cpslButtonCss;
 
 const CpslButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.as = 'button';
         this.disabled = false;
         this.fullWidth = false;
+        this.href = undefined;
         this.size = 'medium';
+        this.target = undefined;
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: '62f94f1db8f1019d47a3fcd481638dd21769b74f', class: {
+        return (h(Host, { key: '554350e7af597bd14c9584f9924f73e04fe44093', class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
-                'icon': this.variant === 'icon',
+                'ghost': this.variant === 'ghost',
+                'destructive': this.variant === 'destructive',
                 'disabled': this.disabled,
                 'full-width': this.fullWidth,
                 'small': this.size === 'small',
                 'medium': this.size === 'medium',
-            } }, h("button", { key: '8b018abcc84330186611db6319bcf56022f5cccc', part: "button-native", class: "button-native" }, h("slot", { key: 'cad9e0b269752f30514957663de666eee0f2622c', name: "start" }), h("slot", { key: '6170188bf7734375bb3c99ae7ffab4d21c817e32' }), h("slot", { key: '2e483b4c7d21796c4e519c9c553483f633d2c8ac', name: "end" }))));
+            } }, h(this.as, { key: '20b6865c03e312d263c523f681bb775d8626fc9c', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '4ee8d68b06ce21288e63bfcff9aa186908b89af2', name: "start" }), h("slot", { key: '9c0a5f0daa64c75886d03fb830739c8f8cfb65d9' }), h("slot", { key: 'cf9addee55b0a0d8f487313c972d7b48d6f8c75c', name: "end" }))));
     }
 };
 CpslButton.style = CpslButtonStyle0;
 
-const cpslButtonGroupCss = ":host{--button-size:32px;display:flex}:host ::slotted(cpsl-button:first-child){--button-border-radius-top-end:0px;--button-border-radius-bottom-end:0px}:host ::slotted(cpsl-button:last-child){--button-border-width-start:0px;--button-border-radius-top-start:0px;--button-border-radius-bottom-start:0px}:host ::slotted(cpsl-button:not(:first-child):not(:last-child)){--button-border-width-start:0px;--button-border-radius-top-start:0px;--button-border-radius-bottom-start:0px;--button-border-radius-top-end:0px;--button-border-radius-bottom-end:0px}:host ::slotted(cpsl-button){--button-color:var(--cpsl-color-text-tertiary);--button-padding-start:0px;--button-padding-end:0px;--button-padding-top:0px;--button-padding-bottom:0px;height:var(--button-size);width:var(--button-size)}:host ::slotted(cpsl-button.selected){--button-color:var(--cpsl-color-text-primary)}";
+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 {
@@ -135,7 +138,7 @@ const CpslButtonGroup = class {
         return this.el.querySelectorAll('&> *:not(cpsl-button)');
     }
     render() {
-        return (h(Host, { key: 'e15232f4180db66b6b7bd21b5e22980f197514be' }, h("slot", { key: 'f3c566eaf9574fb38331e8a44c5c369d1edd5223' })));
+        return (h(Host, { key: '18830efc419c35995cc7b31a89e2405e230f4978' }, h("slot", { key: 'f466f88653fd0fe91b258c03706b13adc78be777' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -144,7 +147,7 @@ const CpslButtonGroup = class {
 };
 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-color:var(--card-background-color)}";
+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 {
@@ -152,12 +155,12 @@ const CpslCard = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '8633aeaedaaf81af67835ee3ffc8964ec28ced92' }, h("div", { key: '3f2a22aad0a9dde3c6819ec9746576691d2084e5', class: { card: true } }, h("slot", { key: 'c6f573694f67d2096cac429c27f87f3b04547d4b' }))));
+        return (h(Host, { key: '21177f5a9ceec0246dc1fa89a052bfdadacc3063' }, h("div", { key: '0940e0aaf62b24e1be0e99c736069b5bb463854c', class: { card: true }, part: "card-container" }, h("slot", { key: '6317e03f97be9841c03b040845591043bf203e36' }))));
     }
 };
 CpslCard.style = CpslCardStyle0;
 
-const cpslCheckboxCss = ":host{--container-height:20px;--container-width:20px;--container-border-radius:var(--cpsl-border-radius-checkbox);--container-border-width:2px;--container-background-color-default:var(--cpsl-color-checkbox-surface-default);--container-border-color-default:var(--cpsl-color-checkbox-border-default);--container-background-color-checked:var(--cpsl-color-checkbox-surface-checked);--container-border-color-checked:var(--cpsl-color-checkbox-border-checked);--icon-height:16px;--icon-width:16px;--checkbox-icon-color:var(--cpsl-color-checkbox-icon);display:block;position:relative;height:var(--container-height);width:var(--container-width);cursor:pointer}input{position:absolute;width:100%;height:100%;margin:0px;opacity:0}span.container{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;width:100%;height:100%;border-radius:var(--container-border-radius);border:var(--container-border-width) solid;background-color: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-color:var(--container-background-color-checked);border-color:var(--container-border-color-checked)}span.container.checked cpsl-icon{opacity:1}";
+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 {
@@ -170,12 +173,12 @@ const CpslCheckbox = class {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: 'b5d7963285854a20983f8655c8a9545b8d0735e9' }, h("input", { key: 'b822a505e826f06d47f1da51fff0c7f310d9c9ce', type: "checkbox", checked: this.checked }), h("span", { key: '3747cf548b8d88ceee19eae5c1df78cdc5f9c87e', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '9d5d0cdba4b22bc2167aed23e7748201320a6553', icon: "check" }))));
+        return (h(Host, { key: '236c0b027e72c0c25dbc2fd3183a77400c815f8c' }, h("input", { key: '8c350e21268b87d485b16796b2058c4e47f46e75', type: "checkbox", checked: this.checked }), h("span", { key: 'b1d8fc6dd380b67eb8940f55bba47810c54ee189', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '2b3ddcad1e2b9007bda8135a810b75a1a2cfaeca', icon: "check" }))));
     }
 };
 CpslCheckbox.style = CpslCheckboxStyle0;
 
-const cpslCodeInputCss = ":host{--input-width:40px;--input-height:54px;--input-border-radius:var(--cpsl-border-radius-input);--input-border-color:var(--cpsl-color-input-border-placeholder);--input-border-width:1px;--input-background-color:var(--cpsl-color-input-surface-default);--input-border-error-color:var(--cpsl-color-input-border-error);--input-font-size:clamp(20px, 1.25rem, 30px);--input-color:var(--cpsl-color-text-primary);--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:12px;--helper-text-margin-top:6px;display:block;font-family:var(--cpsl-font-family, inherit)}.code-container{display:flex;gap:8px}.code-input{font-family:var(--cpsl-font-family, inherit);border-radius:var(--input-border-radius);font-size:var(--input-font-size);border-color:var(--input-border-color);border-width:var(--input-border-width);border-style:solid;font-size:var(--input-font-size);color:var(--input-color);width:var(--input-width);height:var(--input-height);background-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 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 {
@@ -265,16 +268,16 @@ const CpslCodeInput = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2f52778c8b8b51ef7c875b53394e7275bd93412f' }, h("div", { key: 'e96c3deea7d1e4eaaef4c72fbaca702b6bb46cf1', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: 'cee793d35dc39dce79834dd7c73038bf50e41442' }, h("div", { key: '1df541a5ae880c512c6c70c3b5f1cf64e1a89b8b', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
             var _a;
             return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
-        })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        })), (this.errorText || this.helperText) && (h("div", { key: '2001f525a89d0b57287cd97367c6646de0de163a', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'c274e60e8fd04e18b2ebff6386d1fa46916d2d66', icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", { key: '56566c698720936d4225eea8b07f042e67f570e5' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     get el() { return getElement(this); }
 };
 CpslCodeInput.style = CpslCodeInputStyle0;
 
-const cpslDividerCss = ":host{--divider-height:1px;--divider-color:var(--cpsl-color-divider);display:flex;align-items:center;height:24px;color:var(--cpsl-color-text-subtle);font-family:var(--cpsl-font-family, inherit);font-size:clamp(14px, 0.875rem, 21px);font-weight:600;gap:16px}:host div{flex:1;background-color:var(--divider-color);height:var(--divider-height)}";
+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 {
@@ -282,7 +285,7 @@ const CpslDivider = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '1ed13a5022a89b899e6a16f168bff6b71c3c2ad8' }, h("div", { key: 'e9fec054de82d84298ac7cf7fc45f239a9a78442' }), h("slot", { key: 'c6ab3f0e787ee245d206b300c68192bfb3515aa6' }), h("div", { key: '5591e16b69c4cdce5cd5b9932923a189440b7fd5' })));
+        return (h(Host, { key: 'd5cffdef9344f7dcac4aae1bc2acca8c02d69946' }, h("div", { key: 'e07f8107804df83537a3b8e40d124c66d2fc6f44' }), h("slot", { key: 'd97f02d46a63d32d107838b5aa50654a9593cc8a' }), h("div", { key: '2316aed010b91a65c961e2f30cc2cde03b892429' })));
     }
 };
 CpslDivider.style = CpslDividerStyle0;
@@ -293,28 +296,44 @@ const CpslDrawerStyle0 = cpslDrawerCss;
 const CpslDrawer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.closedAnchorPosition = undefined;
+        this.showTransition = undefined;
         this.anchor = undefined;
+        this.anchorPosition = undefined;
+        this.noOverlay = undefined;
         this.open = undefined;
         this.size = undefined;
         this.transitionDuration = 0.15;
         this.transitionFunction = 'ease-in-out';
         this.variant = 'temporary';
+        this.zIndexOverride = undefined;
+    }
+    componentDidLoad() {
+        this.closedAnchorPosition = `-${this.getContainerHeight()}px`;
+        setTimeout(() => {
+            this.showTransition = true;
+        }, 100);
+    }
+    getContainerHeight() {
+        var _a;
+        return (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    }
+    get containerEl() {
+        return this.el.shadowRoot.getElementById('container');
     }
     render() {
+        var _a;
         const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
-        return (h(Host, { key: '14b5f63f68d3e543b9b2b2f8e7fcbe24222ceb7a', style: {
-                width: setHeight ? '100vw' : `${this.size}px`,
-                height: setHeight ? `${this.size}px` : '100vh',
-                transitionDuration: `${this.transitionDuration}s`,
-                transitionTimingFunction: `${this.transitionFunction}`,
-                [this.anchor]: this.open || this.variant === 'permanent' ? '0px' : `-${this.size}px`,
-            }, class: {
+        const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
+        const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
+        return (h(Host, { key: '9568be6ee1897a96bbdb18dabfd32d40ba6a6fa5', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
                 top: this.anchor === 'top',
                 bottom: this.anchor === 'bottom',
                 left: this.anchor === 'left',
                 right: this.anchor === 'right',
-            } }, this.variant === 'temporary' && h("cpsl-overlay", { open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: '9877dd496d8a055a84ca81d7bf5b3a425b45e473', class: "container", part: "container" }, h("slot", { key: 'b02a97fc7f1fb6fe5f0a8fb45dbf7709977c2c3b' }))));
+            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '744838970ee22c5bb1798702f6060b6d12f29eb9', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: 'b3e4d26c18e7d1e5442b941dd67085088d9c33a9', id: "container", class: "container", part: "container" }, h("slot", { key: '1951ec776043562fe15409ed4a19799c21f6e36d' }))));
     }
+    get el() { return getElement(this); }
 };
 CpslDrawer.style = CpslDrawerStyle0;
 
@@ -4327,6 +4346,11 @@ const BackupKit = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" s
 </svg>
 `;
 
+const Brush = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 10V3.6C20 3.03995 20 2.75992 19.891 2.54601C19.7951 2.35785 19.6422 2.20487 19.454 2.10899C19.2401 2 18.9601 2 18.4 2H5.6C5.03995 2 4.75992 2 4.54601 2.10899C4.35785 2.20487 4.20487 2.35785 4.10899 2.54601C4 2.75992 4 3.03995 4 3.6V10M20 10H4M20 10V10.2C20 11.8802 20 12.7202 19.673 13.362C19.3854 13.9265 18.9265 14.3854 18.362 14.673C17.7202 15 16.8802 15 15.2 15H8.8C7.11984 15 6.27976 15 5.63803 14.673C5.07354 14.3854 4.6146 13.9265 4.32698 13.362C4 12.7202 4 11.8802 4 10.2V10M14.5 15V19.5C14.5 20.8807 13.3807 22 12 22C10.6193 22 9.5 20.8807 9.5 19.5V15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const CapsuleLogo = `<svg width="66" height="18" viewBox="0 0 66 18" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1065_1067)">
 <path d="M8.90893 5.98154C8.79593 6.37659 8.36391 6.57225 7.98741 6.41488C7.64799 6.27305 7.4779 5.89324 7.56125 5.53225C7.61419 5.30292 7.65233 5.08449 7.6757 4.87695C7.72165 4.48163 7.72115 4.13023 7.6742 3.82275C7.62728 3.51526 7.53433 3.26052 7.39539 3.05853C7.26076 2.85258 7.0849 2.70424 6.8678 2.6135C6.48209 2.45231 6.05553 2.51587 5.58813 2.80414C5.12272 3.08752 4.64333 3.58956 4.14988 4.31029C3.65849 5.0261 3.17976 5.95161 2.71371 7.08679C2.23959 8.24161 1.9244 9.24985 1.76818 10.1115C1.61628 10.9692 1.60543 11.6613 1.73562 12.1878C1.87013 12.7104 2.1291 13.0518 2.51249 13.212C2.72496 13.3008 2.9478 13.3248 3.18098 13.2841C3.4185 13.2394 3.65959 13.13 3.90425 12.9559C4.15121 12.7828 4.39612 12.5454 4.63897 12.2439C4.76621 12.0879 4.89014 11.9151 5.01082 11.7254C5.2102 11.4119 5.5999 11.2672 5.93935 11.4136C6.31297 11.5748 6.47729 12.021 6.2762 12.3772C6.02913 12.8148 5.76478 13.2219 5.48314 13.5985C5.06553 14.1609 4.62853 14.6288 4.17213 15.0023C3.71776 15.3709 3.26186 15.6179 2.80446 15.7434C2.34908 15.864 1.91005 15.836 1.4874 15.6594C0.863804 15.3988 0.433286 14.859 0.195844 14.0401C-0.0415976 13.2212 -0.0631333 12.173 0.131237 10.8955C0.325607 9.61802 0.755687 8.16844 1.42148 6.54674C2.08929 4.92015 2.80228 3.58879 3.5605 2.55268C4.32072 1.51165 5.07175 0.786304 5.81357 0.376648C6.55541 -0.0330046 7.2358 -0.108495 7.85478 0.150177C8.24973 0.315224 8.56852 0.58663 8.8112 0.964396C9.05387 1.34216 9.21418 1.81505 9.29215 2.38307C9.37214 2.94618 9.36242 3.59269 9.26298 4.32262C9.19509 4.84082 9.07707 5.39378 8.90893 5.98154Z" />
@@ -4434,8 +4458,8 @@ const Check = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" strok
 </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>
 `;
 
@@ -4444,11 +4468,9 @@ const Clock = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" strok
 </svg>
 `;
 
-const Close = `<svg width="24" height="24" viewBox="0 0 21 20" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.125 4.375L4.875 15.625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16.125 15.625L4.875 4.375" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
-`;
+const Close = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"  xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7L7 17M7 7L17 17" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
 
 const ClubhouseBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.74167 17.875C0.783333 17.875 0 18.6583 0 19.6167C0 20.575 0.783333 21.3583 1.74167 21.3583C2.7 21.3583 3.48333 20.575 3.48333 19.6167C3.48333 18.6583 2.70833 17.875 1.74167 17.875Z" fill="#6515DD"/>
@@ -4467,6 +4489,11 @@ const Copy = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
 </svg>
 `;
 
+const Cube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 8H16M16 8V20.5M16 8L20.5 3.5M21 15.3373V3.8C21 3.51997 21 3.37996 20.9455 3.273C20.8976 3.17892 20.8211 3.10243 20.727 3.0545C20.62 3 20.48 3 20.2 3H8.66274C8.41815 3 8.29586 3 8.18077 3.02763C8.07873 3.05213 7.98119 3.09253 7.89172 3.14736C7.7908 3.2092 7.70432 3.29568 7.53137 3.46863L3.46863 7.53137C3.29568 7.70432 3.2092 7.7908 3.14736 7.89172C3.09253 7.98119 3.05213 8.07873 3.02763 8.18077C3 8.29586 3 8.41815 3 8.66274V20.2C3 20.48 3 20.62 3.0545 20.727C3.10243 20.8211 3.17892 20.8976 3.273 20.9455C3.37996 21 3.51997 21 3.8 21H15.3373C15.5818 21 15.7041 21 15.8192 20.9724C15.9213 20.9479 16.0188 20.9075 16.1083 20.8526C16.2092 20.7908 16.2957 20.7043 16.4686 20.5314L20.5314 16.4686C20.7043 16.2957 20.7908 16.2092 20.8526 16.1083C20.9075 16.0188 20.9479 15.9213 20.9724 15.8192C21 15.7041 21 15.5818 21 15.3373Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const DecentBrand = `<svg width="26" height="21" viewBox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.778 2.78753C14.0232 2.78753 14.984 4.90478 15.5758 6.3203C15.9631 7.2468 16.7703 8.7695 17.7174 9.6841C18.9174 6.8477 19.7749 1e-05 20.9598 0C22.4868 1e-05 25.2514 4.71852 25.2514 10.4107C25.2514 16.1232 22.4888 20.8962 20.96 20.8962C19.7774 20.8962 18.9206 14.0677 17.7252 11.2048C16.773 12.1181 15.9607 13.6496 15.5717 14.58C14.98 15.9955 14.0191 18.1128 12.7739 18.1128C11.5287 18.1128 10.5679 15.9955 9.97612 14.58C9.54017 13.5372 8.57227 11.739 7.47171 10.9028C6.84001 11.4891 6.29866 12.5072 6.04207 13.121C5.65917 14.0369 5.03745 15.4069 4.23174 15.4069C3.42602 15.4069 2.8043 14.0369 2.4214 13.121C2.05134 12.2358 1.07371 10.5066 0.101214 10.4476C0.0674785 10.4496 0.0337325 10.4496 0 10.4476C0.0337143 10.4455 0.0674613 10.4455 0.101214 10.4476C1.07268 10.3887 2.03506 8.6625 2.40511 7.7773C2.78801 6.8614 3.40973 5.4914 4.21545 5.4914C5.02116 5.4914 5.64288 6.8614 6.02578 7.7773C6.28377 8.3944 6.82965 9.4203 7.4658 10.005C8.57048 9.1721 9.5429 7.3663 9.98018 6.3203C10.5719 4.90478 11.5328 2.78753 12.778 2.78753Z" fill="#9969FF"/>
 </svg>
@@ -4575,6 +4602,11 @@ const Figma = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColo
 </svg>
 `;
 
+const File = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 2.26946V6.4C14 6.96005 14 7.24008 14.109 7.45399C14.2049 7.64215 14.3578 7.79513 14.546 7.89101C14.7599 8 15.0399 8 15.6 8H19.7305M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const GithubBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_106_21439)">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.3724 0 0 5.3808 0 12.0204C0 17.3304 3.438 21.8364 8.2068 23.4252C8.8068 23.5356 9.0252 23.1648 9.0252 22.8456C9.0252 22.5612 9.0156 21.804 9.0096 20.802C5.6712 21.528 4.9668 19.1904 4.9668 19.1904C4.422 17.8008 3.6348 17.4312 3.6348 17.4312C2.5452 16.6872 3.7176 16.7016 3.7176 16.7016C4.9212 16.7856 5.5548 17.94 5.5548 17.94C6.6252 19.776 8.364 19.2456 9.0468 18.9384C9.1572 18.162 9.4668 17.6328 9.81 17.3328C7.146 17.0292 4.344 15.9972 4.344 11.3916C4.344 10.08 4.812 9.006 5.5788 8.166C5.4552 7.8624 5.0436 6.6396 5.6964 4.986C5.6964 4.986 6.7044 4.662 8.9964 6.2172C9.97532 5.95022 10.9853 5.81423 12 5.8128C13.02 5.8176 14.046 5.9508 15.0048 6.2172C17.2956 4.662 18.3012 4.9848 18.3012 4.9848C18.9564 6.6396 18.5436 7.8624 18.4212 8.166C19.1892 9.006 19.6548 10.08 19.6548 11.3916C19.6548 16.0092 16.848 17.0256 14.1756 17.3232C14.6064 17.694 14.9892 18.4272 14.9892 19.5492C14.9892 21.1548 14.9748 22.452 14.9748 22.8456C14.9748 23.1672 15.1908 23.5416 15.8004 23.424C18.19 22.6225 20.2672 21.0904 21.7386 19.0441C23.2099 16.9977 24.001 14.5408 24 12.0204C24 5.3808 18.6264 0 12 0Z" fill="black"/>
@@ -4678,6 +4710,11 @@ const Home = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
 </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>
@@ -4716,8 +4753,13 @@ const Key = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke=
 </svg>
 `;
 
-const Lightning = `<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 14.8962L5 9.89624L1 8.39624L8 0.89624L7 5.89624L11 7.39624L4 14.8962Z" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+const Lightning01 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 2L4.09347 12.6879C3.74466 13.1064 3.57026 13.3157 3.56759 13.4925C3.56528 13.6461 3.63375 13.7923 3.75327 13.8889C3.89076 14 4.16319 14 4.70805 14H12L11 22L19.9066 11.3121C20.2554 10.8936 20.4298 10.6843 20.4324 10.5075C20.4348 10.3539 20.3663 10.2077 20.2468 10.1111C20.1093 10 19.8368 10 19.292 10H12L13 2Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+const Lightning = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 2L4.09347 12.6879C3.74466 13.1064 3.57026 13.3157 3.56759 13.4925C3.56528 13.6461 3.63375 13.7923 3.75327 13.8889C3.89076 14 4.16319 14 4.70805 14H12L11 22L19.9066 11.3121C20.2554 10.8936 20.4298 10.6843 20.4324 10.5075C20.4348 10.3539 20.3663 10.2077 20.2468 10.1111C20.1093 10 19.8368 10 19.292 10H12L13 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
 
@@ -4750,6 +4792,11 @@ const Mail = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
 </svg>
 `;
 
+const Menu = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12H21M3 6H21M3 18H21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const MoreLoginOptions = `<svg width="17" height="16" viewBox="0 0 17 16" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Group 4">
 <path id="Vector" d="M2.1 16C2.98366 16 3.7 15.2836 3.7 14.4C3.7 13.5163 2.98366 12.8 2.1 12.8C1.21634 12.8 0.5 13.5163 0.5 14.4C0.5 15.2836 1.21634 16 2.1 16Z"/>
@@ -4830,6 +4877,11 @@ 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"/>
@@ -4857,6 +4909,12 @@ const Snapchat = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentC
 </svg>
 `;
 
+const Stars = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 13L7.28446 14.5689C7.54995 15.0999 7.68269 15.3654 7.86003 15.5954C8.01739 15.7996 8.20041 15.9826 8.40455 16.14C8.63462 16.3173 8.9001 16.4501 9.43108 16.7155L11 17.5L9.43108 18.2845C8.9001 18.5499 8.63462 18.6827 8.40455 18.86C8.20041 19.0174 8.01739 19.2004 7.86003 19.4046C7.68269 19.6346 7.54995 19.9001 7.28446 20.4311L6.5 22L5.71554 20.4311C5.45005 19.9001 5.31731 19.6346 5.13997 19.4046C4.98261 19.2004 4.79959 19.0174 4.59545 18.86C4.36538 18.6827 4.0999 18.5499 3.56892 18.2845L2 17.5L3.56892 16.7155C4.0999 16.4501 4.36538 16.3173 4.59545 16.14C4.79959 15.9826 4.98261 15.7996 5.13997 15.5954C5.31731 15.3654 5.45005 15.0999 5.71554 14.5689L6.5 13Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 2L16.1786 5.06442C16.4606 5.79765 16.6016 6.16426 16.8209 6.47264C17.0153 6.74595 17.254 6.98475 17.5274 7.17909C17.8357 7.39836 18.2024 7.53937 18.9356 7.82138L22 9L18.9356 10.1786C18.2024 10.4606 17.8357 10.6016 17.5274 10.8209C17.254 11.0153 17.0153 11.254 16.8209 11.5274C16.6016 11.8357 16.4606 12.2024 16.1786 12.9356L15 16L13.8214 12.9356C13.5394 12.2024 13.3984 11.8357 13.1791 11.5274C12.9847 11.254 12.746 11.0153 12.4726 10.8209C12.1643 10.6016 11.7976 10.4606 11.0644 10.1786L8 9L11.0644 7.82138C11.7976 7.53937 12.1643 7.39836 12.4726 7.17909C12.746 6.98475 12.9847 6.74595 13.1791 6.47264C13.3984 6.16426 13.5394 5.79765 13.8214 5.06442L15 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const TelegramBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_106_21213)">
 <path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="url(#paint0_linear_106_21213)"/>
@@ -4939,6 +4997,11 @@ const Wallet = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stro
 </svg>
 `;
 
+const X = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7L7 17M7 7L17 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const YoutubeBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_106_21177)">
 <path d="M23.522 6.18547C23.3863 5.67489 23.1189 5.20889 22.7465 4.83413C22.3741 4.45936 21.9099 4.18897 21.4002 4.05002C19.5238 3.54547 12.0238 3.54547 12.0238 3.54547C12.0238 3.54547 4.5238 3.54547 2.64744 4.05002C2.13773 4.18897 1.67346 4.45936 1.30109 4.83413C0.92872 5.20889 0.661309 5.67489 0.525622 6.18547C0.0238038 8.07002 0.0238037 12 0.0238037 12C0.0238037 12 0.0238038 15.93 0.525622 17.8146C0.661309 18.3251 0.92872 18.7911 1.30109 19.1659C1.67346 19.5407 2.13773 19.8111 2.64744 19.95C4.5238 20.4546 12.0238 20.4546 12.0238 20.4546C12.0238 20.4546 19.5238 20.4546 21.4002 19.95C21.9099 19.8111 22.3741 19.5407 22.7465 19.1659C23.1189 18.7911 23.3863 18.3251 23.522 17.8146C24.0238 15.93 24.0238 12 24.0238 12C24.0238 12 24.0238 8.07002 23.522 6.18547Z" fill="#FF0302"/>
@@ -4957,7 +5020,7 @@ const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCo
 </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, checkCircle: CheckCircle, 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, figmaBrand: FigmaBrand, figma: Figma, githubBrand: GithubBrand, github: Github, googleBrand: GoogleBrand, google: Google, helpCircle: HelpCircle, heroEmail: HeroEmail, heroLock: HeroLock, heroPasskey: HeroPasskey, heroPhone: HeroPhone, heroWallet: HeroWallet, home: Home, 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, settings: Settings, 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 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;
@@ -5058,7 +5121,7 @@ const CpslDropdown = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '65a2ad9d39aa2b234814128f565d1d0024f7b356', style: { width: this.width } }, h("button", { key: '15cf331bd42c8ef8812d699f43f01f234f24e6b4', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '1259100020d7726980b14ae655377fda6321de39', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '78fd5bece65d9264cb76bae4c1512489747dc2e1', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { class: "search-bar" }, h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
+        return (h(Host, { key: 'a997453b8690196f125bcf96fd94d728e645cd9e' }, h("button", { key: '0be8f5b0b6fcb3a27a5885205c0f585a68dc1bb9', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'f324edfdd97304de361a0ccd2bec793af25d3aa3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'e1a3a097abb0633bd33caefabce016e2308f1ac0', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '517c74f9f94df623206d8969a32d894b854f95a4', class: "search-bar" }, h("input", { key: '28ed686f30069ecb92dd0ee1852a9b9f94a98264', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -5068,6 +5131,138 @@ const CpslDropdown = class {
 };
 CpslDropdown.style = CpslDropdownStyle0;
 
+const cpslFileUploadCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-file-border-placeholder);--container-border-color:var(--cpsl-color-file-border-placeholder);--container-border-color-error:var(--cpsl-color-file-border-error);--container-background-color:var(--cpsl-color-file-surface-default);--container-background-color-disabled:var(--cpsl-color-file-surface-disabled);--container-background-color-drag:var(--cpsl-color-file-surface-drag);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-file);--container-padding-top:12px;--container-padding-bottom:12px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;--sample-img-height:40px;--sample-img-width:40px;--sample-img-border-radius:8px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}.container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;flex-wrap:wrap;width:100%;gap:var(--container-gap);cursor:pointer;position:relative;border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.container.drag,.container:active{background:var(--container-background-color-drag)}.container.drag-error{cursor:no-drop}.container.error{border-color:var(--container-border-color-error)}input{position:absolute;width:100%;height:100%;top:0;left:0;margin:0px;opacity:0;cursor:pointer}.sample-img{height:var(--sample-img-height);width:var(--sample-img-width);border-radius:var(--sample-img-border-radius);object-fit:contain}.sample-image-name-container{display:flex;gap:4px;align-items:center}.sample-image-name-container cpsl-icon{z-index:10000;--height:16px;--width:16px}.inline-text{display:inline-block}.sample-image-name{display:inline-block;color:var(--cpsl-color-text-tertiary)}.label-container{flex:1}.file-container{display:flex;flex-direction:column;flex:1;gap:8px;justify-content:center;align-items:center}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}";
+const CpslFileUploadStyle0 = cpslFileUploadCss;
+
+var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const CpslFileUpload = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslOnDrop = createEvent(this, "cpslOnDrop", 7);
+        this.cpslOnDragEnter = createEvent(this, "cpslOnDragEnter", 7);
+        this.cpslOnDragLeave = createEvent(this, "cpslOnDragLeave", 7);
+        this.cpslFileChange = createEvent(this, "cpslFileChange", 7);
+        this.cpslFileRemoved = createEvent(this, "cpslFileRemoved", 7);
+        this.inputId = `cpsl-file-upload-${inputIds$2++}`;
+        this.handleDrop = (ev) => __awaiter$1(this, void 0, void 0, function* () {
+            var _a;
+            ev.preventDefault();
+            const item = (_a = Array.from(ev.dataTransfer.items)) === null || _a === void 0 ? void 0 : _a[0];
+            if (item && this.isValidFile(item.type)) {
+                const file = item.getAsFile();
+                yield this.addFile(file);
+            }
+            this.dragOver = false;
+            this.dragError = false;
+            this.cpslOnDrop.emit(ev);
+        });
+        this.handleDragEnter = (ev) => {
+            var _a;
+            ev.preventDefault();
+            this.dragOver = true;
+            const item = (_a = Array.from(ev.dataTransfer.items)) === null || _a === void 0 ? void 0 : _a[0];
+            if (item && this.isValidFile(item.type)) {
+                this.dragError = true;
+            }
+            this.cpslOnDragEnter.emit(ev);
+        };
+        this.handleDragLeave = (ev) => {
+            ev.preventDefault();
+            this.dragOver = false;
+            this.dragError = false;
+            this.cpslOnDragLeave.emit(ev);
+        };
+        this.handleInputChange = (ev) => __awaiter$1(this, void 0, void 0, function* () {
+            ev.preventDefault();
+            const input = this.inputEl;
+            if (Boolean(input.files.length)) {
+                const file = input.files[0];
+                if (this.isValidFile(file.type)) {
+                    yield this.addFile(file);
+                }
+            }
+        });
+        this.isValidFile = (type) => {
+            var _a;
+            if (Boolean((_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.length) ? !this.fileTypes.includes(type) : false) {
+                return false;
+            }
+            return true;
+        };
+        this.addFile = (file) => __awaiter$1(this, void 0, void 0, function* () {
+            this.file = file;
+            this.cpslFileChange.emit(file);
+            this.uploadError = false;
+            this.isUploading = true;
+            const uploadSuccess = Boolean(this.uploadFile) ? yield this.uploadFile(file) : true;
+            if (!uploadSuccess) {
+                this.uploadError = true;
+                const input = this.inputEl;
+                input.value = '';
+            }
+            this.isUploading = false;
+        });
+        this.removeFile = (e) => {
+            e.preventDefault();
+            this.file = undefined;
+            const input = this.inputEl;
+            input.value = '';
+            this.cpslFileRemoved.emit();
+        };
+        this.file = undefined;
+        this.dragOver = undefined;
+        this.dragError = undefined;
+        this.isUploading = undefined;
+        this.uploadError = undefined;
+        this.errorText = undefined;
+        this.externalFilename = undefined;
+        this.externalSrc = undefined;
+        this.fileTypes = undefined;
+        this.helperText = undefined;
+        this.label = undefined;
+        this.required = false;
+        this.showOptionalLabel = false;
+        this.uploadFile = undefined;
+    }
+    get inputEl() {
+        return this.el.shadowRoot.getElementById(this.inputId);
+    }
+    get FileContent() {
+        var _a;
+        const hasFile = Boolean(this.file) || Boolean(this.externalSrc);
+        const isUploading = this.isUploading;
+        const error = this.uploadError;
+        const text = !hasFile ? (h(Fragment, null, 'Drag file here or ', h("cpsl-text", { class: "inline-text", variant: "bodyXS" }, "upload file"))) : isUploading ? (`${this.file.name} is uploading`) : error ? ('Upload Failed') : (((_a = this.file) === null || _a === void 0 ? void 0 : _a.name) || this.externalFilename || '');
+        const TopElement = !hasFile ? (h("cpsl-icon", { icon: "image" })) : isUploading ? (h("cpsl-spinner", null)) : error ? (h("cpsl-icon", { icon: "close" })) : (h("img", { class: "sample-img", src: Boolean(this.file) ? URL.createObjectURL(this.file) : this.externalSrc, alt: "Sample Image" }));
+        return (h(Fragment, null, TopElement, h("span", { class: "sample-image-name-container" }, h("cpsl-text", { class: "sample-image-name", variant: "bodyXS" }, text), hasFile && !error && !isUploading && h("cpsl-icon", { icon: "close", onClick: this.removeFile }))));
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: '762561d4a888f40c6ef7914d44d3b5d29952c6eb' }, this.label && (h("label", { key: 'ca7847701395b4334d14e34cf065f943bec0d1af', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '370ca2d812f44f13b20383f303ca7d6daefdfd84', name: "label" }), h("div", { key: 'bece00a4a0a32bb37c4573775cbbe5c89ae3030e', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '32220f003406b15f94c68337ab321b6b07151be0', class: { 'label-container': true } }, h("slot", { key: '88a46b859592b1dbbea964d871ef36d77760da78', name: "left-content" })), h("div", { key: 'd4cbd5c095c8ba522c51a451d749d20c0fd7a5ab', class: { 'file-container': true } }, this.FileContent), h("input", { key: '3798b69f5670e18e9fa4dc34ae7ca661cd6f9294', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { key: '9217cfba0fabd2d8cad86ba34fd69f15cf0186a0', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '0e6f9be6e2042f72b0438cc5d979b21eb9f47356' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
+    }
+    get el() { return getElement(this); }
+};
+let inputIds$2 = 0;
+CpslFileUpload.style = CpslFileUploadStyle0;
+
 const cpslIconCss = ":host{display:block;--height:24px;--width:24px;--icon-color:var(--cpsl-color-text-primary);--icon-fill-color:var(--cpsl-color-text-primary);--icon-stroke-color:var(--cpsl-color-text-primary);width:var(--width);height:var(--height)}:host div{display:flex;width:var(--width);height:var(--height);color:var(--icon-color)}:host svg{width:var(--width);height:var(--height)}:host svg .background-16{fill:var(--cpsl-color-background-16)}:host svg .foreground-0{fill:var(--cpsl-color-foreground-0)}:host svg .fill{fill:var(--icon-fill-color)}:host svg .stroke{stroke:var(--icon-stroke-color)}:host img{width:var(--width);height:var(--height);object-fit:contain}";
 const CpslIconStyle0 = cpslIconCss;
 
@@ -5078,12 +5273,12 @@ const CpslIcon = class {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '5e1a7143534342f6c3d79ccf1edcc40aa903773a', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: 'fe58523210b92237924bd768007f3a191b401a57', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
 };
 CpslIcon.style = CpslIconStyle0;
 
-const cpslInputCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-input-border-placeholder);--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:12px;--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)}: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)}.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}: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(--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 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 {
@@ -5094,7 +5289,7 @@ const CpslInput = class {
         this.cpslBlur = createEvent(this, "cpslBlur", 7);
         this.cpslFocus = createEvent(this, "cpslFocus", 7);
         this.cpslPaste = createEvent(this, "cpslPaste", 7);
-        this.inputId = `cpsl-input-${inputIds++}`;
+        this.inputId = `cpsl-input-${inputIds$1++}`;
         this.onInput = (ev) => {
             const input = ev.target;
             if (Boolean(input)) {
@@ -5208,9 +5403,7 @@ const CpslInput = class {
         }
     }
     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;
@@ -5218,9 +5411,6 @@ 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"]');
     }
@@ -5229,14 +5419,14 @@ const CpslInput = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '323cd77e6a96a6259c294cf30c1acfc8b638295d', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '645781496038445cb011ba003a54ca5a63d80731', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'c32784e17782d18f44d5e1adda605ca47bf6937c', name: "start" }), h("input", { key: 'bbe3efcc48eb71aaf6d6f58e32fc466a19bb06ae', class: "native-input", id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: '646727d4e5be630242778f6df967810be7dea7a6', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (h(Host, { key: '9e8eece493074613305b6303e9c095b89ee08eb0', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { key: '97ee8423a02cd2547b764609751fbd301e21ccc9', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '933c4863226a6de14910cfe14b5e48015e6a04fd', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'a69f5c53c2fabc038aca226fb4a3965c1516fe53', name: "start" }), h("input", { key: 'f4a7e5234fe5d6b32e14bc226791d5aea9df151d', class: "native-input", ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: '6c74cecde29d9f1f9bf00a05e53197324f83f2bf', name: "end" })), (this.errorText || this.helperText) && (h("div", { key: '245c0413133d70b909415f10cdbfbd21ed03da61', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'a96f3e844d74ba481418e375ccaeab85cfb92836' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "disabled": ["handleDisable"]
     }; }
 };
-let inputIds = 0;
+let inputIds$1 = 0;
 CpslInput.style = CpslInputStyle0;
 
 function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
@@ -14385,7 +14575,7 @@ Draggable.zIndex = 1000;
 Draggable.version = "3.12.5";
 _getGSAP() && gsap.registerPlugin(Draggable);
 
-const cpslModalCss = ":host{--container-width:360px;--container-gap:16px;--container-border-radius:var(--cpsl-border-radius-modal);--container-border-width:1px;--container-border-color:var(--cpsl-color-modal-border);--container-background-color:var(--cpsl-color-modal-surface-footer);--container-padding-bottom:16px;--container-box-shadow:0px 2px 4px 0px var(--cpsl-color-alpha-black-8);--inner-container-background-color:var(--cpsl-color-modal-surface-main);--inner-container-border-radius:var(--cpsl-border-radius-modal);--inner-container-box-shadow:0px 1px 2px 0px var(--cpsl-color-alpha-black-8);--inner-container-padding-top:16px;--inner-container-padding-end:16px;--inner-container-padding-bottom:24px;--inner-container-padding-start:16px;--inner-container-margin-bottom:16px;display: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-color: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-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);
@@ -14430,6 +14620,7 @@ const CpslModal = class {
             this.initDraggable();
             gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
         });
+        this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;
         this.footerSlotEl.addEventListener('slotchange', () => {
             if (this.footerSlotEl.assignedNodes().length >= 1) {
                 this.hasFooter = true;
@@ -14651,7 +14842,7 @@ const CpslNavButtonGroup = class {
         return this.el.querySelectorAll('&> *:not(cpsl-button)');
     }
     render() {
-        return (h(Host, { key: '4de8526be6448d13688e491a0d460557939fe83b' }, h("slot", { key: '633ee1b8e1e637171e8fd55b0375df99bb9d4607' })));
+        return (h(Host, { key: 'e677688e630bcbfa89cd8cff36fd84a4bdc1a627' }, h("slot", { key: 'd0c04a917b6818e7b40cdae32fe19e158da2f38d' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14660,7 +14851,7 @@ const CpslNavButtonGroup = class {
 };
 CpslNavButtonGroup.style = CpslNavButtonGroupStyle0;
 
-const cpslOverlayCss = ":host{position:fixed;width:100%;height:100%;inset:0px;z-index:10001;opacity:0%;display:none;background-color:var(--cpsl-color-alpha-black-50)}:host(.over-modal){z-index:10005}";
+const cpslOverlayCss = ":host{position:fixed;width:100%;height:100%;inset:0px;z-index:10001;opacity:0%;display:none;background: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 {
@@ -14691,7 +14882,7 @@ const CpslOverlay = class {
         }
     }
     render() {
-        return (h(Host, { key: '7e2c644351871bd6d49b477302635ee51b57848b', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: 'd21ebec32fbc75066a5fd3c4107ff48fd6a9ee91' })));
+        return (h(Host, { key: 'f0a39fa80559007fa5312ca2d88dbbb8d6a65adf', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: '4ff06458ac6e33f80c252afe9215d7e084a1f8d8' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14777,7 +14968,7 @@ const CpslPagination = class {
                 filteredPages.push(this.totalPages - 1);
             }
         }
-        return (h(Host, { key: 'ac3681eabdc35a5c620713a722619b7e5f52e2e3' }, h("cpsl-button-group", { key: '05f7fcfb5ca4edf4de561357ec16fe2fd5bdf9d8', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '613f70869b90aad3c5973b7c55270e3088335ff9', onClick: this.handlePrevClick }, h("cpsl-icon", { key: '458e036ab72bd2a8fc57bb8bcc0be614ad07aa72', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '2dc257023f6d4270a79bf88399e3b27ad538b928', onClick: this.handleNextClick }, h("cpsl-icon", { key: '716ad78992c6e56c3855d8dc544fc19fefa01804', class: "icon", icon: "arrowNarrow" })))));
+        return (h(Host, { key: 'a606e9d711b7e5d3154126e0a9b9f87c192a9e1e' }, h("cpsl-button-group", { key: '7ac1f34cb86fa73897bb58044d9f4c2a76e4b06c', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '8e6ec83618d2b44610155e25ec2c54e079810aec', onClick: this.handlePrevClick }, h("cpsl-icon", { key: '98f6960d6d1803d391e30f5b4bea63205a2b12c8', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '6d60771c0040ce028d2fe43c779f58a31a248bf8', onClick: this.handleNextClick }, h("cpsl-icon", { key: '770e0133a563622daa7683d65d289ec5247ec265', class: "icon", icon: "arrowNarrow" })))));
     }
     static get watchers() { return {
         "currentPage": ["watchChange"]
@@ -14785,7 +14976,7 @@ const CpslPagination = class {
 };
 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-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 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 {
@@ -14794,12 +14985,242 @@ const CpslPill = class {
         this.text = undefined;
     }
     render() {
-        return (h(Host, { key: 'cfb75db6154db11d15a26f253686793fd21beccc' }, h("div", { key: '00381588b8d9e34201b439a7fd4233069a62f2f5', class: "pill-container" }, h("span", { key: '4fa5134cc5f873373ca8a2102d4a88ef6455ff7d' }, this.text))));
+        return (h(Host, { key: '788ab049c90438152e472230dbdfb6c5204d1694' }, h("div", { key: 'c8da2bc450f16a9dab6bb25af747cc047908ef2e', class: "pill-container" }, h("span", { key: '71013ebcc7c8253a3370ca3abe6f1094b101e602' }, this.text))));
     }
 };
 CpslPill.style = CpslPillStyle0;
 
-const cpslProgressIndicatorCss = ":host{--step-height:3px;--step-active-color:var(--cpsl-color-progressIndicator-active);--step-next-color:var(--cpsl-color-progressIndicator-next);--step-previous-color:var(--cpsl-color-progressIndicator-previous);display:flex;align-items:center;justify-content:center;gap:4px}.step{background-color:var(--step-next-color);border-radius:var(--step-border-radius, calc(var(--step-height) * 2));height:var(--step-height);flex:1;transition:all 0.5s}.previous{background-color:var(--step-previous-color)}.active{background-color:var(--step-active-color);flex:2}";
+const cpslPopoverCss = ":host{position:fixed;display:block;z-index:-1;overflow:auto}:host(.open){z-index:10006}.container{visibility:hidden}.open{visibility:visible;z-index:10006}:host(.transform-h-left){transform:translateX(0)}:host(.transform-h-center){transform:translateX(-50%)}:host(.transform-h-right){transform:translateX(-100%)}:host(.transform-v-top){transform:translateY(0)}:host(.transform-v-center){transform:translateY(-50%)}:host(.transform-v-bottom){transform:translateY(-100%)}";
+const CpslPopoverStyle0 = cpslPopoverCss;
+
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const CpslPopover = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslOpen = createEvent(this, "cpslOpen", 7);
+        this.cpslClose = createEvent(this, "cpslClose", 7);
+        this.triggerClicked = false;
+        this.configureTriggerInteraction = () => {
+            const { trigger, triggerAction, destroyTriggerInteraction } = this;
+            if (Boolean(destroyTriggerInteraction)) {
+                destroyTriggerInteraction();
+            }
+            if (trigger === undefined) {
+                return;
+            }
+            this.triggerEl = document.getElementById(trigger);
+            if (!Boolean(this.triggerEl)) {
+                console.error(`A trigger element with the ID "${trigger}" was not found in the DOM.`, this.el);
+                return;
+            }
+            let triggerCallbacks = [];
+            switch (triggerAction) {
+                case 'hover':
+                    triggerCallbacks = [
+                        {
+                            eventName: 'mouseenter',
+                            callback: () => __awaiter(this, void 0, void 0, function* () {
+                                this.present();
+                            }),
+                        },
+                        {
+                            eventName: 'mouseleave',
+                            callback: () => {
+                                if (!this.containerEl.matches(':hover')) {
+                                    this.close();
+                                }
+                                else {
+                                    this.containerEl.addEventListener('mouseleave', () => {
+                                        this.close();
+                                    });
+                                }
+                            },
+                        },
+                        {
+                            eventName: 'click',
+                            callback: (ev) => ev.stopPropagation(),
+                        },
+                    ];
+                    break;
+                case 'click':
+                default:
+                    triggerCallbacks = [
+                        {
+                            eventName: 'mousedown',
+                            callback: e => {
+                                if (this.preventBlur) {
+                                    e.preventDefault();
+                                }
+                                this.present();
+                            },
+                        },
+                    ];
+                    break;
+            }
+            triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));
+            this.destroyTriggerInteraction = () => {
+                triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));
+            };
+        };
+        this.setPosition = () => {
+            var _a;
+            const anchorEl = (_a = this.anchorEl) !== null && _a !== void 0 ? _a : this.triggerEl;
+            if (Boolean(anchorEl)) {
+                const windowWidth = window.innerWidth;
+                const windowHeight = window.innerHeight;
+                const elWidth = this.el.clientWidth;
+                const elHeight = this.el.clientHeight;
+                const { top, left, height, width } = anchorEl.getBoundingClientRect();
+                switch (this.anchorOriginHorizontal) {
+                    case 'left': {
+                        this.positionX = left;
+                        break;
+                    }
+                    case 'center': {
+                        this.positionX = left + width / 2;
+                        break;
+                    }
+                    case 'right': {
+                        this.positionX = left + width;
+                        break;
+                    }
+                }
+                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.disabled) {
+                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.anchorEl = undefined;
+        this.anchorOriginHorizontal = 'left';
+        this.anchorOriginVertical = 'bottom';
+        this.autoWidth = true;
+        this.disabled = undefined;
+        this.preventBlur = undefined;
+        this.transformOriginHorizontal = 'left';
+        this.transformOriginVertical = 'top';
+        this.triggerAction = 'click';
+        this.trigger = undefined;
+        this.windowPadding = 16;
+    }
+    closePopover() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.close();
+        });
+    }
+    onTriggerChange() {
+        this.configureTriggerInteraction();
+    }
+    onAnchorChange() {
+        this.setPosition();
+    }
+    onOpenChange() {
+        if (this.open) {
+            window.addEventListener('click', this.handleClickOutside);
+            window.addEventListener('scroll', () => this.setPosition());
+        }
+        else {
+            window.removeEventListener('click', this.handleClickOutside);
+            window.addEventListener('scroll', () => this.setPosition());
+        }
+    }
+    componentDidLoad() {
+        this.configureTriggerInteraction();
+    }
+    get containerEl() {
+        var _a, _b;
+        return (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('container');
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'a5846acd01f652ff06d0f8fb842ab1c204b02c10', class: {
+                'open': this.open,
+                'transform-h-left': this.transformOriginHorizontal === 'left',
+                'transform-h-center': this.transformOriginHorizontal === 'center',
+                'transform-h-right': this.transformOriginHorizontal === 'right',
+                'transform-v-top': this.transformOriginVertical === 'top',
+                'transform-v-center': this.transformOriginVertical === 'center',
+                'transform-v-bottom': this.transformOriginVertical === 'bottom',
+            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '579332ea7cca439f8f331575e229c853109d0a06', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '92d5d72dc49d360b12a08028065ddc6e843a1b19' }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "trigger": ["onTriggerChange"],
+        "triggerAction": ["onTriggerChange"],
+        "preventBlur": ["onTriggerChange"],
+        "anchorOriginHorizontal": ["onAnchorChange"],
+        "anchorOriginVertical": ["onAnchorChange"],
+        "open": ["onOpenChange"]
+    }; }
+};
+CpslPopover.style = CpslPopoverStyle0;
+
+const cpslProgressIndicatorCss = ":host{--step-height:3px;--step-active-color:var(--cpsl-color-progressIndicator-active);--step-next-color:var(--cpsl-color-progressIndicator-next);--step-previous-color:var(--cpsl-color-progressIndicator-previous);display:flex;align-items:center;justify-content:center;gap:4px}.step{background:var(--step-next-color);border-radius:var(--step-border-radius, calc(var(--step-height) * 2));height:var(--step-height);flex:1;transition:all 0.5s}.previous{background:var(--step-previous-color)}.active{background:var(--step-active-color);flex:2}";
 const CpslProgressIndicatorStyle0 = cpslProgressIndicatorCss;
 
 const CpslProgressIndicator = class {
@@ -14833,7 +15254,7 @@ var qrCodeStyling = {exports: {}};
 
 const QRCodeStyling = /*@__PURE__*/getDefaultExportFromCjs(qrCodeStyling.exports);
 
-const cpslQrCodeCss = ":host{--qr-color:var(--cpsl-color-qr-fill);--qr-background-color:var(--cpsl-color-qr-background);--qr-border-color:var(--cpsl-color-qr-border);--qr-border-radius:var(--cpsl-border-radius-qr-code);--qr-border-width:1px;--qr-box-shadow:0px 1px 2px var(--cpsl-color-alpha-black-10);display:inline-block}.qr-container{-webkit-padding-start:var(--qr-padding-start);padding-inline-start:var(--qr-padding-start);-webkit-padding-end:var(--qr-padding-end);padding-inline-end:var(--qr-padding-end);padding-top:var(--qr-padding-top);padding-bottom:var(--qr-padding-bottom);display:flex;color:var(--qr-color);border-style:solid;border-width:var(--qr-border-width);border-color:var(--qr-border-color);border-radius:var(--qr-border-radius);background-color:var(--qr-background-color);box-shadow:var(--qr-box-shadow)}";
+const cpslQrCodeCss = ":host{--qr-color:var(--cpsl-color-qr-fill);--qr-background-color:var(--cpsl-color-qr-background);--qr-border-color:var(--cpsl-color-qr-border);--qr-border-radius:var(--cpsl-border-radius-qr-code);--qr-border-width:1px;--qr-box-shadow:0px 1px 2px var(--cpsl-color-alpha-black-10);display:inline-block}.qr-container{-webkit-padding-start:var(--qr-padding-start);padding-inline-start:var(--qr-padding-start);-webkit-padding-end:var(--qr-padding-end);padding-inline-end:var(--qr-padding-end);padding-top:var(--qr-padding-top);padding-bottom:var(--qr-padding-bottom);display:flex;color:var(--qr-color);border-style:solid;border-width:var(--qr-border-width);border-color:var(--qr-border-color);border-radius:var(--qr-border-radius);background:var(--qr-background-color);box-shadow:var(--qr-box-shadow)}";
 const CpslQrCodeStyle0 = cpslQrCodeCss;
 
 const CpslQrCode = class {
@@ -14869,13 +15290,13 @@ const CpslQrCode = class {
         qrCode.append(container);
     }
     render() {
-        return (h(Host, { key: '249236c83c51fa7b3bf66c74a3e122f945288313' }, h("div", { key: 'cd899dac84d029d89648572584ffddae0c98ab37', id: "qr-container", class: "qr-container" })));
+        return (h(Host, { key: '68a11eb026f62f795a769b4bb5b91509bda57c55' }, h("div", { key: 'da47238221fed966d47e50471af27d0eaa407e2a', id: "qr-container", class: "qr-container" })));
     }
     get el() { return getElement(this); }
 };
 CpslQrCode.style = CpslQrCodeStyle0;
 
-const 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-color:var(--container-background-color-default);border-color:var(--container-border-color-default);transition:all 0.15s ease-in-out}span.container.checked{background-color:var(--container-background-color-checked);border-color:var(--container-border-color-checked);border-width:var(--container-border-width-checked)}";
+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 {
@@ -14890,12 +15311,150 @@ const CpslRadio = class {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: '9c027812c817ec008e28b66fb74ca35e407f2572' }, h("input", { key: 'da445cfc2c18da5852cd21d54daf14897d3bc13a', type: "radio", checked: this.checked }), h("span", { key: '2f432d7c3a6f33ea7581a8c62dd84078de1904d1', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
+        return (h(Host, { key: '43659e8ba43bfe8a53578d357d2ab9a3c3bcbd96' }, h("input", { key: 'dc9c9328be5a09b00b4e02b74934ffa02312441d', type: "radio", checked: this.checked }), h("span", { key: '87436a09ace01394e860786950a916efb26a9bb7', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
     }
 };
 CpslRadio.style = CpslRadioStyle0;
 
-const 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 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;z-index:-1;cursor:pointer}input.disabled{cursor:default}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-select-border-placeholder);--select-color:var(--cpsl-color-text-secondary)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--select-background-color:var(--select-background-color-disabled);--select-color:var(--cpsl-color-text-disabled)}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-select-border-active);--container-background-color:var(--cpsl-color-select-surface-default)}.select-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);cursor:pointer;border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}.selected-container-content{flex:1}.chevron{transition:transform 0.3s ease;transform:rotate(180deg);--icon-color:var(--cpsl-color-text-disabled)}.chevron.open{transform:rotate(0deg);--icon-color:var(--cpsl-color-text-primary)}.chevron.has-value{--icon-color:var(--cpsl-color-text-primary)}.selected-text{color:var(--cpsl-color-text-primary)}.selected-text.placeholder{color:var(--cpsl-color-text-disabled)}.dropdown{margin-top:var(--dropdown-margin-top);border-style:solid;border-width:var(--dropdown-border-width);border-color:var(--dropdown-border-color);border-radius:var(--dropdown-border-radius);overflow:hidden}.dropdown ::slotted(*:last-child){--container-border-width:0px}.dropdown-inner{overflow:auto;scrollbar-width:thin}";
+const CpslSelectStyle0 = cpslSelectCss;
+
+const CpslSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslBlur = createEvent(this, "cpslBlur", 7);
+        this.cpslFocus = createEvent(this, "cpslFocus", 7);
+        this.cpslSelectValueChange = createEvent(this, "cpslSelectValueChange", 7);
+        this.inputId = `cpsl-select-${inputIds++}`;
+        this.resetStyles = () => {
+            document.documentElement.style.removeProperty('overflow');
+            document.body.style.removeProperty('padding-right');
+        };
+        this.measureScrollbarWidth = () => {
+            const scrollbox = document.createElement('div');
+            scrollbox.style.overflow = 'scroll';
+            document.body.appendChild(scrollbox);
+            const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
+            document.body.removeChild(scrollbox);
+            return scrollBarWidth;
+        };
+        this.onBlur = (ev) => {
+            this.hasFocus = false;
+            this.popoverEl.closePopover();
+            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.handleClickOutside = (event) => {
+            if (this.hasFocus && !this.el.contains(event.target)) {
+                this.hasFocus = false;
+                window.removeEventListener('click', this.handleClickOutside);
+            }
+        };
+        this.handleClick = () => {
+            if (!this.disabled) {
+                this.hasFocus = true;
+                window.addEventListener('click', this.handleClickOutside);
+            }
+        };
+        this.anchorEl = undefined;
+        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;
+        document.documentElement.style.overflow = 'hidden';
+        document.body.style.paddingRight = `${this.measureScrollbarWidth()}px`;
+    }
+    onPopoverClose() {
+        this.popoverOpen = false;
+        this.resetStyles();
+    }
+    componentDidLoad() {
+        this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
+        this.anchorEl = this.el.shadowRoot.getElementById('select-container');
+        this.selectItem();
+    }
+    disconnectedCallback() {
+        this.resetStyles();
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h(Host, { key: 'f003552571504c992dff03463d3352c572bad02d', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '81f80a9308efd7381b72d79762f2e80b1efff675', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '87bce962cd77da2ed32a33a52e0823f9762e7e7a', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: '5af6624ddb7dc97b00a6e15491cf74ed09afe032', name: "selected-item" }), h("div", { key: '2aac4d90d8abe8a23a0e8e94705b13744806886a', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: '562d171bfca20d3520422ad6e8e216ea05cd68ed', class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: 'e492e0e95497bcd0c64ad6df39147b8b525fdd7c', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '174e62e95af2a23aea6daf8081b690069b8143d6', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: '22c98327b650ad5e355b65cf2a07170c691751d8', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '2212ea94c12e6612a3185e14f853ea543df7581a' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'a7b871c9da87ae9212dec7c0b8bd97ff3be4bafd', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '180fd8ef77b9bf1f6dcd2b59d5103f832a9f3cc3', class: "dropdown" }, h("div", { key: '55dce031838f22b5969912733ae15a60c7af0f49', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '127909f8c47c6b6c2dcd21140c7f98c33b24ea1e', name: "items" }))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selectedValue": ["onValueChange", "handleValueChange"]
+    }; }
+};
+let inputIds = 0;
+CpslSelect.style = CpslSelectStyle0;
+
+const cpslSelectItemCss = ":host{--outer-container-padding-start:8px;--outer-container-padding-end:8px;--outer-container-padding-top:8px;--outer-container-padding-bottom:8px;--container-background-color:var(--cpsl-color-select-surface-default);--container-hover-background-color:var(--cpsl-color-select-surface-hover);--container-border-radius:calc(var(--cpsl-border-radius-select) - 4px);--container-padding-start:8px;--container-padding-end:8px;--container-padding-top:8px;--container-padding-bottom:8px;display:block;font-family:var(--cpsl-font-family, inherit);cursor:pointer}.inner-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);background-color:var(--container-background-color);border-radius:var(--container-border-radius);height:100%;display:flex;align-items:center}.outer-container{-webkit-padding-start:var(--outer-container-padding-start);padding-inline-start:var(--outer-container-padding-start);-webkit-padding-end:var(--outer-container-padding-end);padding-inline-end:var(--outer-container-padding-end);padding-top:var(--outer-container-padding-top);padding-bottom:var(--outer-container-padding-bottom);background-color:var(--container-background-color)}.outer-container:hover>.inner-container{background-color:var(--container-hover-background-color)}.selected{background-color:var(--container-hover-background-color)}:host(.in-select-box){--container-background-color:transparent;--container-hover-background-color:transparent;--container-border-width:0px;--container-padding-start:0px;--container-padding-end:0px;--container-padding-top:0px;--container-padding-bottom:0px;flex:1;height:100%}";
+const CpslSelectItemStyle0 = cpslSelectItemCss;
+
+const CpslSelectItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslSelectItemClick = createEvent(this, "cpslSelectItemClick", 7);
+        this.handleItemClick = () => {
+            this.cpslSelectItemClick.emit(this.value);
+        };
+        this.selected = undefined;
+        this.value = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'd85478b3b2eaa5c99ba1f3dbc0e3aae6d368540c' }, h("div", { key: 'd13e45f3997cfbbc4042a2810c76eb9b71b15d22', class: "outer-container", onClick: this.handleItemClick }, h("div", { key: '5c9787fb9ad5b13740515386e269895d2c0ca91d', class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: '0fc1ff893cb3e5f53a99978f683b1e4f1fb15410' })))));
+    }
+};
+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 {
@@ -15015,7 +15574,7 @@ const CpslSlideButton = class {
         return this.el.shadowRoot.getElementById('end-icon');
     }
     render() {
-        return (h(Host, { key: 'ce820db689b1265c282d3f1571f4e7f5f401f855' }, h("div", { key: '6b1feb1979df007eff0652d0ab5b8e6dadb1d413', id: "slider-container", class: "slider-container" }, h("div", { key: '89bc7d66ac4ea9b5903832882ddba6aa140b6a1b', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '95961311d2e58de9771619f09382085af3fc935f', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '077f99524f8ebada535665e50b84d6faa523be85', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'e4de60ec93911da7db0d5b8744f842be4f2fe58a', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '64faf5178d56e37660a9818258aa1bd757bb9478', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '91f4b16cbdc4f230b10d3e2f331906936fb43e7f', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: '8d6555e7bedb77c97c6abd4eb537b1190c7b7f39', id: "end-text", class: "end-text" }, this.endText))));
+        return (h(Host, { key: 'aecef591819520c5abd43529f797a11d564bbf40' }, h("div", { key: '8d08c211ff7393aaf86569d3cb442216e1f78efd', id: "slider-container", class: "slider-container" }, h("div", { key: '072a8c587c34bf792d289cfa4490cd8564121a16', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '6f656942985f8c490bb96d99475373fe6978c0e0', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '0fcdc94813b54c9c32fdf7d5fc963448e0cf492a', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'f45c670469c80f5604c06c8182ef7c9fabc56200', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: 'bc987b8d1495bb731ead75497ae7c411534f7ff0', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'bd6ab1e1adaff366e5ebb2bf82415bab514c00e8', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: '0b94b997a625213645e737c77ad736663d41a844', id: "end-text", class: "end-text" }, this.endText))));
     }
     get el() { return getElement(this); }
 };
@@ -15031,18 +15590,18 @@ const CpslSpinner = class {
         this.speed = 1;
     }
     render() {
-        return (h(Host, { key: 'f4e9344be21951951c710806a75f532586f0ad84', style: {
+        return (h(Host, { key: '10ec2d7dc8b62b0819e4ff3f683b5b7c7a6dbf19', style: {
                 'height': `${this.size}px`,
                 'width': `${this.size}px`,
                 'animation': `spin ${this.speed}s linear infinite`,
                 '-webkit-animation': `spin ${this.speed}s linear infinite`,
                 '-moz-animation': `spin ${this.speed}s linear infinite`,
-            } }, h("svg", { key: '41e78e14a99896ee395fde9c23c08cafd7d737ff', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'b061382c44c35633987276b986871bb350f9cfe3', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '0f1b7ca48c926abe3244fe7e7e70dffc0ef4ce30', cx: "45", cy: "27", r: "5" }))));
+            } }, h("svg", { key: 'e88b02f99bbfe3677eafe55d75ee65f595e829c5', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'de3d33313d7509abeb7733c37d3ed99ca9894260', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '7e0edc7e3222dc95a8c62d3228aceeddaf51593b', 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-color: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-color:var(--container-background-color-checked);box-shadow:none}span.thumb{display:inline-block;position:relative;background-color: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-color:var(--thumb-background-color-checked);left:100%;transform:translateX(-100%)}";
+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 {
@@ -15055,7 +15614,7 @@ const CpslSwitch = class {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: '74a3c5fb6e54a87438ab0fe7c3b9f05ebefb783d' }, h("input", { key: '0415f006e830227c030d5d42199bcb3ce375051a', type: "checkbox", checked: this.checked }), h("span", { key: '61db3b2230704cf61f57aab1a952cd9f94892026', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, h("span", { key: '819dd65586f45cc5dba402b1acd64b9b5f4ef04e', class: { thumb: true, checked: this.checked } }))));
+        return (h(Host, { key: '1b25c42d27a45e0af756eadba475d15a8034d483' }, h("input", { key: 'fbb246d9b9fd5d3842bef147922095a36277ff0f', type: "checkbox", checked: this.checked }), h("span", { key: 'fe9356dec1f9b41b94cd5597b36ae6e1d5fce7ac', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, h("span", { key: '11d0ce011571a147912b400398ed8b78743d356c', class: { thumb: true, checked: this.checked } }))));
     }
 };
 CpslSwitch.style = CpslSwitchStyle0;
@@ -15087,20 +15646,18 @@ const CpslTab = class {
         }
     }
     render() {
-        return (h(Host, { key: '6d506e0c6eedecab0b0e61134f6ef99da64ffdc9', onClick: this.onTabClicked }, h("div", { key: '486e44a1e511d79125dd44ed244c767c8176ac65', class: { 'tab-container': true } }, h("slot", { key: '09ec342cf25149f89e2ccb338d86f161e9ebcc12' }))));
+        return (h(Host, { key: 'cc8785697e46574b6fdb1839098473bb3ca17866', onClick: this.onTabClicked }, h("div", { key: '2c6451937db4c48fa11bd610bfd344154eced8e6', class: { 'tab-container': true } }, h("slot", { key: '1dc724e299adbc96024aa6636f94551b09853c2a' }))));
     }
     get el() { return getElement(this); }
 };
 CpslTab.style = CpslTabStyle0;
 
-const cpslTableCss = ":host{--container-background-radius:var(--cpsl-border-radius-table-container);--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-no-content-padding-top:24px;--container-no-content-padding-bottom:24px;--container-no-content-padding-start:24px;--container-no-content-padding-end:24px;--container-footer-padding-top:16px;--container-footer-padding-bottom:16px;--container-footer-padding-start:24px;--container-footer-padding-end:24px;--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:flex}.table-container{display:flex;flex-direction:column;flex:1;overflow:hidden;border-radius:var(--container-border-radius);border:var(--container-border-width) solid var(--container-border-color);background-color:var(--container-background-color)}.table-wrapper{overflow:auto}.table{width:100%;border-spacing:0;border-collapse:collapse}.table th{-webkit-padding-start:var(--table-header-padding-start);padding-inline-start:var(--table-header-padding-start);-webkit-padding-end:var(--table-header-padding-end);padding-inline-end:var(--table-header-padding-end);padding-top:var(--table-header-padding-top);padding-bottom:var(--table-header-padding-bottom);background-color:var(--table-header-background-color);border-bottom:var(--table-header-border-width) solid var(--table-header-border-color)}.table td{-webkit-padding-start:var(--table-content-padding-start);padding-inline-start:var(--table-content-padding-start);-webkit-padding-end:var(--table-content-padding-end);padding-inline-end:var(--table-content-padding-end);padding-top:var(--table-content-padding-top);padding-bottom:var(--table-content-padding-bottom)}.table tr{border-bottom:var(--table-content-border-width) solid var(--table-content-border-color)}.table tr:last-child{border-bottom:none}.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(--table-header-border-width) solid var(--table-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(--table-content-border-width) solid var(--table-content-border-color)}.container-no-content{-webkit-padding-start:var(--container-no-content-padding-start);padding-inline-start:var(--container-no-content-padding-start);-webkit-padding-end:var(--container-no-content-padding-end);padding-inline-end:var(--container-no-content-padding-end);padding-top:var(--container-no-content-padding-top);padding-bottom:var(--container-no-content-padding-bottom)}.shown{display:block}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}";
+const cpslTableCss = ":host{--container-border-radius:var(--cpsl-border-radius-table-container);--container-border-color:var(--cpsl-color-background-16);--container-background-color:var(--cpsl-color-background-0);--container-border-width:1px;--container-header-padding-top:24px;--container-header-padding-bottom:24px;--container-header-padding-start:24px;--container-header-padding-end:24px;--container-header-border-width:1px;--container-header-border-color:var(--cpsl-color-background-16);--container-footer-padding-top:16px;--container-footer-padding-bottom:16px;--container-footer-padding-start:24px;--container-footer-padding-end:24px;--container-footer-border-width:1px;--container-footer-border-color:var(--cpsl-color-background-8);--table-header-padding-top:16px;--table-header-padding-bottom:16px;--table-header-padding-start:24px;--table-header-padding-end:24px;--table-header-background-color:var(--cpsl-color-background-4);--table-header-border-color:var(--cpsl-color-background-16);--table-header-border-width:1px;--table-content-padding-top:16px;--table-content-padding-bottom:16px;--table-content-padding-start:24px;--table-content-padding-end:24px;--table-content-border-color:var(--cpsl-color-background-8);--table-content-border-width:1px;display:block}:host cpsl-card{height:100%;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:var(--container-border-width);--card-border-color:var(--container-border-color);--card-border-radius:var(--container-border-radius);--card-background-color:var(--container-background-color)}:host cpsl-card::part(card-container){height:100%;display:flex;flex-direction:column}.content{flex:1;overflow:auto}.table-wrapper{overflow:auto;height:100%}.container-header{display:none;-webkit-padding-start:var(--container-header-padding-start);padding-inline-start:var(--container-header-padding-start);-webkit-padding-end:var(--container-header-padding-end);padding-inline-end:var(--container-header-padding-end);padding-top:var(--container-header-padding-top);padding-bottom:var(--container-header-padding-bottom);border-bottom:var(--container-header-border-width) solid var(--container-header-border-color)}.container-footer{display:none;-webkit-padding-start:var(--container-footer-padding-start);padding-inline-start:var(--container-footer-padding-start);-webkit-padding-end:var(--container-footer-padding-end);padding-inline-end:var(--container-footer-padding-end);padding-top:var(--container-footer-padding-top);padding-bottom:var(--container-footer-padding-bottom);border-top:var(--container-footer-border-width) solid var(--container-footer-border-color)}.shown{display:block}";
 const CpslTableStyle0 = cpslTableCss;
 
 const CpslTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.columns = undefined;
-        this.rows = undefined;
     }
     get containerHeaderEl() {
         return this.el.querySelector('[slot="header"]');
@@ -15109,25 +15666,13 @@ const CpslTable = class {
         return this.el.querySelector('[slot="footer"]');
     }
     render() {
-        var _a;
-        return (h(Host, { key: '8ff024bee3c372cff775b8ecc68be3ee884eae3f' }, h("div", { key: 'cea1971fa6faf622f72a6ec103bcd6c6df81a457', class: "table-container", part: "table-container" }, h("div", { key: '191fbeab85091a081e6bacc76ea3a8f52e342c0d', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: 'caf8cb186cb311b7db83f65e8bad15ee9ecf8cb8', name: "header" })), h("div", { key: 'b0d534df26ab4784fa89e8b1e6b74b6ea973b203', class: "table-wrapper", part: "table-wrapper" }, Boolean((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length) ? (h("table", { class: "table" }, h("thead", null, h("tr", null, this.columns.map(col => {
-            var _a;
-            const align = (_a = col.align) !== null && _a !== void 0 ? _a : 'left';
-            return (h("th", { class: { 'text-center': align === 'center', 'text-right': align === 'right', 'text-left': align === 'left' }, id: col.field, scope: "col" }, h("cpsl-text", { variant: "bodyXS", weight: "medium" }, col.headerName)));
-        }))), h("tbody", null, this.rows.map(row => {
-            return (h("tr", { style: { height: Boolean(row.height) ? `${row.height}px` : `80px` } }, this.columns.map(col => {
-                var _a;
-                const align = (_a = col.align) !== null && _a !== void 0 ? _a : 'left';
-                const value = Boolean(col.valueGetter) ? col.valueGetter(row[col.field], row) : row[col.field];
-                return (h("td", { class: { 'text-center': align === 'center', 'text-right': align === 'right', 'text-left': align === 'left' } }, Boolean(col.renderCell) ? (col.renderCell(value, row)) : (h("cpsl-text", { variant: "bodyXS", weight: "medium" }, value))));
-            })));
-        })))) : (h("div", { class: { 'container-no-content': true } }, h("slot", { name: "no-content" })))), h("div", { key: '5ac2bfcfdebca316cd61b39826772819ccfe5444', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: 'f2506b2260272276a49ebd98c636064b148bccaa', name: "footer" })))));
+        return (h(Host, { key: '69d28584233c9f7545be8068c6f6fe5c6698d36f' }, h("cpsl-card", { key: 'fe1cdd5e9b0332d6056a38d32239057a252909e1', part: "table-container" }, h("div", { key: 'fd8eba0d9ebb48efb45617da3884d4a330a42704', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '8aaf689f820bc2c6732058b9d60a16d34974f0f0', name: "header" })), h("div", { key: '54610dd3abedc4f1214308a8b1f57d5f41b4d530', class: "content", part: "content" }, h("slot", { key: '49b369b546a08d25c85573e9807a4dd730a3e5e6', name: "content" })), h("div", { key: 'dcfb4bcbe1ad526bf07f4717ac4089711a8e4e70', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: '4c60a98ad1098c77b8c14f8943fabe6141428fe0', name: "footer" })))));
     }
     get el() { return getElement(this); }
 };
 CpslTable.style = CpslTableStyle0;
 
-const cpslTabsCss = ":host{--tab-top-padding:5px;--tab-bottom-padding:5px;--tab-left-padding:16px;--tab-right-padding:16px;--tabs-border-radius:var(--cpsl-border-radius-tabs);--tabs-font-size:12px;--tabs-line-height:24px;--tabs-border-width:1px;--tabs-border-color:var(--cpsl-color-tabs-border);--tabs-background-color:var(--cpsl-color-tabs-background);--slider-background-color:var(--cpsl-color-tabs-slider-background);display:inline-block;max-width:100%;font-family:var(--cpsl-font-family, inherit)}:host(.full-width){display:block}.tabs-container{position:relative;display:flex;overflow-x:scroll;overflow-y:hidden;border-width:var(--tabs-border-width);border-style:solid;border-color:var(--tabs-border-color);border-radius:var(--tabs-border-radius);background-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 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 {
@@ -15180,7 +15725,7 @@ const CpslTabs = class {
         const tabsPosition = this.el.getBoundingClientRect();
         const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
         const selectedTabRect = this.selectedTabRect;
-        return (h(Host, { key: '372d02e7014c72414dc3282660ffab8a37df3a5e', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '762452e904014f3ea0d6e2bfb20d4277916bd296', class: "tabs-container" }, h("slot", { key: '52c4edd26157825c5bcd4cb5ffa30a6b5944d6ce' }), h("div", { key: '4b83b7a5c78bcf913622ddc7b8dc870ed001e93d', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
+        return (h(Host, { key: '8620de3b1cff8b60d0273f892ca7669cd53e479c', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '1441d0f383ae41c5293e2ced9a0c77b04e3cfd5f', class: "tabs-container" }, h("slot", { key: '78f40c6d6f4826bc83254349e35ef98faf3968ce' }), h("div", { key: '900ab917e38b71195cd498cc2ed05a90d48515ac', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15194,7 +15739,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 {
@@ -15230,9 +15775,10 @@ const CpslText = class {
         }
     }
     render() {
-        return (h(Host, { key: 'dfb056131c8efe94b9a5ec99a8dadd4669dde15f', class: {
+        return (h(Host, { key: '0f21250f8e8b38eeb854ba3b465c4ac0917b058b', 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',
@@ -15256,7 +15802,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 {
@@ -15266,11 +15812,11 @@ const CpslTileButton = class {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: 'c4aee36001539cabc1965e193962701a2f5f7ade' }, h("button", { key: '76e0f5b921f2b6c2086610a8c4b1e48dc85c751e', class: "button-native" }, h("cpsl-icon", { key: '379e1ba5fe8ee4bf089ce84d8ce3eaa0eb32b214', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'e09443c7527e061ea752b6ebe7abc6152ae61783' }))));
+        return (h(Host, { key: 'f7d808cefadce272235872ba05cd60f9c0bffc3c' }, h("button", { key: '47e808a5ed0bdb6e0705d746844f74ce7ad07620', class: "button-native" }, h("cpsl-icon", { key: 'ba374a65bee6433b96d2f3c8abbe1da51f9172af', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b5f55bdcec9566625f7c7a9567a933ff86815d6c' }))));
     }
 };
 CpslTileButton.style = CpslTileButtonStyle0;
 
-export { CpslAlert as cpsl_alert, CpslAppBar as cpsl_app_bar, CpslAvatar as cpsl_avatar, CpslButton as cpsl_button, CpslButtonGroup as cpsl_button_group, CpslCard as cpsl_card, CpslCheckbox as cpsl_checkbox, CpslCodeInput as cpsl_code_input, CpslDivider as cpsl_divider, CpslDrawer as cpsl_drawer, CpslDropdown as cpsl_dropdown, CpslIcon as cpsl_icon, CpslInput as cpsl_input, CpslModal as cpsl_modal, CpslNavButtonGroup as cpsl_nav_button_group, CpslOverlay as cpsl_overlay, CpslPagination as cpsl_pagination, CpslPill as cpsl_pill, CpslProgressIndicator as cpsl_progress_indicator, CpslQrCode as cpsl_qr_code, CpslRadio as cpsl_radio, CpslSlideButton as cpsl_slide_button, CpslSpinner as cpsl_spinner, CpslSwitch as cpsl_switch, CpslTab as cpsl_tab, CpslTable as cpsl_table, CpslTabs as cpsl_tabs, CpslText as cpsl_text, CpslTileButton as cpsl_tile_button };
+export { CpslAlert as cpsl_alert, CpslAppBar as cpsl_app_bar, CpslAvatar as cpsl_avatar, CpslButton as cpsl_button, CpslButtonGroup as cpsl_button_group, CpslCard as cpsl_card, CpslCheckbox as cpsl_checkbox, CpslCodeInput as cpsl_code_input, CpslDivider as cpsl_divider, CpslDrawer as cpsl_drawer, CpslDropdown as cpsl_dropdown, CpslFileUpload as cpsl_file_upload, CpslIcon as cpsl_icon, CpslInput as cpsl_input, CpslModal as cpsl_modal, CpslNavButtonGroup as cpsl_nav_button_group, CpslOverlay as cpsl_overlay, CpslPagination as cpsl_pagination, CpslPill as cpsl_pill, CpslPopover as cpsl_popover, CpslProgressIndicator as cpsl_progress_indicator, CpslQrCode as cpsl_qr_code, CpslRadio as cpsl_radio, CpslSelect as cpsl_select, CpslSelectItem as cpsl_select_item, CpslSlideButton as cpsl_slide_button, CpslSpinner as cpsl_spinner, CpslSwitch as cpsl_switch, CpslTab as cpsl_tab, CpslTable as cpsl_table, CpslTabs as cpsl_tabs, CpslText as cpsl_text, CpslTileButton as cpsl_tile_button };
 
-//# sourceMappingURL=cpsl-alert_29.entry.js.map
+//# sourceMappingURL=cpsl-alert_33.entry.js.map