@txnlab/use-wallet-ui-react 0.4.0 → 0.4.1

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/dist/style.css CHANGED
@@ -41,7 +41,7 @@
41
41
  --default-font-family: var(--font-sans);
42
42
  --default-mono-font-family: var(--font-mono);
43
43
  }
44
- [data-wallet-ui] {
44
+ [data-wallet-ui-scope] {
45
45
  *, ::after, ::before, ::backdrop, ::file-selector-button {
46
46
  box-sizing: border-box;
47
47
  margin: 0;
@@ -252,39 +252,34 @@
252
252
  --wui-color-overlay: rgba(0, 0, 0, 0.5);
253
253
  }
254
254
  }
255
- [data-wallet-ui-reset] {
256
- *, ::after, ::before, ::backdrop, ::file-selector-button {
257
- all: revert-layer;
258
- }
259
- }
260
- [data-wallet-ui] .absolute {
255
+ [data-wallet-ui-scope] .absolute {
261
256
  position: absolute;
262
257
  }
263
- [data-wallet-ui] .relative {
258
+ [data-wallet-ui-scope] .relative {
264
259
  position: relative;
265
260
  }
266
- [data-wallet-ui] .inset-y-0 {
261
+ [data-wallet-ui-scope] .inset-y-0 {
267
262
  inset-block: calc(var(--spacing) * 0);
268
263
  }
269
- [data-wallet-ui] .right-0 {
264
+ [data-wallet-ui-scope] .right-0 {
270
265
  right: calc(var(--spacing) * 0);
271
266
  }
272
- [data-wallet-ui] .right-4 {
267
+ [data-wallet-ui-scope] .right-4 {
273
268
  right: calc(var(--spacing) * 4);
274
269
  }
275
- [data-wallet-ui] .z-10 {
270
+ [data-wallet-ui-scope] .z-10 {
276
271
  z-index: 10;
277
272
  }
278
- [data-wallet-ui] .z-50 {
273
+ [data-wallet-ui-scope] .z-50 {
279
274
  z-index: 50;
280
275
  }
281
- [data-wallet-ui] .col-start-1 {
276
+ [data-wallet-ui-scope] .col-start-1 {
282
277
  grid-column-start: 1;
283
278
  }
284
- [data-wallet-ui] .row-start-1 {
279
+ [data-wallet-ui-scope] .row-start-1 {
285
280
  grid-row-start: 1;
286
281
  }
287
- [data-wallet-ui] .container {
282
+ [data-wallet-ui-scope] .container {
288
283
  width: 100%;
289
284
  @media (width >= 40rem) {
290
285
  max-width: 40rem;
@@ -302,473 +297,473 @@
302
297
  max-width: 96rem;
303
298
  }
304
299
  }
305
- [data-wallet-ui] .mt-0\.5 {
300
+ [data-wallet-ui-scope] .mt-0\.5 {
306
301
  margin-top: calc(var(--spacing) * 0.5);
307
302
  }
308
- [data-wallet-ui] .mt-1 {
303
+ [data-wallet-ui-scope] .mt-1 {
309
304
  margin-top: calc(var(--spacing) * 1);
310
305
  }
311
- [data-wallet-ui] .mt-2 {
306
+ [data-wallet-ui-scope] .mt-2 {
312
307
  margin-top: calc(var(--spacing) * 2);
313
308
  }
314
- [data-wallet-ui] .mr-1 {
309
+ [data-wallet-ui-scope] .mr-1 {
315
310
  margin-right: calc(var(--spacing) * 1);
316
311
  }
317
- [data-wallet-ui] .mr-1\.5 {
312
+ [data-wallet-ui-scope] .mr-1\.5 {
318
313
  margin-right: calc(var(--spacing) * 1.5);
319
314
  }
320
- [data-wallet-ui] .mb-1 {
315
+ [data-wallet-ui-scope] .mb-1 {
321
316
  margin-bottom: calc(var(--spacing) * 1);
322
317
  }
323
- [data-wallet-ui] .mb-2 {
318
+ [data-wallet-ui-scope] .mb-2 {
324
319
  margin-bottom: calc(var(--spacing) * 2);
325
320
  }
326
- [data-wallet-ui] .mb-3 {
321
+ [data-wallet-ui-scope] .mb-3 {
327
322
  margin-bottom: calc(var(--spacing) * 3);
328
323
  }
329
- [data-wallet-ui] .mb-4 {
324
+ [data-wallet-ui-scope] .mb-4 {
330
325
  margin-bottom: calc(var(--spacing) * 4);
331
326
  }
332
- [data-wallet-ui] .ml-0\.5 {
327
+ [data-wallet-ui-scope] .ml-0\.5 {
333
328
  margin-left: calc(var(--spacing) * 0.5);
334
329
  }
335
- [data-wallet-ui] .ml-1\.5 {
330
+ [data-wallet-ui-scope] .ml-1\.5 {
336
331
  margin-left: calc(var(--spacing) * 1.5);
337
332
  }
338
- [data-wallet-ui] .block {
333
+ [data-wallet-ui-scope] .block {
339
334
  display: block;
340
335
  }
341
- [data-wallet-ui] .flex {
336
+ [data-wallet-ui-scope] .flex {
342
337
  display: flex;
343
338
  }
344
- [data-wallet-ui] .grid {
339
+ [data-wallet-ui-scope] .grid {
345
340
  display: grid;
346
341
  }
347
- [data-wallet-ui] .hidden {
342
+ [data-wallet-ui-scope] .hidden {
348
343
  display: none;
349
344
  }
350
- [data-wallet-ui] .inline-block {
345
+ [data-wallet-ui-scope] .inline-block {
351
346
  display: inline-block;
352
347
  }
353
- [data-wallet-ui] .h-3 {
348
+ [data-wallet-ui-scope] .h-3 {
354
349
  height: calc(var(--spacing) * 3);
355
350
  }
356
- [data-wallet-ui] .h-4 {
351
+ [data-wallet-ui-scope] .h-4 {
357
352
  height: calc(var(--spacing) * 4);
358
353
  }
359
- [data-wallet-ui] .h-5 {
354
+ [data-wallet-ui-scope] .h-5 {
360
355
  height: calc(var(--spacing) * 5);
361
356
  }
362
- [data-wallet-ui] .h-6 {
357
+ [data-wallet-ui-scope] .h-6 {
363
358
  height: calc(var(--spacing) * 6);
364
359
  }
365
- [data-wallet-ui] .h-8 {
360
+ [data-wallet-ui-scope] .h-8 {
366
361
  height: calc(var(--spacing) * 8);
367
362
  }
368
- [data-wallet-ui] .h-12 {
363
+ [data-wallet-ui-scope] .h-12 {
369
364
  height: calc(var(--spacing) * 12);
370
365
  }
371
- [data-wallet-ui] .max-h-60 {
366
+ [data-wallet-ui-scope] .max-h-60 {
372
367
  max-height: calc(var(--spacing) * 60);
373
368
  }
374
- [data-wallet-ui] .max-h-full {
369
+ [data-wallet-ui-scope] .max-h-full {
375
370
  max-height: 100%;
376
371
  }
377
- [data-wallet-ui] .w-3 {
372
+ [data-wallet-ui-scope] .w-3 {
378
373
  width: calc(var(--spacing) * 3);
379
374
  }
380
- [data-wallet-ui] .w-4 {
375
+ [data-wallet-ui-scope] .w-4 {
381
376
  width: calc(var(--spacing) * 4);
382
377
  }
383
- [data-wallet-ui] .w-5 {
378
+ [data-wallet-ui-scope] .w-5 {
384
379
  width: calc(var(--spacing) * 5);
385
380
  }
386
- [data-wallet-ui] .w-6 {
381
+ [data-wallet-ui-scope] .w-6 {
387
382
  width: calc(var(--spacing) * 6);
388
383
  }
389
- [data-wallet-ui] .w-8 {
384
+ [data-wallet-ui-scope] .w-8 {
390
385
  width: calc(var(--spacing) * 8);
391
386
  }
392
- [data-wallet-ui] .w-12 {
387
+ [data-wallet-ui-scope] .w-12 {
393
388
  width: calc(var(--spacing) * 12);
394
389
  }
395
- [data-wallet-ui] .w-80 {
390
+ [data-wallet-ui-scope] .w-80 {
396
391
  width: calc(var(--spacing) * 80);
397
392
  }
398
- [data-wallet-ui] .w-full {
393
+ [data-wallet-ui-scope] .w-full {
399
394
  width: 100%;
400
395
  }
401
- [data-wallet-ui] .max-w-\[160px\] {
396
+ [data-wallet-ui-scope] .max-w-\[160px\] {
402
397
  max-width: 160px;
403
398
  }
404
- [data-wallet-ui] .max-w-\[220px\] {
399
+ [data-wallet-ui-scope] .max-w-\[220px\] {
405
400
  max-width: 220px;
406
401
  }
407
- [data-wallet-ui] .max-w-full {
402
+ [data-wallet-ui-scope] .max-w-full {
408
403
  max-width: 100%;
409
404
  }
410
- [data-wallet-ui] .max-w-sm {
405
+ [data-wallet-ui-scope] .max-w-sm {
411
406
  max-width: var(--container-sm);
412
407
  }
413
- [data-wallet-ui] .flex-1 {
408
+ [data-wallet-ui-scope] .flex-1 {
414
409
  flex: 1;
415
410
  }
416
- [data-wallet-ui] .flex-shrink-0 {
411
+ [data-wallet-ui-scope] .flex-shrink-0 {
417
412
  flex-shrink: 0;
418
413
  }
419
- [data-wallet-ui] .transform {
414
+ [data-wallet-ui-scope] .transform {
420
415
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
421
416
  }
422
- [data-wallet-ui] .cursor-default {
417
+ [data-wallet-ui-scope] .cursor-default {
423
418
  cursor: default;
424
419
  }
425
- [data-wallet-ui] .cursor-pointer {
420
+ [data-wallet-ui-scope] .cursor-pointer {
426
421
  cursor: pointer;
427
422
  }
428
- [data-wallet-ui] .grid-cols-1 {
423
+ [data-wallet-ui-scope] .grid-cols-1 {
429
424
  grid-template-columns: repeat(1, minmax(0, 1fr));
430
425
  }
431
- [data-wallet-ui] .place-items-center {
426
+ [data-wallet-ui-scope] .place-items-center {
432
427
  place-items: center;
433
428
  }
434
- [data-wallet-ui] .items-center {
429
+ [data-wallet-ui-scope] .items-center {
435
430
  align-items: center;
436
431
  }
437
- [data-wallet-ui] .justify-between {
432
+ [data-wallet-ui-scope] .justify-between {
438
433
  justify-content: space-between;
439
434
  }
440
- [data-wallet-ui] .justify-center {
435
+ [data-wallet-ui-scope] .justify-center {
441
436
  justify-content: center;
442
437
  }
443
- [data-wallet-ui] .gap-1 {
438
+ [data-wallet-ui-scope] .gap-1 {
444
439
  gap: calc(var(--spacing) * 1);
445
440
  }
446
- [data-wallet-ui] .gap-2 {
441
+ [data-wallet-ui-scope] .gap-2 {
447
442
  gap: calc(var(--spacing) * 2);
448
443
  }
449
- [data-wallet-ui] .gap-3 {
444
+ [data-wallet-ui-scope] .gap-3 {
450
445
  gap: calc(var(--spacing) * 3);
451
446
  }
452
- [data-wallet-ui] .space-y-1\.5 {
447
+ [data-wallet-ui-scope] .space-y-1\.5 {
453
448
  :where(& > :not(:last-child)) {
454
449
  --tw-space-y-reverse: 0;
455
450
  margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
456
451
  margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
457
452
  }
458
453
  }
459
- [data-wallet-ui] .self-center {
454
+ [data-wallet-ui-scope] .self-center {
460
455
  align-self: center;
461
456
  }
462
- [data-wallet-ui] .justify-self-end {
457
+ [data-wallet-ui-scope] .justify-self-end {
463
458
  justify-self: flex-end;
464
459
  }
465
- [data-wallet-ui] .truncate {
460
+ [data-wallet-ui-scope] .truncate {
466
461
  overflow: hidden;
467
462
  text-overflow: ellipsis;
468
463
  white-space: nowrap;
469
464
  }
470
- [data-wallet-ui] .overflow-auto {
465
+ [data-wallet-ui-scope] .overflow-auto {
471
466
  overflow: auto;
472
467
  }
473
- [data-wallet-ui] .overflow-hidden {
468
+ [data-wallet-ui-scope] .overflow-hidden {
474
469
  overflow: hidden;
475
470
  }
476
- [data-wallet-ui] .rounded {
471
+ [data-wallet-ui-scope] .rounded {
477
472
  border-radius: 0.25rem;
478
473
  }
479
- [data-wallet-ui] .rounded-3xl {
474
+ [data-wallet-ui-scope] .rounded-3xl {
480
475
  border-radius: var(--radius-3xl);
481
476
  }
482
- [data-wallet-ui] .rounded-full {
477
+ [data-wallet-ui-scope] .rounded-full {
483
478
  border-radius: calc(infinity * 1px);
484
479
  }
485
- [data-wallet-ui] .rounded-lg {
480
+ [data-wallet-ui-scope] .rounded-lg {
486
481
  border-radius: var(--radius-lg);
487
482
  }
488
- [data-wallet-ui] .rounded-md {
483
+ [data-wallet-ui-scope] .rounded-md {
489
484
  border-radius: var(--radius-md);
490
485
  }
491
- [data-wallet-ui] .rounded-xl {
486
+ [data-wallet-ui-scope] .rounded-xl {
492
487
  border-radius: var(--radius-xl);
493
488
  }
494
- [data-wallet-ui] .border {
489
+ [data-wallet-ui-scope] .border {
495
490
  border-style: var(--tw-border-style);
496
491
  border-width: 1px;
497
492
  }
498
- [data-wallet-ui] .border-2 {
493
+ [data-wallet-ui-scope] .border-2 {
499
494
  border-style: var(--tw-border-style);
500
495
  border-width: 2px;
501
496
  }
502
- [data-wallet-ui] .border-t {
497
+ [data-wallet-ui-scope] .border-t {
503
498
  border-top-style: var(--tw-border-style);
504
499
  border-top-width: 1px;
505
500
  }
506
- [data-wallet-ui] .border-\[var\(--wui-color-border\)\] {
501
+ [data-wallet-ui-scope] .border-\[var\(--wui-color-border\)\] {
507
502
  border-color: var(--wui-color-border);
508
503
  }
509
- [data-wallet-ui] .border-green-500 {
504
+ [data-wallet-ui-scope] .border-green-500 {
510
505
  border-color: var(--color-green-500);
511
506
  }
512
- [data-wallet-ui] .bg-\[var\(--wui-color-bg\)\] {
507
+ [data-wallet-ui-scope] .bg-\[var\(--wui-color-bg\)\] {
513
508
  background-color: var(--wui-color-bg);
514
509
  }
515
- [data-wallet-ui] .bg-\[var\(--wui-color-bg-secondary\)\] {
510
+ [data-wallet-ui-scope] .bg-\[var\(--wui-color-bg-secondary\)\] {
516
511
  background-color: var(--wui-color-bg-secondary);
517
512
  }
518
- [data-wallet-ui] .bg-\[var\(--wui-color-bg-tertiary\)\] {
513
+ [data-wallet-ui-scope] .bg-\[var\(--wui-color-bg-tertiary\)\] {
519
514
  background-color: var(--wui-color-bg-tertiary);
520
515
  }
521
- [data-wallet-ui] .bg-\[var\(--wui-color-overlay\)\] {
516
+ [data-wallet-ui-scope] .bg-\[var\(--wui-color-overlay\)\] {
522
517
  background-color: var(--wui-color-overlay);
523
518
  }
524
- [data-wallet-ui] .bg-\[var\(--wui-color-primary\)\] {
519
+ [data-wallet-ui-scope] .bg-\[var\(--wui-color-primary\)\] {
525
520
  background-color: var(--wui-color-primary);
526
521
  }
527
- [data-wallet-ui] .bg-blue-500 {
522
+ [data-wallet-ui-scope] .bg-blue-500 {
528
523
  background-color: var(--color-blue-500);
529
524
  }
530
- [data-wallet-ui] .bg-gray-200 {
525
+ [data-wallet-ui-scope] .bg-gray-200 {
531
526
  background-color: var(--color-gray-200);
532
527
  }
533
- [data-wallet-ui] .bg-red-100 {
528
+ [data-wallet-ui-scope] .bg-red-100 {
534
529
  background-color: var(--color-red-100);
535
530
  }
536
- [data-wallet-ui] .object-contain {
531
+ [data-wallet-ui-scope] .object-contain {
537
532
  object-fit: contain;
538
533
  }
539
- [data-wallet-ui] .p-2 {
534
+ [data-wallet-ui-scope] .p-2 {
540
535
  padding: calc(var(--spacing) * 2);
541
536
  }
542
- [data-wallet-ui] .p-3 {
537
+ [data-wallet-ui-scope] .p-3 {
543
538
  padding: calc(var(--spacing) * 3);
544
539
  }
545
- [data-wallet-ui] .p-4 {
540
+ [data-wallet-ui-scope] .p-4 {
546
541
  padding: calc(var(--spacing) * 4);
547
542
  }
548
- [data-wallet-ui] .px-1 {
543
+ [data-wallet-ui-scope] .px-1 {
549
544
  padding-inline: calc(var(--spacing) * 1);
550
545
  }
551
- [data-wallet-ui] .px-1\.5 {
546
+ [data-wallet-ui-scope] .px-1\.5 {
552
547
  padding-inline: calc(var(--spacing) * 1.5);
553
548
  }
554
- [data-wallet-ui] .px-3 {
549
+ [data-wallet-ui-scope] .px-3 {
555
550
  padding-inline: calc(var(--spacing) * 3);
556
551
  }
557
- [data-wallet-ui] .px-4 {
552
+ [data-wallet-ui-scope] .px-4 {
558
553
  padding-inline: calc(var(--spacing) * 4);
559
554
  }
560
- [data-wallet-ui] .px-6 {
555
+ [data-wallet-ui-scope] .px-6 {
561
556
  padding-inline: calc(var(--spacing) * 6);
562
557
  }
563
- [data-wallet-ui] .py-0\.5 {
558
+ [data-wallet-ui-scope] .py-0\.5 {
564
559
  padding-block: calc(var(--spacing) * 0.5);
565
560
  }
566
- [data-wallet-ui] .py-1 {
561
+ [data-wallet-ui-scope] .py-1 {
567
562
  padding-block: calc(var(--spacing) * 1);
568
563
  }
569
- [data-wallet-ui] .py-1\.5 {
564
+ [data-wallet-ui-scope] .py-1\.5 {
570
565
  padding-block: calc(var(--spacing) * 1.5);
571
566
  }
572
- [data-wallet-ui] .py-2 {
567
+ [data-wallet-ui-scope] .py-2 {
573
568
  padding-block: calc(var(--spacing) * 2);
574
569
  }
575
- [data-wallet-ui] .py-2\.5 {
570
+ [data-wallet-ui-scope] .py-2\.5 {
576
571
  padding-block: calc(var(--spacing) * 2.5);
577
572
  }
578
- [data-wallet-ui] .py-5 {
573
+ [data-wallet-ui-scope] .py-5 {
579
574
  padding-block: calc(var(--spacing) * 5);
580
575
  }
581
- [data-wallet-ui] .pt-5 {
576
+ [data-wallet-ui-scope] .pt-5 {
582
577
  padding-top: calc(var(--spacing) * 5);
583
578
  }
584
- [data-wallet-ui] .pr-2 {
579
+ [data-wallet-ui-scope] .pr-2 {
585
580
  padding-right: calc(var(--spacing) * 2);
586
581
  }
587
- [data-wallet-ui] .pr-3 {
582
+ [data-wallet-ui-scope] .pr-3 {
588
583
  padding-right: calc(var(--spacing) * 3);
589
584
  }
590
- [data-wallet-ui] .pr-8 {
585
+ [data-wallet-ui-scope] .pr-8 {
591
586
  padding-right: calc(var(--spacing) * 8);
592
587
  }
593
- [data-wallet-ui] .pr-9 {
588
+ [data-wallet-ui-scope] .pr-9 {
594
589
  padding-right: calc(var(--spacing) * 9);
595
590
  }
596
- [data-wallet-ui] .pb-3 {
591
+ [data-wallet-ui-scope] .pb-3 {
597
592
  padding-bottom: calc(var(--spacing) * 3);
598
593
  }
599
- [data-wallet-ui] .pb-4 {
594
+ [data-wallet-ui-scope] .pb-4 {
600
595
  padding-bottom: calc(var(--spacing) * 4);
601
596
  }
602
- [data-wallet-ui] .pl-2\.5 {
597
+ [data-wallet-ui-scope] .pl-2\.5 {
603
598
  padding-left: calc(var(--spacing) * 2.5);
604
599
  }
605
- [data-wallet-ui] .pl-3 {
600
+ [data-wallet-ui-scope] .pl-3 {
606
601
  padding-left: calc(var(--spacing) * 3);
607
602
  }
608
- [data-wallet-ui] .text-center {
603
+ [data-wallet-ui-scope] .text-center {
609
604
  text-align: center;
610
605
  }
611
- [data-wallet-ui] .text-left {
606
+ [data-wallet-ui-scope] .text-left {
612
607
  text-align: left;
613
608
  }
614
- [data-wallet-ui] .align-baseline {
609
+ [data-wallet-ui-scope] .align-baseline {
615
610
  vertical-align: baseline;
616
611
  }
617
- [data-wallet-ui] .text-base {
612
+ [data-wallet-ui-scope] .text-base {
618
613
  font-size: var(--text-base);
619
614
  line-height: var(--tw-leading, var(--text-base--line-height));
620
615
  }
621
- [data-wallet-ui] .text-lg {
616
+ [data-wallet-ui-scope] .text-lg {
622
617
  font-size: var(--text-lg);
623
618
  line-height: var(--tw-leading, var(--text-lg--line-height));
624
619
  }
625
- [data-wallet-ui] .text-sm {
620
+ [data-wallet-ui-scope] .text-sm {
626
621
  font-size: var(--text-sm);
627
622
  line-height: var(--tw-leading, var(--text-sm--line-height));
628
623
  }
629
- [data-wallet-ui] .text-xl {
624
+ [data-wallet-ui-scope] .text-xl {
630
625
  font-size: var(--text-xl);
631
626
  line-height: var(--tw-leading, var(--text-xl--line-height));
632
627
  }
633
- [data-wallet-ui] .font-bold {
628
+ [data-wallet-ui-scope] .font-bold {
634
629
  --tw-font-weight: var(--font-weight-bold);
635
630
  font-weight: var(--font-weight-bold);
636
631
  }
637
- [data-wallet-ui] .font-medium {
632
+ [data-wallet-ui-scope] .font-medium {
638
633
  --tw-font-weight: var(--font-weight-medium);
639
634
  font-weight: var(--font-weight-medium);
640
635
  }
641
- [data-wallet-ui] .font-normal {
636
+ [data-wallet-ui-scope] .font-normal {
642
637
  --tw-font-weight: var(--font-weight-normal);
643
638
  font-weight: var(--font-weight-normal);
644
639
  }
645
- [data-wallet-ui] .text-\[var\(--wui-color-link\)\] {
640
+ [data-wallet-ui-scope] .text-\[var\(--wui-color-link\)\] {
646
641
  color: var(--wui-color-link);
647
642
  }
648
- [data-wallet-ui] .text-\[var\(--wui-color-primary\)\] {
643
+ [data-wallet-ui-scope] .text-\[var\(--wui-color-primary\)\] {
649
644
  color: var(--wui-color-primary);
650
645
  }
651
- [data-wallet-ui] .text-\[var\(--wui-color-primary-text\)\] {
646
+ [data-wallet-ui-scope] .text-\[var\(--wui-color-primary-text\)\] {
652
647
  color: var(--wui-color-primary-text);
653
648
  }
654
- [data-wallet-ui] .text-\[var\(--wui-color-text\)\] {
649
+ [data-wallet-ui-scope] .text-\[var\(--wui-color-text\)\] {
655
650
  color: var(--wui-color-text);
656
651
  }
657
- [data-wallet-ui] .text-\[var\(--wui-color-text-secondary\)\] {
652
+ [data-wallet-ui-scope] .text-\[var\(--wui-color-text-secondary\)\] {
658
653
  color: var(--wui-color-text-secondary);
659
654
  }
660
- [data-wallet-ui] .text-\[var\(--wui-color-text-tertiary\)\] {
655
+ [data-wallet-ui-scope] .text-\[var\(--wui-color-text-tertiary\)\] {
661
656
  color: var(--wui-color-text-tertiary);
662
657
  }
663
- [data-wallet-ui] .text-blue-500 {
658
+ [data-wallet-ui-scope] .text-blue-500 {
664
659
  color: var(--color-blue-500);
665
660
  }
666
- [data-wallet-ui] .text-gray-400 {
661
+ [data-wallet-ui-scope] .text-gray-400 {
667
662
  color: var(--color-gray-400);
668
663
  }
669
- [data-wallet-ui] .text-green-500 {
664
+ [data-wallet-ui-scope] .text-green-500 {
670
665
  color: var(--color-green-500);
671
666
  }
672
- [data-wallet-ui] .text-red-700 {
667
+ [data-wallet-ui-scope] .text-red-700 {
673
668
  color: var(--color-red-700);
674
669
  }
675
- [data-wallet-ui] .opacity-80 {
670
+ [data-wallet-ui-scope] .opacity-80 {
676
671
  opacity: 80%;
677
672
  }
678
- [data-wallet-ui] .shadow-lg {
673
+ [data-wallet-ui-scope] .shadow-lg {
679
674
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
680
675
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
681
676
  }
682
- [data-wallet-ui] .shadow-sm {
677
+ [data-wallet-ui-scope] .shadow-sm {
683
678
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
684
679
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
685
680
  }
686
- [data-wallet-ui] .shadow-xl {
681
+ [data-wallet-ui-scope] .shadow-xl {
687
682
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
688
683
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
689
684
  }
690
- [data-wallet-ui] .ring-1 {
685
+ [data-wallet-ui-scope] .ring-1 {
691
686
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
692
687
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
693
688
  }
694
- [data-wallet-ui] .ring-black\/5 {
689
+ [data-wallet-ui-scope] .ring-black\/5 {
695
690
  --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
696
691
  @supports (color: color-mix(in lab, red, red)) {
697
692
  --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
698
693
  }
699
694
  }
700
- [data-wallet-ui] .transition {
695
+ [data-wallet-ui-scope] .transition {
701
696
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
702
697
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
703
698
  transition-duration: var(--tw-duration, var(--default-transition-duration));
704
699
  }
705
- [data-wallet-ui] .transition-all {
700
+ [data-wallet-ui-scope] .transition-all {
706
701
  transition-property: all;
707
702
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
708
703
  transition-duration: var(--tw-duration, var(--default-transition-duration));
709
704
  }
710
- [data-wallet-ui] .transition-colors {
705
+ [data-wallet-ui-scope] .transition-colors {
711
706
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
712
707
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
713
708
  transition-duration: var(--tw-duration, var(--default-transition-duration));
714
709
  }
715
- [data-wallet-ui] .transition-opacity {
710
+ [data-wallet-ui-scope] .transition-opacity {
716
711
  transition-property: opacity;
717
712
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
718
713
  transition-duration: var(--tw-duration, var(--default-transition-duration));
719
714
  }
720
- [data-wallet-ui] .duration-150 {
715
+ [data-wallet-ui-scope] .duration-150 {
721
716
  --tw-duration: 150ms;
722
717
  transition-duration: 150ms;
723
718
  }
724
- [data-wallet-ui] .ease-in-out {
719
+ [data-wallet-ui-scope] .ease-in-out {
725
720
  --tw-ease: var(--ease-in-out);
726
721
  transition-timing-function: var(--ease-in-out);
727
722
  }
728
- [data-wallet-ui] .select-none {
723
+ [data-wallet-ui-scope] .select-none {
729
724
  -webkit-user-select: none;
730
725
  user-select: none;
731
726
  }
732
- [data-wallet-ui] .group-data-\[selected\]\:font-medium {
727
+ [data-wallet-ui-scope] .group-data-\[selected\]\:font-medium {
733
728
  &:is(:where(.group)[data-selected] *) {
734
729
  --tw-font-weight: var(--font-weight-medium);
735
730
  font-weight: var(--font-weight-medium);
736
731
  }
737
732
  }
738
- [data-wallet-ui] .group-\[\&\:not\(\[data-selected\]\)\]\:hidden {
733
+ [data-wallet-ui-scope] .group-\[\&\:not\(\[data-selected\]\)\]\:hidden {
739
734
  &:is(:where(.group):not([data-selected]) *) {
740
735
  display: none;
741
736
  }
742
737
  }
743
- [data-wallet-ui] .hover\:bg-\[var\(--wui-color-bg-hover\)\] {
738
+ [data-wallet-ui-scope] .hover\:bg-\[var\(--wui-color-bg-hover\)\] {
744
739
  &:hover {
745
740
  @media (hover: hover) {
746
741
  background-color: var(--wui-color-bg-hover);
747
742
  }
748
743
  }
749
744
  }
750
- [data-wallet-ui] .hover\:bg-\[var\(--wui-color-primary-hover\)\] {
745
+ [data-wallet-ui-scope] .hover\:bg-\[var\(--wui-color-primary-hover\)\] {
751
746
  &:hover {
752
747
  @media (hover: hover) {
753
748
  background-color: var(--wui-color-primary-hover);
754
749
  }
755
750
  }
756
751
  }
757
- [data-wallet-ui] .hover\:bg-red-200 {
752
+ [data-wallet-ui-scope] .hover\:bg-red-200 {
758
753
  &:hover {
759
754
  @media (hover: hover) {
760
755
  background-color: var(--color-red-200);
761
756
  }
762
757
  }
763
758
  }
764
- [data-wallet-ui] .hover\:text-\[var\(--wui-color-link-hover\)\] {
759
+ [data-wallet-ui-scope] .hover\:text-\[var\(--wui-color-link-hover\)\] {
765
760
  &:hover {
766
761
  @media (hover: hover) {
767
762
  color: var(--wui-color-link-hover);
768
763
  }
769
764
  }
770
765
  }
771
- [data-wallet-ui] .hover\:brightness-90 {
766
+ [data-wallet-ui-scope] .hover\:brightness-90 {
772
767
  &:hover {
773
768
  @media (hover: hover) {
774
769
  --tw-brightness: brightness(90%);
@@ -776,71 +771,71 @@
776
771
  }
777
772
  }
778
773
  }
779
- [data-wallet-ui] .focus\:border-transparent {
774
+ [data-wallet-ui-scope] .focus\:border-transparent {
780
775
  &:focus {
781
776
  border-color: transparent;
782
777
  }
783
778
  }
784
- [data-wallet-ui] .focus\:ring-2 {
779
+ [data-wallet-ui-scope] .focus\:ring-2 {
785
780
  &:focus {
786
781
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
787
782
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
788
783
  }
789
784
  }
790
- [data-wallet-ui] .focus\:ring-\[var\(--wui-color-primary\)\] {
785
+ [data-wallet-ui-scope] .focus\:ring-\[var\(--wui-color-primary\)\] {
791
786
  &:focus {
792
787
  --tw-ring-color: var(--wui-color-primary);
793
788
  }
794
789
  }
795
- [data-wallet-ui] .focus\:outline-none {
790
+ [data-wallet-ui-scope] .focus\:outline-none {
796
791
  &:focus {
797
792
  --tw-outline-style: none;
798
793
  outline-style: none;
799
794
  }
800
795
  }
801
- [data-wallet-ui] .disabled\:opacity-50 {
796
+ [data-wallet-ui-scope] .disabled\:opacity-50 {
802
797
  &:disabled {
803
798
  opacity: 50%;
804
799
  }
805
800
  }
806
- [data-wallet-ui] .data-\[focus\]\:bg-\[var\(--wui-color-bg-hover\)\] {
801
+ [data-wallet-ui-scope] .data-\[focus\]\:bg-\[var\(--wui-color-bg-hover\)\] {
807
802
  &[data-focus] {
808
803
  background-color: var(--wui-color-bg-hover);
809
804
  }
810
805
  }
811
- [data-wallet-ui] .data-\[focus\]\:outline-none {
806
+ [data-wallet-ui-scope] .data-\[focus\]\:outline-none {
812
807
  &[data-focus] {
813
808
  --tw-outline-style: none;
814
809
  outline-style: none;
815
810
  }
816
811
  }
817
- [data-wallet-ui] .data-\[leave\]\:transition {
812
+ [data-wallet-ui-scope] .data-\[leave\]\:transition {
818
813
  &[data-leave] {
819
814
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
820
815
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
821
816
  transition-duration: var(--tw-duration, var(--default-transition-duration));
822
817
  }
823
818
  }
824
- [data-wallet-ui] .data-\[leave\]\:duration-100 {
819
+ [data-wallet-ui-scope] .data-\[leave\]\:duration-100 {
825
820
  &[data-leave] {
826
821
  --tw-duration: 100ms;
827
822
  transition-duration: 100ms;
828
823
  }
829
824
  }
830
- [data-wallet-ui] .data-\[leave\]\:ease-in {
825
+ [data-wallet-ui-scope] .data-\[leave\]\:ease-in {
831
826
  &[data-leave] {
832
827
  --tw-ease: var(--ease-in);
833
828
  transition-timing-function: var(--ease-in);
834
829
  }
835
830
  }
836
- [data-wallet-ui] .data-\[closed\]\:data-\[leave\]\:opacity-0 {
831
+ [data-wallet-ui-scope] .data-\[closed\]\:data-\[leave\]\:opacity-0 {
837
832
  &[data-closed] {
838
833
  &[data-leave] {
839
834
  opacity: 0%;
840
835
  }
841
836
  }
842
837
  }
843
- [data-wallet-ui] .data-\[state\=entered\]\:scale-100 {
838
+ [data-wallet-ui-scope] .data-\[state\=entered\]\:scale-100 {
844
839
  &[data-state="entered"] {
845
840
  --tw-scale-x: 100%;
846
841
  --tw-scale-y: 100%;
@@ -848,12 +843,12 @@
848
843
  scale: var(--tw-scale-x) var(--tw-scale-y);
849
844
  }
850
845
  }
851
- [data-wallet-ui] .data-\[state\=entered\]\:opacity-100 {
846
+ [data-wallet-ui-scope] .data-\[state\=entered\]\:opacity-100 {
852
847
  &[data-state="entered"] {
853
848
  opacity: 100%;
854
849
  }
855
850
  }
856
- [data-wallet-ui] .data-\[state\=exiting\]\:scale-90 {
851
+ [data-wallet-ui-scope] .data-\[state\=exiting\]\:scale-90 {
857
852
  &[data-state="exiting"] {
858
853
  --tw-scale-x: 90%;
859
854
  --tw-scale-y: 90%;
@@ -861,12 +856,12 @@
861
856
  scale: var(--tw-scale-x) var(--tw-scale-y);
862
857
  }
863
858
  }
864
- [data-wallet-ui] .data-\[state\=exiting\]\:opacity-0 {
859
+ [data-wallet-ui-scope] .data-\[state\=exiting\]\:opacity-0 {
865
860
  &[data-state="exiting"] {
866
861
  opacity: 0%;
867
862
  }
868
863
  }
869
- [data-wallet-ui] .data-\[state\=starting\]\:scale-90 {
864
+ [data-wallet-ui-scope] .data-\[state\=starting\]\:scale-90 {
870
865
  &[data-state="starting"] {
871
866
  --tw-scale-x: 90%;
872
867
  --tw-scale-y: 90%;
@@ -874,37 +869,37 @@
874
869
  scale: var(--tw-scale-x) var(--tw-scale-y);
875
870
  }
876
871
  }
877
- [data-wallet-ui] .data-\[state\=starting\]\:opacity-0 {
872
+ [data-wallet-ui-scope] .data-\[state\=starting\]\:opacity-0 {
878
873
  &[data-state="starting"] {
879
874
  opacity: 0%;
880
875
  }
881
876
  }
882
- [data-wallet-ui] .md\:mr-2 {
877
+ [data-wallet-ui-scope] .md\:mr-2 {
883
878
  @media (width >= 48rem) {
884
879
  margin-right: calc(var(--spacing) * 2);
885
880
  }
886
881
  }
887
- [data-wallet-ui] .md\:block {
882
+ [data-wallet-ui-scope] .md\:block {
888
883
  @media (width >= 48rem) {
889
884
  display: block;
890
885
  }
891
886
  }
892
- [data-wallet-ui] .md\:pl-3\.5 {
887
+ [data-wallet-ui-scope] .md\:pl-3\.5 {
893
888
  @media (width >= 48rem) {
894
889
  padding-left: calc(var(--spacing) * 3.5);
895
890
  }
896
891
  }
897
- [data-wallet-ui] .dark\:bg-\[\#192A39\] {
892
+ [data-wallet-ui-scope] .dark\:bg-\[\#192A39\] {
898
893
  @media (prefers-color-scheme: dark) {
899
894
  background-color: #192A39;
900
895
  }
901
896
  }
902
- [data-wallet-ui] .dark\:bg-gray-200 {
897
+ [data-wallet-ui-scope] .dark\:bg-gray-200 {
903
898
  @media (prefers-color-scheme: dark) {
904
899
  background-color: var(--color-gray-200);
905
900
  }
906
901
  }
907
- [data-wallet-ui] .dark\:bg-red-900\/40 {
902
+ [data-wallet-ui-scope] .dark\:bg-red-900\/40 {
908
903
  @media (prefers-color-scheme: dark) {
909
904
  background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 40%, transparent);
910
905
  @supports (color: color-mix(in lab, red, red)) {
@@ -912,17 +907,17 @@
912
907
  }
913
908
  }
914
909
  }
915
- [data-wallet-ui] .dark\:text-gray-500 {
910
+ [data-wallet-ui-scope] .dark\:text-gray-500 {
916
911
  @media (prefers-color-scheme: dark) {
917
912
  color: var(--color-gray-500);
918
913
  }
919
914
  }
920
- [data-wallet-ui] .dark\:text-red-300 {
915
+ [data-wallet-ui-scope] .dark\:text-red-300 {
921
916
  @media (prefers-color-scheme: dark) {
922
917
  color: var(--color-red-300);
923
918
  }
924
919
  }
925
- [data-wallet-ui] .dark\:hover\:bg-red-800\/60 {
920
+ [data-wallet-ui-scope] .dark\:hover\:bg-red-800\/60 {
926
921
  @media (prefers-color-scheme: dark) {
927
922
  &:hover {
928
923
  @media (hover: hover) {