@usecapsule/core-components 3.3.1-dev.0 → 3.4.0-dev.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (112) hide show
  1. package/dist/capsule/capsule.esm.js +1 -1
  2. package/dist/capsule/capsule.esm.js.map +1 -1
  3. package/dist/capsule/p-9e64a60e.entry.js +2 -0
  4. package/dist/capsule/p-9e64a60e.entry.js.map +1 -0
  5. package/dist/capsule/p-afbb1e6f.entry.js +20 -0
  6. package/dist/capsule/p-afbb1e6f.entry.js.map +1 -0
  7. package/dist/capsule/{p-32cdf894.entry.js → p-b96e357a.entry.js} +2 -2
  8. package/dist/capsule/p-b96e357a.entry.js.map +1 -0
  9. package/dist/capsule/p-cfc382c0.entry.js +2 -0
  10. package/dist/capsule/{p-de2a16e4.entry.js → p-d165df27.entry.js} +2 -2
  11. package/dist/capsule/{p-41bc3c58.entry.js → p-f0cd0482.entry.js} +2 -2
  12. package/dist/cjs/capsule.cjs.js +1 -1
  13. package/dist/cjs/cpsl-alert_34.cjs.entry.js +74 -65
  14. package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
  15. package/dist/cjs/cpsl-col.cjs.entry.js +1 -1
  16. package/dist/cjs/cpsl-grid.cjs.entry.js +2 -2
  17. package/dist/cjs/cpsl-hero.cjs.entry.js +4 -3
  18. package/dist/cjs/cpsl-hero.cjs.entry.js.map +1 -1
  19. package/dist/cjs/cpsl-nav-button.cjs.entry.js +40 -0
  20. package/dist/cjs/cpsl-nav-button.cjs.entry.js.map +1 -0
  21. package/dist/cjs/cpsl-row.cjs.entry.js +1 -1
  22. package/dist/cjs/index-65f57499.js +4 -4
  23. package/dist/cjs/loader.cjs.js +1 -1
  24. package/dist/collection/assets/icons/folder.svg +5 -0
  25. package/dist/collection/assets/icons/hero-plus-circle-capsule.svg +14 -0
  26. package/dist/collection/assets/icons/hero-plus-circle.svg +7 -0
  27. package/dist/collection/assets/icons/index.js +4 -1
  28. package/dist/collection/assets/icons/index.js.map +1 -1
  29. package/dist/collection/assets/icons/plus-circle.svg +1 -1
  30. package/dist/collection/collection-manifest.json +1 -1
  31. package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
  32. package/dist/collection/components/cpsl-animation/cpsl-animation.js +44 -104
  33. package/dist/collection/components/cpsl-animation/cpsl-animation.js.map +1 -1
  34. package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js +3 -3
  35. package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.css +3 -0
  36. package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js +1 -1
  37. package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js.map +1 -1
  38. package/dist/collection/components/cpsl-avatar/cpsl-avatar.js +1 -1
  39. package/dist/collection/components/cpsl-button/cpsl-button.js +2 -2
  40. package/dist/collection/components/cpsl-button-group/cpsl-button-group.js +1 -1
  41. package/dist/collection/components/cpsl-card/cpsl-card.js +1 -1
  42. package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.js +1 -1
  43. package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +2 -2
  44. package/dist/collection/components/cpsl-col/cpsl-col.js +1 -1
  45. package/dist/collection/components/cpsl-divider/cpsl-divider.js +1 -1
  46. package/dist/collection/components/cpsl-drawer/cpsl-drawer.js +2 -2
  47. package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +1 -1
  48. package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js +1 -1
  49. package/dist/collection/components/cpsl-grid/cpsl-grid.js +2 -2
  50. package/dist/collection/components/cpsl-hero/cpsl-hero.css +29 -2
  51. package/dist/collection/components/cpsl-hero/cpsl-hero.js +6 -5
  52. package/dist/collection/components/cpsl-hero/cpsl-hero.js.map +1 -1
  53. package/dist/collection/components/cpsl-icon/cpsl-icon.js +1 -1
  54. package/dist/collection/components/cpsl-input/cpsl-input.js +1 -1
  55. package/dist/collection/components/cpsl-nav-button/cpsl-nav-button.css +107 -0
  56. package/dist/collection/components/cpsl-nav-button/cpsl-nav-button.js +175 -0
  57. package/dist/collection/components/cpsl-nav-button/cpsl-nav-button.js.map +1 -0
  58. package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.css +0 -42
  59. package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js +2 -50
  60. package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js.map +1 -1
  61. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +1 -1
  62. package/dist/collection/components/cpsl-pagination/cpsl-pagination.js +1 -1
  63. package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
  64. package/dist/collection/components/cpsl-popover/cpsl-popover.js +2 -2
  65. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
  66. package/dist/collection/components/cpsl-radio/cpsl-radio.js +1 -1
  67. package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
  68. package/dist/collection/components/cpsl-select/cpsl-select.js +2 -2
  69. package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -1
  70. package/dist/collection/components/cpsl-select-item/cpsl-select-item.js +1 -1
  71. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +3 -3
  72. package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
  73. package/dist/collection/components/cpsl-switch/cpsl-switch.js +1 -1
  74. package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
  75. package/dist/collection/components/cpsl-table/cpsl-table.js +1 -1
  76. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -1
  77. package/dist/collection/components/cpsl-text/cpsl-text.js +1 -1
  78. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
  79. package/dist/esm/capsule.js +1 -1
  80. package/dist/esm/cpsl-alert_34.entry.js +74 -65
  81. package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
  82. package/dist/esm/cpsl-col.entry.js +1 -1
  83. package/dist/esm/cpsl-grid.entry.js +2 -2
  84. package/dist/esm/cpsl-hero.entry.js +4 -3
  85. package/dist/esm/cpsl-hero.entry.js.map +1 -1
  86. package/dist/esm/cpsl-nav-button.entry.js +36 -0
  87. package/dist/esm/cpsl-nav-button.entry.js.map +1 -0
  88. package/dist/esm/cpsl-row.entry.js +1 -1
  89. package/dist/esm/index-91db3414.js +4 -4
  90. package/dist/esm/loader.js +1 -1
  91. package/dist/types/assets/icons/index.d.ts +3 -0
  92. package/dist/types/components/cpsl-animation/cpsl-animation.d.ts +0 -15
  93. package/dist/types/components/cpsl-hero/cpsl-hero.d.ts +2 -2
  94. package/dist/types/components/cpsl-nav-button/cpsl-nav-button.d.ts +43 -0
  95. package/dist/types/components/cpsl-nav-button-group/cpsl-nav-button-group.d.ts +0 -6
  96. package/dist/types/components.d.ts +85 -33
  97. package/package.json +2 -3
  98. package/dist/capsule/p-0e558c7f.entry.js +0 -10
  99. package/dist/capsule/p-0e558c7f.entry.js.map +0 -1
  100. package/dist/capsule/p-32cdf894.entry.js.map +0 -1
  101. package/dist/capsule/p-3b042fd1.entry.js +0 -2
  102. package/dist/capsule/p-60508b1e.entry.js +0 -20
  103. package/dist/capsule/p-60508b1e.entry.js.map +0 -1
  104. package/dist/cjs/cpsl-animation.cjs.entry.js +0 -20133
  105. package/dist/cjs/cpsl-animation.cjs.entry.js.map +0 -1
  106. package/dist/collection/components/cpsl-animation/cpsl-animation.css +0 -17
  107. package/dist/esm/cpsl-animation.entry.js +0 -20129
  108. package/dist/esm/cpsl-animation.entry.js.map +0 -1
  109. /package/dist/capsule/{p-3b042fd1.entry.js.map → p-cfc382c0.entry.js.map} +0 -0
  110. /package/dist/capsule/{p-de2a16e4.entry.js.map → p-d165df27.entry.js.map} +0 -0
  111. /package/dist/capsule/{p-41bc3c58.entry.js.map → p-f0cd0482.entry.js.map} +0 -0
  112. /package/dist/types/Users/{taylorbosch/Documents/GitHub/Capsule → norwood/capsule-repos}/web-sdk/packages/core-components/.stencil/scripts/buildAssets.d.ts +0 -0
package/dist/collection/components/cpsl-button-group/cpsl-button-group.js CHANGED
@@ -32,7 +32,7 @@ export class CpslButtonGroup {
32
32
  return this.el.querySelectorAll('&> *:not(cpsl-button)');
33
33
  }
34
34
  render() {
35
- return (h(Host, { key: '91ccfcaf08be6fc45076376b19e63b5b58ab9b15' }, h("slot", { key: '9af22dc4fcbd76ebc32e476d1682e2fe41b33f81' })));
35
+ return (h(Host, { key: '4989ccaf19a47fe6e2847d102380a9deac394c0b' }, h("slot", { key: '06c97fd600969c0b136a5a56a2894f40d58119ef' })));
36
36
  }
37
37
  static get is() { return "cpsl-button-group"; }
38
38
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-card/cpsl-card.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Host, h } from "@stencil/core";
2
2
  export class CpslCard {
3
3
  render() {
4
- return (h(Host, { key: '21177f5a9ceec0246dc1fa89a052bfdadacc3063' }, h("div", { key: '0940e0aaf62b24e1be0e99c736069b5bb463854c', class: { card: true }, part: "card-container" }, h("slot", { key: '6317e03f97be9841c03b040845591043bf203e36' }))));
4
+ return (h(Host, { key: '8633aeaedaaf81af67835ee3ffc8964ec28ced92' }, h("div", { key: '432fabd329701f8ef51fc43ba0ca8af3d5182a47', class: { card: true }, part: "card-container" }, h("slot", { key: 'a23d1063d0a1c74ebc076fc67b63c4023f7f8565' }))));
5
5
  }
6
6
  static get is() { return "cpsl-card"; }
7
7
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.js CHANGED
@@ -7,7 +7,7 @@ export class CpslCheckbox {
7
7
  this.checked = undefined;
8
8
  }
9
9
  render() {
10
- return (h(Host, { key: '236c0b027e72c0c25dbc2fd3183a77400c815f8c' }, h("input", { key: '8c350e21268b87d485b16796b2058c4e47f46e75', type: "checkbox", checked: this.checked }), h("span", { key: 'b1d8fc6dd380b67eb8940f55bba47810c54ee189', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '2b3ddcad1e2b9007bda8135a810b75a1a2cfaeca', icon: "check" }))));
10
+ return (h(Host, { key: 'b5d7963285854a20983f8655c8a9545b8d0735e9' }, h("input", { key: 'b822a505e826f06d47f1da51fff0c7f310d9c9ce', type: "checkbox", checked: this.checked }), h("span", { key: '3747cf548b8d88ceee19eae5c1df78cdc5f9c87e', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '9d5d0cdba4b22bc2167aed23e7748201320a6553', icon: "check" }))));
11
11
  }
12
12
  static get is() { return "cpsl-checkbox"; }
13
13
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-code-input/cpsl-code-input.js CHANGED
@@ -93,10 +93,10 @@ export class CpslCodeInput {
93
93
  }
94
94
  render() {
95
95
  var _a;
96
- return (h(Host, { key: 'fd588544d9cdebaaeb1961f4ecb5c5630e8e4699' }, h("div", { key: 'b795c99f0df6fbf4ba9a7118f3f737dbf22c7ee9', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
96
+ return (h(Host, { key: '3891d4e998fa56683fc45b4611c68689f2142e52' }, h("div", { key: '2180ef9e96ce1367998cd085219e0cc7fd09a753', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
97
97
  var _a, _b;
98
98
  return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText), 'has-value': ((_a = this.code) === null || _a === void 0 ? void 0 : _a[i]) !== undefined }, id: `code-input-${i}`, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_b = this.code) === null || _b === void 0 ? void 0 : _b[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
99
- })), (this.errorText || this.helperText) && (h("div", { key: '9cff50eb172f38af5065ad79e3c767f2e8ec33c9', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'c8d7dbbd0ec7a2015e2e8099d0448b847641b845', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '4ae4009a2fb4d8f6dc4c985ea8d39c136cb23780' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
99
+ })), (this.errorText || this.helperText) && (h("div", { key: '9aa97b8ecdc5c7a53aea740146aa6bd526a7f636', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: '02bd4abe94e8e79efd9b3179d6b4513d1aad877b', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '34f4b082e07315f6fdfad340cf69dbaa6d183339' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
100
100
  }
101
101
  static get is() { return "cpsl-code-input"; }
102
102
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-col/cpsl-col.js CHANGED
@@ -105,7 +105,7 @@ export class CpslCol {
105
105
  }
106
106
  render() {
107
107
  const isRTL = document.dir === 'rtl';
108
- return (h(Host, { key: 'febc737118ea526e5c53e8e59479a245ec1b5dd1', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '88e01f9f4ed95eedbfd0620398792d9d5d58633d' })));
108
+ return (h(Host, { key: '9001cdf7946ad5ac95d6099647ec37ece5897c0a', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '77c9c65f517ed2f4b5f8a0891ee28d90ecee8f0f' })));
109
109
  }
110
110
  static get is() { return "cpsl-col"; }
111
111
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-divider/cpsl-divider.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Host, h } from "@stencil/core";
2
2
  export class CpslDivider {
3
3
  render() {
4
- return (h(Host, { key: 'd5cffdef9344f7dcac4aae1bc2acca8c02d69946' }, h("div", { key: 'e07f8107804df83537a3b8e40d124c66d2fc6f44' }), h("slot", { key: 'd97f02d46a63d32d107838b5aa50654a9593cc8a' }), h("div", { key: '2316aed010b91a65c961e2f30cc2cde03b892429' })));
4
+ return (h(Host, { key: 'a6b948fec22a99aa7f247a405f770addccd5ef7c' }, h("div", { key: '2c1090ed0e114b90331fc227fe6c2cafee5a9b31' }), h("slot", { key: '60c4412abf216c23c3649f16792afe63e84387f3' }), h("div", { key: 'aa6fdddc51a03a6e36b262402fcb059a7e35ba57' })));
5
5
  }
6
6
  static get is() { return "cpsl-divider"; }
7
7
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-drawer/cpsl-drawer.js CHANGED
@@ -33,12 +33,12 @@ export class CpslDrawer {
33
33
  const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
34
34
  const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
35
35
  const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
36
- return (h(Host, { key: '81d454f0a4532e333880f4e37a79545ee5710536', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
36
+ return (h(Host, { key: 'ef38766c4e22cdb6496bf62611215ce7fbc8abc1', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
37
37
  top: this.anchor === 'top',
38
38
  bottom: this.anchor === 'bottom',
39
39
  left: this.anchor === 'left',
40
40
  right: this.anchor === 'right',
41
- } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '21fdc68cd01c652b7a9f8e1d624027f4051fdb47', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: '085ba3bf2b57ceeb5615c42816e7a0f8758eeeb0', id: "container", class: "container", part: "container" }, h("slot", { key: 'bd8517779864cf35bc30b33597b27a43c749ba1f' }))));
41
+ } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '7aa68b6104536d6fb29164c396179aa4f287ce97', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: '5049fe95873339bb4877728c49e0eda4d3158397', id: "container", class: "container", part: "container" }, h("slot", { key: 'c6d76fa8b8e47828c472ed9b876faf49c68a8a29' }))));
42
42
  }
43
43
  static get is() { return "cpsl-drawer"; }
44
44
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js CHANGED
@@ -94,7 +94,7 @@ export class CpslDropdown {
94
94
  }
95
95
  render() {
96
96
  var _a, _b, _c;
97
- return (h(Host, { key: 'a997453b8690196f125bcf96fd94d728e645cd9e' }, h("button", { key: '0be8f5b0b6fcb3a27a5885205c0f585a68dc1bb9', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'f324edfdd97304de361a0ccd2bec793af25d3aa3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'e1a3a097abb0633bd33caefabce016e2308f1ac0', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '517c74f9f94df623206d8969a32d894b854f95a4', class: "search-bar" }, h("input", { key: '28ed686f30069ecb92dd0ee1852a9b9f94a98264', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
97
+ return (h(Host, { key: '351276cd3f2f3170a074810279edefb3880b1e3e' }, h("button", { key: 'c73281596b3cb5ea374721b474357cba751eb112', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'af68dc8729ed048ee14b49ba756b115e414feb3e', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'dc2f7f50a072af503d81ca77e543571871647b5d', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '7e2e9270927bcdac083849389e9423d502fec40b', class: "search-bar" }, h("input", { key: '003e9aae15f7c9e5b11fa2aa3f9aeb93c1492a04', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
98
98
  }
99
99
  static get is() { return "cpsl-dropdown"; }
100
100
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js CHANGED
@@ -115,7 +115,7 @@ export class CpslFileUpload {
115
115
  }
116
116
  render() {
117
117
  var _a, _b, _c;
118
- return (h(Host, { key: '7d86bbac92b88c5e0b4a7c79cde8b2669f3801c2' }, this.label && (h("label", { key: 'eb364a27a57b278c5f6a75b793369e07ced1ea2c', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: 'e40411eb484d37dcc9980aaab3a1f69aaf954cc0', name: "label" }), h("div", { key: 'd6da41895c97f0b9a1bcac7c6bc8b3c645558204', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '6eb03384b7ac287459afc20abee8a616c99981ce', class: { 'label-container': true } }, h("slot", { key: '7e4c43bddd220698c73670c8f2da7b600e404686', name: "left-content" })), h("div", { key: '66dc0aa70f8eb04e33e5bd9f7bf32bf60ef2188b', class: { 'file-container': true } }, this.FileContent), h("input", { key: '850e65539600a22b474304524f83d3b14be5d3dd', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: this.file ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { key: '23a46735f7578cf98c4940881032ace297c59584', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '135a2875a88051bccf79fd41c8424c58611fbb6a' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
118
+ return (h(Host, { key: '18e0096b27a8b805ee94f525ace13457349f16f3' }, this.label && (h("label", { key: '22a099ae4179b2cead6c9835123bcf4e365833e9', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: 'fc02c2a0aa82d896d50045cfc10f45cf3d86e321', name: "label" }), h("div", { key: '31e50d9d7249f4700d33a9164b39050d8909efba', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '9546b0675d270df3a24fa3cd6ee88fd4871b55de', class: { 'label-container': true } }, h("slot", { key: 'd9c1581dbad76b3ef0b1b90b8b455d0c0691ed89', name: "left-content" })), h("div", { key: 'f97421c4e415b1b5e634d494eebf964d12ee206c', class: { 'file-container': true } }, this.FileContent), h("input", { key: '5e84df74b088c43b5734118eae1de926f5c3cc70', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: this.file ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { key: '146a25dc2a19ed98649e7af450b700c4009975c9', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '83df60cdc393902f62e9766dc06ea0065aca11fe' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
119
119
  }
120
120
  static get is() { return "cpsl-file-upload"; }
121
121
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-grid/cpsl-grid.js CHANGED
@@ -4,9 +4,9 @@ export class CpslGrid {
4
4
  this.fixed = false;
5
5
  }
6
6
  render() {
7
- return (h(Host, { key: '76084ea41988e4fdff4a48dc400988d2aa190a56', class: {
7
+ return (h(Host, { key: '2a309bb97e8f23435d58104be2ecb598fbd6d057', class: {
8
8
  'grid-fixed': this.fixed,
9
- } }, h("slot", { key: '1eb8c755910397d58a2165238a1428769623ef6b' })));
9
+ } }, h("slot", { key: 'd47730a267a8daba7e8e17396789950bf3200ebb' })));
10
10
  }
11
11
  static get is() { return "cpsl-grid"; }
12
12
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-hero/cpsl-hero.css CHANGED
@@ -58,6 +58,7 @@
58
58
  --ring-2-size: 360px;
59
59
  --ring-1-size: 240px;
60
60
  --ring-0-size: 120px;
61
+ --center-icon-size: 64px;
61
62
  --default-theme-ring-3-opacity: 0.05;
62
63
  --default-theme-ring-2-opacity: 0.1;
63
64
  --default-theme-ring-1-opacity: 0.2;
@@ -159,6 +160,19 @@
159
160
  box-shadow: 0px 0px 20px rgba(254, 83, 48, 0.1);
160
161
  }
161
162
 
163
+ :host(.add) > .backgroundContainer > .background .ring0 {
164
+ box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.1);
165
+ }
166
+ :host(.add) > .backgroundContainer > .background .ring1 {
167
+ box-shadow: 0px 0px 20px rgba(219, 0, 179, 0.1);
168
+ }
169
+ :host(.add) > .backgroundContainer > .background .ring2 {
170
+ box-shadow: 0px 0px 20px rgba(219, 0, 51, 0.1);
171
+ }
172
+ :host(.add) > .backgroundContainer > .background .ring3 {
173
+ box-shadow: 0px 0px 20px rgba(254, 83, 48, 0.1);
174
+ }
175
+
162
176
  :host(.failed) > .backgroundContainer > .background.defaultTheme > .ring0 {
163
177
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--cpsl-color-utility-red), transparent 90%);
164
178
  }
@@ -182,6 +196,19 @@
182
196
  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 96%));
183
197
  }
184
198
 
199
+ :host(.add) > .backgroundContainer > .background.defaultTheme .ring0 {
200
+ box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 90%));
201
+ }
202
+ :host(.add) > .backgroundContainer > .background.defaultTheme .ring1 {
203
+ box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 93%));
204
+ }
205
+ :host(.add) > .backgroundContainer > .background.defaultTheme .ring2 {
206
+ box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 95%));
207
+ }
208
+ :host(.add) > .backgroundContainer > .background.defaultTheme .ring3 {
209
+ box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 96%));
210
+ }
211
+
185
212
  :host(:not(.failed)) > .backgroundContainer > .background.defaultTheme > .ring0 {
186
213
  opacity: var(--default-theme-ring-0-opacity);
187
214
  }
@@ -291,8 +318,8 @@
291
318
  .centerIcon {
292
319
  position: absolute;
293
320
  --icon-color: var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));
294
- --width: 64px;
295
- --height: 64px;
321
+ --width: var(--center-icon-size);
322
+ --height: var(--center-icon-size);
296
323
  }
297
324
 
298
325
  .externalConnectionIcon {
package/dist/collection/components/cpsl-hero/cpsl-hero.js CHANGED
@@ -11,14 +11,15 @@ export class CpslHero {
11
11
  }
12
12
  render() {
13
13
  var _a;
14
- return (h(Host, { key: '8dd773a0e1ee3a5c05c05d2099d737818b25efc7', class: {
14
+ return (h(Host, { key: '536748bef37748f5ded6103e7b1157d433a9db9e', class: {
15
15
  // VARIANTS
16
16
  connection: this.variant === 'connection',
17
17
  pending: this.variant === 'pending' || this.variant === 'customContent',
18
18
  approved: this.variant === 'approved',
19
+ add: this.variant === 'add',
19
20
  failed: this.variant === 'failed',
20
21
  externalWalletConnection: this.variant === 'externalWalletConnection',
21
- } }, 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))));
22
+ } }, h("div", { key: '5f3f7d129c3b1578c5ccbfddef6c1cdc4462d1a9', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: '7916fa310aea389a5f728b03a1214c7d749cd078', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: '90d112bee9c23a1fc2c9eeceeb7748389c43b330', class: "ring ring3" }), h("div", { key: '615774a2e59d583b8a117692ac59bc52eb46ba1d', class: "ring ring2" }), h("div", { key: '83e683c08a388ee72f2944ee9dd5db31e3acf077', class: "ring ring1" }), h("div", { key: 'ef301e6e5335f73c47aeb37595878d7fcdcf26ec', class: "ring ring0" }), h("div", { key: '52cd5b1515ccf62c0547a6de5adbb4a60ff69cc0', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: '09fcb87ee34ca15d0fbe71a61aacbdeca4c430ab' }, h("img", { key: 'ca54c63fe0bb01769cff7092e0f54e584d4126fc', class: "connectionImage", src: Images.heroDefault }), h("div", { key: 'f483ade09afa8d444a4858f6b24e547dabc02066', class: "connectDiagramContainer" }, h("slot", { key: '678fb89e0ea73e4683d8b24774ec9ad1574506b5', name: "connectionLeft" }), h("slot", { key: '8161ca39b931cdcad9f26a2b9cd240d21d2bd58e', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: '493b458b1d61d74a34eb5257e5e24c2926ac43e2', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: '98765b1ff59627f41df553cd67d35bdd3fcfb365' }, !this.withDefaultTheme && h("img", { key: 'aa9707c9a33fd79e60265e77e637be70f0dad207', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: 'c5e80d7b587010e7e954b82c99a7b27161f8ab67', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'add' && (h(Fragment, { key: 'a2df2e659262e63ae0c93ba067620f9aabf258b2' }, h("cpsl-icon", { key: 'b2465a8b324d1193b3c13dfb4b13db9766362c18', class: "centerIcon", icon: this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: '4610993869b7f3e12acc28f059a52a0385d89857', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '04154eb679a0ed9ba9926400649118524a2e8930' }, h("cpsl-icon", { key: '0057163ff813b61dba7e4b025ae887d401ab229b', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: '58cf28880b08d9e057601017ad34bc9ef845fda5', class: "connectDiagramContainer" }, h("slot", { key: 'f6bef13f87758ad8464f40e13b15e90a4a8957b7', name: "connectionLeft" }), h("slot", { key: '7632e44ec387c056e1d632e6bfa0a8f55b15f0d5', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: '290ebe2de0cabee6f349bad7effe9078199a17a5', class: "customImageContainer" }, h("slot", { key: '8daf7cf22a8f9cdc66b3e825d576bbd64d94ef30', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: 'ae6da06f903d815e082b6b5d4dd98e20f0fc36b7' }, h("div", { key: '09b3d4c4125b2d33b5a957dc18af18031b5a2312', class: "fadeOut" }), h("div", { key: '82e3164dccb5baf4eb00fb14e1f0f35ea24c79f3', class: "cover" }))))), h("cpsl-text", { key: 'e82eca3761754f67cc54b844d30a88af33936a10', variant: "headingXS", color: "primary", weight: "medium" }, this.title), this.subtitle && (h("cpsl-text", { key: '00eaa47c5107f3b6960c476d90fb9472f18ef1b4', variant: "bodyM", color: "secondary" }, this.subtitle))));
22
23
  }
23
24
  static get is() { return "cpsl-hero"; }
24
25
  static get encapsulation() { return "shadow"; }
@@ -72,15 +73,15 @@ export class CpslHero {
72
73
  "type": "string",
73
74
  "mutable": false,
74
75
  "complexType": {
75
- "original": "'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'failed'",
76
- "resolved": "\"approved\" | \"connection\" | \"customContent\" | \"externalWalletConnection\" | \"failed\" | \"pending\"",
76
+ "original": "'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'add' | 'failed'",
77
+ "resolved": "\"add\" | \"approved\" | \"connection\" | \"customContent\" | \"externalWalletConnection\" | \"failed\" | \"pending\"",
77
78
  "references": {}
78
79
  },
79
80
  "required": false,
80
81
  "optional": true,
81
82
  "docs": {
82
83
  "tags": [],
83
- "text": "The variant of the button.\nOptions are: `\"customContent\"`, `\"connection\"`, `\"externalWalletConnection\"`, `\"pending\", `\"approved\", `\"failed\".\nDefault is: `\"connection\"`."
84
+ "text": "The variant of the button.\nOptions are: `\"customContent\"`, `\"connection\"`, `\"externalWalletConnection\"`, `\"pending\", `\"approved\",`\"add\", `\"failed\".\nDefault is: `\"connection\"`."
84
85
  },
85
86
  "attribute": "variant",
86
87
  "reflect": true,
package/dist/collection/components/cpsl-hero/cpsl-hero.js.map CHANGED
@@ -1 +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"]}
1
+ {"version":3,"file":"cpsl-hero.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAO7C,MAAM,OAAO,QAAQ;;;;uBAkB0H,YAAY;;;;;IAYzJ,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW;gBACX,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;gBACzC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,eAAe;gBACvE,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,GAAG,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;gBAC3B,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACjC,wBAAwB,EAAE,IAAI,CAAC,OAAO,KAAK,0BAA0B;aACtE;YAED,4DAAK,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,MAAA,IAAI,CAAC,MAAM,mCAAI,GAAG,IAAI,EAAE;gBAC3E,4DAAK,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE;oBACnE,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE;wBAClE,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,EAAC,QAAQ;4BACP,4DAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI;4BACxD,4DAAK,KAAK,EAAC,yBAAyB;gCAClC,6DAAM,IAAI,EAAC,gBAAgB,GAAG;gCAC9B,6DAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACG,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI;wBACnF,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAC9B,EAAC,QAAQ;4BACN,CAAC,IAAI,CAAC,gBAAgB,IAAI,4DAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI;4BACjF,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,sBAAsB,GAAI,CAC/F,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CACzB,EAAC,QAAQ;4BACP,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,GAAI,CACjG,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,iBAAiB,GAAG;wBACpF,IAAI,CAAC,OAAO,KAAK,0BAA0B,IAAI,CAC9C,EAAC,QAAQ;4BACP,kEAAW,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,wBAAwB,GAAG;4BAC1E,4DAAK,KAAK,EAAC,yBAAyB;gCAClC,6DAAM,IAAI,EAAC,gBAAgB,GAAG;gCAC9B,6DAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACG,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,eAAe,IAAI,CACnC,4DAAK,KAAK,EAAC,sBAAsB;4BAC/B,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACP,CACG;oBACL,CAAC,IAAI,CAAC,WAAW,IAAI,CACpB,EAAC,QAAQ;wBACP,4DAAK,KAAK,EAAC,SAAS,GAAG;wBACvB,4DAAK,KAAK,EAAC,OAAO,GAAG,CACZ,CACZ,CACG,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,kEAAW,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,IACzC,IAAI,CAAC,QAAQ,CACJ,CACb,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\",`\"add\", `\"failed\".\n * Default is: `\"connection\"`.\n */\n @Prop({ reflect: true }) variant?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'add' | '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 add: this.variant === 'add',\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 === 'add' && (\n <Fragment>\n <cpsl-icon class=\"centerIcon\" icon={this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule'} />\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-icon/cpsl-icon.js CHANGED
@@ -44,7 +44,7 @@ export class CpslIcon {
44
44
  "mutable": false,
45
45
  "complexType": {
46
46
  "original": "IconType",
47
- "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\"",
47
+ "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\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"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\"",
48
48
  "references": {
49
49
  "IconType": {
50
50
  "location": "import",
package/dist/collection/components/cpsl-input/cpsl-input.js CHANGED
@@ -675,7 +675,7 @@ export class CpslInput {
675
675
  "mutable": false,
676
676
  "complexType": {
677
677
  "original": "IconType",
678
- "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\"",
678
+ "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\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"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\"",
679
679
  "references": {
680
680
  "IconType": {
681
681
  "location": "import",
package/dist/collection/components/cpsl-nav-button/cpsl-nav-button.css ADDED
@@ -0,0 +1,107 @@
1
+ :host {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 8px;
5
+ padding: 0px;
6
+ box-sizing: border-box;
7
+ width: 100%;
8
+ background: var(--cpsl-color-background-4);
9
+ border-radius: var(--cpsl-border-radius-primary-button);
10
+ overflow: hidden;
11
+ }
12
+
13
+ .sub-route-container {
14
+ display: flex;
15
+ flex-direction: column;
16
+ gap: 8px;
17
+ border-left: 1px solid var(--cpsl-color-background-16);
18
+ padding-left: 16px;
19
+ margin-left: 16px;
20
+ margin-bottom: 8px;
21
+ margin-right: 8px;
22
+ background: var(--cpsl-color-background-4);
23
+ }
24
+
25
+ .sub-route {
26
+ --button-padding-start: 8px;
27
+ --button-padding-end: 8px;
28
+ --button-padding-top: 8px;
29
+ --button-padding-bottom: 8px;
30
+ --button-justify-content: start;
31
+ --button-primary-color: var(--cpsl-color-background-48);
32
+ --button-primary-background-color: var(--cpsl-color-background-4);
33
+ --button-primary-border-color: var(--cpsl-color-background-4);
34
+ --button-primary-icon-color: var(--cpsl-color-text-primary);
35
+ --button-primary-disabled-color: var(--cpsl-color-text-primary);
36
+ --button-primary-disabled-background-color: var(--cpsl-color-background-4);
37
+ --button-primary-disabled-border-color: var(--cpsl-color-background-4);
38
+ --button-primary-disabled-icon-color: var(--cpsl-color-text-primary);
39
+ --button-primary-hover-color: var(--cpsl-color-background-48);
40
+ --button-primary-hover-background-color: var(--cpsl-color-background-0);
41
+ --button-primary-hover-border-color: var(--cpsl-color-background-4);
42
+ --button-primary-hover-icon-color: var(--cpsl-color-background-48);
43
+ --button-primary-active-color: var(--cpsl-color-text-primary);
44
+ --button-primary-active-background-color: var(--cpsl-color-background-4);
45
+ --button-primary-active-border-color: var(--cpsl-color-background-4);
46
+ --button-primary-active-icon-color: var(--cpsl-color-text-primary);
47
+ }
48
+ .sub-route.selected {
49
+ --button-primary-color: var(--cpsl-color-text-primary);
50
+ --button-primary-background-color: var(--cpsl-color-background-0);
51
+ --button-primary-border-color: var(--cpsl-color-background-0);
52
+ --button-primary-icon-color: var(--cpsl-color-background-48);
53
+ --button-primary-disabled-color: var(--cpsl-color-background-48);
54
+ --button-primary-disabled-background-color: var(--cpsl-color-background-0);
55
+ --button-primary-disabled-border-color: var(--cpsl-color-background-0);
56
+ --button-primary-disabled-icon-color: var(--cpsl-color-background-48);
57
+ --button-primary-hover-color: var(--cpsl-color-text-primary);
58
+ --button-primary-hover-background-color: var(--cpsl-color-background-0);
59
+ --button-primary-hover-border-color: var(--cpsl-color-background-4);
60
+ --button-primary-hover-icon-color: var(--cpsl-color-background-48);
61
+ --button-primary-active-color: var(--cpsl-color-background-48);
62
+ --button-primary-active-background-color: var(--cpsl-color-background-4);
63
+ --button-primary-active-border-color: var(--cpsl-color-background-4);
64
+ --button-primary-active-icon-color: var(--cpsl-color-background-48);
65
+ }
66
+
67
+ .main-route {
68
+ --button-padding-start: 8px;
69
+ --button-padding-end: 8px;
70
+ --button-padding-top: 8px;
71
+ --button-padding-bottom: 8px;
72
+ --button-justify-content: start;
73
+ --button-primary-color: var(--cpsl-color-background-48);
74
+ --button-primary-background-color: var(--cpsl-color-background-0);
75
+ --button-primary-border-color: var(--cpsl-color-background-0);
76
+ --button-primary-icon-color: var(--cpsl-color-background-48);
77
+ --button-primary-disabled-color: var(--cpsl-color-background-48);
78
+ --button-primary-disabled-background-color: var(--cpsl-color-background-0);
79
+ --button-primary-disabled-border-color: var(--cpsl-color-background-0);
80
+ --button-primary-disabled-icon-color: var(--cpsl-color-background-48);
81
+ --button-primary-hover-color: var(--cpsl-color-background-48);
82
+ --button-primary-hover-background-color: var(--cpsl-color-background-4);
83
+ --button-primary-hover-border-color: var(--cpsl-color-background-4);
84
+ --button-primary-hover-icon-color: var(--cpsl-color-background-48);
85
+ --button-primary-active-color: var(--cpsl-color-background-48);
86
+ --button-primary-active-background-color: var(--cpsl-color-background-4);
87
+ --button-primary-active-border-color: var(--cpsl-color-background-4);
88
+ --button-primary-active-icon-color: var(--cpsl-color-background-48);
89
+ }
90
+ .main-route.selected {
91
+ --button-primary-color: var(--cpsl-color-text-primary);
92
+ --button-primary-background-color: var(--cpsl-color-background-4);
93
+ --button-primary-border-color: var(--cpsl-color-background-4);
94
+ --button-primary-icon-color: var(--cpsl-color-text-primary);
95
+ --button-primary-disabled-color: var(--cpsl-color-text-primary);
96
+ --button-primary-disabled-background-color: var(--cpsl-color-background-4);
97
+ --button-primary-disabled-border-color: var(--cpsl-color-background-4);
98
+ --button-primary-disabled-icon-color: var(--cpsl-color-text-primary);
99
+ --button-primary-hover-color: var(--cpsl-color-text-primary);
100
+ --button-primary-hover-background-color: var(--cpsl-color-background-4);
101
+ --button-primary-hover-border-color: var(--cpsl-color-background-4);
102
+ --button-primary-hover-icon-color: var(--cpsl-color-text-primary);
103
+ --button-primary-active-color: var(--cpsl-color-text-primary);
104
+ --button-primary-active-background-color: var(--cpsl-color-background-4);
105
+ --button-primary-active-border-color: var(--cpsl-color-background-4);
106
+ --button-primary-active-icon-color: var(--cpsl-color-text-primary);
107
+ }