@usecapsule/core-components 3.3.0-dev.0 → 3.3.0-dev.2

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

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

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

@@ -1,24 +1,21 @@
-import { Fragment, Host, h } from "@stencil/core";
+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.height = undefined;
-        this.hideFadeOut = undefined;
         this.variant = 'connection';
         this.title = undefined;
         this.subtitle = undefined;
-        this.withDefaultTheme = undefined;
     }
     render() {
-        var _a;
-        return (h(Host, { key: '8dd773a0e1ee3a5c05c05d2099d737818b25efc7', class: {
+        return (h(Host, { key: '846f2b1808af5f172d659c1531015763190d9eaa', class: {
                 // VARIANTS
                 connection: this.variant === 'connection',
-                pending: this.variant === 'pending' || this.variant === 'customContent',
+                pending: this.variant === 'pending',
                 approved: this.variant === 'approved',
                 failed: this.variant === 'failed',
-                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))));
+            } }, h("div", { key: 'f11070c3f78fd6ad2fbb9842d2484b4263112cb3', class: "backgroundContainer" }, h("div", { key: '5a50e2df5669ff92d3bee0b00bd3ed92075dfa7a', class: "background" }, h("div", { key: '24062e48e9d07feb6e79d4ec1c527b2476950f3b', class: "ring ring3" }), h("div", { key: '37913e7689bbdc4165811fb25b747b8badaa287c', class: "ring ring2" }), h("div", { key: 'f265592120f9fa1052e346bd92951f6789d85502', class: "ring ring1" }), h("div", { key: '19e252b63847df7ea5acb450d8e3479a4b2ad561', class: "ring ring0" }), this.variant === 'connection' && (h("div", { key: '8b94818b22a288284509fe63578b68277ed71edc', class: `ringCenter connection` }, h("img", { key: 'c50d6f5be69303e9c9c1c7f885bbacadceb1c5c8', src: Images.heroDefault }))), this.variant === 'pending' && (h("div", { key: '9ab25648fd147203cba45136ab8956adb6bd99d1', class: `ringCenter pending` }, h("img", { key: '9b0d536b4213ab558b37355e3b605fe3b65824ca', src: Images.heroPending }))), this.variant === 'approved' && (h("div", { key: '2ed926910d870e3b9577b0203ce2e68e8389623c', class: `ringCenter approved` }, h("img", { key: 'aab912dbedf89db56946d2de72f7b0883c4fb261', src: Images.heroSuccess }))), h("div", { key: '55421fe06f9649f27d8728414fac8ce0a592efbb', class: "fadeOut" })), h("div", { key: '41a49e438379a139864d0b7b55ee2e89b5c9aaf0', class: "children" }, this.variant === 'connection' && (h("div", { key: 'a874f21784102c8001043cd93e8a281e63939875', class: "connectDiagramContainer" }, h("slot", { key: 'd99d0f2c0248f360da1829403ca9929ce3d9243c', name: "connectionLeft" }), h("slot", { key: '5557ab28d6108ecb660e5d8203b3decd991f4ea6', name: "connectionRight" }))), this.variant === 'failed' && AlertCircle(), this.variant === 'approved' && Checkmark())), h("cpsl-text", { key: '1aeb3912ca6386a8d1ca1f2d18735716db070cb5', variant: "headingXS", color: "primary", weight: "medium" }, this.title), this.subtitle && (h("cpsl-text", { key: 'e01dbe76df7f55f80fc20bce10e8e82c829851fc', variant: "bodyM", color: "secondary" }, this.subtitle))));
     }
     static get is() { return "cpsl-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -34,53 +31,19 @@ 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": "'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'failed'",
-                    "resolved": "\"approved\" | \"connection\" | \"customContent\" | \"externalWalletConnection\" | \"failed\" | \"pending\"",
+                    "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: `\"customContent\"`, `\"connection\"`, `\"externalWalletConnection\"`, `\"pending\", `\"approved\", `\"failed\".\nDefault is: `\"connection\"`."
+                    "text": "The variant of the button.\nOptions are: `\"default\"`, `\"loading\", `\"success\".\nDefault is: `\"default\"`."
                 },
                 "attribute": "variant",
                 "reflect": true,
@@ -119,23 +82,6 @@ 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":"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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"]}
+{"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-icon/cpsl-icon.css

@@ -63,14 +63,6 @@
   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: 'f7a86185e4b1deadba2a41381b88d6860d0d60d5', part: "icon", role: "img" }, !this.icon ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '6960e6da25cb3cd108021f8a5aa20a92a24f92b3', 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": "\"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\"",
+                    "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\" | \"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\" | \"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.js

@@ -28,7 +28,7 @@ export class CpslIdenticon {
             [shapeA, shapeB, shapeC, shapeD],
             [rotationA, rotationB, rotationC, rotationD],
         ];
-        return (h(Host, { key: '39bcae00e3fd58ff94639fbb43c77fd942899e51', class: {
+        return (h(Host, { key: '9e7e42f8de3d9611e30bf8c193d4ff8864805dd9', class: {
                 red: color === 'red',
                 orange: color === 'orange',
                 yellow: color === 'yellow',

package/dist/collection/components/cpsl-info-box/cpsl-info-box.css

@@ -71,6 +71,7 @@
   padding-top: var(--box-padding-top);
   padding-bottom: var(--box-padding-bottom);
   display: flex;
-  background: var(--cpsl-color-background-4);
+  background: var(--cpsl-color-background-secondary);
+  border: var(--box-border-width) solid var(--cpsl-color-input-border-placeholder);
   border-radius: var(--box-border-radius);
 }

package/dist/collection/components/cpsl-info-box/cpsl-info-box.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslInfoBox {
     render() {
-        return (h(Host, { key: '363605fc58be1a71b771e4d839654c6198fb9988' }, h("div", { key: '7b56cdfbb5db9ee33d906a9235ffd89fce06962f', class: "info-box-container" }, h("slot", { key: '868bc4bdb1f1817d2f918a7c5a1c50582c4545f7' }))));
+        return (h(Host, { key: '71bc7e0e6976741e4da0fcc6d0135037c416d663' }, h("div", { key: 'd7c1f41e2d60c1e7319ea93b740dc789061f6f2b', class: "info-box-container" }, h("slot", { key: '84681d40c32832a00874901eb9e75679313f2034' }))));
     }
     static get is() { return "cpsl-info-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -73,7 +73,6 @@
   --input-color: var(--cpsl-color-text-primary);
   --input-placeholder-color: var(--cpsl-color-text-secondary);
   --input-font-size: var(--cpsl-font-size-body-m);
-  --input-font-weight: 400;
   --optional-label-color: var(--cpsl-color-text-secondary);
   --label-color: var(--cpsl-color-text-primary);
   --label-font-size: var(--cpsl-font-size-body-s);
@@ -85,17 +84,13 @@
   --helper-text-icon-size: 16px;
   --helper-text-font-size: var(--cpsl-font-size-body-xs);
   --helper-text-margin-top: 0px;
-  --button-padding: 8px;
+  --button-padding: 4px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-family: var(--cpsl-font-family, inherit);
 }
 
-:host(.contrast-text) {
-  --input-color: var(--cpsl-color-contrast);
-}
-
 :host(:not(.has-value)) {
   --container-border-color: var(--cpsl-color-input-border-placeholder);
   --input-color: var(--cpsl-color-text-secondary);
@@ -145,7 +140,6 @@
   height: 100%;
   box-sizing: border-box;
   font-size: var(--input-font-size);
-  font-weight: var(--input-font-weight);
   color: var(--input-color);
   background: var(--input-background-color);
   font-family: var(--cpsl-font-family, inherit);
@@ -157,15 +151,6 @@
   color: var(--input-placeholder-color);
   opacity: 1; /* Firefox */
 }
-.native-input::-moz-selection {
-  /* Code for Firefox */
-  color: var(--cpsl-color-text-inverted);
-  background: var(--cpsl-color-background-64);
-}
-.native-input::selection {
-  color: var(--cpsl-color-text-inverted);
-  background: var(--cpsl-color-background-64);
-}
 
 .label {
   display: inline-block;
@@ -216,11 +201,7 @@
 :host ::slotted(cpsl-button) {
   width: calc(var(--container-height) - var(--button-padding) * 2);
   height: calc(var(--container-height) - var(--button-padding) * 2);
-  --button-border-radius: calc(var(--container-border-radius) - 4px);
-  --button-padding-top: 4px;
-  --button-padding-start: 4px;
-  --button-padding-end: 4px;
-  --button-padding-bottom: 4px;
+  --button-border-radius: calc(var(--container-border-radius) - 2px);
 }
 :host slot[name=end]::slotted(cpsl-button) {
   margin-right: calc((var(--container-padding-end) - var(--button-padding)) * -1);