@incodetech/web 0.0.0-dev-20260313-82ba0ca → 0.0.0-dev-20260313-2675d26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/ekyb/styles.css +79 -46
  2. package/dist/{ekybModule-C3Ujm2Yw.js → ekybModule-DY0tTRTg.js} +56 -56
  3. package/dist/ekyc/styles.css +206 -135
  4. package/dist/{ekycModule-BSb0VO0K.js → ekycModule-C6M5lSNt.js} +134 -134
  5. package/dist/flow/flow.es.js +2 -2
  6. package/dist/flow/styles.css +239 -181
  7. package/dist/themes/dark.css +11 -0
  8. package/dist/themes/light.css +11 -0
  9. package/package.json +2 -2
package/dist/ekyc/styles.css CHANGED
@@ -1,156 +1,174 @@
1
1
  /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
2
+ @layer properties {
3
+ @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
4
+ *, :before, :after, ::backdrop {
5
+ --tw-font-weight: initial;
6
+ --tw-leading: initial;
7
+ --tw-border-style: solid;
8
+ }
9
+ }
10
+ }
11
+
2
12
  .IncodeEkycPage {
3
13
  max-width: 480px;
4
- margin: 0 auto;
14
+ margin-inline: auto;
5
15
  }
6
16
 
7
- .IncodeEkyc__form {
17
+ .IncodeEkycForm {
18
+ margin-top: var(--spacing-32, var(--spacing-32, 32px));
19
+ gap: var(--spacing-16, var(--spacing-16, 16px));
8
20
  flex-direction: column;
9
- gap: 16px;
10
21
  width: 100%;
11
- margin-top: 32px;
12
22
  display: flex;
13
23
  }
14
24
 
25
+ .IncodeEkycForm .IncodeInputComposed, .IncodeEkycForm .IncodeDropdownComposed, .IncodeEkycForm .IncodeDateInputComposed, .IncodeEkycForm .IncodeAddressAutocomplete {
26
+ margin-inline: auto;
27
+ }
28
+
29
+ .IncodeEkycForm .IncodeFormField {
30
+ margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
31
+ }
32
+
15
33
  @media (min-width: 768px) {
16
34
  .IncodePageContainer.IncodeEkycPage {
17
35
  height: 100dvh;
18
36
  max-height: none;
19
- margin-top: 0;
37
+ margin-top: var(--spacing-0, var(--spacing-none, 0px));
20
38
  }
21
39
 
22
40
  .IncodeEkycPage .IncodePageInner {
23
41
  height: 100%;
24
42
  }
25
43
 
26
- .IncodePageContainer.IncodeEkycPage--scrollable {
44
+ .IncodePageContainer.IncodeEkycPageScrollable {
27
45
  max-width: 500px;
28
46
  }
29
47
 
30
48
  .IncodeEkycPage .IncodePageContent {
31
- min-height: 0;
49
+ min-height: var(--spacing-0, var(--spacing-none, 0px));
32
50
  }
33
51
 
34
- .IncodeEkycPage .IncodeEkyc__form {
52
+ .IncodeEkycPage .IncodeEkycForm {
53
+ min-height: var(--spacing-0, var(--spacing-none, 0px));
54
+ padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
35
55
  flex: 1;
36
- min-height: 0;
37
- padding-bottom: 8px;
38
56
  overflow-y: auto;
39
57
  }
40
58
 
41
- .IncodeEkycPage--scrollable .IncodeEkyc__form {
42
- margin-left: 8px;
59
+ .IncodeEkycPageScrollable .IncodeEkycForm {
60
+ margin-left: var(--spacing-8, var(--spacing-8, 8px));
43
61
  }
44
62
 
45
- .IncodeEkyc__footer {
63
+ .IncodeEkycFooter {
46
64
  flex-shrink: 0;
47
65
  }
48
66
  }
49
67
 
50
- .IncodeEkyc__form .IncodeInputComposed, .IncodeEkyc__form .IncodeDropdownComposed, .IncodeEkyc__form .IncodeDateInputComposed, .IncodeEkyc__form .IncodeAddressAutocomplete {
51
- margin-left: auto;
52
- margin-right: auto;
53
- }
54
-
55
- .IncodeEkyc__form .IncodeFormField {
56
- margin-bottom: 0;
57
- }
58
-
59
- .IncodeEkycPage .IncodeEkyc__sectionHeader {
68
+ .IncodeEkycPage .IncodeEkycSectionHeader {
60
69
  font-family: var(--typography-headline-family);
61
70
  font-size: var(--typography-headline-h3-size);
62
71
  font-weight: var(--typography-headline-h3-weight);
63
72
  line-height: var(--typography-headline-h3-line-height);
64
73
  letter-spacing: var(--typography-headline-h3-letter-spacing);
65
- color: var(--color-text-body-primary, var(--text-body-800-primary));
74
+ --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
75
+ font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
76
+ color: var(--color-input-text-label-default, var(--input-text-label-default));
77
+ margin-inline: auto;
78
+ margin-top: var(--spacing-16, var(--spacing-16, 16px));
66
79
  width: 100%;
67
80
  max-width: 420px;
68
- margin: 16px auto 0;
69
- padding: 12px 0;
70
- font-weight: 700;
81
+ padding-block: var(--spacing-12, var(--spacing-12, 12px));
71
82
  }
72
83
 
73
- .IncodeEkyc__radioGroup {
84
+ .IncodeEkycRadioGroup {
74
85
  width: 100%;
75
86
  max-width: 420px;
76
- margin-left: auto;
77
- margin-right: auto;
87
+ margin-inline: auto;
78
88
  }
79
89
 
80
- .IncodeEkyc__radioLabel {
81
- color: var(--input-text-label-default, #262831);
82
- margin-bottom: 8px;
83
- font-size: 14px;
84
- font-weight: 700;
85
- line-height: 14px;
90
+ .IncodeEkycRadioLabel {
91
+ margin-bottom: var(--spacing-8, var(--spacing-8, 8px));
92
+ font-size: var(--text-14, var(--primitive-typography-size-14));
93
+ --tw-leading: 1;
94
+ --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
95
+ line-height: 1;
96
+ font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
97
+ color: var(--color-input-text-label-default, var(--input-text-label-default));
86
98
  display: block;
87
99
  }
88
100
 
89
- .IncodeEkyc__radioOptions {
90
- gap: 24px;
101
+ .IncodeEkycRadioOptions {
102
+ gap: var(--spacing-24, var(--spacing-24, 24px));
91
103
  display: flex;
92
104
  }
93
105
 
94
- .IncodeEkyc__radioOption {
95
- color: var(--radio-button-text-default, var(--text-body-800-primary, #262831));
106
+ .IncodeEkycRadioOption {
96
107
  cursor: pointer;
97
108
  align-items: center;
98
- gap: 12px;
99
- font-size: 16px;
100
- font-weight: 500;
101
- line-height: 16px;
109
+ gap: var(--spacing-12, var(--spacing-12, 12px));
110
+ font-size: var(--text-16, var(--primitive-typography-size-16));
111
+ --tw-leading: 1;
112
+ --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
113
+ line-height: 1;
114
+ font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
115
+ color: var(--color-radio-button-text-default, var(--radio-button-text-default));
102
116
  display: flex;
103
117
  }
104
118
 
105
- .IncodeEkyc__radioOption input[type="radio"] {
106
- appearance: none;
107
- border: 2px solid var(--radio-button-border-default, #82879a);
108
- background: var(--radio-button-surface-default, #fcfcfd);
119
+ .IncodeEkycRadioOption input[type="radio"] {
120
+ margin: var(--spacing-0, var(--spacing-none, 0px));
109
121
  cursor: pointer;
110
- border-radius: 9999px;
122
+ border-radius: var(--radius-full, var(--border-radius-full));
123
+ border-style: var(--tw-border-style);
124
+ border-width: var(--border-width-bold, var(--primitive-border-width-2));
125
+ border-color: var(--color-radio-button-border-default, var(--radio-button-border-default));
126
+ background-color: var(--color-radio-button-surface-default, var(--radio-button-surface-default));
127
+ appearance: none;
111
128
  width: 28px;
112
129
  min-width: 28px;
113
130
  height: 28px;
114
131
  min-height: 28px;
115
- margin: 0;
116
132
  position: relative;
117
133
  }
118
134
 
119
- .IncodeEkyc__radioOption input[type="radio"]:after {
120
- content: "";
135
+ .IncodeEkycRadioOption input[type="radio"]:after {
136
+ inset: var(--spacing-0, var(--spacing-none, 0px));
137
+ border-radius: var(--radius-full, var(--border-radius-full));
121
138
  opacity: 0;
122
- background: #fff;
123
- border-radius: 9999px;
139
+ content: "";
140
+ background-color: var(--color-radio-button-icon-default, var(--radio-button-icon-default));
124
141
  width: 10px;
125
142
  height: 10px;
126
143
  margin: auto;
127
144
  display: block;
128
145
  position: absolute;
129
- inset: 0;
130
146
  }
131
147
 
132
- .IncodeEkyc__radioOption input[type="radio"]:checked {
133
- border-color: var(--radio-button-surface-selected, #006aff);
134
- background: var(--radio-button-surface-selected, #006aff);
148
+ .IncodeEkycRadioOption input[type="radio"]:checked {
149
+ border-color: var(--color-radio-button-border-selected, var(--radio-button-border-selected));
150
+ background-color: var(--color-radio-button-surface-selected, var(--radio-button-surface-selected));
135
151
  }
136
152
 
137
- .IncodeEkyc__radioOption input[type="radio"]:checked:after {
153
+ .IncodeEkycRadioOption input[type="radio"]:checked:after {
138
154
  opacity: 1;
139
155
  }
140
156
 
141
- .IncodeEkyc__fieldError {
142
- color: var(--input-text-helper-negative, #dc2626);
143
- margin-top: 8px;
144
- font-size: 14px;
157
+ .IncodeEkycFieldError {
158
+ margin-top: var(--spacing-8, var(--spacing-8, 8px));
159
+ font-size: var(--text-14, var(--primitive-typography-size-14));
160
+ color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
145
161
  display: block;
146
162
  }
147
163
 
148
- .IncodeEkyc__submitError {
149
- color: var(--input-text-helper-negative, #dc2626);
164
+ .IncodeEkycSubmitError {
165
+ margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
150
166
  text-align: center;
151
- margin: 0 0 12px;
152
- font-size: 16px;
153
- font-weight: 500;
167
+ font-size: var(--text-16, var(--primitive-typography-size-16));
168
+ --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
169
+ font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
170
+ color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
171
+ margin-top: 0;
154
172
  }
155
173
 
156
174
  .IncodeAddressAutocomplete {
@@ -158,125 +176,178 @@
158
176
  position: relative;
159
177
  }
160
178
 
161
- .IncodeAddressAutocomplete__suggestions {
179
+ .IncodeAddressAutocompleteSuggestions {
180
+ right: var(--spacing-0, var(--spacing-none, 0px));
181
+ left: var(--spacing-0, var(--spacing-none, 0px));
162
182
  z-index: 10;
163
- background: var(--surface-neutral-0, #fff);
164
- border: 1px solid var(--input-border-default, #82879a);
165
- border-radius: 8px;
183
+ margin-top: var(--spacing-8, var(--spacing-8, 8px));
166
184
  max-height: 200px;
167
- margin: 8px 0 0;
168
- padding: 0;
169
- list-style: none;
185
+ padding: var(--spacing-0, var(--spacing-none, 0px));
186
+ border-radius: var(--radius-small, var(--border-radius-small));
187
+ border-style: var(--tw-border-style);
188
+ border-width: 1px;
189
+ border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
190
+ background-color: var(--color-dropdown-surface-default, var(--dropdown-surface-default));
191
+ list-style-type: none;
170
192
  position: absolute;
171
193
  top: 100%;
172
- left: 0;
173
- right: 0;
174
194
  overflow-y: auto;
175
195
  box-shadow: 0 2px 8px #00000026;
176
196
  }
177
197
 
178
- .IncodeAddressAutocomplete__suggestion {
198
+ .IncodeAddressAutocompleteSuggestion {
179
199
  cursor: pointer;
180
- color: var(--text-body-800-primary, #262831);
181
- border-bottom: 1px solid var(--input-border-default, #82879a);
182
- padding: 12px 16px;
183
- font-size: 16px;
184
- font-weight: 500;
200
+ border-bottom-style: var(--tw-border-style);
201
+ border-bottom-width: 1px;
202
+ border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
203
+ padding-inline: var(--spacing-16, var(--spacing-16, 16px));
204
+ padding-block: var(--spacing-12, var(--spacing-12, 12px));
205
+ font-size: var(--text-16, var(--primitive-typography-size-16));
206
+ --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
207
+ font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
208
+ color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
185
209
  }
186
210
 
187
- .IncodeAddressAutocomplete__suggestion:last-child {
188
- border-bottom: none;
211
+ .IncodeAddressAutocompleteSuggestion:last-child {
212
+ border-bottom-style: var(--tw-border-style);
213
+ border-bottom-width: 0;
189
214
  }
190
215
 
191
- .IncodeAddressAutocomplete__suggestion:hover {
192
- background: var(--surface-neutral-100, #f5f5f7);
216
+ .IncodeAddressAutocompleteSuggestion:hover {
217
+ background-color: var(--color-surface-neutral-100, var(--surface-neutral-100));
193
218
  }
194
219
 
195
- .IncodeAddressAutocomplete__modalOverlay {
220
+ .IncodeAddressAutocompleteModalOverlay {
221
+ inset: var(--spacing-0, var(--spacing-none, 0px));
196
222
  z-index: 50;
197
- background: #00000080;
223
+ background-color: var(--color-surface-neutral-1000, var(--surface-neutral-1000));
198
224
  align-items: flex-end;
199
225
  display: flex;
200
226
  position: fixed;
201
- inset: 0;
202
227
  }
203
228
 
204
- .IncodeAddressAutocomplete__modal {
205
- background: var(--surface-primary, #fff);
206
- border-radius: 1rem 1rem 0 0;
229
+ @supports (color: color-mix(in lab, red, red)) {
230
+ .IncodeAddressAutocompleteModalOverlay {
231
+ background-color: color-mix(in oklab, var(--color-surface-neutral-1000, var(--surface-neutral-1000)) 50%, transparent);
232
+ }
233
+ }
234
+
235
+ .IncodeAddressAutocompleteModal {
236
+ background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
237
+ border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
207
238
  flex-direction: column;
208
239
  width: 100%;
209
240
  max-height: 90vh;
210
241
  display: flex;
211
242
  }
212
243
 
213
- .IncodeAddressAutocomplete__modalHeader {
214
- border-bottom: 1px solid var(--input-border-default, #e5e7eb);
244
+ .IncodeAddressAutocompleteModalHeader {
245
+ border-bottom-style: var(--tw-border-style);
246
+ border-bottom-width: 1px;
247
+ border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
248
+ padding-inline: var(--spacing-24, var(--spacing-24, 24px));
249
+ padding-block: var(--spacing-16, var(--spacing-16, 16px));
215
250
  justify-content: space-between;
216
251
  align-items: center;
217
- padding: 1rem 1.5rem;
218
252
  display: flex;
219
253
  }
220
254
 
221
- .IncodeAddressAutocomplete__modalHeader h3 {
222
- margin: 0;
223
- font-size: 1.125rem;
224
- font-weight: 600;
255
+ .IncodeAddressAutocompleteModalHeader h3 {
256
+ margin: var(--spacing-0, var(--spacing-none, 0px));
257
+ font-size: var(--text-18, var(--primitive-typography-size-18));
258
+ --tw-font-weight: var(--font-weight-semibold, var(--primitive-typography-weight-semibold));
259
+ font-weight: var(--font-weight-semibold, var(--primitive-typography-weight-semibold));
260
+ color: var(--color-input-text-label-default, var(--input-text-label-default));
225
261
  }
226
262
 
227
- .IncodeAddressAutocomplete__modalClose {
263
+ .IncodeAddressAutocompleteModalClose {
228
264
  cursor: pointer;
229
- color: var(--text-secondary, #6b7280);
230
- background: none;
231
- border: none;
232
- padding: 0;
233
- font-size: 1.5rem;
265
+ border-style: var(--tw-border-style);
266
+ border-width: var(--border-width-none, var(--primitive-border-width-0));
267
+ --tw-border-style: none;
268
+ padding: var(--spacing-0, var(--spacing-none, 0px));
269
+ font-size: var(--text-24, var(--primitive-typography-size-24));
270
+ --tw-leading: 1;
271
+ color: var(--color-text-body-secondary, var(--text-body-500-secondary));
272
+ background-color: #0000;
273
+ border-style: none;
234
274
  line-height: 1;
235
275
  }
236
276
 
237
- .IncodeAddressAutocomplete__modalBody {
277
+ .IncodeAddressAutocompleteModalBody {
278
+ padding-inline: var(--spacing-24, var(--spacing-24, 24px));
279
+ padding-block: var(--spacing-16, var(--spacing-16, 16px));
238
280
  flex: 1;
239
- padding: 1rem 1.5rem;
240
281
  overflow-y: auto;
241
282
  }
242
283
 
243
- .IncodeAddressAutocomplete__modalInput {
244
- border: 1px solid var(--input-border-default, #d1d5db);
245
- border-radius: .375rem;
246
- outline: none;
284
+ .IncodeAddressAutocompleteModalInput {
285
+ margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
286
+ border-radius: var(--radius-small, var(--border-radius-small));
287
+ border-style: var(--tw-border-style);
288
+ border-width: 1px;
289
+ border-color: var(--color-input-border-default, var(--input-border-default));
290
+ background-color: var(--color-input-surface-default, var(--input-surface-default));
247
291
  width: 100%;
248
- margin-bottom: .75rem;
249
- padding: .75rem 1rem;
250
- font-size: 1rem;
292
+ padding-inline: var(--spacing-16, var(--spacing-16, 16px));
293
+ padding-block: var(--spacing-12, var(--spacing-12, 12px));
294
+ font-size: var(--text-16, var(--primitive-typography-size-16));
295
+ color: var(--color-input-text-field-default, var(--input-text-field-default));
296
+ --tw-outline-style: none;
297
+ outline-style: none;
298
+ }
299
+
300
+ .IncodeAddressAutocompleteModalInput::placeholder {
301
+ color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
251
302
  }
252
303
 
253
- .IncodeAddressAutocomplete__modalInput:focus {
254
- border-color: var(--button-primary-surface-default, #3b82f6);
304
+ .IncodeAddressAutocompleteModalInput:focus {
305
+ border-color: var(--color-input-border-active, var(--input-border-active));
255
306
  }
256
307
 
257
- .IncodeAddressAutocomplete__modalSuggestions {
258
- margin: 0;
259
- padding: 0;
260
- list-style: none;
308
+ .IncodeAddressAutocompleteModalSuggestions {
309
+ margin: var(--spacing-0, var(--spacing-none, 0px));
310
+ padding: var(--spacing-0, var(--spacing-none, 0px));
311
+ list-style-type: none;
261
312
  }
262
313
 
263
- .IncodeAddressAutocomplete__modalSuggestion {
314
+ .IncodeAddressAutocompleteModalSuggestion {
264
315
  cursor: pointer;
265
- color: var(--text-primary, #111827);
266
- border-bottom: 1px solid var(--input-border-default, #f3f4f6);
267
- padding: .75rem 0;
268
- font-size: .875rem;
316
+ border-bottom-style: var(--tw-border-style);
317
+ border-bottom-width: 1px;
318
+ border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
319
+ padding-block: var(--spacing-12, var(--spacing-12, 12px));
320
+ font-size: var(--text-14, var(--primitive-typography-size-14));
321
+ color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
269
322
  }
270
323
 
271
- .IncodeAddressAutocomplete__enterManually {
272
- border: 1px solid var(--input-border-default, #d1d5db);
273
- width: 100%;
274
- color: var(--text-secondary, #6b7280);
324
+ .IncodeAddressAutocompleteEnterManually {
325
+ margin-top: var(--spacing-12, var(--spacing-12, 12px));
275
326
  cursor: pointer;
327
+ border-radius: var(--radius-small, var(--border-radius-small));
328
+ border-style: var(--tw-border-style);
329
+ border-width: 1px;
330
+ border-color: var(--color-button-secondary-border-default, var(--button-secondary-border-default));
331
+ width: 100%;
332
+ padding: var(--spacing-12, var(--spacing-12, 12px));
276
333
  text-align: center;
277
- background: none;
278
- border-radius: .375rem;
279
- margin-top: .75rem;
280
- padding: .75rem;
281
- font-size: .875rem;
334
+ font-size: var(--text-14, var(--primitive-typography-size-14));
335
+ color: var(--color-button-secondary-text-default, var(--button-secondary-text-default));
336
+ background-color: #0000;
337
+ }
338
+
339
+ @property --tw-font-weight {
340
+ syntax: "*";
341
+ inherits: false
342
+ }
343
+
344
+ @property --tw-leading {
345
+ syntax: "*";
346
+ inherits: false
347
+ }
348
+
349
+ @property --tw-border-style {
350
+ syntax: "*";
351
+ inherits: false;
352
+ initial-value: solid;
282
353
  }