npm - @tatchi-xyz/sdk - Versions diffs - 0.19.0 → 0.21.0 - Mend

@tatchi-xyz/sdk 0.19.0 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (243) hide show

package/dist/esm/react/components/PasskeyAuthMenu/{PasskeyAuthMenu-DwrzWMYx.css → PasskeyAuthMenu-DKMiLeT9.css} RENAMED Viewed

@@ -548,7 +548,26 @@
   animation-delay: var(--w3a-waiting-delay, 0ms);
   animation-fill-mode: both;
 }
+.w3a-waiting-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
 .w3a-waiting-text { font-size: 18px; font-weight: 600; }
+.w3a-waiting-subtext {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+  color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 25%);
+}
+.w3a-waiting-sdk-events {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.35;
+  white-space: pre-wrap;
+  color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 15%);
+}
 .w3a-spinner {
   width: 36px;
   height: 36px;
@@ -682,6 +701,24 @@
   to { transform: rotate(360deg); }
 }
+@keyframes w3a-ellipsis-dot {
+  0%, 80%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
+.w3a-ellipsis {
+  display: inline-block;
+}
+.w3a-ellipsis-dot {
+  display: inline-block;
+  opacity: 0;
+  animation: w3a-ellipsis-dot 1.2s infinite;
+}
+.w3a-ellipsis-dot:nth-child(2) { animation-delay: 0.15s; }
+.w3a-ellipsis-dot:nth-child(3) { animation-delay: 0.3s; }
 /* Pop/bounce-in animation (kept for legacy classes) */
 @keyframes w3a-input-msg-pop {
   0% { opacity: 0; transform: translateY(8px) scale(0.98); }
@@ -691,6 +728,7 @@
 @media (prefers-reduced-motion: reduce) {
   .w3a-input-msg.is-error { animation: none; }
+  .w3a-ellipsis-dot { animation: none; opacity: 1; }
 }
 /* Button System */
@@ -848,11 +886,24 @@
   color: color-mix(in srgb, var(--w3a-colors-error), var(--w3a-colors-textPrimary) 30%);
 }
+.w3a-email-recovery-from-warning {
+  margin-top: 1rem;
+  font-weight: 600;
+}
+[data-w3a-theme="light"] .w3a-email-recovery-from-warning {
+  color: #d80;
+}
+[data-w3a-theme="dark"] .w3a-email-recovery-from-warning {
+  color: #ea5;
+}
 .w3a-email-recovery-link {
   font-size: 0.875rem;
   color: var(--w3a-colors-primary, #3b82f6);
   text-decoration: none;
-  padding: 0 0.25rem;
+  padding: 0;
 }
 .w3a-email-recovery-link:hover {
@@ -864,9 +915,9 @@
   padding: 0.75rem 0.875rem;
   border-radius: 1rem;
   border: 1px solid var(--w3a-colors-borderPrimary);
-  background: var(--w3a-colors-surface);
+  background: var(--w3a-colors-surface2);
   color: var(--w3a-colors-textPrimary);
-  margin-bottom: 0.5rem;
+  margin-bottom: 4px;
 }
 .w3a-email-recovery-status.is-error {
@@ -899,6 +950,10 @@
   white-space: nowrap;
 }
+.w3a-email-recovery-email-chip-static {
+  cursor: default;
+}
 .w3a-email-recovery-email-chip:hover:not(:disabled) {
   background: var(--w3a-colors-surface2);
 }
@@ -951,4 +1006,4 @@
 }
-/*# sourceMappingURL=PasskeyAuthMenu-DwrzWMYx.css.map*/
+/*# sourceMappingURL=PasskeyAuthMenu-DKMiLeT9.css.map*/

package/dist/esm/react/components/PasskeyAuthMenu/{PasskeyAuthMenu-DwrzWMYx.css.map → PasskeyAuthMenu-DKMiLeT9.css.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasskeyAuthMenu-DwrzWMYx.css","names":[],"sources":["../../../../../src/react/components/PasskeyAuthMenu/PasskeyAuthMenu.css"],"sourcesContent":["/* Root container /\n.w3a-signup-menu-root {\n position: relative; / relative position to anchor back button /\n width: min(100dvw, 420px);\n max-width: 100dvw;\n min-width: 330px;\n min-height: 250px;\n color: var(--w3a-colors-textPrimary);\n background: var(--w3a-colors-colorBackground);\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 3rem;\n box-shadow: var(--w3a-shadows-lg);\n padding: var(--w3a-spacing-lg);\n padding-top: calc(var(--w3a-spacing-lg) + 4px);\n position: relative;\n display: flex;\n flex-direction: column;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1), min-height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n will-change: height, min-height;\n}\n\n/ Back button /\n.w3a-back-button {\n position: absolute;\n top: 1rem;\n left: 1rem;\n width: 48px;\n height: 48px;\n padding: 0;\n aspect-ratio: 1 / 1;\n display: grid;\n place-items: center;\n line-height: 0;\n border-radius: 50%;\n color: var(--w3a-colors-textPrimary);\n background: transparent;\n cursor: pointer;\n border: none;\n z-index: 3;\n transition: transform 120ms ease, background-color 160ms ease, opacity 220ms ease;\n opacity: 0;\n pointer-events: none;\n filter: blur(0.2px);\n}\n.w3a-back-button.is-visible {\n opacity: 1;\n pointer-events: auto;\n filter: none;\n}\n.w3a-back-button:hover {\n transform: scale(1.02);\n background: var(--w3a-colors-surface);\n}\n.w3a-back-button:active {\n transform: scale(0.96);\n}\n\n/ Header /\n.w3a-header {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n opacity: 1;\n height: auto;\n overflow: hidden;\n transition: opacity 240ms ease-out, height 260ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 260ms cubic-bezier(0.2, 0.8, 0.2, 1), margin 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n pointer-events: auto;\n position: relative;\n will-change: height, opacity;\n}\n\n/ Hide header when waiting or scan device is active /\n.w3a-signup-menu-root[data-waiting=\"true\"] .w3a-header,\n.w3a-signup-menu-root[data-scan-device=\"true\"] .w3a-header {\n opacity: 0;\n height: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n margin-top: 0px;\n margin-bottom: 0px;\n pointer-events: none;\n}\n\n/ Hide header when email recovery is active /\n.w3a-signup-menu-root[data-email-recovery=\"true\"] .w3a-header {\n opacity: 0;\n height: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n margin-top: 0px;\n margin-bottom: 0px;\n pointer-events: none;\n}\n\n/ Adjust content area when header is hidden /\n.w3a-signup-menu-root[data-waiting=\"true\"] .w3a-content-area,\n.w3a-signup-menu-root[data-scan-device=\"true\"] .w3a-content-area {\n flex: 1 1 auto;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n/ Adjust content area when email recovery is active /\n.w3a-signup-menu-root[data-email-recovery=\"true\"] .w3a-content-area {\n flex: 1 1 auto;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n/ Specific height adjustments for different states /\n.w3a-signup-menu-root[data-waiting=\"true\"] {\n min-height: 200px;\n}\n\n.w3a-signup-menu-root[data-scan-device=\"true\"] {\n min-height: 300px;\n}\n\n.w3a-signup-menu-root[data-email-recovery=\"true\"] {\n min-height: 320px;\n}\n\n.w3a-title {\n font-size: 24px;\n font-weight: 700;\n margin: 0.5rem 0.75rem;\n}\n\n.w3a-subhead {\n font-size: 1rem;\n font-weight: 500;\n line-height: 1;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 20%);\n margin: 0;\n margin-bottom: 1rem;\n margin-left: 0.75rem;\n}\n\n/ Content switcher container /\n.w3a-content-switcher {\n display: flex;\n flex-direction: column;\n overflow: hidden; / ensure smooth height animations without spillover /\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n will-change: height;\n}\n\n/ Content area container /\n.w3a-content-area {\n position: relative;\n / do not force-stretch; let content define intrinsic height /\n flex: 0 1 auto;\n display: flex;\n flex-direction: column;\n animation: fade-in 240ms ease-out;\n transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n/ Intrinsic sizer wrapper inside content area used for height measurement /\n.w3a-content-sizer {\n display: block;\n width: 100%;\n}\n\n/ Default content /\n.w3a-signin-menu {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0px;\n min-height: 250px;\n width: 100%;\n animation: content-enter 240ms ease-in-out;\n}\n\n@keyframes content-enter {\n from {\n opacity: 0;\n transform: scale(0.98) translateY(6px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/ Social providers row /\n.w3a-social-row {\n display: flex;\n gap: 8px;\n margin-bottom: var(--w3a-spacing-sm);\n}\n.w3a-social-btn {\n height: 48px;\n flex: 1 1 0;\n min-width: 0;\n display: grid;\n place-items: center;\n cursor: pointer;\n color: var(--w3a-colors-textSecondary, #64748b);\n overflow: hidden;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n border-radius: var(--w3a-border-radius-xl);\n / no shadow requested /\n box-shadow: none;\n}\n.w3a-social-btn svg {\n color: var(--w3a-colors-textSecondary, #64748b);\n}\n.w3a-social-btn:hover {\n background: var(--w3a-colors-surface2);\n box-shadow: var(--w3a-shadows-sm);\n}\n.w3a-social-btn:hover svg {\n color: var(--w3a-colors-textPrimary, #1e293b);\n}\n\n/ Passkey row /\n.w3a-passkey-row {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.w3a-input-pill {\n position: relative;\n display: flex;\n flex: 1;\n align-items: center;\n padding: 0rem 1rem;\n height: 54px;\n gap: 8px;\n border: none;\n background: var(--w3a-colors-surface);\n border-radius: 2rem 2rem 2rem 2rem;\n box-shadow: none;\n overflow-x: hidden;\n transition: border-radius 150ms ease-in-out;\n}\n.w3a-input-pill.is-enabled {\n border-radius: 2rem 0.25rem 0.25rem 2rem;\n transition: border-radius 150ms ease-in-out;\n}\n\n.w3a-input-wrap {\n position: relative;\n flex: 1;\n height: 32px;\n display: flex;\n align-items: center;\n min-width: 0; / allow input to shrink inside flex container without clipping /\n}\n.w3a-input {\n width: 100%;\n height: 32px;\n border: none;\n outline: none;\n background: transparent;\n color: var(--w3a-colors-textPrimary);\n font-size: 16px;\n padding: 0;\n min-width: 0; / prevent overflow clipping in flex layouts /\n}\n\n/ Absolute status message anchored to bottom-right of the input area /\n.w3a-input::placeholder {\n / Improve contrast for placeholders on dark /\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 35%);\n opacity: 0.95;\n}\n\n.w3a-postfix {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n color: var(--w3a-colors-textSecondary);\n font-size: 16px;\n white-space: nowrap;\n pointer-events: none;\n visibility: hidden; / React enables once measured /\n will-change: left;\n transition: left 32ms ease;\n}\n.w3a-postfix.is-existing {\n color: var(--w3a-colors-success);\n}\n/ On focus, keep postfix subtle for readability /\n.w3a-input:focus ~ .w3a-postfix {\n color: var(--w3a-colors-textMuted);\n}\n\n.w3a-arrow-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 0; / hidden footprint by default /\n padding: 0;\n background: transparent;\n border: 0;\n border-radius: 2rem 0.25rem 0.25rem 2rem;\n color: #fff;\n line-height: 0;\n cursor: pointer;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n margin-left: -1rem;\n z-index: 1;\n border: 6px solid var(--w3a-colors-colorBackground, #fff);\n height: 64px;\n transition: transform 150ms ease,\n background-color 150ms ease,\n border-radius 150ms ease,\n opacity 150ms ease,\n width 150ms ease-in-out;\n}\n.w3a-arrow-btn.is-enabled {\n width: 100px; / expand when enabled /\n / Prefer themed primary; fall back to legacy then a sane default /\n background: var(--w3a-colors-primary, #2563eb);\n border-radius: 2rem;\n / border-radius: 2rem; /\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n transition: transform 150ms ease,\n background-color 150ms ease,\n border-radius 150ms ease,\n opacity 150ms ease,\n width 150ms ease-in-out;\n}\n.w3a-arrow-btn.no-transition,\n.w3a-arrow-btn.no-transition.is-enabled {\n transition: none;\n}\n.w3a-arrow-btn .w3a-arrow-icon {\n color: #fff;\n}\n.w3a-arrow-btn.is-enabled:hover {\n / transform: scale(1.02); /\n background: var(--w3a-colors-primaryHover, #1d4ed8);\n}\n.w3a-arrow-btn.is-enabled:active {\n transform: scale(0.96);\n}\n.w3a-arrow-btn:disabled {\n width: 0;\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--w3a-colors-borderSecondary);\n transition: transform 150ms ease,\n background-color 150ms ease,\n border-radius 150ms ease,\n opacity 150ms ease,\n width 150ms ease-in-out;\n}\n.w3a-arrow-btn .w3a-arrow-label {\n margin-left: 8px;\n font-weight: 600;\n line-height: 1;\n}\n\n/ Animated arrow inside the continue button /\n.w3a-arrow-btn .stripe-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.w3a-arrow-btn .stripe-arrow > .HoverArrow {\n position: relative;\n margin-top: 0.1rem;\n margin-left: 8px;\n stroke-width: 2;\n fill: none;\n stroke: currentColor;\n}\n\n/ Horizontal line: fades in on hover of the button /\n.w3a-arrow-btn .stripe-arrow > .HoverArrow .HoverArrow__linePath {\n opacity: 0;\n transition: opacity 120ms cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n/ Chevron: nudges right and slightly scales on hover /\n.w3a-arrow-btn .stripe-arrow > .HoverArrow .HoverArrow__tipPath {\n transition: transform 120ms cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.w3a-arrow-btn.is-enabled:hover .stripe-arrow > .HoverArrow .HoverArrow__linePath,\n.w3a-arrow-btn.is-enabled:focus-visible .stripe-arrow > .HoverArrow .HoverArrow__linePath {\n opacity: 1;\n}\n\n.w3a-arrow-btn.is-enabled:hover .stripe-arrow > .HoverArrow .HoverArrow__tipPath,\n.w3a-arrow-btn.is-enabled:focus-visible .stripe-arrow > .HoverArrow .HoverArrow__tipPath {\n transform: translateX(3px);\n}\n\n/ Segmented control /\n.w3a-seg {\n position: relative;\n min-height: 54px;\n overflow: hidden;\n padding: 5px;\n border: none;\n background: var(--w3a-colors-surface2);\n border-radius: var(--w3a-border-radius-xl);\n}\n.w3a-seg-active {\n position: absolute;\n top: 5px;\n bottom: 5px;\n left: 0;\n border-radius: var(--w3a-border-radius-xl);\n transition:\n transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),\n width 220ms ease,\n opacity 150ms ease;\n will-change: transform, width;\n pointer-events: none;\n}\n.w3a-seg-grid {\n display: flex;\n gap: 4px;\n height: 100%;\n position: relative;\n z-index: 1;\n}\n.w3a-seg-btn {\n flex: 1 1 0;\n min-width: 0;\n min-height: 44px;\n border-radius: 12px;\n background: transparent;\n / Make inactive tabs more legible and clearly tappable /\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 45%);\n font-weight: 600;\n cursor: pointer;\n border: none;\n / Immediate taps on mobile; opt-out of double-tap zoom heuristics /\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n transition: color 200ms ease, transform 120ms ease;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n white-space: normal;\n padding: 0 14px;\n font-size: clamp(13px, 3.6vw, 15px);\n}\n.w3a-seg-btn:hover {\n transform: scale(1.02);\n}\n.w3a-seg-btn:active {\n transform: scale(0.98);\n}\n.w3a-seg-btn.is-active {\n color: var(--w3a-colors-textPrimary);\n}\n.w3a-seg-btn:focus-visible {\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--w3a-colors-focus), transparent 60%);\n}\n\n@media (max-width: 420px) {\n .w3a-signup-menu-root {\n padding: 1rem;\n padding-top: calc(1rem + 4px);\n border-radius: 2rem;\n max-width: calc(100dvw - 0.25rem);\n }\n\n @supports (width: 1dvw) {\n .w3a-signup-menu-root { max-width: calc(100dvw - 0.25rem); }\n }\n\n .w3a-title {\n font-size: 20px;\n }\n\n .w3a-subhead {\n font-size: 0.9rem;\n margin-bottom: 0.75rem;\n }\n\n .w3a-input-pill {\n height: 48px;\n }\n\n .w3a-arrow-btn {\n height: 60px;\n }\n\n .w3a-arrow-btn.is-enabled {\n width: 60px;\n }\n\n .w3a-seg {\n min-height: 48px;\n padding: 4px;\n }\n\n .w3a-seg-grid {\n gap: 3px;\n }\n\n .w3a-seg-active {\n top: 4px;\n bottom: 4px;\n }\n\n .w3a-seg-btn {\n min-height: 42px;\n padding: 0 12px;\n font-size: clamp(12px, 3.4vw, 14px);\n }\n\n .w3a-back-button {\n top: -0.5rem;\n left: -0.5rem;\n }\n}\n\n/ Waiting state /\n.w3a-waiting {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n background: transparent;\n text-align: center;\n min-height: 200px;\n / Quick fade with configurable delay for smoother handoff /\n animation: content-enter 200ms ease-out;\n animation-delay: var(--w3a-waiting-delay, 0ms);\n animation-fill-mode: both;\n}\n.w3a-waiting-text { font-size: 18px; font-weight: 600; }\n.w3a-spinner {\n width: 36px;\n height: 36px;\n border-radius: 999px;\n border: 3px solid rgba(255,255,255,0.15);\n border-top-color: var(--w3a-colors-primary);\n animation: w3a-spin 0.9s linear infinite;\n}\n\n/ Scan device content wrapper /\n.w3a-scan-device-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n background: transparent;\n text-align: center;\n min-height: 300px;\n width: 100%;\n overflow: hidden;\n animation: content-enter 240ms ease-out;\n}\n\n/ Ensure QR code content stays within bounds /\n.w3a-scan-device-content .qr-code-container,\n.w3a-scan-device-content .qr-modal-backdrop,\n.w3a-scan-device-content .qr-modal-content {\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n}\n\n.w3a-scan-device-content .qr-code-display {\n max-width: 280px;\n width: 100%;\n}\n\n/ Status message row /\n.w3a-status-row {\n position: absolute;\n font-size: 0.75rem;\n bottom: -10px;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n.w3a-status-message {\n font-size: 11px;\n font-weight: 500;\n}\n\n/ Section divider /\n.w3a-section-divider {\n display: flex;\n align-items: center;\n margin: var(--w3a-spacing-md) 0;\n position: relative;\n}\n\n.w3a-section-divider::before,\n.w3a-section-divider::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--w3a-colors-borderSecondary);\n}\n\n.w3a-section-divider-text {\n padding: 0 var(--w3a-spacing-sm);\n font-size: 12px;\n color: var(--w3a-colors-textSecondary);\n font-weight: 500;\n background: var(--w3a-colors-colorBackground);\n}\n\n/ Labels and helper text /\n.w3a-field-label {\n font-size: 12px;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 35%);\n margin: 6px 2px 6px;\n font-weight: 600;\n}\n.w3a-seg-help {\n font-size: 12px;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 25%);\n margin: 0;\n margin-left: 0.75rem;\n}\n.w3a-seg-help-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-top: 8px;\n}\n/ Tooltip for account existence status /\n.w3a-input-wrap .w3a-tooltip {\n position: absolute;\n right: 0;\n padding: 4px 8px;\n border-radius: 1rem;\n font-size: 0.7rem;\n background: var(--w3a-colors-surface2);\n color: var(--w3a-colors-textPrimary);\n opacity: 0;\n transform: translateX(50px) scale(0.9);\n pointer-events: none;\n transition: opacity 180ms ease, transform 200ms ease;\n z-index: 2;\n}\n.w3a-input-wrap .w3a-tooltip.is-visible {\n opacity: 0.8;\n transform: translateX(0px) scale(1);\n}\n.w3a-input-wrap .w3a-tooltip.is-error {\n color: var(--w3a-colors-error);\n background: var(--w3a-colors-colorBackground);\n / background: color-mix(in srgb, var(--w3a-colors-error), transparent 90%); /\n}\n.w3a-input-wrap .w3a-tooltip.is-success {\n color: var(--w3a-colors-blue400);\n background: var(--w3a-colors-colorBackground);\n / background: color-mix(in srgb, var(--w3a-colors-blue400), transparent 90%); /\n}\n\n@keyframes w3a-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/ Pop/bounce-in animation (kept for legacy classes) /\n@keyframes w3a-input-msg-pop {\n 0% { opacity: 0; transform: translateY(8px) scale(0.98); }\n 60% { opacity: 1; transform: translateY(-2px) scale(1.02); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .w3a-input-msg.is-error { animation: none; }\n}\n\n/ Button System /\n.w3a-scan-device-row {\n}\n\n.w3a-secondary-actions {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.w3a-link-device-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n overflow: hidden;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n height: 48px;\n width: 100%;\n max-width: 100%;\n background: var(--w3a-colors-surface) !important;\n border: 1px solid var(--w3a-colors-borderPrimary);\n border-radius: 2rem;\n cursor: pointer;\n color: var(--w3a-colors-textPrimary);\n font-family: var(--w3a-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n font-weight: 500;\n font-size: 0.875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/ Hover/focus elevated state (theme-reactive via CSS vars) /\n.w3a-link-device-btn:hover:not(:disabled),\n.w3a-link-device-btn:focus-visible {\n background: var(--w3a-colors-surface2) !important;\n}\n\n.w3a-link-device-btn-primary {\n background: var(--w3a-colors-buttonBackground, var(--w3a-colors-primary, #3b82f6)) !important;\n border-color: transparent;\n border-radius: 2rem;\n color: var(--w3a-colors-textButton, white);\n}\n\n.w3a-link-device-btn-primary:hover:not(:disabled),\n.w3a-link-device-btn-primary:focus-visible {\n background: var(--w3a-colors-buttonHoverBackground, var(--w3a-colors-primaryHover, #2563eb)) !important;\n color: var(--w3a-colors-textButton, white);\n}\n\n.w3a-link-device-btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/ Button-local spinner: match text size inside buttons /\n.w3a-link-device-btn .w3a-spinner {\n width: 1em;\n height: 1em;\n border-width: 2px;\n}\n\n.w3a-link-device-btn-primary .w3a-spinner {\n border-color: rgba(255, 255, 255, 0.35);\n border-top-color: #ffffff;\n}\n\n/ Email recovery slide */\n.w3a-email-recovery-content {\n width: 100%;\n padding-top: 1rem;\n}\n\n.w3a-email-recovery-slide {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 260px;\n animation: content-enter 240ms ease-out;\n}\n\n.w3a-email-recovery-title {\n font-size: 20px;\n font-weight: 700;\n margin: 0.5rem 0.5rem;\n display: flex;\n justify-content: center;\n}\n\n.w3a-email-recovery-help {\n font-size: 0.95rem;\n line-height: 1.2;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 20%);\n margin: 0 0.25rem;\n}\n\n.w3a-email-recovery-meta {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n padding: 0 0.25rem;\n font-size: 0.85rem;\n}\n\n.w3a-email-recovery-meta-label {\n opacity: 0.85;\n}\n\n.w3a-email-recovery-meta-value {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 0.85rem;\n opacity: 0.9;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 70%;\n text-align: right;\n}\n\n.w3a-email-recovery-input-pill {\n height: 54px;\n padding: 0 1rem;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n transition: box-shadow 160ms ease, border-color 160ms ease;\n}\n\n.w3a-email-recovery-input-pill:focus-within {\n border-color: var(--w3a-colors-primary, #3b82f6);\n}\n\n.w3a-email-recovery-actions {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 4px;\n}\n\n.w3a-email-recovery-summary {\n font-size: 0.875rem;\n line-height: 1.2;\n padding: 0 0.25rem;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 20%);\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.w3a-email-recovery-warning {\n color: color-mix(in srgb, var(--w3a-colors-error), var(--w3a-colors-textPrimary) 30%);\n}\n\n.w3a-email-recovery-link {\n font-size: 0.875rem;\n color: var(--w3a-colors-primary, #3b82f6);\n text-decoration: none;\n padding: 0 0.25rem;\n}\n\n.w3a-email-recovery-link:hover {\n text-decoration: underline;\n}\n\n.w3a-email-recovery-status {\n font-size: 0.875rem;\n padding: 0.75rem 0.875rem;\n border-radius: 1rem;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n color: var(--w3a-colors-textPrimary);\n margin-bottom: 0.5rem;\n}\n\n.w3a-email-recovery-status.is-error {\n border-color: color-mix(in srgb, var(--w3a-colors-error), var(--w3a-colors-borderPrimary) 60%);\n color: var(--w3a-colors-error);\n}\n\n.w3a-email-recovery-elapsed {\n margin-left: 6px;\n opacity: 0.75;\n}\n\n.w3a-email-recovery-saved-emails {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.w3a-email-recovery-email-chip {\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n color: var(--w3a-colors-textPrimary);\n padding: 6px 10px;\n border-radius: 999px;\n font-size: 0.85rem;\n cursor: pointer;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.w3a-email-recovery-email-chip:hover:not(:disabled) {\n background: var(--w3a-colors-surface2);\n}\n\n.w3a-email-recovery-email-chip:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.w3a-email-recovery-toast {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0.75rem 0.875rem;\n border-radius: 1rem;\n border: 1px solid var(--w3a-colors-borderPrimary);\n background: var(--w3a-colors-surface);\n font-size: 0.875rem;\n color: var(--w3a-colors-textPrimary);\n}\n\n.w3a-email-recovery-toast a {\n color: var(--w3a-colors-primary, #3b82f6);\n text-decoration: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n}\n\n.w3a-email-recovery-toast a:hover {\n text-decoration: underline;\n}\n\n.w3a-email-recovery-toast-close {\n margin-left: auto;\n width: 28px;\n height: 28px;\n border-radius: 999px;\n border: none;\n background: transparent;\n color: var(--w3a-colors-textSecondary);\n cursor: pointer;\n display: grid;\n place-items: center;\n}\n\n.w3a-email-recovery-toast-close:hover {\n background: var(--w3a-colors-surface2);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA"}
1	+ {"version":3,"file":"PasskeyAuthMenu-DKMiLeT9.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-message {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n}\n.w3a-waiting-text { font-size: 18px; font-weight: 600; }\n.w3a-waiting-subtext {\n font-size: 12px;\n font-weight: 500;\n line-height: 1.35;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 25%);\n}\n.w3a-waiting-sdk-events {\n font-size: 11px;\n font-weight: 500;\n line-height: 1.35;\n white-space: pre-wrap;\n color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 15%);\n}\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@keyframes w3a-ellipsis-dot {\n 0%, 80%, 100% { opacity: 0; }\n 40% { opacity: 1; }\n}\n\n.w3a-ellipsis {\n display: inline-block;\n}\n\n.w3a-ellipsis-dot {\n display: inline-block;\n opacity: 0;\n animation: w3a-ellipsis-dot 1.2s infinite;\n}\n\n.w3a-ellipsis-dot:nth-child(2) { animation-delay: 0.15s; }\n.w3a-ellipsis-dot:nth-child(3) { animation-delay: 0.3s; }\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 .w3a-ellipsis-dot { animation: none; opacity: 1; }\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-from-warning {\n margin-top: 1rem;\n font-weight: 600;\n}\n\n[data-w3a-theme=\"light\"] .w3a-email-recovery-from-warning {\n color: #d80;\n}\n\n[data-w3a-theme=\"dark\"] .w3a-email-recovery-from-warning {\n color: #ea5;\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;\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-surface2);\n color: var(--w3a-colors-textPrimary);\n margin-bottom: 4px;\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-static {\n cursor: default;\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;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;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;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;;AAEA;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;;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/adapters/tatchi.js CHANGED Viewed

@@ -11,6 +11,7 @@ function usePasskeyAuthMenuRuntime() {
 		targetAccountId: ctx.accountInputState?.targetAccountId ?? "",
 		setInputUsername: ctx.setInputUsername,
 		refreshLoginState: ctx.refreshLoginState,
+		sdkFlow: ctx.sdkFlow,
 		displayPostfix: ctx.accountInputState?.displayPostfix,
 		isUsingExistingAccount: ctx.accountInputState?.isUsingExistingAccount,
 		stopDevice2LinkingFlow: ctx.stopDevice2LinkingFlow

package/dist/esm/react/components/PasskeyAuthMenu/adapters/tatchi.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tatchi.js","names":[],"sources":["../../../../../../src/react/components/PasskeyAuthMenu/adapters/tatchi.ts"],"sourcesContent":["import { useTatchi } from '../../../context';\nimport type { TatchiPasskey } from '@/core/TatchiPasskey';\n\nexport interface PasskeyAuthMenuRuntime {\n tatchiPasskey: TatchiPasskey;\n accountExists: boolean;\n inputUsername: string;\n targetAccountId: string;\n setInputUsername: (v: string) => void;\n refreshLoginState: (nearAccountId?: string) => Promise<void>;\n displayPostfix?: string;\n isUsingExistingAccount?: boolean;\n stopDevice2LinkingFlow?: () => Promise<void>;\n}\n\nexport function usePasskeyAuthMenuRuntime(): PasskeyAuthMenuRuntime {\n const ctx = useTatchi();\n const accountExists = !!ctx.accountInputState?.accountExists;\n return {\n tatchiPasskey: ctx.tatchi,\n accountExists,\n inputUsername: ctx.accountInputState?.inputUsername ?? '',\n targetAccountId: ctx.accountInputState?.targetAccountId ?? '',\n setInputUsername: ctx.setInputUsername,\n refreshLoginState: ctx.refreshLoginState,\n displayPostfix: ctx.accountInputState?.displayPostfix,\n isUsingExistingAccount: ctx.accountInputState?.isUsingExistingAccount,\n stopDevice2LinkingFlow: ctx.stopDevice2LinkingFlow,\n };\n}\n\nexport default usePasskeyAuthMenuRuntime;\n"],"mappings":";;;~~AAeA~~,SAAgB,4BAAoD;CAClE,MAAM,MAAM;CACZ,MAAM,gBAAgB,CAAC,CAAC,IAAI,mBAAmB;AAC/C,QAAO;EACL,eAAe,IAAI;EACnB;EACA,eAAe,IAAI,mBAAmB,iBAAiB;EACvD,iBAAiB,IAAI,mBAAmB,mBAAmB;EAC3D,kBAAkB,IAAI;EACtB,mBAAmB,IAAI;EACvB,gBAAgB,IAAI,mBAAmB;EACvC,wBAAwB,IAAI,mBAAmB;EAC/C,wBAAwB,IAAI"}
1	+ {"version":3,"file":"tatchi.js","names":[],"sources":["../../../../../../src/react/components/PasskeyAuthMenu/adapters/tatchi.ts"],"sourcesContent":["import { useTatchi } from '../../../context';\nimport type { TatchiPasskey } from '@/core/TatchiPasskey';\nimport { type SDKFlowRuntime } from '../../../types';\n\nexport interface PasskeyAuthMenuRuntime {\n tatchiPasskey: TatchiPasskey;\n accountExists: boolean;\n inputUsername: string;\n targetAccountId: string;\n setInputUsername: (v: string) => void;\n refreshLoginState: (nearAccountId?: string) => Promise<void>;\n sdkFlow: SDKFlowRuntime;\n displayPostfix?: string;\n isUsingExistingAccount?: boolean;\n stopDevice2LinkingFlow?: () => Promise<void>;\n}\n\nexport function usePasskeyAuthMenuRuntime(): PasskeyAuthMenuRuntime {\n const ctx = useTatchi();\n const accountExists = !!ctx.accountInputState?.accountExists;\n return {\n tatchiPasskey: ctx.tatchi,\n accountExists,\n inputUsername: ctx.accountInputState?.inputUsername ?? '',\n targetAccountId: ctx.accountInputState?.targetAccountId ?? '',\n setInputUsername: ctx.setInputUsername,\n refreshLoginState: ctx.refreshLoginState,\n sdkFlow: ctx.sdkFlow,\n displayPostfix: ctx.accountInputState?.displayPostfix,\n isUsingExistingAccount: ctx.accountInputState?.isUsingExistingAccount,\n stopDevice2LinkingFlow: ctx.stopDevice2LinkingFlow,\n };\n}\n\nexport default usePasskeyAuthMenuRuntime;\n"],"mappings":";;;AAiBA,SAAgB,4BAAoD;CAClE,MAAM,MAAM;CACZ,MAAM,gBAAgB,CAAC,CAAC,IAAI,mBAAmB;AAC/C,QAAO;EACL,eAAe,IAAI;EACnB;EACA,eAAe,IAAI,mBAAmB,iBAAiB;EACvD,iBAAiB,IAAI,mBAAmB,mBAAmB;EAC3D,kBAAkB,IAAI;EACtB,mBAAmB,IAAI;EACvB,SAAS,IAAI;EACb,gBAAgB,IAAI,mBAAmB;EACvC,wBAAwB,IAAI,mBAAmB;EAC/C,wBAAwB,IAAI"}

package/dist/esm/react/components/PasskeyAuthMenu/client.js CHANGED Viewed

@@ -9,18 +9,23 @@ import { EmailRecoverySlide } from "./ui/EmailRecoverySlide.js";
 import QRCodeIcon_default from "../QRCodeIcon.js";
 import { usePasskeyAuthMenuRuntime } from "./adapters/tatchi.js";
 import { usePasskeyAuthMenuController } from "./controller/usePasskeyAuthMenuController.js";
+import { useSDKEvents } from "./controller/useSDKEvents.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/PasskeyAuthMenu/client.tsx
 const LazyShowQRCode = React.lazy(() => import("../ShowQRCode2.js").then((m) => ({ default: m.ShowQRCode })));
 const preloadShowQRCode = () => import("../ShowQRCode2.js").then(() => void 0);
-const PasskeyAuthMenuClient = ({ onLogin, onRegister, onRecoverAccount, linkDeviceOptions, emailRecoveryOptions, header, defaultMode, style, className, socialLogin, loadingScreenDelayMs, headings }) => {
+const PasskeyAuthMenuClient = ({ onLogin, onRegister, onRecoverAccount, linkDeviceOptions, emailRecoveryOptions, header, defaultMode, style, className, socialLogin, loadingScreenDelayMs, headings, showSDKEvents = false }) => {
 	const runtime = usePasskeyAuthMenuRuntime();
+	const { withSdkEventsHandler } = useSDKEvents({ sdkFlow: runtime.sdkFlow });
+	const onLoginWithSDKEvents = React.useMemo(() => withSdkEventsHandler("login", onLogin, 6e4), [onLogin, withSdkEventsHandler]);
+	const onRegisterWithSDKEvents = React.useMemo(() => withSdkEventsHandler("register", onRegister, 9e4), [onRegister, withSdkEventsHandler]);
+	const onRecoverWithSDKEvents = React.useMemo(() => withSdkEventsHandler("recover", onRecoverAccount, 12e4), [onRecoverAccount, withSdkEventsHandler]);
 	const controller = usePasskeyAuthMenuController({
-		onLogin,
-		onRegister,
-		onRecoverAccount,
+		onLogin: onLoginWithSDKEvents,
+		onRegister: onRegisterWithSDKEvents,
+		onRecoverAccount: onRecoverWithSDKEvents,
 		defaultMode,
 		headings,
 		linkDeviceOptions
@@ -29,19 +34,36 @@ const PasskeyAuthMenuClient = ({ onLogin, onRegister, onRecoverAccount, linkDevi
 		preloadShowQRCode().catch(() => {});
 	}, []);
 	const segActiveBg = "var(--w3a-passkey-auth-menu2-seg-active-bg)";
+	const rootStyle = React.useMemo(() => ({
+		...style,
+		...loadingScreenDelayMs != null ? { "--w3a-waiting-delay": `${loadingScreenDelayMs}ms` } : null
+	}), [loadingScreenDelayMs, style]);
+	const waitingSDKEventsText = React.useMemo(() => {
+		if (!showSDKEvents) return "";
+		if (controller.mode !== AuthMenuMode.Register && controller.mode !== AuthMenuMode.Login && controller.mode !== AuthMenuMode.Recover) return "";
+		const text = runtime.sdkFlow.eventsText?.trim() ?? "";
+		if (text.length > 0) {
+			const lastLine = text.split("\n").filter(Boolean).slice(-1)[0] ?? "";
+			return lastLine;
+		}
+		return controller.waiting ? "Awaiting SDK events…" : "";
+	}, [
+		controller.mode,
+		controller.waiting,
+		runtime.sdkFlow.eventsText,
+		showSDKEvents
+	]);
 	return /* @__PURE__ */ jsx("div", {
 		className: `w3a-signup-menu-root${className ? ` ${className}` : ""}`,
 		"data-mode": controller.mode,
 		"data-waiting": controller.waiting,
 		"data-scan-device": controller.showScanDevice,
 		"data-email-recovery": controller.showEmailRecovery,
-		style: {
-			...style,
-			["--w3a-waiting-delay"]: loadingScreenDelayMs != null ? `${loadingScreenDelayMs}ms` : void 0
-		},
+		style: rootStyle,
 		children: /* @__PURE__ */ jsxs(ContentSwitcher, {
 			waiting: controller.waiting,
 			waitingText: controller.mode === AuthMenuMode.Register ? "Registering passkey…" : "Waiting for Passkey…",
+			waitingSDKEventsText,
 			backButton: /* @__PURE__ */ jsx("button", {
 				"aria-label": "Back",
 				onClick: () => {

package/dist/esm/react/components/PasskeyAuthMenu/client.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"client.js","names":["PasskeyAuthMenuClient: React.FC<PasskeyAuthMenuProps>","QRCodeIcon"],"sources":["../../../../../src/react/components/PasskeyAuthMenu/client.tsx"],"sourcesContent":["import React from 'react';\nimport { ArrowLeftIcon, MailIcon } from './ui/icons';\nimport { SegmentedControl } from './ui/SegmentedControl';\nimport { PasskeyInput } from './ui/PasskeyInput';\nimport { ContentSwitcher } from './ui/ContentSwitcher';\nimport { EmailRecoverySlide } from './ui/EmailRecoverySlide';\nimport QRCodeIcon from '../QRCodeIcon';\nimport { AuthMenuMode, type PasskeyAuthMenuProps } from './types';\nimport './PasskeyAuthMenu.css';\nimport { usePasskeyAuthMenuRuntime } from './adapters/tatchi';\nimport { usePasskeyAuthMenuController } from './controller/usePasskeyAuthMenuController';\n\nconst LazyShowQRCode = React.lazy(() =>\n import('../ShowQRCode').then((m) => ({ default: m.ShowQRCode })),\n);\n\nconst preloadShowQRCode = () => import('../ShowQRCode').then(() => undefined);\n\nexport const PasskeyAuthMenuClient: React.FC<PasskeyAuthMenuProps> = ({\n onLogin,\n onRegister,\n onRecoverAccount,\n linkDeviceOptions,\n emailRecoveryOptions,\n header,\n defaultMode,\n style,\n className,\n socialLogin,\n loadingScreenDelayMs,\n headings,\n}) => {\n const runtime = usePasskeyAuthMenuRuntime();\n const controller = usePasskeyAuthMenuController(\n {\n onLogin,\n onRegister,\n onRecoverAccount,\n defaultMode,\n headings,\n linkDeviceOptions,\n },\n runtime,\n );\n\n const prefetchQRCode = React.useCallback(() => {\n void preloadShowQRCode().catch(() => {});\n }, []);\n\n const segActiveBg = 'var(--w3a-passkey-auth-menu2-seg-active-bg)';\n\n return (\n <div\n className={`w3a-signup-menu-root${className ? ` ${className}` : ''}`}\n data-mode={controller.mode}\n data-waiting={controller.waiting}\n data-scan-device={controller.showScanDevice}\n data-email-recovery={controller.showEmailRecovery}\n style={{\n ...style,\n ['--w3a-waiting-delay' as any]:\n loadingScreenDelayMs != null ? `${loadingScreenDelayMs}ms` : undefined,\n }}\n >\n <ContentSwitcher\n waiting={controller.waiting}\n waitingText={\n controller.mode === AuthMenuMode.Register\n ? 'Registering passkey…'\n : 'Waiting for Passkey…'\n }\n backButton={\n <button\n aria-label=\"Back\"\n onClick={() => {\n if (controller.showEmailRecovery) {\n controller.closeEmailRecovery();\n return;\n }\n controller.onResetToStart();\n }}\n className={`w3a-back-button${controller.waiting \|\| controller.showScanDevice \|\| controller.showEmailRecovery ? ' is-visible' : ''}`}\n >\n <ArrowLeftIcon size={18} strokeWidth={2.25} style={{ display: 'block' }} />\n </button>\n }\n showScanDevice={controller.showScanDevice}\n showQRCodeElement={\n <React.Suspense fallback={<div className=\"qr-loading\"><p>Loading QR…</p></div>}>\n <LazyShowQRCode\n isOpen={controller.linkDevice.isOpen}\n onClose={controller.linkDevice.onClose}\n onEvent={controller.linkDevice.onEvent}\n onError={controller.linkDevice.onError}\n />\n </React.Suspense>\n }\n showEmailRecovery={controller.showEmailRecovery}\n emailRecoveryElement={\n <EmailRecoverySlide\n tatchiPasskey={runtime.tatchiPasskey}\n accountId={runtime.targetAccountId}\n refreshLoginState={runtime.refreshLoginState}\n emailRecoveryOptions={emailRecoveryOptions}\n />\n }\n >\n <div className=\"w3a-header\">\n {header ?? (\n <div>\n <div className=\"w3a-title\">{controller.title.title}</div>\n <div className=\"w3a-subhead\">{controller.title.subtitle}</div>\n </div>\n )}\n </div>\n\n <PasskeyInput\n value={controller.currentValue}\n onChange={controller.onInputChange}\n placeholder={\n controller.mode === AuthMenuMode.Register\n ? 'Pick a username'\n : controller.mode === AuthMenuMode.Recover\n ? 'Leave blank to discover accounts'\n : 'Enter your username'\n }\n postfixText={controller.postfixText}\n isUsingExistingAccount={controller.isUsingExistingAccount}\n canProceed={controller.canShowContinue}\n onProceed={controller.onProceed}\n mode={controller.mode}\n secure={controller.secure}\n waiting={controller.waiting}\n />\n\n <SegmentedControl\n items={[\n { value: AuthMenuMode.Register, label: 'Register', className: 'register' },\n { value: AuthMenuMode.Login, label: 'Login', className: 'login' },\n { value: AuthMenuMode.Recover, label: 'Recover', className: 'recover' },\n ]}\n value={controller.mode}\n onValueChange={(v) => controller.onSegmentChange(v as AuthMenuMode)}\n activeBg={segActiveBg}\n />\n\n <div className=\"w3a-seg-help-row\">\n <div className=\"w3a-seg-help\" aria-live=\"polite\">\n {controller.mode === AuthMenuMode.Login && 'Sign in with your passkey'}\n {controller.mode === AuthMenuMode.Register && 'Create a new account'}\n {controller.mode === AuthMenuMode.Recover && 'Recover account (iCloud/Chrome sync)'}\n </div>\n </div>\n\n <div className=\"w3a-scan-device-row\">\n <div className=\"w3a-section-divider\">\n <span className=\"w3a-section-divider-text\">Already have an account?</span>\n </div>\n <div className=\"w3a-secondary-actions\">\n <button\n onClick={controller.openScanDevice}\n onPointerEnter={prefetchQRCode}\n onFocus={prefetchQRCode}\n onTouchStart={prefetchQRCode}\n className=\"w3a-link-device-btn\"\n >\n <QRCodeIcon width={18} height={18} strokeWidth={2} />\n Scan and Link Device\n </button>\n <button\n onClick={controller.openEmailRecovery}\n className=\"w3a-link-device-btn\"\n >\n <MailIcon size={18} strokeWidth={2} style={{ display: 'block' }} />\n Recover Account with Email\n </button>\n </div>\n </div>\n </ContentSwitcher>\n </div>\n );\n};\n\nexport default PasskeyAuthMenuClient;\n"],"mappings":"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"}
1	+ {"version":3,"file":"client.js","names":["PasskeyAuthMenuClient: React.FC<PasskeyAuthMenuProps>","QRCodeIcon"],"sources":["../../../../../src/react/components/PasskeyAuthMenu/client.tsx"],"sourcesContent":["import React from 'react';\nimport { ArrowLeftIcon, MailIcon } from './ui/icons';\nimport { SegmentedControl } from './ui/SegmentedControl';\nimport { PasskeyInput } from './ui/PasskeyInput';\nimport { ContentSwitcher } from './ui/ContentSwitcher';\nimport { EmailRecoverySlide } from './ui/EmailRecoverySlide';\nimport QRCodeIcon from '../QRCodeIcon';\nimport { AuthMenuMode, type PasskeyAuthMenuProps } from './types';\nimport './PasskeyAuthMenu.css';\nimport { usePasskeyAuthMenuRuntime } from './adapters/tatchi';\nimport { usePasskeyAuthMenuController } from './controller/usePasskeyAuthMenuController';\nimport { useSDKEvents } from './controller/useSDKEvents';\n\ntype CSSVarStyle = React.CSSProperties & {\n [key: `--${string}`]: string \| number \| undefined;\n};\n\nconst LazyShowQRCode = React.lazy(() =>\n import('../ShowQRCode').then((m) => ({ default: m.ShowQRCode })),\n);\n\nconst preloadShowQRCode = () => import('../ShowQRCode').then(() => undefined);\n\nexport const PasskeyAuthMenuClient: React.FC<PasskeyAuthMenuProps> = ({\n onLogin,\n onRegister,\n onRecoverAccount,\n linkDeviceOptions,\n emailRecoveryOptions,\n header,\n defaultMode,\n style,\n className,\n socialLogin,\n loadingScreenDelayMs,\n headings,\n showSDKEvents = false,\n}) => {\n const runtime = usePasskeyAuthMenuRuntime();\n const { withSdkEventsHandler } = useSDKEvents({ sdkFlow: runtime.sdkFlow });\n\n const onLoginWithSDKEvents = React.useMemo(\n () => withSdkEventsHandler('login', onLogin, 60_000),\n [onLogin, withSdkEventsHandler],\n );\n const onRegisterWithSDKEvents = React.useMemo(\n () => withSdkEventsHandler('register', onRegister, 90_000),\n [onRegister, withSdkEventsHandler],\n );\n const onRecoverWithSDKEvents = React.useMemo(\n () => withSdkEventsHandler('recover', onRecoverAccount, 120_000),\n [onRecoverAccount, withSdkEventsHandler],\n );\n\n const controller = usePasskeyAuthMenuController(\n {\n onLogin: onLoginWithSDKEvents,\n onRegister: onRegisterWithSDKEvents,\n onRecoverAccount: onRecoverWithSDKEvents,\n defaultMode,\n headings,\n linkDeviceOptions,\n },\n runtime,\n );\n\n const prefetchQRCode = React.useCallback(() => {\n void preloadShowQRCode().catch(() => {});\n }, []);\n\n const segActiveBg = 'var(--w3a-passkey-auth-menu2-seg-active-bg)';\n\n const rootStyle = React.useMemo<CSSVarStyle>(\n () => ({\n ...style,\n ...(loadingScreenDelayMs != null ? { '--w3a-waiting-delay': `${loadingScreenDelayMs}ms` } : null),\n }),\n [loadingScreenDelayMs, style],\n );\n\n const waitingSDKEventsText = React.useMemo(() => {\n if (!showSDKEvents) return '';\n if (\n controller.mode !== AuthMenuMode.Register &&\n controller.mode !== AuthMenuMode.Login &&\n controller.mode !== AuthMenuMode.Recover\n ) {\n return '';\n }\n const text = runtime.sdkFlow.eventsText?.trim() ?? '';\n if (text.length > 0) {\n const lastLine = text.split('\\n').filter(Boolean).slice(-1)[0] ?? '';\n return lastLine;\n }\n return controller.waiting ? 'Awaiting SDK events…' : '';\n }, [controller.mode, controller.waiting, runtime.sdkFlow.eventsText, showSDKEvents]);\n\n return (\n <div\n className={`w3a-signup-menu-root${className ? ` ${className}` : ''}`}\n data-mode={controller.mode}\n data-waiting={controller.waiting}\n data-scan-device={controller.showScanDevice}\n data-email-recovery={controller.showEmailRecovery}\n style={rootStyle}\n >\n <ContentSwitcher\n waiting={controller.waiting}\n waitingText={\n controller.mode === AuthMenuMode.Register\n ? 'Registering passkey…'\n : 'Waiting for Passkey…'\n }\n waitingSDKEventsText={waitingSDKEventsText}\n backButton={\n <button\n aria-label=\"Back\"\n onClick={() => {\n if (controller.showEmailRecovery) {\n controller.closeEmailRecovery();\n return;\n }\n controller.onResetToStart();\n }}\n className={`w3a-back-button${controller.waiting \|\| controller.showScanDevice \|\| controller.showEmailRecovery ? ' is-visible' : ''}`}\n >\n <ArrowLeftIcon size={18} strokeWidth={2.25} style={{ display: 'block' }} />\n </button>\n }\n showScanDevice={controller.showScanDevice}\n showQRCodeElement={\n <React.Suspense fallback={<div className=\"qr-loading\"><p>Loading QR…</p></div>}>\n <LazyShowQRCode\n isOpen={controller.linkDevice.isOpen}\n onClose={controller.linkDevice.onClose}\n onEvent={controller.linkDevice.onEvent}\n onError={controller.linkDevice.onError}\n />\n </React.Suspense>\n }\n showEmailRecovery={controller.showEmailRecovery}\n emailRecoveryElement={\n <EmailRecoverySlide\n tatchiPasskey={runtime.tatchiPasskey}\n accountId={runtime.targetAccountId}\n refreshLoginState={runtime.refreshLoginState}\n emailRecoveryOptions={emailRecoveryOptions}\n />\n }\n >\n <div className=\"w3a-header\">\n {header ?? (\n <div>\n <div className=\"w3a-title\">{controller.title.title}</div>\n <div className=\"w3a-subhead\">{controller.title.subtitle}</div>\n </div>\n )}\n </div>\n\n <PasskeyInput\n value={controller.currentValue}\n onChange={controller.onInputChange}\n placeholder={\n controller.mode === AuthMenuMode.Register\n ? 'Pick a username'\n : controller.mode === AuthMenuMode.Recover\n ? 'Leave blank to discover accounts'\n : 'Enter your username'\n }\n postfixText={controller.postfixText}\n isUsingExistingAccount={controller.isUsingExistingAccount}\n canProceed={controller.canShowContinue}\n onProceed={controller.onProceed}\n mode={controller.mode}\n secure={controller.secure}\n waiting={controller.waiting}\n />\n\n <SegmentedControl\n items={[\n { value: AuthMenuMode.Register, label: 'Register', className: 'register' },\n { value: AuthMenuMode.Login, label: 'Login', className: 'login' },\n { value: AuthMenuMode.Recover, label: 'Recover', className: 'recover' },\n ]}\n value={controller.mode}\n onValueChange={(v) => controller.onSegmentChange(v as AuthMenuMode)}\n activeBg={segActiveBg}\n />\n\n <div className=\"w3a-seg-help-row\">\n <div className=\"w3a-seg-help\" aria-live=\"polite\">\n {controller.mode === AuthMenuMode.Login && 'Sign in with your passkey'}\n {controller.mode === AuthMenuMode.Register && 'Create a new account'}\n {controller.mode === AuthMenuMode.Recover && 'Recover account (iCloud/Chrome sync)'}\n </div>\n </div>\n\n <div className=\"w3a-scan-device-row\">\n <div className=\"w3a-section-divider\">\n <span className=\"w3a-section-divider-text\">Already have an account?</span>\n </div>\n <div className=\"w3a-secondary-actions\">\n <button\n onClick={controller.openScanDevice}\n onPointerEnter={prefetchQRCode}\n onFocus={prefetchQRCode}\n onTouchStart={prefetchQRCode}\n className=\"w3a-link-device-btn\"\n >\n <QRCodeIcon width={18} height={18} strokeWidth={2} />\n Scan and Link Device\n </button>\n <button\n onClick={controller.openEmailRecovery}\n className=\"w3a-link-device-btn\"\n >\n <MailIcon size={18} strokeWidth={2} style={{ display: 'block' }} />\n Recover Account with Email\n </button>\n </div>\n </div>\n </ContentSwitcher>\n </div>\n );\n};\n\nexport default PasskeyAuthMenuClient;\n"],"mappings":"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"}

package/dist/esm/react/components/PasskeyAuthMenu/controller/useSDKEvents.js ADDED Viewed

@@ -0,0 +1,20 @@
+import React from "react";
+//#region src/react/components/PasskeyAuthMenu/controller/useSDKEvents.ts
+function useSDKEvents(args) {
+	const { sdkFlow } = args;
+	const withSdkEventsHandler = React.useCallback((kind, handler, timeoutMs) => {
+		if (!handler) return void 0;
+		return async () => {
+			const seqBefore = sdkFlow.seq;
+			const res = handler();
+			if (res && typeof res.then === "function") await res;
+			await sdkFlow.awaitNextCompletion(kind, seqBefore, 500, timeoutMs);
+		};
+	}, [sdkFlow]);
+	return { withSdkEventsHandler };
+}
+//#endregion
+export { useSDKEvents };
+//# sourceMappingURL=useSDKEvents.js.map

package/dist/esm/react/components/PasskeyAuthMenu/controller/useSDKEvents.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSDKEvents.js","names":[],"sources":["../../../../../../src/react/components/PasskeyAuthMenu/controller/useSDKEvents.ts"],"sourcesContent":["import React from 'react';\nimport type { SDKFlowRuntime } from '../../../types';\n\ntype FlowKind = Exclude<SDKFlowRuntime['kind'], null>;\ntype Handler = (() => void | Promise<unknown>) | undefined;\n\nexport function useSDKEvents(args: {\n sdkFlow: SDKFlowRuntime;\n}): {\n withSdkEventsHandler: (kind: FlowKind, handler: Handler, timeoutMs: number) => (() => Promise<void>) | undefined;\n} {\n const { sdkFlow } = args;\n\n const withSdkEventsHandler = React.useCallback(\n (kind: FlowKind, handler: Handler, timeoutMs: number) => {\n if (!handler) return undefined;\n return async () => {\n const seqBefore = sdkFlow.seq;\n const res = handler();\n if (res && typeof res.then === 'function') {\n await res;\n }\n await sdkFlow.awaitNextCompletion(kind, seqBefore, 500, timeoutMs);\n };\n },\n [sdkFlow],\n );\n\n return { withSdkEventsHandler };\n}\n\nexport default useSDKEvents;\n"],"mappings":";;;AAMA,SAAgB,aAAa,MAI3B;CACA,MAAM,EAAE,YAAY;CAEpB,MAAM,uBAAuB,MAAM,aAChC,MAAgB,SAAkB,cAAsB;AACvD,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,YAAY;GACjB,MAAM,YAAY,QAAQ;GAC1B,MAAM,MAAM;AACZ,OAAI,OAAO,OAAO,IAAI,SAAS,WAC7B,OAAM;AAER,SAAM,QAAQ,oBAAoB,MAAM,WAAW,KAAK;;IAG5D,CAAC;AAGH,QAAO,EAAE"}

package/dist/esm/react/components/PasskeyAuthMenu/ui/ContentSwitcher.js CHANGED Viewed

@@ -2,7 +2,7 @@ import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/PasskeyAuthMenu/ui/ContentSwitcher.tsx
-const ContentSwitcher = ({ waiting, waitingText = "Waiting for Passkey…", showScanDevice = false, showQRCodeElement, showEmailRecovery = false, emailRecoveryElement, children, backButton }) => {
+const ContentSwitcher = ({ waiting, waitingText = "Waiting for Passkey…", waitingSubtext = "", waitingSDKEventsText = "", showScanDevice = false, showQRCodeElement, showEmailRecovery = false, emailRecoveryElement, children, backButton }) => {
 	const switcherRef = React.useRef(null);
 	const contentAreaRef = React.useRef(null);
 	const sizerRef = React.useRef(null);
@@ -61,9 +61,22 @@ const ContentSwitcher = ({ waiting, waitingText = "Waiting for Passkey…", show
 				children: [
 					waiting && /* @__PURE__ */ jsxs("div", {
 						className: "w3a-waiting",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "w3a-waiting-text",
-							children: waitingText
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "w3a-waiting-message",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									className: "w3a-waiting-text",
+									children: waitingText
+								}),
+								waitingSubtext.trim().length > 0 && /* @__PURE__ */ jsx("div", {
+									className: "w3a-waiting-subtext",
+									children: waitingSubtext
+								}),
+								waitingSDKEventsText.trim().length > 0 && /* @__PURE__ */ jsx("div", {
+									className: "w3a-waiting-sdk-events",
+									children: waitingSDKEventsText
+								})
+							]
 						}), /* @__PURE__ */ jsx("div", {
 							"aria-label": "Loading",
 							className: "w3a-spinner"

package/dist/esm/react/components/PasskeyAuthMenu/ui/ContentSwitcher.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentSwitcher.js","names":["ContentSwitcher: React.FC<ContentSwitcherProps>"~~,"fonts: any"~~],"sources":["../../../../../../src/react/components/PasskeyAuthMenu/ui/ContentSwitcher.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface ContentSwitcherProps {\n waiting: boolean;\n waitingText?: string;\n showScanDevice?: boolean;\n showQRCodeElement?: React.ReactNode;\n showEmailRecovery?: boolean;\n emailRecoveryElement?: React.ReactNode;\n children: React.ReactNode;\n backButton?: React.ReactNode;\n}\n\nexport const ContentSwitcher: React.FC<ContentSwitcherProps> = ({\n waiting,\n waitingText = 'Waiting for Passkey…',\n showScanDevice = false,\n showQRCodeElement,\n showEmailRecovery = false,\n emailRecoveryElement,\n children,\n backButton,\n}) => {\n // Animate height of the switcher as content changes\n const switcherRef = React.useRef<HTMLDivElement \| null>(null);\n const contentAreaRef = React.useRef<HTMLDivElement \| null>(null);\n const sizerRef = React.useRef<HTMLDivElement \| null>(null);\n\n // Track whether user prefers reduced motion\n const prefersReducedMotion = React.useMemo(() => {\n if (typeof window === 'undefined' \|\| !('matchMedia' in window)) return false;\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n }, []);\n\n // Helper to read current content height and apply to the switcher\n const syncHeight = React.useCallback(() => {\n const wrap = switcherRef.current;\n const sizer = sizerRef.current;\n if (!wrap \|\| !sizer) return;\n // Use scrollHeight to capture intrinsic content size regardless of flex context\n const next = sizer.scrollHeight;\n if (prefersReducedMotion) {\n // Apply without animation\n wrap.style.transition = 'none';\n wrap.style.height = `${next}px`;\n // Force reflow then restore transition so future changes can animate\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n wrap.offsetHeight;\n wrap.style.transition = '';\n return;\n }\n // Normal path: let CSS transition handle the interpolation\n wrap.style.height = `${next}px`;\n }, [prefersReducedMotion]);\n\n // Observe size changes of the content area\n React.useLayoutEffect(() => {\n const area = contentAreaRef.current;\n const sizer = sizerRef.current;\n if (!area \|\| !sizer) return;\n\n // Initial sync after mount/update\n syncHeight();\n\n // ResizeObserver to capture dynamic content changes (e.g., QR render)\n const ro = new ResizeObserver(() => {\n // Use rAF to coalesce layout reads/writes with rendering\n requestAnimationFrame(syncHeight);\n });\n ro.observe(sizer);\n\n // Re-sync after fonts load (text metrics can change)\n const fonts: ~~any~~ = (document ~~as any)~~?.fonts;\n if (fonts?.ready) {\n fonts.ready.then(() => syncHeight()).catch(() => {});\n }\n\n // Also re-sync on window resize\n const onResize = () => syncHeight();\n window.addEventListener('resize', onResize);\n\n return () => {\n ro.disconnect();\n window.removeEventListener('resize', onResize);\n };\n }, [syncHeight, waiting, showScanDevice, showEmailRecovery, children, emailRecoveryElement]);\n\n return (\n <div ref={switcherRef} className=\"w3a-content-switcher\">\n {/* Back button - absolutely positioned overlay /}\n {backButton}\n\n {/ Content areas - conditionally rendered with smooth transitions */}\n <div ref={contentAreaRef} className=\"w3a-content-area\">\n <div ref={sizerRef} className=\"w3a-content-sizer\">\n {waiting && (\n <div className=\"w3a-waiting\">\n <div className=\"w3a-waiting-text\">{waitingText}</div>\n <div aria-label=\"Loading\" className=\"w3a-spinner\" />\n </div>\n )}\n\n {showScanDevice && <div className=\"w3a-scan-device-content\">{showQRCodeElement}</div>}\n\n {showEmailRecovery && <div className=\"w3a-email-recovery-content\">{emailRecoveryElement}</div>}\n\n {!waiting && !showScanDevice && !showEmailRecovery && (\n <div className=\"w3a-signin-menu\">{children}</div>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default ContentSwitcher;\n"],"mappings":";;;;~~AAaA~~,MAAaA,mBAAmD,EAC9D,SACA,cAAc,wBACd,iBAAiB,OACjB,mBACA,oBAAoB,OACpB,sBACA,UACA,iBACI;CAEJ,MAAM,cAAc,MAAM,OAA8B;CACxD,MAAM,iBAAiB,MAAM,OAA8B;CAC3D,MAAM,WAAW,MAAM,OAA8B;CAGrD,MAAM,uBAAuB,MAAM,cAAc;AAC/C,MAAI,OAAO,WAAW,eAAe,EAAE,gBAAgB,QAAS,QAAO;AACvE,SAAO,OAAO,WAAW,oCAAoC;IAC5D;CAGH,MAAM,aAAa,MAAM,kBAAkB;EACzC,MAAM,OAAO,YAAY;EACzB,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,QAAQ,CAAC,MAAO;EAErB,MAAM,OAAO,MAAM;AACnB,MAAI,sBAAsB;AAExB,QAAK,MAAM,aAAa;AACxB,QAAK,MAAM,SAAS,GAAG,KAAK;AAG5B,QAAK;AACL,QAAK,MAAM,aAAa;AACxB;;AAGF,OAAK,MAAM,SAAS,GAAG,KAAK;IAC3B,CAAC;AAGJ,OAAM,sBAAsB;EAC1B,MAAM,OAAO,eAAe;EAC5B,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,QAAQ,CAAC,MAAO;AAGrB;EAGA,MAAM,KAAK,IAAI,qBAAqB;AAElC,yBAAsB;;AAExB,KAAG,QAAQ;EAGX,~~MAAMC~~,~~QAAc~~,~~UAAkB~~;~~AACtC~~,MAAI,OAAO,MACT,OAAM,MAAM,WAAW,cAAc,YAAY;EAInD,MAAM,iBAAiB;AACvB,SAAO,iBAAiB,UAAU;AAElC,eAAa;AACX,MAAG;AACH,UAAO,oBAAoB,UAAU;;IAEtC;EAAC;EAAY;EAAS;EAAgB;EAAmB;EAAU;;AAEtE,QACE,qBAAC;EAAI,KAAK;EAAa,WAAU;aAE9B,YAGD,oBAAC;GAAI,KAAK;GAAgB,WAAU;aAClC,qBAAC;IAAI,KAAK;IAAU,WAAU;;KAC3B,WACC,qBAAC;MAAI,WAAU;iBACb,~~oBAAC~~;OAAI,WAAU;~~iBAAoB~~;~~UACnC~~,oBAAC;OAAI,cAAW;OAAU,WAAU;;;KAIvC,kBAAkB,oBAAC;MAAI,WAAU;gBAA2B;;KAE5D,qBAAqB,oBAAC;MAAI,WAAU;gBAA8B;;KAElE,CAAC,WAAW,CAAC,kBAAkB,CAAC,qBAC/B,oBAAC;MAAI,WAAU;MAAmB"}
1	+ {"version":3,"file":"ContentSwitcher.js","names":["ContentSwitcher: React.FC<ContentSwitcherProps>"],"sources":["../../../../../../src/react/components/PasskeyAuthMenu/ui/ContentSwitcher.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface ContentSwitcherProps {\n waiting: boolean;\n waitingText?: string;\n waitingSubtext?: string;\n waitingSDKEventsText?: string;\n showScanDevice?: boolean;\n showQRCodeElement?: React.ReactNode;\n showEmailRecovery?: boolean;\n emailRecoveryElement?: React.ReactNode;\n children: React.ReactNode;\n backButton?: React.ReactNode;\n}\n\nexport const ContentSwitcher: React.FC<ContentSwitcherProps> = ({\n waiting,\n waitingText = 'Waiting for Passkey…',\n waitingSubtext = '',\n waitingSDKEventsText = '',\n showScanDevice = false,\n showQRCodeElement,\n showEmailRecovery = false,\n emailRecoveryElement,\n children,\n backButton,\n}) => {\n // Animate height of the switcher as content changes\n const switcherRef = React.useRef<HTMLDivElement \| null>(null);\n const contentAreaRef = React.useRef<HTMLDivElement \| null>(null);\n const sizerRef = React.useRef<HTMLDivElement \| null>(null);\n\n // Track whether user prefers reduced motion\n const prefersReducedMotion = React.useMemo(() => {\n if (typeof window === 'undefined' \|\| !('matchMedia' in window)) return false;\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n }, []);\n\n // Helper to read current content height and apply to the switcher\n const syncHeight = React.useCallback(() => {\n const wrap = switcherRef.current;\n const sizer = sizerRef.current;\n if (!wrap \|\| !sizer) return;\n // Use scrollHeight to capture intrinsic content size regardless of flex context\n const next = sizer.scrollHeight;\n if (prefersReducedMotion) {\n // Apply without animation\n wrap.style.transition = 'none';\n wrap.style.height = `${next}px`;\n // Force reflow then restore transition so future changes can animate\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n wrap.offsetHeight;\n wrap.style.transition = '';\n return;\n }\n // Normal path: let CSS transition handle the interpolation\n wrap.style.height = `${next}px`;\n }, [prefersReducedMotion]);\n\n // Observe size changes of the content area\n React.useLayoutEffect(() => {\n const area = contentAreaRef.current;\n const sizer = sizerRef.current;\n if (!area \|\| !sizer) return;\n\n // Initial sync after mount/update\n syncHeight();\n\n // ResizeObserver to capture dynamic content changes (e.g., QR render)\n const ro = new ResizeObserver(() => {\n // Use rAF to coalesce layout reads/writes with rendering\n requestAnimationFrame(syncHeight);\n });\n ro.observe(sizer);\n\n // Re-sync after fonts load (text metrics can change)\n const fonts = document?.fonts;\n if (fonts?.ready) {\n fonts.ready.then(() => syncHeight()).catch(() => {});\n }\n\n // Also re-sync on window resize\n const onResize = () => syncHeight();\n window.addEventListener('resize', onResize);\n\n return () => {\n ro.disconnect();\n window.removeEventListener('resize', onResize);\n };\n }, [syncHeight, waiting, showScanDevice, showEmailRecovery, children, emailRecoveryElement]);\n\n return (\n <div ref={switcherRef} className=\"w3a-content-switcher\">\n {/* Back button - absolutely positioned overlay /}\n {backButton}\n\n {/ Content areas - conditionally rendered with smooth transitions */}\n <div ref={contentAreaRef} className=\"w3a-content-area\">\n <div ref={sizerRef} className=\"w3a-content-sizer\">\n {waiting && (\n <div className=\"w3a-waiting\">\n <div className=\"w3a-waiting-message\">\n <div className=\"w3a-waiting-text\">{waitingText}</div>\n {waitingSubtext.trim().length > 0 && (\n <div className=\"w3a-waiting-subtext\">{waitingSubtext}</div>\n )}\n {waitingSDKEventsText.trim().length > 0 && (\n <div className=\"w3a-waiting-sdk-events\">{waitingSDKEventsText}</div>\n )}\n </div>\n <div aria-label=\"Loading\" className=\"w3a-spinner\" />\n </div>\n )}\n\n {showScanDevice && <div className=\"w3a-scan-device-content\">{showQRCodeElement}</div>}\n\n {showEmailRecovery && <div className=\"w3a-email-recovery-content\">{emailRecoveryElement}</div>}\n\n {!waiting && !showScanDevice && !showEmailRecovery && (\n <div className=\"w3a-signin-menu\">{children}</div>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default ContentSwitcher;\n"],"mappings":";;;;AAeA,MAAaA,mBAAmD,EAC9D,SACA,cAAc,wBACd,iBAAiB,IACjB,uBAAuB,IACvB,iBAAiB,OACjB,mBACA,oBAAoB,OACpB,sBACA,UACA,iBACI;CAEJ,MAAM,cAAc,MAAM,OAA8B;CACxD,MAAM,iBAAiB,MAAM,OAA8B;CAC3D,MAAM,WAAW,MAAM,OAA8B;CAGrD,MAAM,uBAAuB,MAAM,cAAc;AAC/C,MAAI,OAAO,WAAW,eAAe,EAAE,gBAAgB,QAAS,QAAO;AACvE,SAAO,OAAO,WAAW,oCAAoC;IAC5D;CAGH,MAAM,aAAa,MAAM,kBAAkB;EACzC,MAAM,OAAO,YAAY;EACzB,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,QAAQ,CAAC,MAAO;EAErB,MAAM,OAAO,MAAM;AACnB,MAAI,sBAAsB;AAExB,QAAK,MAAM,aAAa;AACxB,QAAK,MAAM,SAAS,GAAG,KAAK;AAG5B,QAAK;AACL,QAAK,MAAM,aAAa;AACxB;;AAGF,OAAK,MAAM,SAAS,GAAG,KAAK;IAC3B,CAAC;AAGJ,OAAM,sBAAsB;EAC1B,MAAM,OAAO,eAAe;EAC5B,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,QAAQ,CAAC,MAAO;AAGrB;EAGA,MAAM,KAAK,IAAI,qBAAqB;AAElC,yBAAsB;;AAExB,KAAG,QAAQ;EAGX,MAAM,QAAQ,UAAU;AACxB,MAAI,OAAO,MACT,OAAM,MAAM,WAAW,cAAc,YAAY;EAInD,MAAM,iBAAiB;AACvB,SAAO,iBAAiB,UAAU;AAElC,eAAa;AACX,MAAG;AACH,UAAO,oBAAoB,UAAU;;IAEtC;EAAC;EAAY;EAAS;EAAgB;EAAmB;EAAU;;AAEtE,QACE,qBAAC;EAAI,KAAK;EAAa,WAAU;aAE9B,YAGD,oBAAC;GAAI,KAAK;GAAgB,WAAU;aAClC,qBAAC;IAAI,KAAK;IAAU,WAAU;;KAC3B,WACC,qBAAC;MAAI,WAAU;iBACb,qBAAC;OAAI,WAAU;;QACb,oBAAC;SAAI,WAAU;mBAAoB;;QAClC,eAAe,OAAO,SAAS,KAC9B,oBAAC;SAAI,WAAU;mBAAuB;;QAEvC,qBAAqB,OAAO,SAAS,KACpC,oBAAC;SAAI,WAAU;mBAA0B;;;UAG7C,oBAAC;OAAI,cAAW;OAAU,WAAU;;;KAIvC,kBAAkB,oBAAC;MAAI,WAAU;gBAA2B;;KAE5D,qBAAqB,oBAAC;MAAI,WAAU;gBAA8B;;KAElE,CAAC,WAAW,CAAC,kBAAkB,CAAC,qBAC/B,oBAAC;MAAI,WAAU;MAAmB"}