@worldcoin/idkit 2.4.2 → 4.0.0-dev.fe98789

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.
package/build/index.js DELETED
@@ -1,2285 +0,0 @@
1
- import {
2
- QRCode_default,
3
- __,
4
- getCurrentLanguage,
5
- getLocalizationConfig,
6
- getSupportedLanguages,
7
- idkit_default,
8
- setLocalizationConfig
9
- } from "./chunk-PWFTYFSZ.js";
10
-
11
- // src/hooks/useIDKit.ts
12
- import { useEffect } from "react";
13
- var getStore = ({ open, onOpenChange, addSuccessCallback, addVerificationCallback }) => ({
14
- open,
15
- onOpenChange,
16
- addSuccessCallback,
17
- addVerificationCallback
18
- });
19
- var useIDKit = ({ handleVerify, onSuccess } = {}) => {
20
- const { open, onOpenChange, addSuccessCallback, addVerificationCallback } = idkit_default(getStore);
21
- useEffect(() => {
22
- if (onSuccess) addSuccessCallback(onSuccess, "hook" /* HOOK */);
23
- if (handleVerify) addVerificationCallback(handleVerify, "hook" /* HOOK */);
24
- }, [handleVerify, onSuccess]);
25
- return { open, setOpen: onOpenChange };
26
- };
27
- var useIDKit_default = useIDKit;
28
-
29
- // src/components/IDKitWidget/index.tsx
30
- import { memo } from "react";
31
-
32
- // src/hooks/useMedia.ts
33
- import { useEffect as useEffect2, useState } from "react";
34
- var useMedia = () => {
35
- const getInitialState = () => {
36
- if (typeof window !== "undefined") {
37
- return window.matchMedia("(max-width: 1024px)").matches ? "mobile" : "desktop";
38
- }
39
- return "desktop";
40
- };
41
- const [media, setMedia] = useState(getInitialState());
42
- useEffect2(() => {
43
- const mql = window.matchMedia("(max-width: 1024px)");
44
- const handleChange = (mql2) => setMedia(mql2.matches ? "mobile" : "desktop");
45
- handleChange(mql);
46
- mql.addEventListener("change", handleChange);
47
- return () => {
48
- mql.removeEventListener("change", handleChange);
49
- };
50
- }, []);
51
- return media;
52
- };
53
- var useMedia_default = useMedia;
54
-
55
- // src/components/IDKitWidget/BaseWidget.tsx
56
- import { createPortal } from "react-dom";
57
-
58
- // src/styles/styles.css
59
- var styles_default = `/* Remote TWK Lausanne font definitions */
60
- @font-face {
61
- font-family: 'TWK Lausanne';
62
- src: url('https://world-id-assets.com/fonts/TWKLausanne-200.woff2') format('woff2');
63
- font-weight: 200;
64
- font-style: normal;
65
- font-display: swap;
66
- }
67
-
68
- @font-face {
69
- font-family: 'TWK Lausanne';
70
- src: url('https://world-id-assets.com/fonts/TWKLausanne-300.woff2') format('woff2');
71
- font-weight: 300;
72
- font-style: normal;
73
- font-display: swap;
74
- }
75
-
76
- @font-face {
77
- font-family: 'TWK Lausanne';
78
- src: url('https://world-id-assets.com/fonts/TWKLausanne-350.woff2') format('woff2');
79
- font-weight: 350;
80
- font-style: normal;
81
- font-display: swap;
82
- }
83
-
84
- @font-face {
85
- font-family: 'TWK Lausanne';
86
- src: url('https://world-id-assets.com/fonts/TWKLausanne-400.woff2') format('woff2');
87
- font-weight: 400;
88
- font-style: normal;
89
- font-display: swap;
90
- }
91
-
92
- @font-face {
93
- font-family: 'TWK Lausanne';
94
- src: url('https://world-id-assets.com/fonts/TWKLausanne-450.woff2') format('woff2');
95
- font-weight: 450;
96
- font-style: normal;
97
- font-display: swap;
98
- }
99
-
100
- @font-face {
101
- font-family: 'TWK Lausanne';
102
- src: url('https://world-id-assets.com/fonts/TWKLausanne-500.woff2') format('woff2');
103
- font-weight: 500;
104
- font-style: normal;
105
- font-display: swap;
106
- }
107
-
108
- @font-face {
109
- font-family: 'TWK Lausanne';
110
- src: url('https://world-id-assets.com/fonts/TWKLausanne-550.woff2') format('woff2');
111
- font-weight: 550;
112
- font-style: normal;
113
- font-display: swap;
114
- }
115
-
116
- @font-face {
117
- font-family: 'TWK Lausanne';
118
- src: url('https://world-id-assets.com/fonts/TWKLausanne-600.woff2') format('woff2');
119
- font-weight: 600;
120
- font-style: normal;
121
- font-display: swap;
122
- }
123
-
124
- /* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
125
-
126
- /*
127
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
128
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
129
- */
130
-
131
- *,
132
- ::before,
133
- ::after {
134
- box-sizing: border-box; /* 1 */
135
- border-width: 0; /* 2 */
136
- border-style: solid; /* 2 */
137
- border-color: #e5e7eb; /* 2 */
138
- }
139
-
140
- ::before,
141
- ::after {
142
- --tw-content: '';
143
- }
144
-
145
- /*
146
- 1. Use a consistent sensible line-height in all browsers.
147
- 2. Prevent adjustments of font size after orientation changes in iOS.
148
- 3. Use a more readable tab size.
149
- 4. Use the user's configured \`sans\` font-family by default.
150
- 5. Use the user's configured \`sans\` font-feature-settings by default.
151
- 6. Use the user's configured \`sans\` font-variation-settings by default.
152
- 7. Disable tap highlights on iOS
153
- */
154
-
155
- html,
156
- :host {
157
- line-height: 1.5; /* 1 */
158
- -webkit-text-size-adjust: 100%; /* 2 */
159
- -moz-tab-size: 4; /* 3 */
160
- -o-tab-size: 4;
161
- tab-size: 4; /* 3 */
162
- font-family: TWK Lausanne, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
163
- font-feature-settings: normal; /* 5 */
164
- font-variation-settings: normal; /* 6 */
165
- -webkit-tap-highlight-color: transparent; /* 7 */
166
- }
167
-
168
- /*
169
- 1. Remove the margin in all browsers.
170
- 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element.
171
- */
172
-
173
- body {
174
- margin: 0; /* 1 */
175
- line-height: inherit; /* 2 */
176
- }
177
-
178
- /*
179
- 1. Add the correct height in Firefox.
180
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
181
- 3. Ensure horizontal rules are visible by default.
182
- */
183
-
184
- hr {
185
- height: 0; /* 1 */
186
- color: inherit; /* 2 */
187
- border-top-width: 1px; /* 3 */
188
- }
189
-
190
- /*
191
- Add the correct text decoration in Chrome, Edge, and Safari.
192
- */
193
-
194
- abbr:where([title]) {
195
- -webkit-text-decoration: underline dotted;
196
- text-decoration: underline dotted;
197
- }
198
-
199
- /*
200
- Remove the default font size and weight for headings.
201
- */
202
-
203
- h1,
204
- h2,
205
- h3,
206
- h4,
207
- h5,
208
- h6 {
209
- font-size: inherit;
210
- font-weight: inherit;
211
- }
212
-
213
- /*
214
- Reset links to optimize for opt-in styling instead of opt-out.
215
- */
216
-
217
- a {
218
- color: inherit;
219
- text-decoration: inherit;
220
- }
221
-
222
- /*
223
- Add the correct font weight in Edge and Safari.
224
- */
225
-
226
- b,
227
- strong {
228
- font-weight: bolder;
229
- }
230
-
231
- /*
232
- 1. Use the user's configured \`mono\` font-family by default.
233
- 2. Use the user's configured \`mono\` font-feature-settings by default.
234
- 3. Use the user's configured \`mono\` font-variation-settings by default.
235
- 4. Correct the odd \`em\` font sizing in all browsers.
236
- */
237
-
238
- code,
239
- kbd,
240
- samp,
241
- pre {
242
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
243
- font-feature-settings: normal; /* 2 */
244
- font-variation-settings: normal; /* 3 */
245
- font-size: 1em; /* 4 */
246
- }
247
-
248
- /*
249
- Add the correct font size in all browsers.
250
- */
251
-
252
- small {
253
- font-size: 80%;
254
- }
255
-
256
- /*
257
- Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
258
- */
259
-
260
- sub,
261
- sup {
262
- font-size: 75%;
263
- line-height: 0;
264
- position: relative;
265
- vertical-align: baseline;
266
- }
267
-
268
- sub {
269
- bottom: -0.25em;
270
- }
271
-
272
- sup {
273
- top: -0.5em;
274
- }
275
-
276
- /*
277
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
278
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
279
- 3. Remove gaps between table borders by default.
280
- */
281
-
282
- table {
283
- text-indent: 0; /* 1 */
284
- border-color: inherit; /* 2 */
285
- border-collapse: collapse; /* 3 */
286
- }
287
-
288
- /*
289
- 1. Change the font styles in all browsers.
290
- 2. Remove the margin in Firefox and Safari.
291
- 3. Remove default padding in all browsers.
292
- */
293
-
294
- button,
295
- input,
296
- optgroup,
297
- select,
298
- textarea {
299
- font-family: inherit; /* 1 */
300
- font-feature-settings: inherit; /* 1 */
301
- font-variation-settings: inherit; /* 1 */
302
- font-size: 100%; /* 1 */
303
- font-weight: inherit; /* 1 */
304
- line-height: inherit; /* 1 */
305
- letter-spacing: inherit; /* 1 */
306
- color: inherit; /* 1 */
307
- margin: 0; /* 2 */
308
- padding: 0; /* 3 */
309
- }
310
-
311
- /*
312
- Remove the inheritance of text transform in Edge and Firefox.
313
- */
314
-
315
- button,
316
- select {
317
- text-transform: none;
318
- }
319
-
320
- /*
321
- 1. Correct the inability to style clickable types in iOS and Safari.
322
- 2. Remove default button styles.
323
- */
324
-
325
- button,
326
- input:where([type='button']),
327
- input:where([type='reset']),
328
- input:where([type='submit']) {
329
- -webkit-appearance: button; /* 1 */
330
- background-color: transparent; /* 2 */
331
- background-image: none; /* 2 */
332
- }
333
-
334
- /*
335
- Use the modern Firefox focus style for all focusable elements.
336
- */
337
-
338
- :-moz-focusring {
339
- outline: auto;
340
- }
341
-
342
- /*
343
- Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
344
- */
345
-
346
- :-moz-ui-invalid {
347
- box-shadow: none;
348
- }
349
-
350
- /*
351
- Add the correct vertical alignment in Chrome and Firefox.
352
- */
353
-
354
- progress {
355
- vertical-align: baseline;
356
- }
357
-
358
- /*
359
- Correct the cursor style of increment and decrement buttons in Safari.
360
- */
361
-
362
- ::-webkit-inner-spin-button,
363
- ::-webkit-outer-spin-button {
364
- height: auto;
365
- }
366
-
367
- /*
368
- 1. Correct the odd appearance in Chrome and Safari.
369
- 2. Correct the outline style in Safari.
370
- */
371
-
372
- [type='search'] {
373
- -webkit-appearance: textfield; /* 1 */
374
- outline-offset: -2px; /* 2 */
375
- }
376
-
377
- /*
378
- Remove the inner padding in Chrome and Safari on macOS.
379
- */
380
-
381
- ::-webkit-search-decoration {
382
- -webkit-appearance: none;
383
- }
384
-
385
- /*
386
- 1. Correct the inability to style clickable types in iOS and Safari.
387
- 2. Change font properties to \`inherit\` in Safari.
388
- */
389
-
390
- ::-webkit-file-upload-button {
391
- -webkit-appearance: button; /* 1 */
392
- font: inherit; /* 2 */
393
- }
394
-
395
- /*
396
- Add the correct display in Chrome and Safari.
397
- */
398
-
399
- summary {
400
- display: list-item;
401
- }
402
-
403
- /*
404
- Removes the default spacing and border for appropriate elements.
405
- */
406
-
407
- blockquote,
408
- dl,
409
- dd,
410
- h1,
411
- h2,
412
- h3,
413
- h4,
414
- h5,
415
- h6,
416
- hr,
417
- figure,
418
- p,
419
- pre {
420
- margin: 0;
421
- }
422
-
423
- fieldset {
424
- margin: 0;
425
- padding: 0;
426
- }
427
-
428
- legend {
429
- padding: 0;
430
- }
431
-
432
- ol,
433
- ul,
434
- menu {
435
- list-style: none;
436
- margin: 0;
437
- padding: 0;
438
- }
439
-
440
- /*
441
- Reset default styling for dialogs.
442
- */
443
-
444
- dialog {
445
- padding: 0;
446
- }
447
-
448
- /*
449
- Prevent resizing textareas horizontally by default.
450
- */
451
-
452
- textarea {
453
- resize: vertical;
454
- }
455
-
456
- /*
457
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
458
- 2. Set the default placeholder color to the user's configured gray 400 color.
459
- */
460
-
461
- input::-moz-placeholder, textarea::-moz-placeholder {
462
- opacity: 1; /* 1 */
463
- color: #9ca3af; /* 2 */
464
- }
465
-
466
- input::placeholder,
467
- textarea::placeholder {
468
- opacity: 1; /* 1 */
469
- color: #9ca3af; /* 2 */
470
- }
471
-
472
- /*
473
- Set the default cursor for buttons.
474
- */
475
-
476
- button,
477
- [role="button"] {
478
- cursor: pointer;
479
- }
480
-
481
- /*
482
- Make sure disabled buttons don't get the pointer cursor.
483
- */
484
-
485
- :disabled {
486
- cursor: default;
487
- }
488
-
489
- /*
490
- 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
491
- 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
492
- This can trigger a poorly considered lint error in some tools but is included by design.
493
- */
494
-
495
- img,
496
- svg,
497
- video,
498
- canvas,
499
- audio,
500
- iframe,
501
- embed,
502
- object {
503
- display: block; /* 1 */
504
- vertical-align: middle; /* 2 */
505
- }
506
-
507
- /*
508
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
509
- */
510
-
511
- img,
512
- video {
513
- max-width: 100%;
514
- height: auto;
515
- }
516
-
517
- /* Make elements with the HTML hidden attribute stay hidden by default */
518
-
519
- [hidden] {
520
- display: none;
521
- }
522
-
523
- [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
524
- -webkit-appearance: none;
525
- -moz-appearance: none;
526
- appearance: none;
527
- background-color: #fff;
528
- border-color: #6b7280;
529
- border-width: 1px;
530
- border-radius: 0px;
531
- padding-top: 0.5rem;
532
- padding-right: 0.75rem;
533
- padding-bottom: 0.5rem;
534
- padding-left: 0.75rem;
535
- font-size: 1rem;
536
- line-height: 1.5rem;
537
- --tw-shadow: 0 0 #0000;
538
- }
539
-
540
- [type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
541
- outline: 2px solid transparent;
542
- outline-offset: 2px;
543
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
544
- --tw-ring-offset-width: 0px;
545
- --tw-ring-offset-color: #fff;
546
- --tw-ring-color: #2563eb;
547
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
548
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
549
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
550
- border-color: #2563eb;
551
- }
552
-
553
- input::-moz-placeholder, textarea::-moz-placeholder {
554
- color: #6b7280;
555
- opacity: 1;
556
- }
557
-
558
- input::placeholder,textarea::placeholder {
559
- color: #6b7280;
560
- opacity: 1;
561
- }
562
-
563
- ::-webkit-datetime-edit-fields-wrapper {
564
- padding: 0;
565
- }
566
-
567
- ::-webkit-date-and-time-value {
568
- min-height: 1.5em;
569
- text-align: inherit;
570
- }
571
-
572
- ::-webkit-datetime-edit {
573
- display: inline-flex;
574
- }
575
-
576
- ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
577
- padding-top: 0;
578
- padding-bottom: 0;
579
- }
580
-
581
- select {
582
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
583
- background-position: right 0.5rem center;
584
- background-repeat: no-repeat;
585
- background-size: 1.5em 1.5em;
586
- padding-right: 2.5rem;
587
- -webkit-print-color-adjust: exact;
588
- print-color-adjust: exact;
589
- }
590
-
591
- [multiple],[size]:where(select:not([size="1"])) {
592
- background-image: initial;
593
- background-position: initial;
594
- background-repeat: unset;
595
- background-size: initial;
596
- padding-right: 0.75rem;
597
- -webkit-print-color-adjust: unset;
598
- print-color-adjust: unset;
599
- }
600
-
601
- [type='checkbox'],[type='radio'] {
602
- -webkit-appearance: none;
603
- -moz-appearance: none;
604
- appearance: none;
605
- padding: 0;
606
- -webkit-print-color-adjust: exact;
607
- print-color-adjust: exact;
608
- display: inline-block;
609
- vertical-align: middle;
610
- background-origin: border-box;
611
- -webkit-user-select: none;
612
- -moz-user-select: none;
613
- user-select: none;
614
- flex-shrink: 0;
615
- height: 1rem;
616
- width: 1rem;
617
- color: #2563eb;
618
- background-color: #fff;
619
- border-color: #6b7280;
620
- border-width: 1px;
621
- --tw-shadow: 0 0 #0000;
622
- }
623
-
624
- [type='checkbox'] {
625
- border-radius: 0px;
626
- }
627
-
628
- [type='radio'] {
629
- border-radius: 100%;
630
- }
631
-
632
- [type='checkbox']:focus,[type='radio']:focus {
633
- outline: 2px solid transparent;
634
- outline-offset: 2px;
635
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
636
- --tw-ring-offset-width: 2px;
637
- --tw-ring-offset-color: #fff;
638
- --tw-ring-color: #2563eb;
639
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
640
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
641
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
642
- }
643
-
644
- [type='checkbox']:checked,[type='radio']:checked {
645
- border-color: transparent;
646
- background-color: currentColor;
647
- background-size: 100% 100%;
648
- background-position: center;
649
- background-repeat: no-repeat;
650
- }
651
-
652
- [type='checkbox']:checked {
653
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
654
- }
655
-
656
- @media (forced-colors: active) {
657
- [type='checkbox']:checked {
658
- -webkit-appearance: auto;
659
- -moz-appearance: auto;
660
- appearance: auto;
661
- }
662
- }
663
-
664
- [type='radio']:checked {
665
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
666
- }
667
-
668
- @media (forced-colors: active) {
669
- [type='radio']:checked {
670
- -webkit-appearance: auto;
671
- -moz-appearance: auto;
672
- appearance: auto;
673
- }
674
- }
675
-
676
- [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
677
- border-color: transparent;
678
- background-color: currentColor;
679
- }
680
-
681
- [type='checkbox']:indeterminate {
682
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
683
- border-color: transparent;
684
- background-color: currentColor;
685
- background-size: 100% 100%;
686
- background-position: center;
687
- background-repeat: no-repeat;
688
- }
689
-
690
- @media (forced-colors: active) {
691
- [type='checkbox']:indeterminate {
692
- -webkit-appearance: auto;
693
- -moz-appearance: auto;
694
- appearance: auto;
695
- }
696
- }
697
-
698
- [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
699
- border-color: transparent;
700
- background-color: currentColor;
701
- }
702
-
703
- [type='file'] {
704
- background: unset;
705
- border-color: inherit;
706
- border-width: 0;
707
- border-radius: 0;
708
- padding: 0;
709
- font-size: unset;
710
- line-height: inherit;
711
- }
712
-
713
- [type='file']:focus {
714
- outline: 1px solid ButtonText;
715
- outline: 1px auto -webkit-focus-ring-color;
716
- }
717
-
718
- *, ::before, ::after {
719
- --tw-border-spacing-x: 0;
720
- --tw-border-spacing-y: 0;
721
- --tw-translate-x: 0;
722
- --tw-translate-y: 0;
723
- --tw-rotate: 0;
724
- --tw-skew-x: 0;
725
- --tw-skew-y: 0;
726
- --tw-scale-x: 1;
727
- --tw-scale-y: 1;
728
- --tw-pan-x: ;
729
- --tw-pan-y: ;
730
- --tw-pinch-zoom: ;
731
- --tw-scroll-snap-strictness: proximity;
732
- --tw-gradient-from-position: ;
733
- --tw-gradient-via-position: ;
734
- --tw-gradient-to-position: ;
735
- --tw-ordinal: ;
736
- --tw-slashed-zero: ;
737
- --tw-numeric-figure: ;
738
- --tw-numeric-spacing: ;
739
- --tw-numeric-fraction: ;
740
- --tw-ring-inset: ;
741
- --tw-ring-offset-width: 0px;
742
- --tw-ring-offset-color: #fff;
743
- --tw-ring-color: rgb(59 130 246 / 0.5);
744
- --tw-ring-offset-shadow: 0 0 #0000;
745
- --tw-ring-shadow: 0 0 #0000;
746
- --tw-shadow: 0 0 #0000;
747
- --tw-shadow-colored: 0 0 #0000;
748
- --tw-blur: ;
749
- --tw-brightness: ;
750
- --tw-contrast: ;
751
- --tw-grayscale: ;
752
- --tw-hue-rotate: ;
753
- --tw-invert: ;
754
- --tw-saturate: ;
755
- --tw-sepia: ;
756
- --tw-drop-shadow: ;
757
- --tw-backdrop-blur: ;
758
- --tw-backdrop-brightness: ;
759
- --tw-backdrop-contrast: ;
760
- --tw-backdrop-grayscale: ;
761
- --tw-backdrop-hue-rotate: ;
762
- --tw-backdrop-invert: ;
763
- --tw-backdrop-opacity: ;
764
- --tw-backdrop-saturate: ;
765
- --tw-backdrop-sepia: ;
766
- --tw-contain-size: ;
767
- --tw-contain-layout: ;
768
- --tw-contain-paint: ;
769
- --tw-contain-style: ;
770
- }
771
-
772
- ::backdrop {
773
- --tw-border-spacing-x: 0;
774
- --tw-border-spacing-y: 0;
775
- --tw-translate-x: 0;
776
- --tw-translate-y: 0;
777
- --tw-rotate: 0;
778
- --tw-skew-x: 0;
779
- --tw-skew-y: 0;
780
- --tw-scale-x: 1;
781
- --tw-scale-y: 1;
782
- --tw-pan-x: ;
783
- --tw-pan-y: ;
784
- --tw-pinch-zoom: ;
785
- --tw-scroll-snap-strictness: proximity;
786
- --tw-gradient-from-position: ;
787
- --tw-gradient-via-position: ;
788
- --tw-gradient-to-position: ;
789
- --tw-ordinal: ;
790
- --tw-slashed-zero: ;
791
- --tw-numeric-figure: ;
792
- --tw-numeric-spacing: ;
793
- --tw-numeric-fraction: ;
794
- --tw-ring-inset: ;
795
- --tw-ring-offset-width: 0px;
796
- --tw-ring-offset-color: #fff;
797
- --tw-ring-color: rgb(59 130 246 / 0.5);
798
- --tw-ring-offset-shadow: 0 0 #0000;
799
- --tw-ring-shadow: 0 0 #0000;
800
- --tw-shadow: 0 0 #0000;
801
- --tw-shadow-colored: 0 0 #0000;
802
- --tw-blur: ;
803
- --tw-brightness: ;
804
- --tw-contrast: ;
805
- --tw-grayscale: ;
806
- --tw-hue-rotate: ;
807
- --tw-invert: ;
808
- --tw-saturate: ;
809
- --tw-sepia: ;
810
- --tw-drop-shadow: ;
811
- --tw-backdrop-blur: ;
812
- --tw-backdrop-brightness: ;
813
- --tw-backdrop-contrast: ;
814
- --tw-backdrop-grayscale: ;
815
- --tw-backdrop-hue-rotate: ;
816
- --tw-backdrop-invert: ;
817
- --tw-backdrop-opacity: ;
818
- --tw-backdrop-saturate: ;
819
- --tw-backdrop-sepia: ;
820
- --tw-contain-size: ;
821
- --tw-contain-layout: ;
822
- --tw-contain-paint: ;
823
- --tw-contain-style: ;
824
- }
825
- .container {
826
- width: 100%;
827
- }
828
- @media (min-width: 414px) {
829
- .container {
830
- max-width: 414px;
831
- }
832
- }
833
- @media (min-width: 640px) {
834
- .container {
835
- max-width: 640px;
836
- }
837
- }
838
- @media (min-width: 768px) {
839
- .container {
840
- max-width: 768px;
841
- }
842
- }
843
- @media (min-width: 1024px) {
844
- .container {
845
- max-width: 1024px;
846
- }
847
- }
848
- @media (min-width: 1280px) {
849
- .container {
850
- max-width: 1280px;
851
- }
852
- }
853
- @media (min-width: 1536px) {
854
- .container {
855
- max-width: 1536px;
856
- }
857
- }
858
- .visible {
859
- visibility: visible;
860
- }
861
- .fixed {
862
- position: fixed;
863
- }
864
- .absolute {
865
- position: absolute;
866
- }
867
- .relative {
868
- position: relative;
869
- }
870
- .inset-0 {
871
- inset: 0;
872
- }
873
- .z-50 {
874
- z-index: 50;
875
- }
876
- .z-\\[9999\\] {
877
- z-index: 9999;
878
- }
879
- .mx-6 {
880
- margin-left: 24px;
881
- margin-right: 24px;
882
- }
883
- .mx-auto {
884
- margin-left: auto;
885
- margin-right: auto;
886
- }
887
- .-mt-5 {
888
- margin-top: -20px;
889
- }
890
- .-mt-6 {
891
- margin-top: -24px;
892
- }
893
- .mb-10 {
894
- margin-bottom: 40px;
895
- }
896
- .mb-3 {
897
- margin-bottom: 12px;
898
- }
899
- .mb-4 {
900
- margin-bottom: 16px;
901
- }
902
- .mb-6 {
903
- margin-bottom: 24px;
904
- }
905
- .mt-2 {
906
- margin-top: 8px;
907
- }
908
- .mt-3 {
909
- margin-top: 12px;
910
- }
911
- .mt-4 {
912
- margin-top: 16px;
913
- }
914
- .inline {
915
- display: inline;
916
- }
917
- .flex {
918
- display: flex;
919
- }
920
- .inline-flex {
921
- display: inline-flex;
922
- }
923
- .hidden {
924
- display: none;
925
- }
926
- .size-14 {
927
- width: 56px;
928
- height: 56px;
929
- }
930
- .size-24 {
931
- width: 96px;
932
- height: 96px;
933
- }
934
- .size-4 {
935
- width: 16px;
936
- height: 16px;
937
- }
938
- .size-5 {
939
- width: 20px;
940
- height: 20px;
941
- }
942
- .size-6 {
943
- width: 24px;
944
- height: 24px;
945
- }
946
- .size-8 {
947
- width: 32px;
948
- height: 32px;
949
- }
950
- .size-\\[200px\\] {
951
- width: 200px;
952
- height: 200px;
953
- }
954
- .min-h-full {
955
- min-height: 100%;
956
- }
957
- .min-h-screen {
958
- min-height: 100vh;
959
- }
960
- .w-24 {
961
- width: 96px;
962
- }
963
- .w-full {
964
- width: 100%;
965
- }
966
- .max-w-\\[224px\\] {
967
- max-width: 224px;
968
- }
969
- .max-w-\\[260px\\] {
970
- max-width: 260px;
971
- }
972
- .flex-1 {
973
- flex: 1 1 0%;
974
- }
975
- @keyframes pulse {
976
- 50% {
977
- opacity: .5;
978
- }
979
- }
980
- .animate-pulse {
981
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
982
- }
983
- @keyframes spin {
984
- to {
985
- transform: rotate(360deg);
986
- }
987
- }
988
- .animate-spin {
989
- animation: spin 1s linear infinite;
990
- }
991
- .cursor-pointer {
992
- cursor: pointer;
993
- }
994
- .flex-col {
995
- flex-direction: column;
996
- }
997
- .items-end {
998
- align-items: flex-end;
999
- }
1000
- .items-center {
1001
- align-items: center;
1002
- }
1003
- .justify-end {
1004
- justify-content: flex-end;
1005
- }
1006
- .justify-center {
1007
- justify-content: center;
1008
- }
1009
- .space-x-2 > :not([hidden]) ~ :not([hidden]) {
1010
- --tw-space-x-reverse: 0;
1011
- margin-right: calc(8px * var(--tw-space-x-reverse));
1012
- margin-left: calc(8px * calc(1 - var(--tw-space-x-reverse)));
1013
- }
1014
- .space-x-4 > :not([hidden]) ~ :not([hidden]) {
1015
- --tw-space-x-reverse: 0;
1016
- margin-right: calc(16px * var(--tw-space-x-reverse));
1017
- margin-left: calc(16px * calc(1 - var(--tw-space-x-reverse)));
1018
- }
1019
- .space-y-10 > :not([hidden]) ~ :not([hidden]) {
1020
- --tw-space-y-reverse: 0;
1021
- margin-top: calc(40px * calc(1 - var(--tw-space-y-reverse)));
1022
- margin-bottom: calc(40px * var(--tw-space-y-reverse));
1023
- }
1024
- .space-y-4 > :not([hidden]) ~ :not([hidden]) {
1025
- --tw-space-y-reverse: 0;
1026
- margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
1027
- margin-bottom: calc(16px * var(--tw-space-y-reverse));
1028
- }
1029
- .space-y-5 > :not([hidden]) ~ :not([hidden]) {
1030
- --tw-space-y-reverse: 0;
1031
- margin-top: calc(20px * calc(1 - var(--tw-space-y-reverse)));
1032
- margin-bottom: calc(20px * var(--tw-space-y-reverse));
1033
- }
1034
- .space-y-6 > :not([hidden]) ~ :not([hidden]) {
1035
- --tw-space-y-reverse: 0;
1036
- margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
1037
- margin-bottom: calc(24px * var(--tw-space-y-reverse));
1038
- }
1039
- .space-y-8 > :not([hidden]) ~ :not([hidden]) {
1040
- --tw-space-y-reverse: 0;
1041
- margin-top: calc(32px * calc(1 - var(--tw-space-y-reverse)));
1042
- margin-bottom: calc(32px * var(--tw-space-y-reverse));
1043
- }
1044
- .overflow-y-hidden {
1045
- overflow-y: hidden;
1046
- }
1047
- .rounded-2xl {
1048
- border-radius: 1rem;
1049
- }
1050
- .rounded-full {
1051
- border-radius: 9999px;
1052
- }
1053
- .rounded-lg {
1054
- border-radius: 0.5rem;
1055
- }
1056
- .border {
1057
- border-width: 1px;
1058
- }
1059
- .border-\\[1\\.2px\\] {
1060
- border-width: 1.2px;
1061
- }
1062
- .border-t {
1063
- border-top-width: 1px;
1064
- }
1065
- .border-solid {
1066
- border-style: solid;
1067
- }
1068
- .border-\\[\\#EBECEF\\] {
1069
- --tw-border-opacity: 1;
1070
- border-color: rgb(235 236 239 / var(--tw-border-opacity));
1071
- }
1072
- .border-ebecef {
1073
- --tw-border-opacity: 1;
1074
- border-color: rgb(235 236 239 / var(--tw-border-opacity));
1075
- }
1076
- .border-f1f5f8 {
1077
- --tw-border-opacity: 1;
1078
- border-color: rgb(241 245 248 / var(--tw-border-opacity));
1079
- }
1080
- .border-f5f5f7 {
1081
- --tw-border-opacity: 1;
1082
- border-color: rgb(245 245 247 / var(--tw-border-opacity));
1083
- }
1084
- .border-transparent {
1085
- border-color: transparent;
1086
- }
1087
- .bg-0d151d {
1088
- --tw-bg-opacity: 1;
1089
- background-color: rgb(13 21 29 / var(--tw-bg-opacity));
1090
- }
1091
- .bg-black\\/50 {
1092
- background-color: rgb(0 0 0 / 0.5);
1093
- }
1094
- .bg-transparent {
1095
- background-color: transparent;
1096
- }
1097
- .bg-white {
1098
- --tw-bg-opacity: 1;
1099
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1100
- }
1101
- .p-3 {
1102
- padding: 12px;
1103
- }
1104
- .p-4 {
1105
- padding: 16px;
1106
- }
1107
- .p-7 {
1108
- padding: 28px;
1109
- }
1110
- .px-2 {
1111
- padding-left: 8px;
1112
- padding-right: 8px;
1113
- }
1114
- .px-8 {
1115
- padding-left: 32px;
1116
- padding-right: 32px;
1117
- }
1118
- .py-1 {
1119
- padding-top: 4px;
1120
- padding-bottom: 4px;
1121
- }
1122
- .py-3 {
1123
- padding-top: 12px;
1124
- padding-bottom: 12px;
1125
- }
1126
- .pt-6 {
1127
- padding-top: 24px;
1128
- }
1129
- .text-center {
1130
- text-align: center;
1131
- }
1132
- .font-sans {
1133
- font-family: TWK Lausanne, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1134
- }
1135
- .text-2xl {
1136
- font-size: 24px;
1137
- line-height: 32px;
1138
- }
1139
- .text-lg {
1140
- font-size: 18px;
1141
- line-height: 28px;
1142
- }
1143
- .text-sm {
1144
- font-size: 14px;
1145
- line-height: 20px;
1146
- }
1147
- .text-xs {
1148
- font-size: 12px;
1149
- line-height: 16px;
1150
- }
1151
- .font-light {
1152
- font-weight: 300;
1153
- }
1154
- .font-medium {
1155
- font-weight: 500;
1156
- }
1157
- .font-semibold {
1158
- font-weight: 600;
1159
- }
1160
- .text-0d151d {
1161
- --tw-text-opacity: 1;
1162
- color: rgb(13 21 29 / var(--tw-text-opacity));
1163
- }
1164
- .text-29343f {
1165
- --tw-text-opacity: 1;
1166
- color: rgb(41 52 63 / var(--tw-text-opacity));
1167
- }
1168
- .text-3c424b {
1169
- --tw-text-opacity: 1;
1170
- color: rgb(60 66 75 / var(--tw-text-opacity));
1171
- }
1172
- .text-657080 {
1173
- --tw-text-opacity: 1;
1174
- color: rgb(101 112 128 / var(--tw-text-opacity));
1175
- }
1176
- .text-70868f {
1177
- --tw-text-opacity: 1;
1178
- color: rgb(112 134 143 / var(--tw-text-opacity));
1179
- }
1180
- .text-9ba3ae {
1181
- --tw-text-opacity: 1;
1182
- color: rgb(155 163 174 / var(--tw-text-opacity));
1183
- }
1184
- .text-9eafc0 {
1185
- --tw-text-opacity: 1;
1186
- color: rgb(158 175 192 / var(--tw-text-opacity));
1187
- }
1188
- .text-black {
1189
- --tw-text-opacity: 1;
1190
- color: rgb(0 0 0 / var(--tw-text-opacity));
1191
- }
1192
- .text-gray-900 {
1193
- --tw-text-opacity: 1;
1194
- color: rgb(17 24 39 / var(--tw-text-opacity));
1195
- }
1196
- .text-white {
1197
- --tw-text-opacity: 1;
1198
- color: rgb(255 255 255 / var(--tw-text-opacity));
1199
- }
1200
- .opacity-40 {
1201
- opacity: 0.4;
1202
- }
1203
- .shadow {
1204
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1205
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
1206
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1207
- }
1208
- .shadow-sm {
1209
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1210
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1211
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1212
- }
1213
- .blur-lg {
1214
- --tw-blur: blur(16px);
1215
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1216
- }
1217
- .filter {
1218
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1219
- }
1220
- .backdrop-blur-lg {
1221
- --tw-backdrop-blur: blur(16px);
1222
- -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
1223
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
1224
- }
1225
- .transition {
1226
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1227
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1228
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1229
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1230
- transition-duration: 150ms;
1231
- }
1232
- .duration-300 {
1233
- transition-duration: 300ms;
1234
- }
1235
- .duration-500 {
1236
- transition-duration: 500ms;
1237
- }
1238
- .ease-in-out {
1239
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1240
- }
1241
- input[type='number']::-webkit-inner-spin-button,
1242
- input[type='number']::-webkit-outer-spin-button {
1243
- -webkit-appearance: none;
1244
- appearance: none;
1245
- }
1246
- .hover\\:underline:hover {
1247
- text-decoration-line: underline;
1248
- }
1249
- .hover\\:shadow:hover {
1250
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1251
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
1252
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1253
- }
1254
- .focus\\:outline-none:focus {
1255
- outline: 2px solid transparent;
1256
- outline-offset: 2px;
1257
- }
1258
- .focus\\:ring-2:focus {
1259
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1260
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1261
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1262
- }
1263
- .focus\\:ring-indigo-500:focus {
1264
- --tw-ring-opacity: 1;
1265
- --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
1266
- }
1267
- .focus\\:ring-offset-2:focus {
1268
- --tw-ring-offset-width: 2px;
1269
- }
1270
- .focus-visible\\:ring:focus-visible {
1271
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1272
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1273
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1274
- }
1275
- .focus-visible\\:ring-purple-500\\/75:focus-visible {
1276
- --tw-ring-color: rgb(168 85 247 / 0.75);
1277
- }
1278
- .disabled\\:cursor-not-allowed:disabled {
1279
- cursor: not-allowed;
1280
- }
1281
- .disabled\\:opacity-40:disabled {
1282
- opacity: 0.4;
1283
- }
1284
- @media (prefers-reduced-motion: reduce) {
1285
- @keyframes spin {
1286
- to {
1287
- transform: rotate(360deg);
1288
- }
1289
- }
1290
- .motion-reduce\\:animate-\\[spin_1\\.5s_linear_infinite\\] {
1291
- animation: spin 1.5s linear infinite;
1292
- }
1293
- }
1294
- .dark\\:border-f1f5f8\\/10:is(.dark *) {
1295
- border-color: rgb(241 245 248 / 0.1);
1296
- }
1297
- .dark\\:bg-0d151d:is(.dark *) {
1298
- --tw-bg-opacity: 1;
1299
- background-color: rgb(13 21 29 / var(--tw-bg-opacity));
1300
- }
1301
- .dark\\:bg-white:is(.dark *) {
1302
- --tw-bg-opacity: 1;
1303
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1304
- }
1305
- .dark\\:text-0d151d:is(.dark *) {
1306
- --tw-text-opacity: 1;
1307
- color: rgb(13 21 29 / var(--tw-text-opacity));
1308
- }
1309
- .dark\\:text-9eafc0:is(.dark *) {
1310
- --tw-text-opacity: 1;
1311
- color: rgb(158 175 192 / var(--tw-text-opacity));
1312
- }
1313
- .dark\\:text-white:is(.dark *) {
1314
- --tw-text-opacity: 1;
1315
- color: rgb(255 255 255 / var(--tw-text-opacity));
1316
- }
1317
- @media (min-width: 768px) {
1318
- .md\\:mt-2 {
1319
- margin-top: 8px;
1320
- }
1321
- .md\\:block {
1322
- display: block;
1323
- }
1324
- .md\\:hidden {
1325
- display: none;
1326
- }
1327
- .md\\:min-h-\\[35rem\\] {
1328
- min-height: 35rem;
1329
- }
1330
- .md\\:max-w-md {
1331
- max-width: 448px;
1332
- }
1333
- .md\\:items-center {
1334
- align-items: center;
1335
- }
1336
- .md\\:overflow-y-auto {
1337
- overflow-y: auto;
1338
- }
1339
- .md\\:rounded-\\[24px\\] {
1340
- border-radius: 24px;
1341
- }
1342
- .md\\:rounded-b-2xl {
1343
- border-bottom-right-radius: 1rem;
1344
- border-bottom-left-radius: 1rem;
1345
- }
1346
- .md\\:p-4 {
1347
- padding: 16px;
1348
- }
1349
- }
1350
- @media (min-width: 1280px) {
1351
- .xl\\:block {
1352
- display: block;
1353
- }
1354
- .xl\\:hidden {
1355
- display: none;
1356
- }
1357
- }
1358
- `;
1359
-
1360
- // src/components/Styles.tsx
1361
- import { jsx } from "react/jsx-runtime";
1362
- var Styles = () => /* @__PURE__ */ jsx("style", { children: styles_default });
1363
- var Styles_default = Styles;
1364
-
1365
- // src/components/IDKitWidget/ShadowHost.tsx
1366
- import ReactDOM from "react-dom";
1367
- import { useState as useState2, useCallback } from "react";
1368
- import { jsx as jsx2 } from "react/jsx-runtime";
1369
- var ShadowHost = ({ id, children, mode = "open", delegatesFocus = false }) => {
1370
- const [shadowRoot, setShadowRoot] = useState2(null);
1371
- const hostRef = useCallback(
1372
- (node) => {
1373
- if (node) {
1374
- const root = node.shadowRoot ?? node.attachShadow({ mode, delegatesFocus });
1375
- setShadowRoot(root);
1376
- }
1377
- },
1378
- [mode, delegatesFocus]
1379
- );
1380
- return /* @__PURE__ */ jsx2("div", { ref: hostRef, id, children: shadowRoot && ReactDOM.createPortal(children, shadowRoot) });
1381
- };
1382
-
1383
- // src/components/IDKitWidget/BaseWidget.tsx
1384
- import { shallow as shallow2 } from "zustand/shallow";
1385
-
1386
- // src/components/Icons/XMarkIcon.tsx
1387
- import { jsx as jsx3 } from "react/jsx-runtime";
1388
- var XMarkIcon = (props) => /* @__PURE__ */ jsx3("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
1389
- "path",
1390
- {
1391
- strokeWidth: "1.5",
1392
- stroke: "currentColor",
1393
- strokeLinecap: "round",
1394
- strokeLinejoin: "round",
1395
- d: "m16.243 7.758-8.485 8.485m8.485 0L7.758 7.758"
1396
- }
1397
- ) });
1398
- var XMarkIcon_default = XMarkIcon;
1399
-
1400
- // ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
1401
- function r(e) {
1402
- var t, f, n = "";
1403
- if ("string" == typeof e || "number" == typeof e) n += e;
1404
- else if ("object" == typeof e) if (Array.isArray(e)) {
1405
- var o = e.length;
1406
- for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
1407
- } else for (f in e) e[f] && (n && (n += " "), n += f);
1408
- return n;
1409
- }
1410
- function clsx() {
1411
- for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
1412
- return n;
1413
- }
1414
- var clsx_default = clsx;
1415
-
1416
- // src/components/IDKitWidget/States/ErrorState.tsx
1417
- import { useEffect as useEffect4 } from "react";
1418
-
1419
- // src/components/Icons/ErrorIcon.tsx
1420
- import { jsx as jsx4, jsxs } from "react/jsx-runtime";
1421
- var ErrorIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "88", height: "88", viewBox: "0 0 88 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
1422
- /* @__PURE__ */ jsx4("rect", { width: "88", height: "88", rx: "44", fill: "#9BA3AE" }),
1423
- /* @__PURE__ */ jsx4("rect", { opacity: "0.2", width: "88", height: "88", rx: "44", fill: "url(#paint0_radial_117706_3198)" }),
1424
- /* @__PURE__ */ jsx4("rect", { x: "0.5", y: "0.5", width: "87", height: "87", rx: "43.5", stroke: "url(#paint1_linear_117706_3198)" }),
1425
- /* @__PURE__ */ jsx4(
1426
- "path",
1427
- {
1428
- d: "M33.0146 53.9853L43.4999 43.5M53.9851 33.0147L43.4999 43.5M43.4999 43.5L33.0146 33.0147M43.4999 43.5L53.9851 53.9853",
1429
- stroke: "white",
1430
- strokeWidth: "3"
1431
- }
1432
- ),
1433
- /* @__PURE__ */ jsxs("defs", { children: [
1434
- /* @__PURE__ */ jsxs(
1435
- "radialGradient",
1436
- {
1437
- id: "paint0_radial_117706_3198",
1438
- cx: "0",
1439
- cy: "0",
1440
- r: "1",
1441
- gradientUnits: "userSpaceOnUse",
1442
- gradientTransform: "translate(20 -1.6729e-06) rotate(63.4349) scale(98.387 97.9627)",
1443
- children: [
1444
- /* @__PURE__ */ jsx4("stop", { stopColor: "white" }),
1445
- /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
1446
- ]
1447
- }
1448
- ),
1449
- /* @__PURE__ */ jsxs(
1450
- "linearGradient",
1451
- {
1452
- id: "paint1_linear_117706_3198",
1453
- x1: "44",
1454
- y1: "0",
1455
- x2: "44",
1456
- y2: "88",
1457
- gradientUnits: "userSpaceOnUse",
1458
- children: [
1459
- /* @__PURE__ */ jsx4("stop", { stopColor: "white", stopOpacity: "0.3" }),
1460
- /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
1461
- ]
1462
- }
1463
- )
1464
- ] })
1465
- ] });
1466
- var ErrorIcon_default = ErrorIcon;
1467
-
1468
- // src/components/IDKitWidget/States/ErrorState.tsx
1469
- import { AppErrorCodes } from "@worldcoin/idkit-core";
1470
-
1471
- // src/components/Icons/WarningIcon.tsx
1472
- import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
1473
- var WarningIcon = (props) => /* @__PURE__ */ jsxs2("svg", { width: "88", height: "88", viewBox: "0 0 88 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
1474
- /* @__PURE__ */ jsx5("rect", { width: "88", height: "88", rx: "44", fill: "#FFAE00" }),
1475
- /* @__PURE__ */ jsx5("rect", { opacity: "0.2", width: "88", height: "88", rx: "44", fill: "url(#paint0_radial_117706_3182)" }),
1476
- /* @__PURE__ */ jsx5("rect", { x: "0.5", y: "0.5", width: "87", height: "87", rx: "43.5", stroke: "url(#paint1_linear_117706_3182)" }),
1477
- /* @__PURE__ */ jsx5(
1478
- "path",
1479
- {
1480
- d: "M64.1707 59.5415H22.8298L43.4998 22.3354L64.1707 59.5415ZM42.1208 51.3003L42.1218 54.0503H44.8992L44.8982 51.3003H42.1208ZM42.1248 46.7085H44.8748V36.6255H42.1248V46.7085Z",
1481
- fill: "white"
1482
- }
1483
- ),
1484
- /* @__PURE__ */ jsxs2("defs", { children: [
1485
- /* @__PURE__ */ jsxs2(
1486
- "radialGradient",
1487
- {
1488
- id: "paint0_radial_117706_3182",
1489
- cx: "0",
1490
- cy: "0",
1491
- r: "1",
1492
- gradientUnits: "userSpaceOnUse",
1493
- gradientTransform: "translate(20 -1.6729e-06) rotate(63.4349) scale(98.387 97.9627)",
1494
- children: [
1495
- /* @__PURE__ */ jsx5("stop", { stopColor: "white" }),
1496
- /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
1497
- ]
1498
- }
1499
- ),
1500
- /* @__PURE__ */ jsxs2(
1501
- "linearGradient",
1502
- {
1503
- id: "paint1_linear_117706_3182",
1504
- x1: "44",
1505
- y1: "0",
1506
- x2: "44",
1507
- y2: "88",
1508
- gradientUnits: "userSpaceOnUse",
1509
- children: [
1510
- /* @__PURE__ */ jsx5("stop", { stopColor: "white", stopOpacity: "0.3" }),
1511
- /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
1512
- ]
1513
- }
1514
- )
1515
- ] })
1516
- ] });
1517
- var WarningIcon_default = WarningIcon;
1518
-
1519
- // src/components/IDKitWidget/States/ErrorState.tsx
1520
- import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
1521
- var getParams = ({ retryFlow, errorState }) => ({ retryFlow, errorState });
1522
- var getErrorTitle = (code) => {
1523
- switch (code) {
1524
- case AppErrorCodes.GenericError:
1525
- return __("Something went wrong");
1526
- case AppErrorCodes.FailedByHostApp:
1527
- return __("Verification Declined");
1528
- case AppErrorCodes.VerificationRejected:
1529
- return __("Request cancelled");
1530
- default:
1531
- return __("Something went wrong");
1532
- }
1533
- };
1534
- var getErrorMessage = (code) => {
1535
- switch (code) {
1536
- case AppErrorCodes.ConnectionFailed:
1537
- return __("Connection to your wallet failed. Please try again.");
1538
- case AppErrorCodes.VerificationRejected:
1539
- return __("You've cancelled the request in World App.");
1540
- case AppErrorCodes.MaxVerificationsReached:
1541
- return __("You've already verified the maximum number of times for this action.");
1542
- case AppErrorCodes.CredentialUnavailable:
1543
- return __("It seems you don't have the verification level required by this app.");
1544
- case AppErrorCodes.InvalidNetwork:
1545
- return __("Invalid network. If you are the app owner, visit docs.world.org/test for details.");
1546
- case AppErrorCodes.InclusionProofPending:
1547
- return __("Your identity is still being registered. Please wait a few minutes and try again.");
1548
- case AppErrorCodes.GenericError:
1549
- default:
1550
- return __("We couldn't complete your request. Please try again.");
1551
- }
1552
- };
1553
- var ErrorState = (props) => {
1554
- const { retryFlow, errorState } = idkit_default(getParams);
1555
- const { show_modal } = props;
1556
- useEffect4(() => {
1557
- if (errorState) {
1558
- console.error(`Error state: `, errorState);
1559
- }
1560
- }, [errorState]);
1561
- return /* @__PURE__ */ jsxs3("div", { className: "space-y-8", children: [
1562
- /* @__PURE__ */ jsx6("div", { className: clsx_default("flex items-center justify-center", show_modal ? "-mt-5" : ""), children: errorState?.code == AppErrorCodes.VerificationRejected ? /* @__PURE__ */ jsx6(WarningIcon_default, { className: "w-24" }) : /* @__PURE__ */ jsx6(ErrorIcon_default, { className: "w-24" }) }),
1563
- /* @__PURE__ */ jsxs3("div", { children: [
1564
- /* @__PURE__ */ jsx6("p", { className: "text-center text-2xl font-semibold text-gray-900 dark:text-white", children: errorState?.code ? getErrorTitle(errorState.code) : getErrorTitle(AppErrorCodes.GenericError) }),
1565
- /* @__PURE__ */ jsx6("p", { className: "mx-auto mt-2 max-w-[224px] text-center text-657080", children: errorState?.code ? getErrorMessage(errorState.code) : getErrorMessage(AppErrorCodes.GenericError) })
1566
- ] }),
1567
- /* @__PURE__ */ jsx6("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx6(
1568
- "button",
1569
- {
1570
- type: "button",
1571
- onClick: retryFlow,
1572
- className: "inline-flex items-center rounded-full border-[1.2px] border-ebecef bg-transparent px-8 py-3 font-semibold text-gray-900 shadow-sm transition duration-300 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40",
1573
- children: __("Try Again")
1574
- }
1575
- ) })
1576
- ] });
1577
- };
1578
- var ErrorState_default = ErrorState;
1579
-
1580
- // src/components/IDKitWidget/BaseWidget.tsx
1581
- import * as Toast from "@radix-ui/react-toast";
1582
-
1583
- // src/components/Icons/CheckIcon.tsx
1584
- import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
1585
- var CheckIcon = (props) => /* @__PURE__ */ jsxs4("svg", { width: "88", height: "88", viewBox: "0 0 88 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
1586
- /* @__PURE__ */ jsx7("rect", { width: "88", height: "88", rx: "44", fill: "#00C230" }),
1587
- /* @__PURE__ */ jsx7("rect", { opacity: "0.2", width: "88", height: "88", rx: "44", fill: "url(#paint0_radial_117706_3174)" }),
1588
- /* @__PURE__ */ jsx7("rect", { x: "0.5", y: "0.5", width: "87", height: "87", rx: "43.5", stroke: "url(#paint1_linear_117706_3174)" }),
1589
- /* @__PURE__ */ jsx7("path", { d: "M29.5 45.5L37.5 53.5L57.5 33.5", stroke: "white", strokeWidth: "3" }),
1590
- /* @__PURE__ */ jsxs4("defs", { children: [
1591
- /* @__PURE__ */ jsxs4(
1592
- "radialGradient",
1593
- {
1594
- id: "paint0_radial_117706_3174",
1595
- cx: "0",
1596
- cy: "0",
1597
- r: "1",
1598
- gradientUnits: "userSpaceOnUse",
1599
- gradientTransform: "translate(20 -1.6729e-06) rotate(63.4349) scale(98.387 97.9627)",
1600
- children: [
1601
- /* @__PURE__ */ jsx7("stop", { stopColor: "white" }),
1602
- /* @__PURE__ */ jsx7("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
1603
- ]
1604
- }
1605
- ),
1606
- /* @__PURE__ */ jsxs4(
1607
- "linearGradient",
1608
- {
1609
- id: "paint1_linear_117706_3174",
1610
- x1: "44",
1611
- y1: "0",
1612
- x2: "44",
1613
- y2: "88",
1614
- gradientUnits: "userSpaceOnUse",
1615
- children: [
1616
- /* @__PURE__ */ jsx7("stop", { stopColor: "white", stopOpacity: "0.3" }),
1617
- /* @__PURE__ */ jsx7("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
1618
- ]
1619
- }
1620
- )
1621
- ] })
1622
- ] });
1623
- var CheckIcon_default = CheckIcon;
1624
-
1625
- // src/components/IDKitWidget/States/SuccessState.tsx
1626
- import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
1627
- var SuccessState = (props) => {
1628
- return /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
1629
- /* @__PURE__ */ jsx8("div", { className: clsx_default("flex items-center justify-center", props.show_modal ? "-mt-5" : ""), children: /* @__PURE__ */ jsx8(CheckIcon_default, { className: "w-24 text-white" }) }),
1630
- /* @__PURE__ */ jsxs5("div", { children: [
1631
- /* @__PURE__ */ jsx8("p", { className: "text-center text-2xl font-semibold text-gray-900 dark:text-white", children: __("All set!") }),
1632
- /* @__PURE__ */ jsx8("p", { className: "mx-auto mt-2 max-w-[260px] text-center text-lg text-657080", children: __("Your World ID is now connected") })
1633
- ] })
1634
- ] });
1635
- };
1636
- var SuccessState_default = SuccessState;
1637
-
1638
- // src/components/IDKitWidget/States/WorldID/QRState.tsx
1639
- import copy from "copy-to-clipboard";
1640
- import { useCallback as useCallback2, useState as useState3 } from "react";
1641
- import { AnimatePresence, motion } from "framer-motion";
1642
-
1643
- // src/components/Icons/WorldcoinIcon.tsx
1644
- import { jsx as jsx9 } from "react/jsx-runtime";
1645
- var WorldcoinIcon = (props) => /* @__PURE__ */ jsx9("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", ...props, children: /* @__PURE__ */ jsx9(
1646
- "path",
1647
- {
1648
- d: "M30.7367 9.77239C29.9301 7.86586 28.7772 6.15721 27.3084 4.68831C25.8397 3.21941 24.1275 2.06636 22.225 1.2596C20.2502 0.422405 18.1574 0 15.9962 0C13.8388 0 11.7422 0.422405 9.76742 1.2596C7.86112 2.06636 6.15268 3.21941 4.68395 4.68831C3.21522 6.15721 2.06231 7.86966 1.25565 9.77239C0.422354 11.7436 0 13.8404 0 15.9981C0 18.1558 0.422354 20.2526 1.25945 22.2276C2.06611 24.1341 3.21903 25.8428 4.68775 27.3117C6.15648 28.7806 7.86873 29.9336 9.77122 30.7404C11.746 31.5738 13.8388 32 16 32C18.1574 32 20.254 31.5776 22.2288 30.7404C24.1351 29.9336 25.8435 28.7806 27.3122 27.3117C28.781 25.8428 29.9339 24.1303 30.7405 22.2276C31.5738 20.2526 32 18.1596 32 15.9981C31.9962 13.8404 31.57 11.7436 30.7367 9.77239ZM10.6844 14.4949C11.3503 11.9377 13.679 10.0464 16.4452 10.0464H27.552C28.2673 11.4278 28.7239 12.9309 28.9027 14.4949H10.6844ZM28.9027 17.5012C28.7239 19.0653 28.2635 20.5684 27.552 21.9498H16.4452C13.6828 21.9498 11.3541 20.0585 10.6844 17.5012H28.9027ZM6.81094 6.81175C9.26516 4.35724 12.526 3.0063 15.9962 3.0063C19.4663 3.0063 22.7272 4.35724 25.1815 6.81175C25.2576 6.88786 25.3298 6.96397 25.4021 7.04008H16.4452C14.0518 7.04008 11.8031 7.97241 10.1099 9.66583C8.77812 10.9977 7.91819 12.6759 7.60999 14.4988H3.09346C3.42449 11.5952 4.71439 8.90855 6.81094 6.81175ZM15.9962 28.9937C12.526 28.9937 9.26516 27.6428 6.81094 25.1883C4.71439 23.0915 3.42449 20.4048 3.09346 17.5051H7.60999C7.91439 19.3279 8.77812 21.0061 10.1099 22.338C11.8031 24.0314 14.0518 24.9637 16.4452 24.9637H25.4059C25.3337 25.0398 25.2576 25.1159 25.1853 25.1921C22.731 27.639 19.4663 28.9937 15.9962 28.9937Z",
1649
- fill: "currentColor"
1650
- }
1651
- ) });
1652
- var WorldcoinIcon_default = WorldcoinIcon;
1653
-
1654
- // src/components/Icons/QRPlaceholderIcon.tsx
1655
- import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
1656
- var QRPlaceholderIcon = (props) => /* @__PURE__ */ jsxs6("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 200 200", children: [
1657
- /* @__PURE__ */ jsx10(
1658
- "path",
1659
- {
1660
- fill: "#EBECEF",
1661
- fillRule: "evenodd",
1662
- d: "M12.1 0C5.417 0 0 5.417 0 12.1v18.505c0 6.682 5.417 12.1 12.1 12.1h18.505c6.682 0 12.1-5.418 12.1-12.1V12.1c0-6.683-5.418-12.1-12.1-12.1H12.1Zm18.505 11.388H12.1a.712.712 0 0 0-.712.712v18.505c0 .393.319.712.712.712h18.505a.712.712 0 0 0 .712-.712V12.1a.712.712 0 0 0-.712-.712Z",
1663
- clipRule: "evenodd"
1664
- }
1665
- ),
1666
- /* @__PURE__ */ jsx10(
1667
- "path",
1668
- {
1669
- fill: "#EBECEF",
1670
- d: "M197.026 200c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-17.616c0-.778-.313-1.525-.871-2.076a2.996 2.996 0 0 0-2.103-.86h-5.948c-.789 0-1.545.31-2.103.86a2.918 2.918 0 0 0-.871 2.076v8.808h-11.897v-11.744h-11.896v-23.487h11.896v8.808c0 .778.314 1.525.872 2.076.557.55 1.314.86 2.102.86h5.949c.788 0 1.545-.31 2.103-.86a2.922 2.922 0 0 0 .871-2.076v-8.808h8.922c.789 0 1.545-.309 2.103-.86a2.916 2.916 0 0 0 .871-2.076v-5.872c0-.779-.313-1.525-.871-2.076a2.992 2.992 0 0 0-2.103-.86h-29.741c-.789 0-1.545.309-2.103.86a2.916 2.916 0 0 0-.871 2.076v8.808h-23.792v-11.744h8.922c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-5.872c0-.778-.313-1.525-.871-2.076a2.996 2.996 0 0 0-2.103-.86h-5.948c-.789 0-1.546.31-2.103.86a2.918 2.918 0 0 0-.871 2.076v8.808H119.7c-.789 0-1.545.309-2.103.86a2.916 2.916 0 0 0-.871 2.076v5.872c0 .779.313 1.525.871 2.076.558.551 1.314.86 2.103.86h20.819v8.808c0 .778.313 1.525.871 2.076.557.55 1.314.86 2.103.86h8.922v8.808c0 .778.313 1.525.871 2.076.558.55 1.314.859 2.103.859h8.922v11.744h-20.818c-.789 0-1.546.31-2.103.86a2.916 2.916 0 0 0-.871 2.076v5.872c0 .779.313 1.526.871 2.076a2.99 2.99 0 0 0 2.103.86h17.844c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-8.808h11.896v8.808c0 .779.314 1.526.872 2.076a2.99 2.99 0 0 0 2.102.86h17.845Z"
1671
- }
1672
- ),
1673
- /* @__PURE__ */ jsx10(
1674
- "path",
1675
- {
1676
- fill: "#EBECEF",
1677
- fillRule: "evenodd",
1678
- d: "M157.295 12.1c0-6.683 5.418-12.1 12.1-12.1H187.9c6.683 0 12.1 5.417 12.1 12.1v18.505c0 6.682-5.417 12.1-12.1 12.1h-18.505c-6.682 0-12.1-5.418-12.1-12.1V12.1Zm12.1-.712H187.9c.393 0 .712.319.712.712v18.505a.712.712 0 0 1-.712.712h-18.505a.712.712 0 0 1-.712-.712V12.1c0-.393.319-.712.712-.712ZM12.1 157.295c-6.683 0-12.1 5.418-12.1 12.1V187.9c0 6.683 5.417 12.1 12.1 12.1h18.505c6.682 0 12.1-5.417 12.1-12.1v-18.505c0-6.682-5.418-12.1-12.1-12.1H12.1Zm19.217 12.1a.712.712 0 0 0-.712-.712H12.1a.712.712 0 0 0-.712.712V187.9c0 .393.319.712.712.712h18.505a.712.712 0 0 0 .712-.712v-18.505Z",
1679
- clipRule: "evenodd"
1680
- }
1681
- ),
1682
- /* @__PURE__ */ jsx10(
1683
- "path",
1684
- {
1685
- fill: "#EBECEF",
1686
- d: "M6.05 89.68A6.05 6.05 0 0 0 0 95.73v9.252a6.05 6.05 0 0 0 6.05 6.05h9.253a6.05 6.05 0 0 0 6.05-6.05V95.73c0-.678-.112-1.33-.318-1.94.445.105.908.16 1.385.16h27.758a6.05 6.05 0 0 0 6.05-6.05v-9.252a6.05 6.05 0 0 0-6.05-6.05H22.42a6.05 6.05 0 0 0-6.05 6.05V87.9c0 .678.112 1.33.317 1.939a6.065 6.065 0 0 0-1.385-.16H6.05Zm102.135-40.926a6.05 6.05 0 0 1 6.05-6.05h9.253a6.05 6.05 0 0 1 6.049 6.05v9.253a6.05 6.05 0 0 1-6.049 6.05h-9.253a6.05 6.05 0 0 1-6.05-6.05v-9.253ZM67.616 184.698a6.05 6.05 0 0 1 6.05-6.05h9.252c.678 0 1.33.111 1.939.317a6.064 6.064 0 0 1-.16-1.385v-9.253a6.05 6.05 0 0 1 6.05-6.049H100a6.05 6.05 0 0 1 6.05 6.049v9.253a6.05 6.05 0 0 1-6.05 6.05h-9.253c-.678 0-1.33-.112-1.938-.317.104.444.159.908.159 1.385v9.252a6.05 6.05 0 0 1-6.05 6.05h-9.253a6.05 6.05 0 0 1-6.05-6.05v-9.252Zm78.291-120.285a6.05 6.05 0 0 1 6.05-6.05h41.993a6.05 6.05 0 0 1 6.05 6.05v9.252a6.05 6.05 0 0 1-6.05 6.05h-41.993a6.05 6.05 0 0 1-6.05-6.05v-9.252ZM95.018 0a6.05 6.05 0 0 0-6.05 6.05v17.082a6.05 6.05 0 0 0 6.05 6.05h9.252a6.05 6.05 0 0 0 6.05-6.05V6.05A6.05 6.05 0 0 0 104.27 0h-9.252Z"
1687
- }
1688
- ),
1689
- /* @__PURE__ */ jsx10(
1690
- "path",
1691
- {
1692
- fill: "url(#a)",
1693
- fillRule: "evenodd",
1694
- d: "M12.1 0C5.417 0 0 5.417 0 12.1v18.505c0 6.682 5.417 12.1 12.1 12.1h18.505c6.682 0 12.1-5.418 12.1-12.1V12.1c0-6.683-5.418-12.1-12.1-12.1H12.1Zm18.505 11.388H12.1a.712.712 0 0 0-.712.712v18.505c0 .393.319.712.712.712h18.505a.712.712 0 0 0 .712-.712V12.1a.712.712 0 0 0-.712-.712Z",
1695
- clipRule: "evenodd"
1696
- }
1697
- ),
1698
- /* @__PURE__ */ jsx10(
1699
- "path",
1700
- {
1701
- fill: "url(#a)",
1702
- d: "M197.026 200c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-17.616c0-.778-.313-1.525-.871-2.076a2.996 2.996 0 0 0-2.103-.86h-5.948c-.789 0-1.545.31-2.103.86a2.918 2.918 0 0 0-.871 2.076v8.808h-11.897v-11.744h-11.896v-23.487h11.896v8.808c0 .778.314 1.525.872 2.076.557.55 1.314.86 2.102.86h5.949c.788 0 1.545-.31 2.103-.86a2.922 2.922 0 0 0 .871-2.076v-8.808h8.922c.789 0 1.545-.309 2.103-.86a2.916 2.916 0 0 0 .871-2.076v-5.872c0-.779-.313-1.525-.871-2.076a2.992 2.992 0 0 0-2.103-.86h-29.741c-.789 0-1.545.309-2.103.86a2.916 2.916 0 0 0-.871 2.076v8.808h-23.792v-11.744h8.922c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-5.872c0-.778-.313-1.525-.871-2.076a2.996 2.996 0 0 0-2.103-.86h-5.948c-.789 0-1.546.31-2.103.86a2.918 2.918 0 0 0-.871 2.076v8.808H119.7c-.789 0-1.545.309-2.103.86a2.916 2.916 0 0 0-.871 2.076v5.872c0 .779.313 1.525.871 2.076.558.551 1.314.86 2.103.86h20.819v8.808c0 .778.313 1.525.871 2.076.557.55 1.314.86 2.103.86h8.922v8.808c0 .778.313 1.525.871 2.076.558.55 1.314.859 2.103.859h8.922v11.744h-20.818c-.789 0-1.546.31-2.103.86a2.916 2.916 0 0 0-.871 2.076v5.872c0 .779.313 1.526.871 2.076a2.99 2.99 0 0 0 2.103.86h17.844c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-8.808h11.896v8.808c0 .779.314 1.526.872 2.076a2.99 2.99 0 0 0 2.102.86h17.845Z"
1703
- }
1704
- ),
1705
- /* @__PURE__ */ jsx10(
1706
- "path",
1707
- {
1708
- fill: "url(#a)",
1709
- fillRule: "evenodd",
1710
- d: "M157.295 12.1c0-6.683 5.418-12.1 12.1-12.1H187.9c6.683 0 12.1 5.417 12.1 12.1v18.505c0 6.682-5.417 12.1-12.1 12.1h-18.505c-6.682 0-12.1-5.418-12.1-12.1V12.1Zm12.1-.712H187.9c.393 0 .712.319.712.712v18.505a.712.712 0 0 1-.712.712h-18.505a.712.712 0 0 1-.712-.712V12.1c0-.393.319-.712.712-.712Z",
1711
- clipRule: "evenodd"
1712
- }
1713
- ),
1714
- /* @__PURE__ */ jsx10(
1715
- "path",
1716
- {
1717
- fill: "url(#a)",
1718
- fillRule: "evenodd",
1719
- d: "M12.1 157.295c-6.683 0-12.1 5.418-12.1 12.1V187.9c0 6.683 5.417 12.1 12.1 12.1h18.505c6.682 0 12.1-5.417 12.1-12.1v-18.505c0-6.682-5.418-12.1-12.1-12.1H12.1Zm19.217 12.1a.712.712 0 0 0-.712-.712H12.1a.712.712 0 0 0-.712.712V187.9c0 .393.319.712.712.712h18.505a.712.712 0 0 0 .712-.712v-18.505Z",
1720
- clipRule: "evenodd"
1721
- }
1722
- ),
1723
- /* @__PURE__ */ jsx10(
1724
- "path",
1725
- {
1726
- fill: "url(#a)",
1727
- d: "M6.05 89.68A6.05 6.05 0 0 0 0 95.73v9.252a6.05 6.05 0 0 0 6.05 6.05h9.253a6.05 6.05 0 0 0 6.05-6.05V95.73c0-.678-.112-1.33-.318-1.94.445.105.908.16 1.385.16h27.758a6.05 6.05 0 0 0 6.05-6.05v-9.252a6.05 6.05 0 0 0-6.05-6.05H22.42a6.05 6.05 0 0 0-6.05 6.05V87.9c0 .678.112 1.33.317 1.939a6.065 6.065 0 0 0-1.385-.16H6.05Z"
1728
- }
1729
- ),
1730
- /* @__PURE__ */ jsx10(
1731
- "path",
1732
- {
1733
- fill: "url(#a)",
1734
- d: "M108.185 48.754a6.05 6.05 0 0 1 6.05-6.05h9.253a6.05 6.05 0 0 1 6.049 6.05v9.253a6.05 6.05 0 0 1-6.049 6.05h-9.253a6.05 6.05 0 0 1-6.05-6.05v-9.253Z"
1735
- }
1736
- ),
1737
- /* @__PURE__ */ jsx10(
1738
- "path",
1739
- {
1740
- fill: "url(#a)",
1741
- d: "M67.616 184.698a6.05 6.05 0 0 1 6.05-6.05h9.252c.678 0 1.33.111 1.939.317a6.064 6.064 0 0 1-.16-1.385v-9.253a6.05 6.05 0 0 1 6.05-6.049H100a6.05 6.05 0 0 1 6.05 6.049v9.253a6.05 6.05 0 0 1-6.05 6.05h-9.253c-.678 0-1.33-.112-1.938-.317.104.444.159.908.159 1.385v9.252a6.05 6.05 0 0 1-6.05 6.05h-9.253a6.05 6.05 0 0 1-6.05-6.05v-9.252Z"
1742
- }
1743
- ),
1744
- /* @__PURE__ */ jsx10(
1745
- "path",
1746
- {
1747
- fill: "url(#a)",
1748
- d: "M145.907 64.413a6.05 6.05 0 0 1 6.05-6.05h41.993a6.05 6.05 0 0 1 6.05 6.05v9.252a6.05 6.05 0 0 1-6.05 6.05h-41.993a6.05 6.05 0 0 1-6.05-6.05v-9.252Z"
1749
- }
1750
- ),
1751
- /* @__PURE__ */ jsx10(
1752
- "path",
1753
- {
1754
- fill: "url(#a)",
1755
- d: "M95.018 0a6.05 6.05 0 0 0-6.05 6.05v17.082a6.05 6.05 0 0 0 6.05 6.05h9.252a6.05 6.05 0 0 0 6.05-6.05V6.05A6.05 6.05 0 0 0 104.27 0h-9.252Z"
1756
- }
1757
- ),
1758
- /* @__PURE__ */ jsx10("defs", { children: /* @__PURE__ */ jsxs6("linearGradient", { id: "a", x1: "0", x2: "200", y1: "0", y2: "200", gradientUnits: "userSpaceOnUse", children: [
1759
- /* @__PURE__ */ jsx10("stop", { offset: ".37", stopColor: "#fff", stopOpacity: "0" }),
1760
- /* @__PURE__ */ jsx10("stop", { offset: ".5", stopColor: "#fff", stopOpacity: ".85" }),
1761
- /* @__PURE__ */ jsx10("stop", { offset: ".63", stopColor: "#fff", stopOpacity: "0" })
1762
- ] }) })
1763
- ] });
1764
- var QRPlaceholderIcon_default = QRPlaceholderIcon;
1765
-
1766
- // src/components/IDKitWidget/States/WorldID/QRState.tsx
1767
- import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
1768
- var QRState = ({ qrData, showQR, setShowQR }) => {
1769
- const [copiedLink, setCopiedLink] = useState3(false);
1770
- const copyLink = useCallback2(() => {
1771
- copy(qrData ?? "");
1772
- setCopiedLink(true);
1773
- setTimeout(() => setCopiedLink(false), 2e3);
1774
- }, [qrData]);
1775
- return /* @__PURE__ */ jsxs7(Fragment, { children: [
1776
- /* @__PURE__ */ jsx11("div", { className: "md:hidden", children: /* @__PURE__ */ jsxs7(
1777
- "a",
1778
- {
1779
- href: qrData ?? void 0,
1780
- className: "flex w-full items-center space-x-2 rounded-2xl border border-transparent bg-0d151d p-4 font-medium text-white shadow-sm dark:bg-white dark:text-0d151d",
1781
- children: [
1782
- /* @__PURE__ */ jsx11(WorldcoinIcon_default, { className: "size-5" }),
1783
- /* @__PURE__ */ jsx11("span", { className: "flex-1 text-center", children: __("Open World App") })
1784
- ]
1785
- }
1786
- ) }),
1787
- /* @__PURE__ */ jsxs7("div", { className: clsx_default("hidden md:block xl:hidden", { "mb-10 space-y-4": !showQR }), children: [
1788
- /* @__PURE__ */ jsxs7(
1789
- "a",
1790
- {
1791
- href: qrData ?? void 0,
1792
- className: clsx_default(
1793
- "flex w-full items-center space-x-2 rounded-2xl border border-transparent p-4 font-medium shadow-sm",
1794
- "bg-0d151d text-white dark:bg-white dark:text-0d151d",
1795
- { hidden: showQR }
1796
- ),
1797
- children: [
1798
- /* @__PURE__ */ jsx11(WorldcoinIcon_default, { className: "size-5" }),
1799
- /* @__PURE__ */ jsx11("span", { className: "flex-1 text-center", children: __("Open World App") })
1800
- ]
1801
- }
1802
- ),
1803
- /* @__PURE__ */ jsxs7("div", { className: clsx_default("mb-3 space-y-4", { hidden: showQR }), children: [
1804
- /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-4", children: [
1805
- /* @__PURE__ */ jsx11("hr", { className: "flex-1" }),
1806
- /* @__PURE__ */ jsx11("span", { className: "text-xs font-medium text-9ba3ae", children: "or" }),
1807
- /* @__PURE__ */ jsx11("hr", { className: "flex-1" })
1808
- ] }),
1809
- /* @__PURE__ */ jsx11(
1810
- motion.button,
1811
- {
1812
- className: "w-full rounded-2xl border border-ebecef p-4 text-lg font-medium text-3c424b",
1813
- onClick: () => setShowQR((state) => !state),
1814
- children: __("Display QR Code")
1815
- }
1816
- )
1817
- ] })
1818
- ] }),
1819
- showQR && /* @__PURE__ */ jsxs7("div", { className: "hidden md:block xl:hidden", children: [
1820
- /* @__PURE__ */ jsx11("div", { className: "mb-4", children: /* @__PURE__ */ jsx11(
1821
- motion.button,
1822
- {
1823
- className: "w-full rounded-2xl border border-ebecef p-4 text-lg font-medium text-3c424b",
1824
- onClick: () => setShowQR(false),
1825
- children: __("Hide QR Code")
1826
- }
1827
- ) }),
1828
- /* @__PURE__ */ jsx11("div", { className: "relative inline-flex items-center justify-center rounded-2xl border border-f1f5f8 p-3 dark:border-f1f5f8/10", children: /* @__PURE__ */ jsx11("div", { className: "text-29343f dark:text-white", children: qrData ? (
1829
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
1830
- /* @__PURE__ */ jsx11("div", { onClick: copyLink, className: "cursor-pointer", children: /* @__PURE__ */ jsx11(QRCode_default, { data: qrData, size: 200 }) })
1831
- ) : /* @__PURE__ */ jsx11("div", { className: "flex size-[200px] items-center justify-center", children: /* @__PURE__ */ jsx11(QRPlaceholderIcon_default, { className: "size-[200px] animate-pulse" }) }) }) }),
1832
- /* @__PURE__ */ jsx11(AnimatePresence, { children: copiedLink && /* @__PURE__ */ jsx11(
1833
- motion.div,
1834
- {
1835
- className: "text-center text-sm text-9eafc0",
1836
- initial: "hidden",
1837
- animate: "visible",
1838
- exit: "exit",
1839
- variants: {
1840
- hidden: { opacity: 0, height: 0, marginTop: 0 },
1841
- visible: {
1842
- opacity: 1,
1843
- height: "auto",
1844
- marginTop: 8,
1845
- transition: {
1846
- duration: 0.25,
1847
- opacity: { delay: 0.05, duration: 0.2 },
1848
- ease: "easeInOut"
1849
- }
1850
- },
1851
- exit: {
1852
- opacity: 0,
1853
- height: 0,
1854
- marginTop: 0,
1855
- transition: {
1856
- duration: 0.4,
1857
- delay: 0.1,
1858
- opacity: { duration: 0.25, delay: 0 },
1859
- ease: "easeInOut"
1860
- }
1861
- }
1862
- },
1863
- children: /* @__PURE__ */ jsx11("span", { className: "rounded-lg border border-f1f5f8 px-2 py-1 text-sm", children: __("QR Code copied") })
1864
- },
1865
- "copied"
1866
- ) })
1867
- ] }),
1868
- /* @__PURE__ */ jsxs7("div", { className: "hidden xl:block", children: [
1869
- /* @__PURE__ */ jsx11(AnimatePresence, { children: copiedLink && /* @__PURE__ */ jsx11(
1870
- motion.div,
1871
- {
1872
- className: "text-sm text-9eafc0",
1873
- initial: "hidden",
1874
- animate: "visible",
1875
- exit: "exit",
1876
- variants: {
1877
- hidden: { opacity: 0, height: 0, marginTop: 0, y: 0 },
1878
- visible: {
1879
- opacity: 1,
1880
- height: "auto",
1881
- marginTop: 8,
1882
- y: -20,
1883
- transition: {
1884
- duration: 0.25,
1885
- opacity: { delay: 0.05, duration: 0.2 },
1886
- ease: "easeInOut"
1887
- }
1888
- },
1889
- exit: {
1890
- opacity: 0,
1891
- height: 0,
1892
- marginTop: 0,
1893
- y: 0,
1894
- transition: {
1895
- duration: 0.4,
1896
- delay: 0.1,
1897
- opacity: { duration: 0.25, delay: 0 },
1898
- ease: "easeInOut"
1899
- }
1900
- }
1901
- },
1902
- children: /* @__PURE__ */ jsx11("span", { className: "rounded-lg border border-f1f5f8 px-2 py-1 text-sm", children: __("QR Code copied") })
1903
- },
1904
- "copied"
1905
- ) }),
1906
- /* @__PURE__ */ jsx11("div", { className: "relative inline-flex items-center justify-center rounded-2xl border border-f1f5f8 p-3 dark:border-f1f5f8/10", children: /* @__PURE__ */ jsx11("div", { className: "text-29343f dark:text-white", children: qrData ? (
1907
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
1908
- /* @__PURE__ */ jsx11("div", { onClick: copyLink, className: "cursor-pointer", children: /* @__PURE__ */ jsx11(QRCode_default, { data: qrData, size: 200 }) })
1909
- ) : /* @__PURE__ */ jsx11("div", { className: "flex size-[200px] items-center justify-center", children: /* @__PURE__ */ jsx11(QRPlaceholderIcon_default, { className: "size-[200px] animate-pulse" }) }) }) })
1910
- ] })
1911
- ] });
1912
- };
1913
- var QRState_default = QRState;
1914
-
1915
- // src/components/IDKitWidget/States/WorldIDState.tsx
1916
- import { shallow } from "zustand/shallow";
1917
- import { useEffect as useEffect6, useState as useState4 } from "react";
1918
-
1919
- // src/services/wld-bridge.ts
1920
- import { useEffect as useEffect5, useRef as useRef2 } from "react";
1921
- import { useWorldBridgeStore } from "@worldcoin/idkit-core";
1922
- var useWorldBridge = (app_id, action, signal, bridge_url, verification_level, action_description, partner) => {
1923
- const ref_verification_level = useRef2(verification_level);
1924
- const { reset, result, connectorURI, createClient, pollForUpdates, verificationState, errorCode } = useWorldBridgeStore();
1925
- useEffect5(() => {
1926
- if (!connectorURI) {
1927
- void createClient({
1928
- app_id,
1929
- action,
1930
- signal,
1931
- bridge_url,
1932
- action_description,
1933
- verification_level: ref_verification_level.current,
1934
- partner
1935
- });
1936
- }
1937
- }, [
1938
- app_id,
1939
- action,
1940
- signal,
1941
- action_description,
1942
- createClient,
1943
- ref_verification_level,
1944
- bridge_url,
1945
- connectorURI,
1946
- partner
1947
- ]);
1948
- useEffect5(() => {
1949
- if (!connectorURI || result || errorCode) return;
1950
- const interval = setInterval(() => void pollForUpdates(), 3e3);
1951
- return () => clearInterval(interval);
1952
- }, [connectorURI, pollForUpdates, errorCode, result]);
1953
- return { connectorURI, reset, result, verificationState, errorCode };
1954
- };
1955
-
1956
- // src/components/Icons/LoadingIcon.tsx
1957
- import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
1958
- var LoadingIcon = ({ className, ...props }) => /* @__PURE__ */ jsxs8(
1959
- "svg",
1960
- {
1961
- xmlns: "http://www.w3.org/2000/svg",
1962
- fill: "none",
1963
- viewBox: "0 0 24 24",
1964
- className: `animate-spin motion-reduce:animate-[spin_1.5s_linear_infinite] ${className}`,
1965
- ...props,
1966
- children: [
1967
- /* @__PURE__ */ jsx12("circle", { cx: "12", cy: "12", r: "10.75", stroke: "#191C20", strokeOpacity: ".16", strokeWidth: "2.5" }),
1968
- /* @__PURE__ */ jsx12(
1969
- "path",
1970
- {
1971
- fill: "#191C20",
1972
- d: "M17.28 2.633c.338-.6.127-1.368-.505-1.642A12 12 0 0 0 7.459.892c-.638.261-.864 1.024-.539 1.632.326.607 1.08.827 1.725.584a9.504 9.504 0 0 1 6.897.073c.64.257 1.399.053 1.737-.548Z"
1973
- }
1974
- )
1975
- ]
1976
- }
1977
- );
1978
- var LoadingIcon_default = LoadingIcon;
1979
-
1980
- // src/components/IDKitWidget/States/WorldIDState.tsx
1981
- import { AppErrorCodes as AppErrorCodes2, VerificationState, VerificationLevel } from "@worldcoin/idkit-core";
1982
- import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
1983
- var getOptions = (store) => ({
1984
- signal: store.signal,
1985
- app_id: store.app_id,
1986
- action: store.action,
1987
- setStage: store.setStage,
1988
- bridge_url: store.bridge_url,
1989
- handleVerify: store.handleVerify,
1990
- setErrorState: store.setErrorState,
1991
- verification_level: store.verification_level,
1992
- action_description: store.action_description,
1993
- partner: store.partner
1994
- });
1995
- var WorldIDState = (props) => {
1996
- const media = useMedia_default();
1997
- const [showQR, setShowQR] = useState4(false);
1998
- const {
1999
- app_id,
2000
- action,
2001
- signal,
2002
- setStage,
2003
- handleVerify,
2004
- bridge_url,
2005
- action_description,
2006
- verification_level,
2007
- setErrorState,
2008
- partner
2009
- } = idkit_default(getOptions, shallow);
2010
- const { connectorURI, reset, errorCode, result, verificationState } = useWorldBridge(
2011
- app_id,
2012
- action,
2013
- signal,
2014
- bridge_url,
2015
- verification_level,
2016
- action_description,
2017
- partner
2018
- );
2019
- useEffect6(() => reset, [reset]);
2020
- useEffect6(() => {
2021
- if (verificationState === VerificationState.Failed) {
2022
- setStage("ERROR" /* ERROR */);
2023
- setErrorState({ code: errorCode ?? AppErrorCodes2.GenericError });
2024
- }
2025
- if (result) {
2026
- if (verification_level === VerificationLevel.Orb && result.verification_level === VerificationLevel.Device) {
2027
- console.error("Credential type received from wallet does not match configured credential_types.");
2028
- setStage("ERROR" /* ERROR */);
2029
- setErrorState({ code: AppErrorCodes2.CredentialUnavailable });
2030
- return;
2031
- }
2032
- return handleVerify(result);
2033
- }
2034
- }, [result, handleVerify, verificationState, setStage, errorCode, setErrorState, verification_level]);
2035
- const { show_modal } = props;
2036
- return /* @__PURE__ */ jsxs9(
2037
- "div",
2038
- {
2039
- className: clsx_default(
2040
- "flex flex-col items-center text-center",
2041
- show_modal ? showQR ? "-mt-6 space-y-5 " : "-mt-6 space-y-10 " : ""
2042
- ),
2043
- children: [
2044
- /* @__PURE__ */ jsxs9("div", { className: clsx_default(!show_modal ? "hidden" : ""), children: [
2045
- /* @__PURE__ */ jsx13("div", { className: "mb-4 flex items-center justify-center", children: /* @__PURE__ */ jsx13("div", { className: "flex size-14 items-center justify-center rounded-full border-[1.2px] border-solid border-[#EBECEF]", children: /* @__PURE__ */ jsx13(WorldcoinIcon_default, { className: "size-8 text-0d151d dark:text-white" }) }) }),
2046
- /* @__PURE__ */ jsx13("p", { className: "text-2xl font-semibold text-gray-900 dark:text-white", children: __("Connect your World ID") }),
2047
- /* @__PURE__ */ jsx13("p", { className: clsx_default("mt-3 text-657080 dark:text-9eafc0 md:mt-2", { hidden: media === "mobile" }), children: __("Use phone camera to scan the QR code") }),
2048
- /* @__PURE__ */ jsx13("p", { className: clsx_default("mt-3 text-657080 dark:text-9eafc0 md:mt-2", { hidden: media !== "mobile" }), children: __("You will be redirected to the app, please return to this page once you're done") })
2049
- ] }),
2050
- /* @__PURE__ */ jsxs9("div", { className: "relative w-full", children: [
2051
- verificationState === VerificationState.WaitingForApp && /* @__PURE__ */ jsxs9("div", { className: "absolute inset-0 flex flex-col items-center justify-center space-y-6", children: [
2052
- /* @__PURE__ */ jsx13(LoadingIcon_default, { className: "size-6" }),
2053
- /* @__PURE__ */ jsxs9("div", { children: [
2054
- /* @__PURE__ */ jsx13("p", { className: "font-medium text-657080", children: __("Connecting...") }),
2055
- /* @__PURE__ */ jsx13("p", { className: "text-sm font-light text-657080", children: __("Please continue in app") })
2056
- ] })
2057
- ] }),
2058
- /* @__PURE__ */ jsx13(
2059
- "div",
2060
- {
2061
- className: clsx_default(
2062
- "transition duration-500 ease-in-out",
2063
- verificationState === VerificationState.WaitingForApp && "opacity-40 blur-lg"
2064
- ),
2065
- children: /* @__PURE__ */ jsx13("div", { className: "mx-auto", children: /* @__PURE__ */ jsx13(QRState_default, { showQR, setShowQR, qrData: connectorURI }) })
2066
- }
2067
- )
2068
- ] })
2069
- ]
2070
- }
2071
- );
2072
- };
2073
- var WorldIDState_default = WorldIDState;
2074
-
2075
- // src/components/IDKitWidget/BaseWidget.tsx
2076
- import * as Dialog from "@radix-ui/react-dialog";
2077
- import { Fragment as Fragment2, useEffect as useEffect7, useMemo } from "react";
2078
- import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
2079
-
2080
- // src/components/IDKitWidget/States/HostAppVerificationState.tsx
2081
- import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
2082
- var HostAppVerificationState = () => {
2083
- return /* @__PURE__ */ jsxs10("div", { className: "space-y-6", children: [
2084
- /* @__PURE__ */ jsx14("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx14(LoadingIcon_default, { className: "size-24" }) }),
2085
- /* @__PURE__ */ jsx14("div", { className: "mt-4 text-70868f", children: __("Transmitting verification to host app. Please wait...") })
2086
- ] });
2087
- };
2088
- var HostAppVerificationState_default = HostAppVerificationState;
2089
-
2090
- // src/components/IDKitWidget/BaseWidget.tsx
2091
- import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
2092
- var getParams2 = ({ open, processing, onOpenChange, stage, setStage, setOptions, setErrorState }) => ({
2093
- stage,
2094
- setStage,
2095
- processing,
2096
- setOptions,
2097
- setErrorState,
2098
- isOpen: open,
2099
- onOpenChange
2100
- });
2101
- var IDKitWidget = ({
2102
- children,
2103
- show_modal = true,
2104
- container_id,
2105
- disable_default_modal_behavior = false,
2106
- language,
2107
- ...config
2108
- }) => {
2109
- const media = useMedia_default();
2110
- const { isOpen, onOpenChange, stage, setStage, setOptions, setErrorState } = idkit_default(getParams2, shallow2);
2111
- useEffect7(() => {
2112
- if (language) {
2113
- setLocalizationConfig({ language });
2114
- }
2115
- }, [language]);
2116
- useEffect7(() => {
2117
- if (config.action === "") {
2118
- throw new Error(__("Action cannot be an empty string."));
2119
- }
2120
- setOptions(config, "props" /* PROPS */);
2121
- }, [config, setOptions]);
2122
- const StageContent = useMemo(() => {
2123
- switch (stage) {
2124
- case "WORLD_ID" /* WORLD_ID */:
2125
- return /* @__PURE__ */ jsx15(WorldIDState_default, { show_modal });
2126
- case "SUCCESS" /* SUCCESS */:
2127
- return /* @__PURE__ */ jsx15(SuccessState_default, {});
2128
- case "ERROR" /* ERROR */:
2129
- return /* @__PURE__ */ jsx15(ErrorState_default, {});
2130
- case "HOST_APP_VERIFICATION" /* HOST_APP_VERIFICATION */:
2131
- return /* @__PURE__ */ jsx15(HostAppVerificationState_default, {});
2132
- default:
2133
- throw new Error(__("Invalid IDKitStage :stage.", { s: String(stage) }));
2134
- }
2135
- }, [stage, show_modal]);
2136
- const widgetContent = /* @__PURE__ */ jsxs11(ShadowHost, { mode: "open", id: "idkit-widget", children: [
2137
- /* @__PURE__ */ jsx15(Styles_default, {}),
2138
- /* @__PURE__ */ jsxs11(Toast.Provider, { children: [
2139
- /* @__PURE__ */ jsx15(Toast.Viewport, { className: "flex justify-center" }),
2140
- /* @__PURE__ */ jsx15(
2141
- "div",
2142
- {
2143
- id: "widget-content-inline",
2144
- className: "relative flex flex-col bg-white p-4 focus:outline-none dark:bg-0d151d",
2145
- children: StageContent
2146
- }
2147
- )
2148
- ] })
2149
- ] });
2150
- if (!show_modal && container_id) {
2151
- const containerElement = document.getElementById(container_id);
2152
- if (containerElement) {
2153
- return createPortal(widgetContent, containerElement);
2154
- }
2155
- console.warn(`Container element with id "${container_id}" not found. Rendering widget inline.`);
2156
- }
2157
- const avoidDefaultDomBehavior = (e) => {
2158
- if (disable_default_modal_behavior) {
2159
- e.preventDefault();
2160
- }
2161
- };
2162
- return /* @__PURE__ */ jsxs11(Dialog.Root, { open: isOpen, onOpenChange, children: [
2163
- children?.({ open: () => onOpenChange(true) }),
2164
- /* @__PURE__ */ jsx15(Dialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx15(Fragment2, { children: /* @__PURE__ */ jsx15(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsxs11(ShadowHost, { mode: "open", id: "idkit-widget", children: [
2165
- /* @__PURE__ */ jsx15(Styles_default, {}),
2166
- /* @__PURE__ */ jsxs11("div", { id: "modal", className: "fixed z-[9999] font-sans", children: [
2167
- /* @__PURE__ */ jsx15(Dialog.Overlay, { asChild: true, children: /* @__PURE__ */ jsx15(
2168
- motion2.div,
2169
- {
2170
- initial: { opacity: 0 },
2171
- animate: { opacity: 1 },
2172
- exit: { opacity: 0 },
2173
- className: "fixed inset-0 bg-black/50 backdrop-blur-lg"
2174
- }
2175
- ) }),
2176
- /* @__PURE__ */ jsx15("div", { className: "fixed inset-0 z-[9999] overflow-y-hidden md:overflow-y-auto", children: /* @__PURE__ */ jsxs11("div", { className: "flex min-h-full items-end justify-center text-center md:items-center md:p-4", children: [
2177
- /* @__PURE__ */ jsx15(Dialog.Title, {}),
2178
- /* @__PURE__ */ jsx15(
2179
- Dialog.Content,
2180
- {
2181
- asChild: true,
2182
- onPointerDownOutside: avoidDefaultDomBehavior,
2183
- onInteractOutside: avoidDefaultDomBehavior,
2184
- children: /* @__PURE__ */ jsx15(
2185
- motion2.div,
2186
- {
2187
- layout: media == "mobile" ? "position" : true,
2188
- exit: media == "mobile" ? "initMob" : "init",
2189
- initial: media == "mobile" ? "initMob" : "init",
2190
- animate: media == "mobile" ? "animateMob" : "animate",
2191
- variants: {
2192
- init: { opacity: 0, scale: 0.9 },
2193
- initMob: { translateY: "100%" },
2194
- animate: { opacity: 1, scale: 1 },
2195
- animateMob: { translateY: 0 }
2196
- },
2197
- transition: { layout: { duration: 0.15 } },
2198
- className: "relative z-50 flex min-h-screen w-full flex-col bg-white pt-6 shadow focus:outline-none focus-visible:ring focus-visible:ring-purple-500/75 dark:bg-0d151d md:min-h-[35rem] md:max-w-md md:rounded-[24px]",
2199
- children: /* @__PURE__ */ jsxs11(Toast.Provider, { children: [
2200
- /* @__PURE__ */ jsx15(Toast.Viewport, { className: "flex justify-center" }),
2201
- /* @__PURE__ */ jsx15("div", { className: "mx-6 flex items-center justify-end", children: /* @__PURE__ */ jsx15(Dialog.Close, { className: "flex size-8 items-center justify-center rounded-full border-[1.2px] border-solid border-[#EBECEF] text-black dark:text-white", children: /* @__PURE__ */ jsx15(XMarkIcon_default, { className: "size-4" }) }) }),
2202
- /* @__PURE__ */ jsx15("div", { className: "relative mx-6 mb-6 flex flex-1 flex-col items-center justify-center", children: StageContent }),
2203
- /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center border-t border-f5f5f7 p-7 md:rounded-b-2xl", children: /* @__PURE__ */ jsx15(
2204
- "a",
2205
- {
2206
- href: "https://developer.worldcoin.org/privacy-statement",
2207
- target: "_blank",
2208
- rel: "noreferrer",
2209
- className: "text-sm text-657080 hover:underline",
2210
- children: __("Terms & Privacy")
2211
- }
2212
- ) })
2213
- ] })
2214
- }
2215
- )
2216
- }
2217
- )
2218
- ] }) })
2219
- ] })
2220
- ] }) }) }) })
2221
- ] });
2222
- };
2223
- var BaseWidget_default = IDKitWidget;
2224
-
2225
- // src/components/IDKitWidget/index.tsx
2226
- var IDKitWidget_default = memo(BaseWidget_default);
2227
-
2228
- // src/index.ts
2229
- import { solidityEncode } from "@worldcoin/idkit-core/hashing";
2230
- import { verifyCloudProof } from "@worldcoin/idkit-core/backend";
2231
- import { VerificationLevel as VerificationLevel2, VerificationState as VerificationState3 } from "@worldcoin/idkit-core";
2232
-
2233
- // src/hooks/useSession.ts
2234
- import { useEffect as useEffect8 } from "react";
2235
- import { useShallow } from "zustand/react/shallow";
2236
- import { VerificationState as VerificationState2 } from "@worldcoin/idkit-core";
2237
- import { useWorldBridgeStore as useWorldBridgeStore2 } from "@worldcoin/idkit-core";
2238
- var TERMINAL_STATES = [VerificationState2.Confirmed, VerificationState2.Failed];
2239
- function useSession(config) {
2240
- const { reset, result, connectorURI, createClient, pollForUpdates, verificationState, errorCode } = useWorldBridgeStore2(
2241
- useShallow((state) => ({
2242
- reset: state.reset,
2243
- result: state.result,
2244
- connectorURI: state.connectorURI,
2245
- createClient: state.createClient,
2246
- pollForUpdates: state.pollForUpdates,
2247
- verificationState: state.verificationState,
2248
- errorCode: state.errorCode
2249
- }))
2250
- );
2251
- useEffect8(() => {
2252
- if (verificationState === VerificationState2.PreparingClient && !connectorURI) {
2253
- void createClient(config);
2254
- }
2255
- }, [verificationState, connectorURI, createClient, config]);
2256
- useEffect8(() => {
2257
- if (TERMINAL_STATES.includes(verificationState)) return;
2258
- const interval = setInterval(() => {
2259
- void pollForUpdates();
2260
- }, 3e3);
2261
- return () => {
2262
- clearInterval(interval);
2263
- };
2264
- }, [verificationState, pollForUpdates]);
2265
- return {
2266
- status: verificationState,
2267
- sessionURI: connectorURI,
2268
- result,
2269
- errorCode,
2270
- reset
2271
- };
2272
- }
2273
- export {
2274
- IDKitWidget_default as IDKitWidget,
2275
- VerificationLevel2 as VerificationLevel,
2276
- VerificationState3 as VerificationState,
2277
- getCurrentLanguage,
2278
- getLocalizationConfig,
2279
- getSupportedLanguages,
2280
- setLocalizationConfig,
2281
- solidityEncode,
2282
- useIDKit_default as useIDKit,
2283
- useSession,
2284
- verifyCloudProof
2285
- };