@tatchi-xyz/sdk 0.32.1 → 0.32.3

package/dist/cjs/react/components/PasskeyAuthMenu/{PasskeyAuthMenu-D2eRb2-S.css → PasskeyAuthMenu-mMygL3xX.css}

@@ -1,8 +1,14 @@
 /* Root container */
+.w3a-no-animation {
+  animation: none !important;
+  transition: none !important;
+}
+
 .w3a-signup-menu-root {
-  /* JS sentinel used to avoid FOUC when CSS is still loading */
+  /* CSS sentinel (used by tests/diagnostics to confirm stylesheet is applied) */
   --w3a-pam2-css-ready: 1;
-  position: relative; /* relative position to anchor back button */
+  position: relative;
+  /* relative position to anchor back button */
   width: min(100dvw, 420px);
   max-width: 100dvw;
   min-width: 330px;
@@ -44,15 +50,18 @@
   pointer-events: none;
   filter: blur(0.2px);
 }
+
 .w3a-back-button.is-visible {
   opacity: 1;
   pointer-events: auto;
   filter: none;
 }
+
 .w3a-back-button:hover {
   transform: scale(1.02);
   background: var(--w3a-colors-surface);
 }
+
 .w3a-back-button:active {
   transform: scale(0.96);
 }
@@ -140,7 +149,8 @@
 .w3a-content-switcher {
   display: flex;
   flex-direction: column;
-  overflow: hidden; /* ensure smooth height animations without spillover */
+  overflow: hidden;
+  /* ensure smooth height animations without spillover */
   transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
   will-change: height;
 }
@@ -152,7 +162,6 @@
   flex: 0 1 auto;
   display: flex;
   flex-direction: column;
-  animation: fade-in 240ms ease-out;
   transition: height 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
@@ -170,7 +179,6 @@
   gap: 0px;
   min-height: 250px;
   width: 100%;
-  animation: content-enter 240ms ease-in-out;
 }
 
 @keyframes content-enter {
@@ -178,6 +186,7 @@
     opacity: 0;
     transform: scale(0.98) translateY(6px);
   }
+
   to {
     opacity: 1;
     transform: scale(1) translateY(0);
@@ -188,6 +197,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -199,6 +209,7 @@
   gap: 8px;
   margin-bottom: var(--w3a-spacing-sm);
 }
+
 .w3a-social-btn {
   height: 48px;
   flex: 1 1 0;
@@ -214,13 +225,16 @@
   /* no shadow requested */
   box-shadow: none;
 }
+
 .w3a-social-btn svg {
   color: var(--w3a-colors-textSecondary, #64748b);
 }
+
 .w3a-social-btn:hover {
   background: var(--w3a-colors-surface2);
   box-shadow: var(--w3a-shadows-sm);
 }
+
 .w3a-social-btn:hover svg {
   color: var(--w3a-colors-textPrimary, #1e293b);
 }
@@ -248,6 +262,7 @@
   overflow-x: hidden;
   transition: border-radius 150ms ease-in-out;
 }
+
 .w3a-input-pill.is-enabled {
   border-radius: 2rem 0.25rem 0.25rem 2rem;
   transition: border-radius 150ms ease-in-out;
@@ -259,8 +274,10 @@
   height: 32px;
   display: flex;
   align-items: center;
-  min-width: 0; /* allow input to shrink inside flex container without clipping */
+  min-width: 0;
+  /* allow input to shrink inside flex container without clipping */
 }
+
 .w3a-input {
   width: 100%;
   height: 32px;
@@ -270,7 +287,8 @@
   color: var(--w3a-colors-textPrimary);
   font-size: 16px;
   padding: 0;
-  min-width: 0; /* prevent overflow clipping in flex layouts */
+  min-width: 0;
+  /* prevent overflow clipping in flex layouts */
 }
 
 /* Absolute status message anchored to bottom-right of the input area */
@@ -289,15 +307,18 @@
   font-size: 16px;
   white-space: nowrap;
   pointer-events: none;
-  visibility: hidden; /* React enables once measured */
+  visibility: hidden;
+  /* React enables once measured */
   will-change: left;
   transition: left 32ms ease;
 }
+
 .w3a-postfix.is-existing {
   color: var(--w3a-colors-success);
 }
+
 /* On focus, keep postfix subtle for readability */
-.w3a-input:focus ~ .w3a-postfix {
+.w3a-input:focus~.w3a-postfix {
   color: var(--w3a-colors-textMuted);
 }
 
@@ -305,7 +326,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 0;           /* hidden footprint by default */
+  width: 0;
+  /* hidden footprint by default */
   padding: 0;
   background: transparent;
   border: 0;
@@ -321,13 +343,15 @@
   border: 6px solid var(--w3a-colors-colorBackground, #fff);
   height: 64px;
   transition: transform 150ms ease,
-              background-color 150ms ease,
-              border-radius 150ms ease,
-              opacity 150ms ease,
-              width 150ms ease-in-out;
+    background-color 150ms ease,
+    border-radius 150ms ease,
+    opacity 150ms ease,
+    width 150ms ease-in-out;
 }
+
 .w3a-arrow-btn.is-enabled {
-  width: 100px; /* expand when enabled */
+  width: 100px;
+  /* expand when enabled */
   /* Prefer themed primary; fall back to legacy then a sane default */
   background: var(--w3a-colors-primary, #2563eb);
   border-radius: 2rem;
@@ -336,36 +360,42 @@
   visibility: visible;
   pointer-events: auto;
   transition: transform 150ms ease,
-              background-color 150ms ease,
-              border-radius 150ms ease,
-              opacity 150ms ease,
-              width 150ms ease-in-out;
+    background-color 150ms ease,
+    border-radius 150ms ease,
+    opacity 150ms ease,
+    width 150ms ease-in-out;
 }
+
 .w3a-arrow-btn.no-transition,
 .w3a-arrow-btn.no-transition.is-enabled {
   transition: none;
 }
+
 .w3a-arrow-btn .w3a-arrow-icon {
   color: #fff;
 }
+
 .w3a-arrow-btn.is-enabled:hover {
   /* transform: scale(1.02); */
   background: var(--w3a-colors-primaryHover, #1d4ed8);
 }
+
 .w3a-arrow-btn.is-enabled:active {
   transform: scale(0.96);
 }
+
 .w3a-arrow-btn:disabled {
   width: 0;
   cursor: not-allowed;
   opacity: 0.5;
   background: var(--w3a-colors-borderSecondary);
   transition: transform 150ms ease,
-              background-color 150ms ease,
-              border-radius 150ms ease,
-              opacity 150ms ease,
-              width 150ms ease-in-out;
+    background-color 150ms ease,
+    border-radius 150ms ease,
+    opacity 150ms ease,
+    width 150ms ease-in-out;
 }
+
 .w3a-arrow-btn .w3a-arrow-label {
   margin-left: 8px;
   font-weight: 600;
@@ -379,7 +409,7 @@
   justify-content: center;
 }
 
-.w3a-arrow-btn .stripe-arrow > .HoverArrow {
+.w3a-arrow-btn .stripe-arrow>.HoverArrow {
   position: relative;
   margin-top: 0.1rem;
   margin-left: 8px;
@@ -389,23 +419,23 @@
 }
 
 /* Horizontal line: fades in on hover of the button */
-.w3a-arrow-btn .stripe-arrow > .HoverArrow .HoverArrow__linePath {
+.w3a-arrow-btn .stripe-arrow>.HoverArrow .HoverArrow__linePath {
   opacity: 0;
   transition: opacity 120ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 /* Chevron: nudges right and slightly scales on hover */
-.w3a-arrow-btn .stripe-arrow > .HoverArrow .HoverArrow__tipPath {
+.w3a-arrow-btn .stripe-arrow>.HoverArrow .HoverArrow__tipPath {
   transition: transform 120ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.w3a-arrow-btn.is-enabled:hover .stripe-arrow > .HoverArrow .HoverArrow__linePath,
-.w3a-arrow-btn.is-enabled:focus-visible .stripe-arrow > .HoverArrow .HoverArrow__linePath {
+.w3a-arrow-btn.is-enabled:hover .stripe-arrow>.HoverArrow .HoverArrow__linePath,
+.w3a-arrow-btn.is-enabled:focus-visible .stripe-arrow>.HoverArrow .HoverArrow__linePath {
   opacity: 1;
 }
 
-.w3a-arrow-btn.is-enabled:hover .stripe-arrow > .HoverArrow .HoverArrow__tipPath,
-.w3a-arrow-btn.is-enabled:focus-visible .stripe-arrow > .HoverArrow .HoverArrow__tipPath {
+.w3a-arrow-btn.is-enabled:hover .stripe-arrow>.HoverArrow .HoverArrow__tipPath,
+.w3a-arrow-btn.is-enabled:focus-visible .stripe-arrow>.HoverArrow .HoverArrow__tipPath {
   transform: translateX(3px);
 }
 
@@ -419,6 +449,7 @@
   background: var(--w3a-colors-surface2);
   border-radius: var(--w3a-border-radius-xl);
 }
+
 .w3a-seg-active {
   position: absolute;
   top: 5px;
@@ -432,6 +463,7 @@
   will-change: transform, width;
   pointer-events: none;
 }
+
 .w3a-seg-grid {
   display: flex;
   gap: 4px;
@@ -439,6 +471,7 @@
   position: relative;
   z-index: 1;
 }
+
 .w3a-seg-btn {
   flex: 1 1 0;
   min-width: 0;
@@ -462,15 +495,19 @@
   padding: 0 14px;
   font-size: clamp(13px, 3.6vw, 15px);
 }
+
 .w3a-seg-btn:hover {
   transform: scale(1.02);
 }
+
 .w3a-seg-btn:active {
   transform: scale(0.98);
 }
+
 .w3a-seg-btn.is-active {
   color: var(--w3a-colors-textPrimary);
 }
+
 .w3a-seg-btn:focus-visible {
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--w3a-colors-focus), transparent 60%);
 }
@@ -484,7 +521,9 @@
   }
 
   @supports (width: 1dvw) {
-    .w3a-signup-menu-root { max-width: calc(100dvw - 0.25rem); }
+    .w3a-signup-menu-root {
+      max-width: calc(100dvw - 0.25rem);
+    }
   }
 
   .w3a-title {
@@ -550,19 +589,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-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;
@@ -570,11 +616,12 @@
   white-space: pre-wrap;
   color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 15%);
 }
+
 .w3a-spinner {
   width: 36px;
   height: 36px;
   border-radius: 999px;
-  border: 3px solid rgba(255,255,255,0.15);
+  border: 3px solid rgba(255, 255, 255, 0.15);
   border-top-color: var(--w3a-colors-primary);
   animation: w3a-spin 0.9s linear infinite;
 }
@@ -593,6 +640,7 @@
   width: 100%;
   overflow: hidden;
   animation: content-enter 240ms ease-out;
+  animation-fill-mode: both;
 }
 
 /* Ensure QR code content stays within bounds */
@@ -619,6 +667,7 @@
   align-items: center;
   justify-content: flex-end;
 }
+
 .w3a-status-message {
   font-size: 11px;
   font-weight: 500;
@@ -655,12 +704,14 @@
   margin: 6px 2px 6px;
   font-weight: 600;
 }
+
 .w3a-seg-help {
   font-size: 12px;
   color: color-mix(in srgb, var(--w3a-colors-textSecondary), var(--w3a-colors-textPrimary) 25%);
   margin: 0;
   margin-left: 0.75rem;
 }
+
 .w3a-seg-help-row {
   display: flex;
   align-items: center;
@@ -668,6 +719,7 @@
   gap: 12px;
   margin-top: 8px;
 }
+
 /* Tooltip for account existence status */
 .w3a-input-wrap .w3a-tooltip {
   position: absolute;
@@ -683,15 +735,18 @@
   transition: opacity 180ms ease, transform 200ms ease;
   z-index: 2;
 }
+
 .w3a-input-wrap .w3a-tooltip.is-visible {
   opacity: 0.8;
   transform: translateX(0px) scale(1);
 }
+
 .w3a-input-wrap .w3a-tooltip.is-error {
   color: var(--w3a-colors-error);
   background: var(--w3a-colors-colorBackground);
   /* background: color-mix(in srgb, var(--w3a-colors-error), transparent 90%); */
 }
+
 .w3a-input-wrap .w3a-tooltip.is-success {
   color: var(--w3a-colors-blue400);
   background: var(--w3a-colors-colorBackground);
@@ -699,13 +754,26 @@
 }
 
 @keyframes w3a-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes w3a-ellipsis-dot {
-  0%, 80%, 100% { opacity: 0; }
-  40% { opacity: 1; }
+
+  0%,
+  80%,
+  100% {
+    opacity: 0;
+  }
+
+  40% {
+    opacity: 1;
+  }
 }
 
 .w3a-ellipsis {
@@ -718,24 +786,45 @@
   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; }
+.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); }
-  60% { opacity: 1; transform: translateY(-2px) scale(1.02); }
-  100% { opacity: 1; transform: translateY(0) scale(1); }
+  0% {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translateY(-2px) scale(1.02);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .w3a-input-msg.is-error { animation: none; }
-  .w3a-ellipsis-dot { animation: none; opacity: 1; }
+  .w3a-input-msg.is-error {
+    animation: none;
+  }
+
+  .w3a-ellipsis-dot {
+    animation: none;
+    opacity: 1;
+  }
 }
 
 /* Button System */
-.w3a-scan-device-row {
-}
+.w3a-scan-device-row {}
 
 .w3a-secondary-actions {
   display: flex;
@@ -814,6 +903,7 @@
   gap: 12px;
   min-height: 260px;
   animation: content-enter 240ms ease-out;
+  animation-fill-mode: both;
 }
 
 .w3a-email-recovery-title {
@@ -1008,4 +1098,4 @@
 }
 
 
-/*# sourceMappingURL=PasskeyAuthMenu-D2eRb2-S.css.map*/
+/*# sourceMappingURL=PasskeyAuthMenu-mMygL3xX.css.map*/

package/dist/cjs/react/components/PasskeyAuthMenu/PasskeyAuthMenu-mMygL3xX.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasskeyAuthMenu-mMygL3xX.css","names":[],"sources":["../../../../../src/react/components/PasskeyAuthMenu/PasskeyAuthMenu.css"],"sourcesContent":["/* Root container */\n.w3a-no-animation {\n  animation: none !important;\n  transition: none !important;\n}\n\n.w3a-signup-menu-root {\n  /* CSS sentinel (used by tests/diagnostics to confirm stylesheet is applied) */\n  --w3a-pam2-css-ready: 1;\n  position: relative;\n  /* 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\n.w3a-back-button.is-visible {\n  opacity: 1;\n  pointer-events: auto;\n  filter: none;\n}\n\n.w3a-back-button:hover {\n  transform: scale(1.02);\n  background: var(--w3a-colors-surface);\n}\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;\n  /* 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  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}\n\n@keyframes content-enter {\n  from {\n    opacity: 0;\n    transform: scale(0.98) translateY(6px);\n  }\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\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\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\n.w3a-social-btn svg {\n  color: var(--w3a-colors-textSecondary, #64748b);\n}\n\n.w3a-social-btn:hover {\n  background: var(--w3a-colors-surface2);\n  box-shadow: var(--w3a-shadows-sm);\n}\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\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;\n  /* allow input to shrink inside flex container without clipping */\n}\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;\n  /* 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;\n  /* React enables once measured */\n  will-change: left;\n  transition: left 32ms ease;\n}\n\n.w3a-postfix.is-existing {\n  color: var(--w3a-colors-success);\n}\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;\n  /* 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\n.w3a-arrow-btn.is-enabled {\n  width: 100px;\n  /* 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\n.w3a-arrow-btn.no-transition,\n.w3a-arrow-btn.no-transition.is-enabled {\n  transition: none;\n}\n\n.w3a-arrow-btn .w3a-arrow-icon {\n  color: #fff;\n}\n\n.w3a-arrow-btn.is-enabled:hover {\n  /* transform: scale(1.02); */\n  background: var(--w3a-colors-primaryHover, #1d4ed8);\n}\n\n.w3a-arrow-btn.is-enabled:active {\n  transform: scale(0.96);\n}\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\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\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\n.w3a-seg-grid {\n  display: flex;\n  gap: 4px;\n  height: 100%;\n  position: relative;\n  z-index: 1;\n}\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\n.w3a-seg-btn:hover {\n  transform: scale(1.02);\n}\n\n.w3a-seg-btn:active {\n  transform: scale(0.98);\n}\n\n.w3a-seg-btn.is-active {\n  color: var(--w3a-colors-textPrimary);\n}\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 {\n      max-width: calc(100dvw - 0.25rem);\n    }\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\n.w3a-waiting-message {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n}\n\n.w3a-waiting-text {\n  font-size: 18px;\n  font-weight: 600;\n}\n\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\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\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  animation-fill-mode: both;\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\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\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\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\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\n.w3a-input-wrap .w3a-tooltip.is-visible {\n  opacity: 0.8;\n  transform: translateX(0px) scale(1);\n}\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\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 {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes w3a-ellipsis-dot {\n\n  0%,\n  80%,\n  100% {\n    opacity: 0;\n  }\n\n  40% {\n    opacity: 1;\n  }\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) {\n  animation-delay: 0.15s;\n}\n\n.w3a-ellipsis-dot:nth-child(3) {\n  animation-delay: 0.3s;\n}\n\n/* Pop/bounce-in animation (kept for legacy classes) */\n@keyframes w3a-input-msg-pop {\n  0% {\n    opacity: 0;\n    transform: translateY(8px) scale(0.98);\n  }\n\n  60% {\n    opacity: 1;\n    transform: translateY(-2px) scale(1.02);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .w3a-input-msg.is-error {\n    animation: none;\n  }\n\n  .w3a-ellipsis-dot {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n/* Button System */\n.w3a-scan-device-row {}\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  animation-fill-mode: both;\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;;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;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;;AAEA;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;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;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;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;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;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;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;;AAEA;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;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;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;;AAEA;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;;AAEA;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;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;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;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/cjs/react/components/PasskeyAuthMenu/client.js

@@ -1,14 +1,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.js');
 const require_SegmentedControl = require('./ui/SegmentedControl.js');
-require('./PasskeyAuthMenu.js');
-const require_authMenuTypes = require('./authMenuTypes.js');
 const require_ArrowLeft = require('./ui/icons/ArrowLeft.js');
 const require_Mail = require('./ui/icons/Mail.js');
+const require_QRCodeIcon = require('../QRCodeIcon.js');
+const require_authMenuTypes = require('./authMenuTypes.js');
 const require_PasskeyInput = require('./ui/PasskeyInput.js');
 const require_ContentSwitcher = require('./ui/ContentSwitcher.js');
 const require_EmailRecoverySlide = require('./ui/EmailRecoverySlide.js');
-const require_QRCodeIcon = require('../QRCodeIcon.js');
 const require_tatchi = require('./adapters/tatchi.js');
 const require_usePasskeyAuthMenuController = require('./controller/usePasskeyAuthMenuController.js');
 const require_useSDKEvents = require('./controller/useSDKEvents.js');

package/dist/cjs/react/components/PasskeyAuthMenu/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":["React","PasskeyAuthMenuClient: React.FC<PasskeyAuthMenuProps>","usePasskeyAuthMenuRuntime","useSDKEvents","usePasskeyAuthMenuController","AuthMenuMode","ContentSwitcher","ArrowLeftIcon","EmailRecoverySlide","PasskeyInput","SegmentedControl","QRCodeIcon","MailIcon"],"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  onSyncAccount,\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 onSyncWithSDKEvents = React.useMemo(\n    () => withSdkEventsHandler('sync', onSyncAccount, 120_000),\n    [onSyncAccount, withSdkEventsHandler],\n  );\n\n  const controller = usePasskeyAuthMenuController(\n    {\n      onLogin: onLoginWithSDKEvents,\n      onRegister: onRegisterWithSDKEvents,\n      onSyncAccount: onSyncWithSDKEvents,\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.Sync\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            : controller.mode === AuthMenuMode.Sync\n              ? 'Syncing account…'\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.Sync\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.Sync, label: 'Sync', className: 'sync' },\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.Sync && 'Sync 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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"}
+{"version":3,"file":"client.js","names":["React","PasskeyAuthMenuClient: React.FC<PasskeyAuthMenuProps>","usePasskeyAuthMenuRuntime","useSDKEvents","usePasskeyAuthMenuController","AuthMenuMode","ContentSwitcher","ArrowLeftIcon","EmailRecoverySlide","PasskeyInput","SegmentedControl","QRCodeIcon","MailIcon"],"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 { 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  onSyncAccount,\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 onSyncWithSDKEvents = React.useMemo(\n    () => withSdkEventsHandler('sync', onSyncAccount, 120_000),\n    [onSyncAccount, withSdkEventsHandler],\n  );\n\n  const controller = usePasskeyAuthMenuController(\n    {\n      onLogin: onLoginWithSDKEvents,\n      onRegister: onRegisterWithSDKEvents,\n      onSyncAccount: onSyncWithSDKEvents,\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.Sync\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            : controller.mode === AuthMenuMode.Sync\n              ? 'Syncing account…'\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.Sync\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.Sync, label: 'Sync', className: 'sync' },\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.Sync && 'Sync 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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"}