@usecapsule/core-components 2.0.5 → 2.0.6

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

@@ -0,0 +1,160 @@
+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.selectedItemChange.emit(this.selectedItem);
+        };
+        this.handleItemSelect = (item) => () => {
+            this.selectItem(item);
+        };
+        this.width = '100%';
+        this.isOpen = false;
+        this.selectedItem = undefined;
+        this.items = [];
+    }
+    handleOpenChange() {
+        if (this.isOpen) {
+            this.adjustPosition();
+        }
+    }
+    handleResize() {
+        if (this.isOpen) {
+            this.adjustPosition();
+        }
+    }
+    adjustPosition() {
+        var _a;
+        const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
+        const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        if (parentRect) {
+            this.width = `${parentRect.width}px`;
+            dropdownOptions.style.left = `${parentRect.x}px`;
+            dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
+            const availableHeight = viewportHeight - parentRect.bottom;
+            dropdownOptions.style.maxHeight = `${availableHeight - 12}px`;
+        }
+    }
+    componentWillLoad() {
+        if (this.items.length > 0) {
+            this.selectedItem = this.items[0];
+        }
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: 'a3f5b117b3796584dccb638df44e75379ac5a7bb', style: { width: this.width } }, h("button", { key: 'acd2f7f30b6db4e2e215b298f75672698e981edd', 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: 'a2110fb3515d7de468bc03963c95b8e12734abae', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '466cf5144c00b955c70880192987c94d03781a3c', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.items.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[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<DropdownInputEventDetail>",
+                    "resolved": "DropdownInputEventDetail[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "DropdownInputEventDetail": {
+                            "location": "import",
+                            "path": "./dropdown-interface",
+                            "id": "src/components/cpsl-dropdown/dropdown-interface.ts::DropdownInputEventDetail"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items to be presented in the dropdown"
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "selectedItem": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectedItemChange",
+                "name": "selectedItemChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "On eve"
+                },
+                "complexType": {
+                    "original": "DropdownInputEventDetail",
+                    "resolved": "DropdownInputEventDetail",
+                    "references": {
+                        "DropdownInputEventDetail": {
+                            "location": "import",
+                            "path": "./dropdown-interface",
+                            "id": "src/components/cpsl-dropdown/dropdown-interface.ts::DropdownInputEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# 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":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch, Listen, EventEmitter, Event } from '@stencil/core';\nimport { Icons } from '../../assets/icons';\nimport { DropdownInputEventDetail } from './dropdown-interface';\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: DropdownInputEventDetail;\n\n  /**\n   * Items to be presented in the dropdown\n   */\n  @Prop() items: Array<DropdownInputEventDetail> = [];\n\n  /**\n   * On eve\n   */\n  @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n  private toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  private selectItem = (item: DropdownInputEventDetail) => {\n    this.selectedItem = item;\n    this.toggleDropdown();\n    this.selectedItemChange.emit(this.selectedItem);\n  };\n\n  private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n    this.selectItem(item);\n  }\n\n  @Watch('isOpen')\n  handleOpenChange() {\n    if (this.isOpen) {\n      this.adjustPosition();\n    }\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\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 parentRect = this.el.parentElement?.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n\n    if (parentRect) {\n      this.width = `${parentRect.width}px`;\n      dropdownOptions.style.left = `${parentRect.x}px`;\n      dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n      const availableHeight = viewportHeight - parentRect.bottom;\n      dropdownOptions.style.maxHeight = `${availableHeight - 12}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 class={`chevron ${this.isOpen ? '' : 'closed'}`} 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={Icons[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/dropdown-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdown-interface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/dropdown-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { IconType } from \"../../interface\";\n\nexport interface DropdownInputEventDetail {\n    icon: IconType,\n    label: string,\n    value: string,\n    selectedLabel?: string\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: '1d6d165e50e9a7c745bdd699d4123bf4d850d636', class: {
+        return (h(Host, { key: 'ad08de3e168770731291ad1fd2ddffcac4ca6145', class: {
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '11169a28e7cc3ef39b9632b6892750ddb6dbffc6' })));
+            } }, h("slot", { key: '0c93c6a07b6acfaa4bd50c6edabbae30e37ed09d' })));
     }
     static get is() { return "cpsl-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class CpslIcon {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '81ab45a6a6bb0597743d8ebc490d56f97b9a15a4', 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"; }
@@ -44,7 +44,7 @@ export class CpslIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"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\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"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-info-box/cpsl-info-box.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslInfoBox {
     render() {
-        return (h(Host, { key: '2d1427b7750adff77e1ca94cd34b89a22cc54c1a' }, h("div", { key: '6ec6eedc5ef2a2137723383e86676523b8fa4b60', class: "info-box-container" }, h("slot", { key: '11ba071134789bcbee7ffb5f650d4536906139f4' }))));
+        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);

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

@@ -101,7 +101,7 @@ export class CpslInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8c48ad9321e4ceed1855d6b9850598359845ee33', 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: 'dabef328fd031b799790d6c3009ef1989d79e018', onClick: this.focusInput, class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: '073431d3070382067bf105eb33732894751b6f35', name: "start" }), 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 }), h("slot", { key: '7209afd4ee22c085e884c2156321cf40f3f34631', 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"; }
@@ -528,7 +528,7 @@ export class CpslInput {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"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\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"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-overlay/cpsl-overlay.js

@@ -26,7 +26,7 @@ export class CpslOverlay {
         }
     }
     render() {
-        return (h(Host, { key: '4d8c07e1704e32808745d92d5befa8a4145a779f' }, h("slot", { key: 'f767b8da95b657cf8c118c298c38acaf72af8e8c' })));
+        return (h(Host, { key: 'fb52455d1a68056a20f95e7572dd4afcb1827c41' }, h("slot", { key: '70c5a7f0ecda8560c92ea6f907ad60650f1cdcf2' })));
     }
     static get is() { return "cpsl-overlay"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class CpslPill {
         this.text = undefined;
     }
     render() {
-        return (h(Host, { key: 'c0d7930033e08ea264480fd457b176755eac7662' }, h("div", { key: 'b0f6d184dcfe34559b62a9c9da4354f5bfb59797', class: "pill-container" }, h("span", { key: '88634c4cd20dba3d850c51bb4089649364112566' }, this.text))));
+        return (h(Host, { key: '061ac64aeb0f301d51f62ff889b6a817b0e5abba' }, h("div", { key: 'b6d260c1431d5540c07e976e8fc6d6680dcdda43', class: "pill-container" }, h("span", { key: '22d35f5d971c5ce45995e70af3eb9ef0446fdad1' }, this.text))));
     }
     static get is() { return "cpsl-pill"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class CpslQrCode {
         qrCode.append(container);
     }
     render() {
-        return (h(Host, { key: '5d582e113aff18956f54928d914685e1bef923a6' }, h("div", { key: '5a81f7e78bf5263b1409c3ba348694acbee6b49a', id: "qr-container", class: "qr-container" })));
+        return (h(Host, { key: '8aa4d75e098ba25375d26e9e84e150cc70106ffa' }, h("div", { key: '02b8d5f1192ecce74476b76f5a6e8602589e2b58', id: "qr-container", class: "qr-container" })));
     }
     static get is() { return "cpsl-qr-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslRow {
     render() {
-        return (h(Host, { key: '7b7158e94f4d805c1d67fc96588ef34151e76d5a' }, h("slot", { key: '987a473c46bb7c2be19a35dc54d5ebc2522d9e0a' })));
+        return (h(Host, { key: '5f061d20ff017b612a4bada01c66992795cbabe1' }, h("slot", { key: 'ba35af68f6f00e8b12ff3c091935482beb10d27c' })));
     }
     static get is() { return "cpsl-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -114,7 +114,7 @@ export class CpslSlideButton {
         return this.el.shadowRoot.getElementById('end-icon');
     }
     render() {
-        return (h(Host, { key: 'd01cbdfa0b7e8f17ebb3a1f7ba49aded0ec70de6' }, h("div", { key: '37fd16cc1f2d7fb26929438a382f0684195d16f9', id: "slider-container", class: "slider-container" }, h("div", { key: '2504155ec8fb97a2daea8c1856db4332edf69fd4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '475d235f0c1ea7ac8551c81cf94ca0dd657d3d74', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: 'c534e20d7d609392ef2f52e20b7b66a3cbb2d207', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: '76ea202fba460ab3083ba48e673582bf37440544', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: 'dd92b0769644334cdba131523099cabc49b6f4e9', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '97ff537baacce0bc3a2c31cc25fefc6078015f54', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'c51e4d97e30e6b03adcf9fb9567a75f865822c9d', id: "end-text", class: "end-text" }, this.endText))));
+        return (h(Host, { key: 'ce018bff4b8a965f6828bac0a16ab0ebbf5000d6' }, h("div", { key: '0620f35a12979b3262eca8b1a25a1af59745761d', id: "slider-container", class: "slider-container" }, h("div", { key: '07c87359d2fff731a4432c802845ace2d361980b', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '4140a0ab0f2f59693a35b9d36c0a0b6fd6152fbe', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '39ca4cbcc83d4a8667f93cbeca1dd6c1637d0db2', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'f0733efde0e3a00b34d0dd08267e2893f3dfc658', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '5f77af9484aad6bc02a8caa89e5c066334f9835b', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'ebf3026838ed70e406704ba85ecd68c0aa04db13', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'd13ea9ea109900c679c049702760b1c8ce08e38a', id: "end-text", class: "end-text" }, this.endText))));
     }
     static get is() { return "cpsl-slide-button"; }
     static get encapsulation() { return "shadow"; }
@@ -152,7 +152,7 @@ export class CpslSlideButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"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\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
                     "references": {
                         "IconType": {
                             "location": "import",
@@ -192,7 +192,7 @@ export class CpslSlideButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"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\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"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-spinner/cpsl-spinner.js

@@ -5,13 +5,13 @@ export class CpslSpinner {
         this.speed = 1;
     }
     render() {
-        return (h(Host, { key: 'ccfa5727ea42f54e265ed2fc40632c608485a980', style: {
+        return (h(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`,
-            } }, h("svg", { key: '507b1f733ae8bdf6d53966b1b64d687911f7c8a3', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, 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" }), h("circle", { key: '1e60ac891f97076ad558fb83f51c552f34626370', cx: "45", cy: "27", r: "5" }))));
+            } }, h("svg", { key: '867ba4a123619a10de1700ed9c23a9c154fed67c', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'd4711f92c2dd5d85b01e26e3c3a82f776cd1b72f', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '69cbe92b1cc4f8d1736d4529b78fc5969f127844', cx: "45", cy: "27", r: "5" }))));
     }
     static get is() { return "cpsl-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class CpslTab {
         }
     }
     render() {
-        return (h(Host, { key: '482701b2915c5e5e30c3ee8c13ef35ef4c7cfcb8', onClick: this.onTabClicked }, h("div", { key: '583db91ddbbf32225880b03d8521b117a85f5bf1', class: { 'tab-container': true } }, h("slot", { key: 'a1596c1858376a41ee72d4133966fd7ed75e79c0' }))));
+        return (h(Host, { key: 'ece9ef79afb7bd761b945f8495b5d7a5707eea28', onClick: this.onTabClicked }, h("div", { key: '787d62147f208c37bd7e494499be123317499ed3', class: { 'tab-container': true } }, h("slot", { key: '2834e0f4c14b2940941e0dbe78105835111688cf' }))));
     }
     static get is() { return "cpsl-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,7 @@ export class CpslTabs {
         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: 'db244b5a0ed262508ff5e5ca45e8f61cfcd6df35', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '9acd1dcaab946f97d68d5fe625859c245b6fbebc', class: "tabs-container" }, h("slot", { key: '6e58a5354af8118118773c9a296f06b90067d416' }), h("div", { key: '87a9977e13ccc5b3993d459284ce4dc886eb1103', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
+        return (h(Host, { key: '47d4b201d34630654f4d11c26972f0ddf9d9f748', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '2a956a61b65fb99445a76211448b0ca2b830baab', class: "tabs-container" }, h("slot", { key: '3ef04f0dacff55ea829b92e22b0f260e1f95bb95' }), h("div", { key: '4cf63ec114998fa41b3367c9c648467044f19d95', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
     }
     static get is() { return "cpsl-tabs"; }
     static get encapsulation() { return "shadow"; }