@usecapsule/core-components 3.0.1 → 3.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (210) hide show
  1. package/css/capsule-core.css +93 -24
  2. package/css/capsule-core.css.map +1 -1
  3. package/dist/capsule/capsule.esm.js +1 -1
  4. package/dist/capsule/capsule.esm.js.map +1 -1
  5. package/dist/capsule/index.esm.js +1 -1
  6. package/dist/capsule/index.esm.js.map +1 -1
  7. package/dist/capsule/p-02072c68.entry.js +2 -0
  8. package/dist/capsule/p-02072c68.entry.js.map +1 -0
  9. package/dist/capsule/p-1474c545.entry.js +29 -0
  10. package/dist/capsule/p-1474c545.entry.js.map +1 -0
  11. package/dist/capsule/p-2c16694d.entry.js +2 -0
  12. package/dist/capsule/p-41088cd4.entry.js +2 -0
  13. package/dist/capsule/{p-fcead80b.entry.js.map → p-41088cd4.entry.js.map} +1 -1
  14. package/dist/capsule/{p-fa078837.entry.js → p-6dcaee48.entry.js} +2 -2
  15. package/dist/capsule/p-7dde3172.js +3 -0
  16. package/dist/capsule/p-7dde3172.js.map +1 -0
  17. package/dist/capsule/{p-d28b96ba.entry.js → p-a6aaf3f4.entry.js} +2 -2
  18. package/dist/capsule/{p-0d0a0037.entry.js → p-b976b6f0.entry.js} +2 -2
  19. package/dist/capsule/p-f2393be6.js +2 -0
  20. package/dist/capsule/p-f2393be6.js.map +1 -0
  21. package/dist/cjs/capsule.cjs.js +2 -2
  22. package/dist/cjs/{constants-0869a780.js → constants-9b1b01bb.js} +3 -3
  23. package/dist/cjs/{constants-0869a780.js.map → constants-9b1b01bb.js.map} +1 -1
  24. package/dist/cjs/{cpsl-alert_29.cjs.entry.js → cpsl-alert_33.cjs.entry.js} +662 -87
  25. package/dist/cjs/cpsl-alert_33.cjs.entry.js.map +1 -0
  26. package/dist/cjs/cpsl-animation.cjs.entry.js +1 -1
  27. package/dist/cjs/cpsl-col.cjs.entry.js +1 -1
  28. package/dist/cjs/cpsl-grid.cjs.entry.js +3 -3
  29. package/dist/cjs/cpsl-info-box.cjs.entry.js +3 -3
  30. package/dist/cjs/cpsl-info-box.cjs.entry.js.map +1 -1
  31. package/dist/cjs/cpsl-modal-v2.cjs.entry.js +55 -0
  32. package/dist/cjs/cpsl-modal-v2.cjs.entry.js.map +1 -0
  33. package/dist/cjs/cpsl-row.cjs.entry.js +2 -2
  34. package/dist/cjs/{index-5733071e.js → index-528f7428.js} +86 -3
  35. package/dist/cjs/index-528f7428.js.map +1 -0
  36. package/dist/cjs/index.cjs.js +116 -107
  37. package/dist/cjs/index.cjs.js.map +1 -1
  38. package/dist/cjs/loader.cjs.js +2 -2
  39. package/dist/collection/assets/icons/chevron-up.svg +2 -2
  40. package/dist/collection/assets/icons/close.svg +3 -4
  41. package/dist/collection/assets/icons/cube.svg +3 -0
  42. package/dist/collection/assets/icons/farcaster-brand.svg +10 -0
  43. package/dist/collection/assets/icons/farcaster.svg +10 -0
  44. package/dist/collection/assets/icons/image.svg +3 -0
  45. package/dist/collection/assets/icons/index.js +9 -1
  46. package/dist/collection/assets/icons/index.js.map +1 -1
  47. package/dist/collection/assets/icons/menu.svg +3 -0
  48. package/dist/collection/assets/icons/refresh.svg +3 -0
  49. package/dist/collection/assets/icons/stars.svg +4 -0
  50. package/dist/collection/assets/icons/x.svg +3 -0
  51. package/dist/collection/collection-manifest.json +5 -0
  52. package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
  53. package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js +20 -4
  54. package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js.map +1 -1
  55. package/dist/collection/components/cpsl-button/cpsl-button.css +113 -17
  56. package/dist/collection/components/cpsl-button/cpsl-button.js +63 -7
  57. package/dist/collection/components/cpsl-button/cpsl-button.js.map +1 -1
  58. package/dist/collection/components/cpsl-button-group/cpsl-button-group.css +1 -0
  59. package/dist/collection/components/cpsl-card/cpsl-card.css +1 -1
  60. package/dist/collection/components/cpsl-card/cpsl-card.js +1 -1
  61. package/dist/collection/components/cpsl-card/cpsl-card.js.map +1 -1
  62. package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.css +2 -2
  63. package/dist/collection/components/cpsl-code-input/cpsl-code-input.css +1 -1
  64. package/dist/collection/components/cpsl-divider/cpsl-divider.css +1 -1
  65. package/dist/collection/components/cpsl-drawer/cpsl-drawer.js +84 -11
  66. package/dist/collection/components/cpsl-drawer/cpsl-drawer.js.map +1 -1
  67. package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +1 -1
  68. package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -1
  69. package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.css +211 -0
  70. package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js +406 -0
  71. package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js.map +1 -0
  72. package/dist/collection/components/cpsl-file-upload/test/cpsl-file-upload.e2e.js +29 -0
  73. package/dist/collection/components/cpsl-file-upload/test/cpsl-file-upload.e2e.js.map +1 -0
  74. package/dist/collection/components/cpsl-file-upload/test/cpsl-file-upload.spec.js +37 -0
  75. package/dist/collection/components/cpsl-file-upload/test/cpsl-file-upload.spec.js.map +1 -0
  76. package/dist/collection/components/cpsl-grid/cpsl-grid.js +2 -2
  77. package/dist/collection/components/cpsl-icon/cpsl-icon.js +2 -2
  78. package/dist/collection/components/cpsl-info-box/cpsl-info-box.css +1 -1
  79. package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
  80. package/dist/collection/components/cpsl-input/cpsl-input.css +7 -6
  81. package/dist/collection/components/cpsl-input/cpsl-input.js +3 -8
  82. package/dist/collection/components/cpsl-input/cpsl-input.js.map +1 -1
  83. package/dist/collection/components/cpsl-modal/cpsl-modal.css +4 -4
  84. package/dist/collection/components/cpsl-modal/cpsl-modal.js +1 -0
  85. package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
  86. package/dist/collection/components/cpsl-modal-v2/cpsl-modal-v2.css +91 -0
  87. package/dist/collection/components/cpsl-modal-v2/cpsl-modal-v2.js +224 -0
  88. package/dist/collection/components/cpsl-modal-v2/cpsl-modal-v2.js.map +1 -0
  89. package/dist/collection/components/cpsl-modal-v2/test/cpsl-modal-v2.e2e.js +29 -0
  90. package/dist/collection/components/cpsl-modal-v2/test/cpsl-modal-v2.e2e.js.map +1 -0
  91. package/dist/collection/components/cpsl-modal-v2/test/cpsl-modal-v2.spec.js +37 -0
  92. package/dist/collection/components/cpsl-modal-v2/test/cpsl-modal-v2.spec.js.map +1 -0
  93. package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js +1 -1
  94. package/dist/collection/components/cpsl-overlay/cpsl-overlay.css +1 -1
  95. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +1 -1
  96. package/dist/collection/components/cpsl-pagination/cpsl-pagination.css +4 -0
  97. package/dist/collection/components/cpsl-pagination/cpsl-pagination.js +1 -1
  98. package/dist/collection/components/cpsl-pagination/cpsl-pagination.js.map +1 -1
  99. package/dist/collection/components/cpsl-pill/cpsl-pill.css +1 -1
  100. package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
  101. package/dist/collection/components/cpsl-popover/cpsl-popover.css +98 -0
  102. package/dist/collection/components/cpsl-popover/cpsl-popover.js +511 -0
  103. package/dist/collection/components/cpsl-popover/cpsl-popover.js.map +1 -0
  104. package/dist/collection/components/cpsl-popover/test/cpsl-popover.e2e.js +29 -0
  105. package/dist/collection/components/cpsl-popover/test/cpsl-popover.e2e.js.map +1 -0
  106. package/dist/collection/components/cpsl-popover/test/cpsl-popover.spec.js +37 -0
  107. package/dist/collection/components/cpsl-popover/test/cpsl-popover.spec.js.map +1 -0
  108. package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.css +3 -3
  109. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css +1 -1
  110. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
  111. package/dist/collection/components/cpsl-radio/cpsl-radio.css +2 -2
  112. package/dist/collection/components/cpsl-radio/cpsl-radio.js +1 -1
  113. package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
  114. package/dist/collection/components/cpsl-select/cpsl-select.css +229 -0
  115. package/dist/collection/components/cpsl-select/cpsl-select.js +409 -0
  116. package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -0
  117. package/dist/collection/components/cpsl-select/test/cpsl-select.e2e.js +29 -0
  118. package/dist/collection/components/cpsl-select/test/cpsl-select.e2e.js.map +1 -0
  119. package/dist/collection/components/cpsl-select/test/cpsl-select.spec.js +37 -0
  120. package/dist/collection/components/cpsl-select/test/cpsl-select.spec.js.map +1 -0
  121. package/dist/collection/components/cpsl-select-item/cpsl-select-item.css +114 -0
  122. package/dist/collection/components/cpsl-select-item/cpsl-select-item.js +85 -0
  123. package/dist/collection/components/cpsl-select-item/cpsl-select-item.js.map +1 -0
  124. package/dist/collection/components/cpsl-select-item/test/cpsl-select-item.e2e.js +29 -0
  125. package/dist/collection/components/cpsl-select-item/test/cpsl-select-item.e2e.js.map +1 -0
  126. package/dist/collection/components/cpsl-select-item/test/cpsl-select-item.spec.js +37 -0
  127. package/dist/collection/components/cpsl-select-item/test/cpsl-select-item.spec.js.map +1 -0
  128. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css +3 -3
  129. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +3 -3
  130. package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
  131. package/dist/collection/components/cpsl-switch/cpsl-switch.css +4 -4
  132. package/dist/collection/components/cpsl-switch/cpsl-switch.js +1 -1
  133. package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
  134. package/dist/collection/components/cpsl-table/cpsl-table.css +40 -60
  135. package/dist/collection/components/cpsl-table/cpsl-table.js +40 -58
  136. package/dist/collection/components/cpsl-table/cpsl-table.js.map +1 -1
  137. package/dist/collection/components/cpsl-tabs/cpsl-tabs.css +2 -2
  138. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -1
  139. package/dist/collection/components/cpsl-text/cpsl-text.css +4 -0
  140. package/dist/collection/components/cpsl-text/cpsl-text.js +5 -4
  141. package/dist/collection/components/cpsl-text/cpsl-text.js.map +1 -1
  142. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css +1 -1
  143. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
  144. package/dist/collection/constants.js +2 -2
  145. package/dist/collection/constants.js.map +1 -1
  146. package/dist/collection/interface.js.map +1 -1
  147. package/dist/collection/utils/theme/generateBorderRadii.js +40 -39
  148. package/dist/collection/utils/theme/generateBorderRadii.js.map +1 -1
  149. package/dist/collection/utils/theme/generatePalette.js +11 -3
  150. package/dist/collection/utils/theme/generatePalette.js.map +1 -1
  151. package/dist/collection/utils/theme/generateTheme.js +2 -2
  152. package/dist/collection/utils/theme/generateTheme.js.map +1 -1
  153. package/dist/collection/utils/theme/utils.js +1 -0
  154. package/dist/collection/utils/theme/utils.js.map +1 -1
  155. package/dist/esm/capsule.js +3 -3
  156. package/dist/esm/{constants-6acf4ea8.js → constants-fce138fa.js} +3 -3
  157. package/dist/esm/{constants-6acf4ea8.js.map → constants-fce138fa.js.map} +1 -1
  158. package/dist/esm/{cpsl-alert_29.entry.js → cpsl-alert_33.entry.js} +659 -88
  159. package/dist/esm/cpsl-alert_33.entry.js.map +1 -0
  160. package/dist/esm/cpsl-animation.entry.js +1 -1
  161. package/dist/esm/cpsl-col.entry.js +1 -1
  162. package/dist/esm/cpsl-grid.entry.js +3 -3
  163. package/dist/esm/cpsl-info-box.entry.js +3 -3
  164. package/dist/esm/cpsl-info-box.entry.js.map +1 -1
  165. package/dist/esm/cpsl-modal-v2.entry.js +51 -0
  166. package/dist/esm/cpsl-modal-v2.entry.js.map +1 -0
  167. package/dist/esm/cpsl-row.entry.js +2 -2
  168. package/dist/esm/{index-8fe9f35e.js → index-b188f201.js} +86 -4
  169. package/dist/esm/index-b188f201.js.map +1 -0
  170. package/dist/esm/index.js +116 -107
  171. package/dist/esm/index.js.map +1 -1
  172. package/dist/esm/loader.js +3 -3
  173. package/dist/types/assets/icons/index.d.ts +8 -0
  174. package/dist/types/components/cpsl-app-bar/cpsl-app-bar.d.ts +1 -0
  175. package/dist/types/components/cpsl-button/cpsl-button.d.ts +4 -1
  176. package/dist/types/components/cpsl-drawer/cpsl-drawer.d.ts +10 -1
  177. package/dist/types/components/cpsl-file-upload/cpsl-file-upload.d.ts +34 -0
  178. package/dist/types/components/cpsl-input/cpsl-input.d.ts +1 -1
  179. package/dist/types/components/cpsl-modal-v2/cpsl-modal-v2.d.ts +17 -0
  180. package/dist/types/components/cpsl-popover/cpsl-popover.d.ts +35 -0
  181. package/dist/types/components/cpsl-select/cpsl-select.d.ts +38 -0
  182. package/dist/types/components/cpsl-select-item/cpsl-select-item.d.ts +8 -0
  183. package/dist/types/components/cpsl-table/cpsl-table.d.ts +8 -3
  184. package/dist/types/components/cpsl-text/cpsl-text.d.ts +1 -1
  185. package/dist/types/components.d.ts +596 -28
  186. package/dist/types/constants.d.ts +2 -2
  187. package/dist/types/interface.d.ts +68 -1
  188. package/dist/types/utils/theme/generateBorderRadii.d.ts +1 -1
  189. package/dist/types/utils/theme/generateTheme.d.ts +1 -1
  190. package/dist/types/utils/theme/utils.d.ts +4 -1
  191. package/package.json +2 -2
  192. package/dist/capsule/p-107e1ff5.entry.js +0 -29
  193. package/dist/capsule/p-107e1ff5.entry.js.map +0 -1
  194. package/dist/capsule/p-86e48e61.js +0 -3
  195. package/dist/capsule/p-86e48e61.js.map +0 -1
  196. package/dist/capsule/p-ad14a817.entry.js +0 -2
  197. package/dist/capsule/p-b6b38e73.js +0 -2
  198. package/dist/capsule/p-b6b38e73.js.map +0 -1
  199. package/dist/capsule/p-fcead80b.entry.js +0 -2
  200. package/dist/cjs/cpsl-alert_29.cjs.entry.js.map +0 -1
  201. package/dist/cjs/index-5733071e.js.map +0 -1
  202. package/dist/collection/components/cpsl-table/table-interface.js +0 -2
  203. package/dist/collection/components/cpsl-table/table-interface.js.map +0 -1
  204. package/dist/esm/cpsl-alert_29.entry.js.map +0 -1
  205. package/dist/esm/index-8fe9f35e.js.map +0 -1
  206. package/dist/types/components/cpsl-table/table-interface.d.ts +0 -19
  207. /package/dist/capsule/{p-ad14a817.entry.js.map → p-2c16694d.entry.js.map} +0 -0
  208. /package/dist/capsule/{p-fa078837.entry.js.map → p-6dcaee48.entry.js.map} +0 -0
  209. /package/dist/capsule/{p-d28b96ba.entry.js.map → p-a6aaf3f4.entry.js.map} +0 -0
  210. /package/dist/capsule/{p-0d0a0037.entry.js.map → p-b976b6f0.entry.js.map} +0 -0
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-5733071e.js');
6
- const constants = require('./constants-0869a780.js');
5
+ const index = require('./index-528f7428.js');
6
+ const constants = require('./constants-9b1b01bb.js');
7
7
  const _commonjsHelpers = require('./_commonjsHelpers-b3309d7b.js');
8
8
 
9
9
  const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:14px;--container-padding-bottom:14px;--container-padding-start:16px;--container-padding-end:16px;--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-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{border-radius:var(--container-border-radius);-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);font-size:var(--container-font-size);display:flex;align-items:center;justify-content:center;gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);background-color:var(--container-background-color);color:var(--container-color)}";
@@ -46,14 +46,13 @@ const CpslAppBar = class {
46
46
  index.registerInstance(this, hostRef);
47
47
  this.height = undefined;
48
48
  this.position = 'fixed';
49
+ this.zIndexOverride = undefined;
49
50
  }
50
51
  render() {
51
- return (index.h(index.Host, { key: 'ea193eb47aaa71a32556004f5a43b8e903408054', style: {
52
- height: `${this.height}px`,
53
- } }, index.h("div", { key: '7e3c3b25bb6dfe9177de027ee9920c190b55b265', class: "container", part: "container", style: {
52
+ return (index.h(index.Host, { key: '045bc58e1719b02dea67276200abb0cd05d6f717', style: Object.assign({ height: `${this.height}px` }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})) }, index.h("div", { key: 'e29aa3326057f15b83e4ca9e2718074fda98e177', class: "container", part: "container", style: {
54
53
  position: this.position,
55
54
  height: `${this.height}px`,
56
- } }, index.h("slot", { key: '00ac3af6b3485807bf63701f9b0b845efcb288c7' })), this.position === 'fixed' && (index.h("div", { style: {
55
+ } }, index.h("slot", { key: '566c990b33134045c54195b7c762f07049a6bd22' })), this.position === 'fixed' && (index.h("div", { style: {
57
56
  height: `${this.height}px`,
58
57
  } }))));
59
58
  }
@@ -77,32 +76,36 @@ const CpslAvatar = class {
77
76
  };
78
77
  CpslAvatar.style = CpslAvatarStyle0;
79
78
 
80
- const cpslButtonCss = ":host{--button-border-width:1px;--button-border-width-start:var(--button-border-width);--button-border-width-end:var(--button-border-width);--button-border-width-top:var(--button-border-width);--button-border-width-bottom:var(--button-border-width);--button-gap:8px;--button-justify-content:center;--button-border-radius-top-start:var(--button-border-radius);--button-border-radius-top-end:var(--button-border-radius);--button-border-radius-bottom-end:var(--button-border-radius);--button-border-radius-bottom-start:var(--button-border-radius);--button-padding-start:16px;--button-padding-end:16px;--button-icon-size:var(--cpls-font-size-body-l);--button-primary-color:var(--cpsl-color-primary-button-text);--button-primary-background-color:var(--cpsl-color-primary-button-surface-default);--button-primary-border-color:var(--cpsl-color-primary-button-border-default);--button-primary-icon-color:var(--cpsl-color-primary-button-text);--button-primary-disabled-color:var(--cpsl-color-primary-button-text);--button-primary-disabled-background-color:var(--cpsl-color-primary-button-surface-disabled);--button-primary-disabled-border-color:var(--cpsl-color-primary-button-border-disabled);--button-primary-disabled-icon-color:var(--cpsl-color-primary-button-text);--button-primary-hover-color:var(--cpsl-color-primary-button-text);--button-primary-hover-background-color:var(--cpsl-color-primary-button-surface-hover);--button-primary-hover-border-color:var(--cpsl-color-primary-button-surface-hover);--button-primary-hover-icon-color:var(--cpsl-color-primary-button-text);--button-primary-active-color:var(--cpsl-color-primary-button-text);--button-primary-active-background-color:var(--cpsl-color-primary-button-surface-pressed);--button-primary-active-border-color:var(--cpsl-color-primary-button-surface-pressed);--button-primary-active-icon-color:var(--cpsl-color-primary-button-text);--button-secondary-color:var(--cpsl-color-secondary-button-text);--button-secondary-background-color:var(--cpsl-color-secondary-button-surface-default);--button-secondary-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-disabled-color:var(--cpsl-color-secondary-button-text);--button-secondary-disabled-background-color:var(--cpsl-color-secondary-button-surface-disabled);--button-secondary-disabled-border-color:var(--cpsl-color-secondary-button-border-disabled);--button-secondary-disabled-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-hover-color:var(--cpsl-color-secondary-button-text);--button-secondary-hover-background-color:var(--cpsl-color-secondary-button-surface-hover);--button-secondary-hover-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-hover-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-active-color:var(--cpsl-color-secondary-button-text);--button-secondary-active-background-color:var(--cpsl-color-secondary-button-surface-pressed);--button-secondary-active-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-active-icon-color:var(--cpsl-color-secondary-button-text);--button-icon-color:var(--cpsl-color-icon-button-default);--button-icon-disabled-color:var(--cpsl-color-icon-button-disabled);--button-icon-hover-color:var(--cpsl-color-icon-button-hover);height:100%;display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.full-width){width:100%;display:block}:host(.full-width) .button-native{width:100%}:host(.small){--button-font-size:var(--cpsl-font-size-body-s);--button-padding-top:12px;--button-padding-bottom:12px;--button-icon-size:var(--cpsl-font-size-body-m)}:host(.medium){--button-font-size:var(--cpsl-font-size-body-m);--button-padding-top:14px;--button-padding-bottom:14px;--button-icon-size:var(--cpsl-font-size-body-l)}:host(.disabled){cursor:default;pointer-events:none}:host ::slotted(cpsl-icon){--height:var(--button-icon-size);--width:var(--button-icon-size)}:host(.primary){--button-border-radius:var(--cpsl-border-radius-primary-button);--button-color:var(--button-primary-color);--button-background-color:var(--button-primary-background-color);--button-border-color:var(--button-primary-border-color)}:host(.primary) ::slotted(cpsl-icon){--icon-color:var(--button-primary-icon-color)}:host(.primary):host(.disabled){--button-color:var(--button-primary-disabled-color);--button-background-color:var(--button-primary-disabled-background-color);--button-border-color:var(--button-primary-disabled-border-color);--button-outline-color:transparent}:host(.primary):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-primary-disabled-icon-color)}:host(.primary) :not(.disabled):hover{--button-color:var(--button-primary-hover-color);--button-background-color:var(--button-primary-hover-background-color);--button-border-color:var(--button-primary-hover-border-color)}:host(.primary) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-primary-hover-icon-color)}:host(.primary) :not(.disabled):active{--button-color:var(--button-primary-active-color);--button-background-color:var(--button-primary-active-background-color);--button-border-color:var(--button-primary-active-border-color)}:host(.primary) :not(.disabled):active ::slotted(cpsl-icon){--icon-color:var(--button-primary-active-icon-color)}:host(.primary) :not(.disabled):focus-visible{--button-outline-color:var(--cpsl-color-primary-button-outline)}:host(.secondary){--button-border-radius:var(--cpsl-border-radius-secondary-button);--button-color:var(--button-secondary-color);--button-background-color:var(--button-primary-secondary-color);--button-border-color:var(--button-secondary-border-color)}:host(.secondary) ::slotted(cpsl-icon){--icon-color:var(--button-secondary-icon-color)}:host(.secondary):host(.disabled){--button-color:var(--button-secondary-disabled-color);--button-background-color:var(--button-secondary-disabled-background-color);--button-border-color:var(--button-secondary-disabled-border-color);--button-outline-color:transparent}:host(.secondary):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-secondary-disabled-icon-color)}:host(.secondary) :not(.disabled):hover{--button-color:var(--button-secondary-hover-color);--button-border-color:var(--button-secondary-hover-border-color);--button-background-color:var(--button-secondary-hover-background-color)}:host(.secondary) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-secondary-hover-icon-color)}:host(.secondary) :not(.disabled):active{--button-color:var(--button-secondary-active-color);--button-border-color:var(--button-secondary-active-border-color);--button-background-color:var(--button-secondary-active-background-color)}:host(.secondary) :not(.disabled):active ::slotted(cpsl-icon){--icon-color:var(--button-secondary-active-icon-color)}:host(.secondary) :not(.disabled):focus-visible{--button-outline-color:var(--cpsl-color-secondary-button-outline)}:host(.icon){--button-color:transparent;--button-background-color:transparent;--button-border-color:transparent;--button-outline-color:transparent}:host(.icon) ::slotted(cpsl-icon){--icon-color:var(--button-icon-color)}:host(.icon):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-icon-disabled-color)}:host(.icon) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-icon-hover-color)}.button-native{border-top-left-radius:var(--button-border-radius-top-start);border-top-right-radius:var(--button-border-radius-top-end);border-bottom-right-radius:var(--button-border-radius-bottom-end);border-bottom-left-radius:var(--button-border-radius-bottom-start);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);font-size:var(--button-font-size);border:0px solid transparent;border-width:var(--button-border-width-top) var(--button-border-width-end) var(--button-border-width-bottom) var(--button-border-width-start);cursor:pointer;color:var(--button-color);background-color:var(--button-background-color);border-color:var(--button-border-color);display:flex;justify-content:var(--button-justify-content);align-items:center;height:100%;gap:var(--button-gap);word-break:break-all;outline-color:var(--button-outline-color)}:host-context([dir=rtl]) .button-native{border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}[dir=rtl] .button-native{border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}@supports selector(:dir(rtl)){.button-native:dir(rtl){border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}}:host ::slotted(cpsl-text){color:var(--button-color)}";
79
+ const cpslButtonCss = ":host{--button-border-width:1px;--button-border-width-start:var(--button-border-width);--button-border-width-end:var(--button-border-width);--button-border-width-top:var(--button-border-width);--button-border-width-bottom:var(--button-border-width);--button-gap:8px;--button-justify-content:center;--button-border-radius-top-start:var(--button-border-radius);--button-border-radius-top-end:var(--button-border-radius);--button-border-radius-bottom-end:var(--button-border-radius);--button-border-radius-bottom-start:var(--button-border-radius);--button-padding-start:16px;--button-padding-end:16px;--button-icon-size:var(--cpls-font-size-body-l);--button-font-weight:500;--button-primary-color:var(--cpsl-color-primary-button-text);--button-primary-background-color:var(--cpsl-color-primary-button-surface-default);--button-primary-border-color:var(--cpsl-color-primary-button-border-default);--button-primary-icon-color:var(--cpsl-color-primary-button-text);--button-primary-disabled-color:var(--cpsl-color-text-disabled);--button-primary-disabled-background-color:var(--cpsl-color-primary-button-surface-disabled);--button-primary-disabled-border-color:var(--cpsl-color-primary-button-border-disabled);--button-primary-disabled-icon-color:var(--cpsl-color-primary-button-text);--button-primary-hover-color:var(--cpsl-color-primary-button-text);--button-primary-hover-background-color:var(--cpsl-color-primary-button-surface-hover);--button-primary-hover-border-color:var(--cpsl-color-primary-button-surface-hover);--button-primary-hover-icon-color:var(--cpsl-color-primary-button-text);--button-primary-active-color:var(--cpsl-color-primary-button-text);--button-primary-active-background-color:var(--cpsl-color-primary-button-surface-pressed);--button-primary-active-border-color:var(--cpsl-color-primary-button-surface-pressed);--button-primary-active-icon-color:var(--cpsl-color-primary-button-text);--button-secondary-color:var(--cpsl-color-secondary-button-text);--button-secondary-background-color:var(--cpsl-color-secondary-button-surface-default);--button-secondary-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-disabled-color:var(--cpsl-color-text-disabled);--button-secondary-disabled-background-color:var(--cpsl-color-secondary-button-surface-disabled);--button-secondary-disabled-border-color:var(--cpsl-color-secondary-button-border-disabled);--button-secondary-disabled-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-hover-color:var(--cpsl-color-secondary-button-text);--button-secondary-hover-background-color:var(--cpsl-color-secondary-button-surface-hover);--button-secondary-hover-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-hover-icon-color:var(--cpsl-color-secondary-button-text);--button-secondary-active-color:var(--cpsl-color-secondary-button-text);--button-secondary-active-background-color:var(--cpsl-color-secondary-button-surface-pressed);--button-secondary-active-border-color:var(--cpsl-color-secondary-button-border-default);--button-secondary-active-icon-color:var(--cpsl-color-secondary-button-text);--button-ghost-color:var(--cpsl-color-ghost-button-default);--button-ghost-disabled-color:var(--cpsl-color-ghost-button-disabled);--button-ghost-hover-color:var(--cpsl-color-ghost-button-hover);--button-destructive-color:var(--cpsl-color-destructive-button-text);--button-destructive-background-color:var(--cpsl-color-destructive-button-surface-default);--button-destructive-border-color:var(--cpsl-color-destructive-button-border-default);--button-destructive-icon-color:var(--cpsl-color-destructive-button-text);--button-destructive-disabled-color:var(--cpsl-color-text-disabled);--button-destructive-disabled-background-color:var(--cpsl-color-destructive-button-surface-disabled);--button-destructive-disabled-border-color:var(--cpsl-color-destructive-button-border-disabled);--button-destructive-disabled-icon-color:var(--cpsl-color-destructive-button-text);--button-destructive-hover-color:var(--cpsl-color-destructive-button-text);--button-destructive-hover-background-color:var(--cpsl-color-destructive-button-surface-hover);--button-destructive-hover-border-color:var(--cpsl-color-destructive-button-border-default);--button-destructive-hover-icon-color:var(--cpsl-color-destructive-button-text);--button-destructive-active-color:var(--cpsl-color-destructive-button-text);--button-destructive-active-background-color:var(--cpsl-color-destructive-button-surface-pressed);--button-destructive-active-border-color:var(--cpsl-color-destructive-button-border-default);--button-destructive-active-icon-color:var(--cpsl-color-destructive-button-text);height:fit-content;width:fit-content;display:inline-block;font-family:var(--cpsl-font-family, inherit);-webkit-tap-highlight-color:transparent}:host a{height:fit-content;width:auto !important}:host(.full-width){width:100%;display:block}:host(.full-width) .button-native{width:100%}:host(.small){--button-font-size:var(--cpsl-font-size-body-s);--button-padding-top:12px;--button-padding-bottom:12px;--button-icon-size:var(--cpsl-font-size-body-m)}:host(.small.primary){--button-padding-top:13px;--button-padding-bottom:13px}:host(.medium){--button-font-size:var(--cpsl-font-size-body-m);--button-padding-top:14px;--button-padding-bottom:14px;--button-icon-size:var(--cpsl-font-size-body-l)}:host(.medium) :host(.primary){--button-padding-top:15px;--button-padding-bottom:15px}:host(.medium.primary){--button-padding-top:15px;--button-padding-bottom:15px}:host(.disabled){cursor:default;pointer-events:none}:host ::slotted(cpsl-icon){--height:var(--button-icon-size);--width:var(--button-icon-size)}:host(.primary){--button-border-radius:var(--cpsl-border-radius-primary-button);--button-color:var(--button-primary-color);--button-background-color:var(--button-primary-background-color);--button-border-color:var(--button-primary-border-color);--button-padding-start:17px;--button-padding-end:17px;--button-border-width:0px}:host(.primary) ::slotted(cpsl-icon){--icon-color:var(--button-primary-icon-color)}:host(.primary):host(.disabled){--button-color:var(--button-primary-disabled-color);--button-background-color:var(--button-primary-disabled-background-color);--button-border-color:var(--button-primary-disabled-border-color);--button-outline-color:transparent}:host(.primary):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-primary-disabled-icon-color)}:host(.primary) :not(.disabled):hover{--button-color:var(--button-primary-hover-color);--button-background-color:var(--button-primary-hover-background-color);--button-border-color:var(--button-primary-hover-border-color)}:host(.primary) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-primary-hover-icon-color)}:host(.primary) :not(.disabled):active{--button-color:var(--button-primary-active-color);--button-background-color:var(--button-primary-active-background-color);--button-border-color:var(--button-primary-active-border-color)}:host(.primary) :not(.disabled):active ::slotted(cpsl-icon){--icon-color:var(--button-primary-active-icon-color)}:host(.primary) :not(.disabled):focus-visible{--button-outline-color:var(--cpsl-color-primary-button-outline)}:host(.secondary){--button-border-radius:var(--cpsl-border-radius-destructive-button);--button-color:var(--button-secondary-color);--button-background-color:var(--button-secondary-background-color);--button-border-color:var(--button-secondary-border-color)}:host(.secondary) ::slotted(cpsl-icon){--icon-color:var(--button-secondary-icon-color)}:host(.secondary):host(.disabled){--button-color:var(--button-secondary-disabled-color);--button-background-color:var(--button-secondary-disabled-background-color);--button-border-color:var(--button-secondary-disabled-border-color);--button-outline-color:transparent}:host(.secondary):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-secondary-disabled-icon-color)}:host(.secondary) :not(.disabled):hover{--button-color:var(--button-secondary-hover-color);--button-border-color:var(--button-secondary-hover-border-color);--button-background-color:var(--button-secondary-hover-background-color)}:host(.secondary) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-secondary-hover-icon-color)}:host(.secondary) :not(.disabled):active{--button-color:var(--button-secondary-active-color);--button-border-color:var(--button-secondary-active-border-color);--button-background-color:var(--button-secondary-active-background-color)}:host(.secondary) :not(.disabled):active ::slotted(cpsl-icon){--icon-color:var(--button-secondary-active-icon-color)}:host(.secondary) :not(.disabled):focus-visible{--button-outline-color:var(--cpsl-color-secondary-button-outline)}:host(.ghost){--button-color:var(--button-ghost-color);--button-background-color:transparent;--button-border-color:transparent;--button-outline-color:transparent;--button-padding-start:0px;--button-padding-end:0px;--button-padding-top:0px;--button-padding-bottom:0px;--button-border-width:0px}:host(.ghost) ::slotted(cpsl-icon){--icon-color:var(--button-ghost-color);--height:var(--cpsl-font-size-body-xl);--width:var(--cpsl-font-size-body-xl)}:host(.ghost):host(.disabled){--button-color:var(--button-ghost-disabled-color)}:host(.ghost):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-ghost-disabled-color)}:host(.ghost) :not(.disabled):hover{--button-color:var(--button-ghost-hover-color)}:host(.ghost) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-ghost-hover-color)}:host(.destructive){--button-border-radius:var(--cpsl-border-radius-secondary-button);--button-color:var(--button-destructive-color);--button-background-color:var(--button-destructive-background-color);--button-border-color:var(--button-destructive-border-color)}:host(.destructive) ::slotted(cpsl-icon){--icon-color:var(--button-destructive-icon-color)}:host(.destructive):host(.disabled){--button-color:var(--button-destructive-disabled-color);--button-background-color:var(--button-destructive-disabled-background-color);--button-border-color:var(--button-destructive-disabled-border-color);--button-outline-color:transparent}:host(.destructive):host(.disabled) ::slotted(cpsl-icon){--icon-color:var(--button-destructive-disabled-icon-color)}:host(.destructive) :not(.disabled):hover{--button-color:var(--button-destructive-hover-color);--button-border-color:var(--button-destructive-hover-border-color);--button-background-color:var(--button-destructive-hover-background-color)}:host(.destructive) :not(.disabled):hover ::slotted(cpsl-icon){--icon-color:var(--button-destructive-hover-icon-color)}:host(.destructive) :not(.disabled):active{--button-color:var(--button-destructive-active-color);--button-border-color:var(--button-destructive-active-border-color);--button-background-color:var(--button-destructive-active-background-color)}:host(.destructive) :not(.disabled):active ::slotted(cpsl-icon){--icon-color:var(--button-destructive-active-icon-color)}:host(.destructive) :not(.disabled):focus-visible{--button-outline-color:var(--cpsl-color-destructive-button-outline)}.button-native{border-top-left-radius:var(--button-border-radius-top-start);border-top-right-radius:var(--button-border-radius-top-end);border-bottom-right-radius:var(--button-border-radius-bottom-end);border-bottom-left-radius:var(--button-border-radius-bottom-start);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);font-size:var(--button-font-size);font-weight:var(--button-font-weight);font-family:inherit;white-space:nowrap;text-decoration:none;border:0px solid transparent;border-width:var(--button-border-width-top) var(--button-border-width-end) var(--button-border-width-bottom) var(--button-border-width-start);cursor:pointer;color:var(--button-color);background:var(--button-background-color);border-color:var(--button-border-color);display:flex;justify-content:var(--button-justify-content);align-items:center;height:100%;gap:var(--button-gap);word-break:break-all;outline-color:var(--button-outline-color);-webkit-tap-highlight-color:transparent}:host-context([dir=rtl]) .button-native{border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}[dir=rtl] .button-native{border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}@supports selector(:dir(rtl)){.button-native:dir(rtl){border-top-left-radius:var(--button-border-radius-top-end);border-top-right-radius:var(--button-border-radius-top-start);border-bottom-right-radius:var(--button-border-radius-bottom-start);border-bottom-left-radius:var(--button-border-radius-bottom-end)}}:host ::slotted(cpsl-text){color:var(--button-color)}";
81
80
  const CpslButtonStyle0 = cpslButtonCss;
82
81
 
83
82
  const CpslButton = class {
84
83
  constructor(hostRef) {
85
84
  index.registerInstance(this, hostRef);
85
+ this.as = 'button';
86
86
  this.disabled = false;
87
87
  this.fullWidth = false;
88
+ this.href = undefined;
88
89
  this.size = 'medium';
90
+ this.target = undefined;
89
91
  this.variant = 'primary';
90
92
  }
91
93
  render() {
92
- return (index.h(index.Host, { key: '62f94f1db8f1019d47a3fcd481638dd21769b74f', class: {
94
+ return (index.h(index.Host, { key: 'c8c19be90600d9ca236b51e4e112d8350d7f611c', class: {
93
95
  'primary': this.variant === 'primary',
94
96
  'secondary': this.variant === 'secondary',
95
- 'icon': this.variant === 'icon',
97
+ 'ghost': this.variant === 'ghost',
98
+ 'destructive': this.variant === 'destructive',
96
99
  'disabled': this.disabled,
97
100
  'full-width': this.fullWidth,
98
101
  'small': this.size === 'small',
99
102
  'medium': this.size === 'medium',
100
- } }, index.h("button", { key: '8b018abcc84330186611db6319bcf56022f5cccc', part: "button-native", class: "button-native" }, index.h("slot", { key: 'cad9e0b269752f30514957663de666eee0f2622c', name: "start" }), index.h("slot", { key: '6170188bf7734375bb3c99ae7ffab4d21c817e32' }), index.h("slot", { key: '2e483b4c7d21796c4e519c9c553483f633d2c8ac', name: "end" }))));
103
+ } }, index.h(this.as, { key: '9ba756220f648f1d4123bd42df8d4db311800705', href: this.href, target: this.target, part: "button-native", class: "button-native" }, index.h("slot", { key: '7156e673a1a43ea808aeca1574b5f251c38bdc22', name: "start" }), index.h("slot", { key: 'a74790e4d6deb92b6e0380f6ca8551aacf5c3b8f' }), index.h("slot", { key: '73219152509968a55aeff2cdc56beefa9b9e5995', name: "end" }))));
101
104
  }
102
105
  };
103
106
  CpslButton.style = CpslButtonStyle0;
104
107
 
105
- const cpslButtonGroupCss = ":host{--button-size:32px;display:flex}:host ::slotted(cpsl-button:first-child){--button-border-radius-top-end:0px;--button-border-radius-bottom-end:0px}:host ::slotted(cpsl-button:last-child){--button-border-width-start:0px;--button-border-radius-top-start:0px;--button-border-radius-bottom-start:0px}:host ::slotted(cpsl-button:not(:first-child):not(:last-child)){--button-border-width-start:0px;--button-border-radius-top-start:0px;--button-border-radius-bottom-start:0px;--button-border-radius-top-end:0px;--button-border-radius-bottom-end:0px}:host ::slotted(cpsl-button){--button-color:var(--cpsl-color-text-tertiary);--button-padding-start:0px;--button-padding-end:0px;--button-padding-top:0px;--button-padding-bottom:0px;height:var(--button-size);width:var(--button-size)}:host ::slotted(cpsl-button.selected){--button-color:var(--cpsl-color-text-primary)}";
108
+ const cpslButtonGroupCss = ":host{--button-size:32px;display:flex}:host ::slotted(cpsl-button:first-child){--button-border-radius-top-end:0px;--button-border-radius-bottom-end:0px}:host ::slotted(cpsl-button:last-child){--button-border-width-start:0px;--button-border-radius-top-start:0px;--button-border-radius-bottom-start:0px}:host ::slotted(cpsl-button:not(:first-child):not(:last-child)){--button-border-width-start:0px;--button-border-radius-top-start:0px;--button-border-radius-bottom-start:0px;--button-border-radius-top-end:0px;--button-border-radius-bottom-end:0px}:host ::slotted(cpsl-button){--button-color:var(--cpsl-color-text-tertiary);--button-padding-start:0px;--button-padding-end:0px;--button-padding-top:0px;--button-padding-bottom:0px;--button-border-radius:var(--cpsl-border-radius-button-group);height:var(--button-size);width:var(--button-size)}:host ::slotted(cpsl-button.selected){--button-color:var(--cpsl-color-text-primary)}";
106
109
  const CpslButtonGroupStyle0 = cpslButtonGroupCss;
107
110
 
108
111
  const CpslButtonGroup = class {
@@ -148,7 +151,7 @@ const CpslButtonGroup = class {
148
151
  };
149
152
  CpslButtonGroup.style = CpslButtonGroupStyle0;
150
153
 
151
- const cpslCardCss = ":host{--card-padding-top:24px;--card-padding-end:24px;--card-padding-bottom:24px;--card-padding-start:24px;--card-border-width:1px;--card-border-color:var(--cpsl-color-card-border);--card-border-radius:var(--cpsl-border-radius-card);--card-background-color:var(--cpsl-color-card-surface);display:block}.card{-webkit-padding-start:var(--card-padding-start);padding-inline-start:var(--card-padding-start);-webkit-padding-end:var(--card-padding-end);padding-inline-end:var(--card-padding-end);padding-top:var(--card-padding-top);padding-bottom:var(--card-padding-bottom);display:block;box-sizing:border-box;overflow:hidden;border:var(--card-border-width) solid var(--card-border-color);border-radius:var(--card-border-radius);background-color:var(--card-background-color)}";
154
+ const cpslCardCss = ":host{--card-padding-top:24px;--card-padding-end:24px;--card-padding-bottom:24px;--card-padding-start:24px;--card-border-width:1px;--card-border-color:var(--cpsl-color-card-border);--card-border-radius:var(--cpsl-border-radius-card);--card-background-color:var(--cpsl-color-card-surface);display:block}.card{-webkit-padding-start:var(--card-padding-start);padding-inline-start:var(--card-padding-start);-webkit-padding-end:var(--card-padding-end);padding-inline-end:var(--card-padding-end);padding-top:var(--card-padding-top);padding-bottom:var(--card-padding-bottom);display:block;box-sizing:border-box;overflow:hidden;border:var(--card-border-width) solid var(--card-border-color);border-radius:var(--card-border-radius);background:var(--card-background-color)}";
152
155
  const CpslCardStyle0 = cpslCardCss;
153
156
 
154
157
  const CpslCard = class {
@@ -156,12 +159,12 @@ const CpslCard = class {
156
159
  index.registerInstance(this, hostRef);
157
160
  }
158
161
  render() {
159
- return (index.h(index.Host, { key: '8633aeaedaaf81af67835ee3ffc8964ec28ced92' }, index.h("div", { key: '3f2a22aad0a9dde3c6819ec9746576691d2084e5', class: { card: true } }, index.h("slot", { key: 'c6f573694f67d2096cac429c27f87f3b04547d4b' }))));
162
+ return (index.h(index.Host, { key: '8633aeaedaaf81af67835ee3ffc8964ec28ced92' }, index.h("div", { key: '432fabd329701f8ef51fc43ba0ca8af3d5182a47', class: { card: true }, part: "card-container" }, index.h("slot", { key: 'a23d1063d0a1c74ebc076fc67b63c4023f7f8565' }))));
160
163
  }
161
164
  };
162
165
  CpslCard.style = CpslCardStyle0;
163
166
 
164
- const cpslCheckboxCss = ":host{--container-height:20px;--container-width:20px;--container-border-radius:var(--cpsl-border-radius-checkbox);--container-border-width:2px;--container-background-color-default:var(--cpsl-color-checkbox-surface-default);--container-border-color-default:var(--cpsl-color-checkbox-border-default);--container-background-color-checked:var(--cpsl-color-checkbox-surface-checked);--container-border-color-checked:var(--cpsl-color-checkbox-border-checked);--icon-height:16px;--icon-width:16px;--checkbox-icon-color:var(--cpsl-color-checkbox-icon);display:block;position:relative;height:var(--container-height);width:var(--container-width);cursor:pointer}input{position:absolute;width:100%;height:100%;margin:0px;opacity:0}span.container{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;width:100%;height:100%;border-radius:var(--container-border-radius);border:var(--container-border-width) solid;background-color:var(--container-background-color-default);border-color:var(--container-border-color-default);transition:all 0.15s ease-in-out}span.container cpsl-icon{--height:var(--icon-height);--width:var(--icon-width);opacity:0;--icon-color:var(--checkbox-icon-color);transition:all 0.15s ease-in-out}span.container.checked{background-color:var(--container-background-color-checked);border-color:var(--container-border-color-checked)}span.container.checked cpsl-icon{opacity:1}";
167
+ const cpslCheckboxCss = ":host{--container-height:20px;--container-width:20px;--container-border-radius:var(--cpsl-border-radius-checkbox);--container-border-width:2px;--container-background-color-default:var(--cpsl-color-checkbox-surface-default);--container-border-color-default:var(--cpsl-color-checkbox-border-default);--container-background-color-checked:var(--cpsl-color-checkbox-surface-checked);--container-border-color-checked:var(--cpsl-color-checkbox-border-checked);--icon-height:16px;--icon-width:16px;--checkbox-icon-color:var(--cpsl-color-checkbox-icon);display:block;position:relative;height:var(--container-height);width:var(--container-width);cursor:pointer}input{position:absolute;width:100%;height:100%;margin:0px;opacity:0}span.container{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;width:100%;height:100%;border-radius:var(--container-border-radius);border:var(--container-border-width) solid;background:var(--container-background-color-default);border-color:var(--container-border-color-default);transition:all 0.15s ease-in-out}span.container cpsl-icon{--height:var(--icon-height);--width:var(--icon-width);opacity:0;--icon-color:var(--checkbox-icon-color);transition:all 0.15s ease-in-out}span.container.checked{background:var(--container-background-color-checked);border-color:var(--container-border-color-checked)}span.container.checked cpsl-icon{opacity:1}";
165
168
  const CpslCheckboxStyle0 = cpslCheckboxCss;
166
169
 
167
170
  const CpslCheckbox = class {
@@ -179,7 +182,7 @@ const CpslCheckbox = class {
179
182
  };
180
183
  CpslCheckbox.style = CpslCheckboxStyle0;
181
184
 
182
- const cpslCodeInputCss = ":host{--input-width:40px;--input-height:54px;--input-border-radius:var(--cpsl-border-radius-input);--input-border-color:var(--cpsl-color-input-border-placeholder);--input-border-width:1px;--input-background-color:var(--cpsl-color-input-surface-default);--input-border-error-color:var(--cpsl-color-input-border-error);--input-font-size:clamp(20px, 1.25rem, 30px);--input-color:var(--cpsl-color-text-primary);--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:12px;--helper-text-margin-top:6px;display:block;font-family:var(--cpsl-font-family, inherit)}.code-container{display:flex;gap:8px}.code-input{font-family:var(--cpsl-font-family, inherit);border-radius:var(--input-border-radius);font-size:var(--input-font-size);border-color:var(--input-border-color);border-width:var(--input-border-width);border-style:solid;font-size:var(--input-font-size);color:var(--input-color);width:var(--input-width);height:var(--input-height);background-color:var(--input-background-color);box-sizing:border-box;text-align:center;outline:none}.code-input:focus{--input-border-color:var(--cpsl-color-input-border-active)}.code-input::-webkit-outer-spin-button,.code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.code-input .error-container{border-color:var(--input-border-error-color)}input[type=number]{-moz-appearance:textfield}.helper-text-container{flex-basis:100%;display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}";
185
+ const cpslCodeInputCss = ":host{--input-width:40px;--input-height:54px;--input-border-radius:var(--cpsl-border-radius-input);--input-border-color:var(--cpsl-color-input-border-placeholder);--input-border-width:1px;--input-background-color:var(--cpsl-color-input-surface-default);--input-border-error-color:var(--cpsl-color-input-border-error);--input-font-size:clamp(20px, 1.25rem, 30px);--input-color:var(--cpsl-color-text-primary);--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:12px;--helper-text-margin-top:6px;display:block;font-family:var(--cpsl-font-family, inherit)}.code-container{display:flex;gap:8px}.code-input{font-family:var(--cpsl-font-family, inherit);border-radius:var(--input-border-radius);font-size:var(--input-font-size);border-color:var(--input-border-color);border-width:var(--input-border-width);border-style:solid;font-size:var(--input-font-size);color:var(--input-color);width:var(--input-width);height:var(--input-height);background:var(--input-background-color);box-sizing:border-box;text-align:center;outline:none}.code-input:focus{--input-border-color:var(--cpsl-color-input-border-active)}.code-input::-webkit-outer-spin-button,.code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.code-input .error-container{border-color:var(--input-border-error-color)}input[type=number]{-moz-appearance:textfield}.helper-text-container{flex-basis:100%;display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}";
183
186
  const CpslCodeInputStyle0 = cpslCodeInputCss;
184
187
 
185
188
  const CpslCodeInput = class {
@@ -278,7 +281,7 @@ const CpslCodeInput = class {
278
281
  };
279
282
  CpslCodeInput.style = CpslCodeInputStyle0;
280
283
 
281
- const cpslDividerCss = ":host{--divider-height:1px;--divider-color:var(--cpsl-color-divider);display:flex;align-items:center;height:24px;color:var(--cpsl-color-text-subtle);font-family:var(--cpsl-font-family, inherit);font-size:clamp(14px, 0.875rem, 21px);font-weight:600;gap:16px}:host div{flex:1;background-color:var(--divider-color);height:var(--divider-height)}";
284
+ const cpslDividerCss = ":host{--divider-height:1px;--divider-color:var(--cpsl-color-divider);display:flex;align-items:center;height:24px;color:var(--cpsl-color-text-subtle);font-family:var(--cpsl-font-family, inherit);font-size:clamp(14px, 0.875rem, 21px);font-weight:600;gap:16px}:host div{flex:1;background:var(--divider-color);height:var(--divider-height)}";
282
285
  const CpslDividerStyle0 = cpslDividerCss;
283
286
 
284
287
  const CpslDivider = class {
@@ -297,28 +300,44 @@ const CpslDrawerStyle0 = cpslDrawerCss;
297
300
  const CpslDrawer = class {
298
301
  constructor(hostRef) {
299
302
  index.registerInstance(this, hostRef);
303
+ this.closedAnchorPosition = undefined;
304
+ this.showTransition = undefined;
300
305
  this.anchor = undefined;
306
+ this.anchorPosition = undefined;
307
+ this.noOverlay = undefined;
301
308
  this.open = undefined;
302
309
  this.size = undefined;
303
310
  this.transitionDuration = 0.15;
304
311
  this.transitionFunction = 'ease-in-out';
305
312
  this.variant = 'temporary';
313
+ this.zIndexOverride = undefined;
314
+ }
315
+ componentDidLoad() {
316
+ this.closedAnchorPosition = `-${this.getContainerHeight()}px`;
317
+ setTimeout(() => {
318
+ this.showTransition = true;
319
+ }, 100);
320
+ }
321
+ getContainerHeight() {
322
+ var _a;
323
+ return (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.clientHeight;
324
+ }
325
+ get containerEl() {
326
+ return this.el.shadowRoot.getElementById('container');
306
327
  }
307
328
  render() {
329
+ var _a;
308
330
  const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
309
- return (index.h(index.Host, { key: '14b5f63f68d3e543b9b2b2f8e7fcbe24222ceb7a', style: {
310
- width: setHeight ? '100vw' : `${this.size}px`,
311
- height: setHeight ? `${this.size}px` : '100vh',
312
- transitionDuration: `${this.transitionDuration}s`,
313
- transitionTimingFunction: `${this.transitionFunction}`,
314
- [this.anchor]: this.open || this.variant === 'permanent' ? '0px' : `-${this.size}px`,
315
- }, class: {
331
+ const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
332
+ const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
333
+ return (index.h(index.Host, { key: 'c8f7717bd060bdd83edec49865d99d2bc885aace', 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' }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
316
334
  top: this.anchor === 'top',
317
335
  bottom: this.anchor === 'bottom',
318
336
  left: this.anchor === 'left',
319
337
  right: this.anchor === 'right',
320
- } }, this.variant === 'temporary' && index.h("cpsl-overlay", { open: this.open, zIndexOverride: constants.DEFAULT_Z_INDICES.modal + 1 }), index.h("div", { key: '9877dd496d8a055a84ca81d7bf5b3a425b45e473', class: "container", part: "container" }, index.h("slot", { key: 'b02a97fc7f1fb6fe5f0a8fb45dbf7709977c2c3b' }))));
338
+ } }, this.variant === 'temporary' && !this.noOverlay && index.h("cpsl-overlay", { open: this.open, zIndexOverride: constants.DEFAULT_Z_INDICES.modal + 1 }), index.h("div", { key: 'f63a22d66da7ed0b7cb2bd0f9b68dbf7e7c4f985', id: "container", class: "container", part: "container" }, index.h("slot", { key: 'c5d208e37ea87f4ae95c5d9064218f1d1edbc304' }))));
321
339
  }
340
+ get el() { return index.getElement(this); }
322
341
  };
323
342
  CpslDrawer.style = CpslDrawerStyle0;
324
343
 
@@ -4443,8 +4462,8 @@ const Check = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" strok
4443
4462
  </svg>
4444
4463
  `;
4445
4464
 
4446
- const ChevronUp = `<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
4447
- <path d="M13 7L7 0.999999L1 7" stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4465
+ const ChevronUp = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
4466
+ <path d="M18 15L12 9L6 15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4448
4467
  </svg>
4449
4468
  `;
4450
4469
 
@@ -4453,11 +4472,9 @@ const Clock = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" strok
4453
4472
  </svg>
4454
4473
  `;
4455
4474
 
4456
- const Close = `<svg width="24" height="24" viewBox="0 0 21 20" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
4457
- <path d="M16.125 4.375L4.875 15.625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4458
- <path d="M16.125 15.625L4.875 4.375" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4459
- </svg>
4460
- `;
4475
+ const Close = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
4476
+ <path d="M17 7L7 17M7 7L17 17" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4477
+ </svg>`;
4461
4478
 
4462
4479
  const ClubhouseBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4463
4480
  <path d="M1.74167 17.875C0.783333 17.875 0 18.6583 0 19.6167C0 20.575 0.783333 21.3583 1.74167 21.3583C2.7 21.3583 3.48333 20.575 3.48333 19.6167C3.48333 18.6583 2.70833 17.875 1.74167 17.875Z" fill="#6515DD"/>
@@ -4476,6 +4493,11 @@ const Copy = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
4476
4493
  </svg>
4477
4494
  `;
4478
4495
 
4496
+ const Cube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
4497
+ <path d="M3.5 8H16M16 8V20.5M16 8L20.5 3.5M21 15.3373V3.8C21 3.51997 21 3.37996 20.9455 3.273C20.8976 3.17892 20.8211 3.10243 20.727 3.0545C20.62 3 20.48 3 20.2 3H8.66274C8.41815 3 8.29586 3 8.18077 3.02763C8.07873 3.05213 7.98119 3.09253 7.89172 3.14736C7.7908 3.2092 7.70432 3.29568 7.53137 3.46863L3.46863 7.53137C3.29568 7.70432 3.2092 7.7908 3.14736 7.89172C3.09253 7.98119 3.05213 8.07873 3.02763 8.18077C3 8.29586 3 8.41815 3 8.66274V20.2C3 20.48 3 20.62 3.0545 20.727C3.10243 20.8211 3.17892 20.8976 3.273 20.9455C3.37996 21 3.51997 21 3.8 21H15.3373C15.5818 21 15.7041 21 15.8192 20.9724C15.9213 20.9479 16.0188 20.9075 16.1083 20.8526C16.2092 20.7908 16.2957 20.7043 16.4686 20.5314L20.5314 16.4686C20.7043 16.2957 20.7908 16.2092 20.8526 16.1083C20.9075 16.0188 20.9479 15.9213 20.9724 15.8192C21 15.7041 21 15.5818 21 15.3373Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4498
+ </svg>
4499
+ `;
4500
+
4479
4501
  const DecentBrand = `<svg width="26" height="21" viewBox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg">
4480
4502
  <path d="M12.778 2.78753C14.0232 2.78753 14.984 4.90478 15.5758 6.3203C15.9631 7.2468 16.7703 8.7695 17.7174 9.6841C18.9174 6.8477 19.7749 1e-05 20.9598 0C22.4868 1e-05 25.2514 4.71852 25.2514 10.4107C25.2514 16.1232 22.4888 20.8962 20.96 20.8962C19.7774 20.8962 18.9206 14.0677 17.7252 11.2048C16.773 12.1181 15.9607 13.6496 15.5717 14.58C14.98 15.9955 14.0191 18.1128 12.7739 18.1128C11.5287 18.1128 10.5679 15.9955 9.97612 14.58C9.54017 13.5372 8.57227 11.739 7.47171 10.9028C6.84001 11.4891 6.29866 12.5072 6.04207 13.121C5.65917 14.0369 5.03745 15.4069 4.23174 15.4069C3.42602 15.4069 2.8043 14.0369 2.4214 13.121C2.05134 12.2358 1.07371 10.5066 0.101214 10.4476C0.0674785 10.4496 0.0337325 10.4496 0 10.4476C0.0337143 10.4455 0.0674613 10.4455 0.101214 10.4476C1.07268 10.3887 2.03506 8.6625 2.40511 7.7773C2.78801 6.8614 3.40973 5.4914 4.21545 5.4914C5.02116 5.4914 5.64288 6.8614 6.02578 7.7773C6.28377 8.3944 6.82965 9.4203 7.4658 10.005C8.57048 9.1721 9.5429 7.3663 9.98018 6.3203C10.5719 4.90478 11.5328 2.78753 12.778 2.78753Z" fill="#9969FF"/>
4481
4503
  </svg>
@@ -4563,6 +4585,28 @@ const Facebook = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentC
4563
4585
  </svg>
4564
4586
  `;
4565
4587
 
4588
+ const FarcasterBrand = `<svg width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
4589
+ <g clip-path="url(#clip0_2332_9702)">
4590
+ <path d="M5.50705 0.0720215H26.0971V4.16702H31.9521L30.7251 8.26302H29.6861V24.833C30.2071 24.833 30.6301 25.249 30.6301 25.763V26.88H30.8191C31.3411 26.88 31.7641 27.297 31.7641 27.811V28.928H21.1851V27.811C21.1851 27.297 21.6081 26.88 22.1301 26.88H22.3191V25.763C22.3191 25.316 22.6391 24.943 23.0651 24.853L23.0451 15.71C22.7111 12.057 19.5961 9.19402 15.8021 9.19402C12.0081 9.19402 8.89305 12.057 8.55905 15.71L8.53905 24.845C9.04305 24.919 9.66305 25.302 9.66305 25.763V26.88H9.85205C10.3731 26.88 10.7961 27.297 10.7961 27.811V28.928H0.218053V27.811C0.218053 27.297 0.641053 26.88 1.16205 26.88H1.35105V25.763C1.35105 25.249 1.77405 24.833 2.29605 24.833V8.26302H1.25705L0.0290527 4.16702H5.50705V0.0720215Z" fill="#8A63D2"/>
4591
+ </g>
4592
+ <defs>
4593
+ <clipPath id="clip0_2332_9702">
4594
+ <rect width="32" height="29" fill="white"/>
4595
+ </clipPath>
4596
+ </defs>
4597
+ </svg>`;
4598
+
4599
+ const Farcaster = `<svg width="32" height="29" viewBox="0 0 32 29" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
4600
+ <g clip-path="url(#clip0_2332_9702)">
4601
+ <path d="M5.50705 0.0720215H26.0971V4.16702H31.9521L30.7251 8.26302H29.6861V24.833C30.2071 24.833 30.6301 25.249 30.6301 25.763V26.88H30.8191C31.3411 26.88 31.7641 27.297 31.7641 27.811V28.928H21.1851V27.811C21.1851 27.297 21.6081 26.88 22.1301 26.88H22.3191V25.763C22.3191 25.316 22.6391 24.943 23.0651 24.853L23.0451 15.71C22.7111 12.057 19.5961 9.19402 15.8021 9.19402C12.0081 9.19402 8.89305 12.057 8.55905 15.71L8.53905 24.845C9.04305 24.919 9.66305 25.302 9.66305 25.763V26.88H9.85205C10.3731 26.88 10.7961 27.297 10.7961 27.811V28.928H0.218053V27.811C0.218053 27.297 0.641053 26.88 1.16205 26.88H1.35105V25.763C1.35105 25.249 1.77405 24.833 2.29605 24.833V8.26302H1.25705L0.0290527 4.16702H5.50705V0.0720215Z"/>
4602
+ </g>
4603
+ <defs>
4604
+ <clipPath id="clip0_2332_9702">
4605
+ <rect width="32" height="29" fill="white"/>
4606
+ </clipPath>
4607
+ </defs>
4608
+ </svg>`;
4609
+
4566
4610
  const FigmaBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4567
4611
  <g clip-path="url(#clip0_106_21188)">
4568
4612
  <path d="M8.00006 24C10.2081 24 12.0001 22.208 12.0001 20V15.9999H8.00006C5.79205 15.9999 4 17.792 4 20C4 22.208 5.79205 24 8.00006 24Z" fill="#0ACF83"/>
@@ -4692,6 +4736,11 @@ const Home = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
4692
4736
  </svg>
4693
4737
  `;
4694
4738
 
4739
+ const Image$1 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
4740
+ <path d="M4.27209 20.7279L10.8686 14.1314C11.2646 13.7354 11.4627 13.5373 11.691 13.4632C11.8918 13.3979 12.1082 13.3979 12.309 13.4632C12.5373 13.5373 12.7354 13.7354 13.1314 14.1314L19.6839 20.6839M14 15L16.8686 12.1314C17.2646 11.7354 17.4627 11.5373 17.691 11.4632C17.8918 11.3979 18.1082 11.3979 18.309 11.4632C18.5373 11.5373 18.7354 11.7354 19.1314 12.1314L22 15M10 9C10 10.1046 9.10457 11 8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9ZM6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27976 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3H6.8C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4741
+ </svg>
4742
+ `;
4743
+
4695
4744
  const InfoCircle = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
4696
4745
  <path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4697
4746
  </svg>
@@ -4769,6 +4818,11 @@ const Mail = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
4769
4818
  </svg>
4770
4819
  `;
4771
4820
 
4821
+ const Menu = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
4822
+ <path d="M3 12H21M3 6H21M3 18H21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4823
+ </svg>
4824
+ `;
4825
+
4772
4826
  const MoreLoginOptions = `<svg width="17" height="16" viewBox="0 0 17 16" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg">
4773
4827
  <g id="Group 4">
4774
4828
  <path id="Vector" d="M2.1 16C2.98366 16 3.7 15.2836 3.7 14.4C3.7 13.5163 2.98366 12.8 2.1 12.8C1.21634 12.8 0.5 13.5163 0.5 14.4C0.5 15.2836 1.21634 16 2.1 16Z"/>
@@ -4849,6 +4903,11 @@ const Reddit = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCol
4849
4903
  </svg>
4850
4904
  `;
4851
4905
 
4906
+ const Refresh = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
4907
+ <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"/>
4908
+ </svg>
4909
+ `;
4910
+
4852
4911
  const Settings = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
4853
4912
  <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"/>
4854
4913
  <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"/>
@@ -4876,6 +4935,12 @@ const Snapchat = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentC
4876
4935
  </svg>
4877
4936
  `;
4878
4937
 
4938
+ const Stars = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
4939
+ <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"/>
4940
+ <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"/>
4941
+ </svg>
4942
+ `;
4943
+
4879
4944
  const TelegramBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4880
4945
  <g clip-path="url(#clip0_106_21213)">
4881
4946
  <path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="url(#paint0_linear_106_21213)"/>
@@ -4958,6 +5023,11 @@ const Wallet = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stro
4958
5023
  </svg>
4959
5024
  `;
4960
5025
 
5026
+ const X = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
5027
+ <path d="M17 7L7 17M7 7L17 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
5028
+ </svg>
5029
+ `;
5030
+
4961
5031
  const YoutubeBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4962
5032
  <g clip-path="url(#clip0_106_21177)">
4963
5033
  <path d="M23.522 6.18547C23.3863 5.67489 23.1189 5.20889 22.7465 4.83413C22.3741 4.45936 21.9099 4.18897 21.4002 4.05002C19.5238 3.54547 12.0238 3.54547 12.0238 3.54547C12.0238 3.54547 4.5238 3.54547 2.64744 4.05002C2.13773 4.18897 1.67346 4.45936 1.30109 4.83413C0.92872 5.20889 0.661309 5.67489 0.525622 6.18547C0.0238038 8.07002 0.0238037 12 0.0238037 12C0.0238037 12 0.0238038 15.93 0.525622 17.8146C0.661309 18.3251 0.92872 18.7911 1.30109 19.1659C1.67346 19.5407 2.13773 19.8111 2.64744 19.95C4.5238 20.4546 12.0238 20.4546 12.0238 20.4546C12.0238 20.4546 19.5238 20.4546 21.4002 19.95C21.9099 19.8111 22.3741 19.5407 22.7465 19.1659C23.1189 18.7911 23.3863 18.3251 23.522 17.8146C24.0238 15.93 24.0238 12 24.0238 12C24.0238 12 24.0238 8.07002 23.522 6.18547Z" fill="#FF0302"/>
@@ -4976,7 +5046,7 @@ const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCo
4976
5046
  </svg>
4977
5047
  `;
4978
5048
 
4979
- const Icons = { AD: AD, AE: AE, AF: AF, AG: AG, AI: AI, AL: AL, AM: AM, AO: AO, AR: AR, AS: AS, AT: AT, AU: AU, AW: AW, AX: AX, AZ: AZ, BA: BA, BB: BB, BD: BD, BE: BE, BF: BF, BG: BG, BH: BH, BI: BI, BJ: BJ, BL: BL, BM: BM, BN: BN, BO: BO, BQ: BQ, BQ2: BQ2, BQ3: BQ3, BR: BR, BS: BS, BT: BT, BW: BW, BY: BY, BZ: BZ, CA: CA, CC: CC, CD: CD, CD2: CD2, CF: CF, CH: CH, CK: CK, CL: CL, CM: CM, CN: CN, CO: CO, CR: CR, CU: CU, CW: CW, CX: CX, CY: CY, CZ: CZ, DE: DE, DJ: DJ, DK: DK, DM: DM, DO: DO, DS: DS, DZ: DZ, EC: EC, EE: EE, EG: EG, EH: EH, ER: ER, ES: ES, ET: ET, FI: FI, FJ: FJ, FK: FK, FM: FM, FO: FO, FR: FR, GA: GA, GB2: GB2, GB: GB, GD: GD, GE: GE, GG: GG, GH: GH, GI: GI, GL: GL, GM: GM, GN: GN, GQ: GQ, GR: GR, GT: GT, GU: GU, GW: GW, GY: GY, HK: HK, HN: HN, HR: HR, HT: HT, HU: HU, ID: ID, IE: IE, IL: IL, IM: IM, IN: IN, IO: IO, IQ: IQ, IR: IR, IS: IS, IT: IT, JE: JE, JM: JM, JO: JO, JP: JP, KE: KE, KG: KG, KH: KH, KI: KI, KM: KM, KN: KN, KP: KP, KR: KR, KW: KW, KY: KY, KZ: KZ, LA: LA, LB: LB, LC: LC, LI: LI, LK: LK, LR: LR, LS: LS, LT: LT, LU: LU, LV: LV, LY: LY, MA: MA, MC: MC, MD: MD, ME: ME, MG: MG, MH: MH, MK: MK, ML: ML, MM: MM, MN: MN, MO: MO, MP: MP, MQ: MQ, MR: MR, MS: MS, MT: MT, MU: MU, MV: MV, MW: MW, MX: MX, MY: MY, MZ: MZ, NA: NA, NE: NE, NF: NF, NG: NG, NI: NI, NL: NL, NO: NO, NP: NP, NR: NR, NU: NU, NZ: NZ, OM: OM, PA: PA, PE: PE, PF: PF, PG: PG, PH: PH, PK: PK, PL: PL, PN: PN, PR: PR, PS: PS, PT: PT, PW: PW, PY: PY, QA: QA, RO: RO, RS: RS, RU: RU, RW: RW, SA: SA, SB: SB, SC: SC, SE: SE, SG: SG, SI: SI, SK: SK, SL: SL, SM: SM, SN: SN, SO: SO, SR: SR, SS: SS, ST: ST, SV: SV, SX: SX, SY: SY, SZ: SZ, TC: TC, TD: TD, TG: TG, TH: TH, TJ: TJ, TK: TK, TL: TL, TM: TM, TN: TN, TO: TO, TR: TR, TT: TT, TV: TV, TW: TW, TZ: TZ, UA: UA, UG: UG, US: US, UY: UY, UZ: UZ, VC: VC, VE: VE, VG: VG, VI: VI, VN: VN, VU: VU, WS: WS, YE: YE, ZA: ZA, ZM: ZM, ZW: ZW, alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, brush: Brush, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, checkCircle: CheckCircle, check: Check, chevronUp: ChevronUp, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, decentBrand: DecentBrand, decent: Decent, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, earth: Earth, eyeOff: EyeOff, eye: Eye, facebookBrand: FacebookBrand, facebook: Facebook, figmaBrand: FigmaBrand, figma: Figma, file: File, githubBrand: GithubBrand, github: Github, googleBrand: GoogleBrand, google: Google, helpCircle: HelpCircle, heroEmail: HeroEmail, heroLock: HeroLock, heroPasskey: HeroPasskey, heroPhone: HeroPhone, heroWallet: HeroWallet, home: Home, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, lightning01: Lightning01, lightning: Lightning, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, rampNetworkBrand: RampNetworkBrand, rampNetwork: RampNetwork, redditBrand: RedditBrand, reddit: Reddit, settings: Settings, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, youtubeBrand: YoutubeBrand, youtube: Youtube, };
5049
+ const Icons = { AD: AD, AE: AE, AF: AF, AG: AG, AI: AI, AL: AL, AM: AM, AO: AO, AR: AR, AS: AS, AT: AT, AU: AU, AW: AW, AX: AX, AZ: AZ, BA: BA, BB: BB, BD: BD, BE: BE, BF: BF, BG: BG, BH: BH, BI: BI, BJ: BJ, BL: BL, BM: BM, BN: BN, BO: BO, BQ: BQ, BQ2: BQ2, BQ3: BQ3, BR: BR, BS: BS, BT: BT, BW: BW, BY: BY, BZ: BZ, CA: CA, CC: CC, CD: CD, CD2: CD2, CF: CF, CH: CH, CK: CK, CL: CL, CM: CM, CN: CN, CO: CO, CR: CR, CU: CU, CW: CW, CX: CX, CY: CY, CZ: CZ, DE: DE, DJ: DJ, DK: DK, DM: DM, DO: DO, DS: DS, DZ: DZ, EC: EC, EE: EE, EG: EG, EH: EH, ER: ER, ES: ES, ET: ET, FI: FI, FJ: FJ, FK: FK, FM: FM, FO: FO, FR: FR, GA: GA, GB2: GB2, GB: GB, GD: GD, GE: GE, GG: GG, GH: GH, GI: GI, GL: GL, GM: GM, GN: GN, GQ: GQ, GR: GR, GT: GT, GU: GU, GW: GW, GY: GY, HK: HK, HN: HN, HR: HR, HT: HT, HU: HU, ID: ID, IE: IE, IL: IL, IM: IM, IN: IN, IO: IO, IQ: IQ, IR: IR, IS: IS, IT: IT, JE: JE, JM: JM, JO: JO, JP: JP, KE: KE, KG: KG, KH: KH, KI: KI, KM: KM, KN: KN, KP: KP, KR: KR, KW: KW, KY: KY, KZ: KZ, LA: LA, LB: LB, LC: LC, LI: LI, LK: LK, LR: LR, LS: LS, LT: LT, LU: LU, LV: LV, LY: LY, MA: MA, MC: MC, MD: MD, ME: ME, MG: MG, MH: MH, MK: MK, ML: ML, MM: MM, MN: MN, MO: MO, MP: MP, MQ: MQ, MR: MR, MS: MS, MT: MT, MU: MU, MV: MV, MW: MW, MX: MX, MY: MY, MZ: MZ, NA: NA, NE: NE, NF: NF, NG: NG, NI: NI, NL: NL, NO: NO, NP: NP, NR: NR, NU: NU, NZ: NZ, OM: OM, PA: PA, PE: PE, PF: PF, PG: PG, PH: PH, PK: PK, PL: PL, PN: PN, PR: PR, PS: PS, PT: PT, PW: PW, PY: PY, QA: QA, RO: RO, RS: RS, RU: RU, RW: RW, SA: SA, SB: SB, SC: SC, SE: SE, SG: SG, SI: SI, SK: SK, SL: SL, SM: SM, SN: SN, SO: SO, SR: SR, SS: SS, ST: ST, SV: SV, SX: SX, SY: SY, SZ: SZ, TC: TC, TD: TD, TG: TG, TH: TH, TJ: TJ, TK: TK, TL: TL, TM: TM, TN: TN, TO: TO, TR: TR, TT: TT, TV: TV, TW: TW, TZ: TZ, UA: UA, UG: UG, US: US, UY: UY, UZ: UZ, VC: VC, VE: VE, VG: VG, VI: VI, VN: VN, VU: VU, WS: WS, YE: YE, ZA: ZA, ZM: ZM, ZW: ZW, alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, brush: Brush, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, checkCircle: CheckCircle, check: Check, chevronUp: ChevronUp, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, cube: Cube, decentBrand: DecentBrand, decent: Decent, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, earth: Earth, eyeOff: EyeOff, eye: Eye, facebookBrand: FacebookBrand, facebook: Facebook, farcasterBrand: FarcasterBrand, farcaster: Farcaster, figmaBrand: FigmaBrand, figma: Figma, file: File, githubBrand: GithubBrand, github: Github, googleBrand: GoogleBrand, google: Google, helpCircle: HelpCircle, heroEmail: HeroEmail, heroLock: HeroLock, heroPasskey: HeroPasskey, heroPhone: HeroPhone, heroWallet: HeroWallet, home: Home, image: Image$1, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, lightning01: Lightning01, lightning: Lightning, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, menu: Menu, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, rampNetworkBrand: RampNetworkBrand, rampNetwork: RampNetwork, redditBrand: RedditBrand, reddit: Reddit, refresh: Refresh, settings: Settings, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, stars: Stars, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, x: X, youtubeBrand: YoutubeBrand, youtube: Youtube, };
4980
5050
 
4981
5051
  const cpslDropdownCss = ":host{display:block;position:relative;font-family:Arial, sans-serif;--input-color:var(--cpsl-color-text-primary);--container-background-color:var(--cpsl-color-input-surface-default);--container-border-color:var(--cpsl-color-input-border-active);--scrollbar-color:var(--cpsl-color-text-subtle);--divider-color:var(--cpsl-color-divider);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:var(--cpsl-font-size-body-m);--button-hover-color:var(--cpsl-color-tile-button-surface-hover);font-family:var(--cpsl-font-family, inherit)}.input-container{position:relative;width:100%}::slotted(cpsl-dropdown){position:absolute;width:100%;top:100%;left:0;z-index:2}.dropdown-button{display:flex;width:100%;padding:0 4px;background:none;border:none;align-items:center;justify-content:space-between;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--input-color)}.dropdown-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.dropdown-button div{margin-left:8px;display:flex;align-items:center}.dropdown-options{display:none;position:fixed;list-style:none;padding:0;margin-top:4px;border:1px solid var(--container-border-color);border-radius:8px;z-index:999999999999;overflow-y:auto;max-height:300px;box-sizing:border-box;background-color:var(--container-background-color);}.dropdown-options.open{display:block}.dropdown-options li{padding:8px;cursor:pointer;display:flex;align-items:center;border-bottom:1px solid var(--cpsl-color-divider);color:var(--input-color);background:var(--container-background-color);font-size:var(--input-font-size)}.dropdown-options li:hover{background-color:var(--button-hover-color)}.dropdown-options li svg{width:24px;height:24px;margin-right:8px;padding:0 8px;vertical-align:middle;}.dropdown-options::-webkit-scrollbar{width:8px;height:8px;background-color:transparent;}.dropdown-options::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color);border-radius:10px;border:2px solid transparent;background-clip:content-box;height:8px}.dropdown-options::-webkit-scrollbar-track{background:transparent;}.dropdown-value{margin-left:8px;color:var(--cpsl-color-text-secondary)}.dropdown-button .chevron{transition:transform 0.3s ease}.dropdown-button .chevron.closed{transform:rotate(180deg)}.search-bar{padding:0;border-bottom:1px solid var(--cpsl-color-divider);position:sticky;top:0;background:var(--container-background-color);z-index:1;}.search-bar input{width:100%;padding:8px;border:none;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background-color:var(--container-background-color);border-radius:0;}.search-bar input::placeholder{color:var(--input-placeholder-color)}.search-bar input:focus{outline:none;border-color:transparent;}";
4982
5052
  const CpslDropdownStyle0 = cpslDropdownCss;
@@ -5077,7 +5147,7 @@ const CpslDropdown = class {
5077
5147
  }
5078
5148
  render() {
5079
5149
  var _a, _b, _c;
5080
- return (index.h(index.Host, { key: '65a2ad9d39aa2b234814128f565d1d0024f7b356', style: { width: this.width } }, index.h("button", { key: '15cf331bd42c8ef8812d699f43f01f234f24e6b4', 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}`, index.h("div", { key: '1259100020d7726980b14ae655377fda6321de39', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), index.h("ul", { key: '78fd5bece65d9264cb76bae4c1512489747dc2e1', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (index.h("li", { class: "search-bar" }, index.h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => index.h("li", { onClick: this.handleItemSelect(item) }, index.h("span", { innerHTML: Icons[item.icon] }), item.label, " ", index.h("span", { class: "dropdown-value" }, item.value))))));
5150
+ return (index.h(index.Host, { key: '121a65b9e15c7fb81a1ecd98c30f2d3d47a0af2c' }, index.h("button", { key: 'bdea591df3159d30de22a3615362abcd3f222c65', 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}`, index.h("div", { key: '778a3ea1cc1d6c7df3b961acb2b687aefcce38b3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), index.h("ul", { key: '490af95f8b21a330a7432e10b0591b4ed81aa1b7', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (index.h("li", { class: "search-bar" }, index.h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (index.h("li", { onClick: this.handleItemSelect(item) }, index.h("span", { innerHTML: Icons[item.icon] }), item.label, " ", index.h("span", { class: "dropdown-value" }, item.value)))))));
5081
5151
  }
5082
5152
  get el() { return index.getElement(this); }
5083
5153
  static get watchers() { return {
@@ -5087,6 +5157,138 @@ const CpslDropdown = class {
5087
5157
  };
5088
5158
  CpslDropdown.style = CpslDropdownStyle0;
5089
5159
 
5160
+ const cpslFileUploadCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-file-border-placeholder);--container-border-color:var(--cpsl-color-file-border-placeholder);--container-border-color-error:var(--cpsl-color-file-border-error);--container-background-color:var(--cpsl-color-file-surface-default);--container-background-color-disabled:var(--cpsl-color-file-surface-disabled);--container-background-color-drag:var(--cpsl-color-file-surface-drag);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-file);--container-padding-top:12px;--container-padding-bottom:12px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;--sample-img-height:40px;--sample-img-width:40px;--sample-img-border-radius:8px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}.container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;flex-wrap:wrap;width:100%;gap:var(--container-gap);cursor:pointer;position:relative;border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.container.drag,.container:active{background:var(--container-background-color-drag)}.container.drag-error{cursor:no-drop}.container.error{border-color:var(--container-border-color-error)}input{position:absolute;width:100%;height:100%;top:0;left:0;margin:0px;opacity:0;cursor:pointer}.sample-img{height:var(--sample-img-height);width:var(--sample-img-width);border-radius:var(--sample-img-border-radius);object-fit:contain}.sample-image-name-container{display:flex;gap:4px;align-items:center;text-align:center}.sample-image-name-container cpsl-icon{z-index:10000;--height:16px;--width:16px}.inline-text{display:inline-block}.sample-image-name{display:inline-block;color:var(--cpsl-color-text-tertiary)}.label-container{flex:1}.file-container{display:flex;flex-direction:column;flex:1;gap:8px;justify-content:center;align-items:center}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}";
5161
+ const CpslFileUploadStyle0 = cpslFileUploadCss;
5162
+
5163
+ var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
5164
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
5165
+ return new (P || (P = Promise))(function (resolve, reject) {
5166
+ function fulfilled(value) { try {
5167
+ step(generator.next(value));
5168
+ }
5169
+ catch (e) {
5170
+ reject(e);
5171
+ } }
5172
+ function rejected(value) { try {
5173
+ step(generator["throw"](value));
5174
+ }
5175
+ catch (e) {
5176
+ reject(e);
5177
+ } }
5178
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
5179
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
5180
+ });
5181
+ };
5182
+ const CpslFileUpload = class {
5183
+ constructor(hostRef) {
5184
+ index.registerInstance(this, hostRef);
5185
+ this.cpslOnDrop = index.createEvent(this, "cpslOnDrop", 7);
5186
+ this.cpslOnDragEnter = index.createEvent(this, "cpslOnDragEnter", 7);
5187
+ this.cpslOnDragLeave = index.createEvent(this, "cpslOnDragLeave", 7);
5188
+ this.cpslFileChange = index.createEvent(this, "cpslFileChange", 7);
5189
+ this.cpslFileRemoved = index.createEvent(this, "cpslFileRemoved", 7);
5190
+ this.inputId = `cpsl-file-upload-${inputIds$2++}`;
5191
+ this.handleDrop = (ev) => __awaiter$1(this, void 0, void 0, function* () {
5192
+ var _a;
5193
+ ev.preventDefault();
5194
+ const item = (_a = Array.from(ev.dataTransfer.items)) === null || _a === void 0 ? void 0 : _a[0];
5195
+ if (item && this.isValidFile(item.type)) {
5196
+ const file = item.getAsFile();
5197
+ yield this.addFile(file);
5198
+ }
5199
+ this.dragOver = false;
5200
+ this.dragError = false;
5201
+ this.cpslOnDrop.emit(ev);
5202
+ });
5203
+ this.handleDragEnter = (ev) => {
5204
+ var _a;
5205
+ ev.preventDefault();
5206
+ this.dragOver = true;
5207
+ const item = (_a = Array.from(ev.dataTransfer.items)) === null || _a === void 0 ? void 0 : _a[0];
5208
+ if (item && this.isValidFile(item.type)) {
5209
+ this.dragError = true;
5210
+ }
5211
+ this.cpslOnDragEnter.emit(ev);
5212
+ };
5213
+ this.handleDragLeave = (ev) => {
5214
+ ev.preventDefault();
5215
+ this.dragOver = false;
5216
+ this.dragError = false;
5217
+ this.cpslOnDragLeave.emit(ev);
5218
+ };
5219
+ this.handleInputChange = (ev) => __awaiter$1(this, void 0, void 0, function* () {
5220
+ ev.preventDefault();
5221
+ const input = this.inputEl;
5222
+ if (Boolean(input.files.length)) {
5223
+ const file = input.files[0];
5224
+ if (this.isValidFile(file.type)) {
5225
+ yield this.addFile(file);
5226
+ }
5227
+ }
5228
+ });
5229
+ this.isValidFile = (type) => {
5230
+ var _a;
5231
+ if (Boolean((_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.length) ? !this.fileTypes.includes(type) : false) {
5232
+ return false;
5233
+ }
5234
+ return true;
5235
+ };
5236
+ this.addFile = (file) => __awaiter$1(this, void 0, void 0, function* () {
5237
+ this.file = file;
5238
+ this.cpslFileChange.emit(file);
5239
+ this.uploadError = false;
5240
+ this.isUploading = true;
5241
+ const uploadSuccess = Boolean(this.uploadFile) ? yield this.uploadFile(file) : true;
5242
+ if (!uploadSuccess) {
5243
+ this.uploadError = true;
5244
+ const input = this.inputEl;
5245
+ input.value = '';
5246
+ }
5247
+ this.isUploading = false;
5248
+ });
5249
+ this.removeFile = (e) => {
5250
+ e.preventDefault();
5251
+ this.file = undefined;
5252
+ const input = this.inputEl;
5253
+ input.value = '';
5254
+ this.cpslFileRemoved.emit();
5255
+ };
5256
+ this.file = undefined;
5257
+ this.dragOver = undefined;
5258
+ this.dragError = undefined;
5259
+ this.isUploading = undefined;
5260
+ this.uploadError = undefined;
5261
+ this.errorText = undefined;
5262
+ this.externalFilename = undefined;
5263
+ this.externalSrc = undefined;
5264
+ this.fileTypes = undefined;
5265
+ this.helperText = undefined;
5266
+ this.label = undefined;
5267
+ this.required = false;
5268
+ this.showOptionalLabel = false;
5269
+ this.uploadFile = undefined;
5270
+ }
5271
+ get inputEl() {
5272
+ return this.el.shadowRoot.getElementById(this.inputId);
5273
+ }
5274
+ get FileContent() {
5275
+ var _a;
5276
+ const hasFile = Boolean(this.file) || Boolean(this.externalSrc);
5277
+ const isUploading = this.isUploading;
5278
+ const error = this.uploadError;
5279
+ const text = !hasFile ? (index.h(index.Fragment, null, 'Drag file here or ', index.h("cpsl-text", { class: "inline-text", variant: "bodyXS" }, "upload file"))) : isUploading ? (`${this.file.name} is uploading`) : error ? ('Upload Failed') : (((_a = this.file) === null || _a === void 0 ? void 0 : _a.name) || this.externalFilename || '');
5280
+ const TopElement = !hasFile ? (index.h("cpsl-icon", { icon: "image" })) : isUploading ? (index.h("cpsl-spinner", null)) : error ? (index.h("cpsl-icon", { icon: "close" })) : (index.h("img", { class: "sample-img", src: Boolean(this.file) ? URL.createObjectURL(this.file) : this.externalSrc, alt: "Sample Image" }));
5281
+ return (index.h(index.Fragment, null, TopElement, index.h("span", { class: "sample-image-name-container" }, index.h("cpsl-text", { class: "sample-image-name", variant: "bodyXS" }, text), hasFile && !error && !isUploading && index.h("cpsl-icon", { icon: "close", onClick: this.removeFile }))));
5282
+ }
5283
+ render() {
5284
+ var _a, _b, _c;
5285
+ return (index.h(index.Host, { key: '71d945bcac5d443719737781fd9ec5166952760d' }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("slot", { key: '63786e91e0a230d85344da507d0508ac1524cc88', name: "label" }), index.h("div", { key: '74e7296a0c8ef732094c0e7fab3e0a7db916694b', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, index.h("div", { key: '1a3030a828d8e7a742f3dfbff784e213f845859e', class: { 'label-container': true } }, index.h("slot", { key: '1f77e4c6566deffe7cd830fccb96d21c22daee4b', name: "left-content" })), index.h("div", { key: '3dc0a113348d15d52aae929792de6ee48da795ca', class: { 'file-container': true } }, this.FileContent), index.h("input", { key: 'a6fc37d212b5e4284f4eeec56dc4e7a32ff8374b', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", null, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
5286
+ }
5287
+ get el() { return index.getElement(this); }
5288
+ };
5289
+ let inputIds$2 = 0;
5290
+ CpslFileUpload.style = CpslFileUploadStyle0;
5291
+
5090
5292
  const cpslIconCss = ":host{display:block;--height:24px;--width:24px;--icon-color:var(--cpsl-color-text-primary);--icon-fill-color:var(--cpsl-color-text-primary);--icon-stroke-color:var(--cpsl-color-text-primary);width:var(--width);height:var(--height)}:host div{display:flex;width:var(--width);height:var(--height);color:var(--icon-color)}:host svg{width:var(--width);height:var(--height)}:host svg .background-16{fill:var(--cpsl-color-background-16)}:host svg .foreground-0{fill:var(--cpsl-color-foreground-0)}:host svg .fill{fill:var(--icon-fill-color)}:host svg .stroke{stroke:var(--icon-stroke-color)}:host img{width:var(--width);height:var(--height);object-fit:contain}";
5091
5293
  const CpslIconStyle0 = cpslIconCss;
5092
5294
 
@@ -5097,12 +5299,12 @@ const CpslIcon = class {
5097
5299
  this.icon = undefined;
5098
5300
  }
5099
5301
  render() {
5100
- return (index.h(index.Host, { key: '5e1a7143534342f6c3d79ccf1edcc40aa903773a', part: "icon", role: "img" }, !Boolean(this.icon) ? index.h("img", { src: this.src }) : index.h("div", { innerHTML: Icons[this.icon] })));
5302
+ return (index.h(index.Host, { key: '06850dc9a6d40b95e8b92ea8722bedfa1dc7b36f', part: "icon", role: "img" }, !Boolean(this.icon) ? index.h("img", { src: this.src }) : index.h("div", { innerHTML: Icons[this.icon] })));
5101
5303
  }
5102
5304
  };
5103
5305
  CpslIcon.style = CpslIconStyle0;
5104
5306
 
5105
- const cpslInputCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-input-border-placeholder);--container-border-color:var(--cpsl-color-input-border-active);--container-border-error-color:var(--cpsl-color-input-border-error);--container-background-color:var(--cpsl-color-input-surface-default);--container-background-color-disabled:var(--cpsl-color-input-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-input);--container-padding-top:0px;--container-padding-bottom:0px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:12px;--input-background-color:var(--cpsl-color-input-surface-default);--input-background-color-disabled:var(--cpsl-color-input-surface-disabled);--input-color:var(--cpsl-color-text-primary);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:var(--cpsl-font-size-body-m);--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;--button-padding:4px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-input-border-placeholder);--input-color:var(--cpsl-color-text-secondary)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--input-background-color:var(--input-background-color-disabled);--input-color:var(--cpsl-color-text-disabled)}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-input-border-active);--container-background-color:var(--cpsl-color-input-surface-default)}.input-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background-color:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.native-input{flex:1;min-width:0;border:none;height:100%;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background-color:var(--input-background-color);font-family:var(--cpsl-font-family, inherit)}.native-input:focus,.native-input:focus-visible{outline:none}.native-input::placeholder{color:var(--input-placeholder-color);opacity:1;}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}:host ::slotted([slot=start]){flex:0}:host ::slotted([slot=end]){flex:0}:host ::slotted(cpsl-icon){--icon-color:var(--input-color)}:host ::slotted(cpsl-button){width:calc(var(--container-height) - var(--button-padding) * 2);height:calc(var(--container-height) - var(--button-padding) * 2);--button-border-radius:calc(var(--container-border-radius) - 2px)}:host slot[name=end]::slotted(cpsl-button){margin-right:calc((var(--container-padding-end) - var(--button-padding)) * -1)}:host slot[name=start]::slotted(cpsl-button){margin-left:calc((var(--container-padding-end) - var(--button-padding)) * -1)}";
5307
+ const cpslInputCss = ":host{--container-box-shadow:none;--container-box-shadow-color:none;--container-border-color:var(--cpsl-color-input-border-active);--container-border-error-color:var(--cpsl-color-input-border-error);--container-background-color:var(--cpsl-color-input-surface-default);--container-background-color-disabled:var(--cpsl-color-input-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-input);--container-padding-top:0px;--container-padding-bottom:0px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--input-background-color:var(--cpsl-color-input-surface-default);--input-background-color-disabled:var(--cpsl-color-input-surface-disabled);--input-color:var(--cpsl-color-text-primary);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:var(--cpsl-font-size-body-m);--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;--button-padding:4px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-input-border-placeholder);--input-color:var(--cpsl-color-text-secondary)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--input-background-color:var(--input-background-color-disabled);--input-color:var(--cpsl-color-text-disabled);--container-border-color:transparent}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-input-border-active);--container-background-color:var(--cpsl-color-input-surface-default)}.input-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.native-input{flex:1;min-width:0;border:none;height:100%;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background:var(--input-background-color);font-family:var(--cpsl-font-family, inherit)}.native-input:focus,.native-input:focus-visible{outline:none}.native-input::placeholder{color:var(--input-placeholder-color);opacity:1;}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}:host ::slotted([slot=start]){flex:0 0 auto}:host ::slotted([slot=end]){flex:0 0 auto}:host ::slotted(cpsl-icon){--icon-color:var(--input-color)}:host ::slotted(cpsl-button){width:calc(var(--container-height) - var(--button-padding) * 2);height:calc(var(--container-height) - var(--button-padding) * 2);--button-border-radius:calc(var(--container-border-radius) - 2px)}:host slot[name=end]::slotted(cpsl-button){margin-right:calc((var(--container-padding-end) - var(--button-padding)) * -1)}:host slot[name=start]::slotted(cpsl-button){margin-left:calc((var(--container-padding-end) - var(--button-padding)) * -1)}";
5106
5308
  const CpslInputStyle0 = cpslInputCss;
5107
5309
 
5108
5310
  const CpslInput = class {
@@ -5113,7 +5315,7 @@ const CpslInput = class {
5113
5315
  this.cpslBlur = index.createEvent(this, "cpslBlur", 7);
5114
5316
  this.cpslFocus = index.createEvent(this, "cpslFocus", 7);
5115
5317
  this.cpslPaste = index.createEvent(this, "cpslPaste", 7);
5116
- this.inputId = `cpsl-input-${inputIds++}`;
5318
+ this.inputId = `cpsl-input-${inputIds$1++}`;
5117
5319
  this.onInput = (ev) => {
5118
5320
  const input = ev.target;
5119
5321
  if (Boolean(input)) {
@@ -5227,9 +5429,7 @@ const CpslInput = class {
5227
5429
  }
5228
5430
  }
5229
5431
  emitInputChange(event) {
5230
- const { value } = this;
5231
- const newValue = value == null ? value : value.toString();
5232
- this.cpslInput.emit({ value: newValue, event });
5432
+ this.cpslInput.emit({ value: this.nativeInput.value, event });
5233
5433
  }
5234
5434
  emitValueChange(event) {
5235
5435
  const { value } = this;
@@ -5237,9 +5437,6 @@ const CpslInput = class {
5237
5437
  this.focusedValue = newValue;
5238
5438
  this.cpslChange.emit({ value: newValue, event });
5239
5439
  }
5240
- get nativeInput() {
5241
- return this.el.shadowRoot.getElementById(this.inputId);
5242
- }
5243
5440
  get startEl() {
5244
5441
  return this.el.querySelector('[slot="start"]');
5245
5442
  }
@@ -5248,14 +5445,14 @@ const CpslInput = class {
5248
5445
  }
5249
5446
  render() {
5250
5447
  var _a;
5251
- return (index.h(index.Host, { key: '323cd77e6a96a6259c294cf30c1acfc8b638295d', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: '645781496038445cb011ba003a54ca5a63d80731', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, index.h("slot", { key: 'c32784e17782d18f44d5e1adda605ca47bf6937c', name: "start" }), index.h("input", { key: 'bbe3efcc48eb71aaf6d6f58e32fc466a19bb06ae', class: "native-input", id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), index.h("slot", { key: '646727d4e5be630242778f6df967810be7dea7a6', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
5448
+ return (index.h(index.Host, { key: '28937d4a0e8c5a4e7b7a00e610013e52fa171f3a', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: '8a2c5e7d32c93af2b0d463563c48e8104c639604', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, index.h("slot", { key: 'd24440dff32cd3837638565764d2683bf16414ca', name: "start" }), index.h("input", { key: 'a3df402a5fd5f9a9d2483a1f0b65f9061468df15', class: "native-input", ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), index.h("slot", { key: 'f7472b02d119b4a458252128da5e61ebbfbdee56', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
5252
5449
  }
5253
5450
  get el() { return index.getElement(this); }
5254
5451
  static get watchers() { return {
5255
5452
  "disabled": ["handleDisable"]
5256
5453
  }; }
5257
5454
  };
5258
- let inputIds = 0;
5455
+ let inputIds$1 = 0;
5259
5456
  CpslInput.style = CpslInputStyle0;
5260
5457
 
5261
5458
  function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
@@ -14404,7 +14601,7 @@ Draggable.zIndex = 1000;
14404
14601
  Draggable.version = "3.12.5";
14405
14602
  _getGSAP() && gsap.registerPlugin(Draggable);
14406
14603
 
14407
- const cpslModalCss = ":host{--container-width:360px;--container-gap:16px;--container-border-radius:var(--cpsl-border-radius-modal);--container-border-width:1px;--container-border-color:var(--cpsl-color-modal-border);--container-background-color:var(--cpsl-color-modal-surface-footer);--container-padding-bottom:16px;--container-box-shadow:0px 2px 4px 0px var(--cpsl-color-alpha-black-8);--inner-container-background-color:var(--cpsl-color-modal-surface-main);--inner-container-border-radius:var(--cpsl-border-radius-modal);--inner-container-box-shadow:0px 1px 2px 0px var(--cpsl-color-alpha-black-8);--inner-container-padding-top:16px;--inner-container-padding-end:16px;--inner-container-padding-bottom:24px;--inner-container-padding-start:16px;--inner-container-margin-bottom:16px;display:block;z-index:10005;position:relative}:host cpsl-overlay{z-index:10005}@media (max-width: 480px){:host(.include-mobile-styling) .modal-wrapper{scale:none;top:100%;left:0;height:unset;opacity:1}:host(.include-mobile-styling) .modal-container{width:100%;max-width:none;border-bottom-left-radius:0px;border-bottom-right-radius:0px}}:host(.no-overlay){z-index:0}.modal-header{position:sticky;top:0;padding-top:var(--inner-container-padding-top);background-color:var(--inner-container-background-color)}.modal-wrapper{z-index:10005;position:fixed;top:0;left:0;display:none;height:100%;width:100%;justify-content:center;align-items:center;scale:0.8;opacity:0;transform:none}.modal-container{position:relative;overflow:hidden;-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);width:var(--container-width);display:flex;flex-direction:column;border:var(--container-border-width) solid var(--container-border-color);border-radius:var(--container-border-radius);box-shadow:var(--container-box-shadow);background-color:var(--container-background-color);max-width:95vw;max-height:95vh;max-height:95dvh;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;}.modal-container ::-webkit-scrollbar{display:none}.modal-inner-container{-webkit-padding-start:var(--inner-container-padding-start);padding-inline-start:var(--inner-container-padding-start);-webkit-padding-end:var(--inner-container-padding-end);padding-inline-end:var(--inner-container-padding-end);padding-top:0;padding-bottom:var(--inner-container-padding-bottom);margin-bottom:var(--inner-container-margin-bottom);border-radius:var(--inner-container-border-radius);box-shadow:var(--inner-container-box-shadow);background-color:var(--inner-container-background-color)}.expanded{height:0px;overflow:hidden;display:none}.modal-inner-container.no-footer{margin-bottom:0px;box-shadow:none}.modal-container.no-footer{padding-bottom:0px}.no-opacity{opacity:0}";
14604
+ const cpslModalCss = ":host{--container-width:360px;--container-gap:16px;--container-border-radius:var(--cpsl-border-radius-modal);--container-border-width:1px;--container-border-color:var(--cpsl-color-modal-border);--container-background-color:var(--cpsl-color-modal-surface-footer);--container-padding-bottom:16px;--container-box-shadow:0px 8px 16px 0px rgba(0, 0, 0, 0.12);--inner-container-background-color:var(--cpsl-color-modal-surface-main);--inner-container-border-radius:var(--cpsl-border-radius-modal);--inner-container-box-shadow:0px 1px 2px 0px var(--cpsl-color-alpha-black-8);--inner-container-padding-top:16px;--inner-container-padding-end:16px;--inner-container-padding-bottom:24px;--inner-container-padding-start:16px;--inner-container-margin-bottom:16px;display:block;z-index:10005;position:relative}:host cpsl-overlay{z-index:10005}@media (max-width: 480px){:host(.include-mobile-styling) .modal-wrapper{scale:none;top:100%;left:0;height:unset;opacity:1}:host(.include-mobile-styling) .modal-container{width:100%;max-width:none;border-bottom-left-radius:0px;border-bottom-right-radius:0px}}:host(.no-overlay){z-index:0}.modal-header{position:sticky;top:0;padding-top:var(--inner-container-padding-top);background:var(--inner-container-background-color)}.modal-wrapper{z-index:10005;position:fixed;top:0;left:0;display:none;height:100%;width:100%;justify-content:center;align-items:center;scale:0.8;opacity:0;transform:none}.modal-container{position:relative;overflow:hidden;-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);width:var(--container-width);display:flex;flex-direction:column;border:var(--container-border-width) solid var(--container-border-color);border-radius:var(--container-border-radius);box-shadow:var(--container-box-shadow);background:var(--container-background-color);max-width:95vw;max-height:95vh;max-height:95dvh;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;}.modal-container ::-webkit-scrollbar{display:none}.modal-inner-container{-webkit-padding-start:var(--inner-container-padding-start);padding-inline-start:var(--inner-container-padding-start);-webkit-padding-end:var(--inner-container-padding-end);padding-inline-end:var(--inner-container-padding-end);padding-top:0;padding-bottom:var(--inner-container-padding-bottom);margin-bottom:var(--inner-container-margin-bottom);border-radius:var(--inner-container-border-radius);box-shadow:var(--inner-container-box-shadow);background:var(--inner-container-background-color)}.expanded{height:0px;overflow:hidden;display:none}.modal-inner-container.no-footer{margin-bottom:0px;box-shadow:none}.modal-container.no-footer{padding-bottom:0px}.no-opacity{opacity:0}";
14408
14605
  const CpslModalStyle0 = cpslModalCss;
14409
14606
 
14410
14607
  gsapWithCSS.registerPlugin(Draggable);
@@ -14449,6 +14646,7 @@ const CpslModal = class {
14449
14646
  this.initDraggable();
14450
14647
  gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
14451
14648
  });
14649
+ this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;
14452
14650
  this.footerSlotEl.addEventListener('slotchange', () => {
14453
14651
  if (this.footerSlotEl.assignedNodes().length >= 1) {
14454
14652
  this.hasFooter = true;
@@ -14670,7 +14868,7 @@ const CpslNavButtonGroup = class {
14670
14868
  return this.el.querySelectorAll('&> *:not(cpsl-button)');
14671
14869
  }
14672
14870
  render() {
14673
- return (index.h(index.Host, { key: '4de8526be6448d13688e491a0d460557939fe83b' }, index.h("slot", { key: '633ee1b8e1e637171e8fd55b0375df99bb9d4607' })));
14871
+ return (index.h(index.Host, { key: 'e5cf1902a3d5f8b6df197441e144987dcb016762' }, index.h("slot", { key: '56322f15e640f356fae1c9eb16f525753d91fdae' })));
14674
14872
  }
14675
14873
  get el() { return index.getElement(this); }
14676
14874
  static get watchers() { return {
@@ -14679,7 +14877,7 @@ const CpslNavButtonGroup = class {
14679
14877
  };
14680
14878
  CpslNavButtonGroup.style = CpslNavButtonGroupStyle0;
14681
14879
 
14682
- const cpslOverlayCss = ":host{position:fixed;width:100%;height:100%;inset:0px;z-index:10001;opacity:0%;display:none;background-color:var(--cpsl-color-alpha-black-50)}:host(.over-modal){z-index:10005}";
14880
+ const cpslOverlayCss = ":host{position:fixed;width:100%;height:100%;inset:0px;z-index:10001;opacity:0%;display:none;background:linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.7) 100%)}:host(.over-modal){z-index:10005}";
14683
14881
  const CpslOverlayStyle0 = cpslOverlayCss;
14684
14882
 
14685
14883
  const CpslOverlay = class {
@@ -14710,7 +14908,7 @@ const CpslOverlay = class {
14710
14908
  }
14711
14909
  }
14712
14910
  render() {
14713
- return (index.h(index.Host, { key: '7e2c644351871bd6d49b477302635ee51b57848b', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, index.h("slot", { key: 'd21ebec32fbc75066a5fd3c4107ff48fd6a9ee91' })));
14911
+ return (index.h(index.Host, { key: 'daa05884bc8489f8227873b6778e129bdf922ffd', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, index.h("slot", { key: 'd0783d37893a51fe16fe292c5847dc4acee627ee' })));
14714
14912
  }
14715
14913
  get el() { return index.getElement(this); }
14716
14914
  static get watchers() { return {
@@ -14719,7 +14917,7 @@ const CpslOverlay = class {
14719
14917
  };
14720
14918
  CpslOverlay.style = CpslOverlayStyle0;
14721
14919
 
14722
- const cpslPaginationCss = ":host{display:block}.icon{--height:20px;--width:20px}.start-icon{transform:rotate(180deg)}";
14920
+ const cpslPaginationCss = ":host{display:block}.icon{--height:20px;--width:20px}.start-icon{transform:rotate(180deg)}.arrow-button{--button-secondary-icon-color:var(--cpsl-color-text-tertiary)}";
14723
14921
  const CpslPaginationStyle0 = cpslPaginationCss;
14724
14922
 
14725
14923
  const CpslPagination = class {
@@ -14796,7 +14994,7 @@ const CpslPagination = class {
14796
14994
  filteredPages.push(this.totalPages - 1);
14797
14995
  }
14798
14996
  }
14799
- return (index.h(index.Host, { key: 'ac3681eabdc35a5c620713a722619b7e5f52e2e3' }, index.h("cpsl-button-group", { key: '05f7fcfb5ca4edf4de561357ec16fe2fd5bdf9d8', selectedId: `${this.currentPage}` }, index.h("cpsl-button", { key: '613f70869b90aad3c5973b7c55270e3088335ff9', onClick: this.handlePrevClick }, index.h("cpsl-icon", { key: '458e036ab72bd2a8fc57bb8bcc0be614ad07aa72', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (index.h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, index.h("cpsl-text", { variant: "bodyS" }, page + 1)))), index.h("cpsl-button", { key: '2dc257023f6d4270a79bf88399e3b27ad538b928', onClick: this.handleNextClick }, index.h("cpsl-icon", { key: '716ad78992c6e56c3855d8dc544fc19fefa01804', class: "icon", icon: "arrowNarrow" })))));
14997
+ return (index.h(index.Host, { key: '42ae13b8cdb18ea35db7abc8195d49e36ee4494e' }, index.h("cpsl-button-group", { key: 'a031f2cda1cbd10724ef65cd2fd74b5b237b9841', selectedId: `${this.currentPage}` }, index.h("cpsl-button", { key: '83d653a99ce0eea881eb6332c9d7088b328c20dd', class: "arrow-button", onClick: this.handlePrevClick }, index.h("cpsl-icon", { key: '2e6650d7c873a9e2de4922c08c5b5b2fe27f2b33', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (index.h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, index.h("cpsl-text", { variant: "bodyS" }, page + 1)))), index.h("cpsl-button", { key: '4cd4c8623368c96f3457d818a0542fd7ab560182', class: "arrow-button", onClick: this.handleNextClick }, index.h("cpsl-icon", { key: '52865869846d7afbe7a66f44f9564913caf97380', class: "icon", icon: "arrowNarrow" })))));
14800
14998
  }
14801
14999
  static get watchers() { return {
14802
15000
  "currentPage": ["watchChange"]
@@ -14804,7 +15002,7 @@ const CpslPagination = class {
14804
15002
  };
14805
15003
  CpslPagination.style = CpslPaginationStyle0;
14806
15004
 
14807
- const cpslPillCss = ":host{--pill-text-color:var(--cpsl-pill-text);--pill-text-size:clamp(10px, 0.625rem, 15px);--pill-text-line-height:100%;--pill-container-height:18px;--pill-container-background-color:var(--cpsl-color-pill-container-background);--pill-container-border-color:var(--cpsl-color-pill-container-border);--pill-container-padding-start:8px;--pill-container-padding-end:8px;--pill-container-border-radius:var(--cpsl-border-radius-pill);font-family:var(--cpsl-font-family, inherit);display:inline-block}.pill-container{-webkit-padding-start:var(--pill-container-padding-start);padding-inline-start:var(--pill-container-padding-start);-webkit-padding-end:var(--pill-container-padding-end);padding-inline-end:var(--pill-container-padding-end);padding-top:var(--pill-container-padding-top);padding-bottom:var(--pill-container-padding-bottom);display:flex;justify-content:center;align-items:center;box-sizing:border-box;height:var(--pill-container-height);background-color:var(--pill-container-background-color);border:1px solid;border-color:var(--pill-container-border-color);border-radius:var(--pill-container-border-radius);color:var(--pill-text-color);font-size:var(--pill-text-size);line-height:var(--pill-text-line-height)}.pill-container span{display:inline-block}";
15005
+ const cpslPillCss = ":host{--pill-text-color:var(--cpsl-pill-text);--pill-text-size:clamp(10px, 0.625rem, 15px);--pill-text-line-height:100%;--pill-container-height:18px;--pill-container-background-color:var(--cpsl-color-pill-container-background);--pill-container-border-color:var(--cpsl-color-pill-container-border);--pill-container-padding-start:8px;--pill-container-padding-end:8px;--pill-container-border-radius:var(--cpsl-border-radius-pill);font-family:var(--cpsl-font-family, inherit);display:inline-block}.pill-container{-webkit-padding-start:var(--pill-container-padding-start);padding-inline-start:var(--pill-container-padding-start);-webkit-padding-end:var(--pill-container-padding-end);padding-inline-end:var(--pill-container-padding-end);padding-top:var(--pill-container-padding-top);padding-bottom:var(--pill-container-padding-bottom);display:flex;justify-content:center;align-items:center;box-sizing:border-box;height:var(--pill-container-height);background:var(--pill-container-background-color);border:1px solid;border-color:var(--pill-container-border-color);border-radius:var(--pill-container-border-radius);color:var(--pill-text-color);font-size:var(--pill-text-size);line-height:var(--pill-text-line-height)}.pill-container span{display:inline-block}";
14808
15006
  const CpslPillStyle0 = cpslPillCss;
14809
15007
 
14810
15008
  const CpslPill = class {
@@ -14813,12 +15011,242 @@ const CpslPill = class {
14813
15011
  this.text = undefined;
14814
15012
  }
14815
15013
  render() {
14816
- return (index.h(index.Host, { key: 'cfb75db6154db11d15a26f253686793fd21beccc' }, index.h("div", { key: '00381588b8d9e34201b439a7fd4233069a62f2f5', class: "pill-container" }, index.h("span", { key: '4fa5134cc5f873373ca8a2102d4a88ef6455ff7d' }, this.text))));
15014
+ return (index.h(index.Host, { key: 'c57c4206cb82aef700747dee7712ed15ff5907b9' }, index.h("div", { key: 'bc60013838c2d7a7632269b711a506aa83e5b98c', class: "pill-container" }, index.h("span", { key: '6eb81137bfbe02e9fa68a5ef1399b7d73b6bc89b' }, this.text))));
14817
15015
  }
14818
15016
  };
14819
15017
  CpslPill.style = CpslPillStyle0;
14820
15018
 
14821
- const cpslProgressIndicatorCss = ":host{--step-height:3px;--step-active-color:var(--cpsl-color-progressIndicator-active);--step-next-color:var(--cpsl-color-progressIndicator-next);--step-previous-color:var(--cpsl-color-progressIndicator-previous);display:flex;align-items:center;justify-content:center;gap:4px}.step{background-color:var(--step-next-color);border-radius:var(--step-border-radius, calc(var(--step-height) * 2));height:var(--step-height);flex:1;transition:all 0.5s}.previous{background-color:var(--step-previous-color)}.active{background-color:var(--step-active-color);flex:2}";
15019
+ const cpslPopoverCss = ":host{position:fixed;display:block;z-index:-1;overflow:auto}:host(.open){z-index:10006}.container{visibility:hidden}.open{visibility:visible;z-index:10006}:host(.transform-h-left){transform:translateX(0)}:host(.transform-h-center){transform:translateX(-50%)}:host(.transform-h-right){transform:translateX(-100%)}:host(.transform-v-top){transform:translateY(0)}:host(.transform-v-center){transform:translateY(-50%)}:host(.transform-v-bottom){transform:translateY(-100%)}";
15020
+ const CpslPopoverStyle0 = cpslPopoverCss;
15021
+
15022
+ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
15023
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
15024
+ return new (P || (P = Promise))(function (resolve, reject) {
15025
+ function fulfilled(value) { try {
15026
+ step(generator.next(value));
15027
+ }
15028
+ catch (e) {
15029
+ reject(e);
15030
+ } }
15031
+ function rejected(value) { try {
15032
+ step(generator["throw"](value));
15033
+ }
15034
+ catch (e) {
15035
+ reject(e);
15036
+ } }
15037
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
15038
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
15039
+ });
15040
+ };
15041
+ const CpslPopover = class {
15042
+ constructor(hostRef) {
15043
+ index.registerInstance(this, hostRef);
15044
+ this.cpslOpen = index.createEvent(this, "cpslOpen", 7);
15045
+ this.cpslClose = index.createEvent(this, "cpslClose", 7);
15046
+ this.triggerClicked = false;
15047
+ this.configureTriggerInteraction = () => {
15048
+ const { trigger, triggerAction, destroyTriggerInteraction } = this;
15049
+ if (Boolean(destroyTriggerInteraction)) {
15050
+ destroyTriggerInteraction();
15051
+ }
15052
+ if (trigger === undefined) {
15053
+ return;
15054
+ }
15055
+ this.triggerEl = document.getElementById(trigger);
15056
+ if (!Boolean(this.triggerEl)) {
15057
+ console.error(`A trigger element with the ID "${trigger}" was not found in the DOM.`, this.el);
15058
+ return;
15059
+ }
15060
+ let triggerCallbacks = [];
15061
+ switch (triggerAction) {
15062
+ case 'hover':
15063
+ triggerCallbacks = [
15064
+ {
15065
+ eventName: 'mouseenter',
15066
+ callback: () => __awaiter(this, void 0, void 0, function* () {
15067
+ this.present();
15068
+ }),
15069
+ },
15070
+ {
15071
+ eventName: 'mouseleave',
15072
+ callback: () => {
15073
+ if (!this.containerEl.matches(':hover')) {
15074
+ this.close();
15075
+ }
15076
+ else {
15077
+ this.containerEl.addEventListener('mouseleave', () => {
15078
+ this.close();
15079
+ });
15080
+ }
15081
+ },
15082
+ },
15083
+ {
15084
+ eventName: 'click',
15085
+ callback: (ev) => ev.stopPropagation(),
15086
+ },
15087
+ ];
15088
+ break;
15089
+ case 'click':
15090
+ default:
15091
+ triggerCallbacks = [
15092
+ {
15093
+ eventName: 'mousedown',
15094
+ callback: e => {
15095
+ if (this.preventBlur) {
15096
+ e.preventDefault();
15097
+ }
15098
+ this.present();
15099
+ },
15100
+ },
15101
+ ];
15102
+ break;
15103
+ }
15104
+ triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));
15105
+ this.destroyTriggerInteraction = () => {
15106
+ triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));
15107
+ };
15108
+ };
15109
+ this.setPosition = () => {
15110
+ var _a;
15111
+ const anchorEl = (_a = this.anchorEl) !== null && _a !== void 0 ? _a : this.triggerEl;
15112
+ if (Boolean(anchorEl)) {
15113
+ const windowWidth = window.innerWidth;
15114
+ const windowHeight = window.innerHeight;
15115
+ const elWidth = this.el.clientWidth;
15116
+ const elHeight = this.el.clientHeight;
15117
+ const { top, left, height, width } = anchorEl.getBoundingClientRect();
15118
+ switch (this.anchorOriginHorizontal) {
15119
+ case 'left': {
15120
+ this.positionX = left;
15121
+ break;
15122
+ }
15123
+ case 'center': {
15124
+ this.positionX = left + width / 2;
15125
+ break;
15126
+ }
15127
+ case 'right': {
15128
+ this.positionX = left + width;
15129
+ break;
15130
+ }
15131
+ }
15132
+ switch (this.anchorOriginVertical) {
15133
+ case 'top': {
15134
+ this.positionY = top;
15135
+ break;
15136
+ }
15137
+ case 'center': {
15138
+ this.positionY = top + height / 2;
15139
+ break;
15140
+ }
15141
+ case 'bottom': {
15142
+ this.positionY = top + height;
15143
+ break;
15144
+ }
15145
+ }
15146
+ if (this.positionY < this.windowPadding) {
15147
+ this.positionY = this.windowPadding;
15148
+ }
15149
+ if (this.positionY + elHeight > windowHeight - 16) {
15150
+ this.positionY = windowHeight - this.windowPadding - elHeight;
15151
+ }
15152
+ if (this.positionX < this.windowPadding) {
15153
+ this.positionX = this.windowPadding;
15154
+ }
15155
+ if (this.positionX + elWidth > windowWidth - 16) {
15156
+ this.positionX = windowWidth - this.windowPadding - elWidth;
15157
+ }
15158
+ }
15159
+ };
15160
+ this.handleClickOutside = (event) => {
15161
+ if (!this.triggerClicked && this.triggerEl.contains(event.target)) {
15162
+ this.triggerClicked = true;
15163
+ return;
15164
+ }
15165
+ if (this.open && !this.el.contains(event.target)) {
15166
+ event.preventDefault();
15167
+ this.close();
15168
+ }
15169
+ };
15170
+ this.present = () => {
15171
+ if (!this.open && !this.disabled) {
15172
+ this.open = true;
15173
+ this.cpslOpen.emit();
15174
+ this.setPosition();
15175
+ }
15176
+ };
15177
+ this.close = () => {
15178
+ this.open = false;
15179
+ this.triggerClicked = false;
15180
+ this.cpslClose.emit();
15181
+ };
15182
+ this.open = false;
15183
+ this.positionX = undefined;
15184
+ this.positionY = undefined;
15185
+ this.anchorEl = undefined;
15186
+ this.anchorOriginHorizontal = 'left';
15187
+ this.anchorOriginVertical = 'bottom';
15188
+ this.autoWidth = true;
15189
+ this.disabled = undefined;
15190
+ this.preventBlur = undefined;
15191
+ this.transformOriginHorizontal = 'left';
15192
+ this.transformOriginVertical = 'top';
15193
+ this.triggerAction = 'click';
15194
+ this.trigger = undefined;
15195
+ this.windowPadding = 16;
15196
+ }
15197
+ closePopover() {
15198
+ return __awaiter(this, void 0, void 0, function* () {
15199
+ this.close();
15200
+ });
15201
+ }
15202
+ onTriggerChange() {
15203
+ this.configureTriggerInteraction();
15204
+ }
15205
+ onAnchorChange() {
15206
+ this.setPosition();
15207
+ }
15208
+ onOpenChange() {
15209
+ if (this.open) {
15210
+ window.addEventListener('click', this.handleClickOutside);
15211
+ window.addEventListener('scroll', () => this.setPosition(), true);
15212
+ }
15213
+ else {
15214
+ window.removeEventListener('click', this.handleClickOutside);
15215
+ window.addEventListener('scroll', () => this.setPosition());
15216
+ }
15217
+ }
15218
+ componentDidLoad() {
15219
+ this.configureTriggerInteraction();
15220
+ }
15221
+ get containerEl() {
15222
+ var _a, _b;
15223
+ return (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('container');
15224
+ }
15225
+ render() {
15226
+ var _a;
15227
+ return (index.h(index.Host, { key: '0932bff390ad54961067dcae19e121dc2ed701a0', class: {
15228
+ 'open': this.open,
15229
+ 'transform-h-left': this.transformOriginHorizontal === 'left',
15230
+ 'transform-h-center': this.transformOriginHorizontal === 'center',
15231
+ 'transform-h-right': this.transformOriginHorizontal === 'right',
15232
+ 'transform-v-top': this.transformOriginVertical === 'top',
15233
+ 'transform-v-center': this.transformOriginVertical === 'center',
15234
+ 'transform-v-bottom': this.transformOriginVertical === 'bottom',
15235
+ }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, index.h("div", { key: 'a320096955a8ba71b14f8620fbe69eed66b4dc5d', id: "container", class: { container: true, open: this.open } }, index.h("slot", { key: '745bbee183c48bdbe079d7219690c556e9a9b442' }))));
15236
+ }
15237
+ get el() { return index.getElement(this); }
15238
+ static get watchers() { return {
15239
+ "trigger": ["onTriggerChange"],
15240
+ "triggerAction": ["onTriggerChange"],
15241
+ "preventBlur": ["onTriggerChange"],
15242
+ "anchorOriginHorizontal": ["onAnchorChange"],
15243
+ "anchorOriginVertical": ["onAnchorChange"],
15244
+ "open": ["onOpenChange"]
15245
+ }; }
15246
+ };
15247
+ CpslPopover.style = CpslPopoverStyle0;
15248
+
15249
+ const cpslProgressIndicatorCss = ":host{--step-height:3px;--step-active-color:var(--cpsl-color-progressIndicator-active);--step-next-color:var(--cpsl-color-progressIndicator-next);--step-previous-color:var(--cpsl-color-progressIndicator-previous);display:flex;align-items:center;justify-content:center;gap:4px}.step{background:var(--step-next-color);border-radius:var(--step-border-radius, calc(var(--step-height) * 2));height:var(--step-height);flex:1;transition:all 0.5s}.previous{background:var(--step-previous-color)}.active{background:var(--step-active-color);flex:2}";
14822
15250
  const CpslProgressIndicatorStyle0 = cpslProgressIndicatorCss;
14823
15251
 
14824
15252
  const CpslProgressIndicator = class {
@@ -14852,7 +15280,7 @@ var qrCodeStyling = {exports: {}};
14852
15280
 
14853
15281
  const QRCodeStyling = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(qrCodeStyling.exports);
14854
15282
 
14855
- const cpslQrCodeCss = ":host{--qr-color:var(--cpsl-color-qr-fill);--qr-background-color:var(--cpsl-color-qr-background);--qr-border-color:var(--cpsl-color-qr-border);--qr-border-radius:var(--cpsl-border-radius-qr-code);--qr-border-width:1px;--qr-box-shadow:0px 1px 2px var(--cpsl-color-alpha-black-10);display:inline-block}.qr-container{-webkit-padding-start:var(--qr-padding-start);padding-inline-start:var(--qr-padding-start);-webkit-padding-end:var(--qr-padding-end);padding-inline-end:var(--qr-padding-end);padding-top:var(--qr-padding-top);padding-bottom:var(--qr-padding-bottom);display:flex;color:var(--qr-color);border-style:solid;border-width:var(--qr-border-width);border-color:var(--qr-border-color);border-radius:var(--qr-border-radius);background-color:var(--qr-background-color);box-shadow:var(--qr-box-shadow)}";
15283
+ const cpslQrCodeCss = ":host{--qr-color:var(--cpsl-color-qr-fill);--qr-background-color:var(--cpsl-color-qr-background);--qr-border-color:var(--cpsl-color-qr-border);--qr-border-radius:var(--cpsl-border-radius-qr-code);--qr-border-width:1px;--qr-box-shadow:0px 1px 2px var(--cpsl-color-alpha-black-10);display:inline-block}.qr-container{-webkit-padding-start:var(--qr-padding-start);padding-inline-start:var(--qr-padding-start);-webkit-padding-end:var(--qr-padding-end);padding-inline-end:var(--qr-padding-end);padding-top:var(--qr-padding-top);padding-bottom:var(--qr-padding-bottom);display:flex;color:var(--qr-color);border-style:solid;border-width:var(--qr-border-width);border-color:var(--qr-border-color);border-radius:var(--qr-border-radius);background:var(--qr-background-color);box-shadow:var(--qr-box-shadow)}";
14856
15284
  const CpslQrCodeStyle0 = cpslQrCodeCss;
14857
15285
 
14858
15286
  const CpslQrCode = class {
@@ -14888,13 +15316,13 @@ const CpslQrCode = class {
14888
15316
  qrCode.append(container);
14889
15317
  }
14890
15318
  render() {
14891
- return (index.h(index.Host, { key: '249236c83c51fa7b3bf66c74a3e122f945288313' }, index.h("div", { key: 'cd899dac84d029d89648572584ffddae0c98ab37', id: "qr-container", class: "qr-container" })));
15319
+ return (index.h(index.Host, { key: '7f549a58192515bbb5a8b42948f042e7b4eaf271' }, index.h("div", { key: '4464496f4e8236abcdbde9e6e0f20f2e04b5b392', id: "qr-container", class: "qr-container" })));
14892
15320
  }
14893
15321
  get el() { return index.getElement(this); }
14894
15322
  };
14895
15323
  CpslQrCode.style = CpslQrCodeStyle0;
14896
15324
 
14897
- const cpslRadioCss = ":host{--container-height:20px;--container-width:20px;--container-border-radius:var(--cpsl-border-radius-radio);--container-border-width-default:2px;--container-border-width-checked:5px;--container-background-color-default:var(--cpsl-color-radio-surface-default);--container-border-color-default:var(--cpsl-color-radio-border-default);--container-background-color-checked:var(--cpsl-color-radio-surface-checked);--container-border-color-checked:var(--cpsl-color-radio-border-checked);display:block;position:relative;height:var(--container-height);width:var(--container-width);cursor:pointer}input{position:absolute;width:100%;height:100%;margin:0px;opacity:0}span.container{display:inline-block;position:relative;box-sizing:border-box;width:100%;height:100%;border-radius:var(--container-border-radius);border:var(--container-border-width-default) solid;background-color:var(--container-background-color-default);border-color:var(--container-border-color-default);transition:all 0.15s ease-in-out}span.container.checked{background-color:var(--container-background-color-checked);border-color:var(--container-border-color-checked);border-width:var(--container-border-width-checked)}";
15325
+ const cpslRadioCss = ":host{--container-height:20px;--container-width:20px;--container-border-radius:var(--cpsl-border-radius-radio);--container-border-width-default:2px;--container-border-width-checked:5px;--container-background-color-default:var(--cpsl-color-radio-surface-default);--container-border-color-default:var(--cpsl-color-radio-border-default);--container-background-color-checked:var(--cpsl-color-radio-surface-checked);--container-border-color-checked:var(--cpsl-color-radio-border-checked);display:block;position:relative;height:var(--container-height);width:var(--container-width);cursor:pointer}input{position:absolute;width:100%;height:100%;margin:0px;opacity:0}span.container{display:inline-block;position:relative;box-sizing:border-box;width:100%;height:100%;border-radius:var(--container-border-radius);border:var(--container-border-width-default) solid;background:var(--container-background-color-default);border-color:var(--container-border-color-default);transition:all 0.15s ease-in-out}span.container.checked{background:var(--container-background-color-checked);border-color:var(--container-border-color-checked);border-width:var(--container-border-width-checked)}";
14898
15326
  const CpslRadioStyle0 = cpslRadioCss;
14899
15327
 
14900
15328
  const CpslRadio = class {
@@ -14909,12 +15337,132 @@ const CpslRadio = class {
14909
15337
  this.checked = undefined;
14910
15338
  }
14911
15339
  render() {
14912
- return (index.h(index.Host, { key: '9c027812c817ec008e28b66fb74ca35e407f2572' }, index.h("input", { key: 'da445cfc2c18da5852cd21d54daf14897d3bc13a', type: "radio", checked: this.checked }), index.h("span", { key: '2f432d7c3a6f33ea7581a8c62dd84078de1904d1', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
15340
+ return (index.h(index.Host, { key: '15b4fdf30799927941280b3f11f4611e4e4d27b2' }, index.h("input", { key: 'd5bf9704061977610d98b99a6188933f720ffce3', type: "radio", checked: this.checked }), index.h("span", { key: 'd56242703448531efc847167b55013b420f17715', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
14913
15341
  }
14914
15342
  };
14915
15343
  CpslRadio.style = CpslRadioStyle0;
14916
15344
 
14917
- const cpslSlideButtonCss = ":host{--slider-container-font-size:14px;--slider-container-height:44px;--slider-container-border-width:1px;--slider-container-box-shadow:0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;--slider-container-start-background-color:var(--cpsl-color-slideButton-slider-container-start-background);--slider-container-end-background-color:var(--cpsl-color-slideButton-slider-container-end-background);--slider-container-start-border-color:var(--cpsl-color-slideButton-slider-container-start-border);--slider-container-end-border-color:var(--cpsl-color-slideButton-slider-container-end-border);--slider-border-width:1px;--slider-box-shadow:3px 0px 4px 0px var(--cpsl-color-alpha-black-16);--slider-border-color:var(--cpsl-color-slideButton-slider-border);--slider-background-color:var(--cpsl-color-slideButton-slider-background);--slider-color:var(--cpsl-color-slideButton-slider-text);--start-text-color:var(--cpsl-color-slideButton-start-text);--end-text-color:var(--cpsl-color-slideButton-end-text);font-family:var(--cpsl-font-family, inherit);display:block}.slider-container{overflow:hidden;position:relative;box-sizing:border-box;display:flex;align-items:center;font-size:var(--slider-container-font-size);font-weight:500;height:var(--slider-container-height);border-width:var(--slider-container-border-width);border-style:solid;border-radius:calc(var(--slider-container-height) / 2);box-shadow:var(--slider-container-box-shadow)}.slider-container-background{position:absolute;top:0;bottom:0;left:0;right:0}.start-slider-container-background{background-color:var(--slider-container-start-background-color);border-color:var(--slider-container-start-border-color);opacity:100%}.end-slider-container-background{background-color:var(--slider-container-end-background-color);border-color:var(--slider-container-end-border-color);opacity:0%}.start-text{user-select:none;color:var(--start-text-color);position:absolute;text-align:center;opacity:100%;width:calc(100% - var(--slider-container-height) - 8px - 16px);left:calc(var(--slider-container-height) - 4px + 8px)}.start-text.disabled{left:0;width:100%}.end-text{user-select:none;color:var(--end-text-color);position:absolute;text-align:center;opacity:0%;width:calc(100% - var(--slider-container-height) - 8px);left:16px}.icon{position:absolute}.start-icon{opacity:100%}.end-icon{opacity:0%}.slider{left:1px;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:absolute;z-index:10;height:calc(var(--slider-container-height) - 4px);width:calc(var(--slider-container-height) - 4px);color:var(--slider-color);background-color:var(--slider-background-color);border-width:var(--slider-border-width);border-style:solid;border-color:var(--slider-border-color);border-radius:100%;box-shadow:var(--slider-box-shadow)}.slider cpsl-icon{--icon-color:var(--slider-color)}.slider.disabled{visibility:hidden}";
15345
+ const cpslSelectCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-select-border-placeholder);--container-border-color:var(--cpsl-color-select-border-active);--container-border-error-color:var(--cpsl-color-select-border-error);--container-background-color:var(--cpsl-color-select-surface-default);--container-background-color-disabled:var(--cpsl-color-select-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-select);--container-padding-top:0px;--container-padding-bottom:0px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--dropdown-margin-top:4px;--dropdown-border-width:1px;--dropdown-border-radius:var(--cpsl-border-radius-select);--dropdown-border-color:var(--cpsl-color-select-dropdown-border);--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}input{box-sizing:border-box;position:absolute;width:100%;height:100%;margin:0px;opacity:0;top:0;left:0;z-index:-1;cursor:pointer}input.disabled{cursor:default}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-select-border-placeholder);--select-color:var(--cpsl-color-text-secondary)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--select-background-color:var(--select-background-color-disabled);--select-color:var(--cpsl-color-text-disabled)}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-select-border-active);--container-background-color:var(--cpsl-color-select-surface-default)}.select-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);cursor:pointer;border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}.selected-container-content{flex:1}.chevron{transition:transform 0.3s ease;transform:rotate(180deg);--icon-color:var(--cpsl-color-text-disabled)}.chevron.open{transform:rotate(0deg);--icon-color:var(--cpsl-color-text-primary)}.chevron.has-value{--icon-color:var(--cpsl-color-text-primary)}.selected-text{color:var(--cpsl-color-text-primary)}.selected-text.placeholder{color:var(--cpsl-color-text-disabled)}.dropdown{margin-top:var(--dropdown-margin-top);border-style:solid;border-width:var(--dropdown-border-width);border-color:var(--dropdown-border-color);border-radius:var(--dropdown-border-radius);overflow:hidden}.dropdown ::slotted(*:last-child){--container-border-width:0px}.dropdown-inner{overflow:auto;scrollbar-width:thin}";
15346
+ const CpslSelectStyle0 = cpslSelectCss;
15347
+
15348
+ const CpslSelect = class {
15349
+ constructor(hostRef) {
15350
+ index.registerInstance(this, hostRef);
15351
+ this.cpslBlur = index.createEvent(this, "cpslBlur", 7);
15352
+ this.cpslFocus = index.createEvent(this, "cpslFocus", 7);
15353
+ this.cpslSelectValueChange = index.createEvent(this, "cpslSelectValueChange", 7);
15354
+ this.inputId = `cpsl-select-${inputIds++}`;
15355
+ this.onBlur = (ev) => {
15356
+ this.hasFocus = false;
15357
+ this.popoverEl.closePopover();
15358
+ this.cpslBlur.emit(ev);
15359
+ };
15360
+ this.onFocus = (ev) => {
15361
+ this.hasFocus = true;
15362
+ this.cpslFocus.emit(ev);
15363
+ };
15364
+ this.handleEnterPress = (ev) => {
15365
+ if (ev.key === 'Enter') {
15366
+ ev.preventDefault();
15367
+ this.el.dispatchEvent(new MouseEvent('mousedown'));
15368
+ }
15369
+ };
15370
+ this.selectItem = () => {
15371
+ const items = Array.from(this.el.querySelectorAll('cpsl-select-item'));
15372
+ items.forEach(item => {
15373
+ if (item.value === this.selectedValue) {
15374
+ item.setAttribute('selected', 'true');
15375
+ this.hasSelectedItem = true;
15376
+ }
15377
+ else {
15378
+ item.setAttribute('selected', 'false');
15379
+ }
15380
+ });
15381
+ if (!Boolean(this.selectedValue)) {
15382
+ this.hasSelectedItem = false;
15383
+ }
15384
+ };
15385
+ this.handleClickOutside = (event) => {
15386
+ if (this.hasFocus && !this.el.contains(event.target)) {
15387
+ this.hasFocus = false;
15388
+ window.removeEventListener('click', this.handleClickOutside);
15389
+ }
15390
+ };
15391
+ this.handleClick = () => {
15392
+ if (!this.disabled) {
15393
+ this.hasFocus = true;
15394
+ window.addEventListener('click', this.handleClickOutside);
15395
+ }
15396
+ };
15397
+ this.anchorEl = undefined;
15398
+ this.hasFocus = false;
15399
+ this.popoverOpen = false;
15400
+ this.hasSelectedItem = false;
15401
+ this.disabled = false;
15402
+ this.dropdownMaxHeight = undefined;
15403
+ this.errorText = undefined;
15404
+ this.formatValue = undefined;
15405
+ this.helperText = undefined;
15406
+ this.id = `${this.inputId}-trigger`;
15407
+ this.label = undefined;
15408
+ this.placeholder = undefined;
15409
+ this.required = false;
15410
+ this.selectedValue = undefined;
15411
+ this.showFormattedSelectedItem = undefined;
15412
+ this.showOptionalLabel = false;
15413
+ }
15414
+ onValueChange() {
15415
+ this.popoverEl.closePopover();
15416
+ }
15417
+ handleValueChange() {
15418
+ this.selectItem();
15419
+ }
15420
+ selectItemClickHandler(event) {
15421
+ this.cpslSelectValueChange.emit(event.detail);
15422
+ }
15423
+ onPopoverOpen() {
15424
+ this.popoverOpen = true;
15425
+ }
15426
+ onPopoverClose() {
15427
+ this.popoverOpen = false;
15428
+ }
15429
+ componentDidLoad() {
15430
+ this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
15431
+ this.anchorEl = this.el.shadowRoot.getElementById('select-container');
15432
+ this.selectItem();
15433
+ }
15434
+ render() {
15435
+ var _a, _b, _c, _d;
15436
+ return (index.h(index.Host, { key: '96b15a986afbf40228adfb0ddfb5934ea79a9df0', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: 'b43bb6ef5670aff411a82391c5695f8840412f85', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && index.h("slot", { name: "selected-item" }), index.h("div", { key: 'fa5654cfbeb30c963fd918599c4fc304e9d894c5', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (index.h("cpsl-text", { class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), index.h("cpsl-icon", { key: '063de47032a31e2c7d114467cc4eaedfcf8d59a8', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), index.h("input", { key: '760922353c0971b766d80ac45430ebc806833a9a', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", null, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), index.h("cpsl-popover", { key: 'fcbf94fcc199d5415dc62faa3b7a0280f16418fa', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, index.h("div", { key: '95aa9ce659bf279c502b0f8b6e068765a1f29d5d', class: "dropdown" }, index.h("div", { key: '4b83c05b33d370d9ce8fa7450b11b24c75ddb025', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, index.h("slot", { key: 'a94a087322953b56c4b9e488b5e23ab6f020d37f', name: "items" }))))));
15437
+ }
15438
+ get el() { return index.getElement(this); }
15439
+ static get watchers() { return {
15440
+ "selectedValue": ["onValueChange", "handleValueChange"]
15441
+ }; }
15442
+ };
15443
+ let inputIds = 0;
15444
+ CpslSelect.style = CpslSelectStyle0;
15445
+
15446
+ const cpslSelectItemCss = ":host{--outer-container-padding-start:8px;--outer-container-padding-end:8px;--outer-container-padding-top:8px;--outer-container-padding-bottom:8px;--container-background-color:var(--cpsl-color-select-surface-default);--container-hover-background-color:var(--cpsl-color-select-surface-hover);--container-border-radius:calc(var(--cpsl-border-radius-select) - 4px);--container-padding-start:8px;--container-padding-end:8px;--container-padding-top:8px;--container-padding-bottom:8px;display:block;font-family:var(--cpsl-font-family, inherit);cursor:pointer}.inner-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);background-color:var(--container-background-color);border-radius:var(--container-border-radius);height:100%;display:flex;align-items:center}.outer-container{-webkit-padding-start:var(--outer-container-padding-start);padding-inline-start:var(--outer-container-padding-start);-webkit-padding-end:var(--outer-container-padding-end);padding-inline-end:var(--outer-container-padding-end);padding-top:var(--outer-container-padding-top);padding-bottom:var(--outer-container-padding-bottom);background-color:var(--container-background-color)}.outer-container:hover>.inner-container{background-color:var(--container-hover-background-color)}.selected{background-color:var(--container-hover-background-color)}:host(.in-select-box){--container-background-color:transparent;--container-hover-background-color:transparent;--container-border-width:0px;--container-padding-start:0px;--container-padding-end:0px;--container-padding-top:0px;--container-padding-bottom:0px;flex:1;height:100%}";
15447
+ const CpslSelectItemStyle0 = cpslSelectItemCss;
15448
+
15449
+ const CpslSelectItem = class {
15450
+ constructor(hostRef) {
15451
+ index.registerInstance(this, hostRef);
15452
+ this.cpslSelectItemClick = index.createEvent(this, "cpslSelectItemClick", 7);
15453
+ this.handleItemClick = () => {
15454
+ this.cpslSelectItemClick.emit(this.value);
15455
+ };
15456
+ this.selected = undefined;
15457
+ this.value = undefined;
15458
+ }
15459
+ render() {
15460
+ return (index.h(index.Host, { key: '5841f3aa3d70c17dcdfc8b1e0517ac822667ec87' }, index.h("div", { key: 'cbac6744fdce3f011765f0588f51fe89112239ad', class: "outer-container", onClick: this.handleItemClick }, index.h("div", { key: '30aee519e6dfd394a01d7ff9c503752cff1c7d64', class: { 'inner-container': true, 'selected': this.selected } }, index.h("slot", { key: '9458a0da2d73be3de5703c0dde0b6208cdd8a196' })))));
15461
+ }
15462
+ };
15463
+ CpslSelectItem.style = CpslSelectItemStyle0;
15464
+
15465
+ const cpslSlideButtonCss = ":host{--slider-container-font-size:14px;--slider-container-height:44px;--slider-container-border-width:1px;--slider-container-box-shadow:0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;--slider-container-start-background-color:var(--cpsl-color-slideButton-slider-container-start-background);--slider-container-end-background-color:var(--cpsl-color-slideButton-slider-container-end-background);--slider-container-start-border-color:var(--cpsl-color-slideButton-slider-container-start-border);--slider-container-end-border-color:var(--cpsl-color-slideButton-slider-container-end-border);--slider-border-width:1px;--slider-box-shadow:3px 0px 4px 0px var(--cpsl-color-alpha-black-16);--slider-border-color:var(--cpsl-color-slideButton-slider-border);--slider-background-color:var(--cpsl-color-slideButton-slider-background);--slider-color:var(--cpsl-color-slideButton-slider-text);--start-text-color:var(--cpsl-color-slideButton-start-text);--end-text-color:var(--cpsl-color-slideButton-end-text);font-family:var(--cpsl-font-family, inherit);display:block}.slider-container{overflow:hidden;position:relative;box-sizing:border-box;display:flex;align-items:center;font-size:var(--slider-container-font-size);font-weight:500;height:var(--slider-container-height);border-width:var(--slider-container-border-width);border-style:solid;border-radius:calc(var(--slider-container-height) / 2);box-shadow:var(--slider-container-box-shadow)}.slider-container-background{position:absolute;top:0;bottom:0;left:0;right:0}.start-slider-container-background{background:var(--slider-container-start-background-color);border-color:var(--slider-container-start-border-color);opacity:100%}.end-slider-container-background{background:var(--slider-container-end-background-color);border-color:var(--slider-container-end-border-color);opacity:0%}.start-text{user-select:none;color:var(--start-text-color);position:absolute;text-align:center;opacity:100%;width:calc(100% - var(--slider-container-height) - 8px - 16px);left:calc(var(--slider-container-height) - 4px + 8px)}.start-text.disabled{left:0;width:100%}.end-text{user-select:none;color:var(--end-text-color);position:absolute;text-align:center;opacity:0%;width:calc(100% - var(--slider-container-height) - 8px);left:16px}.icon{position:absolute}.start-icon{opacity:100%}.end-icon{opacity:0%}.slider{left:1px;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:absolute;z-index:10;height:calc(var(--slider-container-height) - 4px);width:calc(var(--slider-container-height) - 4px);color:var(--slider-color);background:var(--slider-background-color);border-width:var(--slider-border-width);border-style:solid;border-color:var(--slider-border-color);border-radius:100%;box-shadow:var(--slider-box-shadow)}.slider cpsl-icon{--icon-color:var(--slider-color)}.slider.disabled{visibility:hidden}";
14918
15466
  const CpslSlideButtonStyle0 = cpslSlideButtonCss;
14919
15467
 
14920
15468
  const CpslSlideButton = class {
@@ -15034,7 +15582,7 @@ const CpslSlideButton = class {
15034
15582
  return this.el.shadowRoot.getElementById('end-icon');
15035
15583
  }
15036
15584
  render() {
15037
- return (index.h(index.Host, { key: 'ce820db689b1265c282d3f1571f4e7f5f401f855' }, index.h("div", { key: '6b1feb1979df007eff0652d0ab5b8e6dadb1d413', id: "slider-container", class: "slider-container" }, index.h("div", { key: '89bc7d66ac4ea9b5903832882ddba6aa140b6a1b', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '95961311d2e58de9771619f09382085af3fc935f', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '077f99524f8ebada535665e50b84d6faa523be85', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: 'e4de60ec93911da7db0d5b8744f842be4f2fe58a', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: '64faf5178d56e37660a9818258aa1bd757bb9478', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: '91f4b16cbdc4f230b10d3e2f331906936fb43e7f', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: '8d6555e7bedb77c97c6abd4eb537b1190c7b7f39', id: "end-text", class: "end-text" }, this.endText))));
15585
+ return (index.h(index.Host, { key: '0538d1828e3eed534326536946e16b205e34fd96' }, index.h("div", { key: 'dfca014b41bcdb615a0fd8ce6242cf361a0399d7', id: "slider-container", class: "slider-container" }, index.h("div", { key: '8cad818d06a7fcc8b7e5a22b7714a6faf777db16', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '0692e2b89ba22df7dca29d3b927810492591dd51', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '865dc1b876daa97033541efeb32779ac07078179', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: '2e5e0049eee016583715ae1a33dff74e36c6a515', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: '6e484c8497bf2e7777ebf93d3af141477d8f82e8', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: 'b7b8064fa212af5802ee21c170133ef0e32ff14c', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: 'b42e78a763a983bb17e7d02ed51253982be4546f', id: "end-text", class: "end-text" }, this.endText))));
15038
15586
  }
15039
15587
  get el() { return index.getElement(this); }
15040
15588
  };
@@ -15050,18 +15598,18 @@ const CpslSpinner = class {
15050
15598
  this.speed = 1;
15051
15599
  }
15052
15600
  render() {
15053
- return (index.h(index.Host, { key: 'f4e9344be21951951c710806a75f532586f0ad84', style: {
15601
+ return (index.h(index.Host, { key: '146fc6a1a8101f6738263e432b49ed6c927d8eb3', style: {
15054
15602
  'height': `${this.size}px`,
15055
15603
  'width': `${this.size}px`,
15056
15604
  'animation': `spin ${this.speed}s linear infinite`,
15057
15605
  '-webkit-animation': `spin ${this.speed}s linear infinite`,
15058
15606
  '-moz-animation': `spin ${this.speed}s linear infinite`,
15059
- } }, index.h("svg", { key: '41e78e14a99896ee395fde9c23c08cafd7d737ff', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, index.h("path", { key: 'b061382c44c35633987276b986871bb350f9cfe3', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), index.h("circle", { key: '0f1b7ca48c926abe3244fe7e7e70dffc0ef4ce30', cx: "45", cy: "27", r: "5" }))));
15607
+ } }, index.h("svg", { key: '2f7fadd536c94b7919180bcb38a64e54cf8ff073', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, index.h("path", { key: '427351f7b255cbf337f8b1d45272339b3fef873e', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), index.h("circle", { key: '43787fa0376df4defda8a47f5c5c8d01258dde10', cx: "45", cy: "27", r: "5" }))));
15060
15608
  }
15061
15609
  };
15062
15610
  CpslSpinner.style = CpslSpinnerStyle0;
15063
15611
 
15064
- const cpslSwitchCss = ":host{--container-height:24px;--container-width:44px;--container-padding:2px;--container-border-radius:var(--cpsl-border-radius-switch);--container-background-color-default:var(--cpsl-color-switch-surface-default);--container-background-color-checked:var(--cpsl-color-switch-surface-checked);--thumb-size:calc(var(--container-height) - var(--container-padding) * 2);--thumb-border-radius:var(--cpsl-border-radius-switch);--thumb-background-color-default:var(--cpsl-color-switch-thumb-default);--thumb-background-color-checked:var(--cpsl-color-switch-thumb-checked);display:block;position:relative;height:var(--container-height);width:var(--container-width);cursor:pointer}input{position:absolute;width:100%;height:100%;margin:0px;opacity:0}span.container{display:inline-block;position:relative;box-sizing:border-box;width:100%;height:100%;padding:var(--container-padding);border-radius:var(--container-border-radius);background-color:var(--container-background-color-default);box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.08) inset;transition:all 0.15s ease-in-out}span.container.checked{background-color:var(--container-background-color-checked);box-shadow:none}span.thumb{display:inline-block;position:relative;background-color:var(--thumb-background-color-default);box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.1);height:var(--thumb-size);width:var(--thumb-size);border-radius:var(--thumb-border-radius);transform:translateX(0);left:0;transition:all 0.15s ease-in-out}span.thumb.checked{background-color:var(--thumb-background-color-checked);left:100%;transform:translateX(-100%)}";
15612
+ const cpslSwitchCss = ":host{--container-height:24px;--container-width:44px;--container-padding:2px;--container-border-radius:var(--cpsl-border-radius-switch);--container-background-color-default:var(--cpsl-color-switch-surface-default);--container-background-color-checked:var(--cpsl-color-switch-surface-checked);--thumb-size:calc(var(--container-height) - var(--container-padding) * 2);--thumb-border-radius:var(--cpsl-border-radius-switch);--thumb-background-color-default:var(--cpsl-color-switch-thumb-default);--thumb-background-color-checked:var(--cpsl-color-switch-thumb-checked);display:block;position:relative;height:var(--container-height);width:var(--container-width);cursor:pointer}input{position:absolute;width:100%;height:100%;margin:0px;opacity:0}span.container{display:inline-block;position:relative;box-sizing:border-box;width:100%;height:100%;padding:var(--container-padding);border-radius:var(--container-border-radius);background:var(--container-background-color-default);box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.08) inset;transition:all 0.15s ease-in-out}span.container.checked{background:var(--container-background-color-checked);box-shadow:none}span.thumb{display:inline-block;position:relative;background:var(--thumb-background-color-default);box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.1);height:var(--thumb-size);width:var(--thumb-size);border-radius:var(--thumb-border-radius);transform:translateX(0);left:0;transition:all 0.15s ease-in-out}span.thumb.checked{background:var(--thumb-background-color-checked);left:100%;transform:translateX(-100%)}";
15065
15613
  const CpslSwitchStyle0 = cpslSwitchCss;
15066
15614
 
15067
15615
  const CpslSwitch = class {
@@ -15074,7 +15622,7 @@ const CpslSwitch = class {
15074
15622
  this.checked = undefined;
15075
15623
  }
15076
15624
  render() {
15077
- return (index.h(index.Host, { key: '74a3c5fb6e54a87438ab0fe7c3b9f05ebefb783d' }, index.h("input", { key: '0415f006e830227c030d5d42199bcb3ce375051a', type: "checkbox", checked: this.checked }), index.h("span", { key: '61db3b2230704cf61f57aab1a952cd9f94892026', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, index.h("span", { key: '819dd65586f45cc5dba402b1acd64b9b5f4ef04e', class: { thumb: true, checked: this.checked } }))));
15625
+ return (index.h(index.Host, { key: '5757a05c5149c8fb785bcb796d7c110f4725bbfa' }, index.h("input", { key: 'fdbbc3cdac8674bc3bbcf5563302a763d3678905', type: "checkbox", checked: this.checked }), index.h("span", { key: '471c0ae137ad553c6b7186a08722e156959ed3cc', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, index.h("span", { key: '53bbfd9b807c36bc49130ad71611d274757b5fb1', class: { thumb: true, checked: this.checked } }))));
15078
15626
  }
15079
15627
  };
15080
15628
  CpslSwitch.style = CpslSwitchStyle0;
@@ -15106,20 +15654,42 @@ const CpslTab = class {
15106
15654
  }
15107
15655
  }
15108
15656
  render() {
15109
- return (index.h(index.Host, { key: '6d506e0c6eedecab0b0e61134f6ef99da64ffdc9', onClick: this.onTabClicked }, index.h("div", { key: '486e44a1e511d79125dd44ed244c767c8176ac65', class: { 'tab-container': true } }, index.h("slot", { key: '09ec342cf25149f89e2ccb338d86f161e9ebcc12' }))));
15657
+ return (index.h(index.Host, { key: 'b899e8122b57fdf859c43d9cf9ade27af3bf5c5f', onClick: this.onTabClicked }, index.h("div", { key: 'f96ead5f65606af3fe63c708af511adfb022f386', class: { 'tab-container': true } }, index.h("slot", { key: '780d6deda346635aaced9c3dfa875b44ffece7eb' }))));
15110
15658
  }
15111
15659
  get el() { return index.getElement(this); }
15112
15660
  };
15113
15661
  CpslTab.style = CpslTabStyle0;
15114
15662
 
15115
- const cpslTableCss = ":host{--container-background-radius:var(--cpsl-border-radius-table-container);--container-border-radius:var(--cpsl-border-radius-table-container);--container-border-color:var(--cpsl-color-background-16);--container-background-color:var(--cpsl-color-background-0);--container-border-width:1px;--container-header-padding-top:24px;--container-header-padding-bottom:24px;--container-header-padding-start:24px;--container-header-padding-end:24px;--container-no-content-padding-top:24px;--container-no-content-padding-bottom:24px;--container-no-content-padding-start:24px;--container-no-content-padding-end:24px;--container-footer-padding-top:16px;--container-footer-padding-bottom:16px;--container-footer-padding-start:24px;--container-footer-padding-end:24px;--table-header-padding-top:16px;--table-header-padding-bottom:16px;--table-header-padding-start:24px;--table-header-padding-end:24px;--table-header-background-color:var(--cpsl-color-background-4);--table-header-border-color:var(--cpsl-color-background-16);--table-header-border-width:1px;--table-content-padding-top:16px;--table-content-padding-bottom:16px;--table-content-padding-start:24px;--table-content-padding-end:24px;--table-content-border-color:var(--cpsl-color-background-8);--table-content-border-width:1px;display:flex}.table-container{display:flex;flex-direction:column;flex:1;overflow:hidden;border-radius:var(--container-border-radius);border:var(--container-border-width) solid var(--container-border-color);background-color:var(--container-background-color)}.table-wrapper{overflow:auto}.table{width:100%;border-spacing:0;border-collapse:collapse}.table th{-webkit-padding-start:var(--table-header-padding-start);padding-inline-start:var(--table-header-padding-start);-webkit-padding-end:var(--table-header-padding-end);padding-inline-end:var(--table-header-padding-end);padding-top:var(--table-header-padding-top);padding-bottom:var(--table-header-padding-bottom);background-color:var(--table-header-background-color);border-bottom:var(--table-header-border-width) solid var(--table-header-border-color)}.table td{-webkit-padding-start:var(--table-content-padding-start);padding-inline-start:var(--table-content-padding-start);-webkit-padding-end:var(--table-content-padding-end);padding-inline-end:var(--table-content-padding-end);padding-top:var(--table-content-padding-top);padding-bottom:var(--table-content-padding-bottom)}.table tr{border-bottom:var(--table-content-border-width) solid var(--table-content-border-color)}.table tr:last-child{border-bottom:none}.container-header{display:none;-webkit-padding-start:var(--container-header-padding-start);padding-inline-start:var(--container-header-padding-start);-webkit-padding-end:var(--container-header-padding-end);padding-inline-end:var(--container-header-padding-end);padding-top:var(--container-header-padding-top);padding-bottom:var(--container-header-padding-bottom);border-bottom:var(--table-header-border-width) solid var(--table-header-border-color)}.container-footer{display:none;-webkit-padding-start:var(--container-footer-padding-start);padding-inline-start:var(--container-footer-padding-start);-webkit-padding-end:var(--container-footer-padding-end);padding-inline-end:var(--container-footer-padding-end);padding-top:var(--container-footer-padding-top);padding-bottom:var(--container-footer-padding-bottom);border-top:var(--table-content-border-width) solid var(--table-content-border-color)}.container-no-content{-webkit-padding-start:var(--container-no-content-padding-start);padding-inline-start:var(--container-no-content-padding-start);-webkit-padding-end:var(--container-no-content-padding-end);padding-inline-end:var(--container-no-content-padding-end);padding-top:var(--container-no-content-padding-top);padding-bottom:var(--container-no-content-padding-bottom)}.shown{display:block}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}";
15663
+ const cpslTableCss = ":host{--container-border-radius:var(--cpsl-border-radius-table-container);--container-border-color:var(--cpsl-color-background-16);--container-background-color:var(--cpsl-color-background-0);--container-border-width:1px;--container-header-padding-top:24px;--container-header-padding-bottom:24px;--container-header-padding-start:24px;--container-header-padding-end:24px;--container-header-border-width:1px;--container-header-border-color:var(--cpsl-color-background-16);--container-footer-padding-top:16px;--container-footer-padding-bottom:16px;--container-footer-padding-start:24px;--container-footer-padding-end:24px;--container-footer-border-width:1px;--container-footer-border-color:var(--cpsl-color-background-8);--table-header-padding-top:16px;--table-header-padding-bottom:16px;--table-header-padding-start:24px;--table-header-padding-end:24px;--table-header-background-color:var(--cpsl-color-background-4);--table-header-border-color:var(--cpsl-color-background-16);--table-header-border-width:1px;--table-content-padding-top:16px;--table-content-padding-bottom:16px;--table-content-padding-start:24px;--table-content-padding-end:24px;--table-content-border-color:var(--cpsl-color-background-8);--table-content-border-width:1px;display:block}:host cpsl-card{height:100%;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:var(--container-border-width);--card-border-color:var(--container-border-color);--card-border-radius:var(--container-border-radius);--card-background-color:var(--container-background-color)}:host cpsl-card::part(card-container){height:100%;display:flex;flex-direction:column}.content{flex:1;overflow:auto;position:relative}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.overlay.horizontal-scroll:not(.vertical-scroll){box-shadow:-24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset}.overlay.vertical-scroll:not(.horizontal-scroll){box-shadow:0px -24px 24px -24px rgba(0, 0, 0, 0.1) inset}.overlay.horizontal-scroll.vertical-scroll{box-shadow:-24px -24px 24px -24px rgba(0, 0, 0, 0.1) inset}.table-wrapper{overflow:auto;height:100%}.container-header{display:none;-webkit-padding-start:var(--container-header-padding-start);padding-inline-start:var(--container-header-padding-start);-webkit-padding-end:var(--container-header-padding-end);padding-inline-end:var(--container-header-padding-end);padding-top:var(--container-header-padding-top);padding-bottom:var(--container-header-padding-bottom);border-bottom:var(--container-header-border-width) solid var(--container-header-border-color)}.container-footer{display:none;-webkit-padding-start:var(--container-footer-padding-start);padding-inline-start:var(--container-footer-padding-start);-webkit-padding-end:var(--container-footer-padding-end);padding-inline-end:var(--container-footer-padding-end);padding-top:var(--container-footer-padding-top);padding-bottom:var(--container-footer-padding-bottom);border-top:var(--container-footer-border-width) solid var(--container-footer-border-color)}.shown{display:block}";
15116
15664
  const CpslTableStyle0 = cpslTableCss;
15117
15665
 
15118
15666
  const CpslTable = class {
15119
15667
  constructor(hostRef) {
15120
15668
  index.registerInstance(this, hostRef);
15121
- this.columns = undefined;
15122
- this.rows = undefined;
15669
+ this.resizeOb = new ResizeObserver(entries => {
15670
+ const rect = entries[0].contentRect;
15671
+ const containerWidth = Math.round(rect.width);
15672
+ const containerHeight = Math.round(rect.height);
15673
+ const contentWidth = this.containerSlotEl.clientWidth;
15674
+ const contentHeight = this.containerSlotEl.clientHeight;
15675
+ if (contentWidth > containerWidth) {
15676
+ this.hasHorizontalScroll = true;
15677
+ }
15678
+ else {
15679
+ this.hasHorizontalScroll = false;
15680
+ }
15681
+ if (contentHeight > containerHeight) {
15682
+ this.hasVerticalScroll = true;
15683
+ }
15684
+ else {
15685
+ this.hasVerticalScroll = false;
15686
+ }
15687
+ });
15688
+ this.hasHorizontalScroll = false;
15689
+ this.hasVerticalScroll = false;
15690
+ }
15691
+ componentDidLoad() {
15692
+ this.resizeOb.observe(this.contentContainerEl);
15123
15693
  }
15124
15694
  get containerHeaderEl() {
15125
15695
  return this.el.querySelector('[slot="header"]');
@@ -15127,26 +15697,26 @@ const CpslTable = class {
15127
15697
  get containerFooterEl() {
15128
15698
  return this.el.querySelector('[slot="footer"]');
15129
15699
  }
15700
+ get contentContainerEl() {
15701
+ return this.el.shadowRoot.getElementById('content-container');
15702
+ }
15703
+ get headerEl() {
15704
+ return this.el.shadowRoot.getElementById('header-container');
15705
+ }
15706
+ get containerSlotEl() {
15707
+ return this.el.querySelector('[slot="content"]');
15708
+ }
15709
+ get footerEl() {
15710
+ return this.el.shadowRoot.getElementById('footer-container');
15711
+ }
15130
15712
  render() {
15131
- var _a;
15132
- return (index.h(index.Host, { key: '8ff024bee3c372cff775b8ecc68be3ee884eae3f' }, index.h("div", { key: 'cea1971fa6faf622f72a6ec103bcd6c6df81a457', class: "table-container", part: "table-container" }, index.h("div", { key: '191fbeab85091a081e6bacc76ea3a8f52e342c0d', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, index.h("slot", { key: 'caf8cb186cb311b7db83f65e8bad15ee9ecf8cb8', name: "header" })), index.h("div", { key: 'b0d534df26ab4784fa89e8b1e6b74b6ea973b203', class: "table-wrapper", part: "table-wrapper" }, Boolean((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length) ? (index.h("table", { class: "table" }, index.h("thead", null, index.h("tr", null, this.columns.map(col => {
15133
- var _a;
15134
- const align = (_a = col.align) !== null && _a !== void 0 ? _a : 'left';
15135
- return (index.h("th", { class: { 'text-center': align === 'center', 'text-right': align === 'right', 'text-left': align === 'left' }, id: col.field, scope: "col" }, index.h("cpsl-text", { variant: "bodyXS", weight: "medium" }, col.headerName)));
15136
- }))), index.h("tbody", null, this.rows.map(row => {
15137
- return (index.h("tr", { style: { height: Boolean(row.height) ? `${row.height}px` : `80px` } }, this.columns.map(col => {
15138
- var _a;
15139
- const align = (_a = col.align) !== null && _a !== void 0 ? _a : 'left';
15140
- const value = Boolean(col.valueGetter) ? col.valueGetter(row[col.field], row) : row[col.field];
15141
- return (index.h("td", { class: { 'text-center': align === 'center', 'text-right': align === 'right', 'text-left': align === 'left' } }, Boolean(col.renderCell) ? (col.renderCell(value, row)) : (index.h("cpsl-text", { variant: "bodyXS", weight: "medium" }, value))));
15142
- })));
15143
- })))) : (index.h("div", { class: { 'container-no-content': true } }, index.h("slot", { name: "no-content" })))), index.h("div", { key: '5ac2bfcfdebca316cd61b39826772819ccfe5444', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, index.h("slot", { key: 'f2506b2260272276a49ebd98c636064b148bccaa', name: "footer" })))));
15713
+ return (index.h(index.Host, { key: 'c697e33ff0d764f2a99ea98fbbedbb8b3813fb2d' }, index.h("cpsl-card", { key: 'a1ac41d42ef793cd3d5acd2e7d0468586351b3b4', part: "table-container", style: { position: 'relative' } }, index.h("div", { key: '5dcce6e3711ce9bdee0e890ab697c2452abdf29e', id: "header-container", class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, index.h("slot", { key: '6256e32a37806f8f6e1fb62a5bc61f937ee16c19', name: "header" })), index.h("div", { key: 'd151946e88ed755bac82490a237a9336be339abc', id: "content-container", class: { 'content': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }, part: "content" }, index.h("slot", { key: '2afa462b208482a645e88060b74ef8150e4fc0d0', name: "content" })), this.headerEl && this.contentContainerEl && this.footerEl && (index.h("div", { style: { top: `${this.headerEl.clientHeight + 2}px`, height: `${this.contentContainerEl.clientHeight}px` }, class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), index.h("div", { key: '0c8aceeb251955750a45017d5d44eb9be9e2fafc', id: "footer-container", class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, index.h("slot", { key: '0e9f35d9f1d50654a1cca75e008a3cc162fb316c', name: "footer" })))));
15144
15714
  }
15145
15715
  get el() { return index.getElement(this); }
15146
15716
  };
15147
15717
  CpslTable.style = CpslTableStyle0;
15148
15718
 
15149
- const cpslTabsCss = ":host{--tab-top-padding:5px;--tab-bottom-padding:5px;--tab-left-padding:16px;--tab-right-padding:16px;--tabs-border-radius:var(--cpsl-border-radius-tabs);--tabs-font-size:12px;--tabs-line-height:24px;--tabs-border-width:1px;--tabs-border-color:var(--cpsl-color-tabs-border);--tabs-background-color:var(--cpsl-color-tabs-background);--slider-background-color:var(--cpsl-color-tabs-slider-background);display:inline-block;max-width:100%;font-family:var(--cpsl-font-family, inherit)}:host(.full-width){display:block}.tabs-container{position:relative;display:flex;overflow-x:scroll;overflow-y:hidden;border-width:var(--tabs-border-width);border-style:solid;border-color:var(--tabs-border-color);border-radius:var(--tabs-border-radius);background-color:var(--tabs-background-color);font-size:var(--tabs-font-size);line-height:var(--tabs-line-height);-ms-overflow-style:none;scrollbar-width:none}.tabs-container::-webkit-scrollbar{display:none}.slider{position:absolute;top:calc(var(--tabs-border-width) * -1);bottom:calc(var(--tabs-border-width) * -1);left:-1px;border-width:var(--tabs-border-width);border-style:solid;border-color:var(--tabs-border-color);border-radius:var(--tabs-border-radius);background-color:var(--slider-background-color);box-shadow:-1px 0px 2px 0px var(--cpsl-color-alpha-black-10), 1px 0px 2px 0px var(--cpsl-color-alpha-black-10)}.loaded{transition:all 0.5s}";
15719
+ const cpslTabsCss = ":host{--tab-top-padding:5px;--tab-bottom-padding:5px;--tab-left-padding:16px;--tab-right-padding:16px;--tabs-border-radius:var(--cpsl-border-radius-tabs);--tabs-font-size:12px;--tabs-line-height:24px;--tabs-border-width:1px;--tabs-border-color:var(--cpsl-color-tabs-border);--tabs-background-color:var(--cpsl-color-tabs-background);--slider-background-color:var(--cpsl-color-tabs-slider-background);display:inline-block;max-width:100%;font-family:var(--cpsl-font-family, inherit)}:host(.full-width){display:block}.tabs-container{position:relative;display:flex;overflow-x:scroll;overflow-y:hidden;border-width:var(--tabs-border-width);border-style:solid;border-color:var(--tabs-border-color);border-radius:var(--tabs-border-radius);background:var(--tabs-background-color);font-size:var(--tabs-font-size);line-height:var(--tabs-line-height);-ms-overflow-style:none;scrollbar-width:none}.tabs-container::-webkit-scrollbar{display:none}.slider{position:absolute;top:calc(var(--tabs-border-width) * -1);bottom:calc(var(--tabs-border-width) * -1);left:-1px;border-width:var(--tabs-border-width);border-style:solid;border-color:var(--tabs-border-color);border-radius:var(--tabs-border-radius);background:var(--slider-background-color);box-shadow:-1px 0px 2px 0px var(--cpsl-color-alpha-black-10), 1px 0px 2px 0px var(--cpsl-color-alpha-black-10)}.loaded{transition:all 0.5s}";
15150
15720
  const CpslTabsStyle0 = cpslTabsCss;
15151
15721
 
15152
15722
  const CpslTabs = class {
@@ -15199,7 +15769,7 @@ const CpslTabs = class {
15199
15769
  const tabsPosition = this.el.getBoundingClientRect();
15200
15770
  const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
15201
15771
  const selectedTabRect = this.selectedTabRect;
15202
- return (index.h(index.Host, { key: '372d02e7014c72414dc3282660ffab8a37df3a5e', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: '762452e904014f3ea0d6e2bfb20d4277916bd296', class: "tabs-container" }, index.h("slot", { key: '52c4edd26157825c5bcd4cb5ffa30a6b5944d6ce' }), index.h("div", { key: '4b83b7a5c78bcf913622ddc7b8dc870ed001e93d', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
15772
+ return (index.h(index.Host, { key: 'f12c604fc3dadd8088792f02b42bd36618afa298', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: 'be9cfe9c9e069c9593c40d32f474dd23bb8a63fd', class: "tabs-container" }, index.h("slot", { key: '50ec843d4ae261a0c4f0034d6f60366f5114f55c' }), index.h("div", { key: '814c5513a2945059ff240912b26a7936a0ee7478', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
15203
15773
  }
15204
15774
  get el() { return index.getElement(this); }
15205
15775
  static get watchers() { return {
@@ -15213,7 +15783,7 @@ const getTab = (tabs, tab) => {
15213
15783
  };
15214
15784
  CpslTabs.style = CpslTabsStyle0;
15215
15785
 
15216
- const cpslTextCss = ":host{font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary);padding:0px;margin:0px;display:block}:host p,h1,h2,h3,h4,h5,h6{padding:0px;margin:0px;font-weight:inherit;font-size:inherit;letter-spacing:inherit}:host(.primary){color:var(--cpsl-color-text-primary)}:host(.secondary){color:var(--cpsl-color-text-secondary)}:host(.subtle){color:var(--cpsl-color-text-subtle)}:host(.inverted){color:var(--cpsl-color-text-inverted)}:host(.error){color:var(--cpsl-color-text-error)}:host(.medium){font-weight:500}:host(.semi-bold){font-weight:600}:host(.bold){font-weight:700}:host(.body-2xs){font-size:var(--cpsl-font-size-body-2xs)}:host(.body-xs){font-size:var(--cpsl-font-size-body-xs)}:host(.body-s){font-size:var(--cpsl-font-size-body-s)}:host(.body-m){font-size:var(--cpsl-font-size-body-m)}:host(.body-l){font-size:var(--cpsl-font-size-body-l)}:host(.body-xl){font-size:var(--cpsl-font-size-body-xl)}:host(.heading-xs){font-size:var(--cpsl-font-size-heading-xs)}:host(.heading-s){font-size:var(--cpsl-font-size-heading-s)}:host(.heading-m){font-size:var(--cpsl-font-size-heading-m);letter-spacing:-0.4px}:host(.heading-l){font-size:var(--cpsl-font-size-heading-l);letter-spacing:-1.12px}:host(.heading-xl){font-size:var(--cpsl-font-size-heading-xl);letter-spacing:-1.28px}:host(.heading-2xl){font-size:var(--cpsl-font-size-heading-2xl);letter-spacing:-1.44px}";
15786
+ const cpslTextCss = ":host{font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary);padding:0px;margin:0px;display:block}:host p,h1,h2,h3,h4,h5,h6{padding:0px;margin:0px;font-weight:inherit;font-size:inherit;letter-spacing:inherit}:host(.primary){color:var(--cpsl-color-text-primary)}:host(.secondary){color:var(--cpsl-color-text-secondary)}:host(.tertiary){color:var(--cpsl-color-text-tertiary)}:host(.subtle){color:var(--cpsl-color-text-subtle)}:host(.inverted){color:var(--cpsl-color-text-inverted)}:host(.error){color:var(--cpsl-color-text-error)}:host(.medium){font-weight:500}:host(.semi-bold){font-weight:600}:host(.bold){font-weight:700}:host(.body-2xs){font-size:var(--cpsl-font-size-body-2xs)}:host(.body-xs){font-size:var(--cpsl-font-size-body-xs)}:host(.body-s){font-size:var(--cpsl-font-size-body-s)}:host(.body-m){font-size:var(--cpsl-font-size-body-m)}:host(.body-l){font-size:var(--cpsl-font-size-body-l)}:host(.body-xl){font-size:var(--cpsl-font-size-body-xl)}:host(.heading-xs){font-size:var(--cpsl-font-size-heading-xs)}:host(.heading-s){font-size:var(--cpsl-font-size-heading-s)}:host(.heading-m){font-size:var(--cpsl-font-size-heading-m);letter-spacing:-0.4px}:host(.heading-l){font-size:var(--cpsl-font-size-heading-l);letter-spacing:-1.12px}:host(.heading-xl){font-size:var(--cpsl-font-size-heading-xl);letter-spacing:-1.28px}:host(.heading-2xl){font-size:var(--cpsl-font-size-heading-2xl);letter-spacing:-1.44px}";
15217
15787
  const CpslTextStyle0 = cpslTextCss;
15218
15788
 
15219
15789
  const CpslText = class {
@@ -15249,9 +15819,10 @@ const CpslText = class {
15249
15819
  }
15250
15820
  }
15251
15821
  render() {
15252
- return (index.h(index.Host, { key: 'dfb056131c8efe94b9a5ec99a8dadd4669dde15f', class: {
15822
+ return (index.h(index.Host, { key: '97db3be68cbcd4a59851a74bfefac921b9f7efc0', class: {
15253
15823
  'primary': this.color === 'primary',
15254
15824
  'secondary': this.color === 'secondary',
15825
+ 'tertiary': this.color === 'tertiary',
15255
15826
  'subtle': this.color === 'subtle',
15256
15827
  'inverted': this.color === 'inverted',
15257
15828
  'error': this.color === 'error',
@@ -15275,7 +15846,7 @@ const CpslText = class {
15275
15846
  };
15276
15847
  CpslText.style = CpslTextStyle0;
15277
15848
 
15278
- const cpslTileButtonCss = ":host{--button-icon-color:var(--cpsl-color-text-primary);--button-border-radius:var(--cpsl-border-radius-tile-button);--button-background-color:var(--cpsl-color-tile-button-surface-default);--button-border-color:var(--cpsl-color-tile-button-border);--button-width:72px;--button-height:56px;--button-gap:4px;--button-box-shadow:0px -4px 4px 0px var(--cpsl-color-alpha-black-2) inset, 0px 4px 4px 0px var(--cpsl-color-alpha-white-4) inset}:host :hover{--button-background-color:var(--cpsl-color-tile-button-surface-hover)}:host :active{--button-background-color:var(--cpsl-color-tile-button-surface-pressed)}.button-native{border-radius:var(--button-border-radius);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);border:1px solid transparent;cursor:pointer;background-color:var(--button-background-color);border-color:var(--button-border-color);display:flex;flex-direction:column;gap:var(--button-gap);align-items:center;justify-content:center;width:var(--button-width);height:var(--button-height);box-shadow:var(--button-box-shadow)}.button-native cpsl-icon{--icon-color:var(--button-icon-color)}";
15849
+ const cpslTileButtonCss = ":host{--button-icon-color:var(--cpsl-color-text-primary);--button-border-radius:var(--cpsl-border-radius-tile-button);--button-background-color:var(--cpsl-color-tile-button-surface-default);--button-border-color:var(--cpsl-color-tile-button-border);--button-width:72px;--button-height:56px;--button-gap:4px;--button-box-shadow:0px -4px 4px 0px var(--cpsl-color-alpha-black-2) inset, 0px 4px 4px 0px var(--cpsl-color-alpha-white-4) inset}:host :hover{--button-background-color:var(--cpsl-color-tile-button-surface-hover)}:host :active{--button-background-color:var(--cpsl-color-tile-button-surface-pressed)}.button-native{border-radius:var(--button-border-radius);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);border:1px solid transparent;cursor:pointer;background:var(--button-background-color);border-color:var(--button-border-color);display:flex;flex-direction:column;gap:var(--button-gap);align-items:center;justify-content:center;width:var(--button-width);height:var(--button-height);box-shadow:var(--button-box-shadow)}.button-native cpsl-icon{--icon-color:var(--button-icon-color)}";
15279
15850
  const CpslTileButtonStyle0 = cpslTileButtonCss;
15280
15851
 
15281
15852
  const CpslTileButton = class {
@@ -15285,7 +15856,7 @@ const CpslTileButton = class {
15285
15856
  this.icon = undefined;
15286
15857
  }
15287
15858
  render() {
15288
- return (index.h(index.Host, { key: 'c4aee36001539cabc1965e193962701a2f5f7ade' }, index.h("button", { key: '76e0f5b921f2b6c2086610a8c4b1e48dc85c751e', class: "button-native" }, index.h("cpsl-icon", { key: '379e1ba5fe8ee4bf089ce84d8ce3eaa0eb32b214', exportparts: "icon", src: this.src, icon: this.icon }), index.h("slot", { key: 'e09443c7527e061ea752b6ebe7abc6152ae61783' }))));
15859
+ return (index.h(index.Host, { key: 'e12a3acf1adac28cb7ed464426bd50b48e5727d8' }, index.h("button", { key: '005df699f7b93807598568cd6542907f851d0234', class: "button-native" }, index.h("cpsl-icon", { key: 'af574fff1782925d1bc8d4146538fb179f63dead', exportparts: "icon", src: this.src, icon: this.icon }), index.h("slot", { key: 'b6a1d9557e7dbf974411496c7a29b1c0e5d648f3' }))));
15289
15860
  }
15290
15861
  };
15291
15862
  CpslTileButton.style = CpslTileButtonStyle0;
@@ -15301,6 +15872,7 @@ exports.cpsl_code_input = CpslCodeInput;
15301
15872
  exports.cpsl_divider = CpslDivider;
15302
15873
  exports.cpsl_drawer = CpslDrawer;
15303
15874
  exports.cpsl_dropdown = CpslDropdown;
15875
+ exports.cpsl_file_upload = CpslFileUpload;
15304
15876
  exports.cpsl_icon = CpslIcon;
15305
15877
  exports.cpsl_input = CpslInput;
15306
15878
  exports.cpsl_modal = CpslModal;
@@ -15308,9 +15880,12 @@ exports.cpsl_nav_button_group = CpslNavButtonGroup;
15308
15880
  exports.cpsl_overlay = CpslOverlay;
15309
15881
  exports.cpsl_pagination = CpslPagination;
15310
15882
  exports.cpsl_pill = CpslPill;
15883
+ exports.cpsl_popover = CpslPopover;
15311
15884
  exports.cpsl_progress_indicator = CpslProgressIndicator;
15312
15885
  exports.cpsl_qr_code = CpslQrCode;
15313
15886
  exports.cpsl_radio = CpslRadio;
15887
+ exports.cpsl_select = CpslSelect;
15888
+ exports.cpsl_select_item = CpslSelectItem;
15314
15889
  exports.cpsl_slide_button = CpslSlideButton;
15315
15890
  exports.cpsl_spinner = CpslSpinner;
15316
15891
  exports.cpsl_switch = CpslSwitch;
@@ -15320,4 +15895,4 @@ exports.cpsl_tabs = CpslTabs;
15320
15895
  exports.cpsl_text = CpslText;
15321
15896
  exports.cpsl_tile_button = CpslTileButton;
15322
15897
 
15323
- //# sourceMappingURL=cpsl-alert_29.cjs.entry.js.map
15898
+ //# sourceMappingURL=cpsl-alert_33.cjs.entry.js.map