@usecapsule/core-components 2.0.1 → 2.0.2

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

@@ -1,68 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { Icons } from "../../assets/icons";
-export class CpslIcon {
-    constructor() {
-        this.src = undefined;
-        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] })));
-    }
-    static get is() { return "cpsl-icon"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["cpsl-icon.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["cpsl-icon.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "src": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The external source of the icon. If both `icon` and `src` are provided, `icon` will be used."
-                },
-                "attribute": "src",
-                "reflect": false
-            },
-            "icon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"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\" | \"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",
-                            "path": "../../interface",
-                            "id": "src/interface.ts::IconType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the icon. If both `icon` and `src` are provided, `icon` will be used."
-                },
-                "attribute": "icon",
-                "reflect": false
-            }
-        };
-    }
-}
-//# sourceMappingURL=cpsl-icon.js.map

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

@@ -1 +0,0 @@
-{"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-icon/test/cpsl-icon.e2e.js

@@ -1,29 +0,0 @@
-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-icon', () => {
-    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
-        const page = yield newE2EPage();
-        yield page.setContent('<cpsl-icon></cpsl-icon>');
-        const element = yield page.find('cpsl-icon');
-        expect(element).toHaveClass('hydrated');
-    }));
-});
-//# sourceMappingURL=cpsl-icon.e2e.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cpsl-icon.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-icon/test/cpsl-icon.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;QAEjD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC7C,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-icon', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-icon></cpsl-icon>');\n\n    const element = await page.find('cpsl-icon');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"cpsl-icon.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-icon/test/cpsl-icon.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yBAAyB;SAChC,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 { CpslIcon } from '../cpsl-icon';\n\ndescribe('cpsl-icon', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslIcon],\n      html: `<cpsl-icon></cpsl-icon>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-icon>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-icon>\n    `);\n  });\n});\n"]}

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

@@ -1,77 +0,0 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
-   * A heuristic that applies CSS to mobile
-   * viewports (i.e. phones, not tablets).
-   *
-   * Usage:
-   * @include mobile-viewport() {
-   *   :host {
-   *     background-color: blue;
-   *   }
-   * }
-   */
-:host {
-  --box-border-radius: var(--cpsl-border-radius-info-box);
-  --box-padding-top: 16px;
-  --box-padding-bottom: 16px;
-  --box-padding-start: 16px;
-  --box-padding-end: 16px;
-  --box-border-width: 1px;
-}
-
-.info-box-container {
-  border-radius: var(--input-border-radius);
-  -webkit-padding-start: var(--box-padding-start);
-  padding-inline-start: var(--box-padding-start);
-  -webkit-padding-end: var(--box-padding-end);
-  padding-inline-end: var(--box-padding-end);
-  padding-top: var(--box-padding-top);
-  padding-bottom: var(--box-padding-bottom);
-  display: flex;
-  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,19 +0,0 @@
-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' }))));
-    }
-    static get is() { return "cpsl-info-box"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["cpsl-info-box.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["cpsl-info-box.css"]
-        };
-    }
-}
-//# sourceMappingURL=cpsl-info-box.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cpsl-info-box.js","sourceRoot":"","sources":["../../../../src/components/cpsl-info-box/cpsl-info-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;IACtB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-info-box',\n  styleUrl: 'cpsl-info-box.scss',\n  shadow: true,\n})\nexport class CpslInfoBox {\n  render() {\n    return (\n      <Host>\n        <div class=\"info-box-container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,29 +0,0 @@
-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-info-box', () => {
-    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
-        const page = yield newE2EPage();
-        yield page.setContent('<cpsl-info-box></cpsl-info-box>');
-        const element = yield page.find('cpsl-info-box');
-        expect(element).toHaveClass('hydrated');
-    }));
-});
-//# sourceMappingURL=cpsl-info-box.e2e.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cpsl-info-box.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-info-box/test/cpsl-info-box.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-info-box', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-info-box></cpsl-info-box>');\n\n    const element = await page.find('cpsl-info-box');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"cpsl-info-box.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-info-box/test/cpsl-info-box.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,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 { CpslInfoBox } from '../cpsl-info-box';\n\ndescribe('cpsl-info-box', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslInfoBox],\n      html: `<cpsl-info-box></cpsl-info-box>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-info-box>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-info-box>\n    `);\n  });\n});\n"]}

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

@@ -1,194 +0,0 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
-   * A heuristic that applies CSS to mobile
-   * viewports (i.e. phones, not tablets).
-   *
-   * Usage:
-   * @include mobile-viewport() {
-   *   :host {
-   *     background-color: blue;
-   *   }
-   * }
-   */
-:host {
-  --container-box-shadow: none;
-  --container-box-shadow-color: var(--cpsl-color-alpha-black-16);
-  --container-border-color: var(--cpsl-color-input-border-active);
-  --container-border-error-color: var(--cpsl-color-input-border-error);
-  --container-background-color: var(--cpsl-color-input-surface-default);
-  --container-background-color-disabled: var(--cpsl-color-input-surface-disabled);
-  --container-border-width: 1px;
-  --container-border-radius: var(--cpsl-border-radius-input);
-  --container-padding-top: 4px;
-  --container-padding-bottom: 4px;
-  --container-padding-end: 4px;
-  --container-padding-start: 8px;
-  --container-height: 46px;
-  --container-gap: 8px;
-  --input-background-color: var(--cpsl-color-input-surface-default);
-  --input-background-color-disabled: var(--cpsl-color-input-surface-disabled);
-  --input-color: var(--cpsl-color-text-primary);
-  --input-placeholder-color: var(--cpsl-color-text-secondary);
-  --input-font-size: clamp(16px, 1rem, 24px);
-  --label-color: var(--cpsl-color-text-primary);
-  --label-font-size: clamp(14px, 0.875rem, 21px);
-  --label-margin-bottom: 5px;
-  --helper-text-color: var(--cpsl-color-text-secondary);
-  --helper-text-error-color: var(--cpsl-color-text-error);
-  --helper-text-icon-color: var(--cpsl-color-text-secondary);
-  --helper-text-icon-error-color: var(--cpsl-color-text-error);
-  --helper-text-icon-size: 16px;
-  --helper-text-font-size: clamp(14px, 0.875rem, 21px);
-  --helper-text-margin-top: 8px;
-  display: block;
-  font-family: var(--cpsl-font-family, inherit);
-}
-
-:host(.disabled) {
-  --container-background-color: var(--container-background-color-disabled);
-  --input-background-color: var(--input-background-color-disabled);
-  --input-color: var(--cpsl-color-text-secondary);
-}
-
-:host(:not(.has-value)) {
-  --container-border-color: var(--cpsl-color-input-border-placeholder);
-  --input-color: var(--cpsl-color-text-secondary);
-  --container-background-color: transparent;
-  --input-background-color: transparent;
-}
-
-:host(.focused) {
-  --container-box-shadow: 0px 0px 0px 2px var(--container-box-shadow-color);
-  --container-border-color: var(--cpsl-color-input-border-active);
-  --container-background-color: var(--cpsl-color-input-surface-default);
-}
-
-.input-container {
-  -webkit-padding-start: var(--container-padding-start);
-  padding-inline-start: var(--container-padding-start);
-  -webkit-padding-end: var(--container-padding-end);
-  padding-inline-end: var(--container-padding-end);
-  padding-top: var(--container-padding-top);
-  padding-bottom: var(--container-padding-bottom);
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  height: var(--container-height);
-  gap: var(--container-gap);
-  border-style: solid;
-  border-width: var(--container-border-width);
-  border-color: var(--container-border-color);
-  border-radius: var(--container-border-radius);
-  background-color: var(--container-background-color);
-  box-shadow: var(--container-box-shadow);
-}
-
-.error-container {
-  border-color: var(--container-border-error-color);
-}
-
-.native-input {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  height: 100%;
-  box-sizing: border-box;
-  font-size: var(--input-font-size);
-  color: var(--input-color);
-  background-color: var(--input-background-color);
-  font-family: var(--cpsl-font-family, inherit);
-}
-.native-input:focus, .native-input:focus-visible {
-  outline: none;
-}
-.native-input::placeholder {
-  color: var(--input-placeholder-color);
-  opacity: 1; /* Firefox */
-}
-
-.label {
-  display: inline-block;
-  color: var(--label-color);
-  font-size: var(--label-font-size);
-  font-weight: 500;
-  margin-bottom: var(--label-margin-bottom);
-}
-
-.helper-text-container {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--helper-text-color);
-  font-size: var(--helper-text-font-size);
-  font-weight: 500;
-  margin-top: var(--helper-text-margin-top);
-}
-.helper-text-container cpsl-icon {
-  --height: var(--helper-text-icon-size);
-  --width: var(--helper-text-icon-size);
-  --icon-color: var(--helper-text-icon-color);
-}
-
-.error-text {
-  color: var(--helper-text-error-color);
-}
-.error-text cpsl-icon {
-  --icon-color: var(--helper-text-icon-error-color);
-}
-
-:host ::slotted([slot=start]) {
-  flex: 0;
-}
-:host ::slotted([slot=end]) {
-  flex: 0;
-}
-:host ::slotted(cpsl-icon) {
-  --icon-color: var(--input-color);
-}
-:host ::slotted(cpsl-button) {
-  width: calc(var(--container-height) - var(--container-padding-top) - var(--container-padding-bottom) - var(--container-border-width) * 2);
-  --button-border-radius: calc(var(--container-border-radius) - 2px);
-}