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

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

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

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

@@ -0,0 +1,52 @@
+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';
+    }
+    render() {
+        return (h(Host, { key: 'd43448970e8b605d97242e3f31080531fa1adb93', class: {
+                connection: this.variant === 'connection',
+                pending: this.variant === 'pending',
+                approved: this.variant === 'approved',
+                failed: this.variant === 'failed',
+            } }, h("div", { key: '8090c039f3d8d31949847a8d75fc2f181dac79ef', class: "background" }, h("div", { key: '374b4cf9c0ff508f7066131daaacce601f1284cf', class: "ring ring3" }), h("div", { key: '9820c3d2b038c9b3e63c9a24decafb812d49fa61', class: "ring ring2" }), h("div", { key: '387f7ffe6b391bd87fe4bad70d4a6a453441e492', class: "ring ring1" }), h("div", { key: '2ea4c1f575b67d47d7b9e5589302be8c995d3cc3', 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: '13540b02127b72826994b1148171b523dfc9093b', class: "fadeOut" })), h("div", { key: '914a99423bc39a9d811af550d9f52c6af27d9db2', 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())));
+    }
+    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'"
+            }
+        };
+    }
+}
+//# 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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAC5F,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,+TAA+T,EACjU,IAAI,EAAC,6BAA6B,GAClC;IACF;QACE,sBAAgB,EAAE,EAAC,uBAAuB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,SAAS,EAAC,aAAa,EAAC,gBAAgB;YAChH,0BAAiB,SAAS,GAAG;YAC7B,YAAM,MAAM,EAAC,OAAO,gBAAY,SAAS,GAAG;YAC5C,YAAM,MAAM,EAAC,GAAG,gBAAY,SAAS,GAAG,CACzB,CACZ,CACH,CACP,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAC5F,YACE,CAAC,EAAC,2NAA2N,EAC7N,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CAAC;AAOF,MAAM,OAAO,QAAQ;;uBAMmE,YAAY;;IAElG,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBAEL,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;gBACzC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;aAClC;YAED,4DAAK,KAAK,EAAC,YAAY;gBACrB,4DAAK,KAAK,EAAC,YAAY,GAAG;gBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;gBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;gBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;gBACzB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,WAAK,KAAK,EAAE,uBAAuB;oBACjC,WAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;gBACA,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAC7B,WAAK,KAAK,EAAE,oBAAoB;oBAC9B,WAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;gBAEA,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAC9B,WAAK,KAAK,EAAE,qBAAqB;oBAC/B,WAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;gBACD,4DAAK,KAAK,EAAC,SAAS,GAAG,CACnB;YACN,4DAAK,KAAK,EAAC,UAAU;gBAClB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,WAAK,KAAK,EAAC,yBAAyB;oBAClC,YAAM,IAAI,EAAC,gBAAgB,GAAG;oBAC9B,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACP;gBACA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,WAAW,EAAE;gBAC1C,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,EAAE,CACvC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  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=\"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      </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">
+  <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\">\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: '3a513c8f07069fe226a579ba734cf475ab33c4cf', 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);
+}

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

@@ -0,0 +1,100 @@
+import { Host, h } from "@stencil/core";
+const SingleArc = (rotation) => (h("svg", { class: {
+        rotate90: rotation === 1,
+        rotate180: rotation === 2,
+        rotate270: rotation === 3,
+    }, viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_674_66)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" })), h("defs", null, h("clipPath", { id: "clip0_674_66" }, h("rect", { width: "12", height: "12" })))));
+const DoubleArc = (rotation) => (h("svg", { class: {
+        rotate90: rotation === 1,
+        rotate180: rotation === 2,
+        rotate270: rotation === 3,
+    }, viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_674_255)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" })), h("defs", null, h("clipPath", { id: "clip0_674_255" }, h("rect", { width: "12", height: "12" })))));
+export class CpslIdenticon {
+    constructor() {
+        this.hash = undefined;
+        this.size = 40;
+    }
+    render() {
+        const [code, color] = stringToBinaryAndColor(this.hash);
+        const shapeA = ((code >> 2) & 1) !== 0;
+        const shapeB = ((code >> 3) & 1) !== 0;
+        const shapeC = ((code >> 4) & 1) !== 0;
+        const shapeD = ((code >> 5) & 1) !== 0;
+        const rotationA = (code >> 6) & 3;
+        const rotationB = (code >> 7) & 3;
+        const rotationC = (code >> 8) & 3;
+        const rotationD = (code >> 9) & 3;
+        const [shapes, rotations] = [
+            [shapeA, shapeB, shapeC, shapeD],
+            [rotationA, rotationB, rotationC, rotationD],
+        ];
+        return (h(Host, { key: '96fca00db5c91275e22f22b36b2688eab2c2a3b6', class: {
+                red: color === 'red',
+                orange: color === 'orange',
+                yellow: color === 'yellow',
+                green: color === 'green',
+                blue: color === 'blue',
+                purple: color === 'purple',
+            } }, shapes.map((isDouble, index) => {
+            return isDouble ? DoubleArc(rotations[index]) : SingleArc(rotations[index]);
+        })));
+    }
+    static get is() { return "cpsl-identicon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-identicon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-identicon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "hash": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hash",
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the identicon.\nDefault is: 40."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "40"
+            }
+        };
+    }
+}
+const COLORS = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
+function stringToBinaryAndColor(hash) {
+    const code = (hash.charCodeAt(0) << 24) | (hash.charCodeAt(1) << 16) | (hash.charCodeAt(2) << 8) | hash.charCodeAt(3);
+    const color = COLORS[Math.abs(code % 6)];
+    return [code, color];
+}
+//# sourceMappingURL=cpsl-identicon.js.map