@usecapsule/core-components 2.0.10 → 3.0.1-dev.1

package/dist/collection/assets/icons/lightning.svg

@@ -1,3 +1,3 @@
-<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 14.8962L5 9.89624L1 8.39624L8 0.89624L7 5.89624L11 7.39624L4 14.8962Z" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 2L4.09347 12.6879C3.74466 13.1064 3.57026 13.3157 3.56759 13.4925C3.56528 13.6461 3.63375 13.7923 3.75327 13.8889C3.89076 14 4.16319 14 4.70805 14H12L11 22L19.9066 11.3121C20.2554 10.8936 20.4298 10.6843 20.4324 10.5075C20.4348 10.3539 20.3663 10.2077 20.2468 10.1111C20.1093 10 19.8368 10 19.292 10H12L13 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/dist/collection/assets/icons/menu.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12H21M3 6H21M3 18H21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/refresh.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 10C2 10 2.12132 9.15076 5.63604 5.63604C9.15076 2.12132 14.8492 2.12132 18.364 5.63604C19.6092 6.88131 20.4133 8.40072 20.7762 10M2 10V4M2 10H8M22 14C22 14 21.8787 14.8492 18.364 18.364C14.8492 21.8787 9.15076 21.8787 5.63604 18.364C4.39076 17.1187 3.58669 15.5993 3.22383 14M22 14V20M22 14H16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/settings.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.39516 19.3711L9.97961 20.6856C10.1533 21.0768 10.4369 21.4093 10.7958 21.6426C11.1548 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8489 21.8759 13.2078 21.6426C13.5668 21.4093 13.8503 21.0768 14.0241 20.6856L14.6085 19.3711C14.8165 18.9047 15.1665 18.5159 15.6085 18.26C16.0533 18.0034 16.5678 17.8941 17.0785 17.9478L18.5085 18.1C18.9342 18.145 19.3638 18.0656 19.7452 17.8713C20.1266 17.6771 20.4435 17.3763 20.6574 17.0056C20.8716 16.635 20.9736 16.2103 20.9511 15.7829C20.9286 15.3555 20.7826 14.9438 20.5307 14.5978L19.6841 13.4344C19.3826 13.0171 19.2215 12.5148 19.2241 12C19.224 11.4866 19.3866 10.9864 19.6885 10.5711L20.5352 9.40778C20.787 9.06175 20.9331 8.65007 20.9556 8.22267C20.978 7.79528 20.876 7.37054 20.6618 7C20.4479 6.62923 20.1311 6.32849 19.7496 6.13423C19.3682 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5723 6.11141 16.0577 6.00212 15.6129 5.74556C15.1701 5.48825 14.82 5.09736 14.6129 4.62889L14.0241 3.31444C13.8503 2.92317 13.5668 2.59072 13.2078 2.3574C12.8489 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1548 2.12408 10.7958 2.3574C10.4369 2.59072 10.1533 2.92317 9.97961 3.31444L9.39516 4.62889C9.18809 5.09736 8.83804 5.48825 8.39516 5.74556C7.95038 6.00212 7.43583 6.11141 6.92516 6.05778L5.49072 5.90556C5.06505 5.86053 4.63546 5.93997 4.25403 6.13423C3.87261 6.32849 3.55574 6.62923 3.34183 7C3.12765 7.37054 3.02561 7.79528 3.0481 8.22267C3.07058 8.65007 3.21662 9.06175 3.4685 9.40778L4.31516 10.5711C4.61711 10.9864 4.7797 11.4866 4.77961 12C4.7797 12.5134 4.61711 13.0137 4.31516 13.4289L3.4685 14.5922C3.21662 14.9382 3.07058 15.3499 3.0481 15.7773C3.02561 16.2047 3.12765 16.6295 3.34183 17C3.55595 17.3706 3.87286 17.6712 4.25423 17.8654C4.6356 18.0596 5.06508 18.1392 5.49072 18.0944L6.92072 17.9422C7.43139 17.8886 7.94594 17.9979 8.39072 18.2544C8.83525 18.511 9.18693 18.902 9.39516 19.3711Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3432 9 9.00004 10.3431 9.00004 12C9.00004 13.6569 10.3432 15 12 15Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/stars.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 13L7.28446 14.5689C7.54995 15.0999 7.68269 15.3654 7.86003 15.5954C8.01739 15.7996 8.20041 15.9826 8.40455 16.14C8.63462 16.3173 8.9001 16.4501 9.43108 16.7155L11 17.5L9.43108 18.2845C8.9001 18.5499 8.63462 18.6827 8.40455 18.86C8.20041 19.0174 8.01739 19.2004 7.86003 19.4046C7.68269 19.6346 7.54995 19.9001 7.28446 20.4311L6.5 22L5.71554 20.4311C5.45005 19.9001 5.31731 19.6346 5.13997 19.4046C4.98261 19.2004 4.79959 19.0174 4.59545 18.86C4.36538 18.6827 4.0999 18.5499 3.56892 18.2845L2 17.5L3.56892 16.7155C4.0999 16.4501 4.36538 16.3173 4.59545 16.14C4.79959 15.9826 4.98261 15.7996 5.13997 15.5954C5.31731 15.3654 5.45005 15.0999 5.71554 14.5689L6.5 13Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 2L16.1786 5.06442C16.4606 5.79765 16.6016 6.16426 16.8209 6.47264C17.0153 6.74595 17.254 6.98475 17.5274 7.17909C17.8357 7.39836 18.2024 7.53937 18.9356 7.82138L22 9L18.9356 10.1786C18.2024 10.4606 17.8357 10.6016 17.5274 10.8209C17.254 11.0153 17.0153 11.254 16.8209 11.5274C16.6016 11.8357 16.4606 12.2024 16.1786 12.9356L15 16L13.8214 12.9356C13.5394 12.2024 13.3984 11.8357 13.1791 11.5274C12.9847 11.254 12.746 11.0153 12.4726 10.8209C12.1643 10.6016 11.7976 10.4606 11.0644 10.1786L8 9L11.0644 7.82138C11.7976 7.53937 12.1643 7.39836 12.4726 7.17909C12.746 6.98475 12.9847 6.74595 13.1791 6.47264C13.3984 6.16426 13.5394 5.79765 13.8214 5.06442L15 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/x.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7L7 17M7 7L17 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/collection-manifest.json

@@ -2,32 +2,48 @@
   "entries": [
     "components/cpsl-alert/cpsl-alert.js",
     "components/cpsl-animation/cpsl-animation.js",
+    "components/cpsl-app-bar/cpsl-app-bar.js",
+    "components/cpsl-avatar/cpsl-avatar.js",
     "components/cpsl-button/cpsl-button.js",
+    "components/cpsl-button-group/cpsl-button-group.js",
+    "components/cpsl-card/cpsl-card.js",
+    "components/cpsl-checkbox/cpsl-checkbox.js",
     "components/cpsl-code-input/cpsl-code-input.js",
     "components/cpsl-col/cpsl-col.js",
     "components/cpsl-divider/cpsl-divider.js",
+    "components/cpsl-drawer/cpsl-drawer.js",
     "components/cpsl-dropdown/cpsl-dropdown.js",
+    "components/cpsl-file-upload/cpsl-file-upload.js",
     "components/cpsl-grid/cpsl-grid.js",
     "components/cpsl-icon/cpsl-icon.js",
     "components/cpsl-info-box/cpsl-info-box.js",
     "components/cpsl-input/cpsl-input.js",
     "components/cpsl-modal/cpsl-modal.js",
+    "components/cpsl-modal-v2/cpsl-modal-v2.js",
+    "components/cpsl-nav-button-group/cpsl-nav-button-group.js",
     "components/cpsl-overlay/cpsl-overlay.js",
+    "components/cpsl-pagination/cpsl-pagination.js",
     "components/cpsl-pill/cpsl-pill.js",
+    "components/cpsl-popover/cpsl-popover.js",
     "components/cpsl-progress-indicator/cpsl-progress-indicator.js",
     "components/cpsl-qr-code/cpsl-qr-code.js",
+    "components/cpsl-radio/cpsl-radio.js",
     "components/cpsl-row/cpsl-row.js",
+    "components/cpsl-select/cpsl-select.js",
+    "components/cpsl-select-item/cpsl-select-item.js",
     "components/cpsl-slide-button/cpsl-slide-button.js",
     "components/cpsl-spinner/cpsl-spinner.js",
+    "components/cpsl-switch/cpsl-switch.js",
     "components/cpsl-tab/cpsl-tab.js",
+    "components/cpsl-table/cpsl-table.js",
     "components/cpsl-tabs/cpsl-tabs.js",
     "components/cpsl-text/cpsl-text.js",
     "components/cpsl-tile-button/cpsl-tile-button.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.5",
-    "typescriptVersion": "5.3.3"
+    "version": "4.18.3",
+    "typescriptVersion": "5.4.5"
   },
   "collections": [],
   "bundles": []

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

@@ -55,21 +55,36 @@
    */
 :host {
   --container-gap: 8px;
-  --container-padding-top: 4px;
-  --container-padding-bottom: 4px;
+  --container-padding-top: 14px;
+  --container-padding-bottom: 14px;
   --container-padding-start: 16px;
   --container-padding-end: 16px;
-  --container-font-size: clamp(12px, 0.75rem, 18px);
+  --container-font-size: var(--cpsl-font-size-body-m);
   --container-border-width: 1px;
   --container-border-radius: var(--cpsl-border-radius-alert);
+  --container-background-color: var(--cpsl-color-background-0);
+  --container-color: var(--cpsl-color-text-primary);
+  --container-icon-color: var(--container-color);
   display: inline-block;
   font-family: var(--cpsl-font-family, inherit);
 }
 
 :host(.error) {
-  --container-background-color: var(--cpsl-color-alert-surface-error);
-  --container-border-color: var(--cpsl-color-alert-border-error);
-  --container-color: var(--cpsl-color-text-error);
+  --container-border-color: var(--cpsl-color-utility-red);
+}
+
+:host(.warning) {
+  --container-border-color: var(--cpsl-color-utility-yellow);
+}
+
+:host(.success) {
+  --container-border-color: var(--cpsl-color-utility-green);
+}
+
+:host cpsl-icon {
+  --icon-color: var(--container-icon-color);
+  --height: 20px;
+  --width: 20px;
 }
 
 .alert-container {
@@ -81,7 +96,6 @@
   padding-top: var(--container-padding-top);
   padding-bottom: var(--container-padding-bottom);
   font-size: var(--container-font-size);
-  font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -91,8 +105,4 @@
   border-color: var(--container-border-color);
   background-color: var(--container-background-color);
   color: var(--container-color);
-}
-
-.icon {
-  display: flex;
 }

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

@@ -1,23 +1,31 @@
 import { Host, h } from "@stencil/core";
-import { Icons } from "../../assets/icons";
 export class CpslAlert {
     constructor() {
-        this.type = 'error';
         this.icon = undefined;
+        this.variant = 'error';
     }
-    get Icon() {
+    get iconType() {
         if (Boolean(this.icon)) {
-            return Icons[this.icon];
+            this.icon;
         }
-        switch (this.type) {
+        switch (this.variant) {
+            case 'custom': {
+                return undefined;
+            }
+            case 'success': {
+                return 'checkCircle';
+            }
+            case 'warning': {
+                return 'alertCircle';
+            }
             case 'error':
             default: {
-                return Icons.alertCircle;
+                return 'alertCircle';
             }
         }
     }
     render() {
-        return (h(Host, { key: '44ed39687dc02639f574f002aeb4449c19cc3246', class: { error: this.type === 'error' } }, h("div", { key: '68acc8a8679cd344f450b606ee31888e03b2ef8a', class: "alert-container" }, h("div", { key: 'ebb639aef153672c3249d4d6bccaa31b4e933c4d', class: "icon", innerHTML: this.Icon }), h("slot", { key: '0dd11c5b640986d6b6c710b9fb82d344e01a46c0' }))));
+        return (h(Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && h("cpsl-icon", { key: 'c037b1d18057d53d05e52be9cfbb81f234ea0f1d', icon: this.iconType }), h("slot", { key: 'ec02796cf9ad119f95be56701d28e3490b07bc43' }))));
     }
     static get is() { return "cpsl-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -33,30 +41,12 @@ export class CpslAlert {
     }
     static get properties() {
         return {
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'error'",
-                    "resolved": "\"error\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The type of alert.\nOptions are: `\"error\"`\nDefault is: `\"error\"`."
-                },
-                "attribute": "type",
-                "reflect": false,
-                "defaultValue": "'error'"
-            },
             "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"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\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
+                    "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\" | \"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\"",
                     "references": {
                         "IconType": {
                             "location": "import",
@@ -73,6 +63,24 @@ export class CpslAlert {
                 },
                 "attribute": "icon",
                 "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'error' | 'warning' | 'success' | 'custom'",
+                    "resolved": "\"custom\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of alert.\nOptions are: `\"error\"` | `\"warning\"` | `\"success\"` | `\"custom\"`\nDefault is: `\"error\"`."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'error'"
             }
         };
     }

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

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

package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.css

@@ -0,0 +1,67 @@
+/**
+ * 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 {
+  display: block;
+  position: relative;
+  top: 0;
+  width: 100%;
+  z-index: 10000;
+}
+
+.container {
+  display: flex;
+  width: 100%;
+}

package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js

@@ -0,0 +1,85 @@
+import { Host, h } from "@stencil/core";
+export class CpslAppBar {
+    constructor() {
+        this.height = undefined;
+        this.position = 'fixed';
+        this.zIndexOverride = undefined;
+    }
+    render() {
+        return (h(Host, { key: '4608b0dc424585b7e7f865d55b3d217ebe172f04', style: Object.assign({ height: `${this.height}px` }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})) }, h("div", { key: 'c598749bcfb29c806856573b9f61141b7b68022e', class: "container", part: "container", style: {
+                position: this.position,
+                height: `${this.height}px`,
+            } }, h("slot", { key: '7e2bd9efbe98ca5ff70dd0bc33333d95799f5fe7' })), this.position === 'fixed' && (h("div", { key: 'fc4e1e9f6414ccf74c816f19be79b7d4b0df8bd5', style: {
+                height: `${this.height}px`,
+            } }))));
+    }
+    static get is() { return "cpsl-app-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-app-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-app-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the app bar."
+                },
+                "attribute": "height",
+                "reflect": false
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fixed' | 'static'",
+                    "resolved": "\"fixed\" | \"static\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The position of the drawer.\nDefault is `fixed`."
+                },
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'fixed'"
+            },
+            "zIndexOverride": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override z-index."
+                },
+                "attribute": "z-index-override",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-app-bar.js.map

package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-app-bar.js","sourceRoot":"","sources":["../../../../src/components/cpsl-app-bar/cpsl-app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;wBAUmB,OAAO;;;IAO/C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,kBAEH,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,IACvB,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAG/E,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B;gBAED,8DAAa,CACT;YACL,IAAI,CAAC,QAAQ,KAAK,OAAO,IAAI,CAC5B,4DACE,KAAK,EAAE;oBACL,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B,GACD,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-app-bar',\n  styleUrl: 'cpsl-app-bar.scss',\n  shadow: true,\n})\nexport class CpslAppBar {\n  /**\n   * Height of the app bar.\n   */\n  @Prop() height: number;\n\n  /**\n   * The position of the drawer.\n   * Default is `fixed`.\n   */\n  @Prop() position?: 'fixed' | 'static' = 'fixed';\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  render() {\n    return (\n      <Host\n        style={{\n          // position: this.position,\n          height: `${this.height}px`,\n          ...(Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}),\n        }}\n      >\n        <div\n          class=\"container\"\n          part=\"container\"\n          style={{\n            position: this.position,\n            height: `${this.height}px`,\n          }}\n        >\n          <slot></slot>\n        </div>\n        {this.position === 'fixed' && (\n          <div\n            style={{\n              height: `${this.height}px`,\n            }}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-app-bar.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-app-bar/test/cpsl-app-bar.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,+BAA+B;SACtC,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 { CpslAppBar } from '../cpsl-app-bar';\n\ndescribe('cpsl-app-bar', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslAppBar],\n      html: `<cpsl-app-bar></cpsl-app-bar>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-app-bar>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-app-bar>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,31 @@
+:host {
+  --container-border-color: var(--cpsl-color-avatar-border);
+  --container-border-width: 1px;
+  --container-border-radius: var(--cpsl-border-radius-avatar);
+  --container-background-color: var(--cpsl-color-avatar-surface);
+  --container-padding: 4px;
+  --container-height: 40px;
+  --container-width: 40px;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+span {
+  display: inline-block;
+  height: var(--container-height);
+  width: var(--container-width);
+  border: var(--container-border-width) solid var(--container-border-color);
+  border-radius: var(--container-border-radius);
+  padding: var(--container-padding);
+  background-color: var(--container-background-color);
+}
+span.round {
+  border-radius: 1000px;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

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

@@ -0,0 +1,81 @@
+import { Host, h } from "@stencil/core";
+export class CpslAvatar {
+    constructor() {
+        this.alt = undefined;
+        this.src = undefined;
+        this.variant = 'square';
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '04dfd668bc6ab12f758e82ccfd915f06e1de3504' }, h("span", { key: '906c7c6e113040b95273c987689e848954e14a1c', class: { round: this.variant === 'round' } }, h("img", { key: '2d952a27ebbeb118c931162487f2d7e13370b41f', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
+    }
+    static get is() { return "cpsl-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The alternate text for the avatar image."
+                },
+                "attribute": "alt",
+                "reflect": false
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The source of the avatar image."
+                },
+                "attribute": "src",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'round' | 'square'",
+                    "resolved": "\"round\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the avatar.\nOptions are: `\"round\"`, `\"square\".\nDefault is: `\"square\"`."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'square'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-avatar.js.map