@usecapsule/core-components 2.0.0 → 2.0.1-dev.dropdown

package/dist/capsule/p-cb8dc0a4.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as a,H as r}from"./p-6fb7c4d1.js";const c=":host{display:flex;flex-wrap:wrap}";const f=c;const e=class{constructor(a){s(this,a)}render(){return a(r,{key:"5f061d20ff017b612a4bada01c66992795cbabe1"},a("slot",{key:"ba35af68f6f00e8b12ff3c091935482beb10d27c"}))}};e.style=f;export{e as cpsl_row};
+//# sourceMappingURL=p-cb8dc0a4.entry.js.map

package/dist/cjs/capsule.cjs.js

@@ -19,7 +19,7 @@ const patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["cpsl-animation.cjs",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_17.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text"],[1,"cpsl-overlay",{"open":[4],"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["cpsl-animation.cjs",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_18.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"items":[16],"isOpen":[32],"selectedItem":[32]},null,{"isOpen":["handleOpenChange"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-overlay",{"open":[4],"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -149,6 +149,11 @@ 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"/>
+</svg>
+`;
+
 const Clock = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 6V12L16 14M22 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>
@@ -618,7 +623,7 @@ const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCo
 </svg>
 `;
 
-const Icons = { alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, check: Check, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, 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, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, redditBrand: RedditBrand, reddit: Reddit, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, youtubeBrand: YoutubeBrand, youtube: Youtube, };
+const Icons = { alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, check: Check, chevronUp: ChevronUp, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, 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, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, redditBrand: RedditBrand, reddit: Reddit, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, youtubeBrand: YoutubeBrand, youtube: Youtube, };
 
 const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-start:16px;--container-padding-end:16px;--container-font-size:clamp(12px, 0.75rem, 18px);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-alert);display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-background-color:var(--cpsl-color-alert-surface-error);--container-border-color:var(--cpsl-color-alert-border-error);--container-color:var(--cpsl-color-text-error)}.alert-container{border-radius:var(--container-border-radius);-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);font-size:var(--container-font-size);font-weight:500;display:flex;align-items:center;justify-content:center;gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);background-color:var(--container-background-color);color:var(--container-color)}.icon{display:flex}";
 const CpslAlertStyle0 = cpslAlertCss;
@@ -778,6 +783,58 @@ const CpslDivider = class {
 };
 CpslDivider.style = CpslDividerStyle0;
 
+const cpslDropdownCss = ":host{display:block;position:relative;font-family:Arial, sans-serif}.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;font:inherit;color:inherit}.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:absolute;list-style:none;padding:0;margin:0;border:1px solid #ccc;background:white;z-index:1000}.dropdown-options.open{display:block;border-radius:8px;border:1px solid #483e3e}.dropdown-options.open{display:block;margin-top:20px}.dropdown-options li{padding:6px;cursor:pointer;display:flex;align-items:center;border-bottom:1px solid #ccc}.dropdown-options li svg{width:24px;height:24px;margin-right:8px;padding:0 8px}.dropdown-value{margin-left:8px;color:#6c757d}";
+const CpslDropdownStyle0 = cpslDropdownCss;
+
+const CpslDropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggleDropdown = () => {
+            this.isOpen = !this.isOpen;
+        };
+        this.selectItem = (item) => {
+            this.selectedItem = item;
+            this.toggleDropdown();
+        };
+        this.handleItemSelect = (item) => () => {
+            this.selectItem(item);
+        };
+        this.width = '100%';
+        this.isOpen = false;
+        this.selectedItem = undefined;
+        this.items = [];
+    }
+    handleOpenChange() {
+        if (this.isOpen) {
+            this.adjustPosition();
+        }
+    }
+    adjustPosition() {
+        var _a;
+        const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
+        const hostRect = this.el.getBoundingClientRect();
+        const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (parentRect) {
+            this.width = `${parentRect.width}px`;
+            dropdownOptions.style.left = `${parentRect.left - hostRect.left}px`;
+        }
+    }
+    componentWillLoad() {
+        if (this.items.length > 0) {
+            this.selectedItem = this.items[0];
+        }
+    }
+    render() {
+        var _a, _b, _c;
+        return (index.h(index.Host, { key: '6882468bccd50b57e16ce09ca360392415c0b1ce', style: { width: this.width } }, index.h("button", { key: '0f34c3f861543fd6f2781adeb371f6dbbf4a7e7c', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, index.h("div", { key: '9d266062c49e3fce689eccf57229534043d975e8', innerHTML: Icons['chevronUp'] })), index.h("ul", { key: 'c82c76fae351883748e0094d218cfff8261b8ed8', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.items.map(item => index.h("li", { onClick: this.handleItemSelect(item) }, index.h("span", { innerHTML: item.icon }), item.label, " ", index.h("span", { class: "dropdown-value" }, item.value))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "isOpen": ["handleOpenChange"]
+    }; }
+};
+CpslDropdown.style = CpslDropdownStyle0;
+
 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;
 
@@ -788,12 +845,12 @@ const CpslIcon = class {
         this.icon = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '81ab45a6a6bb0597743d8ebc490d56f97b9a15a4', part: "icon", role: "img" }, !Boolean(this.icon) ? index.h("img", { src: this.src }) : index.h("div", { innerHTML: Icons[this.icon] })));
+        return (index.h(index.Host, { key: '89f3081baf013558e965cc6682811d66dc2b188d', part: "icon", role: "img" }, !Boolean(this.icon) ? index.h("img", { src: this.src }) : index.h("div", { innerHTML: Icons[this.icon] })));
     }
 };
 CpslIcon.style = CpslIconStyle0;
 
-const cpslInputCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-alpha-black-16);--container-border-color:var(--cpsl-color-input-border-active);--container-border-error-color:var(--cpsl-color-input-border-error);--container-background-color:var(--cpsl-color-input-surface-default);--container-background-color-disabled:var(--cpsl-color-input-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-input);--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-end:4px;--container-padding-start:8px;--container-height:46px;--container-gap:8px;--input-background-color:var(--cpsl-color-input-surface-default);--input-background-color-disabled:var(--cpsl-color-input-surface-disabled);--input-color:var(--cpsl-color-text-primary);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:clamp(16px, 1rem, 24px);--label-color:var(--cpsl-color-text-primary);--label-font-size:clamp(14px, 0.875rem, 21px);--label-margin-bottom:5px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:clamp(14px, 0.875rem, 21px);--helper-text-margin-top:8px;display:block;font-family:var(--cpsl-font-family, inherit)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--input-background-color:var(--input-background-color-disabled);--input-color:var(--cpsl-color-text-secondary)}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-input-border-placeholder);--input-color:var(--cpsl-color-text-secondary);--container-background-color:transparent;--input-background-color:transparent}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-input-border-active);--container-background-color:var(--cpsl-color-input-surface-default)}.input-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background-color:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.native-input{flex:1;min-width:0;border:none;height:100%;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background-color:var(--input-background-color);font-family:var(--cpsl-font-family, inherit)}.native-input:focus,.native-input:focus-visible{outline:none}.native-input::placeholder{color:var(--input-placeholder-color);opacity:1;}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}:host ::slotted([slot=start]){flex:0}:host ::slotted([slot=end]){flex:0}:host ::slotted(cpsl-icon){--icon-color:var(--input-color)}:host ::slotted(cpsl-button){width:calc(var(--container-height) - var(--container-padding-top) - var(--container-padding-bottom) - var(--container-border-width) * 2);--button-border-radius:calc(var(--container-border-radius) - 2px)}";
+const cpslInputCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-alpha-black-16);--container-border-color:var(--cpsl-color-input-border-active);--container-border-error-color:var(--cpsl-color-input-border-error);--container-background-color:var(--cpsl-color-input-surface-default);--container-background-color-disabled:var(--cpsl-color-input-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-input);--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-end:4px;--container-padding-start:8px;--container-height:46px;--container-gap:8px;--input-background-color:var(--cpsl-color-input-surface-default);--input-background-color-disabled:var(--cpsl-color-input-surface-disabled);--input-color:var(--cpsl-color-text-primary);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:var(--cpsl-font-size-body-m);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:5px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:8px;display:block;font-family:var(--cpsl-font-family, inherit)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--input-background-color:var(--input-background-color-disabled);--input-color:var(--cpsl-color-text-secondary)}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-input-border-placeholder);--input-color:var(--cpsl-color-text-secondary);--container-background-color:transparent;--input-background-color:transparent}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-input-border-active);--container-background-color:var(--cpsl-color-input-surface-default)}.input-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background-color:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.native-input{flex:1;min-width:0;border:none;height:100%;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background-color:var(--input-background-color);font-family:var(--cpsl-font-family, inherit)}.native-input:focus,.native-input:focus-visible{outline:none}.native-input::placeholder{color:var(--input-placeholder-color);opacity:1;}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}:host ::slotted([slot=start]){flex:0}:host ::slotted([slot=end]){flex:0}:host ::slotted(cpsl-icon){--icon-color:var(--input-color)}:host ::slotted(cpsl-button){width:calc(var(--container-height) - var(--container-padding-top) - var(--container-padding-bottom) - var(--container-border-width) * 2);--button-border-radius:calc(var(--container-border-radius) - 2px)}";
 const CpslInputStyle0 = cpslInputCss;
 
 const CpslInput = class {
@@ -903,7 +960,7 @@ const CpslInput = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '8c48ad9321e4ceed1855d6b9850598359845ee33', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label)), index.h("div", { key: 'dabef328fd031b799790d6c3009ef1989d79e018', onClick: this.focusInput, class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, index.h("slot", { key: '073431d3070382067bf105eb33732894751b6f35', name: "start" }), index.h("input", { key: '877c48d4668358e5b46055464652b5c42028773c', 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 }), index.h("slot", { key: '7209afd4ee22c085e884c2156321cf40f3f34631', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (index.h(index.Host, { key: '3e1a55cf2869a31c54ab03c3ecf2bae84ef5031b', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label)), index.h("div", { key: '00a7a2d2dde66c610a9626044aae8ed75b9e9bf3', onClick: this.focusInput, class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, index.h("slot", { key: 'aefa6ccf3ca17216da5a657e104f471109836c78', name: "start" }), index.h("input", { key: '86e8426bff08ead8595bd40086fc7e5fc3c67295', 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 }), index.h("slot", { key: '246e05dbbc4740ce09bd9b4bba779eb0d1010882', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -10087,6 +10144,32 @@ const CpslModal = class {
         this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
     }
     toggleModal() {
+        if (this.hasAnimatedIn) {
+            this.handleAnimation();
+        }
+    }
+    componentDidLoad() {
+        this.handleAnimation();
+        this.hasAnimatedIn = true;
+        mm.add(`(min-width: ${constants.MOBILE_SIZE + 1}px)`, () => {
+            var _a;
+            (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
+            gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
+        });
+        mm.add(`(max-width: ${constants.MOBILE_SIZE}px)`, () => {
+            this.initDraggable();
+            gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
+        });
+        this.footerSlotEl.addEventListener('slotchange', () => {
+            if (this.footerSlotEl.assignedNodes().length >= 1) {
+                this.hasFooter = true;
+            }
+            else {
+                this.hasFooter = false;
+            }
+        });
+    }
+    handleAnimation() {
         if (this.open) {
             if (window.innerWidth >= constants.MOBILE_SIZE + 1) {
                 gsapWithCSS
@@ -10161,25 +10244,6 @@ const CpslModal = class {
             }
         }
     }
-    componentDidLoad() {
-        mm.add(`(min-width: ${constants.MOBILE_SIZE + 1}px)`, () => {
-            var _a;
-            (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
-            gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
-        });
-        mm.add(`(max-width: ${constants.MOBILE_SIZE}px)`, () => {
-            this.initDraggable();
-            gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
-        });
-        this.footerSlotEl.addEventListener('slotchange', () => {
-            if (this.footerSlotEl.assignedNodes().length >= 1) {
-                this.hasFooter = true;
-            }
-            else {
-                this.hasFooter = false;
-            }
-        });
-    }
     addExpandAnim() {
         setTimeout(() => {
             this.expandFooterTl = gsapWithCSS
@@ -10262,11 +10326,10 @@ const CpslModal = class {
         return this.el.shadowRoot.getElementById('modal-header');
     }
     get Modal() {
-        return (index.h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, index.h("slot", null), index.h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, index.h("div", { id: "modal-content", part: "modal-content" }, index.h("div", { id: "modal-header", class: "modal-header" }, index.h("slot", { name: "header" })), index.h("slot", { name: "body" })), index.h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true } }, index.h("slot", { name: "footerExpandedHeader" }))), index.h("div", { id: "modal-footer" }, index.h("slot", { name: "footer" })), index.h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true } }, index.h("slot", { name: "footerExpandedFooter" }))));
+        return (index.h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, index.h("slot", null), index.h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, index.h("div", { id: "modal-content", part: "modal-content" }, index.h("div", { id: "modal-header", class: "modal-header", part: "modal-header" }, index.h("slot", { name: "header" })), index.h("div", { id: "modal-body", class: "modal-body", part: "modal-body" }, index.h("slot", { name: "body" }))), index.h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true }, part: "modal-header-expanded" }, index.h("slot", { name: "footerExpandedHeader" }))), index.h("div", { id: "modal-footer", part: "modal-footer" }, index.h("slot", { name: "footer" })), index.h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true }, part: "modal-footer-expanded" }, index.h("slot", { name: "footerExpandedFooter" }))));
     }
     render() {
         if (this.noOverlay) {
-            this.addExpandAnim();
             return index.h(index.Host, null, this.Modal);
         }
         return (index.h(index.Host, { class: { 'include-mobile-styling': true } }, index.h("cpsl-overlay", { id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), index.h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
@@ -10309,7 +10372,7 @@ const CpslOverlay = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '4d8c07e1704e32808745d92d5befa8a4145a779f' }, index.h("slot", { key: 'f767b8da95b657cf8c118c298c38acaf72af8e8c' })));
+        return (index.h(index.Host, { key: 'fb52455d1a68056a20f95e7572dd4afcb1827c41' }, index.h("slot", { key: '70c5a7f0ecda8560c92ea6f907ad60650f1cdcf2' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -10327,7 +10390,7 @@ const CpslPill = class {
         this.text = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'c0d7930033e08ea264480fd457b176755eac7662' }, index.h("div", { key: 'b0f6d184dcfe34559b62a9c9da4354f5bfb59797', class: "pill-container" }, index.h("span", { key: '88634c4cd20dba3d850c51bb4089649364112566' }, this.text))));
+        return (index.h(index.Host, { key: '061ac64aeb0f301d51f62ff889b6a817b0e5abba' }, index.h("div", { key: 'b6d260c1431d5540c07e976e8fc6d6680dcdda43', class: "pill-container" }, index.h("span", { key: '22d35f5d971c5ce45995e70af3eb9ef0446fdad1' }, this.text))));
     }
 };
 CpslPill.style = CpslPillStyle0;
@@ -10402,7 +10465,7 @@ const CpslQrCode = class {
         qrCode.append(container);
     }
     render() {
-        return (index.h(index.Host, { key: '5d582e113aff18956f54928d914685e1bef923a6' }, index.h("div", { key: '5a81f7e78bf5263b1409c3ba348694acbee6b49a', id: "qr-container", class: "qr-container" })));
+        return (index.h(index.Host, { key: '8aa4d75e098ba25375d26e9e84e150cc70106ffa' }, index.h("div", { key: '02b8d5f1192ecce74476b76f5a6e8602589e2b58', id: "qr-container", class: "qr-container" })));
     }
     get el() { return index.getElement(this); }
 };
@@ -10528,7 +10591,7 @@ const CpslSlideButton = class {
         return this.el.shadowRoot.getElementById('end-icon');
     }
     render() {
-        return (index.h(index.Host, { key: 'd01cbdfa0b7e8f17ebb3a1f7ba49aded0ec70de6' }, index.h("div", { key: '37fd16cc1f2d7fb26929438a382f0684195d16f9', id: "slider-container", class: "slider-container" }, index.h("div", { key: '2504155ec8fb97a2daea8c1856db4332edf69fd4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '475d235f0c1ea7ac8551c81cf94ca0dd657d3d74', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: 'c534e20d7d609392ef2f52e20b7b66a3cbb2d207', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: '76ea202fba460ab3083ba48e673582bf37440544', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: 'dd92b0769644334cdba131523099cabc49b6f4e9', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: '97ff537baacce0bc3a2c31cc25fefc6078015f54', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: 'c51e4d97e30e6b03adcf9fb9567a75f865822c9d', id: "end-text", class: "end-text" }, this.endText))));
+        return (index.h(index.Host, { key: 'ce018bff4b8a965f6828bac0a16ab0ebbf5000d6' }, index.h("div", { key: '0620f35a12979b3262eca8b1a25a1af59745761d', id: "slider-container", class: "slider-container" }, index.h("div", { key: '07c87359d2fff731a4432c802845ace2d361980b', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '4140a0ab0f2f59693a35b9d36c0a0b6fd6152fbe', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '39ca4cbcc83d4a8667f93cbeca1dd6c1637d0db2', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: 'f0733efde0e3a00b34d0dd08267e2893f3dfc658', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: '5f77af9484aad6bc02a8caa89e5c066334f9835b', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: 'ebf3026838ed70e406704ba85ecd68c0aa04db13', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: 'd13ea9ea109900c679c049702760b1c8ce08e38a', id: "end-text", class: "end-text" }, this.endText))));
     }
     get el() { return index.getElement(this); }
 };
@@ -10544,13 +10607,13 @@ const CpslSpinner = class {
         this.speed = 1;
     }
     render() {
-        return (index.h(index.Host, { key: 'ccfa5727ea42f54e265ed2fc40632c608485a980', style: {
+        return (index.h(index.Host, { key: 'f52df0bdd08e1de7ffb6cdda5f1791b1524cbbbe', style: {
                 'height': `${this.size}px`,
                 'width': `${this.size}px`,
                 'animation': `spin ${this.speed}s linear infinite`,
                 '-webkit-animation': `spin ${this.speed}s linear infinite`,
                 '-moz-animation': `spin ${this.speed}s linear infinite`,
-            } }, index.h("svg", { key: '507b1f733ae8bdf6d53966b1b64d687911f7c8a3', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, index.h("path", { key: 'ea462771d440975eea28cc13f2eb787c827746be', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), index.h("circle", { key: '1e60ac891f97076ad558fb83f51c552f34626370', cx: "45", cy: "27", r: "5" }))));
+            } }, index.h("svg", { key: '867ba4a123619a10de1700ed9c23a9c154fed67c', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, index.h("path", { key: 'd4711f92c2dd5d85b01e26e3c3a82f776cd1b72f', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), index.h("circle", { key: '69cbe92b1cc4f8d1736d4529b78fc5969f127844', cx: "45", cy: "27", r: "5" }))));
     }
 };
 CpslSpinner.style = CpslSpinnerStyle0;
@@ -10582,7 +10645,7 @@ const CpslTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '482701b2915c5e5e30c3ee8c13ef35ef4c7cfcb8', onClick: this.onTabClicked }, index.h("div", { key: '583db91ddbbf32225880b03d8521b117a85f5bf1', class: { 'tab-container': true } }, index.h("slot", { key: 'a1596c1858376a41ee72d4133966fd7ed75e79c0' }))));
+        return (index.h(index.Host, { key: 'ece9ef79afb7bd761b945f8495b5d7a5707eea28', onClick: this.onTabClicked }, index.h("div", { key: '787d62147f208c37bd7e494499be123317499ed3', class: { 'tab-container': true } }, index.h("slot", { key: '2834e0f4c14b2940941e0dbe78105835111688cf' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -10641,7 +10704,7 @@ const CpslTabs = class {
         const tabsPosition = this.el.getBoundingClientRect();
         const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
         const selectedTabRect = this.selectedTabRect;
-        return (index.h(index.Host, { key: 'db244b5a0ed262508ff5e5ca45e8f61cfcd6df35', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: '9acd1dcaab946f97d68d5fe625859c245b6fbebc', class: "tabs-container" }, index.h("slot", { key: '6e58a5354af8118118773c9a296f06b90067d416' }), index.h("div", { key: '87a9977e13ccc5b3993d459284ce4dc886eb1103', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
+        return (index.h(index.Host, { key: '47d4b201d34630654f4d11c26972f0ddf9d9f748', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: '2a956a61b65fb99445a76211448b0ca2b830baab', class: "tabs-container" }, index.h("slot", { key: '3ef04f0dacff55ea829b92e22b0f260e1f95bb95' }), index.h("div", { key: '4cf63ec114998fa41b3367c9c648467044f19d95', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -10655,15 +10718,64 @@ const getTab = (tabs, tab) => {
 };
 CpslTabs.style = CpslTabsStyle0;
 
-const cpslTextCss = ":host{font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary)}";
+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 CpslTextStyle0 = cpslTextCss;
 
 const CpslText = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.color = 'primary';
+        this.variant = 'bodyM';
+        this.weight = 'regular';
+    }
+    get Content() {
+        switch (this.variant) {
+            case 'headingXS': {
+                return (index.h("h6", null, index.h("slot", null)));
+            }
+            case 'headingS': {
+                return (index.h("h5", null, index.h("slot", null)));
+            }
+            case 'headingM': {
+                return (index.h("h4", null, index.h("slot", null)));
+            }
+            case 'headingL': {
+                return (index.h("h3", null, index.h("slot", null)));
+            }
+            case 'headingXL': {
+                return (index.h("h2", null, index.h("slot", null)));
+            }
+            case 'heading2XL': {
+                return (index.h("h1", null, index.h("slot", null)));
+            }
+            default: {
+                return (index.h("p", null, index.h("slot", null)));
+            }
+        }
     }
     render() {
-        return (index.h(index.Host, { key: '14b6b911fe1c66fa0dbc118207755123110fd85a' }, index.h("slot", { key: 'ebf8c3b818cc85fd06bc4feb3d7c2b21818fcc9c' })));
+        return (index.h(index.Host, { key: '33b70ccfe3929f306d0a9b956ec2a4e16bf751b8', class: {
+                'primary': this.color === 'primary',
+                'secondary': this.color === 'secondary',
+                'subtle': this.color === 'subtle',
+                'inverted': this.color === 'inverted',
+                'error': this.color === 'error',
+                'medium': this.weight === 'medium',
+                'semi-bold': this.weight === 'semiBold',
+                'bold': this.weight === 'bold',
+                'body-2xs': this.variant === 'body2XS',
+                'body-xs': this.variant === 'bodyXS',
+                'body-s': this.variant === 'bodyS',
+                'body-m': this.variant === 'bodyM',
+                'body-l': this.variant === 'bodyL',
+                'body-xl': this.variant === 'bodyXL',
+                'heading-xs': this.variant === 'headingXS',
+                'heading-s': this.variant === 'headingS',
+                'heading-m': this.variant === 'headingM',
+                'heading-l': this.variant === 'headingL',
+                'heading-xl': this.variant === 'headingXL',
+                'heading-2xl': this.variant === 'heading2XL',
+            } }, this.Content));
     }
 };
 CpslText.style = CpslTextStyle0;
@@ -10678,7 +10790,7 @@ const CpslTileButton = class {
         this.icon = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'f86ee8387b40817115e680cad78b3cab4af7b35f' }, index.h("button", { key: '7fa11eeed97fd89c8d5640cb270403c6bab8cda1', class: "button-native" }, index.h("cpsl-icon", { key: '0b605c0839dd930cc97a70fd867619929c3ce5af', exportparts: "icon", src: this.src, icon: this.icon }), index.h("slot", { key: '8c3fe5d96e1443cd7a454589cdb279a684773a83' }))));
+        return (index.h(index.Host, { key: '61cbce3574220ee8009ab95c3e37d80535543d1c' }, index.h("button", { key: '50169b226155e2b06014c415dd522dfc0deb799c', class: "button-native" }, index.h("cpsl-icon", { key: '9ee77a4d725f4bec258ae753365a1f5aca733ff5', exportparts: "icon", src: this.src, icon: this.icon }), index.h("slot", { key: 'b01617dbca7322d9cc8f58c30680cd5f3ed0f576' }))));
     }
 };
 CpslTileButton.style = CpslTileButtonStyle0;
@@ -10687,6 +10799,7 @@ exports.cpsl_alert = CpslAlert;
 exports.cpsl_button = CpslButton;
 exports.cpsl_code_input = CpslCodeInput;
 exports.cpsl_divider = CpslDivider;
+exports.cpsl_dropdown = CpslDropdown;
 exports.cpsl_icon = CpslIcon;
 exports.cpsl_input = CpslInput;
 exports.cpsl_modal = CpslModal;
@@ -10701,4 +10814,4 @@ exports.cpsl_tabs = CpslTabs;
 exports.cpsl_text = CpslText;
 exports.cpsl_tile_button = CpslTileButton;
 
-//# sourceMappingURL=cpsl-alert_17.cjs.entry.js.map
+//# sourceMappingURL=cpsl-alert_18.cjs.entry.js.map