@usecapsule/core-components 1.0.13 → 2.0.0-dev.dropdown

Sign up to get free protection for your applications and to get access to all the features.
Files changed (173) hide show
  1. package/css/capsule-core.css +86 -41
  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-0462f723.js +2 -0
  8. package/dist/capsule/p-0462f723.js.map +1 -0
  9. package/dist/capsule/p-0cab90fa.entry.js +2 -0
  10. package/dist/capsule/{p-1dc07cd7.entry.js.map → p-0cab90fa.entry.js.map} +1 -1
  11. package/dist/capsule/{p-11048392.entry.js → p-193ac141.entry.js} +2 -2
  12. package/dist/capsule/p-6fb7c4d1.js +3 -0
  13. package/dist/capsule/p-6fb7c4d1.js.map +1 -0
  14. package/dist/capsule/{p-62e7869a.entry.js → p-a95ec4df.entry.js} +2 -2
  15. package/dist/capsule/p-bea93fae.entry.js +29 -0
  16. package/dist/capsule/p-bea93fae.entry.js.map +1 -0
  17. package/dist/capsule/p-c2bf050b.js +2 -0
  18. package/dist/capsule/p-c2bf050b.js.map +1 -0
  19. package/dist/capsule/p-cb8dc0a4.entry.js +2 -0
  20. package/dist/capsule/p-d7be092d.entry.js +10 -0
  21. package/dist/capsule/p-d7be092d.entry.js.map +1 -0
  22. package/dist/cjs/_commonjsHelpers-b3309d7b.js +12 -0
  23. package/dist/cjs/_commonjsHelpers-b3309d7b.js.map +1 -0
  24. package/dist/cjs/capsule.cjs.js +2 -2
  25. package/dist/cjs/constants-4bb85cc5.js +12 -0
  26. package/dist/cjs/constants-4bb85cc5.js.map +1 -0
  27. package/dist/cjs/{cpsl-alert_17.cjs.entry.js → cpsl-alert_18.cjs.entry.js} +3838 -537
  28. package/dist/cjs/cpsl-alert_18.cjs.entry.js.map +1 -0
  29. package/dist/cjs/cpsl-animation.cjs.entry.js +20129 -0
  30. package/dist/cjs/cpsl-animation.cjs.entry.js.map +1 -0
  31. package/dist/cjs/cpsl-col.cjs.entry.js +2 -2
  32. package/dist/cjs/cpsl-grid.cjs.entry.js +3 -3
  33. package/dist/cjs/cpsl-info-box.cjs.entry.js +3 -3
  34. package/dist/cjs/cpsl-info-box.cjs.entry.js.map +1 -1
  35. package/dist/cjs/cpsl-row.cjs.entry.js +2 -2
  36. package/dist/cjs/{index-2a026742.js → index-3fccb5b4.js} +24 -3
  37. package/dist/cjs/index-3fccb5b4.js.map +1 -0
  38. package/dist/cjs/index.cjs.js +358 -0
  39. package/dist/cjs/index.cjs.js.map +1 -1
  40. package/dist/cjs/loader.cjs.js +2 -2
  41. package/dist/collection/assets/icons/capsule-rings-dark.svg +34 -0
  42. package/dist/collection/assets/icons/capsule.svg +4 -4
  43. package/dist/collection/assets/icons/chevron-up.svg +3 -0
  44. package/dist/collection/assets/icons/hero-email.svg +8 -30
  45. package/dist/collection/assets/icons/hero-lock.svg +4 -34
  46. package/dist/collection/assets/icons/hero-passkey.svg +9 -17
  47. package/dist/collection/assets/icons/hero-phone.svg +4 -15
  48. package/dist/collection/assets/icons/hero-wallet.svg +5 -44
  49. package/dist/collection/assets/icons/index.js +5 -2
  50. package/dist/collection/assets/icons/index.js.map +1 -1
  51. package/dist/collection/assets/icons/more-login-options.svg +10 -10
  52. package/dist/collection/assets/icons/plus-circle.svg +5 -0
  53. package/dist/collection/assets/icons/wallet.svg +5 -0
  54. package/dist/collection/collection-manifest.json +2 -0
  55. package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
  56. package/dist/collection/components/cpsl-animation/cpsl-animation.css +17 -0
  57. package/dist/collection/components/cpsl-animation/cpsl-animation.js +102 -0
  58. package/dist/collection/components/cpsl-animation/cpsl-animation.js.map +1 -0
  59. package/dist/collection/components/cpsl-animation/test/cpsl-animation.e2e.js +29 -0
  60. package/dist/collection/components/cpsl-animation/test/cpsl-animation.e2e.js.map +1 -0
  61. package/dist/collection/components/cpsl-animation/test/cpsl-animation.spec.js +37 -0
  62. package/dist/collection/components/cpsl-animation/test/cpsl-animation.spec.js.map +1 -0
  63. package/dist/collection/components/cpsl-button/cpsl-button.css +3 -0
  64. package/dist/collection/components/cpsl-button/cpsl-button.js +2 -2
  65. package/dist/collection/components/cpsl-button/cpsl-button.js.map +1 -1
  66. package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +1 -1
  67. package/dist/collection/components/cpsl-col/cpsl-col.js +1 -1
  68. package/dist/collection/components/cpsl-divider/cpsl-divider.js +1 -1
  69. package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.css +88 -0
  70. package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +113 -0
  71. package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -0
  72. package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.e2e.js +29 -0
  73. package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.e2e.js.map +1 -0
  74. package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.spec.js +37 -0
  75. package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.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.css +14 -0
  78. package/dist/collection/components/cpsl-icon/cpsl-icon.js +2 -3
  79. package/dist/collection/components/cpsl-icon/cpsl-icon.js.map +1 -1
  80. package/dist/collection/components/cpsl-info-box/cpsl-info-box.css +1 -1
  81. package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
  82. package/dist/collection/components/cpsl-input/cpsl-input.css +12 -7
  83. package/dist/collection/components/cpsl-input/cpsl-input.js +8 -6
  84. package/dist/collection/components/cpsl-input/cpsl-input.js.map +1 -1
  85. package/dist/collection/components/cpsl-modal/cpsl-modal.css +46 -4
  86. package/dist/collection/components/cpsl-modal/cpsl-modal.js +341 -24
  87. package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
  88. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +30 -13
  89. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js.map +1 -1
  90. package/dist/collection/components/cpsl-pill/cpsl-pill.css +3 -3
  91. package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
  92. package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.css +3 -3
  93. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css +3 -3
  94. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
  95. package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
  96. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css +11 -9
  97. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +3 -3
  98. package/dist/collection/components/cpsl-spinner/cpsl-spinner.css +2 -2
  99. package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
  100. package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
  101. package/dist/collection/components/cpsl-tabs/cpsl-tabs.css +17 -16
  102. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +2 -2
  103. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js.map +1 -1
  104. package/dist/collection/components/cpsl-text/cpsl-text.css +101 -0
  105. package/dist/collection/components/cpsl-text/cpsl-text.js +110 -1
  106. package/dist/collection/components/cpsl-text/cpsl-text.js.map +1 -1
  107. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css +3 -0
  108. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
  109. package/dist/collection/constants.js +6 -0
  110. package/dist/collection/constants.js.map +1 -0
  111. package/dist/collection/index.js +1 -0
  112. package/dist/collection/index.js.map +1 -1
  113. package/dist/collection/interface.js.map +1 -1
  114. package/dist/collection/utils/theme/generateBorderRadii.js +56 -0
  115. package/dist/collection/utils/theme/generateBorderRadii.js.map +1 -0
  116. package/dist/collection/utils/theme/generateFont.js +28 -0
  117. package/dist/collection/utils/theme/generateFont.js.map +1 -0
  118. package/dist/collection/utils/theme/generatePalette.js +46 -0
  119. package/dist/collection/utils/theme/generatePalette.js.map +1 -0
  120. package/dist/collection/utils/theme/generateTheme.js +11 -0
  121. package/dist/collection/utils/theme/generateTheme.js.map +1 -0
  122. package/dist/collection/utils/theme/utils.js +21 -0
  123. package/dist/collection/utils/theme/utils.js.map +1 -0
  124. package/dist/esm/_commonjsHelpers-1789f0cf.js +9 -0
  125. package/dist/esm/_commonjsHelpers-1789f0cf.js.map +1 -0
  126. package/dist/esm/capsule.js +3 -3
  127. package/dist/esm/constants-7b49abd5.js +9 -0
  128. package/dist/esm/constants-7b49abd5.js.map +1 -0
  129. package/dist/esm/{cpsl-alert_17.entry.js → cpsl-alert_18.entry.js} +3837 -537
  130. package/dist/esm/cpsl-alert_18.entry.js.map +1 -0
  131. package/dist/esm/cpsl-animation.entry.js +20125 -0
  132. package/dist/esm/cpsl-animation.entry.js.map +1 -0
  133. package/dist/esm/cpsl-col.entry.js +2 -2
  134. package/dist/esm/cpsl-grid.entry.js +3 -3
  135. package/dist/esm/cpsl-info-box.entry.js +3 -3
  136. package/dist/esm/cpsl-info-box.entry.js.map +1 -1
  137. package/dist/esm/cpsl-row.entry.js +2 -2
  138. package/dist/esm/{index-7c2f5cb9.js → index-f00e090c.js} +24 -3
  139. package/dist/esm/index-f00e090c.js.map +1 -0
  140. package/dist/esm/index.js +355 -0
  141. package/dist/esm/index.js.map +1 -1
  142. package/dist/esm/loader.js +3 -3
  143. package/dist/types/assets/icons/index.d.ts +4 -1
  144. package/dist/types/components/cpsl-animation/cpsl-animation.d.ts +9 -0
  145. package/dist/types/components/cpsl-dropdown/cpsl-dropdown.d.ts +25 -0
  146. package/dist/types/components/cpsl-modal/cpsl-modal.d.ts +26 -5
  147. package/dist/types/components/cpsl-overlay/cpsl-overlay.d.ts +2 -2
  148. package/dist/types/components/cpsl-text/cpsl-text.d.ts +4 -0
  149. package/dist/types/components.d.ts +170 -13
  150. package/dist/types/constants.d.ts +3 -0
  151. package/dist/types/index.d.ts +2 -0
  152. package/dist/types/interface.d.ts +137 -0
  153. package/dist/types/utils/theme/generateBorderRadii.d.ts +2 -0
  154. package/dist/types/utils/theme/generateFont.d.ts +2 -0
  155. package/dist/types/utils/theme/generatePalette.d.ts +7 -0
  156. package/dist/types/utils/theme/generateTheme.d.ts +2 -0
  157. package/dist/types/utils/theme/utils.d.ts +5 -0
  158. package/package.json +5 -3
  159. package/dist/capsule/p-0e2fbb7f.entry.js +0 -20
  160. package/dist/capsule/p-0e2fbb7f.entry.js.map +0 -1
  161. package/dist/capsule/p-1dc07cd7.entry.js +0 -2
  162. package/dist/capsule/p-5c020abe.entry.js +0 -2
  163. package/dist/capsule/p-9647dd63.js +0 -3
  164. package/dist/capsule/p-9647dd63.js.map +0 -1
  165. package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +0 -1
  166. package/dist/cjs/index-2a026742.js.map +0 -1
  167. package/dist/collection/assets/icons/more-login-options-dark.svg +0 -13
  168. package/dist/esm/cpsl-alert_17.entry.js.map +0 -1
  169. package/dist/esm/index-7c2f5cb9.js.map +0 -1
  170. /package/dist/capsule/{p-11048392.entry.js.map → p-193ac141.entry.js.map} +0 -0
  171. /package/dist/capsule/{p-62e7869a.entry.js.map → p-a95ec4df.entry.js.map} +0 -0
  172. /package/dist/capsule/{p-5c020abe.entry.js.map → p-cb8dc0a4.entry.js.map} +0 -0
  173. /package/dist/types/Users/{taylorbosch → vinay}/Documents/GitHub/Capsule/component-library/core/.stencil/scripts/buildIconLibrary.d.ts +0 -0
@@ -1,7 +1,58 @@
1
1
  import { Host, h } from "@stencil/core";
2
2
  export class CpslText {
3
+ constructor() {
4
+ this.color = 'primary';
5
+ this.variant = 'bodyM';
6
+ this.weight = 'regular';
7
+ }
8
+ get Content() {
9
+ switch (this.variant) {
10
+ case 'headingXS': {
11
+ return (h("h6", null, h("slot", null)));
12
+ }
13
+ case 'headingS': {
14
+ return (h("h5", null, h("slot", null)));
15
+ }
16
+ case 'headingM': {
17
+ return (h("h4", null, h("slot", null)));
18
+ }
19
+ case 'headingL': {
20
+ return (h("h3", null, h("slot", null)));
21
+ }
22
+ case 'headingXL': {
23
+ return (h("h2", null, h("slot", null)));
24
+ }
25
+ case 'heading2XL': {
26
+ return (h("h1", null, h("slot", null)));
27
+ }
28
+ default: {
29
+ return (h("p", null, h("slot", null)));
30
+ }
31
+ }
32
+ }
3
33
  render() {
4
- return (h(Host, { key: '72726bc3a58e3089f02b70d494ead181eb34f2d3' }, h("slot", { key: '8f8b009bc13ea9bb7824b51c622b115c6b103a9c' })));
34
+ return (h(Host, { key: '33b70ccfe3929f306d0a9b956ec2a4e16bf751b8', class: {
35
+ 'primary': this.color === 'primary',
36
+ 'secondary': this.color === 'secondary',
37
+ 'subtle': this.color === 'subtle',
38
+ 'inverted': this.color === 'inverted',
39
+ 'error': this.color === 'error',
40
+ 'medium': this.weight === 'medium',
41
+ 'semi-bold': this.weight === 'semiBold',
42
+ 'bold': this.weight === 'bold',
43
+ 'body-2xs': this.variant === 'body2XS',
44
+ 'body-xs': this.variant === 'bodyXS',
45
+ 'body-s': this.variant === 'bodyS',
46
+ 'body-m': this.variant === 'bodyM',
47
+ 'body-l': this.variant === 'bodyL',
48
+ 'body-xl': this.variant === 'bodyXL',
49
+ 'heading-xs': this.variant === 'headingXS',
50
+ 'heading-s': this.variant === 'headingS',
51
+ 'heading-m': this.variant === 'headingM',
52
+ 'heading-l': this.variant === 'headingL',
53
+ 'heading-xl': this.variant === 'headingXL',
54
+ 'heading-2xl': this.variant === 'heading2XL',
55
+ } }, this.Content));
5
56
  }
6
57
  static get is() { return "cpsl-text"; }
7
58
  static get encapsulation() { return "shadow"; }
@@ -15,5 +66,63 @@ export class CpslText {
15
66
  "$": ["cpsl-text.css"]
16
67
  };
17
68
  }
69
+ static get properties() {
70
+ return {
71
+ "color": {
72
+ "type": "string",
73
+ "mutable": false,
74
+ "complexType": {
75
+ "original": "'primary' | 'secondary' | 'subtle' | 'inverted' | 'error'",
76
+ "resolved": "\"error\" | \"inverted\" | \"primary\" | \"secondary\" | \"subtle\"",
77
+ "references": {}
78
+ },
79
+ "required": false,
80
+ "optional": true,
81
+ "docs": {
82
+ "tags": [],
83
+ "text": "The color of text.\nOptions are: `\"primary\"`, `\"secondary\", `\"subtle\", `\"inverted\", `\"error\".\nDefault is: `\"primary\"`."
84
+ },
85
+ "attribute": "color",
86
+ "reflect": false,
87
+ "defaultValue": "'primary'"
88
+ },
89
+ "variant": {
90
+ "type": "string",
91
+ "mutable": false,
92
+ "complexType": {
93
+ "original": "'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL'",
94
+ "resolved": "\"body2XS\" | \"bodyL\" | \"bodyM\" | \"bodyS\" | \"bodyXL\" | \"bodyXS\" | \"heading2XL\" | \"headingL\" | \"headingM\" | \"headingS\" | \"headingXL\" | \"headingXS\"",
95
+ "references": {}
96
+ },
97
+ "required": false,
98
+ "optional": true,
99
+ "docs": {
100
+ "tags": [],
101
+ "text": "The variant of text.\nOptions are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\nDefault is: `\"bodyM\"`."
102
+ },
103
+ "attribute": "variant",
104
+ "reflect": false,
105
+ "defaultValue": "'bodyM'"
106
+ },
107
+ "weight": {
108
+ "type": "string",
109
+ "mutable": false,
110
+ "complexType": {
111
+ "original": "'regular' | 'medium' | 'semiBold' | 'bold'",
112
+ "resolved": "\"bold\" | \"medium\" | \"regular\" | \"semiBold\"",
113
+ "references": {}
114
+ },
115
+ "required": false,
116
+ "optional": true,
117
+ "docs": {
118
+ "tags": [],
119
+ "text": "The weight of text.\nOptions are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\nDefault is: `\"regular\"`."
120
+ },
121
+ "attribute": "weight",
122
+ "reflect": false,
123
+ "defaultValue": "'regular'"
124
+ }
125
+ };
126
+ }
18
127
  }
19
128
  //# sourceMappingURL=cpsl-text.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"cpsl-text.js","sourceRoot":"","sources":["../../../../src/components/cpsl-text/cpsl-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-text',\n styleUrl: 'cpsl-text.scss',\n shadow: true,\n})\nexport class CpslText {\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"cpsl-text.js","sourceRoot":"","sources":["../../../../src/components/cpsl-text/cpsl-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;qBAMyD,SAAS;uBAO+E,OAAO;sBAO7G,SAAS;;IAEvE,IAAY,OAAO;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,YAAY,CAAC,CAAC,CAAC;gBAClB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,CACL;oBACE,eAAa,CACX,CACL,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBAEL,SAAS,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBACnC,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW;gBACvC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACjC,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;gBACrC,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;gBAE/B,QAAQ,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;gBAClC,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU;gBACvC,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;gBAE9B,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACtC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;aAC7C,IAEA,IAAI,CAAC,OAAO,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-text',\n styleUrl: 'cpsl-text.scss',\n shadow: true,\n})\nexport class CpslText {\n /**\n * The color of text.\n * Options are: `\"primary\"`, `\"secondary\", `\"subtle\", `\"inverted\", `\"error\".\n * Default is: `\"primary\"`.\n */\n @Prop() color?: 'primary' | 'secondary' | 'subtle' | 'inverted' | 'error' = 'primary';\n\n /**\n * The variant of text.\n * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n * Default is: `\"bodyM\"`.\n */\n @Prop() variant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL' = 'bodyM';\n\n /**\n * The weight of text.\n * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n * Default is: `\"regular\"`.\n */\n @Prop() weight?: 'regular' | 'medium' | 'semiBold' | 'bold' = 'regular';\n\n private get Content() {\n switch (this.variant) {\n case 'headingXS': {\n return (\n <h6>\n <slot></slot>\n </h6>\n );\n }\n case 'headingS': {\n return (\n <h5>\n <slot></slot>\n </h5>\n );\n }\n case 'headingM': {\n return (\n <h4>\n <slot></slot>\n </h4>\n );\n }\n case 'headingL': {\n return (\n <h3>\n <slot></slot>\n </h3>\n );\n }\n case 'headingXL': {\n return (\n <h2>\n <slot></slot>\n </h2>\n );\n }\n case 'heading2XL': {\n return (\n <h1>\n <slot></slot>\n </h1>\n );\n }\n default: {\n return (\n <p>\n <slot></slot>\n </p>\n );\n }\n }\n }\n\n render() {\n return (\n <Host\n class={{\n // COLORS\n 'primary': this.color === 'primary',\n 'secondary': this.color === 'secondary',\n 'subtle': this.color === 'subtle',\n 'inverted': this.color === 'inverted',\n 'error': this.color === 'error',\n // WEIGHTS\n 'medium': this.weight === 'medium',\n 'semi-bold': this.weight === 'semiBold',\n 'bold': this.weight === 'bold',\n // SIZES\n 'body-2xs': this.variant === 'body2XS',\n 'body-xs': this.variant === 'bodyXS',\n 'body-s': this.variant === 'bodyS',\n 'body-m': this.variant === 'bodyM',\n 'body-l': this.variant === 'bodyL',\n 'body-xl': this.variant === 'bodyXL',\n 'heading-xs': this.variant === 'headingXS',\n 'heading-s': this.variant === 'headingS',\n 'heading-m': this.variant === 'headingM',\n 'heading-l': this.variant === 'headingL',\n 'heading-xl': this.variant === 'headingXL',\n 'heading-2xl': this.variant === 'heading2XL',\n }}\n >\n {this.Content}\n </Host>\n );\n }\n}\n"]}
@@ -67,6 +67,9 @@
67
67
  :host :hover {
68
68
  --button-background-color: var(--cpsl-color-tile-button-surface-hover);
69
69
  }
70
+ :host :active {
71
+ --button-background-color: var(--cpsl-color-tile-button-surface-pressed);
72
+ }
70
73
 
71
74
  .button-native {
72
75
  border-radius: var(--button-border-radius);
@@ -5,7 +5,7 @@ export class CpslTileButton {
5
5
  this.icon = undefined;
6
6
  }
7
7
  render() {
8
- return (h(Host, { key: 'db1693ec8a607410ba6bb5fbe15b4acaec26ff84' }, h("button", { key: '6da2c97b58e7ee13c86a386461831ed93fa3fee9', class: "button-native" }, h("cpsl-icon", { key: '0dbe6348fedb418151384747bac7f902b31d6c9a', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: '8d15a91f86b060edefcf3ae359df2ceb2e1b4a76' }))));
8
+ return (h(Host, { key: '61cbce3574220ee8009ab95c3e37d80535543d1c' }, h("button", { key: '50169b226155e2b06014c415dd522dfc0deb799c', class: "button-native" }, h("cpsl-icon", { key: '9ee77a4d725f4bec258ae753365a1f5aca733ff5', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b01617dbca7322d9cc8f58c30680cd5f3ed0f576' }))));
9
9
  }
10
10
  static get is() { return "cpsl-tile-button"; }
11
11
  static get encapsulation() { return "shadow"; }
@@ -43,7 +43,7 @@ export class CpslTileButton {
43
43
  "mutable": false,
44
44
  "complexType": {
45
45
  "original": "IconType",
46
- "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptionsDark\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"youtubeBrand\" | \"youtube\"",
46
+ "resolved": "\"key\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
47
47
  "references": {
48
48
  "IconType": {
49
49
  "location": "import",
@@ -0,0 +1,6 @@
1
+ export const MOBILE_SIZE = 480;
2
+ export const DEFAULT_THEME = {
3
+ foregroundColor: '#121212',
4
+ backgroundColor: '#FAFAFA',
5
+ };
6
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAE/B,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;CAC3B,CAAC","sourcesContent":["import { Theme } from './interface';\n\nexport const MOBILE_SIZE = 480;\n\nexport const DEFAULT_THEME: Theme = {\n foregroundColor: '#121212',\n backgroundColor: '#FAFAFA',\n};\n"]}
@@ -1,2 +1,3 @@
1
1
  export * from './components';
2
+ export { generateTheme } from './utils/theme/generateTheme';
2
3
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export * from './components';\n\nexport { generateTheme } from './utils/theme/generateTheme';\nexport type { Theme, BorderRadius } from './interface';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from './assets/icons';\n\nexport type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type AutocompleteTypes =\n | 'on'\n | 'off'\n | 'name'\n | 'honorific-prefix'\n | 'given-name'\n | 'additional-name'\n | 'family-name'\n | 'honorific-suffix'\n | 'nickname'\n | 'email'\n | 'username'\n | 'new-password'\n | 'current-password'\n | 'one-time-code'\n | 'organization-title'\n | 'organization'\n | 'street-address'\n | 'address-line1'\n | 'address-line2'\n | 'address-line3'\n | 'address-level4'\n | 'address-level3'\n | 'address-level2'\n | 'address-level1'\n | 'country'\n | 'country-name'\n | 'postal-code'\n | 'cc-name'\n | 'cc-given-name'\n | 'cc-additional-name'\n | 'cc-family-name'\n | 'cc-family-name'\n | 'cc-number'\n | 'cc-exp'\n | 'cc-exp-month'\n | 'cc-exp-year'\n | 'cc-csc'\n | 'cc-type'\n | 'transaction-currency'\n | 'transaction-amount'\n | 'language'\n | 'bday'\n | 'bday-day'\n | 'bday-month'\n | 'bday-year'\n | 'sex'\n | 'tel'\n | 'tel-country-code'\n | 'tel-national'\n | 'tel-area-code'\n | 'tel-local'\n | 'tel-extension'\n | 'impp'\n | 'url'\n | 'photo';\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';\n\nexport type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type Color = LiteralUnion<PredefinedColors, string>;\n\nexport type CssClassMap = { [className: string]: boolean };\n\nexport type IconType = keyof typeof Icons;\n"]}
1
+ {"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from './assets/icons';\n\nexport type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type AutocompleteTypes =\n | 'on'\n | 'off'\n | 'name'\n | 'honorific-prefix'\n | 'given-name'\n | 'additional-name'\n | 'family-name'\n | 'honorific-suffix'\n | 'nickname'\n | 'email'\n | 'username'\n | 'new-password'\n | 'current-password'\n | 'one-time-code'\n | 'organization-title'\n | 'organization'\n | 'street-address'\n | 'address-line1'\n | 'address-line2'\n | 'address-line3'\n | 'address-level4'\n | 'address-level3'\n | 'address-level2'\n | 'address-level1'\n | 'country'\n | 'country-name'\n | 'postal-code'\n | 'cc-name'\n | 'cc-given-name'\n | 'cc-additional-name'\n | 'cc-family-name'\n | 'cc-family-name'\n | 'cc-number'\n | 'cc-exp'\n | 'cc-exp-month'\n | 'cc-exp-year'\n | 'cc-csc'\n | 'cc-type'\n | 'transaction-currency'\n | 'transaction-amount'\n | 'language'\n | 'bday'\n | 'bday-day'\n | 'bday-month'\n | 'bday-year'\n | 'sex'\n | 'tel'\n | 'tel-country-code'\n | 'tel-national'\n | 'tel-area-code'\n | 'tel-local'\n | 'tel-extension'\n | 'impp'\n | 'url'\n | 'photo';\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';\n\nexport type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type Color = LiteralUnion<PredefinedColors, string>;\n\nexport type CssClassMap = { [className: string]: boolean };\n\nexport type IconType = keyof typeof Icons;\n\nexport type Theme = {\n foregroundColor?: string;\n backgroundColor?: string;\n borderRadius?: BorderRadius;\n font?: string;\n customPalette?: CustomPalette;\n customFontSizes?: CustomFontSizes;\n};\n\nexport type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';\n\nexport interface CustomFontSizes {\n body2XS?: string;\n bodyXS?: string;\n bodyS?: string;\n bodyM?: string;\n bodyL?: string;\n bodyXL?: string;\n headingXS?: string;\n headingS?: string;\n headingM?: string;\n headingL?: string;\n headingXL?: string;\n heading2XL?: string;\n}\n\nexport interface CustomPalette {\n text?: {\n primary?: string;\n secondary?: string;\n subtle?: string;\n inverted?: string;\n error?: string;\n };\n modal?: {\n surface?: {\n main?: string;\n footer?: string;\n };\n border?: string;\n };\n input?: {\n surface?: {\n disabled?: string;\n default?: string;\n };\n border?: {\n placeholder?: string;\n active?: string;\n error?: string;\n };\n };\n tileButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n };\n border?: string;\n };\n primaryButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n disabled?: string;\n };\n border?: {\n default?: string;\n disabled?: string;\n };\n outline?: string;\n };\n secondaryButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n disabled?: string;\n };\n border?: {\n default?: string;\n disabled?: string;\n };\n outline?: string;\n };\n divider?: string;\n spinner?: {\n path?: string;\n circle?: string;\n };\n pill?: {\n text?: string;\n container?: {\n background?: string;\n border?: string;\n };\n };\n progressIndicator?: {\n active?: string;\n next?: string;\n previous?: string;\n };\n qr?: {\n fill?: string;\n background?: string;\n border?: string;\n };\n slideButton?: {\n slider?: {\n background?: string;\n border?: string;\n text?: string;\n container?: {\n start?: {\n background?: string;\n border?: string;\n };\n end?: {\n background?: string;\n border?: string;\n };\n };\n };\n start?: {\n text?: string;\n };\n end?: {\n text?: string;\n };\n };\n alert?: {\n surface?: {\n error?: string;\n };\n border?: {\n error?: string;\n };\n };\n}\n"]}
@@ -0,0 +1,56 @@
1
+ export const generateBorderRadii = ({ borderRadius }) => {
2
+ if (!Boolean(borderRadius)) {
3
+ return;
4
+ }
5
+ let smallRadius = 8;
6
+ let mediumRadius = 16;
7
+ let largeRadius = 24;
8
+ const fullRadius = 1000;
9
+ let isFull = false;
10
+ let isNone = false;
11
+ switch (borderRadius) {
12
+ case 'none': {
13
+ isNone = true;
14
+ smallRadius = 0;
15
+ mediumRadius = 0;
16
+ largeRadius = 0;
17
+ break;
18
+ }
19
+ case 'xs': {
20
+ smallRadius = 4;
21
+ mediumRadius = 12;
22
+ largeRadius = 20;
23
+ break;
24
+ }
25
+ case 'md': {
26
+ smallRadius = 12;
27
+ mediumRadius = 20;
28
+ largeRadius = 28;
29
+ break;
30
+ }
31
+ case 'lg': {
32
+ smallRadius = 16;
33
+ mediumRadius = 24;
34
+ largeRadius = 32;
35
+ break;
36
+ }
37
+ case 'full': {
38
+ smallRadius = 16;
39
+ mediumRadius = 24;
40
+ largeRadius = 32;
41
+ isFull = true;
42
+ break;
43
+ }
44
+ }
45
+ document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : smallRadius}px`);
46
+ document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${smallRadius}px`);
47
+ document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : smallRadius}px`);
48
+ document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : smallRadius}px`);
49
+ document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : smallRadius}px`);
50
+ document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${smallRadius}px`);
51
+ document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${mediumRadius}px`);
52
+ document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);
53
+ document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${largeRadius}px`);
54
+ document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${smallRadius}px`);
55
+ };
56
+ //# sourceMappingURL=generateBorderRadii.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generateBorderRadii.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateBorderRadii.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,YAAY,EAA+B,EAAE,EAAE;IACnF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QAC3B,OAAO;IACT,CAAC;IAED,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,MAAM,UAAU,GAAG,IAAI,CAAC;IACxB,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,IAAI,MAAM,GAAG,KAAK,CAAC;IAEnB,QAAQ,YAAY,EAAE,CAAC;QACrB,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,MAAM,GAAG,IAAI,CAAC;YACd,WAAW,GAAG,CAAC,CAAC;YAChB,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,CAAC,CAAC;YAChB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,WAAW,GAAG,CAAC,CAAC;YAChB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,WAAW,GAAG,EAAE,CAAC;YACjB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,WAAW,GAAG,EAAE,CAAC;YACjB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;QACD,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,WAAW,GAAG,EAAE,CAAC;YACjB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM,GAAG,IAAI,CAAC;YACd,MAAM;QACR,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IACnH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IAC7F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IAClH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,qCAAqC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IAC5H,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,uCAAuC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IAC9H,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IACnG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IAC9F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC;IACxG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IAC/F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;AAClG,CAAC,CAAC","sourcesContent":["import { Theme } from '../../interface';\n\nexport const generateBorderRadii = ({ borderRadius }: Pick<Theme, 'borderRadius'>) => {\n if (!Boolean(borderRadius)) {\n return;\n }\n\n let smallRadius = 8;\n let mediumRadius = 16;\n let largeRadius = 24;\n const fullRadius = 1000;\n let isFull = false;\n let isNone = false;\n\n switch (borderRadius) {\n case 'none': {\n isNone = true;\n smallRadius = 0;\n mediumRadius = 0;\n largeRadius = 0;\n break;\n }\n case 'xs': {\n smallRadius = 4;\n mediumRadius = 12;\n largeRadius = 20;\n break;\n }\n case 'md': {\n smallRadius = 12;\n mediumRadius = 20;\n largeRadius = 28;\n break;\n }\n case 'lg': {\n smallRadius = 16;\n mediumRadius = 24;\n largeRadius = 32;\n break;\n }\n case 'full': {\n smallRadius = 16;\n mediumRadius = 24;\n largeRadius = 32;\n isFull = true;\n break;\n }\n }\n\n document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${largeRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${smallRadius}px`);\n};\n"]}
@@ -0,0 +1,28 @@
1
+ const FONT_NAME_MAP = {
2
+ body2XS: 'body-2xs',
3
+ bodyXS: 'body-xs',
4
+ bodyS: 'body-s',
5
+ bodyM: 'body-m',
6
+ bodyL: 'body-l',
7
+ bodyXL: 'body-xl',
8
+ headingXS: 'heading-xs',
9
+ headingS: 'heading-s',
10
+ headingM: 'heading-m',
11
+ headingL: 'heading-l',
12
+ headingXL: 'heading-xl',
13
+ heading2XL: 'heading-2xl',
14
+ };
15
+ export const generateFont = ({ font, customFontSizes }) => {
16
+ if (Boolean(font)) {
17
+ document.documentElement.style.setProperty('--cpsl-default-font', font);
18
+ }
19
+ Object.entries(FONT_NAME_MAP).forEach(([key, value]) => {
20
+ if (customFontSizes === null || customFontSizes === void 0 ? void 0 : customFontSizes[key]) {
21
+ document.documentElement.style.setProperty(`--cpsl-font-size-${value}`, customFontSizes[key]);
22
+ }
23
+ else {
24
+ document.documentElement.style.removeProperty(`--cpsl-font-size-${value}`);
25
+ }
26
+ });
27
+ };
28
+ //# sourceMappingURL=generateFont.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generateFont.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateFont.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,UAAU;IACnB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,eAAe,EAA2C,EAAE,EAAE;IACjG,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAClB,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;IAC1E,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QACrD,IAAI,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,GAAG,CAAC,EAAE,CAAC;YAC3B,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,KAAK,EAAE,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC;QAChG,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,KAAK,EAAE,CAAC,CAAC;QAC7E,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { Theme } from '../../interface';\n\nconst FONT_NAME_MAP = {\n body2XS: 'body-2xs',\n bodyXS: 'body-xs',\n bodyS: 'body-s',\n bodyM: 'body-m',\n bodyL: 'body-l',\n bodyXL: 'body-xl',\n headingXS: 'heading-xs',\n headingS: 'heading-s',\n headingM: 'heading-m',\n headingL: 'heading-l',\n headingXL: 'heading-xl',\n heading2XL: 'heading-2xl',\n};\n\nexport const generateFont = ({ font, customFontSizes }: Pick<Theme, 'font' | 'customFontSizes'>) => {\n if (Boolean(font)) {\n document.documentElement.style.setProperty('--cpsl-default-font', font);\n }\n\n Object.entries(FONT_NAME_MAP).forEach(([key, value]) => {\n if (customFontSizes?.[key]) {\n document.documentElement.style.setProperty(`--cpsl-font-size-${value}`, customFontSizes[key]);\n } else {\n document.documentElement.style.removeProperty(`--cpsl-font-size-${value}`);\n }\n });\n};\n"]}
@@ -0,0 +1,46 @@
1
+ import { mix, readableColorIsBlack } from "color2k";
2
+ import { getCssColors, isColor } from "./utils";
3
+ import { DEFAULT_THEME } from "../../constants";
4
+ const MIXES = [0, 0.08, 0.16, 0.32, 0.48, 0.64, 0.8, 0.96];
5
+ export const generatePalette = ({ foregroundColor, backgroundColor, customPalette }) => {
6
+ if (!Boolean(foregroundColor) || !isColor(foregroundColor)) {
7
+ foregroundColor = DEFAULT_THEME.foregroundColor;
8
+ }
9
+ if (!Boolean(backgroundColor) || !isColor(backgroundColor)) {
10
+ backgroundColor = DEFAULT_THEME.backgroundColor;
11
+ }
12
+ const isDarkBackground = !readableColorIsBlack(backgroundColor);
13
+ const palette = {
14
+ foregroundColors: [],
15
+ backgroundColors: [],
16
+ isDarkBackground,
17
+ };
18
+ const backgroundMixColor = isDarkBackground ? '#FFFFFF' : '#000000';
19
+ const foregroundMixColor = isDarkBackground ? '#000000' : '#FFFFFF';
20
+ MIXES.forEach(value => {
21
+ palette.foregroundColors.push(mix(foregroundColor, foregroundMixColor, value));
22
+ palette.backgroundColors.push(mix(backgroundColor, backgroundMixColor, value));
23
+ });
24
+ document.documentElement.style.setProperty('--cpsl-color-background-0', palette.backgroundColors[0]);
25
+ document.documentElement.style.setProperty('--cpsl-color-background-8', palette.backgroundColors[1]);
26
+ document.documentElement.style.setProperty('--cpsl-color-background-16', palette.backgroundColors[2]);
27
+ document.documentElement.style.setProperty('--cpsl-color-background-32', palette.backgroundColors[3]);
28
+ document.documentElement.style.setProperty('--cpsl-color-background-48', palette.backgroundColors[4]);
29
+ document.documentElement.style.setProperty('--cpsl-color-background-64', palette.backgroundColors[5]);
30
+ document.documentElement.style.setProperty('--cpsl-color-background-80', palette.backgroundColors[6]);
31
+ document.documentElement.style.setProperty('--cpsl-color-background-96', palette.backgroundColors[7]);
32
+ document.documentElement.style.setProperty('--cpsl-color-foreground-0', palette.foregroundColors[0]);
33
+ document.documentElement.style.setProperty('--cpsl-color-foreground-8', palette.foregroundColors[1]);
34
+ document.documentElement.style.setProperty('--cpsl-color-foreground-16', palette.foregroundColors[2]);
35
+ document.documentElement.style.setProperty('--cpsl-color-foreground-32', palette.foregroundColors[3]);
36
+ document.documentElement.style.setProperty('--cpsl-color-foreground-48', palette.foregroundColors[4]);
37
+ document.documentElement.style.setProperty('--cpsl-color-foreground-64', palette.foregroundColors[5]);
38
+ document.documentElement.style.setProperty('--cpsl-color-foreground-80', palette.foregroundColors[6]);
39
+ document.documentElement.style.setProperty('--cpsl-color-foreground-96', palette.foregroundColors[7]);
40
+ if (Boolean(customPalette)) {
41
+ const cssColorVars = getCssColors(customPalette);
42
+ Object.entries(cssColorVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
43
+ }
44
+ return palette;
45
+ };
46
+ //# sourceMappingURL=generatePalette.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generatePalette.js","sourceRoot":"","sources":["../../../../src/utils/theme/generatePalette.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, readableColorIsBlack } from 'color2k';\nimport { Theme } from '../../interface';\nimport { getCssColors, isColor } from './utils';\nimport { DEFAULT_THEME } from '../../constants';\n\nexport type Palette = {\n foregroundColors: string[];\n backgroundColors: string[];\n isDarkBackground: boolean;\n};\n\nconst MIXES = [0, 0.08, 0.16, 0.32, 0.48, 0.64, 0.8, 0.96];\n\nexport const generatePalette = ({ foregroundColor, backgroundColor, customPalette }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'customPalette'>): Palette => {\n if (!Boolean(foregroundColor) || !isColor(foregroundColor)) {\n foregroundColor = DEFAULT_THEME.foregroundColor;\n }\n if (!Boolean(backgroundColor) || !isColor(backgroundColor)) {\n backgroundColor = DEFAULT_THEME.backgroundColor;\n }\n\n const isDarkBackground = !readableColorIsBlack(backgroundColor);\n\n const palette: Palette = {\n foregroundColors: [],\n backgroundColors: [],\n isDarkBackground,\n };\n\n const backgroundMixColor = isDarkBackground ? '#FFFFFF' : '#000000';\n const foregroundMixColor = isDarkBackground ? '#000000' : '#FFFFFF';\n\n MIXES.forEach(value => {\n palette.foregroundColors.push(mix(foregroundColor, foregroundMixColor, value));\n palette.backgroundColors.push(mix(backgroundColor, backgroundMixColor, value));\n });\n\n // BACKGROUND\n document.documentElement.style.setProperty('--cpsl-color-background-0', palette.backgroundColors[0]);\n document.documentElement.style.setProperty('--cpsl-color-background-8', palette.backgroundColors[1]);\n document.documentElement.style.setProperty('--cpsl-color-background-16', palette.backgroundColors[2]);\n document.documentElement.style.setProperty('--cpsl-color-background-32', palette.backgroundColors[3]);\n document.documentElement.style.setProperty('--cpsl-color-background-48', palette.backgroundColors[4]);\n document.documentElement.style.setProperty('--cpsl-color-background-64', palette.backgroundColors[5]);\n document.documentElement.style.setProperty('--cpsl-color-background-80', palette.backgroundColors[6]);\n document.documentElement.style.setProperty('--cpsl-color-background-96', palette.backgroundColors[7]);\n\n // FOREGROUND\n document.documentElement.style.setProperty('--cpsl-color-foreground-0', palette.foregroundColors[0]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-8', palette.foregroundColors[1]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-16', palette.foregroundColors[2]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-32', palette.foregroundColors[3]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-48', palette.foregroundColors[4]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-64', palette.foregroundColors[5]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-80', palette.foregroundColors[6]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-96', palette.foregroundColors[7]);\n\n if (Boolean(customPalette)) {\n const cssColorVars = getCssColors(customPalette);\n Object.entries(cssColorVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));\n }\n\n return palette;\n};\n"]}
@@ -0,0 +1,11 @@
1
+ import { DEFAULT_THEME } from "../../constants";
2
+ import { generateBorderRadii } from "./generateBorderRadii";
3
+ import { generateFont } from "./generateFont";
4
+ import { generatePalette } from "./generatePalette";
5
+ export const generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius, customFontSizes, }) => {
6
+ const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });
7
+ generateFont({ font, customFontSizes });
8
+ generateBorderRadii({ borderRadius });
9
+ return palette.isDarkBackground;
10
+ };
11
+ //# sourceMappingURL=generateTheme.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generateTheme.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,eAAe,GACT,EAAW,EAAE;IACnB,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;IAErF,YAAY,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;IAExC,mBAAmB,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;IAEtC,OAAO,OAAO,CAAC,gBAAgB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { DEFAULT_THEME } from '../../constants';\nimport { Theme } from '../../interface';\nimport { generateBorderRadii } from './generateBorderRadii';\nimport { generateFont } from './generateFont';\nimport { generatePalette } from './generatePalette';\n\n/**\n * Generates css theme variables.\n * @returns @boolean Whether background is dark or not.\n */\nexport const generateTheme = ({\n foregroundColor = DEFAULT_THEME.foregroundColor,\n backgroundColor = DEFAULT_THEME.backgroundColor,\n font,\n customPalette,\n borderRadius,\n customFontSizes,\n}: Theme): boolean => {\n const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });\n\n generateFont({ font, customFontSizes });\n\n generateBorderRadii({ borderRadius });\n\n return palette.isDarkBackground;\n};\n"]}
@@ -0,0 +1,21 @@
1
+ export const isColor = strColor => {
2
+ const s = new Option().style;
3
+ s.color = strColor;
4
+ return s.color !== '';
5
+ };
6
+ const toKebabCase = (pascal) => pascal.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase();
7
+ const buildVars = (prev, obj) => {
8
+ let resp = {};
9
+ for (const k in obj) {
10
+ const name = `${prev}-${toKebabCase(k)}`;
11
+ if (typeof obj[k] === 'object' && obj[k] !== null) {
12
+ resp = Object.assign(Object.assign({}, resp), buildVars(name, obj[k]));
13
+ }
14
+ else {
15
+ resp[name] = obj[k];
16
+ }
17
+ }
18
+ return resp;
19
+ };
20
+ export const getCssColors = (customPalette) => buildVars('--cpsl-color', customPalette);
21
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/utils/theme/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAE;IAChC,MAAM,CAAC,GAAG,IAAI,MAAM,EAAE,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC;IACnB,OAAO,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AAGpG,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,GAAQ,EAA2B,EAAE;IACpE,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QACpB,MAAM,IAAI,GAAG,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;YAClD,IAAI,mCAAQ,IAAI,GAAK,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,aAA4B,EAA2B,EAAE,CAAC,SAAS,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC","sourcesContent":["import { CustomPalette } from '../../interface';\n\nexport const isColor = strColor => {\n const s = new Option().style;\n s.color = strColor;\n return s.color !== '';\n};\n\nconst toKebabCase = (pascal: string) => pascal.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// This function handles arrays and objects\nconst buildVars = (prev: string, obj: any): { [k: string]: string } => {\n let resp = {};\n\n for (const k in obj) {\n const name = `${prev}-${toKebabCase(k)}`;\n if (typeof obj[k] === 'object' && obj[k] !== null) {\n resp = { ...resp, ...buildVars(name, obj[k]) };\n } else {\n resp[name] = obj[k];\n }\n }\n\n return resp;\n};\n\nexport const getCssColors = (customPalette: CustomPalette): { [k: string]: string } => buildVars('--cpsl-color', customPalette);\n"]}
@@ -0,0 +1,9 @@
1
+ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
2
+
3
+ function getDefaultExportFromCjs (x) {
4
+ return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
5
+ }
6
+
7
+ export { commonjsGlobal as c, getDefaultExportFromCjs as g };
8
+
9
+ //# sourceMappingURL=_commonjsHelpers-1789f0cf.js.map
@@ -0,0 +1 @@
1
+ {"file":"_commonjsHelpers-1789f0cf.js","mappings":";;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
@@ -1,5 +1,5 @@
1
- import { p as promiseResolve, b as bootstrapLazy } from './index-7c2f5cb9.js';
2
- export { s as setNonce } from './index-7c2f5cb9.js';
1
+ import { p as promiseResolve, b as bootstrapLazy } from './index-f00e090c.js';
2
+ export { s as setNonce } from './index-f00e090c.js';
3
3
  import { g as globalScripts } from './app-globals-0f993ce5.js';
4
4
 
5
5
  /*
@@ -16,7 +16,7 @@ const patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["cpsl-col",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_17",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-modal",{"footerExpanded":[4,"footer-expanded"],"transitionDuration":[2,"transition-duration"],"noFooter":[32]},null,{"footerExpanded":["toggleHeight"]}],[1,"cpsl-overlay",{"open":[4],"transitionDuration":[2,"transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text"],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
19
+ return bootstrapLazy([["cpsl-animation",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_18",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"items":[16],"isOpen":[32],"selectedItem":[32]},null,{"isOpen":["handleOpenChange"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-overlay",{"open":[4],"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
20
20
  });
21
21
 
22
22
  //# sourceMappingURL=capsule.js.map
@@ -0,0 +1,9 @@
1
+ const MOBILE_SIZE = 480;
2
+ const DEFAULT_THEME = {
3
+ foregroundColor: '#121212',
4
+ backgroundColor: '#FAFAFA',
5
+ };
6
+
7
+ export { DEFAULT_THEME as D, MOBILE_SIZE as M };
8
+
9
+ //# sourceMappingURL=constants-7b49abd5.js.map
@@ -0,0 +1 @@
1
+ {"file":"constants-7b49abd5.js","mappings":"MAEa,WAAW,GAAG,IAAI;MAElB,aAAa,GAAU;IAClC,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;;;;;","names":[],"sources":["src/constants.ts"],"sourcesContent":["import { Theme } from './interface';\n\nexport const MOBILE_SIZE = 480;\n\nexport const DEFAULT_THEME: Theme = {\n foregroundColor: '#121212',\n backgroundColor: '#FAFAFA',\n};\n"],"version":3}