@pelican-identity/react 2.0.9 → 2.0.10

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/index.js CHANGED
@@ -255,134 +255,469 @@ var PelicanAuth = (config) => {
255
255
  start();
256
256
  }
257
257
  }, [config.continuousMode]);
258
- return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
259
- /* @__PURE__ */ jsxRuntime.jsx(
260
- "div",
261
- {
262
- style: {
263
- maxWidth: "275px",
264
- justifyContent: "space-between",
265
- alignItems: "center",
266
- width: "100%"
267
- },
268
- children: !config.continuousMode && /* @__PURE__ */ jsxRuntime.jsxs(
269
- "div",
270
- {
271
- style: {
272
- width: "100%",
273
- display: "flex",
274
- justifyContent: "space-between",
275
- alignItems: "center"
276
- },
277
- children: [
278
- /* @__PURE__ */ jsxRuntime.jsx(
279
- "button",
280
- {
281
- type: "button",
282
- style: {
283
- border: "none",
284
- background: "transparent",
285
- cursor: "pointer"
286
- },
287
- onClick: () => {
288
- start();
289
- },
290
- disabled: config.continuousMode,
291
- children: config.buttonComponent ? config.buttonComponent : /* @__PURE__ */ jsxRuntime.jsx(
292
- PelicanButton_default,
293
- {
294
- authType: config.authType,
295
- text: config.buttonText
296
- }
297
- )
298
- }
299
- ),
300
- state !== "idle" && /* @__PURE__ */ jsxRuntime.jsx(
301
- "button",
302
- {
303
- onClick: () => {
304
- stop();
305
- config.onClose?.();
306
- },
307
- className: "close-button",
308
- "aria-label": "Close",
309
- type: "button",
310
- children: /* @__PURE__ */ jsxRuntime.jsx(
311
- "svg",
312
- {
313
- className: "close-icon",
314
- fill: "#fff",
315
- stroke: "#fff",
316
- viewBox: "0 0 24 24",
317
- role: "img",
318
- "aria-label": "close icon",
319
- children: /* @__PURE__ */ jsxRuntime.jsx(
320
- "path",
321
- {
322
- strokeLinecap: "round",
323
- strokeLinejoin: "round",
324
- strokeWidth: 4,
325
- d: "M6 18L18 6M6 6l12 12"
326
- }
327
- )
328
- }
329
- )
330
- }
331
- )
332
- ]
333
- }
334
- )
335
- }
336
- ),
337
- state !== "idle" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "auth-container", children: [
338
- successMessage && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "success-message", style: { textAlign: "center" }, children: [
339
- successMessage,
340
- config.continuousMode && /* @__PURE__ */ jsxRuntime.jsx(
341
- "p",
342
- {
343
- style: {
344
- fontSize: "0.8rem",
345
- marginTop: "0.5rem",
346
- color: "#f3f3f3",
347
- textAlign: "center"
348
- },
349
- children: "Preparing next session..."
350
- }
351
- )
352
- ] }),
353
- error && state === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "error-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "error-message", children: error.message }) }),
354
- isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "content-wrapper", children: [
355
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "main-heading", children: "one sec..." }),
356
- /* @__PURE__ */ jsxRuntime.jsx(
357
- "span",
358
- {
359
- className: "loader",
360
- style: { margin: "1rem auto", width: "252px" }
361
- }
362
- )
363
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "content-wrapper", children: state === "awaiting-pair" && !successMessage && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "unpaired-container", children: [
364
- !deeplink && !config.forceQRCode && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "main-heading", children: "Open Pelican Vault" }),
365
- !config.forceQRCode && deeplink ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mobile-auth-container", children: [
366
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "logo-container", children: /* @__PURE__ */ jsxRuntime.jsx(
367
- "img",
258
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
259
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes fadeUp {
260
+ from {
261
+ opacity: 0;
262
+ transform: translateY(20px);
263
+ }
264
+ to {
265
+ opacity: 1;
266
+ transform: translateY(0);
267
+ }
268
+ }
269
+
270
+ @keyframes spin {
271
+ to {
272
+ transform: rotate(360deg);
273
+ }
274
+ }
275
+
276
+ @keyframes successPulse {
277
+ 0%,
278
+ 100% {
279
+ transform: scale(1);
280
+ opacity: 1;
281
+ }
282
+ 50% {
283
+ transform: scale(1.05);
284
+ opacity: 0.9;
285
+ }
286
+ }
287
+
288
+ .auth-container {
289
+ width: 300px;
290
+ max-width: fit-content;
291
+ padding: 1rem;
292
+ margin-top: 0.3rem;
293
+ position: relative;
294
+ animation: fadeUp 0.5s ease-out;
295
+ background-color: #fcfcfc;
296
+ border-radius: 2.5rem;
297
+ display: flex;
298
+ flex-direction: column;
299
+ justify-content: space-between;
300
+ align-items: center;
301
+ gap: 1rem;
302
+ min-height: 320px;
303
+ }
304
+ .js-auth-container {
305
+ width: 300px;
306
+ max-width: fit-content;
307
+ padding: 1rem;
308
+ margin-top: 0.3rem;
309
+ position: relative;
310
+ background-color: #fcfcfc;
311
+ border-radius: 2.5rem;
312
+ display: flex;
313
+ flex-direction: column;
314
+ justify-content: space-between;
315
+ align-items: center;
316
+ gap: 1rem;
317
+ min-height: 320px;
318
+ }
319
+
320
+ .close-button {
321
+ background-color: #2b2b2bff;
322
+ border: none;
323
+ cursor: pointer;
324
+ transition: opacity 0.2s;
325
+ height: 1.5rem;
326
+ width: 1.5rem;
327
+ display: flex;
328
+ align-items: center;
329
+ justify-content: center;
330
+ border-radius: 50%;
331
+ }
332
+
333
+ .close-button:hover {
334
+ opacity: 0.6;
335
+ }
336
+
337
+ .close-icon {
338
+ width: 1.5rem;
339
+ height: 1.5rem;
340
+ fill: #000000;
341
+ }
342
+
343
+ .retry-container {
344
+ text-align: center;
345
+ padding: 3rem 0;
346
+ }
347
+
348
+ .retry-container > div:first-child {
349
+ margin-bottom: 1rem;
350
+ }
351
+
352
+ .retry-text {
353
+ font-size: 1.125rem;
354
+ font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
355
+ }
356
+
357
+ .content-wrapper {
358
+ display: flex;
359
+ flex-direction: column;
360
+ justify-content: center;
361
+ align-items: center;
362
+ gap: 2rem;
363
+ }
364
+
365
+ .unpaired-container {
366
+ text-align: center;
367
+ display: flex;
368
+ flex-direction: column;
369
+ }
370
+
371
+ .main-heading {
372
+ font-size: 0.75rem;
373
+ font-weight: 600;
374
+ color: #585858;
375
+ font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
376
+ }
377
+
378
+ @media (min-width: 768px) {
379
+ .main-heading {
380
+ font-size: 1rem;
381
+ font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
382
+ }
383
+ }
384
+
385
+ @media (min-width: 1024px) {
386
+ .main-heading {
387
+ font-size: 1rem;
388
+ font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
389
+ }
390
+ }
391
+
392
+ .mobile-auth-container {
393
+ display: flex;
394
+ flex-direction: column;
395
+ gap: 0.7rem;
396
+ width: 253px;
397
+ }
398
+
399
+ .logo-container {
400
+ display: flex;
401
+ justify-content: center;
402
+ padding: 2rem 0;
403
+ }
404
+
405
+ .open-app-link {
406
+ display: inline-block;
407
+ padding: 0.75rem 2rem;
408
+ background-color: #2b2b2bff;
409
+ width: fit-content;
410
+ align-self: center;
411
+
412
+ border-radius: 18px;
413
+ color: #fff;
414
+ font-weight: 600;
415
+ font-size: 1rem;
416
+ text-decoration: none;
417
+ transition: background-color 0.2s;
418
+ font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
419
+ }
420
+
421
+ .open-app-link:hover {
422
+ background-color: rgba(217, 235, 27, 0.9);
423
+ color: #000;
424
+ }
425
+
426
+ .helper-text {
427
+ font-size: 0.75rem;
428
+ color: #6b7280;
429
+ font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
430
+ }
431
+
432
+ .qr-container {
433
+ display: flex;
434
+ justify-content: center;
435
+ }
436
+
437
+ .qr-wrapper {
438
+ display: flex;
439
+ justify-content: center;
440
+ align-items: center;
441
+ overflow: hidden;
442
+ border-radius: 2rem;
443
+ background-color: #fff;
444
+ padding: 0.2rem;
445
+ height: 244px;
446
+ width: 244px;
447
+ }
448
+
449
+ .qr-image {
450
+ height: 90%;
451
+ width: 90%;
452
+ }
453
+
454
+ .loader-container {
455
+ display: flex;
456
+ justify-content: center;
457
+ }
458
+
459
+ .instruction-text {
460
+ font-size: 0.875rem;
461
+ color: #9ca3af;
462
+ font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
463
+ }
464
+
465
+ .paired-container {
466
+ text-align: center;
467
+ display: flex;
468
+ flex-direction: column;
469
+ gap: 1rem;
470
+ max-width: 250px;
471
+ }
472
+
473
+ .paired-heading {
474
+ font-size: 1rem;
475
+ font-weight: 800;
476
+ font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
477
+ }
478
+
479
+ @media (min-width: 768px) {
480
+ .paired-heading {
481
+ font-size: 1rem;
482
+ font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
483
+ }
484
+ }
485
+
486
+ .success-message {
487
+ background-color: #121212;
488
+ color: #d9eb1b;
489
+ padding: 0.5rem 1rem;
490
+ border-radius: 1.3rem;
491
+ font-weight: 700;
492
+ font-size: 1rem;
493
+ animation: successPulse 0.2s ease-in-out;
494
+ margin: 0.5rem 0;
495
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
496
+ width: 300px;
497
+ max-width: fit-content;
498
+ }
499
+
500
+ .auto-renew-badge {
501
+ display: inline-block;
502
+ background-color: rgba(217, 235, 27, 0.2);
503
+ border: 1px solid #d9eb1b;
504
+ color: #d9eb1b;
505
+ padding: 0.25rem 0.75rem;
506
+ border-radius: 9999px;
507
+ font-size: 0.75rem;
508
+ font-weight: 600;
509
+ margin-top: 0.5rem;
510
+ }
511
+
512
+ .error-wrapper {
513
+ display: flex;
514
+ justify-content: center;
515
+ align-items: center;
516
+ text-align: center;
517
+ border-radius: 1.5rem;
518
+ border: 1px solid rgb(255, 236, 236);
519
+ background-color: rgb(255, 255, 255);
520
+ width: 250px;
521
+ height: 80px;
522
+ }
523
+
524
+ .error-message {
525
+ font-size: 0.75rem;
526
+ font-weight: 400;
527
+ color: rgb(255, 139, 139);
528
+ font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
529
+ max-width: 70%;
530
+ }
531
+
532
+ .loader {
533
+ width: 48px;
534
+ height: 48px;
535
+ position: relative;
536
+ }
537
+ .loader::before,
538
+ .loader::after {
539
+ content: "";
540
+ position: absolute;
541
+ left: 50%;
542
+ top: 50%;
543
+ transform: translate(-50%, -50%);
544
+ width: 48em;
545
+ height: 48em;
546
+ background-image: radial-gradient(circle 10px, #585858 100%, transparent 0),
547
+ radial-gradient(circle 10px, #585858 100%, transparent 0),
548
+ radial-gradient(circle 10px, #585858 100%, transparent 0),
549
+ radial-gradient(circle 10px, #585858 100%, transparent 0),
550
+ radial-gradient(circle 10px, #585858 100%, transparent 0),
551
+ radial-gradient(circle 10px, #585858 100%, transparent 0),
552
+ radial-gradient(circle 10px, #585858 100%, transparent 0),
553
+ radial-gradient(circle 10px, #585858 100%, transparent 0),
554
+ radial-gradient(circle 10px, #585858 100%, transparent 0);
555
+ background-position: 0em -18em, 0em 18em, 18em 0em, -18em 0em, 13em -13em,
556
+ -13em -13em, 13em 13em, -13em 13em;
557
+ background-repeat: no-repeat;
558
+ font-size: 0.5px;
559
+ border-radius: 50%;
560
+ animation: blast 1s ease-in infinite;
561
+ }
562
+ .loader::after {
563
+ font-size: 1px;
564
+ background: #585858;
565
+ animation: bounce 1s ease-in infinite;
566
+ }
567
+
568
+ @keyframes bounce {
569
+ 0%,
570
+ 100% {
571
+ font-size: 0.75px;
572
+ }
573
+ 50% {
574
+ font-size: 1.5px;
575
+ }
576
+ }
577
+ @keyframes blast {
578
+ 0%,
579
+ 40% {
580
+ font-size: 0.5px;
581
+ }
582
+ 70% {
583
+ opacity: 1;
584
+ font-size: 4px;
585
+ }
586
+ 100% {
587
+ font-size: 6px;
588
+ opacity: 0;
589
+ }
590
+ }
591
+ ` }),
592
+ /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
593
+ /* @__PURE__ */ jsxRuntime.jsx(
594
+ "div",
595
+ {
596
+ style: {
597
+ maxWidth: "275px",
598
+ justifyContent: "space-between",
599
+ alignItems: "center",
600
+ width: "100%"
601
+ },
602
+ children: !config.continuousMode && /* @__PURE__ */ jsxRuntime.jsxs(
603
+ "div",
604
+ {
605
+ style: {
606
+ width: "100%",
607
+ display: "flex",
608
+ justifyContent: "space-between",
609
+ alignItems: "center"
610
+ },
611
+ children: [
612
+ /* @__PURE__ */ jsxRuntime.jsx(
613
+ "button",
614
+ {
615
+ type: "button",
616
+ style: {
617
+ border: "none",
618
+ background: "transparent",
619
+ cursor: "pointer"
620
+ },
621
+ onClick: () => {
622
+ start();
623
+ },
624
+ disabled: config.continuousMode,
625
+ children: config.buttonComponent ? config.buttonComponent : /* @__PURE__ */ jsxRuntime.jsx(
626
+ PelicanButton_default,
627
+ {
628
+ authType: config.authType,
629
+ text: config.buttonText
630
+ }
631
+ )
632
+ }
633
+ ),
634
+ state !== "idle" && /* @__PURE__ */ jsxRuntime.jsx(
635
+ "button",
636
+ {
637
+ onClick: () => {
638
+ stop();
639
+ config.onClose?.();
640
+ },
641
+ className: "close-button",
642
+ "aria-label": "Close",
643
+ type: "button",
644
+ children: /* @__PURE__ */ jsxRuntime.jsx(
645
+ "svg",
646
+ {
647
+ className: "close-icon",
648
+ fill: "#fff",
649
+ stroke: "#fff",
650
+ viewBox: "0 0 24 24",
651
+ role: "img",
652
+ "aria-label": "close icon",
653
+ children: /* @__PURE__ */ jsxRuntime.jsx(
654
+ "path",
655
+ {
656
+ strokeLinecap: "round",
657
+ strokeLinejoin: "round",
658
+ strokeWidth: 4,
659
+ d: "M6 18L18 6M6 6l12 12"
660
+ }
661
+ )
662
+ }
663
+ )
664
+ }
665
+ )
666
+ ]
667
+ }
668
+ )
669
+ }
670
+ ),
671
+ state !== "idle" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "auth-container", children: [
672
+ successMessage && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "success-message", style: { textAlign: "center" }, children: [
673
+ successMessage,
674
+ config.continuousMode && /* @__PURE__ */ jsxRuntime.jsx(
675
+ "p",
368
676
  {
369
- src: "https://res.cloudinary.com/de0jr8mcm/image/upload/v1765904735/pelican/pelican_icon_r9ghqw.png ",
370
- alt: "Pelican Logo",
371
- style: { width: "80px", height: "80px" }
677
+ style: {
678
+ fontSize: "0.8rem",
679
+ marginTop: "0.5rem",
680
+ color: "#f3f3f3",
681
+ textAlign: "center"
682
+ },
683
+ children: "Preparing next session..."
372
684
  }
373
- ) }),
374
- /* @__PURE__ */ jsxRuntime.jsx("a", { href: deeplink, className: "open-app-link", children: "Open Pelican Vault" }),
375
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "helper-text", children: [
376
- "Open the app to",
377
- " ",
378
- config.authType === "login" ? "login" : config.authType === "signup" ? "signup" : config.authType === "id-verification" ? "verify identity" : "authenticate"
379
- ] })
380
- ] }) : config.forceQRCode && qr && state === "awaiting-pair" || !config.forceQRCode && qr && state === "awaiting-pair" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "qr-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "qr-wrapper", children: [
381
- qr && /* @__PURE__ */ jsxRuntime.jsx("img", { src: qr, alt: "QR Code", className: "qr-image" }),
382
- !qr && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "loader" })
383
- ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loader-container", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "loader" }) })
384
- ] }) }),
385
- /* @__PURE__ */ jsxRuntime.jsx(StoreIcons_default, {})
685
+ )
686
+ ] }),
687
+ error && state === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "error-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "error-message", children: error.message }) }),
688
+ isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "content-wrapper", children: [
689
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "main-heading", children: "one sec..." }),
690
+ /* @__PURE__ */ jsxRuntime.jsx(
691
+ "span",
692
+ {
693
+ className: "loader",
694
+ style: { margin: "1rem auto", width: "252px" }
695
+ }
696
+ )
697
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "content-wrapper", children: state === "awaiting-pair" && !successMessage && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "unpaired-container", children: [
698
+ !deeplink && !config.forceQRCode && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "main-heading", children: "Open Pelican Vault" }),
699
+ !config.forceQRCode && deeplink ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mobile-auth-container", children: [
700
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "logo-container", children: /* @__PURE__ */ jsxRuntime.jsx(
701
+ "img",
702
+ {
703
+ src: "https://res.cloudinary.com/de0jr8mcm/image/upload/v1765904735/pelican/pelican_icon_r9ghqw.png ",
704
+ alt: "Pelican Logo",
705
+ style: { width: "80px", height: "80px" }
706
+ }
707
+ ) }),
708
+ /* @__PURE__ */ jsxRuntime.jsx("a", { href: deeplink, className: "open-app-link", children: "Open Pelican Vault" }),
709
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "helper-text", children: [
710
+ "Open the app to",
711
+ " ",
712
+ config.authType === "login" ? "login" : config.authType === "signup" ? "signup" : config.authType === "id-verification" ? "verify identity" : "authenticate"
713
+ ] })
714
+ ] }) : config.forceQRCode && qr && state === "awaiting-pair" || !config.forceQRCode && qr && state === "awaiting-pair" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "qr-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "qr-wrapper", children: [
715
+ qr && /* @__PURE__ */ jsxRuntime.jsx("img", { src: qr, alt: "QR Code", className: "qr-image" }),
716
+ !qr && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "loader" })
717
+ ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loader-container", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "loader" }) })
718
+ ] }) }),
719
+ /* @__PURE__ */ jsxRuntime.jsx(StoreIcons_default, {})
720
+ ] })
386
721
  ] })
387
722
  ] });
388
723
  };