@usecapsule/core-components 2.0.0 → 2.0.2

package/dist/collection/components/cpsl-animation/test/cpsl-animation.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-animation', () => {
-    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
-        const page = yield newE2EPage();
-        yield page.setContent('<cpsl-animation></cpsl-animation>');
-        const element = yield page.find('cpsl-animation');
-        expect(element).toHaveClass('hydrated');
-    }));
-});
-//# sourceMappingURL=cpsl-animation.e2e.js.map

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

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

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

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

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

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

@@ -1,162 +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 {
-  --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;
-  --button-padding-start: 16px;
-  --button-padding-end: 16px;
-  --button-font-size: clamp(14px, 0.875rem, 21px);
-  height: 100%;
-  width: 100%;
-  font-family: var(--cpsl-font-family, inherit);
-}
-
-:host(.button-disabled) {
-  cursor: default;
-  pointer-events: none;
-}
-
-:host(.primary) {
-  --button-color: var(--cpsl-color-text-inverted);
-  --button-background-color: var(--cpsl-color-primary-button-surface-default);
-  --button-border-color: var(--cpsl-color-primary-button-border-default);
-}
-:host(.primary):host(.button-disabled) {
-  --button-background-color: var(--cpsl-color-primary-button-surface-disabled);
-  --button-border-color: var(--cpsl-color-primary-button-border-disabled);
-  --button-box-shadow: none;
-  --button-outline-color: transparent;
-}
-:host(.primary) :not(.button-disabled):hover {
-  --button-background-color: var(--cpsl-color-primary-button-surface-hover);
-}
-:host(.primary) :not(.button-disabled):active {
-  --button-background-color: var(--cpsl-color-primary-button-surface-pressed);
-}
-:host(.primary) :not(.button-disabled):focus-visible {
-  --button-outline-color: var(--cpsl-color-primary-button-outline);
-}
-:host(.primary) ::slotted(cpsl-icon) {
-  --icon-color: var(--cpsl-text-inverted);
-}
-
-:host(.secondary) {
-  --button-color: var(--cpsl-color-text-primary);
-  --button-background-color: var(--cpsl-color-secondary-button-surface-default);
-  --button-border-color: var(--cpsl-color-secondary-button-border-default);
-}
-:host(.secondary):host(.button-disabled) {
-  --button-background-color: var(--cpsl-color-secondary-button-surface-disabled);
-  --button-border-color: var(--cpsl-color-secondary-button-border-disabled);
-  --button-box-shadow: none;
-  --button-outline-color: transparent;
-}
-:host(.secondary) :not(.button-disabled):hover {
-  --button-background-color: var(--cpsl-color-secondary-button-surface-hover);
-}
-:host(.secondary) :not(.button-disabled):active {
-  --button-background-color: var(--cpsl-color-secondary-button-surface-pressed);
-}
-:host(.secondary) :not(.button-disabled):focus-visible {
-  --button-outline-color: var(--cpsl-color-secondary-button-outline);
-}
-:host(.secondary) ::slotted(cpsl-icon) {
-  --icon-color: var(--cpsl-text-primary);
-}
-
-:host(.icon) {
-  --button-color: transparent;
-  --button-background-color: transparent;
-  --button-border-color: transparent;
-  --button-box-shadow: none;
-  --button-outline-color: transparent;
-}
-:host(.icon) ::slotted(cpsl-icon) {
-  --icon-color: var(--cpsl-color-text-secondary);
-}
-:host(.icon) :not(.button-disabled):hover ::slotted(cpsl-icon) {
-  --icon-color: var(--cpsl-color-text-primary);
-}
-
-.button-native {
-  border-radius: var(--button-border-radius);
-  -webkit-padding-start: var(--button-padding-start);
-  padding-inline-start: var(--button-padding-start);
-  -webkit-padding-end: var(--button-padding-end);
-  padding-inline-end: var(--button-padding-end);
-  padding-top: var(--button-padding-top);
-  padding-bottom: var(--button-padding-bottom);
-  font-size: var(--container-font-size);
-  font-weight: 500;
-  border: var(--button-border-width) solid transparent;
-  cursor: pointer;
-  color: var(--button-color);
-  background-color: var(--button-background-color);
-  border-color: var(--button-border-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  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

@@ -1,68 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class CpslButton {
-    constructor() {
-        this.disabled = false;
-        this.variant = 'primary';
-    }
-    render() {
-        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: '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"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["cpsl-button.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["cpsl-button.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If the button is disabled.\nDefault is: false."
-                },
-                "attribute": "disabled",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'primary' | 'secondary' | 'icon'",
-                    "resolved": "\"icon\" | \"primary\" | \"secondary\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The variant of button.\nOptions are: `\"primary\"`, `\"secondary\", `\"icon\".\nDefault is: `\"primary\"`."
-                },
-                "attribute": "variant",
-                "reflect": true,
-                "defaultValue": "'primary'"
-            }
-        };
-    }
-}
-//# sourceMappingURL=cpsl-button.js.map

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

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

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

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

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

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

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

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

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

package/dist/collection/components/cpsl-code-input/code-change-interface.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-change-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/code-change-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface CodeChangeEventDetail {\n  value: string;\n}\n"]}

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

@@ -1,134 +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 {
-  --input-width: 40px;
-  --input-height: 54px;
-  --input-border-radius: var(--cpsl-border-radius-input);
-  --input-border-color: var(--cpsl-color-input-border-placeholder);
-  --input-border-width: 1px;
-  --input-background-color: var(--cpsl-color-input-surface-default);
-  --input-border-error-color: var(--cpsl-color-input-border-error);
-  --input-font-size: clamp(20px, 1.25rem, 30px);
-  --input-color: var(--cpsl-color-text-primary);
-  --helper-text-color: var(--cpsl-color-text-secondary);
-  --helper-text-error-color: var(--cpsl-color-text-error);
-  --helper-text-icon-color: var(--cpsl-color-text-secondary);
-  --helper-text-icon-error-color: var(--cpsl-color-text-error);
-  --helper-text-icon-size: 16px;
-  --helper-text-font-size: 12px;
-  --helper-text-margin-top: 6px;
-  display: block;
-  font-family: var(--cpsl-font-family, inherit);
-}
-
-.code-container {
-  display: flex;
-  gap: 8px;
-}
-
-.code-input {
-  font-family: var(--cpsl-font-family, inherit);
-  border-radius: var(--input-border-radius);
-  font-size: var(--input-font-size);
-  border-color: var(--input-border-color);
-  border-width: var(--input-border-width);
-  border-style: solid;
-  font-size: var(--input-font-size);
-  color: var(--input-color);
-  width: var(--input-width);
-  height: var(--input-height);
-  background-color: var(--input-background-color);
-  box-sizing: border-box;
-  text-align: center;
-  outline: none;
-}
-.code-input:focus {
-  --input-border-color: var(--cpsl-color-input-border-active);
-}
-.code-input::-webkit-outer-spin-button, .code-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.code-input .error-container {
-  border-color: var(--input-border-error-color);
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.helper-text-container {
-  flex-basis: 100%;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--helper-text-color);
-  font-size: var(--helper-text-font-size);
-  margin-top: var(--helper-text-margin-top);
-}
-.helper-text-container cpsl-icon {
-  --height: var(--helper-text-icon-size);
-  --width: var(--helper-text-icon-size);
-  --icon-color: var(--helper-text-icon-color);
-}
-
-.error-text {
-  color: var(--helper-text-error-color);
-}
-.error-text cpsl-icon {
-  --icon-color: var(--helper-text-icon-error-color);
-}