@usecapsule/core-components 3.1.3 → 3.2.0-dev.1

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

@@ -0,0 +1,263 @@
+/**
+ * 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 {
+  position: relative;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  clip-path: content-box;
+}
+
+:host > cpsl-text {
+  z-index: 1;
+}
+
+:host > .backgroundContainer {
+  position: relative;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host > .backgroundContainer > .background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-25%);
+  left: 0;
+  right: 0;
+  z-index: 0;
+}
+
+:host > .backgroundContainer > .background > .ring {
+  position: absolute;
+  top: 45px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  flex-shrink: 0;
+  transition: box-shadow 0.3s;
+}
+
+:host(.connection) > .backgroundContainer > .background .ring1 {
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.07);
+}
+:host(.connection) > .backgroundContainer > .background .ring2 {
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
+}
+:host(.connection) > .backgroundContainer > .background .ring3 {
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);
+}
+
+:host(.pending) > .backgroundContainer > .background .ring0 {
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+}
+:host(.pending) > .backgroundContainer > .background .ring1 {
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
+}
+:host(.pending) > .backgroundContainer > .background .ring2 {
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.06);
+}
+:host(.pending) > .backgroundContainer > .background .ring3 {
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);
+}
+
+:host(.failed) > .backgroundContainer > .background > .ring0 {
+  box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.1);
+}
+:host(.failed) > .backgroundContainer > .background > .ring1 {
+  box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.08);
+}
+:host(.failed) > .backgroundContainer > .background > .ring2 {
+  box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.06);
+}
+:host(.failed) > .backgroundContainer > .background > .ring3 {
+  box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.04);
+}
+
+:host(.approved) > .backgroundContainer > .background .ring1 {
+  box-shadow: 0px 0px 20px rgba(219, 0, 179, 0.1);
+}
+:host(.approved) > .backgroundContainer > .background .ring2 {
+  box-shadow: 0px 0px 20px rgba(219, 0, 51, 0.1);
+}
+:host(.approved) > .backgroundContainer > .background .ring3 {
+  box-shadow: 0px 0px 20px rgba(254, 83, 48, 0.1);
+}
+
+:host > .backgroundContainer > .background > .ring3 {
+  width: 480px;
+  height: 480px;
+  border-radius: 480px;
+}
+
+:host > .backgroundContainer > .background > .ring2 {
+  width: 360px;
+  height: 360px;
+  border-radius: 360px;
+}
+
+:host > .backgroundContainer > .background > .ring1 {
+  width: 240px;
+  height: 240px;
+  border-radius: 240px;
+}
+
+:host > .backgroundContainer > .background > .ring0 {
+  width: 120px;
+  height: 120px;
+  border-radius: 120px;
+}
+
+:host > .backgroundContainer > .background > .ringCenter.connection {
+  position: absolute;
+  top: 45px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 160px;
+  height: 160px;
+  border-radius: 160px;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+:host > .backgroundContainer > .background > .ringCenter.connection img {
+  width: 100%;
+  height: 100%;
+  animation: spin 2s linear infinite;
+}
+
+:host > .backgroundContainer > .background > .ringCenter.approved {
+  position: absolute;
+  top: 45px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 160px;
+  height: 160px;
+  border-radius: 160px;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+:host > .backgroundContainer > .background > .ringCenter.approved img {
+  width: 100%;
+  height: 100%;
+  animation: spin 2s linear infinite;
+}
+
+:host > .backgroundContainer > .background > .ringCenter.pending {
+  position: absolute;
+  top: 45px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 82px;
+  height: 82px;
+  border-radius: 82px;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+:host > .backgroundContainer > .background > .ringCenter.pending img {
+  width: 100%;
+  height: 100%;
+  animation: spin 2s linear infinite;
+}
+
+:host > .backgroundContainer > .background > .fadeOut {
+  position: absolute;
+  height: 200%;
+  right: 0;
+  bottom: -100%;
+  left: 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
+}
+
+:host > .backgroundContainer > .children {
+  z-index: 1;
+}
+
+:host(.connection) > .backgroundContainer > .children > .connectDiagramContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+}

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

@@ -0,0 +1,88 @@
+import { Host, h } from "@stencil/core";
+import { Images } from "../../assets/images";
+const Checkmark = () => (h("svg", { width: "48", height: "35", viewBox: "0 0 48 35", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M47.219 1.11439C48.2604 2.15579 48.2604 3.84423 47.219 4.88563L17.8856 34.219C16.8442 35.2604 15.1558 35.2604 14.1144 34.219L0.781049 20.8856C-0.26035 19.8442 -0.26035 18.1558 0.781049 17.1144C1.82245 16.073 3.51089 16.073 4.55229 17.1144L16 28.5621L43.4477 1.11439C44.4891 0.0729939 46.1776 0.0729939 47.219 1.11439Z", fill: "url(#paint0_linear_841_278)" }), h("defs", null, h("linearGradient", { id: "paint0_linear_841_278", x1: "48", y1: "17.6667", x2: "0", y2: "17.6667", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": "#BC82F3" }), h("stop", { offset: "0.485", "stop-color": "#FF6778" }), h("stop", { offset: "1", "stop-color": "#FFBA71" })))));
+const AlertCircle = () => (h("svg", { width: "58", height: "58", viewBox: "0 0 58 58", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M29 18.3333V29M29 39.6666H29.0267M55.6667 29C55.6667 43.7276 43.7276 55.6666 29 55.6666C14.2724 55.6666 2.33333 43.7276 2.33333 29C2.33333 14.2724 14.2724 2.33331 29 2.33331C43.7276 2.33331 55.6667 14.2724 55.6667 29Z", stroke: "#F04438", "stroke-width": "4", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+export class CpslHero {
+    constructor() {
+        this.variant = 'connection';
+        this.title = undefined;
+        this.subtitle = undefined;
+    }
+    render() {
+        return (h(Host, { key: '526227a9695e8c0846780a3c39034b4d558cf141', class: {
+                connection: this.variant === 'connection',
+                pending: this.variant === 'pending',
+                approved: this.variant === 'approved',
+                failed: this.variant === 'failed',
+            } }, h("div", { key: '45ce6b958e3c3b8544e280425da83fbb014ff500', class: "backgroundContainer" }, h("div", { key: 'a5337d2ceddcd7ac725aa9b68ba240e62fc32f37', class: "background" }, h("div", { key: '88703ca494220195a5da3a21aef49e4eee29b928', class: "ring ring3" }), h("div", { key: 'bc9e1eacc99a1993e7f1e76d87c521250d8287f9', class: "ring ring2" }), h("div", { key: 'afaa234eb2d2a312c2d197de435d4396e64b77f1', class: "ring ring1" }), h("div", { key: '0e46b2f228e479019d0cfb8cda850fd3f361da65', class: "ring ring0" }), this.variant === 'connection' && (h("div", { class: `ringCenter connection` }, h("img", { src: Images.heroDefault }))), this.variant === 'pending' && (h("div", { class: `ringCenter pending` }, h("img", { src: Images.heroPending }))), this.variant === 'approved' && (h("div", { class: `ringCenter approved` }, h("img", { src: Images.heroSuccess }))), h("div", { key: 'ecf964e7816cfdd4db690a1a4b21e39f91504457', class: "fadeOut" })), h("div", { key: '0d494d9907b97ca438a5bd1a54d776555da0940e', class: "children" }, this.variant === 'connection' && (h("div", { class: "connectDiagramContainer" }, h("slot", { name: "connectionLeft" }), h("slot", { name: "connectionRight" }))), this.variant === 'failed' && AlertCircle(), this.variant === 'approved' && Checkmark())), h("cpsl-text", { key: '44855a5dbd947bacd51f4dc48d4e2a28f94f1b71', variant: "headingXS", color: "primary", weight: "medium" }, this.title), this.subtitle && (h("cpsl-text", { variant: "bodyM", color: "secondary" }, this.subtitle))));
+    }
+    static get is() { return "cpsl-hero"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-hero.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-hero.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'connection' | 'pending' | 'approved' | 'failed'",
+                    "resolved": "\"approved\" | \"connection\" | \"failed\" | \"pending\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the button.\nOptions are: `\"default\"`, `\"loading\", `\"success\".\nDefault is: `\"default\"`."
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'connection'"
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "title",
+                "reflect": true
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "subtitle",
+                "reflect": true
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-hero.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-hero.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { Images } from '../../assets/images';\n\nconst Checkmark = () => (\n  <svg width=\"48\" height=\"35\" viewBox=\"0 0 48 35\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M47.219 1.11439C48.2604 2.15579 48.2604 3.84423 47.219 4.88563L17.8856 34.219C16.8442 35.2604 15.1558 35.2604 14.1144 34.219L0.781049 20.8856C-0.26035 19.8442 -0.26035 18.1558 0.781049 17.1144C1.82245 16.073 3.51089 16.073 4.55229 17.1144L16 28.5621L43.4477 1.11439C44.4891 0.0729939 46.1776 0.0729939 47.219 1.11439Z\"\n      fill=\"url(#paint0_linear_841_278)\"\n    />\n    <defs>\n      <linearGradient id=\"paint0_linear_841_278\" x1=\"48\" y1=\"17.6667\" x2=\"0\" y2=\"17.6667\" gradientUnits=\"userSpaceOnUse\">\n        <stop stop-color=\"#BC82F3\" />\n        <stop offset=\"0.485\" stop-color=\"#FF6778\" />\n        <stop offset=\"1\" stop-color=\"#FFBA71\" />\n      </linearGradient>\n    </defs>\n  </svg>\n);\n\nconst AlertCircle = () => (\n  <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M29 18.3333V29M29 39.6666H29.0267M55.6667 29C55.6667 43.7276 43.7276 55.6666 29 55.6666C14.2724 55.6666 2.33333 43.7276 2.33333 29C2.33333 14.2724 14.2724 2.33331 29 2.33331C43.7276 2.33331 55.6667 14.2724 55.6667 29Z\"\n      stroke=\"#F04438\"\n      stroke-width=\"4\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n);\n\n@Component({\n  tag: 'cpsl-hero',\n  styleUrl: 'cpsl-hero.scss',\n  shadow: true,\n})\nexport class CpslHero {\n  /**\n   * The variant of the button.\n   * Options are: `\"default\"`, `\"loading\", `\"success\".\n   * Default is: `\"default\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'connection' | 'pending' | 'approved' | 'failed' = 'connection';\n\n  @Prop({ reflect: true }) title: string;\n\n  @Prop({ reflect: true }) subtitle?: string;\n\n  render() {\n    return (\n      <Host\n        class={{\n          // VARIANTS\n          connection: this.variant === 'connection',\n          pending: this.variant === 'pending',\n          approved: this.variant === 'approved',\n          failed: this.variant === 'failed',\n        }}\n      >\n        <div class=\"backgroundContainer\">\n          <div class=\"background\">\n            <div class=\"ring ring3\" />\n            <div class=\"ring ring2\" />\n            <div class=\"ring ring1\" />\n            <div class=\"ring ring0\" />\n            {this.variant === 'connection' && (\n              <div class={`ringCenter connection`}>\n                <img src={Images.heroDefault} />\n              </div>\n            )}\n            {this.variant === 'pending' && (\n              <div class={`ringCenter pending`}>\n                <img src={Images.heroPending} />\n              </div>\n            )}\n\n            {this.variant === 'approved' && (\n              <div class={`ringCenter approved`}>\n                <img src={Images.heroSuccess} />\n              </div>\n            )}\n            <div class=\"fadeOut\" />\n          </div>\n          <div class=\"children\">\n            {this.variant === 'connection' && (\n              <div class=\"connectDiagramContainer\">\n                <slot name=\"connectionLeft\" />\n                <slot name=\"connectionRight\" />\n              </div>\n            )}\n            {this.variant === 'failed' && AlertCircle()}\n            {this.variant === 'approved' && Checkmark()}\n          </div>\n        </div>\n        <cpsl-text variant=\"headingXS\" color=\"primary\" weight=\"medium\">\n          {this.title}\n        </cpsl-text>\n        {this.subtitle && (\n          <cpsl-text variant=\"bodyM\" color=\"secondary\">\n            {this.subtitle}\n          </cpsl-text>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-hero/cpsl-hero.stories.js

@@ -0,0 +1,17 @@
+const meta = {
+    title: 'Components/CpslHero',
+};
+export default meta;
+const ConnectionTemplate = () => `
+<cpsl-hero variant="connection" title="Approve Transaction" subtitle="Please review the following transaction details">
+  <cpsl-identicon size={62} hash="5yhg423546" slot="connectionLeft"></cpsl-identicon>
+  <cpsl-identicon size={62} hash="884884fj4" slot="connectionRight"></cpsl-identicon>
+</cpsl-hero>`;
+const PendingTemplate = () => `<cpsl-hero variant="pending"></cpsl-hero>`;
+const ApprovedTemplate = () => `<cpsl-hero variant="approved"></cpsl-hero>`;
+const FailedTemplate = () => `<cpsl-hero variant="failed"></cpsl-hero>`;
+export const Connection = ConnectionTemplate.bind({});
+export const Pending = PendingTemplate.bind({});
+export const Approved = ApprovedTemplate.bind({});
+export const Failed = FailedTemplate.bind({});
+//# sourceMappingURL=cpsl-hero.stories.js.map

package/dist/collection/components/cpsl-hero/cpsl-hero.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-hero.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.stories.ts"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA0C;IAClD,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,kBAAkB,GAAU,GAAG,EAAE,CAAC;;;;aAI3B,CAAC;AACd,MAAM,eAAe,GAAU,GAAG,EAAE,CAAC,2CAA2C,CAAC;AACjF,MAAM,gBAAgB,GAAU,GAAG,EAAE,CAAC,4CAA4C,CAAC;AACnF,MAAM,cAAc,GAAU,GAAG,EAAE,CAAC,0CAA0C,CAAC;AAE/E,MAAM,CAAC,MAAM,UAAU,GAAU,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7D,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,QAAQ,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,MAAM,GAAU,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslHero } from './cpsl-hero';\n\nconst meta: Meta<CpslHero & { content?: string }> = {\n  title: 'Components/CpslHero',\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslHero & { content?: string }>;\n\nconst ConnectionTemplate: Story = () => `\n<cpsl-hero variant=\"connection\" title=\"Approve Transaction\" subtitle=\"Please review the following transaction details\">\n  <cpsl-identicon size={62} hash=\"5yhg423546\" slot=\"connectionLeft\"></cpsl-identicon>\n  <cpsl-identicon size={62} hash=\"884884fj4\" slot=\"connectionRight\"></cpsl-identicon>\n</cpsl-hero>`;\nconst PendingTemplate: Story = () => `<cpsl-hero variant=\"pending\"></cpsl-hero>`;\nconst ApprovedTemplate: Story = () => `<cpsl-hero variant=\"approved\"></cpsl-hero>`;\nconst FailedTemplate: Story = () => `<cpsl-hero variant=\"failed\"></cpsl-hero>`;\n\nexport const Connection: Story = ConnectionTemplate.bind({});\nexport const Pending: Story = PendingTemplate.bind({});\nexport const Approved: Story = ApprovedTemplate.bind({});\nexport const Failed: Story = FailedTemplate.bind({});\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-hero.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-hero/test/cpsl-hero.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 { CpslHero } from '../cpsl-hero';\n\ndescribe('cpsl-hero', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslHero],\n      html: `<cpsl-hero></cpsl-hero>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-hero>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-hero>\n    `);\n  });\n});\n"]}

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

@@ -6,7 +6,7 @@ export class CpslIcon {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '06850dc9a6d40b95e8b92ea8722bedfa1dc7b36f', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '91853a486a389f4850a7ae83a25cedba52c645a5', 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": "\"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\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"doubleArc\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"singleArc\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"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\"",
                     "references": {
                         "IconType": {
                             "location": "import",

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

@@ -0,0 +1,69 @@
+:host {
+  --identicon-background-red: linear-gradient(136deg, #FF4270 6.86%, #FF7C7C 93.78%);
+  --identicon-background-orange: linear-gradient(136deg, #F45532 6.86%, #FF9B63 93.78%);
+  --identicon-background-yellow: linear-gradient(136deg, #FFA756 6.86%, #FBFF47 93.78%);
+  --identicon-background-green: linear-gradient(136deg, #0CAE60 6.86%, #7BFFD0 93.78%);
+  --identicon-background-blue: linear-gradient(136deg, #476FFF 6.86%, #47C8FF 93.78%);
+  --identicon-background-purple: linear-gradient(136deg, #9747FF 6.86%, #DA47FF 93.78%);
+  display: block;
+  width: 62px;
+  height: 62px;
+  aspect-ratio: 1;
+  border-radius: 6px;
+  position: relative;
+  border: 1px solid var(--cpsl-color-background-8);
+}
+:host > svg {
+  fill: rgba(255, 255, 255, 0.6);
+  position: absolute;
+  width: 35%;
+}
+:host > svg.rotate90 {
+  transform: rotate(0.25turn);
+}
+:host > svg.rotate180 {
+  transform: rotate(0.5turn);
+}
+:host > svg.rotate270 {
+  transform: rotate(0.75turn);
+}
+:host > svg:nth-child(1) {
+  right: 50%;
+  bottom: 50%;
+}
+:host > svg:nth-child(2) {
+  left: 50%;
+  bottom: 50%;
+}
+:host > svg:nth-child(3) {
+  right: 50%;
+  top: 50%;
+}
+:host > svg:nth-child(4) {
+  left: 50%;
+  top: 50%;
+}
+
+:host(.red) {
+  background: var(--identicon-background-red);
+}
+
+:host(.orange) {
+  background: var(--identicon-background-orange);
+}
+
+:host(.green) {
+  background: var(--identicon-background-green);
+}
+
+:host(.yellow) {
+  background: var(--identicon-background-yellow);
+}
+
+:host(.blue) {
+  background: var(--identicon-background-blue);
+}
+
+:host(.purple) {
+  background: var(--identicon-background-purple);
+}