@tatchi-xyz/sdk 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/dist/cjs/core/EmailRecovery/index.js +25 -0
  2. package/dist/cjs/core/EmailRecovery/index.js.map +1 -1
  3. package/dist/cjs/core/TatchiPasskey/emailRecovery.js +70 -34
  4. package/dist/cjs/core/TatchiPasskey/emailRecovery.js.map +1 -1
  5. package/dist/cjs/core/types/emailRecovery.js +33 -0
  6. package/dist/cjs/core/types/emailRecovery.js.map +1 -0
  7. package/dist/cjs/index.js +4 -0
  8. package/dist/cjs/index.js.map +1 -1
  9. package/dist/cjs/react/components/AccountMenuButton/{LinkedDevicesModal-CSSowiHP.css → LinkedDevicesModal-BCrFe5p3.css} +1 -1
  10. package/dist/{esm/react/components/AccountMenuButton/LinkedDevicesModal-CSSowiHP.css.map → cjs/react/components/AccountMenuButton/LinkedDevicesModal-BCrFe5p3.css.map} +1 -1
  11. package/dist/cjs/react/components/AccountMenuButton/{ProfileDropdown-CEPMZ1gY.css → ProfileDropdown-CRJrtxDb.css} +1 -1
  12. package/dist/{esm/react/components/AccountMenuButton/ProfileDropdown-CEPMZ1gY.css.map → cjs/react/components/AccountMenuButton/ProfileDropdown-CRJrtxDb.css.map} +1 -1
  13. package/dist/cjs/react/components/AccountMenuButton/{Web3AuthProfileButton-DopOg7Xc.css → Web3AuthProfileButton-DXFRw8ND.css} +1 -1
  14. package/dist/cjs/react/components/AccountMenuButton/{Web3AuthProfileButton-DopOg7Xc.css.map → Web3AuthProfileButton-DXFRw8ND.css.map} +1 -1
  15. package/dist/cjs/react/components/AccountMenuButton/icons/{TouchIcon-BQWentvJ.css → TouchIcon-DNgbAK_i.css} +1 -1
  16. package/dist/cjs/react/components/AccountMenuButton/icons/{TouchIcon-BQWentvJ.css.map → TouchIcon-DNgbAK_i.css.map} +1 -1
  17. package/dist/cjs/react/components/PasskeyAuthMenu/{PasskeyAuthMenu-DwrzWMYx.css → PasskeyAuthMenu-DRwSoF8q.css} +1 -1
  18. package/dist/cjs/react/components/PasskeyAuthMenu/{PasskeyAuthMenu-DwrzWMYx.css.map → PasskeyAuthMenu-DRwSoF8q.css.map} +1 -1
  19. package/dist/cjs/react/components/PasskeyAuthMenu/ui/EmailRecoverySlide.js +107 -21
  20. package/dist/cjs/react/components/PasskeyAuthMenu/ui/EmailRecoverySlide.js.map +1 -1
  21. package/dist/cjs/react/components/{ShowQRCode-CCN4h6Uv.css → ShowQRCode-CL4gsszN.css} +1 -1
  22. package/dist/cjs/react/components/{ShowQRCode-CCN4h6Uv.css.map → ShowQRCode-CL4gsszN.css.map} +1 -1
  23. package/dist/cjs/react/sdk/src/core/EmailRecovery/index.js +25 -0
  24. package/dist/cjs/react/sdk/src/core/EmailRecovery/index.js.map +1 -1
  25. package/dist/cjs/react/sdk/src/core/TatchiPasskey/emailRecovery.js +70 -34
  26. package/dist/cjs/react/sdk/src/core/TatchiPasskey/emailRecovery.js.map +1 -1
  27. package/dist/cjs/react/sdk/src/core/types/emailRecovery.js +33 -0
  28. package/dist/cjs/react/sdk/src/core/types/emailRecovery.js.map +1 -0
  29. package/dist/esm/core/EmailRecovery/index.js +25 -1
  30. package/dist/esm/core/EmailRecovery/index.js.map +1 -1
  31. package/dist/esm/core/TatchiPasskey/emailRecovery.js +71 -35
  32. package/dist/esm/core/TatchiPasskey/emailRecovery.js.map +1 -1
  33. package/dist/esm/core/types/emailRecovery.js +26 -0
  34. package/dist/esm/core/types/emailRecovery.js.map +1 -0
  35. package/dist/esm/index.js +3 -1
  36. package/dist/esm/index.js.map +1 -1
  37. package/dist/esm/react/components/AccountMenuButton/{LinkedDevicesModal-CSSowiHP.css → LinkedDevicesModal-BCrFe5p3.css} +1 -1
  38. package/dist/{cjs/react/components/AccountMenuButton/LinkedDevicesModal-CSSowiHP.css.map → esm/react/components/AccountMenuButton/LinkedDevicesModal-BCrFe5p3.css.map} +1 -1
  39. package/dist/esm/react/components/AccountMenuButton/{ProfileDropdown-CEPMZ1gY.css → ProfileDropdown-CRJrtxDb.css} +1 -1
  40. package/dist/{cjs/react/components/AccountMenuButton/ProfileDropdown-CEPMZ1gY.css.map → esm/react/components/AccountMenuButton/ProfileDropdown-CRJrtxDb.css.map} +1 -1
  41. package/dist/esm/react/components/AccountMenuButton/{Web3AuthProfileButton-DopOg7Xc.css → Web3AuthProfileButton-DXFRw8ND.css} +1 -1
  42. package/dist/esm/react/components/AccountMenuButton/{Web3AuthProfileButton-DopOg7Xc.css.map → Web3AuthProfileButton-DXFRw8ND.css.map} +1 -1
  43. package/dist/esm/react/components/AccountMenuButton/icons/{TouchIcon-BQWentvJ.css → TouchIcon-DNgbAK_i.css} +1 -1
  44. package/dist/esm/react/components/AccountMenuButton/icons/{TouchIcon-BQWentvJ.css.map → TouchIcon-DNgbAK_i.css.map} +1 -1
  45. package/dist/esm/react/components/PasskeyAuthMenu/{PasskeyAuthMenu-DwrzWMYx.css → PasskeyAuthMenu-DRwSoF8q.css} +1 -1
  46. package/dist/esm/react/components/PasskeyAuthMenu/{PasskeyAuthMenu-DwrzWMYx.css.map → PasskeyAuthMenu-DRwSoF8q.css.map} +1 -1
  47. package/dist/esm/react/components/PasskeyAuthMenu/ui/EmailRecoverySlide.js +107 -21
  48. package/dist/esm/react/components/PasskeyAuthMenu/ui/EmailRecoverySlide.js.map +1 -1
  49. package/dist/esm/react/components/{ShowQRCode-CCN4h6Uv.css → ShowQRCode-CL4gsszN.css} +1 -1
  50. package/dist/esm/react/components/{ShowQRCode-CCN4h6Uv.css.map → ShowQRCode-CL4gsszN.css.map} +1 -1
  51. package/dist/esm/react/sdk/src/core/EmailRecovery/index.js +25 -1
  52. package/dist/esm/react/sdk/src/core/EmailRecovery/index.js.map +1 -1
  53. package/dist/esm/react/sdk/src/core/TatchiPasskey/emailRecovery.js +71 -35
  54. package/dist/esm/react/sdk/src/core/TatchiPasskey/emailRecovery.js.map +1 -1
  55. package/dist/esm/react/sdk/src/core/types/emailRecovery.js +26 -0
  56. package/dist/esm/react/sdk/src/core/types/emailRecovery.js.map +1 -0
  57. package/dist/esm/sdk/wallet-iframe-host.js +111 -33
  58. package/dist/esm/wasm_vrf_worker/pkg/wasm_vrf_worker_bg.wasm +0 -0
  59. package/dist/types/src/core/EmailRecovery/index.d.ts +8 -0
  60. package/dist/types/src/core/EmailRecovery/index.d.ts.map +1 -1
  61. package/dist/types/src/core/TatchiPasskey/emailRecovery.d.ts +3 -1
  62. package/dist/types/src/core/TatchiPasskey/emailRecovery.d.ts.map +1 -1
  63. package/dist/types/src/core/types/emailRecovery.d.ts +10 -0
  64. package/dist/types/src/core/types/emailRecovery.d.ts.map +1 -0
  65. package/dist/types/src/core/types/index.d.ts +1 -0
  66. package/dist/types/src/core/types/index.d.ts.map +1 -1
  67. package/dist/types/src/index.d.ts +1 -0
  68. package/dist/types/src/index.d.ts.map +1 -1
  69. package/dist/types/src/react/components/PasskeyAuthMenu/ui/EmailRecoverySlide.d.ts.map +1 -1
  70. package/dist/workers/wasm_vrf_worker_bg.wasm +0 -0
  71. package/package.json +1 -1
package/dist/{cjs/react/components/AccountMenuButton/LinkedDevicesModal-CSSowiHP.css.map → esm/react/components/AccountMenuButton/LinkedDevicesModal-BCrFe5p3.css.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"LinkedDevicesModal-CSSowiHP.css","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/LinkedDevicesModal.css"],"sourcesContent":["/* Linked Devices Modal Styles */\n\n.w3a-access-keys-modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n /* Ensure this modal stays below the wallet iframe overlay */\n z-index: var(--w3a-z-underlay-backdrop, calc(var(--w3a-wallet-overlay-z, 2147483646) - var(--w3a-wallet-underlay-backdrop-offset, 2)));\n background: oklch(0.2 0.01 240 / 0.8);\n backdrop-filter: blur(8px);\n display: flex;\n justify-content: center;\n align-items: center;\n animation: backdrop-opacity 32ms ease-in;\n will-change: opacity;\n}\n\n.w3a-access-keys-modal-inner {\n position: relative;\n z-index: var(--w3a-z-underlay-content, calc(var(--w3a-wallet-overlay-z, 2147483646) - var(--w3a-wallet-underlay-content-offset, 1)));\n display: grid;\n place-items: center;\n height: 100%;\n width: 100%;\n max-width: 480;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n overflow: visible;\n}\n\n.w3a-access-keys-modal-content {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: 1rem;\n overflow: visible;\n min-height: 200px;\n max-width: 480px;\n min-width: 340px;\n background: var(--w3a-colors-colorBackground);\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 2rem;\n}\n\n.w3a-access-keys-modal-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: none;\n border: none;\n font-size: 1rem;\n font-weight: 600;\n color: var(--w3a-colors-textMuted);\n cursor: pointer;\n padding: 24px;\n border-radius: 2rem;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n}\n\n.w3a-access-keys-modal-close:hover {\n color: var(--w3a-colors-textPrimary);\n background: var(--w3a-colors-surface);\n}\n\n.w3a-access-keys-modal-header {\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n align-items: center;\n padding: 1rem;\n}\n\n.w3a-access-keys-modal-title {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--w3a-colors-textPrimary);\n margin: 0;\n}\n\n.w3a-access-keys-modal-subtitle {\n font-size: 1rem;\n font-weight: 600;\n color: var(--w3a-colors-textPrimary);\n margin: 16px 0 8px;\n}\n\n.w3a-access-keys-section {\n margin-top: 12px;\n}\n\n.theme-light .w3a-access-key-current {\n color: var(--w3a-colors-blue500, var(--w3a-colors-primary));\n}\n\n.theme-dark .w3a-access-key-current {\n color: var(--w3a-colors-primary, var(--w3a-colors-blue500));\n}\n\n\n/* Loading, error, and empty states */\n.w3a-access-keys-error,\n.w3a-access-keys-empty {\n text-align: center;\n padding: 32px;\n color: var(--w3a-colors-textMuted);\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.w3a-access-keys-error { color: var(--w3a-colors-error); }\n\n.w3a-access-keys-error .w3a-btn {\n margin-top: 16px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .w3a-access-keys-modal-outer {\n padding: 8px;\n }\n\n .w3a-access-keys-modal-inner {\n max-width: 100%;\n max-height: 90vh;\n /* Prefer dynamic viewport height on capable browsers */\n @supports (height: 1dvh) {\n max-height: 90dvh;\n }\n }\n\n .w3a-access-keys-modal-header {\n padding: 16px;\n }\n\n .w3a-access-keys-modal-content {\n padding: 0 16px 16px;\n max-width: 480px;\n }\n}\n\n@media (max-width: 480px) {\n .w3a-key-item {\n max-width: 100%;\n }\n}\n\n/* Linked Devices List */\n.w3a-keys-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n flex: 1;\n overflow-x: visible;\n}\n\n.w3a-key-item {\n box-sizing: border-box;\n display: grid;\n align-items: center;\n background: var(--w3a-colors-surface);\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 1rem;\n padding: 1rem;\n transition: all 0.2s ease;\n overflow: visible;\n animation: fadeInKeyItem 0.2s ease-in;\n}\n\n.w3a-key-content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n}\n\n.w3a-key-details {\n flex: 1;\n min-width: 0;\n font-size: 0.9rem;\n font-weight: 500;\n line-height: 1rem;\n display: grid;\n gap: 0.5rem;\n}\n\n.w3a-key-details .mono {\n word-break: break-all;\n}\n\n.w3a-key-details .body {\n margin-bottom: 0;\n}\n\n.w3a-key-details .body:last-child {\n margin-bottom: 0;\n}\n\n.w3a-key-status {\n flex-shrink: 0;\n}\n\n.w3a-status-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 92px;\n padding: 2px 8px;\n background: transparent;\n color: var(--w3a-colors-success);\n border: 1px solid var(--w3a-colors-success);\n border-radius: 12px;\n font-size: 0.75rem;\n font-weight: 500;\n}\n\n.theme-light .w3a-status-badge.w3a-full-access {\n color: var(--w3a-colors-blue500);\n border-color: var(--w3a-colors-blue500);\n}\n\n.w3a-key-header {\n display: flex;\n align-items: center;\n gap: var(--w3a-spacing-sm);\n color: var(--w3a-colors-textPrimary);\n}\n\n.w3a-copyable-key {\n cursor: pointer;\n flex: 1;\n margin: 0;\n transition: all 0.2s ease;\n color: var(--w3a-colors-textPrimary);\n}\n\n.w3a-copyable-key:hover {\n cursor: pointer;\n color: var(--w3a-colors-primary);\n}\n\n/* Tooltip styles */\n.w3a-copyable-key {\n position: relative;\n}\n\n.w3a-copy-tooltip {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background: var(--w3a-colors-surface2);\n color: var(--w3a-colors-textPrimary);\n border: 1px solid var(--w3a-colors-textMuted);\n padding: 0.25rem 0.5rem;\n border-radius: 1rem;\n font-size: 0.75rem;\n white-space: nowrap;\n z-index: 1000;\n margin-bottom: 0.25rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n animation: tooltipFadeIn 0.1s ease-in-out;\n pointer-events: none;\n}\n\n.w3a-copy-tooltip::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border: 4px solid transparent;\n border-top-color: var(--w3a-colors-surface);\n}\n\n/* Registered timestamp styling */\n.w3a-registered {\n font-size: 0.9rem;\n color: var(--w3a-colors-textPrimary);\n}\n\n/* Theme-specific contrast for registered timestamps */\n.theme-dark .w3a-registered {\n color: var(--w3a-colors-textPrimary);\n}\n.theme-light .w3a-registered {\n color: var(--w3a-colors-textPrimary);\n}\n\n/* Inline device row layout */\n.w3a-device-row {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Device badge */\n.w3a-device-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 4px 8px;\n border-radius: 999px;\n border: 1px solid var(--w3a-colors-borderPrimary);\n color: #fff;\n background: var(--w3a-colors-buttonBackground);\n font-size: 0.825rem;\n font-weight: 600;\n line-height: 1;\n}\n\n.w3a-current-device-text {\n opacity: 0.85;\n}\n\n.w3a-separator {\n opacity: 0.6;\n}\n\n@keyframes tooltipFadeIn {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(4px);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n}\n\n@keyframes copiedPulse {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.05);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n/* Button System */\n.w3a-btn {\n padding: 4px 8px;\n border: none;\n border-radius: 8px;\n font-size: 0.9rem;\n font-weight: 500;\n min-width: 2rem;\n min-height: 2rem;\n cursor: pointer;\n transition: all 0.2s ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 2px;\n}\n\n.w3a-btn-primary {\n background: var(--w3a-colors-primary);\n color: #fff;\n}\n\n.w3a-btn-primary:hover:not(:disabled) {\n background: var(--w3a-colors-primaryHover);\n box-shadow: 0 2px 4px var(--w3a-shadows-sm);\n}\n\n.w3a-btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.w3a-btn-danger {\n background: var(--w3a-colors-error);\n color: #fff;\n}\n\n.w3a-btn-danger:hover:not(:disabled) {\n background: var(--w3a-colors-error);\n box-shadow: 0 2px 4px var(--w3a-shadows-sm);\n}\n\n.w3a-btn-danger:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.w3a-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid var(--w3a-colors-borderPrimary);\n border-top: 2px solid var(--w3a-colors-primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n/* Button-local spinner: match text size inside small buttons */\n.w3a-btn .w3a-spinner,\n.w3a-btn-primary .w3a-spinner,\n.w3a-btn-danger .w3a-spinner,\n.w3a-btn-disabled .w3a-spinner {\n width: 1em;\n height: 1em;\n border-width: 2px;\n margin-left: 0;\n}\n\n/* Danger button spinner: use white instead of primary/blue */\n.w3a-btn-danger .w3a-spinner {\n border-color: rgba(255, 255, 255, 0.4);\n border-top-color: #ffffff;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@keyframes fadeInKeyItem {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes backdrop-opacity {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"file":"LinkedDevicesModal-BCrFe5p3.css","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/LinkedDevicesModal.css"],"sourcesContent":["/* Linked Devices Modal Styles */\n\n.w3a-access-keys-modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n /* Ensure this modal stays below the wallet iframe overlay */\n z-index: var(--w3a-z-underlay-backdrop, calc(var(--w3a-wallet-overlay-z, 2147483646) - var(--w3a-wallet-underlay-backdrop-offset, 2)));\n background: oklch(0.2 0.01 240 / 0.8);\n backdrop-filter: blur(8px);\n display: flex;\n justify-content: center;\n align-items: center;\n animation: backdrop-opacity 32ms ease-in;\n will-change: opacity;\n}\n\n.w3a-access-keys-modal-inner {\n position: relative;\n z-index: var(--w3a-z-underlay-content, calc(var(--w3a-wallet-overlay-z, 2147483646) - var(--w3a-wallet-underlay-content-offset, 1)));\n display: grid;\n place-items: center;\n height: 100%;\n width: 100%;\n max-width: 480;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n overflow: visible;\n}\n\n.w3a-access-keys-modal-content {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: 1rem;\n overflow: visible;\n min-height: 200px;\n max-width: 480px;\n min-width: 340px;\n background: var(--w3a-colors-colorBackground);\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 2rem;\n}\n\n.w3a-access-keys-modal-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: none;\n border: none;\n font-size: 1rem;\n font-weight: 600;\n color: var(--w3a-colors-textMuted);\n cursor: pointer;\n padding: 24px;\n border-radius: 2rem;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n}\n\n.w3a-access-keys-modal-close:hover {\n color: var(--w3a-colors-textPrimary);\n background: var(--w3a-colors-surface);\n}\n\n.w3a-access-keys-modal-header {\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n align-items: center;\n padding: 1rem;\n}\n\n.w3a-access-keys-modal-title {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--w3a-colors-textPrimary);\n margin: 0;\n}\n\n.w3a-access-keys-modal-subtitle {\n font-size: 1rem;\n font-weight: 600;\n color: var(--w3a-colors-textPrimary);\n margin: 16px 0 8px;\n}\n\n.w3a-access-keys-section {\n margin-top: 12px;\n}\n\n.theme-light .w3a-access-key-current {\n color: var(--w3a-colors-blue500, var(--w3a-colors-primary));\n}\n\n.theme-dark .w3a-access-key-current {\n color: var(--w3a-colors-primary, var(--w3a-colors-blue500));\n}\n\n\n/* Loading, error, and empty states */\n.w3a-access-keys-error,\n.w3a-access-keys-empty {\n text-align: center;\n padding: 32px;\n color: var(--w3a-colors-textMuted);\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.w3a-access-keys-error { color: var(--w3a-colors-error); }\n\n.w3a-access-keys-error .w3a-btn {\n margin-top: 16px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .w3a-access-keys-modal-outer {\n padding: 8px;\n }\n\n .w3a-access-keys-modal-inner {\n max-width: 100%;\n max-height: 90vh;\n /* Prefer dynamic viewport height on capable browsers */\n @supports (height: 1dvh) {\n max-height: 90dvh;\n }\n }\n\n .w3a-access-keys-modal-header {\n padding: 16px;\n }\n\n .w3a-access-keys-modal-content {\n padding: 0 16px 16px;\n max-width: 480px;\n }\n}\n\n@media (max-width: 480px) {\n .w3a-key-item {\n max-width: 100%;\n }\n}\n\n/* Linked Devices List */\n.w3a-keys-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n flex: 1;\n overflow-x: visible;\n}\n\n.w3a-key-item {\n box-sizing: border-box;\n display: grid;\n align-items: center;\n background: var(--w3a-colors-surface);\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 1rem;\n padding: 1rem;\n transition: all 0.2s ease;\n overflow: visible;\n animation: fadeInKeyItem 0.2s ease-in;\n}\n\n.w3a-key-content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n}\n\n.w3a-key-details {\n flex: 1;\n min-width: 0;\n font-size: 0.9rem;\n font-weight: 500;\n line-height: 1rem;\n display: grid;\n gap: 0.5rem;\n}\n\n.w3a-key-details .mono {\n word-break: break-all;\n}\n\n.w3a-key-details .body {\n margin-bottom: 0;\n}\n\n.w3a-key-details .body:last-child {\n margin-bottom: 0;\n}\n\n.w3a-key-status {\n flex-shrink: 0;\n}\n\n.w3a-status-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 92px;\n padding: 2px 8px;\n background: transparent;\n color: var(--w3a-colors-success);\n border: 1px solid var(--w3a-colors-success);\n border-radius: 12px;\n font-size: 0.75rem;\n font-weight: 500;\n}\n\n.theme-light .w3a-status-badge.w3a-full-access {\n color: var(--w3a-colors-blue500);\n border-color: var(--w3a-colors-blue500);\n}\n\n.w3a-key-header {\n display: flex;\n align-items: center;\n gap: var(--w3a-spacing-sm);\n color: var(--w3a-colors-textPrimary);\n}\n\n.w3a-copyable-key {\n cursor: pointer;\n flex: 1;\n margin: 0;\n transition: all 0.2s ease;\n color: var(--w3a-colors-textPrimary);\n}\n\n.w3a-copyable-key:hover {\n cursor: pointer;\n color: var(--w3a-colors-primary);\n}\n\n/* Tooltip styles */\n.w3a-copyable-key {\n position: relative;\n}\n\n.w3a-copy-tooltip {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background: var(--w3a-colors-surface2);\n color: var(--w3a-colors-textPrimary);\n border: 1px solid var(--w3a-colors-textMuted);\n padding: 0.25rem 0.5rem;\n border-radius: 1rem;\n font-size: 0.75rem;\n white-space: nowrap;\n z-index: 1000;\n margin-bottom: 0.25rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n animation: tooltipFadeIn 0.1s ease-in-out;\n pointer-events: none;\n}\n\n.w3a-copy-tooltip::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border: 4px solid transparent;\n border-top-color: var(--w3a-colors-surface);\n}\n\n/* Registered timestamp styling */\n.w3a-registered {\n font-size: 0.9rem;\n color: var(--w3a-colors-textPrimary);\n}\n\n/* Theme-specific contrast for registered timestamps */\n.theme-dark .w3a-registered {\n color: var(--w3a-colors-textPrimary);\n}\n.theme-light .w3a-registered {\n color: var(--w3a-colors-textPrimary);\n}\n\n/* Inline device row layout */\n.w3a-device-row {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Device badge */\n.w3a-device-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 4px 8px;\n border-radius: 999px;\n border: 1px solid var(--w3a-colors-borderPrimary);\n color: #fff;\n background: var(--w3a-colors-buttonBackground);\n font-size: 0.825rem;\n font-weight: 600;\n line-height: 1;\n}\n\n.w3a-current-device-text {\n opacity: 0.85;\n}\n\n.w3a-separator {\n opacity: 0.6;\n}\n\n@keyframes tooltipFadeIn {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(4px);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n}\n\n@keyframes copiedPulse {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.05);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n/* Button System */\n.w3a-btn {\n padding: 4px 8px;\n border: none;\n border-radius: 8px;\n font-size: 0.9rem;\n font-weight: 500;\n min-width: 2rem;\n min-height: 2rem;\n cursor: pointer;\n transition: all 0.2s ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 2px;\n}\n\n.w3a-btn-primary {\n background: var(--w3a-colors-primary);\n color: #fff;\n}\n\n.w3a-btn-primary:hover:not(:disabled) {\n background: var(--w3a-colors-primaryHover);\n box-shadow: 0 2px 4px var(--w3a-shadows-sm);\n}\n\n.w3a-btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.w3a-btn-danger {\n background: var(--w3a-colors-error);\n color: #fff;\n}\n\n.w3a-btn-danger:hover:not(:disabled) {\n background: var(--w3a-colors-error);\n box-shadow: 0 2px 4px var(--w3a-shadows-sm);\n}\n\n.w3a-btn-danger:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.w3a-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid var(--w3a-colors-borderPrimary);\n border-top: 2px solid var(--w3a-colors-primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n/* Button-local spinner: match text size inside small buttons */\n.w3a-btn .w3a-spinner,\n.w3a-btn-primary .w3a-spinner,\n.w3a-btn-danger .w3a-spinner,\n.w3a-btn-disabled .w3a-spinner {\n width: 1em;\n height: 1em;\n border-width: 2px;\n margin-left: 0;\n}\n\n/* Danger button spinner: use white instead of primary/blue */\n.w3a-btn-danger .w3a-spinner {\n border-color: rgba(255, 255, 255, 0.4);\n border-top-color: #ffffff;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@keyframes fadeInKeyItem {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes backdrop-opacity {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
package/dist/esm/react/components/AccountMenuButton/{ProfileDropdown-CEPMZ1gY.css → ProfileDropdown-CRJrtxDb.css} RENAMED
@@ -117,4 +117,4 @@ body[data-w3a-theme-pulse="1"] .w3a-profile-dropdown-menu {
117
117
  }
118
118
 
119
119
 
120
- /*# sourceMappingURL=ProfileDropdown-CEPMZ1gY.css.map*/
120
+ /*# sourceMappingURL=ProfileDropdown-CRJrtxDb.css.map*/
package/dist/{cjs/react/components/AccountMenuButton/ProfileDropdown-CEPMZ1gY.css.map → esm/react/components/AccountMenuButton/ProfileDropdown-CRJrtxDb.css.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"ProfileDropdown-CEPMZ1gY.css","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/ProfileDropdown.css"],"sourcesContent":["/* ProfileDropdown component-specific styles */\n\n/* Dropdown (grid height animation with data-state) */\n.w3a-profile-dropdown-morphed {\n position: static;\n box-sizing: border-box;\n margin-top: 0;\n opacity: 0;\n visibility: hidden;\n display: grid;\n grid-template-rows: 0fr;\n grid-template-columns: 1fr;\n transition: opacity 120ms linear, grid-template-rows 140ms cubic-bezier(0.16, 1, 0.3, 1);\n border-top: 1px solid var(--w3a-colors-borderPrimary);\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"open\"] {\n opacity: 1;\n visibility: visible;\n grid-template-rows: 1fr;\n grid-template-columns: 1fr;\n pointer-events: auto;\n --stagger-base: 40ms;\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"closed\"] {\n pointer-events: none;\n border-top-width: 0;\n grid-template-rows: 0fr;\n height: 0;\n min-height: 0;\n width: 0;\n min-width: 0;\n max-width: 0;\n overflow: hidden;\n margin: 0;\n padding: 0;\n}\n\n.w3a-profile-dropdown-morphed.hidden {\n display: none;\n}\n\n/* Inner clip and container */\n.w3a-profile-dropdown-menu {\n overflow: hidden;\n min-height: 0;\n min-width: 0;\n}\n\n/* Global theme pulse when toggling theme */\n@keyframes w3a-theme-pulse {\n 0% { filter: none; }\n 50% { filter: brightness(1.05) saturate(1.06); }\n 100% { filter: none; }\n}\nbody[data-w3a-theme-pulse=\"1\"] .w3a-profile-dropdown-menu {\n animation: w3a-theme-pulse 220ms ease;\n}\n\n/* Press feedback for menu items (animate even if state doesn't change) */\n.w3a-dropdown-menu-item {\n transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease;\n}\n.w3a-dropdown-menu-item:active {\n transform: scale(0.98);\n background: var(--w3a-colors-surface2);\n}\n\n/* Themed focus ring for accessibility */\n.w3a-dropdown-menu-item:focus { outline: none; }\n.w3a-dropdown-menu-item:focus-visible {\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--w3a-colors-focus), transparent 60%);\n}\n\n/* Menu item animation states */\n\n.w3a-profile-dropdown-morphed[data-state=\"closed\"] .w3a-dropdown-menu-item {\n opacity: 0;\n transform: translateX(-1rem);\n animation: none;\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"open\"] .w3a-dropdown-menu-item {\n animation: w3a-profile-menu-item-enter 240ms linear forwards;\n animation-delay: calc(var(--stagger-base, 0ms) + var(--stagger-item-n, 0) * 20ms);\n}\n\n/* Menu Item Animation Keyframes */\n@keyframes w3a-profile-menu-item-enter {\n from {\n opacity: 0;\n transform: translateX(-1rem);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes w3a-profile-menu-item-exit {\n from {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(-1rem);\n }\n}\n\n/* Logout menu item specific styling */\n.w3a-logout-menu-item {\n border-top: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 0px 0px 2rem 2rem;\n margin-top: 0.5rem;\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"file":"ProfileDropdown-CRJrtxDb.css","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/ProfileDropdown.css"],"sourcesContent":["/* ProfileDropdown component-specific styles */\n\n/* Dropdown (grid height animation with data-state) */\n.w3a-profile-dropdown-morphed {\n position: static;\n box-sizing: border-box;\n margin-top: 0;\n opacity: 0;\n visibility: hidden;\n display: grid;\n grid-template-rows: 0fr;\n grid-template-columns: 1fr;\n transition: opacity 120ms linear, grid-template-rows 140ms cubic-bezier(0.16, 1, 0.3, 1);\n border-top: 1px solid var(--w3a-colors-borderPrimary);\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"open\"] {\n opacity: 1;\n visibility: visible;\n grid-template-rows: 1fr;\n grid-template-columns: 1fr;\n pointer-events: auto;\n --stagger-base: 40ms;\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"closed\"] {\n pointer-events: none;\n border-top-width: 0;\n grid-template-rows: 0fr;\n height: 0;\n min-height: 0;\n width: 0;\n min-width: 0;\n max-width: 0;\n overflow: hidden;\n margin: 0;\n padding: 0;\n}\n\n.w3a-profile-dropdown-morphed.hidden {\n display: none;\n}\n\n/* Inner clip and container */\n.w3a-profile-dropdown-menu {\n overflow: hidden;\n min-height: 0;\n min-width: 0;\n}\n\n/* Global theme pulse when toggling theme */\n@keyframes w3a-theme-pulse {\n 0% { filter: none; }\n 50% { filter: brightness(1.05) saturate(1.06); }\n 100% { filter: none; }\n}\nbody[data-w3a-theme-pulse=\"1\"] .w3a-profile-dropdown-menu {\n animation: w3a-theme-pulse 220ms ease;\n}\n\n/* Press feedback for menu items (animate even if state doesn't change) */\n.w3a-dropdown-menu-item {\n transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease;\n}\n.w3a-dropdown-menu-item:active {\n transform: scale(0.98);\n background: var(--w3a-colors-surface2);\n}\n\n/* Themed focus ring for accessibility */\n.w3a-dropdown-menu-item:focus { outline: none; }\n.w3a-dropdown-menu-item:focus-visible {\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--w3a-colors-focus), transparent 60%);\n}\n\n/* Menu item animation states */\n\n.w3a-profile-dropdown-morphed[data-state=\"closed\"] .w3a-dropdown-menu-item {\n opacity: 0;\n transform: translateX(-1rem);\n animation: none;\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"open\"] .w3a-dropdown-menu-item {\n animation: w3a-profile-menu-item-enter 240ms linear forwards;\n animation-delay: calc(var(--stagger-base, 0ms) + var(--stagger-item-n, 0) * 20ms);\n}\n\n/* Menu Item Animation Keyframes */\n@keyframes w3a-profile-menu-item-enter {\n from {\n opacity: 0;\n transform: translateX(-1rem);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes w3a-profile-menu-item-exit {\n from {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(-1rem);\n }\n}\n\n/* Logout menu item specific styling */\n.w3a-logout-menu-item {\n border-top: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 0px 0px 2rem 2rem;\n margin-top: 0.5rem;\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA"}
package/dist/esm/react/components/AccountMenuButton/{Web3AuthProfileButton-DopOg7Xc.css → Web3AuthProfileButton-DXFRw8ND.css} RENAMED
@@ -74,4 +74,4 @@
74
74
  }
75
75
 
76
76
 
77
- /*# sourceMappingURL=Web3AuthProfileButton-DopOg7Xc.css.map*/
77
+ /*# sourceMappingURL=Web3AuthProfileButton-DXFRw8ND.css.map*/
package/dist/esm/react/components/AccountMenuButton/{Web3AuthProfileButton-DopOg7Xc.css.map → Web3AuthProfileButton-DXFRw8ND.css.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"Web3AuthProfileButton-DopOg7Xc.css","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/Web3AuthProfileButton.css"],"sourcesContent":["* {\n box-sizing: border-box;\n}\n\n.w3a-profile-button-morphable {\n position: relative;\n background-color: var(--w3a-colors-colorBackground);\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 2rem;\n box-shadow: var(--w3a-shadows-sm);\n font-size: 14px;\n font-weight: 500;\n color: var(--w3a-colors-textPrimary);\n cursor: pointer;\n outline: none;\n overflow: visible;\n width: fit-content;\n transition: none;\n}\n\n.w3a-profile-button-morphable:hover {\n border-color: var(--w3a-colors-borderHover);\n}\n\n.w3a-profile-button-icon {\n flex-shrink: 0;\n}\n\n.w3a-profile-button-icon svg {\n overflow: visible;\n}\n\n.w3a-profile-button-username {\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n}\n\n.w3a-profile-button-icon {\n color: var(--w3a-colors-textSecondary);\n}\n\n.w3a-profile-button-username {\n display: block; color: var(--w3a-colors-textSecondary);\n}\n\n.w3a-profile-button-username.hidden {\n display: none;\n}\n\n.w3a-user-account--toggle-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-between;\n transition: opacity 0.15s ease-in-out;\n}\n\n.w3a-user-account--toggle-text {\n flex: 1;\n}\n\n.w3a-user-account--toggle-title {\n font-weight: 500;\n color: var(--w3a-colors-textPrimary);\n font-size: 14px;\n margin: 0;\n}\n\n.w3a-user-account--toggle-description {\n font-size: 14px;\n color: var(--w3a-colors-textMuted);\n margin: 0;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"file":"Web3AuthProfileButton-DXFRw8ND.css","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/Web3AuthProfileButton.css"],"sourcesContent":["* {\n box-sizing: border-box;\n}\n\n.w3a-profile-button-morphable {\n position: relative;\n background-color: var(--w3a-colors-colorBackground);\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 2rem;\n box-shadow: var(--w3a-shadows-sm);\n font-size: 14px;\n font-weight: 500;\n color: var(--w3a-colors-textPrimary);\n cursor: pointer;\n outline: none;\n overflow: visible;\n width: fit-content;\n transition: none;\n}\n\n.w3a-profile-button-morphable:hover {\n border-color: var(--w3a-colors-borderHover);\n}\n\n.w3a-profile-button-icon {\n flex-shrink: 0;\n}\n\n.w3a-profile-button-icon svg {\n overflow: visible;\n}\n\n.w3a-profile-button-username {\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n}\n\n.w3a-profile-button-icon {\n color: var(--w3a-colors-textSecondary);\n}\n\n.w3a-profile-button-username {\n display: block; color: var(--w3a-colors-textSecondary);\n}\n\n.w3a-profile-button-username.hidden {\n display: none;\n}\n\n.w3a-user-account--toggle-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-between;\n transition: opacity 0.15s ease-in-out;\n}\n\n.w3a-user-account--toggle-text {\n flex: 1;\n}\n\n.w3a-user-account--toggle-title {\n font-weight: 500;\n color: var(--w3a-colors-textPrimary);\n font-size: 14px;\n margin: 0;\n}\n\n.w3a-user-account--toggle-description {\n font-size: 14px;\n color: var(--w3a-colors-textMuted);\n margin: 0;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA"}
package/dist/esm/react/components/AccountMenuButton/icons/{TouchIcon-BQWentvJ.css → TouchIcon-DNgbAK_i.css} RENAMED
@@ -38,4 +38,4 @@
38
38
  }
39
39
 
40
40
 
41
- /*# sourceMappingURL=TouchIcon-BQWentvJ.css.map*/
41
+ /*# sourceMappingURL=TouchIcon-DNgbAK_i.css.map*/
package/dist/esm/react/components/AccountMenuButton/icons/{TouchIcon-BQWentvJ.css.map → TouchIcon-DNgbAK_i.css.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"TouchIcon-BQWentvJ.css","names":[],"sources":["../../../../../../src/react/components/AccountMenuButton/icons/TouchIcon.css"],"sourcesContent":["/* TouchIcon specific styles and animations */\n\n.w3a-fingerprint-icon {\n transition: transform 400ms ease;\n}\n\n.w3a-fingerprint-icon path {\n /* Normalize path length so dash animations are simple */\n stroke: currentColor;\n}\n\n.w3a-fingerprint-icon.open path {\n /* Draw the fingerprint when expanding/opening */\n stroke-dasharray: 1;\n stroke-dashoffset: 1;\n animation: w3a-fp-open 1.6s ease-out 0.1s both;\n}\n\n/* Animate when closing the menu */\n.w3a-fingerprint-icon.closed path {\n stroke-dasharray: 1;\n stroke-dashoffset: 1;\n animation: w3a-fp-close 1.6s ease-out 0.1s both;\n}\n\n@keyframes w3a-fp-open {\n from { stroke-dashoffset: 1; }\n to { stroke-dashoffset: 0; }\n}\n\n@keyframes w3a-fp-close {\n from { stroke-dashoffset: 1; }\n to { stroke-dashoffset: 0; }\n}\n\n.w3a-fingerprint-icon:hover {\n transform: rotate(180deg) scale(1.2);\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA"}
1
+ {"version":3,"file":"TouchIcon-DNgbAK_i.css","names":[],"sources":["../../../../../../src/react/components/AccountMenuButton/icons/TouchIcon.css"],"sourcesContent":["/* TouchIcon specific styles and animations */\n\n.w3a-fingerprint-icon {\n transition: transform 400ms ease;\n}\n\n.w3a-fingerprint-icon path {\n /* Normalize path length so dash animations are simple */\n stroke: currentColor;\n}\n\n.w3a-fingerprint-icon.open path {\n /* Draw the fingerprint when expanding/opening */\n stroke-dasharray: 1;\n stroke-dashoffset: 1;\n animation: w3a-fp-open 1.6s ease-out 0.1s both;\n}\n\n/* Animate when closing the menu */\n.w3a-fingerprint-icon.closed path {\n stroke-dasharray: 1;\n stroke-dashoffset: 1;\n animation: w3a-fp-close 1.6s ease-out 0.1s both;\n}\n\n@keyframes w3a-fp-open {\n from { stroke-dashoffset: 1; }\n to { stroke-dashoffset: 0; }\n}\n\n@keyframes w3a-fp-close {\n from { stroke-dashoffset: 1; }\n to { stroke-dashoffset: 0; }\n}\n\n.w3a-fingerprint-icon:hover {\n transform: rotate(180deg) scale(1.2);\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA"}
package/dist/esm/react/components/PasskeyAuthMenu/{PasskeyAuthMenu-DwrzWMYx.css → PasskeyAuthMenu-DRwSoF8q.css} RENAMED
@@ -951,4 +951,4 @@
951
951
  }
952
952
 
953
953
 
954
- /*# sourceMappingURL=PasskeyAuthMenu-DwrzWMYx.css.map*/
954
+ /*# sourceMappingURL=PasskeyAuthMenu-DRwSoF8q.css.map*/
package/dist/esm/react/components/PasskeyAuthMenu/{PasskeyAuthMenu-DwrzWMYx.css.map → PasskeyAuthMenu-DRwSoF8q.css.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"PasskeyAuthMenu-DwrzWMYx.css","names":[],"sources":["../../../../../src/react/components/PasskeyAuthMenu/PasskeyAuthMenu.css"],"sourcesContent":["/* Root container */\n.w3a-signup-menu-root {\n position: relative; /* relative position to anchor back button */\n width: min(100dvw, 420px);\n max-width: 100dvw;\n min-width: 330px;\n min-height: 250px;\n color: var(--w3a-colors-textPrimary);\n background: var(--w3a-colors-colorBackground);\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 3rem;\n box-shadow: var(--w3a-shadows-lg);\n padding: var(--w3a-spacing-lg);\n padding-top: calc(var(--w3a-spacing-lg) + 4px);\n position: relative;\n display: flex;\n flex-direction: column;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1), min-height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n will-change: height, min-height;\n}\n\n/* Back button */\n.w3a-back-button {\n position: absolute;\n top: 1rem;\n left: 1rem;\n width: 48px;\n height: 48px;\n padding: 0;\n aspect-ratio: 1 / 1;\n display: grid;\n place-items: center;\n line-height: 0;\n border-radius: 50%;\n color: var(--w3a-colors-textPrimary);\n background: transparent;\n cursor: pointer;\n border: none;\n z-index: 3;\n transition: transform 120ms ease, background-color 160ms ease, opacity 220ms ease;\n opacity: 0;\n pointer-events: none;\n filter: blur(0.2px);\n}\n.w3a-back-button.is-visible {\n opacity: 1;\n pointer-events: auto;\n filter: none;\n}\n.w3a-back-button:hover {\n transform: scale(1.02);\n background: var(--w3a-colors-surface);\n}\n.w3a-back-button:active {\n transform: scale(0.96);\n}\n\n/* Header */\n.w3a-header {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n opacity: 1;\n height: auto;\n overflow: hidden;\n transition: opacity 240ms ease-out, height 260ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 260ms cubic-bezier(0.2, 0.8, 0.2, 1), margin 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n pointer-events: auto;\n position: relative;\n will-change: height, opacity;\n}\n\n/* Hide header when waiting or scan device is active */\n.w3a-signup-menu-root[data-waiting=\"true\"] .w3a-header,\n.w3a-signup-menu-root[data-scan-device=\"true\"] .w3a-header {\n opacity: 0;\n height: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n margin-top: 0px;\n margin-bottom: 0px;\n pointer-events: none;\n}\n\n/* Hide header when email recovery is active */\n.w3a-signup-menu-root[data-email-recovery=\"true\"] .w3a-header {\n opacity: 0;\n height: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n margin-top: 0px;\n margin-bottom: 0px;\n pointer-events: none;\n}\n\n/* Adjust content area when header is hidden */\n.w3a-signup-menu-root[data-waiting=\"true\"] .w3a-content-area,\n.w3a-signup-menu-root[data-scan-device=\"true\"] .w3a-content-area {\n flex: 1 1 auto;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n/* Adjust content area when email recovery is active */\n.w3a-signup-menu-root[data-email-recovery=\"true\"] .w3a-content-area {\n flex: 1 1 auto;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n/* Specific height adjustments for different states */\n.w3a-signup-menu-root[data-waiting=\"true\"] {\n min-height: 200px;\n}\n\n.w3a-signup-menu-root[data-scan-device=\"true\"] {\n min-height: 300px;\n}\n\n.w3a-signup-menu-root[data-email-recovery=\"true\"] {\n min-height: 320px;\n}\n\n.w3a-title {\n font-size: 24px;\n font-weight: 700;\n margin: 0.5rem 0.75rem;\n}\n\n.w3a-subhead {\n font-size: 1rem;\n font-weight: 500;\n line-height: 1;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 20%);\n margin: 0;\n margin-bottom: 1rem;\n margin-left: 0.75rem;\n}\n\n/* Content switcher container */\n.w3a-content-switcher {\n display: flex;\n flex-direction: column;\n overflow: hidden; /* ensure smooth height animations without spillover */\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n will-change: height;\n}\n\n/* Content area container */\n.w3a-content-area {\n position: relative;\n /* do not force-stretch; let content define intrinsic height */\n flex: 0 1 auto;\n display: flex;\n flex-direction: column;\n animation: fade-in 240ms ease-out;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n/* Intrinsic sizer wrapper inside content area used for height measurement */\n.w3a-content-sizer {\n display: block;\n width: 100%;\n}\n\n/* Default content */\n.w3a-signin-menu {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0px;\n min-height: 250px;\n width: 100%;\n animation: content-enter 240ms ease-in-out;\n}\n\n@keyframes content-enter {\n from {\n opacity: 0;\n transform: scale(0.98) translateY(6px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Social providers row */\n.w3a-social-row {\n display: flex;\n gap: 8px;\n margin-bottom: var(--w3a-spacing-sm);\n}\n.w3a-social-btn {\n height: 48px;\n flex: 1 1 0;\n min-width: 0;\n display: grid;\n place-items: center;\n cursor: pointer;\n color: var(--w3a-colors-textSecondary, #64748b);\n overflow: hidden;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n border-radius: var(--w3a-border-radius-xl);\n /* no shadow requested */\n box-shadow: none;\n}\n.w3a-social-btn svg {\n color: var(--w3a-colors-textSecondary, #64748b);\n}\n.w3a-social-btn:hover {\n background: var(--w3a-colors-surface2);\n box-shadow: var(--w3a-shadows-sm);\n}\n.w3a-social-btn:hover svg {\n color: var(--w3a-colors-textPrimary, #1e293b);\n}\n\n/* Passkey row */\n.w3a-passkey-row {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.w3a-input-pill {\n position: relative;\n display: flex;\n flex: 1;\n align-items: center;\n padding: 0rem 1rem;\n height: 54px;\n gap: 8px;\n border: none;\n background: var(--w3a-colors-surface);\n border-radius: 2rem 2rem 2rem 2rem;\n box-shadow: none;\n overflow-x: hidden;\n transition: border-radius 150ms ease-in-out;\n}\n.w3a-input-pill.is-enabled {\n border-radius: 2rem 0.25rem 0.25rem 2rem;\n transition: border-radius 150ms ease-in-out;\n}\n\n.w3a-input-wrap {\n position: relative;\n flex: 1;\n height: 32px;\n display: flex;\n align-items: center;\n min-width: 0; /* allow input to shrink inside flex container without clipping */\n}\n.w3a-input {\n width: 100%;\n height: 32px;\n border: none;\n outline: none;\n background: transparent;\n color: var(--w3a-colors-textPrimary);\n font-size: 16px;\n padding: 0;\n min-width: 0; /* prevent overflow clipping in flex layouts */\n}\n\n/* Absolute status message anchored to bottom-right of the input area */\n.w3a-input::placeholder {\n /* Improve contrast for placeholders on dark */\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 35%);\n opacity: 0.95;\n}\n\n.w3a-postfix {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n color: var(--w3a-colors-textSecondary);\n font-size: 16px;\n white-space: nowrap;\n pointer-events: none;\n visibility: hidden; /* React enables once measured */\n will-change: left;\n transition: left 32ms ease;\n}\n.w3a-postfix.is-existing {\n color: var(--w3a-colors-success);\n}\n/* On focus, keep postfix subtle for readability */\n.w3a-input:focus ~ .w3a-postfix {\n color: var(--w3a-colors-textMuted);\n}\n\n.w3a-arrow-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 0; /* hidden footprint by default */\n padding: 0;\n background: transparent;\n border: 0;\n border-radius: 2rem 0.25rem 0.25rem 2rem;\n color: #fff;\n line-height: 0;\n cursor: pointer;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n margin-left: -1rem;\n z-index: 1;\n border: 6px solid var(--w3a-colors-colorBackground, #fff);\n height: 64px;\n transition: transform 150ms ease,\n background-color 150ms ease,\n border-radius 150ms ease,\n opacity 150ms ease,\n width 150ms ease-in-out;\n}\n.w3a-arrow-btn.is-enabled {\n width: 100px; /* expand when enabled */\n /* Prefer themed primary; fall back to legacy then a sane default */\n background: var(--w3a-colors-primary, #2563eb);\n border-radius: 2rem;\n /* border-radius: 2rem; */\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n transition: transform 150ms ease,\n background-color 150ms ease,\n border-radius 150ms ease,\n opacity 150ms ease,\n width 150ms ease-in-out;\n}\n.w3a-arrow-btn.no-transition,\n.w3a-arrow-btn.no-transition.is-enabled {\n transition: none;\n}\n.w3a-arrow-btn .w3a-arrow-icon {\n color: #fff;\n}\n.w3a-arrow-btn.is-enabled:hover {\n /* transform: scale(1.02); */\n background: var(--w3a-colors-primaryHover, #1d4ed8);\n}\n.w3a-arrow-btn.is-enabled:active {\n transform: scale(0.96);\n}\n.w3a-arrow-btn:disabled {\n width: 0;\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--w3a-colors-borderSecondary);\n transition: transform 150ms ease,\n background-color 150ms ease,\n border-radius 150ms ease,\n opacity 150ms ease,\n width 150ms ease-in-out;\n}\n.w3a-arrow-btn .w3a-arrow-label {\n margin-left: 8px;\n font-weight: 600;\n line-height: 1;\n}\n\n/* Animated arrow inside the continue button */\n.w3a-arrow-btn .stripe-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.w3a-arrow-btn .stripe-arrow > .HoverArrow {\n position: relative;\n margin-top: 0.1rem;\n margin-left: 8px;\n stroke-width: 2;\n fill: none;\n stroke: currentColor;\n}\n\n/* Horizontal line: fades in on hover of the button */\n.w3a-arrow-btn .stripe-arrow > .HoverArrow .HoverArrow__linePath {\n opacity: 0;\n transition: opacity 120ms cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n/* Chevron: nudges right and slightly scales on hover */\n.w3a-arrow-btn .stripe-arrow > .HoverArrow .HoverArrow__tipPath {\n transition: transform 120ms cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.w3a-arrow-btn.is-enabled:hover .stripe-arrow > .HoverArrow .HoverArrow__linePath,\n.w3a-arrow-btn.is-enabled:focus-visible .stripe-arrow > .HoverArrow .HoverArrow__linePath {\n opacity: 1;\n}\n\n.w3a-arrow-btn.is-enabled:hover .stripe-arrow > .HoverArrow .HoverArrow__tipPath,\n.w3a-arrow-btn.is-enabled:focus-visible .stripe-arrow > .HoverArrow .HoverArrow__tipPath {\n transform: translateX(3px);\n}\n\n/* Segmented control */\n.w3a-seg {\n position: relative;\n min-height: 54px;\n overflow: hidden;\n padding: 5px;\n border: none;\n background: var(--w3a-colors-surface2);\n border-radius: var(--w3a-border-radius-xl);\n}\n.w3a-seg-active {\n position: absolute;\n top: 5px;\n bottom: 5px;\n left: 0;\n border-radius: var(--w3a-border-radius-xl);\n transition:\n transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),\n width 220ms ease,\n opacity 150ms ease;\n will-change: transform, width;\n pointer-events: none;\n}\n.w3a-seg-grid {\n display: flex;\n gap: 4px;\n height: 100%;\n position: relative;\n z-index: 1;\n}\n.w3a-seg-btn {\n flex: 1 1 0;\n min-width: 0;\n min-height: 44px;\n border-radius: 12px;\n background: transparent;\n /* Make inactive tabs more legible and clearly tappable */\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 45%);\n font-weight: 600;\n cursor: pointer;\n border: none;\n /* Immediate taps on mobile; opt-out of double-tap zoom heuristics */\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n transition: color 200ms ease, transform 120ms ease;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n white-space: normal;\n padding: 0 14px;\n font-size: clamp(13px, 3.6vw, 15px);\n}\n.w3a-seg-btn:hover {\n transform: scale(1.02);\n}\n.w3a-seg-btn:active {\n transform: scale(0.98);\n}\n.w3a-seg-btn.is-active {\n color: var(--w3a-colors-textPrimary);\n}\n.w3a-seg-btn:focus-visible {\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--w3a-colors-focus), transparent 60%);\n}\n\n@media (max-width: 420px) {\n .w3a-signup-menu-root {\n padding: 1rem;\n padding-top: calc(1rem + 4px);\n border-radius: 2rem;\n max-width: calc(100dvw - 0.25rem);\n }\n\n @supports (width: 1dvw) {\n .w3a-signup-menu-root { max-width: calc(100dvw - 0.25rem); }\n }\n\n .w3a-title {\n font-size: 20px;\n }\n\n .w3a-subhead {\n font-size: 0.9rem;\n margin-bottom: 0.75rem;\n }\n\n .w3a-input-pill {\n height: 48px;\n }\n\n .w3a-arrow-btn {\n height: 60px;\n }\n\n .w3a-arrow-btn.is-enabled {\n width: 60px;\n }\n\n .w3a-seg {\n min-height: 48px;\n padding: 4px;\n }\n\n .w3a-seg-grid {\n gap: 3px;\n }\n\n .w3a-seg-active {\n top: 4px;\n bottom: 4px;\n }\n\n .w3a-seg-btn {\n min-height: 42px;\n padding: 0 12px;\n font-size: clamp(12px, 3.4vw, 14px);\n }\n\n .w3a-back-button {\n top: -0.5rem;\n left: -0.5rem;\n }\n}\n\n/* Waiting state */\n.w3a-waiting {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n background: transparent;\n text-align: center;\n min-height: 200px;\n /* Quick fade with configurable delay for smoother handoff */\n animation: content-enter 200ms ease-out;\n animation-delay: var(--w3a-waiting-delay, 0ms);\n animation-fill-mode: both;\n}\n.w3a-waiting-text { font-size: 18px; font-weight: 600; }\n.w3a-spinner {\n width: 36px;\n height: 36px;\n border-radius: 999px;\n border: 3px solid rgba(255,255,255,0.15);\n border-top-color: var(--w3a-colors-primary);\n animation: w3a-spin 0.9s linear infinite;\n}\n\n/* Scan device content wrapper */\n.w3a-scan-device-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n background: transparent;\n text-align: center;\n min-height: 300px;\n width: 100%;\n overflow: hidden;\n animation: content-enter 240ms ease-out;\n}\n\n/* Ensure QR code content stays within bounds */\n.w3a-scan-device-content .qr-code-container,\n.w3a-scan-device-content .qr-modal-backdrop,\n.w3a-scan-device-content .qr-modal-content {\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n}\n\n.w3a-scan-device-content .qr-code-display {\n max-width: 280px;\n width: 100%;\n}\n\n/* Status message row */\n.w3a-status-row {\n position: absolute;\n font-size: 0.75rem;\n bottom: -10px;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n.w3a-status-message {\n font-size: 11px;\n font-weight: 500;\n}\n\n/* Section divider */\n.w3a-section-divider {\n display: flex;\n align-items: center;\n margin: var(--w3a-spacing-md) 0;\n position: relative;\n}\n\n.w3a-section-divider::before,\n.w3a-section-divider::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--w3a-colors-borderSecondary);\n}\n\n.w3a-section-divider-text {\n padding: 0 var(--w3a-spacing-sm);\n font-size: 12px;\n color: var(--w3a-colors-textSecondary);\n font-weight: 500;\n background: var(--w3a-colors-colorBackground);\n}\n\n/* Labels and helper text */\n.w3a-field-label {\n font-size: 12px;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 35%);\n margin: 6px 2px 6px;\n font-weight: 600;\n}\n.w3a-seg-help {\n font-size: 12px;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 25%);\n margin: 0;\n margin-left: 0.75rem;\n}\n.w3a-seg-help-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-top: 8px;\n}\n/* Tooltip for account existence status */\n.w3a-input-wrap .w3a-tooltip {\n position: absolute;\n right: 0;\n padding: 4px 8px;\n border-radius: 1rem;\n font-size: 0.7rem;\n background: var(--w3a-colors-surface2);\n color: var(--w3a-colors-textPrimary);\n opacity: 0;\n transform: translateX(50px) scale(0.9);\n pointer-events: none;\n transition: opacity 180ms ease, transform 200ms ease;\n z-index: 2;\n}\n.w3a-input-wrap .w3a-tooltip.is-visible {\n opacity: 0.8;\n transform: translateX(0px) scale(1);\n}\n.w3a-input-wrap .w3a-tooltip.is-error {\n color: var(--w3a-colors-error);\n background: var(--w3a-colors-colorBackground);\n /* background: color-mix(in srgb, var(--w3a-colors-error), transparent 90%); */\n}\n.w3a-input-wrap .w3a-tooltip.is-success {\n color: var(--w3a-colors-blue400);\n background: var(--w3a-colors-colorBackground);\n /* background: color-mix(in srgb, var(--w3a-colors-blue400), transparent 90%); */\n}\n\n@keyframes w3a-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Pop/bounce-in animation (kept for legacy classes) */\n@keyframes w3a-input-msg-pop {\n 0% { opacity: 0; transform: translateY(8px) scale(0.98); }\n 60% { opacity: 1; transform: translateY(-2px) scale(1.02); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .w3a-input-msg.is-error { animation: none; }\n}\n\n/* Button System */\n.w3a-scan-device-row {\n}\n\n.w3a-secondary-actions {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.w3a-link-device-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n overflow: hidden;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n height: 48px;\n width: 100%;\n max-width: 100%;\n background: var(--w3a-colors-surface) !important;\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 2rem;\n cursor: pointer;\n color: var(--w3a-colors-textPrimary);\n font-family: var(--w3a-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n font-weight: 500;\n font-size: 0.875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Hover/focus elevated state (theme-reactive via CSS vars) */\n.w3a-link-device-btn:hover:not(:disabled),\n.w3a-link-device-btn:focus-visible {\n background: var(--w3a-colors-surface2) !important;\n}\n\n.w3a-link-device-btn-primary {\n background: var(--w3a-colors-buttonBackground, var(--w3a-colors-primary, #3b82f6)) !important;\n border-color: transparent;\n border-radius: 2rem;\n color: var(--w3a-colors-textButton, white);\n}\n\n.w3a-link-device-btn-primary:hover:not(:disabled),\n.w3a-link-device-btn-primary:focus-visible {\n background: var(--w3a-colors-buttonHoverBackground, var(--w3a-colors-primaryHover, #2563eb)) !important;\n color: var(--w3a-colors-textButton, white);\n}\n\n.w3a-link-device-btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Button-local spinner: match text size inside buttons */\n.w3a-link-device-btn .w3a-spinner {\n width: 1em;\n height: 1em;\n border-width: 2px;\n}\n\n.w3a-link-device-btn-primary .w3a-spinner {\n border-color: rgba(255, 255, 255, 0.35);\n border-top-color: #ffffff;\n}\n\n/* Email recovery slide */\n.w3a-email-recovery-content {\n width: 100%;\n padding-top: 1rem;\n}\n\n.w3a-email-recovery-slide {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 260px;\n animation: content-enter 240ms ease-out;\n}\n\n.w3a-email-recovery-title {\n font-size: 20px;\n font-weight: 700;\n margin: 0.5rem 0.5rem;\n display: flex;\n justify-content: center;\n}\n\n.w3a-email-recovery-help {\n font-size: 0.95rem;\n line-height: 1.2;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 20%);\n margin: 0 0.25rem;\n}\n\n.w3a-email-recovery-meta {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n padding: 0 0.25rem;\n font-size: 0.85rem;\n}\n\n.w3a-email-recovery-meta-label {\n opacity: 0.85;\n}\n\n.w3a-email-recovery-meta-value {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 0.85rem;\n opacity: 0.9;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 70%;\n text-align: right;\n}\n\n.w3a-email-recovery-input-pill {\n height: 54px;\n padding: 0 1rem;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n transition: box-shadow 160ms ease, border-color 160ms ease;\n}\n\n.w3a-email-recovery-input-pill:focus-within {\n border-color: var(--w3a-colors-primary, #3b82f6);\n}\n\n.w3a-email-recovery-actions {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 4px;\n}\n\n.w3a-email-recovery-summary {\n font-size: 0.875rem;\n line-height: 1.2;\n padding: 0 0.25rem;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 20%);\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.w3a-email-recovery-warning {\n color: color-mix(in srgb, var(--w3a-colors-error), var(--w3a-colors-textPrimary) 30%);\n}\n\n.w3a-email-recovery-link {\n font-size: 0.875rem;\n color: var(--w3a-colors-primary, #3b82f6);\n text-decoration: none;\n padding: 0 0.25rem;\n}\n\n.w3a-email-recovery-link:hover {\n text-decoration: underline;\n}\n\n.w3a-email-recovery-status {\n font-size: 0.875rem;\n padding: 0.75rem 0.875rem;\n border-radius: 1rem;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n color: var(--w3a-colors-textPrimary);\n margin-bottom: 0.5rem;\n}\n\n.w3a-email-recovery-status.is-error {\n border-color: color-mix(in srgb, var(--w3a-colors-error), var(--w3a-colors-borderPrimary) 60%);\n color: var(--w3a-colors-error);\n}\n\n.w3a-email-recovery-elapsed {\n margin-left: 6px;\n opacity: 0.75;\n}\n\n.w3a-email-recovery-saved-emails {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.w3a-email-recovery-email-chip {\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n color: var(--w3a-colors-textPrimary);\n padding: 6px 10px;\n border-radius: 999px;\n font-size: 0.85rem;\n cursor: pointer;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.w3a-email-recovery-email-chip:hover:not(:disabled) {\n background: var(--w3a-colors-surface2);\n}\n\n.w3a-email-recovery-email-chip:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.w3a-email-recovery-toast {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0.75rem 0.875rem;\n border-radius: 1rem;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n font-size: 0.875rem;\n color: var(--w3a-colors-textPrimary);\n}\n\n.w3a-email-recovery-toast a {\n color: var(--w3a-colors-primary, #3b82f6);\n text-decoration: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n}\n\n.w3a-email-recovery-toast a:hover {\n text-decoration: underline;\n}\n\n.w3a-email-recovery-toast-close {\n margin-left: auto;\n width: 28px;\n height: 28px;\n border-radius: 999px;\n border: none;\n background: transparent;\n color: var(--w3a-colors-textSecondary);\n cursor: pointer;\n display: grid;\n place-items: center;\n}\n\n.w3a-email-recovery-toast-close:hover {\n background: var(--w3a-colors-surface2);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA"}
1
+ {"version":3,"file":"PasskeyAuthMenu-DRwSoF8q.css","names":[],"sources":["../../../../../src/react/components/PasskeyAuthMenu/PasskeyAuthMenu.css"],"sourcesContent":["/* Root container */\n.w3a-signup-menu-root {\n position: relative; /* relative position to anchor back button */\n width: min(100dvw, 420px);\n max-width: 100dvw;\n min-width: 330px;\n min-height: 250px;\n color: var(--w3a-colors-textPrimary);\n background: var(--w3a-colors-colorBackground);\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 3rem;\n box-shadow: var(--w3a-shadows-lg);\n padding: var(--w3a-spacing-lg);\n padding-top: calc(var(--w3a-spacing-lg) + 4px);\n position: relative;\n display: flex;\n flex-direction: column;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1), min-height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n will-change: height, min-height;\n}\n\n/* Back button */\n.w3a-back-button {\n position: absolute;\n top: 1rem;\n left: 1rem;\n width: 48px;\n height: 48px;\n padding: 0;\n aspect-ratio: 1 / 1;\n display: grid;\n place-items: center;\n line-height: 0;\n border-radius: 50%;\n color: var(--w3a-colors-textPrimary);\n background: transparent;\n cursor: pointer;\n border: none;\n z-index: 3;\n transition: transform 120ms ease, background-color 160ms ease, opacity 220ms ease;\n opacity: 0;\n pointer-events: none;\n filter: blur(0.2px);\n}\n.w3a-back-button.is-visible {\n opacity: 1;\n pointer-events: auto;\n filter: none;\n}\n.w3a-back-button:hover {\n transform: scale(1.02);\n background: var(--w3a-colors-surface);\n}\n.w3a-back-button:active {\n transform: scale(0.96);\n}\n\n/* Header */\n.w3a-header {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n opacity: 1;\n height: auto;\n overflow: hidden;\n transition: opacity 240ms ease-out, height 260ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 260ms cubic-bezier(0.2, 0.8, 0.2, 1), margin 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n pointer-events: auto;\n position: relative;\n will-change: height, opacity;\n}\n\n/* Hide header when waiting or scan device is active */\n.w3a-signup-menu-root[data-waiting=\"true\"] .w3a-header,\n.w3a-signup-menu-root[data-scan-device=\"true\"] .w3a-header {\n opacity: 0;\n height: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n margin-top: 0px;\n margin-bottom: 0px;\n pointer-events: none;\n}\n\n/* Hide header when email recovery is active */\n.w3a-signup-menu-root[data-email-recovery=\"true\"] .w3a-header {\n opacity: 0;\n height: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n margin-top: 0px;\n margin-bottom: 0px;\n pointer-events: none;\n}\n\n/* Adjust content area when header is hidden */\n.w3a-signup-menu-root[data-waiting=\"true\"] .w3a-content-area,\n.w3a-signup-menu-root[data-scan-device=\"true\"] .w3a-content-area {\n flex: 1 1 auto;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n/* Adjust content area when email recovery is active */\n.w3a-signup-menu-root[data-email-recovery=\"true\"] .w3a-content-area {\n flex: 1 1 auto;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n/* Specific height adjustments for different states */\n.w3a-signup-menu-root[data-waiting=\"true\"] {\n min-height: 200px;\n}\n\n.w3a-signup-menu-root[data-scan-device=\"true\"] {\n min-height: 300px;\n}\n\n.w3a-signup-menu-root[data-email-recovery=\"true\"] {\n min-height: 320px;\n}\n\n.w3a-title {\n font-size: 24px;\n font-weight: 700;\n margin: 0.5rem 0.75rem;\n}\n\n.w3a-subhead {\n font-size: 1rem;\n font-weight: 500;\n line-height: 1;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 20%);\n margin: 0;\n margin-bottom: 1rem;\n margin-left: 0.75rem;\n}\n\n/* Content switcher container */\n.w3a-content-switcher {\n display: flex;\n flex-direction: column;\n overflow: hidden; /* ensure smooth height animations without spillover */\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n will-change: height;\n}\n\n/* Content area container */\n.w3a-content-area {\n position: relative;\n /* do not force-stretch; let content define intrinsic height */\n flex: 0 1 auto;\n display: flex;\n flex-direction: column;\n animation: fade-in 240ms ease-out;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n/* Intrinsic sizer wrapper inside content area used for height measurement */\n.w3a-content-sizer {\n display: block;\n width: 100%;\n}\n\n/* Default content */\n.w3a-signin-menu {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0px;\n min-height: 250px;\n width: 100%;\n animation: content-enter 240ms ease-in-out;\n}\n\n@keyframes content-enter {\n from {\n opacity: 0;\n transform: scale(0.98) translateY(6px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Social providers row */\n.w3a-social-row {\n display: flex;\n gap: 8px;\n margin-bottom: var(--w3a-spacing-sm);\n}\n.w3a-social-btn {\n height: 48px;\n flex: 1 1 0;\n min-width: 0;\n display: grid;\n place-items: center;\n cursor: pointer;\n color: var(--w3a-colors-textSecondary, #64748b);\n overflow: hidden;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n border-radius: var(--w3a-border-radius-xl);\n /* no shadow requested */\n box-shadow: none;\n}\n.w3a-social-btn svg {\n color: var(--w3a-colors-textSecondary, #64748b);\n}\n.w3a-social-btn:hover {\n background: var(--w3a-colors-surface2);\n box-shadow: var(--w3a-shadows-sm);\n}\n.w3a-social-btn:hover svg {\n color: var(--w3a-colors-textPrimary, #1e293b);\n}\n\n/* Passkey row */\n.w3a-passkey-row {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.w3a-input-pill {\n position: relative;\n display: flex;\n flex: 1;\n align-items: center;\n padding: 0rem 1rem;\n height: 54px;\n gap: 8px;\n border: none;\n background: var(--w3a-colors-surface);\n border-radius: 2rem 2rem 2rem 2rem;\n box-shadow: none;\n overflow-x: hidden;\n transition: border-radius 150ms ease-in-out;\n}\n.w3a-input-pill.is-enabled {\n border-radius: 2rem 0.25rem 0.25rem 2rem;\n transition: border-radius 150ms ease-in-out;\n}\n\n.w3a-input-wrap {\n position: relative;\n flex: 1;\n height: 32px;\n display: flex;\n align-items: center;\n min-width: 0; /* allow input to shrink inside flex container without clipping */\n}\n.w3a-input {\n width: 100%;\n height: 32px;\n border: none;\n outline: none;\n background: transparent;\n color: var(--w3a-colors-textPrimary);\n font-size: 16px;\n padding: 0;\n min-width: 0; /* prevent overflow clipping in flex layouts */\n}\n\n/* Absolute status message anchored to bottom-right of the input area */\n.w3a-input::placeholder {\n /* Improve contrast for placeholders on dark */\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 35%);\n opacity: 0.95;\n}\n\n.w3a-postfix {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n color: var(--w3a-colors-textSecondary);\n font-size: 16px;\n white-space: nowrap;\n pointer-events: none;\n visibility: hidden; /* React enables once measured */\n will-change: left;\n transition: left 32ms ease;\n}\n.w3a-postfix.is-existing {\n color: var(--w3a-colors-success);\n}\n/* On focus, keep postfix subtle for readability */\n.w3a-input:focus ~ .w3a-postfix {\n color: var(--w3a-colors-textMuted);\n}\n\n.w3a-arrow-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 0; /* hidden footprint by default */\n padding: 0;\n background: transparent;\n border: 0;\n border-radius: 2rem 0.25rem 0.25rem 2rem;\n color: #fff;\n line-height: 0;\n cursor: pointer;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n margin-left: -1rem;\n z-index: 1;\n border: 6px solid var(--w3a-colors-colorBackground, #fff);\n height: 64px;\n transition: transform 150ms ease,\n background-color 150ms ease,\n border-radius 150ms ease,\n opacity 150ms ease,\n width 150ms ease-in-out;\n}\n.w3a-arrow-btn.is-enabled {\n width: 100px; /* expand when enabled */\n /* Prefer themed primary; fall back to legacy then a sane default */\n background: var(--w3a-colors-primary, #2563eb);\n border-radius: 2rem;\n /* border-radius: 2rem; */\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n transition: transform 150ms ease,\n background-color 150ms ease,\n border-radius 150ms ease,\n opacity 150ms ease,\n width 150ms ease-in-out;\n}\n.w3a-arrow-btn.no-transition,\n.w3a-arrow-btn.no-transition.is-enabled {\n transition: none;\n}\n.w3a-arrow-btn .w3a-arrow-icon {\n color: #fff;\n}\n.w3a-arrow-btn.is-enabled:hover {\n /* transform: scale(1.02); */\n background: var(--w3a-colors-primaryHover, #1d4ed8);\n}\n.w3a-arrow-btn.is-enabled:active {\n transform: scale(0.96);\n}\n.w3a-arrow-btn:disabled {\n width: 0;\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--w3a-colors-borderSecondary);\n transition: transform 150ms ease,\n background-color 150ms ease,\n border-radius 150ms ease,\n opacity 150ms ease,\n width 150ms ease-in-out;\n}\n.w3a-arrow-btn .w3a-arrow-label {\n margin-left: 8px;\n font-weight: 600;\n line-height: 1;\n}\n\n/* Animated arrow inside the continue button */\n.w3a-arrow-btn .stripe-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.w3a-arrow-btn .stripe-arrow > .HoverArrow {\n position: relative;\n margin-top: 0.1rem;\n margin-left: 8px;\n stroke-width: 2;\n fill: none;\n stroke: currentColor;\n}\n\n/* Horizontal line: fades in on hover of the button */\n.w3a-arrow-btn .stripe-arrow > .HoverArrow .HoverArrow__linePath {\n opacity: 0;\n transition: opacity 120ms cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n/* Chevron: nudges right and slightly scales on hover */\n.w3a-arrow-btn .stripe-arrow > .HoverArrow .HoverArrow__tipPath {\n transition: transform 120ms cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.w3a-arrow-btn.is-enabled:hover .stripe-arrow > .HoverArrow .HoverArrow__linePath,\n.w3a-arrow-btn.is-enabled:focus-visible .stripe-arrow > .HoverArrow .HoverArrow__linePath {\n opacity: 1;\n}\n\n.w3a-arrow-btn.is-enabled:hover .stripe-arrow > .HoverArrow .HoverArrow__tipPath,\n.w3a-arrow-btn.is-enabled:focus-visible .stripe-arrow > .HoverArrow .HoverArrow__tipPath {\n transform: translateX(3px);\n}\n\n/* Segmented control */\n.w3a-seg {\n position: relative;\n min-height: 54px;\n overflow: hidden;\n padding: 5px;\n border: none;\n background: var(--w3a-colors-surface2);\n border-radius: var(--w3a-border-radius-xl);\n}\n.w3a-seg-active {\n position: absolute;\n top: 5px;\n bottom: 5px;\n left: 0;\n border-radius: var(--w3a-border-radius-xl);\n transition:\n transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),\n width 220ms ease,\n opacity 150ms ease;\n will-change: transform, width;\n pointer-events: none;\n}\n.w3a-seg-grid {\n display: flex;\n gap: 4px;\n height: 100%;\n position: relative;\n z-index: 1;\n}\n.w3a-seg-btn {\n flex: 1 1 0;\n min-width: 0;\n min-height: 44px;\n border-radius: 12px;\n background: transparent;\n /* Make inactive tabs more legible and clearly tappable */\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 45%);\n font-weight: 600;\n cursor: pointer;\n border: none;\n /* Immediate taps on mobile; opt-out of double-tap zoom heuristics */\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n transition: color 200ms ease, transform 120ms ease;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n white-space: normal;\n padding: 0 14px;\n font-size: clamp(13px, 3.6vw, 15px);\n}\n.w3a-seg-btn:hover {\n transform: scale(1.02);\n}\n.w3a-seg-btn:active {\n transform: scale(0.98);\n}\n.w3a-seg-btn.is-active {\n color: var(--w3a-colors-textPrimary);\n}\n.w3a-seg-btn:focus-visible {\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--w3a-colors-focus), transparent 60%);\n}\n\n@media (max-width: 420px) {\n .w3a-signup-menu-root {\n padding: 1rem;\n padding-top: calc(1rem + 4px);\n border-radius: 2rem;\n max-width: calc(100dvw - 0.25rem);\n }\n\n @supports (width: 1dvw) {\n .w3a-signup-menu-root { max-width: calc(100dvw - 0.25rem); }\n }\n\n .w3a-title {\n font-size: 20px;\n }\n\n .w3a-subhead {\n font-size: 0.9rem;\n margin-bottom: 0.75rem;\n }\n\n .w3a-input-pill {\n height: 48px;\n }\n\n .w3a-arrow-btn {\n height: 60px;\n }\n\n .w3a-arrow-btn.is-enabled {\n width: 60px;\n }\n\n .w3a-seg {\n min-height: 48px;\n padding: 4px;\n }\n\n .w3a-seg-grid {\n gap: 3px;\n }\n\n .w3a-seg-active {\n top: 4px;\n bottom: 4px;\n }\n\n .w3a-seg-btn {\n min-height: 42px;\n padding: 0 12px;\n font-size: clamp(12px, 3.4vw, 14px);\n }\n\n .w3a-back-button {\n top: -0.5rem;\n left: -0.5rem;\n }\n}\n\n/* Waiting state */\n.w3a-waiting {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n background: transparent;\n text-align: center;\n min-height: 200px;\n /* Quick fade with configurable delay for smoother handoff */\n animation: content-enter 200ms ease-out;\n animation-delay: var(--w3a-waiting-delay, 0ms);\n animation-fill-mode: both;\n}\n.w3a-waiting-text { font-size: 18px; font-weight: 600; }\n.w3a-spinner {\n width: 36px;\n height: 36px;\n border-radius: 999px;\n border: 3px solid rgba(255,255,255,0.15);\n border-top-color: var(--w3a-colors-primary);\n animation: w3a-spin 0.9s linear infinite;\n}\n\n/* Scan device content wrapper */\n.w3a-scan-device-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n background: transparent;\n text-align: center;\n min-height: 300px;\n width: 100%;\n overflow: hidden;\n animation: content-enter 240ms ease-out;\n}\n\n/* Ensure QR code content stays within bounds */\n.w3a-scan-device-content .qr-code-container,\n.w3a-scan-device-content .qr-modal-backdrop,\n.w3a-scan-device-content .qr-modal-content {\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n}\n\n.w3a-scan-device-content .qr-code-display {\n max-width: 280px;\n width: 100%;\n}\n\n/* Status message row */\n.w3a-status-row {\n position: absolute;\n font-size: 0.75rem;\n bottom: -10px;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n.w3a-status-message {\n font-size: 11px;\n font-weight: 500;\n}\n\n/* Section divider */\n.w3a-section-divider {\n display: flex;\n align-items: center;\n margin: var(--w3a-spacing-md) 0;\n position: relative;\n}\n\n.w3a-section-divider::before,\n.w3a-section-divider::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--w3a-colors-borderSecondary);\n}\n\n.w3a-section-divider-text {\n padding: 0 var(--w3a-spacing-sm);\n font-size: 12px;\n color: var(--w3a-colors-textSecondary);\n font-weight: 500;\n background: var(--w3a-colors-colorBackground);\n}\n\n/* Labels and helper text */\n.w3a-field-label {\n font-size: 12px;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 35%);\n margin: 6px 2px 6px;\n font-weight: 600;\n}\n.w3a-seg-help {\n font-size: 12px;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 25%);\n margin: 0;\n margin-left: 0.75rem;\n}\n.w3a-seg-help-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-top: 8px;\n}\n/* Tooltip for account existence status */\n.w3a-input-wrap .w3a-tooltip {\n position: absolute;\n right: 0;\n padding: 4px 8px;\n border-radius: 1rem;\n font-size: 0.7rem;\n background: var(--w3a-colors-surface2);\n color: var(--w3a-colors-textPrimary);\n opacity: 0;\n transform: translateX(50px) scale(0.9);\n pointer-events: none;\n transition: opacity 180ms ease, transform 200ms ease;\n z-index: 2;\n}\n.w3a-input-wrap .w3a-tooltip.is-visible {\n opacity: 0.8;\n transform: translateX(0px) scale(1);\n}\n.w3a-input-wrap .w3a-tooltip.is-error {\n color: var(--w3a-colors-error);\n background: var(--w3a-colors-colorBackground);\n /* background: color-mix(in srgb, var(--w3a-colors-error), transparent 90%); */\n}\n.w3a-input-wrap .w3a-tooltip.is-success {\n color: var(--w3a-colors-blue400);\n background: var(--w3a-colors-colorBackground);\n /* background: color-mix(in srgb, var(--w3a-colors-blue400), transparent 90%); */\n}\n\n@keyframes w3a-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Pop/bounce-in animation (kept for legacy classes) */\n@keyframes w3a-input-msg-pop {\n 0% { opacity: 0; transform: translateY(8px) scale(0.98); }\n 60% { opacity: 1; transform: translateY(-2px) scale(1.02); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .w3a-input-msg.is-error { animation: none; }\n}\n\n/* Button System */\n.w3a-scan-device-row {\n}\n\n.w3a-secondary-actions {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.w3a-link-device-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n overflow: hidden;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n height: 48px;\n width: 100%;\n max-width: 100%;\n background: var(--w3a-colors-surface) !important;\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 2rem;\n cursor: pointer;\n color: var(--w3a-colors-textPrimary);\n font-family: var(--w3a-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n font-weight: 500;\n font-size: 0.875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Hover/focus elevated state (theme-reactive via CSS vars) */\n.w3a-link-device-btn:hover:not(:disabled),\n.w3a-link-device-btn:focus-visible {\n background: var(--w3a-colors-surface2) !important;\n}\n\n.w3a-link-device-btn-primary {\n background: var(--w3a-colors-buttonBackground, var(--w3a-colors-primary, #3b82f6)) !important;\n border-color: transparent;\n border-radius: 2rem;\n color: var(--w3a-colors-textButton, white);\n}\n\n.w3a-link-device-btn-primary:hover:not(:disabled),\n.w3a-link-device-btn-primary:focus-visible {\n background: var(--w3a-colors-buttonHoverBackground, var(--w3a-colors-primaryHover, #2563eb)) !important;\n color: var(--w3a-colors-textButton, white);\n}\n\n.w3a-link-device-btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Button-local spinner: match text size inside buttons */\n.w3a-link-device-btn .w3a-spinner {\n width: 1em;\n height: 1em;\n border-width: 2px;\n}\n\n.w3a-link-device-btn-primary .w3a-spinner {\n border-color: rgba(255, 255, 255, 0.35);\n border-top-color: #ffffff;\n}\n\n/* Email recovery slide */\n.w3a-email-recovery-content {\n width: 100%;\n padding-top: 1rem;\n}\n\n.w3a-email-recovery-slide {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 260px;\n animation: content-enter 240ms ease-out;\n}\n\n.w3a-email-recovery-title {\n font-size: 20px;\n font-weight: 700;\n margin: 0.5rem 0.5rem;\n display: flex;\n justify-content: center;\n}\n\n.w3a-email-recovery-help {\n font-size: 0.95rem;\n line-height: 1.2;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 20%);\n margin: 0 0.25rem;\n}\n\n.w3a-email-recovery-meta {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n padding: 0 0.25rem;\n font-size: 0.85rem;\n}\n\n.w3a-email-recovery-meta-label {\n opacity: 0.85;\n}\n\n.w3a-email-recovery-meta-value {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 0.85rem;\n opacity: 0.9;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 70%;\n text-align: right;\n}\n\n.w3a-email-recovery-input-pill {\n height: 54px;\n padding: 0 1rem;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n transition: box-shadow 160ms ease, border-color 160ms ease;\n}\n\n.w3a-email-recovery-input-pill:focus-within {\n border-color: var(--w3a-colors-primary, #3b82f6);\n}\n\n.w3a-email-recovery-actions {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 4px;\n}\n\n.w3a-email-recovery-summary {\n font-size: 0.875rem;\n line-height: 1.2;\n padding: 0 0.25rem;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 20%);\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.w3a-email-recovery-warning {\n color: color-mix(in srgb, var(--w3a-colors-error), var(--w3a-colors-textPrimary) 30%);\n}\n\n.w3a-email-recovery-link {\n font-size: 0.875rem;\n color: var(--w3a-colors-primary, #3b82f6);\n text-decoration: none;\n padding: 0 0.25rem;\n}\n\n.w3a-email-recovery-link:hover {\n text-decoration: underline;\n}\n\n.w3a-email-recovery-status {\n font-size: 0.875rem;\n padding: 0.75rem 0.875rem;\n border-radius: 1rem;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n color: var(--w3a-colors-textPrimary);\n margin-bottom: 0.5rem;\n}\n\n.w3a-email-recovery-status.is-error {\n border-color: color-mix(in srgb, var(--w3a-colors-error), var(--w3a-colors-borderPrimary) 60%);\n color: var(--w3a-colors-error);\n}\n\n.w3a-email-recovery-elapsed {\n margin-left: 6px;\n opacity: 0.75;\n}\n\n.w3a-email-recovery-saved-emails {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.w3a-email-recovery-email-chip {\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n color: var(--w3a-colors-textPrimary);\n padding: 6px 10px;\n border-radius: 999px;\n font-size: 0.85rem;\n cursor: pointer;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.w3a-email-recovery-email-chip:hover:not(:disabled) {\n background: var(--w3a-colors-surface2);\n}\n\n.w3a-email-recovery-email-chip:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.w3a-email-recovery-toast {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0.75rem 0.875rem;\n border-radius: 1rem;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n font-size: 0.875rem;\n color: var(--w3a-colors-textPrimary);\n}\n\n.w3a-email-recovery-toast a {\n color: var(--w3a-colors-primary, #3b82f6);\n text-decoration: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n}\n\n.w3a-email-recovery-toast a:hover {\n text-decoration: underline;\n}\n\n.w3a-email-recovery-toast-close {\n margin-left: auto;\n width: 28px;\n height: 28px;\n border-radius: 999px;\n border: none;\n background: transparent;\n color: var(--w3a-colors-textSecondary);\n cursor: pointer;\n display: grid;\n place-items: center;\n}\n\n.w3a-email-recovery-toast-close:hover {\n background: var(--w3a-colors-surface2);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA"}
package/dist/esm/react/components/PasskeyAuthMenu/ui/EmailRecoverySlide.js CHANGED
@@ -1,11 +1,36 @@
1
1
  import { init_accountIds, toAccountId } from "../../../sdk/src/core/types/accountIds.js";
2
2
  import { IndexedDBManager, init_IndexedDBManager } from "../../../sdk/src/core/IndexedDBManager/index.js";
3
+ import { EmailRecoveryErrorCode, init_emailRecovery } from "../../../sdk/src/core/types/emailRecovery.js";
3
4
  import React from "react";
4
5
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
6
 
6
7
  //#region src/react/components/PasskeyAuthMenu/ui/EmailRecoverySlide.tsx
7
8
  init_IndexedDBManager();
8
9
  init_accountIds();
10
+ init_emailRecovery();
11
+ function getEmailRecoveryErrorCode(err) {
12
+ const code = err?.code;
13
+ if (typeof code !== "string") return null;
14
+ return Object.values(EmailRecoveryErrorCode).includes(code) ? code : null;
15
+ }
16
+ function getEmailRecoveryUiError(err) {
17
+ const fallback = err instanceof Error ? err.message : String(err || "");
18
+ const code = getEmailRecoveryErrorCode(err);
19
+ switch (code) {
20
+ case EmailRecoveryErrorCode.VRF_CHALLENGE_EXPIRED: return {
21
+ message: fallback || "Timed out finalizing registration (VRF challenge expired). Please restart email recovery and try again.",
22
+ canRestart: true
23
+ };
24
+ case EmailRecoveryErrorCode.REGISTRATION_NOT_VERIFIED: return {
25
+ message: fallback || "Registration did not verify on-chain. Please restart email recovery and try again.",
26
+ canRestart: true
27
+ };
28
+ default: return {
29
+ message: fallback || "Email recovery failed",
30
+ canRestart: false
31
+ };
32
+ }
33
+ }
9
34
  const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, emailRecoveryOptions }) => {
10
35
  const mountedRef = React.useRef(true);
11
36
  const mailtoAttemptTimerRef = React.useRef(null);
@@ -24,10 +49,12 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
24
49
  const [accountIdInput, setAccountIdInput] = React.useState("");
25
50
  const [recoveryEmailInput, setRecoveryEmailInput] = React.useState("");
26
51
  const [pendingMailtoUrl, setPendingMailtoUrl] = React.useState(null);
52
+ const [pendingNearPublicKey, setPendingNearPublicKey] = React.useState(null);
27
53
  const [mailtoUiState, setMailtoUiState] = React.useState("ready");
28
54
  const [statusText, setStatusText] = React.useState(null);
29
55
  const [pollingElapsedMs, setPollingElapsedMs] = React.useState(null);
30
56
  const [errorText, setErrorText] = React.useState(null);
57
+ const [canRestart, setCanRestart] = React.useState(false);
31
58
  const [accountInfo, setAccountInfo] = React.useState(null);
32
59
  const [accountInfoLoading, setAccountInfoLoading] = React.useState(false);
33
60
  const [accountInfoError, setAccountInfoError] = React.useState(null);
@@ -45,11 +72,13 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
45
72
  }, [accountId]);
46
73
  React.useEffect(() => {
47
74
  setPendingMailtoUrl(null);
75
+ setPendingNearPublicKey(null);
48
76
  setMailtoUiState("ready");
49
77
  cancelRequestedRef.current = false;
50
78
  setStatusText(null);
51
79
  setPollingElapsedMs(null);
52
80
  setErrorText(null);
81
+ setCanRestart(false);
53
82
  setAccountInfo(null);
54
83
  setAccountInfoError(null);
55
84
  setLocalRecoveryEmails([]);
@@ -66,10 +95,12 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
66
95
  };
67
96
  };
68
97
  const safeSetPendingMailtoUrl = React.useMemo(() => safeSet(setPendingMailtoUrl), []);
98
+ const safeSetPendingNearPublicKey = React.useMemo(() => safeSet(setPendingNearPublicKey), []);
69
99
  const safeSetStatusText = React.useMemo(() => safeSet(setStatusText), []);
70
100
  const safeSetPollingElapsedMs = React.useMemo(() => safeSet(setPollingElapsedMs), []);
71
101
  const safeSetErrorText = React.useMemo(() => safeSet(setErrorText), []);
72
102
  const safeSetIsBusy = React.useMemo(() => safeSet(setIsBusy), []);
103
+ const safeSetCanRestart = React.useMemo(() => safeSet(setCanRestart), []);
73
104
  const safeSetAccountInfo = React.useMemo(() => safeSet(setAccountInfo), []);
74
105
  const safeSetAccountInfoLoading = React.useMemo(() => safeSet(setAccountInfoLoading), []);
75
106
  const safeSetAccountInfoError = React.useMemo(() => safeSet(setAccountInfoError), []);
@@ -98,9 +129,11 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
98
129
  if (ev?.phase === "email-recovery-error" || ev?.status === "error") {
99
130
  const raw = ev?.error || ev?.message || "Email recovery failed";
100
131
  safeSetErrorText(String(raw));
132
+ safeSetCanRestart(false);
101
133
  }
102
134
  }, [
103
135
  emailRecoveryOptions,
136
+ safeSetCanRestart,
104
137
  safeSetErrorText,
105
138
  safeSetExplorerToast,
106
139
  safeSetPollingElapsedMs,
@@ -276,9 +309,11 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
276
309
  safeSetIsBusy(true);
277
310
  cancelRequestedRef.current = false;
278
311
  safeSetErrorText(null);
312
+ safeSetCanRestart(false);
279
313
  safeSetStatusText(null);
280
314
  safeSetPollingElapsedMs(null);
281
315
  safeSetPendingMailtoUrl(null);
316
+ safeSetPendingNearPublicKey(null);
282
317
  safeSetMailtoUiState("ready");
283
318
  let didForwardError = false;
284
319
  try {
@@ -297,6 +332,7 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
297
332
  }
298
333
  });
299
334
  safeSetPendingMailtoUrl(result.mailtoUrl);
335
+ safeSetPendingNearPublicKey(result.nearPublicKey);
300
336
  safeSetStatusText("Recovery email draft ready. If it didn’t open automatically, click “Open recovery email draft”. Waiting for verification…");
301
337
  attemptOpenMailtoAuto(result.mailtoUrl);
302
338
  const finalizePromise = tatchiPasskey.finalizeEmailRecovery({
@@ -306,7 +342,9 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
306
342
  onEvent,
307
343
  onError: (err) => {
308
344
  if (cancelRequestedRef.current) return;
309
- safeSetErrorText(err?.message || "Failed to finalize email recovery");
345
+ const uiError = getEmailRecoveryUiError(err);
346
+ safeSetErrorText(uiError.message || "Failed to finalize email recovery");
347
+ safeSetCanRestart(uiError.canRestart);
310
348
  didForwardError = true;
311
349
  emailRecoveryOptions?.onError?.(err);
312
350
  },
@@ -333,10 +371,14 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
333
371
  safeSetStatusText(null);
334
372
  safeSetPollingElapsedMs(null);
335
373
  safeSetPendingMailtoUrl(null);
374
+ safeSetPendingNearPublicKey(null);
336
375
  safeSetMailtoUiState("ready");
376
+ safeSetCanRestart(false);
337
377
  return;
338
378
  }
339
- safeSetErrorText(err?.message || "Failed to start email recovery");
379
+ const uiError = getEmailRecoveryUiError(err);
380
+ safeSetErrorText(uiError.message || "Failed to start email recovery");
381
+ safeSetCanRestart(uiError.canRestart);
340
382
  if (!didForwardError && err instanceof Error) emailRecoveryOptions?.onError?.(err);
341
383
  } finally {
342
384
  safeSetIsBusy(false);
@@ -357,6 +399,40 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
357
399
  attemptOpenMailtoAuto,
358
400
  tatchiPasskey
359
401
  ]);
402
+ const handleRestart = React.useCallback(async () => {
403
+ const normalizedAccountId = (accountIdInput || "").trim();
404
+ if (!normalizedAccountId) return;
405
+ safeSetIsBusy(true);
406
+ try {
407
+ cancelRequestedRef.current = true;
408
+ await tatchiPasskey.cancelEmailRecovery({
409
+ accountId: normalizedAccountId,
410
+ nearPublicKey: pendingNearPublicKey || void 0
411
+ }).catch(() => {});
412
+ safeSetErrorText(null);
413
+ safeSetStatusText(null);
414
+ safeSetPollingElapsedMs(null);
415
+ safeSetPendingMailtoUrl(null);
416
+ safeSetPendingNearPublicKey(null);
417
+ safeSetMailtoUiState("ready");
418
+ safeSetCanRestart(false);
419
+ } finally {
420
+ cancelRequestedRef.current = false;
421
+ safeSetIsBusy(false);
422
+ }
423
+ }, [
424
+ accountIdInput,
425
+ pendingNearPublicKey,
426
+ safeSetCanRestart,
427
+ safeSetErrorText,
428
+ safeSetIsBusy,
429
+ safeSetMailtoUiState,
430
+ safeSetPendingMailtoUrl,
431
+ safeSetPendingNearPublicKey,
432
+ safeSetPollingElapsedMs,
433
+ safeSetStatusText,
434
+ tatchiPasskey
435
+ ]);
360
436
  const summaryLine = accountInfoLoading ? "Checking if account has recovery emails configured..." : accountInfo && !accountInfoError ? `Recovery emails configured: ${accountInfo.emailsCount}` : "\xA0";
361
437
  const noRecoveryEmailsConfigured = !accountInfoLoading && !accountInfoError && !!accountInfo && accountInfo.emailsCount === 0;
362
438
  return /* @__PURE__ */ jsxs("div", {
@@ -368,7 +444,7 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
368
444
  }),
369
445
  /* @__PURE__ */ jsx("div", {
370
446
  className: "w3a-email-recovery-help",
371
- children: "Send a special recovery email from your recovery email address. Your account will be recovered with a new key once the email is verified."
447
+ children: "Send a recovery email from your registered email address. Your account will be recovered with a new key once the email is verified."
372
448
  }),
373
449
  /* @__PURE__ */ jsx("div", {
374
450
  className: "w3a-email-recovery-field",
@@ -438,22 +514,32 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
438
514
  }),
439
515
  /* @__PURE__ */ jsxs("div", {
440
516
  className: "w3a-email-recovery-actions",
441
- children: [(!pendingMailtoUrl || !isBusy) && /* @__PURE__ */ jsx("button", {
442
- onClick: handleStart,
443
- className: "w3a-link-device-btn w3a-link-device-btn-primary",
444
- disabled: isBusy || noRecoveryEmailsConfigured,
445
- children: noRecoveryEmailsConfigured ? "No recovery emails configured" : isBusy ? "Working…" : "Start Email Recovery"
446
- }), pendingMailtoUrl && /* @__PURE__ */ jsxs("button", {
447
- type: "button",
448
- onClick: () => attemptOpenMailtoFromUserGesture(pendingMailtoUrl),
449
- className: "w3a-link-device-btn w3a-link-device-btn-primary",
450
- disabled: mailtoUiState === "opening",
451
- "aria-busy": mailtoUiState === "opening",
452
- children: [mailtoUiState === "opening" && /* @__PURE__ */ jsx("span", {
453
- className: "w3a-spinner",
454
- "aria-hidden": "true"
455
- }), mailtoUiState === "opening" ? "Opening email…" : "Open recovery email draft"]
456
- })]
517
+ children: [
518
+ (!pendingMailtoUrl || !isBusy) && /* @__PURE__ */ jsx("button", {
519
+ onClick: handleStart,
520
+ className: "w3a-link-device-btn w3a-link-device-btn-primary",
521
+ disabled: isBusy || noRecoveryEmailsConfigured,
522
+ children: noRecoveryEmailsConfigured ? "No recovery emails configured" : isBusy ? "Working…" : "Start Email Recovery"
523
+ }),
524
+ pendingMailtoUrl && /* @__PURE__ */ jsxs("button", {
525
+ type: "button",
526
+ onClick: () => attemptOpenMailtoFromUserGesture(pendingMailtoUrl),
527
+ className: "w3a-link-device-btn w3a-link-device-btn-primary",
528
+ disabled: mailtoUiState === "opening",
529
+ "aria-busy": mailtoUiState === "opening",
530
+ children: [mailtoUiState === "opening" && /* @__PURE__ */ jsx("span", {
531
+ className: "w3a-spinner",
532
+ "aria-hidden": "true"
533
+ }), mailtoUiState === "opening" ? "Opening email…" : "Open recovery email draft"]
534
+ }),
535
+ errorText && canRestart && /* @__PURE__ */ jsx("button", {
536
+ type: "button",
537
+ onClick: handleRestart,
538
+ className: "w3a-link-device-btn",
539
+ disabled: isBusy,
540
+ children: "Restart email recovery"
541
+ })
542
+ ]
457
543
  }),
458
544
  (errorText || statusText || explorerToast) && /* @__PURE__ */ jsxs("div", {
459
545
  className: `w3a-email-recovery-status${errorText ? " is-error" : ""}`,
@@ -467,13 +553,13 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
467
553
  "s)."
468
554
  ]
469
555
  }),
470
- explorerToast && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("br", {}), /* @__PURE__ */ jsx("a", {
556
+ explorerToast && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("a", {
471
557
  className: "w3a-email-recovery-link",
472
558
  href: explorerToast.url,
473
559
  target: "_blank",
474
560
  rel: "noopener noreferrer",
475
561
  children: "View on explorer"
476
- })] })
562
+ }) })
477
563
  ]
478
564
  })
479
565
  ]