@usecapsule/core-components 1.0.0

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

@@ -0,0 +1,80 @@
+import { Host, h } from "@stencil/core";
+import { Icons } from "../../assets/icons";
+export class CpslAlert {
+    constructor() {
+        this.type = 'error';
+        this.icon = undefined;
+    }
+    get Icon() {
+        if (Boolean(this.icon)) {
+            return Icons[this.icon];
+        }
+        switch (this.type) {
+            case 'error':
+            default: {
+                return Icons.alertCircle;
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: '44ed39687dc02639f574f002aeb4449c19cc3246', class: { error: this.type === 'error' } }, h("div", { key: '68acc8a8679cd344f450b606ee31888e03b2ef8a', class: "alert-container" }, h("div", { key: 'ebb639aef153672c3249d4d6bccaa31b4e933c4d', class: "icon", innerHTML: this.Icon }), h("slot", { key: '0dd11c5b640986d6b6c710b9fb82d344e01a46c0' }))));
+    }
+    static get is() { return "cpsl-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-alert.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'error'",
+                    "resolved": "\"error\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of alert.\nOptions are: `\"error\"`\nDefault is: `\"error\"`."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'error'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconType",
+                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"xBrand\" | \"x\" | \"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 to show."
+                },
+                "attribute": "icon",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-alert.js","sourceRoot":"","sources":["../../../../src/components/cpsl-alert/cpsl-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAQ3C,MAAM,OAAO,SAAS;;oBAMK,OAAO;;;IAOhC,IAAY,IAAI;QACd,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;QAED,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO,CAAC;YACb,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,KAAK,CAAC,WAAW,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YAC3C,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DAAK,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;gBAC1C,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { Icons } from '../../assets/icons';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-alert',\n  styleUrl: 'cpsl-alert.scss',\n  shadow: true,\n})\nexport class CpslAlert {\n  /**\n   * The type of alert.\n   * Options are: `\"error\"`\n   * Default is: `\"error\"`.\n   */\n  @Prop() type?: 'error' = 'error';\n\n  /**\n   * The name of the icon to show.\n   */\n  @Prop() icon?: IconType;\n\n  private get Icon() {\n    if (Boolean(this.icon)) {\n      return Icons[this.icon];\n    }\n\n    switch (this.type) {\n      case 'error':\n      default: {\n        return Icons.alertCircle;\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host class={{ error: this.type === 'error' }}>\n        <div class=\"alert-container\">\n          <div class=\"icon\" innerHTML={this.Icon} />\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

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

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

@@ -0,0 +1,158 @@
+/**
+ * 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-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);
+  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);
+  outline-color: var(--button-outline-color);
+}

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

@@ -0,0 +1,68 @@
+import { Host, h } from "@stencil/core";
+export class CpslButton {
+    constructor() {
+        this.disabled = false;
+        this.variant = 'primary';
+    }
+    render() {
+        return (h(Host, { key: 'f1fa105aeacb8c4650321d312d7bd43932fe6c9d', class: {
+                'primary': this.variant === 'primary',
+                'secondary': this.variant === 'secondary',
+                'icon': this.variant === 'icon',
+                'button-disabled': this.disabled,
+            } }, h("button", { key: '92bffb8acc599eb2b3f3bc71ab99d08e7332d498', class: "button-native" }, h("slot", { key: 'cdb33b60e6b5c1bf423ee7e577d58fbcce65a64e' }))));
+    }
+    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

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

package/dist/collection/components/cpsl-button/test/cpsl-button.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-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

@@ -0,0 +1 @@
+{"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

@@ -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 { 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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,134 @@
+/**
+ * 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);
+}