@tatchi-xyz/sdk 0.32.1 → 0.32.3

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":["React","PasskeyAuthMenuSkeleton: React.FC<PasskeyAuthMenuSkeletonProps>","useTheme","PasskeyAuthMenuThemeScope"],"sources":["../../../../../src/react/components/PasskeyAuthMenu/skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport './PasskeyAuthMenu.css';\nimport { PasskeyAuthMenuThemeScope } from './themeScope';\nimport { useTheme } from '../theme';\n\nexport interface PasskeyAuthMenuSkeletonProps {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport const PasskeyAuthMenuSkeletonInner = React.forwardRef<\n  HTMLDivElement,\n  PasskeyAuthMenuSkeletonProps\n>(({ className, style }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={`w3a-signup-menu-root w3a-skeleton${className ? ` ${className}` : ''}`}\n      style={style}\n    >\n      <div className=\"w3a-header\">\n        <div\n          className=\"w3a-skeleton-block w3a-title-skeleton\"\n          style={{ width: '60%', height: '24px', marginBottom: '8px' }}\n        />\n        <div\n          className=\"w3a-skeleton-block w3a-subtitle-skeleton\"\n          style={{ width: '80%', height: '16px' }}\n        />\n      </div>\n\n      <div className=\"w3a-passkey-row\">\n        <div className=\"w3a-input-pill w3a-skeleton-input\">\n          <div\n            className=\"w3a-skeleton-block\"\n            style={{ width: '40%', height: '18px', marginLeft: '12px' }}\n          />\n        </div>\n      </div>\n\n      <div className=\"w3a-segmented-root\">\n        <div className=\"w3a-seg-track\">\n          <div className=\"w3a-seg-button\">Register</div>\n          <div className=\"w3a-seg-button\">Login</div>\n          <div className=\"w3a-seg-button\">Sync</div>\n        </div>\n      </div>\n\n      <div className=\"w3a-seg-help-row\">\n        <div\n          className=\"w3a-skeleton-block\"\n          style={{ width: '50%', height: '14px', margin: '0 auto' }}\n        />\n      </div>\n\n      <div className=\"w3a-scan-device-row\">\n        <div className=\"w3a-section-divider\">\n          <div className=\"w3a-section-divider-text\">Already have an account?</div>\n        </div>\n        <div className=\"w3a-secondary-actions\">\n          <button className=\"w3a-link-device-btn\" disabled>\n            <div\n              className=\"w3a-skeleton-block\"\n              style={{\n                width: '18px',\n                height: '18px',\n                marginRight: '8px',\n                borderRadius: '4px',\n              }}\n            />\n            Scan and Link Device\n          </button>\n          <button className=\"w3a-link-device-btn\" disabled>\n            <div\n              className=\"w3a-skeleton-block\"\n              style={{\n                width: '18px',\n                height: '18px',\n                marginRight: '8px',\n                borderRadius: '9999px',\n              }}\n            />\n            Recover Account with Email\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\nPasskeyAuthMenuSkeletonInner.displayName = 'PasskeyAuthMenuSkeletonInner';\n\nexport const PasskeyAuthMenuSkeleton: React.FC<PasskeyAuthMenuSkeletonProps> = (props) => {\n  const { theme } = useTheme();\n  return (\n    <PasskeyAuthMenuThemeScope theme={theme}>\n      <PasskeyAuthMenuSkeletonInner {...props} />\n    </PasskeyAuthMenuThemeScope>\n  );\n};\n\nexport default PasskeyAuthMenuSkeleton;\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,+BAA+BA,cAAM,YAG/C,EAAE,WAAW,SAAS,QAAQ;AAC/B,QACE,4CAAC;EACM;EACL,WAAW,oCAAoC,YAAY,IAAI,cAAc;EACtE;;GAEP,4CAAC;IAAI,WAAU;eACb,2CAAC;KACC,WAAU;KACV,OAAO;MAAE,OAAO;MAAO,QAAQ;MAAQ,cAAc;;QAEvD,2CAAC;KACC,WAAU;KACV,OAAO;MAAE,OAAO;MAAO,QAAQ;;;;GAInC,2CAAC;IAAI,WAAU;cACb,2CAAC;KAAI,WAAU;eACb,2CAAC;MACC,WAAU;MACV,OAAO;OAAE,OAAO;OAAO,QAAQ;OAAQ,YAAY;;;;;GAKzD,2CAAC;IAAI,WAAU;cACb,4CAAC;KAAI,WAAU;;MACb,2CAAC;OAAI,WAAU;iBAAiB;;MAChC,2CAAC;OAAI,WAAU;iBAAiB;;MAChC,2CAAC;OAAI,WAAU;iBAAiB;;;;;GAIpC,2CAAC;IAAI,WAAU;cACb,2CAAC;KACC,WAAU;KACV,OAAO;MAAE,OAAO;MAAO,QAAQ;MAAQ,QAAQ;;;;GAInD,4CAAC;IAAI,WAAU;eACb,2CAAC;KAAI,WAAU;eACb,2CAAC;MAAI,WAAU;gBAA2B;;QAE5C,4CAAC;KAAI,WAAU;gBACb,4CAAC;MAAO,WAAU;MAAsB;iBACtC,2CAAC;OACC,WAAU;OACV,OAAO;QACL,OAAO;QACP,QAAQ;QACR,aAAa;QACb,cAAc;;UAEhB;SAGJ,4CAAC;MAAO,WAAU;MAAsB;iBACtC,2CAAC;OACC,WAAU;OACV,OAAO;QACL,OAAO;QACP,QAAQ;QACR,aAAa;QACb,cAAc;;UAEhB;;;;;;;AAQd,6BAA6B,cAAc;AAE3C,MAAaC,2BAAmE,UAAU;CACxF,MAAM,EAAE,UAAUC;AAClB,QACE,2CAACC;EAAiC;YAChC,2CAAC,gCAA6B,GAAI;;;AAKxC,uBAAe"}
+{"version":3,"file":"skeleton.js","names":["React","AuthMenuMode","getModeTitle","ArrowLeftIcon","QRCodeIcon","MailIcon","PasskeyAuthMenuSkeleton: React.FC<PasskeyAuthMenuSkeletonProps>","useTheme","PasskeyAuthMenuThemeScope"],"sources":["../../../../../src/react/components/PasskeyAuthMenu/skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport { ArrowLeftIcon, MailIcon } from './ui/icons';\nimport QRCodeIcon from '../QRCodeIcon';\nimport { PasskeyAuthMenuThemeScope } from './themeScope';\nimport { useTheme } from '../theme';\nimport { getModeTitle } from './controller/mode';\nimport { AuthMenuMode, type AuthMenuHeadings } from './types';\n\nexport interface PasskeyAuthMenuSkeletonProps {\n  className?: string;\n  style?: React.CSSProperties;\n  /** Best-effort to match the hydrated UI default tab. */\n  defaultMode?: AuthMenuMode;\n  /** Best-effort to match the hydrated UI headings. */\n  headings?: AuthMenuHeadings;\n}\n\nexport const PasskeyAuthMenuSkeletonInner = React.forwardRef<\n  HTMLDivElement,\n  PasskeyAuthMenuSkeletonProps\n>(({ className, style, defaultMode, headings }, ref) => {\n  const mode = typeof defaultMode === 'number' ? defaultMode : AuthMenuMode.Register;\n  const title = getModeTitle(mode, headings ?? null);\n  const placeholder =\n    mode === AuthMenuMode.Register\n      ? 'Pick a username'\n      : mode === AuthMenuMode.Sync\n        ? 'Leave blank to discover accounts'\n        : 'Enter your username';\n  const segHelpText =\n    mode === AuthMenuMode.Login\n      ? 'Sign in with your passkey'\n      : mode === AuthMenuMode.Sync\n        ? 'Sync account (iCloud/Chrome sync)'\n        : 'Create a new account';\n  const segActiveWidth = 'calc((100% - 18px) / 3)';\n  const segActiveX =\n    mode === AuthMenuMode.Login\n      ? `calc(5px + ${segActiveWidth} + 4px)`\n      : mode === AuthMenuMode.Sync\n        ? `calc(5px + ${segActiveWidth} + 4px + ${segActiveWidth} + 4px)`\n        : '5px';\n\n  return (\n    <div\n      ref={ref}\n      className={`w3a-signup-menu-root w3a-skeleton${className ? ` ${className}` : ''}`}\n      style={style}\n      data-mode={mode}\n      data-waiting=\"false\"\n      data-scan-device=\"false\"\n      data-email-recovery=\"false\"\n    >\n      <div className=\"w3a-content-switcher\">\n        <button aria-label=\"Back\" type=\"button\" className=\"w3a-back-button\" disabled>\n          <ArrowLeftIcon size={18} strokeWidth={2.25} style={{ display: 'block' }} />\n        </button>\n\n        <div className=\"w3a-content-area\">\n          <div className=\"w3a-content-sizer\">\n            <div className=\"w3a-signin-menu\">\n              <div className=\"w3a-header\">\n                <div>\n                  <div className=\"w3a-title\">{title.title}</div>\n                  <div className=\"w3a-subhead\">{title.subtitle}</div>\n                </div>\n              </div>\n\n              <div className=\"w3a-passkey-row\">\n                <div className=\"w3a-input-pill\">\n                  <div className=\"w3a-input-wrap\">\n                    <input\n                      type=\"text\"\n                      name=\"passkey\"\n                      disabled\n                      placeholder={placeholder}\n                      className=\"w3a-input\"\n                      aria-disabled=\"true\"\n                      autoCapitalize=\"none\"\n                      autoCorrect=\"off\"\n                      spellCheck={false}\n                      inputMode=\"text\"\n                      style={{ pointerEvents: 'none' }}\n                    />\n                  </div>\n                </div>\n                <div style={{ position: 'relative', display: 'inline-block' }}>\n                  <button aria-label=\"Continue\" type=\"button\" className=\"w3a-arrow-btn no-transition\" disabled />\n                </div>\n              </div>\n\n              <div className=\"w3a-seg\">\n                <div\n                  className=\"w3a-seg-active\"\n                  style={{\n                    width: segActiveWidth,\n                    transform: `translateX(${segActiveX})`,\n                    opacity: 0.9,\n                    background: 'var(--w3a-passkey-auth-menu2-seg-active-bg)',\n                  }}\n                />\n                <div className=\"w3a-seg-grid\">\n                  <button\n                    type=\"button\"\n                    aria-pressed={mode === AuthMenuMode.Register}\n                    className={`w3a-seg-btn${mode === AuthMenuMode.Register ? ' is-active' : ''} register`}\n                    disabled\n                  >\n                    Register\n                  </button>\n                  <button\n                    type=\"button\"\n                    aria-pressed={mode === AuthMenuMode.Login}\n                    className={`w3a-seg-btn${mode === AuthMenuMode.Login ? ' is-active' : ''} login`}\n                    disabled\n                  >\n                    Login\n                  </button>\n                  <button\n                    type=\"button\"\n                    aria-pressed={mode === AuthMenuMode.Sync}\n                    className={`w3a-seg-btn${mode === AuthMenuMode.Sync ? ' is-active' : ''} sync`}\n                    disabled\n                  >\n                    Sync\n                  </button>\n                </div>\n              </div>\n\n              <div className=\"w3a-seg-help-row\">\n                <div className=\"w3a-seg-help\" aria-live=\"polite\">\n                  {segHelpText}\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 className=\"w3a-link-device-btn\" disabled>\n                    <QRCodeIcon width={18} height={18} strokeWidth={2} />\n                    Scan and Link Device\n                  </button>\n                  <button className=\"w3a-link-device-btn\" disabled>\n                    <MailIcon size={18} strokeWidth={2} style={{ display: 'block' }} />\n                    Recover Account with Email\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\nPasskeyAuthMenuSkeletonInner.displayName = 'PasskeyAuthMenuSkeletonInner';\n\nexport const PasskeyAuthMenuSkeleton: React.FC<PasskeyAuthMenuSkeletonProps> = (props) => {\n  const { theme } = useTheme();\n  return (\n    <PasskeyAuthMenuThemeScope theme={theme}>\n      <PasskeyAuthMenuSkeletonInner {...props} />\n    </PasskeyAuthMenuThemeScope>\n  );\n};\n\nexport default PasskeyAuthMenuSkeleton;\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,+BAA+BA,cAAM,YAG/C,EAAE,WAAW,OAAO,aAAa,YAAY,QAAQ;CACtD,MAAM,OAAO,OAAO,gBAAgB,WAAW,cAAcC,mCAAa;CAC1E,MAAM,QAAQC,0BAAa,MAAM,YAAY;CAC7C,MAAM,cACJ,SAASD,mCAAa,WAClB,oBACA,SAASA,mCAAa,OACpB,qCACA;CACR,MAAM,cACJ,SAASA,mCAAa,QAClB,8BACA,SAASA,mCAAa,OACpB,sCACA;CACR,MAAM,iBAAiB;CACvB,MAAM,aACJ,SAASA,mCAAa,QAClB,cAAc,eAAe,WAC7B,SAASA,mCAAa,OACpB,cAAc,eAAe,WAAW,eAAe,WACvD;AAER,QACE,2CAAC;EACM;EACL,WAAW,oCAAoC,YAAY,IAAI,cAAc;EACtE;EACP,aAAW;EACX,gBAAa;EACb,oBAAiB;EACjB,uBAAoB;YAEpB,4CAAC;GAAI,WAAU;cACb,2CAAC;IAAO,cAAW;IAAO,MAAK;IAAS,WAAU;IAAkB;cAClE,2CAACE;KAAc,MAAM;KAAI,aAAa;KAAM,OAAO,EAAE,SAAS;;OAGhE,2CAAC;IAAI,WAAU;cACb,2CAAC;KAAI,WAAU;eACb,4CAAC;MAAI,WAAU;;OACb,2CAAC;QAAI,WAAU;kBACb,4CAAC,oBACC,2CAAC;SAAI,WAAU;mBAAa,MAAM;YAClC,2CAAC;SAAI,WAAU;mBAAe,MAAM;;;OAIxC,4CAAC;QAAI,WAAU;mBACb,2CAAC;SAAI,WAAU;mBACb,2CAAC;UAAI,WAAU;oBACb,2CAAC;WACC,MAAK;WACL,MAAK;WACL;WACa;WACb,WAAU;WACV,iBAAc;WACd,gBAAe;WACf,aAAY;WACZ,YAAY;WACZ,WAAU;WACV,OAAO,EAAE,eAAe;;;YAI9B,2CAAC;SAAI,OAAO;UAAE,UAAU;UAAY,SAAS;;mBAC3C,2CAAC;UAAO,cAAW;UAAW,MAAK;UAAS,WAAU;UAA8B;;;;OAIxF,4CAAC;QAAI,WAAU;mBACb,2CAAC;SACC,WAAU;SACV,OAAO;UACL,OAAO;UACP,WAAW,cAAc,WAAW;UACpC,SAAS;UACT,YAAY;;YAGhB,4CAAC;SAAI,WAAU;;UACb,2CAAC;WACC,MAAK;WACL,gBAAc,SAASF,mCAAa;WACpC,WAAW,cAAc,SAASA,mCAAa,WAAW,eAAe,GAAG;WAC5E;qBACD;;UAGD,2CAAC;WACC,MAAK;WACL,gBAAc,SAASA,mCAAa;WACpC,WAAW,cAAc,SAASA,mCAAa,QAAQ,eAAe,GAAG;WACzE;qBACD;;UAGD,2CAAC;WACC,MAAK;WACL,gBAAc,SAASA,mCAAa;WACpC,WAAW,cAAc,SAASA,mCAAa,OAAO,eAAe,GAAG;WACxE;qBACD;;;;;OAML,2CAAC;QAAI,WAAU;kBACb,2CAAC;SAAI,WAAU;SAAe,aAAU;mBACrC;;;OAIL,4CAAC;QAAI,WAAU;mBACb,2CAAC;SAAI,WAAU;mBACb,2CAAC;UAAK,WAAU;oBAA2B;;YAE7C,4CAAC;SAAI,WAAU;oBACb,4CAAC;UAAO,WAAU;UAAsB;qBACtC,2CAACG;WAAW,OAAO;WAAI,QAAQ;WAAI,aAAa;cAAK;aAGvD,4CAAC;UAAO,WAAU;UAAsB;qBACtC,2CAACC;WAAS,MAAM;WAAI,aAAa;WAAG,OAAO,EAAE,SAAS;cAAa;;;;;;;;;;;AAYvF,6BAA6B,cAAc;AAE3C,MAAaC,2BAAmE,UAAU;CACxF,MAAM,EAAE,UAAUC;AAClB,QACE,2CAACC;EAAiC;YAChC,2CAAC,gCAA6B,GAAI;;;AAKxC,uBAAe"}

package/dist/cjs/react/components/PasskeyAuthMenu/ui/ContentSwitcher.js

@@ -9,6 +9,10 @@ const ContentSwitcher = ({ waiting, waitingText = "Waiting for Passkey…", wait
 	const switcherRef = react.default.useRef(null);
 	const contentAreaRef = react.default.useRef(null);
 	const sizerRef = react.default.useRef(null);
+	const isInitialMount = react.default.useRef(true);
+	react.default.useEffect(() => {
+		isInitialMount.current = false;
+	}, []);
 	const prefersReducedMotion = react.default.useMemo(() => {
 		if (typeof window === "undefined" || !("matchMedia" in window)) return false;
 		return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -94,7 +98,7 @@ const ContentSwitcher = ({ waiting, waitingText = "Waiting for Passkey…", wait
 						children: emailRecoveryElement
 					}),
 					!waiting && !showScanDevice && !showEmailRecovery && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "w3a-signin-menu",
+						className: `w3a-signin-menu${isInitialMount.current ? " w3a-no-animation" : ""}`,
 						children
 					})
 				]

package/dist/cjs/react/components/PasskeyAuthMenu/ui/ContentSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentSwitcher.js","names":["ContentSwitcher: React.FC<ContentSwitcherProps>","React"],"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,cAAcC,cAAM,OAA8B;CACxD,MAAM,iBAAiBA,cAAM,OAA8B;CAC3D,MAAM,WAAWA,cAAM,OAA8B;CAGrD,MAAM,uBAAuBA,cAAM,cAAc;AAC/C,MAAI,OAAO,WAAW,eAAe,EAAE,gBAAgB,QAAS,QAAO;AACvE,SAAO,OAAO,WAAW,oCAAoC;IAC5D;CAGH,MAAM,aAAaA,cAAM,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,eAAM,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,4CAAC;EAAI,KAAK;EAAa,WAAU;aAE9B,YAGD,2CAAC;GAAI,KAAK;GAAgB,WAAU;aAClC,4CAAC;IAAI,KAAK;IAAU,WAAU;;KAC3B,WACC,4CAAC;MAAI,WAAU;iBACb,4CAAC;OAAI,WAAU;;QACb,2CAAC;SAAI,WAAU;mBAAoB;;QAClC,eAAe,OAAO,SAAS,KAC9B,2CAAC;SAAI,WAAU;mBAAuB;;QAEvC,qBAAqB,OAAO,SAAS,KACpC,2CAAC;SAAI,WAAU;mBAA0B;;;UAG7C,2CAAC;OAAI,cAAW;OAAU,WAAU;;;KAIvC,kBAAkB,2CAAC;MAAI,WAAU;gBAA2B;;KAE5D,qBAAqB,2CAAC;MAAI,WAAU;gBAA8B;;KAElE,CAAC,WAAW,CAAC,kBAAkB,CAAC,qBAC/B,2CAAC;MAAI,WAAU;MAAmB"}
+{"version":3,"file":"ContentSwitcher.js","names":["ContentSwitcher: React.FC<ContentSwitcherProps>","React"],"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  const isInitialMount = React.useRef(true);\n\n  React.useEffect(() => {\n    isInitialMount.current = false;\n  }, []);\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${isInitialMount.current ? ' w3a-no-animation' : ''}`}>\n              {children}\n            </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,cAAcC,cAAM,OAA8B;CACxD,MAAM,iBAAiBA,cAAM,OAA8B;CAC3D,MAAM,WAAWA,cAAM,OAA8B;CACrD,MAAM,iBAAiBA,cAAM,OAAO;AAEpC,eAAM,gBAAgB;AACpB,iBAAe,UAAU;IACxB;CAGH,MAAM,uBAAuBA,cAAM,cAAc;AAC/C,MAAI,OAAO,WAAW,eAAe,EAAE,gBAAgB,QAAS,QAAO;AACvE,SAAO,OAAO,WAAW,oCAAoC;IAC5D;CAGH,MAAM,aAAaA,cAAM,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,eAAM,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,4CAAC;EAAI,KAAK;EAAa,WAAU;aAE9B,YAGD,2CAAC;GAAI,KAAK;GAAgB,WAAU;aAClC,4CAAC;IAAI,KAAK;IAAU,WAAU;;KAC3B,WACC,4CAAC;MAAI,WAAU;iBACb,4CAAC;OAAI,WAAU;;QACb,2CAAC;SAAI,WAAU;mBAAoB;;QAClC,eAAe,OAAO,SAAS,KAC9B,2CAAC;SAAI,WAAU;mBAAuB;;QAEvC,qBAAqB,OAAO,SAAS,KACpC,2CAAC;SAAI,WAAU;mBAA0B;;;UAG7C,2CAAC;OAAI,cAAW;OAAU,WAAU;;;KAIvC,kBAAkB,2CAAC;MAAI,WAAU;gBAA2B;;KAE5D,qBAAqB,2CAAC;MAAI,WAAU;gBAA8B;;KAElE,CAAC,WAAW,CAAC,kBAAkB,CAAC,qBAC/B,2CAAC;MAAI,WAAW,kBAAkB,eAAe,UAAU,sBAAsB;MAC9E"}

package/dist/cjs/react/index.js

@@ -19,11 +19,11 @@ const require_types = require('./components/AccountMenuButton/types.js');
 const require_QRCodeScanner = require('./components/QRCodeScanner.js');
 const require_index$2 = require('./components/AccountMenuButton/index.js');
 const require_ShowQRCode = require('./components/ShowQRCode2.js');
+const require_QRCodeIcon = require('./components/QRCodeIcon.js');
+const require_authMenuTypes = require('./components/PasskeyAuthMenu/authMenuTypes.js');
 const require_skeleton = require('./components/PasskeyAuthMenu/skeleton.js');
 const require_preload = require('./components/PasskeyAuthMenu/preload.js');
 const require_shell = require('./components/PasskeyAuthMenu/shell.js');
-const require_authMenuTypes = require('./components/PasskeyAuthMenu/authMenuTypes.js');
-const require_QRCodeIcon = require('./components/QRCodeIcon.js');
 const require_client = require('./components/PasskeyAuthMenu/client.js');
 
 exports.AccountMenuButton = require_index$2.AccountMenuButton;

package/dist/esm/react/components/PasskeyAuthMenu/{PasskeyAuthMenu-qTHAv58Z.css → PasskeyAuthMenu-BihXvuII.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-qTHAv58Z.css.map*/
+/*# sourceMappingURL=PasskeyAuthMenu-BihXvuII.css.map*/