@usecapsule/core-components 3.2.0-dev.1 → 3.3.0-dev.0

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

@@ -54,6 +54,14 @@
    * }
    */
 :host {
+  --ring-3-size: 480px;
+  --ring-2-size: 360px;
+  --ring-1-size: 240px;
+  --ring-0-size: 120px;
+  --default-theme-ring-3-opacity: 0.05;
+  --default-theme-ring-2-opacity: 0.1;
+  --default-theme-ring-1-opacity: 0.2;
+  --default-theme-ring-0-opacity: 0.3;
   position: relative;
   top: 0;
   right: 0;
@@ -77,7 +85,6 @@
   right: 0;
   left: 0;
   width: 100%;
-  height: 180px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -103,27 +110,30 @@
   transition: box-shadow 0.3s;
 }
 
-:host(.connection) > .backgroundContainer > .background .ring1 {
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.07);
+:host(.connection) .ring1,
+:host(.externalWalletConnection) > .backgroundContainer > .background .ring1 {
+  box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 93%));
 }
-:host(.connection) > .backgroundContainer > .background .ring2 {
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
+:host(.connection) .ring2,
+:host(.externalWalletConnection) > .backgroundContainer > .background .ring2 {
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 95%));
 }
-:host(.connection) > .backgroundContainer > .background .ring3 {
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);
+:host(.connection) .ring3,
+:host(.externalWalletConnection) > .backgroundContainer > .background .ring3 {
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 96%));
 }
 
 :host(.pending) > .backgroundContainer > .background .ring0 {
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 80%));
 }
 :host(.pending) > .backgroundContainer > .background .ring1 {
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
+  box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 92%));
 }
 :host(.pending) > .backgroundContainer > .background .ring2 {
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.06);
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 94%));
 }
 :host(.pending) > .backgroundContainer > .background .ring3 {
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 96%));
 }
 
 :host(.failed) > .backgroundContainer > .background > .ring0 {
@@ -149,38 +159,78 @@
   box-shadow: 0px 0px 20px rgba(254, 83, 48, 0.1);
 }
 
+:host(.failed) > .backgroundContainer > .background.defaultTheme > .ring0 {
+  box-shadow: 0px 0px 20px color-mix(in srgb, var(--cpsl-color-utility-red), transparent 90%);
+}
+:host(.failed) > .backgroundContainer > .background.defaultTheme > .ring1 {
+  box-shadow: 0px 0px 20px color-mix(in srgb, var(--cpsl-color-utility-red), transparent 92%);
+}
+:host(.failed) > .backgroundContainer > .background.defaultTheme > .ring2 {
+  box-shadow: 0px 0px 12px color-mix(in srgb, var(--cpsl-color-utility-red), transparent 94%);
+}
+:host(.failed) > .backgroundContainer > .background.defaultTheme > .ring3 {
+  box-shadow: 0px 0px 12px color-mix(in srgb, var(--cpsl-color-utility-red), transparent 96%);
+}
+
+:host(.approved) > .backgroundContainer > .background.defaultTheme .ring1 {
+  box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 93%));
+}
+:host(.approved) > .backgroundContainer > .background.defaultTheme .ring2 {
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 95%));
+}
+:host(.approved) > .backgroundContainer > .background.defaultTheme .ring3 {
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 96%));
+}
+
+:host(:not(.failed)) > .backgroundContainer > .background.defaultTheme > .ring0 {
+  opacity: var(--default-theme-ring-0-opacity);
+}
+:host(:not(.failed)) > .backgroundContainer > .background.defaultTheme > .ring1 {
+  opacity: var(--default-theme-ring-1-opacity);
+}
+:host(:not(.failed)) > .backgroundContainer > .background.defaultTheme > .ring2 {
+  opacity: var(--default-theme-ring-2-opacity);
+}
+:host(:not(.failed)) > .backgroundContainer > .background.defaultTheme > .ring3 {
+  opacity: var(--default-theme-ring-3-opacity);
+}
+
 :host > .backgroundContainer > .background > .ring3 {
-  width: 480px;
-  height: 480px;
-  border-radius: 480px;
+  width: var(--ring-3-size);
+  height: var(--ring-3-size);
+  border-radius: var(--ring-3-size);
 }
 
 :host > .backgroundContainer > .background > .ring2 {
-  width: 360px;
-  height: 360px;
-  border-radius: 360px;
+  width: var(--ring-2-size);
+  height: var(--ring-2-size);
+  border-radius: var(--ring-2-size);
 }
 
 :host > .backgroundContainer > .background > .ring1 {
-  width: 240px;
-  height: 240px;
-  border-radius: 240px;
+  width: var(--ring-1-size);
+  height: var(--ring-1-size);
+  border-radius: var(--ring-1-size);
 }
 
 :host > .backgroundContainer > .background > .ring0 {
-  width: 120px;
-  height: 120px;
-  border-radius: 120px;
+  width: var(--ring-0-size);
+  height: var(--ring-0-size);
+  border-radius: var(--ring-0-size);
 }
 
-:host > .backgroundContainer > .background > .ringCenter.connection {
+:host > .backgroundContainer > .background > .ringCenter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: absolute;
   top: 45px;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 160px;
-  height: 160px;
-  border-radius: 160px;
+  z-index: 10;
+  width: 120px;
+  height: 120px;
+  border-radius: 82px;
 }
 @keyframes spin {
   from {
@@ -190,43 +240,66 @@
     transform: rotate(360deg);
   }
 }
-:host > .backgroundContainer > .background > .ringCenter.connection img {
+:host > .backgroundContainer > .background > .ringCenter 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%);
+:host > .backgroundContainer > .background > .ringCenter img.approvedImage {
+  height: 160px;
   width: 160px;
+}
+:host > .backgroundContainer > .background > .ringCenter img.connectionImage {
   height: 160px;
-  border-radius: 160px;
+  width: 160px;
 }
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+:host > .backgroundContainer > .background > .ringCenter img.pendingImage {
+  height: 90px;
+  width: 90px;
 }
-:host > .backgroundContainer > .background > .ringCenter.approved img {
-  width: 100%;
-  height: 100%;
-  animation: spin 2s linear infinite;
+
+:host > .backgroundContainer > .background > .fadeOut {
+  position: absolute;
+  height: 19%;
+  top: 15%;
+  right: 0;
+  left: 0;
+  background: linear-gradient(180deg, color-mix(in srgb, var(--cpsl-color-background-0), transparent 100%) 0%, var(--cpsl-color-background-0) 100%);
 }
 
-:host > .backgroundContainer > .background > .ringCenter.pending {
+:host > .backgroundContainer > .background > .cover {
   position: absolute;
-  top: 45px;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 82px;
-  height: 82px;
-  border-radius: 82px;
+  height: 50%;
+  top: 34%;
+  right: 0;
+  left: 0;
+  background: var(--cpsl-color-background-0);
+}
+
+:host > .backgroundContainer > .children {
+  z-index: 1;
+}
+
+:host(.connection) > .backgroundContainer > .background > .ringCenter > .connectDiagramContainer {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+}
+
+.centerIcon {
+  position: absolute;
+  --icon-color: var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));
+  --width: 64px;
+  --height: 64px;
+}
+
+.externalConnectionIcon {
+  animation: spin 2s linear infinite;
+  position: absolute;
+  --width: 120px;
+  --height: 120px;
 }
 @keyframes spin {
   from {
@@ -236,28 +309,20 @@
     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(.approved) > .backgroundContainer > .background > .ringCenter.defaultTheme {
+  border: 4px solid var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));
 }
 
-:host(.connection) > .backgroundContainer > .children > .connectDiagramContainer {
+.customImageContainer {
+  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 40px;
+  width: var(--ring-0-size);
+  height: var(--ring-0-size);
+  border-radius: var(--ring-0-size);
+  border: 2px solid var(--cpsl-color-background-0);
+  box-sizing: border-box;
+  overflow: hidden;
 }

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

@@ -1,20 +1,24 @@
-import { Host, h } from "@stencil/core";
+import { Fragment, 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.height = undefined;
+        this.hideFadeOut = undefined;
         this.variant = 'connection';
         this.title = undefined;
         this.subtitle = undefined;
+        this.withDefaultTheme = undefined;
     }
     render() {
-        return (h(Host, { key: '526227a9695e8c0846780a3c39034b4d558cf141', class: {
+        var _a;
+        return (h(Host, { key: '8dd773a0e1ee3a5c05c05d2099d737818b25efc7', class: {
+                // VARIANTS
                 connection: this.variant === 'connection',
-                pending: this.variant === 'pending',
+                pending: this.variant === 'pending' || this.variant === 'customContent',
                 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))));
+                externalWalletConnection: this.variant === 'externalWalletConnection',
+            } }, h("div", { key: '793b0e4c326ef2fd8894a74c9e4280b3fd341dde', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: '64f11ece96bfc01633e75eaa28fbda51ec0602a7', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: 'cffcbbd95f87412c34928df1cb5aafe4d01706e3', class: "ring ring3" }), h("div", { key: '604ab833dce66efa6e16a468a750b519efbab070', class: "ring ring2" }), h("div", { key: '9d8763f780a7f5dd3f91bf3f05fcee50b97e45f5', class: "ring ring1" }), h("div", { key: '42cdab4a680c82fc4781ae92ec38937b4b0c8bdc', class: "ring ring0" }), h("div", { key: 'd82113434ee28f9c9be557d6321951a72fdab58c', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: '7127673b7a5db701819c34aaef3d6f7e5c5803d9' }, h("img", { key: '797ccf7bd5375778e356427e0114da95d7120c4f', class: "connectionImage", src: Images.heroDefault }), h("div", { key: 'e23bc69562835a0e6cd2ad922d9d654c59561ef5', class: "connectDiagramContainer" }, h("slot", { key: 'a42bef00021936db7b636b10222f1f77d25cbb50', name: "connectionLeft" }), h("slot", { key: '4fb3b0e055cb03d14a08aea95c5a00d8304eb4e6', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: '5f8783a9bed64273684e5d13dcef5f77ba75ea95', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: 'c691f28dd91807e2944d0509825c08f502b40c3c' }, !this.withDefaultTheme && h("img", { key: '668f6c1739916f7093ff8a94e7681600a88afa17', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: '84c7acdc9a8da362ef1339573a54bb77b7005565', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: '80eaa04aef39d950696db31274a9ecca131845a5', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '55a3e015dde2bb77b9dae8936cb911e4ded3ff05' }, h("cpsl-icon", { key: 'f20d8fe367025a64c4e53dcec762731aa2424fa9', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: '53b182bee0e7e11b8ebb3c8f1fbfa3cc97580b82', class: "connectDiagramContainer" }, h("slot", { key: 'de11d3f26b9cfc5ee84154d23d7bf3adba1d669e', name: "connectionLeft" }), h("slot", { key: '09b04c47be473cbf9baaf126662f6c1464468036', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: 'a624f56e2af44bcb72d94e0e1d99c6a2f2b3c366', class: "customImageContainer" }, h("slot", { key: '369fc086b6d342675cb6157843ccdc178abbe94d', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: '3a1d8b00f4c900fe8a6df3b2e87ba68008b95c00' }, h("div", { key: 'a9faca5706d144f168c6ba591682258ae5dda893', class: "fadeOut" }), h("div", { key: 'fcf9237b04487248c9dde40c3bbc932ff43fcbb9', class: "cover" }))))), h("cpsl-text", { key: '9b97bb727c1713afe1fb263bdca990481de2e693', variant: "headingXS", color: "primary", weight: "medium" }, this.title), this.subtitle && (h("cpsl-text", { key: 'efcb2b0940b85681fe44f9ab115a206e958e75fa', variant: "bodyM", color: "secondary" }, this.subtitle))));
     }
     static get is() { return "cpsl-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -30,19 +34,53 @@ export class CpslHero {
     }
     static get properties() {
         return {
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The height of the container.\nDefault is: 180."
+                },
+                "attribute": "height",
+                "reflect": false
+            },
+            "hideFadeOut": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the fade out components\nDefault is: `false`."
+                },
+                "attribute": "hide-fade-out",
+                "reflect": false
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'connection' | 'pending' | 'approved' | 'failed'",
-                    "resolved": "\"approved\" | \"connection\" | \"failed\" | \"pending\"",
+                    "original": "'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'failed'",
+                    "resolved": "\"approved\" | \"connection\" | \"customContent\" | \"externalWalletConnection\" | \"failed\" | \"pending\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The variant of the button.\nOptions are: `\"default\"`, `\"loading\", `\"success\".\nDefault is: `\"default\"`."
+                    "text": "The variant of the button.\nOptions are: `\"customContent\"`, `\"connection\"`, `\"externalWalletConnection\"`, `\"pending\", `\"approved\", `\"failed\".\nDefault is: `\"connection\"`."
                 },
                 "attribute": "variant",
                 "reflect": true,
@@ -81,6 +119,23 @@ export class CpslHero {
                 },
                 "attribute": "subtitle",
                 "reflect": true
+            },
+            "withDefaultTheme": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to use the Capsule custom theming or use the provided theme\nDefault is: `false`."
+                },
+                "attribute": "with-default-theme",
+                "reflect": false
             }
         };
     }

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

@@ -1 +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;;;;IAMlG,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,qBAAqB;gBAC9B,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBACzB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,WAAK,KAAK,EAAE,uBAAuB;wBACjC,WAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBACA,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAC7B,WAAK,KAAK,EAAE,oBAAoB;wBAC9B,WAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBAEA,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAC9B,WAAK,KAAK,EAAE,qBAAqB;wBAC/B,WAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBACD,4DAAK,KAAK,EAAC,SAAS,GAAG,CACnB;gBACN,4DAAK,KAAK,EAAC,UAAU;oBAClB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,WAAK,KAAK,EAAC,yBAAyB;wBAClC,YAAM,IAAI,EAAC,gBAAgB,GAAG;wBAC9B,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACP;oBACA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,WAAW,EAAE;oBAC1C,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,EAAE,CACvC,CACF;YACN,kEAAW,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,QAAQ,IAC3D,IAAI,CAAC,KAAK,CACD;YACX,IAAI,CAAC,QAAQ,IAAI,CAChB,iBAAW,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,IACzC,IAAI,CAAC,QAAQ,CACJ,CACb,CACI,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  @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"]}
+{"version":3,"file":"cpsl-hero.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, Host, Prop, h } from '@stencil/core';\nimport { Images } from '../../assets/images';\n\n@Component({\n  tag: 'cpsl-hero',\n  styleUrl: 'cpsl-hero.scss',\n  shadow: true,\n})\nexport class CpslHero {\n  /**\n   * The height of the container.\n   * Default is: 180.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Hides the fade out components\n   * Default is: `false`.\n   */\n  @Prop() hideFadeOut?: boolean;\n\n  /**\n   * The variant of the button.\n   * Options are: `\"customContent\"`, `\"connection\"`, `\"externalWalletConnection\"`, `\"pending\", `\"approved\", `\"failed\".\n   * Default is: `\"connection\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'failed' = 'connection';\n\n  @Prop({ reflect: true }) title: string;\n\n  @Prop({ reflect: true }) subtitle?: string;\n\n  /**\n   * Whether to use the Capsule custom theming or use the provided theme\n   * Default is: `false`.\n   */\n  @Prop() withDefaultTheme?: boolean;\n\n  render() {\n    return (\n      <Host\n        class={{\n          // VARIANTS\n          connection: this.variant === 'connection',\n          pending: this.variant === 'pending' || this.variant === 'customContent',\n          approved: this.variant === 'approved',\n          failed: this.variant === 'failed',\n          externalWalletConnection: this.variant === 'externalWalletConnection',\n        }}\n      >\n        <div class=\"backgroundContainer\" style={{ height: `${this.height ?? 180}px` }}>\n          <div class={{ background: true, defaultTheme: this.withDefaultTheme }}>\n            <div class=\"ring ring3\" />\n            <div class=\"ring ring2\" />\n            <div class=\"ring ring1\" />\n            <div class=\"ring ring0\" />\n            <div class={{ ringCenter: true, defaultTheme: this.withDefaultTheme }}>\n              {this.variant === 'connection' && (\n                <Fragment>\n                  <img class=\"connectionImage\" src={Images.heroDefault} />\n                  <div class=\"connectDiagramContainer\">\n                    <slot name=\"connectionLeft\" />\n                    <slot name=\"connectionRight\" />\n                  </div>\n                </Fragment>\n              )}\n              {this.variant === 'pending' && <img class=\"pendingImage\" src={Images.heroPending} />}\n              {this.variant === 'approved' && (\n                <Fragment>\n                  {!this.withDefaultTheme && <img class=\"approvedImage\" src={Images.heroSuccess} />}\n                  <cpsl-icon class=\"centerIcon\" icon={this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule'} />\n                </Fragment>\n              )}\n              {this.variant === 'failed' && <cpsl-icon class=\"centerIcon\" icon=\"heroAlertCircle\" />}\n              {this.variant === 'externalWalletConnection' && (\n                <Fragment>\n                  <cpsl-icon class=\"externalConnectionIcon\" icon=\"heroExternalConnection\" />\n                  <div class=\"connectDiagramContainer\">\n                    <slot name=\"connectionLeft\" />\n                    <slot name=\"connectionRight\" />\n                  </div>\n                </Fragment>\n              )}\n              {this.variant === 'customContent' && (\n                <div class=\"customImageContainer\">\n                  <slot name=\"image\" />\n                </div>\n              )}\n            </div>\n            {!this.hideFadeOut && (\n              <Fragment>\n                <div class=\"fadeOut\" />\n                <div class=\"cover\" />\n              </Fragment>\n            )}\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.map

@@ -1 +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"]}
+{"version":3,"file":"cpsl-hero.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.stories.tsx"],"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-icon/cpsl-icon.css

@@ -63,6 +63,14 @@
   width: var(--width);
   height: var(--height);
 }
+:host .foreground-0 {
+  fill: var(--cpsl-color-foreground-0);
+  stop-color: var(--cpsl-color-foreground-0);
+}
+:host .accent-0 {
+  fill: var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));
+  stop-color: var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));
+}
 
 :host div {
   display: flex;

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

@@ -6,7 +6,7 @@ export class CpslIcon {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '91853a486a389f4850a7ae83a25cedba52c645a5', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: 'f7a86185e4b1deadba2a41381b88d6860d0d60d5', part: "icon", role: "img" }, !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": "\"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\"",
+                    "resolved": "\"search\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"logOut\" | \"mail\" | \"menu\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"stripeBrand\" | \"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-icon/cpsl-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-icon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon/cpsl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAO3C,MAAM,OAAO,QAAQ;;;;;IAWnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,IACzB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,CAAC,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CAC/E,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface';\nimport { Icons } from '../../assets/icons';\n\n@Component({\n  tag: 'cpsl-icon',\n  styleUrl: 'cpsl-icon.scss',\n  shadow: true,\n})\nexport class CpslIcon {\n  /**\n   * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() src?: string;\n\n  /**\n   * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() icon?: IconType;\n\n  render() {\n    return (\n      <Host part=\"icon\" role=\"img\">\n        {!Boolean(this.icon) ? <img src={this.src} /> : <div innerHTML={Icons[this.icon]} />}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-icon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon/cpsl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAO3C,MAAM,OAAO,QAAQ;;;;;IAWnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,IACzB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,CAAC,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACtE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface';\nimport { Icons } from '../../assets/icons';\n\n@Component({\n  tag: 'cpsl-icon',\n  styleUrl: 'cpsl-icon.scss',\n  shadow: true,\n})\nexport class CpslIcon {\n  /**\n   * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() src?: string;\n\n  /**\n   * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() icon?: IconType;\n\n  render() {\n    return (\n      <Host part=\"icon\" role=\"img\">\n        {!this.icon ? <img src={this.src} /> : <div innerHTML={Icons[this.icon]} />}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-icon-group/cpsl-icon-group.css

@@ -0,0 +1,97 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --container-padding-top: 4px;
+  --container-padding-end: 4px;
+  --container-padding-bottom: 4px;
+  --container-padding-start: 4px;
+  --container-border-width: 2px;
+  --container-border-color: var(--cpsl-color-iconGroup-border);
+  --container-background: var(--cpsl-color-iconGroup-surface);
+  --icon-height: 15px;
+  --icon-width: 15px;
+  --icon-item-color: var(--cpsl-color-iconGroup-icon-default);
+  display: flex;
+  width: auto;
+  padding-right: calc(var(--container-border-width) * 3);
+}
+
+.icon-container {
+  -webkit-padding-start: var(--container-padding-start);
+  padding-inline-start: var(--container-padding-start);
+  -webkit-padding-end: var(--container-padding-end);
+  padding-inline-end: var(--container-padding-end);
+  padding-top: var(--container-padding-top);
+  padding-bottom: var(--container-padding-bottom);
+  margin-right: calc(var(--container-border-width) * -3);
+  border-style: solid;
+  border-width: var(--container-border-width);
+  border-color: var(--container-border-color);
+  border-radius: 1000px;
+  background: var(--container-background);
+  transition: margin 250ms;
+}
+.icon-container cpsl-icon {
+  --height: var(--icon-height);
+  --width: var(--icon-width);
+  --icon-color: var(--icon-item-color);
+}
+.icon-container.expanded {
+  margin-right: calc(var(--container-border-width) * -1);
+}
+.icon-container.disabled cpsl-icon {
+  --icon-color: var(--cpsl-color-iconGroup-icon-disabled);
+}