@tatchi-xyz/sdk 0.16.0 → 0.17.0

package/dist/{cjs/react/components/AccountMenuButton/LinkedDevicesModal-STvIsylA.css.map → esm/react/components/AccountMenuButton/LinkedDevicesModal-B6api181.css.map}

@@ -1 +1 @@
-{"version":3,"file":"LinkedDevicesModal-STvIsylA.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"}
+{"version":3,"file":"LinkedDevicesModal-B6api181.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-iARgUwK1.css → ProfileDropdown-B-DrG_u5.css}

@@ -117,4 +117,4 @@ body[data-w3a-theme-pulse="1"] .w3a-profile-dropdown-menu {
 }
 
 
-/*# sourceMappingURL=ProfileDropdown-iARgUwK1.css.map*/
+/*# sourceMappingURL=ProfileDropdown-B-DrG_u5.css.map*/

package/dist/{cjs/react/components/AccountMenuButton/ProfileDropdown-iARgUwK1.css.map → esm/react/components/AccountMenuButton/ProfileDropdown-B-DrG_u5.css.map}

@@ -1 +1 @@
-{"version":3,"file":"ProfileDropdown-iARgUwK1.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"}
+{"version":3,"file":"ProfileDropdown-B-DrG_u5.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-Db3NeoAC.css → Web3AuthProfileButton-BnZDUeCL.css}

@@ -74,4 +74,4 @@
 }
 
 
-/*# sourceMappingURL=Web3AuthProfileButton-Db3NeoAC.css.map*/
+/*# sourceMappingURL=Web3AuthProfileButton-BnZDUeCL.css.map*/

package/dist/esm/react/components/AccountMenuButton/{Web3AuthProfileButton-Db3NeoAC.css.map → Web3AuthProfileButton-BnZDUeCL.css.map}

@@ -1 +1 @@
-{"version":3,"file":"Web3AuthProfileButton-Db3NeoAC.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"}
+{"version":3,"file":"Web3AuthProfileButton-BnZDUeCL.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-BXM5NR4A.css → TouchIcon-CAGCi8MY.css}

@@ -38,4 +38,4 @@
 }
 
 
-/*# sourceMappingURL=TouchIcon-BXM5NR4A.css.map*/
+/*# sourceMappingURL=TouchIcon-CAGCi8MY.css.map*/

package/dist/esm/react/components/AccountMenuButton/icons/{TouchIcon-BXM5NR4A.css.map → TouchIcon-CAGCi8MY.css.map}

@@ -1 +1 @@
-{"version":3,"file":"TouchIcon-BXM5NR4A.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"}
+{"version":3,"file":"TouchIcon-CAGCi8MY.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-De1qTSmU.css → PasskeyAuthMenu-CNNxVj4L.css}

@@ -750,6 +750,18 @@
   cursor: not-allowed;
 }
 
+/* Button-local spinner: match text size inside buttons */
+.w3a-link-device-btn .w3a-spinner {
+  width: 1em;
+  height: 1em;
+  border-width: 2px;
+}
+
+.w3a-link-device-btn-primary .w3a-spinner {
+  border-color: rgba(255, 255, 255, 0.35);
+  border-top-color: #ffffff;
+}
+
 /* Email recovery slide */
 .w3a-email-recovery-content {
   width: 100%;
@@ -854,6 +866,7 @@
   border: 1px solid var(--w3a-colors-borderPrimary);
   background: var(--w3a-colors-surface);
   color: var(--w3a-colors-textPrimary);
+  margin-bottom: 0.5rem;
 }
 
 .w3a-email-recovery-status.is-error {
@@ -938,4 +951,4 @@
 }
 
 
-/*# sourceMappingURL=PasskeyAuthMenu-De1qTSmU.css.map*/
+/*# sourceMappingURL=PasskeyAuthMenu-CNNxVj4L.css.map*/

package/dist/esm/react/components/PasskeyAuthMenu/{PasskeyAuthMenu-De1qTSmU.css.map → PasskeyAuthMenu-CNNxVj4L.css.map}

@@ -1 +1 @@
-{"version":3,"file":"PasskeyAuthMenu-De1qTSmU.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/* 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}\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;;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;;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"}
+{"version":3,"file":"PasskeyAuthMenu-CNNxVj4L.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

@@ -1,21 +1,22 @@
 import { init_accountIds, toAccountId } from "../../../sdk/src/core/types/accountIds.js";
 import { IndexedDBManager, init_IndexedDBManager } from "../../../sdk/src/core/IndexedDBManager/index.js";
 import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react/components/PasskeyAuthMenu/ui/EmailRecoverySlide.tsx
 init_IndexedDBManager();
 init_accountIds();
 const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, emailRecoveryOptions }) => {
 	const mountedRef = React.useRef(true);
-	const explorerToastTimerRef = React.useRef(null);
+	const mailtoAttemptTimerRef = React.useRef(null);
+	const cancelRequestedRef = React.useRef(false);
 	React.useEffect(() => {
 		mountedRef.current = true;
 		return () => {
 			mountedRef.current = false;
-			if (explorerToastTimerRef.current != null) {
-				window.clearTimeout(explorerToastTimerRef.current);
-				explorerToastTimerRef.current = null;
+			if (mailtoAttemptTimerRef.current != null) {
+				window.clearTimeout(mailtoAttemptTimerRef.current);
+				mailtoAttemptTimerRef.current = null;
 			}
 		};
 	}, []);
@@ -23,6 +24,7 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	const [accountIdInput, setAccountIdInput] = React.useState("");
 	const [recoveryEmailInput, setRecoveryEmailInput] = React.useState("");
 	const [pendingMailtoUrl, setPendingMailtoUrl] = React.useState(null);
+	const [mailtoUiState, setMailtoUiState] = React.useState("ready");
 	const [statusText, setStatusText] = React.useState(null);
 	const [pollingElapsedMs, setPollingElapsedMs] = React.useState(null);
 	const [errorText, setErrorText] = React.useState(null);
@@ -43,6 +45,8 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	}, [accountId]);
 	React.useEffect(() => {
 		setPendingMailtoUrl(null);
+		setMailtoUiState("ready");
+		cancelRequestedRef.current = false;
 		setStatusText(null);
 		setPollingElapsedMs(null);
 		setErrorText(null);
@@ -50,9 +54,9 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		setAccountInfoError(null);
 		setLocalRecoveryEmails([]);
 		setExplorerToast(null);
-		if (explorerToastTimerRef.current != null) {
-			window.clearTimeout(explorerToastTimerRef.current);
-			explorerToastTimerRef.current = null;
+		if (mailtoAttemptTimerRef.current != null) {
+			window.clearTimeout(mailtoAttemptTimerRef.current);
+			mailtoAttemptTimerRef.current = null;
 		}
 	}, [accountId]);
 	const safeSet = (setter) => {
@@ -71,11 +75,24 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	const safeSetAccountInfoError = React.useMemo(() => safeSet(setAccountInfoError), []);
 	const safeSetLocalRecoveryEmails = React.useMemo(() => safeSet(setLocalRecoveryEmails), []);
 	const safeSetExplorerToast = React.useMemo(() => safeSet(setExplorerToast), []);
+	const safeSetMailtoUiState = React.useMemo(() => safeSet(setMailtoUiState), []);
 	const onEvent = React.useCallback((ev) => {
+		if (cancelRequestedRef.current) return;
 		safeSetStatusText(ev?.message || null);
 		emailRecoveryOptions?.onEvent?.(ev);
 		const data = ev?.data || {};
+		const rawTxHash = data?.transactionHash ?? data?.transaction_hash;
+		const txHash = typeof rawTxHash === "string" ? rawTxHash.trim() : "";
+		if (txHash) {
+			const base = String(tatchiPasskey.configs?.nearExplorerUrl || "https://testnet.nearblocks.io").replace(/\/$/, "");
+			const url = base.includes("nearblocks.io") ? `${base}/txns/${txHash}` : `${base}/transactions/${txHash}`;
+			safeSetExplorerToast({
+				url,
+				transactionHash: txHash
+			});
+		}
 		const elapsedRaw = data?.elapsedMs ?? data?.elapsed_ms;
+		if (elapsedRaw == null) safeSetPollingElapsedMs(null);
 		const elapsed = elapsedRaw == null ? NaN : Number(elapsedRaw);
 		if (!Number.isNaN(elapsed)) safeSetPollingElapsedMs(elapsed);
 		if (ev?.phase === "email-recovery-error" || ev?.status === "error") {
@@ -84,25 +101,67 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		}
 	}, [
 		emailRecoveryOptions,
-		safeSetStatusText,
+		safeSetErrorText,
+		safeSetExplorerToast,
 		safeSetPollingElapsedMs,
-		safeSetErrorText
+		safeSetStatusText,
+		tatchiPasskey
 	]);
 	const showExplorerToast = React.useCallback((rawAccountId) => {
 		const normalized = (rawAccountId || "").trim();
 		if (!normalized) return;
 		const base = String(tatchiPasskey.configs?.nearExplorerUrl || "https://testnet.nearblocks.io").replace(/\/$/, "");
-		const url = `${base}/address/${normalized}`;
+		const url = base.includes("nearblocks.io") ? `${base}/address/${normalized}` : `${base}/accounts/${normalized}`;
 		safeSetExplorerToast({
 			url,
 			accountId: normalized
 		});
-		if (explorerToastTimerRef.current != null) window.clearTimeout(explorerToastTimerRef.current);
-		explorerToastTimerRef.current = window.setTimeout(() => {
-			safeSetExplorerToast(null);
-			explorerToastTimerRef.current = null;
-		}, 12e3);
 	}, [safeSetExplorerToast, tatchiPasskey]);
+	const launchMailto = React.useCallback((rawMailtoUrl) => {
+		const url = String(rawMailtoUrl || "").trim();
+		if (!url) return;
+		if (typeof window !== "undefined") try {
+			window.location.href = url;
+		} catch {}
+	}, []);
+	const attemptOpenMailtoFromUserGesture = React.useCallback((rawMailtoUrl) => {
+		const url = String(rawMailtoUrl || "").trim();
+		if (!url) return;
+		safeSetMailtoUiState("opening");
+		if (mailtoAttemptTimerRef.current != null) window.clearTimeout(mailtoAttemptTimerRef.current);
+		mailtoAttemptTimerRef.current = window.setTimeout(() => {
+			safeSetMailtoUiState((prev) => prev === "opening" ? "ready" : prev);
+			mailtoAttemptTimerRef.current = null;
+		}, 2e3);
+		launchMailto(url);
+	}, [launchMailto, safeSetMailtoUiState]);
+	const attemptOpenMailtoAuto = React.useCallback((rawMailtoUrl) => {
+		const url = String(rawMailtoUrl || "").trim();
+		if (!url) return;
+		launchMailto(url);
+	}, [launchMailto]);
+	React.useEffect(() => {
+		if (mailtoUiState !== "opening") return;
+		if (typeof window === "undefined" || typeof document === "undefined") return;
+		const markMaybeOpened = () => {
+			safeSetMailtoUiState("ready");
+			if (mailtoAttemptTimerRef.current != null) {
+				window.clearTimeout(mailtoAttemptTimerRef.current);
+				mailtoAttemptTimerRef.current = null;
+			}
+		};
+		const onVisibilityChange = () => {
+			if (document.visibilityState === "hidden") markMaybeOpened();
+		};
+		window.addEventListener("blur", markMaybeOpened);
+		window.addEventListener("pagehide", markMaybeOpened);
+		document.addEventListener("visibilitychange", onVisibilityChange);
+		return () => {
+			window.removeEventListener("blur", markMaybeOpened);
+			window.removeEventListener("pagehide", markMaybeOpened);
+			document.removeEventListener("visibilitychange", onVisibilityChange);
+		};
+	}, [mailtoUiState, safeSetMailtoUiState]);
 	const fetchLocalRecoveryEmailsFromIndexedDB = React.useCallback(async (rawAccountId) => {
 		const normalized = (rawAccountId || "").trim();
 		if (!normalized) {
@@ -215,10 +274,12 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			return;
 		}
 		safeSetIsBusy(true);
+		cancelRequestedRef.current = false;
 		safeSetErrorText(null);
 		safeSetStatusText(null);
 		safeSetPollingElapsedMs(null);
 		safeSetPendingMailtoUrl(null);
+		safeSetMailtoUiState("ready");
 		let didForwardError = false;
 		try {
 			const result = await tatchiPasskey.startEmailRecovery({
@@ -227,6 +288,7 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 				options: {
 					onEvent,
 					onError: (err) => {
+						if (cancelRequestedRef.current) return;
 						safeSetErrorText(err?.message || "Failed to start email recovery");
 						didForwardError = true;
 						emailRecoveryOptions?.onError?.(err);
@@ -235,15 +297,15 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 				}
 			});
 			safeSetPendingMailtoUrl(result.mailtoUrl);
-			safeSetStatusText("Recovery email draft ready. Send it from your recovery address. Waiting for verification…");
-			if (typeof window !== "undefined" && typeof window.open === "function") window.open(result.mailtoUrl, "_blank", "noopener,noreferrer");
-			showExplorerToast(normalizedAccountId);
-			await tatchiPasskey.finalizeEmailRecovery({
+			safeSetStatusText("Recovery email draft ready. If it didn’t open automatically, click “Open recovery email draft”. Waiting for verification…");
+			attemptOpenMailtoAuto(result.mailtoUrl);
+			const finalizePromise = tatchiPasskey.finalizeEmailRecovery({
 				accountId: normalizedAccountId,
 				nearPublicKey: result.nearPublicKey,
 				options: {
 					onEvent,
 					onError: (err) => {
+						if (cancelRequestedRef.current) return;
 						safeSetErrorText(err?.message || "Failed to finalize email recovery");
 						didForwardError = true;
 						emailRecoveryOptions?.onError?.(err);
@@ -251,6 +313,8 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 					afterCall: async () => {}
 				}
 			});
+			showExplorerToast(normalizedAccountId);
+			await finalizePromise;
 			let loginOk = false;
 			const session = await tatchiPasskey.getLoginSession(normalizedAccountId).catch(() => null);
 			if (session?.login?.isLoggedIn) loginOk = true;
@@ -261,8 +325,17 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			if (refreshLoginState) await refreshLoginState(normalizedAccountId).catch(() => {});
 			safeSetStatusText(loginOk ? "Email recovery completed on this device." : "Email recovery completed. Please log in on this device.");
 			safeSetPendingMailtoUrl(null);
+			safeSetMailtoUiState("ready");
 			safeSetPollingElapsedMs(null);
 		} catch (err) {
+			if (cancelRequestedRef.current) {
+				safeSetErrorText("Email recovery cancelled. Please try again.");
+				safeSetStatusText(null);
+				safeSetPollingElapsedMs(null);
+				safeSetPendingMailtoUrl(null);
+				safeSetMailtoUiState("ready");
+				return;
+			}
 			safeSetErrorText(err?.message || "Failed to start email recovery");
 			if (!didForwardError && err instanceof Error) emailRecoveryOptions?.onError?.(err);
 		} finally {
@@ -280,6 +353,8 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		safeSetPendingMailtoUrl,
 		safeSetPollingElapsedMs,
 		safeSetStatusText,
+		safeSetMailtoUiState,
+		attemptOpenMailtoAuto,
 		tatchiPasskey
 	]);
 	const summaryLine = accountInfoLoading ? "Checking if account has recovery emails configured..." : accountInfo && !accountInfoError ? `Recovery emails configured: ${accountInfo.emailsCount}` : "\xA0";
@@ -361,51 +436,45 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 				id: "w3a-email-recovery-saved-emails",
 				children: localRecoveryEmails.map((email) => /* @__PURE__ */ jsx("option", { value: email }, email))
 			}),
-			/* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
 				className: "w3a-email-recovery-actions",
-				children: /* @__PURE__ */ jsx("button", {
+				children: [(!pendingMailtoUrl || !isBusy) && /* @__PURE__ */ jsx("button", {
 					onClick: handleStart,
 					className: "w3a-link-device-btn w3a-link-device-btn-primary",
 					disabled: isBusy || noRecoveryEmailsConfigured,
 					children: noRecoveryEmailsConfigured ? "No recovery emails configured" : isBusy ? "Working…" : "Start Email Recovery"
-				})
-			}),
-			pendingMailtoUrl && /* @__PURE__ */ jsx("a", {
-				className: "w3a-email-recovery-link",
-				href: pendingMailtoUrl,
-				children: "Open recovery email draft"
+				}), pendingMailtoUrl && /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => attemptOpenMailtoFromUserGesture(pendingMailtoUrl),
+					className: "w3a-link-device-btn w3a-link-device-btn-primary",
+					disabled: mailtoUiState === "opening",
+					"aria-busy": mailtoUiState === "opening",
+					children: [mailtoUiState === "opening" && /* @__PURE__ */ jsx("span", {
+						className: "w3a-spinner",
+						"aria-hidden": "true"
+					}), mailtoUiState === "opening" ? "Opening email…" : "Open recovery email draft"]
+				})]
 			}),
-			explorerToast && /* @__PURE__ */ jsxs("div", {
-				className: "w3a-email-recovery-toast",
-				role: "status",
-				"aria-live": "polite",
+			(errorText || statusText || explorerToast) && /* @__PURE__ */ jsxs("div", {
+				className: `w3a-email-recovery-status${errorText ? " is-error" : ""}`,
 				children: [
-					/* @__PURE__ */ jsx("span", { children: "View on explorer:" }),
-					/* @__PURE__ */ jsx("a", {
+					errorText ? errorText : statusText,
+					pollingElapsedMs != null && !Number.isNaN(pollingElapsedMs) && pollingElapsedMs > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "w3a-email-recovery-elapsed",
+						children: [
+							"(~",
+							Math.round(pollingElapsedMs / 1e3),
+							"s)."
+						]
+					}),
+					explorerToast && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("br", {}), /* @__PURE__ */ jsx("a", {
+						className: "w3a-email-recovery-link",
 						href: explorerToast.url,
 						target: "_blank",
 						rel: "noopener noreferrer",
-						children: explorerToast.accountId
-					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "w3a-email-recovery-toast-close",
-						onClick: () => safeSetExplorerToast(null),
-						"aria-label": "Dismiss",
-						children: "✕"
-					})
+						children: "View on explorer"
+					})] })
 				]
-			}),
-			(errorText || statusText) && /* @__PURE__ */ jsxs("div", {
-				className: `w3a-email-recovery-status${errorText ? " is-error" : ""}`,
-				children: [errorText ? errorText : statusText, pollingElapsedMs != null && !Number.isNaN(pollingElapsedMs) && pollingElapsedMs > 0 && /* @__PURE__ */ jsxs("span", {
-					className: "w3a-email-recovery-elapsed",
-					children: [
-						"(~",
-						Math.round(pollingElapsedMs / 1e3),
-						"s)"
-					]
-				})]
 			})
 		]
 	});