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

package/dist/collection/components/cpsl-button/cpsl-button.css

@@ -56,6 +56,7 @@
 :host {
   --button-border-radius: var(--cpsl-border-radius-primary-button);
   --button-border-width: 1px;
+  --button-gap: 4px;
   --button-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 2px 2px 0px var(--cpsl-color-alpha-white-25) inset, 0px -2px 2px 0px var(--cpsl-color-alpha-black-25) inset;
   --button-padding-top: 10px;
   --button-padding-bottom: 10px;
@@ -155,5 +156,7 @@
   height: 100%;
   width: 100%;
   box-shadow: var(--button-box-shadow);
+  gap: var(--button-gap);
+  word-break: break-all;
   outline-color: var(--button-outline-color);
 }

package/dist/collection/components/cpsl-button/cpsl-button.js

@@ -5,12 +5,12 @@ export class CpslButton {
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: 'f1fa105aeacb8c4650321d312d7bd43932fe6c9d', class: {
+        return (h(Host, { key: '258bec70d4cf27d453500c712285e45a1304b925', class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'icon': this.variant === 'icon',
                 'button-disabled': this.disabled,
-            } }, h("button", { key: '92bffb8acc599eb2b3f3bc71ab99d08e7332d498', class: "button-native" }, h("slot", { key: 'cdb33b60e6b5c1bf423ee7e577d58fbcce65a64e' }))));
+            } }, h("button", { key: 'b13438808d69e389bc75d6f06b81a40c7561eea8', class: "button-native" }, h("slot", { key: 'e684524f4ff0ceeca466293e1fc8737cf66184e0', name: "start" }), h("slot", { key: '66a1c7fa233f85a76a7d0cc2aad74e35ce5cd3f4' }), h("slot", { key: 'e369d09a351a1d1dd0d98d3812c1b75a0e84eae0', name: "end" }))));
     }
     static get is() { return "cpsl-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-button/cpsl-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;wBAKyB,KAAK;uBAOmB,SAAS;;IAE/E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAC/B,iBAAiB,EAAE,IAAI,CAAC,QAAQ;aACjC;YAED,+DAAQ,KAAK,EAAC,eAAe;gBAC3B,8DAAa,CACN,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-button',\n  styleUrl: 'cpsl-button.scss',\n  shadow: true,\n})\nexport class CpslButton {\n  /**\n   * If the button is disabled.\n   * Default is: false.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * The variant of button.\n   * Options are: `\"primary\"`, `\"secondary\", `\"icon\".\n   * Default is: `\"primary\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'primary' | 'secondary' | 'icon' = 'primary';\n\n  render() {\n    return (\n      <Host\n        class={{\n          'primary': this.variant === 'primary',\n          'secondary': this.variant === 'secondary',\n          'icon': this.variant === 'icon',\n          'button-disabled': this.disabled,\n        }}\n      >\n        <button class=\"button-native\">\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;wBAKyB,KAAK;uBAOmB,SAAS;;IAE/E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAC/B,iBAAiB,EAAE,IAAI,CAAC,QAAQ;aACjC;YAED,+DAAQ,KAAK,EAAC,eAAe;gBAC3B,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACjB,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-button',\n  styleUrl: 'cpsl-button.scss',\n  shadow: true,\n})\nexport class CpslButton {\n  /**\n   * If the button is disabled.\n   * Default is: false.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * The variant of button.\n   * Options are: `\"primary\"`, `\"secondary\", `\"icon\".\n   * Default is: `\"primary\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'primary' | 'secondary' | 'icon' = 'primary';\n\n  render() {\n    return (\n      <Host\n        class={{\n          'primary': this.variant === 'primary',\n          'secondary': this.variant === 'secondary',\n          'icon': this.variant === 'icon',\n          'button-disabled': this.disabled,\n        }}\n      >\n        <button class=\"button-native\">\n          <slot name=\"start\"></slot>\n          <slot></slot>\n          <slot name=\"end\"></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js

@@ -87,7 +87,7 @@ export class CpslCodeInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '1c877c2c935da7b35b291ef549d1df66aef4a999' }, h("div", { key: 'cf8bba26f01b2036ec7414f2f22113f8e270e810', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: 'a71927ad671c9bcea55951797bb22fcede118d59' }, h("div", { key: '033281ae8250377ee175112f6428f412eaa339f5', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
             var _a;
             return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
         })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));

package/dist/collection/components/cpsl-col/cpsl-col.js

@@ -89,7 +89,7 @@ export class CpslCol {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        return (h(Host, { key: 'd139326f078622312b5d8113d621049ad15ac522', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '7dc68151a908d12d6fc2f62935e7d029539a1caf' })));
+        return (h(Host, { key: 'fdb8a99b8b9225949b4eea931277e461efac29eb', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '0976c09d835a37413455f787596a75eafc1db14f' })));
     }
     static get is() { return "cpsl-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-divider/cpsl-divider.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslDivider {
     render() {
-        return (h(Host, { key: '3cc871a98ef7808935b3c1dbec0c6b84cbc69939' }, h("div", { key: 'ce391dc5bfd37cf3834224b7f9cae74b6d5034c4' }), h("slot", { key: '3859f266ab28d3e4a71bcc5fdbfbbfb07356df26' }), h("div", { key: '2495dfa554e635f9925fbc71703e45a0e47416ab' })));
+        return (h(Host, { key: '7b35806d55027d32c6f8c0e5cfcaef46f35ebd68' }, h("div", { key: '5af8157b329cfd491256537c267adbe3e15c8914' }), h("slot", { key: '913734d72f49bc1092f447326710223eb85f901e' }), h("div", { key: '47b8c8569f8e43a830bfb84636faca0df7b7e7df' })));
     }
     static get is() { return "cpsl-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.css

@@ -0,0 +1,88 @@
+: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;
+}

package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js

@@ -0,0 +1,113 @@
+import { Host, h } from "@stencil/core";
+import { Icons } from "../../assets/icons";
+export class CpslDropdown {
+    constructor() {
+        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 (h(Host, { key: '6882468bccd50b57e16ce09ca360392415c0b1ce', style: { width: this.width } }, 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}`, h("div", { key: '9d266062c49e3fce689eccf57229534043d975e8', innerHTML: Icons['chevronUp'] })), h("ul", { key: 'c82c76fae351883748e0094d218cfff8261b8ed8', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.items.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: item.icon }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
+    }
+    static get is() { return "cpsl-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the dropdown"
+                },
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "'100%'"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ icon: string, label: string, value: string, selectedLabel?: string }>",
+                    "resolved": "{ icon: string; label: string; value: string; selectedLabel?: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items to be presented in the dropdown"
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "selectedItem": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-dropdown.js.map

package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAsB,KAAK,EAAE,MAAM,eAAe,CAAC;AACpG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAO3C,MAAM,OAAO,YAAY;;QAcf,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,IAA4E,EAAE,EAAE;YACpG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,IAA4E,EAAE,EAAE,CAAC,GAAG,EAAE;YAChH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC,CAAA;qBApBuB,MAAM;sBACH,KAAK;;qBAM+D,EAAE;;IAgBjG,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,cAAc;;QACpB,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAgB,CAAC;QAC7F,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC;QACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,qBAAqB,EAAE,CAAC;QAClE,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,GAAG,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;YACrC,eAAe,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,CAAC;QACtE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAChC,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc;gBACzD,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,aAAa,MAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAA,IAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE;gBAC9F,4DAAK,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,GAAI,CAC/B;YACT,2DAAI,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IACvF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,UAAI,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACtC,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS;gBAClC,IAAI,CAAC,KAAK;;gBAAE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D,CACN,CACE,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch } from '@stencil/core';\nimport { Icons } from '../../assets/icons';\n\n@Component({\n  tag: 'cpsl-dropdown',\n  styleUrl: 'cpsl-dropdown.scss',\n  shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n  @Element() el: HTMLCpslDropdownElement;\n  /**\n   * Width of the dropdown\n   */\n  @Prop() width: string = '100%';\n  @State() isOpen: boolean = false;\n  @State() selectedItem: { icon: string, label: string, value: string, selectedLabel?: string };\n\n  /**\n   * Items to be presented in the dropdown\n   */\n  @Prop() items: Array<{ icon: string, label: string, value: string, selectedLabel?: string }> = [];\n\n  private toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  private selectItem = (item: { icon: string, label: string, value: string, selectedLabel?: string }) => {\n    this.selectedItem = item;\n    this.toggleDropdown();\n  };\n\n  private handleItemSelect = (item: { icon: string, label: string, value: string, selectedLabel?: string }) => () => {\n    this.selectItem(item);\n  }\n\n  @Watch('isOpen')\n  handleOpenChange() {\n    if (this.isOpen) {\n      this.adjustPosition();\n    }\n  }\n\n  private adjustPosition() {\n    const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n    const hostRect = this.el.getBoundingClientRect(); \n    const parentRect = this.el.parentElement?.getBoundingClientRect();\n    if (parentRect) {\n      this.width = `${parentRect.width}px`;\n      dropdownOptions.style.left = `${parentRect.left - hostRect.left}px`;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.items.length > 0) {\n      this.selectedItem = this.items[0];\n    }\n  }\n\n  render() {\n    return (\n      <Host style={{ width: this.width }}>\n        <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n          {`${this.selectedItem?.selectedLabel || this.selectedItem?.label} ${this.selectedItem?.value}`}\n          <div innerHTML={Icons['chevronUp']} />\n        </button>\n        <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n          {this.items.map(item =>\n            <li onClick={this.handleItemSelect(item)}>\n              <span innerHTML={item.icon}></span>\n              {item.label} <span class=\"dropdown-value\">{item.value}</span>\n            </li>\n          )}\n        </ul>\n      </Host>\n    );\n  }  \n}\n"]}

package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.e2e.js

@@ -0,0 +1,29 @@
+var __awaiter = (this && this.__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());
+    });
+};
+import { newE2EPage } from "@stencil/core/testing";
+describe('cpsl-dropdown', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-dropdown></cpsl-dropdown>');
+        const element = yield page.find('cpsl-dropdown');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-dropdown.e2e.js.map

package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-dropdown.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-dropdown/test/cpsl-dropdown.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,iCAAiC,CAAC,CAAC;QAEzD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACjD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-dropdown', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-dropdown></cpsl-dropdown>');\n\n    const element = await page.find('cpsl-dropdown');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.spec.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__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());
+    });
+};
+import { newSpecPage } from "@stencil/core/testing";
+import { CpslDropdown } from "../cpsl-dropdown";
+describe('cpsl-dropdown', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslDropdown],
+            html: `<cpsl-dropdown></cpsl-dropdown>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-dropdown>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-dropdown>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-dropdown.spec.js.map

package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-dropdown.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-dropdown/test/cpsl-dropdown.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,iCAAiC;SACxC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslDropdown } from '../cpsl-dropdown';\n\ndescribe('cpsl-dropdown', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslDropdown],\n      html: `<cpsl-dropdown></cpsl-dropdown>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-dropdown>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-dropdown>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cpsl-grid/cpsl-grid.js

@@ -4,9 +4,9 @@ export class CpslGrid {
         this.fixed = false;
     }
     render() {
-        return (h(Host, { key: 'b0a1f06f9b42d8221691fbebca0af4fd18c5961d', class: {
+        return (h(Host, { key: 'ad08de3e168770731291ad1fd2ddffcac4ca6145', class: {
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '7d7ed9333ccf1fcd93d6327e7ba1d430054b1230' })));
+            } }, h("slot", { key: '0c93c6a07b6acfaa4bd50c6edabbae30e37ed09d' })));
     }
     static get is() { return "cpsl-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-icon/cpsl-icon.css

@@ -58,6 +58,8 @@
   --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);
 }
@@ -73,6 +75,18 @@
   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);

package/dist/collection/components/cpsl-icon/cpsl-icon.js

@@ -6,7 +6,7 @@ export class CpslIcon {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '314f7ee70c5ba6a2d70a15fd3e0ed3510140d640', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '89f3081baf013558e965cc6682811d66dc2b188d', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
     static get is() { return "cpsl-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -20,7 +20,6 @@ export class CpslIcon {
             "$": ["cpsl-icon.css"]
         };
     }
-    static get assetsDirs() { return ["../assets"]; }
     static get properties() {
         return {
             "src": {
@@ -45,7 +44,7 @@ export class CpslIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptionsDark\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"key\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/components/cpsl-icon/cpsl-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-icon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon/cpsl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAQ3C,MAAM,OAAO,QAAQ;;;;;IAWnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,IACzB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,CAAC,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CAC/E,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface';\nimport { Icons } from '../../assets/icons';\n\n@Component({\n  tag: 'cpsl-icon',\n  styleUrl: 'cpsl-icon.scss',\n  shadow: true,\n  assetsDirs: ['../assets'],\n})\nexport class CpslIcon {\n  /**\n   * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() src?: string;\n\n  /**\n   * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() icon?: IconType;\n\n  render() {\n    return (\n      <Host part=\"icon\" role=\"img\">\n        {!Boolean(this.icon) ? <img src={this.src} /> : <div innerHTML={Icons[this.icon]} />}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-icon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon/cpsl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAO3C,MAAM,OAAO,QAAQ;;;;;IAWnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,IACzB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,CAAC,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CAC/E,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface';\nimport { Icons } from '../../assets/icons';\n\n@Component({\n  tag: 'cpsl-icon',\n  styleUrl: 'cpsl-icon.scss',\n  shadow: true,\n})\nexport class CpslIcon {\n  /**\n   * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() src?: string;\n\n  /**\n   * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() icon?: IconType;\n\n  render() {\n    return (\n      <Host part=\"icon\" role=\"img\">\n        {!Boolean(this.icon) ? <img src={this.src} /> : <div innerHTML={Icons[this.icon]} />}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-info-box/cpsl-info-box.css

@@ -71,7 +71,7 @@
   padding-top: var(--box-padding-top);
   padding-bottom: var(--box-padding-bottom);
   display: flex;
-  background-color: var(--cpsl-color-background-subtle);
+  background-color: var(--cpsl-color-background-secondary);
   border: var(--box-border-width) solid var(--cpsl-color-input-border-placeholder);
   border-radius: var(--box-border-radius);
 }

package/dist/collection/components/cpsl-info-box/cpsl-info-box.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslInfoBox {
     render() {
-        return (h(Host, { key: '17a3490640f95a341c0942188979b2cb82f37da1' }, h("div", { key: '51c7731b3e11119e3fcb96f5ef2f47ffd71ba097', class: "info-box-container" }, h("slot", { key: '82bfc871c4fb3856e553637514806435473f4728' }))));
+        return (h(Host, { key: 'c3adc346763da83e631c71bbc4f1ce7aad99ba04' }, h("div", { key: 'c03ce70d8c94d42264216c1376d81f8601a45656', class: "info-box-container" }, h("slot", { key: '3ae35495b7371479d0ad8e731011fb8b06a2c0d9' }))));
     }
     static get is() { return "cpsl-info-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-input/cpsl-input.css

@@ -72,16 +72,16 @@
   --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);
+  --input-font-size: var(--cpsl-font-size-body-m);
   --label-color: var(--cpsl-color-text-primary);
-  --label-font-size: clamp(14px, 0.875rem, 21px);
+  --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: clamp(14px, 0.875rem, 21px);
+  --helper-text-font-size: var(--cpsl-font-size-body-xs);
   --helper-text-margin-top: 8px;
   display: block;
   font-family: var(--cpsl-font-family, inherit);
@@ -93,13 +93,17 @@
   --input-color: var(--cpsl-color-text-secondary);
 }
 
-:host(.focused) {
-  --container-box-shadow: 0px 0px 0px 2px var(--container-box-shadow-color);
-}
-
 :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 {
@@ -186,4 +190,5 @@
 }
 :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);
 }

package/dist/collection/components/cpsl-input/cpsl-input.js

@@ -74,14 +74,16 @@ export class CpslInput {
         }
     }
     disableSlots() {
+        var _a, _b;
         if (!this.noAutoDisable) {
-            this.el.querySelector('[slot="end"]').setAttribute('disabled', 'true');
-            this.el.querySelector('[slot="start"]').setAttribute('disabled', 'true');
+            (_a = this.el.querySelector('[slot="end"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'true');
+            (_b = this.el.querySelector('[slot="start"]')) === null || _b === void 0 ? void 0 : _b.setAttribute('disabled', 'true');
         }
     }
     enableSlots() {
-        this.el.querySelector('[slot="end"]').setAttribute('disabled', 'false');
-        this.el.querySelector('[slot="start"]').setAttribute('disabled', 'false');
+        var _a, _b;
+        (_a = this.el.querySelector('[slot="end"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'false');
+        (_b = this.el.querySelector('[slot="start"]')) === null || _b === void 0 ? void 0 : _b.setAttribute('disabled', 'false');
     }
     emitInputChange(event) {
         const { value } = this;
@@ -99,7 +101,7 @@ export class CpslInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2627de83fa1973eac8002f4807c4f2319a7541cf', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label)), h("div", { key: '9f2eaa8fe2a2fa67dcd61e69cd43698c33829d48', onClick: this.focusInput, class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'cc4d99747dcc55aa2dc27a58244bd0dbdc872332', name: "start" }), h("input", { key: '52ba9b2248af07ee072628fd0207d1b965d44829', 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 }), h("slot", { key: 'b15d92b44f321351e3a8465b7c7c3409305e0196', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (h(Host, { key: '3e1a55cf2869a31c54ab03c3ecf2bae84ef5031b', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label)), h("div", { key: '00a7a2d2dde66c610a9626044aae8ed75b9e9bf3', onClick: this.focusInput, class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'aefa6ccf3ca17216da5a657e104f471109836c78', name: "start" }), 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 }), h("slot", { key: '246e05dbbc4740ce09bd9b4bba779eb0d1010882', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-input"; }
     static get encapsulation() { return "shadow"; }
@@ -526,7 +528,7 @@ export class CpslInput {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptionsDark\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"key\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
                     "references": {
                         "IconType": {
                             "location": "import",